diff --git a/feed_rss_created.xml b/feed_rss_created.xml
index 4c45d8dc23..c29c3adfa5 100644
--- a/feed_rss_created.xml
+++ b/feed_rss_created.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"> <channel><title>Textual</title><link>https://textual.textualize.io/</link><atom:link href="https://textual.textualize.io/feed_rss_created.xml" rel="self" type="application/rss+xml" /><docs>https://github.com/textualize/textual/</docs><language>en</language> <pubDate>Fri, 30 Aug 2024 15:27:42 -0000</pubDate> <lastBuildDate>Fri, 30 Aug 2024 15:27:42 -0000</lastBuildDate> <ttl>1440</ttl> <generator>MkDocs RSS plugin - v1.12.2</generator> <item> <title>Behind the Curtain of Inline Terminal Applications</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Behind the Curtain of Inline Terminal Applications&lt;/h1&gt;&lt;p&gt;Textual recently added the ability to run &lt;em&gt;inline&lt;/em&gt; terminal apps.You can see this in action if you run the &lt;a href=&#34;https://github.com/Textualize/textual/blob/main/examples/calculator.py&#34;&gt;calculator example&lt;/a&gt;:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Inline Calculator&#34; src=&#34;../images/calcinline.png&#34;&gt;&lt;/p&gt;&lt;p&gt;The application appears directly under the prompt, rather than occupying the full height of the screen&amp;mdash;which is more typical of TUI applications.You can interact with this calculator using keys &lt;em&gt;or&lt;/em&gt; the mouse.When you press ++ctrl+c++ the calculator disappears and returns you to the prompt.&lt;/p&gt;&lt;p&gt;Here&#39;s another app that creates an inline code editor:&lt;/p&gt;&lt;p&gt;=== &#34;Video&#34;&lt;/p&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div class=&#34;video-wrapper&#34;&amp;gt; &amp;lt;iframe width=&#34;852&#34; height=&#34;525&#34; src=&#34;https://www.youtube.com/embed/Dt70oSID1DY&#34; title=&#34;Inline app&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;=== &#34;inline.py&#34; ```python from textual.app import App, ComposeResult from textual.widgets import TextArea&lt;/p&gt;&lt;pre&gt;&lt;code&gt;class InlineApp(App): CSS = &#34;&#34;&#34; TextArea { height: auto; max-height: 50vh; } &#34;&#34;&#34; def compose(self) -&amp;gt; ComposeResult: yield TextArea(language=&#34;python&#34;)if __name__ == &#34;__main__&#34;: InlineApp().run(inline=True)```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;This post will cover some of what goes on under the hood to make such inline apps work.&lt;/p&gt;&lt;p&gt;It&#39;s not going to go in to too much detail.I&#39;m assuming most readers will be more interested in a birds-eye view rather than all the gory details.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</link> <pubDate>Sat, 20 Apr 2024 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</guid> </item> <item> <title>Remote memory profiling with Memray</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Remote memory profiling with Memray&lt;/h1&gt;&lt;p&gt;&lt;a href=&#34;https://github.com/bloomberg/memray&#34;&gt;Memray&lt;/a&gt; is a memory profiler for Python, built by some very smart devs at Bloomberg.It is a fantastic tool to identify memory leaks in your code or other libraries (down to the C level)!&lt;/p&gt;&lt;p&gt;They recently added a &lt;a href=&#34;https://github.com/textualize/textual/&#34;&gt;Textual&lt;/a&gt; interface which looks amazing, and lets you monitor your process right from the terminal:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Memray&#34; src=&#34;https://raw.githubusercontent.com/bloomberg/memray/main/docs/_static/images/live_animated.webp&#34;&gt;&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</link> <pubDate>Tue, 20 Feb 2024 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</guid> </item> <item> <title>File magic with the Python standard library</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;File magic with the Python standard library&lt;/h1&gt;&lt;p&gt;I recently published &lt;a href=&#34;https://github.com/textualize/toolong&#34;&gt;Toolong&lt;/a&gt;, an app for viewing log files.There were some interesting technical challenges in building Toolong that I&#39;d like to cover in this post.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</link> <pubDate>Sun, 11 Feb 2024 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</guid> </item> <item> <title>Announcing textual-plotext</title> <author>davep</author> <category>DevLog</category> <description>&lt;h1&gt;Announcing textual-plotext&lt;/h1&gt;&lt;p&gt;It&#39;s no surprise that a common question on the &lt;a href=&#34;https://discord.gg/Enf6Z3qhVr&#34;&gt;Textual Discordserver&lt;/a&gt; is how to go about producing plots inthe terminal. A popular solution that has been suggested is&lt;a href=&#34;https://github.com/piccolomo/plotext&#34;&gt;Plotext&lt;/a&gt;. While Plotext doesn&#39;tdirectly support Textual, it is &lt;a href=&#34;https://github.com/piccolomo/plotext/blob/master/readme/environments.md#rich&#34;&gt;easy to use withRich&lt;/a&gt;and, because of this, we wanted to make it just as easy to use in yourTextual applications.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</link> <pubDate>Wed, 04 Oct 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</guid> </item> <item> <title>Textual 0.38.0 adds a syntax aware TextArea</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.38.0 adds a syntax aware TextArea&lt;/h1&gt;&lt;p&gt;This is the second big feature release this month after last week&#39;s &lt;a href=&#34;./release0.37.0.md&#34;&gt;command palette&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</link> <pubDate>Thu, 21 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</guid> </item> <item> <title>Things I learned while building Textual&#39;s TextArea</title> <author>darrenburns</author> <category>DevLog</category> <description>&lt;h1&gt;Things I learned building a text editor for the terminal&lt;/h1&gt;&lt;p&gt;&lt;code&gt;TextArea&lt;/code&gt; is the latest widget to be added to Textual&#39;s &lt;a href=&#34;https://textual.textualize.io/widget_gallery/&#34;&gt;growing collection&lt;/a&gt;.It provides a multi-line space to edit text, and features optional syntax highlighting for a selection of languages.&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;text-area-welcome.gif&#34; src=&#34;../images/text-area-learnings/text-area-welcome.gif&#34;&gt;&lt;/p&gt;&lt;p&gt;Adding a &lt;code&gt;TextArea&lt;/code&gt; to your Textual app is as simple as adding this to your &lt;code&gt;compose&lt;/code&gt; method:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea()&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Enabling syntax highlighting for a language is as simple as:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea(language=&#34;python&#34;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Working on the &lt;code&gt;TextArea&lt;/code&gt; widget for Textual taught me a lot about Python and my generalapproach to software engineering. It gave me an appreciation for the subtle functionality behindthe editors we use on a daily basis — features we may not even notice, despitesome engineer spending hours perfecting it to provide a small boost to our development experience.&lt;/p&gt;&lt;p&gt;This post is a tour of some of these learnings.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</link> <pubDate>Mon, 18 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</guid> </item> <item> <title>Textual 0.37.0 adds a command palette</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.37.0 adds a command palette&lt;/h1&gt;&lt;p&gt;Textual version 0.37.0 has landed!The highlight of this release is the new command palette.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</link> <pubDate>Fri, 15 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</guid> </item> <item> <title>What is Textual Web?</title> <author>willmcgugan</author> <category>News</category> <description>&lt;h1&gt;What is Textual Web?&lt;/h1&gt;&lt;p&gt;If you know us, you will know that we are the team behind &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt; &amp;mdash; two popular Python libraries that work magic in the terminal.&lt;/p&gt;&lt;p&gt;!!! note&lt;/p&gt;&lt;pre&gt;&lt;code&gt;Not to mention [Rich-CLI](https://github.com/Textualize/rich-cli), [Trogon](https://github.com/Textualize/trogon), and [Frogmouth](https://github.com/Textualize/frogmouth)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Today we are adding one project more to that lineup: &lt;a href=&#34;https://github.com/Textualize/textual-web&#34;&gt;textual-web&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</link> <pubDate>Wed, 06 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</guid> </item> <item> <title>Pull Requests are cake or puppies</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Pull Requests are cake or puppies&lt;/h1&gt;&lt;p&gt;Broadly speaking, there are two types of contributions you can make to an Open Source project.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</link> <pubDate>Sat, 29 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</guid> </item> <item> <title>Using Rich Inspect to interrogate Python objects</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Using Rich Inspect to interrogate Python objects&lt;/h1&gt;&lt;p&gt;The &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; library has a few functions that are admittedly a little out of scope for a terminal color library. One such function is &lt;code&gt;inspect&lt;/code&gt; which is so useful you may want to &lt;code&gt;pip install rich&lt;/code&gt; just for this feature.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</link> <pubDate>Thu, 27 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</guid> </item> <item> <title>Textual 0.30.0 adds desktop-style notifications</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.30.0 adds desktop-style notifications&lt;/h1&gt;&lt;p&gt;We have a new release of Textual to talk about, but before that I&#39;d like to cover a little Textual news.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</link> <pubDate>Mon, 17 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</guid> </item> <item> <title>Textual 0.29.0 refactors dev tools</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.29.0 refactors dev tools&lt;/h1&gt;&lt;p&gt;It&#39;s been a slow week or two at Textualize, with Textual devs taking well-earned annual leave, but we still managed to get a new version out.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</link> <pubDate>Mon, 03 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</guid> </item> <item> <title>To TUI or not to TUI</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;To TUI or not to TUI&lt;/h1&gt;&lt;p&gt;Tech moves pretty fast.If you don’t stop and look around once in a while, you could miss it.And yet some technology feels like it has been around forever.&lt;/p&gt;&lt;p&gt;Terminals are one of those forever-technologies.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</link> <pubDate>Tue, 06 Jun 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</guid> </item> <item> <title>Textual adds Sparklines, Selection list, Input validation, and tool tips</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual adds Sparklines, Selection list, Input validation, and tool tips&lt;/h1&gt;&lt;p&gt;It&#39;s been 12 days since the last Textual release, which is longer than our usual release cycle of a week.&lt;/p&gt;&lt;p&gt;We&#39;ve been a little distracted with our &#34;dogfood&#34; projects: &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/trogon&#34;&gt;Trogon&lt;/a&gt;. Both of which hit 1000 Github stars in 24 hours. We will be maintaining / updating those, but it is business as usual for this Textual release (and it&#39;s a big one). We have such sights to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</link> <pubDate>Thu, 01 Jun 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</guid> </item> <item> <title>Textual 0.24.0 adds a Select control</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.24.0 adds a Select control&lt;/h1&gt;&lt;p&gt;Coming just 5 days after the last release, we have version 0.24.0 which we are crowning the King of Textual releases.At least until it is deposed by version 0.25.0.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</link> <pubDate>Mon, 08 May 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</guid> </item> <item> <title>Textual 0.23.0 improves message handling</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.23.0 improves message handling&lt;/h1&gt;&lt;p&gt;It&#39;s been a busy couple of weeks at Textualize.We&#39;ve been building apps with &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt;, as part of our &lt;em&gt;dog-fooding&lt;/em&gt; week.The first app, &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt;, was released at the weekend and already has 1K GitHub stars!Expect two more such apps this month.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</link> <pubDate>Wed, 03 May 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</guid> </item> <item> <title>Textual 0.18.0 adds API for managing concurrent workers</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.18.0 adds API for managing concurrent workers&lt;/h1&gt;&lt;p&gt;Less than a week since the last release, and we have a new API to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</link> <pubDate>Tue, 04 Apr 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</guid> </item> <item> <title>Textual 0.17.0 adds translucent screens and Option List</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.17.0 adds translucent screens and Option List&lt;/h1&gt;&lt;p&gt;This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).&lt;/p&gt;&lt;p&gt;What&#39;s new in this release?&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</link> <pubDate>Wed, 29 Mar 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</guid> </item> <item> <title>Textual 0.16.0 adds TabbedContent and border titles</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.16.0 adds TabbedContent and border titles&lt;/h1&gt;&lt;p&gt;Textual 0.16.0 lands 9 days after the previous release. We have some new features to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</link> <pubDate>Wed, 22 Mar 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</guid> </item> <item> <title>No-async async with Python</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;No-async async with Python&lt;/h1&gt;&lt;p&gt;A (reasonable) criticism of async is that it tends to proliferate in your code. In order to &lt;code&gt;await&lt;/code&gt; something, your functions must be &lt;code&gt;async&lt;/code&gt; all the way up the call-stack. This tends to result in you making things &lt;code&gt;async&lt;/code&gt; just to support that one call that needs it or, worse, adding &lt;code&gt;async&lt;/code&gt; just-in-case. Given that going from &lt;code&gt;def&lt;/code&gt; to &lt;code&gt;async def&lt;/code&gt; is a breaking change there is a strong incentive to go straight there.&lt;/p&gt;&lt;p&gt;Before you know it, you have adopted a policy of &#34;async all the things&#34;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/15/no-async-async-with-python/</link> <pubDate>Wed, 15 Mar 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/15/no-async-async-with-python/</guid> </item> </channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"> <channel><title>Textual</title><link>https://textual.textualize.io/</link><atom:link href="https://textual.textualize.io/feed_rss_created.xml" rel="self" type="application/rss+xml" /><docs>https://github.com/textualize/textual/</docs><language>en</language> <pubDate>Fri, 30 Aug 2024 17:49:37 -0000</pubDate> <lastBuildDate>Fri, 30 Aug 2024 17:49:37 -0000</lastBuildDate> <ttl>1440</ttl> <generator>MkDocs RSS plugin - v1.12.2</generator> <item> <title>Behind the Curtain of Inline Terminal Applications</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Behind the Curtain of Inline Terminal Applications&lt;/h1&gt;&lt;p&gt;Textual recently added the ability to run &lt;em&gt;inline&lt;/em&gt; terminal apps.You can see this in action if you run the &lt;a href=&#34;https://github.com/Textualize/textual/blob/main/examples/calculator.py&#34;&gt;calculator example&lt;/a&gt;:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Inline Calculator&#34; src=&#34;../images/calcinline.png&#34;&gt;&lt;/p&gt;&lt;p&gt;The application appears directly under the prompt, rather than occupying the full height of the screen&amp;mdash;which is more typical of TUI applications.You can interact with this calculator using keys &lt;em&gt;or&lt;/em&gt; the mouse.When you press ++ctrl+c++ the calculator disappears and returns you to the prompt.&lt;/p&gt;&lt;p&gt;Here&#39;s another app that creates an inline code editor:&lt;/p&gt;&lt;p&gt;=== &#34;Video&#34;&lt;/p&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div class=&#34;video-wrapper&#34;&amp;gt; &amp;lt;iframe width=&#34;852&#34; height=&#34;525&#34; src=&#34;https://www.youtube.com/embed/Dt70oSID1DY&#34; title=&#34;Inline app&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;=== &#34;inline.py&#34; ```python from textual.app import App, ComposeResult from textual.widgets import TextArea&lt;/p&gt;&lt;pre&gt;&lt;code&gt;class InlineApp(App): CSS = &#34;&#34;&#34; TextArea { height: auto; max-height: 50vh; } &#34;&#34;&#34; def compose(self) -&amp;gt; ComposeResult: yield TextArea(language=&#34;python&#34;)if __name__ == &#34;__main__&#34;: InlineApp().run(inline=True)```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;This post will cover some of what goes on under the hood to make such inline apps work.&lt;/p&gt;&lt;p&gt;It&#39;s not going to go in to too much detail.I&#39;m assuming most readers will be more interested in a birds-eye view rather than all the gory details.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</link> <pubDate>Sat, 20 Apr 2024 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</guid> </item> <item> <title>Remote memory profiling with Memray</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Remote memory profiling with Memray&lt;/h1&gt;&lt;p&gt;&lt;a href=&#34;https://github.com/bloomberg/memray&#34;&gt;Memray&lt;/a&gt; is a memory profiler for Python, built by some very smart devs at Bloomberg.It is a fantastic tool to identify memory leaks in your code or other libraries (down to the C level)!&lt;/p&gt;&lt;p&gt;They recently added a &lt;a href=&#34;https://github.com/textualize/textual/&#34;&gt;Textual&lt;/a&gt; interface which looks amazing, and lets you monitor your process right from the terminal:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Memray&#34; src=&#34;https://raw.githubusercontent.com/bloomberg/memray/main/docs/_static/images/live_animated.webp&#34;&gt;&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</link> <pubDate>Tue, 20 Feb 2024 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</guid> </item> <item> <title>File magic with the Python standard library</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;File magic with the Python standard library&lt;/h1&gt;&lt;p&gt;I recently published &lt;a href=&#34;https://github.com/textualize/toolong&#34;&gt;Toolong&lt;/a&gt;, an app for viewing log files.There were some interesting technical challenges in building Toolong that I&#39;d like to cover in this post.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</link> <pubDate>Sun, 11 Feb 2024 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</guid> </item> <item> <title>Announcing textual-plotext</title> <author>davep</author> <category>DevLog</category> <description>&lt;h1&gt;Announcing textual-plotext&lt;/h1&gt;&lt;p&gt;It&#39;s no surprise that a common question on the &lt;a href=&#34;https://discord.gg/Enf6Z3qhVr&#34;&gt;Textual Discordserver&lt;/a&gt; is how to go about producing plots inthe terminal. A popular solution that has been suggested is&lt;a href=&#34;https://github.com/piccolomo/plotext&#34;&gt;Plotext&lt;/a&gt;. While Plotext doesn&#39;tdirectly support Textual, it is &lt;a href=&#34;https://github.com/piccolomo/plotext/blob/master/readme/environments.md#rich&#34;&gt;easy to use withRich&lt;/a&gt;and, because of this, we wanted to make it just as easy to use in yourTextual applications.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</link> <pubDate>Wed, 04 Oct 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</guid> </item> <item> <title>Textual 0.38.0 adds a syntax aware TextArea</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.38.0 adds a syntax aware TextArea&lt;/h1&gt;&lt;p&gt;This is the second big feature release this month after last week&#39;s &lt;a href=&#34;./release0.37.0.md&#34;&gt;command palette&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</link> <pubDate>Thu, 21 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</guid> </item> <item> <title>Things I learned while building Textual&#39;s TextArea</title> <author>darrenburns</author> <category>DevLog</category> <description>&lt;h1&gt;Things I learned building a text editor for the terminal&lt;/h1&gt;&lt;p&gt;&lt;code&gt;TextArea&lt;/code&gt; is the latest widget to be added to Textual&#39;s &lt;a href=&#34;https://textual.textualize.io/widget_gallery/&#34;&gt;growing collection&lt;/a&gt;.It provides a multi-line space to edit text, and features optional syntax highlighting for a selection of languages.&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;text-area-welcome.gif&#34; src=&#34;../images/text-area-learnings/text-area-welcome.gif&#34;&gt;&lt;/p&gt;&lt;p&gt;Adding a &lt;code&gt;TextArea&lt;/code&gt; to your Textual app is as simple as adding this to your &lt;code&gt;compose&lt;/code&gt; method:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea()&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Enabling syntax highlighting for a language is as simple as:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea(language=&#34;python&#34;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Working on the &lt;code&gt;TextArea&lt;/code&gt; widget for Textual taught me a lot about Python and my generalapproach to software engineering. It gave me an appreciation for the subtle functionality behindthe editors we use on a daily basis — features we may not even notice, despitesome engineer spending hours perfecting it to provide a small boost to our development experience.&lt;/p&gt;&lt;p&gt;This post is a tour of some of these learnings.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</link> <pubDate>Mon, 18 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</guid> </item> <item> <title>Textual 0.37.0 adds a command palette</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.37.0 adds a command palette&lt;/h1&gt;&lt;p&gt;Textual version 0.37.0 has landed!The highlight of this release is the new command palette.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</link> <pubDate>Fri, 15 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</guid> </item> <item> <title>What is Textual Web?</title> <author>willmcgugan</author> <category>News</category> <description>&lt;h1&gt;What is Textual Web?&lt;/h1&gt;&lt;p&gt;If you know us, you will know that we are the team behind &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt; &amp;mdash; two popular Python libraries that work magic in the terminal.&lt;/p&gt;&lt;p&gt;!!! note&lt;/p&gt;&lt;pre&gt;&lt;code&gt;Not to mention [Rich-CLI](https://github.com/Textualize/rich-cli), [Trogon](https://github.com/Textualize/trogon), and [Frogmouth](https://github.com/Textualize/frogmouth)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Today we are adding one project more to that lineup: &lt;a href=&#34;https://github.com/Textualize/textual-web&#34;&gt;textual-web&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</link> <pubDate>Wed, 06 Sep 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</guid> </item> <item> <title>Pull Requests are cake or puppies</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Pull Requests are cake or puppies&lt;/h1&gt;&lt;p&gt;Broadly speaking, there are two types of contributions you can make to an Open Source project.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</link> <pubDate>Sat, 29 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</guid> </item> <item> <title>Using Rich Inspect to interrogate Python objects</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Using Rich Inspect to interrogate Python objects&lt;/h1&gt;&lt;p&gt;The &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; library has a few functions that are admittedly a little out of scope for a terminal color library. One such function is &lt;code&gt;inspect&lt;/code&gt; which is so useful you may want to &lt;code&gt;pip install rich&lt;/code&gt; just for this feature.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</link> <pubDate>Thu, 27 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</guid> </item> <item> <title>Textual 0.30.0 adds desktop-style notifications</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.30.0 adds desktop-style notifications&lt;/h1&gt;&lt;p&gt;We have a new release of Textual to talk about, but before that I&#39;d like to cover a little Textual news.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</link> <pubDate>Mon, 17 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</guid> </item> <item> <title>Textual 0.29.0 refactors dev tools</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.29.0 refactors dev tools&lt;/h1&gt;&lt;p&gt;It&#39;s been a slow week or two at Textualize, with Textual devs taking well-earned annual leave, but we still managed to get a new version out.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</link> <pubDate>Mon, 03 Jul 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</guid> </item> <item> <title>To TUI or not to TUI</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;To TUI or not to TUI&lt;/h1&gt;&lt;p&gt;Tech moves pretty fast.If you don’t stop and look around once in a while, you could miss it.And yet some technology feels like it has been around forever.&lt;/p&gt;&lt;p&gt;Terminals are one of those forever-technologies.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</link> <pubDate>Tue, 06 Jun 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</guid> </item> <item> <title>Textual adds Sparklines, Selection list, Input validation, and tool tips</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual adds Sparklines, Selection list, Input validation, and tool tips&lt;/h1&gt;&lt;p&gt;It&#39;s been 12 days since the last Textual release, which is longer than our usual release cycle of a week.&lt;/p&gt;&lt;p&gt;We&#39;ve been a little distracted with our &#34;dogfood&#34; projects: &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/trogon&#34;&gt;Trogon&lt;/a&gt;. Both of which hit 1000 Github stars in 24 hours. We will be maintaining / updating those, but it is business as usual for this Textual release (and it&#39;s a big one). We have such sights to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</link> <pubDate>Thu, 01 Jun 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</guid> </item> <item> <title>Textual 0.24.0 adds a Select control</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.24.0 adds a Select control&lt;/h1&gt;&lt;p&gt;Coming just 5 days after the last release, we have version 0.24.0 which we are crowning the King of Textual releases.At least until it is deposed by version 0.25.0.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</link> <pubDate>Mon, 08 May 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</guid> </item> <item> <title>Textual 0.23.0 improves message handling</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.23.0 improves message handling&lt;/h1&gt;&lt;p&gt;It&#39;s been a busy couple of weeks at Textualize.We&#39;ve been building apps with &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt;, as part of our &lt;em&gt;dog-fooding&lt;/em&gt; week.The first app, &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt;, was released at the weekend and already has 1K GitHub stars!Expect two more such apps this month.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</link> <pubDate>Wed, 03 May 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</guid> </item> <item> <title>Textual 0.18.0 adds API for managing concurrent workers</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.18.0 adds API for managing concurrent workers&lt;/h1&gt;&lt;p&gt;Less than a week since the last release, and we have a new API to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</link> <pubDate>Tue, 04 Apr 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</guid> </item> <item> <title>Textual 0.17.0 adds translucent screens and Option List</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.17.0 adds translucent screens and Option List&lt;/h1&gt;&lt;p&gt;This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).&lt;/p&gt;&lt;p&gt;What&#39;s new in this release?&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</link> <pubDate>Wed, 29 Mar 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</guid> </item> <item> <title>Textual 0.16.0 adds TabbedContent and border titles</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.16.0 adds TabbedContent and border titles&lt;/h1&gt;&lt;p&gt;Textual 0.16.0 lands 9 days after the previous release. We have some new features to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</link> <pubDate>Wed, 22 Mar 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</guid> </item> <item> <title>No-async async with Python</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;No-async async with Python&lt;/h1&gt;&lt;p&gt;A (reasonable) criticism of async is that it tends to proliferate in your code. In order to &lt;code&gt;await&lt;/code&gt; something, your functions must be &lt;code&gt;async&lt;/code&gt; all the way up the call-stack. This tends to result in you making things &lt;code&gt;async&lt;/code&gt; just to support that one call that needs it or, worse, adding &lt;code&gt;async&lt;/code&gt; just-in-case. Given that going from &lt;code&gt;def&lt;/code&gt; to &lt;code&gt;async def&lt;/code&gt; is a breaking change there is a strong incentive to go straight there.&lt;/p&gt;&lt;p&gt;Before you know it, you have adopted a policy of &#34;async all the things&#34;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/15/no-async-async-with-python/</link> <pubDate>Wed, 15 Mar 2023 00:00:00 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_created.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/15/no-async-async-with-python/</guid> </item> </channel></rss>
\ No newline at end of file
diff --git a/feed_rss_updated.xml b/feed_rss_updated.xml
index dd9ce16198..c8dabe1f29 100644
--- a/feed_rss_updated.xml
+++ b/feed_rss_updated.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"> <channel><title>Textual</title><link>https://textual.textualize.io/</link><atom:link href="https://textual.textualize.io/feed_rss_updated.xml" rel="self" type="application/rss+xml" /><docs>https://github.com/textualize/textual/</docs><language>en</language> <pubDate>Fri, 30 Aug 2024 15:27:42 -0000</pubDate> <lastBuildDate>Fri, 30 Aug 2024 15:27:42 -0000</lastBuildDate> <ttl>1440</ttl> <generator>MkDocs RSS plugin - v1.12.2</generator> <item> <title>Behind the Curtain of Inline Terminal Applications</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Behind the Curtain of Inline Terminal Applications&lt;/h1&gt;&lt;p&gt;Textual recently added the ability to run &lt;em&gt;inline&lt;/em&gt; terminal apps.You can see this in action if you run the &lt;a href=&#34;https://github.com/Textualize/textual/blob/main/examples/calculator.py&#34;&gt;calculator example&lt;/a&gt;:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Inline Calculator&#34; src=&#34;../images/calcinline.png&#34;&gt;&lt;/p&gt;&lt;p&gt;The application appears directly under the prompt, rather than occupying the full height of the screen&amp;mdash;which is more typical of TUI applications.You can interact with this calculator using keys &lt;em&gt;or&lt;/em&gt; the mouse.When you press ++ctrl+c++ the calculator disappears and returns you to the prompt.&lt;/p&gt;&lt;p&gt;Here&#39;s another app that creates an inline code editor:&lt;/p&gt;&lt;p&gt;=== &#34;Video&#34;&lt;/p&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div class=&#34;video-wrapper&#34;&amp;gt; &amp;lt;iframe width=&#34;852&#34; height=&#34;525&#34; src=&#34;https://www.youtube.com/embed/Dt70oSID1DY&#34; title=&#34;Inline app&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;=== &#34;inline.py&#34; ```python  from textual.app import App, ComposeResult from textual.widgets import TextArea&lt;/p&gt;&lt;pre&gt;&lt;code&gt;class InlineApp(App): CSS = &#34;&#34;&#34; TextArea { height: auto; max-height: 50vh; } &#34;&#34;&#34; def compose(self) -&amp;gt; ComposeResult: yield TextArea(language=&#34;python&#34;)if __name__ == &#34;__main__&#34;: InlineApp().run(inline=True)```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;This post will cover some of what goes on under the hood to make such inline apps work.&lt;/p&gt;&lt;p&gt;It&#39;s not going to go in to too much detail.I&#39;m assuming most readers will be more interested in a birds-eye view rather than all the gory details.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</link> <pubDate>Sun, 21 Apr 2024 13:21:53 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</guid> </item> <item> <title>File magic with the Python standard library</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;File magic with the Python standard library&lt;/h1&gt;&lt;p&gt;I recently published &lt;a href=&#34;https://github.com/textualize/toolong&#34;&gt;Toolong&lt;/a&gt;, an app for viewing log files.There were some interesting technical challenges in building Toolong that I&#39;d like to cover in this post.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</link> <pubDate>Sun, 03 Mar 2024 13:32:04 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</guid> </item> <item> <title>Remote memory profiling with Memray</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Remote memory profiling with Memray&lt;/h1&gt;&lt;p&gt;&lt;a href=&#34;https://github.com/bloomberg/memray&#34;&gt;Memray&lt;/a&gt; is a memory profiler for Python, built by some very smart devs at Bloomberg.It is a fantastic tool to identify memory leaks in your code or other libraries (down to the C level)!&lt;/p&gt;&lt;p&gt;They recently added a &lt;a href=&#34;https://github.com/textualize/textual/&#34;&gt;Textual&lt;/a&gt; interface which looks amazing, and lets you monitor your process right from the terminal:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Memray&#34; src=&#34;https://raw.githubusercontent.com/bloomberg/memray/main/docs/_static/images/live_animated.webp&#34;&gt;&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</link> <pubDate>Tue, 20 Feb 2024 15:54:07 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</guid> </item> <item> <title>Announcing textual-plotext</title> <author>davep</author> <category>DevLog</category> <description>&lt;h1&gt;Announcing textual-plotext&lt;/h1&gt;&lt;p&gt;It&#39;s no surprise that a common question on the &lt;a href=&#34;https://discord.gg/Enf6Z3qhVr&#34;&gt;Textual Discordserver&lt;/a&gt; is how to go about producing plots inthe terminal. A popular solution that has been suggested is&lt;a href=&#34;https://github.com/piccolomo/plotext&#34;&gt;Plotext&lt;/a&gt;. While Plotext doesn&#39;tdirectly support Textual, it is &lt;a href=&#34;https://github.com/piccolomo/plotext/blob/master/readme/environments.md#rich&#34;&gt;easy to use withRich&lt;/a&gt;and, because of this, we wanted to make it just as easy to use in yourTextual applications.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</link> <pubDate>Sat, 07 Oct 2023 13:42:11 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</guid> </item> <item> <title>Things I learned while building Textual&#39;s TextArea</title> <author>darrenburns</author> <category>DevLog</category> <description>&lt;h1&gt;Things I learned building a text editor for the terminal&lt;/h1&gt;&lt;p&gt;&lt;code&gt;TextArea&lt;/code&gt; is the latest widget to be added to Textual&#39;s &lt;a href=&#34;https://textual.textualize.io/widget_gallery/&#34;&gt;growing collection&lt;/a&gt;.It provides a multi-line space to edit text, and features optional syntax highlighting for a selection of languages.&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;text-area-welcome.gif&#34; src=&#34;../images/text-area-learnings/text-area-welcome.gif&#34;&gt;&lt;/p&gt;&lt;p&gt;Adding a &lt;code&gt;TextArea&lt;/code&gt; to your Textual app is as simple as adding this to your &lt;code&gt;compose&lt;/code&gt; method:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea()&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Enabling syntax highlighting for a language is as simple as:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea(language=&#34;python&#34;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Working on the &lt;code&gt;TextArea&lt;/code&gt; widget for Textual taught me a lot about Python and my generalapproach to software engineering. It gave me an appreciation for the subtle functionality behindthe editors we use on a daily basis — features we may not even notice, despitesome engineer spending hours perfecting it to provide a small boost to our development experience.&lt;/p&gt;&lt;p&gt;This post is a tour of some of these learnings.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</link> <pubDate>Sat, 23 Sep 2023 14:06:20 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</guid> </item> <item> <title>Textual 0.38.0 adds a syntax aware TextArea</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.38.0 adds a syntax aware TextArea&lt;/h1&gt;&lt;p&gt;This is the second big feature release this month after last week&#39;s &lt;a href=&#34;./release0.37.0.md&#34;&gt;command palette&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</link> <pubDate>Thu, 21 Sep 2023 13:27:43 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</guid> </item> <item> <title>Textual 0.37.0 adds a command palette</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.37.0 adds a command palette&lt;/h1&gt;&lt;p&gt;Textual version 0.37.0 has landed!The highlight of this release is the new command palette.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</link> <pubDate>Fri, 15 Sep 2023 17:01:09 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</guid> </item> <item> <title>What is Textual Web?</title> <author>willmcgugan</author> <category>News</category> <description>&lt;h1&gt;What is Textual Web?&lt;/h1&gt;&lt;p&gt;If you know us, you will know that we are the team behind &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt; &amp;mdash; two popular Python libraries that work magic in the terminal.&lt;/p&gt;&lt;p&gt;!!! note&lt;/p&gt;&lt;pre&gt;&lt;code&gt;Not to mention [Rich-CLI](https://github.com/Textualize/rich-cli), [Trogon](https://github.com/Textualize/trogon), and [Frogmouth](https://github.com/Textualize/frogmouth)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Today we are adding one project more to that lineup: &lt;a href=&#34;https://github.com/Textualize/textual-web&#34;&gt;textual-web&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</link> <pubDate>Wed, 06 Sep 2023 17:53:31 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</guid> </item> <item> <title>Pull Requests are cake or puppies</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Pull Requests are cake or puppies&lt;/h1&gt;&lt;p&gt;Broadly speaking, there are two types of contributions you can make to an Open Source project.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</link> <pubDate>Sat, 29 Jul 2023 17:05:04 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</guid> </item> <item> <title>Using Rich Inspect to interrogate Python objects</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Using Rich Inspect to interrogate Python objects&lt;/h1&gt;&lt;p&gt;The &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; library has a few functions that are admittedly a little out of scope for a terminal color library. One such function is &lt;code&gt;inspect&lt;/code&gt; which is so useful you may want to &lt;code&gt;pip install rich&lt;/code&gt; just for this feature.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</link> <pubDate>Thu, 27 Jul 2023 12:34:46 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</guid> </item> <item> <title>Textual 0.30.0 adds desktop-style notifications</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.30.0 adds desktop-style notifications&lt;/h1&gt;&lt;p&gt;We have a new release of Textual to talk about, but before that I&#39;d like to cover a little Textual news.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</link> <pubDate>Mon, 17 Jul 2023 14:08:32 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</guid> </item> <item> <title>Textual 0.29.0 refactors dev tools</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.29.0 refactors dev tools&lt;/h1&gt;&lt;p&gt;It&#39;s been a slow week or two at Textualize, with Textual devs taking well-earned annual leave, but we still managed to get a new version out.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</link> <pubDate>Mon, 03 Jul 2023 16:09:24 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</guid> </item> <item> <title>To TUI or not to TUI</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;To TUI or not to TUI&lt;/h1&gt;&lt;p&gt;Tech moves pretty fast.If you don’t stop and look around once in a while, you could miss it.And yet some technology feels like it has been around forever.&lt;/p&gt;&lt;p&gt;Terminals are one of those forever-technologies.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</link> <pubDate>Mon, 05 Jun 2023 17:51:19 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</guid> </item> <item> <title>Textual adds Sparklines, Selection list, Input validation, and tool tips</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual adds Sparklines, Selection list, Input validation, and tool tips&lt;/h1&gt;&lt;p&gt;It&#39;s been 12 days since the last Textual release, which is longer than our usual release cycle of a week.&lt;/p&gt;&lt;p&gt;We&#39;ve been a little distracted with our &#34;dogfood&#34; projects: &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/trogon&#34;&gt;Trogon&lt;/a&gt;. Both of which hit 1000 Github stars in 24 hours. We will be maintaining / updating those, but it is business as usual for this Textual release (and it&#39;s a big one). We have such sights to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</link> <pubDate>Thu, 01 Jun 2023 17:41:08 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</guid> </item> <item> <title>Textual 0.24.0 adds a Select control</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.24.0 adds a Select control&lt;/h1&gt;&lt;p&gt;Coming just 5 days after the last release, we have version 0.24.0 which we are crowning the King of Textual releases.At least until it is deposed by version 0.25.0.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</link> <pubDate>Thu, 01 Jun 2023 11:33:54 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</guid> </item> <item> <title>Textual 0.23.0 improves message handling</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.23.0 improves message handling&lt;/h1&gt;&lt;p&gt;It&#39;s been a busy couple of weeks at Textualize.We&#39;ve been building apps with &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt;, as part of our &lt;em&gt;dog-fooding&lt;/em&gt; week.The first app, &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt;, was released at the weekend and already has 1K GitHub stars!Expect two more such apps this month.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</link> <pubDate>Wed, 03 May 2023 13:22:22 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</guid> </item> <item> <title>Textual 0.11.0 adds a beautiful Markdown widget</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.11.0 adds a beautiful Markdown widget&lt;/h1&gt;&lt;p&gt;We released Textual 0.10.0 25 days ago, which is a little longer than our usual release cycle. What have we been up to?&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/</link> <pubDate>Sat, 08 Apr 2023 15:35:49 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/</guid> </item> <item> <title>Textual 0.18.0 adds API for managing concurrent workers</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.18.0 adds API for managing concurrent workers&lt;/h1&gt;&lt;p&gt;Less than a week since the last release, and we have a new API to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</link> <pubDate>Tue, 04 Apr 2023 13:12:51 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</guid> </item> <item> <title>Textual 0.17.0 adds translucent screens and Option List</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.17.0 adds translucent screens and Option List&lt;/h1&gt;&lt;p&gt;This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).&lt;/p&gt;&lt;p&gt;What&#39;s new in this release?&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</link> <pubDate>Wed, 29 Mar 2023 16:29:28 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</guid> </item> <item> <title>Textual 0.16.0 adds TabbedContent and border titles</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.16.0 adds TabbedContent and border titles&lt;/h1&gt;&lt;p&gt;Textual 0.16.0 lands 9 days after the previous release. We have some new features to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</link> <pubDate>Wed, 22 Mar 2023 13:52:31 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</guid> </item> </channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"> <channel><title>Textual</title><link>https://textual.textualize.io/</link><atom:link href="https://textual.textualize.io/feed_rss_updated.xml" rel="self" type="application/rss+xml" /><docs>https://github.com/textualize/textual/</docs><language>en</language> <pubDate>Fri, 30 Aug 2024 17:49:37 -0000</pubDate> <lastBuildDate>Fri, 30 Aug 2024 17:49:37 -0000</lastBuildDate> <ttl>1440</ttl> <generator>MkDocs RSS plugin - v1.12.2</generator> <item> <title>Behind the Curtain of Inline Terminal Applications</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Behind the Curtain of Inline Terminal Applications&lt;/h1&gt;&lt;p&gt;Textual recently added the ability to run &lt;em&gt;inline&lt;/em&gt; terminal apps.You can see this in action if you run the &lt;a href=&#34;https://github.com/Textualize/textual/blob/main/examples/calculator.py&#34;&gt;calculator example&lt;/a&gt;:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Inline Calculator&#34; src=&#34;../images/calcinline.png&#34;&gt;&lt;/p&gt;&lt;p&gt;The application appears directly under the prompt, rather than occupying the full height of the screen&amp;mdash;which is more typical of TUI applications.You can interact with this calculator using keys &lt;em&gt;or&lt;/em&gt; the mouse.When you press ++ctrl+c++ the calculator disappears and returns you to the prompt.&lt;/p&gt;&lt;p&gt;Here&#39;s another app that creates an inline code editor:&lt;/p&gt;&lt;p&gt;=== &#34;Video&#34;&lt;/p&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div class=&#34;video-wrapper&#34;&amp;gt; &amp;lt;iframe width=&#34;852&#34; height=&#34;525&#34; src=&#34;https://www.youtube.com/embed/Dt70oSID1DY&#34; title=&#34;Inline app&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;=== &#34;inline.py&#34; ```python  from textual.app import App, ComposeResult from textual.widgets import TextArea&lt;/p&gt;&lt;pre&gt;&lt;code&gt;class InlineApp(App): CSS = &#34;&#34;&#34; TextArea { height: auto; max-height: 50vh; } &#34;&#34;&#34; def compose(self) -&amp;gt; ComposeResult: yield TextArea(language=&#34;python&#34;)if __name__ == &#34;__main__&#34;: InlineApp().run(inline=True)```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;This post will cover some of what goes on under the hood to make such inline apps work.&lt;/p&gt;&lt;p&gt;It&#39;s not going to go in to too much detail.I&#39;m assuming most readers will be more interested in a birds-eye view rather than all the gory details.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</link> <pubDate>Sun, 21 Apr 2024 13:21:53 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/</guid> </item> <item> <title>File magic with the Python standard library</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;File magic with the Python standard library&lt;/h1&gt;&lt;p&gt;I recently published &lt;a href=&#34;https://github.com/textualize/toolong&#34;&gt;Toolong&lt;/a&gt;, an app for viewing log files.There were some interesting technical challenges in building Toolong that I&#39;d like to cover in this post.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</link> <pubDate>Sun, 03 Mar 2024 13:32:04 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/11/file-magic-with-the-python-standard-library/</guid> </item> <item> <title>Remote memory profiling with Memray</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Remote memory profiling with Memray&lt;/h1&gt;&lt;p&gt;&lt;a href=&#34;https://github.com/bloomberg/memray&#34;&gt;Memray&lt;/a&gt; is a memory profiler for Python, built by some very smart devs at Bloomberg.It is a fantastic tool to identify memory leaks in your code or other libraries (down to the C level)!&lt;/p&gt;&lt;p&gt;They recently added a &lt;a href=&#34;https://github.com/textualize/textual/&#34;&gt;Textual&lt;/a&gt; interface which looks amazing, and lets you monitor your process right from the terminal:&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;Memray&#34; src=&#34;https://raw.githubusercontent.com/bloomberg/memray/main/docs/_static/images/live_animated.webp&#34;&gt;&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</link> <pubDate>Tue, 20 Feb 2024 15:54:07 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2024/02/20/remote-memory-profiling-with-memray/</guid> </item> <item> <title>Announcing textual-plotext</title> <author>davep</author> <category>DevLog</category> <description>&lt;h1&gt;Announcing textual-plotext&lt;/h1&gt;&lt;p&gt;It&#39;s no surprise that a common question on the &lt;a href=&#34;https://discord.gg/Enf6Z3qhVr&#34;&gt;Textual Discordserver&lt;/a&gt; is how to go about producing plots inthe terminal. A popular solution that has been suggested is&lt;a href=&#34;https://github.com/piccolomo/plotext&#34;&gt;Plotext&lt;/a&gt;. While Plotext doesn&#39;tdirectly support Textual, it is &lt;a href=&#34;https://github.com/piccolomo/plotext/blob/master/readme/environments.md#rich&#34;&gt;easy to use withRich&lt;/a&gt;and, because of this, we wanted to make it just as easy to use in yourTextual applications.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</link> <pubDate>Sat, 07 Oct 2023 13:42:11 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/10/04/announcing-textual-plotext/</guid> </item> <item> <title>Things I learned while building Textual&#39;s TextArea</title> <author>darrenburns</author> <category>DevLog</category> <description>&lt;h1&gt;Things I learned building a text editor for the terminal&lt;/h1&gt;&lt;p&gt;&lt;code&gt;TextArea&lt;/code&gt; is the latest widget to be added to Textual&#39;s &lt;a href=&#34;https://textual.textualize.io/widget_gallery/&#34;&gt;growing collection&lt;/a&gt;.It provides a multi-line space to edit text, and features optional syntax highlighting for a selection of languages.&lt;/p&gt;&lt;p&gt;&lt;img alt=&#34;text-area-welcome.gif&#34; src=&#34;../images/text-area-learnings/text-area-welcome.gif&#34;&gt;&lt;/p&gt;&lt;p&gt;Adding a &lt;code&gt;TextArea&lt;/code&gt; to your Textual app is as simple as adding this to your &lt;code&gt;compose&lt;/code&gt; method:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea()&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Enabling syntax highlighting for a language is as simple as:&lt;/p&gt;&lt;p&gt;&lt;code&gt;pythonyield TextArea(language=&#34;python&#34;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Working on the &lt;code&gt;TextArea&lt;/code&gt; widget for Textual taught me a lot about Python and my generalapproach to software engineering. It gave me an appreciation for the subtle functionality behindthe editors we use on a daily basis — features we may not even notice, despitesome engineer spending hours perfecting it to provide a small boost to our development experience.&lt;/p&gt;&lt;p&gt;This post is a tour of some of these learnings.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</link> <pubDate>Sat, 23 Sep 2023 14:06:20 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/18/things-i-learned-while-building-textuals-textarea/</guid> </item> <item> <title>Textual 0.38.0 adds a syntax aware TextArea</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.38.0 adds a syntax aware TextArea&lt;/h1&gt;&lt;p&gt;This is the second big feature release this month after last week&#39;s &lt;a href=&#34;./release0.37.0.md&#34;&gt;command palette&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</link> <pubDate>Thu, 21 Sep 2023 13:27:43 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/</guid> </item> <item> <title>Textual 0.37.0 adds a command palette</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.37.0 adds a command palette&lt;/h1&gt;&lt;p&gt;Textual version 0.37.0 has landed!The highlight of this release is the new command palette.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</link> <pubDate>Fri, 15 Sep 2023 17:01:09 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/15/textual-0370-adds-a-command-palette/</guid> </item> <item> <title>What is Textual Web?</title> <author>willmcgugan</author> <category>News</category> <description>&lt;h1&gt;What is Textual Web?&lt;/h1&gt;&lt;p&gt;If you know us, you will know that we are the team behind &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt; &amp;mdash; two popular Python libraries that work magic in the terminal.&lt;/p&gt;&lt;p&gt;!!! note&lt;/p&gt;&lt;pre&gt;&lt;code&gt;Not to mention [Rich-CLI](https://github.com/Textualize/rich-cli), [Trogon](https://github.com/Textualize/trogon), and [Frogmouth](https://github.com/Textualize/frogmouth)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Today we are adding one project more to that lineup: &lt;a href=&#34;https://github.com/Textualize/textual-web&#34;&gt;textual-web&lt;/a&gt;.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</link> <pubDate>Wed, 06 Sep 2023 17:53:31 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/09/06/what-is-textual-web/</guid> </item> <item> <title>Pull Requests are cake or puppies</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Pull Requests are cake or puppies&lt;/h1&gt;&lt;p&gt;Broadly speaking, there are two types of contributions you can make to an Open Source project.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</link> <pubDate>Sat, 29 Jul 2023 17:05:04 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/29/pull-requests-are-cake-or-puppies/</guid> </item> <item> <title>Using Rich Inspect to interrogate Python objects</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;Using Rich Inspect to interrogate Python objects&lt;/h1&gt;&lt;p&gt;The &lt;a href=&#34;https://github.com/Textualize/rich&#34;&gt;Rich&lt;/a&gt; library has a few functions that are admittedly a little out of scope for a terminal color library. One such function is &lt;code&gt;inspect&lt;/code&gt; which is so useful you may want to &lt;code&gt;pip install rich&lt;/code&gt; just for this feature.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</link> <pubDate>Thu, 27 Jul 2023 12:34:46 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/</guid> </item> <item> <title>Textual 0.30.0 adds desktop-style notifications</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.30.0 adds desktop-style notifications&lt;/h1&gt;&lt;p&gt;We have a new release of Textual to talk about, but before that I&#39;d like to cover a little Textual news.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</link> <pubDate>Mon, 17 Jul 2023 14:08:32 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/17/textual-0300-adds-desktop-style-notifications/</guid> </item> <item> <title>Textual 0.29.0 refactors dev tools</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.29.0 refactors dev tools&lt;/h1&gt;&lt;p&gt;It&#39;s been a slow week or two at Textualize, with Textual devs taking well-earned annual leave, but we still managed to get a new version out.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</link> <pubDate>Mon, 03 Jul 2023 16:09:24 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/07/03/textual-0290-refactors-dev-tools/</guid> </item> <item> <title>To TUI or not to TUI</title> <author>willmcgugan</author> <category>DevLog</category> <description>&lt;h1&gt;To TUI or not to TUI&lt;/h1&gt;&lt;p&gt;Tech moves pretty fast.If you don’t stop and look around once in a while, you could miss it.And yet some technology feels like it has been around forever.&lt;/p&gt;&lt;p&gt;Terminals are one of those forever-technologies.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</link> <pubDate>Mon, 05 Jun 2023 17:51:19 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/06/to-tui-or-not-to-tui/</guid> </item> <item> <title>Textual adds Sparklines, Selection list, Input validation, and tool tips</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual adds Sparklines, Selection list, Input validation, and tool tips&lt;/h1&gt;&lt;p&gt;It&#39;s been 12 days since the last Textual release, which is longer than our usual release cycle of a week.&lt;/p&gt;&lt;p&gt;We&#39;ve been a little distracted with our &#34;dogfood&#34; projects: &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt; and &lt;a href=&#34;https://github.com/Textualize/trogon&#34;&gt;Trogon&lt;/a&gt;. Both of which hit 1000 Github stars in 24 hours. We will be maintaining / updating those, but it is business as usual for this Textual release (and it&#39;s a big one). We have such sights to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</link> <pubDate>Thu, 01 Jun 2023 17:41:08 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/</guid> </item> <item> <title>Textual 0.24.0 adds a Select control</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.24.0 adds a Select control&lt;/h1&gt;&lt;p&gt;Coming just 5 days after the last release, we have version 0.24.0 which we are crowning the King of Textual releases.At least until it is deposed by version 0.25.0.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</link> <pubDate>Thu, 01 Jun 2023 11:33:54 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/08/textual-0240-adds-a-select-control/</guid> </item> <item> <title>Textual 0.23.0 improves message handling</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.23.0 improves message handling&lt;/h1&gt;&lt;p&gt;It&#39;s been a busy couple of weeks at Textualize.We&#39;ve been building apps with &lt;a href=&#34;https://github.com/Textualize/textual&#34;&gt;Textual&lt;/a&gt;, as part of our &lt;em&gt;dog-fooding&lt;/em&gt; week.The first app, &lt;a href=&#34;https://github.com/Textualize/frogmouth&#34;&gt;Frogmouth&lt;/a&gt;, was released at the weekend and already has 1K GitHub stars!Expect two more such apps this month.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</link> <pubDate>Wed, 03 May 2023 13:22:22 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/05/03/textual-0230-improves-message-handling/</guid> </item> <item> <title>Textual 0.11.0 adds a beautiful Markdown widget</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.11.0 adds a beautiful Markdown widget&lt;/h1&gt;&lt;p&gt;We released Textual 0.10.0 25 days ago, which is a little longer than our usual release cycle. What have we been up to?&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/</link> <pubDate>Sat, 08 Apr 2023 15:35:49 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/</guid> </item> <item> <title>Textual 0.18.0 adds API for managing concurrent workers</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.18.0 adds API for managing concurrent workers&lt;/h1&gt;&lt;p&gt;Less than a week since the last release, and we have a new API to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</link> <pubDate>Tue, 04 Apr 2023 13:12:51 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/</guid> </item> <item> <title>Textual 0.17.0 adds translucent screens and Option List</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.17.0 adds translucent screens and Option List&lt;/h1&gt;&lt;p&gt;This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).&lt;/p&gt;&lt;p&gt;What&#39;s new in this release?&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</link> <pubDate>Wed, 29 Mar 2023 16:29:28 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/</guid> </item> <item> <title>Textual 0.16.0 adds TabbedContent and border titles</title> <author>willmcgugan</author> <category>Release</category> <description>&lt;h1&gt;Textual 0.16.0 adds TabbedContent and border titles&lt;/h1&gt;&lt;p&gt;Textual 0.16.0 lands 9 days after the previous release. We have some new features to show you.&lt;/p&gt;</description><link>https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</link> <pubDate>Wed, 22 Mar 2023 13:52:31 +0000</pubDate><source url="https://textual.textualize.io/feed_rss_updated.xml">Textual</source><guid isPermaLink="true">https://textual.textualize.io/blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/</guid> </item> </channel></rss>
\ No newline at end of file
diff --git a/guide/devtools/index.html b/guide/devtools/index.html
index 7a5cf56b85..a0303c4a41 100644
--- a/guide/devtools/index.html
+++ b/guide/devtools/index.html
@@ -813,6 +813,15 @@
     </span>
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#serve" class="md-nav__link">
+    <span class="md-ellipsis">
+      Serve
+    </span>
+  </a>
+  
 </li>
         
       </ul>
@@ -6487,6 +6496,15 @@
     </span>
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#serve" class="md-nav__link">
+    <span class="md-ellipsis">
+      Serve
+    </span>
+  </a>
+  
 </li>
         
       </ul>
@@ -6631,16 +6649,37 @@ <h3 id="running-from-commands">Running from commands<a class="headerlink" href="
 For instance, the following will run the <code>textual colors</code> command:</p>
 <div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a>textual<span class="w"> </span>run<span class="w"> </span>-c<span class="w"> </span>textual<span class="w"> </span>colors
 </code></pre></div>
+<h3 id="serve">Serve<a class="headerlink" href="#serve" title="Permanent link">&para;</a></h3>
+<p>The devtools can also serve your application in a browser.
+Effectively turning your terminal app in to a web application!</p>
+<p>The <code>serve</code> sub-command is similar to <code>run</code>. Here's how you can serve an app launched from a Python file:</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a>textual serve my_app.py
+</code></pre></div>
+<p>You can also serve a Textual app launched via a command. Here's an example:</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a>textual serve &quot;textual keys&quot;
+</code></pre></div>
+<p>The syntax for launching an app in a module is slightly different from <code>run</code>.
+You need to specify the full command, including <code>python</code>.
+Here's how you would run the Textual demo:</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>textual serve &quot;python -m textual&quot;
+</code></pre></div>
+<p>Textual's builtin web-server is quite powerful.
+You can serve multiple instances of your application at once!</p>
+<div class="admonition tip">
+<p class="admonition-title">Tip</p>
+<p>Textual serve is also useful when developing your app.
+If you make changes to your code, simply refresh the browser to update.</p>
+</div>
 <h2 id="live-editing">Live editing<a class="headerlink" href="#live-editing" title="Permanent link">&para;</a></h2>
 <p>If you combine the <code>run</code> command with the <code>--dev</code> switch your app will run in <em>development mode</em>.</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a>textual<span class="w"> </span>run<span class="w"> </span>--dev<span class="w"> </span>my_app.py
+<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a>textual<span class="w"> </span>run<span class="w"> </span>--dev<span class="w"> </span>my_app.py
 </code></pre></div>
 <p>One of the features of <em>dev</em> mode is live editing of CSS files: any changes to your CSS will be reflected in the terminal a few milliseconds later.</p>
 <p>This is a great feature for iterating on your app's look and feel. Open the CSS in your editor and have your app running in a terminal. Edits to your CSS will appear almost immediately after you save.</p>
 <h2 id="console">Console<a class="headerlink" href="#console" title="Permanent link">&para;</a></h2>
 <p>When building a typical terminal application you are generally unable to use <code>print</code> when debugging (or log to the console). This is because anything you write to standard output will overwrite application content. Textual has a solution to this in the form of a debug console which restores <code>print</code> and adds a few additional features to help you debug.</p>
 <p>To use the console, open up <strong>two</strong> terminal emulators. Run the following in one of the terminals:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a>textual<span class="w"> </span>console
+<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a>textual<span class="w"> </span>console
 </code></pre></div>
 <p>You should see the Textual devtools welcome message:</p>
 <p><svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
@@ -6799,51 +6838,51 @@ <h2 id="console">Console<a class="headerlink" href="#console" title="Permanent l
 </svg>
 </p>
 <p>In the other console, run your application with <code>textual run</code> and the <code>--dev</code> switch:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>textual<span class="w"> </span>run<span class="w"> </span>--dev<span class="w"> </span>my_app.py
+<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a>textual<span class="w"> </span>run<span class="w"> </span>--dev<span class="w"> </span>my_app.py
 </code></pre></div>
 <p>Anything you <code>print</code> from your application will be displayed in the console window. Textual will also write log messages to this window which may be helpful when debugging your application.</p>
 <h3 id="increasing-verbosity">Increasing verbosity<a class="headerlink" href="#increasing-verbosity" title="Permanent link">&para;</a></h3>
 <p>Textual writes log messages to inform you about certain events, such as when the user presses a key or clicks on the terminal. To avoid swamping you with too much information, some events are marked as "verbose" and will be excluded from the logs. If you want to see these log messages, you can add the <code>-v</code> switch.</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a>textual<span class="w"> </span>console<span class="w"> </span>-v
+<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a>textual<span class="w"> </span>console<span class="w"> </span>-v
 </code></pre></div>
 <h3 id="decreasing-verbosity">Decreasing verbosity<a class="headerlink" href="#decreasing-verbosity" title="Permanent link">&para;</a></h3>
 <p>Log messages are classififed in to groups, and the <code>-x</code> flag can be used to <strong>exclude</strong> all message from a group. The groups are: <code>EVENT</code>, <code>DEBUG</code>, <code>INFO</code>, <code>WARNING</code>, <code>ERROR</code>, <code>PRINT</code>, <code>SYSTEM</code>, <code>LOGGING</code> and <code>WORKER</code>. The group a message belongs to is printed after its timestamp.</p>
 <p>Multiple groups may be excluded, for example to exclude everything except warning, errors, and <code>print</code> statements:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a>textual<span class="w"> </span>console<span class="w"> </span>-x<span class="w"> </span>SYSTEM<span class="w"> </span>-x<span class="w"> </span>EVENT<span class="w"> </span>-x<span class="w"> </span>DEBUG<span class="w"> </span>-x<span class="w"> </span>INFO
+<div class="highlight"><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a>textual<span class="w"> </span>console<span class="w"> </span>-x<span class="w"> </span>SYSTEM<span class="w"> </span>-x<span class="w"> </span>EVENT<span class="w"> </span>-x<span class="w"> </span>DEBUG<span class="w"> </span>-x<span class="w"> </span>INFO
 </code></pre></div>
 <h3 id="custom-port">Custom port<a class="headerlink" href="#custom-port" title="Permanent link">&para;</a></h3>
 <p>You can use the option <code>--port</code> to specify a custom port to run the console on, which comes in handy if you have other software running on the port that Textual uses by default:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a>textual<span class="w"> </span>console<span class="w"> </span>--port<span class="w"> </span><span class="m">7342</span>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a>textual<span class="w"> </span>console<span class="w"> </span>--port<span class="w"> </span><span class="m">7342</span>
 </code></pre></div>
 <p>Then, use the command <code>run</code> with the same <code>--port</code> option:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a>textual<span class="w"> </span>run<span class="w"> </span>--dev<span class="w"> </span>--port<span class="w"> </span><span class="m">7342</span><span class="w"> </span>my_app.py
+<div class="highlight"><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a>textual<span class="w"> </span>run<span class="w"> </span>--dev<span class="w"> </span>--port<span class="w"> </span><span class="m">7342</span><span class="w"> </span>my_app.py
 </code></pre></div>
 <h2 id="textual-log">Textual log<a class="headerlink" href="#textual-log" title="Permanent link">&para;</a></h2>
 <p>Use the <code>log</code> function to pretty-print data structures and anything that <a href="https://rich.readthedocs.io/en/latest/">Rich</a> can display.</p>
 <p>You can import the log function as follows:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="kn">from</span> <span class="nn">textual</span> <span class="kn">import</span> <span class="n">log</span>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="kn">from</span> <span class="nn">textual</span> <span class="kn">import</span> <span class="n">log</span>
 </code></pre></div>
 <p>Here's a few examples of writing to the console, with <code>log</code>:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="k">def</span> <span class="nf">on_mount</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
-<a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a>    <span class="n">log</span><span class="p">(</span><span class="s2">&quot;Hello, World&quot;</span><span class="p">)</span>  <span class="c1"># simple string</span>
-<a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a>    <span class="n">log</span><span class="p">(</span><span class="nb">locals</span><span class="p">())</span>  <span class="c1"># Log local variables</span>
-<a id="__codelineno-14-4" name="__codelineno-14-4" href="#__codelineno-14-4"></a>    <span class="n">log</span><span class="p">(</span><span class="n">children</span><span class="o">=</span><span class="bp">self</span><span class="o">.</span><span class="n">children</span><span class="p">,</span> <span class="n">pi</span><span class="o">=</span><span class="mf">3.141592</span><span class="p">)</span>  <span class="c1"># key/values</span>
-<a id="__codelineno-14-5" name="__codelineno-14-5" href="#__codelineno-14-5"></a>    <span class="n">log</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">tree</span><span class="p">)</span>  <span class="c1"># Rich renderables</span>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="k">def</span> <span class="nf">on_mount</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
+<a id="__codelineno-17-2" name="__codelineno-17-2" href="#__codelineno-17-2"></a>    <span class="n">log</span><span class="p">(</span><span class="s2">&quot;Hello, World&quot;</span><span class="p">)</span>  <span class="c1"># simple string</span>
+<a id="__codelineno-17-3" name="__codelineno-17-3" href="#__codelineno-17-3"></a>    <span class="n">log</span><span class="p">(</span><span class="nb">locals</span><span class="p">())</span>  <span class="c1"># Log local variables</span>
+<a id="__codelineno-17-4" name="__codelineno-17-4" href="#__codelineno-17-4"></a>    <span class="n">log</span><span class="p">(</span><span class="n">children</span><span class="o">=</span><span class="bp">self</span><span class="o">.</span><span class="n">children</span><span class="p">,</span> <span class="n">pi</span><span class="o">=</span><span class="mf">3.141592</span><span class="p">)</span>  <span class="c1"># key/values</span>
+<a id="__codelineno-17-5" name="__codelineno-17-5" href="#__codelineno-17-5"></a>    <span class="n">log</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">tree</span><span class="p">)</span>  <span class="c1"># Rich renderables</span>
 </code></pre></div>
 <h3 id="log-method">Log method<a class="headerlink" href="#log-method" title="Permanent link">&para;</a></h3>
 <p>There's a convenient shortcut to <code>log</code> on the <code>App</code> and <code>Widget</code> objects. This is useful in event handlers. Here's an example:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="kn">from</span> <span class="nn">textual.app</span> <span class="kn">import</span> <span class="n">App</span>
-<a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a>
-<a id="__codelineno-15-3" name="__codelineno-15-3" href="#__codelineno-15-3"></a><span class="k">class</span> <span class="nc">LogApp</span><span class="p">(</span><span class="n">App</span><span class="p">):</span>
-<a id="__codelineno-15-4" name="__codelineno-15-4" href="#__codelineno-15-4"></a>
-<a id="__codelineno-15-5" name="__codelineno-15-5" href="#__codelineno-15-5"></a>    <span class="k">def</span> <span class="nf">on_load</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
-<a id="__codelineno-15-6" name="__codelineno-15-6" href="#__codelineno-15-6"></a>        <span class="bp">self</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s2">&quot;In the log handler!&quot;</span><span class="p">,</span> <span class="n">pi</span><span class="o">=</span><span class="mf">3.141529</span><span class="p">)</span>
-<a id="__codelineno-15-7" name="__codelineno-15-7" href="#__codelineno-15-7"></a>
-<a id="__codelineno-15-8" name="__codelineno-15-8" href="#__codelineno-15-8"></a>    <span class="k">def</span> <span class="nf">on_mount</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
-<a id="__codelineno-15-9" name="__codelineno-15-9" href="#__codelineno-15-9"></a>        <span class="bp">self</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">tree</span><span class="p">)</span>
-<a id="__codelineno-15-10" name="__codelineno-15-10" href="#__codelineno-15-10"></a>
-<a id="__codelineno-15-11" name="__codelineno-15-11" href="#__codelineno-15-11"></a><span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">&quot;__main__&quot;</span><span class="p">:</span>
-<a id="__codelineno-15-12" name="__codelineno-15-12" href="#__codelineno-15-12"></a>    <span class="n">LogApp</span><span class="p">()</span><span class="o">.</span><span class="n">run</span><span class="p">()</span>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="kn">from</span> <span class="nn">textual.app</span> <span class="kn">import</span> <span class="n">App</span>
+<a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a>
+<a id="__codelineno-18-3" name="__codelineno-18-3" href="#__codelineno-18-3"></a><span class="k">class</span> <span class="nc">LogApp</span><span class="p">(</span><span class="n">App</span><span class="p">):</span>
+<a id="__codelineno-18-4" name="__codelineno-18-4" href="#__codelineno-18-4"></a>
+<a id="__codelineno-18-5" name="__codelineno-18-5" href="#__codelineno-18-5"></a>    <span class="k">def</span> <span class="nf">on_load</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
+<a id="__codelineno-18-6" name="__codelineno-18-6" href="#__codelineno-18-6"></a>        <span class="bp">self</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s2">&quot;In the log handler!&quot;</span><span class="p">,</span> <span class="n">pi</span><span class="o">=</span><span class="mf">3.141529</span><span class="p">)</span>
+<a id="__codelineno-18-7" name="__codelineno-18-7" href="#__codelineno-18-7"></a>
+<a id="__codelineno-18-8" name="__codelineno-18-8" href="#__codelineno-18-8"></a>    <span class="k">def</span> <span class="nf">on_mount</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
+<a id="__codelineno-18-9" name="__codelineno-18-9" href="#__codelineno-18-9"></a>        <span class="bp">self</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">tree</span><span class="p">)</span>
+<a id="__codelineno-18-10" name="__codelineno-18-10" href="#__codelineno-18-10"></a>
+<a id="__codelineno-18-11" name="__codelineno-18-11" href="#__codelineno-18-11"></a><span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">&quot;__main__&quot;</span><span class="p">:</span>
+<a id="__codelineno-18-12" name="__codelineno-18-12" href="#__codelineno-18-12"></a>    <span class="n">LogApp</span><span class="p">()</span><span class="o">.</span><span class="n">run</span><span class="p">()</span>
 </code></pre></div>
 <h2 id="logging-handler">Logging handler<a class="headerlink" href="#logging-handler" title="Permanent link">&para;</a></h2>
 <p>Textual has a <a class="autorefs autorefs-internal" href="../../api/logging/#textual.logging.TextualHandler">logging handler</a> which will write anything logged via the builtin logging library to the devtools.
@@ -6853,25 +6892,25 @@ <h2 id="logging-handler">Logging handler<a class="headerlink" href="#logging-han
 <p>The logging library works with strings only, so you won't be able to log Rich renderables such as <code>self.tree</code> with the logging handler.</p>
 </div>
 <p>Here's an example of configuring logging to use the <code>TextualHandler</code>.</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="kn">import</span> <span class="nn">logging</span>
-<a id="__codelineno-16-2" name="__codelineno-16-2" href="#__codelineno-16-2"></a><span class="kn">from</span> <span class="nn">textual.app</span> <span class="kn">import</span> <span class="n">App</span>
-<a id="__codelineno-16-3" name="__codelineno-16-3" href="#__codelineno-16-3"></a><span class="kn">from</span> <span class="nn">textual.logging</span> <span class="kn">import</span> <span class="n">TextualHandler</span>
-<a id="__codelineno-16-4" name="__codelineno-16-4" href="#__codelineno-16-4"></a>
-<a id="__codelineno-16-5" name="__codelineno-16-5" href="#__codelineno-16-5"></a><span class="n">logging</span><span class="o">.</span><span class="n">basicConfig</span><span class="p">(</span>
-<a id="__codelineno-16-6" name="__codelineno-16-6" href="#__codelineno-16-6"></a>    <span class="n">level</span><span class="o">=</span><span class="s2">&quot;NOTSET&quot;</span><span class="p">,</span>
-<a id="__codelineno-16-7" name="__codelineno-16-7" href="#__codelineno-16-7"></a>    <span class="n">handlers</span><span class="o">=</span><span class="p">[</span><span class="n">TextualHandler</span><span class="p">()],</span>
-<a id="__codelineno-16-8" name="__codelineno-16-8" href="#__codelineno-16-8"></a><span class="p">)</span>
-<a id="__codelineno-16-9" name="__codelineno-16-9" href="#__codelineno-16-9"></a>
-<a id="__codelineno-16-10" name="__codelineno-16-10" href="#__codelineno-16-10"></a>
-<a id="__codelineno-16-11" name="__codelineno-16-11" href="#__codelineno-16-11"></a><span class="k">class</span> <span class="nc">LogApp</span><span class="p">(</span><span class="n">App</span><span class="p">):</span>
-<a id="__codelineno-16-12" name="__codelineno-16-12" href="#__codelineno-16-12"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Using logging with Textual.&quot;&quot;&quot;</span>
-<a id="__codelineno-16-13" name="__codelineno-16-13" href="#__codelineno-16-13"></a>
-<a id="__codelineno-16-14" name="__codelineno-16-14" href="#__codelineno-16-14"></a>    <span class="k">def</span> <span class="nf">on_mount</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
-<a id="__codelineno-16-15" name="__codelineno-16-15" href="#__codelineno-16-15"></a>        <span class="n">logging</span><span class="o">.</span><span class="n">debug</span><span class="p">(</span><span class="s2">&quot;Logged via TextualHandler&quot;</span><span class="p">)</span>
-<a id="__codelineno-16-16" name="__codelineno-16-16" href="#__codelineno-16-16"></a>
-<a id="__codelineno-16-17" name="__codelineno-16-17" href="#__codelineno-16-17"></a>
-<a id="__codelineno-16-18" name="__codelineno-16-18" href="#__codelineno-16-18"></a><span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">&quot;__main__&quot;</span><span class="p">:</span>
-<a id="__codelineno-16-19" name="__codelineno-16-19" href="#__codelineno-16-19"></a>    <span class="n">LogApp</span><span class="p">()</span><span class="o">.</span><span class="n">run</span><span class="p">()</span>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1" href="#__codelineno-19-1"></a><span class="kn">import</span> <span class="nn">logging</span>
+<a id="__codelineno-19-2" name="__codelineno-19-2" href="#__codelineno-19-2"></a><span class="kn">from</span> <span class="nn">textual.app</span> <span class="kn">import</span> <span class="n">App</span>
+<a id="__codelineno-19-3" name="__codelineno-19-3" href="#__codelineno-19-3"></a><span class="kn">from</span> <span class="nn">textual.logging</span> <span class="kn">import</span> <span class="n">TextualHandler</span>
+<a id="__codelineno-19-4" name="__codelineno-19-4" href="#__codelineno-19-4"></a>
+<a id="__codelineno-19-5" name="__codelineno-19-5" href="#__codelineno-19-5"></a><span class="n">logging</span><span class="o">.</span><span class="n">basicConfig</span><span class="p">(</span>
+<a id="__codelineno-19-6" name="__codelineno-19-6" href="#__codelineno-19-6"></a>    <span class="n">level</span><span class="o">=</span><span class="s2">&quot;NOTSET&quot;</span><span class="p">,</span>
+<a id="__codelineno-19-7" name="__codelineno-19-7" href="#__codelineno-19-7"></a>    <span class="n">handlers</span><span class="o">=</span><span class="p">[</span><span class="n">TextualHandler</span><span class="p">()],</span>
+<a id="__codelineno-19-8" name="__codelineno-19-8" href="#__codelineno-19-8"></a><span class="p">)</span>
+<a id="__codelineno-19-9" name="__codelineno-19-9" href="#__codelineno-19-9"></a>
+<a id="__codelineno-19-10" name="__codelineno-19-10" href="#__codelineno-19-10"></a>
+<a id="__codelineno-19-11" name="__codelineno-19-11" href="#__codelineno-19-11"></a><span class="k">class</span> <span class="nc">LogApp</span><span class="p">(</span><span class="n">App</span><span class="p">):</span>
+<a id="__codelineno-19-12" name="__codelineno-19-12" href="#__codelineno-19-12"></a><span class="w">    </span><span class="sd">&quot;&quot;&quot;Using logging with Textual.&quot;&quot;&quot;</span>
+<a id="__codelineno-19-13" name="__codelineno-19-13" href="#__codelineno-19-13"></a>
+<a id="__codelineno-19-14" name="__codelineno-19-14" href="#__codelineno-19-14"></a>    <span class="k">def</span> <span class="nf">on_mount</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
+<a id="__codelineno-19-15" name="__codelineno-19-15" href="#__codelineno-19-15"></a>        <span class="n">logging</span><span class="o">.</span><span class="n">debug</span><span class="p">(</span><span class="s2">&quot;Logged via TextualHandler&quot;</span><span class="p">)</span>
+<a id="__codelineno-19-16" name="__codelineno-19-16" href="#__codelineno-19-16"></a>
+<a id="__codelineno-19-17" name="__codelineno-19-17" href="#__codelineno-19-17"></a>
+<a id="__codelineno-19-18" name="__codelineno-19-18" href="#__codelineno-19-18"></a><span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">&quot;__main__&quot;</span><span class="p">:</span>
+<a id="__codelineno-19-19" name="__codelineno-19-19" href="#__codelineno-19-19"></a>    <span class="n">LogApp</span><span class="p">()</span><span class="o">.</span><span class="n">run</span><span class="p">()</span>
 </code></pre></div>
 
 
@@ -6893,7 +6932,7 @@ <h2 id="logging-handler">Logging handler<a class="headerlink" href="#logging-han
     <span class="md-icon" title="Last update">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg>
     </span>
-    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">February 27, 2024</span>
+    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">August 30, 2024</span>
   </span>
 
     
diff --git a/guide/reactivity/index.html b/guide/reactivity/index.html
index bc09678b0f..86bc687cbc 100644
--- a/guide/reactivity/index.html
+++ b/guide/reactivity/index.html
@@ -8129,132 +8129,132 @@ <h2 id="recompose">Recompose<a class="headerlink" href="#recompose" title="Perma
         font-weight: 700;
     }
 
-    .terminal-571320182-matrix {
+    .terminal-4059276603-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-571320182-title {
+    .terminal-4059276603-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-571320182-r1 { fill: #e1e1e1 }
-.terminal-571320182-r2 { fill: #c5c8c6 }
-.terminal-571320182-r3 { fill: #e1e1e1;font-weight: bold }
+    .terminal-4059276603-r1 { fill: #e1e1e1 }
+.terminal-4059276603-r2 { fill: #c5c8c6 }
+.terminal-4059276603-r3 { fill: #e1e1e1;font-weight: bold }
     </style>
 
     <defs>
-    <clipPath id="terminal-571320182-clip-terminal">
+    <clipPath id="terminal-4059276603-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-571320182-line-0">
+    <clipPath id="terminal-4059276603-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-1">
+<clipPath id="terminal-4059276603-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-2">
+<clipPath id="terminal-4059276603-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-3">
+<clipPath id="terminal-4059276603-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-4">
+<clipPath id="terminal-4059276603-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-5">
+<clipPath id="terminal-4059276603-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-6">
+<clipPath id="terminal-4059276603-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-7">
+<clipPath id="terminal-4059276603-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-8">
+<clipPath id="terminal-4059276603-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-9">
+<clipPath id="terminal-4059276603-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-10">
+<clipPath id="terminal-4059276603-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-11">
+<clipPath id="terminal-4059276603-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-12">
+<clipPath id="terminal-4059276603-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-13">
+<clipPath id="terminal-4059276603-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-14">
+<clipPath id="terminal-4059276603-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-15">
+<clipPath id="terminal-4059276603-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-16">
+<clipPath id="terminal-4059276603-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-17">
+<clipPath id="terminal-4059276603-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-18">
+<clipPath id="terminal-4059276603-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-19">
+<clipPath id="terminal-4059276603-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-20">
+<clipPath id="terminal-4059276603-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-21">
+<clipPath id="terminal-4059276603-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-22">
+<clipPath id="terminal-4059276603-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-571320182-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">Clock</text>
+    <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-4059276603-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">Clock</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-571320182-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-4059276603-clip-terminal)">
     <rect fill="#1e1e1e" x="0" y="1.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="245.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="245.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="269.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="269.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="294.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="294.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-571320182-matrix">
-    <text class="terminal-571320182-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-571320182-line-0)">
-</text><text class="terminal-571320182-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-571320182-line-1)">
-</text><text class="terminal-571320182-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-571320182-line-2)">
-</text><text class="terminal-571320182-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-571320182-line-3)">
-</text><text class="terminal-571320182-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-571320182-line-4)">
-</text><text class="terminal-571320182-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-571320182-line-5)">
-</text><text class="terminal-571320182-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-571320182-line-6)">
-</text><text class="terminal-571320182-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-571320182-line-7)">
-</text><text class="terminal-571320182-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-571320182-line-8)">
-</text><text class="terminal-571320182-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-571320182-line-9)">
-</text><text class="terminal-571320182-r3" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-571320182-line-10)">&#160;┓&#160;┏━╸&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸╻&#160;╻</text><text class="terminal-571320182-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-571320182-line-10)">
-</text><text class="terminal-571320182-r3" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-571320182-line-11)">&#160;┃&#160;┣━┓&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┫</text><text class="terminal-571320182-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-571320182-line-11)">
-</text><text class="terminal-571320182-r3" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-571320182-line-12)">╺┻╸┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛&#160;&#160;╹</text><text class="terminal-571320182-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-571320182-line-12)">
-</text><text class="terminal-571320182-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-571320182-line-13)">
-</text><text class="terminal-571320182-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-571320182-line-14)">
-</text><text class="terminal-571320182-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-571320182-line-15)">
-</text><text class="terminal-571320182-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-571320182-line-16)">
-</text><text class="terminal-571320182-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-571320182-line-17)">
-</text><text class="terminal-571320182-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-571320182-line-18)">
-</text><text class="terminal-571320182-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-571320182-line-19)">
-</text><text class="terminal-571320182-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-571320182-line-20)">
-</text><text class="terminal-571320182-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-571320182-line-21)">
-</text><text class="terminal-571320182-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-571320182-line-22)">
+    <g class="terminal-4059276603-matrix">
+    <text class="terminal-4059276603-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4059276603-line-0)">
+</text><text class="terminal-4059276603-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-1)">
+</text><text class="terminal-4059276603-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-2)">
+</text><text class="terminal-4059276603-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-3)">
+</text><text class="terminal-4059276603-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-4)">
+</text><text class="terminal-4059276603-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4059276603-line-5)">
+</text><text class="terminal-4059276603-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-6)">
+</text><text class="terminal-4059276603-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-7)">
+</text><text class="terminal-4059276603-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-8)">
+</text><text class="terminal-4059276603-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-9)">
+</text><text class="terminal-4059276603-r3" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-4059276603-line-10)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;╻&#160;╻┏━┓</text><text class="terminal-4059276603-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4059276603-line-10)">
+</text><text class="terminal-4059276603-r3" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-4059276603-line-11)">&#160;┃&#160;┣━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┫┗━┫</text><text class="terminal-4059276603-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-11)">
+</text><text class="terminal-4059276603-r3" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-4059276603-line-12)">╺┻╸┗━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;&#160;&#160;╹╺━┛</text><text class="terminal-4059276603-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-12)">
+</text><text class="terminal-4059276603-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-13)">
+</text><text class="terminal-4059276603-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-14)">
+</text><text class="terminal-4059276603-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4059276603-line-15)">
+</text><text class="terminal-4059276603-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-16)">
+</text><text class="terminal-4059276603-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-17)">
+</text><text class="terminal-4059276603-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-18)">
+</text><text class="terminal-4059276603-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-19)">
+</text><text class="terminal-4059276603-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4059276603-line-20)">
+</text><text class="terminal-4059276603-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-21)">
+</text><text class="terminal-4059276603-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-22)">
 </text>
     </g>
     </g>
@@ -8322,132 +8322,132 @@ <h2 id="recompose">Recompose<a class="headerlink" href="#recompose" title="Perma
         font-weight: 700;
     }
 
-    .terminal-571320182-matrix {
+    .terminal-4059276603-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-571320182-title {
+    .terminal-4059276603-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-571320182-r1 { fill: #e1e1e1 }
-.terminal-571320182-r2 { fill: #c5c8c6 }
-.terminal-571320182-r3 { fill: #e1e1e1;font-weight: bold }
+    .terminal-4059276603-r1 { fill: #e1e1e1 }
+.terminal-4059276603-r2 { fill: #c5c8c6 }
+.terminal-4059276603-r3 { fill: #e1e1e1;font-weight: bold }
     </style>
 
     <defs>
-    <clipPath id="terminal-571320182-clip-terminal">
+    <clipPath id="terminal-4059276603-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-571320182-line-0">
+    <clipPath id="terminal-4059276603-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-1">
+<clipPath id="terminal-4059276603-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-2">
+<clipPath id="terminal-4059276603-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-3">
+<clipPath id="terminal-4059276603-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-4">
+<clipPath id="terminal-4059276603-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-5">
+<clipPath id="terminal-4059276603-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-6">
+<clipPath id="terminal-4059276603-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-7">
+<clipPath id="terminal-4059276603-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-8">
+<clipPath id="terminal-4059276603-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-9">
+<clipPath id="terminal-4059276603-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-10">
+<clipPath id="terminal-4059276603-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-11">
+<clipPath id="terminal-4059276603-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-12">
+<clipPath id="terminal-4059276603-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-13">
+<clipPath id="terminal-4059276603-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-14">
+<clipPath id="terminal-4059276603-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-15">
+<clipPath id="terminal-4059276603-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-16">
+<clipPath id="terminal-4059276603-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-17">
+<clipPath id="terminal-4059276603-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-18">
+<clipPath id="terminal-4059276603-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-19">
+<clipPath id="terminal-4059276603-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-20">
+<clipPath id="terminal-4059276603-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-21">
+<clipPath id="terminal-4059276603-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-571320182-line-22">
+<clipPath id="terminal-4059276603-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-571320182-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">Clock</text>
+    <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-4059276603-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">Clock</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-571320182-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-4059276603-clip-terminal)">
     <rect fill="#1e1e1e" x="0" y="1.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="245.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="245.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="269.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="269.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="294.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="294.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-571320182-matrix">
-    <text class="terminal-571320182-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-571320182-line-0)">
-</text><text class="terminal-571320182-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-571320182-line-1)">
-</text><text class="terminal-571320182-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-571320182-line-2)">
-</text><text class="terminal-571320182-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-571320182-line-3)">
-</text><text class="terminal-571320182-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-571320182-line-4)">
-</text><text class="terminal-571320182-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-571320182-line-5)">
-</text><text class="terminal-571320182-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-571320182-line-6)">
-</text><text class="terminal-571320182-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-571320182-line-7)">
-</text><text class="terminal-571320182-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-571320182-line-8)">
-</text><text class="terminal-571320182-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-571320182-line-9)">
-</text><text class="terminal-571320182-r3" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-571320182-line-10)">&#160;┓&#160;┏━╸&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸╻&#160;╻</text><text class="terminal-571320182-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-571320182-line-10)">
-</text><text class="terminal-571320182-r3" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-571320182-line-11)">&#160;┃&#160;┣━┓&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┫</text><text class="terminal-571320182-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-571320182-line-11)">
-</text><text class="terminal-571320182-r3" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-571320182-line-12)">╺┻╸┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛&#160;&#160;╹</text><text class="terminal-571320182-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-571320182-line-12)">
-</text><text class="terminal-571320182-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-571320182-line-13)">
-</text><text class="terminal-571320182-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-571320182-line-14)">
-</text><text class="terminal-571320182-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-571320182-line-15)">
-</text><text class="terminal-571320182-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-571320182-line-16)">
-</text><text class="terminal-571320182-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-571320182-line-17)">
-</text><text class="terminal-571320182-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-571320182-line-18)">
-</text><text class="terminal-571320182-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-571320182-line-19)">
-</text><text class="terminal-571320182-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-571320182-line-20)">
-</text><text class="terminal-571320182-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-571320182-line-21)">
-</text><text class="terminal-571320182-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-571320182-line-22)">
+    <g class="terminal-4059276603-matrix">
+    <text class="terminal-4059276603-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4059276603-line-0)">
+</text><text class="terminal-4059276603-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-1)">
+</text><text class="terminal-4059276603-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-2)">
+</text><text class="terminal-4059276603-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-3)">
+</text><text class="terminal-4059276603-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-4)">
+</text><text class="terminal-4059276603-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4059276603-line-5)">
+</text><text class="terminal-4059276603-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-6)">
+</text><text class="terminal-4059276603-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-7)">
+</text><text class="terminal-4059276603-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-8)">
+</text><text class="terminal-4059276603-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-9)">
+</text><text class="terminal-4059276603-r3" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-4059276603-line-10)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;╻&#160;╻┏━┓</text><text class="terminal-4059276603-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4059276603-line-10)">
+</text><text class="terminal-4059276603-r3" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-4059276603-line-11)">&#160;┃&#160;┣━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┫┗━┫</text><text class="terminal-4059276603-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-11)">
+</text><text class="terminal-4059276603-r3" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-4059276603-line-12)">╺┻╸┗━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;&#160;&#160;╹╺━┛</text><text class="terminal-4059276603-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-12)">
+</text><text class="terminal-4059276603-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-13)">
+</text><text class="terminal-4059276603-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-14)">
+</text><text class="terminal-4059276603-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4059276603-line-15)">
+</text><text class="terminal-4059276603-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-16)">
+</text><text class="terminal-4059276603-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-17)">
+</text><text class="terminal-4059276603-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4059276603-line-18)">
+</text><text class="terminal-4059276603-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4059276603-line-19)">
+</text><text class="terminal-4059276603-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4059276603-line-20)">
+</text><text class="terminal-4059276603-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4059276603-line-21)">
+</text><text class="terminal-4059276603-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4059276603-line-22)">
 </text>
     </g>
     </g>
@@ -9325,136 +9325,136 @@ <h2 id="data-binding">Data binding<a class="headerlink" href="#data-binding" tit
         font-weight: 700;
     }
 
-    .terminal-3946984582-matrix {
+    .terminal-1686057242-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-3946984582-title {
+    .terminal-1686057242-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-3946984582-r1 { fill: #e1e1e1 }
-.terminal-3946984582-r2 { fill: #121212 }
-.terminal-3946984582-r3 { fill: #c5c8c6 }
-.terminal-3946984582-r4 { fill: #24292f }
-.terminal-3946984582-r5 { fill: #e2e3e3 }
-.terminal-3946984582-r6 { fill: #fea62b;font-weight: bold }
+    .terminal-1686057242-r1 { fill: #e1e1e1 }
+.terminal-1686057242-r2 { fill: #121212 }
+.terminal-1686057242-r3 { fill: #c5c8c6 }
+.terminal-1686057242-r4 { fill: #24292f }
+.terminal-1686057242-r5 { fill: #e2e3e3 }
+.terminal-1686057242-r6 { fill: #fea62b;font-weight: bold }
     </style>
 
     <defs>
-    <clipPath id="terminal-3946984582-clip-terminal">
+    <clipPath id="terminal-1686057242-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-3946984582-line-0">
+    <clipPath id="terminal-1686057242-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-1">
+<clipPath id="terminal-1686057242-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-2">
+<clipPath id="terminal-1686057242-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-3">
+<clipPath id="terminal-1686057242-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-4">
+<clipPath id="terminal-1686057242-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-5">
+<clipPath id="terminal-1686057242-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-6">
+<clipPath id="terminal-1686057242-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-7">
+<clipPath id="terminal-1686057242-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-8">
+<clipPath id="terminal-1686057242-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-9">
+<clipPath id="terminal-1686057242-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-10">
+<clipPath id="terminal-1686057242-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-11">
+<clipPath id="terminal-1686057242-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-12">
+<clipPath id="terminal-1686057242-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-13">
+<clipPath id="terminal-1686057242-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-14">
+<clipPath id="terminal-1686057242-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-15">
+<clipPath id="terminal-1686057242-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-16">
+<clipPath id="terminal-1686057242-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-17">
+<clipPath id="terminal-1686057242-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-18">
+<clipPath id="terminal-1686057242-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-19">
+<clipPath id="terminal-1686057242-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-20">
+<clipPath id="terminal-1686057242-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-21">
+<clipPath id="terminal-1686057242-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-22">
+<clipPath id="terminal-1686057242-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-3946984582-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">WorldClockApp</text>
+    <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-1686057242-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">WorldClockApp</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-3946984582-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-1686057242-clip-terminal)">
     <rect fill="#1e1e1e" x="0" y="1.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="1.5" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="1.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="25.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="25.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="50.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="50.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="74.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="74.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="99.1" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="99.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="123.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="123.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="147.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="147.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="172.3" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="172.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="196.7" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="196.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="221.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="221.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="245.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="245.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="269.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="269.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="294.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="294.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="318.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="318.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="343.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="343.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="367.5" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="367.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="391.9" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="391.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="416.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="416.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="440.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="440.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="465.1" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="465.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="489.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="489.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="513.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="513.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="538.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="538.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="562.7" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="562.7" width="305" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-3946984582-matrix">
-    <text class="terminal-3946984582-r2" x="305" y="20" textLength="366" clip-path="url(#terminal-3946984582-line-0)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3946984582-line-0)">
-</text><text class="terminal-3946984582-r2" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">▊</text><text class="terminal-3946984582-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">
-</text><text class="terminal-3946984582-r2" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="68.8" textLength="292.8" clip-path="url(#terminal-3946984582-line-2)">Europe/London&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">▊</text><text class="terminal-3946984582-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">
-</text><text class="terminal-3946984582-r2" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="93.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-3)">&#160;┓&#160;┏━╸&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">▊</text><text class="terminal-3946984582-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">
-</text><text class="terminal-3946984582-r2" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="117.6" textLength="292.8" clip-path="url(#terminal-3946984582-line-4)">&#160;┃&#160;┣━┓&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">▊</text><text class="terminal-3946984582-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">
-</text><text class="terminal-3946984582-r2" x="305" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="142" textLength="292.8" clip-path="url(#terminal-3946984582-line-5)">╺┻╸┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">▊</text><text class="terminal-3946984582-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">
-</text><text class="terminal-3946984582-r2" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">▊</text><text class="terminal-3946984582-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">
-</text><text class="terminal-3946984582-r2" x="305" y="190.8" textLength="366" clip-path="url(#terminal-3946984582-line-7)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3946984582-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-7)">
-</text><text class="terminal-3946984582-r2" x="305" y="215.2" textLength="366" clip-path="url(#terminal-3946984582-line-8)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-8)">
-</text><text class="terminal-3946984582-r2" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">▊</text><text class="terminal-3946984582-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">
-</text><text class="terminal-3946984582-r2" x="305" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-3946984582-line-10)">Europe/Paris&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">▊</text><text class="terminal-3946984582-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">
-</text><text class="terminal-3946984582-r2" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-3946984582-line-11)">&#160;┓&#160;╺━┓&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">▊</text><text class="terminal-3946984582-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">
-</text><text class="terminal-3946984582-r2" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-3946984582-line-12)">&#160;┃&#160;&#160;&#160;┃&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">▊</text><text class="terminal-3946984582-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">
-</text><text class="terminal-3946984582-r2" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="337.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-13)">╺┻╸&#160;&#160;╹&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">▊</text><text class="terminal-3946984582-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">
-</text><text class="terminal-3946984582-r2" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">▊</text><text class="terminal-3946984582-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">
-</text><text class="terminal-3946984582-r2" x="305" y="386" textLength="366" clip-path="url(#terminal-3946984582-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3946984582-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3946984582-line-15)">
-</text><text class="terminal-3946984582-r2" x="305" y="410.4" textLength="366" clip-path="url(#terminal-3946984582-line-16)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-16)">
-</text><text class="terminal-3946984582-r2" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">▊</text><text class="terminal-3946984582-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">
-</text><text class="terminal-3946984582-r2" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="459.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-18)">Asia/Tokyo&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">▊</text><text class="terminal-3946984582-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">
-</text><text class="terminal-3946984582-r2" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="483.6" textLength="292.8" clip-path="url(#terminal-3946984582-line-19)">┏━┓┏━┓&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">▊</text><text class="terminal-3946984582-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">
-</text><text class="terminal-3946984582-r2" x="305" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="508" textLength="292.8" clip-path="url(#terminal-3946984582-line-20)">┃&#160;┃┃&#160;┃&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">▊</text><text class="terminal-3946984582-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">
-</text><text class="terminal-3946984582-r2" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="532.4" textLength="292.8" clip-path="url(#terminal-3946984582-line-21)">┗━┛┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">▊</text><text class="terminal-3946984582-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">
-</text><text class="terminal-3946984582-r2" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">▊</text><text class="terminal-3946984582-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">
-</text><text class="terminal-3946984582-r2" x="305" y="581.2" textLength="366" clip-path="url(#terminal-3946984582-line-23)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text>
+    <g class="terminal-1686057242-matrix">
+    <text class="terminal-1686057242-r2" x="305" y="20" textLength="366" clip-path="url(#terminal-1686057242-line-0)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1686057242-line-0)">
+</text><text class="terminal-1686057242-r2" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">▊</text><text class="terminal-1686057242-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">
+</text><text class="terminal-1686057242-r2" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="68.8" textLength="292.8" clip-path="url(#terminal-1686057242-line-2)">Europe/London&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">▊</text><text class="terminal-1686057242-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">
+</text><text class="terminal-1686057242-r2" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="93.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-3)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">▊</text><text class="terminal-1686057242-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">
+</text><text class="terminal-1686057242-r2" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="117.6" textLength="292.8" clip-path="url(#terminal-1686057242-line-4)">&#160;┃&#160;┣━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">▊</text><text class="terminal-1686057242-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">
+</text><text class="terminal-1686057242-r2" x="305" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="142" textLength="292.8" clip-path="url(#terminal-1686057242-line-5)">╺┻╸┗━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">▊</text><text class="terminal-1686057242-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">
+</text><text class="terminal-1686057242-r2" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">▊</text><text class="terminal-1686057242-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">
+</text><text class="terminal-1686057242-r2" x="305" y="190.8" textLength="366" clip-path="url(#terminal-1686057242-line-7)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1686057242-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-7)">
+</text><text class="terminal-1686057242-r2" x="305" y="215.2" textLength="366" clip-path="url(#terminal-1686057242-line-8)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-8)">
+</text><text class="terminal-1686057242-r2" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">▊</text><text class="terminal-1686057242-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">
+</text><text class="terminal-1686057242-r2" x="305" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-1686057242-line-10)">Europe/Paris&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">▊</text><text class="terminal-1686057242-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">
+</text><text class="terminal-1686057242-r2" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-1686057242-line-11)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">▊</text><text class="terminal-1686057242-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">
+</text><text class="terminal-1686057242-r2" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-1686057242-line-12)">&#160;┃&#160;┗━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">▊</text><text class="terminal-1686057242-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">
+</text><text class="terminal-1686057242-r2" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="337.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-13)">╺┻╸╺━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">▊</text><text class="terminal-1686057242-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">
+</text><text class="terminal-1686057242-r2" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">▊</text><text class="terminal-1686057242-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">
+</text><text class="terminal-1686057242-r2" x="305" y="386" textLength="366" clip-path="url(#terminal-1686057242-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1686057242-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1686057242-line-15)">
+</text><text class="terminal-1686057242-r2" x="305" y="410.4" textLength="366" clip-path="url(#terminal-1686057242-line-16)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-16)">
+</text><text class="terminal-1686057242-r2" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">▊</text><text class="terminal-1686057242-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">
+</text><text class="terminal-1686057242-r2" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="459.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-18)">Asia/Tokyo&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">▊</text><text class="terminal-1686057242-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">
+</text><text class="terminal-1686057242-r2" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="483.6" textLength="292.8" clip-path="url(#terminal-1686057242-line-19)">┏━┓╺━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">▊</text><text class="terminal-1686057242-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">
+</text><text class="terminal-1686057242-r2" x="305" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="508" textLength="292.8" clip-path="url(#terminal-1686057242-line-20)">┃&#160;┃┏━┛&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">▊</text><text class="terminal-1686057242-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">
+</text><text class="terminal-1686057242-r2" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="532.4" textLength="292.8" clip-path="url(#terminal-1686057242-line-21)">┗━┛┗━╸&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">▊</text><text class="terminal-1686057242-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">
+</text><text class="terminal-1686057242-r2" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">▊</text><text class="terminal-1686057242-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">
+</text><text class="terminal-1686057242-r2" x="305" y="581.2" textLength="366" clip-path="url(#terminal-1686057242-line-23)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text>
     </g>
     </g>
 </svg>
@@ -9563,136 +9563,136 @@ <h2 id="data-binding">Data binding<a class="headerlink" href="#data-binding" tit
         font-weight: 700;
     }
 
-    .terminal-3946984582-matrix {
+    .terminal-1686057242-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-3946984582-title {
+    .terminal-1686057242-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-3946984582-r1 { fill: #e1e1e1 }
-.terminal-3946984582-r2 { fill: #121212 }
-.terminal-3946984582-r3 { fill: #c5c8c6 }
-.terminal-3946984582-r4 { fill: #24292f }
-.terminal-3946984582-r5 { fill: #e2e3e3 }
-.terminal-3946984582-r6 { fill: #fea62b;font-weight: bold }
+    .terminal-1686057242-r1 { fill: #e1e1e1 }
+.terminal-1686057242-r2 { fill: #121212 }
+.terminal-1686057242-r3 { fill: #c5c8c6 }
+.terminal-1686057242-r4 { fill: #24292f }
+.terminal-1686057242-r5 { fill: #e2e3e3 }
+.terminal-1686057242-r6 { fill: #fea62b;font-weight: bold }
     </style>
 
     <defs>
-    <clipPath id="terminal-3946984582-clip-terminal">
+    <clipPath id="terminal-1686057242-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-3946984582-line-0">
+    <clipPath id="terminal-1686057242-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-1">
+<clipPath id="terminal-1686057242-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-2">
+<clipPath id="terminal-1686057242-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-3">
+<clipPath id="terminal-1686057242-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-4">
+<clipPath id="terminal-1686057242-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-5">
+<clipPath id="terminal-1686057242-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-6">
+<clipPath id="terminal-1686057242-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-7">
+<clipPath id="terminal-1686057242-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-8">
+<clipPath id="terminal-1686057242-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-9">
+<clipPath id="terminal-1686057242-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-10">
+<clipPath id="terminal-1686057242-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-11">
+<clipPath id="terminal-1686057242-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-12">
+<clipPath id="terminal-1686057242-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-13">
+<clipPath id="terminal-1686057242-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-14">
+<clipPath id="terminal-1686057242-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-15">
+<clipPath id="terminal-1686057242-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-16">
+<clipPath id="terminal-1686057242-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-17">
+<clipPath id="terminal-1686057242-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-18">
+<clipPath id="terminal-1686057242-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-19">
+<clipPath id="terminal-1686057242-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-20">
+<clipPath id="terminal-1686057242-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-21">
+<clipPath id="terminal-1686057242-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-22">
+<clipPath id="terminal-1686057242-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-3946984582-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">WorldClockApp</text>
+    <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-1686057242-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">WorldClockApp</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-3946984582-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-1686057242-clip-terminal)">
     <rect fill="#1e1e1e" x="0" y="1.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="1.5" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="1.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="25.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="25.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="50.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="50.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="74.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="74.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="99.1" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="99.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="123.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="123.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="147.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="147.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="172.3" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="172.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="196.7" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="196.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="221.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="221.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="245.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="245.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="269.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="269.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="294.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="294.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="318.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="318.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="343.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="343.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="367.5" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="367.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="391.9" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="391.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="416.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="416.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="440.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="440.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="465.1" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="465.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="489.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="489.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="513.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="513.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="538.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="538.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="562.7" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="562.7" width="305" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-3946984582-matrix">
-    <text class="terminal-3946984582-r2" x="305" y="20" textLength="366" clip-path="url(#terminal-3946984582-line-0)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3946984582-line-0)">
-</text><text class="terminal-3946984582-r2" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">▊</text><text class="terminal-3946984582-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">
-</text><text class="terminal-3946984582-r2" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="68.8" textLength="292.8" clip-path="url(#terminal-3946984582-line-2)">Europe/London&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">▊</text><text class="terminal-3946984582-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">
-</text><text class="terminal-3946984582-r2" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="93.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-3)">&#160;┓&#160;┏━╸&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">▊</text><text class="terminal-3946984582-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">
-</text><text class="terminal-3946984582-r2" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="117.6" textLength="292.8" clip-path="url(#terminal-3946984582-line-4)">&#160;┃&#160;┣━┓&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">▊</text><text class="terminal-3946984582-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">
-</text><text class="terminal-3946984582-r2" x="305" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="142" textLength="292.8" clip-path="url(#terminal-3946984582-line-5)">╺┻╸┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">▊</text><text class="terminal-3946984582-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">
-</text><text class="terminal-3946984582-r2" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">▊</text><text class="terminal-3946984582-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">
-</text><text class="terminal-3946984582-r2" x="305" y="190.8" textLength="366" clip-path="url(#terminal-3946984582-line-7)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3946984582-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-7)">
-</text><text class="terminal-3946984582-r2" x="305" y="215.2" textLength="366" clip-path="url(#terminal-3946984582-line-8)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-8)">
-</text><text class="terminal-3946984582-r2" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">▊</text><text class="terminal-3946984582-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">
-</text><text class="terminal-3946984582-r2" x="305" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-3946984582-line-10)">Europe/Paris&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">▊</text><text class="terminal-3946984582-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">
-</text><text class="terminal-3946984582-r2" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-3946984582-line-11)">&#160;┓&#160;╺━┓&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">▊</text><text class="terminal-3946984582-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">
-</text><text class="terminal-3946984582-r2" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-3946984582-line-12)">&#160;┃&#160;&#160;&#160;┃&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">▊</text><text class="terminal-3946984582-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">
-</text><text class="terminal-3946984582-r2" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="337.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-13)">╺┻╸&#160;&#160;╹&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">▊</text><text class="terminal-3946984582-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">
-</text><text class="terminal-3946984582-r2" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">▊</text><text class="terminal-3946984582-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">
-</text><text class="terminal-3946984582-r2" x="305" y="386" textLength="366" clip-path="url(#terminal-3946984582-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3946984582-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3946984582-line-15)">
-</text><text class="terminal-3946984582-r2" x="305" y="410.4" textLength="366" clip-path="url(#terminal-3946984582-line-16)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-16)">
-</text><text class="terminal-3946984582-r2" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">▊</text><text class="terminal-3946984582-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">
-</text><text class="terminal-3946984582-r2" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="459.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-18)">Asia/Tokyo&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">▊</text><text class="terminal-3946984582-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">
-</text><text class="terminal-3946984582-r2" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="483.6" textLength="292.8" clip-path="url(#terminal-3946984582-line-19)">┏━┓┏━┓&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">▊</text><text class="terminal-3946984582-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">
-</text><text class="terminal-3946984582-r2" x="305" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="508" textLength="292.8" clip-path="url(#terminal-3946984582-line-20)">┃&#160;┃┃&#160;┃&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">▊</text><text class="terminal-3946984582-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">
-</text><text class="terminal-3946984582-r2" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="532.4" textLength="292.8" clip-path="url(#terminal-3946984582-line-21)">┗━┛┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">▊</text><text class="terminal-3946984582-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">
-</text><text class="terminal-3946984582-r2" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">▊</text><text class="terminal-3946984582-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">
-</text><text class="terminal-3946984582-r2" x="305" y="581.2" textLength="366" clip-path="url(#terminal-3946984582-line-23)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text>
+    <g class="terminal-1686057242-matrix">
+    <text class="terminal-1686057242-r2" x="305" y="20" textLength="366" clip-path="url(#terminal-1686057242-line-0)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1686057242-line-0)">
+</text><text class="terminal-1686057242-r2" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">▊</text><text class="terminal-1686057242-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">
+</text><text class="terminal-1686057242-r2" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="68.8" textLength="292.8" clip-path="url(#terminal-1686057242-line-2)">Europe/London&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">▊</text><text class="terminal-1686057242-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">
+</text><text class="terminal-1686057242-r2" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="93.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-3)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">▊</text><text class="terminal-1686057242-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">
+</text><text class="terminal-1686057242-r2" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="117.6" textLength="292.8" clip-path="url(#terminal-1686057242-line-4)">&#160;┃&#160;┣━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">▊</text><text class="terminal-1686057242-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">
+</text><text class="terminal-1686057242-r2" x="305" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="142" textLength="292.8" clip-path="url(#terminal-1686057242-line-5)">╺┻╸┗━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">▊</text><text class="terminal-1686057242-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">
+</text><text class="terminal-1686057242-r2" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">▊</text><text class="terminal-1686057242-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">
+</text><text class="terminal-1686057242-r2" x="305" y="190.8" textLength="366" clip-path="url(#terminal-1686057242-line-7)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1686057242-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-7)">
+</text><text class="terminal-1686057242-r2" x="305" y="215.2" textLength="366" clip-path="url(#terminal-1686057242-line-8)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-8)">
+</text><text class="terminal-1686057242-r2" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">▊</text><text class="terminal-1686057242-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">
+</text><text class="terminal-1686057242-r2" x="305" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-1686057242-line-10)">Europe/Paris&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">▊</text><text class="terminal-1686057242-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">
+</text><text class="terminal-1686057242-r2" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-1686057242-line-11)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">▊</text><text class="terminal-1686057242-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">
+</text><text class="terminal-1686057242-r2" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-1686057242-line-12)">&#160;┃&#160;┗━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">▊</text><text class="terminal-1686057242-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">
+</text><text class="terminal-1686057242-r2" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="337.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-13)">╺┻╸╺━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">▊</text><text class="terminal-1686057242-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">
+</text><text class="terminal-1686057242-r2" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">▊</text><text class="terminal-1686057242-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">
+</text><text class="terminal-1686057242-r2" x="305" y="386" textLength="366" clip-path="url(#terminal-1686057242-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1686057242-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1686057242-line-15)">
+</text><text class="terminal-1686057242-r2" x="305" y="410.4" textLength="366" clip-path="url(#terminal-1686057242-line-16)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-16)">
+</text><text class="terminal-1686057242-r2" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">▊</text><text class="terminal-1686057242-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">
+</text><text class="terminal-1686057242-r2" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="459.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-18)">Asia/Tokyo&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">▊</text><text class="terminal-1686057242-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">
+</text><text class="terminal-1686057242-r2" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="483.6" textLength="292.8" clip-path="url(#terminal-1686057242-line-19)">┏━┓╺━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">▊</text><text class="terminal-1686057242-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">
+</text><text class="terminal-1686057242-r2" x="305" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="508" textLength="292.8" clip-path="url(#terminal-1686057242-line-20)">┃&#160;┃┏━┛&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">▊</text><text class="terminal-1686057242-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">
+</text><text class="terminal-1686057242-r2" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="532.4" textLength="292.8" clip-path="url(#terminal-1686057242-line-21)">┗━┛┗━╸&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">▊</text><text class="terminal-1686057242-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">
+</text><text class="terminal-1686057242-r2" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">▊</text><text class="terminal-1686057242-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">
+</text><text class="terminal-1686057242-r2" x="305" y="581.2" textLength="366" clip-path="url(#terminal-1686057242-line-23)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text>
     </g>
     </g>
 </svg>
@@ -9809,136 +9809,136 @@ <h2 id="data-binding">Data binding<a class="headerlink" href="#data-binding" tit
         font-weight: 700;
     }
 
-    .terminal-3946984582-matrix {
+    .terminal-1686057242-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-3946984582-title {
+    .terminal-1686057242-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-3946984582-r1 { fill: #e1e1e1 }
-.terminal-3946984582-r2 { fill: #121212 }
-.terminal-3946984582-r3 { fill: #c5c8c6 }
-.terminal-3946984582-r4 { fill: #24292f }
-.terminal-3946984582-r5 { fill: #e2e3e3 }
-.terminal-3946984582-r6 { fill: #fea62b;font-weight: bold }
+    .terminal-1686057242-r1 { fill: #e1e1e1 }
+.terminal-1686057242-r2 { fill: #121212 }
+.terminal-1686057242-r3 { fill: #c5c8c6 }
+.terminal-1686057242-r4 { fill: #24292f }
+.terminal-1686057242-r5 { fill: #e2e3e3 }
+.terminal-1686057242-r6 { fill: #fea62b;font-weight: bold }
     </style>
 
     <defs>
-    <clipPath id="terminal-3946984582-clip-terminal">
+    <clipPath id="terminal-1686057242-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-3946984582-line-0">
+    <clipPath id="terminal-1686057242-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-1">
+<clipPath id="terminal-1686057242-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-2">
+<clipPath id="terminal-1686057242-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-3">
+<clipPath id="terminal-1686057242-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-4">
+<clipPath id="terminal-1686057242-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-5">
+<clipPath id="terminal-1686057242-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-6">
+<clipPath id="terminal-1686057242-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-7">
+<clipPath id="terminal-1686057242-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-8">
+<clipPath id="terminal-1686057242-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-9">
+<clipPath id="terminal-1686057242-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-10">
+<clipPath id="terminal-1686057242-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-11">
+<clipPath id="terminal-1686057242-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-12">
+<clipPath id="terminal-1686057242-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-13">
+<clipPath id="terminal-1686057242-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-14">
+<clipPath id="terminal-1686057242-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-15">
+<clipPath id="terminal-1686057242-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-16">
+<clipPath id="terminal-1686057242-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-17">
+<clipPath id="terminal-1686057242-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-18">
+<clipPath id="terminal-1686057242-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-19">
+<clipPath id="terminal-1686057242-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-20">
+<clipPath id="terminal-1686057242-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-21">
+<clipPath id="terminal-1686057242-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3946984582-line-22">
+<clipPath id="terminal-1686057242-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-3946984582-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">WorldClockApp</text>
+    <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-1686057242-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">WorldClockApp</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-3946984582-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-1686057242-clip-terminal)">
     <rect fill="#1e1e1e" x="0" y="1.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="1.5" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="1.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="25.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="25.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="50.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="50.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="74.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="74.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="99.1" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="99.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="123.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="123.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="147.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="147.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="172.3" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="172.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="196.7" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="196.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="221.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="221.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="245.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="245.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="269.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="269.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="294.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="294.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="318.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="318.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="343.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="343.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="367.5" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="367.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="391.9" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="391.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="416.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="416.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="440.7" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="440.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="465.1" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="465.1" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="489.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="489.5" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="341.6" y="513.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="634.4" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="513.9" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="305" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="317.2" y="538.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="658.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="538.3" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="305" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="562.7" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="671" y="562.7" width="305" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-3946984582-matrix">
-    <text class="terminal-3946984582-r2" x="305" y="20" textLength="366" clip-path="url(#terminal-3946984582-line-0)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3946984582-line-0)">
-</text><text class="terminal-3946984582-r2" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">▊</text><text class="terminal-3946984582-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-1)">
-</text><text class="terminal-3946984582-r2" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="68.8" textLength="292.8" clip-path="url(#terminal-3946984582-line-2)">Europe/London&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">▊</text><text class="terminal-3946984582-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-2)">
-</text><text class="terminal-3946984582-r2" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="93.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-3)">&#160;┓&#160;┏━╸&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">▊</text><text class="terminal-3946984582-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-3)">
-</text><text class="terminal-3946984582-r2" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="117.6" textLength="292.8" clip-path="url(#terminal-3946984582-line-4)">&#160;┃&#160;┣━┓&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">▊</text><text class="terminal-3946984582-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-4)">
-</text><text class="terminal-3946984582-r2" x="305" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="142" textLength="292.8" clip-path="url(#terminal-3946984582-line-5)">╺┻╸┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">▊</text><text class="terminal-3946984582-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3946984582-line-5)">
-</text><text class="terminal-3946984582-r2" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">▊</text><text class="terminal-3946984582-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-6)">
-</text><text class="terminal-3946984582-r2" x="305" y="190.8" textLength="366" clip-path="url(#terminal-3946984582-line-7)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3946984582-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-7)">
-</text><text class="terminal-3946984582-r2" x="305" y="215.2" textLength="366" clip-path="url(#terminal-3946984582-line-8)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-8)">
-</text><text class="terminal-3946984582-r2" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">▊</text><text class="terminal-3946984582-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-9)">
-</text><text class="terminal-3946984582-r2" x="305" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-3946984582-line-10)">Europe/Paris&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">▊</text><text class="terminal-3946984582-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3946984582-line-10)">
-</text><text class="terminal-3946984582-r2" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-3946984582-line-11)">&#160;┓&#160;╺━┓&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">▊</text><text class="terminal-3946984582-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-11)">
-</text><text class="terminal-3946984582-r2" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-3946984582-line-12)">&#160;┃&#160;&#160;&#160;┃&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">▊</text><text class="terminal-3946984582-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-12)">
-</text><text class="terminal-3946984582-r2" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="337.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-13)">╺┻╸&#160;&#160;╹&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">▊</text><text class="terminal-3946984582-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-13)">
-</text><text class="terminal-3946984582-r2" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">▊</text><text class="terminal-3946984582-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-14)">
-</text><text class="terminal-3946984582-r2" x="305" y="386" textLength="366" clip-path="url(#terminal-3946984582-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3946984582-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3946984582-line-15)">
-</text><text class="terminal-3946984582-r2" x="305" y="410.4" textLength="366" clip-path="url(#terminal-3946984582-line-16)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3946984582-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-16)">
-</text><text class="terminal-3946984582-r2" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">▊</text><text class="terminal-3946984582-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-17)">
-</text><text class="terminal-3946984582-r2" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">▎</text><text class="terminal-3946984582-r5" x="341.6" y="459.2" textLength="292.8" clip-path="url(#terminal-3946984582-line-18)">Asia/Tokyo&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3946984582-r4" x="658.8" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">▊</text><text class="terminal-3946984582-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3946984582-line-18)">
-</text><text class="terminal-3946984582-r2" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="483.6" textLength="292.8" clip-path="url(#terminal-3946984582-line-19)">┏━┓┏━┓&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;┏━╸┏━╸</text><text class="terminal-3946984582-r4" x="658.8" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">▊</text><text class="terminal-3946984582-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3946984582-line-19)">
-</text><text class="terminal-3946984582-r2" x="305" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="508" textLength="292.8" clip-path="url(#terminal-3946984582-line-20)">┃&#160;┃┃&#160;┃&#160;:&#160;┏━┛┣━┫&#160;:&#160;┗━┓┗━┓</text><text class="terminal-3946984582-r4" x="658.8" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">▊</text><text class="terminal-3946984582-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3946984582-line-20)">
-</text><text class="terminal-3946984582-r2" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">▎</text><text class="terminal-3946984582-r6" x="341.6" y="532.4" textLength="292.8" clip-path="url(#terminal-3946984582-line-21)">┗━┛┗━┛&#160;&#160;&#160;┗━╸┗━┛&#160;&#160;&#160;╺━┛╺━┛</text><text class="terminal-3946984582-r4" x="658.8" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">▊</text><text class="terminal-3946984582-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3946984582-line-21)">
-</text><text class="terminal-3946984582-r2" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">▎</text><text class="terminal-3946984582-r4" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">▊</text><text class="terminal-3946984582-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3946984582-line-22)">
-</text><text class="terminal-3946984582-r2" x="305" y="581.2" textLength="366" clip-path="url(#terminal-3946984582-line-23)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text>
+    <g class="terminal-1686057242-matrix">
+    <text class="terminal-1686057242-r2" x="305" y="20" textLength="366" clip-path="url(#terminal-1686057242-line-0)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1686057242-line-0)">
+</text><text class="terminal-1686057242-r2" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">▊</text><text class="terminal-1686057242-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-1)">
+</text><text class="terminal-1686057242-r2" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="68.8" textLength="292.8" clip-path="url(#terminal-1686057242-line-2)">Europe/London&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">▊</text><text class="terminal-1686057242-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-2)">
+</text><text class="terminal-1686057242-r2" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="93.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-3)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">▊</text><text class="terminal-1686057242-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-3)">
+</text><text class="terminal-1686057242-r2" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="117.6" textLength="292.8" clip-path="url(#terminal-1686057242-line-4)">&#160;┃&#160;┣━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">▊</text><text class="terminal-1686057242-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-4)">
+</text><text class="terminal-1686057242-r2" x="305" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="142" textLength="292.8" clip-path="url(#terminal-1686057242-line-5)">╺┻╸┗━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">▊</text><text class="terminal-1686057242-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1686057242-line-5)">
+</text><text class="terminal-1686057242-r2" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">▊</text><text class="terminal-1686057242-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-6)">
+</text><text class="terminal-1686057242-r2" x="305" y="190.8" textLength="366" clip-path="url(#terminal-1686057242-line-7)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1686057242-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-7)">
+</text><text class="terminal-1686057242-r2" x="305" y="215.2" textLength="366" clip-path="url(#terminal-1686057242-line-8)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-8)">
+</text><text class="terminal-1686057242-r2" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">▊</text><text class="terminal-1686057242-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-9)">
+</text><text class="terminal-1686057242-r2" x="305" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-1686057242-line-10)">Europe/Paris&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">▊</text><text class="terminal-1686057242-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1686057242-line-10)">
+</text><text class="terminal-1686057242-r2" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-1686057242-line-11)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">▊</text><text class="terminal-1686057242-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-11)">
+</text><text class="terminal-1686057242-r2" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-1686057242-line-12)">&#160;┃&#160;┗━┫&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">▊</text><text class="terminal-1686057242-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-12)">
+</text><text class="terminal-1686057242-r2" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="337.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-13)">╺┻╸╺━┛&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">▊</text><text class="terminal-1686057242-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-13)">
+</text><text class="terminal-1686057242-r2" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">▊</text><text class="terminal-1686057242-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-14)">
+</text><text class="terminal-1686057242-r2" x="305" y="386" textLength="366" clip-path="url(#terminal-1686057242-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1686057242-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1686057242-line-15)">
+</text><text class="terminal-1686057242-r2" x="305" y="410.4" textLength="366" clip-path="url(#terminal-1686057242-line-16)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1686057242-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-16)">
+</text><text class="terminal-1686057242-r2" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">▊</text><text class="terminal-1686057242-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-17)">
+</text><text class="terminal-1686057242-r2" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">▎</text><text class="terminal-1686057242-r5" x="341.6" y="459.2" textLength="292.8" clip-path="url(#terminal-1686057242-line-18)">Asia/Tokyo&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-1686057242-r4" x="658.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">▊</text><text class="terminal-1686057242-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1686057242-line-18)">
+</text><text class="terminal-1686057242-r2" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="483.6" textLength="292.8" clip-path="url(#terminal-1686057242-line-19)">┏━┓╺━┓&#160;&#160;&#160;┏━╸┏━┓&#160;&#160;&#160;┏━╸┏━┓</text><text class="terminal-1686057242-r4" x="658.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">▊</text><text class="terminal-1686057242-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1686057242-line-19)">
+</text><text class="terminal-1686057242-r2" x="305" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="508" textLength="292.8" clip-path="url(#terminal-1686057242-line-20)">┃&#160;┃┏━┛&#160;:&#160;┗━┓┃&#160;┃&#160;:&#160;┗━┓┃&#160;┃</text><text class="terminal-1686057242-r4" x="658.8" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">▊</text><text class="terminal-1686057242-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1686057242-line-20)">
+</text><text class="terminal-1686057242-r2" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">▎</text><text class="terminal-1686057242-r6" x="341.6" y="532.4" textLength="292.8" clip-path="url(#terminal-1686057242-line-21)">┗━┛┗━╸&#160;&#160;&#160;╺━┛┗━┛&#160;&#160;&#160;╺━┛┗━┛</text><text class="terminal-1686057242-r4" x="658.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">▊</text><text class="terminal-1686057242-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1686057242-line-21)">
+</text><text class="terminal-1686057242-r2" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">▎</text><text class="terminal-1686057242-r4" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">▊</text><text class="terminal-1686057242-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1686057242-line-22)">
+</text><text class="terminal-1686057242-r2" x="305" y="581.2" textLength="366" clip-path="url(#terminal-1686057242-line-23)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text>
     </g>
     </g>
 </svg>
diff --git a/guide/widgets/index.html b/guide/widgets/index.html
index 676ece39cb..923383e303 100644
--- a/guide/widgets/index.html
+++ b/guide/widgets/index.html
@@ -9511,136 +9511,140 @@ <h2 id="loading-indicator">Loading indicator<a class="headerlink" href="#loading
         font-weight: 700;
     }
 
-    .terminal-396338330-matrix {
+    .terminal-3221267526-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-396338330-title {
+    .terminal-3221267526-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-396338330-r1 { fill: #c5c8c6 }
-.terminal-396338330-r2 { fill: #2987e5 }
-.terminal-396338330-r3 { fill: #212e38 }
-.terminal-396338330-r4 { fill: #20313f }
-.terminal-396338330-r5 { fill: #1c384d }
-.terminal-396338330-r6 { fill: #184263 }
-.terminal-396338330-r7 { fill: #2a88e6 }
+    .terminal-3221267526-r1 { fill: #c5c8c6 }
+.terminal-3221267526-r2 { fill: #2887e5 }
+.terminal-3221267526-r3 { fill: #212e37 }
+.terminal-3221267526-r4 { fill: #20313f }
+.terminal-3221267526-r5 { fill: #1d374c }
+.terminal-3221267526-r6 { fill: #184262 }
+.terminal-3221267526-r7 { fill: #2987e5 }
+.terminal-3221267526-r8 { fill: #1c384d }
+.terminal-3221267526-r9 { fill: #212e38 }
+.terminal-3221267526-r10 { fill: #184263 }
+.terminal-3221267526-r11 { fill: #2a88e6 }
     </style>
 
     <defs>
-    <clipPath id="terminal-396338330-clip-terminal">
+    <clipPath id="terminal-3221267526-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-396338330-line-0">
+    <clipPath id="terminal-3221267526-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-1">
+<clipPath id="terminal-3221267526-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-2">
+<clipPath id="terminal-3221267526-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-3">
+<clipPath id="terminal-3221267526-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-4">
+<clipPath id="terminal-3221267526-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-5">
+<clipPath id="terminal-3221267526-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-6">
+<clipPath id="terminal-3221267526-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-7">
+<clipPath id="terminal-3221267526-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-8">
+<clipPath id="terminal-3221267526-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-9">
+<clipPath id="terminal-3221267526-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-10">
+<clipPath id="terminal-3221267526-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-11">
+<clipPath id="terminal-3221267526-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-12">
+<clipPath id="terminal-3221267526-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-13">
+<clipPath id="terminal-3221267526-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-14">
+<clipPath id="terminal-3221267526-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-15">
+<clipPath id="terminal-3221267526-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-16">
+<clipPath id="terminal-3221267526-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-17">
+<clipPath id="terminal-3221267526-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-18">
+<clipPath id="terminal-3221267526-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-19">
+<clipPath id="terminal-3221267526-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-20">
+<clipPath id="terminal-3221267526-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-21">
+<clipPath id="terminal-3221267526-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-396338330-line-22">
+<clipPath id="terminal-3221267526-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-396338330-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">DataApp</text>
+    <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-3221267526-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">DataApp</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-396338330-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-3221267526-clip-terminal)">
     <rect fill="#262626" x="0" y="1.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="50.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="74.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="123.5" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="183" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="207.4" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="231.8" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="256.2" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="280.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="292.8" y="123.5" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="671" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="695.4" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="719.8" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="744.2" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="768.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="780.8" y="123.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="416.3" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="183" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="207.4" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="231.8" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="256.2" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="280.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="292.8" y="416.3" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="671" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="695.4" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="719.8" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="744.2" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="768.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="780.8" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-396338330-matrix">
-    <text class="terminal-396338330-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-396338330-line-0)">
-</text><text class="terminal-396338330-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-396338330-line-1)">
-</text><text class="terminal-396338330-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-396338330-line-2)">
-</text><text class="terminal-396338330-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-396338330-line-3)">
-</text><text class="terminal-396338330-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-396338330-line-4)">
-</text><text class="terminal-396338330-r2" x="183" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r3" x="207.4" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r4" x="231.8" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r5" x="256.2" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r6" x="280.6" y="142" textLength="12.2" clip-path="url(#terminal-396338330-line-5)">●</text><text class="terminal-396338330-r7" x="671" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r3" x="695.4" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r4" x="719.8" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r5" x="744.2" y="142" textLength="24.4" clip-path="url(#terminal-396338330-line-5)">●&#160;</text><text class="terminal-396338330-r6" x="768.6" y="142" textLength="12.2" clip-path="url(#terminal-396338330-line-5)">●</text><text class="terminal-396338330-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-396338330-line-5)">
-</text><text class="terminal-396338330-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-396338330-line-6)">
-</text><text class="terminal-396338330-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-396338330-line-7)">
-</text><text class="terminal-396338330-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-396338330-line-8)">
-</text><text class="terminal-396338330-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-396338330-line-9)">
-</text><text class="terminal-396338330-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-396338330-line-10)">
-</text><text class="terminal-396338330-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-396338330-line-11)">
-</text><text class="terminal-396338330-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-396338330-line-12)">
-</text><text class="terminal-396338330-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-396338330-line-13)">
-</text><text class="terminal-396338330-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-396338330-line-14)">
-</text><text class="terminal-396338330-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-396338330-line-15)">
-</text><text class="terminal-396338330-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-396338330-line-16)">
-</text><text class="terminal-396338330-r7" x="183" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r3" x="207.4" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r4" x="231.8" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r5" x="256.2" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r6" x="280.6" y="434.8" textLength="12.2" clip-path="url(#terminal-396338330-line-17)">●</text><text class="terminal-396338330-r7" x="671" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r3" x="695.4" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r4" x="719.8" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r5" x="744.2" y="434.8" textLength="24.4" clip-path="url(#terminal-396338330-line-17)">●&#160;</text><text class="terminal-396338330-r6" x="768.6" y="434.8" textLength="12.2" clip-path="url(#terminal-396338330-line-17)">●</text><text class="terminal-396338330-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-396338330-line-17)">
-</text><text class="terminal-396338330-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-396338330-line-18)">
-</text><text class="terminal-396338330-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-396338330-line-19)">
-</text><text class="terminal-396338330-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-396338330-line-20)">
-</text><text class="terminal-396338330-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-396338330-line-21)">
-</text><text class="terminal-396338330-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-396338330-line-22)">
+    <g class="terminal-3221267526-matrix">
+    <text class="terminal-3221267526-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3221267526-line-0)">
+</text><text class="terminal-3221267526-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3221267526-line-1)">
+</text><text class="terminal-3221267526-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-2)">
+</text><text class="terminal-3221267526-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3221267526-line-3)">
+</text><text class="terminal-3221267526-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3221267526-line-4)">
+</text><text class="terminal-3221267526-r2" x="183" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r3" x="207.4" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r4" x="231.8" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r5" x="256.2" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r6" x="280.6" y="142" textLength="12.2" clip-path="url(#terminal-3221267526-line-5)">●</text><text class="terminal-3221267526-r7" x="671" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r3" x="695.4" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r4" x="719.8" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r8" x="744.2" y="142" textLength="24.4" clip-path="url(#terminal-3221267526-line-5)">●&#160;</text><text class="terminal-3221267526-r6" x="768.6" y="142" textLength="12.2" clip-path="url(#terminal-3221267526-line-5)">●</text><text class="terminal-3221267526-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3221267526-line-5)">
+</text><text class="terminal-3221267526-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3221267526-line-6)">
+</text><text class="terminal-3221267526-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-7)">
+</text><text class="terminal-3221267526-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3221267526-line-8)">
+</text><text class="terminal-3221267526-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3221267526-line-9)">
+</text><text class="terminal-3221267526-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3221267526-line-10)">
+</text><text class="terminal-3221267526-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3221267526-line-11)">
+</text><text class="terminal-3221267526-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-12)">
+</text><text class="terminal-3221267526-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3221267526-line-13)">
+</text><text class="terminal-3221267526-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3221267526-line-14)">
+</text><text class="terminal-3221267526-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3221267526-line-15)">
+</text><text class="terminal-3221267526-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3221267526-line-16)">
+</text><text class="terminal-3221267526-r7" x="183" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r9" x="207.4" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r4" x="231.8" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r8" x="256.2" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r10" x="280.6" y="434.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-17)">●</text><text class="terminal-3221267526-r11" x="671" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r9" x="695.4" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r4" x="719.8" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r8" x="744.2" y="434.8" textLength="24.4" clip-path="url(#terminal-3221267526-line-17)">●&#160;</text><text class="terminal-3221267526-r10" x="768.6" y="434.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-17)">●</text><text class="terminal-3221267526-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-17)">
+</text><text class="terminal-3221267526-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3221267526-line-18)">
+</text><text class="terminal-3221267526-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3221267526-line-19)">
+</text><text class="terminal-3221267526-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3221267526-line-20)">
+</text><text class="terminal-3221267526-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3221267526-line-21)">
+</text><text class="terminal-3221267526-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3221267526-line-22)">
 </text>
     </g>
     </g>
diff --git a/how-to/render-and-compose/index.html b/how-to/render-and-compose/index.html
index ed04b7ec9f..ebd1adc08a 100644
--- a/how-to/render-and-compose/index.html
+++ b/how-to/render-and-compose/index.html
@@ -6543,835 +6543,971 @@ <h2 id="combining-render-and-compose">Combining render and compose<a class="head
         font-weight: 700;
     }
 
-    .terminal-1706147923-matrix {
+    .terminal-1811200677-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-1706147923-title {
+    .terminal-1811200677-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-1706147923-r1 { fill: #2374bf }
-.terminal-1706147923-r2 { fill: #2473bf }
-.terminal-1706147923-r3 { fill: #2473be }
-.terminal-1706147923-r4 { fill: #2572be }
-.terminal-1706147923-r5 { fill: #2671be }
-.terminal-1706147923-r6 { fill: #2770be }
-.terminal-1706147923-r7 { fill: #286fbe }
-.terminal-1706147923-r8 { fill: #286fbd }
-.terminal-1706147923-r9 { fill: #296ebd }
-.terminal-1706147923-r10 { fill: #2a6dbd }
-.terminal-1706147923-r11 { fill: #2b6cbd }
-.terminal-1706147923-r12 { fill: #2c6bbc }
-.terminal-1706147923-r13 { fill: #2d6abc }
-.terminal-1706147923-r14 { fill: #2e69bb }
-.terminal-1706147923-r15 { fill: #2f68bb }
-.terminal-1706147923-r16 { fill: #3067ba }
-.terminal-1706147923-r17 { fill: #3166ba }
-.terminal-1706147923-r18 { fill: #3265b9 }
-.terminal-1706147923-r19 { fill: #3364b9 }
-.terminal-1706147923-r20 { fill: #3463b8 }
-.terminal-1706147923-r21 { fill: #3562b8 }
-.terminal-1706147923-r22 { fill: #3661b7 }
-.terminal-1706147923-r23 { fill: #3760b7 }
-.terminal-1706147923-r24 { fill: #c5c8c6 }
-.terminal-1706147923-r25 { fill: #1780c3 }
-.terminal-1706147923-r26 { fill: #187fc2 }
-.terminal-1706147923-r27 { fill: #197ec2 }
-.terminal-1706147923-r28 { fill: #1a7dc2 }
-.terminal-1706147923-r29 { fill: #1b7cc1 }
-.terminal-1706147923-r30 { fill: #1c7bc1 }
-.terminal-1706147923-r31 { fill: #1d7ac1 }
-.terminal-1706147923-r32 { fill: #1e79c0 }
-.terminal-1706147923-r33 { fill: #1f78c0 }
-.terminal-1706147923-r34 { fill: #2077c0 }
-.terminal-1706147923-r35 { fill: #2176bf }
-.terminal-1706147923-r36 { fill: #2275bf }
-.terminal-1706147923-r37 { fill: #0c8bc6 }
-.terminal-1706147923-r38 { fill: #0d8ac6 }
-.terminal-1706147923-r39 { fill: #0e89c6 }
-.terminal-1706147923-r40 { fill: #0f88c6 }
-.terminal-1706147923-r41 { fill: #0f88c5 }
-.terminal-1706147923-r42 { fill: #1087c5 }
-.terminal-1706147923-r43 { fill: #1186c5 }
-.terminal-1706147923-r44 { fill: #1285c5 }
-.terminal-1706147923-r45 { fill: #1285c4 }
-.terminal-1706147923-r46 { fill: #1384c4 }
-.terminal-1706147923-r47 { fill: #1483c4 }
-.terminal-1706147923-r48 { fill: #1582c3 }
-.terminal-1706147923-r49 { fill: #1681c3 }
-.terminal-1706147923-r50 { fill: #0295ca }
-.terminal-1706147923-r51 { fill: #0395ca }
-.terminal-1706147923-r52 { fill: #0394ca }
-.terminal-1706147923-r53 { fill: #0494ca }
-.terminal-1706147923-r54 { fill: #0493ca }
-.terminal-1706147923-r55 { fill: #0593c9 }
-.terminal-1706147923-r56 { fill: #0592c9 }
-.terminal-1706147923-r57 { fill: #0692c9 }
-.terminal-1706147923-r58 { fill: #0691c9 }
-.terminal-1706147923-r59 { fill: #0791c9 }
-.terminal-1706147923-r60 { fill: #0790c9 }
-.terminal-1706147923-r61 { fill: #0790c8 }
-.terminal-1706147923-r62 { fill: #0890c8 }
-.terminal-1706147923-r63 { fill: #088fc8 }
-.terminal-1706147923-r64 { fill: #098fc8 }
-.terminal-1706147923-r65 { fill: #098ec8 }
-.terminal-1706147923-r66 { fill: #0a8dc7 }
-.terminal-1706147923-r67 { fill: #0b8cc7 }
-.terminal-1706147923-r68 { fill: #0c8bc7 }
-.terminal-1706147923-r69 { fill: #009ecc }
-.terminal-1706147923-r70 { fill: #009dcc }
-.terminal-1706147923-r71 { fill: #009ccc }
-.terminal-1706147923-r72 { fill: #009bcc }
-.terminal-1706147923-r73 { fill: #009acc }
-.terminal-1706147923-r74 { fill: #0099cc }
-.terminal-1706147923-r75 { fill: #0098cb }
-.terminal-1706147923-r76 { fill: #0197cb }
-.terminal-1706147923-r77 { fill: #0196cb }
-.terminal-1706147923-r78 { fill: #0296cb }
-.terminal-1706147923-r79 { fill: #0296ca }
-.terminal-1706147923-r80 { fill: #00a5cc }
-.terminal-1706147923-r81 { fill: #00a4cc }
-.terminal-1706147923-r82 { fill: #00a3cc }
-.terminal-1706147923-r83 { fill: #00a2cc }
-.terminal-1706147923-r84 { fill: #00a1cc }
-.terminal-1706147923-r85 { fill: #00a0cc }
-.terminal-1706147923-r86 { fill: #009fcc }
-.terminal-1706147923-r87 { fill: #00adcc }
-.terminal-1706147923-r88 { fill: #00accc }
-.terminal-1706147923-r89 { fill: #00abcc }
-.terminal-1706147923-r90 { fill: #00aacc }
-.terminal-1706147923-r91 { fill: #00a9cc }
-.terminal-1706147923-r92 { fill: #00a8cc }
-.terminal-1706147923-r93 { fill: #00a7cc }
-.terminal-1706147923-r94 { fill: #00a6cc }
-.terminal-1706147923-r95 { fill: #00b5cc }
-.terminal-1706147923-r96 { fill: #00b4cc }
-.terminal-1706147923-r97 { fill: #00b3cc }
-.terminal-1706147923-r98 { fill: #00b2cc }
-.terminal-1706147923-r99 { fill: #00b1cc }
-.terminal-1706147923-r100 { fill: #00b0cc }
-.terminal-1706147923-r101 { fill: #00afcc }
-.terminal-1706147923-r102 { fill: #00aecc }
-.terminal-1706147923-r103 { fill: #02bbca }
-.terminal-1706147923-r104 { fill: #02baca }
-.terminal-1706147923-r105 { fill: #01baca }
-.terminal-1706147923-r106 { fill: #01b9ca }
-.terminal-1706147923-r107 { fill: #01b9cb }
-.terminal-1706147923-r108 { fill: #00b9cb }
-.terminal-1706147923-r109 { fill: #00b8cb }
-.terminal-1706147923-r110 { fill: #00b7cc }
-.terminal-1706147923-r111 { fill: #00b6cc }
-.terminal-1706147923-r112 { fill: #08bfc6 }
-.terminal-1706147923-r113 { fill: #07bec7 }
-.terminal-1706147923-r114 { fill: #06bec7 }
-.terminal-1706147923-r115 { fill: #05bdc8 }
-.terminal-1706147923-r116 { fill: #04bdc8 }
-.terminal-1706147923-r117 { fill: #03bcc9 }
-.terminal-1706147923-r118 { fill: #03bbc9 }
-.terminal-1706147923-r119 { fill: #02bbc9 }
-.terminal-1706147923-r120 { fill: #10c3c2 }
-.terminal-1706147923-r121 { fill: #0fc2c3 }
-.terminal-1706147923-r122 { fill: #0ec2c3 }
-.terminal-1706147923-r123 { fill: #0dc1c4 }
-.terminal-1706147923-r124 { fill: #0cc1c4 }
-.terminal-1706147923-r125 { fill: #0bc0c5 }
-.terminal-1706147923-r126 { fill: #0ac0c5 }
-.terminal-1706147923-r127 { fill: #09bfc6 }
-.terminal-1706147923-r128 { fill: #17c6bf }
-.terminal-1706147923-r129 { fill: #16c6bf }
-.terminal-1706147923-r130 { fill: #16c5c0 }
-.terminal-1706147923-r131 { fill: #15c5c0 }
-.terminal-1706147923-r132 { fill: #14c5c0 }
-.terminal-1706147923-r133 { fill: #13c4c1 }
-.terminal-1706147923-r134 { fill: #12c4c1 }
-.terminal-1706147923-r135 { fill: #11c3c2 }
-.terminal-1706147923-r136 { fill: #1fcaba }
-.terminal-1706147923-r137 { fill: #1ec9bb }
-.terminal-1706147923-r138 { fill: #1dc9bb }
-.terminal-1706147923-r139 { fill: #1dc9bc }
-.terminal-1706147923-r140 { fill: #1cc8bc }
-.terminal-1706147923-r141 { fill: #1cc8bd }
-.terminal-1706147923-r142 { fill: #1bc8bd }
-.terminal-1706147923-r143 { fill: #1ac7be }
-.terminal-1706147923-r144 { fill: #19c7be }
-.terminal-1706147923-r145 { fill: #18c7be }
-.terminal-1706147923-r146 { fill: #18c6bf }
-.terminal-1706147923-r147 { fill: #27ceb2 }
-.terminal-1706147923-r148 { fill: #26cdb2 }
-.terminal-1706147923-r149 { fill: #26cdb3 }
-.terminal-1706147923-r150 { fill: #25cdb3 }
-.terminal-1706147923-r151 { fill: #25cdb4 }
-.terminal-1706147923-r152 { fill: #25cdb5 }
-.terminal-1706147923-r153 { fill: #24ccb5 }
-.terminal-1706147923-r154 { fill: #24ccb6 }
-.terminal-1706147923-r155 { fill: #23ccb6 }
-.terminal-1706147923-r156 { fill: #23ccb7 }
-.terminal-1706147923-r157 { fill: #22cbb8 }
-.terminal-1706147923-r158 { fill: #21cbb8 }
-.terminal-1706147923-r159 { fill: #21cbb9 }
-.terminal-1706147923-r160 { fill: #20cab9 }
-.terminal-1706147923-r161 { fill: #20caba }
-.terminal-1706147923-r162 { fill: #2ed1a7 }
-.terminal-1706147923-r163 { fill: #2ed1a8 }
-.terminal-1706147923-r164 { fill: #2dd1a8 }
-.terminal-1706147923-r165 { fill: #2dd1a9 }
-.terminal-1706147923-r166 { fill: #2cd1a9 }
-.terminal-1706147923-r167 { fill: #2cd1aa }
-.terminal-1706147923-r168 { fill: #2cd0aa }
-.terminal-1706147923-r169 { fill: #2cd0ab }
-.terminal-1706147923-r170 { fill: #2bd0ab }
-.terminal-1706147923-r171 { fill: #2bd0ac }
-.terminal-1706147923-r172 { fill: #2acfad }
-.terminal-1706147923-r173 { fill: #2acfae }
-.terminal-1706147923-r174 { fill: #29cfae }
-.terminal-1706147923-r175 { fill: #29cfaf }
-.terminal-1706147923-r176 { fill: #28ceaf }
-.terminal-1706147923-r177 { fill: #28ceb0 }
-.terminal-1706147923-r178 { fill: #27ceb1 }
-.terminal-1706147923-r179 { fill: #35d59c }
-.terminal-1706147923-r180 { fill: #35d59d }
-.terminal-1706147923-r181 { fill: #34d59d }
-.terminal-1706147923-r182 { fill: #34d59e }
-.terminal-1706147923-r183 { fill: #33d49f }
-.terminal-1706147923-r184 { fill: #33d4a0 }
-.terminal-1706147923-r185 { fill: #32d4a0 }
-.terminal-1706147923-r186 { fill: #32d4a1 }
-.terminal-1706147923-r187 { fill: #31d3a2 }
-.terminal-1706147923-r188 { fill: #31d3a3 }
-.terminal-1706147923-r189 { fill: #30d3a3 }
-.terminal-1706147923-r190 { fill: #30d3a4 }
-.terminal-1706147923-r191 { fill: #30d2a4 }
-.terminal-1706147923-r192 { fill: #30d2a5 }
-.terminal-1706147923-r193 { fill: #2fd2a5 }
-.terminal-1706147923-r194 { fill: #2fd2a6 }
-.terminal-1706147923-r195 { fill: #2ed2a6 }
-.terminal-1706147923-r196 { fill: #2ed2a7 }
-.terminal-1706147923-r197 { fill: #3dd991 }
-.terminal-1706147923-r198 { fill: #3cd991 }
-.terminal-1706147923-r199 { fill: #3cd992 }
-.terminal-1706147923-r200 { fill: #3cd892 }
-.terminal-1706147923-r201 { fill: #3bd892 }
-.terminal-1706147923-r202 { fill: #3bd893 }
-.terminal-1706147923-r203 { fill: #3bd894 }
-.terminal-1706147923-r204 { fill: #3ad894 }
-.terminal-1706147923-r205 { fill: #3ad895 }
-.terminal-1706147923-r206 { fill: #39d796 }
-.terminal-1706147923-r207 { fill: #39d797 }
-.terminal-1706147923-r208 { fill: #38d797 }
-.terminal-1706147923-r209 { fill: #38d798 }
-.terminal-1706147923-r210 { fill: #37d699 }
-.terminal-1706147923-r211 { fill: #37d69a }
-.terminal-1706147923-r212 { fill: #36d69a }
-.terminal-1706147923-r213 { fill: #36d69b }
-.terminal-1706147923-r214 { fill: #47db85 }
-.terminal-1706147923-r215 { fill: #47db86 }
-.terminal-1706147923-r216 { fill: #46db86 }
-.terminal-1706147923-r217 { fill: #46db87 }
-.terminal-1706147923-r218 { fill: #45db87 }
-.terminal-1706147923-r219 { fill: #44db88 }
-.terminal-1706147923-r220 { fill: #43db88 }
-.terminal-1706147923-r221 { fill: #43db89 }
-.terminal-1706147923-r222 { fill: #42db89 }
-.terminal-1706147923-r223 { fill: #42db8a }
-.terminal-1706147923-r224 { fill: #41db8a }
-.terminal-1706147923-r225 { fill: #40da8b }
-.terminal-1706147923-r226 { fill: #58dd7a }
-.terminal-1706147923-r227 { fill: #57dd7b }
-.terminal-1706147923-r228 { fill: #56dd7b }
-.terminal-1706147923-r229 { fill: #56dd7c }
-.terminal-1706147923-r230 { fill: #55dd7c }
-.terminal-1706147923-r231 { fill: #54dd7c }
-.terminal-1706147923-r232 { fill: #54dd7d }
-.terminal-1706147923-r233 { fill: #53dd7d }
-.terminal-1706147923-r234 { fill: #52dd7d }
-.terminal-1706147923-r235 { fill: #52dd7e }
-.terminal-1706147923-r236 { fill: #51dd7e }
-.terminal-1706147923-r237 { fill: #50dc7f }
-.terminal-1706147923-r238 { fill: #4fdc7f }
-.terminal-1706147923-r239 { fill: #4fdc80 }
-.terminal-1706147923-r240 { fill: #40da8c }
-.terminal-1706147923-r241 { fill: #3fda8c }
-.terminal-1706147923-r242 { fill: #3fda8d }
-.terminal-1706147923-r243 { fill: #3fda8e }
-.terminal-1706147923-r244 { fill: #3eda8e }
-.terminal-1706147923-r245 { fill: #6bdd6f }
-.terminal-1706147923-r246 { fill: #6add6f }
-.terminal-1706147923-r247 { fill: #6add70 }
-.terminal-1706147923-r248 { fill: #69dd70 }
-.terminal-1706147923-r249 { fill: #68dd71 }
-.terminal-1706147923-r250 { fill: #67dd71 }
-.terminal-1706147923-r251 { fill: #67dd72 }
-.terminal-1706147923-r252 { fill: #66dd72 }
-.terminal-1706147923-r253 { fill: #65dd72 }
-.terminal-1706147923-r254 { fill: #65dd73 }
-.terminal-1706147923-r255 { fill: #64dd73 }
-.terminal-1706147923-r256 { fill: #63dd74 }
-.terminal-1706147923-r257 { fill: #62dd74 }
-.terminal-1706147923-r258 { fill: #62dd75 }
-.terminal-1706147923-r259 { fill: #61dd75 }
-.terminal-1706147923-r260 { fill: #e1e1e1 }
-.terminal-1706147923-r261 { fill: #4edc80 }
-.terminal-1706147923-r262 { fill: #4edc81 }
-.terminal-1706147923-r263 { fill: #4ddc81 }
-.terminal-1706147923-r264 { fill: #4cdc82 }
-.terminal-1706147923-r265 { fill: #4bdc82 }
-.terminal-1706147923-r266 { fill: #7edd63 }
-.terminal-1706147923-r267 { fill: #7edd64 }
-.terminal-1706147923-r268 { fill: #7ddd64 }
-.terminal-1706147923-r269 { fill: #7cdd65 }
-.terminal-1706147923-r270 { fill: #7bdd65 }
-.terminal-1706147923-r271 { fill: #7bdd66 }
-.terminal-1706147923-r272 { fill: #7add66 }
-.terminal-1706147923-r273 { fill: #79dd67 }
-.terminal-1706147923-r274 { fill: #78dd67 }
-.terminal-1706147923-r275 { fill: #77dd68 }
-.terminal-1706147923-r276 { fill: #76dd68 }
-.terminal-1706147923-r277 { fill: #76dd69 }
-.terminal-1706147923-r278 { fill: #75dd69 }
-.terminal-1706147923-r279 { fill: #60dd75 }
-.terminal-1706147923-r280 { fill: #60dd76 }
-.terminal-1706147923-r281 { fill: #5fdd76 }
-.terminal-1706147923-r282 { fill: #5edd77 }
-.terminal-1706147923-r283 { fill: #5ddd77 }
-.terminal-1706147923-r284 { fill: #91dd58 }
-.terminal-1706147923-r285 { fill: #90dd58 }
-.terminal-1706147923-r286 { fill: #90dd59 }
-.terminal-1706147923-r287 { fill: #8fdd59 }
-.terminal-1706147923-r288 { fill: #8edd5a }
-.terminal-1706147923-r289 { fill: #8ddd5a }
-.terminal-1706147923-r290 { fill: #8ddd5b }
-.terminal-1706147923-r291 { fill: #8cdd5b }
-.terminal-1706147923-r292 { fill: #8cdd5c }
-.terminal-1706147923-r293 { fill: #8bdd5c }
-.terminal-1706147923-r294 { fill: #8add5d }
-.terminal-1706147923-r295 { fill: #89dd5d }
-.terminal-1706147923-r296 { fill: #89dd5e }
-.terminal-1706147923-r297 { fill: #88dd5e }
-.terminal-1706147923-r298 { fill: #79dd66 }
-.terminal-1706147923-r299 { fill: #74dd69 }
-.terminal-1706147923-r300 { fill: #74dd6a }
-.terminal-1706147923-r301 { fill: #73dd6a }
-.terminal-1706147923-r302 { fill: #72dd6b }
-.terminal-1706147923-r303 { fill: #71dd6b }
-.terminal-1706147923-r304 { fill: #71dd6c }
-.terminal-1706147923-r305 { fill: #70dd6c }
-.terminal-1706147923-r306 { fill: #a4dd48 }
-.terminal-1706147923-r307 { fill: #a3dd49 }
-.terminal-1706147923-r308 { fill: #a2dd4a }
-.terminal-1706147923-r309 { fill: #a1dd4b }
-.terminal-1706147923-r310 { fill: #a0dd4c }
-.terminal-1706147923-r311 { fill: #9fdd4d }
-.terminal-1706147923-r312 { fill: #9edd4e }
-.terminal-1706147923-r313 { fill: #9ddd4f }
-.terminal-1706147923-r314 { fill: #9cdd4f }
-.terminal-1706147923-r315 { fill: #9cdd50 }
-.terminal-1706147923-r316 { fill: #9bdd50 }
-.terminal-1706147923-r317 { fill: #9add51 }
-.terminal-1706147923-r318 { fill: #99dd51 }
-.terminal-1706147923-r319 { fill: #99dd52 }
-.terminal-1706147923-r320 { fill: #98dd52 }
-.terminal-1706147923-r321 { fill: #98dd53 }
-.terminal-1706147923-r322 { fill: #97dd53 }
-.terminal-1706147923-r323 { fill: #97dd54 }
-.terminal-1706147923-r324 { fill: #96dd54 }
-.terminal-1706147923-r325 { fill: #95dd55 }
-.terminal-1706147923-r326 { fill: #94dd55 }
-.terminal-1706147923-r327 { fill: #94dd56 }
-.terminal-1706147923-r328 { fill: #93dd56 }
-.terminal-1706147923-r329 { fill: #93dd57 }
-.terminal-1706147923-r330 { fill: #92dd57 }
-.terminal-1706147923-r331 { fill: #87dd5e }
-.terminal-1706147923-r332 { fill: #87dd5f }
-.terminal-1706147923-r333 { fill: #86dd5f }
-.terminal-1706147923-r334 { fill: #85dd5f }
-.terminal-1706147923-r335 { fill: #85dd60 }
-.terminal-1706147923-r336 { fill: #84dd60 }
-.terminal-1706147923-r337 { fill: #83dd61 }
-.terminal-1706147923-r338 { fill: #b6dd36 }
-.terminal-1706147923-r339 { fill: #b5dd37 }
-.terminal-1706147923-r340 { fill: #b4dd38 }
-.terminal-1706147923-r341 { fill: #b3dd39 }
-.terminal-1706147923-r342 { fill: #b2dd3a }
-.terminal-1706147923-r343 { fill: #b1dd3b }
-.terminal-1706147923-r344 { fill: #b0dd3c }
-.terminal-1706147923-r345 { fill: #afdd3d }
-.terminal-1706147923-r346 { fill: #aedd3e }
-.terminal-1706147923-r347 { fill: #addd3f }
-.terminal-1706147923-r348 { fill: #acdd40 }
-.terminal-1706147923-r349 { fill: #abdd41 }
-.terminal-1706147923-r350 { fill: #aadd42 }
-.terminal-1706147923-r351 { fill: #a9dd43 }
-.terminal-1706147923-r352 { fill: #a8dd44 }
-.terminal-1706147923-r353 { fill: #a7dd45 }
-.terminal-1706147923-r354 { fill: #a6dd46 }
-.terminal-1706147923-r355 { fill: #a5dd47 }
-.terminal-1706147923-r356 { fill: #9bdd51 }
-.terminal-1706147923-r357 { fill: #c9dd23 }
-.terminal-1706147923-r358 { fill: #c8dd24 }
-.terminal-1706147923-r359 { fill: #c7dd25 }
-.terminal-1706147923-r360 { fill: #c6dd26 }
-.terminal-1706147923-r361 { fill: #c5dd27 }
-.terminal-1706147923-r362 { fill: #c4dd28 }
-.terminal-1706147923-r363 { fill: #c3dd29 }
-.terminal-1706147923-r364 { fill: #c2dd2a }
-.terminal-1706147923-r365 { fill: #c1dd2b }
-.terminal-1706147923-r366 { fill: #c0dd2c }
-.terminal-1706147923-r367 { fill: #bfdd2d }
-.terminal-1706147923-r368 { fill: #bedd2e }
-.terminal-1706147923-r369 { fill: #bddd2f }
-.terminal-1706147923-r370 { fill: #bcdd30 }
-.terminal-1706147923-r371 { fill: #bbdd31 }
-.terminal-1706147923-r372 { fill: #badd32 }
-.terminal-1706147923-r373 { fill: #b9dd33 }
-.terminal-1706147923-r374 { fill: #b8dd34 }
-.terminal-1706147923-r375 { fill: #b7dd35 }
-.terminal-1706147923-r376 { fill: #dbdd11 }
-.terminal-1706147923-r377 { fill: #dadd12 }
-.terminal-1706147923-r378 { fill: #d9dd13 }
-.terminal-1706147923-r379 { fill: #d8dd14 }
-.terminal-1706147923-r380 { fill: #d7dd15 }
-.terminal-1706147923-r381 { fill: #d6dd16 }
-.terminal-1706147923-r382 { fill: #d5dd17 }
-.terminal-1706147923-r383 { fill: #d4dd18 }
-.terminal-1706147923-r384 { fill: #d3dd19 }
-.terminal-1706147923-r385 { fill: #d2dd1a }
-.terminal-1706147923-r386 { fill: #d1dd1b }
-.terminal-1706147923-r387 { fill: #d0dd1c }
-.terminal-1706147923-r388 { fill: #cfdd1d }
-.terminal-1706147923-r389 { fill: #cedd1e }
-.terminal-1706147923-r390 { fill: #cddd1f }
-.terminal-1706147923-r391 { fill: #ccdd20 }
-.terminal-1706147923-r392 { fill: #cbdd21 }
-.terminal-1706147923-r393 { fill: #cadd22 }
-.terminal-1706147923-r394 { fill: #ead905 }
-.terminal-1706147923-r395 { fill: #eada05 }
-.terminal-1706147923-r396 { fill: #eada04 }
-.terminal-1706147923-r397 { fill: #eadb04 }
-.terminal-1706147923-r398 { fill: #eadb03 }
-.terminal-1706147923-r399 { fill: #eadc03 }
-.terminal-1706147923-r400 { fill: #e9dd03 }
-.terminal-1706147923-r401 { fill: #e8dd04 }
-.terminal-1706147923-r402 { fill: #e7dd05 }
-.terminal-1706147923-r403 { fill: #e6dd06 }
-.terminal-1706147923-r404 { fill: #e5dd07 }
-.terminal-1706147923-r405 { fill: #e4dd08 }
-.terminal-1706147923-r406 { fill: #e3dd09 }
-.terminal-1706147923-r407 { fill: #e2dd0a }
-.terminal-1706147923-r408 { fill: #e1dd0b }
-.terminal-1706147923-r409 { fill: #e0dd0c }
-.terminal-1706147923-r410 { fill: #dfdd0d }
-.terminal-1706147923-r411 { fill: #dedd0e }
-.terminal-1706147923-r412 { fill: #dddd0f }
-.terminal-1706147923-r413 { fill: #dcdd10 }
-.terminal-1706147923-r414 { fill: #eecc0f }
-.terminal-1706147923-r415 { fill: #eecd0e }
-.terminal-1706147923-r416 { fill: #eece0d }
-.terminal-1706147923-r417 { fill: #eecf0c }
-.terminal-1706147923-r418 { fill: #edd00b }
-.terminal-1706147923-r419 { fill: #edd10b }
-.terminal-1706147923-r420 { fill: #edd10a }
-.terminal-1706147923-r421 { fill: #edd20a }
-.terminal-1706147923-r422 { fill: #edd209 }
-.terminal-1706147923-r423 { fill: #edd309 }
-.terminal-1706147923-r424 { fill: #ecd309 }
-.terminal-1706147923-r425 { fill: #ecd409 }
-.terminal-1706147923-r426 { fill: #ecd408 }
-.terminal-1706147923-r427 { fill: #ecd508 }
-.terminal-1706147923-r428 { fill: #ecd507 }
-.terminal-1706147923-r429 { fill: #ecd607 }
-.terminal-1706147923-r430 { fill: #ebd607 }
-.terminal-1706147923-r431 { fill: #ebd707 }
-.terminal-1706147923-r432 { fill: #ebd706 }
-.terminal-1706147923-r433 { fill: #ebd806 }
-.terminal-1706147923-r434 { fill: #ebd805 }
-.terminal-1706147923-r435 { fill: #ebd905 }
-.terminal-1706147923-r436 { fill: #eebd1e }
-.terminal-1706147923-r437 { fill: #eebe1d }
-.terminal-1706147923-r438 { fill: #eebf1c }
-.terminal-1706147923-r439 { fill: #eec01b }
-.terminal-1706147923-r440 { fill: #eec11a }
-.terminal-1706147923-r441 { fill: #eec219 }
-.terminal-1706147923-r442 { fill: #eec318 }
-.terminal-1706147923-r443 { fill: #eec417 }
-.terminal-1706147923-r444 { fill: #eec516 }
-.terminal-1706147923-r445 { fill: #eec615 }
-.terminal-1706147923-r446 { fill: #eec714 }
-.terminal-1706147923-r447 { fill: #eec813 }
-.terminal-1706147923-r448 { fill: #eec912 }
-.terminal-1706147923-r449 { fill: #eeca11 }
-.terminal-1706147923-r450 { fill: #eecb10 }
-.terminal-1706147923-r451 { fill: #eeae2d }
-.terminal-1706147923-r452 { fill: #eeaf2c }
-.terminal-1706147923-r453 { fill: #eeb02b }
-.terminal-1706147923-r454 { fill: #eeb12a }
-.terminal-1706147923-r455 { fill: #eeb229 }
-.terminal-1706147923-r456 { fill: #eeb328 }
-.terminal-1706147923-r457 { fill: #eeb427 }
-.terminal-1706147923-r458 { fill: #eeb526 }
-.terminal-1706147923-r459 { fill: #eeb625 }
-.terminal-1706147923-r460 { fill: #eeb724 }
-.terminal-1706147923-r461 { fill: #eeb823 }
-.terminal-1706147923-r462 { fill: #eeb922 }
-.terminal-1706147923-r463 { fill: #eeba21 }
-.terminal-1706147923-r464 { fill: #eebb20 }
-.terminal-1706147923-r465 { fill: #eebc1f }
-.terminal-1706147923-r466 { fill: #ed9f3b }
-.terminal-1706147923-r467 { fill: #eda03b }
-.terminal-1706147923-r468 { fill: #eda03a }
-.terminal-1706147923-r469 { fill: #eda13a }
-.terminal-1706147923-r470 { fill: #eea239 }
-.terminal-1706147923-r471 { fill: #eea338 }
-.terminal-1706147923-r472 { fill: #eea437 }
-.terminal-1706147923-r473 { fill: #eea536 }
-.terminal-1706147923-r474 { fill: #eea635 }
-.terminal-1706147923-r475 { fill: #eea734 }
-.terminal-1706147923-r476 { fill: #eea833 }
-.terminal-1706147923-r477 { fill: #eea932 }
-.terminal-1706147923-r478 { fill: #eeaa31 }
-.terminal-1706147923-r479 { fill: #eeab30 }
-.terminal-1706147923-r480 { fill: #eeac2f }
-.terminal-1706147923-r481 { fill: #eead2e }
-.terminal-1706147923-r482 { fill: #e99247 }
-.terminal-1706147923-r483 { fill: #ea9246 }
-.terminal-1706147923-r484 { fill: #ea9346 }
-.terminal-1706147923-r485 { fill: #eb9445 }
-.terminal-1706147923-r486 { fill: #eb9544 }
-.terminal-1706147923-r487 { fill: #eb9644 }
-.terminal-1706147923-r488 { fill: #eb9643 }
-.terminal-1706147923-r489 { fill: #eb9743 }
-.terminal-1706147923-r490 { fill: #eb9742 }
-.terminal-1706147923-r491 { fill: #eb9842 }
-.terminal-1706147923-r492 { fill: #ec9841 }
-.terminal-1706147923-r493 { fill: #ec9941 }
-.terminal-1706147923-r494 { fill: #ec9a40 }
-.terminal-1706147923-r495 { fill: #ec9b3f }
-.terminal-1706147923-r496 { fill: #ec9c3e }
-.terminal-1706147923-r497 { fill: #ec9d3e }
-.terminal-1706147923-r498 { fill: #ed9d3d }
-.terminal-1706147923-r499 { fill: #ed9e3d }
-.terminal-1706147923-r500 { fill: #ed9e3c }
-.terminal-1706147923-r501 { fill: #ed9f3c }
-.terminal-1706147923-r502 { fill: #e2874e }
-.terminal-1706147923-r503 { fill: #e2884e }
-.terminal-1706147923-r504 { fill: #e3894d }
-.terminal-1706147923-r505 { fill: #e38a4d }
-.terminal-1706147923-r506 { fill: #e48a4c }
-.terminal-1706147923-r507 { fill: #e48b4c }
-.terminal-1706147923-r508 { fill: #e58b4b }
-.terminal-1706147923-r509 { fill: #e58c4b }
-.terminal-1706147923-r510 { fill: #e58d4b }
-.terminal-1706147923-r511 { fill: #e68d4a }
-.terminal-1706147923-r512 { fill: #e68e4a }
-.terminal-1706147923-r513 { fill: #e78e49 }
-.terminal-1706147923-r514 { fill: #e78f49 }
-.terminal-1706147923-r515 { fill: #e88f48 }
-.terminal-1706147923-r516 { fill: #e89048 }
-.terminal-1706147923-r517 { fill: #e89148 }
-.terminal-1706147923-r518 { fill: #e99147 }
-.terminal-1706147923-r519 { fill: #eb9545 }
-.terminal-1706147923-r520 { fill: #ec9940 }
-.terminal-1706147923-r521 { fill: #ec9c3f }
-.terminal-1706147923-r522 { fill: #da7b56 }
-.terminal-1706147923-r523 { fill: #da7c56 }
-.terminal-1706147923-r524 { fill: #db7d55 }
-.terminal-1706147923-r525 { fill: #db7e55 }
-.terminal-1706147923-r526 { fill: #dc7e54 }
-.terminal-1706147923-r527 { fill: #dc7f54 }
-.terminal-1706147923-r528 { fill: #dd8053 }
-.terminal-1706147923-r529 { fill: #dd8153 }
-.terminal-1706147923-r530 { fill: #de8152 }
-.terminal-1706147923-r531 { fill: #de8252 }
-.terminal-1706147923-r532 { fill: #df8351 }
-.terminal-1706147923-r533 { fill: #df8451 }
-.terminal-1706147923-r534 { fill: #e08450 }
-.terminal-1706147923-r535 { fill: #e08550 }
-.terminal-1706147923-r536 { fill: #e1864f }
-.terminal-1706147923-r537 { fill: #e1874f }
-.terminal-1706147923-r538 { fill: #d3715d }
-.terminal-1706147923-r539 { fill: #d4725c }
-.terminal-1706147923-r540 { fill: #d4735c }
-.terminal-1706147923-r541 { fill: #d5735b }
-.terminal-1706147923-r542 { fill: #d5745b }
-.terminal-1706147923-r543 { fill: #d6755a }
-.terminal-1706147923-r544 { fill: #d6765a }
-.terminal-1706147923-r545 { fill: #d77659 }
-.terminal-1706147923-r546 { fill: #d77759 }
-.terminal-1706147923-r547 { fill: #d77859 }
-.terminal-1706147923-r548 { fill: #d87858 }
-.terminal-1706147923-r549 { fill: #d87958 }
-.terminal-1706147923-r550 { fill: #d97957 }
-.terminal-1706147923-r551 { fill: #d97a57 }
-.terminal-1706147923-r552 { fill: #d97b57 }
-.terminal-1706147923-r553 { fill: #cb6664 }
-.terminal-1706147923-r554 { fill: #cc6764 }
-.terminal-1706147923-r555 { fill: #cc6864 }
-.terminal-1706147923-r556 { fill: #cd6863 }
-.terminal-1706147923-r557 { fill: #cd6963 }
-.terminal-1706147923-r558 { fill: #ce6962 }
-.terminal-1706147923-r559 { fill: #ce6a62 }
-.terminal-1706147923-r560 { fill: #cf6b61 }
-.terminal-1706147923-r561 { fill: #cf6c61 }
-.terminal-1706147923-r562 { fill: #d06c60 }
-.terminal-1706147923-r563 { fill: #d06d60 }
-.terminal-1706147923-r564 { fill: #d16d5f }
-.terminal-1706147923-r565 { fill: #d16e5f }
-.terminal-1706147923-r566 { fill: #d16f5f }
-.terminal-1706147923-r567 { fill: #d26f5e }
-.terminal-1706147923-r568 { fill: #d2705e }
-.terminal-1706147923-r569 { fill: #d3705d }
-.terminal-1706147923-r570 { fill: #d5755b }
-.terminal-1706147923-r571 { fill: #c45a61 }
-.terminal-1706147923-r572 { fill: #c55b62 }
-.terminal-1706147923-r573 { fill: #c55c62 }
-.terminal-1706147923-r574 { fill: #c65c62 }
-.terminal-1706147923-r575 { fill: #c65d62 }
-.terminal-1706147923-r576 { fill: #c65e62 }
-.terminal-1706147923-r577 { fill: #c75e62 }
-.terminal-1706147923-r578 { fill: #c75f63 }
-.terminal-1706147923-r579 { fill: #c86063 }
-.terminal-1706147923-r580 { fill: #c86163 }
-.terminal-1706147923-r581 { fill: #c96263 }
-.terminal-1706147923-r582 { fill: #c96364 }
-.terminal-1706147923-r583 { fill: #ca6364 }
-.terminal-1706147923-r584 { fill: #ca6464 }
-.terminal-1706147923-r585 { fill: #ca6564 }
-.terminal-1706147923-r586 { fill: #cb6564 }
-.terminal-1706147923-r587 { fill: #ce6b62 }
-.terminal-1706147923-r588 { fill: #bc4f5d }
-.terminal-1706147923-r589 { fill: #bd505e }
-.terminal-1706147923-r590 { fill: #bd515e }
-.terminal-1706147923-r591 { fill: #be515e }
-.terminal-1706147923-r592 { fill: #be525e }
-.terminal-1706147923-r593 { fill: #bf525f }
-.terminal-1706147923-r594 { fill: #bf535f }
-.terminal-1706147923-r595 { fill: #bf545f }
-.terminal-1706147923-r596 { fill: #c0545f }
-.terminal-1706147923-r597 { fill: #c0555f }
-.terminal-1706147923-r598 { fill: #c15560 }
-.terminal-1706147923-r599 { fill: #c15660 }
-.terminal-1706147923-r600 { fill: #c25660 }
-.terminal-1706147923-r601 { fill: #c25760 }
-.terminal-1706147923-r602 { fill: #c25860 }
-.terminal-1706147923-r603 { fill: #c35861 }
-.terminal-1706147923-r604 { fill: #c35961 }
-.terminal-1706147923-r605 { fill: #c45961 }
-.terminal-1706147923-r606 { fill: #c76063 }
-.terminal-1706147923-r607 { fill: #c96163 }
-.terminal-1706147923-r608 { fill: #b5445a }
-.terminal-1706147923-r609 { fill: #b5455a }
-.terminal-1706147923-r610 { fill: #b6455a }
-.terminal-1706147923-r611 { fill: #b6465a }
-.terminal-1706147923-r612 { fill: #b7475b }
-.terminal-1706147923-r613 { fill: #b7485b }
-.terminal-1706147923-r614 { fill: #b8485b }
-.terminal-1706147923-r615 { fill: #b8495b }
-.terminal-1706147923-r616 { fill: #b94a5c }
-.terminal-1706147923-r617 { fill: #b94b5c }
-.terminal-1706147923-r618 { fill: #ba4b5c }
-.terminal-1706147923-r619 { fill: #ba4c5c }
-.terminal-1706147923-r620 { fill: #bb4d5d }
-.terminal-1706147923-r621 { fill: #bb4e5d }
-.terminal-1706147923-r622 { fill: #bc4e5d }
-.terminal-1706147923-r623 { fill: #ae3957 }
-.terminal-1706147923-r624 { fill: #ae3a57 }
-.terminal-1706147923-r625 { fill: #af3a57 }
-.terminal-1706147923-r626 { fill: #af3b57 }
-.terminal-1706147923-r627 { fill: #af3c57 }
-.terminal-1706147923-r628 { fill: #b03c57 }
-.terminal-1706147923-r629 { fill: #b03c58 }
-.terminal-1706147923-r630 { fill: #b03d58 }
-.terminal-1706147923-r631 { fill: #b13d58 }
-.terminal-1706147923-r632 { fill: #b13e58 }
-.terminal-1706147923-r633 { fill: #b13f58 }
-.terminal-1706147923-r634 { fill: #b23f58 }
-.terminal-1706147923-r635 { fill: #b24058 }
-.terminal-1706147923-r636 { fill: #b24059 }
-.terminal-1706147923-r637 { fill: #b34059 }
-.terminal-1706147923-r638 { fill: #b34159 }
-.terminal-1706147923-r639 { fill: #b34259 }
-.terminal-1706147923-r640 { fill: #b44259 }
-.terminal-1706147923-r641 { fill: #b44359 }
+    .terminal-1811200677-r1 { fill: #663399 }
+.terminal-1811200677-r2 { fill: #643499 }
+.terminal-1811200677-r3 { fill: #62359a }
+.terminal-1811200677-r4 { fill: #60379b }
+.terminal-1811200677-r5 { fill: #5f399c }
+.terminal-1811200677-r6 { fill: #5d3a9e }
+.terminal-1811200677-r7 { fill: #5b3c9f }
+.terminal-1811200677-r8 { fill: #593ea0 }
+.terminal-1811200677-r9 { fill: #583fa1 }
+.terminal-1811200677-r10 { fill: #5641a2 }
+.terminal-1811200677-r11 { fill: #5443a3 }
+.terminal-1811200677-r12 { fill: #5344a5 }
+.terminal-1811200677-r13 { fill: #5146a6 }
+.terminal-1811200677-r14 { fill: #4f48a7 }
+.terminal-1811200677-r15 { fill: #4e49a8 }
+.terminal-1811200677-r16 { fill: #4c4ba9 }
+.terminal-1811200677-r17 { fill: #4a4daa }
+.terminal-1811200677-r18 { fill: #484fab }
+.terminal-1811200677-r19 { fill: #4651ac }
+.terminal-1811200677-r20 { fill: #4453ad }
+.terminal-1811200677-r21 { fill: #4354ae }
+.terminal-1811200677-r22 { fill: #4156b0 }
+.terminal-1811200677-r23 { fill: #3f58b1 }
+.terminal-1811200677-r24 { fill: #3e59b2 }
+.terminal-1811200677-r25 { fill: #3c5bb3 }
+.terminal-1811200677-r26 { fill: #3a5db4 }
+.terminal-1811200677-r27 { fill: #395eb6 }
+.terminal-1811200677-r28 { fill: #3760b7 }
+.terminal-1811200677-r29 { fill: #3562b8 }
+.terminal-1811200677-r30 { fill: #3364b9 }
+.terminal-1811200677-r31 { fill: #3265b9 }
+.terminal-1811200677-r32 { fill: #3067ba }
+.terminal-1811200677-r33 { fill: #2e69bb }
+.terminal-1811200677-r34 { fill: #2c6bbc }
+.terminal-1811200677-r35 { fill: #2a6dbd }
+.terminal-1811200677-r36 { fill: #296ebd }
+.terminal-1811200677-r37 { fill: #2770be }
+.terminal-1811200677-r38 { fill: #2572be }
+.terminal-1811200677-r39 { fill: #2473bf }
+.terminal-1811200677-r40 { fill: #2275bf }
+.terminal-1811200677-r41 { fill: #2077c0 }
+.terminal-1811200677-r42 { fill: #1f78c0 }
+.terminal-1811200677-r43 { fill: #1d7ac1 }
+.terminal-1811200677-r44 { fill: #1b7cc1 }
+.terminal-1811200677-r45 { fill: #197ec2 }
+.terminal-1811200677-r46 { fill: #1780c3 }
+.terminal-1811200677-r47 { fill: #1681c3 }
+.terminal-1811200677-r48 { fill: #1483c4 }
+.terminal-1811200677-r49 { fill: #1285c4 }
+.terminal-1811200677-r50 { fill: #1186c5 }
+.terminal-1811200677-r51 { fill: #0f88c6 }
+.terminal-1811200677-r52 { fill: #0d8ac6 }
+.terminal-1811200677-r53 { fill: #0c8bc7 }
+.terminal-1811200677-r54 { fill: #0a8dc7 }
+.terminal-1811200677-r55 { fill: #088fc8 }
+.terminal-1811200677-r56 { fill: #0790c9 }
+.terminal-1811200677-r57 { fill: #0592c9 }
+.terminal-1811200677-r58 { fill: #0494ca }
+.terminal-1811200677-r59 { fill: #0295ca }
+.terminal-1811200677-r60 { fill: #0197cb }
+.terminal-1811200677-r61 { fill: #0099cc }
+.terminal-1811200677-r62 { fill: #009acc }
+.terminal-1811200677-r63 { fill: #009bcc }
+.terminal-1811200677-r64 { fill: #009ccc }
+.terminal-1811200677-r65 { fill: #009ecc }
+.terminal-1811200677-r66 { fill: #009fcc }
+.terminal-1811200677-r67 { fill: #00a0cc }
+.terminal-1811200677-r68 { fill: #00a1cc }
+.terminal-1811200677-r69 { fill: #00a2cc }
+.terminal-1811200677-r70 { fill: #00a3cc }
+.terminal-1811200677-r71 { fill: #00a4cc }
+.terminal-1811200677-r72 { fill: #00a5cc }
+.terminal-1811200677-r73 { fill: #00a6cc }
+.terminal-1811200677-r74 { fill: #00a7cc }
+.terminal-1811200677-r75 { fill: #00a9cc }
+.terminal-1811200677-r76 { fill: #00aacc }
+.terminal-1811200677-r77 { fill: #00abcc }
+.terminal-1811200677-r78 { fill: #00accc }
+.terminal-1811200677-r79 { fill: #00adcc }
+.terminal-1811200677-r80 { fill: #00afcc }
+.terminal-1811200677-r81 { fill: #00b0cc }
+.terminal-1811200677-r82 { fill: #00b1cc }
+.terminal-1811200677-r83 { fill: #00b2cc }
+.terminal-1811200677-r84 { fill: #00b3cc }
+.terminal-1811200677-r85 { fill: #00b5cc }
+.terminal-1811200677-r86 { fill: #00b6cc }
+.terminal-1811200677-r87 { fill: #00b7cc }
+.terminal-1811200677-r88 { fill: #00b8cb }
+.terminal-1811200677-r89 { fill: #01b9cb }
+.terminal-1811200677-r90 { fill: #c5c8c6 }
+.terminal-1811200677-r91 { fill: #64349a }
+.terminal-1811200677-r92 { fill: #62369b }
+.terminal-1811200677-r93 { fill: #60379c }
+.terminal-1811200677-r94 { fill: #5e399d }
+.terminal-1811200677-r95 { fill: #5d3b9e }
+.terminal-1811200677-r96 { fill: #5740a1 }
+.terminal-1811200677-r97 { fill: #5443a4 }
+.terminal-1811200677-r98 { fill: #5245a5 }
+.terminal-1811200677-r99 { fill: #4d4aa8 }
+.terminal-1811200677-r100 { fill: #4b4ca9 }
+.terminal-1811200677-r101 { fill: #4453ae }
+.terminal-1811200677-r102 { fill: #4255af }
+.terminal-1811200677-r103 { fill: #3d5ab2 }
+.terminal-1811200677-r104 { fill: #3a5db5 }
+.terminal-1811200677-r105 { fill: #385fb6 }
+.terminal-1811200677-r106 { fill: #3166ba }
+.terminal-1811200677-r107 { fill: #2f68bb }
+.terminal-1811200677-r108 { fill: #286fbd }
+.terminal-1811200677-r109 { fill: #2374bf }
+.terminal-1811200677-r110 { fill: #1e79c0 }
+.terminal-1811200677-r111 { fill: #1582c3 }
+.terminal-1811200677-r112 { fill: #1087c5 }
+.terminal-1811200677-r113 { fill: #0b8cc7 }
+.terminal-1811200677-r114 { fill: #0791c9 }
+.terminal-1811200677-r115 { fill: #0296ca }
+.terminal-1811200677-r116 { fill: #009dcc }
+.terminal-1811200677-r117 { fill: #00a8cc }
+.terminal-1811200677-r118 { fill: #00aecc }
+.terminal-1811200677-r119 { fill: #00b4cc }
+.terminal-1811200677-r120 { fill: #01baca }
+.terminal-1811200677-r121 { fill: #02baca }
+.terminal-1811200677-r122 { fill: #02bbc9 }
+.terminal-1811200677-r123 { fill: #03bcc9 }
+.terminal-1811200677-r124 { fill: #04bdc8 }
+.terminal-1811200677-r125 { fill: #05bdc8 }
+.terminal-1811200677-r126 { fill: #63349a }
+.terminal-1811200677-r127 { fill: #60389c }
+.terminal-1811200677-r128 { fill: #5c3b9e }
+.terminal-1811200677-r129 { fill: #5a3d9f }
+.terminal-1811200677-r130 { fill: #5542a3 }
+.terminal-1811200677-r131 { fill: #5047a6 }
+.terminal-1811200677-r132 { fill: #494eab }
+.terminal-1811200677-r133 { fill: #4750ac }
+.terminal-1811200677-r134 { fill: #4651ad }
+.terminal-1811200677-r135 { fill: #4057b0 }
+.terminal-1811200677-r136 { fill: #3b5cb4 }
+.terminal-1811200677-r137 { fill: #3661b7 }
+.terminal-1811200677-r138 { fill: #2d6abc }
+.terminal-1811200677-r139 { fill: #2b6cbd }
+.terminal-1811200677-r140 { fill: #1c7bc1 }
+.terminal-1811200677-r141 { fill: #1a7dc2 }
+.terminal-1811200677-r142 { fill: #1384c4 }
+.terminal-1811200677-r143 { fill: #1285c5 }
+.terminal-1811200677-r144 { fill: #0e89c6 }
+.terminal-1811200677-r145 { fill: #098ec8 }
+.terminal-1811200677-r146 { fill: #0691c9 }
+.terminal-1811200677-r147 { fill: #0593c9 }
+.terminal-1811200677-r148 { fill: #0394ca }
+.terminal-1811200677-r149 { fill: #0296cb }
+.terminal-1811200677-r150 { fill: #0098cb }
+.terminal-1811200677-r151 { fill: #02bbca }
+.terminal-1811200677-r152 { fill: #03bbc9 }
+.terminal-1811200677-r153 { fill: #06bec7 }
+.terminal-1811200677-r154 { fill: #08bfc6 }
+.terminal-1811200677-r155 { fill: #09bfc6 }
+.terminal-1811200677-r156 { fill: #0ac0c5 }
+.terminal-1811200677-r157 { fill: #0bc0c5 }
+.terminal-1811200677-r158 { fill: #0cc1c4 }
+.terminal-1811200677-r159 { fill: #583fa0 }
+.terminal-1811200677-r160 { fill: #5740a2 }
+.terminal-1811200677-r161 { fill: #5344a4 }
+.terminal-1811200677-r162 { fill: #4d4aa9 }
+.terminal-1811200677-r163 { fill: #4b4caa }
+.terminal-1811200677-r164 { fill: #4552ad }
+.terminal-1811200677-r165 { fill: #3e59b1 }
+.terminal-1811200677-r166 { fill: #3d5ab3 }
+.terminal-1811200677-r167 { fill: #395eb5 }
+.terminal-1811200677-r168 { fill: #3463b8 }
+.terminal-1811200677-r169 { fill: #2671be }
+.terminal-1811200677-r170 { fill: #2176bf }
+.terminal-1811200677-r171 { fill: #187fc2 }
+.terminal-1811200677-r172 { fill: #0c8bc6 }
+.terminal-1811200677-r173 { fill: #0890c8 }
+.terminal-1811200677-r174 { fill: #0395ca }
+.terminal-1811200677-r175 { fill: #0196cb }
+.terminal-1811200677-r176 { fill: #07bec7 }
+.terminal-1811200677-r177 { fill: #0dc1c4 }
+.terminal-1811200677-r178 { fill: #0ec2c3 }
+.terminal-1811200677-r179 { fill: #0fc2c3 }
+.terminal-1811200677-r180 { fill: #10c3c2 }
+.terminal-1811200677-r181 { fill: #11c3c2 }
+.terminal-1811200677-r182 { fill: #13c4c1 }
+.terminal-1811200677-r183 { fill: #14c5c0 }
+.terminal-1811200677-r184 { fill: #4156af }
+.terminal-1811200677-r185 { fill: #286fbe }
+.terminal-1811200677-r186 { fill: #2473be }
+.terminal-1811200677-r187 { fill: #0f88c5 }
+.terminal-1811200677-r188 { fill: #0790c8 }
+.terminal-1811200677-r189 { fill: #0692c9 }
+.terminal-1811200677-r190 { fill: #0493ca }
+.terminal-1811200677-r191 { fill: #00b9cb }
+.terminal-1811200677-r192 { fill: #01b9ca }
+.terminal-1811200677-r193 { fill: #12c4c1 }
+.terminal-1811200677-r194 { fill: #15c5c0 }
+.terminal-1811200677-r195 { fill: #16c6bf }
+.terminal-1811200677-r196 { fill: #17c6bf }
+.terminal-1811200677-r197 { fill: #18c7be }
+.terminal-1811200677-r198 { fill: #19c7be }
+.terminal-1811200677-r199 { fill: #1ac7be }
+.terminal-1811200677-r200 { fill: #4057b1 }
+.terminal-1811200677-r201 { fill: #098fc8 }
+.terminal-1811200677-r202 { fill: #1bc8bd }
+.terminal-1811200677-r203 { fill: #1cc8bd }
+.terminal-1811200677-r204 { fill: #1dc9bc }
+.terminal-1811200677-r205 { fill: #1ec9bb }
+.terminal-1811200677-r206 { fill: #1fcaba }
+.terminal-1811200677-r207 { fill: #21cbb9 }
+.terminal-1811200677-r208 { fill: #22cbb8 }
+.terminal-1811200677-r209 { fill: #18c6bf }
+.terminal-1811200677-r210 { fill: #1cc8bc }
+.terminal-1811200677-r211 { fill: #1dc9bb }
+.terminal-1811200677-r212 { fill: #20caba }
+.terminal-1811200677-r213 { fill: #23ccb7 }
+.terminal-1811200677-r214 { fill: #24ccb5 }
+.terminal-1811200677-r215 { fill: #26cdb3 }
+.terminal-1811200677-r216 { fill: #27ceb2 }
+.terminal-1811200677-r217 { fill: #28ceb0 }
+.terminal-1811200677-r218 { fill: #29cfae }
+.terminal-1811200677-r219 { fill: #0097cb }
+.terminal-1811200677-r220 { fill: #16c5c0 }
+.terminal-1811200677-r221 { fill: #23ccb6 }
+.terminal-1811200677-r222 { fill: #25cdb5 }
+.terminal-1811200677-r223 { fill: #27ceb1 }
+.terminal-1811200677-r224 { fill: #2bd0ac }
+.terminal-1811200677-r225 { fill: #2cd0ab }
+.terminal-1811200677-r226 { fill: #2dd1a9 }
+.terminal-1811200677-r227 { fill: #2ed1a7 }
+.terminal-1811200677-r228 { fill: #2fd2a6 }
+.terminal-1811200677-r229 { fill: #30d3a4 }
+.terminal-1811200677-r230 { fill: #20cab9 }
+.terminal-1811200677-r231 { fill: #21cbb8 }
+.terminal-1811200677-r232 { fill: #24ccb6 }
+.terminal-1811200677-r233 { fill: #25cdb4 }
+.terminal-1811200677-r234 { fill: #28ceaf }
+.terminal-1811200677-r235 { fill: #2acfae }
+.terminal-1811200677-r236 { fill: #2cd0aa }
+.terminal-1811200677-r237 { fill: #2ed2a7 }
+.terminal-1811200677-r238 { fill: #2fd2a5 }
+.terminal-1811200677-r239 { fill: #31d3a2 }
+.terminal-1811200677-r240 { fill: #32d4a0 }
+.terminal-1811200677-r241 { fill: #34d59e }
+.terminal-1811200677-r242 { fill: #35d59d }
+.terminal-1811200677-r243 { fill: #36d69b }
+.terminal-1811200677-r244 { fill: #37d699 }
+.terminal-1811200677-r245 { fill: #26cdb2 }
+.terminal-1811200677-r246 { fill: #29cfaf }
+.terminal-1811200677-r247 { fill: #2acfad }
+.terminal-1811200677-r248 { fill: #2dd1a8 }
+.terminal-1811200677-r249 { fill: #30d3a3 }
+.terminal-1811200677-r250 { fill: #33d4a0 }
+.terminal-1811200677-r251 { fill: #35d59c }
+.terminal-1811200677-r252 { fill: #36d69a }
+.terminal-1811200677-r253 { fill: #39d797 }
+.terminal-1811200677-r254 { fill: #3ad895 }
+.terminal-1811200677-r255 { fill: #3bd893 }
+.terminal-1811200677-r256 { fill: #3cd992 }
+.terminal-1811200677-r257 { fill: #3dd990 }
+.terminal-1811200677-r258 { fill: #3ed98e }
+.terminal-1811200677-r259 { fill: #2bd0ab }
+.terminal-1811200677-r260 { fill: #2cd1aa }
+.terminal-1811200677-r261 { fill: #2ed2a6 }
+.terminal-1811200677-r262 { fill: #32d4a1 }
+.terminal-1811200677-r263 { fill: #38d798 }
+.terminal-1811200677-r264 { fill: #3cd991 }
+.terminal-1811200677-r265 { fill: #3eda8e }
+.terminal-1811200677-r266 { fill: #3fda8c }
+.terminal-1811200677-r267 { fill: #40da8b }
+.terminal-1811200677-r268 { fill: #42db89 }
+.terminal-1811200677-r269 { fill: #45db87 }
+.terminal-1811200677-r270 { fill: #47db85 }
+.terminal-1811200677-r271 { fill: #4adc84 }
+.terminal-1811200677-r272 { fill: #25cdb3 }
+.terminal-1811200677-r273 { fill: #2cd1a9 }
+.terminal-1811200677-r274 { fill: #2ed1a8 }
+.terminal-1811200677-r275 { fill: #30d2a4 }
+.terminal-1811200677-r276 { fill: #31d3a3 }
+.terminal-1811200677-r277 { fill: #33d49f }
+.terminal-1811200677-r278 { fill: #34d59d }
+.terminal-1811200677-r279 { fill: #37d69a }
+.terminal-1811200677-r280 { fill: #39d796 }
+.terminal-1811200677-r281 { fill: #43db89 }
+.terminal-1811200677-r282 { fill: #48db85 }
+.terminal-1811200677-r283 { fill: #4adc83 }
+.terminal-1811200677-r284 { fill: #4ddc81 }
+.terminal-1811200677-r285 { fill: #4fdc80 }
+.terminal-1811200677-r286 { fill: #52dd7e }
+.terminal-1811200677-r287 { fill: #54dd7c }
+.terminal-1811200677-r288 { fill: #57dd7b }
+.terminal-1811200677-r289 { fill: #5add79 }
+.terminal-1811200677-r290 { fill: #3ad894 }
+.terminal-1811200677-r291 { fill: #3dd98f }
+.terminal-1811200677-r292 { fill: #3fda8e }
+.terminal-1811200677-r293 { fill: #40da8c }
+.terminal-1811200677-r294 { fill: #41db8a }
+.terminal-1811200677-r295 { fill: #43db88 }
+.terminal-1811200677-r296 { fill: #46db87 }
+.terminal-1811200677-r297 { fill: #4bdc83 }
+.terminal-1811200677-r298 { fill: #4fdc7f }
+.terminal-1811200677-r299 { fill: #55dd7c }
+.terminal-1811200677-r300 { fill: #58dd7a }
+.terminal-1811200677-r301 { fill: #5bdd79 }
+.terminal-1811200677-r302 { fill: #5ddd77 }
+.terminal-1811200677-r303 { fill: #60dd75 }
+.terminal-1811200677-r304 { fill: #63dd74 }
+.terminal-1811200677-r305 { fill: #66dd72 }
+.terminal-1811200677-r306 { fill: #69dd70 }
+.terminal-1811200677-r307 { fill: #6cdd6e }
+.terminal-1811200677-r308 { fill: #38d797 }
+.terminal-1811200677-r309 { fill: #3bd894 }
+.terminal-1811200677-r310 { fill: #3cd892 }
+.terminal-1811200677-r311 { fill: #3dd991 }
+.terminal-1811200677-r312 { fill: #3ed98f }
+.terminal-1811200677-r313 { fill: #3fda8d }
+.terminal-1811200677-r314 { fill: #44db88 }
+.terminal-1811200677-r315 { fill: #46db86 }
+.terminal-1811200677-r316 { fill: #49dc84 }
+.terminal-1811200677-r317 { fill: #50dc7f }
+.terminal-1811200677-r318 { fill: #53dd7d }
+.terminal-1811200677-r319 { fill: #5bdd78 }
+.terminal-1811200677-r320 { fill: #5edd77 }
+.terminal-1811200677-r321 { fill: #61dd75 }
+.terminal-1811200677-r322 { fill: #64dd73 }
+.terminal-1811200677-r323 { fill: #67dd72 }
+.terminal-1811200677-r324 { fill: #6add70 }
+.terminal-1811200677-r325 { fill: #6ddd6e }
+.terminal-1811200677-r326 { fill: #70dd6c }
+.terminal-1811200677-r327 { fill: #73dd6a }
+.terminal-1811200677-r328 { fill: #76dd68 }
+.terminal-1811200677-r329 { fill: #79dd67 }
+.terminal-1811200677-r330 { fill: #7cdd65 }
+.terminal-1811200677-r331 { fill: #7fdd63 }
+.terminal-1811200677-r332 { fill: #42db8a }
+.terminal-1811200677-r333 { fill: #47db86 }
+.terminal-1811200677-r334 { fill: #4bdc82 }
+.terminal-1811200677-r335 { fill: #4edc81 }
+.terminal-1811200677-r336 { fill: #56dd7b }
+.terminal-1811200677-r337 { fill: #59dd7a }
+.terminal-1811200677-r338 { fill: #5cdd78 }
+.terminal-1811200677-r339 { fill: #5edd76 }
+.terminal-1811200677-r340 { fill: #67dd71 }
+.terminal-1811200677-r341 { fill: #6add6f }
+.terminal-1811200677-r342 { fill: #79dd66 }
+.terminal-1811200677-r343 { fill: #82dd61 }
+.terminal-1811200677-r344 { fill: #85dd60 }
+.terminal-1811200677-r345 { fill: #88dd5e }
+.terminal-1811200677-r346 { fill: #8bdd5c }
+.terminal-1811200677-r347 { fill: #8ddd5a }
+.terminal-1811200677-r348 { fill: #90dd58 }
+.terminal-1811200677-r349 { fill: #28ceb1 }
+.terminal-1811200677-r350 { fill: #4cdc82 }
+.terminal-1811200677-r351 { fill: #4edc80 }
+.terminal-1811200677-r352 { fill: #51dd7e }
+.terminal-1811200677-r353 { fill: #54dd7d }
+.terminal-1811200677-r354 { fill: #59dd79 }
+.terminal-1811200677-r355 { fill: #5fdd76 }
+.terminal-1811200677-r356 { fill: #62dd74 }
+.terminal-1811200677-r357 { fill: #65dd73 }
+.terminal-1811200677-r358 { fill: #68dd71 }
+.terminal-1811200677-r359 { fill: #6bdd6f }
+.terminal-1811200677-r360 { fill: #6edd6d }
+.terminal-1811200677-r361 { fill: #71dd6b }
+.terminal-1811200677-r362 { fill: #74dd6a }
+.terminal-1811200677-r363 { fill: #77dd68 }
+.terminal-1811200677-r364 { fill: #7add66 }
+.terminal-1811200677-r365 { fill: #7ddd64 }
+.terminal-1811200677-r366 { fill: #80dd63 }
+.terminal-1811200677-r367 { fill: #8edd5a }
+.terminal-1811200677-r368 { fill: #91dd58 }
+.terminal-1811200677-r369 { fill: #94dd56 }
+.terminal-1811200677-r370 { fill: #96dd54 }
+.terminal-1811200677-r371 { fill: #99dd52 }
+.terminal-1811200677-r372 { fill: #9cdd4f }
+.terminal-1811200677-r373 { fill: #9fdd4d }
+.terminal-1811200677-r374 { fill: #a2dd4a }
+.terminal-1811200677-r375 { fill: #60dd76 }
+.terminal-1811200677-r376 { fill: #65dd72 }
+.terminal-1811200677-r377 { fill: #74dd69 }
+.terminal-1811200677-r378 { fill: #83dd61 }
+.terminal-1811200677-r379 { fill: #86dd5f }
+.terminal-1811200677-r380 { fill: #89dd5e }
+.terminal-1811200677-r381 { fill: #8cdd5c }
+.terminal-1811200677-r382 { fill: #94dd55 }
+.terminal-1811200677-r383 { fill: #97dd53 }
+.terminal-1811200677-r384 { fill: #9add51 }
+.terminal-1811200677-r385 { fill: #9ddd4f }
+.terminal-1811200677-r386 { fill: #a0dd4c }
+.terminal-1811200677-r387 { fill: #a5dd47 }
+.terminal-1811200677-r388 { fill: #a8dd44 }
+.terminal-1811200677-r389 { fill: #abdd41 }
+.terminal-1811200677-r390 { fill: #aedd3e }
+.terminal-1811200677-r391 { fill: #b1dd3b }
+.terminal-1811200677-r392 { fill: #b4dd38 }
+.terminal-1811200677-r393 { fill: #72dd6b }
+.terminal-1811200677-r394 { fill: #75dd69 }
+.terminal-1811200677-r395 { fill: #78dd67 }
+.terminal-1811200677-r396 { fill: #7bdd66 }
+.terminal-1811200677-r397 { fill: #7edd64 }
+.terminal-1811200677-r398 { fill: #81dd62 }
+.terminal-1811200677-r399 { fill: #89dd5d }
+.terminal-1811200677-r400 { fill: #8cdd5b }
+.terminal-1811200677-r401 { fill: #8fdd59 }
+.terminal-1811200677-r402 { fill: #92dd57 }
+.terminal-1811200677-r403 { fill: #95dd55 }
+.terminal-1811200677-r404 { fill: #98dd53 }
+.terminal-1811200677-r405 { fill: #a3dd49 }
+.terminal-1811200677-r406 { fill: #a6dd46 }
+.terminal-1811200677-r407 { fill: #a9dd43 }
+.terminal-1811200677-r408 { fill: #acdd40 }
+.terminal-1811200677-r409 { fill: #b7dd35 }
+.terminal-1811200677-r410 { fill: #badd32 }
+.terminal-1811200677-r411 { fill: #bddd2f }
+.terminal-1811200677-r412 { fill: #c0dd2c }
+.terminal-1811200677-r413 { fill: #c3dd29 }
+.terminal-1811200677-r414 { fill: #c5dd27 }
+.terminal-1811200677-r415 { fill: #84dd60 }
+.terminal-1811200677-r416 { fill: #87dd5f }
+.terminal-1811200677-r417 { fill: #8add5d }
+.terminal-1811200677-r418 { fill: #8ddd5b }
+.terminal-1811200677-r419 { fill: #9bdd50 }
+.terminal-1811200677-r420 { fill: #9edd4e }
+.terminal-1811200677-r421 { fill: #a1dd4b }
+.terminal-1811200677-r422 { fill: #afdd3d }
+.terminal-1811200677-r423 { fill: #b2dd3a }
+.terminal-1811200677-r424 { fill: #b5dd37 }
+.terminal-1811200677-r425 { fill: #b8dd34 }
+.terminal-1811200677-r426 { fill: #c6dd26 }
+.terminal-1811200677-r427 { fill: #c9dd23 }
+.terminal-1811200677-r428 { fill: #ccdd20 }
+.terminal-1811200677-r429 { fill: #cfdd1d }
+.terminal-1811200677-r430 { fill: #d1dd1b }
+.terminal-1811200677-r431 { fill: #d4dd18 }
+.terminal-1811200677-r432 { fill: #d7dd15 }
+.terminal-1811200677-r433 { fill: #e1e1e1 }
+.terminal-1811200677-r434 { fill: #a4dd48 }
+.terminal-1811200677-r435 { fill: #a7dd45 }
+.terminal-1811200677-r436 { fill: #aadd42 }
+.terminal-1811200677-r437 { fill: #addd3f }
+.terminal-1811200677-r438 { fill: #bbdd31 }
+.terminal-1811200677-r439 { fill: #bedd2e }
+.terminal-1811200677-r440 { fill: #c1dd2b }
+.terminal-1811200677-r441 { fill: #c4dd28 }
+.terminal-1811200677-r442 { fill: #d2dd1a }
+.terminal-1811200677-r443 { fill: #d5dd17 }
+.terminal-1811200677-r444 { fill: #d8dd14 }
+.terminal-1811200677-r445 { fill: #dadd12 }
+.terminal-1811200677-r446 { fill: #dddd0f }
+.terminal-1811200677-r447 { fill: #e0dd0c }
+.terminal-1811200677-r448 { fill: #e3dd09 }
+.terminal-1811200677-r449 { fill: #e6dd06 }
+.terminal-1811200677-r450 { fill: #e9dd03 }
+.terminal-1811200677-r451 { fill: #b0dd3c }
+.terminal-1811200677-r452 { fill: #b3dd39 }
+.terminal-1811200677-r453 { fill: #b6dd36 }
+.terminal-1811200677-r454 { fill: #b9dd33 }
+.terminal-1811200677-r455 { fill: #c7dd25 }
+.terminal-1811200677-r456 { fill: #cadd22 }
+.terminal-1811200677-r457 { fill: #cddd1f }
+.terminal-1811200677-r458 { fill: #d0dd1c }
+.terminal-1811200677-r459 { fill: #dbdd11 }
+.terminal-1811200677-r460 { fill: #dedd0e }
+.terminal-1811200677-r461 { fill: #e1dd0b }
+.terminal-1811200677-r462 { fill: #e4dd08 }
+.terminal-1811200677-r463 { fill: #eadb04 }
+.terminal-1811200677-r464 { fill: #ebd905 }
+.terminal-1811200677-r465 { fill: #ebd706 }
+.terminal-1811200677-r466 { fill: #ecd508 }
+.terminal-1811200677-r467 { fill: #ecd309 }
+.terminal-1811200677-r468 { fill: #edd10b }
+.terminal-1811200677-r469 { fill: #bcdd30 }
+.terminal-1811200677-r470 { fill: #bfdd2d }
+.terminal-1811200677-r471 { fill: #c2dd2a }
+.terminal-1811200677-r472 { fill: #d3dd19 }
+.terminal-1811200677-r473 { fill: #d6dd16 }
+.terminal-1811200677-r474 { fill: #d9dd13 }
+.terminal-1811200677-r475 { fill: #e7dd05 }
+.terminal-1811200677-r476 { fill: #eadc03 }
+.terminal-1811200677-r477 { fill: #eada04 }
+.terminal-1811200677-r478 { fill: #ebd805 }
+.terminal-1811200677-r479 { fill: #ebd607 }
+.terminal-1811200677-r480 { fill: #ecd408 }
+.terminal-1811200677-r481 { fill: #edd209 }
+.terminal-1811200677-r482 { fill: #edd00b }
+.terminal-1811200677-r483 { fill: #eece0d }
+.terminal-1811200677-r484 { fill: #eecc0f }
+.terminal-1811200677-r485 { fill: #eeca11 }
+.terminal-1811200677-r486 { fill: #eec813 }
+.terminal-1811200677-r487 { fill: #eec516 }
+.terminal-1811200677-r488 { fill: #eec318 }
+.terminal-1811200677-r489 { fill: #30d2a5 }
+.terminal-1811200677-r490 { fill: #6cdd6f }
+.terminal-1811200677-r491 { fill: #6fdd6d }
+.terminal-1811200677-r492 { fill: #80dd62 }
+.terminal-1811200677-r493 { fill: #8fdd5a }
+.terminal-1811200677-r494 { fill: #91dd57 }
+.terminal-1811200677-r495 { fill: #c8dd24 }
+.terminal-1811200677-r496 { fill: #cbdd21 }
+.terminal-1811200677-r497 { fill: #cedd1e }
+.terminal-1811200677-r498 { fill: #dcdd10 }
+.terminal-1811200677-r499 { fill: #dfdd0d }
+.terminal-1811200677-r500 { fill: #e2dd0a }
+.terminal-1811200677-r501 { fill: #e5dd07 }
+.terminal-1811200677-r502 { fill: #ebd806 }
+.terminal-1811200677-r503 { fill: #edd20a }
+.terminal-1811200677-r504 { fill: #eec912 }
+.terminal-1811200677-r505 { fill: #eec714 }
+.terminal-1811200677-r506 { fill: #eec01b }
+.terminal-1811200677-r507 { fill: #eebe1d }
+.terminal-1811200677-r508 { fill: #eebc1f }
+.terminal-1811200677-r509 { fill: #eeb922 }
+.terminal-1811200677-r510 { fill: #eeb724 }
+.terminal-1811200677-r511 { fill: #eeb427 }
+.terminal-1811200677-r512 { fill: #7bdd65 }
+.terminal-1811200677-r513 { fill: #9bdd51 }
+.terminal-1811200677-r514 { fill: #e8dd04 }
+.terminal-1811200677-r515 { fill: #ecd607 }
+.terminal-1811200677-r516 { fill: #ecd409 }
+.terminal-1811200677-r517 { fill: #eecb10 }
+.terminal-1811200677-r518 { fill: #eec219 }
+.terminal-1811200677-r519 { fill: #eebb20 }
+.terminal-1811200677-r520 { fill: #eeb625 }
+.terminal-1811200677-r521 { fill: #eeb12a }
+.terminal-1811200677-r522 { fill: #eeaf2c }
+.terminal-1811200677-r523 { fill: #eead2e }
+.terminal-1811200677-r524 { fill: #eeab30 }
+.terminal-1811200677-r525 { fill: #eea833 }
+.terminal-1811200677-r526 { fill: #eea635 }
+.terminal-1811200677-r527 { fill: #3bd892 }
+.terminal-1811200677-r528 { fill: #52dd7d }
+.terminal-1811200677-r529 { fill: #76dd69 }
+.terminal-1811200677-r530 { fill: #90dd59 }
+.terminal-1811200677-r531 { fill: #98dd52 }
+.terminal-1811200677-r532 { fill: #eadb03 }
+.terminal-1811200677-r533 { fill: #ead905 }
+.terminal-1811200677-r534 { fill: #ecd507 }
+.terminal-1811200677-r535 { fill: #edd10a }
+.terminal-1811200677-r536 { fill: #eecf0c }
+.terminal-1811200677-r537 { fill: #eecd0e }
+.terminal-1811200677-r538 { fill: #eec615 }
+.terminal-1811200677-r539 { fill: #eec417 }
+.terminal-1811200677-r540 { fill: #eebd1e }
+.terminal-1811200677-r541 { fill: #eeb823 }
+.terminal-1811200677-r542 { fill: #eeb328 }
+.terminal-1811200677-r543 { fill: #eeac2f }
+.terminal-1811200677-r544 { fill: #eeaa31 }
+.terminal-1811200677-r545 { fill: #eea338 }
+.terminal-1811200677-r546 { fill: #eda13a }
+.terminal-1811200677-r547 { fill: #ed9f3c }
+.terminal-1811200677-r548 { fill: #ed9d3d }
+.terminal-1811200677-r549 { fill: #ec9b3f }
+.terminal-1811200677-r550 { fill: #ec9941 }
+.terminal-1811200677-r551 { fill: #82dd62 }
+.terminal-1811200677-r552 { fill: #87dd5e }
+.terminal-1811200677-r553 { fill: #93dd56 }
+.terminal-1811200677-r554 { fill: #9cdd50 }
+.terminal-1811200677-r555 { fill: #eec11a }
+.terminal-1811200677-r556 { fill: #eebf1c }
+.terminal-1811200677-r557 { fill: #eeba21 }
+.terminal-1811200677-r558 { fill: #eeb526 }
+.terminal-1811200677-r559 { fill: #eeae2d }
+.terminal-1811200677-r560 { fill: #eea536 }
+.terminal-1811200677-r561 { fill: #ec9d3e }
+.terminal-1811200677-r562 { fill: #ec9a40 }
+.terminal-1811200677-r563 { fill: #ec9841 }
+.terminal-1811200677-r564 { fill: #eb9643 }
+.terminal-1811200677-r565 { fill: #eb9445 }
+.terminal-1811200677-r566 { fill: #ea9246 }
+.terminal-1811200677-r567 { fill: #e89148 }
+.terminal-1811200677-r568 { fill: #e78f49 }
+.terminal-1811200677-r569 { fill: #e68d4a }
+.terminal-1811200677-r570 { fill: #62dd75 }
+.terminal-1811200677-r571 { fill: #71dd6c }
+.terminal-1811200677-r572 { fill: #7ddd65 }
+.terminal-1811200677-r573 { fill: #ebd707 }
+.terminal-1811200677-r574 { fill: #edd309 }
+.terminal-1811200677-r575 { fill: #eeb02b }
+.terminal-1811200677-r576 { fill: #eea932 }
+.terminal-1811200677-r577 { fill: #eea734 }
+.terminal-1811200677-r578 { fill: #eda03a }
+.terminal-1811200677-r579 { fill: #ed9e3c }
+.terminal-1811200677-r580 { fill: #ec9c3e }
+.terminal-1811200677-r581 { fill: #eb9842 }
+.terminal-1811200677-r582 { fill: #e99247 }
+.terminal-1811200677-r583 { fill: #e89048 }
+.terminal-1811200677-r584 { fill: #e58b4b }
+.terminal-1811200677-r585 { fill: #e38a4d }
+.terminal-1811200677-r586 { fill: #e2884e }
+.terminal-1811200677-r587 { fill: #e1864f }
+.terminal-1811200677-r588 { fill: #e08450 }
+.terminal-1811200677-r589 { fill: #df8351 }
+.terminal-1811200677-r590 { fill: #eeb229 }
+.terminal-1811200677-r591 { fill: #eea437 }
+.terminal-1811200677-r592 { fill: #eea239 }
+.terminal-1811200677-r593 { fill: #eda03b }
+.terminal-1811200677-r594 { fill: #ed9e3d }
+.terminal-1811200677-r595 { fill: #eb9644 }
+.terminal-1811200677-r596 { fill: #ea9346 }
+.terminal-1811200677-r597 { fill: #e78e49 }
+.terminal-1811200677-r598 { fill: #e48b4c }
+.terminal-1811200677-r599 { fill: #e3894d }
+.terminal-1811200677-r600 { fill: #de8252 }
+.terminal-1811200677-r601 { fill: #dd8053 }
+.terminal-1811200677-r602 { fill: #dc7f54 }
+.terminal-1811200677-r603 { fill: #db7d55 }
+.terminal-1811200677-r604 { fill: #da7b56 }
+.terminal-1811200677-r605 { fill: #d97a57 }
+.terminal-1811200677-r606 { fill: #d87858 }
+.terminal-1811200677-r607 { fill: #ec9940 }
+.terminal-1811200677-r608 { fill: #eb9742 }
+.terminal-1811200677-r609 { fill: #eb9544 }
+.terminal-1811200677-r610 { fill: #e99147 }
+.terminal-1811200677-r611 { fill: #e58c4b }
+.terminal-1811200677-r612 { fill: #e2874e }
+.terminal-1811200677-r613 { fill: #df8451 }
+.terminal-1811200677-r614 { fill: #dc7e54 }
+.terminal-1811200677-r615 { fill: #d97b57 }
+.terminal-1811200677-r616 { fill: #d87958 }
+.terminal-1811200677-r617 { fill: #d77859 }
+.terminal-1811200677-r618 { fill: #d6765a }
+.terminal-1811200677-r619 { fill: #d5745b }
+.terminal-1811200677-r620 { fill: #d4735c }
+.terminal-1811200677-r621 { fill: #d3715d }
+.terminal-1811200677-r622 { fill: #d26f5e }
+.terminal-1811200677-r623 { fill: #d16e5f }
+.terminal-1811200677-r624 { fill: #eada05 }
+.terminal-1811200677-r625 { fill: #ed9f3b }
+.terminal-1811200677-r626 { fill: #eb9743 }
+.terminal-1811200677-r627 { fill: #e68e4a }
+.terminal-1811200677-r628 { fill: #e08550 }
+.terminal-1811200677-r629 { fill: #da7c56 }
+.terminal-1811200677-r630 { fill: #d77759 }
+.terminal-1811200677-r631 { fill: #d4725c }
+.terminal-1811200677-r632 { fill: #d06d60 }
+.terminal-1811200677-r633 { fill: #cf6c61 }
+.terminal-1811200677-r634 { fill: #ce6a62 }
+.terminal-1811200677-r635 { fill: #cd6863 }
+.terminal-1811200677-r636 { fill: #cc6764 }
+.terminal-1811200677-r637 { fill: #cb6564 }
+.terminal-1811200677-r638 { fill: #c96364 }
+.terminal-1811200677-r639 { fill: #93dd57 }
+.terminal-1811200677-r640 { fill: #95dd54 }
+.terminal-1811200677-r641 { fill: #e48a4c }
+.terminal-1811200677-r642 { fill: #e1874f }
+.terminal-1811200677-r643 { fill: #de8152 }
+.terminal-1811200677-r644 { fill: #db7e55 }
+.terminal-1811200677-r645 { fill: #d6755a }
+.terminal-1811200677-r646 { fill: #d3705d }
+.terminal-1811200677-r647 { fill: #d16f5f }
+.terminal-1811200677-r648 { fill: #cf6b61 }
+.terminal-1811200677-r649 { fill: #cb6664 }
+.terminal-1811200677-r650 { fill: #ca6564 }
+.terminal-1811200677-r651 { fill: #c86163 }
+.terminal-1811200677-r652 { fill: #c75f63 }
+.terminal-1811200677-r653 { fill: #c65d62 }
+.terminal-1811200677-r654 { fill: #c55b62 }
+.terminal-1811200677-r655 { fill: #c45a61 }
+.terminal-1811200677-r656 { fill: #c35861 }
+.terminal-1811200677-r657 { fill: #d5735b }
+.terminal-1811200677-r658 { fill: #d2705e }
+.terminal-1811200677-r659 { fill: #ce6962 }
+.terminal-1811200677-r660 { fill: #cc6864 }
+.terminal-1811200677-r661 { fill: #ca6464 }
+.terminal-1811200677-r662 { fill: #c96263 }
+.terminal-1811200677-r663 { fill: #c45961 }
+.terminal-1811200677-r664 { fill: #c15660 }
+.terminal-1811200677-r665 { fill: #c0545f }
+.terminal-1811200677-r666 { fill: #bf535f }
+.terminal-1811200677-r667 { fill: #be515e }
+.terminal-1811200677-r668 { fill: #bc4f5d }
+.terminal-1811200677-r669 { fill: #bb4e5d }
+.terminal-1811200677-r670 { fill: #dd8153 }
+.terminal-1811200677-r671 { fill: #d77659 }
+.terminal-1811200677-r672 { fill: #d06c60 }
+.terminal-1811200677-r673 { fill: #cd6963 }
+.terminal-1811200677-r674 { fill: #c86063 }
+.terminal-1811200677-r675 { fill: #c75e62 }
+.terminal-1811200677-r676 { fill: #c25760 }
+.terminal-1811200677-r677 { fill: #bd515e }
+.terminal-1811200677-r678 { fill: #bb4d5d }
+.terminal-1811200677-r679 { fill: #ba4c5c }
+.terminal-1811200677-r680 { fill: #b94a5c }
+.terminal-1811200677-r681 { fill: #b7485b }
+.terminal-1811200677-r682 { fill: #b6465a }
+.terminal-1811200677-r683 { fill: #b5445a }
+.terminal-1811200677-r684 { fill: #b44359 }
+.terminal-1811200677-r685 { fill: #d97957 }
+.terminal-1811200677-r686 { fill: #c65c62 }
+.terminal-1811200677-r687 { fill: #c35961 }
+.terminal-1811200677-r688 { fill: #be525e }
+.terminal-1811200677-r689 { fill: #ba4b5c }
+.terminal-1811200677-r690 { fill: #b8495b }
+.terminal-1811200677-r691 { fill: #b44259 }
+.terminal-1811200677-r692 { fill: #b34159 }
+.terminal-1811200677-r693 { fill: #b23f58 }
+.terminal-1811200677-r694 { fill: #b13d58 }
+.terminal-1811200677-r695 { fill: #af3c57 }
+.terminal-1811200677-r696 { fill: #ae3a57 }
+.terminal-1811200677-r697 { fill: #ad3857 }
+.terminal-1811200677-r698 { fill: #d16d5f }
+.terminal-1811200677-r699 { fill: #ca6364 }
+.terminal-1811200677-r700 { fill: #c96163 }
+.terminal-1811200677-r701 { fill: #c76063 }
+.terminal-1811200677-r702 { fill: #c65e62 }
+.terminal-1811200677-r703 { fill: #c55c62 }
+.terminal-1811200677-r704 { fill: #c15560 }
+.terminal-1811200677-r705 { fill: #bf545f }
+.terminal-1811200677-r706 { fill: #bd505e }
+.terminal-1811200677-r707 { fill: #b94b5c }
+.terminal-1811200677-r708 { fill: #b7475b }
+.terminal-1811200677-r709 { fill: #b6455a }
+.terminal-1811200677-r710 { fill: #b24059 }
+.terminal-1811200677-r711 { fill: #b13f58 }
+.terminal-1811200677-r712 { fill: #b03d58 }
+.terminal-1811200677-r713 { fill: #af3b57 }
+.terminal-1811200677-r714 { fill: #ac3757 }
+.terminal-1811200677-r715 { fill: #ab3557 }
+.terminal-1811200677-r716 { fill: #aa3457 }
+.terminal-1811200677-r717 { fill: #a83257 }
+.terminal-1811200677-r718 { fill: #a73157 }
+.terminal-1811200677-r719 { fill: #a62f57 }
+.terminal-1811200677-r720 { fill: #eb9545 }
+.terminal-1811200677-r721 { fill: #e88f48 }
+.terminal-1811200677-r722 { fill: #c0555f }
+.terminal-1811200677-r723 { fill: #bc4e5d }
+.terminal-1811200677-r724 { fill: #b34259 }
+.terminal-1811200677-r725 { fill: #b13e58 }
+.terminal-1811200677-r726 { fill: #ae3957 }
+.terminal-1811200677-r727 { fill: #ac3657 }
+.terminal-1811200677-r728 { fill: #a93357 }
+.terminal-1811200677-r729 { fill: #a73057 }
+.terminal-1811200677-r730 { fill: #a42d59 }
+.terminal-1811200677-r731 { fill: #a32c5a }
+.terminal-1811200677-r732 { fill: #a22b5b }
+.terminal-1811200677-r733 { fill: #a12a5c }
+.terminal-1811200677-r734 { fill: #a0295d }
+.terminal-1811200677-r735 { fill: #9e275f }
+.terminal-1811200677-r736 { fill: #b8485b }
+.terminal-1811200677-r737 { fill: #b5455a }
+.terminal-1811200677-r738 { fill: #b24058 }
+.terminal-1811200677-r739 { fill: #b03c58 }
+.terminal-1811200677-r740 { fill: #aa3557 }
+.terminal-1811200677-r741 { fill: #a83157 }
+.terminal-1811200677-r742 { fill: #a52e58 }
+.terminal-1811200677-r743 { fill: #9f285e }
+.terminal-1811200677-r744 { fill: #9d2660 }
+.terminal-1811200677-r745 { fill: #9c2561 }
+.terminal-1811200677-r746 { fill: #9b2462 }
+.terminal-1811200677-r747 { fill: #9a2363 }
+.terminal-1811200677-r748 { fill: #992264 }
+.terminal-1811200677-r749 { fill: #982165 }
+.terminal-1811200677-r750 { fill: #c25860 }
+.terminal-1811200677-r751 { fill: #b03c57 }
+.terminal-1811200677-r752 { fill: #af3a57 }
+.terminal-1811200677-r753 { fill: #ad3757 }
+.terminal-1811200677-r754 { fill: #ab3657 }
+.terminal-1811200677-r755 { fill: #a63057 }
+.terminal-1811200677-r756 { fill: #972066 }
+.terminal-1811200677-r757 { fill: #951e68 }
+.terminal-1811200677-r758 { fill: #941d69 }
+.terminal-1811200677-r759 { fill: #931c6a }
+.terminal-1811200677-r760 { fill: #921b6b }
+.terminal-1811200677-r761 { fill: #911a6c }
+.terminal-1811200677-r762 { fill: #d5755b }
+.terminal-1811200677-r763 { fill: #bf525f }
+.terminal-1811200677-r764 { fill: #a93257 }
+.terminal-1811200677-r765 { fill: #961f67 }
+.terminal-1811200677-r766 { fill: #90196d }
+.terminal-1811200677-r767 { fill: #8f186e }
+.terminal-1811200677-r768 { fill: #8e176f }
+.terminal-1811200677-r769 { fill: #8d1670 }
+.terminal-1811200677-r770 { fill: #8c1572 }
+.terminal-1811200677-r771 { fill: #8b1473 }
+.terminal-1811200677-r772 { fill: #8a1374 }
+.terminal-1811200677-r773 { fill: #ec9c3f }
+.terminal-1811200677-r774 { fill: #e58d4b }
+.terminal-1811200677-r775 { fill: #8d1671 }
+.terminal-1811200677-r776 { fill: #891275 }
+.terminal-1811200677-r777 { fill: #881177 }
     </style>
 
     <defs>
-    <clipPath id="terminal-1706147923-clip-terminal">
+    <clipPath id="terminal-1811200677-clip-terminal">
       <rect x="0" y="0" width="1219.0" height="975.0" />
     </clipPath>
-    <clipPath id="terminal-1706147923-line-0">
+    <clipPath id="terminal-1811200677-line-0">
     <rect x="0" y="1.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-1">
+<clipPath id="terminal-1811200677-line-1">
     <rect x="0" y="25.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-2">
+<clipPath id="terminal-1811200677-line-2">
     <rect x="0" y="50.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-3">
+<clipPath id="terminal-1811200677-line-3">
     <rect x="0" y="74.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-4">
+<clipPath id="terminal-1811200677-line-4">
     <rect x="0" y="99.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-5">
+<clipPath id="terminal-1811200677-line-5">
     <rect x="0" y="123.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-6">
+<clipPath id="terminal-1811200677-line-6">
     <rect x="0" y="147.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-7">
+<clipPath id="terminal-1811200677-line-7">
     <rect x="0" y="172.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-8">
+<clipPath id="terminal-1811200677-line-8">
     <rect x="0" y="196.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-9">
+<clipPath id="terminal-1811200677-line-9">
     <rect x="0" y="221.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-10">
+<clipPath id="terminal-1811200677-line-10">
     <rect x="0" y="245.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-11">
+<clipPath id="terminal-1811200677-line-11">
     <rect x="0" y="269.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-12">
+<clipPath id="terminal-1811200677-line-12">
     <rect x="0" y="294.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-13">
+<clipPath id="terminal-1811200677-line-13">
     <rect x="0" y="318.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-14">
+<clipPath id="terminal-1811200677-line-14">
     <rect x="0" y="343.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-15">
+<clipPath id="terminal-1811200677-line-15">
     <rect x="0" y="367.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-16">
+<clipPath id="terminal-1811200677-line-16">
     <rect x="0" y="391.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-17">
+<clipPath id="terminal-1811200677-line-17">
     <rect x="0" y="416.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-18">
+<clipPath id="terminal-1811200677-line-18">
     <rect x="0" y="440.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-19">
+<clipPath id="terminal-1811200677-line-19">
     <rect x="0" y="465.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-20">
+<clipPath id="terminal-1811200677-line-20">
     <rect x="0" y="489.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-21">
+<clipPath id="terminal-1811200677-line-21">
     <rect x="0" y="513.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-22">
+<clipPath id="terminal-1811200677-line-22">
     <rect x="0" y="538.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-23">
+<clipPath id="terminal-1811200677-line-23">
     <rect x="0" y="562.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-24">
+<clipPath id="terminal-1811200677-line-24">
     <rect x="0" y="587.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-25">
+<clipPath id="terminal-1811200677-line-25">
     <rect x="0" y="611.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-26">
+<clipPath id="terminal-1811200677-line-26">
     <rect x="0" y="635.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-27">
+<clipPath id="terminal-1811200677-line-27">
     <rect x="0" y="660.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-28">
+<clipPath id="terminal-1811200677-line-28">
     <rect x="0" y="684.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-29">
+<clipPath id="terminal-1811200677-line-29">
     <rect x="0" y="709.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-30">
+<clipPath id="terminal-1811200677-line-30">
     <rect x="0" y="733.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-31">
+<clipPath id="terminal-1811200677-line-31">
     <rect x="0" y="757.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-32">
+<clipPath id="terminal-1811200677-line-32">
     <rect x="0" y="782.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-33">
+<clipPath id="terminal-1811200677-line-33">
     <rect x="0" y="806.7" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-34">
+<clipPath id="terminal-1811200677-line-34">
     <rect x="0" y="831.1" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-35">
+<clipPath id="terminal-1811200677-line-35">
     <rect x="0" y="855.5" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-36">
+<clipPath id="terminal-1811200677-line-36">
     <rect x="0" y="879.9" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-37">
+<clipPath id="terminal-1811200677-line-37">
     <rect x="0" y="904.3" width="1220" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1706147923-line-38">
+<clipPath id="terminal-1811200677-line-38">
     <rect x="0" y="928.7" width="1220" height="24.65"/>
             </clipPath>
     </defs>
 
-    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1236" height="1024" rx="8"/><text class="terminal-1706147923-title" fill="#c5c8c6" text-anchor="middle" x="618" y="27">SplashApp</text>
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1236" height="1024" rx="8"/><text class="terminal-1811200677-title" fill="#c5c8c6" text-anchor="middle" x="618" y="27">SplashApp</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-1706147923-clip-terminal)">
-    <rect fill="#1d7ac1" x="0" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="24.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="36.6" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="73.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="85.4" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="109.8" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="134.2" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="170.8" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="195.2" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="231.8" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="256.2" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="292.8" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="317.2" y="1.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="366" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="390.4" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473be" x="427" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="451.4" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="488" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2671be" x="512.4" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2671be" x="549" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="573.4" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="610" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbe" x="646.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbd" x="658.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbd" x="671" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="707.6" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="732" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="768.6" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="793" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2b6cbd" x="829.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2b6cbd" x="841.8" y="1.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#2c6bbc" x="902.8" y="1.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#2d6abc" x="963.8" y="1.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e69bb" x="1012.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e69bb" x="1024.8" y="1.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#2f68bb" x="1073.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2f68bb" x="1085.8" y="1.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#3067ba" x="1134.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3067ba" x="1146.8" y="1.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#3166ba" x="1195.6" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c4" x="12.2" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="48.8" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="73.2" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="122" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="134.2" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="183" y="25.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="244" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="292.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="305" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="353.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="366" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="414.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="427" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="475.8" y="25.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#1b7cc1" x="536.8" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="585.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="597.8" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1d7ac1" x="646.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1d7ac1" x="671" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="707.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="732" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="768.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="793" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="829.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="854" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="890.6" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="927.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="951.6" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="988.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="1012.6" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="1049.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="1073.6" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="1110.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473be" x="1122.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="1146.8" y="25.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="1183.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2671be" x="1207.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="12.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0890c8" x="24.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="36.6" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="73.2" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="97.6" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="146.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="170.8" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="207.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="231.8" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="268.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="292.8" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="329.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc6" x="341.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="353.8" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="402.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="427" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="463.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c6" x="488" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c5" x="512.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c5" x="524.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="549" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="585.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="610" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="646.6" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c5" x="683.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c4" x="695.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="744.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="756.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="805.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="817.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="866.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="878.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="927.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="939.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="988.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="1000.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="1049.2" y="50.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="1110.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="1159" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="1171.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="12.2" y="74.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="61" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="85.4" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="122" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="146.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="158.6" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="195.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="219.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="231.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="256.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0196cb" x="280.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="292.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="305" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="317.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296ca" x="329.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0295ca" x="341.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="366" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="378.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0394ca" x="402.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="427" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="439.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="451.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0493ca" x="475.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="500.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="512.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0592c9" x="536.8" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0692c9" x="573.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="597.8" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="634.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0791c9" x="646.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c9" x="658.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="683.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="707.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0890c8" x="719.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="732" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="768.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098fc8" x="780.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="793" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="829.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="854" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="866.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="890.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="915" y="74.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="963.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="988.2" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="1024.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc6" x="1037" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="1049.2" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="1085.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="1110.2" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="1146.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c6" x="1171.2" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c5" x="1207.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="0" y="99.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="36.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="61" y="99.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="134.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="146.4" y="99.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="219.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="231.8" y="99.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="317.2" y="99.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="402.6" y="99.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="488" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="500.2" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="561.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="573.4" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="622.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="634.4" y="99.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="671" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="683.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="707.6" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="756.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="780.8" y="99.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="817.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="841.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="854" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="878.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0097cb" x="902.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="915" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0196cb" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="976" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="988.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296ca" x="1012.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296ca" x="1024.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0295ca" x="1037" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="1049.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="1061.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="1073.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0394ca" x="1098" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="1122.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="1134.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0493ca" x="1159" y="99.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="1195.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="0" y="123.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="36.6" y="123.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="73.2" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="122" y="123.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="183" y="123.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="219.6" y="123.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="280.6" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="329.4" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="378.2" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="427" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="475.8" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="524.6" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="573.4" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="622.2" y="123.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="658.8" y="123.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="732" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="744.2" y="123.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="829.6" y="123.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="915" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="927.2" y="123.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="1000.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="1012.6" y="123.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="1085.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="1098" y="123.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="1183.4" y="123.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="0" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="24.4" y="147.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="109.8" y="147.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="195.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="207.4" y="147.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="280.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="292.8" y="147.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="366" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="378.2" y="147.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="463.6" y="147.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="549" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="573.4" y="147.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="634.4" y="147.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="671" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="719.8" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="768.6" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="817.4" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="866.2" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="915" y="147.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="976" y="147.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="1012.6" y="147.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="1073.6" y="147.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="1110.2" y="147.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="1171.2" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="0" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="12.2" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="97.6" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="183" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="268.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="280.6" y="172.3" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="353.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="366" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="451.4" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="536.8" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="622.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="634.4" y="172.3" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="707.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="719.8" y="172.3" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="793" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="805.2" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="890.6" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="976" y="172.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="1061.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="1073.6" y="172.3" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="1146.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="1159" y="172.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="12.2" y="196.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="73.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="85.4" y="196.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="158.6" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="207.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="219.6" y="196.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="256.2" y="196.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="292.8" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="317.2" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="366" y="196.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="427" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="439.2" y="196.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="500.2" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="524.6" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="549" y="196.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b9cb" x="610" y="196.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="646.6" y="196.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="707.6" y="196.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="780.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="793" y="196.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="866.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="878.4" y="196.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="963.8" y="196.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="1049.2" y="196.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="1134.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="1146.8" y="196.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="0" y="221.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="61" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="73.2" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="146.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="158.6" y="221.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="244" y="221.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="329.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="341.6" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="414.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="427" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="500.2" y="221.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="561.2" y="221.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="597.8" y="221.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="658.8" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="683.2" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="707.6" y="221.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="768.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="780.8" y="221.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="841.8" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="890.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="915" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="939.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="951.6" y="221.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="988.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="1000.4" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="1049.2" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="1122.4" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="1195.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="0" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="48.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="61" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="134.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="146.4" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="231.8" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="317.2" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="402.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="414.8" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="488" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="500.2" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="573.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="585.6" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="671" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="756.4" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="841.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="854" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="927.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="939.4" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="1012.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="1024.8" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="1110.2" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="1195.6" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="0" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="36.6" y="269.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="97.6" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="134.2" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="158.6" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="195.2" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="231.8" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="268.4" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="292.8" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="341.6" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="390.4" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="439.2" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="488" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="500.2" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="536.8" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="573.4" y="269.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="634.4" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="658.8" y="269.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="744.2" y="269.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="829.6" y="269.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="915" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="927.2" y="269.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="1000.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="1012.6" y="269.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="1085.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="1098" y="269.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="1183.4" y="269.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="0" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="24.4" y="294.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="109.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="122" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="134.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="146.4" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="195.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="207.4" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="256.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="268.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="280.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="292.8" y="294.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="378.2" y="294.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="463.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="475.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="488" y="294.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="549" y="294.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="585.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bd" x="610" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="634.4" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="683.2" y="294.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="719.8" y="294.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="780.8" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="829.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="854" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="878.4" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="927.2" y="294.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="963.8" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="988.2" y="294.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="1024.8" y="294.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="1085.8" y="294.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="1122.4" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="1171.2" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="1195.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="0" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="12.2" y="318.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="48.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfae" x="73.2" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="97.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="109.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="134.2" y="318.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="170.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceaf" x="183" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="195.2" y="318.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="231.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb1" x="256.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="268.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="280.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="305" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb2" x="329.4" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="353.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="366" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="390.4" y="318.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="451.4" y="318.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="488" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb5" x="512.4" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="536.8" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="585.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="597.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb6" x="622.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb6" x="634.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="646.6" y="318.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="707.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="719.8" y="318.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="793" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="805.2" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="829.6" y="318.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="890.6" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="939.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="951.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="976" y="318.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="1061.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="1073.6" y="318.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="1146.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="1171.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="1183.4" y="318.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="0" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="36.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="48.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="61" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a3" x="97.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="122" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="146.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="158.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a4" x="170.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a5" x="183" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="195.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="219.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="244" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="256.2" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a6" x="292.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="317.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="341.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="353.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a8" x="378.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="390.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="414.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="439.2" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1aa" x="500.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="524.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="549" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0ab" x="573.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="597.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="610" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="634.4" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="671" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="695.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="707.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="732" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfae" x="756.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="780.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="793" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="805.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="829.6" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceaf" x="866.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceaf" x="878.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="890.6" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="927.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb1" x="951.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="963.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="988.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb2" x="1012.6" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="1049.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="1061.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="1085.8" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb3" x="1134.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="1146.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="1171.2" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb5" x="1207.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="0" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="36.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="48.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d797" x="61" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d797" x="73.2" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="97.6" y="367.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="158.6" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="207.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="219.6" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="244" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="268.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="280.6" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="329.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="341.6" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="390.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="402.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="414.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="439.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="451.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="463.6" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="500.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="512.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="524.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="536.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d4a0" x="561.2" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a0" x="597.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="622.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="634.4" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="658.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="683.2" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="719.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="744.2" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a3" x="780.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="805.2" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="841.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a4" x="854" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a4" x="866.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="878.4" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="915" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="939.4" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="976" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a6" x="988.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="1000.4" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="1037" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a8" x="1061.4" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="1085.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="1110.2" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="1134.6" y="367.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="1171.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1a9" x="1183.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1aa" x="1195.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="1207.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="0" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8c" x="24.4" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8c" x="61" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="85.4" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="122" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="134.2" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="158.6" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98e" x="195.2" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="219.6" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="256.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd98f" x="268.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="280.6" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="317.2" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd991" x="341.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="366" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="378.2" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd992" x="414.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd892" x="427" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd892" x="439.2" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd892" x="463.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="475.8" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="500.2" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd894" x="536.8" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad894" x="561.2" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad894" x="585.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="597.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="610" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="671" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="719.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="732" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d797" x="756.4" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="780.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="793" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="841.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="854" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="902.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="915" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="927.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="939.4" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="963.8" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="1024.8" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="1073.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="1085.8" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="1110.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="1122.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="1134.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="1159" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="1195.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="1207.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc7f" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc80" x="12.2" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc80" x="36.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc80" x="48.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc81" x="61" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc81" x="73.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ddc81" x="85.4" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="122" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="134.2" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc82" x="170.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc83" x="183" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc83" x="195.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="207.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="219.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc84" x="244" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="256.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="268.4" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="305" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db85" x="341.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db86" x="353.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="416.3" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="854" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="878.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98e" x="890.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="902.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="915" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd98f" x="951.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="976" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="1012.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd991" x="1037" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="1049.2" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="1073.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd992" x="1098" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd892" x="1122.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd892" x="1134.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="1159" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="1183.4" y="416.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#62dd75" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#61dd75" x="12.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#61dd75" x="36.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd75" x="48.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd76" x="61" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd76" x="73.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="85.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="97.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="109.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5edd77" x="122" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5edd77" x="146.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="158.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="170.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="183" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="195.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="219.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd78" x="231.8" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd79" x="256.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="268.4" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="292.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd79" x="305" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd7a" x="317.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#58dd7a" x="341.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#58dd7a" x="353.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="440.7" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc82" x="854" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc82" x="866.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc83" x="878.4" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="902.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="915" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc84" x="927.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc84" x="939.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="951.6" y="440.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="988.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="1000.4" y="440.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db85" x="1037" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db86" x="1049.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db86" x="1061.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db86" x="1073.6" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db86" x="1098" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db87" x="1110.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="1122.4" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="1171.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="1183.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="1195.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db88" x="1207.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#75dd69" x="0" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#74dd69" x="24.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#74dd6a" x="36.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#74dd6a" x="48.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#73dd6a" x="61" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#73dd6a" x="73.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#72dd6b" x="97.6" y="465.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#71dd6b" x="134.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#71dd6c" x="158.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="170.8" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6c" x="195.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6d" x="207.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6d" x="219.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="231.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="244" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="268.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="280.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6e" x="305" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6e" x="317.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6f" x="329.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="341.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="353.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="414.8" y="465.1" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="768.6" y="465.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="854" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="866.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="878.4" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="902.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd78" x="915" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd79" x="939.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="951.6" y="465.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd79" x="988.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd7a" x="1012.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd7a" x="1024.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#58dd7a" x="1037" y="465.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#57dd7b" x="1073.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#57dd7b" x="1098" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#56dd7b" x="1110.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#56dd7c" x="1134.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#55dd7c" x="1146.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#55dd7c" x="1159" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7c" x="1183.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7d" x="1195.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7d" x="1207.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88dd5e" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5e" x="12.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5f" x="36.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="48.8" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="73.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd5f" x="85.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd60" x="97.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd60" x="109.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#84dd60" x="122" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#84dd60" x="134.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="158.6" y="489.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd61" x="195.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd62" x="219.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd62" x="231.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="244" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="268.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd62" x="280.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="292.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="305" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="317.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="329.4" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="353.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="489.5" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="854" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="866.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6c" x="890.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6d" x="902.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6d" x="915" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="927.2" y="489.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="963.8" y="489.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6e" x="1000.4" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6f" x="1024.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="1037" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#6add6f" x="1061.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6add70" x="1073.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#69dd70" x="1098" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#69dd70" x="1122.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#68dd71" x="1134.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#68dd71" x="1159" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#67dd71" x="1171.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#67dd72" x="1195.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#66dd72" x="1207.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="0" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="24.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="36.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="48.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="61" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd52" x="73.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="85.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="97.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="109.8" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="134.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="146.4" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="170.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd54" x="183" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="195.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="207.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd55" x="219.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd56" x="244" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="256.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="280.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="292.8" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="317.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd57" x="329.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd58" x="341.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="513.9" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="854" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="878.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd61" x="890.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd62" x="915" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="927.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="951.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd62" x="963.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="976" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="988.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="1000.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="1012.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="1024.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="1037" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="1061.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7ddd64" x="1073.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#7ddd64" x="1098" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7cdd65" x="1110.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#7cdd65" x="1134.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd65" x="1146.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd65" x="1159" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd66" x="1171.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7add66" x="1183.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7add66" x="1195.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="0" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="12.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="24.4" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="48.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="61" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="85.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="97.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="122" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="134.2" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="158.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="170.8" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="195.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="207.4" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="231.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="244" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="268.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="280.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="305" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="317.2" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="341.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="353.8" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="378.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="390.4" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="414.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="427" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="439.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="451.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="463.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="488" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9fdd4d" x="500.2" y="538.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="536.8" y="538.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="573.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="585.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="610" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9cdd4f" x="622.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9cdd50" x="634.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9cdd50" x="646.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd50" x="658.8" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd51" x="683.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="695.4" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="719.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="732" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="756.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd52" x="768.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="780.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="793" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="805.2" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd54" x="829.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="841.8" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="866.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="878.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="890.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="902.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd55" x="915" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd56" x="927.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd56" x="939.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="951.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="976" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="988.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="1000.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="1012.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd57" x="1024.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd58" x="1037" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd58" x="1049.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90dd58" x="1061.4" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#90dd59" x="1085.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="1098" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="1122.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8edd5a" x="1134.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#8edd5a" x="1159" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5a" x="1171.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5b" x="1183.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5b" x="1195.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5b" x="1207.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="0" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="12.2" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="36.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="48.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="73.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="85.4" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="109.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="122" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="146.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="158.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="183" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="195.2" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="219.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="231.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="256.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="268.4" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="292.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="305" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="329.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="341.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="366" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="378.2" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="402.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="414.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="439.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="451.4" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="475.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="488" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="512.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b1dd3b" x="524.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b1dd3b" x="549" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="561.2" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="585.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="597.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="622.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aedd3e" x="634.4" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="671" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="707.6" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="744.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="756.4" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="780.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="793" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="817.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="829.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="854" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="866.2" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="890.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="902.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="927.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="939.4" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="976" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="1000.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="1012.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="1024.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="1037" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="1049.2" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="1073.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="1085.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="1110.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="1122.4" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="1146.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="1159" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="1171.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="1183.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9fdd4d" x="1195.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="0" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="24.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="36.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="61" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="73.2" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="97.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="109.8" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="134.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="146.4" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="170.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="183" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="207.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="219.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="244" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="256.2" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="280.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="292.8" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="317.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="329.4" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="353.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="366" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="390.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="402.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="427" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="439.2" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="463.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="475.8" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="500.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="512.4" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="536.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="549" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="573.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="585.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="610" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="622.2" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="646.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="658.8" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="683.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="695.4" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="719.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="732" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="756.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="768.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="793" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="805.2" y="587.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="841.8" y="587.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="878.4" y="587.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="915" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="927.2" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="951.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="963.8" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="988.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="1000.4" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="1024.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="1037" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="1061.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="1073.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="1098" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="1110.2" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="1134.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="1146.8" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="1171.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="1183.4" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="1207.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="0" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="12.2" y="611.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="48.8" y="611.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="85.4" y="611.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="122" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="134.2" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="158.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="170.8" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="195.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="207.4" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="231.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="244" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="268.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="280.6" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="305" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="317.2" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="341.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="353.8" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="378.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="390.4" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="414.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="427" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="451.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="463.6" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="488" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="500.2" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="524.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="536.8" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="561.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="573.4" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="597.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="610" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="634.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="646.6" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="671" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="683.2" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="707.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="719.8" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="744.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="756.4" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="780.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="793" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="817.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="829.6" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="854" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="866.2" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="890.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="902.8" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="927.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="939.4" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="963.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="976" y="611.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="1012.6" y="611.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="1049.2" y="611.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="1085.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="1098" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="1122.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="1134.6" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="1159" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="1171.2" y="611.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="1195.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="1207.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="0" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="12.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="24.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd409" x="36.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="48.8" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="73.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="85.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="97.6" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="122" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd507" x="134.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="146.4" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="170.8" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd707" x="195.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="207.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="219.6" y="635.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="256.2" y="635.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd805" x="292.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="305" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="329.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ead905" x="341.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada05" x="353.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="366" y="635.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="402.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="414.8" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb03" x="439.2" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="463.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="475.8" y="635.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="512.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="524.6" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="549" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="561.2" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="585.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="597.8" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="622.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="634.4" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="658.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="671" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="695.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="707.6" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="732" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="744.2" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="768.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="780.8" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="805.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="817.4" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="841.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="854" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="878.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="890.6" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="915" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="927.2" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="951.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="963.8" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="988.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="1000.4" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="1024.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="1037" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="1061.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="1073.6" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="1098" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="1110.2" y="635.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="1134.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="1146.8" y="635.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="1183.4" y="635.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="0" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="24.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="36.6" y="660.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="73.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="85.4" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="109.8" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="134.2" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="158.6" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="183" y="660.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="219.6" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="244" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="268.4" y="660.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="317.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="329.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="341.6" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="366" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="378.2" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="402.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="414.8" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="439.2" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="463.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="475.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="488" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="512.4" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="536.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="549" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10b" x="561.2" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10a" x="585.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10a" x="597.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="610" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="634.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="646.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd209" x="658.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd309" x="671" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="683.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="695.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="707.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd409" x="719.8" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="744.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="756.4" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="780.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="793" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd507" x="817.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="829.6" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="854" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="866.2" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd707" x="890.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="902.8" y="660.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="939.4" y="660.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd805" x="976" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="1000.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="1012.6" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ead905" x="1037" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="1049.2" y="660.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="1085.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="1098" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="1122.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb03" x="1134.6" y="660.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="1159" y="660.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="1195.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="1207.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="0" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="12.2" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="48.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="61" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="97.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="109.8" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="146.4" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="183" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="195.2" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="231.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="244" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="268.4" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="292.8" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="317.2" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="341.6" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="366" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="378.2" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="402.6" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="427" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="451.4" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="475.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="488" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="524.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="536.8" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="573.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="585.6" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="622.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="634.4" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="658.8" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="683.2" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="707.6" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="732" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="756.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="768.6" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="805.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="817.4" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="854" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="866.2" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="902.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="915" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="927.2" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="963.8" y="684.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="1012.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="1024.8" y="684.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="1061.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="1073.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="1085.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="1098" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="1122.4" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="1146.8" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="1171.2" y="684.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="1195.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="1207.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="0" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="12.2" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="36.6" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="61" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="85.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="97.6" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="134.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="146.4" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="183" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="195.2" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="219.6" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="244" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="268.4" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="292.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="305" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="341.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="353.8" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="378.2" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="402.6" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="427" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="439.2" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="475.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="488" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="524.6" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="561.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="573.4" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="610" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="622.2" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="658.8" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="695.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="707.6" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="744.2" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="780.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="793" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="829.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="841.8" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="878.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="890.6" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="915" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="927.2" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="963.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="976" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="1000.4" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="1024.8" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="1049.2" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="1073.6" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="1098" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="1122.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="1134.6" y="709.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="1171.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="1183.4" y="709.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="1207.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9841" x="0" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="12.2" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9940" x="48.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="61" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="73.2" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="109.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="122" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3f" x="158.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="170.8" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9d3e" x="207.4" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="231.8" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="256.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3d" x="268.4" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="292.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="305" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="317.2" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3b" x="341.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3b" x="353.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="366" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03a" x="402.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="414.8" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="451.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="463.6" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="500.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="512.4" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="536.8" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="561.2" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="585.6" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="610" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="634.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="646.6" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="683.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="695.4" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="732" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="744.2" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="780.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="793" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="817.4" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="841.8" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="866.2" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="890.6" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="915" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="927.2" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="951.6" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="976" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="1000.4" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="1024.8" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="1049.2" y="733.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="1073.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="1085.8" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="1122.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="1134.6" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="1171.2" y="733.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="1207.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58d4b" x="0" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="12.2" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="36.6" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68e4a" x="61" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="97.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="109.8" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="134.2" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="158.6" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e88f48" x="183" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="195.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="207.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="219.6" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89148" x="256.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="268.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="280.6" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="305" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="317.2" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="341.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="353.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9246" x="366" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="390.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="402.6" y="757.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="451.4" y="757.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9545" x="500.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="512.4" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9644" x="549" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="561.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="573.4" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9743" x="597.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9743" x="610" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9742" x="622.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9742" x="634.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="646.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="658.8" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9841" x="683.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="695.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="707.6" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9940" x="744.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="756.4" y="757.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="805.2" y="757.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="854" y="757.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9d3e" x="902.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="915" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3d" x="951.6" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="976" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="1000.4" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3b" x="1037" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="1049.2" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="1085.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="1098" y="757.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="1134.6" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="1159" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="1183.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="1195.6" y="757.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="0" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="24.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="36.6" y="782.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="85.4" y="782.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="146.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="158.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="170.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="183" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="195.2" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="219.6" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="256.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="268.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="280.6" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1874f" x="317.2" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="341.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="353.8" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="378.2" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="414.8" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="439.2" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="475.8" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e38a4d" x="500.2" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="524.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="536.8" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="561.2" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="597.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58b4b" x="610" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="622.2" y="782.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="671" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="695.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="707.6" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="732" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68e4a" x="756.4" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="780.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="793" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="817.4" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="841.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="854" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="878.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="890.6" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="915" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="939.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89148" x="951.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="963.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="976" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="1000.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="1012.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="1024.8" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9246" x="1049.2" y="782.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="1073.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="1085.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="1098" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="1134.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="1146.8" y="782.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9545" x="1183.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="1195.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="1207.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="0" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77659" x="12.2" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="36.6" y="806.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="73.2" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77859" x="97.6" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="122" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="134.2" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="158.6" y="806.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="195.2" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97957" x="219.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="231.8" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="256.2" y="806.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="292.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="305" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="317.2" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="341.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="353.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="366" y="806.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="414.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="427" y="806.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7e55" x="475.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7e55" x="488" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="512.4" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="536.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="549" y="806.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="597.8" y="806.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8153" x="658.8" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="683.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="695.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="707.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="719.8" y="806.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="768.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="780.8" y="806.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="829.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="841.8" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="866.2" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="890.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="902.8" y="806.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="951.6" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="976" y="806.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1874f" x="1012.6" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="1037" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="1049.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="1061.4" y="806.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="1098" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="1122.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="1134.6" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="1159" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e38a4d" x="1183.4" y="806.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="1207.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="0" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6c61" x="24.4" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="48.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="61" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="85.4" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="122" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="146.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="158.6" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="183" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16f5f" x="219.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="231.8" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="256.2" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2705e" x="280.6" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3705d" x="317.2" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="341.6" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="366" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="378.2" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="402.6" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="439.2" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="463.6" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="500.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="512.4" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="536.8" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="561.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="573.4" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5755b" x="597.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="610" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="634.4" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="658.8" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="695.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77659" x="707.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="719.8" y="831.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="768.6" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77859" x="793" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="805.2" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="829.6" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="854" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="878.4" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97957" x="902.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="915" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="939.4" y="831.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="976" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="1000.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="1012.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="1024.8" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="1049.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="1061.4" y="831.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="1110.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="1122.4" y="831.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7e55" x="1171.2" y="831.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="1195.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="1207.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="0" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="36.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="48.8" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96163" x="85.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="97.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="109.8" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="134.2" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="158.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="170.8" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6364" x="195.2" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="219.6" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="244" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6564" x="268.4" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="292.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="305" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="329.4" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="366" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="390.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="402.6" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="427" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6864" x="451.4" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="475.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="488" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="500.2" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="524.6" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6962" x="561.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6962" x="573.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="585.6" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="622.2" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6b62" x="646.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="658.8" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="683.2" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6c61" x="707.6" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="744.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="756.4" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="780.8" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="817.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16d5f" x="829.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="841.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="854" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="878.4" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16f5f" x="902.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="915" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="939.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="951.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2705e" x="963.8" y="855.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3705d" x="1012.6" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="1037" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="1049.2" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="1073.6" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="1098" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="1134.6" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="1159" y="855.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="1195.6" y="855.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0555f" x="0" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15560" x="24.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15560" x="36.6" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="61" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="85.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25660" x="109.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="122" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="134.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="146.4" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25860" x="183" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="195.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="207.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="231.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="244" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="268.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45961" x="292.8" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="317.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="329.4" y="879.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="378.2" y="879.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="439.2" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65c62" x="475.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="488" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="500.2" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="536.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65e62" x="549" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65e62" x="561.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75e62" x="573.4" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="610" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="622.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="634.4" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c76063" x="671" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="683.2" y="879.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="732" y="879.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96163" x="780.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="793" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="805.2" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="829.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="841.8" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="866.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6364" x="878.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="902.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="915" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="927.2" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6564" x="963.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="976" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="988.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="1000.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="1024.8" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="1061.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="1085.8" y="879.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="1122.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6864" x="1146.8" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="1171.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="1183.4" y="879.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="1207.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="0" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="12.2" y="904.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94b5c" x="73.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94b5c" x="85.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4b5c" x="97.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4b5c" x="109.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="122" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="146.4" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="183" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="195.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="207.4" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4e5d" x="244" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4e5d" x="268.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4e5d" x="280.6" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="305" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="341.6" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="366" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="402.6" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd515e" x="427" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="451.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="463.6" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#be525e" x="488" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#be525e" x="524.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf525f" x="536.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="549" y="904.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="597.8" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="622.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="634.4" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="658.8" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0555f" x="683.2" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15560" x="719.8" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="744.2" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="780.8" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="805.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="817.4" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="841.8" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25860" x="878.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="890.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="902.8" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="927.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="939.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="951.6" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45961" x="976" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="1000.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="1012.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="1024.8" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="1061.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="1073.6" y="904.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="1122.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="1134.6" y="904.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65c62" x="1171.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="1183.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="1195.6" y="904.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13e58" x="0" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13f58" x="24.4" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="48.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="61" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24058" x="85.4" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24059" x="109.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24059" x="122" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34059" x="146.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="158.6" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="183" y="928.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34259" x="219.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34259" x="231.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="244" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="268.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="280.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="292.8" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="341.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="353.8" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5455a" x="402.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5455a" x="414.8" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6455a" x="439.2" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="463.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="475.8" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="524.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="536.8" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7485b" x="585.6" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8485b" x="610" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8485b" x="622.2" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="646.6" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="695.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="707.6" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94b5c" x="756.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94b5c" x="768.6" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4b5c" x="793" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="817.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="829.6" y="928.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="878.4" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="902.8" y="928.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4e5d" x="939.4" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4e5d" x="963.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4e5d" x="976" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="988.2" y="928.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="1024.8" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="1049.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="1061.4" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="1085.8" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd515e" x="1110.2" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="1134.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="1146.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="1159" y="928.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#be525e" x="1183.4" y="928.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3457" x="0" y="953.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3557" x="48.8" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3557" x="73.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3557" x="85.4" y="953.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3657" x="122" y="953.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3657" x="158.6" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3657" x="183" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3757" x="195.2" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3757" x="219.6" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3757" x="244" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="268.4" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="292.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="305" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3957" x="329.4" y="953.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3957" x="378.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3957" x="390.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3a57" x="402.6" y="953.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3a57" x="439.2" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="463.6" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="488" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="500.2" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3c57" x="524.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03c57" x="536.8" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03c57" x="561.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03c58" x="573.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03d58" x="585.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03d58" x="597.8" y="953.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13d58" x="634.4" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13e58" x="658.8" y="953.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13e58" x="695.4" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13f58" x="719.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="732" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="756.4" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24058" x="780.8" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24059" x="805.2" y="953.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="841.8" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="866.2" y="953.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34259" x="915" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34259" x="927.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="939.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="951.6" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="976" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="988.2" y="953.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="1037" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="1049.2" y="953.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5455a" x="1098" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6455a" x="1122.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6455a" x="1134.6" y="953.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="1159" y="953.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="1207.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-1706147923-matrix">
-    <text class="terminal-1706147923-r1" x="0" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r1" x="24.4" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r2" x="36.6" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r2" x="73.2" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r3" x="85.4" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r4" x="109.8" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r4" x="134.2" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r5" x="170.8" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r5" x="195.2" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r6" x="231.8" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r6" x="256.2" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r7" x="292.8" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r8" x="317.2" y="20" textLength="48.8" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀</text><text class="terminal-1706147923-r9" x="366" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r9" x="390.4" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r10" x="427" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r10" x="451.4" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r11" x="488" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r11" x="512.4" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r12" x="549" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r12" x="573.4" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r13" x="610" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r13" x="646.6" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r13" x="658.8" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r14" x="671" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r14" x="707.6" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r15" x="732" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r15" x="768.6" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r16" x="793" y="20" textLength="36.6" clip-path="url(#terminal-1706147923-line-0)">▀▀▀</text><text class="terminal-1706147923-r16" x="829.6" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r17" x="841.8" y="20" textLength="61" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀▀</text><text class="terminal-1706147923-r18" x="902.8" y="20" textLength="61" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀▀</text><text class="terminal-1706147923-r19" x="963.8" y="20" textLength="48.8" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀</text><text class="terminal-1706147923-r19" x="1012.6" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r20" x="1024.8" y="20" textLength="48.8" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀</text><text class="terminal-1706147923-r20" x="1073.6" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r21" x="1085.8" y="20" textLength="48.8" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀</text><text class="terminal-1706147923-r21" x="1134.6" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">▀</text><text class="terminal-1706147923-r22" x="1146.8" y="20" textLength="48.8" clip-path="url(#terminal-1706147923-line-0)">▀▀▀▀</text><text class="terminal-1706147923-r23" x="1195.6" y="20" textLength="24.4" clip-path="url(#terminal-1706147923-line-0)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="20" textLength="12.2" clip-path="url(#terminal-1706147923-line-0)">
-</text><text class="terminal-1706147923-r25" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r26" x="12.2" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r26" x="48.8" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r27" x="73.2" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r27" x="122" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r28" x="134.2" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r29" x="183" y="44.4" textLength="61" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀▀</text><text class="terminal-1706147923-r30" x="244" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r30" x="292.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r31" x="305" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r31" x="353.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r32" x="366" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r32" x="414.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r33" x="427" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r34" x="475.8" y="44.4" textLength="61" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀▀</text><text class="terminal-1706147923-r35" x="536.8" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r35" x="585.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r36" x="597.8" y="44.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-1)">▀▀▀▀</text><text class="terminal-1706147923-r36" x="646.6" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r1" x="671" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r1" x="707.6" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r2" x="732" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r3" x="768.6" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r4" x="793" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r4" x="829.6" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r5" x="854" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r5" x="890.6" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r6" x="927.2" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r6" x="951.6" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r7" x="988.2" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r8" x="1012.6" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r9" x="1049.2" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r9" x="1073.6" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r10" x="1110.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r10" x="1122.4" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r10" x="1146.8" y="44.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-1)">▀▀▀</text><text class="terminal-1706147923-r11" x="1183.4" y="44.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-1)">▀▀</text><text class="terminal-1706147923-r11" x="1207.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">▀</text><text class="terminal-1706147923-r24" x="1220" y="44.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-1)">
-</text><text class="terminal-1706147923-r37" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r38" x="12.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r38" x="24.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r38" x="36.6" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r39" x="73.2" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r39" x="97.6" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r40" x="146.4" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r41" x="170.8" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r42" x="207.4" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r42" x="231.8" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r43" x="268.4" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r43" x="292.8" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r44" x="329.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r44" x="341.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r45" x="353.8" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r46" x="402.6" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r46" x="427" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r47" x="463.6" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r47" x="488" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r47" x="512.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r48" x="524.6" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r48" x="549" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r49" x="585.6" y="68.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-2)">▀▀</text><text class="terminal-1706147923-r49" x="610" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r25" x="646.6" y="68.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-2)">▀▀▀</text><text class="terminal-1706147923-r25" x="683.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r26" x="695.4" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r26" x="744.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r27" x="756.4" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r27" x="805.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r28" x="817.4" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r28" x="866.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r29" x="878.4" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r29" x="927.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r30" x="939.4" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r30" x="988.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r31" x="1000.4" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r32" x="1049.2" y="68.8" textLength="61" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀▀</text><text class="terminal-1706147923-r33" x="1110.2" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r33" x="1159" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">▀</text><text class="terminal-1706147923-r34" x="1171.2" y="68.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-2)">▀▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="68.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-2)">
-</text><text class="terminal-1706147923-r50" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r51" x="12.2" y="93.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-3)">▀▀▀▀</text><text class="terminal-1706147923-r52" x="61" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r53" x="85.4" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r54" x="122" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r54" x="146.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r55" x="158.6" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r56" x="195.2" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r56" x="219.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r57" x="231.8" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r58" x="256.2" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r58" x="280.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r58" x="292.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r59" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r60" x="317.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r61" x="329.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r61" x="341.6" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r62" x="366" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r63" x="378.2" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r63" x="402.6" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r63" x="427" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r64" x="439.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r65" x="451.4" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r65" x="475.8" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r65" x="500.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r66" x="512.4" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r66" x="536.8" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r67" x="573.4" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r67" x="597.8" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r68" x="634.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r68" x="646.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r68" x="658.8" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r37" x="683.2" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r38" x="707.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r38" x="719.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r38" x="732" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r39" x="768.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r39" x="780.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r39" x="793" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r40" x="829.6" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r40" x="854" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r41" x="866.2" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r42" x="890.6" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r42" x="915" y="93.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-3)">▀▀▀▀</text><text class="terminal-1706147923-r43" x="963.8" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r43" x="988.2" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r44" x="1024.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r45" x="1037" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r45" x="1049.2" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r46" x="1085.8" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r46" x="1110.2" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r47" x="1146.8" y="93.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-3)">▀▀</text><text class="terminal-1706147923-r47" x="1171.2" y="93.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-3)">▀▀▀</text><text class="terminal-1706147923-r47" x="1207.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">▀</text><text class="terminal-1706147923-r24" x="1220" y="93.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-3)">
-</text><text class="terminal-1706147923-r69" x="0" y="117.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-4)">▀▀▀</text><text class="terminal-1706147923-r69" x="36.6" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r70" x="61" y="117.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r70" x="134.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r71" x="146.4" y="117.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r71" x="219.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r72" x="231.8" y="117.6" textLength="85.4" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r73" x="317.2" y="117.6" textLength="85.4" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r74" x="402.6" y="117.6" textLength="85.4" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r74" x="488" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r75" x="500.2" y="117.6" textLength="61" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀▀</text><text class="terminal-1706147923-r76" x="561.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r76" x="573.4" y="117.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀</text><text class="terminal-1706147923-r77" x="622.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r78" x="634.4" y="117.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-4)">▀▀▀</text><text class="terminal-1706147923-r79" x="671" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r50" x="683.2" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r51" x="707.6" y="117.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-4)">▀▀▀▀</text><text class="terminal-1706147923-r52" x="756.4" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r53" x="780.8" y="117.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-4)">▀▀▀</text><text class="terminal-1706147923-r54" x="817.4" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r54" x="841.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r55" x="854" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r56" x="878.4" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r56" x="902.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r57" x="915" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r58" x="939.4" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r58" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r58" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r59" x="988.2" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r60" x="1012.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r61" x="1024.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r61" x="1037" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r61" x="1049.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r62" x="1061.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r63" x="1073.6" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r63" x="1098" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r63" x="1122.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">▀</text><text class="terminal-1706147923-r65" x="1134.6" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r65" x="1159" y="117.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-4)">▀▀▀</text><text class="terminal-1706147923-r66" x="1195.6" y="117.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-4)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="117.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-4)">
-</text><text class="terminal-1706147923-r80" x="0" y="142" textLength="36.6" clip-path="url(#terminal-1706147923-line-5)">▀▀▀</text><text class="terminal-1706147923-r80" x="36.6" y="142" textLength="36.6" clip-path="url(#terminal-1706147923-line-5)">▀▀▀</text><text class="terminal-1706147923-r81" x="73.2" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r81" x="122" y="142" textLength="61" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀</text><text class="terminal-1706147923-r82" x="183" y="142" textLength="36.6" clip-path="url(#terminal-1706147923-line-5)">▀▀▀</text><text class="terminal-1706147923-r82" x="219.6" y="142" textLength="61" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀</text><text class="terminal-1706147923-r83" x="280.6" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r83" x="329.4" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r84" x="378.2" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r84" x="427" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r85" x="475.8" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r85" x="524.6" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r86" x="573.4" y="142" textLength="48.8" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀</text><text class="terminal-1706147923-r86" x="622.2" y="142" textLength="36.6" clip-path="url(#terminal-1706147923-line-5)">▀▀▀</text><text class="terminal-1706147923-r69" x="658.8" y="142" textLength="73.2" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r69" x="732" y="142" textLength="12.2" clip-path="url(#terminal-1706147923-line-5)">▀</text><text class="terminal-1706147923-r70" x="744.2" y="142" textLength="85.4" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r71" x="829.6" y="142" textLength="85.4" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r71" x="915" y="142" textLength="12.2" clip-path="url(#terminal-1706147923-line-5)">▀</text><text class="terminal-1706147923-r72" x="927.2" y="142" textLength="73.2" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r72" x="1000.4" y="142" textLength="12.2" clip-path="url(#terminal-1706147923-line-5)">▀</text><text class="terminal-1706147923-r73" x="1012.6" y="142" textLength="73.2" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r73" x="1085.8" y="142" textLength="12.2" clip-path="url(#terminal-1706147923-line-5)">▀</text><text class="terminal-1706147923-r74" x="1098" y="142" textLength="85.4" clip-path="url(#terminal-1706147923-line-5)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r75" x="1183.4" y="142" textLength="36.6" clip-path="url(#terminal-1706147923-line-5)">▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="142" textLength="12.2" clip-path="url(#terminal-1706147923-line-5)">
-</text><text class="terminal-1706147923-r87" x="0" y="166.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-6)">▀▀</text><text class="terminal-1706147923-r88" x="24.4" y="166.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r89" x="109.8" y="166.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r89" x="195.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-6)">▀</text><text class="terminal-1706147923-r90" x="207.4" y="166.4" textLength="73.2" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r90" x="280.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-6)">▀</text><text class="terminal-1706147923-r91" x="292.8" y="166.4" textLength="73.2" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r91" x="366" y="166.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-6)">▀</text><text class="terminal-1706147923-r92" x="378.2" y="166.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r93" x="463.6" y="166.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r93" x="549" y="166.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-6)">▀▀</text><text class="terminal-1706147923-r94" x="573.4" y="166.4" textLength="61" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀</text><text class="terminal-1706147923-r94" x="634.4" y="166.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-6)">▀▀▀</text><text class="terminal-1706147923-r80" x="671" y="166.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀</text><text class="terminal-1706147923-r80" x="719.8" y="166.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀</text><text class="terminal-1706147923-r81" x="768.6" y="166.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀</text><text class="terminal-1706147923-r81" x="817.4" y="166.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀</text><text class="terminal-1706147923-r82" x="866.2" y="166.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀</text><text class="terminal-1706147923-r82" x="915" y="166.4" textLength="61" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀</text><text class="terminal-1706147923-r83" x="976" y="166.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-6)">▀▀▀</text><text class="terminal-1706147923-r83" x="1012.6" y="166.4" textLength="61" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀</text><text class="terminal-1706147923-r84" x="1073.6" y="166.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-6)">▀▀▀</text><text class="terminal-1706147923-r84" x="1110.2" y="166.4" textLength="61" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀▀</text><text class="terminal-1706147923-r85" x="1171.2" y="166.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-6)">▀▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="166.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-6)">
-</text><text class="terminal-1706147923-r95" x="0" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r96" x="12.2" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r97" x="97.6" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r98" x="183" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r98" x="268.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r99" x="280.6" y="190.8" textLength="73.2" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r99" x="353.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r100" x="366" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r101" x="451.4" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r102" x="536.8" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r102" x="622.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r87" x="634.4" y="190.8" textLength="73.2" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r87" x="707.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r88" x="719.8" y="190.8" textLength="73.2" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r88" x="793" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r89" x="805.2" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r90" x="890.6" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r91" x="976" y="190.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r91" x="1061.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r92" x="1073.6" y="190.8" textLength="73.2" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r92" x="1146.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">▀</text><text class="terminal-1706147923-r93" x="1159" y="190.8" textLength="61" clip-path="url(#terminal-1706147923-line-7)">▀▀▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="190.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-7)">
-</text><text class="terminal-1706147923-r103" x="0" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r104" x="12.2" y="215.2" textLength="61" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀</text><text class="terminal-1706147923-r104" x="73.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r105" x="85.4" y="215.2" textLength="73.2" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r106" x="158.6" y="215.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀</text><text class="terminal-1706147923-r107" x="207.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r107" x="219.6" y="215.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-8)">▀▀▀</text><text class="terminal-1706147923-r108" x="256.2" y="215.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-8)">▀▀▀</text><text class="terminal-1706147923-r109" x="292.8" y="215.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-8)">▀▀</text><text class="terminal-1706147923-r109" x="317.2" y="215.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀</text><text class="terminal-1706147923-r109" x="366" y="215.2" textLength="61" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀</text><text class="terminal-1706147923-r109" x="427" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r110" x="439.2" y="215.2" textLength="61" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀</text><text class="terminal-1706147923-r110" x="500.2" y="215.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-8)">▀▀</text><text class="terminal-1706147923-r111" x="524.6" y="215.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-8)">▀▀</text><text class="terminal-1706147923-r111" x="549" y="215.2" textLength="61" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀</text><text class="terminal-1706147923-r95" x="610" y="215.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-8)">▀▀▀</text><text class="terminal-1706147923-r95" x="646.6" y="215.2" textLength="61" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀</text><text class="terminal-1706147923-r96" x="707.6" y="215.2" textLength="73.2" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r96" x="780.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r97" x="793" y="215.2" textLength="73.2" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r97" x="866.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r98" x="878.4" y="215.2" textLength="85.4" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r99" x="963.8" y="215.2" textLength="85.4" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r100" x="1049.2" y="215.2" textLength="85.4" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r100" x="1134.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">▀</text><text class="terminal-1706147923-r101" x="1146.8" y="215.2" textLength="73.2" clip-path="url(#terminal-1706147923-line-8)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="215.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-8)">
-</text><text class="terminal-1706147923-r112" x="0" y="239.6" textLength="61" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀</text><text class="terminal-1706147923-r112" x="61" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r113" x="73.2" y="239.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r113" x="146.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r114" x="158.6" y="239.6" textLength="85.4" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r115" x="244" y="239.6" textLength="85.4" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r115" x="329.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r116" x="341.6" y="239.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r116" x="414.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r117" x="427" y="239.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r117" x="500.2" y="239.6" textLength="61" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀</text><text class="terminal-1706147923-r118" x="561.2" y="239.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-9)">▀▀▀</text><text class="terminal-1706147923-r119" x="597.8" y="239.6" textLength="61" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀</text><text class="terminal-1706147923-r103" x="658.8" y="239.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-9)">▀▀</text><text class="terminal-1706147923-r103" x="683.2" y="239.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-9)">▀▀</text><text class="terminal-1706147923-r104" x="707.6" y="239.6" textLength="61" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀</text><text class="terminal-1706147923-r104" x="768.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r105" x="780.8" y="239.6" textLength="61" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀</text><text class="terminal-1706147923-r106" x="841.8" y="239.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀</text><text class="terminal-1706147923-r107" x="890.6" y="239.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-9)">▀▀</text><text class="terminal-1706147923-r107" x="915" y="239.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-9)">▀▀</text><text class="terminal-1706147923-r107" x="939.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r108" x="951.6" y="239.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-9)">▀▀▀</text><text class="terminal-1706147923-r109" x="988.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">▀</text><text class="terminal-1706147923-r109" x="1000.4" y="239.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀</text><text class="terminal-1706147923-r109" x="1049.2" y="239.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r110" x="1122.4" y="239.6" textLength="73.2" clip-path="url(#terminal-1706147923-line-9)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r110" x="1195.6" y="239.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-9)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="239.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-9)">
-</text><text class="terminal-1706147923-r120" x="0" y="264" textLength="48.8" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀</text><text class="terminal-1706147923-r120" x="48.8" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r121" x="61" y="264" textLength="73.2" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r121" x="134.2" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r122" x="146.4" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r123" x="231.8" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r124" x="317.2" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r124" x="402.6" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r125" x="414.8" y="264" textLength="73.2" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r125" x="488" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r126" x="500.2" y="264" textLength="73.2" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r126" x="573.4" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r127" x="585.6" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r112" x="671" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r113" x="756.4" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r113" x="841.8" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r114" x="854" y="264" textLength="73.2" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r114" x="927.2" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r115" x="939.4" y="264" textLength="73.2" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r115" x="1012.6" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">▀</text><text class="terminal-1706147923-r116" x="1024.8" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r117" x="1110.2" y="264" textLength="85.4" clip-path="url(#terminal-1706147923-line-10)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r117" x="1195.6" y="264" textLength="24.4" clip-path="url(#terminal-1706147923-line-10)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="264" textLength="12.2" clip-path="url(#terminal-1706147923-line-10)">
-</text><text class="terminal-1706147923-r128" x="0" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r128" x="36.6" y="288.4" textLength="61" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀</text><text class="terminal-1706147923-r129" x="97.6" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r129" x="134.2" y="288.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-11)">▀▀</text><text class="terminal-1706147923-r130" x="158.6" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r131" x="195.2" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r131" x="231.8" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r131" x="268.4" y="288.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-11)">▀▀</text><text class="terminal-1706147923-r132" x="292.8" y="288.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀</text><text class="terminal-1706147923-r132" x="341.6" y="288.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀</text><text class="terminal-1706147923-r133" x="390.4" y="288.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀</text><text class="terminal-1706147923-r133" x="439.2" y="288.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀</text><text class="terminal-1706147923-r134" x="488" y="288.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-11)">▀</text><text class="terminal-1706147923-r134" x="500.2" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r134" x="536.8" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r135" x="573.4" y="288.4" textLength="61" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀</text><text class="terminal-1706147923-r135" x="634.4" y="288.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-11)">▀▀</text><text class="terminal-1706147923-r120" x="658.8" y="288.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r121" x="744.2" y="288.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r122" x="829.6" y="288.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r122" x="915" y="288.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-11)">▀</text><text class="terminal-1706147923-r123" x="927.2" y="288.4" textLength="73.2" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r123" x="1000.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-11)">▀</text><text class="terminal-1706147923-r124" x="1012.6" y="288.4" textLength="73.2" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r124" x="1085.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-11)">▀</text><text class="terminal-1706147923-r125" x="1098" y="288.4" textLength="85.4" clip-path="url(#terminal-1706147923-line-11)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r126" x="1183.4" y="288.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-11)">▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="288.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-11)">
-</text><text class="terminal-1706147923-r136" x="0" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r137" x="24.4" y="312.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r137" x="109.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r138" x="122" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r138" x="134.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r139" x="146.4" y="312.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀</text><text class="terminal-1706147923-r139" x="195.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r140" x="207.4" y="312.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀</text><text class="terminal-1706147923-r140" x="256.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r141" x="268.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r141" x="280.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r142" x="292.8" y="312.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r143" x="378.2" y="312.8" textLength="85.4" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r143" x="463.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r144" x="475.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">▀</text><text class="terminal-1706147923-r144" x="488" y="312.8" textLength="61" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀▀</text><text class="terminal-1706147923-r144" x="549" y="312.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-12)">▀▀▀</text><text class="terminal-1706147923-r145" x="585.6" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r146" x="610" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r146" x="634.4" y="312.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀</text><text class="terminal-1706147923-r128" x="683.2" y="312.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-12)">▀▀▀</text><text class="terminal-1706147923-r128" x="719.8" y="312.8" textLength="61" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀▀</text><text class="terminal-1706147923-r129" x="780.8" y="312.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀</text><text class="terminal-1706147923-r129" x="829.6" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r130" x="854" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r131" x="878.4" y="312.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀</text><text class="terminal-1706147923-r131" x="927.2" y="312.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-12)">▀▀▀</text><text class="terminal-1706147923-r131" x="963.8" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r132" x="988.2" y="312.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-12)">▀▀▀</text><text class="terminal-1706147923-r132" x="1024.8" y="312.8" textLength="61" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀▀</text><text class="terminal-1706147923-r133" x="1085.8" y="312.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-12)">▀▀▀</text><text class="terminal-1706147923-r133" x="1122.4" y="312.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-12)">▀▀▀▀</text><text class="terminal-1706147923-r134" x="1171.2" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r134" x="1195.6" y="312.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-12)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="312.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-12)">
-</text><text class="terminal-1706147923-r147" x="0" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r148" x="12.2" y="337.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-13)">▀▀▀</text><text class="terminal-1706147923-r149" x="48.8" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r149" x="73.2" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r150" x="97.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r151" x="109.8" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r151" x="134.2" y="337.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-13)">▀▀▀</text><text class="terminal-1706147923-r152" x="170.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r152" x="183" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r153" x="195.2" y="337.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-13)">▀▀▀</text><text class="terminal-1706147923-r154" x="231.8" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r154" x="256.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r154" x="268.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r155" x="280.6" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r156" x="305" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r156" x="329.4" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r156" x="353.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r157" x="366" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r157" x="390.4" y="337.2" textLength="61" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀▀</text><text class="terminal-1706147923-r158" x="451.4" y="337.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-13)">▀▀▀</text><text class="terminal-1706147923-r159" x="488" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r159" x="512.4" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r160" x="536.8" y="337.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀</text><text class="terminal-1706147923-r160" x="585.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r161" x="597.8" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r161" x="622.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r136" x="634.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r136" x="646.6" y="337.2" textLength="61" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀▀</text><text class="terminal-1706147923-r136" x="707.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r137" x="719.8" y="337.2" textLength="73.2" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r137" x="793" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r138" x="805.2" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r139" x="829.6" y="337.2" textLength="61" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀▀</text><text class="terminal-1706147923-r140" x="890.6" y="337.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀</text><text class="terminal-1706147923-r140" x="939.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r141" x="951.6" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r142" x="976" y="337.2" textLength="85.4" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀▀▀▀</text><text class="terminal-1706147923-r142" x="1061.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r143" x="1073.6" y="337.2" textLength="73.2" clip-path="url(#terminal-1706147923-line-13)">▀▀▀▀▀▀</text><text class="terminal-1706147923-r143" x="1146.8" y="337.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-13)">▀▀</text><text class="terminal-1706147923-r144" x="1171.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">▀</text><text class="terminal-1706147923-r144" x="1183.4" y="337.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-13)">▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="337.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-13)">
-</text><text class="terminal-1706147923-r162" x="0" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r163" x="36.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r164" x="48.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r164" x="61" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r165" x="97.6" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r165" x="122" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r166" x="146.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r167" x="158.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r168" x="170.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r168" x="183" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r168" x="195.2" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r169" x="219.6" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r169" x="244" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r170" x="256.2" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r171" x="292.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r171" x="317.2" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r171" x="341.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r172" x="353.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r172" x="378.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r172" x="390.4" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r173" x="414.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r174" x="439.2" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r175" x="475.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r175" x="500.2" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r176" x="524.6" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r177" x="549" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r177" x="573.4" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r177" x="597.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r178" x="610" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r178" x="634.4" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r147" x="671" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r147" x="695.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r148" x="707.6" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r149" x="732" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r149" x="756.4" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r149" x="780.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r150" x="793" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r151" x="805.2" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r151" x="829.6" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r152" x="866.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r153" x="878.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r153" x="890.6" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r154" x="927.2" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r154" x="951.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r155" x="963.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r156" x="988.2" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r156" x="1012.6" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r156" x="1049.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r157" x="1061.4" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r157" x="1085.8" y="361.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-14)">▀▀▀▀</text><text class="terminal-1706147923-r157" x="1134.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r158" x="1146.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-14)">▀▀</text><text class="terminal-1706147923-r159" x="1171.2" y="361.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-14)">▀▀▀</text><text class="terminal-1706147923-r159" x="1207.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">▀</text><text class="terminal-1706147923-r24" x="1220" y="361.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-14)">
-</text><text class="terminal-1706147923-r179" x="0" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r179" x="36.6" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r180" x="48.8" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r180" x="61" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r181" x="73.2" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r182" x="97.6" y="386" textLength="61" clip-path="url(#terminal-1706147923-line-15)">▀▀▀▀▀</text><text class="terminal-1706147923-r183" x="158.6" y="386" textLength="48.8" clip-path="url(#terminal-1706147923-line-15)">▀▀▀▀</text><text class="terminal-1706147923-r183" x="207.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r184" x="219.6" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r185" x="244" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r185" x="268.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r186" x="280.6" y="386" textLength="48.8" clip-path="url(#terminal-1706147923-line-15)">▀▀▀▀</text><text class="terminal-1706147923-r186" x="329.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r187" x="341.6" y="386" textLength="48.8" clip-path="url(#terminal-1706147923-line-15)">▀▀▀▀</text><text class="terminal-1706147923-r187" x="390.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r188" x="402.6" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r188" x="414.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r189" x="439.2" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r189" x="451.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r190" x="463.6" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r190" x="500.2" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r191" x="512.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r192" x="524.6" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r193" x="536.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r193" x="561.2" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r194" x="597.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r194" x="622.2" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r195" x="634.4" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r196" x="658.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r162" x="683.2" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r163" x="719.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r164" x="744.2" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r165" x="780.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r165" x="805.2" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r166" x="841.8" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r167" x="854" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r168" x="866.2" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r168" x="878.4" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r169" x="915" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r170" x="939.4" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r171" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r171" x="988.2" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r171" x="1000.4" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r172" x="1037" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r172" x="1061.4" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r172" x="1085.8" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r173" x="1110.2" y="386" textLength="24.4" clip-path="url(#terminal-1706147923-line-15)">▀▀</text><text class="terminal-1706147923-r174" x="1134.6" y="386" textLength="36.6" clip-path="url(#terminal-1706147923-line-15)">▀▀▀</text><text class="terminal-1706147923-r175" x="1171.2" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r175" x="1183.4" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r175" x="1195.6" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r175" x="1207.8" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">▀</text><text class="terminal-1706147923-r24" x="1220" y="386" textLength="12.2" clip-path="url(#terminal-1706147923-line-15)">
-</text><text class="terminal-1706147923-r197" x="0" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r198" x="24.4" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r199" x="61" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r200" x="85.4" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r201" x="122" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r202" x="134.2" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r202" x="158.6" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r203" x="195.2" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r204" x="219.6" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r205" x="256.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r205" x="268.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r205" x="280.6" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r206" x="317.2" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r206" x="341.6" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r206" x="366" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r207" x="378.2" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r208" x="414.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r208" x="427" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r209" x="439.2" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r209" x="463.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r209" x="475.8" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r210" x="500.2" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r210" x="536.8" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r211" x="561.2" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r212" x="585.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r212" x="597.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r213" x="610" y="410.4" textLength="61" clip-path="url(#terminal-1706147923-line-16)">▀▀▀▀▀</text><text class="terminal-1706147923-r179" x="671" y="410.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-16)">▀▀▀▀</text><text class="terminal-1706147923-r179" x="719.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r180" x="732" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r181" x="756.4" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r181" x="780.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r182" x="793" y="410.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-16)">▀▀▀▀</text><text class="terminal-1706147923-r182" x="841.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r183" x="854" y="410.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-16)">▀▀▀▀</text><text class="terminal-1706147923-r183" x="902.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r184" x="915" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r184" x="927.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r185" x="939.4" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r186" x="963.8" y="410.4" textLength="61" clip-path="url(#terminal-1706147923-line-16)">▀▀▀▀▀</text><text class="terminal-1706147923-r187" x="1024.8" y="410.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-16)">▀▀▀▀</text><text class="terminal-1706147923-r187" x="1073.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r188" x="1085.8" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r188" x="1110.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r189" x="1122.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r189" x="1134.6" y="410.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-16)">▀▀</text><text class="terminal-1706147923-r190" x="1159" y="410.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-16)">▀▀▀</text><text class="terminal-1706147923-r190" x="1195.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r191" x="1207.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">▀</text><text class="terminal-1706147923-r24" x="1220" y="410.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-16)">
-</text><text class="terminal-1706147923-r214" x="0" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r215" x="12.2" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r215" x="36.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r216" x="48.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r216" x="61" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r217" x="73.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r218" x="85.4" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r218" x="122" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r219" x="134.2" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r220" x="170.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r220" x="183" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r221" x="195.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r221" x="207.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r222" x="219.6" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r223" x="244" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r223" x="256.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r224" x="268.4" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r225" x="305" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r225" x="341.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r225" x="353.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r202" x="854" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r203" x="878.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r203" x="890.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r203" x="902.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r204" x="915" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r205" x="951.6" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r205" x="976" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r206" x="1012.6" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r206" x="1037" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r206" x="1049.2" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r207" x="1073.6" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r208" x="1098" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r208" x="1122.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">▀</text><text class="terminal-1706147923-r209" x="1134.6" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r209" x="1159" y="434.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-17)">▀▀</text><text class="terminal-1706147923-r210" x="1183.4" y="434.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-17)">▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="434.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-17)">
-</text><text class="terminal-1706147923-r226" x="0" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r226" x="12.2" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r227" x="36.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r227" x="48.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r227" x="61" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r228" x="73.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r228" x="85.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r229" x="97.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r230" x="109.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r230" x="122" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r231" x="146.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r231" x="158.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r232" x="170.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r233" x="183" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r233" x="195.2" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r234" x="219.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r235" x="231.8" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r236" x="256.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r236" x="268.4" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r237" x="292.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r237" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r237" x="317.2" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r238" x="341.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r239" x="353.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r219" x="854" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r220" x="866.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r221" x="878.4" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r221" x="902.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r222" x="915" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r222" x="927.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r223" x="939.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r224" x="951.6" y="459.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-18)">▀▀▀</text><text class="terminal-1706147923-r224" x="988.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r225" x="1000.4" y="459.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-18)">▀▀▀</text><text class="terminal-1706147923-r225" x="1037" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r225" x="1049.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r240" x="1061.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r240" x="1073.6" y="459.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-18)">▀▀</text><text class="terminal-1706147923-r241" x="1098" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r241" x="1110.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r242" x="1122.4" y="459.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-18)">▀▀▀▀</text><text class="terminal-1706147923-r242" x="1171.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r243" x="1183.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r244" x="1195.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r244" x="1207.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">▀</text><text class="terminal-1706147923-r24" x="1220" y="459.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-18)">
-</text><text class="terminal-1706147923-r245" x="0" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r245" x="24.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r246" x="36.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r247" x="48.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r247" x="61" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r248" x="73.2" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r249" x="97.6" y="483.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-19)">▀▀▀</text><text class="terminal-1706147923-r250" x="134.2" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r251" x="158.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r252" x="170.8" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r252" x="195.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r253" x="207.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r254" x="219.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r254" x="231.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r255" x="244" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r255" x="268.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r256" x="280.6" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r256" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r257" x="317.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r257" x="329.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r258" x="341.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r259" x="353.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r260" x="414.8" y="483.6" textLength="353.8" clip-path="url(#terminal-1706147923-line-19)">Making&#160;a&#160;splash&#160;with&#160;Textual!</text><text class="terminal-1706147923-r232" x="854" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r233" x="866.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r233" x="878.4" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r234" x="902.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r235" x="915" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r235" x="939.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r236" x="951.6" y="483.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-19)">▀▀▀</text><text class="terminal-1706147923-r237" x="988.2" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r237" x="1012.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r238" x="1024.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r239" x="1037" y="483.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-19)">▀▀▀</text><text class="terminal-1706147923-r261" x="1073.6" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r262" x="1098" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r263" x="1110.2" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r263" x="1134.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r263" x="1146.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r264" x="1159" y="483.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-19)">▀▀</text><text class="terminal-1706147923-r264" x="1183.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r264" x="1195.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r265" x="1207.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">▀</text><text class="terminal-1706147923-r24" x="1220" y="483.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-19)">
-</text><text class="terminal-1706147923-r266" x="0" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r267" x="12.2" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r268" x="36.6" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r268" x="48.8" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r269" x="73.2" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r269" x="85.4" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r269" x="97.6" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r270" x="109.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r270" x="122" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r271" x="134.2" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r272" x="158.6" y="508" textLength="36.6" clip-path="url(#terminal-1706147923-line-20)">▀▀▀</text><text class="terminal-1706147923-r273" x="195.2" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r273" x="219.6" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r274" x="231.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r274" x="244" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r275" x="268.4" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r275" x="280.6" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r275" x="292.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r276" x="305" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r277" x="317.2" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r278" x="329.4" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r278" x="353.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r251" x="854" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r252" x="866.2" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r252" x="890.6" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r253" x="902.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r254" x="915" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r255" x="927.2" y="508" textLength="36.6" clip-path="url(#terminal-1706147923-line-20)">▀▀▀</text><text class="terminal-1706147923-r256" x="963.8" y="508" textLength="36.6" clip-path="url(#terminal-1706147923-line-20)">▀▀▀</text><text class="terminal-1706147923-r257" x="1000.4" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r257" x="1024.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r259" x="1037" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r259" x="1061.4" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r279" x="1073.6" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r280" x="1098" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r281" x="1122.4" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r281" x="1134.6" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r282" x="1159" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r282" x="1171.2" y="508" textLength="24.4" clip-path="url(#terminal-1706147923-line-20)">▀▀</text><text class="terminal-1706147923-r283" x="1195.6" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r283" x="1207.8" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">▀</text><text class="terminal-1706147923-r24" x="1220" y="508" textLength="12.2" clip-path="url(#terminal-1706147923-line-20)">
-</text><text class="terminal-1706147923-r284" x="0" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r285" x="24.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r285" x="36.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r286" x="48.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r287" x="61" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r287" x="73.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r287" x="85.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r288" x="97.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r288" x="109.8" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r289" x="134.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r290" x="146.4" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r291" x="170.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r291" x="183" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r292" x="195.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r293" x="207.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r293" x="219.6" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r294" x="244" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r294" x="256.2" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r295" x="280.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r295" x="292.8" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r296" x="317.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r297" x="329.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r297" x="341.6" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r272" x="854" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r298" x="878.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r273" x="890.6" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r274" x="915" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r274" x="927.2" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r275" x="951.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r275" x="963.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r275" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r276" x="988.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r276" x="1000.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r277" x="1012.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r278" x="1024.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r278" x="1037" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r299" x="1061.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r300" x="1073.6" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r301" x="1098" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r301" x="1110.2" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r302" x="1134.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r302" x="1146.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r303" x="1159" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r303" x="1171.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r304" x="1183.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">▀</text><text class="terminal-1706147923-r305" x="1195.6" y="532.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-21)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="532.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-21)">
-</text><text class="terminal-1706147923-r306" x="0" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r307" x="12.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r307" x="24.4" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r308" x="48.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r308" x="61" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r309" x="85.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r309" x="97.6" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r310" x="122" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r310" x="134.2" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r311" x="158.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r311" x="170.8" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r312" x="195.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r312" x="207.4" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r313" x="231.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r313" x="244" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r314" x="268.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r315" x="280.6" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r316" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r316" x="317.2" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r317" x="341.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r317" x="353.8" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r318" x="378.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r319" x="390.4" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r320" x="414.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r320" x="427" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r321" x="439.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r322" x="451.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r322" x="463.6" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r323" x="488" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r324" x="500.2" y="556.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-22)">▀▀▀</text><text class="terminal-1706147923-r325" x="536.8" y="556.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-22)">▀▀▀</text><text class="terminal-1706147923-r326" x="573.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r327" x="585.6" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r328" x="610" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r328" x="622.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r329" x="634.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r330" x="646.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r330" x="658.8" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r284" x="683.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r284" x="695.4" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r285" x="719.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r286" x="732" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r287" x="756.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r287" x="768.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r287" x="780.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r288" x="793" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r288" x="805.2" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r289" x="829.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r290" x="841.8" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r291" x="866.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r291" x="878.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r292" x="890.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r293" x="902.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r293" x="915" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r293" x="927.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r294" x="939.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r294" x="951.6" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r295" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r295" x="988.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r296" x="1000.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r297" x="1012.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r297" x="1024.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r297" x="1037" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r331" x="1049.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r332" x="1061.4" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r333" x="1085.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r333" x="1098" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r334" x="1122.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r335" x="1134.6" y="556.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-22)">▀▀</text><text class="terminal-1706147923-r336" x="1159" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r336" x="1171.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r336" x="1183.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r337" x="1195.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r337" x="1207.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">▀</text><text class="terminal-1706147923-r24" x="1220" y="556.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-22)">
-</text><text class="terminal-1706147923-r338" x="0" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r338" x="12.2" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r339" x="36.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r339" x="48.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r340" x="73.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r340" x="85.4" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r341" x="109.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r341" x="122" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r342" x="146.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r342" x="158.6" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r343" x="183" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r343" x="195.2" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r344" x="219.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r344" x="231.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r345" x="256.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r345" x="268.4" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r346" x="292.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r346" x="305" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r347" x="329.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r347" x="341.6" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r348" x="366" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r348" x="378.2" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r349" x="402.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r349" x="414.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r350" x="439.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r350" x="451.4" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r351" x="475.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r351" x="488" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r352" x="512.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r352" x="524.6" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r353" x="549" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r353" x="561.2" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r354" x="585.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r354" x="597.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r355" x="622.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r355" x="634.4" y="581.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-23)">▀▀▀</text><text class="terminal-1706147923-r306" x="671" y="581.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-23)">▀▀▀</text><text class="terminal-1706147923-r307" x="707.6" y="581.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-23)">▀▀▀</text><text class="terminal-1706147923-r308" x="744.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r308" x="756.4" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r309" x="780.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r309" x="793" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r310" x="817.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r310" x="829.6" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r311" x="854" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r311" x="866.2" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r312" x="890.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r312" x="902.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r313" x="927.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r313" x="939.4" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r314" x="963.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r315" x="976" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r316" x="1000.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r316" x="1012.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r356" x="1024.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r317" x="1037" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r317" x="1049.2" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r319" x="1073.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r319" x="1085.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r320" x="1110.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r321" x="1122.4" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r322" x="1146.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r322" x="1159" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r323" x="1171.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r324" x="1183.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">▀</text><text class="terminal-1706147923-r324" x="1195.6" y="581.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-23)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="581.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-23)">
-</text><text class="terminal-1706147923-r357" x="0" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r358" x="24.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r358" x="36.6" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r359" x="61" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r359" x="73.2" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r360" x="97.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r360" x="109.8" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r361" x="134.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r361" x="146.4" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r362" x="170.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r362" x="183" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r363" x="207.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r363" x="219.6" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r364" x="244" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r364" x="256.2" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r365" x="280.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r365" x="292.8" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r366" x="317.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r366" x="329.4" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r367" x="353.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r367" x="366" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r368" x="390.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r368" x="402.6" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r369" x="427" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r369" x="439.2" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r370" x="463.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r370" x="475.8" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r371" x="500.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r371" x="512.4" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r372" x="536.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r372" x="549" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r373" x="573.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r373" x="585.6" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r374" x="610" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r374" x="622.2" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r375" x="646.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r375" x="658.8" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r338" x="683.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r338" x="695.4" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r339" x="719.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r339" x="732" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r340" x="756.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r340" x="768.6" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r341" x="793" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r341" x="805.2" y="605.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-24)">▀▀▀</text><text class="terminal-1706147923-r342" x="841.8" y="605.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-24)">▀▀▀</text><text class="terminal-1706147923-r343" x="878.4" y="605.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-24)">▀▀▀</text><text class="terminal-1706147923-r344" x="915" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r344" x="927.2" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r345" x="951.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r345" x="963.8" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r346" x="988.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r346" x="1000.4" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r347" x="1024.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r347" x="1037" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r348" x="1061.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r348" x="1073.6" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r349" x="1098" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r349" x="1110.2" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r350" x="1134.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r350" x="1146.8" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r351" x="1171.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r351" x="1183.4" y="605.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-24)">▀▀</text><text class="terminal-1706147923-r352" x="1207.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">▀</text><text class="terminal-1706147923-r24" x="1220" y="605.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-24)">
-</text><text class="terminal-1706147923-r376" x="0" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r376" x="12.2" y="630" textLength="36.6" clip-path="url(#terminal-1706147923-line-25)">▀▀▀</text><text class="terminal-1706147923-r377" x="48.8" y="630" textLength="36.6" clip-path="url(#terminal-1706147923-line-25)">▀▀▀</text><text class="terminal-1706147923-r378" x="85.4" y="630" textLength="36.6" clip-path="url(#terminal-1706147923-line-25)">▀▀▀</text><text class="terminal-1706147923-r379" x="122" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r379" x="134.2" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r380" x="158.6" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r380" x="170.8" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r381" x="195.2" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r381" x="207.4" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r382" x="231.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r382" x="244" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r383" x="268.4" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r383" x="280.6" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r384" x="305" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r384" x="317.2" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r385" x="341.6" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r385" x="353.8" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r386" x="378.2" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r386" x="390.4" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r387" x="414.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r387" x="427" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r388" x="451.4" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r388" x="463.6" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r389" x="488" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r389" x="500.2" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r390" x="524.6" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r390" x="536.8" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r391" x="561.2" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r391" x="573.4" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r392" x="597.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r392" x="610" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r393" x="634.4" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r393" x="646.6" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r357" x="671" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r357" x="683.2" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r358" x="707.6" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r358" x="719.8" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r359" x="744.2" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r359" x="756.4" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r360" x="780.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r360" x="793" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r361" x="817.4" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r361" x="829.6" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r362" x="854" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r362" x="866.2" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r363" x="890.6" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r363" x="902.8" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r364" x="927.2" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r364" x="939.4" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r365" x="963.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r365" x="976" y="630" textLength="36.6" clip-path="url(#terminal-1706147923-line-25)">▀▀▀</text><text class="terminal-1706147923-r366" x="1012.6" y="630" textLength="36.6" clip-path="url(#terminal-1706147923-line-25)">▀▀▀</text><text class="terminal-1706147923-r367" x="1049.2" y="630" textLength="36.6" clip-path="url(#terminal-1706147923-line-25)">▀▀▀</text><text class="terminal-1706147923-r368" x="1085.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r368" x="1098" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r369" x="1122.4" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r369" x="1134.6" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r370" x="1159" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r370" x="1171.2" y="630" textLength="24.4" clip-path="url(#terminal-1706147923-line-25)">▀▀</text><text class="terminal-1706147923-r371" x="1195.6" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r371" x="1207.8" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">▀</text><text class="terminal-1706147923-r24" x="1220" y="630" textLength="12.2" clip-path="url(#terminal-1706147923-line-25)">
-</text><text class="terminal-1706147923-r394" x="0" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r395" x="12.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r396" x="24.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r396" x="36.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r396" x="48.8" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r397" x="73.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r397" x="85.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r398" x="97.6" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r399" x="122" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r399" x="134.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r399" x="146.4" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r400" x="170.8" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r400" x="195.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r400" x="207.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r401" x="219.6" y="654.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-26)">▀▀▀</text><text class="terminal-1706147923-r402" x="256.2" y="654.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-26)">▀▀▀</text><text class="terminal-1706147923-r403" x="292.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r403" x="305" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r404" x="329.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r404" x="341.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r404" x="353.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r405" x="366" y="654.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-26)">▀▀▀</text><text class="terminal-1706147923-r406" x="402.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r406" x="414.8" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r407" x="439.2" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r407" x="463.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r408" x="475.8" y="654.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-26)">▀▀▀</text><text class="terminal-1706147923-r409" x="512.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r409" x="524.6" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r410" x="549" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r410" x="561.2" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r411" x="585.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r411" x="597.8" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r412" x="622.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r412" x="634.4" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r413" x="658.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r413" x="671" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r376" x="695.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r376" x="707.6" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r377" x="732" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r377" x="744.2" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r378" x="768.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r378" x="780.8" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r379" x="805.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r379" x="817.4" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r380" x="841.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r380" x="854" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r381" x="878.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r381" x="890.6" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r382" x="915" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r382" x="927.2" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r383" x="951.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r383" x="963.8" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r384" x="988.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r384" x="1000.4" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r385" x="1024.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r385" x="1037" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r386" x="1061.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r386" x="1073.6" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r387" x="1098" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r387" x="1110.2" y="654.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-26)">▀▀</text><text class="terminal-1706147923-r388" x="1134.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">▀</text><text class="terminal-1706147923-r388" x="1146.8" y="654.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-26)">▀▀▀</text><text class="terminal-1706147923-r389" x="1183.4" y="654.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-26)">▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="654.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-26)">
-</text><text class="terminal-1706147923-r414" x="0" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r415" x="24.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r415" x="36.6" y="678.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-27)">▀▀▀</text><text class="terminal-1706147923-r416" x="73.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r416" x="85.4" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r417" x="109.8" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r417" x="134.2" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r418" x="158.6" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r418" x="183" y="678.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-27)">▀▀▀</text><text class="terminal-1706147923-r419" x="219.6" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r420" x="244" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r421" x="268.4" y="678.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-27)">▀▀▀▀</text><text class="terminal-1706147923-r422" x="317.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r423" x="329.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r424" x="341.6" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r424" x="366" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r425" x="378.2" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r426" x="402.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r426" x="414.8" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r427" x="439.2" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r427" x="463.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r428" x="475.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r429" x="488" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r430" x="512.4" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r431" x="536.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r432" x="549" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r432" x="561.2" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r432" x="585.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r433" x="597.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r433" x="610" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r434" x="634.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r435" x="646.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r435" x="658.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r435" x="671" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r435" x="683.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r394" x="695.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r396" x="707.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r396" x="719.8" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r396" x="744.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r397" x="756.4" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r397" x="780.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r398" x="793" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r399" x="817.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r399" x="829.6" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r399" x="854" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r400" x="866.2" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r400" x="890.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r401" x="902.8" y="678.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-27)">▀▀▀</text><text class="terminal-1706147923-r402" x="939.4" y="678.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-27)">▀▀▀</text><text class="terminal-1706147923-r403" x="976" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r403" x="1000.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r404" x="1012.6" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r404" x="1037" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r405" x="1049.2" y="678.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-27)">▀▀▀</text><text class="terminal-1706147923-r406" x="1085.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r406" x="1098" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r407" x="1122.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r407" x="1134.6" y="678.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-27)">▀▀</text><text class="terminal-1706147923-r408" x="1159" y="678.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-27)">▀▀▀</text><text class="terminal-1706147923-r409" x="1195.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r409" x="1207.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">▀</text><text class="terminal-1706147923-r24" x="1220" y="678.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-27)">
-</text><text class="terminal-1706147923-r436" x="0" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r437" x="12.2" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r437" x="48.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r438" x="61" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r438" x="97.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r439" x="109.8" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r440" x="146.4" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r440" x="183" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r441" x="195.2" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r441" x="231.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r442" x="244" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r442" x="268.4" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r443" x="292.8" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r443" x="317.2" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r444" x="341.6" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r444" x="366" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r445" x="378.2" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r445" x="402.6" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r446" x="427" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r446" x="451.4" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r447" x="475.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r447" x="488" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r448" x="524.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r448" x="536.8" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r449" x="573.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r449" x="585.6" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r450" x="622.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r450" x="634.4" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r414" x="658.8" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r414" x="683.2" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r415" x="707.6" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r415" x="732" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r416" x="756.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r416" x="768.6" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r417" x="805.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r417" x="817.4" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r418" x="854" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r418" x="866.2" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r419" x="902.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r419" x="915" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r420" x="927.2" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r421" x="963.8" y="703.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-28)">▀▀▀▀</text><text class="terminal-1706147923-r423" x="1012.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r424" x="1024.8" y="703.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-28)">▀▀▀</text><text class="terminal-1706147923-r424" x="1061.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r425" x="1073.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r426" x="1085.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r426" x="1098" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r427" x="1122.4" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r427" x="1146.8" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r429" x="1171.2" y="703.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-28)">▀▀</text><text class="terminal-1706147923-r429" x="1195.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r430" x="1207.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">▀</text><text class="terminal-1706147923-r24" x="1220" y="703.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-28)">
-</text><text class="terminal-1706147923-r451" x="0" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r451" x="12.2" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r452" x="36.6" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r452" x="61" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r453" x="85.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r453" x="97.6" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r454" x="134.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r454" x="146.4" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r455" x="183" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r455" x="195.2" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r456" x="219.6" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r456" x="244" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r457" x="268.4" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r457" x="292.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r458" x="305" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r458" x="341.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r459" x="353.8" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r459" x="378.2" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r460" x="402.6" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r460" x="427" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r461" x="439.2" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r461" x="475.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r462" x="488" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r463" x="524.6" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r463" x="561.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r464" x="573.4" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r464" x="610" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r465" x="622.2" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r436" x="658.8" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r436" x="695.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r437" x="707.6" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r438" x="744.2" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r438" x="780.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r439" x="793" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r439" x="829.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r440" x="841.8" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r440" x="878.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r441" x="890.6" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r441" x="915" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r442" x="927.2" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r442" x="963.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r443" x="976" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r443" x="1000.4" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r444" x="1024.8" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r444" x="1049.2" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r445" x="1073.6" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r445" x="1098" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r446" x="1122.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r446" x="1134.6" y="727.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-29)">▀▀▀</text><text class="terminal-1706147923-r447" x="1171.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r447" x="1183.4" y="727.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-29)">▀▀</text><text class="terminal-1706147923-r448" x="1207.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">▀</text><text class="terminal-1706147923-r24" x="1220" y="727.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-29)">
-</text><text class="terminal-1706147923-r466" x="0" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r467" x="12.2" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r467" x="48.8" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r468" x="61" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r469" x="73.2" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r469" x="109.8" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r470" x="122" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r470" x="158.6" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r471" x="170.8" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r472" x="207.4" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r472" x="231.8" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r473" x="256.2" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r473" x="268.4" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r473" x="292.8" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r474" x="305" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r474" x="317.2" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r474" x="341.6" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r475" x="353.8" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r475" x="366" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r476" x="402.6" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r476" x="414.8" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r477" x="451.4" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r477" x="463.6" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r478" x="500.2" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r478" x="512.4" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r479" x="536.8" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r479" x="561.2" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r480" x="585.6" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r480" x="610" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r481" x="634.4" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r481" x="646.6" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r451" x="683.2" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r451" x="695.4" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r452" x="732" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r452" x="744.2" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r453" x="780.8" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r453" x="793" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r454" x="817.4" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r454" x="841.8" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r455" x="866.2" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r455" x="890.6" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r456" x="915" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r456" x="927.2" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r457" x="951.6" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r457" x="976" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r458" x="1000.4" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r458" x="1024.8" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r459" x="1049.2" y="752" textLength="24.4" clip-path="url(#terminal-1706147923-line-30)">▀▀</text><text class="terminal-1706147923-r459" x="1073.6" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r460" x="1085.8" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r460" x="1122.4" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r461" x="1134.6" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r462" x="1171.2" y="752" textLength="36.6" clip-path="url(#terminal-1706147923-line-30)">▀▀▀</text><text class="terminal-1706147923-r462" x="1207.8" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">▀</text><text class="terminal-1706147923-r24" x="1220" y="752" textLength="12.2" clip-path="url(#terminal-1706147923-line-30)">
-</text><text class="terminal-1706147923-r482" x="0" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r483" x="12.2" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r484" x="36.6" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r484" x="61" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r484" x="97.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r485" x="109.8" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r485" x="134.2" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r486" x="158.6" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r486" x="183" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r486" x="195.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r487" x="207.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r488" x="219.6" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r489" x="256.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r489" x="268.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r490" x="280.6" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r491" x="305" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r491" x="317.2" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r492" x="341.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r493" x="353.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r493" x="366" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r493" x="390.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r494" x="402.6" y="776.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-31)">▀▀▀▀</text><text class="terminal-1706147923-r495" x="451.4" y="776.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-31)">▀▀▀▀</text><text class="terminal-1706147923-r495" x="500.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r496" x="512.4" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r496" x="549" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r497" x="561.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r498" x="573.4" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r498" x="597.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r499" x="610" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r499" x="622.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r500" x="634.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r500" x="646.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r501" x="658.8" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r501" x="683.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r466" x="695.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r467" x="707.6" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r468" x="744.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r469" x="756.4" y="776.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-31)">▀▀▀▀</text><text class="terminal-1706147923-r470" x="805.2" y="776.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-31)">▀▀▀▀</text><text class="terminal-1706147923-r471" x="854" y="776.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-31)">▀▀▀▀</text><text class="terminal-1706147923-r472" x="902.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r472" x="915" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r473" x="951.6" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r473" x="976" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r474" x="1000.4" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r474" x="1037" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r475" x="1049.2" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r476" x="1085.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r476" x="1098" y="776.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-31)">▀▀▀</text><text class="terminal-1706147923-r477" x="1134.6" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r477" x="1159" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r478" x="1183.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">▀</text><text class="terminal-1706147923-r478" x="1195.6" y="776.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-31)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="776.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-31)">
-</text><text class="terminal-1706147923-r502" x="0" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r502" x="24.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r503" x="36.6" y="800.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-32)">▀▀▀▀</text><text class="terminal-1706147923-r504" x="85.4" y="800.8" textLength="61" clip-path="url(#terminal-1706147923-line-32)">▀▀▀▀▀</text><text class="terminal-1706147923-r504" x="146.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r505" x="158.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r505" x="170.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r506" x="183" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r506" x="195.2" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r507" x="219.6" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r507" x="256.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r508" x="268.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r509" x="280.6" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r509" x="317.2" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r510" x="341.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r511" x="353.8" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r511" x="378.2" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r512" x="414.8" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r513" x="439.2" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r514" x="475.8" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r514" x="500.2" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r515" x="524.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r516" x="536.8" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r516" x="561.2" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r517" x="597.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r517" x="610" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r518" x="622.2" y="800.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-32)">▀▀▀▀</text><text class="terminal-1706147923-r482" x="671" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r482" x="695.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r483" x="707.6" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r484" x="732" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r484" x="756.4" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r484" x="780.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r485" x="793" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r485" x="817.4" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r519" x="841.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r486" x="854" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r486" x="878.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r487" x="890.6" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r488" x="915" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r489" x="939.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r489" x="951.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r489" x="963.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r490" x="976" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r491" x="1000.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r491" x="1012.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r492" x="1024.8" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r493" x="1049.2" y="800.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-32)">▀▀</text><text class="terminal-1706147923-r493" x="1073.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r520" x="1085.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r494" x="1098" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r494" x="1134.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r495" x="1146.8" y="800.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-32)">▀▀▀</text><text class="terminal-1706147923-r495" x="1183.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r521" x="1195.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r496" x="1207.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">▀</text><text class="terminal-1706147923-r24" x="1220" y="800.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-32)">
-</text><text class="terminal-1706147923-r522" x="0" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r523" x="12.2" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r523" x="36.6" y="825.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-33)">▀▀▀</text><text class="terminal-1706147923-r524" x="73.2" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r524" x="97.6" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r524" x="122" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r525" x="134.2" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r526" x="158.6" y="825.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-33)">▀▀▀</text><text class="terminal-1706147923-r527" x="195.2" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r527" x="219.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r527" x="231.8" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r528" x="256.2" y="825.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-33)">▀▀▀</text><text class="terminal-1706147923-r528" x="292.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r529" x="305" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r529" x="317.2" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r530" x="341.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r530" x="353.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r531" x="366" y="825.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀</text><text class="terminal-1706147923-r531" x="414.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r532" x="427" y="825.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀</text><text class="terminal-1706147923-r532" x="475.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r533" x="488" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r534" x="512.4" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r534" x="536.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r535" x="549" y="825.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀</text><text class="terminal-1706147923-r536" x="597.8" y="825.2" textLength="61" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀▀</text><text class="terminal-1706147923-r537" x="658.8" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r537" x="683.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r502" x="695.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r502" x="707.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r503" x="719.8" y="825.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀</text><text class="terminal-1706147923-r503" x="768.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r504" x="780.8" y="825.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀</text><text class="terminal-1706147923-r504" x="829.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r505" x="841.8" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r506" x="866.2" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r506" x="890.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r507" x="902.8" y="825.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-33)">▀▀▀▀</text><text class="terminal-1706147923-r508" x="951.6" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r509" x="976" y="825.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-33)">▀▀▀</text><text class="terminal-1706147923-r509" x="1012.6" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r510" x="1037" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r511" x="1049.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r511" x="1061.4" y="825.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-33)">▀▀▀</text><text class="terminal-1706147923-r512" x="1098" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r512" x="1122.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r513" x="1134.6" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r514" x="1159" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r514" x="1183.4" y="825.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-33)">▀▀</text><text class="terminal-1706147923-r514" x="1207.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">▀</text><text class="terminal-1706147923-r24" x="1220" y="825.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-33)">
-</text><text class="terminal-1706147923-r538" x="0" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r538" x="24.4" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r538" x="48.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r539" x="61" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r539" x="85.4" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r540" x="122" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r540" x="146.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r541" x="158.6" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r542" x="183" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r542" x="219.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r542" x="231.8" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r543" x="256.2" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r543" x="280.6" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r544" x="317.2" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r544" x="341.6" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r545" x="366" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r546" x="378.2" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r546" x="402.6" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r547" x="439.2" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r548" x="463.6" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r548" x="500.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r549" x="512.4" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r549" x="536.8" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r550" x="561.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r551" x="573.4" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r551" x="597.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r551" x="610" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r552" x="634.4" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r522" x="658.8" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r523" x="695.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r523" x="707.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r523" x="719.8" y="849.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-34)">▀▀▀▀</text><text class="terminal-1706147923-r524" x="768.6" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r524" x="793" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r524" x="805.2" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r525" x="829.6" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r526" x="854" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r527" x="878.4" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r527" x="902.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r527" x="915" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r528" x="939.4" y="849.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-34)">▀▀▀</text><text class="terminal-1706147923-r528" x="976" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r529" x="1000.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r529" x="1012.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r530" x="1024.8" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r530" x="1049.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r531" x="1061.4" y="849.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-34)">▀▀▀▀</text><text class="terminal-1706147923-r531" x="1110.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r532" x="1122.4" y="849.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-34)">▀▀▀▀</text><text class="terminal-1706147923-r533" x="1171.2" y="849.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-34)">▀▀</text><text class="terminal-1706147923-r533" x="1195.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r534" x="1207.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">▀</text><text class="terminal-1706147923-r24" x="1220" y="849.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-34)">
-</text><text class="terminal-1706147923-r553" x="0" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r553" x="36.6" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r554" x="48.8" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r554" x="85.4" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r554" x="97.6" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r555" x="109.8" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r556" x="134.2" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r556" x="158.6" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r557" x="170.8" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r557" x="195.2" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r558" x="219.6" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r559" x="244" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r559" x="268.4" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r559" x="292.8" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r560" x="305" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r560" x="329.4" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r561" x="366" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r561" x="390.4" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r562" x="402.6" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r563" x="427" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r563" x="451.4" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r563" x="475.8" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r564" x="488" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r565" x="500.2" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r565" x="524.6" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r566" x="561.2" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r567" x="573.4" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r567" x="585.6" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r568" x="622.2" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r568" x="646.6" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r569" x="658.8" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r538" x="683.2" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r538" x="707.6" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r538" x="744.2" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r539" x="756.4" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r539" x="780.8" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r540" x="817.4" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r540" x="829.6" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r540" x="841.8" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r541" x="854" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r542" x="878.4" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r542" x="902.8" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r542" x="915" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r570" x="939.4" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r543" x="951.6" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r543" x="963.8" y="874" textLength="48.8" clip-path="url(#terminal-1706147923-line-35)">▀▀▀▀</text><text class="terminal-1706147923-r544" x="1012.6" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r544" x="1037" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">▀</text><text class="terminal-1706147923-r545" x="1049.2" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r546" x="1073.6" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r546" x="1098" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r547" x="1134.6" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r548" x="1159" y="874" textLength="36.6" clip-path="url(#terminal-1706147923-line-35)">▀▀▀</text><text class="terminal-1706147923-r549" x="1195.6" y="874" textLength="24.4" clip-path="url(#terminal-1706147923-line-35)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="874" textLength="12.2" clip-path="url(#terminal-1706147923-line-35)">
-</text><text class="terminal-1706147923-r571" x="0" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r571" x="24.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r572" x="36.6" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r572" x="61" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r573" x="85.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r573" x="109.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r573" x="122" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r574" x="134.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r575" x="146.4" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r575" x="183" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r575" x="195.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r576" x="207.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r577" x="231.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r577" x="244" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r578" x="268.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r578" x="292.8" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r578" x="317.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r579" x="329.4" y="898.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-36)">▀▀▀▀</text><text class="terminal-1706147923-r580" x="378.2" y="898.4" textLength="61" clip-path="url(#terminal-1706147923-line-36)">▀▀▀▀▀</text><text class="terminal-1706147923-r581" x="439.2" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r581" x="475.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r581" x="488" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r582" x="500.2" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r583" x="536.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r583" x="549" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r584" x="561.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r584" x="573.4" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r584" x="610" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r585" x="622.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r586" x="634.4" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r586" x="671" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r553" x="683.2" y="898.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-36)">▀▀▀▀</text><text class="terminal-1706147923-r554" x="732" y="898.4" textLength="48.8" clip-path="url(#terminal-1706147923-line-36)">▀▀▀▀</text><text class="terminal-1706147923-r554" x="780.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r554" x="793" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r555" x="805.2" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r556" x="829.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r556" x="841.8" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r557" x="866.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r557" x="878.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r557" x="902.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r558" x="915" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r559" x="927.2" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r559" x="963.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r559" x="976" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r587" x="988.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r560" x="1000.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r560" x="1024.8" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r561" x="1061.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r562" x="1085.8" y="898.4" textLength="36.6" clip-path="url(#terminal-1706147923-line-36)">▀▀▀</text><text class="terminal-1706147923-r563" x="1122.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r563" x="1146.8" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r564" x="1171.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r565" x="1183.4" y="898.4" textLength="24.4" clip-path="url(#terminal-1706147923-line-36)">▀▀</text><text class="terminal-1706147923-r565" x="1207.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">▀</text><text class="terminal-1706147923-r24" x="1220" y="898.4" textLength="12.2" clip-path="url(#terminal-1706147923-line-36)">
-</text><text class="terminal-1706147923-r588" x="0" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r589" x="12.2" y="922.8" textLength="61" clip-path="url(#terminal-1706147923-line-37)">▀▀▀▀▀</text><text class="terminal-1706147923-r589" x="73.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r590" x="85.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r590" x="97.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r591" x="109.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r591" x="122" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r592" x="146.4" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r592" x="183" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r593" x="195.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r594" x="207.4" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r594" x="244" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r595" x="268.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r596" x="280.6" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r596" x="305" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r597" x="341.6" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r598" x="366" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r599" x="402.6" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r599" x="427" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r600" x="451.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r601" x="463.6" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r601" x="488" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r602" x="524.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r602" x="536.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r603" x="549" y="922.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-37)">▀▀▀▀</text><text class="terminal-1706147923-r604" x="597.8" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r604" x="622.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r605" x="634.4" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r571" x="658.8" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r571" x="683.2" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r572" x="719.8" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r572" x="744.2" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r573" x="780.8" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r573" x="805.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r574" x="817.4" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r575" x="841.8" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r575" x="878.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r575" x="890.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r576" x="902.8" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r577" x="927.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r577" x="939.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r578" x="951.6" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r578" x="976" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r578" x="1000.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r606" x="1012.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r579" x="1024.8" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r579" x="1061.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r580" x="1073.6" y="922.8" textLength="48.8" clip-path="url(#terminal-1706147923-line-37)">▀▀▀▀</text><text class="terminal-1706147923-r607" x="1122.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r581" x="1134.6" y="922.8" textLength="36.6" clip-path="url(#terminal-1706147923-line-37)">▀▀▀</text><text class="terminal-1706147923-r581" x="1171.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r581" x="1183.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">▀</text><text class="terminal-1706147923-r582" x="1195.6" y="922.8" textLength="24.4" clip-path="url(#terminal-1706147923-line-37)">▀▀</text><text class="terminal-1706147923-r24" x="1220" y="922.8" textLength="12.2" clip-path="url(#terminal-1706147923-line-37)">
-</text><text class="terminal-1706147923-r608" x="0" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r608" x="24.4" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r608" x="48.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r609" x="61" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r610" x="85.4" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r610" x="109.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r611" x="122" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r611" x="146.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r611" x="158.6" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r612" x="183" y="947.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-38)">▀▀▀</text><text class="terminal-1706147923-r612" x="219.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r613" x="231.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r613" x="244" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r614" x="268.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r614" x="280.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r615" x="292.8" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r615" x="341.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r616" x="353.8" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r616" x="402.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r617" x="414.8" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r618" x="439.2" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r618" x="463.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r619" x="475.8" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r619" x="524.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r620" x="536.8" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r621" x="585.6" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r621" x="610" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r622" x="622.2" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r588" x="646.6" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r588" x="695.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r589" x="707.6" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r589" x="756.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r590" x="768.6" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r591" x="793" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r591" x="817.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r592" x="829.6" y="947.2" textLength="48.8" clip-path="url(#terminal-1706147923-line-38)">▀▀▀▀</text><text class="terminal-1706147923-r593" x="878.4" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r594" x="902.8" y="947.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-38)">▀▀▀</text><text class="terminal-1706147923-r594" x="939.4" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r595" x="963.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r596" x="976" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r596" x="988.2" y="947.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-38)">▀▀▀</text><text class="terminal-1706147923-r597" x="1024.8" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r597" x="1049.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r598" x="1061.4" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r599" x="1085.8" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r599" x="1110.2" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r599" x="1134.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r600" x="1146.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">▀</text><text class="terminal-1706147923-r601" x="1159" y="947.2" textLength="24.4" clip-path="url(#terminal-1706147923-line-38)">▀▀</text><text class="terminal-1706147923-r601" x="1183.4" y="947.2" textLength="36.6" clip-path="url(#terminal-1706147923-line-38)">▀▀▀</text><text class="terminal-1706147923-r24" x="1220" y="947.2" textLength="12.2" clip-path="url(#terminal-1706147923-line-38)">
-</text><text class="terminal-1706147923-r623" x="0" y="971.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-39)">▀▀▀▀</text><text class="terminal-1706147923-r624" x="48.8" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r624" x="73.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r625" x="85.4" y="971.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-39)">▀▀▀</text><text class="terminal-1706147923-r626" x="122" y="971.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-39)">▀▀▀</text><text class="terminal-1706147923-r626" x="158.6" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r627" x="183" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r628" x="195.2" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r629" x="219.6" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r630" x="244" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r630" x="268.4" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r631" x="292.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r632" x="305" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r632" x="329.4" y="971.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-39)">▀▀▀▀</text><text class="terminal-1706147923-r633" x="378.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r634" x="390.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r634" x="402.6" y="971.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-39)">▀▀▀</text><text class="terminal-1706147923-r635" x="439.2" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r636" x="463.6" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r637" x="488" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r638" x="500.2" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r638" x="524.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r638" x="536.8" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r639" x="561.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r639" x="573.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r639" x="585.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r640" x="597.8" y="971.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-39)">▀▀▀</text><text class="terminal-1706147923-r641" x="634.4" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r641" x="658.8" y="971.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-39)">▀▀▀</text><text class="terminal-1706147923-r608" x="695.4" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r608" x="719.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r608" x="732" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r609" x="756.4" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r610" x="780.8" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r611" x="805.2" y="971.6" textLength="36.6" clip-path="url(#terminal-1706147923-line-39)">▀▀▀</text><text class="terminal-1706147923-r611" x="841.8" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r612" x="866.2" y="971.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-39)">▀▀▀▀</text><text class="terminal-1706147923-r612" x="915" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r613" x="927.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r613" x="939.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r614" x="951.6" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r614" x="976" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r615" x="988.2" y="971.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-39)">▀▀▀▀</text><text class="terminal-1706147923-r615" x="1037" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r616" x="1049.2" y="971.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-39)">▀▀▀▀</text><text class="terminal-1706147923-r617" x="1098" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r617" x="1122.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text><text class="terminal-1706147923-r618" x="1134.6" y="971.6" textLength="24.4" clip-path="url(#terminal-1706147923-line-39)">▀▀</text><text class="terminal-1706147923-r619" x="1159" y="971.6" textLength="48.8" clip-path="url(#terminal-1706147923-line-39)">▀▀▀▀</text><text class="terminal-1706147923-r619" x="1207.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1706147923-line-39)">▀</text>
+    <g transform="translate(9, 41)" clip-path="url(#terminal-1811200677-clip-terminal)">
+    <rect fill="#663399" x="0" y="1.5" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#643499" x="109.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#62369a" x="122" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60379c" x="134.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5f399d" x="146.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5d3b9e" x="158.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5b3c9f" x="170.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#593ea0" x="183" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5740a1" x="195.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5641a2" x="207.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5443a3" x="219.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5245a5" x="231.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5146a6" x="244" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4f48a7" x="256.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4d4aa8" x="268.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4c4ba9" x="280.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4a4daa" x="292.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#484fab" x="305" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4651ac" x="317.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4453ad" x="329.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4354ae" x="341.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4156b0" x="353.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3f58b1" x="366" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3e59b2" x="378.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3c5bb3" x="390.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3a5db5" x="402.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#395eb6" x="414.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3760b7" x="427" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3562b8" x="439.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3364b9" x="451.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3166ba" x="463.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3067ba" x="475.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e69bb" x="488" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2c6bbc" x="500.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="512.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="524.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="536.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="549" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="561.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="573.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="585.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="597.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1d7ac1" x="610" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1b7cc1" x="622.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="634.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="646.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="658.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="671" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c4" x="683.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="695.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c6" x="707.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="719.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="732" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="744.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="756.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0791c9" x="768.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0592c9" x="780.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="793" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296ca" x="805.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="817.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="829.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="841.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="854" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="866.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="878.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="890.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="902.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="915" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="927.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="939.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="951.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="976" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="988.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="1000.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="1012.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="1024.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="1037" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="1049.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="1061.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="1073.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="1085.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="1098" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="1110.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="1122.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="1134.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="1146.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="1159" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="1171.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="1183.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="1195.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="1207.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#663399" x="0" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#653399" x="24.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#64349a" x="36.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#62369b" x="48.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60389c" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5e399d" x="73.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5c3b9e" x="85.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5b3d9f" x="97.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#593ea0" x="109.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5740a1" x="122" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5542a2" x="134.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5443a4" x="146.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5245a5" x="158.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5146a6" x="170.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4f48a7" x="183" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4d4aa8" x="195.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4b4ca9" x="207.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#494eaa" x="219.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#484fac" x="231.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4651ad" x="244" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4453ae" x="256.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4255af" x="268.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4156b0" x="280.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3f58b1" x="292.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d5ab2" x="305" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3c5bb4" x="317.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3a5db5" x="329.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#385fb6" x="341.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3760b7" x="353.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3562b8" x="366" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3364b9" x="378.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3166ba" x="390.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2f68bb" x="402.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2d6abc" x="414.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2c6bbc" x="427" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="439.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbd" x="451.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="463.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="475.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="488" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="500.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="512.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="524.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="536.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1b7cc1" x="549" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="561.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="573.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="585.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="597.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c5" x="610" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="622.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="634.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="646.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="658.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="671" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="683.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="695.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="707.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0394ca" x="719.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="732" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="744.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="756.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="768.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="780.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="793" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="805.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="817.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="829.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="841.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="854" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="866.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="878.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="890.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="902.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="915" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="927.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="939.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="951.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="976" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="988.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="1000.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="1012.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="1024.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="1037" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="1049.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="1061.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="1073.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="1085.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="1098" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="1110.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="1122.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="1134.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="1146.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="1159" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="1171.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="1183.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="1195.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="1207.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5e399d" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5c3b9e" x="12.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5a3d9f" x="24.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#593ea0" x="36.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5740a1" x="48.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5542a3" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5443a4" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5245a5" x="85.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5047a6" x="97.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4f48a7" x="109.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4d4aa9" x="122" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4b4caa" x="134.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#494eab" x="146.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4750ac" x="158.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4651ad" x="170.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4453ae" x="183" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4255af" x="195.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4057b0" x="207.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3f58b1" x="219.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d5ab3" x="231.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3b5cb4" x="244" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3a5db5" x="256.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#385fb6" x="268.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3661b7" x="280.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3463b8" x="292.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3364b9" x="305" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3166ba" x="317.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2f68bb" x="329.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2d6abc" x="341.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2b6cbd" x="353.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="366" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbd" x="378.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2671be" x="390.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="402.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="414.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="427" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="439.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="451.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="463.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="475.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="488" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="500.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="512.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="524.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="536.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="549" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="561.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc6" x="573.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="585.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="597.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0890c8" x="610" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="622.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="634.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="646.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="658.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="671" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="683.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="695.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="707.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="719.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="732" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="744.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="756.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="768.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="780.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="793" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="805.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="817.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="829.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="841.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="854" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="866.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="878.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="890.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="902.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="915" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="927.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="939.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="951.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="976" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="988.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="1000.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="1012.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="1024.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="1037" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="1049.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="1061.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="1073.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="1085.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="1098" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="1110.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="1122.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="1134.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="1146.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="1159" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="1171.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="1183.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="1195.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="1207.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5344a4" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5245a5" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5047a6" x="24.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4e49a8" x="36.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4c4ba9" x="48.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4b4caa" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#494eab" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4750ac" x="85.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4552ad" x="97.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4354ae" x="109.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4255af" x="122" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4057b0" x="134.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3e59b2" x="146.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d5ab3" x="158.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3b5cb4" x="170.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#395eb5" x="183" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#385fb6" x="195.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3661b7" x="207.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3463b8" x="219.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3265b9" x="231.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3067ba" x="244" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2f68bb" x="256.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2d6abc" x="268.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2b6cbd" x="280.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="292.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbe" x="305" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2671be" x="317.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473be" x="329.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="341.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="353.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="366" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="378.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="390.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="402.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="414.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="427" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="439.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="451.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="463.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c5" x="475.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="488" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="500.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="512.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="524.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="536.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="549" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0493ca" x="561.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="573.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0196cb" x="585.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="597.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="610" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="622.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="634.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="646.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="658.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="671" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="683.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="695.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="707.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="719.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="732" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="744.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="756.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="768.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="780.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="793" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="805.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="817.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="829.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="841.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="854" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="866.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="878.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="890.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="902.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="915" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="927.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="939.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="951.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="976" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="988.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="1000.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="1012.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="1024.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="1037" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="1049.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="1061.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="1073.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="1085.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="1098" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="1110.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="1122.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="1134.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="1146.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="1159" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="1171.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="1183.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="1195.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="1207.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#484fab" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4750ac" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4552ad" x="24.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4354ae" x="36.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4156af" x="48.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4057b1" x="61" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3e59b2" x="73.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3c5bb3" x="85.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3b5cb4" x="97.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#395eb5" x="109.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3760b7" x="122" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3661b7" x="134.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3463b8" x="146.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3265b9" x="158.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3067ba" x="170.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e69bb" x="183" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2d6abc" x="195.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2b6cbd" x="207.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="219.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="231.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2671be" x="244" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="256.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="268.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="280.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="292.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1d7ac1" x="305" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1b7cc1" x="317.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="329.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="341.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="353.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="366" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="378.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="390.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c5" x="402.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="414.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="427" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="439.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="451.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="463.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0692c9" x="475.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0493ca" x="488" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="500.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="512.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="524.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="536.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="549" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="561.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="573.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="585.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="597.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="610" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="622.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="634.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="646.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="658.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="671" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="683.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="695.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="707.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="719.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="732" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="744.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="756.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="768.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="780.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="793" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="805.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="817.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="829.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="841.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="854" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b9cb" x="866.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="878.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="890.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="902.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="915" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="927.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="939.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="951.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="976" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="988.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="1000.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="1012.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="1024.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="1037" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="1049.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="1061.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="1073.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="1085.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="1098" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="1110.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="1122.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="1134.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="1146.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="1159" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="1171.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bd" x="1183.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="1195.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="1207.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3e59b2" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3c5bb3" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3a5db4" x="24.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#395eb6" x="36.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3760b7" x="48.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3562b8" x="61" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3364b9" x="73.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3265b9" x="85.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3067ba" x="97.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e69bb" x="109.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2c6bbc" x="122" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="134.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="146.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="158.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="170.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="183" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="195.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2176bf" x="207.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f78c0" x="219.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1d7ac1" x="231.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1b7cc1" x="244" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="256.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="268.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="280.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="292.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c4" x="305" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="317.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c6" x="329.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="341.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="353.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="366" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="378.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c9" x="390.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0592c9" x="402.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="414.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0295ca" x="427" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="439.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="451.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="463.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="475.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="488" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="500.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="512.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="524.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="536.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="549" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="561.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="573.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="585.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="597.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="610" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="622.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="634.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="646.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="658.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="671" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="683.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="695.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="707.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="719.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="732" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="744.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="756.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="768.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="780.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b9cb" x="793" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="805.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="817.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="829.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="841.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="854" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="866.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="878.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="890.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="902.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="915" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="927.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="939.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="951.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="976" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="988.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="1000.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="1012.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="1024.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="1037" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="1049.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="1061.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="1073.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="1085.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="1098" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="1110.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="1122.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="1134.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="1146.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="1159" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="1171.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="1183.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="1195.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="1207.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3364b9" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3166ba" x="12.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2f68bb" x="24.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e69bb" x="36.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2c6bbc" x="48.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2a6dbd" x="61" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#296ebd" x="73.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="85.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="97.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2473bf" x="109.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="122" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="134.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="146.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1d7ac1" x="158.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1b7cc1" x="170.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="183" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="195.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="207.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1483c4" x="219.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c4" x="231.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="244" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c6" x="256.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="268.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="280.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="292.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="305" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0791c9" x="317.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0592c9" x="329.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="341.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296ca" x="353.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="366" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="378.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="390.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="402.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="414.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="427" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="439.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="451.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="463.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="475.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="488" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="500.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="512.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="524.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="536.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="549" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="561.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="573.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="585.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="597.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="610" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="622.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="634.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="646.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="658.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="671" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="683.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="695.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="707.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="719.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="732" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="744.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="756.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="768.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="780.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="793" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="805.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="817.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="829.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="841.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="854" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="866.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="878.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="890.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="902.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="915" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="927.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="939.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="951.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="963.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="976" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="988.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="1000.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="1012.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="1024.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="1037" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="1049.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="1061.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="1073.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="1085.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="1098" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb6" x="1110.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb5" x="1122.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="1134.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="1146.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="1159" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="1171.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="1183.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0ab" x="1195.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="1207.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#286fbd" x="0" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2770be" x="12.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2572be" x="24.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2374bf" x="36.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2275bf" x="48.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2077c0" x="61" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="73.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="85.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="97.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#197ec2" x="109.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1780c3" x="122" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="134.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="146.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1285c5" x="158.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="170.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="183" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0d8ac6" x="195.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="207.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="219.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#088fc8" x="231.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="244" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="256.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0394ca" x="268.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="280.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="292.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="305" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="317.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="329.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="341.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="353.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="366" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="378.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="390.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="402.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="414.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="427" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="439.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="451.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="463.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="475.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="488" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="500.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="512.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="524.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="536.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="549" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="561.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="573.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="585.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="597.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="610" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="622.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="634.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="646.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="658.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="671" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="683.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="695.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="707.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="719.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="732" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="744.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="756.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="768.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="780.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="793" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="805.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="817.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="829.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="841.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="854" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="866.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="878.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="890.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="902.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="915" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="927.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="939.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="951.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="963.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="976" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="988.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="1000.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="1012.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="1024.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="1037" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="1049.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="1061.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="1073.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceaf" x="1085.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfae" x="1098" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="1110.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="1122.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="1134.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="1146.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="1159" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="1171.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="1183.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a0" x="1195.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="1207.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e79c0" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1c7bc1" x="12.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1a7dc2" x="24.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#187fc2" x="36.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1681c3" x="48.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1582c3" x="61" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="73.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="85.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1087c5" x="97.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="109.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc6" x="122" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0b8cc7" x="134.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="146.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0890c8" x="158.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0691c9" x="170.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0593c9" x="183" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="195.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0296cb" x="207.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="219.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="231.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="244" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="256.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="268.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="280.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="292.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="305" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="317.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="329.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="341.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="353.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="366" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="378.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="390.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="402.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="414.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="427" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="439.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="451.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="463.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="475.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="488" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="500.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="512.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="524.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="536.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="549" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="561.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="573.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="585.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="597.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="610" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="622.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="634.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="646.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="658.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="671" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="683.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="695.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="707.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="719.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="732" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="744.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="756.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="768.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="780.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="793" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="805.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="817.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="829.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="841.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="854" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="866.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="878.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="890.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="902.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="915" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="927.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="939.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="951.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="963.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="976" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="988.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="1000.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="1012.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="1024.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="1037" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="1049.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="1061.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="1073.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="1085.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="1098" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="1110.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a0" x="1122.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="1134.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="1146.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="1159" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="1171.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d797" x="1183.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="1195.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd894" x="1207.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1384c4" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1186c5" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0f88c5" x="24.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0e89c6" x="36.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0c8bc7" x="48.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a8dc7" x="61" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098ec8" x="73.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="85.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0692c9" x="97.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0493ca" x="109.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="122" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="134.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0098cb" x="146.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="158.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="170.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="183" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="195.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="207.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="219.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="231.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="244" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="256.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="268.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="280.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="292.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="305" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="317.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="329.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="341.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="353.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="366" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="378.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="390.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="402.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="414.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="427" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="439.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="451.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="463.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="475.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b9cb" x="488" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="500.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="512.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="524.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="536.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="549" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="561.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="573.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="585.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="597.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="610" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="622.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="634.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="646.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="658.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="671" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="683.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="695.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="707.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="719.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="732" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="744.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="756.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="768.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="780.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="793" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bd" x="805.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="817.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="829.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="841.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="854" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="866.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="878.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="890.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="902.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="915" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb1" x="927.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="939.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="951.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="963.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="976" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="988.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="1000.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="1012.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a3" x="1024.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="1037" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d4a0" x="1049.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="1061.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="1073.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="1085.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="1098" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="1110.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="1122.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="1134.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd992" x="1146.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="1159" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98e" x="1171.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="1183.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="1195.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#42db89" x="1207.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#098fc8" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0790c8" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0692c9" x="24.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0494ca" x="36.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0395ca" x="48.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0197cb" x="61" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="73.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="85.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="97.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="109.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009dcc" x="122" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="134.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="146.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="158.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="170.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="183" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="195.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="207.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="219.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="231.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="244" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="256.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="268.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="280.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="292.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="305" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="317.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="329.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="341.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="353.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="366" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="378.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="390.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="402.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b9cb" x="414.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="427" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="439.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="451.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="463.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="475.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="488" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="500.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="512.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="524.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="536.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="549" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="561.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="573.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="585.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="597.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="610" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="622.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="634.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="646.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="658.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="671" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="683.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="695.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="707.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="719.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bd" x="732" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="744.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="756.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="768.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="780.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="793" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="805.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="817.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="829.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb2" x="841.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="854" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="866.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="878.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="890.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1aa" x="902.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="915" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a6" x="927.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a5" x="939.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="951.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="963.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="976" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="988.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="1000.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="1012.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="1024.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="1037" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="1049.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="1061.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="1073.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="1085.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="1098" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8c" x="1110.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="1122.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db89" x="1134.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="1146.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db85" x="1159" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="1171.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="1183.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc80" x="1195.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#51dd7e" x="1207.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0099cc" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009acc" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009bcc" x="24.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ccc" x="36.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009ecc" x="48.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#009fcc" x="61" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="73.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="85.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="97.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="109.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="122" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a5cc" x="134.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="146.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="158.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="170.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="183" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="195.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="207.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="219.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="231.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="244" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="256.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="268.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="280.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="292.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="305" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="317.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="329.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="341.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="353.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="366" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="378.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="390.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="402.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="414.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="427" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="439.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="451.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="463.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="475.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="488" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="500.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="512.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="524.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="536.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="549" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="561.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="573.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="585.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="597.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="610" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="622.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="634.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="646.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="658.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="671" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="683.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="695.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="707.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="719.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="732" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="744.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="756.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb2" x="768.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="780.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="793" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="805.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="817.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="829.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a8" x="841.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="854" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a4" x="866.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="878.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="890.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="902.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="915" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="927.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="939.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="951.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="963.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad894" x="976" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="988.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="1000.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd98f" x="1012.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="1024.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8c" x="1037" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#41db8a" x="1049.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db89" x="1061.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="1073.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="1085.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="1098" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ddc81" x="1110.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc80" x="1122.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#52dd7e" x="1134.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#55dd7c" x="1146.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#57dd7a" x="1159" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="1171.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="1183.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd75" x="1195.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#63dd74" x="1207.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a0cc" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a1cc" x="12.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a2cc" x="24.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a3cc" x="36.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a4cc" x="48.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a6cc" x="61" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="73.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="85.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="97.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="109.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="122" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00accc" x="134.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="146.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="158.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="170.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="183" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="195.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="207.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="219.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="231.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="244" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="256.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="268.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="280.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="292.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="305" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="317.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="329.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="341.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="353.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="366" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="378.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="390.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="402.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="414.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="427" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="439.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="451.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="463.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="475.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="488" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="500.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="512.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="524.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="536.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="549" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="561.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="573.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="585.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="597.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="610" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="622.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="634.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="646.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb6" x="658.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb5" x="671" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="683.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="695.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="707.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="719.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="732" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0ab" x="744.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="756.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="768.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="780.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="793" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="805.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="817.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="829.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="841.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="854" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="866.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="878.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="890.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad894" x="902.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd892" x="915" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd991" x="927.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="939.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="951.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8c" x="963.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#41db8a" x="976" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db88" x="988.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db86" x="1000.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="1012.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc83" x="1024.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ddc81" x="1037" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#50dc7f" x="1049.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#52dd7d" x="1061.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#55dd7c" x="1073.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#58dd7a" x="1085.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd78" x="1098" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5edd77" x="1110.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#61dd75" x="1122.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#63dd74" x="1134.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#66dd72" x="1146.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6add70" x="1159" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="1171.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="1183.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#73dd6a" x="1195.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#76dd69" x="1207.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a7cc" x="0" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a8cc" x="12.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00a9cc" x="24.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aacc" x="36.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00abcc" x="48.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00adcc" x="61" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="73.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="85.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b0cc" x="97.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="109.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="122" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="134.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="146.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="158.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="170.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="183" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9cb" x="195.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="207.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="219.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="231.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="244" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="256.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="268.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="280.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="292.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="305" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="317.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="329.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="341.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="353.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="366" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="378.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="390.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="402.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="414.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="427" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="439.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="451.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="463.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="475.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="488" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="500.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="512.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="524.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="536.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="549" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="561.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="573.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="585.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="597.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="610" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="622.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceaf" x="634.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfae" x="646.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="658.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="671" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="683.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="695.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="707.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="719.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="732" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a0" x="744.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="756.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="768.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="780.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="793" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d797" x="805.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="817.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd894" x="829.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd892" x="841.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="854" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="866.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="878.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="890.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#42db8a" x="902.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="915" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db86" x="927.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="939.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc82" x="951.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc81" x="963.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#50dc7f" x="976" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#53dd7d" x="988.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#56dd7c" x="1000.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd7a" x="1012.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd78" x="1024.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5edd77" x="1037" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#61dd75" x="1049.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#64dd73" x="1061.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#67dd71" x="1073.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6add70" x="1085.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="1098" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="1110.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#73dd6a" x="1122.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#76dd68" x="1134.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#79dd67" x="1146.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7cdd65" x="1159" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="1171.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd62" x="1183.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd60" x="1195.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5e" x="1207.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00aecc" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00afcc" x="12.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b1cc" x="24.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b2cc" x="36.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b3cc" x="48.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b4cc" x="61" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b5cc" x="73.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="85.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="97.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="109.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="122" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01baca" x="134.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="146.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bbc9" x="158.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="170.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="183" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="195.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="207.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="219.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="231.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="244" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="256.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="268.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="280.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="292.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="305" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="317.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="329.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="341.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="353.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="366" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="378.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="390.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="402.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="414.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="427" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="439.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="451.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="463.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="475.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="488" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="500.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="512.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="524.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="536.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="549" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="561.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="573.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="585.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="597.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="610" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="622.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="634.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a3" x="646.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="658.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d4a0" x="671" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="683.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="695.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="707.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="719.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="732" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="744.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="756.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd992" x="768.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="780.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98e" x="793" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="805.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="817.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#42db89" x="829.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="841.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db86" x="854" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="866.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="878.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc80" x="890.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#50dc7f" x="902.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#53dd7d" x="915" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#56dd7b" x="927.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd7a" x="939.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="951.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="963.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#62dd75" x="976" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#65dd73" x="988.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#68dd71" x="1000.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="1012.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="1024.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#71dd6c" x="1037" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#74dd6a" x="1049.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#77dd68" x="1061.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7add66" x="1073.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7cdd65" x="1085.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="1098" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd61" x="1110.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd60" x="1122.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88dd5e" x="1134.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8bdd5c" x="1146.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8edd5a" x="1159" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd58" x="1171.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="1183.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="1195.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="1207.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b6cc" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b7cc" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b8cb" x="24.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#00b9cb" x="36.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#01b9ca" x="48.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02baca" x="61" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbca" x="73.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="85.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="97.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#04bdc8" x="109.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="122" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="134.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="146.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="158.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="170.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="183" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="195.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="207.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="219.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="231.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="244" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="256.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="268.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="280.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="292.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="305" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="317.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="329.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="341.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bd" x="353.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="366" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="378.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="390.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="402.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="414.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="427" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="439.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="451.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="463.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="475.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="488" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="500.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="512.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="524.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="536.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a6" x="549" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="561.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a3" x="573.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="585.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d4a0" x="597.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="610" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="622.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="634.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="646.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="658.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="671" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="683.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd992" x="695.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="707.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98e" x="719.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="732" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="744.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#42db89" x="756.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="768.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db85" x="780.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc84" x="793" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="805.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc80" x="817.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#51dd7e" x="829.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7d" x="841.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#57dd7b" x="854" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="866.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="878.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="890.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#62dd74" x="902.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#65dd73" x="915" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#68dd71" x="927.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="939.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="951.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#71dd6b" x="963.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#74dd6a" x="976" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#77dd68" x="988.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7add66" x="1000.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7ddd64" x="1012.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="1024.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="1037" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="1049.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88dd5e" x="1061.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8bdd5c" x="1073.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8edd5a" x="1085.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd58" x="1098" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd56" x="1110.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="1122.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="1134.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9cdd4f" x="1146.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9fdd4d" x="1159" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="1171.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="1183.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="1195.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="1207.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#02bbc9" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#03bcc9" x="24.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#05bdc8" x="36.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#06bec7" x="48.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#07bec7" x="61" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="73.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#09bfc6" x="85.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="97.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="109.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="122" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ec2c3" x="134.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="146.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="158.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="170.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="183" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="195.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="207.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c6bf" x="219.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="231.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c7be" x="244" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="256.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="268.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bd" x="280.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bc" x="292.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="305" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="317.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="329.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="341.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="353.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="366" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb3" x="378.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb2" x="390.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="402.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="414.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="427" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="439.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1a9" x="451.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="463.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="475.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a5" x="488" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="500.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="512.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="524.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="536.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="549" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="561.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="573.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="585.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="597.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="610" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="622.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="634.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="646.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8c" x="658.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="671" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db89" x="683.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="695.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="707.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="719.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="732" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc80" x="744.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#51dd7e" x="756.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7c" x="768.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#57dd7b" x="780.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="793" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="805.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd76" x="817.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#63dd74" x="829.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#66dd72" x="841.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#69dd70" x="854" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6f" x="866.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6d" x="878.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#72dd6b" x="890.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#75dd69" x="902.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#78dd67" x="915" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd66" x="927.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7ddd64" x="939.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd62" x="951.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="963.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="976" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#89dd5d" x="988.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5c" x="1000.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="1012.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="1024.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd55" x="1037" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="1049.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="1061.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="1073.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="1085.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="1098" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="1110.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="1122.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="1134.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aedd3e" x="1146.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b1dd3b" x="1159" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="1171.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="1183.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="1195.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="1207.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#08bfc6" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0ac0c5" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0bc0c5" x="24.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0cc1c4" x="36.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0dc1c4" x="48.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0fc2c3" x="61" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="73.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="85.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="97.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#13c4c1" x="109.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="122" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="134.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="146.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="158.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="170.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="183" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="195.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="207.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="219.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="231.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20caba" x="244" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="256.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="268.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb6" x="280.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb5" x="292.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="305" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="317.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="329.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="341.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="353.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="416.3" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd65" x="854" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="866.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="878.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#84dd60" x="890.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5f" x="902.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#89dd5d" x="915" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5b" x="927.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="939.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="951.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="963.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="976" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd51" x="988.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="1000.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="1012.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="1024.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="1037" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="1049.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="1061.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="1073.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="1085.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="1098" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="1110.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="1122.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="1134.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="1146.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="1159" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="1171.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="1183.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="1195.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="1207.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#10c3c2" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#11c3c2" x="12.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#12c4c1" x="24.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14c5c0" x="36.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#15c5c0" x="48.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#16c5c0" x="61" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="73.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="85.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="97.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="109.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="122" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="134.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1dc9bb" x="146.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="158.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="170.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb9" x="183" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="195.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb6" x="207.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb5" x="219.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="231.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="244" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="256.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfae" x="268.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="280.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0ab" x="292.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="305" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a7" x="317.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="329.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="341.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="353.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="440.7" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5b" x="854" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90dd59" x="866.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd57" x="878.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd54" x="890.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd52" x="902.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd50" x="915" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="927.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="939.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="951.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="963.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="976" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="988.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="1000.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="1012.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="1024.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="1037" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="1049.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="1061.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="1073.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="1085.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="1098" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="1110.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="1122.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="1134.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="1146.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="1159" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="1171.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="1183.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="1195.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="1207.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#17c6bf" x="0" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#18c6bf" x="12.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#19c7be" x="24.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ac7be" x="36.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1bc8bd" x="48.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1cc8bc" x="61" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="73.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="85.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="97.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="109.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#22cbb8" x="122" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="134.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="146.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb3" x="158.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb1" x="170.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="183" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfae" x="195.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="207.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="219.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a9" x="231.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="244" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="256.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a4" x="268.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="280.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a0" x="292.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="305" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59d" x="317.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="329.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="341.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d797" x="353.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="414.8" y="465.1" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="768.6" y="465.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#9fdd4d" x="854" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="866.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="878.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="890.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="902.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="915" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="927.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="939.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="951.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="963.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="976" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="988.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="1000.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="1012.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="1024.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="1037" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="1049.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="1061.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="1073.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="1085.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="1098" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="1110.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="1122.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="1134.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="1146.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="1159" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="1171.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="1183.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="1195.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="1207.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1ec9bb" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1fcaba" x="12.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#20cab9" x="24.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#21cbb8" x="36.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23ccb7" x="48.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24ccb6" x="61" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="73.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#26cdb2" x="85.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb1" x="97.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="109.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="122" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ac" x="134.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd0aa" x="146.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="158.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a7" x="170.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="183" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d3a3" x="195.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a2" x="207.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d4a0" x="219.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="231.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="244" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="256.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="268.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d797" x="280.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="292.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="305" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd992" x="317.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="329.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98e" x="341.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="353.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="489.5" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="854" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="866.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="878.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="890.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="902.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="915" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="927.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="939.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="951.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="963.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="976" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="988.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="1000.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="1012.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="1024.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="1037" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="1049.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="1061.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="1073.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="1085.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="1098" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="1110.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="1122.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd707" x="1134.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="1146.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd309" x="1159" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10b" x="1171.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="1183.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="1195.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="1207.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#25cdb4" x="0" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#27ceb2" x="12.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#28ceb0" x="24.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#29cfaf" x="36.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2acfad" x="48.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2bd0ab" x="61" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1aa" x="73.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2dd1a8" x="85.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed2a6" x="97.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a5" x="109.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="122" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="134.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d4a0" x="146.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59e" x="158.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="170.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69a" x="183" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="195.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="207.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad895" x="219.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="231.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="244" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd990" x="256.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="268.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8c" x="280.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8b" x="292.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#42db89" x="305" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="317.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db85" x="329.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc84" x="341.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4cdc82" x="353.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="513.9" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="854" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="866.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="878.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="890.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="902.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="915" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="927.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="939.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="951.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="963.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="976" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="988.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="1000.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="1012.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="1024.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="1037" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd805" x="1049.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="1061.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="1073.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="1085.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="1098" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="1110.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="1122.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="1134.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="1146.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="1159" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="1171.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="1183.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="1195.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="1207.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2cd1a9" x="0" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2ed1a8" x="12.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2fd2a6" x="24.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#30d2a4" x="36.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#31d3a3" x="48.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#32d4a1" x="61" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="73.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="85.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#35d59c" x="97.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d69a" x="109.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="122" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="134.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad894" x="146.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="158.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="170.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd98f" x="183" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3eda8e" x="195.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8c" x="207.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#41db8a" x="219.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db89" x="231.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#45db87" x="244" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="256.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4adc83" x="268.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ddc81" x="280.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc80" x="292.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#52dd7e" x="305" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7c" x="317.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#57dd7b" x="329.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5add79" x="341.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5ddd77" x="353.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd76" x="366" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#63dd74" x="378.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#66dd72" x="390.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#69dd70" x="402.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6f" x="414.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6d" x="427" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#72dd6b" x="439.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#75dd69" x="451.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#78dd67" x="463.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd66" x="475.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="488" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd62" x="500.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="512.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="524.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#89dd5d" x="536.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5b" x="549" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="561.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="573.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="585.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="597.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="610" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="622.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="634.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="646.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="658.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="671" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="683.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aedd3e" x="695.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b1dd3b" x="707.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="719.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="732" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="744.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="756.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="768.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="780.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="793" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="805.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="817.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="829.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="841.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="854" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="866.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="878.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="890.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="902.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="915" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="927.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="939.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="951.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="963.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="976" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="988.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="1000.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="1012.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="1024.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="1037" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="1049.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="1061.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="1073.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="1085.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="1098" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="1110.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="1122.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="1134.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="1146.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="1159" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="1171.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="1183.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="1195.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="1207.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#33d49f" x="0" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#34d59d" x="12.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#36d69b" x="24.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#37d699" x="36.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#38d798" x="48.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#39d796" x="61" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ad894" x="73.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd893" x="85.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd991" x="97.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="109.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8e" x="122" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8c" x="134.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#41db8a" x="146.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#43db88" x="158.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db87" x="170.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#48db85" x="183" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc83" x="195.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ddc81" x="207.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4fdc7f" x="219.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#52dd7e" x="231.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#55dd7c" x="244" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#58dd7a" x="256.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd79" x="268.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5edd77" x="280.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#60dd75" x="292.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#63dd74" x="305" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#66dd72" x="317.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#69dd70" x="329.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6cdd6e" x="341.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6fdd6c" x="353.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#72dd6b" x="366" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#75dd69" x="378.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#78dd67" x="390.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd65" x="402.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="414.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="427" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#84dd60" x="439.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5f" x="451.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8add5d" x="463.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5b" x="475.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="488" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="500.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="512.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="524.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd50" x="536.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="549" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="561.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="573.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="585.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="597.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="610" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="622.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="634.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="646.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="658.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="671" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="683.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="695.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="707.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="719.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="732" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="744.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="756.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="768.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="780.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="793" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="805.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="817.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="829.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="841.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="854" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="866.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb03" x="878.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ead905" x="890.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="902.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="915" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd409" x="927.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="939.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="951.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="976" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="988.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="1000.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="1012.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="1024.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="1037" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="1049.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="1061.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="1073.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="1085.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="1098" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="1110.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="1122.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="1134.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="1146.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="1159" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="1171.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="1183.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="1195.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3b" x="1207.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3bd894" x="0" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3cd892" x="12.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3dd991" x="24.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3ed98f" x="36.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3fda8d" x="48.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#40da8c" x="61" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#41db8a" x="73.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="85.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#46db86" x="97.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="109.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc83" x="122" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ddc81" x="134.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#50dc7f" x="146.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#53dd7d" x="158.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#55dd7c" x="170.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#58dd7a" x="183" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5bdd78" x="195.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5edd77" x="207.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#61dd75" x="219.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#64dd73" x="231.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#67dd71" x="244" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6add70" x="256.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="268.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="280.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#73dd6a" x="292.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#76dd68" x="305" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#79dd67" x="317.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7cdd65" x="329.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="341.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="353.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#84dd60" x="366" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5e" x="378.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8add5d" x="390.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5b" x="402.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90dd59" x="414.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="427" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="439.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd52" x="451.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd50" x="463.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="475.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="488" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="500.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="512.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="524.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="536.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="549" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="561.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="573.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="585.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="597.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="610" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="622.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="634.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="646.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="658.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="671" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="683.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="695.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="707.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="719.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="732" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="744.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="756.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="768.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="780.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="793" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb03" x="805.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="817.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="829.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="841.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="854" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10a" x="866.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="878.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="890.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="902.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="915" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="927.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="939.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="951.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="963.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="976" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="988.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="1000.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="1012.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="1024.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="1037" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="1049.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="1061.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="1073.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="1085.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="1098" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="1110.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="1122.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="1134.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9d3e" x="1146.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="1159" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="1171.2" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="1183.4" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="1195.6" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9246" x="1207.8" y="587.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#42db8a" x="0" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#44db88" x="12.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#47db86" x="24.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#49dc84" x="36.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4bdc82" x="48.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4edc80" x="61" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#50dc7f" x="73.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#53dd7d" x="85.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#56dd7b" x="97.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd7a" x="109.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="122" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="134.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#61dd75" x="146.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#64dd73" x="158.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#67dd71" x="170.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6add6f" x="183" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6ddd6e" x="195.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#70dd6c" x="207.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#73dd6a" x="219.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#76dd68" x="231.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#79dd66" x="244" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7cdd65" x="256.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7fdd63" x="268.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd61" x="280.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd60" x="292.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88dd5e" x="305" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8bdd5c" x="317.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5a" x="329.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90dd58" x="341.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#93dd56" x="353.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#96dd54" x="366" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="378.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9cdd50" x="390.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9fdd4d" x="402.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="414.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="427" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="439.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="451.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="463.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="475.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="488" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="500.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="512.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="524.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="536.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="549" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="561.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="573.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="585.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="597.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="610" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="622.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="634.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="646.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="658.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="671" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="683.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="695.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="707.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="719.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="732" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="744.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="756.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="768.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="780.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10b" x="793" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="805.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="817.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="829.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="841.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="854" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="866.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="878.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="890.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="902.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="915" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="927.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="939.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="951.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="963.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="976" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="988.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="1000.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="1012.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="1024.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="1037" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="1049.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="1061.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="1073.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="1085.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9841" x="1098" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="1110.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="1122.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9246" x="1134.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89148" x="1146.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="1159" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="1171.2" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="1183.4" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="1195.6" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="1207.8" y="611.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#51dd7e" x="0" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#54dd7d" x="12.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#56dd7b" x="24.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#59dd79" x="36.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5cdd78" x="48.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#5fdd76" x="61" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#62dd74" x="73.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#65dd73" x="85.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#68dd71" x="97.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="109.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="122" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#71dd6b" x="134.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#74dd6a" x="146.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#77dd68" x="158.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7add66" x="170.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7ddd64" x="183" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="195.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#82dd61" x="207.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#85dd5f" x="219.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88dd5e" x="231.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8bdd5c" x="244" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8edd5a" x="256.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd58" x="268.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd56" x="280.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd54" x="292.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd51" x="305" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9cdd4f" x="317.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9fdd4d" x="329.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a2dd4a" x="341.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="353.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="366" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="378.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aedd3e" x="390.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="402.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="414.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="427" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="439.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="451.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="463.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="475.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="488" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="500.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="512.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="524.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="536.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="549" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="561.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="573.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="585.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="597.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="610" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="622.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="634.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="646.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="658.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd805" x="671" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="683.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="695.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd309" x="707.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10b" x="719.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="732" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="744.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="756.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="768.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="780.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="793" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="805.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="817.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="829.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="841.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="854" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="866.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="878.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="890.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="902.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="915" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="927.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="939.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="951.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="963.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="976" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="988.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="1000.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="1012.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="1024.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9644" x="1037" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="1049.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="1061.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="1073.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="1085.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="1098" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58b4b" x="1110.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e38a4d" x="1122.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="1134.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="1146.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="1159" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="1171.2" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8153" x="1183.4" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="1195.6" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="1207.8" y="635.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#62dd74" x="0" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#65dd72" x="12.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#68dd71" x="24.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6bdd6f" x="36.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#6edd6d" x="48.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#71dd6b" x="61" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#75dd69" x="73.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#78dd67" x="85.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7add66" x="97.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7ddd64" x="109.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#80dd63" x="122" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#83dd61" x="134.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="146.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#89dd5e" x="158.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5c" x="170.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8edd5a" x="183" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#91dd57" x="195.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#94dd55" x="207.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#97dd53" x="219.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="231.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="244" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="256.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="268.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a5dd47" x="280.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a8dd44" x="292.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#abdd41" x="305" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aedd3e" x="317.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b1dd3b" x="329.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="341.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="353.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="366" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="378.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="390.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="402.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="414.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="427" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="439.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="451.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="463.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="475.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="488" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="500.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="512.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="524.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="536.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="549" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="561.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="573.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="585.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="597.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="610" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="622.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="634.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="646.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="658.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="671" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="683.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="695.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="707.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="719.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="732" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="744.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="756.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="768.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="780.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="793" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="805.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="817.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="829.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="841.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="854" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="866.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="878.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="890.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="902.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3d" x="915" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3f" x="927.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="939.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9742" x="951.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="963.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="976" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="988.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="1000.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="1012.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58d4b" x="1024.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="1037" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="1049.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="1061.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="1073.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="1085.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="1098" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="1110.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="1122.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="1134.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="1146.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97957" x="1159" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77859" x="1171.2" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="1183.4" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="1195.6" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="1207.8" y="660.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#75dd69" x="0" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#78dd67" x="12.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7bdd66" x="24.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#7edd64" x="36.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#81dd62" x="48.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#84dd61" x="61" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#86dd5f" x="73.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#89dd5d" x="85.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8cdd5b" x="97.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="109.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="122" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="134.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd53" x="146.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9add51" x="158.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9ddd4f" x="170.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0dd4c" x="183" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3dd49" x="195.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="207.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="219.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="231.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="244" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b1dd3b" x="256.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b4dd38" x="268.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7dd35" x="280.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#badd32" x="292.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="305" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="317.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="329.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="341.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c8dd24" x="353.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cbdd21" x="366" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="378.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="390.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="402.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="414.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="427" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="439.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="451.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="463.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="475.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="488" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="500.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="512.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="524.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="536.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd409" x="549" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="561.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="573.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="585.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="597.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="610" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="622.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="634.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="646.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="658.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="671" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="683.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="695.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="707.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="719.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="732" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="744.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="756.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="768.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="780.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="793" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="805.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="817.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="829.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="841.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="854" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="866.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9742" x="878.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="890.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="902.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="915" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="927.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68e4a" x="939.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="951.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="963.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="976" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="988.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="1000.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="1012.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="1024.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="1037" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="1049.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="1061.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="1073.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="1085.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="1098" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="1110.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="1122.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="1134.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="1146.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="1159" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16d5f" x="1171.2" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6c61" x="1183.4" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="1195.6" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="1207.8" y="684.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#87dd5f" x="0" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8add5d" x="12.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8ddd5b" x="24.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8fdd59" x="36.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#92dd57" x="48.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#95dd55" x="61" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#98dd52" x="73.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd50" x="85.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="97.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="109.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="122" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a6dd46" x="134.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a9dd43" x="146.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#acdd40" x="158.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#afdd3d" x="170.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="183" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="195.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="207.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="219.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bddd2f" x="231.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0dd2c" x="244" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c3dd29" x="256.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="268.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="280.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="292.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="305" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="317.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4dd18" x="329.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d7dd15" x="341.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dadd12" x="353.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="366" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="378.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="390.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="402.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="414.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb03" x="427" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ead905" x="439.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="451.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd507" x="463.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="475.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10a" x="488" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="500.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="512.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="524.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="536.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="549" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="561.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="573.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="585.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="597.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="610" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="622.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="634.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="646.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="658.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="671" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="683.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="695.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="707.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="719.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="732" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="744.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="756.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="768.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="780.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="793" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9743" x="805.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9545" x="817.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="829.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="841.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="854" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68e4a" x="866.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="878.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="890.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="902.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1874f" x="915" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="927.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="939.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="951.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="963.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7e55" x="976" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="988.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="1000.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="1012.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="1024.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="1037" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="1049.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="1061.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3705d" x="1073.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="1085.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="1098" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="1110.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="1122.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="1134.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="1146.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6564" x="1159" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="1171.2" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="1183.4" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="1195.6" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="1207.8" y="709.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#99dd52" x="0" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9bdd50" x="12.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9edd4e" x="24.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a1dd4b" x="36.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a4dd48" x="48.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a7dd45" x="61" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="73.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="85.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="97.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b2dd3a" x="109.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5dd37" x="122" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8dd34" x="134.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bbdd31" x="146.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="158.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="170.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="183" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c6dd26" x="195.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c9dd23" x="207.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ccdd20" x="219.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cfdd1d" x="231.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="244" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="256.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="268.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="280.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dddd0f" x="292.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0dd0c" x="305" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3dd09" x="317.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e6dd06" x="329.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="341.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="353.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="366" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="378.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="390.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="402.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10a" x="414.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="427" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="439.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="451.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="463.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="475.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="488" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="500.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="512.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="524.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="536.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="549" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="561.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="573.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="585.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="597.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="610" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="622.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="634.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="646.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="658.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="671" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="683.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9d3e" x="695.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="707.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9841" x="719.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="732" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="744.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9246" x="756.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89148" x="768.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="780.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="793" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="805.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="817.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="829.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1874f" x="841.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="854" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="866.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="878.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="890.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7e55" x="902.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="915" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="927.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="939.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="951.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="963.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="976" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="988.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3705d" x="1000.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16f5f" x="1012.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="1024.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="1037" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="1049.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="1061.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="1073.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="1085.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="1098" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="1110.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="1122.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="1134.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="1146.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="1159" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="1171.2" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="1183.4" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0555f" x="1195.6" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="1207.8" y="733.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aadd42" x="0" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#addd3f" x="12.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b0dd3c" x="24.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b3dd39" x="36.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6dd36" x="48.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b9dd33" x="61" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="73.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bedd2e" x="85.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c1dd2b" x="97.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c4dd28" x="109.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="122" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="134.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="146.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="158.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2dd1a" x="170.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5dd17" x="183" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dd14" x="195.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dbdd11" x="207.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="219.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="231.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="244" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="256.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9dd03" x="268.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadb04" x="280.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd905" x="292.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd707" x="305" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd508" x="317.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="329.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10b" x="341.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="353.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="366" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="378.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="390.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="402.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="414.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="427" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="439.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="451.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="463.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="475.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="488" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="500.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="512.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="524.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="536.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="549" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="561.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="573.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="585.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="597.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="610" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="622.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="634.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="646.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="658.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="671" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="683.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="695.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="707.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="719.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58b4b" x="732" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e38a4d" x="744.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="756.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="768.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="780.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="793" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8153" x="805.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="817.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="829.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="841.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="854" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="866.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="878.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="890.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="902.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="915" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2705e" x="927.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="939.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="951.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="963.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="976" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6864" x="988.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="1000.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="1012.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="1024.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="1037" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="1049.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="1061.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="1073.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45961" x="1085.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25860" x="1098" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="1110.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="1122.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="1134.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="1146.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="1159" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4e5d" x="1171.2" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="1183.4" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="1195.6" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8485b" x="1207.8" y="757.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bcdd30" x="0" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bfdd2d" x="12.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c2dd2a" x="24.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c5dd27" x="36.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7dd25" x="48.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cadd22" x="61" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cddd1f" x="73.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d0dd1c" x="85.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="97.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="109.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="122" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="134.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dedd0e" x="146.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1dd0b" x="158.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e4dd08" x="170.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e7dd05" x="183" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="195.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="207.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd805" x="219.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd607" x="231.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="244" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd209" x="256.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="268.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="280.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="292.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="305" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="317.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="329.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="341.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="353.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="366" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="378.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="390.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="402.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="414.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="427" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="439.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="451.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="463.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="475.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="488" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="500.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="512.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="524.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="536.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="549" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="561.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="573.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9644" x="585.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="597.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="610" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="622.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="634.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="646.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="658.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e38a4d" x="671" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="683.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="695.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="707.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="719.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8153" x="732" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="744.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="756.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="768.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="780.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="793" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77659" x="805.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5755b" x="817.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="829.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="841.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2705e" x="854" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="866.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="878.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6b62" x="890.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="902.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="915" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="927.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="939.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="951.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="963.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75e62" x="976" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65c62" x="988.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="1000.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="1012.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="1024.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="1037" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="1049.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf525f" x="1061.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd515e" x="1073.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="1085.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="1098" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4b5c" x="1110.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="1122.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7485b" x="1134.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="1146.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="1159" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="1171.2" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="1183.4" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="1195.6" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13d58" x="1207.8" y="782.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cedd1e" x="0" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d1dd1b" x="12.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3dd19" x="24.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6dd16" x="36.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d9dd13" x="48.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dcdd10" x="61" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="73.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="85.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="97.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="109.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="122" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada04" x="134.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="146.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="158.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd408" x="170.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="183" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="195.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="207.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecc0f" x="219.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="231.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="244" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec516" x="256.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec318" x="268.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="280.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebe1d" x="292.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="305" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="317.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="329.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="341.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb229" x="353.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="366" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="378.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="390.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="402.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="414.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="427" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="439.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="451.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3d" x="463.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3f" x="475.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9940" x="488" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9742" x="500.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="512.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="524.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="536.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="549" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="561.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58d4b" x="573.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="585.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="597.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="610" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="622.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="634.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="646.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="658.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="671" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="683.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="695.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="707.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77859" x="719.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="732" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="744.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="756.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="768.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="780.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="793" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6c61" x="805.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="817.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="829.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="841.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="854" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6364" x="866.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="878.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="890.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75e62" x="902.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="915" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="927.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="939.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="951.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15560" x="963.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="976" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be525e" x="988.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="1000.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="1012.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="1024.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4b5c" x="1037" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="1049.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="1061.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="1073.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="1085.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="1098" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34059" x="1110.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="1122.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03d58" x="1134.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="1146.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3a57" x="1159" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="1171.2" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3757" x="1183.4" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3557" x="1195.6" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3457" x="1207.8" y="806.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dfdd0d" x="0" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2dd0a" x="12.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e5dd07" x="24.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e8dd04" x="36.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eadc03" x="48.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eada05" x="61" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd806" x="73.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd607" x="85.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd409" x="97.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd20a" x="109.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd00b" x="122" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eece0d" x="134.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="146.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="158.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec714" x="170.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="183" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="195.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec01b" x="207.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="219.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="231.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb922" x="244" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="256.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb427" x="268.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="280.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="292.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="305" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="317.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="329.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="341.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="353.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="366" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3b" x="378.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="390.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="402.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="414.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9743" x="427" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="439.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="451.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="463.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="475.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68e4a" x="488" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="500.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="512.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="524.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="536.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="549" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="561.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="573.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="585.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="597.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="610" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="622.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="634.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="646.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="658.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="671" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="683.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="695.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="707.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="719.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6c61" x="732" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="744.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="756.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="768.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="780.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6364" x="793" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="805.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="817.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65e62" x="829.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="841.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="854" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="866.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="878.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15560" x="890.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="902.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be525e" x="915" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="927.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4e5d" x="939.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="951.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94b5c" x="963.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="976" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="988.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6455a" x="1000.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="1012.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34259" x="1024.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24059" x="1037" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13f58" x="1049.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03d58" x="1061.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="1073.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3a57" x="1085.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="1098" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3657" x="1110.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3557" x="1122.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a93357" x="1134.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a83257" x="1146.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a73057" x="1159" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a62f57" x="1171.2" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a52e58" x="1183.4" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a32c5a" x="1195.6" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a22b5b" x="1207.8" y="831.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebd706" x="0" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd507" x="12.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ecd309" x="24.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#edd10a" x="36.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecf0c" x="48.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecd0e" x="61" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eecb10" x="73.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec912" x="85.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="97.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="109.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec219" x="122" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="134.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="146.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebb20" x="158.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="170.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb625" x="183" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="195.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="207.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaf2c" x="219.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="231.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="244" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="256.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea635" x="268.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="280.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="292.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="305" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9d3d" x="317.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="329.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="341.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9743" x="353.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="366" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="378.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="390.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="402.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68e4a" x="414.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="427" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="439.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="451.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1874f" x="463.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="475.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="488" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="500.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="512.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7e55" x="524.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="536.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="549" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="561.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="573.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="585.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="597.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="610" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3705d" x="622.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16f5f" x="634.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="646.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="658.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="671" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6863" x="683.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="695.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6564" x="707.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96364" x="719.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="732" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="744.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="756.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="768.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="780.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="793" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25660" x="805.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0555f" x="817.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="829.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="841.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="854" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4e5d" x="866.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="878.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="890.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="902.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="915" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5455a" x="927.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="939.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34259" x="951.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24059" x="963.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13e58" x="976" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03d58" x="988.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="1000.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3957" x="1012.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="1024.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3657" x="1037" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3557" x="1049.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a93357" x="1061.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a83257" x="1073.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a73057" x="1085.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a62f57" x="1098" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a42d59" x="1110.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a32c5a" x="1122.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a22b5b" x="1134.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a12a5c" x="1146.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0295d" x="1159" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9e275f" x="1171.2" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9d2660" x="1183.4" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9c2561" x="1195.6" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9b2462" x="1207.8" y="855.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeca11" x="0" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec813" x="12.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec615" x="24.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec417" x="36.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eec11a" x="48.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebf1c" x="61" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebd1e" x="73.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="85.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb823" x="97.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="109.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="122" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb12a" x="134.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="146.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="158.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeaa31" x="170.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea833" x="183" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="195.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="207.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda13a" x="219.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9f3c" x="231.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9d3e" x="244" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="256.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9841" x="268.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9643" x="280.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="292.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9246" x="305" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89148" x="317.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="329.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="341.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="353.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48a4c" x="366" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="378.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1874f" x="390.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08550" x="402.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="414.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8152" x="427" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="439.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="451.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="463.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="475.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="488" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77759" x="500.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="512.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="524.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4725c" x="536.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2705e" x="549" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="561.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06d60" x="573.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="585.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6962" x="597.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6864" x="610" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="622.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="634.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="646.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86163" x="658.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="671" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="683.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="695.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45961" x="707.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35861" x="719.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="732" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0555f" x="744.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="756.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="768.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="780.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4e5d" x="793" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="805.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="817.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8485b" x="829.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="841.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5455a" x="854" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="866.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="878.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b24058" x="890.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13e58" x="902.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03c58" x="915" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="927.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3957" x="939.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3757" x="951.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3657" x="963.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3457" x="976" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a93357" x="988.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a83157" x="1000.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a73057" x="1012.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a52e58" x="1024.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a42d59" x="1037" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a32c5a" x="1049.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a22b5b" x="1061.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a12a5c" x="1073.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9f285e" x="1085.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9e275f" x="1098" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9d2660" x="1110.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9c2561" x="1122.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9b2462" x="1134.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9a2363" x="1146.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#992264" x="1159" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#982165" x="1171.2" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#972066" x="1183.4" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#951e68" x="1195.6" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#941d69" x="1207.8" y="879.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eebc1f" x="0" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeba21" x="12.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb724" x="24.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb526" x="36.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb328" x="48.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeb02b" x="61" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeae2d" x="73.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeac2f" x="85.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="97.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="109.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea536" x="122" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea338" x="134.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03a" x="146.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3c" x="158.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="170.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="183" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="195.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9644" x="207.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9445" x="219.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="231.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="244" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78f49" x="256.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="268.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58b4b" x="280.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e38a4d" x="292.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="305" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="317.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="329.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8351" x="341.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8153" x="353.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="366" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="378.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="390.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97a57" x="402.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="414.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77659" x="427" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6755a" x="439.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5735b" x="451.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="463.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d2705e" x="475.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="488" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="500.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6b61" x="512.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="524.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="536.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6664" x="549" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="561.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="573.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="585.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75f63" x="597.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65d62" x="610" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="622.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45961" x="634.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25860" x="646.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="658.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="671" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf535f" x="683.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be515e" x="695.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="707.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="719.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4c5c" x="732" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94a5c" x="744.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7485b" x="756.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="768.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="780.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44359" x="793" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="805.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="817.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13e58" x="829.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03c57" x="841.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3a57" x="854" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3957" x="866.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3757" x="878.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3657" x="890.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3457" x="902.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a93357" x="915" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a83157" x="927.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a63057" x="939.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a52e58" x="951.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a42d59" x="963.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a32c5a" x="976" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a22b5b" x="988.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0295d" x="1000.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9f285e" x="1012.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9e275f" x="1024.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9d2660" x="1037" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9c2561" x="1049.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9b2462" x="1061.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9a2363" x="1073.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#992264" x="1085.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#982165" x="1098" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#961f67" x="1110.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#951e68" x="1122.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#941d69" x="1134.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#931c6a" x="1146.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#921b6b" x="1159" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90196d" x="1171.2" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8f186e" x="1183.4" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8e176f" x="1195.6" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8d1670" x="1207.8" y="904.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eead2e" x="0" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eeab30" x="12.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea932" x="24.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea734" x="36.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea437" x="48.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eea239" x="61" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="73.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3d" x="85.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9c3e" x="97.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9a40" x="109.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9842" x="122" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="134.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="146.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99247" x="158.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="170.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="183" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e68d4a" x="195.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="207.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="219.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2884e" x="231.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="244" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e08450" x="256.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="268.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="280.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7f54" x="292.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#db7d55" x="305" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7b56" x="317.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97957" x="329.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87858" x="341.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="353.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="366" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="378.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="390.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="402.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="414.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d06c60" x="427" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6b62" x="439.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="451.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="463.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="475.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6464" x="488" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="500.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="512.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c75e62" x="524.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65c62" x="536.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55b62" x="549" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="561.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="573.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15660" x="585.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="597.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bf525f" x="610" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd515e" x="622.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="634.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="646.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ba4b5c" x="658.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="671" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7485b" x="683.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="695.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="707.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="719.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34159" x="732" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b23f58" x="744.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13d58" x="756.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03c57" x="768.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3a57" x="780.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="793" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3757" x="805.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3557" x="817.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3457" x="829.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a93257" x="841.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a73157" x="854" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a62f57" x="866.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a52e58" x="878.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a42d59" x="890.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a32c5a" x="902.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a12a5c" x="915" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0295d" x="927.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9f285e" x="939.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9e275f" x="951.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9d2660" x="963.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9c2561" x="976" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9b2462" x="988.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#992264" x="1000.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#982165" x="1012.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#972066" x="1024.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#961f67" x="1037" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#951e68" x="1049.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#941d69" x="1061.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#931c6a" x="1073.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#911a6c" x="1085.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90196d" x="1098" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8f186e" x="1110.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8e176f" x="1122.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8d1670" x="1134.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8c1572" x="1146.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8b1473" x="1159" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8a1374" x="1171.2" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#891275" x="1183.4" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881176" x="1195.6" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881177" x="1207.8" y="928.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eda03b" x="0" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ed9e3d" x="12.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9b3f" x="24.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ec9941" x="36.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9742" x="48.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#eb9544" x="61" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ea9346" x="73.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e99147" x="85.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e89048" x="97.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e78e49" x="109.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e58c4b" x="122" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e48b4c" x="134.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e3894d" x="146.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e2874e" x="158.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e1864f" x="170.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#df8451" x="183" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#de8252" x="195.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dd8053" x="207.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dc7e54" x="219.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#da7c56" x="231.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d97b57" x="244" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d87958" x="256.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d77859" x="268.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d6765a" x="280.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d5745b" x="292.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d4735c" x="305" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d3715d" x="317.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d26f5e" x="329.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#d16e5f" x="341.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cf6c61" x="353.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ce6a62" x="366" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cd6963" x="378.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cc6764" x="390.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#cb6564" x="402.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ca6364" x="414.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c96263" x="427" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c86063" x="439.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c65e62" x="451.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c55c62" x="463.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c45a61" x="475.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c35961" x="488" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c25760" x="500.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c15560" x="512.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c0545f" x="524.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#be525e" x="536.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bd505e" x="549" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bc4f5d" x="561.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#bb4d5d" x="573.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b94b5c" x="585.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b8495b" x="597.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b7475b" x="610" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b6465a" x="622.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b5445a" x="634.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b44259" x="646.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b34059" x="658.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b13f58" x="671" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b03d58" x="683.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#af3b57" x="695.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ae3a57" x="707.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ad3857" x="719.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ac3757" x="732" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ab3557" x="744.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#aa3457" x="756.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a83257" x="768.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a73157" x="780.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a62f57" x="793" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a52e58" x="805.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a42d59" x="817.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a22b5b" x="829.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a12a5c" x="841.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a0295d" x="854" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9f285e" x="866.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9d2660" x="878.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9c2561" x="890.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9b2462" x="902.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#9a2363" x="915" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#992264" x="927.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#982165" x="939.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#972066" x="951.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#961f67" x="963.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#951e68" x="976" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#941d69" x="988.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#921b6b" x="1000.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#911a6c" x="1012.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#90196d" x="1024.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8f186e" x="1037" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8e176f" x="1049.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8d1671" x="1061.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8c1572" x="1073.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#8b1473" x="1085.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#891274" x="1098" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881175" x="1110.2" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881177" x="1122.4" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881177" x="1134.6" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881177" x="1146.8" y="953.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#881177" x="1159" y="953.1" width="61" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-1811200677-matrix">
+    <text class="terminal-1811200677-r1" x="0" y="20" textLength="109.8" clip-path="url(#terminal-1811200677-line-0)">▀▀▀▀▀▀▀▀▀</text><text class="terminal-1811200677-r1" x="109.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r1" x="122" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r1" x="134.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r2" x="146.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r3" x="158.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r4" x="170.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r5" x="183" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r6" x="195.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r7" x="207.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r8" x="219.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r9" x="231.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r10" x="244" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r11" x="256.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r12" x="268.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r13" x="280.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r14" x="292.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r15" x="305" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r16" x="317.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r17" x="329.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r18" x="341.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r19" x="353.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r20" x="366" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r21" x="378.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r22" x="390.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r23" x="402.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r24" x="414.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r25" x="427" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r26" x="439.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r27" x="451.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r28" x="463.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r29" x="475.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r30" x="488" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r31" x="500.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r32" x="512.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r33" x="524.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r34" x="536.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r35" x="549" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r36" x="561.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r37" x="573.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r38" x="585.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r39" x="597.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r40" x="610" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r41" x="622.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r42" x="634.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r43" x="646.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r44" x="658.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r45" x="671" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r46" x="683.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r47" x="695.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r48" x="707.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r49" x="719.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r50" x="732" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r51" x="744.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r52" x="756.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r53" x="768.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r54" x="780.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r55" x="793" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r56" x="805.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r57" x="817.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r58" x="829.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r59" x="841.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r60" x="854" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r61" x="866.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r62" x="878.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r63" x="890.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r64" x="902.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r65" x="915" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r66" x="927.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r67" x="939.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r68" x="951.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r69" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r70" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r71" x="988.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r72" x="1000.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r73" x="1012.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r74" x="1024.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r75" x="1037" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r76" x="1049.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r77" x="1061.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r78" x="1073.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r79" x="1085.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r80" x="1098" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r81" x="1110.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r82" x="1122.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r83" x="1134.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r84" x="1146.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r85" x="1159" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r86" x="1171.2" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r87" x="1183.4" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r88" x="1195.6" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r89" x="1207.8" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">▀</text><text class="terminal-1811200677-r90" x="1220" y="20" textLength="12.2" clip-path="url(#terminal-1811200677-line-0)">
+</text><text class="terminal-1811200677-r1" x="0" y="44.4" textLength="24.4" clip-path="url(#terminal-1811200677-line-1)">▀▀</text><text class="terminal-1811200677-r1" x="24.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r1" x="36.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r1" x="48.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r1" x="61" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r91" x="73.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r92" x="85.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r93" x="97.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r94" x="109.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r95" x="122" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r7" x="134.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r8" x="146.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r96" x="158.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r10" x="170.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r97" x="183" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r98" x="195.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r13" x="207.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r14" x="219.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r99" x="231.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r100" x="244" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r17" x="256.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r18" x="268.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r19" x="280.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r101" x="292.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r102" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r22" x="317.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r23" x="329.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r103" x="341.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r25" x="353.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r104" x="366" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r105" x="378.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r28" x="390.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r29" x="402.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r30" x="414.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r106" x="427" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r107" x="439.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r33" x="451.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r34" x="463.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r35" x="475.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r108" x="488" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r37" x="500.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r38" x="512.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r109" x="524.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r40" x="536.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r41" x="549" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r110" x="561.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r43" x="573.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r44" x="585.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r45" x="597.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r46" x="610" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r111" x="622.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r48" x="634.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r49" x="646.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r112" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r51" x="671" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r52" x="683.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r113" x="695.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r54" x="707.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r55" x="719.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r114" x="732" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r57" x="744.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r58" x="756.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r115" x="768.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r60" x="780.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r61" x="793" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r62" x="805.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r63" x="817.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r116" x="829.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r65" x="841.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r66" x="854" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r67" x="866.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r68" x="878.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r69" x="890.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r70" x="902.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r71" x="915" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r72" x="927.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r74" x="939.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r117" x="951.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r75" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r76" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r77" x="988.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r78" x="1000.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r118" x="1012.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r80" x="1024.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r81" x="1037" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r82" x="1049.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r83" x="1061.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r119" x="1073.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r85" x="1085.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r86" x="1098" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r87" x="1110.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r88" x="1122.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r89" x="1134.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r120" x="1146.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r121" x="1159" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r122" x="1171.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r123" x="1183.4" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r124" x="1195.6" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r125" x="1207.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">▀</text><text class="terminal-1811200677-r90" x="1220" y="44.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-1)">
+</text><text class="terminal-1811200677-r126" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r92" x="12.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r127" x="24.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r94" x="36.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r128" x="48.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r129" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r8" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r96" x="85.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r130" x="97.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r97" x="109.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r98" x="122" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r131" x="134.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r14" x="146.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r99" x="158.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r100" x="170.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r132" x="183" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r133" x="195.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r134" x="207.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r101" x="219.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r102" x="231.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r135" x="244" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r23" x="256.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r103" x="268.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r136" x="280.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r104" x="292.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r105" x="305" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r137" x="317.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r29" x="329.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r30" x="341.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r106" x="353.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r107" x="366" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r138" x="378.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r139" x="390.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r35" x="402.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r108" x="414.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r37" x="427" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r38" x="439.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r109" x="451.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r40" x="463.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r41" x="475.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r110" x="488" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r140" x="500.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r141" x="512.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r45" x="524.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r46" x="536.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r111" x="549" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r142" x="561.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r143" x="573.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r112" x="585.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r144" x="597.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r52" x="610" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r113" x="622.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r145" x="634.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r55" x="646.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r146" x="658.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r147" x="671" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r148" x="683.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r149" x="695.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r150" x="707.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r61" x="719.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r62" x="732" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r64" x="744.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r116" x="756.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r65" x="768.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r66" x="780.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r67" x="793" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r68" x="805.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r69" x="817.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r71" x="829.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r72" x="841.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r73" x="854" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r74" x="866.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r117" x="878.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r75" x="890.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r76" x="902.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r77" x="915" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r79" x="927.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r118" x="939.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r80" x="951.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r81" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r82" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r84" x="988.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r119" x="1000.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r85" x="1012.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r86" x="1024.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r88" x="1037" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r88" x="1049.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r89" x="1061.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r120" x="1073.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r151" x="1085.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r152" x="1098" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r123" x="1110.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r124" x="1122.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r125" x="1134.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r153" x="1146.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r154" x="1159" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r155" x="1171.2" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r156" x="1183.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r157" x="1195.6" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r158" x="1207.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">▀</text><text class="terminal-1811200677-r90" x="1220" y="68.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-2)">
+</text><text class="terminal-1811200677-r159" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r160" x="12.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r130" x="24.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r161" x="36.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r98" x="48.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r131" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r15" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r162" x="85.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r163" x="97.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r132" x="109.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r133" x="122" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r164" x="134.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r101" x="146.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r102" x="158.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r135" x="170.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r165" x="183" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r166" x="195.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r136" x="207.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r167" x="219.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r105" x="231.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r137" x="244" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r168" x="256.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r31" x="268.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r106" x="280.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r107" x="292.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r138" x="305" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r139" x="317.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r35" x="329.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r108" x="341.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r169" x="353.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r38" x="366" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r109" x="378.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r170" x="390.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r42" x="402.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r110" x="414.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r140" x="427" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r141" x="439.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r171" x="451.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r47" x="463.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r111" x="475.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r142" x="488" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r50" x="500.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r112" x="512.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r144" x="524.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r172" x="536.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r113" x="549" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r145" x="561.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r173" x="573.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r146" x="585.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r147" x="597.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r174" x="610" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r175" x="622.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r150" x="634.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r61" x="646.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r63" x="658.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r64" x="671" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r116" x="683.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r65" x="695.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r66" x="707.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r68" x="719.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r69" x="732" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r70" x="744.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r71" x="756.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r72" x="768.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r73" x="780.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r74" x="793" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r117" x="805.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r75" x="817.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r76" x="829.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r78" x="841.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r79" x="854" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r118" x="866.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r80" x="878.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r81" x="890.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r83" x="902.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r84" x="915" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r119" x="927.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r85" x="939.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r87" x="951.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r88" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r88" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r89" x="988.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r120" x="1000.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r151" x="1012.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r152" x="1024.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r123" x="1037" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r124" x="1049.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r125" x="1061.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r176" x="1073.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r154" x="1085.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r155" x="1098" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r156" x="1110.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r157" x="1122.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r177" x="1134.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r178" x="1146.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r179" x="1159" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r180" x="1171.2" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r181" x="1183.4" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r182" x="1195.6" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r183" x="1207.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">▀</text><text class="terminal-1811200677-r90" x="1220" y="93.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-3)">
+</text><text class="terminal-1811200677-r15" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r16" x="12.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r17" x="24.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r132" x="36.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r133" x="48.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r164" x="61" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r21" x="73.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r184" x="85.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r135" x="97.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r24" x="109.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r166" x="122" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r136" x="134.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r167" x="146.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r105" x="158.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r137" x="170.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r168" x="183" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r31" x="195.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r32" x="207.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r33" x="219.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r138" x="231.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r139" x="244" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r36" x="256.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r185" x="268.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r169" x="280.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r186" x="292.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r109" x="305" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r170" x="317.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r42" x="329.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r43" x="341.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r140" x="353.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r141" x="366" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r171" x="378.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r47" x="390.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r48" x="402.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r142" x="414.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r50" x="427" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r187" x="439.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r144" x="451.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r53" x="463.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r54" x="475.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r145" x="488" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r188" x="500.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r189" x="512.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r190" x="524.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r174" x="536.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r60" x="549" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r150" x="561.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r62" x="573.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r63" x="585.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r64" x="597.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r116" x="610" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r65" x="622.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r67" x="634.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r68" x="646.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r69" x="658.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r70" x="671" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r71" x="683.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r72" x="695.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r73" x="707.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r74" x="719.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r117" x="732" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r75" x="744.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r77" x="756.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r78" x="768.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r79" x="780.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r118" x="793" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r80" x="805.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r82" x="817.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r83" x="829.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r84" x="841.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r119" x="854" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r86" x="866.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r87" x="878.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r88" x="890.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r191" x="902.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r192" x="915" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r121" x="927.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r151" x="939.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r123" x="951.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r123" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r124" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r153" x="988.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r176" x="1000.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r154" x="1012.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r155" x="1024.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r156" x="1037" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r158" x="1049.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r177" x="1061.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r178" x="1073.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r179" x="1085.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r180" x="1098" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r193" x="1110.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r182" x="1122.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r183" x="1134.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r194" x="1146.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r195" x="1159" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r196" x="1171.2" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r197" x="1183.4" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r198" x="1195.6" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r199" x="1207.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">▀</text><text class="terminal-1811200677-r90" x="1220" y="117.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-4)">
+</text><text class="terminal-1811200677-r21" x="0" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r184" x="12.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r200" x="24.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r24" x="36.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r25" x="48.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r136" x="61" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r167" x="73.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r28" x="85.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r29" x="97.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r168" x="109.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r31" x="122" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r32" x="134.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r33" x="146.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r34" x="158.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r139" x="170.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r36" x="183" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r37" x="195.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r169" x="207.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r39" x="219.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r40" x="231.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r170" x="244" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r42" x="256.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r43" x="268.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r44" x="280.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r45" x="292.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r171" x="305" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r47" x="317.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r48" x="329.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r49" x="341.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r50" x="353.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r187" x="366" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r52" x="378.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r53" x="390.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r54" x="402.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r201" x="414.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r56" x="427" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r57" x="439.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r58" x="451.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r59" x="463.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r60" x="475.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r61" x="488" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r62" x="500.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r63" x="512.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r64" x="524.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r116" x="536.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r66" x="549" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r67" x="561.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r68" x="573.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r69" x="585.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r70" x="597.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r71" x="610" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r72" x="622.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r73" x="634.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r74" x="646.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r117" x="658.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r76" x="671" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r77" x="683.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r78" x="695.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r79" x="707.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r118" x="719.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r81" x="732" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r82" x="744.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r83" x="756.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r84" x="768.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r85" x="780.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r86" x="793" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r87" x="805.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r88" x="817.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r191" x="829.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r192" x="841.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r121" x="854" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r122" x="866.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r123" x="878.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r123" x="890.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r125" x="902.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r153" x="915" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r176" x="927.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r154" x="939.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r155" x="951.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r157" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r158" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r177" x="988.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r178" x="1000.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r179" x="1012.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r181" x="1024.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r193" x="1037" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r182" x="1049.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r183" x="1061.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r194" x="1073.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r195" x="1085.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r196" x="1098" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r197" x="1110.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r198" x="1122.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r202" x="1134.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r203" x="1146.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r204" x="1159" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r205" x="1171.2" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r206" x="1183.4" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r207" x="1195.6" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r208" x="1207.8" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">▀</text><text class="terminal-1811200677-r90" x="1220" y="142" textLength="12.2" clip-path="url(#terminal-1811200677-line-5)">
+</text><text class="terminal-1811200677-r27" x="0" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r28" x="12.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r29" x="24.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r30" x="36.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r106" x="48.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r32" x="61" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r33" x="73.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r34" x="85.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r35" x="97.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r36" x="109.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r37" x="122" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r38" x="134.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r39" x="146.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r40" x="158.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r41" x="170.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r42" x="183" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r43" x="195.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r44" x="207.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r45" x="219.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r46" x="231.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r111" x="244" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r48" x="256.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r49" x="268.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r112" x="280.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r51" x="292.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r52" x="305" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r113" x="317.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r54" x="329.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r55" x="341.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r114" x="353.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r57" x="366" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r58" x="378.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r115" x="390.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r60" x="402.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r61" x="414.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r62" x="427" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r63" x="439.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r64" x="451.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r65" x="463.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r66" x="475.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r67" x="488" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r68" x="500.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r69" x="512.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r70" x="524.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r71" x="536.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r72" x="549" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r73" x="561.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r74" x="573.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r75" x="585.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r76" x="597.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r77" x="610" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r78" x="622.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r79" x="634.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r80" x="646.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r81" x="658.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r82" x="671" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r83" x="683.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r119" x="695.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r85" x="707.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r86" x="719.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r87" x="732" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r88" x="744.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r89" x="756.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r120" x="768.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r121" x="780.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r122" x="793" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r123" x="805.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r124" x="817.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r125" x="829.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r153" x="841.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r176" x="854" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r154" x="866.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r156" x="878.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r157" x="890.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r158" x="902.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r177" x="915" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r178" x="927.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r180" x="939.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r181" x="951.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r193" x="963.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r182" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r183" x="988.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r194" x="1000.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r196" x="1012.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r209" x="1024.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r198" x="1037" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r199" x="1049.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r202" x="1061.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r210" x="1073.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r211" x="1085.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r205" x="1098" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r212" x="1110.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r207" x="1122.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r208" x="1134.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r213" x="1146.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r214" x="1159" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r215" x="1171.2" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r216" x="1183.4" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r217" x="1195.6" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r218" x="1207.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">▀</text><text class="terminal-1811200677-r90" x="1220" y="166.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-6)">
+</text><text class="terminal-1811200677-r33" x="0" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r34" x="12.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r35" x="24.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r108" x="36.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r37" x="48.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r38" x="61" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r109" x="73.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r40" x="85.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r41" x="97.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r110" x="109.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r140" x="122" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r44" x="134.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r45" x="146.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r46" x="158.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r111" x="170.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r142" x="183" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r49" x="195.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r112" x="207.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r144" x="219.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r52" x="231.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r113" x="244" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r145" x="256.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r55" x="268.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r146" x="280.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r147" x="292.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r148" x="305" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r149" x="317.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r219" x="329.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r61" x="341.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r62" x="353.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r63" x="366" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r116" x="378.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r65" x="390.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r66" x="402.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r67" x="414.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r68" x="427" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r69" x="439.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r70" x="451.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r71" x="463.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r73" x="475.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r74" x="488" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r117" x="500.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r75" x="512.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r76" x="524.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r77" x="536.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r78" x="549" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r118" x="561.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r80" x="573.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r81" x="585.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r82" x="597.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r84" x="610" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r119" x="622.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r85" x="634.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r86" x="646.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r87" x="658.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r88" x="671" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r89" x="683.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r120" x="695.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r121" x="707.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r122" x="719.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r123" x="732" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r124" x="744.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r125" x="756.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r153" x="768.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r176" x="780.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r155" x="793" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r156" x="805.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r157" x="817.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r158" x="829.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r177" x="841.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r179" x="854" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r180" x="866.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r181" x="878.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r193" x="890.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r183" x="902.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r194" x="915" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r220" x="927.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r196" x="939.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r209" x="951.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r198" x="963.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r199" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r202" x="988.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r210" x="1000.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r211" x="1012.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r206" x="1024.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r212" x="1037" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r207" x="1049.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r208" x="1061.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r221" x="1073.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r222" x="1085.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r215" x="1098" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r223" x="1110.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r217" x="1122.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r218" x="1134.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r224" x="1146.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r225" x="1159" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r226" x="1171.2" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r227" x="1183.4" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r228" x="1195.6" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r229" x="1207.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">▀</text><text class="terminal-1811200677-r90" x="1220" y="190.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-7)">
+</text><text class="terminal-1811200677-r109" x="0" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r170" x="12.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r41" x="24.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r110" x="36.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r140" x="48.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r141" x="61" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r171" x="73.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r46" x="85.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r111" x="97.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r142" x="109.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r50" x="122" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r112" x="134.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r144" x="146.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r52" x="158.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r113" x="170.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r145" x="183" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r55" x="195.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r146" x="207.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r147" x="219.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r148" x="231.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r149" x="244" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r150" x="256.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r61" x="268.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r62" x="280.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r64" x="292.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r116" x="305" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r65" x="317.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r66" x="329.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r67" x="341.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r68" x="353.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r70" x="366" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r71" x="378.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r72" x="390.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r73" x="402.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r74" x="414.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r117" x="427" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r75" x="439.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r76" x="451.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r78" x="463.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r79" x="475.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r118" x="488" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r80" x="500.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r81" x="512.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r83" x="524.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r84" x="536.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r119" x="549" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r85" x="561.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r86" x="573.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r88" x="585.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r88" x="597.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r89" x="610" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r120" x="622.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r151" x="634.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r152" x="646.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r123" x="658.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r124" x="671" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r125" x="683.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r153" x="695.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r154" x="707.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r155" x="719.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r156" x="732" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r157" x="744.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r158" x="756.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r178" x="768.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r179" x="780.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r180" x="793" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r181" x="805.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r182" x="817.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r183" x="829.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r194" x="841.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r220" x="854" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r196" x="866.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r209" x="878.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r198" x="890.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r199" x="902.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r202" x="915" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r210" x="927.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r205" x="939.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r206" x="951.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r230" x="963.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r231" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r208" x="988.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r232" x="1000.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r233" x="1012.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r215" x="1024.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r223" x="1037" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r234" x="1049.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r235" x="1061.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r224" x="1073.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r236" x="1085.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r226" x="1098" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r237" x="1110.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r238" x="1122.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r229" x="1134.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r239" x="1146.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r240" x="1159" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r241" x="1171.2" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r242" x="1183.4" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r243" x="1195.6" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r244" x="1207.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">▀</text><text class="terminal-1811200677-r90" x="1220" y="215.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-8)">
+</text><text class="terminal-1811200677-r171" x="0" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r47" x="12.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r111" x="24.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r142" x="36.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r50" x="48.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r112" x="61" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r144" x="73.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r53" x="85.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r113" x="97.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r145" x="109.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r188" x="122" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r146" x="134.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r190" x="146.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r174" x="158.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r175" x="170.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r150" x="183" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r61" x="195.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r63" x="207.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r64" x="219.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r116" x="231.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r65" x="244" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r66" x="256.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r68" x="268.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r69" x="280.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r70" x="292.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r71" x="305" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r72" x="317.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r73" x="329.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r74" x="341.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r117" x="353.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r75" x="366" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r77" x="378.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r78" x="390.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r79" x="402.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r118" x="414.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r80" x="427" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r82" x="439.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r83" x="451.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r84" x="463.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r119" x="475.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r85" x="488" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r87" x="500.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r88" x="512.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r88" x="524.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r192" x="536.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r120" x="549" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r151" x="561.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r152" x="573.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r123" x="585.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r124" x="597.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r125" x="610" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r176" x="622.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r154" x="634.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r155" x="646.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r156" x="658.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r157" x="671" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r177" x="683.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r178" x="695.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r179" x="707.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r180" x="719.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r193" x="732" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r182" x="744.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r183" x="756.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r194" x="768.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r195" x="780.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r196" x="793" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r209" x="805.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r198" x="817.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r199" x="829.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r202" x="841.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r204" x="854" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r205" x="866.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r206" x="878.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r230" x="890.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r231" x="902.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r213" x="915" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r232" x="927.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r233" x="939.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r245" x="951.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r223" x="963.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r246" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r247" x="988.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r224" x="1000.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r236" x="1012.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r248" x="1024.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r237" x="1037" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r238" x="1049.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r249" x="1061.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r239" x="1073.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r250" x="1085.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r241" x="1098" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r251" x="1110.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r252" x="1122.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r244" x="1134.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r253" x="1146.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r254" x="1159" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r255" x="1171.2" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r256" x="1183.4" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r257" x="1195.6" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r258" x="1207.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">▀</text><text class="terminal-1811200677-r90" x="1220" y="239.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-9)">
+</text><text class="terminal-1811200677-r144" x="0" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r53" x="12.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r54" x="24.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r145" x="36.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r188" x="48.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r189" x="61" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r190" x="73.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r174" x="85.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r60" x="97.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r150" x="109.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r62" x="122" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r63" x="134.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r64" x="146.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r116" x="158.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r65" x="170.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r67" x="183" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r68" x="195.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r69" x="207.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r70" x="219.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r71" x="231.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r72" x="244" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r73" x="256.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r74" x="268.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r117" x="280.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r76" x="292.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r77" x="305" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r78" x="317.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r79" x="329.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r118" x="341.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r81" x="353.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r82" x="366" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r83" x="378.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r84" x="390.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r119" x="402.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r86" x="414.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r87" x="427" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r88" x="439.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r191" x="451.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r192" x="463.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r121" x="475.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r122" x="488" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r123" x="500.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r123" x="512.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r124" x="524.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r153" x="536.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r176" x="549" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r154" x="561.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r155" x="573.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r156" x="585.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r158" x="597.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r177" x="610" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r178" x="622.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r179" x="634.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r181" x="646.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r193" x="658.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r182" x="671" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r183" x="683.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r194" x="695.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r195" x="707.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r196" x="719.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r197" x="732" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r198" x="744.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r199" x="756.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r203" x="768.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r204" x="780.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r205" x="793" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r206" x="805.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r230" x="817.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r208" x="829.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r213" x="841.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r214" x="854" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r233" x="866.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r245" x="878.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r217" x="890.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r246" x="902.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r247" x="915" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r259" x="927.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r260" x="939.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r248" x="951.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r261" x="963.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r238" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r249" x="988.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r262" x="1000.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r250" x="1012.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r241" x="1024.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r251" x="1037" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r252" x="1049.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r263" x="1061.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r253" x="1073.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r254" x="1085.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r255" x="1098" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r264" x="1110.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r257" x="1122.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r265" x="1134.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r266" x="1146.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r267" x="1159" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r268" x="1171.2" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r269" x="1183.4" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r270" x="1195.6" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r271" x="1207.8" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">▀</text><text class="terminal-1811200677-r90" x="1220" y="264" textLength="12.2" clip-path="url(#terminal-1811200677-line-10)">
+</text><text class="terminal-1811200677-r58" x="0" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r59" x="12.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r60" x="24.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r61" x="36.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r62" x="48.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r63" x="61" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r64" x="73.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r116" x="85.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r66" x="97.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r67" x="109.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r68" x="122" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r69" x="134.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r70" x="146.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r71" x="158.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r72" x="170.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r73" x="183" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r74" x="195.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r75" x="207.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r76" x="219.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r77" x="231.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r78" x="244" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r79" x="256.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r80" x="268.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r81" x="280.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r82" x="292.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r83" x="305" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r84" x="317.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r85" x="329.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r86" x="341.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r87" x="353.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r88" x="366" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r191" x="378.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r192" x="390.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r121" x="402.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r122" x="414.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r123" x="427" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r123" x="439.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r125" x="451.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r153" x="463.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r176" x="475.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r154" x="488" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r156" x="500.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r157" x="512.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r158" x="524.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r177" x="536.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r178" x="549" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r180" x="561.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r181" x="573.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r193" x="585.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r182" x="597.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r183" x="610" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r194" x="622.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r195" x="634.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r196" x="646.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r197" x="658.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r199" x="671" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r202" x="683.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r203" x="695.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r204" x="707.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r205" x="719.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r206" x="732" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r207" x="744.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r208" x="756.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r213" x="768.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r214" x="780.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r272" x="793" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r216" x="805.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r217" x="817.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r218" x="829.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r247" x="841.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r259" x="854" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r273" x="866.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r274" x="878.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r228" x="890.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r275" x="902.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r276" x="915" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r262" x="927.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r277" x="939.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r278" x="951.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r251" x="963.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r279" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r263" x="988.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r280" x="1000.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r254" x="1012.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r255" x="1024.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r264" x="1037" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r257" x="1049.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r265" x="1061.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r266" x="1073.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r267" x="1085.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r281" x="1098" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r269" x="1110.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r282" x="1122.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r283" x="1134.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r284" x="1146.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r285" x="1159" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r286" x="1171.2" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r287" x="1183.4" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r288" x="1195.6" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r289" x="1207.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">▀</text><text class="terminal-1811200677-r90" x="1220" y="288.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-11)">
+</text><text class="terminal-1811200677-r64" x="0" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r65" x="12.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r66" x="24.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r67" x="36.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r68" x="48.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r69" x="61" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r70" x="73.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r71" x="85.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r72" x="97.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r73" x="109.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r117" x="122" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r75" x="134.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r76" x="146.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r77" x="158.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r78" x="170.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r118" x="183" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r80" x="195.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r81" x="207.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r82" x="219.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r83" x="231.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r119" x="244" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r85" x="256.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r86" x="268.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r87" x="280.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r88" x="292.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r89" x="305" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r120" x="317.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r121" x="329.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r122" x="341.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r123" x="353.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r124" x="366" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r125" x="378.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r153" x="390.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r176" x="402.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r155" x="414.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r156" x="427" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r157" x="439.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r158" x="451.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r177" x="463.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r179" x="475.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r180" x="488" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r181" x="500.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r193" x="512.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r182" x="524.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r183" x="536.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r220" x="549" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r196" x="561.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r209" x="573.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r198" x="585.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r199" x="597.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r202" x="610" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r210" x="622.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r211" x="634.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r205" x="646.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r212" x="658.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r207" x="671" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r208" x="683.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r221" x="695.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r214" x="707.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r215" x="719.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r223" x="732" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r217" x="744.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r218" x="756.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r224" x="768.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r225" x="780.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r226" x="793" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r227" x="805.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r228" x="817.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r229" x="829.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r239" x="841.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r262" x="854" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r277" x="866.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r278" x="878.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r243" x="890.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r279" x="902.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r263" x="915" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r280" x="927.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r290" x="939.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r255" x="951.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r264" x="963.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r291" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r292" x="988.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r293" x="1000.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r294" x="1012.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r295" x="1024.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r296" x="1037" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r282" x="1049.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r297" x="1061.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r284" x="1073.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r298" x="1085.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r286" x="1098" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r299" x="1110.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r300" x="1122.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r301" x="1134.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r302" x="1146.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r303" x="1159" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r304" x="1171.2" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r305" x="1183.4" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r306" x="1195.6" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r307" x="1207.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">▀</text><text class="terminal-1811200677-r90" x="1220" y="312.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-12)">
+</text><text class="terminal-1811200677-r70" x="0" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r72" x="12.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r73" x="24.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r74" x="36.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r117" x="48.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r75" x="61" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r76" x="73.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r77" x="85.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r79" x="97.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r118" x="109.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r80" x="122" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r81" x="134.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r82" x="146.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r84" x="158.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r119" x="170.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r85" x="183" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r86" x="195.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r87" x="207.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r88" x="219.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r89" x="231.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r120" x="244" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r121" x="256.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r122" x="268.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r123" x="280.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r124" x="292.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r125" x="305" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r153" x="317.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r154" x="329.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r155" x="341.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r156" x="353.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r157" x="366" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r158" x="378.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r178" x="390.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r179" x="402.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r180" x="414.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r181" x="427" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r193" x="439.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r183" x="451.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r194" x="463.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r220" x="475.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r196" x="488" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r209" x="500.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r198" x="512.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r199" x="524.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r202" x="536.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r210" x="549" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r211" x="561.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r206" x="573.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r230" x="585.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r207" x="597.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r208" x="610" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r221" x="622.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r233" x="634.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r215" x="646.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r223" x="658.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r234" x="671" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r235" x="683.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r224" x="695.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r225" x="707.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r226" x="719.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r227" x="732" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r228" x="744.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r229" x="756.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r239" x="768.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r240" x="780.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r277" x="793" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r242" x="805.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r243" x="817.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r244" x="829.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r308" x="841.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r280" x="854" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r309" x="866.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r310" x="878.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r311" x="890.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r312" x="902.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r313" x="915" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r293" x="927.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r294" x="939.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r314" x="951.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r315" x="963.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r316" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r297" x="988.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r284" x="1000.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r317" x="1012.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r318" x="1024.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r299" x="1037" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r300" x="1049.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r319" x="1061.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r320" x="1073.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r321" x="1085.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r322" x="1098" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r323" x="1110.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r324" x="1122.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r325" x="1134.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r326" x="1146.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r327" x="1159" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r328" x="1171.2" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r329" x="1183.4" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r330" x="1195.6" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r331" x="1207.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">▀</text><text class="terminal-1811200677-r90" x="1220" y="337.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-13)">
+</text><text class="terminal-1811200677-r76" x="0" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r78" x="12.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r79" x="24.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r118" x="36.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r80" x="48.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r81" x="61" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r83" x="73.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r84" x="85.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r119" x="97.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r85" x="109.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r86" x="122" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r88" x="134.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r88" x="146.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r89" x="158.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r120" x="170.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r151" x="183" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r152" x="195.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r123" x="207.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r124" x="219.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r125" x="231.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r176" x="244" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r154" x="256.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r155" x="268.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r156" x="280.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r157" x="292.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r177" x="305" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r178" x="317.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r179" x="329.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r180" x="341.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r181" x="353.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r182" x="366" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r183" x="378.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r194" x="390.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r195" x="402.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r196" x="414.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r209" x="427" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r198" x="439.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r199" x="451.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r202" x="463.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r210" x="475.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r205" x="488" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r206" x="500.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r230" x="512.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r231" x="524.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r213" x="536.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r232" x="549" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r233" x="561.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r215" x="573.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r223" x="585.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r246" x="597.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r235" x="610" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r224" x="622.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r236" x="634.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r226" x="646.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r237" x="658.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r238" x="671" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r229" x="683.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r239" x="695.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r240" x="707.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r241" x="719.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r242" x="732" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r243" x="744.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r244" x="756.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r308" x="768.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r254" x="780.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r309" x="793" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r310" x="805.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r257" x="817.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r312" x="829.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r313" x="841.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r267" x="854" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r332" x="866.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r314" x="878.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r333" x="890.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r316" x="902.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r334" x="915" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r335" x="927.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r317" x="939.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r318" x="951.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r336" x="963.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r337" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r338" x="988.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r339" x="1000.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r321" x="1012.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r322" x="1024.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r340" x="1037" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r341" x="1049.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r325" x="1061.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r326" x="1073.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r327" x="1085.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r328" x="1098" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r342" x="1110.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r330" x="1122.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r331" x="1134.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r343" x="1146.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r344" x="1159" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r345" x="1171.2" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r346" x="1183.4" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r347" x="1195.6" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r348" x="1207.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">▀</text><text class="terminal-1811200677-r90" x="1220" y="361.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-14)">
+</text><text class="terminal-1811200677-r83" x="0" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r84" x="12.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r119" x="24.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r85" x="36.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r87" x="48.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r88" x="61" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r88" x="73.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r192" x="85.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r120" x="97.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r151" x="109.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r152" x="122" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r123" x="134.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r124" x="146.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r153" x="158.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r176" x="170.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r154" x="183" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r155" x="195.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r156" x="207.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r158" x="219.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r177" x="231.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r178" x="244" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r179" x="256.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r180" x="268.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r193" x="280.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r182" x="292.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r183" x="305" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r194" x="317.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r195" x="329.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r196" x="341.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r197" x="353.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r198" x="366" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r199" x="378.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r202" x="390.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r204" x="402.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r205" x="414.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r206" x="427" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r230" x="439.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r208" x="451.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r213" x="463.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r232" x="475.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r233" x="488" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r245" x="500.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r349" x="512.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r246" x="524.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r247" x="536.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r224" x="549" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r236" x="561.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r248" x="573.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r237" x="585.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r238" x="597.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r249" x="610" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r239" x="622.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r250" x="634.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r241" x="646.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r251" x="658.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r252" x="671" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r244" x="683.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r253" x="695.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r254" x="707.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r255" x="719.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r256" x="732" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r257" x="744.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r258" x="756.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r313" x="768.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r267" x="780.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r268" x="793" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r269" x="805.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r333" x="817.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r316" x="829.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r350" x="841.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r351" x="854" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r352" x="866.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r353" x="878.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r336" x="890.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r354" x="902.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r338" x="915" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r355" x="927.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r356" x="939.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r357" x="951.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r358" x="963.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r359" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r360" x="988.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r361" x="1000.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r362" x="1012.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r363" x="1024.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r364" x="1037" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r365" x="1049.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r366" x="1061.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r343" x="1073.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r344" x="1085.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r345" x="1098" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r346" x="1110.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r367" x="1122.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r368" x="1134.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r369" x="1146.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r370" x="1159" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r371" x="1171.2" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r372" x="1183.4" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r373" x="1195.6" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r374" x="1207.8" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">▀</text><text class="terminal-1811200677-r90" x="1220" y="386" textLength="12.2" clip-path="url(#terminal-1811200677-line-15)">
+</text><text class="terminal-1811200677-r191" x="0" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r192" x="12.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r121" x="24.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r122" x="36.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r123" x="48.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r123" x="61" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r125" x="73.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r153" x="85.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r176" x="97.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r154" x="109.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r155" x="122" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r157" x="134.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r158" x="146.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r177" x="158.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r178" x="170.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r179" x="183" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r181" x="195.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r193" x="207.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r182" x="219.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r183" x="231.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r194" x="244" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r195" x="256.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r196" x="268.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r197" x="280.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r198" x="292.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r199" x="305" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r203" x="317.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r204" x="329.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r205" x="341.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r206" x="353.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r207" x="366" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r208" x="378.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r213" x="390.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r214" x="402.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r233" x="414.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r216" x="427" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r217" x="439.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r246" x="451.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r247" x="463.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r259" x="475.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r260" x="488" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r248" x="500.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r261" x="512.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r238" x="524.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r276" x="536.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r262" x="549" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r277" x="561.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r241" x="573.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r251" x="585.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r252" x="597.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r263" x="610" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r280" x="622.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r254" x="634.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r255" x="646.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r264" x="658.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r257" x="671" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r265" x="683.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r266" x="695.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r267" x="707.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r281" x="719.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r269" x="732" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r270" x="744.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r271" x="756.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r350" x="768.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r285" x="780.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r352" x="793" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r287" x="805.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r288" x="817.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r289" x="829.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r302" x="841.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r375" x="854" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r356" x="866.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r376" x="878.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r358" x="890.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r359" x="902.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r360" x="915" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r361" x="927.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r377" x="939.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r363" x="951.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r364" x="963.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r365" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r366" x="988.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r378" x="1000.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r379" x="1012.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r380" x="1024.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r381" x="1037" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r367" x="1049.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r368" x="1061.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r382" x="1073.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r383" x="1085.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r384" x="1098" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r385" x="1110.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r386" x="1122.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r374" x="1134.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r387" x="1146.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r388" x="1159" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r389" x="1171.2" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r390" x="1183.4" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r391" x="1195.6" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r392" x="1207.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">▀</text><text class="terminal-1811200677-r90" x="1220" y="410.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-16)">
+</text><text class="terminal-1811200677-r125" x="0" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r153" x="12.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r176" x="24.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r154" x="36.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r156" x="48.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r157" x="61" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r158" x="73.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r177" x="85.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r178" x="97.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r180" x="109.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r181" x="122" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r193" x="134.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r182" x="146.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r183" x="158.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r194" x="170.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r195" x="183" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r196" x="195.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r198" x="207.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r199" x="219.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r202" x="231.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r210" x="244" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r204" x="256.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r205" x="268.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r212" x="280.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r207" x="292.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r208" x="305" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r213" x="317.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r214" x="329.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r215" x="341.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r216" x="353.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r393" x="854" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r394" x="866.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r395" x="878.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r396" x="890.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r397" x="902.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r398" x="915" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r378" x="927.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r379" x="939.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r399" x="951.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r400" x="963.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r401" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r402" x="988.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r403" x="1000.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r404" x="1012.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r384" x="1024.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r385" x="1037" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r386" x="1049.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r405" x="1061.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r406" x="1073.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r407" x="1085.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r408" x="1098" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r390" x="1110.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r391" x="1122.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r392" x="1134.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r409" x="1146.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r410" x="1159" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r411" x="1171.2" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r412" x="1183.4" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r413" x="1195.6" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r414" x="1207.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">▀</text><text class="terminal-1811200677-r90" x="1220" y="434.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-17)">
+</text><text class="terminal-1811200677-r158" x="0" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r177" x="12.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r179" x="24.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r180" x="36.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r181" x="48.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r193" x="61" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r182" x="73.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r194" x="85.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r220" x="97.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r196" x="109.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r209" x="122" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r198" x="134.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r199" x="146.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r202" x="158.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r210" x="170.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r211" x="183" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r206" x="195.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r212" x="207.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r207" x="219.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r208" x="231.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r221" x="244" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r222" x="256.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r215" x="268.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r223" x="280.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r217" x="292.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r218" x="305" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r224" x="317.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r225" x="329.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r226" x="341.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r227" x="353.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r415" x="854" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r416" x="866.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r417" x="878.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r418" x="890.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r401" x="902.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r402" x="915" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r403" x="927.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r404" x="939.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r419" x="951.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r420" x="963.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r421" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r405" x="988.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r406" x="1000.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r407" x="1012.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r408" x="1024.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r422" x="1037" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r423" x="1049.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r424" x="1061.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r425" x="1073.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r410" x="1085.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r411" x="1098" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r412" x="1110.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r413" x="1122.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r426" x="1134.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r427" x="1146.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r428" x="1159" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r429" x="1171.2" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r430" x="1183.4" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r431" x="1195.6" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r432" x="1207.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">▀</text><text class="terminal-1811200677-r90" x="1220" y="459.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-18)">
+</text><text class="terminal-1811200677-r183" x="0" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r194" x="12.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r220" x="24.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r196" x="36.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r209" x="48.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r198" x="61" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r199" x="73.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r202" x="85.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r210" x="97.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r205" x="109.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r206" x="122" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r230" x="134.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r207" x="146.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r208" x="158.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r232" x="170.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r233" x="183" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r215" x="195.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r223" x="207.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r234" x="219.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r235" x="231.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r224" x="244" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r236" x="256.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r226" x="268.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r227" x="280.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r238" x="292.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r229" x="305" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r239" x="317.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r240" x="329.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r277" x="341.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r242" x="353.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r433" x="414.8" y="483.6" textLength="353.8" clip-path="url(#terminal-1811200677-line-19)">Making&#160;a&#160;splash&#160;with&#160;Textual!</text><text class="terminal-1811200677-r370" x="854" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r371" x="866.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r419" x="878.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r420" x="890.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r421" x="902.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r434" x="915" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r435" x="927.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r436" x="939.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r437" x="951.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r422" x="963.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r423" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r424" x="988.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r425" x="1000.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r438" x="1012.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r439" x="1024.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r440" x="1037" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r441" x="1049.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r426" x="1061.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r427" x="1073.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r428" x="1085.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r429" x="1098" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r442" x="1110.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r443" x="1122.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r444" x="1134.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r445" x="1146.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r446" x="1159" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r447" x="1171.2" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r448" x="1183.4" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r449" x="1195.6" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r450" x="1207.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">▀</text><text class="terminal-1811200677-r90" x="1220" y="483.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-19)">
+</text><text class="terminal-1811200677-r199" x="0" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r202" x="12.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r204" x="24.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r205" x="36.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r206" x="48.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r230" x="61" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r231" x="73.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r213" x="85.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r232" x="97.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r233" x="109.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r245" x="122" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r223" x="134.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r246" x="146.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r247" x="158.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r224" x="170.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r236" x="183" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r248" x="195.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r237" x="207.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r238" x="219.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r249" x="231.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r239" x="244" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r240" x="256.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r241" x="268.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r251" x="280.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r243" x="292.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r244" x="305" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r253" x="317.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r254" x="329.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r309" x="341.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r310" x="353.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r435" x="854" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r436" x="866.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r437" x="878.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r451" x="890.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r452" x="902.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r453" x="915" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r454" x="927.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r438" x="939.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r439" x="951.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r440" x="963.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r441" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r455" x="988.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r456" x="1000.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r457" x="1012.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r458" x="1024.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r442" x="1037" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r443" x="1049.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r444" x="1061.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r459" x="1073.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r460" x="1085.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r461" x="1098" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r462" x="1110.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r449" x="1122.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r450" x="1134.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r463" x="1146.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r464" x="1159" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r465" x="1171.2" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r466" x="1183.4" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r467" x="1195.6" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r468" x="1207.8" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">▀</text><text class="terminal-1811200677-r90" x="1220" y="508" textLength="12.2" clip-path="url(#terminal-1811200677-line-20)">
+</text><text class="terminal-1811200677-r208" x="0" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r213" x="12.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r214" x="24.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r233" x="36.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r245" x="48.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r217" x="61" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r246" x="73.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r247" x="85.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r259" x="97.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r236" x="109.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r248" x="122" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r237" x="134.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r238" x="146.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r249" x="158.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r239" x="170.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r250" x="183" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r241" x="195.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r251" x="207.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r252" x="219.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r263" x="231.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r253" x="244" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r254" x="256.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r255" x="268.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r256" x="280.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r257" x="292.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r258" x="305" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r313" x="317.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r267" x="329.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r268" x="341.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r269" x="353.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r454" x="854" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r469" x="866.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r470" x="878.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r471" x="890.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r414" x="902.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r455" x="915" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r456" x="927.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r457" x="939.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r458" x="951.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r472" x="963.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r473" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r474" x="988.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r459" x="1000.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r460" x="1012.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r461" x="1024.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r462" x="1037" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r475" x="1049.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r476" x="1061.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r477" x="1073.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r478" x="1085.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r479" x="1098" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r480" x="1110.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r481" x="1122.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r482" x="1134.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r483" x="1146.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r484" x="1159" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r485" x="1171.2" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r486" x="1183.4" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r487" x="1195.6" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r488" x="1207.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">▀</text><text class="terminal-1811200677-r90" x="1220" y="532.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-21)">
+</text><text class="terminal-1811200677-r246" x="0" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r247" x="12.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r259" x="24.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r260" x="36.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r248" x="48.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r228" x="61" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r489" x="73.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r276" x="85.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r262" x="97.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r277" x="109.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r241" x="122" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r251" x="134.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r279" x="146.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r263" x="158.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r280" x="170.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r254" x="183" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r255" x="195.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r264" x="207.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r257" x="219.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r265" x="231.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r266" x="244" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r267" x="256.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r281" x="268.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r269" x="280.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r282" x="292.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r283" x="305" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r350" x="317.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r285" x="329.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r352" x="341.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r287" x="353.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r288" x="366" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r289" x="378.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r302" x="390.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r375" x="402.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r304" x="414.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r305" x="427" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r306" x="439.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r490" x="451.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r491" x="463.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r393" x="475.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r394" x="488" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r395" x="500.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r364" x="512.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r365" x="524.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r492" x="536.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r378" x="549" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r379" x="561.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r399" x="573.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r381" x="585.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r493" x="597.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r494" x="610" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r382" x="622.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r383" x="634.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r384" x="646.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r385" x="658.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r386" x="671" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r405" x="683.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r406" x="695.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r388" x="707.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r389" x="719.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r390" x="732" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r391" x="744.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r392" x="756.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r409" x="768.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r410" x="780.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r469" x="793" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r470" x="805.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r471" x="817.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r414" x="829.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r495" x="841.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r496" x="854" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r497" x="866.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r430" x="878.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r472" x="890.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r473" x="902.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r474" x="915" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r498" x="927.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r499" x="939.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r500" x="951.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r501" x="963.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r475" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r476" x="988.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r477" x="1000.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r502" x="1012.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r479" x="1024.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r480" x="1037" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r503" x="1049.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r482" x="1061.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r483" x="1073.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r484" x="1085.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r504" x="1098" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r505" x="1110.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r487" x="1122.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r488" x="1134.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r506" x="1146.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r507" x="1159" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r508" x="1171.2" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r509" x="1183.4" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r510" x="1195.6" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r511" x="1207.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">▀</text><text class="terminal-1811200677-r90" x="1220" y="556.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-22)">
+</text><text class="terminal-1811200677-r275" x="0" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r276" x="12.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r262" x="24.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r277" x="36.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r278" x="48.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r243" x="61" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r279" x="73.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r263" x="85.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r280" x="97.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r290" x="109.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r255" x="122" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r264" x="134.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r291" x="146.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r265" x="158.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r293" x="170.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r294" x="183" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r281" x="195.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r296" x="207.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r282" x="219.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r283" x="231.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r284" x="244" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r298" x="256.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r286" x="268.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r299" x="280.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r300" x="292.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r289" x="305" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r302" x="317.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r303" x="329.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r304" x="341.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r305" x="353.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r306" x="366" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r307" x="378.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r491" x="390.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r393" x="402.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r394" x="414.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r395" x="427" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r512" x="439.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r397" x="451.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r398" x="463.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r415" x="475.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r379" x="488" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r399" x="500.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r400" x="512.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r401" x="524.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r402" x="536.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r403" x="549" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r404" x="561.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r513" x="573.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r385" x="585.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r386" x="597.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r405" x="610" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r406" x="622.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r407" x="634.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r408" x="646.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r422" x="658.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r391" x="671" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r392" x="683.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r409" x="695.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r410" x="707.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r411" x="719.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r412" x="732" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r413" x="744.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r426" x="756.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r495" x="768.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r496" x="780.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r497" x="793" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r430" x="805.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r431" x="817.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r432" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r445" x="841.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r446" x="854" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r499" x="866.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r500" x="878.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r501" x="890.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r514" x="902.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r476" x="915" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r477" x="927.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r502" x="939.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r515" x="951.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r516" x="963.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r503" x="976" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r482" x="988.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r483" x="1000.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r517" x="1012.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r504" x="1024.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r505" x="1037" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r487" x="1049.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r518" x="1061.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r506" x="1073.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r507" x="1085.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r519" x="1098" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r509" x="1110.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r520" x="1122.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r511" x="1134.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r521" x="1146.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r522" x="1159" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r523" x="1171.2" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r524" x="1183.4" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r525" x="1195.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r526" x="1207.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">▀</text><text class="terminal-1811200677-r90" x="1220" y="581.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-23)">
+</text><text class="terminal-1811200677-r244" x="0" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r263" x="12.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r280" x="24.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r290" x="36.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r527" x="48.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r311" x="61" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r312" x="73.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r313" x="85.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r293" x="97.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r294" x="109.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r314" x="122" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r315" x="134.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r282" x="146.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r297" x="158.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r284" x="170.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r317" x="183" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r528" x="195.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r299" x="207.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r300" x="219.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r319" x="231.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r320" x="244" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r321" x="256.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r322" x="268.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r323" x="280.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r324" x="292.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r325" x="305" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r326" x="317.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r327" x="329.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r529" x="341.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r329" x="353.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r512" x="366" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r397" x="378.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r398" x="390.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r415" x="402.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r416" x="414.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r417" x="427" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r418" x="439.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r530" x="451.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r402" x="463.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r403" x="475.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r531" x="488" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r419" x="500.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r420" x="512.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r421" x="524.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r434" x="536.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r435" x="549" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r407" x="561.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r408" x="573.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r422" x="585.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r423" x="597.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r424" x="610" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r425" x="622.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r438" x="634.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r411" x="646.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r412" x="658.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r413" x="671" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r426" x="683.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r427" x="695.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r428" x="707.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r429" x="719.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r442" x="732" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r431" x="744.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r432" x="756.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r445" x="768.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r446" x="780.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r447" x="793" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r448" x="805.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r449" x="817.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r514" x="829.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r532" x="841.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r533" x="854" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r465" x="866.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r534" x="878.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r467" x="890.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r535" x="902.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r536" x="915" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r537" x="927.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r517" x="939.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r504" x="951.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r538" x="963.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r539" x="976" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r518" x="988.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r506" x="1000.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r540" x="1012.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r519" x="1024.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r541" x="1037" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r520" x="1049.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r542" x="1061.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r521" x="1073.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r522" x="1085.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r543" x="1098" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r544" x="1110.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r525" x="1122.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r526" x="1134.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r545" x="1146.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r546" x="1159" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r547" x="1171.2" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r548" x="1183.4" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r549" x="1195.6" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r550" x="1207.8" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">▀</text><text class="terminal-1811200677-r90" x="1220" y="605.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-24)">
+</text><text class="terminal-1811200677-r312" x="0" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r313" x="12.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r267" x="24.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r332" x="36.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r314" x="48.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r315" x="61" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r316" x="73.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r334" x="85.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r335" x="97.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r317" x="109.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r318" x="122" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r336" x="134.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r337" x="146.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r319" x="158.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r320" x="170.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r321" x="183" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r322" x="195.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r340" x="207.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r324" x="219.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r325" x="231.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r326" x="244" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r327" x="256.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r328" x="268.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r329" x="280.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r330" x="292.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r331" x="305" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r551" x="317.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r344" x="329.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r552" x="341.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r417" x="353.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r418" x="366" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r348" x="378.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r553" x="390.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r370" x="402.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r371" x="414.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r554" x="427" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r420" x="439.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r421" x="451.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r434" x="463.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r435" x="475.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r436" x="488" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r437" x="500.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r451" x="512.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r423" x="524.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r424" x="536.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r425" x="549" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r438" x="561.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r439" x="573.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r440" x="585.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r441" x="597.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r455" x="610" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r427" x="622.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r428" x="634.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r429" x="646.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r442" x="658.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r443" x="671" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r444" x="683.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r459" x="695.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r460" x="707.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r447" x="719.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r448" x="732" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r449" x="744.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r450" x="756.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r463" x="768.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r464" x="780.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r465" x="793" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r466" x="805.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r467" x="817.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r535" x="829.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r536" x="841.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r537" x="854" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r517" x="866.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r486" x="878.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r538" x="890.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r539" x="902.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r555" x="915" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r556" x="927.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r540" x="939.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r557" x="951.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r541" x="963.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r558" x="976" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r542" x="988.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r521" x="1000.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r559" x="1012.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r543" x="1024.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r544" x="1037" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r525" x="1049.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r560" x="1061.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r545" x="1073.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r546" x="1085.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r547" x="1098" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r561" x="1110.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r562" x="1122.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r563" x="1134.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r564" x="1146.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r565" x="1159" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r566" x="1171.2" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r567" x="1183.4" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r568" x="1195.6" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r569" x="1207.8" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">▀</text><text class="terminal-1811200677-r90" x="1220" y="630" textLength="12.2" clip-path="url(#terminal-1811200677-line-25)">
+</text><text class="terminal-1811200677-r316" x="0" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r350" x="12.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r351" x="24.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r317" x="36.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r318" x="48.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r336" x="61" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r337" x="73.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r338" x="85.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r355" x="97.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r570" x="109.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r357" x="122" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r358" x="134.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r359" x="146.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r360" x="158.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r571" x="170.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r362" x="183" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r363" x="195.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r364" x="207.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r572" x="219.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r331" x="231.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r343" x="244" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r344" x="256.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r345" x="268.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r346" x="280.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r367" x="292.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r368" x="305" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r553" x="317.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r370" x="329.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r371" x="341.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r554" x="353.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r373" x="366" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r374" x="378.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r387" x="390.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r388" x="402.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r436" x="414.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r437" x="427" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r451" x="439.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r452" x="451.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r453" x="463.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r454" x="475.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r469" x="488" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r439" x="500.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r440" x="512.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r441" x="524.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r455" x="536.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r456" x="549" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r457" x="561.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r458" x="573.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r472" x="585.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r443" x="597.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r444" x="610" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r459" x="622.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r460" x="634.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r461" x="646.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r462" x="658.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r475" x="671" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r450" x="683.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r463" x="695.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r464" x="707.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r573" x="719.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r466" x="732" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r574" x="744.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r468" x="756.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r536" x="768.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r484" x="780.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r485" x="793" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r486" x="805.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r538" x="817.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r488" x="829.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r555" x="841.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r556" x="854" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r508" x="866.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r557" x="878.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r510" x="890.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r558" x="902.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r542" x="915" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r575" x="927.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r559" x="939.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r543" x="951.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r576" x="963.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r577" x="976" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r560" x="988.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r545" x="1000.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r578" x="1012.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r579" x="1024.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r580" x="1037" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r562" x="1049.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r581" x="1061.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r564" x="1073.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r565" x="1085.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r582" x="1098" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r583" x="1110.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r568" x="1122.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r569" x="1134.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r584" x="1146.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r585" x="1159" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r586" x="1171.2" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r587" x="1183.4" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r588" x="1195.6" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r589" x="1207.8" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">▀</text><text class="terminal-1811200677-r90" x="1220" y="654.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-26)">
+</text><text class="terminal-1811200677-r289" x="0" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r338" x="12.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r355" x="24.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r356" x="36.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r357" x="48.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r358" x="61" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r359" x="73.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r360" x="85.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r361" x="97.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r377" x="109.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r363" x="122" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r364" x="134.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r365" x="146.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r366" x="158.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r378" x="170.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r379" x="183" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r345" x="195.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r346" x="207.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r367" x="219.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r368" x="231.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r369" x="244" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r383" x="256.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r384" x="268.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r385" x="280.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r373" x="292.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r374" x="305" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r387" x="317.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r388" x="329.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r389" x="341.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r390" x="353.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r391" x="366" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r392" x="378.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r453" x="390.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r454" x="402.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r469" x="414.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r470" x="427" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r471" x="439.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r414" x="451.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r495" x="463.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r456" x="475.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r457" x="488" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r458" x="500.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r472" x="512.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r473" x="524.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r474" x="536.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r498" x="549" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r499" x="561.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r461" x="573.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r462" x="585.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r475" x="597.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r476" x="610" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r477" x="622.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r478" x="634.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r479" x="646.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r480" x="658.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r503" x="671" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r482" x="683.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r483" x="695.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r484" x="707.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r485" x="719.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r505" x="732" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r487" x="744.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r488" x="756.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r555" x="768.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r507" x="780.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r508" x="793" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r509" x="805.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r510" x="817.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r558" x="829.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r590" x="841.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r575" x="854" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r559" x="866.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r524" x="878.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r576" x="890.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r577" x="902.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r591" x="915" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r592" x="927.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r593" x="939.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r594" x="951.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r580" x="963.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r562" x="976" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r581" x="988.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r595" x="1000.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r596" x="1012.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r582" x="1024.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r583" x="1037" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r597" x="1049.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r569" x="1061.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r598" x="1073.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r599" x="1085.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r586" x="1098" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r587" x="1110.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r588" x="1122.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r600" x="1134.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r601" x="1146.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r602" x="1159" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r603" x="1171.2" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r604" x="1183.4" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r605" x="1195.6" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r606" x="1207.8" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">▀</text><text class="terminal-1811200677-r90" x="1220" y="678.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-27)">
+</text><text class="terminal-1811200677-r490" x="0" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r491" x="12.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r393" x="24.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r394" x="36.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r395" x="48.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r396" x="61" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r397" x="73.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r492" x="85.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r378" x="97.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r379" x="109.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r399" x="122" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r381" x="134.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r401" x="146.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r402" x="158.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r382" x="170.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r383" x="183" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r384" x="195.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r385" x="207.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r386" x="219.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r405" x="231.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r406" x="244" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r407" x="256.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r389" x="268.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r390" x="280.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r391" x="292.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r392" x="305" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r409" x="317.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r410" x="329.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r411" x="341.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r470" x="353.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r471" x="366" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r414" x="378.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r495" x="390.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r496" x="402.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r497" x="414.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r430" x="427" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r431" x="439.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r473" x="451.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r474" x="463.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r498" x="475.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r499" x="488" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r500" x="500.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r501" x="512.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r514" x="524.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r476" x="536.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r477" x="549" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r502" x="561.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r515" x="573.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r480" x="585.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r503" x="597.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r482" x="610" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r483" x="622.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r484" x="634.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r504" x="646.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r505" x="658.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r487" x="671" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r488" x="683.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r506" x="695.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r507" x="707.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r519" x="719.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r509" x="732" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r510" x="744.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r511" x="756.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r590" x="768.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r522" x="780.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r523" x="793" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r524" x="805.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r576" x="817.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r526" x="829.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r591" x="841.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r592" x="854" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r593" x="866.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r594" x="878.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r549" x="890.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r607" x="902.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r608" x="915" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r609" x="927.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r596" x="939.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r610" x="951.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r583" x="963.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r597" x="976" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r611" x="988.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r598" x="1000.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r599" x="1012.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r612" x="1024.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r587" x="1037" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r613" x="1049.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r600" x="1061.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r601" x="1073.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r614" x="1085.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r603" x="1098" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r615" x="1110.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r616" x="1122.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r617" x="1134.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r618" x="1146.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r619" x="1159" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r620" x="1171.2" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r621" x="1183.4" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r622" x="1195.6" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r623" x="1207.8" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">▀</text><text class="terminal-1811200677-r90" x="1220" y="703.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-28)">
+</text><text class="terminal-1811200677-r397" x="0" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r398" x="12.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r415" x="24.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r416" x="36.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r399" x="48.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r400" x="61" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r401" x="73.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r402" x="85.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r403" x="97.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r404" x="109.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r513" x="122" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r420" x="134.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r386" x="146.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r405" x="158.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r406" x="170.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r407" x="183" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r408" x="195.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r422" x="207.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r423" x="219.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r424" x="231.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r409" x="244" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r410" x="256.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r411" x="268.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r412" x="280.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r413" x="292.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r426" x="305" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r427" x="317.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r496" x="329.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r497" x="341.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r430" x="353.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r431" x="366" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r432" x="378.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r445" x="390.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r446" x="402.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r447" x="414.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r500" x="427" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r501" x="439.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r514" x="451.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r532" x="463.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r624" x="475.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r502" x="488" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r515" x="500.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r516" x="512.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r503" x="524.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r482" x="536.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r537" x="549" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r517" x="561.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r504" x="573.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r505" x="585.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r539" x="597.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r518" x="610" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r506" x="622.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r540" x="634.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r519" x="646.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r509" x="658.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r520" x="671" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r511" x="683.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r521" x="695.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r522" x="707.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r523" x="719.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r544" x="732" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r525" x="744.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r526" x="756.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r591" x="768.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r546" x="780.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r625" x="793" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r548" x="805.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r549" x="817.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r550" x="829.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r626" x="841.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r609" x="854" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r596" x="866.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r610" x="878.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r583" x="890.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r627" x="902.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r611" x="915" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r598" x="927.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r599" x="939.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r612" x="951.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r628" x="963.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r589" x="976" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r600" x="988.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r601" x="1000.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r614" x="1012.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r629" x="1024.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r615" x="1037" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r616" x="1049.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r630" x="1061.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r618" x="1073.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r619" x="1085.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r631" x="1098" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r621" x="1110.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r622" x="1122.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r632" x="1134.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r633" x="1146.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r634" x="1159" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r635" x="1171.2" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r636" x="1183.4" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r637" x="1195.6" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r638" x="1207.8" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">▀</text><text class="terminal-1811200677-r90" x="1220" y="727.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-29)">
+</text><text class="terminal-1811200677-r530" x="0" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r639" x="12.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r640" x="24.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r531" x="36.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r419" x="48.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r420" x="61" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r421" x="73.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r434" x="85.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r435" x="97.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r436" x="109.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r408" x="122" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r422" x="134.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r423" x="146.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r424" x="158.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r425" x="170.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r438" x="183" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r439" x="195.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r412" x="207.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r413" x="219.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r426" x="231.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r427" x="244" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r428" x="256.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r429" x="268.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r442" x="280.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r443" x="292.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r432" x="305" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r445" x="317.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r446" x="329.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r447" x="341.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r448" x="353.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r449" x="366" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r450" x="378.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r532" x="390.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r464" x="402.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r465" x="414.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r466" x="427" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r467" x="439.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r535" x="451.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r536" x="463.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r537" x="475.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r517" x="488" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r504" x="500.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r538" x="512.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r539" x="524.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r518" x="536.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r556" x="549" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r540" x="561.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r519" x="573.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r541" x="585.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r520" x="597.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r542" x="610" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r521" x="622.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r522" x="634.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r543" x="646.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r544" x="658.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r525" x="671" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r526" x="683.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r545" x="695.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r546" x="707.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r547" x="719.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r548" x="732" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r549" x="744.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r550" x="756.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r564" x="768.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r565" x="780.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r596" x="793" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r610" x="805.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r568" x="817.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r627" x="829.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r611" x="841.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r641" x="854" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r599" x="866.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r642" x="878.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r628" x="890.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r589" x="902.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r643" x="915" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r601" x="927.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r644" x="939.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r629" x="951.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r605" x="963.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r616" x="976" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r630" x="988.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r645" x="1000.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r619" x="1012.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r631" x="1024.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r646" x="1037" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r647" x="1049.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r632" x="1061.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r648" x="1073.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r634" x="1085.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r635" x="1098" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r649" x="1110.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r650" x="1122.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r638" x="1134.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r651" x="1146.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r652" x="1159" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r653" x="1171.2" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r654" x="1183.4" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r655" x="1195.6" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r656" x="1207.8" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">▀</text><text class="terminal-1811200677-r90" x="1220" y="752" textLength="12.2" clip-path="url(#terminal-1811200677-line-30)">
+</text><text class="terminal-1811200677-r421" x="0" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r434" x="12.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r435" x="24.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r436" x="36.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r437" x="48.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r451" x="61" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r452" x="73.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r453" x="85.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r425" x="97.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r438" x="109.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r439" x="122" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r440" x="134.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r441" x="146.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r455" x="158.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r456" x="170.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r428" x="183" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r429" x="195.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r442" x="207.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r443" x="219.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r444" x="231.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r459" x="244" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r460" x="256.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r461" x="268.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r448" x="280.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r449" x="292.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r450" x="305" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r463" x="317.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r464" x="329.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r465" x="341.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r466" x="353.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r467" x="366" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r535" x="378.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r536" x="390.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r537" x="402.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r485" x="414.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r486" x="427" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r538" x="439.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r539" x="451.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r555" x="463.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r556" x="475.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r540" x="488" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r557" x="500.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r541" x="512.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r558" x="524.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r542" x="536.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r575" x="549" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r559" x="561.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r543" x="573.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r544" x="585.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r577" x="597.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r560" x="610" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r545" x="622.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r546" x="634.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r547" x="646.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r580" x="658.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r562" x="671" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r563" x="683.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r564" x="695.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r565" x="707.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r566" x="719.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r567" x="732" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r568" x="744.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r569" x="756.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r611" x="768.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r641" x="780.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r586" x="793" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r587" x="805.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r628" x="817.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r589" x="829.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r643" x="841.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r602" x="854" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r603" x="866.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r629" x="878.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r605" x="890.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r606" x="902.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r630" x="915" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r645" x="927.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r657" x="939.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r631" x="951.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r658" x="963.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r623" x="976" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r632" x="988.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r648" x="1000.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r659" x="1012.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r660" x="1024.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r649" x="1037" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r661" x="1049.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r662" x="1061.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r651" x="1073.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r652" x="1085.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r653" x="1098" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r654" x="1110.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r663" x="1122.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r656" x="1134.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r664" x="1146.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r665" x="1159" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r666" x="1171.2" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r667" x="1183.4" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r668" x="1195.6" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r669" x="1207.8" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">▀</text><text class="terminal-1811200677-r90" x="1220" y="776.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-31)">
+</text><text class="terminal-1811200677-r452" x="0" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r453" x="12.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r454" x="24.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r469" x="36.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r470" x="48.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r471" x="61" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r441" x="73.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r455" x="85.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r456" x="97.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r457" x="109.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r458" x="122" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r472" x="134.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r473" x="146.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r444" x="158.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r459" x="170.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r460" x="183" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r461" x="195.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r462" x="207.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r475" x="219.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r476" x="231.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r477" x="244" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r478" x="256.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r573" x="268.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r466" x="280.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r574" x="292.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r468" x="305" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r536" x="317.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r484" x="329.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r485" x="341.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r486" x="353.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r487" x="366" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r488" x="378.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r555" x="390.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r556" x="402.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r508" x="414.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r557" x="427" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r510" x="439.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r558" x="451.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r590" x="463.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r575" x="475.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r559" x="488" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r543" x="500.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r576" x="512.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r577" x="524.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r560" x="536.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r545" x="549" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r593" x="561.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r579" x="573.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r580" x="585.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r562" x="597.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r581" x="610" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r595" x="622.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r565" x="634.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r582" x="646.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r583" x="658.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r568" x="671" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r569" x="683.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r584" x="695.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r585" x="707.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r586" x="719.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r587" x="732" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r588" x="744.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r589" x="756.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r670" x="768.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r602" x="780.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r603" x="793" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r604" x="805.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r605" x="817.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r606" x="829.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r671" x="841.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r645" x="854" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r620" x="866.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r621" x="878.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r658" x="890.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r623" x="902.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r672" x="915" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r648" x="927.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r673" x="939.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r636" x="951.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r649" x="963.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r661" x="976" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r662" x="988.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r674" x="1000.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r675" x="1012.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r653" x="1024.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r654" x="1037" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r663" x="1049.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r676" x="1061.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r664" x="1073.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r665" x="1085.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r666" x="1098" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r677" x="1110.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r668" x="1122.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r678" x="1134.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r679" x="1146.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r680" x="1159" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r681" x="1171.2" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r682" x="1183.4" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r683" x="1195.6" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r684" x="1207.8" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">▀</text><text class="terminal-1811200677-r90" x="1220" y="800.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-32)">
+</text><text class="terminal-1811200677-r414" x="0" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r495" x="12.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r496" x="24.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r457" x="36.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r458" x="48.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r472" x="61" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r473" x="73.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r474" x="85.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r498" x="97.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r499" x="109.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r500" x="122" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r462" x="134.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r475" x="146.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r476" x="158.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r477" x="170.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r502" x="183" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r479" x="195.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r480" x="207.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r503" x="219.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r482" x="231.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r483" x="244" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r484" x="256.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r485" x="268.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r505" x="280.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r487" x="292.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r488" x="305" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r555" x="317.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r507" x="329.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r508" x="341.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r509" x="353.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r510" x="366" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r511" x="378.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r590" x="390.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r575" x="402.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r523" x="414.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r524" x="427" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r576" x="439.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r577" x="451.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r591" x="463.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r592" x="475.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r593" x="488" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r594" x="500.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r580" x="512.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r562" x="524.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r608" x="536.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r609" x="549" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r596" x="561.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r582" x="573.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r583" x="585.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r597" x="597.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r569" x="610" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r598" x="622.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r599" x="634.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r586" x="646.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r587" x="658.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r613" x="671" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r600" x="683.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r601" x="695.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r602" x="707.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r603" x="719.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r604" x="732" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r685" x="744.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r617" x="756.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r618" x="768.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r619" x="780.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r620" x="793" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r621" x="805.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r622" x="817.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r623" x="829.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r672" x="841.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r634" x="854" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r673" x="866.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r636" x="878.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r637" x="890.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r661" x="902.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r662" x="915" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r674" x="927.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r675" x="939.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r686" x="951.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r654" x="963.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r687" x="976" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r676" x="988.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r664" x="1000.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r665" x="1012.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r688" x="1024.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r677" x="1037" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r668" x="1049.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r678" x="1061.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r689" x="1073.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r690" x="1085.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r681" x="1098" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r682" x="1110.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r683" x="1122.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r691" x="1134.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r692" x="1146.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r693" x="1159" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r694" x="1171.2" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r695" x="1183.4" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r696" x="1195.6" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r697" x="1207.8" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">▀</text><text class="terminal-1811200677-r90" x="1220" y="825.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-33)">
+</text><text class="terminal-1811200677-r432" x="0" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r474" x="12.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r498" x="24.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r499" x="36.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r500" x="48.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r501" x="61" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r514" x="73.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r476" x="85.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r477" x="97.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r502" x="109.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r515" x="122" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r480" x="134.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r503" x="146.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r482" x="158.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r483" x="170.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r517" x="183" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r504" x="195.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r505" x="207.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r487" x="219.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r518" x="231.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r506" x="244" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r507" x="256.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r519" x="268.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r509" x="280.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r520" x="292.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r511" x="305" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r590" x="317.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r522" x="329.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r523" x="341.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r524" x="353.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r525" x="366" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r526" x="378.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r591" x="390.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r592" x="402.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r593" x="414.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r548" x="427" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r549" x="439.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r550" x="451.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r608" x="463.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r609" x="475.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r596" x="488" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r610" x="500.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r583" x="512.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r597" x="524.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r611" x="536.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r598" x="549" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r599" x="561.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r612" x="573.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r628" x="585.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r613" x="597.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r600" x="610" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r601" x="622.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r614" x="634.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r629" x="646.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r615" x="658.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r616" x="671" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r630" x="683.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r618" x="695.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r619" x="707.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r631" x="719.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r621" x="732" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r622" x="744.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r698" x="756.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r633" x="768.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r634" x="780.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r673" x="793" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r636" x="805.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r637" x="817.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r699" x="829.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r700" x="841.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r701" x="854" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r702" x="866.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r703" x="878.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r655" x="890.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r687" x="902.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r676" x="915" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r704" x="927.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r705" x="939.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r688" x="951.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r706" x="963.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r668" x="976" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r678" x="988.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r707" x="1000.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r690" x="1012.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r708" x="1024.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r709" x="1037" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r683" x="1049.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r691" x="1061.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r710" x="1073.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r711" x="1085.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r712" x="1098" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r713" x="1110.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r696" x="1122.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r697" x="1134.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r714" x="1146.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r715" x="1159" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r716" x="1171.2" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r717" x="1183.4" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r718" x="1195.6" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r719" x="1207.8" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">▀</text><text class="terminal-1811200677-r90" x="1220" y="849.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-34)">
+</text><text class="terminal-1811200677-r514" x="0" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r532" x="12.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r533" x="24.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r465" x="36.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r534" x="48.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r516" x="61" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r503" x="73.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r482" x="85.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r537" x="97.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r517" x="109.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r504" x="122" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r505" x="134.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r539" x="146.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r518" x="158.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r506" x="170.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r540" x="183" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r519" x="195.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r541" x="207.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r520" x="219.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r511" x="231.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r521" x="244" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r522" x="256.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r523" x="268.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r544" x="280.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r525" x="292.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r526" x="305" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r591" x="317.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r546" x="329.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r625" x="341.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r548" x="353.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r549" x="366" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r550" x="378.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r626" x="390.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r720" x="402.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r596" x="414.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r610" x="427" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r721" x="439.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r627" x="451.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r611" x="463.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r641" x="475.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r599" x="488" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r642" x="500.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r628" x="512.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r589" x="524.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r600" x="536.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r601" x="549" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r644" x="561.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r629" x="573.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r605" x="585.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r616" x="597.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r630" x="610" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r618" x="622.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r619" x="634.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r631" x="646.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r621" x="658.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r622" x="671" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r632" x="683.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r633" x="695.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r634" x="707.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r635" x="719.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r636" x="732" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r650" x="744.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r638" x="756.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r651" x="768.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r652" x="780.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r702" x="793" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r703" x="805.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r655" x="817.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r656" x="829.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r676" x="841.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r722" x="854" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r666" x="866.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r688" x="878.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r706" x="890.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r723" x="902.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r679" x="915" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r707" x="927.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r690" x="939.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r708" x="951.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r709" x="963.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r684" x="976" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r724" x="988.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r710" x="1000.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r725" x="1012.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r712" x="1024.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r713" x="1037" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r726" x="1049.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r697" x="1061.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r727" x="1073.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r715" x="1085.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r728" x="1098" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r717" x="1110.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r729" x="1122.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r719" x="1134.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r730" x="1146.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r731" x="1159" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r732" x="1171.2" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r733" x="1183.4" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r734" x="1195.6" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r735" x="1207.8" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">▀</text><text class="terminal-1811200677-r90" x="1220" y="874" textLength="12.2" clip-path="url(#terminal-1811200677-line-35)">
+</text><text class="terminal-1811200677-r535" x="0" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r536" x="12.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r537" x="24.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r517" x="36.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r486" x="48.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r538" x="61" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r539" x="73.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r518" x="85.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r556" x="97.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r540" x="109.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r557" x="122" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r541" x="134.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r520" x="146.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r542" x="158.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r521" x="170.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r559" x="183" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r543" x="195.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r544" x="207.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r525" x="219.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r560" x="231.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r545" x="244" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r546" x="256.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r547" x="268.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r561" x="280.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r549" x="292.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r563" x="305" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r564" x="317.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r565" x="329.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r566" x="341.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r610" x="353.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r568" x="366" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r569" x="378.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r611" x="390.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r641" x="402.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r586" x="414.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r642" x="427" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r628" x="439.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r589" x="451.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r643" x="463.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r602" x="475.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r644" x="488" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r629" x="500.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r605" x="512.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r616" x="524.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r630" x="536.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r645" x="549" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r619" x="561.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r631" x="573.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r646" x="585.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r647" x="597.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r632" x="610" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r648" x="622.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r634" x="634.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r635" x="646.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r649" x="658.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r661" x="671" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r638" x="683.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r651" x="695.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r652" x="707.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r653" x="719.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r654" x="732" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r655" x="744.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r656" x="756.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r664" x="768.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r722" x="780.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r666" x="793" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r667" x="805.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r706" x="817.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r669" x="829.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r679" x="841.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r680" x="854" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r736" x="866.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r708" x="878.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r737" x="890.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r684" x="902.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r692" x="915" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r738" x="927.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r725" x="939.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r739" x="951.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r713" x="963.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r726" x="976" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r697" x="988.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r727" x="1000.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r740" x="1012.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r728" x="1024.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r741" x="1037" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r729" x="1049.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r742" x="1061.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r730" x="1073.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r731" x="1085.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r732" x="1098" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r733" x="1110.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r743" x="1122.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r735" x="1134.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r744" x="1146.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r745" x="1159" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r746" x="1171.2" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r747" x="1183.4" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r748" x="1195.6" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r749" x="1207.8" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">▀</text><text class="terminal-1811200677-r90" x="1220" y="898.4" textLength="12.2" clip-path="url(#terminal-1811200677-line-36)">
+</text><text class="terminal-1811200677-r488" x="0" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r555" x="12.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r556" x="24.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r508" x="36.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r557" x="48.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r541" x="61" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r558" x="73.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r542" x="85.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r575" x="97.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r559" x="109.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r543" x="122" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r544" x="134.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r577" x="146.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r560" x="158.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r545" x="170.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r546" x="183" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r579" x="195.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r580" x="207.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r562" x="219.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r581" x="231.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r564" x="244" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r565" x="256.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r566" x="268.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r583" x="280.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r568" x="292.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r569" x="305" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r611" x="317.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r585" x="329.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r586" x="341.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r587" x="353.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r628" x="366" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r589" x="378.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r670" x="390.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r602" x="402.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r603" x="414.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r629" x="427" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r605" x="439.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r606" x="451.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r630" x="463.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r645" x="475.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r657" x="488" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r631" x="500.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r658" x="512.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r623" x="524.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r632" x="536.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r648" x="549" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r659" x="561.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r660" x="573.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r649" x="585.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r661" x="597.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r662" x="610" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r674" x="622.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r652" x="634.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r653" x="646.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r654" x="658.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r663" x="671" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r750" x="683.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r664" x="695.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r665" x="707.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r666" x="719.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r667" x="732" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r668" x="744.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r669" x="756.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r679" x="768.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r680" x="780.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r736" x="793" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r682" x="805.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r737" x="817.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r684" x="829.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r692" x="841.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r693" x="854" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r725" x="866.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r751" x="878.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r752" x="890.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r726" x="902.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r753" x="915" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r754" x="927.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r716" x="939.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r728" x="951.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r741" x="963.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r755" x="976" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r742" x="988.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r730" x="1000.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r731" x="1012.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r732" x="1024.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r734" x="1037" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r743" x="1049.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r735" x="1061.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r744" x="1073.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r745" x="1085.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r746" x="1098" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r747" x="1110.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r748" x="1122.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r749" x="1134.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r756" x="1146.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r757" x="1159" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r758" x="1171.2" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r759" x="1183.4" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r760" x="1195.6" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r761" x="1207.8" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">▀</text><text class="terminal-1811200677-r90" x="1220" y="922.8" textLength="12.2" clip-path="url(#terminal-1811200677-line-37)">
+</text><text class="terminal-1811200677-r558" x="0" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r590" x="12.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r575" x="24.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r559" x="36.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r524" x="48.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r576" x="61" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r577" x="73.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r560" x="85.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r592" x="97.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r593" x="109.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r579" x="122" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r580" x="134.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r562" x="146.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r581" x="158.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r595" x="170.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r565" x="183" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r582" x="195.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r583" x="207.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r568" x="219.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r569" x="231.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r598" x="244" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r585" x="256.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r586" x="268.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r587" x="280.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r588" x="292.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r600" x="305" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r670" x="317.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r602" x="329.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r603" x="341.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r604" x="353.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r605" x="366" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r606" x="378.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r671" x="390.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r762" x="402.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r620" x="414.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r621" x="427" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r658" x="439.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r623" x="451.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r672" x="463.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r648" x="475.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r673" x="488" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r636" x="500.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r649" x="512.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r661" x="524.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r662" x="536.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r674" x="549" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r675" x="561.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r653" x="573.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r654" x="585.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r687" x="597.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r676" x="610" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r664" x="622.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r665" x="634.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r763" x="646.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r677" x="658.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r668" x="671" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r678" x="683.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r689" x="695.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r680" x="707.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r681" x="719.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r682" x="732" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r683" x="744.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r691" x="756.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r692" x="768.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r693" x="780.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r694" x="793" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r751" x="805.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r752" x="817.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r726" x="829.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r714" x="841.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r715" x="854" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r716" x="866.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r764" x="878.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r718" x="890.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r719" x="902.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r742" x="915" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r730" x="927.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r731" x="939.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r733" x="951.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r734" x="963.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r743" x="976" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r735" x="988.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r744" x="1000.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r745" x="1012.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r746" x="1024.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r747" x="1037" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r749" x="1049.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r756" x="1061.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r765" x="1073.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r757" x="1085.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r758" x="1098" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r759" x="1110.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r760" x="1122.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r766" x="1134.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r767" x="1146.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r768" x="1159" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r769" x="1171.2" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r770" x="1183.4" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r771" x="1195.6" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r772" x="1207.8" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">▀</text><text class="terminal-1811200677-r90" x="1220" y="947.2" textLength="12.2" clip-path="url(#terminal-1811200677-line-38)">
+</text><text class="terminal-1811200677-r577" x="0" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r591" x="12.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r592" x="24.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r593" x="36.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r594" x="48.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r773" x="61" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r607" x="73.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r608" x="85.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r609" x="97.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r596" x="109.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r582" x="122" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r583" x="134.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r597" x="146.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r774" x="158.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r598" x="170.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r599" x="183" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r586" x="195.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r587" x="207.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r613" x="219.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r600" x="231.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r601" x="244" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r614" x="256.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r603" x="268.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r604" x="280.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r616" x="292.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r617" x="305" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r618" x="317.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r619" x="329.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r620" x="341.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r621" x="353.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r622" x="366" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r623" x="378.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r672" x="390.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r634" x="402.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r673" x="414.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r636" x="427" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r637" x="439.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r699" x="451.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r662" x="463.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r674" x="475.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r675" x="488" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r686" x="500.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r655" x="512.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r687" x="524.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r676" x="536.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r704" x="549" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r665" x="561.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r688" x="573.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r706" x="585.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r668" x="597.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r678" x="610" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r689" x="622.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r690" x="634.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r708" x="646.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r682" x="658.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r683" x="671" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r691" x="683.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r692" x="695.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r693" x="707.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r712" x="719.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r695" x="732" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r696" x="744.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r697" x="756.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r714" x="768.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r715" x="780.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r716" x="793" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r717" x="805.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r718" x="817.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r719" x="829.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r742" x="841.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r730" x="854" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r732" x="866.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r733" x="878.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r734" x="890.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r743" x="902.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r735" x="915" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r744" x="927.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r746" x="939.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r747" x="951.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r748" x="963.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r749" x="976" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r756" x="988.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r765" x="1000.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r757" x="1012.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r758" x="1024.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r759" x="1037" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r761" x="1049.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r766" x="1061.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r767" x="1073.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r768" x="1085.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r775" x="1098" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r770" x="1110.2" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r771" x="1122.4" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r772" x="1134.6" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r776" x="1146.8" y="971.6" textLength="12.2" clip-path="url(#terminal-1811200677-line-39)">▀</text><text class="terminal-1811200677-r777" x="1159" y="971.6" textLength="61" clip-path="url(#terminal-1811200677-line-39)">▀▀▀▀▀</text>
     </g>
     </g>
 </svg>
diff --git a/search/search_index.json b/search/search_index.json
index 0e91adcada..2019caf680 100644
--- a/search/search_index.json
+++ b/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Home","text":"<p>Tip</p> <p>See the navigation links in the header or side-bar.</p> <p>Click  (top left) on mobile.</p>"},{"location":"#welcome","title":"Welcome","text":"<p>Welcome to the Textual framework documentation.</p> <p>Get started or go straight to the Tutorial</p>"},{"location":"#what-is-textual","title":"What is Textual?","text":"<p>Textual is a Rapid Application Development framework for Python, built by Textualize.io.</p> <p>Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal or a web browser!</p> <ul> <li> <p> Rapid development</p> <p>Uses your existing Python skills to build beautiful user interfaces.</p> </li> <li> <p> Low requirements</p> <p>Run Textual on a single board computer if you want to.</p> </li> <li> <p> Cross platform</p> <p>Textual runs just about everywhere.</p> </li> <li> <p> Remote</p> <p>Textual apps can run over SSH.</p> </li> <li> <p> CLI Integration</p> <p>Textual apps can be launched and run from the command prompt.</p> </li> <li> <p> Open Source</p> <p>Textual is licensed under MIT.</p> </li> </ul> UI \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258afeeds\u258e\u258a\u2590X\u258c\u00a0Case\u00a0sensitive\u258e\u258a\u2590X\u258c\u00a0Regex\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503162.71.236.120\u00a0-\u00a0-\u00a0[29/Jan/2024:13:34:58\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Net\u2503 \u250352.70.240.171\u00a0-\u00a0-\u00a0[29/Jan/2024:13:35:33\u00a0+0000]\"GET\u00a0/2007/07/10/postmarkup-105/\u00a0HTTP/1.1\"3010\u2503 \u2503121.137.55.45\u00a0-\u00a0-\u00a0[29/Jan/2024:13:36:19\u00a0+0000]\"GET\u00a0/blog/rootblog/feeds/posts/\u00a0HTTP/1.1\"20010\u2503 \u250398.207.26.211\u00a0-\u00a0-\u00a0[29/Jan/2024:13:36:37\u00a0+0000]\"GET\u00a0/feeds/posts\u00a0HTTP/1.1\"3070\"-\"\"Mozilla/5.\u2503 \u250398.207.26.211\u00a0-\u00a0-\u00a0[29/Jan/2024:13:36:42\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"20098063\"-\"\"Mozil\u2503 \u250318.183.222.19\u00a0-\u00a0-\u00a0[29/Jan/2024:13:37:44\u00a0+0000]\"GET\u00a0/blog/rootblog/feeds/posts/\u00a0HTTP/1.1\"20010\u2503 \u250366.249.64.164\u00a0-\u00a0-\u00a0[29/Jan/2024:13:37:46\u00a0+0000]\"GET\u00a0/blog/tech/post/a-texture-mapped-spinning-3d\u2503 \u2503116.203.207.165\u00a0-\u00a0-\u00a0[29/Jan/2024:13:37:55\u00a0+0000]\"GET\u00a0/blog/tech/feeds/posts/\u00a0HTTP/1.1\"2001182\u2503 \u2503128.65.195.158\u00a0-\u00a0-\u00a0[29/Jan/2024:13:38:44\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"https:/\u2503 \u2503128.65.195.158\u00a0-\u00a0-\u00a0[29/Jan/2024:13:38:46\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"https:/\u2503 \u250351.222.253.12\u00a0-\u00a0-\u00a0[29/Jan/2024:13:41:17\u00a0+0000]\"GET\u00a0/blog/tech/post/css-in-the-terminal-with-pyt\u2503 \u2503154.159.237.77\u00a0-\u00a0-\u00a0[29/Jan/2024:13:42:28\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Moz\u2503 \u250392.247.181.10\u00a0-\u00a0-\u00a0[29/Jan/2024:13:43:23\u00a0+0000]\"GET\u00a0/feed/\u00a0HTTP/1.1\"200107059\"https://www.wil\u2503 \u2503134.209.40.52\u00a0-\u00a0-\u00a0[29/Jan/2024:13:43:41\u00a0+0000]\"GET\u00a0/blog/tech/feeds/posts/\u00a0HTTP/1.1\"200118238\u2503 \u2503192.3.134.205\u00a0-\u00a0-\u00a0[29/Jan/2024:13:43:55\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Mozi\u2503 \u2503174.136.108.22\u00a0-\u00a0-\u00a0[29/Jan/2024:13:44:42\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Tin\u2503 \u250364.71.157.117\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:16\u00a0+0000]\"GET\u00a0/feed/\u00a0HTTP/1.1\"200107059\"-\"\"Feedbin\u00a0fee\u2503 \u2503121.137.55.45\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:19\u00a0+0000]\"GET\u00a0/blog/rootblog/feeds/posts/\u00a0HTTP/1.1\"20010\u2503 \u2503216.244.66.233\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:22\u00a0+0000]\"GET\u00a0/robots.txt\u00a0HTTP/1.1\"200132\"-\"\"Mozilla/\u2503 \u250378.82.5.250\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:29\u00a0+0000]\"GET\u00a0/blog/tech/post/real-working-hyperlinks-in-the\u2503 \u250378.82.5.250\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:30\u00a0+0000]\"GET\u00a0/favicon.ico\u00a0HTTP/1.1\"2005694\"https://www.w\u2581\u2581\u2503 \u250346.244.252.112\u00a0-\u00a0-\u00a0[29/Jan/2024:13:46:44\u00a0+0000]\"GET\u00a0/blog/tech/feeds/posts/\u00a0HTTP/1.1\"20011823\u2581\u2581\u2503 \u2503\u258c\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b f1\u00a0Help^t\u00a0Tail^l\u00a0Line\u00a0nos.^g\u00a0Go\u00a0to\u2193\u00a0Next\u2191\u00a0PreviousTAIL29/01/2024\u00a013:34:58\u00a0\u2022\u00a02540 Frogmouth https://raw.githubusercontent.com/textualize/frogmouth/main/README.md \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\ud83d\uddbc\u00a0\u00a0Discord\u2503ContentsLocalBookmarksHistory \u2503\u2503\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2503 \u2503\u258e\u258a\u2503\u25bc\u00a0\u2160\u00a0Frogmouth \u2503\u258eFrogmouth\u258a\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Screenshots \u2503\u258e\u258a\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Compatibility \u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Installing \u2503Frogmouth\u00a0is\u00a0a\u00a0Markdown\u00a0viewer\u00a0/\u00a0browser\u00a0for\u00a0your\u00a0terminal,\u00a0\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Running \u2503built\u00a0with\u00a0Textual.\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Features \u2503\u2503\u2514\u2500\u2500\u00a0\u2161\u00a0Follow\u00a0this\u00a0project \u2503Frogmouth\u00a0can\u00a0open\u00a0*.md\u00a0files\u00a0locally\u00a0or\u00a0via\u00a0a\u00a0URL.\u00a0There\u00a0is\u00a0a\u00a0\u2503 \u2503familiar\u00a0browser-like\u00a0navigation\u00a0stack,\u00a0history,\u00a0bookmarks,\u00a0and\u2503 \u2503table\u00a0of\u00a0contents.\u2585\u2585\u2503 \u2503\u2503 \u2503A\u00a0quick\u00a0video\u00a0tour\u00a0of\u00a0Frogmouth.\u2503 \u2503\u2503 \u2503https://user-images.githubusercontent.com/554369/235305502-2699\u2503 \u2503a70e-c9a6-495e-990e-67606d84bbfa.mp4\u2503 \u2503\u2503 \u2503(thanks\u00a0Screen\u00a0Studio)\u2503 \u2503\u2503 \u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2503 \u2503\u258e\u258a\u2503 \u2503\u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Screenshots\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u2503 \u2503\u258e\u258a\u2503 \u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2503 \u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2503 \u2503\u258e\u258a\u2503 \u2503\u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Compatibility\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u2503 \u2503\u258e\u258a\u2503 \u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2503 \u2503Frogmouth\u00a0runs\u00a0on\u00a0Linux,\u00a0macOS,\u00a0and\u00a0Windows.\u00a0Frogmouth\u00a0requires\u2503 \u2503Python\u00a03.8\u00a0or\u00a0above.\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u00a0F1\u00a0\u00a0Help\u00a0\u00a0F2\u00a0\u00a0About\u00a0\u00a0CTRL+N\u00a0\u00a0Navigation\u00a0\u00a0CTRL+Q\u00a0\u00a0Quit\u00a0 TUIApp Memray\u00a0live\u00a0tracking\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Tue\u00a0Feb\u00a020\u00a013:53:11\u00a02024 \u00a0(\u2229\uff40-\u00b4)\u2283\u2501\u2606\uff9f.*\uff65\uff61\uff9f\u00a0\u256d\u2500\u00a0Heap\u00a0Usage\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e PID:\u00a077542CMD:\u00a0memray\u00a0run\u00a0--live\u00a0-m\u00a0http.server\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 TID:\u00a00x1Thread\u00a01\u00a0of\u00a01\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 Samples:\u00a06Duration:\u00a06.1\u00a0seconds\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 \u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 \u2570\u2500\u2500\u00a01.501MB\u00a0(100%\u00a0of\u00a01.501MB\u00a0max)\u00a0\u2500\u256f \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Location\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Total\u00a0Bytes%\u00a0TotalOwn\u00a0Bytes%\u00a0OwnAllocations \u00a0_run_tracker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.440MB\u00a095.94%\u00a0\u00a01.111KB0.07%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0440\u00a0memray.comman \u00a0_run_module_code\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.381MB\u00a091.99%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0388\u00a0&lt;frozen\u00a0runpy \u00a0_find_and_load\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.364MB\u00a090.86%\u00a0960.000B0.06%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0361\u00a0&lt;frozen\u00a0impor \u00a0_load_unlocked\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.360MB\u00a090.62%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0355\u00a0&lt;frozen\u00a0impor\u2584\u2584 \u00a0exec_module\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.355MB\u00a090.28%\u00a0\u00a01.225KB0.08%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0351\u00a0&lt;frozen\u00a0impor \u00a0run_module\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.351MB\u00a090.00%\u00a0\u00a01.273KB0.08%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0354\u00a0&lt;frozen\u00a0runpy \u00a0_run_code\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.334MB\u00a088.90%\u00a0890.000B0.06%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0341\u00a0&lt;frozen\u00a0runpy \u00a0_call_with_frames_removed\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.298MB\u00a086.49%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0283\u00a0&lt;frozen\u00a0impor \u00a0get_code\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.168MB\u00a077.80%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0185\u00a0&lt;frozen\u00a0impor \u00a0&lt;module&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.095MB\u00a072.96%\u00a0\u00a01.688KB0.11%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a095\u00a0http.server\u00a0\u00a0 \u00a0_find_and_load_unlocked\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a059.031KB\u00a0\u00a03.84%\u00a0\u00a0\u00a01.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a040\u00a0&lt;frozen\u00a0impor \u00a0test\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a042.097KB\u00a0\u00a02.74%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a027\u00a0http.server\u00a0\u00a0 \u00a0__init__\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a041.565KB\u00a0\u00a02.70%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a020\u00a0socketserver\u00a0 \u00a0getfqdn\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a040.933KB\u00a0\u00a02.66%\u00a0\u00a02.135KB0.14%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a018\u00a0socket\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0server_bind\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a040.933KB\u00a0\u00a02.66%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a018\u00a0http.server\u00a0\u00a0 \u00a0search_function\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a038.798KB\u00a0\u00a02.52%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a016\u00a0encodings\u00a0\u00a0\u00a0\u00a0 \u00a0_handle_fromlist\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a029.723KB\u00a0\u00a01.93%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a033\u00a0&lt;frozen\u00a0impor \u00a0&lt;module&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a024.617KB\u00a0\u00a01.60%\u00a0\u00a01.688KB0.11%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0encodings.idn \u00a0_compile\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a023.629KB\u00a0\u00a01.54%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a011\u00a0re\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a \u00a0Q\u00a0\u00a0Quit\u00a0\u00a0&lt;\u00a0\u00a0Previous\u00a0Thread\u00a0\u00a0&gt;\u00a0\u00a0Next\u00a0Thread\u00a0\u00a0T\u00a0\u00a0Sort\u00a0by\u00a0Total\u00a0\u00a0O\u00a0\u00a0Sort\u00a0by\u00a0Own\u00a0\u00a0A\u00a0\u00a0Sort\u00a0by\u00a0Allocations\u00a0\u00a0SPACE\u00a0\u00a0Pause\u00a0 <p> <p></p> <p></p> Harlequin\u256d\u2500\u00a0Data\u00a0Catalog\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u00a0Query\u00a0Editor\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u25bc\u00a0f1\u00a0db\u2502\u2502\u00a01\u00a0\u00a0select\u2502 \u2502\u2514\u2500\u00a0\u25bc\u00a0main\u00a0sch\u2502\u2502\u00a02\u00a0\u00a0drivers.surname,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0circuits\u00a0t\u2502\u2502\u00a03\u00a0\u00a0drivers.forename,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0constructor_result\u2502\u2502\u00a04\u00a0\u00a0drivers.nationality,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0constructor_standi\u2502\u2502\u00a05\u00a0\u00a0avg(driver_standings.position)asavg_standing,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0constructors\u00a0t\u2502\u2502\u00a06\u00a0\u00a0avg(driver_standings.points)asavg_points\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0driver_standings\u00a0t\u2502\u2502\u00a07\u00a0\u00a0fromdriver_standings\u2502 \u2502\u251c\u2500\u00a0\u25bc\u00a0drivers\u00a0t\u2502\u2502\u00a08\u00a0\u00a0joindriversondriver_standings.driverid=drivers.driverid\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0code\u00a0s\u2502\u2502\u00a09\u00a0\u00a0joinracesondriver_standings.raceid=races.raceid\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0dob\u00a0d\u2502\u250210\u00a0\u00a0groupby1,\u00a02,\u00a03\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0driverId\u00a0##\u2502\u250211\u00a0\u00a0orderbyavg_standing\u00a0asc\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0driverRef\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0forename\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0nationality\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0number\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0surname\u00a0s\u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u2502\u2502\u00a0\u00a0\u2514\u2500\u00a0url\u00a0s\u2502\u2590X\u258c\u00a0Limit\u00a0500Run\u00a0Query \u2502\u251c\u2500\u00a0\u25b6\u00a0lap_times\u00a0t\u2502\u256d\u2500\u00a0Query\u00a0Results\u00a0(850\u00a0Records)\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u251c\u2500\u00a0\u25b6\u00a0pit_stops\u00a0t\u2502\u2502\u00a0surname\u00a0s\u00a0forename\u00a0s\u00a0nationality\u00a0s\u00a0avg_standing\u00a0#.#\u00a0av\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0qualifying\u00a0t\u2502\u2502\u00a0Hamilton\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Lewis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0British\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02.66\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a014\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0races\u00a0t\u2502\u2502\u00a0Prost\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Alain\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0French\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03.51\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a033\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0results\u00a0t\u2502\u2502\u00a0Stewart\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Jackie\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0British\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03.78\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a024\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0seasons\u00a0t\u2502\u2502\u00a0Schumacher\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0German\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04.33\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a046\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0sprint_results\u00a0t\u2502\u2502\u00a0Verstappen\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Max\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Dutch\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a012\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0status\u00a0t\u2502\u2502\u00a0Fangio\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Juan\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Argentine\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.22\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a016\u2502 \u2502\u2514\u2500\u00a0\u25b6\u00a0tbl1\u00a0t\u2502\u2502\u00a0Pablo\u00a0Montoya\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Juan\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Colombian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.25\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a027\u2502 \u2502\u2502\u2502\u00a0Farina\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Nino\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Italian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.27\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a011\u2502 \u2502\u2502\u2502\u00a0Hulme\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Denny\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0New\u00a0Zealander\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.34\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a014\u2502 \u2502\u2502\u2502\u00a0Fagioli\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Luigi\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Italian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.67\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a09.\u2502 \u2502\u2502\u2502\u00a0Clark\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Jim\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0British\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.81\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a017\u2502 \u2502\u2502\u2502\u00a0Vettel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Sebastian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0German\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.84\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a010\u2502 \u2502\u2502\u2502\u00a0Senna\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ayrton\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Brazilian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.92\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a031\u2502 \u2502\u258c\u2502\u2502\u258c\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u00a0CTRL+Q\u00a0\u00a0Quit\u00a0\u00a0F1\u00a0\u00a0Help\u00a0 Stopwatch tutorialstopwatch.pystopwatch.tcss <p></p> <pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n    def start(self) -&gt; None:\n        \"\"\"Method to start (or resume) time updating.\"\"\"\n        self.start_time = monotonic()\n        self.update_timer.resume()\n\n    def stop(self):\n        \"\"\"Method to stop the time display updating.\"\"\"\n        self.update_timer.pause()\n        self.total += monotonic() - self.start_time\n        self.time = self.total\n\n    def reset(self):\n        \"\"\"Method to reset the time display to zero.\"\"\"\n        self.total = 0\n        self.time = 0\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch.tcss\"\n\n    BINDINGS = [\n        (\"d\", \"toggle_dark\", \"Toggle dark mode\"),\n        (\"a\", \"add_stopwatch\", \"Add\"),\n        (\"r\", \"remove_stopwatch\", \"Remove\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Called to add widgets to the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch(), id=\"timers\")\n\n    def action_add_stopwatch(self) -&gt; None:\n        \"\"\"An action to add a timer.\"\"\"\n        new_stopwatch = Stopwatch()\n        self.query_one(\"#timers\").mount(new_stopwatch)\n        new_stopwatch.scroll_visible()\n\n    def action_remove_stopwatch(self) -&gt; None:\n        \"\"\"Called to remove a timer.\"\"\"\n        timers = self.query(\"Stopwatch\")\n        if timers:\n            timers.last().remove()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    overflow: auto;\n}\n\n#calculator {\n    layout: grid;\n    grid-size: 4;\n    grid-gutter: 1 2;\n    grid-columns: 1fr;\n    grid-rows: 2fr 1fr 1fr 1fr 1fr 1fr;\n    margin: 1 2;\n    min-height: 25;\n    min-width: 26;\n    height: 100%;\n\n    &amp;:inline {\n        margin: 0 2;\n    }\n}\n\nButton {\n    width: 100%;\n    height: 100%;\n}\n\n#numbers {\n    column-span: 4;\n    padding: 0 1;\n    height: 100%;\n    background: $primary-lighten-2;\n    color: $text;\n    content-align: center middle;\n    text-align: right;\n}\n\n#number-0 {\n    column-span: 2;\n}\n</code></pre> Pride examplepride.py <p> PrideApp </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass PrideApp(App):\n    \"\"\"Displays a pride flag.\"\"\"\n\n    COLORS = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\"]\n\n    def compose(self) -&gt; ComposeResult:\n        for color in self.COLORS:\n            stripe = Static()\n            stripe.styles.height = \"1fr\"\n            stripe.styles.background = color\n            yield stripe\n\n\nif __name__ == \"__main__\":\n    PrideApp().run()\n</code></pre> Calculator examplecalculator.pycalculator.tcss <p> CalculatorApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0C\u00a0\u00a0+/-\u00a0\u00a0%\u00a0\u00a0\u00f7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a07\u00a0\u00a08\u00a0\u00a09\u00a0\u00a0\u00d7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a04\u00a0\u00a05\u00a0\u00a06\u00a0\u00a0-\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a01\u00a0\u00a02\u00a0\u00a03\u00a0\u00a0+\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a00\u00a0\u00a0.\u00a0\u00a0=\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <pre><code>\"\"\"\nAn implementation of a classic calculator, with a layout inspired by macOS calculator.\n\nWorks like a real calculator. Click the buttons or press the equivalent keys.\n\"\"\"\n\nfrom decimal import Decimal\n\nfrom textual import events, on\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.css.query import NoMatches\nfrom textual.reactive import var\nfrom textual.widgets import Button, Digits\n\n\nclass CalculatorApp(App):\n    \"\"\"A working 'desktop' calculator.\"\"\"\n\n    CSS_PATH = \"calculator.tcss\"\n\n    numbers = var(\"0\")\n    show_ac = var(True)\n    left = var(Decimal(\"0\"))\n    right = var(Decimal(\"0\"))\n    value = var(\"\")\n    operator = var(\"plus\")\n\n    # Maps button IDs on to the corresponding key name\n    NAME_MAP = {\n        \"asterisk\": \"multiply\",\n        \"slash\": \"divide\",\n        \"underscore\": \"plus-minus\",\n        \"full_stop\": \"point\",\n        \"plus_minus_sign\": \"plus-minus\",\n        \"percent_sign\": \"percent\",\n        \"equals_sign\": \"equals\",\n        \"minus\": \"minus\",\n        \"plus\": \"plus\",\n    }\n\n    def watch_numbers(self, value: str) -&gt; None:\n        \"\"\"Called when numbers is updated.\"\"\"\n        self.query_one(\"#numbers\", Digits).update(value)\n\n    def compute_show_ac(self) -&gt; bool:\n        \"\"\"Compute switch to show AC or C button\"\"\"\n        return self.value in (\"\", \"0\") and self.numbers == \"0\"\n\n    def watch_show_ac(self, show_ac: bool) -&gt; None:\n        \"\"\"Called when show_ac changes.\"\"\"\n        self.query_one(\"#c\").display = not show_ac\n        self.query_one(\"#ac\").display = show_ac\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Add our buttons.\"\"\"\n        with Container(id=\"calculator\"):\n            yield Digits(id=\"numbers\")\n            yield Button(\"AC\", id=\"ac\", variant=\"primary\")\n            yield Button(\"C\", id=\"c\", variant=\"primary\")\n            yield Button(\"+/-\", id=\"plus-minus\", variant=\"primary\")\n            yield Button(\"%\", id=\"percent\", variant=\"primary\")\n            yield Button(\"\u00f7\", id=\"divide\", variant=\"warning\")\n            yield Button(\"7\", id=\"number-7\", classes=\"number\")\n            yield Button(\"8\", id=\"number-8\", classes=\"number\")\n            yield Button(\"9\", id=\"number-9\", classes=\"number\")\n            yield Button(\"\u00d7\", id=\"multiply\", variant=\"warning\")\n            yield Button(\"4\", id=\"number-4\", classes=\"number\")\n            yield Button(\"5\", id=\"number-5\", classes=\"number\")\n            yield Button(\"6\", id=\"number-6\", classes=\"number\")\n            yield Button(\"-\", id=\"minus\", variant=\"warning\")\n            yield Button(\"1\", id=\"number-1\", classes=\"number\")\n            yield Button(\"2\", id=\"number-2\", classes=\"number\")\n            yield Button(\"3\", id=\"number-3\", classes=\"number\")\n            yield Button(\"+\", id=\"plus\", variant=\"warning\")\n            yield Button(\"0\", id=\"number-0\", classes=\"number\")\n            yield Button(\".\", id=\"point\")\n            yield Button(\"=\", id=\"equals\", variant=\"warning\")\n\n    def on_key(self, event: events.Key) -&gt; None:\n        \"\"\"Called when the user presses a key.\"\"\"\n\n        def press(button_id: str) -&gt; None:\n            \"\"\"Press a button, should it exist.\"\"\"\n            try:\n                self.query_one(f\"#{button_id}\", Button).press()\n            except NoMatches:\n                pass\n\n        key = event.key\n        if key.isdecimal():\n            press(f\"number-{key}\")\n        elif key == \"c\":\n            press(\"c\")\n            press(\"ac\")\n        else:\n            button_id = self.NAME_MAP.get(key)\n            if button_id is not None:\n                press(self.NAME_MAP.get(key, key))\n\n    @on(Button.Pressed, \".number\")\n    def number_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Pressed a number.\"\"\"\n        assert event.button.id is not None\n        number = event.button.id.partition(\"-\")[-1]\n        self.numbers = self.value = self.value.lstrip(\"0\") + number\n\n    @on(Button.Pressed, \"#plus-minus\")\n    def plus_minus_pressed(self) -&gt; None:\n        \"\"\"Pressed + / -\"\"\"\n        self.numbers = self.value = str(Decimal(self.value or \"0\") * -1)\n\n    @on(Button.Pressed, \"#percent\")\n    def percent_pressed(self) -&gt; None:\n        \"\"\"Pressed %\"\"\"\n        self.numbers = self.value = str(Decimal(self.value or \"0\") / Decimal(100))\n\n    @on(Button.Pressed, \"#point\")\n    def pressed_point(self) -&gt; None:\n        \"\"\"Pressed .\"\"\"\n        if \".\" not in self.value:\n            self.numbers = self.value = (self.value or \"0\") + \".\"\n\n    @on(Button.Pressed, \"#ac\")\n    def pressed_ac(self) -&gt; None:\n        \"\"\"Pressed AC\"\"\"\n        self.value = \"\"\n        self.left = self.right = Decimal(0)\n        self.operator = \"plus\"\n        self.numbers = \"0\"\n\n    @on(Button.Pressed, \"#c\")\n    def pressed_c(self) -&gt; None:\n        \"\"\"Pressed C\"\"\"\n        self.value = \"\"\n        self.numbers = \"0\"\n\n    def _do_math(self) -&gt; None:\n        \"\"\"Does the math: LEFT OPERATOR RIGHT\"\"\"\n        try:\n            if self.operator == \"plus\":\n                self.left += self.right\n            elif self.operator == \"minus\":\n                self.left -= self.right\n            elif self.operator == \"divide\":\n                self.left /= self.right\n            elif self.operator == \"multiply\":\n                self.left *= self.right\n            self.numbers = str(self.left)\n            self.value = \"\"\n        except Exception:\n            self.numbers = \"Error\"\n\n    @on(Button.Pressed, \"#plus,#minus,#divide,#multiply\")\n    def pressed_op(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Pressed one of the arithmetic operations.\"\"\"\n        self.right = Decimal(self.value or \"0\")\n        self._do_math()\n        assert event.button.id is not None\n        self.operator = event.button.id\n\n    @on(Button.Pressed, \"#equals\")\n    def pressed_equals(self) -&gt; None:\n        \"\"\"Pressed =\"\"\"\n        if self.value:\n            self.right = Decimal(self.value)\n        self._do_math()\n\n\nif __name__ == \"__main__\":\n    CalculatorApp().run(inline=True)\n</code></pre> <pre><code>Screen {\n    overflow: auto;\n}\n\n#calculator {\n    layout: grid;\n    grid-size: 4;\n    grid-gutter: 1 2;\n    grid-columns: 1fr;\n    grid-rows: 2fr 1fr 1fr 1fr 1fr 1fr;\n    margin: 1 2;\n    min-height: 25;\n    min-width: 26;\n    height: 100%;\n\n    &amp;:inline {\n        margin: 0 2;\n    }\n}\n\nButton {\n    width: 100%;\n    height: 100%;\n}\n\n#numbers {\n    column-span: 4;\n    padding: 0 1;\n    height: 100%;\n    background: $primary-lighten-2;\n    color: $text;\n    content-align: center middle;\n    text-align: right;\n}\n\n#number-0 {\n    column-span: 2;\n}\n</code></pre>"},{"location":"FAQ/","title":"FAQ","text":""},{"location":"FAQ/#frequently-asked-questions","title":"Frequently Asked Questions","text":"<p>Welcome to the Textual FAQ. Here we try and answer any question that comes up frequently. If you can't find what you are looking for here, see our other help channels.</p> <p></p>"},{"location":"FAQ/#does-textual-support-images","title":"Does Textual support images?","text":"<p>Textual doesn't have built-in support for images yet, but it is on the Roadmap.</p> <p>See also the rich-pixels project for a Rich renderable for images that works with Textual.</p> <p></p>"},{"location":"FAQ/#how-can-i-fix-importerror-cannot-import-name-composeresult-from-textualapp","title":"How can I fix ImportError cannot import name ComposeResult from textual.app ?","text":"<p>You likely have an older version of Textual. You can install the latest version by adding the <code>-U</code> switch which will force pip to upgrade.</p> <p>The following should do it:</p> <pre><code>pip install textual-dev -U\n</code></pre> <p></p>"},{"location":"FAQ/#how-can-i-select-and-copy-text-in-a-textual-app","title":"How can I select and copy text in a Textual app?","text":"<p>Running a Textual app puts your terminal in to application mode which disables clicking and dragging to select text. Most terminal emulators offer a modifier key which you can hold while you click and drag to restore the behavior you may expect from the command line. The exact modifier key depends on the terminal and platform you are running on.</p> <ul> <li>iTerm Hold the OPTION key.</li> <li>Gnome Terminal Hold the SHIFT key.</li> <li>Windows Terminal Hold the SHIFT key.</li> </ul> <p>Refer to the documentation for your terminal emulator, if it is not listed above.</p> <p></p>"},{"location":"FAQ/#how-can-i-set-a-translucent-app-background","title":"How can I set a translucent app background?","text":"<p>Some terminal emulators have a translucent background feature which allows the desktop underneath to be partially visible.</p> <p>This feature is unlikely to work with Textual, as the translucency effect requires the use of ANSI background colors, which Textual doesn't use. Textual uses 16.7 million colors where available which enables consistent colors across all platforms and additional effects which aren't possible with ANSI colors.</p> <p>For more information on ANSI colors in Textual, see Why no Ansi Themes?.</p> <p></p>"},{"location":"FAQ/#how-do-i-center-a-widget-in-a-screen","title":"How do I center a widget in a screen?","text":"<p>Tip</p> <p>See How To Center Things in the Textual documentation for a more comprehensive answer to this question.</p> <p>To center a widget within a container use <code>align</code>. But remember that <code>align</code> works on the children of a container, it isn't something you use on the child you want centered.</p> <p>For example, here's an app that shows a <code>Button</code> in the middle of a <code>Screen</code>:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\nclass ButtonApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"PUSH ME!\")\n\nif __name__ == \"__main__\":\n    ButtonApp().run()\n</code></pre> <p>If you use the above on multiple widgets, you'll find they appear to \"left-align\" in the center of the screen, like this:</p> <pre><code>+-----+\n|     |\n+-----+\n\n+---------+\n|         |\n+---------+\n\n+---------------+\n|               |\n+---------------+\n</code></pre> <p>If you want them more like this:</p> <pre><code>     +-----+\n     |     |\n     +-----+\n\n   +---------+\n   |         |\n   +---------+\n\n+---------------+\n|               |\n+---------------+\n</code></pre> <p>the best approach is to wrap each widget in a <code>Center</code> container that individually centers it. For example:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center\nfrom textual.widgets import Button\n\nclass ButtonApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Center(Button(\"PUSH ME!\"))\n        yield Center(Button(\"AND ME!\"))\n        yield Center(Button(\"ALSO PLEASE PUSH ME!\"))\n        yield Center(Button(\"HEY ME ALSO!!\"))\n\nif __name__ == \"__main__\":\n    ButtonApp().run()\n</code></pre> <p></p>"},{"location":"FAQ/#how-do-i-fix-workerdeclarationerror","title":"How do I fix WorkerDeclarationError?","text":"<p>Textual version 0.31.0 requires that you set <code>thread=True</code> on the <code>@work</code> decorator if you want to run a threaded worker.</p> <p>If you want a threaded worker, you would declare it in the following way:</p> <pre><code>@work(thread=True)\ndef run_in_background():\n    ...\n</code></pre> <p>If you don't want a threaded worker, you should make your work function <code>async</code>:</p> <pre><code>@work()\nasync def run_in_background():\n    ...\n</code></pre> <p>This change was made because it was too easy to accidentally create a threaded worker, which may produce unexpected results.</p> <p></p>"},{"location":"FAQ/#how-do-i-pass-arguments-to-an-app","title":"How do I pass arguments to an app?","text":"<p>When creating your <code>App</code> class, override <code>__init__</code> as you would when inheriting normally. For example:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nclass Greetings(App[None]):\n\n    def __init__(self, greeting: str=\"Hello\", to_greet: str=\"World\") -&gt; None:\n        self.greeting = greeting\n        self.to_greet = to_greet\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(f\"{self.greeting}, {self.to_greet}\")\n</code></pre> <p>Then the app can be run, passing in various arguments; for example:</p> <pre><code># Running with default arguments.\nGreetings().run()\n\n# Running with a keyword argument.\nGreetings(to_greet=\"davep\").run()\n\n# Running with both positional arguments.\nGreetings(\"Well hello\", \"there\").run()\n</code></pre> <p></p>"},{"location":"FAQ/#no-widget-called-textlog","title":"No widget called TextLog","text":"<p>The <code>TextLog</code> widget was renamed to <code>RichLog</code> in Textual 0.32.0. You will need to replace all references to <code>TextLog</code> in your code, with <code>RichLog</code>. Most IDEs will have a search and replace function which will help you do this.</p> <p>Here's how you should import RichLog:</p> <pre><code>from textual.widgets import RichLog\n</code></pre> <p></p>"},{"location":"FAQ/#why-do-some-key-combinations-never-make-it-to-my-app","title":"Why do some key combinations never make it to my app?","text":"<p>Textual can only ever support key combinations that are passed on by your terminal application. Which keys get passed on can differ from terminal to terminal, and from operating system to operating system.</p> <p>Because of this it's best to stick to key combinations that are known to be universally-supported; these include the likes of:</p> <ul> <li>Letters</li> <li>Numbers</li> <li>Numbered function keys (especially F1 through F10)</li> <li>Space</li> <li>Return</li> <li>Arrow, home, end and page keys</li> <li>Control</li> <li>Shift</li> </ul> <p>When creating bindings for your application we recommend picking keys and key combinations from the above.</p> <p>Keys that aren't normally passed through by terminals include Cmd and Option on macOS, and the Windows key on Windows.</p> <p>If you need to test what key combinations work in different environments you can try them out with <code>textual keys</code>.</p> <p></p>"},{"location":"FAQ/#why-doesnt-textual-look-good-on-macos","title":"Why doesn't Textual look good on macOS?","text":"<p>You may find that the default macOS Terminal.app doesn't render Textual apps (and likely other TUIs) very well, particularly when it comes to box characters. For instance, you may find it displays misaligned blocks and lines like this:</p> <p></p> <p>You can (mostly) fix this by opening settings -&gt; profiles &gt; Text tab, and changing the font settings. We have found that Menlo Regular font, with a character spacing of 1 and line spacing of 0.805 produces reasonable results. If you want to use another font, you may have to tweak the line spacing until you get good results.</p> <p></p> <p>With these changes, Textual apps render more as intended:</p> <p></p> <p>Even with this fix, Terminal.app has a few limitations. It is limited to 256 colors, and can be a little slow compared to more modern alternatives. Fortunately there are a number of free terminal emulators for macOS which produces high quality results.</p> <p>We recommend any of the following terminals:</p> <ul> <li>iTerm2</li> <li>Kitty</li> <li>WezTerm</li> </ul>"},{"location":"FAQ/#terminalapp-colors","title":"Terminal.app colors","text":""},{"location":"FAQ/#iterm2-colors","title":"iTerm2 colors","text":""},{"location":"FAQ/#why-doesnt-textual-support-ansi-themes","title":"Why doesn't Textual support ANSI themes?","text":"<p>Textual will not generate escape sequences for the 16 themeable ANSI colors.</p> <p>This is an intentional design decision we took for for the following reasons:</p> <ul> <li>Not everyone has a carefully chosen ANSI color theme. Color combinations which may look fine on your system, may be unreadable on another machine. There is very little an app author or Textual can do to resolve this. Asking users to simply pick a better theme is not a good solution, since not all users will know how.</li> <li>ANSI colors can't be manipulated in the way Textual can do with other colors. Textual can blend colors and produce light and dark shades from an original color, which is used to create more readable text and user interfaces. Color blending will also be used to power future accessibility features.</li> </ul> <p>Textual has a design system which guarantees apps will be readable on all platforms and terminals, and produces better results than ANSI colors.</p> <p>There is currently a light and dark version of the design system, but more are planned. It will also be possible for users to customize the source colors on a per-app or per-system basis. This means that in the future you will be able to modify the core colors to blend in with your chosen terminal theme.</p> <p></p>"},{"location":"FAQ/#why-doesnt-the-datatable-scroll-programmatically","title":"Why doesn't the <code>DataTable</code> scroll programmatically?","text":"<p>If scrolling in your <code>DataTable</code> is apparently broken, it may be because your <code>DataTable</code> is using the default value of <code>height: auto</code>. This means that the table will be sized to fit its rows without scrolling, which may cause the container (typically the screen) to scroll. If you would like the table itself to scroll, set the height to something other than <code>auto</code>, like <code>100%</code>.</p> <p>NOTE: As of Textual v0.31.0 the <code>max-height</code> of a <code>DataTable</code> is set to <code>100%</code>, this will mean that the above is no longer the default experience.</p> <p>Generated by FAQtory</p>"},{"location":"getting_started/","title":"Getting started","text":"<p>All you need to get started building Textual apps.</p>"},{"location":"getting_started/#requirements","title":"Requirements","text":"<p>Textual requires Python 3.8 or later (if you have a choice, pick the most recent Python). Textual runs on Linux, macOS, Windows and probably any OS where Python also runs.</p> <p>Your platform</p>"},{"location":"getting_started/#linux-all-distros","title":"Linux (all distros)","text":"<p>All Linux distros come with a terminal emulator that can run Textual apps.</p>"},{"location":"getting_started/#macos","title":"macOS","text":"<p>The default terminal app is limited to 256 colors. We recommend installing a newer terminal such as iterm2, Kitty, or WezTerm.</p>"},{"location":"getting_started/#windows","title":"Windows","text":"<p>The new Windows Terminal runs Textual apps beautifully.</p>"},{"location":"getting_started/#installation","title":"Installation","text":"<p>Here's how to install Textual.</p>"},{"location":"getting_started/#from-pypi","title":"From PyPI","text":"<p>You can install Textual via PyPI, with the following command:</p> <pre><code>pip install textual\n</code></pre> <p>If you plan on developing Textual apps, you should also install textual developer tools:</p> <pre><code>pip install textual-dev\n</code></pre>"},{"location":"getting_started/#from-conda-forge","title":"From conda-forge","text":"<p>Textual is also available on conda-forge. The preferred package manager for conda-forge is currently micromamba:</p> <pre><code>micromamba install -c conda-forge textual\n</code></pre> <p>And for the textual developer tools:</p> <pre><code>micromamba install -c conda-forge textual-dev\n</code></pre>"},{"location":"getting_started/#textual-cli","title":"Textual CLI","text":"<p>If you installed the developer tools you should have access to the <code>textual</code> command. There are a number of sub-commands available which will aid you in building Textual apps. Run the following for a list of the available commands:</p> <pre><code>textual --help\n</code></pre> <p>See devtools for more about the <code>textual</code> command.</p>"},{"location":"getting_started/#demo","title":"Demo","text":"<p>Once you have Textual installed, run the following to get an impression of what it can do:</p> <pre><code>python -m textual\n</code></pre> <p>If Textual is installed you should see the following:</p> <p> Textual\u00a0Demo \u2b58Textual\u00a0Demo TOP\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Widgets\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0Textual\u00a0widgets\u00a0are\u00a0powerful\u00a0interactive\u00a0components.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Widgets \u00a0\u00a0Build\u00a0your\u00a0own\u00a0or\u00a0use\u00a0the\u00a0builtin\u00a0widgets.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0Input\u00a0Text\u00a0/\u00a0Password\u00a0input.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Rich\u00a0content\u00a0\u2022\u00a0Button\u00a0Clickable\u00a0button\u00a0with\u00a0a\u00a0number\u00a0of\u00a0styles.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0Switch\u00a0A\u00a0switch\u00a0to\u00a0toggle\u00a0between\u00a0states.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2583\u2583 \u00a0\u2022\u00a0DataTable\u00a0A\u00a0spreadsheet-like\u00a0widget\u00a0for\u00a0navigating\u00a0data.\u00a0Cells\u00a0may\u00a0contain\u00a0text\u00a0or\u00a0Rich\u00a0\u00a0\u00a0 renderables.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CSS\u00a0\u2022\u00a0Tree\u00a0An\u00a0generic\u00a0tree\u00a0with\u00a0expandable\u00a0nodes.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0DirectoryTree\u00a0A\u00a0tree\u00a0of\u00a0file\u00a0and\u00a0folders.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0...\u00a0many\u00a0more\u00a0planned\u00a0... \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a \u258eUsername\u258awill\u258e\u258a \u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a \u258e\u258a\u2585\u2585 \u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a \u258ePassword\u258aPassword\u258e\u258a \u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a \u258e\u258a \u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258a \u258e\u00a0Login\u00a0\u258a \u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Foo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Bar\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Baz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Foo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(0,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(0,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(0,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(0,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(1,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(1,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(1,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(1,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(2,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(2,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(2,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(2,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(3,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(3,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(3,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(3,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(4,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(4,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(4,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(4,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(5,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(5,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(5,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(5,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(6,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(6,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(6,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(6,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(7,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(7,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(7,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(7,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(8,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(8,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(8,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(8,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(9,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(9,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(9,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(9,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2582\u2582 \u00a0Cell\u00a0(10,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(10,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(10,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(10,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(11,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(11,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(11,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(11,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(12,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(12,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(12,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(12,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(13,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(13,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(13,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(13,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258f \u00a0^b\u00a0Sidebar\u00a0\u00a0^t\u00a0Toggle\u00a0Dark\u00a0mode\u00a0\u00a0^s\u00a0Screenshot\u00a0\u00a0f1\u00a0Notes\u00a0\u00a0^q\u00a0Quit\u00a0\u258f^p\u00a0palette </p>"},{"location":"getting_started/#examples","title":"Examples","text":"<p>The Textual repository comes with a number of example apps. To try out the examples, first clone the Textual repository:</p> HTTPSSSHGitHub CLI <pre><code>git clone https://github.com/Textualize/textual.git\n</code></pre> <pre><code>git clone git@github.com:Textualize/textual.git\n</code></pre> <pre><code>gh repo clone Textualize/textual\n</code></pre> <p>With the repository cloned, navigate to the <code>/examples/</code> directory where you will find a number of Python files you can run from the command line:</p> <pre><code>cd textual/examples/\npython code_browser.py ../\n</code></pre>"},{"location":"getting_started/#widget-examples","title":"Widget examples","text":"<p>In addition to the example apps, you can also find the code listings used to generate the screenshots in these docs in the <code>docs/examples</code> directory.</p>"},{"location":"getting_started/#need-help","title":"Need help?","text":"<p>See the help page for how to get help with Textual, or to report bugs.</p>"},{"location":"help/","title":"Help","text":"<p>If you need help with any aspect of Textual, let us know! We would be happy to hear from you.</p>"},{"location":"help/#bugs-and-feature-requests","title":"Bugs and feature requests","text":"<p>Report bugs via GitHub on the Textual issues page. You can also post feature requests via GitHub issues, but see the roadmap first.</p>"},{"location":"help/#help-with-using-textual","title":"Help with using Textual","text":"<p>You can seek help with using Textual in the discussion area on GitHub.</p>"},{"location":"help/#discord-server","title":"Discord Server","text":"<p>For more realtime feedback or chat, join our discord server to connect with the Textual community.</p>"},{"location":"roadmap/","title":"Roadmap","text":"<p>We (textualize.io) are actively building and maintaining Textual.</p> <p>We have many new features in the pipeline. This page will keep track of that work.</p>"},{"location":"roadmap/#features","title":"Features","text":"<p>High-level features we plan on implementing.</p> <ul> <li> Accessibility<ul> <li> Integration with screen readers</li> <li> Monochrome mode</li> <li> High contrast theme</li> <li> Color-blind themes</li> </ul> </li> <li> Command palette<ul> <li> Fuzzy search</li> </ul> </li> <li> Configuration (.toml based extensible configuration format)</li> <li> Console</li> <li> Devtools<ul> <li> Integrated log</li> <li> DOM tree view</li> <li> REPL</li> </ul> </li> <li> Reactive state abstraction</li> <li> Themes<ul> <li> Customize via config</li> <li> Builtin theme editor</li> </ul> </li> </ul>"},{"location":"roadmap/#widgets","title":"Widgets","text":"<p>Widgets are key to making user-friendly interfaces. The builtin widgets should cover many common (and some uncommon) use-cases. The following is a list of the widgets we have built or are planning to build.</p> <ul> <li> Buttons<ul> <li> Error / warning variants</li> </ul> </li> <li> Color picker</li> <li> Checkbox</li> <li> Content switcher</li> <li> DataTable<ul> <li> Cell select</li> <li> Row / Column select</li> <li> API to update cells / rows</li> <li> Lazy loading API</li> </ul> </li> <li> Date picker</li> <li> Drop-down menus</li> <li> Form Widget<ul> <li> Serialization / Deserialization</li> <li> Export to <code>attrs</code> objects</li> <li> Export to <code>PyDantic</code> objects</li> </ul> </li> <li> Image support<ul> <li> Half block</li> <li> Braille</li> <li> Sixels, and other image extensions</li> </ul> </li> <li> Input<ul> <li> Validation</li> <li> Error / warning states</li> <li> Template types: IP address, physical units (weight, volume), currency, credit card etc</li> </ul> </li> <li> Select control (pull-down)</li> <li> Markdown viewer<ul> <li> Collapsible sections</li> <li> Custom widgets</li> </ul> </li> <li> Plots<ul> <li> bar chart</li> <li> line chart</li> <li> Candlestick chars</li> </ul> </li> <li> Progress bars<ul> <li> Style variants (solid, thin etc)</li> </ul> </li> <li> Radio boxes</li> <li> Spark-lines</li> <li> Switch</li> <li> Tabs</li> <li> TextArea (multi-line input)<ul> <li> Basic controls</li> <li> Indentation guides</li> <li> Smart features for various languages</li> <li> Syntax highlighting</li> </ul> </li> </ul>"},{"location":"tutorial/","title":"Tutorial","text":"<p>Welcome to the Textual Tutorial!</p> <p>By the end of this page you should have a solid understanding of app development with Textual.</p> <p>Quote</p> <p>If you want people to build things, make it fun.</p> <p>\u2014 Will McGugan (creator of Rich and Textual)</p>"},{"location":"tutorial/#video-series","title":"Video series","text":"<p>This tutorial has an accompanying video series which covers the same content.</p>"},{"location":"tutorial/#stopwatch-application","title":"Stopwatch Application","text":"<p>We're going to build a stopwatch application. This application should show a list of stopwatches with buttons to start, stop, and reset the stopwatches. We also want the user to be able to add and remove stopwatches as required.</p> <p>This will be a simple yet fully featured app \u2014 you could distribute this app if you wanted to!</p> <p>Here's what the finished app will look like:</p> <p> stopwatch.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:16.17 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:12.12 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:08.09 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u00a0a\u00a0Add\u00a0\u00a0r\u00a0Remove\u00a0\u258f^p\u00a0palette </p>"},{"location":"tutorial/#try-it-out","title":"Try it out!","text":"<p>The following is not a screenshot, but a fully interactive Textual app running in your browser.</p> <p>Try in Textual-web</p> <p></p> <p>Tip</p> <p>See textual-web if you are interested in publishing your Textual apps on the web.</p>"},{"location":"tutorial/#get-the-code","title":"Get the code","text":"<p>If you want to try the finished Stopwatch app and follow along with the code, first make sure you have Textual installed then check out the Textual repository:</p> HTTPSSSHGitHub CLI <pre><code>git clone https://github.com/Textualize/textual.git\n</code></pre> <pre><code>git clone git@github.com:Textualize/textual.git\n</code></pre> <pre><code>gh repo clone Textualize/textual\n</code></pre> <p>With the repository cloned, navigate to <code>docs/examples/tutorial</code> and run <code>stopwatch.py</code>.</p> <pre><code>cd textual/docs/examples/tutorial\npython stopwatch.py\n</code></pre>"},{"location":"tutorial/#type-hints-in-brief","title":"Type hints (in brief)","text":"<p>Tip</p> <p>Type hints are entirely optional in Textual. We've included them in the example code but it's up to you whether you add them to your own projects.</p> <p>We're a big fan of Python type hints at Textualize. If you haven't encountered type hinting, it's a way to express the types of your data, parameters, and return values. Type hinting allows tools like mypy to catch bugs before your code runs.</p> <p>The following function contains type hints:</p> <pre><code>def repeat(text: str, count: int) -&gt; str:\n    \"\"\"Repeat a string a given number of times.\"\"\"\n    return text * count\n</code></pre> <p>Parameter types follow a colon. So <code>text: str</code> indicates that <code>text</code> requires a string and <code>count: int</code> means that <code>count</code> requires an integer.</p> <p>Return types follow <code>-&gt;</code>. So <code>-&gt; str:</code> indicates this method returns a string.</p>"},{"location":"tutorial/#the-app-class","title":"The App class","text":"<p>The first step in building a Textual app is to import and extend the <code>App</code> class. Here's a basic app class we will use as a starting point for the stopwatch app.</p> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>If you run this code, you should see something like the following:</p> <p> stopwatch01.py \u2b58StopwatchApp \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>Hit the D key to toggle between light and dark mode.</p> <p> stopwatch01.py \u2b58StopwatchApp \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>Hit Ctrl+C to exit the app and return to the command prompt.</p>"},{"location":"tutorial/#a-closer-look-at-the-app-class","title":"A closer look at the App class","text":"<p>Let's examine <code>stopwatch01.py</code> in more detail.</p> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The first line imports the Textual <code>App</code> class, which we will use as the base class for our App. The second line imports two builtin widgets: <code>Footer</code> which shows a bar at the bottom of the screen with bound keys, and <code>Header</code> which shows a title at the top of the screen. Widgets are re-usable components responsible for managing a part of the screen. We will cover how to build widgets in this tutorial.</p> <p>The following lines define the app itself:</p> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The App class is where most of the logic of Textual apps is written. It is responsible for loading configuration, setting up widgets, handling keys, and more.</p> <p>Here's what the above app defines:</p> <ul> <li> <p><code>BINDINGS</code> is a list of tuples that maps (or binds) keys to actions in your app. The first value in the tuple is the key; the second value is the name of the action; the final value is a short description. We have a single binding which maps the D key on to the \"toggle_dark\" action. See key bindings in the guide for details.</p> </li> <li> <p><code>compose()</code> is where we construct a user interface with widgets. The <code>compose()</code> method may return a list of widgets, but it is generally easier to yield them (making this method a generator). In the example code we yield an instance of each of the widget classes we imported, i.e. <code>Header()</code> and <code>Footer()</code>.</p> </li> <li> <p><code>action_toggle_dark()</code> defines an action method. Actions are methods beginning with <code>action_</code> followed by the name of the action. The <code>BINDINGS</code> list above tells Textual to run this action when the user hits the D key. See actions in the guide for details.</p> </li> </ul> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The final three lines create an instance of the app and calls the run() method which puts your terminal in to application mode and runs the app until you exit with Ctrl+C. This happens within a <code>__name__ == \"__main__\"</code> block so we could run the app with <code>python stopwatch01.py</code> or import it as part of a larger project.</p>"},{"location":"tutorial/#designing-a-ui-with-widgets","title":"Designing a UI with widgets","text":"<p>Textual comes with a number of builtin widgets, like Header and Footer, which are versatile and re-usable. We will need to build some custom widgets for the stopwatch. Before we dive in to that, let's first sketch a design for the app \u2014 so we know what we're aiming for.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVcXGlP40pcdTAwMTb93r9cdTAwMDIxX2akxq/2paXRqFx1MDAwM4R9XHUwMDBiW8PMXHUwMDEzMrFDXGbxguNA4Kn/+5SddOwktuM4S/tFLVx1MDAxYVxcjuu66tx77lJVf33Z2NhcZj48c/PbxqbZb+pcdTAwMWTL8PX3za/h9TfT71quo5pQ9HfX7fnN6M52XHUwMDEweN1vf/xh6/6LXHUwMDE5eFx1MDAxZL1pam9Wt6d3ukHPsFxcrenaf1iBaXf/XHUwMDEz/jzVbfPfnmtcdTAwMWKBr8WdbJmGXHUwMDE1uP6gL7Nj2qZcdTAwMTN01dP/q/7e2Pgr+pmQzjebge48dczoXHUwMDBiUVMsIFx1MDAwNmzy6qnrRMJcbi5cdTAwMDWFXGaR0VxyVndHdVx1MDAxN5iGam0pkc24Jby0+aizxo/G/VPr6uX83Hu/ueqSPo97bVmdzmXw0Ymk6rrqZeK2buC7L+atZVx1MDAwNG3VXG4nrmd9y3d7T23H7HbHvuN6etNcbj7Ca1x1MDAwMIyuXHUwMDBlhuDbRnylXHUwMDFmTlx1MDAxMCdcdTAwMWFkXHUwMDAwUoboqCH8KpJcXCOEYpi4Plx1MDAxMGbb7ajBV8L8XHUwMDAzRJ9YnEe9+fKkZHKM+Fx1MDAxZVx1MDAwMpqAJlx1MDAwNuF9+IqqQ1xyy4lcdTAwMGXapvXUXHUwMDBlXHUwMDA2gmtcdTAwMWNcbp7o24yGXHUwMDFkXCLEOUFcYqNRS9ijd2BEXGL4c3Lg2rrvXHJcdTAwMDdos1x1MDAxYv6RkDZcdTAwMTR0d1x1MDAxMj5JXGIlpvag2/C2m5+HRzdcdTAwMTf1t7uL8114vnc4etZcdTAwMTjedN933zdHLT+Hv8Wi9TxDXHUwMDFmgFxiMlx1MDAwNiRcdTAwMTaSXHUwMDEwgmNcdTAwMWN2LOdFNTq9Tie+5jZfYtxFV39+LYF3gmBcdTAwMTbeJVx1MDAxNYJQSorj3XrEnty37P7JsSlcdTAwMWT97NV7/VGvON5cdTAwMDXRXHUwMDA0wXxcdTAwMWPsXHUwMDE4YlxyYyqT18uAvaVTRNE02JWGTWOcsSlwc8FcdTAwMDRUUCDrXHUwMDAy9y/MXHUwMDA0Zj9cdTAwMThH82CG67KPb+3+/bFcclx1MDAwZnZunFx1MDAwN3v/sL01XHUwMDE3tlx1MDAxOVx1MDAwNVxigWVhe0zOYmZcdTAwMWMqXHUwMDExXHUwMDE4R1x1MDAxY4nCuE5/63RcXLf1Zrvnm1VAtkxDNlZ4X1x1MDAxY9mBrztdT/dcdTAwMTWaUtBNU9CN8LTpJlAqky9WgO5lXHUwMDAyMJ5n11x0Lq3PcKhcdTAwMTNcdTAwMGZcYq/WddvqfIxNVYRMJell4CZcdTAwMDXVu6bqMcIhXHUwMDFmu/d7x3pcbpG72VTvYPpjoFx1MDAwZSzl6oxusC3DSFx1MDAxYfOmXHUwMDEyQFfP9Fx1MDAwZopcdTAwMThh17eeLEfvXFwl5SvPXHUwMDFmjMlM/lAug0SCo8J65lx1MDAxY2/3t06R6Fx1MDAxY8BG42brXHUwMDAzXFw1/I9q81x1MDAwN2NEXHUwMDAzWIJJd4lgpPRcZoGF/aWmaVx1MDAxMEMvSiFiSskgR8q1XHUwMDEyZG1cdTAwMTQymMpeXHUwMDFmn+zsideL9zuj9tK6sE9/bDfS/aNIU2Jcbvma/thZzJTeYXFmXHUwMDEyWPmXWMaTtVwiZqJcdOM4yUycXHUwMDAzyVxiT8zsLI3JXHUwMDFm5ooyk7JcdTAwMTnpOkOp8rpcdTAwMTbXmaWQXHUwMDEzXHUwMDA3XGIoXHUwMDFkS7jhqyenXHUwMDEyXHUwMDE4XFyMnFx1MDAxYWbXXGbWyk4zTPwkO1xyXHUwMDA0LE9PMGFcdTAwMTEntI1wXGKQXHUwMDE0rHh4c/zs9smja183ru5Ojp73jWtcdTAwMTI0q01PhCtVo2Lc34v8QMQ1oMhhPKYuXHUwMDEz4kSfND3DXHUwMDFhnExcdTAwMTiMXHUwMDE0XHUwMDBlU02OO6dDveMq5FRcdTAwMTaArkDtyvHKx0n/ljx8Xlx1MDAwN96xW/NZv+18st1cbkY8kmRcdTAwMDFcdTAwMWQyjpVZ4ax4wJP+0lx1MDAxNadcdTAwMTVcdTAwMTVIZGBd+WJ0knCWzitcdTAwMDRPwzyFV6hcdTAwMDQq5GGr8MeqXHUwMDEz9Fx1MDAwMPAt/Mc1XHUwMDA018ouMyz0JLskxSzPMVhmptCgQFxicVxuOSusende//LkZGf39uiqVoeg3Ttv+8e/k2RwkZQxXHUwMDA1krOpnDGBQmOccrGqIIgypnHO8Vx1MDAxOJOMJY1cdTAwMDVcdTAwMWRPZY/CXCJcdTAwMDRcdTAwMTX/XHUwMDEwsVYtXHUwMDE0XHUwMDEwYonm0MLyoKRcdTAwMTRngpJcdTAwMTPJkVx1MDAwNKQ4XHUwMDFmyGOhO/unXHKf1M97bbttXl1cdTAwMWZUvZAhqFx1MDAwNlx1MDAwNaWEXHQ+XHUwMDE5mlx1MDAxM00uI7ubVcoomt1ccrP8gvLEq6wlNP++3Xpr2O32XHUwMDE2Mz6fejY4erg74uOuz3JD8/RcdTAwMGWr50IpK5KlM0x5XHUwMDBmXHUwMDAwwDlcXKj8Ua6oXHUwMDBipaxCltJQppElKM1yYnMsXHUwMDAwXHUwMDEwfFx1MDAxNTW/6vhQl4Hurzc2n2HlpzPHoYBcdTAwMGL4TSiborCQiOE5XHUwMDEyYW7t5NW8QPzItnuNeqv/dnyB33+vuvFcIsE5XHUwMDAxqZkwXCKVT1xuVqxspVx1MDAwMnRKwuhFrrve/iDfL8+O/Ju9k7bVMPZcdTAwMGZcdTAwMDS+P2uvkrTSO6xcdTAwMWVpIZpZgFGBP8CcUFA8xZU/zFx1MDAxNVUjXHUwMDE192eoXHUwMDExpVx1MDAxYV9xOrlY2C9cdFx1MDAxMpJSuM5s8lx1MDAxMIFwXHUwMDBlXHUwMDA0LsZYw3BcdTAwMWFo41x1MDAwM7py3pph+zOi/kjM8uyFWKazKFx1MDAxOEZcdTAwMDBcdTAwMTFQ3Fl8RkivfaKzXHUwMDFh3vGI34JXd82b/d9cdTAwMTlfkdlBP9Mog1x1MDAxNOGpJVx1MDAwNsroaVx1MDAwYkf8Lf1cdTAwMTFcdTAwMDCaXHUwMDE28XNccipdXHUwMDFh0/WR4il9R1igsPeoXHUwMDBmOKmHXGJcdTAwMTBlXHUwMDEwMV1fOXRcdTAwMTbP6PpcdTAwMTXbu7o/OFx1MDAwMSe39nZw+eRcdTAwMWScXs63WkxIXHRji7NcIp6BIDvBLJByJOZYXHUwMDE3mf7O6XBv+m63u9XWg2b794NewEzQh1x1MDAwZVx1MDAxM4aMrDTJTCmfXHUwMDA2fUqAxCRcdTAwMDJUKcl6k8xzXHUwMDAzcTG62Td1I0lcdTAwMWJrYJpcdTAwMTl2epJphlx1MDAxMpYnXHUwMDE5XG4zSVx1MDAwNlwiyKOca2Gtc+y3k8tcdTAwMTf48Irk+71OwFx1MDAxYjx9LpVZRkvSNzpb34CGXGKcjIRcIq9cdTAwMTAqfWNkXCJEKUE0XGKJR5OlXHUwMDExXHKZVjWcsohcciNcdTAwMTLSUWVcYuU2QPrdzsOWj/pta5/dP+3hXHUwMDA3ez5CkYrd4/dZVeDCM0vzkGEogUCgePyf/ta/nVJcbkCcZkJcXPlRy4D4XGZGSYF5SvxcdTAwMTKuhyFcdTAwMDCtmVDmXHUwMDA14mKEUnfdYM2EMsMmT1x1MDAxMspQwkVcYiUn56ZAiOZSujP60NxvdY1cdTAwMWYt1Kyf39qn/aB5U/FaJdOYXHUwMDEwJKVYSTHXplLf1ShWXCLMJcOYraBamc4xw1x1MDAxMsZcdTAwMWU7O3uxrf7lNjk6291BXHUwMDFl+Vx1MDAxMOk5t1x1MDAxMntcXFx1MDAxMGF8PbVQxrM3XHUwMDAzIE64ilx1MDAwN+fINNvPp/a2d3x0dF4zOvt35lPt8sWpei2Ua5hcdTAwMTE0UYn/XHUwMDE42H9ccirVXzhgX7RcdTAwMTgqiFRTQcSai6E7XHI9eDyy2s9cdTAwMTdcdTAwMTf711x1MDAwZl3y2q5jP1x1MDAxZOPF8soreuwsry+9w3lcdTAwMTRS4DCHumqvj+akq7lcdTAwMDBcdTAwMTBcdFx1MDAwNouHNPnDXFzZXCIrytRGTjW2XHUwMDA0bVxcSpVcdTAwMTVcYkokoGtdXHUwMDAxXVx1MDAwMoaL+Xzrr7LO4I9lV1lcdMkmP4wogpTC4jt0asfXzkO7Z+yC163vV/XWNdjln5WvXHUwMDBmQY1yXHRTNjVTJrRVr1x1MDAwYi1XZoWIXHUwMDAxiClfRVxuL4+4LpqH6PFwz3Vfnlxm9/Ni79Opi93F+XDpj53Fh+lcdTAwMWRWj1x1MDAwZrHIXFw8ijBcdTAwMDVcXMGmeFx1MDAxOSl/lKuqnSxTOznRhFgxXHUwMDE5XHUwMDE2q98qXHUwMDE2RGqq1rxVdc1cXPi76rczSKV0/TYz84hpls5cdTAwMTGBJZtrb3jt7HnLe39/dPmLrd95dYs9YiND59aSVZ/tgEpGNSogSFnmR2G4LUjmXHUwMDFm84FcdNZJ2W2rXHUwMDAwpejbXHUwMDE0/SGiXGaCSM5D1TNcdTAwMWW59Cdr37dcdTAwMGbPXHUwMDFmxPfDmjh8faa017r/sbRMXG6lXHUwMDAwr6/sXHUwMDE2blx1MDAxOH9cdTAwMWbPnSdthFx1MDAxOPvCyFx1MDAwNHTMVpBjIcY2yY+bh7FcdTAwMTdJ270+XHUwMDEwJtdcdTAwMTJcZlx1MDAwNjWNfrOPP1FcdTAwMDAkmPB5zvvJn+Zq2lx1MDAwMlxuNFxmXHUwMDA1Y1x1MDAwMmMsMJw0XHUwMDA3QoOYhVx1MDAwYiZouFtyNTaBizBcdTAwMDWFZbhcdTAwMWSR8OSBXHUwMDAx8cJcdTAwMGWoQYSEomGGpVx1MDAwMvykvVAuNCfhSq/57UUkZNn6hGCiVH2iXHUwMDFiRnU1yzEs50k1xibj1/lVXHUwMDA3XHUwMDA1yCXS1WYvlHJcdTAwMGJoTKrRXHUwMDEzMFxc8IeT5yGFY6F7USSiodCLYThcdTAwMWNGQeTwhpHp2jRcdTAwMWQjlmn8NfRusO3atlx1MDAxNahcdTAwMDE4dy0nmLwjeqPvoZ61TX1Kb9WTk22TXG7phU9cdTAwMWO3zvFvXHUwMDFiMWSjP0a///k19e6tTDxFrZNQilx1MDAxZvcl+f/cplx1MDAwNKHszJZEUir9wsUzW/lMVFFTwjV1V9pcdTAwMGVMisP1zFxmQ45BaFNXYkaksmScyF9cdTAwMWaeslSGKFx0XHUwMDE5XHUwMDAyXHUwMDEw8TCyXHUwMDAyaOq4XGbVICVgskTOa1x1MDAxMTtCldqW8vOXbUeApiw9UapcdTAwMDEg41xckZ9I3DQwI0IjXHUwMDAyRJ5jvv3IkiW/aDgmXHUwMDBilzzccqIgxaREdFpcdTAwMTaENUSHO1x1MDAwZqek+VvZrEzwhp8p2M5pszKTXHUwMDBmXHS+nNzwhChnhOHiqcGjz7u911Zw8456jkktv9WA9duKWywsNJZusZQnpFx0wfLPR1gsXHUwMDEwimWO3ZxYvtFSPlx1MDAwZVx1MDAxMFwiZM1lsVx1MDAwNVx1MDAwMpbcQGhVXHUwMDAx1mqPY1x1MDAxNJSBeUrVS1xusP7n/DOyUKbxr9RYK5G6mi9cdTAwMWazcLSVlKyct4SzXHUwMDE3okjCwpNw5ti1kj/7XHUwMDE1NT1UxV2/llx1MDAxMidXqlx1MDAwZk6skJpiWIakcth5cqf2Mk1cdTAwMTBcdTAwMTOaXHUwMDE4nLhcdTAwMWFcdTAwMTGPiD2QODOjUVxuOFx1MDAwZuXkTFwiknagXHUwMDA1XHUwMDA2UGBaJlVT5dArn87G3Fx1MDAxNFxiiVQ2XHUwMDFhcCYoJ3FcYj1yU5SXMtixkO8x/X0jrkwkhZ9pXGbN6b7k1jd5zuJcdTAwMWWoaF1IJIpnc9+E3fQ+3G6999yRXHUwMDA3dv2cg+1SlmSdp6lRXHJcdTAwMDCkQszpbC5ccjclrGg5W9FcdTAwMDNcYjFV1mE1S0fzPILT21OvfaVcdTAwMDb70rm+wVcnwdbxoZ3uXHUwMDExzFPIXFz6Y2dcdTAwMTUy0zss7r4oJlxy/cd5dlx1MDAwMeYqY1YskdyJMJX+4FhKguY4ai1/mCu6sEe56pmayFXYXFyBo1x1MDAxM1x1MDAxMMRcZofnXHUwMDExrfPgm1x1MDAxMlx1MDAxMFxczINe/7GGM3gj71jDL0Pl3dQ97zJQ4zZyStTUWMbw5eOx2nyzzPda9kl8X4a6XHUwMDFiKolcdTAwMTlOzF8/v/z8P1xiXCJcdTAwMWT6In0= StopReset00:00:07.21Start00:00:00.00HeaderFooterStart00:00:00.00StopwatchStopwatch(started)Reset"},{"location":"tutorial/#custom-widgets","title":"Custom widgets","text":"<p>We need a <code>Stopwatch</code> widget composed of the following child widgets:</p> <ul> <li>A \"Start\" button</li> <li>A \"Stop\" button</li> <li>A \"Reset\" button</li> <li>A time display</li> </ul> <p>Textual has a builtin <code>Button</code> widget which takes care of the first three components. All we need to build is the time display widget which will show the elapsed time and the stopwatch widget itself.</p> <p>Let's add those to the app. Just a skeleton for now, we will add the rest of the features as we go.</p> stopwatch02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay(\"00:00:00.00\")\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>We've imported two new widgets in this code: <code>Button</code>, which creates a clickable button, and <code>Static</code> which is a base class for a simple control. We've also imported <code>ScrollableContainer</code> from <code>textual.containers</code> which (as the name suggests) is a <code>Widget</code> which contains other widgets.</p> <p>We've defined an empty <code>TimeDisplay</code> widget by extending <code>Static</code>. We will flesh this out later.</p> <p>The Stopwatch widget class also extends <code>Static</code>. This class has a <code>compose()</code> method which yields child widgets, consisting of three <code>Button</code> objects and a single <code>TimeDisplay</code> object. These widgets will form the stopwatch in our sketch.</p>"},{"location":"tutorial/#the-buttons","title":"The buttons","text":"<p>The Button constructor takes a label to be displayed in the button (<code>\"Start\"</code>, <code>\"Stop\"</code>, or <code>\"Reset\"</code>). Additionally, some of the buttons set the following parameters:</p> <ul> <li><code>id</code> is an identifier we can use to tell the buttons apart in code and apply styles. More on that later.</li> <li><code>variant</code> is a string which selects a default style. The \"success\" variant makes the button green, and the \"error\" variant makes it red.</li> </ul>"},{"location":"tutorial/#composing-the-widgets","title":"Composing the widgets","text":"<p>To add widgets to our application we first need to yield them from the app's <code>compose()</code> method:</p> <p>The new line in <code>StopwatchApp.compose()</code> yields a single <code>ScrollableContainer</code> object which will create a scrolling list of stopwatches. When classes contain other widgets (like <code>ScrollableContainer</code>) they will typically accept their child widgets as positional arguments. We want to start the app with three stopwatches, so we construct three <code>Stopwatch</code> instances and pass them to the container's constructor.</p>"},{"location":"tutorial/#the-unstyled-app","title":"The unstyled app","text":"<p>Let's see what happens when we run <code>stopwatch02.py</code>.</p> <p> stopwatch02.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 00:00:00.00 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2586\u2586 \u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 00:00:00.00 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a0 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>The elements of the stopwatch application are there. The buttons are clickable and you can scroll the container but it doesn't look like the sketch. This is because we have yet to apply any styles to our new widgets.</p>"},{"location":"tutorial/#writing-textual-css","title":"Writing Textual CSS","text":"<p>Every widget has a <code>styles</code> object with a number of attributes that impact how the widget will appear. Here's how you might set white text and a blue background for a widget:</p> <pre><code>self.styles.background = \"blue\"\nself.styles.color = \"white\"\n</code></pre> <p>While it's possible to set all styles for an app this way, it is rarely necessary. Textual has support for CSS (Cascading Style Sheets), a technology used by web browsers. CSS files are data files loaded by your app which contain information about styles to apply to your widgets.</p> <p>Info</p> <p>The dialect of CSS used in Textual is greatly simplified over web based CSS and much easier to learn.</p> <p>CSS makes it easy to iterate on the design of your app and enables live-editing \u2014 you can edit CSS and see the changes without restarting the app!</p> <p>Let's add a CSS file to our application.</p> stopwatch03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay(\"00:00:00.00\")\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch03.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>Adding the <code>CSS_PATH</code> class variable tells Textual to load the following file when the app starts:</p> stopwatch03.tcss<pre><code>Stopwatch {\n    layout: horizontal;\n    background: $boost;\n    height: 5;\n    margin: 1;\n    min-width: 50;\n    padding: 1;\n}\n\nTimeDisplay {\n    content-align: center middle;\n    text-opacity: 60%;\n    height: 3;\n}\n\nButton {\n    width: 16;\n}\n\n#start {\n    dock: left;\n}\n\n#stop {\n    dock: left;\n    display: none;\n}\n\n#reset {\n    dock: right;\n}\n</code></pre> <p>If we run the app now, it will look very different.</p> <p> stopwatch03.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>This app looks much more like our sketch. Let's look at how Textual uses <code>stopwatch03.tcss</code> to apply styles.</p>"},{"location":"tutorial/#css-basics","title":"CSS basics","text":"<p>CSS files contain a number of declaration blocks. Here's the first such block from <code>stopwatch03.tcss</code> again:</p> <pre><code>Stopwatch {\n    layout: horizontal;\n    background: $boost;\n    height: 5;\n    margin: 1;\n    min-width: 50;\n    padding: 1;\n}\n</code></pre> <p>The first line tells Textual that the styles should apply to the <code>Stopwatch</code> widget. The lines between the curly brackets contain the styles themselves.</p> <p>Here's how this CSS code changes how the <code>Stopwatch</code> widget is displayed.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGlT20pcdTAwMTb9nl/hYuZj3Ol9SdXUXHUwMDE0mLCEsIUlycx7lVx1MDAxMpKwXHUwMDE1ZMuxZFx1MDAxNr/Kf58rQazd2MZcdTAwMDYz9VRcdTAwMTRcdTAwMTi1lqu+5/Q993bLf71pNNaiu7679r6x5t7alu85XHUwMDAz62btbbz/2lx1MDAxZIRe0IMmmvxcdTAwMWZcdTAwMDbDgZ1cdTAwMWPZiaJ++P7du641uHKjvm/ZLrr2wqHlh9HQ8Vx1MDAwMmRcdTAwMDfdd17kdsN/x79cdTAwMGasrvuvftB1olx1MDAwMUpv0nRcdTAwMWQvXG5cdTAwMDb393J9t+v2olx1MDAxMK7+X/i/0fgr+Z2xbuDakdVr+25yQtKUXHUwMDFhKDUt7j1cYnqJsUxcdTAwMWLKJNVkfIBcdTAwMTduwu1cIteB1ksw2U1b4l1rp+fnV527b8cnrfbt94D7XHUwMDFi3uczkt710vP9k+jOT6xcblx1MDAwM3iYtC2MXHUwMDA2wZX7xXOiXHUwMDBltJLC/rqzXHUwMDA2wbDd6blhmDsn6Fu2XHUwMDE33cWPgMc773vgfSPdc1x1MDAxYvvHMIQ1M5ozJcYt8amUcyR1Zue9Ja3Ah55cdTAwMDdL/oGTLbXlwrKv2mBQz0mPsV2HO1Z6zM3D81x0KZFSiuXu2nG9dieKn1x1MDAwNGOkXHUwMDA1XHUwMDExkmbu7ia9ToRmUnKJ06eN79nfdVx1MDAxMlx1MDAwMPyZ7Zme89AzvaHvp2bGXHJcdTAwMWaKoMlcdTAwMDIn41Duj1pHN44z3Fx1MDAxMteYbOtmv+tvjVx1MDAxZieHMmswXGJu1sYtv1x1MDAxZT6lXHUwMDE2XHL7jnVcdTAwMGZcdTAwMWRcIiU2WmAhXHUwMDE11eN23+tdXHUwMDE1jfVcdTAwMDP7KkVbsvfX2zlQrjNAKKCcXHUwMDFiXGZcdTAwMDBQxkyN8rsvx1x1MDAxZlpmt7l7sVx1MDAxZH36XHUwMDFlXHUwMDA1m+vfv929JMpcdTAwMDEvj8CcYYaUMErmMJXAXFxiZLhghD5cculcdTAwMWPbWKgy0onEZYBLWcJ1XGZcYqYwXHUwMDExz4LrT+vOZcft2ups+1x1MDAwN93fOT883j2+rcZ15N5GL1xi6+T2XHUwMDE1iFaE1CFagT9h5FJ8akRP7o48ojuW3Vx1MDAxOVx1MDAwZdxcdTAwMTXAtOCIVmNaU8SfjuloYPXCvjVcdTAwMDBAVYzgplxma8pKsNaEY8IlN1x1MDAwYoN1NfI0JopzXHUwMDA2XHUwMDAxxcyAvNTDQS868UZxJ1Oc27tldT3/LuekXHUwMDA0ktA/J5E1iLI9XHUwMDE4unDL+Fx1MDAxYUTlXHUwMDBlXve9dozZNVx1MDAxYlx1MDAxZcJcdTAwMWTk4Fx1MDAxY3mgasZcdTAwMDd0PcfJjuA2WGDBNVx1MDAwN7vTjLzBwGt7Pcs/zVx1MDAxOTh/1JC4NmpcdTAwMDA8qVx1MDAxNJRjNTXJLs9bR82D/Vx1MDAxZnZcdTAwMTieXvMvrattdui9LMnUY1x1MDAxY+NGIaNAbpiSPFJcdTAwMDJRSvPkWzTJiGCIXHUwMDE0mTymXHUwMDFiXHUwMDEzqKDbXHUwMDFlWCdcdTAwMDWEXHUwMDEyLtXiSDcplvxs/Tw7bNODjf6BXGZcdTAwMGZYf32fd9ZfVSxcdTAwMTGM1eFcXCjCmOQzxJLJ3bGaMFx1MDAxN1x1MDAwNNfBXFxcdTAwMTOkXGIvwGzRMKeqjO6KYIKxXHUwMDExhDC6OO3/SDDheFx1MDAwNug9LZhg/D75QfmOXFx6SHlkVC6GlKyZ81x1MDAwN1x1MDAxNsNqxZvkXFxRo9X06VxiiUbHwaXeXHUwMDEyx9d476K5c9lum9FqpyNcdTAwMTJYVZlzS4qUNE/PRury7upsRJeYJsBcYmJohoPLjCBk3TlmXHUwMDAz22/rI4b90Z41+mzvT1x1MDAxNUHeTrrsK0re61wik8a6jijGKEO1Znp6okzs5lx1MDAxNc1yXHUwMDE0q6GKXHUwMDA2/bVcdTAwMDCqTFxmTFVsqYhLRIPWXHUwMDEykv8/xqXPbug+b5LzyHhejEj3XHUwMDA2zsUurmrDkCaKMqxcdJ6aXba5acqbj6PNnVx1MDAxZGNv9Jtfty82/VVnl2FcdTAwMDblKXTPLYPMMlx1MDAwNZ+syGbKtV5cbj4gYpFBaHVoJVx1MDAxYTGLwmpi6TmJXHUwMDE1XHUwMDA1/TpW5Vx1MDAxZaRIod/GTCTRfYisYpFcdTAwMTF1LDKGXG4lKZ9ezIU6tH7Y/fObs30pdLBcdTAwMWZcdTAwMWVccjtm5VlEXGZSxVpAQiRjXHUwMDEwgU4gT5xHmUgmjLjGPDdVMyZcdTAwMTU3SFx1MDAwYpFv/M0uzDCnRlxuNVx1MDAwM71SlfVcdTAwMWJcdTAwMTf0Yc+vWVk3n4rK9KI1iDa8nuP12sVT3J5T0+JbYdRcbrpdL1x1MDAwMjOOXHUwMDAyr1x1MDAxN1x1MDAxNY9IrrtcdTAwMWVjveNaJebAlbNtRVL04yvm5W76qZGiJvln/PnPt5VHN8uOTXZnfJpe4k3278xcdTAwMTRcdTAwMTZEXHUwMDE2945cdTAwMGJ9XHUwMDFjc1x1MDAwZVx1MDAxNJ9+XHUwMDEyNNjb/EG2etf+9o9j94BcdTAwMGbZXHUwMDA3vi9Xn8JcdTAwMTKp4pzj/VxmqkHw/MulMEFwXHUwMDAzrFx1MDAxNIa7S1xuv1N3pFTGSFx1MDAxMlx1MDAwM4iQ4H2IjCVcdTAwMTXKXHUwMDE4xEqhZyq1/83n5+NzvZPjrejeXHUwMDE5qZ1Ih1xuZoO2q2W2XHUwMDExJp5Mz1x1MDAxND9cdTAwMWaj9lx1MDAwNiNcdTAwMWJH+ESwy+1u6+Y/ncNR3/+48tRcdTAwMDZcdTAwMDZcdTAwMGLMXGYuRWcuXHUwMDExlpLjZZbwKYabK11ZwIemglnjSifXXHUwMDE0XHUwMDAw8vJcXJ5rNm0luJxrWyiRyy5NTvvtzFx1MDAwNTGXitpJXHSipJEwWkwvq+Uu3zsyh7fru4e7QeeL+DB0jtXqXHUwMDEzVyFVZEhcdTAwMTKTXHUwMDA1RphcdTAwMTZWXHUwMDBmLZy4ulxcX0qZW2IsXHUwMDAxLa20kS+upv9mbPnoXG5fXHUwMDE2zpuKqlx1MDAxM+c0uObFveNcdTAwMDUpkFx1MDAwNzKq9fRz5XpcdTAwMDN3j/btT9s3XHUwMDE3n4eR/rBtt1uXXHUwMDBi5qtjhVx1MDAxZHehhKVKIa6q8mAqXHUwMDEwK+Soi6/VUiSK0TxdUshcZsJJ0sRNsqW+eGCwwdhcdTAwMTBN8PMswFx1MDAxYfV1Z7RPvu58O1xuNvpdtqPWeVrkzKGuODfxdtJ1N7+FV2fOQXvnzmtcdTAwMWXuaOc6PO21XHUwMDE2Oucxy/gykU11VVmKa4lcdTAwMDTeoVxcSZmpOD3GpD1ztH973lx1MDAxYlx1MDAxZFx1MDAwN1tcdTAwMTY+3W3tnUaOs/pMMlx1MDAxYVx1MDAxOVMxXHUwMDFmXHUwMDBmXGJFy5asRFat7SqLVCmwoYw/05LFJzDmcWRcdTAwMTOuNGczIDtcdTAwMDXQPNXfTjDwRnF91m/41l0wrJlgqalcdTAwMDP77mWeOIupXHUwMDAyl42aSN/aYlx1MDAxMnRnXHUwMDFkf6VcdTAwMTJcdTAwMWNcdTAwMGJNplx1MDAwZoSTvb6iwpVcdTAwMWKGaHHRTHKqXHUwMDExyFx1MDAxMEKZXHUwMDAwclPOl8hhXCKRllx1MDAxNFBccsZcdTAwMDDCVVxu7kz6yVxihERcdTAwMDKySGtwSibbTFclXHUwMDBiaJJslpnNRata+EPFXFwzM1x1MDAwNVWbMezhpZHdKcRWwmZ7XHUwMDE4W9kkiEOPXHUwMDE4JrHmMZS1zlx1MDAxY9W2+snIjZhhXFxcdTAwMTCBwftClFx1MDAxZT0np59sXHUwMDEyQUxjqZigQihcdTAwMDXAqrZIYKyEhFxcimNOy+54VWW0WmTHW7NcZupcdTAwMTlFfq0sMfVcdTAwMGLOMSdEsVx1MDAxOfLxw+DO4k54ff1ldHeuw7NbbM72Vn1Yo0IjTngpXHUwMDFk58QgoYtLUVx1MDAxNz6gVa1cdTAwMTEsi1x1MDAxMiaJxmyRazFej9x+mighXHLb9f1G11x1MDAxYYAsWFx1MDAwNUGSN2g+MVwiMolegbWUKqownaH8PdnbK8paRlx1MDAxOeKCK+CEXHUwMDAxksr0ce+5S5ApTlx1MDAxZi/8XVx1MDAxMYyIVFxuXHUwMDEzXHUwMDA16TdE81xuLcI5wsVcdTAwMWH9mNLUyDjZmGVcdTAwMWTIypbW6lwi/uSIkFx1MDAxNSFcdTAwMThRKiBcdTAwMDVUgsVcdTAwMDE9M3c7XHUwMDBl+Vxu3aeOS1x1MDAxNlx1MDAxZnGsNYZwJjVcdTAwMDX8UJa+XHIyNoUhSVx1MDAxNNFcdTAwMTW2vCbRUYvgeGtmwLsgscFVffGfU1x1MDAxMtdcdTAwMTPN9Fx1MDAwYj+DT/3t06/d1sneh83RlzY3gm0uupq4+IWfXFwhSD1UbuI9XHUwMDE5skDQXHUwMDEyTJb84k06bTpcdTAwMWWjMmsgxiVcdTAwMTCl43l38zxqY1lcdTAwMGKa01x1MDAwNXDpczyT2uhbTjxcdTAwMWH90bOSLmpcXFxmoyjoVa+Ly1x1MDAxNGieZ13cIzbOp0iMqZ+Rh5QyjjczvFQ3XHUwMDE5XHUwMDEyK0ptjTWIXHUwMDBlI0g8y22yq3DvJYlGy13WTeM8XHUwMDFlayZULHziZVx1MDAxMGWySzBcdTAwMTGyXGKBQVx1MDAxOUllZEX5XHUwMDEz0ktqlHjR2lxi5UYuYr1NnVx1MDAxNphcdTAwMWM68rJcdTAwMDRzoaRkQlx1MDAwYkY1XHUwMDE1qVvHYoBgXHUwMDA0fVx1MDAxZft2PmUy+fs18taA3OVKa2ygg1x1MDAxNElfXHUwMDBiXHUwMDFlXHUwMDFiXHUwMDAzQZvGqVwieJFRzMTrLos060GdNJfwvCClQln9bI2iWlxiQXG6mu2x4cy/utz+aX8ynYNd7Xe3xGZw5lxmVn0441qh4mqEZCBjXHUwMDE0SUrwUpfSXHUwMDEzOZVS0VhcdTAwMTlccu5/nlx1MDAxN7q+hV/7srP58/bC73V+3uy3XHUwMDA33Y81Xy8xh1Dh0NnPJ1RShzTs2CN/9Lyw8c+LIFxiq2dtnl2lTDJwPolCSP1SXHUwMDA2oWFw4Wz696EnY2FFKS2kQFLG31x1MDAwYsMwXHUwMDAxzFx1MDAxNTNcdTAwMTCOlvviv0RExyNcdTAwMDcxXHUwMDFhXCKpIFx1MDAxNStcdTAwMWGMRIWv/lx1MDAxOL+8aSBlXHUwMDAyXHUwMDEx+ULC5IkknVKYTI5cdTAwMTRcdTAwMDVhXCJcdTAwMTTTWihKuMBgXHUwMDFlz1x1MDAxY/a7YFx1MDAwMsExKWBPXHUwMDE2Jq928XEtoOKtOcZSnSh483DhNavfP4nA1WPPXHUwMDAwtjznYVBNn27t2nNvNipeTL5MtnhcXEp6OKa/m+Dv15tf/1x1MDAwM1x1MDAxY9s3yyJ9 Start00:00:00.00Reset5 lineshorizontal layout1 cell margin1 cell paddingaround buttonsbackground coloris $boost <ul> <li><code>layout: horizontal</code> aligns child widgets horizontally from left to right.</li> <li><code>background: $boost</code> sets the background color to <code>$boost</code>. The <code>$</code> prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as <code>\"blue\"</code> or <code>rgb(20,46,210)</code>.</li> <li><code>height: 5</code> sets the height of our widget to 5 lines of text.</li> <li><code>margin: 1</code> sets a margin of 1 cell around the <code>Stopwatch</code> widget to create a little space between widgets in the list.</li> <li><code>min-width: 50</code> sets the minimum width of our widget to 50 cells.</li> <li><code>padding: 1</code> sets a padding of 1 cell around the child widgets.</li> </ul> <p>Here's the rest of <code>stopwatch03.tcss</code> which contains further declaration blocks:</p> <pre><code>TimeDisplay {\n    content-align: center middle;\n    opacity: 60%;\n    height: 3;\n}\n\nButton {\n    width: 16;\n}\n\n#start {\n    dock: left;\n}\n\n#stop {\n    dock: left;\n    display: none;\n}\n\n#reset {\n    dock: right;\n}\n</code></pre> <p>The <code>TimeDisplay</code> block aligns text to the center (<code>content-align</code>), fades it slightly (<code>opacity</code>), and sets its height (<code>height</code>) to 3 lines.</p> <p>The <code>Button</code> block sets the width (<code>width</code>) of buttons to 16 cells (character widths).</p> <p>The last 3 blocks have a slightly different format. When the declaration begins with a <code>#</code> then the styles will be applied to widgets with a matching \"id\" attribute. We've set an ID on the <code>Button</code> widgets we yielded in <code>compose</code>. For instance the first button has <code>id=\"start\"</code> which matches <code>#start</code> in the CSS.</p> <p>The buttons have a <code>dock</code> style which aligns the widget to a given edge. The start and stop buttons are docked to the left edge, while the reset button is docked to the right edge.</p> <p>You may have noticed that the stop button (<code>#stop</code> in the CSS) has <code>display: none;</code>. This tells Textual to not show the button. We do this because we don't want to display the stop button when the timer is not running. Similarly, we don't want to show the start button when the timer is running. We will cover how to manage such dynamic user interfaces in the next section.</p>"},{"location":"tutorial/#dynamic-css","title":"Dynamic CSS","text":"<p>We want our <code>Stopwatch</code> widget to have two states: a default state with a Start and Reset button; and a started state with a Stop button. When a stopwatch is started it should also have a green background and bold text.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaa1PiSFx1MDAxNP3ur7CYr5rp98OqrS1fOO4oXCLq6ri1ZYWkIZFAMFx0XHUwMDAzOOV/305wJYFEXHUwMDEwXHUwMDExXHUwMDE5Synp7vS96b6nz+nb/Wtjc7NcdTAwMTRccruqtLNZUlx1MDAwM8v0XFw7MPulrbj8p1xuQtfv6CqUfFx1MDAwZv1eYCUtnSjqhjtfv7bNoKWirmdayvjphj3TXHUwMDBio57t+oblt7+6kWqHf8afXHUwMDE1s63+6PptO1xujLGRbWW7kVx1MDAxZoxsKU+1VSdcbnXv/+jvm5u/ks+Ud4GyXCKz0/RU8kBSNXZcdTAwMTBTNlla8TuJs1x1MDAxMENcdTAwMDExxlx1MDAwMr20cMNcdTAwMDNtL1K2rm5on9W4Ji4qoW23o/reoSjzk6FPh+JQXHUwMDBl62OzXHLX8y6ioZe4XHUwMDE1+vptxnVhXHUwMDE0+C117dqRXHUwMDEz254oL3oq8HtNp6PCMPOM3zUtN1x1MDAxYcZlXHUwMDAwvJSOxmBnc1xcMohniFx1MDAwMlx1MDAwM0GJ9GtcbojoS138NELSoIhiXHRYqmbk0b7v6SnQXHUwMDFlfVx1MDAwMcnP2Ke6abWa2rGOPW5DgFx1MDAwNShcdTAwMWa36T+/J2XIwJJQnDbtKLfpRCPvXHJcdTAwMGVcdTAwMDVP2VbJ2ENcdTAwMDRcdTAwMDRHXHUwMDEwkfHUxFx1MDAxNrvHdlx1MDAxMlx1MDAwN/9Ojp5jXHUwMDA23edRKoXxl5S3saOHk0GUXHUwMDBlpNT87pFcdTAwMTCE/UFj96T5sCtxXHUwMDEz/+Wdf3/pK1x1MDAxM3VmXHUwMDEw+P3SS83T839j13pd21x1MDAxY0VcdTAwMTJkXGZxyKCk+u+l3nM7LV3Z6XneuMy3WuPgS0qftlx1MDAxNoh6wkFh1EtcdTAwMGUklZSLuaM+qNTR7vZcdL4/sitn1UrtR3hb21vzqGfAkFx1MDAwMFx0jFx1MDAwMJ6KekJcclx1MDAwMlx1MDAxOYD0vVHfMDV60HTU686ng52xqSiHUlxuXHUwMDAyQGqyVlx1MDAxMuWHu4d30VEzVJWWffvQOFx1MDAwNPBuu5dcdTAwMWblkVx1MDAxYUSpIN/K7zbTemteg5+HnYyfXHUwMDE5siBFsEFcYnKs10syN2peXHUwMDFm5SxqXHUwMDFj03J6gVpcdTAwMDfc0GLcMGbIZeAmXG7MTtg1XHUwMDAzXHUwMDFkqznYoTnYQXhcbjtSYqqdoWL52FlmXHUwMDFjjufb70RcdTAwMTfuY1x1MDAxMksgU1o22643zExZXHUwMDEyoNrTi8hPO2qGSltMVnGeabvruc04gEuWflx1MDAwN1x1MDAxNWRiO3K1rnpp0HZtO81cdTAwMTmWdsDUfVx1MDAwNsfzLPV+4Dbdjuldpv1bnKZQ6jUmaUpALUpcdTAwMDCZX5v1XHUwMDBlr1x1MDAwM+fS/SZJvyo6dXl601x1MDAxMt/Wm6VcYqVcdTAwMDaEnHHNxlNoo9JcdTAwMDBcdTAwMTJyyTL6aFx1MDAxMZZKfvKQhlxySIq0XHUwMDE51lx1MDAwYoEgOEebMY6JXlxiXHRbPvJeY63WXfPQbLdcdTAwMWQk78hjXHUwMDE5n4fSuyrQZsthrXyD68dakMhCXHUwMDE0SUxcdTAwMDSjLKUwZsHo9WFeU9pcIlruXHUwMDE1XHUwMDAySVNcdTAwMWFcdTAwMTV4MpiXTVtcdTAwMDRPY2iatqhcdTAwMDZcdTAwMWRcdTAwMTP4I7CzPqxcdTAwMDXATvJrZFx1MDAwN/TDyWtcdTAwMDZcdTAwMDNMklfazcU5jMvirVx1MDAxNlx1MDAxMZzogYfzi0bYP6uehFF9t7ZrXHUwMDFmPJRZ11xu67X1JjGGpcFFNoVcdTAwMTA/uc1cclx1MDAxZOlUvlx1MDAxM3VfLGVcdTAwMTPbnHeTJSZcdTAwMTHHXHUwMDA0xVxcolXvsS49//6x45fvavVqZ7/Svq5W9uvvYavfq9tZ3Jpv8Fxy3Eo5kzKlXHUwMDBlP4hbXHUwMDE5K1aoVCAuxVx1MDAxYsD9+iivKbUyQnLhXHKJISAj781cdTAwMWMuZy9IuVx1MDAxNrJcdTAwMWN/XHUwMDAwxpdcdTAwMTmB72PVmlxuVbRSPp1BRpN8OnJwcSalQFx1MDAxNGGNx0hcdTAwMTNcZr9cdTAwMDFrXHUwMDAz+O3+7j4kofqhRexpMPjR3f5MXCLFcyXqqeSMTjEpgsYyXHUwMDA0bCGVUsZcZs71ti5tIJOlXHUwMDE3dFwi6/N/nlx1MDAxZSMtcEBqXHUwMDExXFyJno1XXHUwMDFl+Fx1MDAwNuQtXHUwMDFllIyjoqDEXHUwMDE4MoTwXHUwMDFiUlx1MDAxNOft87NK1ynT/burRlx1MDAxN3lcdTAwMTXsW0frre6SRDqmlGTSXHUwMDEwSVTG26qJNOEyj47mTaJTXHUwMDBl9NKPwYrTXHUwMDExe41WebD7/Vie3J62L09cdTAwMDfgxqyU36/EfpduZ1x0vHyD6yfwaHHKX6+4klxuXCLnz528PsprKvCSlH8uwqGuWEJcdTAwMDJyXHUwMDE5XHUwMDEyXHUwMDBmaX2nXaFopYmTVUu8i8hcZlYr8WYw0nS+P3ZwcTYlpJBNIcNcdTAwMTJLXHUwMDFkb/NrvL9r29fSqdVOq4KU/dtcdTAwMDPn4LzZ/FxcuPG5Uv5cdTAwMTTg6VxylTCYpO9l01x1MDAxOVhbLOFPmdB2Kf6Ao7bXOOvCeri+8/f/dlx1MDAwNvXHq+F5w2pcdTAwMGWCo/dT4e/S7SyGzTe4flxmi3nhXHIsxiiIz3Hnh/zro7ymkI9cdTAwMGYnciGvXHRcdTAwMTZ+KLnOdyghpN5eM/BcdTAwMTH4Xlx1MDAxZm79rEOJXHUwMDE5JLXwoURcdTAwMTHcXGIovsNCMJGI0vlcdTAwMDXtzZk68Fx1MDAxYex+31x1MDAxOYKa1+Ku6Fx1MDAwNnTdXHUwMDA1LYlcdTAwMTMpOVlcdTAwMTQujUmVu3TAXHUwMDAxlFx1MDAwM7hpRiWAUckkXm3aXHUwMDA0QcRTm+pVXFxe6ZuR5eTjTeTjzVON6Fx1MDAxNbRlLsRkoZZ5kbybKiNnXHUwMDE2Qlx1MDAxNS1GXHUwMDE1RHqXKKVEb4BVs/5Ar1x1MDAxYSdcdTAwMDdu9fjspkrCI+ZcdTAwMDRrXHUwMDBmK6hcdTAwMTUqZtn7usmjnFx1MDAxOIxcIvyx5+tcdTAwMTLOhSwmXHUwMDEwkECI1e1cdTAwMTOJ5jLGqcSrRJbehil7czGEzWS0xTE26dZcYmtcdTAwMWLPKrRkdru6TVx1MDAxNDs3Qp6eXHUwMDFj135+/XHXpZ+u6u9cdTAwMTXfZNp4xm9cZlx1MDAxNFx1MDAxNU/Nr6eNp/9cdTAwMDDD6SGzIn0= Stop00:00:00.00ResetStart00:00:00.00StopwatchStarted Stopwatch <p>We can accomplish this with a CSS class. Not to be confused with a Python class, a CSS class is like a tag you can add to a widget to modify its styles.</p> <p>Here's the new CSS:</p> stopwatch04.tcss<pre><code>Stopwatch {\n    layout: horizontal;\n    background: $boost;\n    height: 5;\n    margin: 1;\n    min-width: 50;\n    padding: 1;\n}\n\nTimeDisplay {\n    content-align: center middle;\n    text-opacity: 60%;\n    height: 3;\n}\n\nButton {\n    width: 16;\n}\n\n#start {\n    dock: left;\n}\n\n#stop {\n    dock: left;\n    display: none;\n}\n\n#reset {\n    dock: right;\n}\n\n.started {\n    text-style: bold;\n    background: $success;\n    color: $text;\n}\n\n.started TimeDisplay {\n    text-opacity: 100%;\n}\n\n.started #start {\n    display: none\n}\n\n.started #stop {\n    display: block\n}\n\n.started #reset {\n    visibility: hidden\n}\n</code></pre> <p>These new rules are prefixed with <code>.started</code>. The <code>.</code> indicates that <code>.started</code> refers to a CSS class called \"started\". The new styles will be applied only to widgets that have this CSS class.</p> <p>Some of the new styles have more than one selector separated by a space. The space indicates that the rule should match the second selector if it is a child of the first. Let's look at one of these styles:</p> <pre><code>.started #start {\n    display: none\n}\n</code></pre> <p>The <code>.started</code> selector matches any widget with a <code>\"started\"</code> CSS class. While <code>#start</code> matches a child widget with an ID of <code>\"start\"</code>. So it matches the Start button only for Stopwatches in a started state.</p> <p>The rule is <code>\"display: none\"</code> which tells Textual to hide the button.</p>"},{"location":"tutorial/#manipulating-classes","title":"Manipulating classes","text":"<p>Modifying a widget's CSS classes is a convenient way to update visuals without introducing a lot of messy display related code.</p> <p>You can add and remove CSS classes with the add_class() and remove_class() methods. We will use these methods to connect the started state to the Start / Stop buttons.</p> <p>The following code will start or stop the stopwatches in response to clicking a button.</p> stopwatch04.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        if event.button.id == \"start\":\n            self.add_class(\"started\")\n        elif event.button.id == \"stop\":\n            self.remove_class(\"started\")\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay(\"00:00:00.00\")\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch04.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The <code>on_button_pressed</code> method is an event handler. Event handlers are methods called by Textual in response to an event such as a key press, mouse click, etc. Event handlers begin with <code>on_</code> followed by the name of the event they will handle. Hence <code>on_button_pressed</code> will handle the button pressed event.</p> <p>If you run <code>stopwatch04.py</code> now you will be able to toggle between the two states by clicking the first button:</p> <p> stopwatch04.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:00.00 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p>"},{"location":"tutorial/#reactive-attributes","title":"Reactive attributes","text":"<p>A recurring theme in Textual is that you rarely need to explicitly update a widget. It is possible: you can call refresh() to display new data. However, Textual prefers to do this automatically via reactive attributes.</p> <p>You can declare a reactive attribute with reactive. Let's use this feature to create a timer that displays elapsed time and keeps it updated.</p> stopwatch05.py<pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.set_interval(1 / 60, self.update_time)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update the time to the current time.\"\"\"\n        self.time = monotonic() - self.start_time\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        if event.button.id == \"start\":\n            self.add_class(\"started\")\n        elif event.button.id == \"stop\":\n            self.remove_class(\"started\")\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch04.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>We have added two reactive attributes to the <code>TimeDisplay</code> widget: <code>start_time</code> will contain the time (in seconds) the stopwatch was started, and <code>time</code> will contain the time to be displayed on the <code>Stopwatch</code>.</p> <p>Both attributes will be available on <code>self</code> as if you had assigned them in <code>__init__</code>. If you write to either of these attributes the widget will update automatically.</p> <p>Info</p> <p>The <code>monotonic</code> function in this example is imported from the standard library <code>time</code> module. It is similar to <code>time.time</code> but won't go backwards if the system clock is changed.</p> <p>The first argument to <code>reactive</code> may be a default value for the attribute or a callable that returns a default value. We set the default for <code>start_time</code> to the <code>monotonic</code> function which will be called to initialize the attribute with the current time when the <code>TimeDisplay</code> is added to the app. The <code>time</code> attribute has a simple float as the default, so <code>self.time</code> will be initialized to <code>0</code>.</p> <p>The <code>on_mount</code> method is an event handler called when the widget is first added to the application (or mounted in Textual terminology). In this method we call set_interval() to create a timer which calls <code>self.update_time</code> sixty times a second. This <code>update_time</code> method calculates the time elapsed since the widget started and assigns it to <code>self.time</code> \u2014 which brings us to one of Reactive's super-powers.</p> <p>If you implement a method that begins with <code>watch_</code> followed by the name of a reactive attribute, then the method will be called when the attribute is modified. Such methods are known as watch methods.</p> <p>Because <code>watch_time</code> watches the <code>time</code> attribute, when we update <code>self.time</code> 60 times a second we also implicitly call <code>watch_time</code> which converts the elapsed time to a string and updates the widget with a call to <code>self.update</code>. Because this happens automatically, we don't need to pass in an initial argument to <code>TimeDisplay</code>.</p> <p>The end result is that the <code>Stopwatch</code> widgets show the time elapsed since the widget was created:</p> <p> stopwatch05.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:03.05\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:03.05\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:03.05\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>We've seen how we can update widgets with a timer, but we still need to wire up the buttons so we can operate stopwatches independently.</p>"},{"location":"tutorial/#wiring-buttons","title":"Wiring buttons","text":"<p>We need to be able to start, stop, and reset each stopwatch independently. We can do this by adding a few more methods to the <code>TimeDisplay</code> class.</p> stopwatch06.py<pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n    def start(self) -&gt; None:\n        \"\"\"Method to start (or resume) time updating.\"\"\"\n        self.start_time = monotonic()\n        self.update_timer.resume()\n\n    def stop(self) -&gt; None:\n        \"\"\"Method to stop the time display updating.\"\"\"\n        self.update_timer.pause()\n        self.total += monotonic() - self.start_time\n        self.time = self.total\n\n    def reset(self) -&gt; None:\n        \"\"\"Method to reset the time display to zero.\"\"\"\n        self.total = 0\n        self.time = 0\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch04.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Called to add widgets to the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>Here's a summary of the changes made to <code>TimeDisplay</code>.</p> <ul> <li>We've added a <code>total</code> reactive attribute to store the total time elapsed between clicking the start and stop buttons.</li> <li>The call to <code>set_interval</code> has grown a <code>pause=True</code> argument which starts the timer in pause mode (when a timer is paused it won't run until resume() is called). This is because we don't want the time to update until the user hits the start button.</li> <li>The <code>update_time</code> method now adds <code>total</code> to the current time to account for the time between any previous clicks of the start and stop buttons.</li> <li>We've stored the result of <code>set_interval</code> which returns a Timer object. We will use this later to resume the timer when we start the Stopwatch.</li> <li>We've added <code>start()</code>, <code>stop()</code>, and <code>reset()</code> methods.</li> </ul> <p>In addition, the <code>on_button_pressed</code> method on <code>Stopwatch</code> has grown some code to manage the time display when the user clicks a button. Let's look at that in detail:</p> <pre><code>    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n</code></pre> <p>This code supplies missing features and makes our app useful. We've made the following changes.</p> <ul> <li>The first line retrieves <code>id</code> attribute of the button that was pressed. We can use this to decide what to do in response.</li> <li>The second line calls <code>query_one</code> to get a reference to the <code>TimeDisplay</code> widget.</li> <li>We call the method on <code>TimeDisplay</code> that matches the pressed button.</li> <li>We add the <code>\"started\"</code> class when the Stopwatch is started (<code>self.add_class(\"started\")</code>), and remove it (<code>self.remove_class(\"started\")</code>) when it is stopped. This will update the Stopwatch visuals via CSS.</li> </ul> <p>If you run <code>stopwatch06.py</code> you will be able to use the stopwatches independently.</p> <p> stopwatch06.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:10.10 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:06.07 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>The only remaining feature of the Stopwatch app left to implement is the ability to add and remove stopwatches.</p>"},{"location":"tutorial/#dynamic-widgets","title":"Dynamic widgets","text":"<p>The Stopwatch app creates widgets when it starts via the <code>compose</code> method. We will also need to create new widgets while the app is running, and remove widgets we no longer need. We can do this by calling mount() to add a widget, and remove() to remove a widget.</p> <p>Let's use these methods to implement adding and removing stopwatches to our app.</p> stopwatch.py<pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n    def start(self) -&gt; None:\n        \"\"\"Method to start (or resume) time updating.\"\"\"\n        self.start_time = monotonic()\n        self.update_timer.resume()\n\n    def stop(self):\n        \"\"\"Method to stop the time display updating.\"\"\"\n        self.update_timer.pause()\n        self.total += monotonic() - self.start_time\n        self.time = self.total\n\n    def reset(self):\n        \"\"\"Method to reset the time display to zero.\"\"\"\n        self.total = 0\n        self.time = 0\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch.tcss\"\n\n    BINDINGS = [\n        (\"d\", \"toggle_dark\", \"Toggle dark mode\"),\n        (\"a\", \"add_stopwatch\", \"Add\"),\n        (\"r\", \"remove_stopwatch\", \"Remove\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Called to add widgets to the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch(), id=\"timers\")\n\n    def action_add_stopwatch(self) -&gt; None:\n        \"\"\"An action to add a timer.\"\"\"\n        new_stopwatch = Stopwatch()\n        self.query_one(\"#timers\").mount(new_stopwatch)\n        new_stopwatch.scroll_visible()\n\n    def action_remove_stopwatch(self) -&gt; None:\n        \"\"\"Called to remove a timer.\"\"\"\n        timers = self.query(\"Stopwatch\")\n        if timers:\n            timers.last().remove()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>Here's a summary of the changes:</p> <ul> <li>The <code>ScrollableContainer</code> object in <code>StopWatchApp</code> grew a <code>\"timers\"</code> ID.</li> <li>Added <code>action_add_stopwatch</code> to add a new stopwatch.</li> <li>Added <code>action_remove_stopwatch</code> to remove a stopwatch.</li> <li>Added keybindings for the actions.</li> </ul> <p>The <code>action_add_stopwatch</code> method creates and mounts a new stopwatch. Note the call to query_one() with a CSS selector of <code>\"#timers\"</code> which gets the timer's container via its ID. Once mounted, the new Stopwatch will appear in the terminal. That last line in <code>action_add_stopwatch</code> calls scroll_visible() which will scroll the container to make the new <code>Stopwatch</code> visible (if required).</p> <p>The <code>action_remove_stopwatch</code> function calls query() with a CSS selector of <code>\"Stopwatch\"</code> which gets all the <code>Stopwatch</code> widgets. If there are stopwatches then the action calls last() to get the last stopwatch, and remove() to remove it.</p> <p>If you run <code>stopwatch.py</code> now you can add a new stopwatch with the A key and remove a stopwatch with R.</p> <p> stopwatch.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:06.10 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u00a0a\u00a0Add\u00a0\u00a0r\u00a0Remove\u00a0\u258f^p\u00a0palette </p>"},{"location":"tutorial/#what-next","title":"What next?","text":"<p>Congratulations on building your first Textual application! This tutorial has covered a lot of ground. If you are the type that prefers to learn a framework by coding, feel free. You could tweak <code>stopwatch.py</code> or look through the examples.</p> <p>Read the guide for the full details on how to build sophisticated TUI applications with Textual.</p>"},{"location":"widget_gallery/","title":"Widgets","text":"<p>Welcome to the Textual widget gallery.</p> <p>We have many more widgets planned, or you can build your own.</p> <p>Info</p> <p>Textual is a TUI framework. Everything below runs in the terminal.</p>"},{"location":"widget_gallery/#button","title":"Button","text":"<p>A simple button with a variety of semantic styles.</p> <p>Button reference</p> <p> ButtonsApp Standard\u00a0ButtonsDisabled\u00a0Buttons \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Default\u00a0\u00a0Default\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Primary!\u00a0\u00a0Primary!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Success!\u00a0\u00a0Success!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Warning!\u00a0\u00a0Warning!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Error!\u00a0\u00a0Error!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"widget_gallery/#checkbox","title":"Checkbox","text":"<p>A classic checkbox control.</p> <p>Checkbox reference</p> <p> CheckboxApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Arrakis\u00a0\ud83d\ude13\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Caladan\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Chusuk\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGiedi\u00a0Prime\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGinaz\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Grumman\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2583\u2583 \u258a\u2590X\u258cKaitain\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e </p>"},{"location":"widget_gallery/#collapsible","title":"Collapsible","text":"<p>Content that may be toggled on and off by clicking a title.</p> <p>Collapsible reference</p> <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Leto #\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides Head\u00a0of\u00a0House\u00a0Atreides.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Jessica Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Paul \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#contentswitcher","title":"ContentSwitcher","text":"<p>A widget for containing and switching display between multiple child widgets.</p> <p>ContentSwitcher reference</p>"},{"location":"widget_gallery/#datatable","title":"DataTable","text":"<p>A powerful data table, with configurable cursors.</p> <p>DataTable reference</p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p>"},{"location":"widget_gallery/#digits","title":"Digits","text":"<p>Display numbers in tall characters.</p> <p>Digits reference</p> <p> DigitApp \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 \u2551\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u00a0\u2513\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u250f\u2501\u2513\u257a\u2501\u2513\u2551 \u2551\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0\u2503\u00a0\u00a0\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b\u00a0\u2523\u2501\u2513\u2517\u2501\u2513\u00a0\u2501\u252b\u00a0\u2517\u2501\u2513\u2523\u2501\u252b\u2517\u2501\u252b\u00a0\u00a0\u2503\u2551 \u2551\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u253b\u2578,\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578,\u2517\u2501\u251b\u257a\u2501\u251b\u257a\u2501\u251b,\u257a\u2501\u251b\u2517\u2501\u251b\u257a\u2501\u251b\u00a0\u00a0\u2579\u2551 \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d </p>"},{"location":"widget_gallery/#directorytree","title":"DirectoryTree","text":"<p>A tree view of files and folders.</p> <p>DirectoryTree reference</p> <p> DirectoryTreeApp \ud83d\udcc2\u00a0 \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.faq \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.git \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.github \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.ipynb_checkpoints \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.mypy_cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.pytest_cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.screenshot_cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.vscode \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0__pycache__ \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0dist\u2583\u2583 \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0docs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0examples \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0imgs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0notes \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0questions \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0reference \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0sandbox \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0site \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0src \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tests \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tools \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0.coverage </p>"},{"location":"widget_gallery/#footer","title":"Footer","text":"<p>A footer to display and interact with key bindings.</p> <p>Footer reference</p> <p> FooterApp \u00a0q\u00a0Quit\u00a0the\u00a0app\u00a0\u00a0?\u00a0Show\u00a0help\u00a0screen\u00a0\u00a0del\u00a0Delete\u00a0the\u00a0thing\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#header","title":"Header","text":"<p>A header to display the app's title and subtitle.</p> <p>Header reference</p> <p> HeaderApp \u2b58HeaderApp </p>"},{"location":"widget_gallery/#input","title":"Input","text":"<p>A control to enter text.</p> <p>Input reference</p> <p> InputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aDarren\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aLast\u00a0Name\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#label","title":"Label","text":"<p>A simple text label.</p> <p>Label reference</p>"},{"location":"widget_gallery/#listview","title":"ListView","text":"<p>Display a list of items (items may be other widgets).</p> <p>ListView reference</p> <p> ListViewExample One Two Three \u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#loadingindicator","title":"LoadingIndicator","text":"<p>Display an animation while data is loading.</p> <p>LoadingIndicator reference</p> <p> LoadingApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf </p>"},{"location":"widget_gallery/#log","title":"Log","text":"<p>Display and update lines of text (such as from a file).</p> <p>Log reference</p> <p> LogApp And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2584\u2584 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"widget_gallery/#markdownviewer","title":"MarkdownViewer","text":"<p>Display and interact with a Markdown document (adds a table of contents and browser-like navigation to Markdown).</p> <p>MarkdownViewer reference</p> <p> MarkdownExampleApp \u258a \u25bc\u00a0\u2160\u00a0Markdown\u00a0Viewer\u258a \u251c\u2500\u2500\u00a0\u2161\u00a0Features\u258aMarkdown\u00a0Viewer \u251c\u2500\u2500\u00a0\u2161\u00a0Tables\u258a \u2514\u2500\u2500\u00a0\u2161\u00a0Code\u00a0Blocks\u258a\u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0MarkdownViewer\u00a0widget. \u258a \u258a \u258aFeatures \u258a \u258a\u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u258a \u258a\u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u258a\u25cf\u00a0Headers \u258a\u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u258a\u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u258a\u25cf\u00a0Tables! \u258a \u258a \u258aTables \u258a \u258a\u00a0\u00a0Tables\u00a0are\u00a0displayed\u00a0in\u00a0a\u00a0DataTable\u00a0widget. \u258a \u258a \u258aName\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Type\u00a0Default\u00a0Description\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0 \u258ashow_headerboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0the\u00a0table\u00a0header\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_rowsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_columnsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0columns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258azebra_stripesboolFalse\u00a0\u00a0\u00a0\u00a0Display\u00a0alternating\u00a0colors\u00a0on\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0 \u258aheader_heightint1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Height\u00a0of\u00a0header\u00a0row\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258ashow_cursorboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0a\u00a0cell\u00a0cursor\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a \u258a \u258a \u258aCode\u00a0Blocks \u258a\u2585\u2585 \u258a\u00a0\u00a0Code\u00a0blocks\u00a0are\u00a0syntax\u00a0highlighted,\u00a0with\u00a0guidelines. \u258a \u258a \u258aclassListViewExample(App): \u258a\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;\u00a0ComposeResult: \u258a\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0ListView( </p>"},{"location":"widget_gallery/#markdown","title":"Markdown","text":"<p>Display a markdown document.</p> <p>Markdown reference</p> <p> MarkdownExampleApp Markdown\u00a0Document \u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0Markdown\u00a0widget. Features \u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u25cf\u00a0Headers \u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u25cf\u00a0Tables! </p>"},{"location":"widget_gallery/#optionlist","title":"OptionList","text":"<p>Display a vertical list of options (options may be Rich renderables).</p> <p>OptionList reference</p> <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2581\u2581\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#placeholder","title":"Placeholder","text":"<p>Display placeholder content while you are designing a UI.</p> <p>Placeholder reference</p> <p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula. Nullam\u00a0imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0 vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.\u00a0Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sedconsectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0 lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 sapien\u00a0sapien\u00a0congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 </p>"},{"location":"widget_gallery/#pretty","title":"Pretty","text":"<p>Display a pretty-formatted Rich renderable.</p> <p>Pretty reference</p> <p> PrettyExample { 'title':\u00a0'Back\u00a0to\u00a0the\u00a0Future', 'releaseYear':\u00a01985, 'director':\u00a0'Robert\u00a0Zemeckis', 'genre':\u00a0'Adventure,\u00a0Comedy,\u00a0Sci-Fi', 'cast':\u00a0[ {'actor':\u00a0'Michael\u00a0J.\u00a0Fox',\u00a0'character':\u00a0'Marty\u00a0McFly'}, {'actor':\u00a0'Christopher\u00a0Lloyd',\u00a0'character':\u00a0'Dr.\u00a0Emmett\u00a0Brown'} ] } </p>"},{"location":"widget_gallery/#progressbar","title":"ProgressBar","text":"<p>A configurable progress bar with ETA and percentage complete.</p> <p>ProgressBar reference</p> <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250150%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Donation\u00a0for\u00a0$50\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"widget_gallery/#radiobutton","title":"RadioButton","text":"<p>A simple radio button.</p> <p>RadioButton reference</p> <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Picture\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#radioset","title":"RadioSet","text":"<p>A collection of radio buttons, that enforces uniqueness.</p> <p>RadioSet reference</p> <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e\u258a\u2590\u25cf\u258c\u00a0Amanda\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e\u258a\u2590\u25cf\u258c\u00a0Connor\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e\u258a\u2590\u25cf\u258c\u00a0Duncan\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e\u258a\u2590\u25cf\u258c\u00a0Heather\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Pictur\u258e\u258a\u2590\u25cf\u258c\u00a0Joe\u00a0Dawson\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e\u258a\u2590\u25cf\u258c\u00a0Kurgan,\u00a0The\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e\u258a\u2590\u25cf\u258c\u00a0Methos\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e\u258a\u2590\u25cf\u258c\u00a0Rachel\u00a0Ellenstein\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e\u258a\u2590\u25cf\u258c\u00a0Ram\u00edrez\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#richlog","title":"RichLog","text":"<p>Display and update text in a scrolling panel.</p> <p>RichLog reference</p> <p> RichLogApp \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0next(iter_values) \u2502\u00a0\u00a0\u00a0exceptStopIteration: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0return \u2502\u00a0\u00a0\u00a0first\u00a0=True\u2585\u2585 \u2502\u00a0\u00a0\u00a0for\u00a0value\u00a0in\u00a0iter_values: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0False,\u00a0previous_value \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0first\u00a0=False \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0value \u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0True,\u00a0previous_value \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2503\u00a0lane\u00a0\u2503\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0time\u00a0\u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a050.39\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0South\u00a0Africa\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u2502\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.26\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.58\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.73\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u2502\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.84\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Write\u00a0text\u00a0or\u00a0any\u00a0Rich\u00a0renderable! Key(key='H',\u00a0character='H',\u00a0name='upper_h',\u00a0is_printable=True) Key(key='i',\u00a0character='i',\u00a0name='i',\u00a0is_printable=True) </p>"},{"location":"widget_gallery/#rule","title":"Rule","text":"<p>A rule widget to separate content, similar to a <code>&lt;hr&gt;</code> HTML tag.</p> <p>Rule reference</p> <p> HorizontalRulesApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0solid\u00a0(default)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0heavy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0thick\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dashed\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0double\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ascii\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ---------------------------------------------------------------- </p>"},{"location":"widget_gallery/#select","title":"Select","text":"<p>Select from a number of possible options.</p> <p>Select reference</p> <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#selectionlist","title":"SelectionList","text":"<p>Select multiple values from a list of options.</p> <p>SelectionList reference</p> <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#sparkline","title":"Sparkline","text":"<p>Display numerical data.</p> <p>Sparkline reference</p> <p> SparklineSummaryFunctionApp \u2582\u2584\u2582\u2584\u2583\u2583\u2586\u2585\u2583\u2582\u2583\u2582\u2583\u2582\u2584\u2587\u2583\u2583\u2587\u2585\u2584\u2583\u2584\u2584\u2583\u2582\u2583\u2582\u2583\u2584\u2584\u2588\u2586\u2582\u2583\u2583\u2585\u2583\u2583\u2584\u2583\u2587\u2583\u2583\u2583\u2584\u2584\u2586\u2583\u2583\u2585\u2582\u2585\u2583\u2584\u2583\u2583\u2584\u2583\u2585\u2586\u2582\u2582\u2583\u2586\u2582\u2583\u2584\u2585\u2584\u2583\u2584\u2584\u2581\u2583\u2582 \u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2582\u2582\u2582\u2582\u2582\u2582\u2581\u2581\u2581\u2581\u2581\u2582\u2581\u2582\u2582\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2581\u2581\u2581\u2581\u2582\u2582\u2582\u2581\u2582\u2581\u2581\u2581\u2581 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"widget_gallery/#static","title":"Static","text":"<p>Displays simple static content. Typically used as a base class.</p> <p>Static reference</p>"},{"location":"widget_gallery/#switch","title":"Switch","text":"<p>An on / off control, inspired by toggle buttons.</p> <p>Switch reference</p> <p> SwitchApp Example\u00a0switches \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0off:\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0on:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0focused:\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0custom:\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#tabs","title":"Tabs","text":"<p>A row of tabs you can select with the mouse or navigate with keys.</p> <p>Tabs reference</p> <p> TabsApp \u00a0AtreidiesDuke\u00a0Leto\u00a0AtreidesLady\u00a0JessicaGurney\u00a0HalleckBaron\u00a0Vladimir \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aLady\u00a0Jessica\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0a\u00a0Add\u00a0tab\u00a0\u00a0r\u00a0Remove\u00a0active\u00a0tab\u00a0\u00a0c\u00a0Clear\u00a0tabs\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#tabbedcontent","title":"TabbedContent","text":"<p>A Combination of Tabs and ContentSwitcher to navigate static content.</p> <p>TabbedContent reference</p> <p> TabbedApp LetoJessicaPaul \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. PaulAlia \u2501\u2578\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 First\u00a0child\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0l\u00a0Leto\u00a0\u00a0j\u00a0Jessica\u00a0\u00a0p\u00a0Paul\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#textarea","title":"TextArea","text":"<p>A multi-line text area which supports syntax highlighting various languages.</p> <p>TextArea reference</p> <p> TextAreaExample \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0defhello(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a2\u00a0\u00a0print(\"hello\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a3\u00a0\u00a0\u258e \u258a4\u00a0\u00a0defgoodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0print(\"goodbye\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#tree","title":"Tree","text":"<p>A tree control with expandable nodes.</p> <p>Tree reference</p> <p> TreeApp \u25bc\u00a0Dune \u2517\u2501\u2501\u00a0\u25bc\u00a0Characters \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Paul \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Jessica \u00a0\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0Chani </p>"},{"location":"api/","title":"API","text":"<p>This is a API-level reference to the Textual API. Click the links to your left (or in the burger menu) to open a reference for each module.</p> <p>If you are new to Textual, you may want to read the tutorial or guide first.</p>"},{"location":"api/app/","title":"textual.app","text":"<p>Here you will find the App class, which is the base class for Textual apps.</p> <p>See app basics for how to build Textual apps.</p>"},{"location":"api/app/#textual.app.AutopilotCallbackType","title":"AutopilotCallbackType  <code>module-attribute</code>","text":"<pre><code>AutopilotCallbackType = (\n    \"Callable[[Pilot[object]], Coroutine[Any, Any, None]]\"\n)\n</code></pre> <p>Signature for valid callbacks that can be used to control apps.</p>"},{"location":"api/app/#textual.app.CommandCallback","title":"CommandCallback  <code>module-attribute</code>","text":"<pre><code>CommandCallback = (\n    \"Callable[[], Awaitable[Any]] | Callable[[], Any]\"\n)\n</code></pre> <p>Signature for callbacks used in <code>get_system_commands</code></p>"},{"location":"api/app/#textual.app.ActionError","title":"ActionError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for exceptions relating to actions.</p>"},{"location":"api/app/#textual.app.ActiveModeError","title":"ActiveModeError","text":"<p>               Bases: <code>ModeError</code></p> <p>Raised when attempting to remove the currently active mode.</p>"},{"location":"api/app/#textual.app.App","title":"App","text":"<pre><code>App(driver_class=None, css_path=None, watch_css=False)\n</code></pre> <p>               Bases: <code>Generic[ReturnType]</code>, <code>DOMNode</code></p> <p>The base class for Textual Applications.</p> <p>Parameters:</p> Name Type Description Default <code>Type[Driver] | None</code> <p>Driver class or <code>None</code> to auto-detect. This will be used by some Textual tools.</p> <code>None</code> <code>CSSPathType | None</code> <p>Path to CSS or <code>None</code> to use the <code>CSS_PATH</code> class variable. To load multiple CSS files, pass a list of strings or paths which will be loaded in order.</p> <code>None</code> <code>bool</code> <p>Reload CSS if the files changed. This is set automatically if you are using <code>textual run</code> with the <code>dev</code> switch.</p> <code>False</code> <p>Raises:</p> Type Description <code>CssPathError</code> <p>When the supplied CSS path(s) are an unexpected type.</p>"},{"location":"api/app/#textual.app.App(driver_class)","title":"<code>driver_class</code>","text":""},{"location":"api/app/#textual.app.App(css_path)","title":"<code>css_path</code>","text":""},{"location":"api/app/#textual.app.App(watch_css)","title":"<code>watch_css</code>","text":""},{"location":"api/app/#textual.app.App.AUTO_FOCUS","title":"AUTO_FOCUS  <code>class-attribute</code>","text":"<pre><code>AUTO_FOCUS = '*'\n</code></pre> <p>A selector to determine what to focus automatically when a screen is activated.</p> <p>The widget focused is the first that matches the given CSS selector. Setting to <code>None</code> or <code>\"\"</code> disables auto focus.</p>"},{"location":"api/app/#textual.app.App.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"ctrl+c\", \"quit\", \"Quit\", show=False, priority=True\n    )\n]\n</code></pre> <p>The default key bindings.</p>"},{"location":"api/app/#textual.app.App.BINDING_GROUP_TITLE","title":"BINDING_GROUP_TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDING_GROUP_TITLE = 'App'\n</code></pre> <p>Shown in the key panel.</p>"},{"location":"api/app/#textual.app.App.CLOSE_TIMEOUT","title":"CLOSE_TIMEOUT  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>CLOSE_TIMEOUT = 5.0\n</code></pre> <p>Timeout waiting for widget's to close, or <code>None</code> for no timeout.</p>"},{"location":"api/app/#textual.app.App.COMMANDS","title":"COMMANDS  <code>class-attribute</code>","text":"<pre><code>COMMANDS = {get_system_commands_provider}\n</code></pre> <p>Command providers used by the command palette.</p> <p>Should be a set of command.Provider classes.</p>"},{"location":"api/app/#textual.app.App.COMMAND_PALETTE_BINDING","title":"COMMAND_PALETTE_BINDING  <code>class-attribute</code>","text":"<pre><code>COMMAND_PALETTE_BINDING = 'ctrl+p'\n</code></pre> <p>The key that launches the command palette (if enabled by <code>App.ENABLE_COMMAND_PALETTE</code>).</p>"},{"location":"api/app/#textual.app.App.COMMAND_PALETTE_DISPLAY","title":"COMMAND_PALETTE_DISPLAY  <code>class-attribute</code>","text":"<pre><code>COMMAND_PALETTE_DISPLAY = None\n</code></pre> <p>How the command palette key should be displayed in the footer (or <code>None</code> for default).</p>"},{"location":"api/app/#textual.app.App.CSS","title":"CSS  <code>class-attribute</code>","text":"<pre><code>CSS = ''\n</code></pre> <p>Inline CSS, useful for quick scripts. This is loaded after CSS_PATH, and therefore takes priority in the event of a specificity clash.</p>"},{"location":"api/app/#textual.app.App.CSS_PATH","title":"CSS_PATH  <code>class-attribute</code>","text":"<pre><code>CSS_PATH = None\n</code></pre> <p>File paths to load CSS from.</p>"},{"location":"api/app/#textual.app.App.ENABLE_COMMAND_PALETTE","title":"ENABLE_COMMAND_PALETTE  <code>class-attribute</code>","text":"<pre><code>ENABLE_COMMAND_PALETTE = True\n</code></pre> <p>Should the command palette be enabled for the application?</p>"},{"location":"api/app/#textual.app.App.ESCAPE_TO_MINIMIZE","title":"ESCAPE_TO_MINIMIZE  <code>class-attribute</code>","text":"<pre><code>ESCAPE_TO_MINIMIZE = True\n</code></pre> <p>Use escape key to minimize widgets (potentially overriding bindings).</p> <p>This is the default value, used if the active screen's <code>ESCAPE_TO_MINIMIZE</code> is not changed from <code>None</code>.</p>"},{"location":"api/app/#textual.app.App.MODES","title":"MODES  <code>class-attribute</code>","text":"<pre><code>MODES = {}\n</code></pre> <p>Modes associated with the app and their base screens.</p> <p>The base screen is the screen at the bottom of the mode stack. You can think of it as the default screen for that stack. The base screens can be names of screens listed in SCREENS, <code>Screen</code> instances, or callables that return screens.</p> Example <pre><code>class HelpScreen(Screen[None]):\n    ...\n\nclass MainAppScreen(Screen[None]):\n    ...\n\nclass MyApp(App[None]):\n    MODES = {\n        \"default\": \"main\",\n        \"help\": HelpScreen,\n    }\n\n    SCREENS = {\n        \"main\": MainAppScreen,\n    }\n\n    ...\n</code></pre>"},{"location":"api/app/#textual.app.App.NOTIFICATION_TIMEOUT","title":"NOTIFICATION_TIMEOUT  <code>class-attribute</code>","text":"<pre><code>NOTIFICATION_TIMEOUT = 5\n</code></pre> <p>Default number of seconds to show notifications before removing them.</p>"},{"location":"api/app/#textual.app.App.SCREENS","title":"SCREENS  <code>class-attribute</code>","text":"<pre><code>SCREENS = {}\n</code></pre> <p>Screens associated with the app for the lifetime of the app.</p>"},{"location":"api/app/#textual.app.App.SUB_TITLE","title":"SUB_TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>SUB_TITLE = None\n</code></pre> <p>A class variable to set the default sub-title for the application.</p> <p>To update the sub-title while the app is running, you can set the sub_title attribute. See also the <code>Screen.SUB_TITLE</code> attribute.</p>"},{"location":"api/app/#textual.app.App.TITLE","title":"TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>TITLE = None\n</code></pre> <p>A class variable to set the default title for the application.</p> <p>To update the title while the app is running, you can set the title attribute. See also the <code>Screen.TITLE</code> attribute.</p>"},{"location":"api/app/#textual.app.App.TOOLTIP_DELAY","title":"TOOLTIP_DELAY  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>TOOLTIP_DELAY = 0.5\n</code></pre> <p>The time in seconds after which a tooltip gets displayed.</p>"},{"location":"api/app/#textual.app.App.active_bindings","title":"active_bindings  <code>property</code>","text":"<pre><code>active_bindings\n</code></pre> <p>Get currently active bindings.</p> <p>If no widget is focused, then app-level bindings are returned. If a widget is focused, then any bindings present in the active screen and app are merged and returned.</p> <p>This property may be used to inspect current bindings.</p> <p>Returns:</p> Type Description <code>dict[str, ActiveBinding]</code> <p>A dict that maps keys on to binding information.</p>"},{"location":"api/app/#textual.app.App.animation_level","title":"animation_level  <code>instance-attribute</code>","text":"<pre><code>animation_level = TEXTUAL_ANIMATIONS\n</code></pre> <p>Determines what type of animations the app will display.</p> <p>See <code>textual.constants.TEXTUAL_ANIMATIONS</code>.</p>"},{"location":"api/app/#textual.app.App.animator","title":"animator  <code>property</code>","text":"<pre><code>animator\n</code></pre> <p>The animator object.</p>"},{"location":"api/app/#textual.app.App.ansi_theme","title":"ansi_theme  <code>property</code>","text":"<pre><code>ansi_theme\n</code></pre> <p>The ANSI TerminalTheme currently being used.</p> <p>Defines how colors defined as ANSI (e.g. <code>magenta</code>) inside Rich renderables are mapped to hex codes.</p>"},{"location":"api/app/#textual.app.App.ansi_theme_dark","title":"ansi_theme_dark  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ansi_theme_dark = Reactive(MONOKAI, init=False)\n</code></pre> <p>Maps ANSI colors to hex colors using a Rich TerminalTheme object while in dark mode.</p>"},{"location":"api/app/#textual.app.App.ansi_theme_light","title":"ansi_theme_light  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ansi_theme_light = Reactive(ALABASTER, init=False)\n</code></pre> <p>Maps ANSI colors to hex colors using a Rich TerminalTheme object while in light mode.</p>"},{"location":"api/app/#textual.app.App.app_focus","title":"app_focus  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>app_focus = Reactive(True, compute=False)\n</code></pre> <p>Indicates if the app has focus.</p> <p>When run in the terminal, the app always has focus. When run in the web, the app will get focus when the terminal widget has focus.</p>"},{"location":"api/app/#textual.app.App.app_resume_signal","title":"app_resume_signal  <code>instance-attribute</code>","text":"<pre><code>app_resume_signal = Signal(self, 'app-resume')\n</code></pre> <p>The signal that is published when the app is resumed after a suspend.</p> <p>When the app is resumed after a <code>App.suspend</code> call this signal will be published; subscribe to this signal to perform work after the app has resumed.</p>"},{"location":"api/app/#textual.app.App.app_suspend_signal","title":"app_suspend_signal  <code>instance-attribute</code>","text":"<pre><code>app_suspend_signal = Signal(self, 'app-suspend')\n</code></pre> <p>The signal that is published when the app is suspended.</p> <p>When <code>App.suspend</code> is called this signal will be published; subscribe to this signal to perform work before the suspension takes place.</p>"},{"location":"api/app/#textual.app.App.children","title":"children  <code>property</code>","text":"<pre><code>children\n</code></pre> <p>A view onto the app's immediate children.</p> <p>This attribute exists on all widgets. In the case of the App, it will only ever contain a single child, which will be the currently active screen.</p> <p>Returns:</p> Type Description <code>Sequence['Widget']</code> <p>A sequence of widgets.</p>"},{"location":"api/app/#textual.app.App.current_mode","title":"current_mode  <code>property</code>","text":"<pre><code>current_mode\n</code></pre> <p>The name of the currently active mode.</p>"},{"location":"api/app/#textual.app.App.cursor_position","title":"cursor_position  <code>instance-attribute</code>","text":"<pre><code>cursor_position = Offset(0, 0)\n</code></pre> <p>The position of the terminal cursor in screen-space.</p> <p>This can be set by widgets and is useful for controlling the positioning of OS IME and emoji popup menus.</p>"},{"location":"api/app/#textual.app.App.dark","title":"dark  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>dark = Reactive(True, compute=False)\n</code></pre> <p>Use a dark theme if <code>True</code>, otherwise use a light theme.</p> <p>Modify this attribute to switch between light and dark themes.</p> Example <pre><code>self.app.dark = not self.app.dark  # Toggle dark mode\n</code></pre>"},{"location":"api/app/#textual.app.App.debug","title":"debug  <code>property</code>","text":"<pre><code>debug\n</code></pre> <p>Is debug mode enabled?</p>"},{"location":"api/app/#textual.app.App.escape_to_minimize","title":"escape_to_minimize  <code>property</code>","text":"<pre><code>escape_to_minimize\n</code></pre> <p>Use the escape key to minimize?</p> <p>When a widget is maximized, this boolean determines if the <code>escape</code> key will minimize the widget (potentially overriding any bindings).</p> <p>The default logic is to use the screen's <code>ESCAPE_TO_MINIMIZE</code> classvar if it is set to <code>True</code> or <code>False</code>. If the classvar on the screen is not set (and left as <code>None</code>), then the app's <code>ESCAPE_TO_MINIMIZE</code> is used.</p>"},{"location":"api/app/#textual.app.App.focused","title":"focused  <code>property</code>","text":"<pre><code>focused\n</code></pre> <p>The widget that is focused on the currently active screen, or <code>None</code>.</p> <p>Focused widgets receive keyboard input.</p> <p>Returns:</p> Type Description <code>Widget | None</code> <p>The currently focused widget, or <code>None</code> if nothing is focused.</p>"},{"location":"api/app/#textual.app.App.is_attached","title":"is_attached  <code>property</code>","text":"<pre><code>is_attached\n</code></pre> <p>Is this node linked to the app through the DOM?</p>"},{"location":"api/app/#textual.app.App.is_dom_root","title":"is_dom_root  <code>property</code>","text":"<pre><code>is_dom_root\n</code></pre> <p>Is this a root node (i.e. the App)?</p>"},{"location":"api/app/#textual.app.App.is_headless","title":"is_headless  <code>property</code>","text":"<pre><code>is_headless\n</code></pre> <p>Is the app running in 'headless' mode?</p> <p>Headless mode is used when running tests with run_test.</p>"},{"location":"api/app/#textual.app.App.is_inline","title":"is_inline  <code>property</code>","text":"<pre><code>is_inline\n</code></pre> <p>Is the app running in 'inline' mode?</p>"},{"location":"api/app/#textual.app.App.log","title":"log  <code>property</code>","text":"<pre><code>log\n</code></pre> <p>The textual logger.</p> Example <pre><code>self.log(\"Hello, World!\")\nself.log(self.tree)\n</code></pre> <p>Returns:</p> Type Description <code>Logger</code> <p>A Textual logger.</p>"},{"location":"api/app/#textual.app.App.return_code","title":"return_code  <code>property</code>","text":"<pre><code>return_code\n</code></pre> <p>The return code with which the app exited.</p> <p>Non-zero codes indicate errors. A value of 1 means the app exited with a fatal error. If the app hasn't exited yet, this will be <code>None</code>.</p> Example <p>The return code can be used to exit the process via <code>sys.exit</code>. <pre><code>my_app.run()\nsys.exit(my_app.return_code)\n</code></pre></p>"},{"location":"api/app/#textual.app.App.return_value","title":"return_value  <code>property</code>","text":"<pre><code>return_value\n</code></pre> <p>The return value of the app, or <code>None</code> if it has not yet been set.</p> <p>The return value is set when calling exit.</p>"},{"location":"api/app/#textual.app.App.screen","title":"screen  <code>property</code>","text":"<pre><code>screen\n</code></pre> <p>The current active screen.</p> <p>Returns:</p> Type Description <code>Screen[object]</code> <p>The currently active (visible) screen.</p> <p>Raises:</p> Type Description <code>ScreenStackError</code> <p>If there are no screens on the stack.</p>"},{"location":"api/app/#textual.app.App.screen_stack","title":"screen_stack  <code>property</code>","text":"<pre><code>screen_stack\n</code></pre> <p>A snapshot of the current screen stack.</p> <p>Returns:</p> Type Description <code>list[Screen[Any]]</code> <p>A snapshot of the current state of the screen stack.</p>"},{"location":"api/app/#textual.app.App.scroll_sensitivity_x","title":"scroll_sensitivity_x  <code>instance-attribute</code>","text":"<pre><code>scroll_sensitivity_x = 4.0\n</code></pre> <p>Number of columns to scroll in the X direction with wheel or trackpad.</p>"},{"location":"api/app/#textual.app.App.scroll_sensitivity_y","title":"scroll_sensitivity_y  <code>instance-attribute</code>","text":"<pre><code>scroll_sensitivity_y = 2.0\n</code></pre> <p>Number of lines to scroll in the Y direction with wheel or trackpad.</p>"},{"location":"api/app/#textual.app.App.size","title":"size  <code>property</code>","text":"<pre><code>size\n</code></pre> <p>The size of the terminal.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Size of the terminal.</p>"},{"location":"api/app/#textual.app.App.sub_title","title":"sub_title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>sub_title = SUB_TITLE if SUB_TITLE is not None else ''\n</code></pre> <p>The sub-title for the application.</p> <p>The initial value for <code>sub_title</code> will be set to the <code>SUB_TITLE</code> class variable if it exists, or an empty string if it doesn't.</p> <p>Sub-titles are typically used to show the high-level state of the app, such as the current mode, or path to the file being worked on.</p> <p>Assign a new value to this attribute to change the sub-title. The new value is always converted to string.</p>"},{"location":"api/app/#textual.app.App.title","title":"title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>title = TITLE if TITLE is not None else f'{__name__}'\n</code></pre> <p>The title for the application.</p> <p>The initial value for <code>title</code> will be set to the <code>TITLE</code> class variable if it exists, or the name of the app if it doesn't.</p> <p>Assign a new value to this attribute to change the title. The new value is always converted to string.</p>"},{"location":"api/app/#textual.app.App.use_command_palette","title":"use_command_palette  <code>instance-attribute</code>","text":"<pre><code>use_command_palette = ENABLE_COMMAND_PALETTE\n</code></pre> <p>A flag to say if the application should use the command palette.</p> <p>If set to <code>False</code> any call to <code>action_command_palette</code> will be ignored.</p>"},{"location":"api/app/#textual.app.App.workers","title":"workers  <code>property</code>","text":"<pre><code>workers\n</code></pre> <p>The worker manager.</p> <p>Returns:</p> Type Description <code>WorkerManager</code> <p>An object to manage workers.</p>"},{"location":"api/app/#textual.app.App.action_add_class","title":"action_add_class  <code>async</code>","text":"<pre><code>action_add_class(selector, class_name)\n</code></pre> <p>An action to add a CSS class to the selected widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Selects the widget to add the class to.</p> required <code>str</code> <p>The class to add to the selected widget.</p> required"},{"location":"api/app/#textual.app.App.action_add_class(selector)","title":"<code>selector</code>","text":""},{"location":"api/app/#textual.app.App.action_add_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/app/#textual.app.App.action_back","title":"action_back  <code>async</code>","text":"<pre><code>action_back()\n</code></pre> <p>An action to go back to the previous screen (pop the current screen).</p> Note <p>If there is no screen to go back to, this is a non-operation (in other words it's safe to call even if there are no other screens on the stack.)</p>"},{"location":"api/app/#textual.app.App.action_bell","title":"action_bell  <code>async</code>","text":"<pre><code>action_bell()\n</code></pre> <p>An action to play the terminal 'bell'.</p>"},{"location":"api/app/#textual.app.App.action_command_palette","title":"action_command_palette","text":"<pre><code>action_command_palette()\n</code></pre> <p>Show the Textual command palette.</p>"},{"location":"api/app/#textual.app.App.action_focus","title":"action_focus  <code>async</code>","text":"<pre><code>action_focus(widget_id)\n</code></pre> <p>An action to focus the given widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>ID of widget to focus.</p> required"},{"location":"api/app/#textual.app.App.action_focus(widget_id)","title":"<code>widget_id</code>","text":""},{"location":"api/app/#textual.app.App.action_focus_next","title":"action_focus_next","text":"<pre><code>action_focus_next()\n</code></pre> <p>An action to focus the next widget.</p>"},{"location":"api/app/#textual.app.App.action_focus_previous","title":"action_focus_previous","text":"<pre><code>action_focus_previous()\n</code></pre> <p>An action to focus the previous widget.</p>"},{"location":"api/app/#textual.app.App.action_hide_help_panel","title":"action_hide_help_panel","text":"<pre><code>action_hide_help_panel()\n</code></pre> <p>Hide the keys panel (if present).</p>"},{"location":"api/app/#textual.app.App.action_pop_screen","title":"action_pop_screen  <code>async</code>","text":"<pre><code>action_pop_screen()\n</code></pre> <p>An action to remove the topmost screen and makes the new topmost screen active.</p>"},{"location":"api/app/#textual.app.App.action_push_screen","title":"action_push_screen  <code>async</code>","text":"<pre><code>action_push_screen(screen)\n</code></pre> <p>An action to push a new screen on to the stack and make it active.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the screen.</p> required"},{"location":"api/app/#textual.app.App.action_push_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.action_quit","title":"action_quit  <code>async</code>","text":"<pre><code>action_quit()\n</code></pre> <p>An action to quit the app as soon as possible.</p>"},{"location":"api/app/#textual.app.App.action_remove_class","title":"action_remove_class  <code>async</code>","text":"<pre><code>action_remove_class(selector, class_name)\n</code></pre> <p>An action to remove a CSS class from the selected widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Selects the widget to remove the class from.</p> required <code>str</code> <p>The class to remove from  the selected widget.</p> required"},{"location":"api/app/#textual.app.App.action_remove_class(selector)","title":"<code>selector</code>","text":""},{"location":"api/app/#textual.app.App.action_remove_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/app/#textual.app.App.action_screenshot","title":"action_screenshot","text":"<pre><code>action_screenshot(filename=None, path=None)\n</code></pre> <p>This action will save an SVG file containing the current contents of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Filename of screenshot, or None to auto-generate.</p> <code>None</code> <code>str | None</code> <p>Path to directory. Defaults to the user's Downloads directory.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.action_screenshot(filename)","title":"<code>filename</code>","text":""},{"location":"api/app/#textual.app.App.action_screenshot(path)","title":"<code>path</code>","text":""},{"location":"api/app/#textual.app.App.action_show_help_panel","title":"action_show_help_panel","text":"<pre><code>action_show_help_panel()\n</code></pre> <p>Show the keys panel.</p>"},{"location":"api/app/#textual.app.App.action_simulate_key","title":"action_simulate_key  <code>async</code>","text":"<pre><code>action_simulate_key(key)\n</code></pre> <p>An action to simulate a key press.</p> <p>This will invoke the same actions as if the user had pressed the key.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The key to process.</p> required"},{"location":"api/app/#textual.app.App.action_simulate_key(key)","title":"<code>key</code>","text":""},{"location":"api/app/#textual.app.App.action_suspend_process","title":"action_suspend_process","text":"<pre><code>action_suspend_process()\n</code></pre> <p>Suspend the process into the background.</p> Note <p>On Unix and Unix-like systems a <code>SIGTSTP</code> is sent to the application's process. Currently on Windows and when running under Textual Web this is a non-operation.</p>"},{"location":"api/app/#textual.app.App.action_switch_mode","title":"action_switch_mode  <code>async</code>","text":"<pre><code>action_switch_mode(mode)\n</code></pre> <p>An action that switches to the given mode..</p>"},{"location":"api/app/#textual.app.App.action_switch_screen","title":"action_switch_screen  <code>async</code>","text":"<pre><code>action_switch_screen(screen)\n</code></pre> <p>An action to switch screens.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the screen.</p> required"},{"location":"api/app/#textual.app.App.action_switch_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.action_toggle_class","title":"action_toggle_class  <code>async</code>","text":"<pre><code>action_toggle_class(selector, class_name)\n</code></pre> <p>An action to toggle a CSS class on the selected widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Selects the widget to toggle the class on.</p> required <code>str</code> <p>The class to toggle on the selected widget.</p> required"},{"location":"api/app/#textual.app.App.action_toggle_class(selector)","title":"<code>selector</code>","text":""},{"location":"api/app/#textual.app.App.action_toggle_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/app/#textual.app.App.action_toggle_dark","title":"action_toggle_dark","text":"<pre><code>action_toggle_dark()\n</code></pre> <p>An action to toggle dark mode.</p>"},{"location":"api/app/#textual.app.App.add_mode","title":"add_mode","text":"<pre><code>add_mode(mode, base_screen)\n</code></pre> <p>Adds a mode and its corresponding base screen to the app.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The new mode.</p> required <code>str | Callable[[], Screen]</code> <p>The base screen associated with the given mode.</p> required <p>Raises:</p> Type Description <code>InvalidModeError</code> <p>If the name of the mode is not valid/duplicated.</p>"},{"location":"api/app/#textual.app.App.add_mode(mode)","title":"<code>mode</code>","text":""},{"location":"api/app/#textual.app.App.add_mode(base_screen)","title":"<code>base_screen</code>","text":""},{"location":"api/app/#textual.app.App.animate","title":"animate","text":"<pre><code>animate(\n    attribute,\n    value,\n    *,\n    final_value=...,\n    duration=None,\n    speed=None,\n    delay=0.0,\n    easing=DEFAULT_EASING,\n    on_complete=None,\n    level=\"full\"\n)\n</code></pre> <p>Animate an attribute.</p> <p>See the guide for how to use the animation system.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute to animate.</p> required <code>float | Animatable</code> <p>The value to animate to.</p> required <code>object</code> <p>The final value of the animation.</p> <code>...</code> <code>float | None</code> <p>The duration (in seconds) of the animation.</p> <code>None</code> <code>float | None</code> <p>The speed of the animation.</p> <code>None</code> <code>float</code> <p>A delay (in seconds) before the animation starts.</p> <code>0.0</code> <code>EasingFunction | str</code> <p>An easing method.</p> <code>DEFAULT_EASING</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'full'</code>"},{"location":"api/app/#textual.app.App.animate(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/app/#textual.app.App.animate(value)","title":"<code>value</code>","text":""},{"location":"api/app/#textual.app.App.animate(final_value)","title":"<code>final_value</code>","text":""},{"location":"api/app/#textual.app.App.animate(duration)","title":"<code>duration</code>","text":""},{"location":"api/app/#textual.app.App.animate(speed)","title":"<code>speed</code>","text":""},{"location":"api/app/#textual.app.App.animate(delay)","title":"<code>delay</code>","text":""},{"location":"api/app/#textual.app.App.animate(easing)","title":"<code>easing</code>","text":""},{"location":"api/app/#textual.app.App.animate(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/app/#textual.app.App.animate(level)","title":"<code>level</code>","text":""},{"location":"api/app/#textual.app.App.batch_update","title":"batch_update","text":"<pre><code>batch_update()\n</code></pre> <p>A context manager to suspend all repaints until the end of the batch.</p>"},{"location":"api/app/#textual.app.App.begin_capture_print","title":"begin_capture_print","text":"<pre><code>begin_capture_print(target, stdout=True, stderr=True)\n</code></pre> <p>Capture content that is printed (or written to stdout / stderr).</p> <p>If printing is captured, the <code>target</code> will be sent an events.Print message.</p> <p>Parameters:</p> Name Type Description Default <code>MessageTarget</code> <p>The widget where print content will be sent.</p> required <code>bool</code> <p>Capture stdout.</p> <code>True</code> <code>bool</code> <p>Capture stderr.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.begin_capture_print(target)","title":"<code>target</code>","text":""},{"location":"api/app/#textual.app.App.begin_capture_print(stdout)","title":"<code>stdout</code>","text":""},{"location":"api/app/#textual.app.App.begin_capture_print(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/app/#textual.app.App.bell","title":"bell","text":"<pre><code>bell()\n</code></pre> <p>Play the console 'bell'.</p> <p>For terminals that support a bell, this typically makes a notification or error sound. Some terminals may make no sound or display a visual bell indicator, depending on configuration.</p>"},{"location":"api/app/#textual.app.App.bind","title":"bind","text":"<pre><code>bind(\n    keys,\n    action,\n    *,\n    description=\"\",\n    show=True,\n    key_display=None\n)\n</code></pre> <p>Bind a key to an action.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A comma separated list of keys, i.e.</p> required <code>str</code> <p>Action to bind to.</p> required <code>str</code> <p>Short description of action.</p> <code>''</code> <code>bool</code> <p>Show key in UI.</p> <code>True</code> <code>str | None</code> <p>Replacement text for key, or None to use default.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.bind(keys)","title":"<code>keys</code>","text":""},{"location":"api/app/#textual.app.App.bind(action)","title":"<code>action</code>","text":""},{"location":"api/app/#textual.app.App.bind(description)","title":"<code>description</code>","text":""},{"location":"api/app/#textual.app.App.bind(show)","title":"<code>show</code>","text":""},{"location":"api/app/#textual.app.App.bind(key_display)","title":"<code>key_display</code>","text":""},{"location":"api/app/#textual.app.App.call_from_thread","title":"call_from_thread","text":"<pre><code>call_from_thread(callback, *args, **kwargs)\n</code></pre> <p>Run a callable from another thread, and return the result.</p> <p>Like asyncio apps in general, Textual apps are not thread-safe. If you call methods or set attributes on Textual objects from a thread, you may get unpredictable results.</p> <p>This method will ensure that your code runs within the correct context.</p> <p>Tip</p> <p>Consider using post_message which is also thread-safe.</p> <p>Parameters:</p> Name Type Description Default <code>Callable[..., CallThreadReturnType | Awaitable[CallThreadReturnType]]</code> <p>A callable to run.</p> required <code>Any</code> <p>Arguments to the callback.</p> <code>()</code> <code>Any</code> <p>Keyword arguments for the callback.</p> <code>{}</code> <p>Raises:</p> Type Description <code>RuntimeError</code> <p>If the app isn't running or if this method is called from the same thread where the app is running.</p> <p>Returns:</p> Type Description <code>CallThreadReturnType</code> <p>The result of the callback.</p>"},{"location":"api/app/#textual.app.App.call_from_thread(callback)","title":"<code>callback</code>","text":""},{"location":"api/app/#textual.app.App.call_from_thread(*args)","title":"<code>*args</code>","text":""},{"location":"api/app/#textual.app.App.call_from_thread(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/app/#textual.app.App.capture_mouse","title":"capture_mouse","text":"<pre><code>capture_mouse(widget)\n</code></pre> <p>Send all mouse events to the given widget or disable mouse capture.</p> <p>Parameters:</p> Name Type Description Default <code>Widget | None</code> <p>If a widget, capture mouse event, or <code>None</code> to end mouse capture.</p> required"},{"location":"api/app/#textual.app.App.capture_mouse(widget)","title":"<code>widget</code>","text":""},{"location":"api/app/#textual.app.App.clear_notifications","title":"clear_notifications","text":"<pre><code>clear_notifications()\n</code></pre> <p>Clear all the current notifications.</p>"},{"location":"api/app/#textual.app.App.compose","title":"compose","text":"<pre><code>compose()\n</code></pre> <p>Yield child widgets for a container.</p> <p>This method should be implemented in a subclass.</p>"},{"location":"api/app/#textual.app.App.copy_to_clipboard","title":"copy_to_clipboard","text":"<pre><code>copy_to_clipboard(text)\n</code></pre> <p>Copy text to the clipboard.</p> <p>Note</p> <p>This does not work on macOS Terminal, but will work on most other terminals.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text you wish to copy to the clipboard.</p> required"},{"location":"api/app/#textual.app.App.copy_to_clipboard(text)","title":"<code>text</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary","title":"deliver_binary","text":"<pre><code>deliver_binary(\n    path_or_file,\n    *,\n    save_directory=None,\n    save_filename=None,\n    open_method=\"download\",\n    mime_type=None,\n    name=None\n)\n</code></pre> <p>Deliver a binary file to the end-user of the application.</p> <p>If an IO object is supplied, it will be closed by this method and must not be used after it is supplied to this method.</p> <p>If running in a terminal, this will save the file to the user's downloads directory.</p> <p>If running via a web browser, this will initiate a download via a single-use URL.</p> <p>This operation runs in a thread when running on web, so this method returning does not indicate that the file has been delivered.</p> <p>After the file has been delivered, a <code>DeliveryComplete</code> message will be posted to this <code>App</code>, which contains the <code>delivery_key</code> returned by this method. By handling this message, you can add custom logic to your application that fires only after the file has been delivered.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path | BinaryIO</code> <p>The path or file-like object to save.</p> required <code>str | Path | None</code> <p>The directory to save the file to. If None, the default \"downloads\" directory will be used. This argument is ignored when running via the web.</p> <code>None</code> <code>str | None</code> <p>The filename to save the file to. If None, the following logic applies to generate the filename: - If <code>path_or_file</code> is a file-like object, the filename will be taken from   the <code>name</code> attribute if available. - If <code>path_or_file</code> is a path, the filename will be taken from the path. - If a filename is not available, a filename will be generated using the   App's title and the current date and time.</p> <code>None</code> <code>Literal['browser', 'download']</code> <p>The method to use to open the file. \"browser\" will open the file in the web browser, \"download\" will initiate a download. Note that this can sometimes be impacted by the browser's settings.</p> <code>'download'</code> <code>str | None</code> <p>The MIME type of the file or None to guess based on file extension. If no MIME type is supplied and we cannot guess the MIME type, from the file extension, the MIME type will be set to \"application/octet-stream\".</p> <code>None</code> <code>str | None</code> <p>A user-defined named which will be returned in <code>DeliveryComplete</code> and <code>DeliveryComplete</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>str | None</code> <p>The delivery key that uniquely identifies the file delivery.</p>"},{"location":"api/app/#textual.app.App.deliver_binary(path_or_file)","title":"<code>path_or_file</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(save_directory)","title":"<code>save_directory</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(save_filename)","title":"<code>save_filename</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(open_method)","title":"<code>open_method</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(mime_type)","title":"<code>mime_type</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(name)","title":"<code>name</code>","text":""},{"location":"api/app/#textual.app.App.deliver_screenshot","title":"deliver_screenshot","text":"<pre><code>deliver_screenshot(\n    filename=None, path=None, time_format=None\n)\n</code></pre> <p>Deliver a screenshot of the app.</p> <p>This with save the screenshot when running locally, or serve it when the app is running in a web browser.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Filename of SVG screenshot, or None to auto-generate a filename with the date and time.</p> <code>None</code> <code>str | None</code> <p>Path to directory for output when saving locally (not used when app is running in the browser). Defaults to current working directory.</p> <code>None</code> <code>str | None</code> <p>Date and time format to use if filename is None. Defaults to a format like ISO 8601 with some reserved characters replaced with underscores.</p> <code>None</code> <p>Returns:</p> Type Description <code>str | None</code> <p>The delivery key that uniquely identifies the file delivery.</p>"},{"location":"api/app/#textual.app.App.deliver_screenshot(filename)","title":"<code>filename</code>","text":""},{"location":"api/app/#textual.app.App.deliver_screenshot(path)","title":"<code>path</code>","text":""},{"location":"api/app/#textual.app.App.deliver_screenshot(time_format)","title":"<code>time_format</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text","title":"deliver_text","text":"<pre><code>deliver_text(\n    path_or_file,\n    *,\n    save_directory=None,\n    save_filename=None,\n    open_method=\"download\",\n    encoding=None,\n    mime_type=None,\n    name=None\n)\n</code></pre> <p>Deliver a text file to the end-user of the application.</p> <p>If a TextIO object is supplied, it will be closed by this method and must not be used after this method is called.</p> <p>If running in a terminal, this will save the file to the user's downloads directory.</p> <p>If running via a web browser, this will initiate a download via a single-use URL.</p> <p>After the file has been delivered, a <code>DeliveryComplete</code> message will be posted to this <code>App</code>, which contains the <code>delivery_key</code> returned by this method. By handling this message, you can add custom logic to your application that fires only after the file has been delivered.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path | TextIO</code> <p>The path or file-like object to save.</p> required <code>str | Path | None</code> <p>The directory to save the file to.</p> <code>None</code> <code>str | None</code> <p>The filename to save the file to.  If <code>path_or_file</code> is a file-like object, the filename will be generated from the <code>name</code> attribute if available. If <code>path_or_file</code> is a path the filename will be generated from the path.</p> <code>None</code> <code>str | None</code> <p>The encoding to use when saving the file. If <code>None</code>, the encoding will be determined by supplied file-like object (if possible). If this is not possible, 'utf-8' will be used.</p> <code>None</code> <code>str | None</code> <p>The MIME type of the file or None to guess based on file extension. If no MIME type is supplied and we cannot guess the MIME type, from the file extension, the MIME type will be set to \"text/plain\".</p> <code>None</code> <code>str | None</code> <p>A user-defined named which will be returned in <code>DeliveryComplete</code> and <code>DeliveryComplete</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>str | None</code> <p>The delivery key that uniquely identifies the file delivery.</p>"},{"location":"api/app/#textual.app.App.deliver_text(path_or_file)","title":"<code>path_or_file</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(save_directory)","title":"<code>save_directory</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(save_filename)","title":"<code>save_filename</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(encoding)","title":"<code>encoding</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(mime_type)","title":"<code>mime_type</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(name)","title":"<code>name</code>","text":""},{"location":"api/app/#textual.app.App.end_capture_print","title":"end_capture_print","text":"<pre><code>end_capture_print(target)\n</code></pre> <p>End capturing of prints.</p> <p>Parameters:</p> Name Type Description Default <code>MessageTarget</code> <p>The widget that was capturing prints.</p> required"},{"location":"api/app/#textual.app.App.end_capture_print(target)","title":"<code>target</code>","text":""},{"location":"api/app/#textual.app.App.exit","title":"exit","text":"<pre><code>exit(result=None, return_code=0, message=None)\n</code></pre> <p>Exit the app, and return the supplied result.</p> <p>Parameters:</p> Name Type Description Default <code>ReturnType | None</code> <p>Return value.</p> <code>None</code> <code>int</code> <p>The return code. Use non-zero values for error codes.</p> <code>0</code> <code>RenderableType | None</code> <p>Optional message to display on exit.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.exit(result)","title":"<code>result</code>","text":""},{"location":"api/app/#textual.app.App.exit(return_code)","title":"<code>return_code</code>","text":""},{"location":"api/app/#textual.app.App.exit(message)","title":"<code>message</code>","text":""},{"location":"api/app/#textual.app.App.export_screenshot","title":"export_screenshot","text":"<pre><code>export_screenshot(*, title=None)\n</code></pre> <p>Export an SVG screenshot of the current screen.</p> <p>See also save_screenshot which writes the screenshot to a file.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The title of the exported screenshot or None to use app title.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.export_screenshot(title)","title":"<code>title</code>","text":""},{"location":"api/app/#textual.app.App.get_child_by_id","title":"get_child_by_id","text":"<pre><code>get_child_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_child_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_child_by_id(id, expect_type=None)\n</code></pre> <p>Get the first child (immediate descendant) of this DOMNode with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the node to search for.</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or use <code>None</code> to apply no type restriction.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first child of this node with the specified ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>If no children could be found for this ID.</p> <code>WrongType</code> <p>If the wrong type was found.</p>"},{"location":"api/app/#textual.app.App.get_child_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/app/#textual.app.App.get_child_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/app/#textual.app.App.get_child_by_type","title":"get_child_by_type","text":"<pre><code>get_child_by_type(expect_type)\n</code></pre> <p>Get a child of a give type.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType]</code> <p>The type of the expected child.</p> required <p>Raises:</p> Type Description <code>NoMatches</code> <p>If no valid child is found.</p> <p>Returns:</p> Type Description <code>ExpectType</code> <p>A widget.</p>"},{"location":"api/app/#textual.app.App.get_child_by_type(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/app/#textual.app.App.get_css_variables","title":"get_css_variables","text":"<pre><code>get_css_variables()\n</code></pre> <p>Get a mapping of variables used to pre-populate CSS.</p> <p>May be implemented in a subclass to add new CSS variables.</p> <p>Returns:</p> Type Description <code>dict[str, str]</code> <p>A mapping of variable name to value.</p>"},{"location":"api/app/#textual.app.App.get_default_screen","title":"get_default_screen","text":"<pre><code>get_default_screen()\n</code></pre> <p>Get the default screen.</p> <p>This is called when the App is first composed. The returned screen instance will be the first screen on the stack.</p> <p>Implement this method if you would like to use a custom Screen as the default screen.</p> <p>Returns:</p> Type Description <code>Screen</code> <p>A screen instance.</p>"},{"location":"api/app/#textual.app.App.get_driver_class","title":"get_driver_class","text":"<pre><code>get_driver_class()\n</code></pre> <p>Get a driver class for this platform.</p> <p>This method is called by the constructor, and unlikely to be required when building a Textual app.</p> <p>Returns:</p> Type Description <code>Type[Driver]</code> <p>A Driver class which manages input and display.</p>"},{"location":"api/app/#textual.app.App.get_key_display","title":"get_key_display","text":"<pre><code>get_key_display(binding)\n</code></pre> <p>Format a bound key for display in footer / key panel etc.</p> <p>Note</p> <p>You can implement this in a subclass if you want to change how keys are displayed in your app.</p> <p>Parameters:</p> Name Type Description Default <code>Binding</code> <p>A Binding.</p> required <p>Returns:</p> Type Description <code>str</code> <p>A string used to represent the key.</p>"},{"location":"api/app/#textual.app.App.get_key_display(binding)","title":"<code>binding</code>","text":""},{"location":"api/app/#textual.app.App.get_loading_widget","title":"get_loading_widget","text":"<pre><code>get_loading_widget()\n</code></pre> <p>Get a widget to be used as a loading indicator.</p> <p>Extend this method if you want to display the loading state a little differently.</p> <p>Returns:</p> Type Description <code>Widget</code> <p>A widget to display a loading state.</p>"},{"location":"api/app/#textual.app.App.get_screen","title":"get_screen","text":"<pre><code>get_screen(screen)\n</code></pre> <p>Get an installed screen.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>Either a Screen object or screen name (the <code>name</code> argument when installed).</p> required <p>Raises:</p> Type Description <code>KeyError</code> <p>If the named screen doesn't exist.</p> <p>Returns:</p> Type Description <code>Screen</code> <p>A screen instance.</p>"},{"location":"api/app/#textual.app.App.get_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.get_system_commands","title":"get_system_commands","text":"<pre><code>get_system_commands(screen)\n</code></pre> <p>A generator of system commands used in the command palette.</p> <p>Parameters:</p> Name Type Description Default <code>Screen</code> <p>The screen where the command palette was invoked from.</p> required <p>Implement this method in your App subclass if you want to add custom commands. Here is an example:</p> <pre><code>def get_system_commands(self, screen: Screen) -&gt; Iterable[SystemCommand]:\n    yield from super().get_system_commands(screen)\n    yield SystemCommand(\"Bell\", \"Ring the bell\", self.bell)\n</code></pre> <p>Note</p> <p>Requires that <code>SystemCommandsProvider</code> is in <code>App.COMMANDS</code> class variable.</p> <p>Yields:</p> Type Description <code>Iterable[SystemCommand]</code> <p>SystemCommand instances.</p>"},{"location":"api/app/#textual.app.App.get_system_commands(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_at","title":"get_widget_at","text":"<pre><code>get_widget_at(x, y)\n</code></pre> <p>Get the widget under the given coordinates.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>tuple[Widget, Region]</code> <p>The widget and the widget's screen region.</p>"},{"location":"api/app/#textual.app.App.get_widget_at(x)","title":"<code>x</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_at(y)","title":"<code>y</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_by_id","title":"get_widget_by_id","text":"<pre><code>get_widget_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_widget_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_widget_by_id(id, expect_type=None)\n</code></pre> <p>Get the first descendant widget with the given ID.</p> <p>Performs a breadth-first search rooted at the current screen. It will not return the Screen if that matches the ID. To get the screen, use <code>self.screen</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID to search for in the subtree</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or None for any type. Defaults to None.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first descendant encountered with this ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>if no children could be found for this ID</p> <code>WrongType</code> <p>if the wrong type was found.</p>"},{"location":"api/app/#textual.app.App.get_widget_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/app/#textual.app.App.install_screen","title":"install_screen","text":"<pre><code>install_screen(screen, name)\n</code></pre> <p>Install a screen.</p> <p>Installing a screen prevents Textual from destroying it when it is no longer on the screen stack. Note that you don't need to install a screen to use it. See push_screen or switch_screen to make a new screen current.</p> <p>Parameters:</p> Name Type Description Default <code>Screen</code> <p>Screen to install.</p> required <code>str</code> <p>Unique name to identify the screen.</p> required <p>Raises:</p> Type Description <code>ScreenError</code> <p>If the screen can't be installed.</p> <p>Returns:</p> Type Description <code>None</code> <p>An awaitable that awaits the mounting of the screen and its children.</p>"},{"location":"api/app/#textual.app.App.install_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.install_screen(name)","title":"<code>name</code>","text":""},{"location":"api/app/#textual.app.App.is_mounted","title":"is_mounted","text":"<pre><code>is_mounted(widget)\n</code></pre> <p>Check if a widget is mounted.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True of the widget is mounted.</p>"},{"location":"api/app/#textual.app.App.is_mounted(widget)","title":"<code>widget</code>","text":""},{"location":"api/app/#textual.app.App.is_screen_installed","title":"is_screen_installed","text":"<pre><code>is_screen_installed(screen)\n</code></pre> <p>Check if a given screen has been installed.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>Either a Screen object or screen name (the <code>name</code> argument when installed).</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the screen is currently installed,</p>"},{"location":"api/app/#textual.app.App.is_screen_installed(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.mount","title":"mount","text":"<pre><code>mount(*widgets, before=None, after=None)\n</code></pre> <p>Mount the given widgets relative to the app's screen.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widget(s) to mount.</p> <code>()</code> <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/app/#textual.app.App.mount(*widgets)","title":"<code>*widgets</code>","text":""},{"location":"api/app/#textual.app.App.mount(before)","title":"<code>before</code>","text":""},{"location":"api/app/#textual.app.App.mount(after)","title":"<code>after</code>","text":""},{"location":"api/app/#textual.app.App.mount_all","title":"mount_all","text":"<pre><code>mount_all(widgets, *, before=None, after=None)\n</code></pre> <p>Mount widgets from an iterable.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Widget]</code> <p>An iterable of widgets.</p> required <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/app/#textual.app.App.mount_all(widgets)","title":"<code>widgets</code>","text":""},{"location":"api/app/#textual.app.App.mount_all(before)","title":"<code>before</code>","text":""},{"location":"api/app/#textual.app.App.mount_all(after)","title":"<code>after</code>","text":""},{"location":"api/app/#textual.app.App.notify","title":"notify","text":"<pre><code>notify(\n    message,\n    *,\n    title=\"\",\n    severity=\"information\",\n    timeout=None\n)\n</code></pre> <p>Create a notification.</p> <p>Tip</p> <p>This method is thread-safe.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The message for the notification.</p> required <code>str</code> <p>The title for the notification.</p> <code>''</code> <code>SeverityLevel</code> <p>The severity of the notification.</p> <code>'information'</code> <code>float | None</code> <p>The timeout (in seconds) for the notification, or <code>None</code> for default.</p> <code>None</code> <p>The <code>notify</code> method is used to create an application-wide notification, shown in a <code>Toast</code>, normally originating in the bottom right corner of the display.</p> <p>Notifications can have the following severity levels:</p> <ul> <li><code>information</code></li> <li><code>warning</code></li> <li><code>error</code></li> </ul> <p>The default is <code>information</code>.</p> Example <pre><code># Show an information notification.\nself.notify(\"It's an older code, sir, but it checks out.\")\n\n# Show a warning. Note that Textual's notification system allows\n# for the use of Rich console markup.\nself.notify(\n    \"Now witness the firepower of this fully \"\n    \"[b]ARMED[/b] and [i][b]OPERATIONAL[/b][/i] battle station!\",\n    title=\"Possible trap detected\",\n    severity=\"warning\",\n)\n\n# Show an error. Set a longer timeout so it's noticed.\nself.notify(\"It's a trap!\", severity=\"error\", timeout=10)\n\n# Show an information notification, but without any sort of title.\nself.notify(\"It's against my programming to impersonate a deity.\", title=\"\")\n</code></pre>"},{"location":"api/app/#textual.app.App.notify(message)","title":"<code>message</code>","text":""},{"location":"api/app/#textual.app.App.notify(title)","title":"<code>title</code>","text":""},{"location":"api/app/#textual.app.App.notify(severity)","title":"<code>severity</code>","text":""},{"location":"api/app/#textual.app.App.notify(timeout)","title":"<code>timeout</code>","text":""},{"location":"api/app/#textual.app.App.open_url","title":"open_url","text":"<pre><code>open_url(url, *, new_tab=True)\n</code></pre> <p>Open a URL in the default web browser.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The URL to open.</p> required <code>bool</code> <p>Whether to open the URL in a new tab.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.open_url(url)","title":"<code>url</code>","text":""},{"location":"api/app/#textual.app.App.open_url(new_tab)","title":"<code>new_tab</code>","text":""},{"location":"api/app/#textual.app.App.panic","title":"panic","text":"<pre><code>panic(*renderables)\n</code></pre> <p>Exits the app and display error message(s).</p> <p>Used in response to unexpected errors. For a more graceful exit, see the exit method.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>Text or Rich renderable(s) to display on exit.</p> <code>()</code>"},{"location":"api/app/#textual.app.App.panic(*renderables)","title":"<code>*renderables</code>","text":""},{"location":"api/app/#textual.app.App.pop_screen","title":"pop_screen","text":"<pre><code>pop_screen()\n</code></pre> <p>Pop the current screen from the stack, and switch to the previous screen.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>The screen that was replaced.</p>"},{"location":"api/app/#textual.app.App.post_display_hook","title":"post_display_hook","text":"<pre><code>post_display_hook()\n</code></pre> <p>Called immediately after a display is done. Used in tests.</p>"},{"location":"api/app/#textual.app.App.push_screen","title":"push_screen","text":"<pre><code>push_screen(\n    screen: Screen[ScreenResultType] | str,\n    callback: (\n        ScreenResultCallbackType[ScreenResultType] | None\n    ) = None,\n    wait_for_dismiss: Literal[False] = False,\n) -&gt; AwaitMount\n</code></pre><pre><code>push_screen(\n    screen: Screen[ScreenResultType] | str,\n    callback: (\n        ScreenResultCallbackType[ScreenResultType] | None\n    ) = None,\n    wait_for_dismiss: Literal[True] = True,\n) -&gt; Future[ScreenResultType]\n</code></pre> <pre><code>push_screen(screen, callback=None, wait_for_dismiss=False)\n</code></pre> <p>Push a new screen on the screen stack, making it the current screen.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[ScreenResultType] | str</code> <p>A Screen instance or the name of an installed screen.</p> required <code>ScreenResultCallbackType[ScreenResultType] | None</code> <p>An optional callback function that will be called if the screen is dismissed with a result.</p> <code>None</code> <code>bool</code> <p>If <code>True</code>, awaiting this method will return the dismiss value from the screen. When set to <code>False</code>, awaiting this method will wait for the screen to be mounted. Note that <code>wait_for_dismiss</code> should only be set to <code>True</code> when running in a worker.</p> <code>False</code> <p>Raises:</p> Type Description <code>NoActiveWorker</code> <p>If using <code>wait_for_dismiss</code> outside of a worker.</p> <p>Returns:</p> Type Description <code>AwaitMount | Future[ScreenResultType]</code> <p>An optional awaitable that awaits the mounting of the screen and its children, or an asyncio Future to await the result of the screen.</p>"},{"location":"api/app/#textual.app.App.push_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.push_screen(callback)","title":"<code>callback</code>","text":""},{"location":"api/app/#textual.app.App.push_screen(wait_for_dismiss)","title":"<code>wait_for_dismiss</code>","text":""},{"location":"api/app/#textual.app.App.push_screen_wait","title":"push_screen_wait  <code>async</code>","text":"<pre><code>push_screen_wait(\n    screen: Screen[ScreenResultType],\n) -&gt; ScreenResultType\n</code></pre><pre><code>push_screen_wait(screen: str) -&gt; Any\n</code></pre> <pre><code>push_screen_wait(screen)\n</code></pre> <p>Push a screen and wait for the result (received from <code>Screen.dismiss</code>).</p> <p>Note that this method may only be called when running in a worker.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[ScreenResultType] | str</code> <p>A screen or the name of an installed screen.</p> required <p>Returns:</p> Type Description <code>ScreenResultType | Any</code> <p>The screen's result.</p>"},{"location":"api/app/#textual.app.App.push_screen_wait(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.recompose","title":"recompose  <code>async</code>","text":"<pre><code>recompose()\n</code></pre> <p>Recompose the widget.</p> <p>Recomposing will remove children and call <code>self.compose</code> again to remount.</p>"},{"location":"api/app/#textual.app.App.refresh","title":"refresh","text":"<pre><code>refresh(*, repaint=True, layout=False, recompose=False)\n</code></pre> <p>Refresh the entire screen.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Repaint the widget (will call render() again).</p> <code>True</code> <code>bool</code> <p>Also layout widgets in the view.</p> <code>False</code> <code>bool</code> <p>Re-compose the widget (will remove and re-mount children).</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>App</code> instance.</p>"},{"location":"api/app/#textual.app.App.refresh(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/app/#textual.app.App.refresh(layout)","title":"<code>layout</code>","text":""},{"location":"api/app/#textual.app.App.refresh(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/app/#textual.app.App.refresh_css","title":"refresh_css","text":"<pre><code>refresh_css(animate=True)\n</code></pre> <p>Refresh CSS.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Also execute CSS animations.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.refresh_css(animate)","title":"<code>animate</code>","text":""},{"location":"api/app/#textual.app.App.remove_mode","title":"remove_mode","text":"<pre><code>remove_mode(mode)\n</code></pre> <p>Removes a mode from the app.</p> <p>Screens that are running in the stack of that mode are scheduled for pruning.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The mode to remove. It can't be the active mode.</p> required <p>Raises:</p> Type Description <code>ActiveModeError</code> <p>If trying to remove the active mode.</p> <code>UnknownModeError</code> <p>If trying to remove an unknown mode.</p>"},{"location":"api/app/#textual.app.App.remove_mode(mode)","title":"<code>mode</code>","text":""},{"location":"api/app/#textual.app.App.render","title":"render","text":"<pre><code>render()\n</code></pre> <p>Render method, inherited from widget, to render the screen's background.</p> <p>May be overridden to customize background visuals.</p>"},{"location":"api/app/#textual.app.App.run","title":"run","text":"<pre><code>run(\n    *,\n    headless=False,\n    inline=False,\n    inline_no_clear=False,\n    mouse=True,\n    size=None,\n    auto_pilot=None\n)\n</code></pre> <p>Run the app.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Run in headless mode (no output).</p> <code>False</code> <code>bool</code> <p>Run the app inline (under the prompt).</p> <code>False</code> <code>bool</code> <p>Don't clear the app output when exiting an inline app.</p> <code>False</code> <code>bool</code> <p>Enable mouse support.</p> <code>True</code> <code>tuple[int, int] | None</code> <p>Force terminal size to <code>(WIDTH, HEIGHT)</code>, or None to auto-detect.</p> <code>None</code> <code>AutopilotCallbackType | None</code> <p>An auto pilot coroutine.</p> <code>None</code> <p>Returns:</p> Type Description <code>ReturnType | None</code> <p>App return value.</p>"},{"location":"api/app/#textual.app.App.run(headless)","title":"<code>headless</code>","text":""},{"location":"api/app/#textual.app.App.run(inline)","title":"<code>inline</code>","text":""},{"location":"api/app/#textual.app.App.run(inline_no_clear)","title":"<code>inline_no_clear</code>","text":""},{"location":"api/app/#textual.app.App.run(mouse)","title":"<code>mouse</code>","text":""},{"location":"api/app/#textual.app.App.run(size)","title":"<code>size</code>","text":""},{"location":"api/app/#textual.app.App.run(auto_pilot)","title":"<code>auto_pilot</code>","text":""},{"location":"api/app/#textual.app.App.run_action","title":"run_action  <code>async</code>","text":"<pre><code>run_action(action, default_namespace=None)\n</code></pre> <p>Perform an action.</p> <p>Actions are typically associated with key bindings, where you wouldn't need to call this method manually.</p> <p>Parameters:</p> Name Type Description Default <code>str | ActionParseResult</code> <p>Action encoded in a string.</p> required <code>DOMNode | None</code> <p>Namespace to use if not provided in the action, or None to use app.</p> <code>None</code> <p>Returns:</p> Type Description <code>bool</code> <p>True if the event has been handled.</p>"},{"location":"api/app/#textual.app.App.run_action(action)","title":"<code>action</code>","text":""},{"location":"api/app/#textual.app.App.run_action(default_namespace)","title":"<code>default_namespace</code>","text":""},{"location":"api/app/#textual.app.App.run_async","title":"run_async  <code>async</code>","text":"<pre><code>run_async(\n    *,\n    headless=False,\n    inline=False,\n    inline_no_clear=False,\n    mouse=True,\n    size=None,\n    auto_pilot=None\n)\n</code></pre> <p>Run the app asynchronously.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Run in headless mode (no output).</p> <code>False</code> <code>bool</code> <p>Run the app inline (under the prompt).</p> <code>False</code> <code>bool</code> <p>Don't clear the app output when exiting an inline app.</p> <code>False</code> <code>bool</code> <p>Enable mouse support.</p> <code>True</code> <code>tuple[int, int] | None</code> <p>Force terminal size to <code>(WIDTH, HEIGHT)</code>, or None to auto-detect.</p> <code>None</code> <code>AutopilotCallbackType | None</code> <p>An autopilot coroutine.</p> <code>None</code> <p>Returns:</p> Type Description <code>ReturnType | None</code> <p>App return value.</p>"},{"location":"api/app/#textual.app.App.run_async(headless)","title":"<code>headless</code>","text":""},{"location":"api/app/#textual.app.App.run_async(inline)","title":"<code>inline</code>","text":""},{"location":"api/app/#textual.app.App.run_async(inline_no_clear)","title":"<code>inline_no_clear</code>","text":""},{"location":"api/app/#textual.app.App.run_async(mouse)","title":"<code>mouse</code>","text":""},{"location":"api/app/#textual.app.App.run_async(size)","title":"<code>size</code>","text":""},{"location":"api/app/#textual.app.App.run_async(auto_pilot)","title":"<code>auto_pilot</code>","text":""},{"location":"api/app/#textual.app.App.run_test","title":"run_test  <code>async</code>","text":"<pre><code>run_test(\n    *,\n    headless=True,\n    size=(80, 24),\n    tooltips=False,\n    notifications=False,\n    message_hook=None\n)\n</code></pre> <p>An asynchronous context manager for testing apps.</p> <p>Tip</p> <p>See the guide for testing Textual apps.</p> <p>Use this to run your app in \"headless\" mode (no output) and drive the app via a Pilot object.</p> <p>Example:</p> <pre><code>```python\nasync with app.run_test() as pilot:\n    await pilot.click(\"#Button.ok\")\n    assert ...\n```\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Run in headless mode (no output or input).</p> <code>True</code> <code>tuple[int, int] | None</code> <p>Force terminal size to <code>(WIDTH, HEIGHT)</code>, or None to auto-detect.</p> <code>(80, 24)</code> <code>bool</code> <p>Enable tooltips when testing.</p> <code>False</code> <code>bool</code> <p>Enable notifications when testing.</p> <code>False</code> <code>Callable[[Message], None] | None</code> <p>An optional callback that will be called each time any message arrives at any message pump in the app.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.run_test(headless)","title":"<code>headless</code>","text":""},{"location":"api/app/#textual.app.App.run_test(size)","title":"<code>size</code>","text":""},{"location":"api/app/#textual.app.App.run_test(tooltips)","title":"<code>tooltips</code>","text":""},{"location":"api/app/#textual.app.App.run_test(notifications)","title":"<code>notifications</code>","text":""},{"location":"api/app/#textual.app.App.run_test(message_hook)","title":"<code>message_hook</code>","text":""},{"location":"api/app/#textual.app.App.save_screenshot","title":"save_screenshot","text":"<pre><code>save_screenshot(filename=None, path=None, time_format=None)\n</code></pre> <p>Save an SVG screenshot of the current screen.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Filename of SVG screenshot, or None to auto-generate a filename with the date and time.</p> <code>None</code> <code>str | None</code> <p>Path to directory for output. Defaults to current working directory.</p> <code>None</code> <code>str | None</code> <p>Date and time format to use if filename is None. Defaults to a format like ISO 8601 with some reserved characters replaced with underscores.</p> <code>None</code> <p>Returns:</p> Type Description <code>str</code> <p>Filename of screenshot.</p>"},{"location":"api/app/#textual.app.App.save_screenshot(filename)","title":"<code>filename</code>","text":""},{"location":"api/app/#textual.app.App.save_screenshot(path)","title":"<code>path</code>","text":""},{"location":"api/app/#textual.app.App.save_screenshot(time_format)","title":"<code>time_format</code>","text":""},{"location":"api/app/#textual.app.App.set_focus","title":"set_focus","text":"<pre><code>set_focus(widget, scroll_visible=True)\n</code></pre> <p>Focus (or unfocus) a widget. A focused widget will receive key events first.</p> <p>Parameters:</p> Name Type Description Default <code>Widget | None</code> <p>Widget to focus.</p> required <code>bool</code> <p>Scroll widget in to view.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.set_focus(widget)","title":"<code>widget</code>","text":""},{"location":"api/app/#textual.app.App.set_focus(scroll_visible)","title":"<code>scroll_visible</code>","text":""},{"location":"api/app/#textual.app.App.simulate_key","title":"simulate_key","text":"<pre><code>simulate_key(key)\n</code></pre> <p>Simulate a key press.</p> <p>This will perform the same action as if the user had pressed the key.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Key to simulate. May also be the name of a key, e.g. \"space\".</p> required"},{"location":"api/app/#textual.app.App.simulate_key(key)","title":"<code>key</code>","text":""},{"location":"api/app/#textual.app.App.stop_animation","title":"stop_animation  <code>async</code>","text":"<pre><code>stop_animation(attribute, complete=True)\n</code></pre> <p>Stop an animation on an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute whose animation should be stopped.</p> required <code>bool</code> <p>Should the animation be set to its final value?</p> <code>True</code> Note <p>If there is no animation scheduled or running, this is a no-op.</p>"},{"location":"api/app/#textual.app.App.stop_animation(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/app/#textual.app.App.stop_animation(complete)","title":"<code>complete</code>","text":""},{"location":"api/app/#textual.app.App.suspend","title":"suspend","text":"<pre><code>suspend()\n</code></pre> <p>A context manager that temporarily suspends the app.</p> <p>While inside the <code>with</code> block, the app will stop reading input and emitting output. Other applications will have full control of the terminal, configured as it was before the app started running. When the <code>with</code> block ends, the application will start reading input and emitting output again.</p> Example <pre><code>with self.suspend():\n    os.system(\"emacs -nw\")\n</code></pre> <p>Raises:</p> Type Description <code>SuspendNotSupported</code> <p>If the environment doesn't support suspending.</p> <p>Note</p> <p>Suspending the application is currently only supported on Unix-like operating systems and Microsoft Windows. Suspending is not supported in Textual Web.</p>"},{"location":"api/app/#textual.app.App.switch_mode","title":"switch_mode","text":"<pre><code>switch_mode(mode)\n</code></pre> <p>Switch to a given mode.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The mode to switch to.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An optionally awaitable object which waits for the screen associated with the mode to be mounted.</p> <p>Raises:</p> Type Description <code>UnknownModeError</code> <p>If trying to switch to an unknown mode.</p>"},{"location":"api/app/#textual.app.App.switch_mode(mode)","title":"<code>mode</code>","text":""},{"location":"api/app/#textual.app.App.switch_screen","title":"switch_screen","text":"<pre><code>switch_screen(screen)\n</code></pre> <p>Switch to another screen by replacing the top of the screen stack with a new screen.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>Either a Screen object or screen name (the <code>name</code> argument when installed).</p> required"},{"location":"api/app/#textual.app.App.switch_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.uninstall_screen","title":"uninstall_screen","text":"<pre><code>uninstall_screen(screen)\n</code></pre> <p>Uninstall a screen.</p> <p>If the screen was not previously installed, then this method is a null-op. Uninstalling a screen allows Textual to delete it when it is popped or switched. Note that uninstalling a screen is only required if you have previously installed it with install_screen. Textual will also uninstall screens automatically on exit.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>The screen to uninstall or the name of an installed screen.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>The name of the screen that was uninstalled, or None if no screen was uninstalled.</p>"},{"location":"api/app/#textual.app.App.uninstall_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.update_styles","title":"update_styles","text":"<pre><code>update_styles(node)\n</code></pre> <p>Immediately update the styles of this node and all descendant nodes.</p> <p>Should be called whenever CSS classes / pseudo classes change. For example, when you hover over a button, the :hover pseudo class will be added, and this method is called to apply the corresponding :hover styles.</p>"},{"location":"api/app/#textual.app.App.validate_sub_title","title":"validate_sub_title","text":"<pre><code>validate_sub_title(sub_title)\n</code></pre> <p>Make sure the subtitle is set to a string.</p>"},{"location":"api/app/#textual.app.App.validate_title","title":"validate_title","text":"<pre><code>validate_title(title)\n</code></pre> <p>Make sure the title is set to a string.</p>"},{"location":"api/app/#textual.app.App.watch_dark","title":"watch_dark","text":"<pre><code>watch_dark(dark)\n</code></pre> <p>Watches the dark bool.</p> <p>This method handles the transition between light and dark mode when you change the dark attribute.</p>"},{"location":"api/app/#textual.app.AppError","title":"AppError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for general App related exceptions.</p>"},{"location":"api/app/#textual.app.InvalidModeError","title":"InvalidModeError","text":"<p>               Bases: <code>ModeError</code></p> <p>Raised if there is an issue with a mode name.</p>"},{"location":"api/app/#textual.app.ModeError","title":"ModeError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for exceptions related to modes.</p>"},{"location":"api/app/#textual.app.ScreenError","title":"ScreenError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for exceptions that relate to screens.</p>"},{"location":"api/app/#textual.app.ScreenStackError","title":"ScreenStackError","text":"<p>               Bases: <code>ScreenError</code></p> <p>Raised when trying to manipulate the screen stack incorrectly.</p>"},{"location":"api/app/#textual.app.SuspendNotSupported","title":"SuspendNotSupported","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if suspending the application is not supported.</p> <p>This exception is raised if <code>App.suspend</code> is called while the application is running in an environment where this isn't supported.</p>"},{"location":"api/app/#textual.app.SystemCommand","title":"SystemCommand","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Defines a system command used in the command palette (yielded from <code>get_system_commands</code>).</p>"},{"location":"api/app/#textual.app.SystemCommand.callback","title":"callback  <code>instance-attribute</code>","text":"<pre><code>callback\n</code></pre> <p>A callback to invoke when the command is selected.</p>"},{"location":"api/app/#textual.app.SystemCommand.discover","title":"discover  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>discover = True\n</code></pre> <p>Should the command show when the search is empty?</p>"},{"location":"api/app/#textual.app.SystemCommand.help","title":"help  <code>instance-attribute</code>","text":"<pre><code>help\n</code></pre> <p>Additional help text, shown under the title.</p>"},{"location":"api/app/#textual.app.SystemCommand.title","title":"title  <code>instance-attribute</code>","text":"<pre><code>title\n</code></pre> <p>The title of the command (used in search).</p>"},{"location":"api/app/#textual.app.UnknownModeError","title":"UnknownModeError","text":"<p>               Bases: <code>ModeError</code></p> <p>Raised when attempting to use a mode that is not known.</p>"},{"location":"api/app/#textual.app.get_system_commands_provider","title":"get_system_commands_provider","text":"<pre><code>get_system_commands_provider()\n</code></pre> <p>Callable to lazy load the system commands.</p> <p>Returns:</p> Type Description <code>type[SystemCommandsProvider]</code> <p>System commands class.</p>"},{"location":"api/await_complete/","title":"textual.await_complete","text":"<p>This module contains the <code>AwaitComplete</code> class. An <code>AwaitComplete</code> object is returned by methods that do work in the background. You can await this object if you need to know when that work has completed. Or you can ignore it, and Textual will automatically await the work before handling the next message.</p> <p>Note</p> <p>You are unlikely to need to explicitly create these objects yourself.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete","title":"AwaitComplete","text":"<pre><code>AwaitComplete(*awaitables, pre_await=None)\n</code></pre> <p>An 'optionally-awaitable' object which runs one or more coroutines (or other awaitables) concurrently.</p> <p>Parameters:</p> Name Type Description Default <code>Awaitable</code> <p>One or more awaitables to run concurrently.</p> <code>()</code>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete(awaitables)","title":"<code>awaitables</code>","text":""},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.exception","title":"exception  <code>property</code>","text":"<pre><code>exception\n</code></pre> <p>An exception if the awaitables failed.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.is_done","title":"is_done  <code>property</code>","text":"<pre><code>is_done\n</code></pre> <p><code>True</code> if the task has completed.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.call_next","title":"call_next","text":"<pre><code>call_next(node)\n</code></pre> <p>Await after the next message.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>The node which created the object.</p> required"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.call_next(node)","title":"<code>node</code>","text":""},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.nothing","title":"nothing  <code>classmethod</code>","text":"<pre><code>nothing()\n</code></pre> <p>Returns an already completed instance of AwaitComplete.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.set_pre_await_callback","title":"set_pre_await_callback","text":"<pre><code>set_pre_await_callback(pre_await)\n</code></pre> <p>Set a callback to run prior to awaiting.</p> <p>This is used by Textual, mainly to check for possible deadlocks. You are unlikely to need to call this method in an app.</p> <p>Parameters:</p> Name Type Description Default <code>CallbackType | None</code> <p>A callback.</p> required"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.set_pre_await_callback(pre_await)","title":"<code>pre_await</code>","text":""},{"location":"api/await_remove/","title":"textual.await_remove","text":"<p>This module contains the <code>AwaitRemove</code> class. An <code>AwaitRemove</code> object is returned by <code>Widget.remove()</code> and other methods which remove widgets. You can await the return value if you need to know exactly when the widget(s) have been removed. Or you can ignore it and Textual will wait for the widgets to be removed before handling the next message.</p> <p>Note</p> <p>You are unlikely to need to explicitly create these objects yourself.</p> <p>An optionally awaitable object returned by methods that remove widgets.</p>"},{"location":"api/await_remove/#textual.await_remove.AwaitRemove","title":"AwaitRemove","text":"<pre><code>AwaitRemove(tasks, post_remove=None)\n</code></pre> <p>An awaitable that waits for nodes to be removed.</p>"},{"location":"api/binding/","title":"textual.binding","text":"<p>This module contains the <code>Binding</code> class and related objects.</p> <p>See bindings in the guide for details.</p>"},{"location":"api/binding/#textual.binding.ActiveBinding","title":"ActiveBinding","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Information about an active binding (returned from active_bindings).</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.binding","title":"binding  <code>instance-attribute</code>","text":"<pre><code>binding\n</code></pre> <p>The binding information.</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.enabled","title":"enabled  <code>instance-attribute</code>","text":"<pre><code>enabled\n</code></pre> <p>Is the binding enabled? (enabled bindings are typically rendered dim)</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node\n</code></pre> <p>The node where the binding is defined.</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.tooltip","title":"tooltip  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>tooltip = ''\n</code></pre> <p>Optional tooltip shown in Footer.</p>"},{"location":"api/binding/#textual.binding.Binding","title":"Binding  <code>dataclass</code>","text":"<pre><code>Binding(\n    key,\n    action,\n    description=\"\",\n    show=True,\n    key_display=None,\n    priority=False,\n    tooltip=\"\",\n)\n</code></pre> <p>The configuration of a key binding.</p>"},{"location":"api/binding/#textual.binding.Binding.action","title":"action  <code>instance-attribute</code>","text":"<pre><code>action\n</code></pre> <p>Action to bind to.</p>"},{"location":"api/binding/#textual.binding.Binding.description","title":"description  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>description = ''\n</code></pre> <p>Description of action.</p>"},{"location":"api/binding/#textual.binding.Binding.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key\n</code></pre> <p>Key to bind. This can also be a comma-separated list of keys to map multiple keys to a single action.</p>"},{"location":"api/binding/#textual.binding.Binding.key_display","title":"key_display  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>key_display = None\n</code></pre> <p>How the key should be shown in footer.</p>"},{"location":"api/binding/#textual.binding.Binding.priority","title":"priority  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>priority = False\n</code></pre> <p>Enable priority binding for this key.</p>"},{"location":"api/binding/#textual.binding.Binding.show","title":"show  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show = True\n</code></pre> <p>Show the action in Footer, or False to hide.</p>"},{"location":"api/binding/#textual.binding.Binding.tooltip","title":"tooltip  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>tooltip = ''\n</code></pre> <p>Optional tooltip to show in footer.</p>"},{"location":"api/binding/#textual.binding.Binding.parse_key","title":"parse_key","text":"<pre><code>parse_key()\n</code></pre> <p>Parse a key in to a list of modifiers, and the actual key.</p> <p>Returns:</p> Type Description <code>tuple[list[str], str]</code> <p>A tuple of (MODIFIER LIST, KEY).</p>"},{"location":"api/binding/#textual.binding.BindingError","title":"BindingError","text":"<p>               Bases: <code>Exception</code></p> <p>A binding related error.</p>"},{"location":"api/binding/#textual.binding.BindingsMap","title":"BindingsMap","text":"<pre><code>BindingsMap(bindings=None)\n</code></pre> <p>Manage a set of bindings.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[BindingType] | None</code> <p>An optional set of initial bindings.</p> <code>None</code> Note <p>The iterable of bindings can contain either a <code>Binding</code> instance, or a tuple of 3 values mapping to the first three properties of a <code>Binding</code>.</p>"},{"location":"api/binding/#textual.binding.BindingsMap(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.shown_keys","title":"shown_keys  <code>property</code>","text":"<pre><code>shown_keys\n</code></pre> <p>A list of bindings for shown keys.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.bind","title":"bind","text":"<pre><code>bind(\n    keys,\n    action,\n    description=\"\",\n    show=True,\n    key_display=None,\n    priority=False,\n)\n</code></pre> <p>Bind keys to an action.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The keys to bind. Can be a comma-separated list of keys.</p> required <code>str</code> <p>The action to bind the keys to.</p> required <code>str</code> <p>An optional description for the binding.</p> <code>''</code> <code>bool</code> <p>A flag to say if the binding should appear in the footer.</p> <code>True</code> <code>str | None</code> <p>Optional string to display in the footer for the key.</p> <code>None</code> <code>bool</code> <p>Is this a priority binding, checked form app down to focused widget?</p> <code>False</code>"},{"location":"api/binding/#textual.binding.BindingsMap.bind(keys)","title":"<code>keys</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(action)","title":"<code>action</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(description)","title":"<code>description</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(show)","title":"<code>show</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(key_display)","title":"<code>key_display</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(priority)","title":"<code>priority</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.copy","title":"copy","text":"<pre><code>copy()\n</code></pre> <p>Return a copy of this instance.</p> Return <p>New bindings object.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.from_keys","title":"from_keys  <code>classmethod</code>","text":"<pre><code>from_keys(keys)\n</code></pre> <p>Construct a BindingsMap from a dict of keys and bindings.</p> <p>Parameters:</p> Name Type Description Default <code>dict[str, list[Binding]]</code> <p>A dict that maps a key on to a list of <code>Binding</code> objects.</p> required <p>Returns:</p> Type Description <code>BindingsMap</code> <p>New <code>BindingsMap</code></p>"},{"location":"api/binding/#textual.binding.BindingsMap.from_keys(keys)","title":"<code>keys</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.get_bindings_for_key","title":"get_bindings_for_key","text":"<pre><code>get_bindings_for_key(key)\n</code></pre> <p>Get a list of bindings for a given key.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Key to look up.</p> required <p>Raises:</p> Type Description <code>NoBinding</code> <p>If the binding does not exist.</p> <p>Returns:</p> Type Description <code>list[Binding]</code> <p>A list of bindings associated with the key.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.get_bindings_for_key(key)","title":"<code>key</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.merge","title":"merge  <code>classmethod</code>","text":"<pre><code>merge(bindings)\n</code></pre> <p>Merge a bindings.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[BindingsMap]</code> <p>A number of bindings.</p> required <p>Returns:</p> Type Description <code>BindingsMap</code> <p>New <code>BindingsMap</code>.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.merge(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/binding/#textual.binding.InvalidBinding","title":"InvalidBinding","text":"<p>               Bases: <code>Exception</code></p> <p>Binding key is in an invalid format.</p>"},{"location":"api/binding/#textual.binding.NoBinding","title":"NoBinding","text":"<p>               Bases: <code>Exception</code></p> <p>A binding was not found.</p>"},{"location":"api/cache/","title":"textual.cache","text":"<p>Cache classes are dict-like containers used to avoid recalculating expensive operations such as rendering.</p> <p>You can also use them in your own apps for similar reasons.</p>"},{"location":"api/cache/#textual.cache.FIFOCache","title":"FIFOCache","text":"<pre><code>FIFOCache(maxsize)\n</code></pre> <p>               Bases: <code>Generic[CacheKey, CacheValue]</code></p> <p>A simple cache that discards the first added key when full (First In First Out).</p> <p>This has a lower overhead than LRUCache, but won't manage a working set as efficiently. It is most suitable for a cache with a relatively low maximum size that is not expected to do many lookups.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Maximum size of cache before discarding items.</p> required"},{"location":"api/cache/#textual.cache.FIFOCache(maxsize)","title":"<code>maxsize</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the cache.</p>"},{"location":"api/cache/#textual.cache.FIFOCache.get","title":"get","text":"<pre><code>get(key: CacheKey) -&gt; CacheValue | None\n</code></pre><pre><code>get(\n    key: CacheKey, default: DefaultValue\n) -&gt; CacheValue | DefaultValue\n</code></pre> <pre><code>get(key, default=None)\n</code></pre> <p>Get a value from the cache, or return a default if the key is not present.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key</p> required <code>DefaultValue | None</code> <p>Default to return if key is not present.</p> <code>None</code> <p>Returns:</p> Type Description <code>CacheValue | DefaultValue | None</code> <p>Either the value or a default.</p>"},{"location":"api/cache/#textual.cache.FIFOCache.get(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.get(default)","title":"<code>default</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.keys","title":"keys","text":"<pre><code>keys()\n</code></pre> <p>Get cache keys.</p>"},{"location":"api/cache/#textual.cache.FIFOCache.set","title":"set","text":"<pre><code>set(key, value)\n</code></pre> <p>Set a value.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key.</p> required <code>CacheValue</code> <p>Value.</p> required"},{"location":"api/cache/#textual.cache.FIFOCache.set(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.set(value)","title":"<code>value</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache","title":"LRUCache","text":"<pre><code>LRUCache(maxsize)\n</code></pre> <p>               Bases: <code>Generic[CacheKey, CacheValue]</code></p> <p>A dictionary-like container with a maximum size.</p> <p>If an additional item is added when the LRUCache is full, the least recently used key is discarded to make room for the new item.</p> <p>The implementation is similar to functools.lru_cache, which uses a (doubly) linked list to keep track of the most recently used items.</p> <p>Each entry is stored as [PREV, NEXT, KEY, VALUE] where PREV is a reference to the previous entry, and NEXT is a reference to the next value.</p> <p>Note that stdlib's @lru_cache is implemented in C and faster! It's best to use @lru_cache where you are caching things that are fairly quick and called many times. Use LRUCache where you want increased flexibility and you are caching slow operations where the overhead of the cache is a small fraction of the total processing time.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Maximum size of the cache, before old items are discarded.</p> required"},{"location":"api/cache/#textual.cache.LRUCache(maxsize)","title":"<code>maxsize</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.maxsize","title":"maxsize  <code>property</code> <code>writable</code>","text":"<pre><code>maxsize\n</code></pre>"},{"location":"api/cache/#textual.cache.LRUCache.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the cache.</p>"},{"location":"api/cache/#textual.cache.LRUCache.discard","title":"discard","text":"<pre><code>discard(key)\n</code></pre> <p>Discard item in cache from key.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Cache key.</p> required"},{"location":"api/cache/#textual.cache.LRUCache.discard(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.get","title":"get","text":"<pre><code>get(key: CacheKey) -&gt; CacheValue | None\n</code></pre><pre><code>get(\n    key: CacheKey, default: DefaultValue\n) -&gt; CacheValue | DefaultValue\n</code></pre> <pre><code>get(key, default=None)\n</code></pre> <p>Get a value from the cache, or return a default if the key is not present.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key</p> required <code>DefaultValue | None</code> <p>Default to return if key is not present.</p> <code>None</code> <p>Returns:</p> Type Description <code>CacheValue | DefaultValue | None</code> <p>Either the value or a default.</p>"},{"location":"api/cache/#textual.cache.LRUCache.get(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.get(default)","title":"<code>default</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.grow","title":"grow","text":"<pre><code>grow(maxsize)\n</code></pre> <p>Grow the maximum size to at least <code>maxsize</code> elements.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New maximum size.</p> required"},{"location":"api/cache/#textual.cache.LRUCache.grow(maxsize)","title":"<code>maxsize</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.keys","title":"keys","text":"<pre><code>keys()\n</code></pre> <p>Get cache keys.</p>"},{"location":"api/cache/#textual.cache.LRUCache.set","title":"set","text":"<pre><code>set(key, value)\n</code></pre> <p>Set a value.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key.</p> required <code>CacheValue</code> <p>Value.</p> required"},{"location":"api/cache/#textual.cache.LRUCache.set(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.set(value)","title":"<code>value</code>","text":""},{"location":"api/color/","title":"textual.color","text":"<p>This module contains a powerful Color class which Textual uses to manipulate colors.</p>"},{"location":"api/color/#textual.color--named-colors","title":"Named colors","text":"<p>The following named colors are used by the parse method.</p> <p> colors \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503hex\u00a0\u00a0\u00a0\u00a0\u2503RGB\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503Color\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\"aliceblue\"\u2502#F0F8FF\u2502rgb(240,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"ansi_black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_blue\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_black\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_green\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_bright_magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_bright_white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_cyan\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"ansi_magenta\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_red\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_white\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"ansi_yellow\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"antiquewhite\"\u2502#FAEBD7\u2502rgb(250,\u00a0235,\u00a0215)\u2502\u2502 \u2502\"aqua\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"aquamarine\"\u2502#7FFFD4\u2502rgb(127,\u00a0255,\u00a0212)\u2502\u2502 \u2502\"azure\"\u2502#F0FFFF\u2502rgb(240,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"beige\"\u2502#F5F5DC\u2502rgb(245,\u00a0245,\u00a0220)\u2502\u2502 \u2502\"bisque\"\u2502#FFE4C4\u2502rgb(255,\u00a0228,\u00a0196)\u2502\u2502 \u2502\"black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"blanchedalmond\"\u2502#FFEBCD\u2502rgb(255,\u00a0235,\u00a0205)\u2502\u2502 \u2502\"blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"blueviolet\"\u2502#8A2BE2\u2502rgb(138,\u00a043,\u00a0226)\u2502\u2502 \u2502\"brown\"\u2502#A52A2A\u2502rgb(165,\u00a042,\u00a042)\u2502\u2502 \u2502\"burlywood\"\u2502#DEB887\u2502rgb(222,\u00a0184,\u00a0135)\u2502\u2502 \u2502\"cadetblue\"\u2502#5F9EA0\u2502rgb(95,\u00a0158,\u00a0160)\u2502\u2502 \u2502\"chartreuse\"\u2502#7FFF00\u2502rgb(127,\u00a0255,\u00a00)\u2502\u2502 \u2502\"chocolate\"\u2502#D2691E\u2502rgb(210,\u00a0105,\u00a030)\u2502\u2502 \u2502\"coral\"\u2502#FF7F50\u2502rgb(255,\u00a0127,\u00a080)\u2502\u2502 \u2502\"cornflowerblue\"\u2502#6495ED\u2502rgb(100,\u00a0149,\u00a0237)\u2502\u2502 \u2502\"cornsilk\"\u2502#FFF8DC\u2502rgb(255,\u00a0248,\u00a0220)\u2502\u2502 \u2502\"crimson\"\u2502#DC143C\u2502rgb(220,\u00a020,\u00a060)\u2502\u2502 \u2502\"cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"darkblue\"\u2502#00008B\u2502rgb(0,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkcyan\"\u2502#008B8B\u2502rgb(0,\u00a0139,\u00a0139)\u2502\u2502 \u2502\"darkgoldenrod\"\u2502#B8860B\u2502rgb(184,\u00a0134,\u00a011)\u2502\u2502 \u2502\"darkgray\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkgreen\"\u2502#006400\u2502rgb(0,\u00a0100,\u00a00)\u2502\u2502 \u2502\"darkgrey\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkkhaki\"\u2502#BDB76B\u2502rgb(189,\u00a0183,\u00a0107)\u2502\u2502 \u2502\"darkmagenta\"\u2502#8B008B\u2502rgb(139,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkolivegreen\"\u2502#556B2F\u2502rgb(85,\u00a0107,\u00a047)\u2502\u2502 \u2502\"darkorange\"\u2502#FF8C00\u2502rgb(255,\u00a0140,\u00a00)\u2502\u2502 \u2502\"darkorchid\"\u2502#9932CC\u2502rgb(153,\u00a050,\u00a0204)\u2502\u2502 \u2502\"darkred\"\u2502#8B0000\u2502rgb(139,\u00a00,\u00a00)\u2502\u2502 \u2502\"darksalmon\"\u2502#E9967A\u2502rgb(233,\u00a0150,\u00a0122)\u2502\u2502 \u2502\"darkseagreen\"\u2502#8FBC8F\u2502rgb(143,\u00a0188,\u00a0143)\u2502\u2502 \u2502\"darkslateblue\"\u2502#483D8B\u2502rgb(72,\u00a061,\u00a0139)\u2502\u2502 \u2502\"darkslategray\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkslategrey\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkturquoise\"\u2502#00CED1\u2502rgb(0,\u00a0206,\u00a0209)\u2502\u2502 \u2502\"darkviolet\"\u2502#9400D3\u2502rgb(148,\u00a00,\u00a0211)\u2502\u2502 \u2502\"deeppink\"\u2502#FF1493\u2502rgb(255,\u00a020,\u00a0147)\u2502\u2502 \u2502\"deepskyblue\"\u2502#00BFFF\u2502rgb(0,\u00a0191,\u00a0255)\u2502\u2502 \u2502\"dimgray\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dimgrey\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dodgerblue\"\u2502#1E90FF\u2502rgb(30,\u00a0144,\u00a0255)\u2502\u2502 \u2502\"firebrick\"\u2502#B22222\u2502rgb(178,\u00a034,\u00a034)\u2502\u2502 \u2502\"floralwhite\"\u2502#FFFAF0\u2502rgb(255,\u00a0250,\u00a0240)\u2502\u2502 \u2502\"forestgreen\"\u2502#228B22\u2502rgb(34,\u00a0139,\u00a034)\u2502\u2502 \u2502\"fuchsia\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"gainsboro\"\u2502#DCDCDC\u2502rgb(220,\u00a0220,\u00a0220)\u2502\u2502 \u2502\"ghostwhite\"\u2502#F8F8FF\u2502rgb(248,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"gold\"\u2502#FFD700\u2502rgb(255,\u00a0215,\u00a00)\u2502\u2502 \u2502\"goldenrod\"\u2502#DAA520\u2502rgb(218,\u00a0165,\u00a032)\u2502\u2502 \u2502\"gray\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"greenyellow\"\u2502#ADFF2F\u2502rgb(173,\u00a0255,\u00a047)\u2502\u2502 \u2502\"grey\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"honeydew\"\u2502#F0FFF0\u2502rgb(240,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"hotpink\"\u2502#FF69B4\u2502rgb(255,\u00a0105,\u00a0180)\u2502\u2502 \u2502\"indianred\"\u2502#CD5C5C\u2502rgb(205,\u00a092,\u00a092)\u2502\u2502 \u2502\"indigo\"\u2502#4B0082\u2502rgb(75,\u00a00,\u00a0130)\u2502\u2502 \u2502\"ivory\"\u2502#FFFFF0\u2502rgb(255,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"khaki\"\u2502#F0E68C\u2502rgb(240,\u00a0230,\u00a0140)\u2502\u2502 \u2502\"lavender\"\u2502#E6E6FA\u2502rgb(230,\u00a0230,\u00a0250)\u2502\u2502 \u2502\"lavenderblush\"\u2502#FFF0F5\u2502rgb(255,\u00a0240,\u00a0245)\u2502\u2502 \u2502\"lawngreen\"\u2502#7CFC00\u2502rgb(124,\u00a0252,\u00a00)\u2502\u2502 \u2502\"lemonchiffon\"\u2502#FFFACD\u2502rgb(255,\u00a0250,\u00a0205)\u2502\u2502 \u2502\"lightblue\"\u2502#ADD8E6\u2502rgb(173,\u00a0216,\u00a0230)\u2502\u2502 \u2502\"lightcoral\"\u2502#F08080\u2502rgb(240,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"lightcyan\"\u2502#E0FFFF\u2502rgb(224,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"lightgoldenrodyellow\"\u2502#FAFAD2\u2502rgb(250,\u00a0250,\u00a0210)\u2502\u2502 \u2502\"lightgray\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightgreen\"\u2502#90EE90\u2502rgb(144,\u00a0238,\u00a0144)\u2502\u2502 \u2502\"lightgrey\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightpink\"\u2502#FFB6C1\u2502rgb(255,\u00a0182,\u00a0193)\u2502\u2502 \u2502\"lightsalmon\"\u2502#FFA07A\u2502rgb(255,\u00a0160,\u00a0122)\u2502\u2502 \u2502\"lightseagreen\"\u2502#20B2AA\u2502rgb(32,\u00a0178,\u00a0170)\u2502\u2502 \u2502\"lightskyblue\"\u2502#87CEFA\u2502rgb(135,\u00a0206,\u00a0250)\u2502\u2502 \u2502\"lightslategray\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightslategrey\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightsteelblue\"\u2502#B0C4DE\u2502rgb(176,\u00a0196,\u00a0222)\u2502\u2502 \u2502\"lightyellow\"\u2502#FFFFE0\u2502rgb(255,\u00a0255,\u00a0224)\u2502\u2502 \u2502\"lime\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"limegreen\"\u2502#32CD32\u2502rgb(50,\u00a0205,\u00a050)\u2502\u2502 \u2502\"linen\"\u2502#FAF0E6\u2502rgb(250,\u00a0240,\u00a0230)\u2502\u2502 \u2502\"magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"maroon\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"mediumaquamarine\"\u2502#66CDAA\u2502rgb(102,\u00a0205,\u00a0170)\u2502\u2502 \u2502\"mediumblue\"\u2502#0000CD\u2502rgb(0,\u00a00,\u00a0205)\u2502\u2502 \u2502\"mediumorchid\"\u2502#BA55D3\u2502rgb(186,\u00a085,\u00a0211)\u2502\u2502 \u2502\"mediumpurple\"\u2502#9370DB\u2502rgb(147,\u00a0112,\u00a0219)\u2502\u2502 \u2502\"mediumseagreen\"\u2502#3CB371\u2502rgb(60,\u00a0179,\u00a0113)\u2502\u2502 \u2502\"mediumslateblue\"\u2502#7B68EE\u2502rgb(123,\u00a0104,\u00a0238)\u2502\u2502 \u2502\"mediumspringgreen\"\u2502#00FA9A\u2502rgb(0,\u00a0250,\u00a0154)\u2502\u2502 \u2502\"mediumturquoise\"\u2502#48D1CC\u2502rgb(72,\u00a0209,\u00a0204)\u2502\u2502 \u2502\"mediumvioletred\"\u2502#C71585\u2502rgb(199,\u00a021,\u00a0133)\u2502\u2502 \u2502\"midnightblue\"\u2502#191970\u2502rgb(25,\u00a025,\u00a0112)\u2502\u2502 \u2502\"mintcream\"\u2502#F5FFFA\u2502rgb(245,\u00a0255,\u00a0250)\u2502\u2502 \u2502\"mistyrose\"\u2502#FFE4E1\u2502rgb(255,\u00a0228,\u00a0225)\u2502\u2502 \u2502\"moccasin\"\u2502#FFE4B5\u2502rgb(255,\u00a0228,\u00a0181)\u2502\u2502 \u2502\"navajowhite\"\u2502#FFDEAD\u2502rgb(255,\u00a0222,\u00a0173)\u2502\u2502 \u2502\"navy\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"oldlace\"\u2502#FDF5E6\u2502rgb(253,\u00a0245,\u00a0230)\u2502\u2502 \u2502\"olive\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"olivedrab\"\u2502#6B8E23\u2502rgb(107,\u00a0142,\u00a035)\u2502\u2502 \u2502\"orange\"\u2502#FFA500\u2502rgb(255,\u00a0165,\u00a00)\u2502\u2502 \u2502\"orangered\"\u2502#FF4500\u2502rgb(255,\u00a069,\u00a00)\u2502\u2502 \u2502\"orchid\"\u2502#DA70D6\u2502rgb(218,\u00a0112,\u00a0214)\u2502\u2502 \u2502\"palegoldenrod\"\u2502#EEE8AA\u2502rgb(238,\u00a0232,\u00a0170)\u2502\u2502 \u2502\"palegreen\"\u2502#98FB98\u2502rgb(152,\u00a0251,\u00a0152)\u2502\u2502 \u2502\"paleturquoise\"\u2502#AFEEEE\u2502rgb(175,\u00a0238,\u00a0238)\u2502\u2502 \u2502\"palevioletred\"\u2502#DB7093\u2502rgb(219,\u00a0112,\u00a0147)\u2502\u2502 \u2502\"papayawhip\"\u2502#FFEFD5\u2502rgb(255,\u00a0239,\u00a0213)\u2502\u2502 \u2502\"peachpuff\"\u2502#FFDAB9\u2502rgb(255,\u00a0218,\u00a0185)\u2502\u2502 \u2502\"peru\"\u2502#CD853F\u2502rgb(205,\u00a0133,\u00a063)\u2502\u2502 \u2502\"pink\"\u2502#FFC0CB\u2502rgb(255,\u00a0192,\u00a0203)\u2502\u2502 \u2502\"plum\"\u2502#DDA0DD\u2502rgb(221,\u00a0160,\u00a0221)\u2502\u2502 \u2502\"powderblue\"\u2502#B0E0E6\u2502rgb(176,\u00a0224,\u00a0230)\u2502\u2502 \u2502\"purple\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"rebeccapurple\"\u2502#663399\u2502rgb(102,\u00a051,\u00a0153)\u2502\u2502 \u2502\"red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"rosybrown\"\u2502#BC8F8F\u2502rgb(188,\u00a0143,\u00a0143)\u2502\u2502 \u2502\"royalblue\"\u2502#4169E1\u2502rgb(65,\u00a0105,\u00a0225)\u2502\u2502 \u2502\"saddlebrown\"\u2502#8B4513\u2502rgb(139,\u00a069,\u00a019)\u2502\u2502 \u2502\"salmon\"\u2502#FA8072\u2502rgb(250,\u00a0128,\u00a0114)\u2502\u2502 \u2502\"sandybrown\"\u2502#F4A460\u2502rgb(244,\u00a0164,\u00a096)\u2502\u2502 \u2502\"seagreen\"\u2502#2E8B57\u2502rgb(46,\u00a0139,\u00a087)\u2502\u2502 \u2502\"seashell\"\u2502#FFF5EE\u2502rgb(255,\u00a0245,\u00a0238)\u2502\u2502 \u2502\"sienna\"\u2502#A0522D\u2502rgb(160,\u00a082,\u00a045)\u2502\u2502 \u2502\"silver\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"skyblue\"\u2502#87CEEB\u2502rgb(135,\u00a0206,\u00a0235)\u2502\u2502 \u2502\"slateblue\"\u2502#6A5ACD\u2502rgb(106,\u00a090,\u00a0205)\u2502\u2502 \u2502\"slategray\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"slategrey\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"snow\"\u2502#FFFAFA\u2502rgb(255,\u00a0250,\u00a0250)\u2502\u2502 \u2502\"springgreen\"\u2502#00FF7F\u2502rgb(0,\u00a0255,\u00a0127)\u2502\u2502 \u2502\"steelblue\"\u2502#4682B4\u2502rgb(70,\u00a0130,\u00a0180)\u2502\u2502 \u2502\"tan\"\u2502#D2B48C\u2502rgb(210,\u00a0180,\u00a0140)\u2502\u2502 \u2502\"teal\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"thistle\"\u2502#D8BFD8\u2502rgb(216,\u00a0191,\u00a0216)\u2502\u2502 \u2502\"tomato\"\u2502#FF6347\u2502rgb(255,\u00a099,\u00a071)\u2502\u2502 \u2502\"turquoise\"\u2502#40E0D0\u2502rgb(64,\u00a0224,\u00a0208)\u2502\u2502 \u2502\"violet\"\u2502#EE82EE\u2502rgb(238,\u00a0130,\u00a0238)\u2502\u2502 \u2502\"wheat\"\u2502#F5DEB3\u2502rgb(245,\u00a0222,\u00a0179)\u2502\u2502 \u2502\"white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"whitesmoke\"\u2502#F5F5F5\u2502rgb(245,\u00a0245,\u00a0245)\u2502\u2502 \u2502\"yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"yellowgreen\"\u2502#9ACD32\u2502rgb(154,\u00a0205,\u00a050)\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p>"},{"location":"api/color/#textual.color.BLACK","title":"BLACK  <code>module-attribute</code>","text":"<pre><code>BLACK = Color(0, 0, 0)\n</code></pre> <p>A constant for pure black.</p>"},{"location":"api/color/#textual.color.TRANSPARENT","title":"TRANSPARENT  <code>module-attribute</code>","text":"<pre><code>TRANSPARENT = parse('transparent')\n</code></pre> <p>A constant for transparent.</p>"},{"location":"api/color/#textual.color.WHITE","title":"WHITE  <code>module-attribute</code>","text":"<pre><code>WHITE = Color(255, 255, 255)\n</code></pre> <p>A constant for pure white.</p>"},{"location":"api/color/#textual.color.Color","title":"Color","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A class to represent a color.</p> <p>Colors are stored as three values representing the degree of red, green, and blue in a color, and a fourth \"alpha\" value which defines where the color lies on a gradient of opaque to transparent.</p> Example <pre><code>&gt;&gt;&gt; from textual.color import Color\n&gt;&gt;&gt; color = Color.parse(\"red\")\n&gt;&gt;&gt; color\nColor(255, 0, 0)\n&gt;&gt;&gt; color.darken(0.5)\nColor(98, 0, 0)\n&gt;&gt;&gt; color + Color.parse(\"green\")\nColor(0, 128, 0)\n&gt;&gt;&gt; color_with_alpha = Color(100, 50, 25, 0.5)\n&gt;&gt;&gt; color_with_alpha\nColor(100, 50, 25, a=0.5)\n&gt;&gt;&gt; color + color_with_alpha\nColor(177, 25, 12)\n</code></pre>"},{"location":"api/color/#textual.color.Color.a","title":"a  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>a = 1.0\n</code></pre> <p>Alpha (opacity) component in range 0 to 1.</p>"},{"location":"api/color/#textual.color.Color.b","title":"b  <code>instance-attribute</code>","text":"<pre><code>b\n</code></pre> <p>Blue component in range 0 to 255.</p>"},{"location":"api/color/#textual.color.Color.brightness","title":"brightness  <code>property</code>","text":"<pre><code>brightness\n</code></pre> <p>The human perceptual brightness.</p> <p>A value of 1 is returned for pure white, and 0 for pure black. Other colors lie on a gradient between the two extremes.</p>"},{"location":"api/color/#textual.color.Color.clamped","title":"clamped  <code>property</code>","text":"<pre><code>clamped\n</code></pre> <p>A clamped color (this color with all values in expected range).</p>"},{"location":"api/color/#textual.color.Color.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>The color in CSS RGB or RGBA form.</p> <p>For example, <code>\"rgb(10,20,30)\"</code> for an RGB color, or <code>\"rgb(50,70,80,0.5)\"</code> for an RGBA color.</p>"},{"location":"api/color/#textual.color.Color.g","title":"g  <code>instance-attribute</code>","text":"<pre><code>g\n</code></pre> <p>Green component in range 0 to 255.</p>"},{"location":"api/color/#textual.color.Color.hex","title":"hex  <code>property</code>","text":"<pre><code>hex\n</code></pre> <p>The color in CSS hex form, with 6 digits for RGB, and 8 digits for RGBA.</p> <p>For example, <code>\"#46b3de\"</code> for an RGB color, or <code>\"#3342457f\"</code> for a color with alpha.</p>"},{"location":"api/color/#textual.color.Color.hex6","title":"hex6  <code>property</code>","text":"<pre><code>hex6\n</code></pre> <p>The color in CSS hex form, with 6 digits for RGB. Alpha is ignored.</p> <p>For example, <code>\"#46b3de\"</code>.</p>"},{"location":"api/color/#textual.color.Color.hsl","title":"hsl  <code>property</code>","text":"<pre><code>hsl\n</code></pre> <p>This color in HSL format.</p> <p>HSL color is an alternative way of representing a color, which can be used in certain color calculations.</p> <p>Returns:</p> Type Description <code>HSL</code> <p>Color encoded in HSL format.</p>"},{"location":"api/color/#textual.color.Color.inverse","title":"inverse  <code>property</code>","text":"<pre><code>inverse\n</code></pre> <p>The inverse of this color.</p> <p>Returns:</p> Type Description <code>Color</code> <p>Inverse color.</p>"},{"location":"api/color/#textual.color.Color.is_transparent","title":"is_transparent  <code>property</code>","text":"<pre><code>is_transparent\n</code></pre> <p>Is the color transparent (i.e. has 0 alpha)?</p>"},{"location":"api/color/#textual.color.Color.monochrome","title":"monochrome  <code>property</code>","text":"<pre><code>monochrome\n</code></pre> <p>A monochrome version of this color.</p> <p>Returns:</p> Type Description <code>Color</code> <p>The monochrome (black and white) version of this color.</p>"},{"location":"api/color/#textual.color.Color.normalized","title":"normalized  <code>property</code>","text":"<pre><code>normalized\n</code></pre> <p>A tuple of the color components normalized to between 0 and 1.</p> <p>Returns:</p> Type Description <code>tuple[float, float, float]</code> <p>Normalized components.</p>"},{"location":"api/color/#textual.color.Color.r","title":"r  <code>instance-attribute</code>","text":"<pre><code>r\n</code></pre> <p>Red component in range 0 to 255.</p>"},{"location":"api/color/#textual.color.Color.rgb","title":"rgb  <code>property</code>","text":"<pre><code>rgb\n</code></pre> <p>The red, green, and blue color components as a tuple of ints.</p>"},{"location":"api/color/#textual.color.Color.rich_color","title":"rich_color  <code>cached</code> <code>property</code>","text":"<pre><code>rich_color\n</code></pre> <p>This color encoded in Rich's Color class.</p> <p>Returns:</p> Type Description <code>Color</code> <p>A color object as used by Rich.</p>"},{"location":"api/color/#textual.color.Color.blend","title":"blend  <code>cached</code>","text":"<pre><code>blend(destination, factor, alpha=None)\n</code></pre> <p>Generate a new color between two colors.</p> <p>This method calculates a new color on a gradient. The position on the gradient is given by <code>factor</code>, which is a float between 0 and 1, where 0 is the original color, and 1 is the <code>destination</code> color. A value of <code>gradient</code> between the two extremes produces a color somewhere between the two end points.</p> <p>Parameters:</p> Name Type Description Default <code>Color</code> <p>Another color.</p> required <code>float</code> <p>A blend factor, 0 -&gt; 1.</p> required <code>float | None</code> <p>New alpha for result.</p> <code>None</code> <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.blend(destination)","title":"<code>destination</code>","text":""},{"location":"api/color/#textual.color.Color.blend(factor)","title":"<code>factor</code>","text":""},{"location":"api/color/#textual.color.Color.blend(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.darken","title":"darken  <code>cached</code>","text":"<pre><code>darken(amount, alpha=None)\n</code></pre> <p>Darken the color by a given amount.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Value between 0-1 to reduce luminance by.</p> required <code>float | None</code> <p>Alpha component for new color or None to copy alpha.</p> <code>None</code> <p>Returns:</p> Type Description <code>Color</code> <p>New color.</p>"},{"location":"api/color/#textual.color.Color.darken(amount)","title":"<code>amount</code>","text":""},{"location":"api/color/#textual.color.Color.darken(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.from_hsl","title":"from_hsl  <code>classmethod</code>","text":"<pre><code>from_hsl(h, s, l)\n</code></pre> <p>Create a color from HLS components.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Hue.</p> required <code>float</code> <p>Lightness.</p> required <code>float</code> <p>Saturation.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.from_hsl(h)","title":"<code>h</code>","text":""},{"location":"api/color/#textual.color.Color.from_hsl(l)","title":"<code>l</code>","text":""},{"location":"api/color/#textual.color.Color.from_hsl(s)","title":"<code>s</code>","text":""},{"location":"api/color/#textual.color.Color.from_rich_color","title":"from_rich_color  <code>classmethod</code>","text":"<pre><code>from_rich_color(rich_color)\n</code></pre> <p>Create a new color from Rich's Color class.</p> <p>Parameters:</p> Name Type Description Default <code>Color</code> <p>An instance of Rich color.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new Color instance.</p>"},{"location":"api/color/#textual.color.Color.from_rich_color(rich_color)","title":"<code>rich_color</code>","text":""},{"location":"api/color/#textual.color.Color.get_contrast_text","title":"get_contrast_text  <code>cached</code>","text":"<pre><code>get_contrast_text(alpha=0.95)\n</code></pre> <p>Get a light or dark color that best contrasts this color, for use with text.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>An alpha value to apply to the result.</p> <code>0.95</code> <p>Returns:</p> Type Description <code>Color</code> <p>A new color, either an off-white or off-black.</p>"},{"location":"api/color/#textual.color.Color.get_contrast_text(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.lighten","title":"lighten","text":"<pre><code>lighten(amount, alpha=None)\n</code></pre> <p>Lighten the color by a given amount.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Value between 0-1 to increase luminance by.</p> required <code>float | None</code> <p>Alpha component for new color or None to copy alpha.</p> <code>None</code> <p>Returns:</p> Type Description <code>Color</code> <p>New color.</p>"},{"location":"api/color/#textual.color.Color.lighten(amount)","title":"<code>amount</code>","text":""},{"location":"api/color/#textual.color.Color.lighten(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.multiply_alpha","title":"multiply_alpha","text":"<pre><code>multiply_alpha(alpha)\n</code></pre> <p>Create a new color, multiplying the alpha by a constant.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>A value to multiple the alpha by (expected to be in the range 0 to 1).</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.multiply_alpha(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.parse","title":"parse  <code>cached</code> <code>classmethod</code>","text":"<pre><code>parse(color_text)\n</code></pre> <p>Parse a string containing a named color or CSS-style color.</p> <p>Colors may be parsed from the following formats:</p> <ul> <li> <p>Text beginning with a <code>#</code> is parsed as a hexadecimal color code,  where R, G, B, and A must be hexadecimal digits (0-9A-F):</p> <ul> <li><code>#RGB</code></li> <li><code>#RGBA</code></li> <li><code>#RRGGBB</code></li> <li><code>#RRGGBBAA</code></li> </ul> </li> <li> <p>Alternatively, RGB colors can also be specified in the format  that follows, where R, G, and B must be numbers between 0 and 255  and A must be a value between 0 and 1:</p> <ul> <li><code>rgb(R,G,B)</code></li> <li><code>rgb(R,G,B,A)</code></li> </ul> </li> <li> <p>The HSL model can also be used, with a syntax similar to the above,  if H is a value between 0 and 360, S and L are percentages, and A  is a value between 0 and 1:</p> <ul> <li><code>hsl(H,S,L)</code></li> <li><code>hsla(H,S,L,A)</code></li> </ul> </li> </ul> <p>Any other formats will raise a <code>ColorParseError</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | Color</code> <p>Text with a valid color format. Color objects will be returned unmodified.</p> required <p>Raises:</p> Type Description <code>ColorParseError</code> <p>If the color is not encoded correctly.</p> <p>Returns:</p> Type Description <code>Color</code> <p>Instance encoding the color specified by the argument.</p>"},{"location":"api/color/#textual.color.Color.parse(color_text)","title":"<code>color_text</code>","text":""},{"location":"api/color/#textual.color.Color.with_alpha","title":"with_alpha","text":"<pre><code>with_alpha(alpha)\n</code></pre> <p>Create a new color with the given alpha.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>New value for alpha.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.with_alpha(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.ColorParseError","title":"ColorParseError","text":"<pre><code>ColorParseError(message, suggested_color=None)\n</code></pre> <p>               Bases: <code>Exception</code></p> <p>A color failed to parse.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The error message</p> required <code>str | None</code> <p>A close color we can suggest.</p> <code>None</code>"},{"location":"api/color/#textual.color.ColorParseError(message)","title":"<code>message</code>","text":""},{"location":"api/color/#textual.color.ColorParseError(suggested_color)","title":"<code>suggested_color</code>","text":""},{"location":"api/color/#textual.color.Gradient","title":"Gradient","text":"<pre><code>Gradient(*stops, quality=50)\n</code></pre> <p>Defines a color gradient.</p> <p>A gradient is defined by a sequence of \"stops\" consisting of a tuple containing a float and a color. The stop indicates the color at that point on a spectrum between 0 and 1. Colors may be given as a Color instance, or a string that can be parsed into a Color (with Color.parse).</p> <p>The <code>quality</code> argument defines the number of steps in the gradient. Intermediate colors are interpolated from the two nearest colors. Increasing <code>quality</code> can generate a smoother looking gradient, at the expense of a little extra work to pre-calculate the colors.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[float, Color | str]</code> <p>Color stops.</p> <code>()</code> <code>int</code> <p>The number of steps in the gradient.</p> <code>50</code> <p>Raises:</p> Type Description <code>ValueError</code> <p>If any stops are missing (must be at least a stop for 0 and 1).</p>"},{"location":"api/color/#textual.color.Gradient(stops)","title":"<code>stops</code>","text":""},{"location":"api/color/#textual.color.Gradient(quality)","title":"<code>quality</code>","text":""},{"location":"api/color/#textual.color.Gradient.colors","title":"colors  <code>property</code>","text":"<pre><code>colors\n</code></pre> <p>A list of colors in the gradient.</p>"},{"location":"api/color/#textual.color.Gradient.from_colors","title":"from_colors  <code>classmethod</code>","text":"<pre><code>from_colors(*colors, quality=50)\n</code></pre> <p>Construct a gradient form a sequence of colors, where the stops are evenly spaced.</p> <p>Parameters:</p> Name Type Description Default <code>Color | str</code> <p>Positional arguments may be Color instances or strings to parse into a color.</p> <code>()</code> <code>int</code> <p>The number of steps in the gradient.</p> <code>50</code> <p>Returns:</p> Type Description <code>Gradient</code> <p>A new Gradient instance.</p>"},{"location":"api/color/#textual.color.Gradient.from_colors(*colors)","title":"<code>*colors</code>","text":""},{"location":"api/color/#textual.color.Gradient.from_colors(quality)","title":"<code>quality</code>","text":""},{"location":"api/color/#textual.color.Gradient.get_color","title":"get_color","text":"<pre><code>get_color(position)\n</code></pre> <p>Get a color from the gradient at a position between 0 and 1.</p> <p>Positions that are between stops will return a blended color.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>A number between 0 and 1, where 0 is the first stop, and 1 is the last.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A Textual color.</p>"},{"location":"api/color/#textual.color.Gradient.get_color(position)","title":"<code>position</code>","text":""},{"location":"api/color/#textual.color.Gradient.get_rich_color","title":"get_rich_color","text":"<pre><code>get_rich_color(position)\n</code></pre> <p>Get a (Rich) color from the gradient at a position between 0 and 1.</p> <p>Positions that are between stops will return a blended color.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>A number between 0 and 1, where 0 is the first stop, and 1 is the last.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A (Rich) color.</p>"},{"location":"api/color/#textual.color.Gradient.get_rich_color(position)","title":"<code>position</code>","text":""},{"location":"api/color/#textual.color.HSL","title":"HSL","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A color in HLS (Hue, Saturation, Lightness) format.</p>"},{"location":"api/color/#textual.color.HSL.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>HSL in css format.</p>"},{"location":"api/color/#textual.color.HSL.h","title":"h  <code>instance-attribute</code>","text":"<pre><code>h\n</code></pre> <p>Hue in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSL.l","title":"l  <code>instance-attribute</code>","text":"<pre><code>l\n</code></pre> <p>Lightness in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSL.s","title":"s  <code>instance-attribute</code>","text":"<pre><code>s\n</code></pre> <p>Saturation in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSV","title":"HSV","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A color in HSV (Hue, Saturation, Value) format.</p>"},{"location":"api/color/#textual.color.HSV.h","title":"h  <code>instance-attribute</code>","text":"<pre><code>h\n</code></pre> <p>Hue in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSV.s","title":"s  <code>instance-attribute</code>","text":"<pre><code>s\n</code></pre> <p>Saturation in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSV.v","title":"v  <code>instance-attribute</code>","text":"<pre><code>v\n</code></pre> <p>Value un range 0 to 1.</p>"},{"location":"api/color/#textual.color.Lab","title":"Lab","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A color in CIE-L*ab format.</p>"},{"location":"api/color/#textual.color.Lab.L","title":"L  <code>instance-attribute</code>","text":"<pre><code>L\n</code></pre> <p>Lightness in range 0 to 100.</p>"},{"location":"api/color/#textual.color.Lab.a","title":"a  <code>instance-attribute</code>","text":"<pre><code>a\n</code></pre> <p>A axis in range -127 to 128.</p>"},{"location":"api/color/#textual.color.Lab.b","title":"b  <code>instance-attribute</code>","text":"<pre><code>b\n</code></pre> <p>B axis in range -127 to 128.</p>"},{"location":"api/color/#textual.color.lab_to_rgb","title":"lab_to_rgb","text":"<pre><code>lab_to_rgb(lab, alpha=1.0)\n</code></pre> <p>Convert a CIE-L*ab color to RGB.</p> <p>Uses the standard RGB color space with a D65/2\u2070 standard illuminant. Conversion passes through the XYZ color space. Cf. http://www.easyrgb.com/en/math.php.</p>"},{"location":"api/color/#textual.color.rgb_to_lab","title":"rgb_to_lab","text":"<pre><code>rgb_to_lab(rgb)\n</code></pre> <p>Convert an RGB color to the CIE-L*ab format.</p> <p>Uses the standard RGB color space with a D65/2\u2070 standard illuminant. Conversion passes through the XYZ color space. Cf. http://www.easyrgb.com/en/math.php.</p>"},{"location":"api/command/","title":"textual.command","text":"<p>This module contains classes for working with Textual's command palette.</p> <p>See the guide on the Command Palette for full details.</p>"},{"location":"api/command/#textual.command.Hits","title":"Hits  <code>module-attribute</code>","text":"<pre><code>Hits = AsyncIterator['DiscoveryHit | Hit']\n</code></pre> <p>Return type for the command provider's <code>search</code> method.</p>"},{"location":"api/command/#textual.command.Command","title":"Command","text":"<pre><code>Command(prompt, command, id=None, disabled=False)\n</code></pre> <p>               Bases: <code>Option</code></p> <p>Class that holds a command in the <code>CommandList</code>.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>The prompt for the option.</p> required <code>DiscoveryHit | Hit</code> <p>The details of the command associated with the option.</p> required <code>str | None</code> <p>The optional ID for the option.</p> <code>None</code> <code>bool</code> <p>The initial enabled/disabled state. Enabled by default.</p> <code>False</code>"},{"location":"api/command/#textual.command.Command(prompt)","title":"<code>prompt</code>","text":""},{"location":"api/command/#textual.command.Command(command)","title":"<code>command</code>","text":""},{"location":"api/command/#textual.command.Command(id)","title":"<code>id</code>","text":""},{"location":"api/command/#textual.command.Command(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/command/#textual.command.Command.command","title":"command  <code>instance-attribute</code>","text":"<pre><code>command = command\n</code></pre> <p>The details of the command associated with the option.</p>"},{"location":"api/command/#textual.command.CommandInput","title":"CommandInput","text":"<pre><code>CommandInput(\n    value=None,\n    placeholder=\"\",\n    highlighter=None,\n    password=False,\n    *,\n    restrict=None,\n    type=\"text\",\n    max_length=0,\n    suggester=None,\n    validators=None,\n    validate_on=None,\n    valid_empty=False,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n    tooltip=None\n)\n</code></pre> <p>               Bases: <code>Input</code></p> <p>The command palette input control.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>An optional default value for the input.</p> <code>None</code> <code>str</code> <p>Optional placeholder text for the input.</p> <code>''</code> <code>Highlighter | None</code> <p>An optional highlighter for the input.</p> <code>None</code> <code>bool</code> <p>Flag to say if the field should obfuscate its content.</p> <code>False</code> <code>str | None</code> <p>A regex to restrict character inputs.</p> <code>None</code> <code>InputType</code> <p>The type of the input.</p> <code>'text'</code> <code>int</code> <p>The maximum length of the input, or 0 for no maximum length.</p> <code>0</code> <code>Suggester | None</code> <p><code>Suggester</code> associated with this input instance.</p> <code>None</code> <code>Validator | Iterable[Validator] | None</code> <p>An iterable of validators that the Input value will be checked against.</p> <code>None</code> <code>Iterable[InputValidationOn] | None</code> <p>Zero or more of the values \"blur\", \"changed\", and \"submitted\", which determine when to do input validation. The default is to do validation for all messages.</p> <code>None</code> <code>bool</code> <p>Empty values are valid.</p> <code>False</code> <code>str | None</code> <p>Optional name for the input widget.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the input is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"api/command/#textual.command.CommandInput(value)","title":"<code>value</code>","text":""},{"location":"api/command/#textual.command.CommandInput(placeholder)","title":"<code>placeholder</code>","text":""},{"location":"api/command/#textual.command.CommandInput(highlighter)","title":"<code>highlighter</code>","text":""},{"location":"api/command/#textual.command.CommandInput(password)","title":"<code>password</code>","text":""},{"location":"api/command/#textual.command.CommandInput(restrict)","title":"<code>restrict</code>","text":""},{"location":"api/command/#textual.command.CommandInput(type)","title":"<code>type</code>","text":""},{"location":"api/command/#textual.command.CommandInput(max_length)","title":"<code>max_length</code>","text":""},{"location":"api/command/#textual.command.CommandInput(suggester)","title":"<code>suggester</code>","text":""},{"location":"api/command/#textual.command.CommandInput(validators)","title":"<code>validators</code>","text":""},{"location":"api/command/#textual.command.CommandInput(validate_on)","title":"<code>validate_on</code>","text":""},{"location":"api/command/#textual.command.CommandInput(valid_empty)","title":"<code>valid_empty</code>","text":""},{"location":"api/command/#textual.command.CommandInput(name)","title":"<code>name</code>","text":""},{"location":"api/command/#textual.command.CommandInput(id)","title":"<code>id</code>","text":""},{"location":"api/command/#textual.command.CommandInput(classes)","title":"<code>classes</code>","text":""},{"location":"api/command/#textual.command.CommandInput(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/command/#textual.command.CommandInput(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"api/command/#textual.command.CommandList","title":"CommandList","text":"<pre><code>CommandList(\n    *content,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n    wrap=True,\n    tooltip=None,\n)\n</code></pre> <p>               Bases: <code>OptionList</code></p> <p>The command palette command list.</p>"},{"location":"api/command/#textual.command.CommandPalette","title":"CommandPalette","text":"<pre><code>CommandPalette()\n</code></pre> <p>               Bases: <code>SystemModalScreen</code></p> <p>The Textual command palette.</p>"},{"location":"api/command/#textual.command.CommandPalette.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"ctrl+end, shift+end\",\n        \"command_list('last')\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+home, shift+home\",\n        \"command_list('first')\",\n        show=False,\n    ),\n    Binding(\"down\", \"cursor_down\", show=False),\n    Binding(\"escape\", \"escape\", \"Exit the command palette\"),\n    Binding(\n        \"pagedown\", \"command_list('page_down')\", show=False\n    ),\n    Binding(\n        \"pageup\", \"command_list('page_up')\", show=False\n    ),\n    Binding(\"up\", \"command_list('cursor_up')\", show=False),\n]\n</code></pre> Key(s) Description ctrl+end, shift+end Jump to the last available commands. ctrl+home, shift+home Jump to the first available commands. down Navigate down through the available commands. escape Exit the command palette. pagedown Navigate down a page through the available commands. pageup Navigate up a page through the available commands. up Navigate up through the available commands."},{"location":"api/command/#textual.command.CommandPalette.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"command-palette--help-text\",\n    \"command-palette--highlight\",\n}\n</code></pre> Class Description <code>command-palette--help-text</code> Targets the help text of a matched command. <code>command-palette--highlight</code> Targets the highlights of a matched command."},{"location":"api/command/#textual.command.CommandPalette.run_on_select","title":"run_on_select  <code>class-attribute</code>","text":"<pre><code>run_on_select = True\n</code></pre> <p>A flag to say if a command should be run when selected by the user.</p> <p>If <code>True</code> then when a user hits <code>Enter</code> on a command match in the result list, or if they click on one with the mouse, the command will be selected and run. If set to <code>False</code> the input will be filled with the command and then <code>Enter</code> should be pressed on the keyboard or the 'go' button should be pressed.</p>"},{"location":"api/command/#textual.command.CommandPalette.Closed","title":"Closed  <code>dataclass</code>","text":"<pre><code>Closed(option_selected)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted to App when the command palette is closed.</p>"},{"location":"api/command/#textual.command.CommandPalette.Closed.option_selected","title":"option_selected  <code>instance-attribute</code>","text":"<pre><code>option_selected\n</code></pre> <p>True if an option was selected, False if the palette was closed without selecting an option.</p>"},{"location":"api/command/#textual.command.CommandPalette.Opened","title":"Opened  <code>dataclass</code>","text":"<pre><code>Opened()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted to App when the command palette is opened.</p>"},{"location":"api/command/#textual.command.CommandPalette.OptionHighlighted","title":"OptionHighlighted  <code>dataclass</code>","text":"<pre><code>OptionHighlighted(highlighted_event)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted to App when an option is highlighted in the command palette.</p>"},{"location":"api/command/#textual.command.CommandPalette.OptionHighlighted.highlighted_event","title":"highlighted_event  <code>instance-attribute</code>","text":"<pre><code>highlighted_event\n</code></pre> <p>The option highlighted event from the OptionList within the command palette.</p>"},{"location":"api/command/#textual.command.CommandPalette.is_open","title":"is_open  <code>staticmethod</code>","text":"<pre><code>is_open(app)\n</code></pre> <p>Is the command palette current open?</p> <p>Parameters:</p> Name Type Description Default <code>App</code> <p>The app to test.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the command palette is currently open, <code>False</code> if not.</p>"},{"location":"api/command/#textual.command.CommandPalette.is_open(app)","title":"<code>app</code>","text":""},{"location":"api/command/#textual.command.DiscoveryHit","title":"DiscoveryHit  <code>dataclass</code>","text":"<pre><code>DiscoveryHit(display, command, text=None, help=None)\n</code></pre> <p>Holds the details of a single command search hit.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.command","title":"command  <code>instance-attribute</code>","text":"<pre><code>command\n</code></pre> <p>The function to call when the command is chosen.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.display","title":"display  <code>instance-attribute</code>","text":"<pre><code>display\n</code></pre> <p>A string or Rich renderable representation of the hit.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.help","title":"help  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>help = None\n</code></pre> <p>Optional help text for the command.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.prompt","title":"prompt  <code>property</code>","text":"<pre><code>prompt\n</code></pre> <p>The prompt to use when displaying the discovery hit in the command palette.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.text","title":"text  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>text = None\n</code></pre> <p>The command text associated with the hit, as plain text.</p> <p>If <code>display</code> is not simple text, this attribute should be provided by the Provider object.</p>"},{"location":"api/command/#textual.command.Hit","title":"Hit  <code>dataclass</code>","text":"<pre><code>Hit(score, match_display, command, text=None, help=None)\n</code></pre> <p>Holds the details of a single command search hit.</p>"},{"location":"api/command/#textual.command.Hit.command","title":"command  <code>instance-attribute</code>","text":"<pre><code>command\n</code></pre> <p>The function to call when the command is chosen.</p>"},{"location":"api/command/#textual.command.Hit.help","title":"help  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>help = None\n</code></pre> <p>Optional help text for the command.</p>"},{"location":"api/command/#textual.command.Hit.match_display","title":"match_display  <code>instance-attribute</code>","text":"<pre><code>match_display\n</code></pre> <p>A string or Rich renderable representation of the hit.</p>"},{"location":"api/command/#textual.command.Hit.prompt","title":"prompt  <code>property</code>","text":"<pre><code>prompt\n</code></pre> <p>The prompt to use when displaying the hit in the command palette.</p>"},{"location":"api/command/#textual.command.Hit.score","title":"score  <code>instance-attribute</code>","text":"<pre><code>score\n</code></pre> <p>The score of the command hit.</p> <p>The value should be between 0 (no match) and 1 (complete match).</p>"},{"location":"api/command/#textual.command.Hit.text","title":"text  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>text = None\n</code></pre> <p>The command text associated with the hit, as plain text.</p> <p>If <code>match_display</code> is not simple text, this attribute should be provided by the Provider object.</p>"},{"location":"api/command/#textual.command.Matcher","title":"Matcher","text":"<pre><code>Matcher(query, *, match_style=None, case_sensitive=False)\n</code></pre> <p>A fuzzy matcher.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A query as typed in by the user.</p> required <code>Style | None</code> <p>The style to use to highlight matched portions of a string.</p> <code>None</code> <code>bool</code> <p>Should matching be case sensitive?</p> <code>False</code>"},{"location":"api/command/#textual.command.Matcher(query)","title":"<code>query</code>","text":""},{"location":"api/command/#textual.command.Matcher(match_style)","title":"<code>match_style</code>","text":""},{"location":"api/command/#textual.command.Matcher(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/command/#textual.command.Matcher.case_sensitive","title":"case_sensitive  <code>property</code>","text":"<pre><code>case_sensitive\n</code></pre> <p>Is this matcher case sensitive?</p>"},{"location":"api/command/#textual.command.Matcher.match_style","title":"match_style  <code>property</code>","text":"<pre><code>match_style\n</code></pre> <p>The style that will be used to highlight hits in the matched text.</p>"},{"location":"api/command/#textual.command.Matcher.query","title":"query  <code>property</code>","text":"<pre><code>query\n</code></pre> <p>The query string to look for.</p>"},{"location":"api/command/#textual.command.Matcher.query_pattern","title":"query_pattern  <code>property</code>","text":"<pre><code>query_pattern\n</code></pre> <p>The regular expression pattern built from the query.</p>"},{"location":"api/command/#textual.command.Matcher.highlight","title":"highlight","text":"<pre><code>highlight(candidate)\n</code></pre> <p>Highlight the candidate with the fuzzy match.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A [rich.text.Text][<code>Text</code>] object with highlighted matches.</p>"},{"location":"api/command/#textual.command.Matcher.highlight(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/command/#textual.command.Matcher.match","title":"match","text":"<pre><code>match(candidate)\n</code></pre> <p>Match the candidate against the query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>float</code> <p>Strength of the match from 0 to 1.</p>"},{"location":"api/command/#textual.command.Matcher.match(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/command/#textual.command.Provider","title":"Provider","text":"<pre><code>Provider(screen, match_style=None)\n</code></pre> <p>               Bases: <code>ABC</code></p> <p>Base class for command palette command providers.</p> <p>To create new command provider, inherit from this class and implement <code>search</code>.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[Any]</code> <p>A reference to the active screen.</p> required"},{"location":"api/command/#textual.command.Provider(screen)","title":"<code>screen</code>","text":""},{"location":"api/command/#textual.command.Provider.app","title":"app  <code>property</code>","text":"<pre><code>app\n</code></pre> <p>A reference to the application.</p>"},{"location":"api/command/#textual.command.Provider.focused","title":"focused  <code>property</code>","text":"<pre><code>focused\n</code></pre> <p>The currently-focused widget in the currently-active screen in the application.</p> <p>If no widget has focus this will be <code>None</code>.</p>"},{"location":"api/command/#textual.command.Provider.match_style","title":"match_style  <code>property</code>","text":"<pre><code>match_style\n</code></pre> <p>The preferred style to use when highlighting matching portions of the <code>match_display</code>.</p>"},{"location":"api/command/#textual.command.Provider.screen","title":"screen  <code>property</code>","text":"<pre><code>screen\n</code></pre> <p>The currently-active screen in the application.</p>"},{"location":"api/command/#textual.command.Provider.discover","title":"discover  <code>async</code>","text":"<pre><code>discover()\n</code></pre> <p>A default collection of hits for the provider.</p> <p>Yields:</p> Type Description <code>Hits</code> <p>Instances of <code>DiscoveryHit</code>.</p> Note <p>This is different from <code>search</code> in that it should yield <code>DiscoveryHit</code>s that should be shown by default (before user input).</p> <p>It is permitted to not implement this method.</p>"},{"location":"api/command/#textual.command.Provider.matcher","title":"matcher","text":"<pre><code>matcher(user_input, case_sensitive=False)\n</code></pre> <p>Create a fuzzy matcher for the given user input.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text that the user has input.</p> required <code>bool</code> <p>Should matching be case sensitive?</p> <code>False</code> <p>Returns:</p> Type Description <code>Matcher</code> <p>A fuzzy matcher object for matching against candidate hits.</p>"},{"location":"api/command/#textual.command.Provider.matcher(user_input)","title":"<code>user_input</code>","text":""},{"location":"api/command/#textual.command.Provider.matcher(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/command/#textual.command.Provider.search","title":"search  <code>abstractmethod</code> <code>async</code>","text":"<pre><code>search(query)\n</code></pre> <p>A request to search for commands relevant to the given query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The user input to be matched.</p> required <p>Yields:</p> Type Description <code>Hits</code> <p>Instances of <code>Hit</code>.</p>"},{"location":"api/command/#textual.command.Provider.search(query)","title":"<code>query</code>","text":""},{"location":"api/command/#textual.command.Provider.shutdown","title":"shutdown  <code>async</code>","text":"<pre><code>shutdown()\n</code></pre> <p>Called when the Provider is shutdown.</p> <p>Use this method to perform an cleanup, if required.</p>"},{"location":"api/command/#textual.command.Provider.startup","title":"startup  <code>async</code>","text":"<pre><code>startup()\n</code></pre> <p>Called after the Provider is initialized, but before any calls to <code>search</code>.</p>"},{"location":"api/command/#textual.command.SearchIcon","title":"SearchIcon","text":"<pre><code>SearchIcon(\n    renderable=\"\",\n    *,\n    expand=False,\n    shrink=False,\n    markup=True,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>               Bases: <code>Static</code></p> <p>Widget for displaying a search icon before the command input.</p>"},{"location":"api/command/#textual.command.SearchIcon.icon","title":"icon  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>icon = var('\ud83d\udd0e')\n</code></pre> <p>The icon to display.</p>"},{"location":"api/constants/","title":"textual.constants","text":"<p>This module contains constants, which may be set in environment variables.</p>"},{"location":"api/constants/#textual.constants.COLOR_SYSTEM","title":"COLOR_SYSTEM  <code>module-attribute</code>","text":"<pre><code>COLOR_SYSTEM = get_environ('TEXTUAL_COLOR_SYSTEM', 'auto')\n</code></pre> <p>Force color system override.</p>"},{"location":"api/constants/#textual.constants.DEBUG","title":"DEBUG  <code>module-attribute</code>","text":"<pre><code>DEBUG = _get_environ_bool('TEXTUAL_DEBUG')\n</code></pre> <p>Enable debug mode.</p>"},{"location":"api/constants/#textual.constants.DEVTOOLS_HOST","title":"DEVTOOLS_HOST  <code>module-attribute</code>","text":"<pre><code>DEVTOOLS_HOST = get_environ(\n    \"TEXTUAL_DEVTOOLS_HOST\", \"127.0.0.1\"\n)\n</code></pre> <p>The host where textual console is running.</p>"},{"location":"api/constants/#textual.constants.DEVTOOLS_PORT","title":"DEVTOOLS_PORT  <code>module-attribute</code>","text":"<pre><code>DEVTOOLS_PORT = _get_environ_int(\n    \"TEXTUAL_DEVTOOLS_PORT\", 8081\n)\n</code></pre> <p>Constant with the port that the devtools will connect to.</p>"},{"location":"api/constants/#textual.constants.DRIVER","title":"DRIVER  <code>module-attribute</code>","text":"<pre><code>DRIVER = get_environ('TEXTUAL_DRIVER', None)\n</code></pre> <p>Import for replacement driver.</p>"},{"location":"api/constants/#textual.constants.ESCAPE_DELAY","title":"ESCAPE_DELAY  <code>module-attribute</code>","text":"<pre><code>ESCAPE_DELAY = _get_environ_int('ESCDELAY', 100) / 1000.0\n</code></pre> <p>The delay (in seconds) before reporting an escape key (not used if the extend key protocol is available).</p>"},{"location":"api/constants/#textual.constants.FILTERS","title":"FILTERS  <code>module-attribute</code>","text":"<pre><code>FILTERS = get_environ('TEXTUAL_FILTERS', '')\n</code></pre> <p>A list of filters to apply to renderables.</p>"},{"location":"api/constants/#textual.constants.LOG_FILE","title":"LOG_FILE  <code>module-attribute</code>","text":"<pre><code>LOG_FILE = get_environ('TEXTUAL_LOG', None)\n</code></pre> <p>A last resort log file that appends all logs, when devtools isn't working.</p>"},{"location":"api/constants/#textual.constants.MAX_FPS","title":"MAX_FPS  <code>module-attribute</code>","text":"<pre><code>MAX_FPS = _get_environ_int('TEXTUAL_FPS', 60)\n</code></pre> <p>Maximum frames per second for updates.</p>"},{"location":"api/constants/#textual.constants.PRESS","title":"PRESS  <code>module-attribute</code>","text":"<pre><code>PRESS = get_environ('TEXTUAL_PRESS', '')\n</code></pre> <p>Keys to automatically press.</p>"},{"location":"api/constants/#textual.constants.SCREENSHOT_DELAY","title":"SCREENSHOT_DELAY  <code>module-attribute</code>","text":"<pre><code>SCREENSHOT_DELAY = _get_environ_int(\n    \"TEXTUAL_SCREENSHOT\", -1\n)\n</code></pre> <p>Seconds delay before taking screenshot.</p>"},{"location":"api/constants/#textual.constants.SCREENSHOT_FILENAME","title":"SCREENSHOT_FILENAME  <code>module-attribute</code>","text":"<pre><code>SCREENSHOT_FILENAME = get_environ(\n    \"TEXTUAL_SCREENSHOT_FILENAME\"\n)\n</code></pre> <p>The filename to use for the screenshot.</p>"},{"location":"api/constants/#textual.constants.SCREENSHOT_LOCATION","title":"SCREENSHOT_LOCATION  <code>module-attribute</code>","text":"<pre><code>SCREENSHOT_LOCATION = get_environ(\n    \"TEXTUAL_SCREENSHOT_LOCATION\"\n)\n</code></pre> <p>The location where screenshots should be written.</p>"},{"location":"api/constants/#textual.constants.SHOW_RETURN","title":"SHOW_RETURN  <code>module-attribute</code>","text":"<pre><code>SHOW_RETURN = _get_environ_bool('TEXTUAL_SHOW_RETURN')\n</code></pre> <p>Write the return value on exit.</p>"},{"location":"api/constants/#textual.constants.TEXTUAL_ANIMATIONS","title":"TEXTUAL_ANIMATIONS  <code>module-attribute</code>","text":"<pre><code>TEXTUAL_ANIMATIONS = _get_textual_animations()\n</code></pre> <p>Determines whether animations run or not.</p>"},{"location":"api/containers/","title":"textual.containers","text":"<p>Container widgets for quick styling.</p> <p>With the exception of <code>Center</code> and <code>Middle</code> containers will fill all of the space in the parent widget.</p>"},{"location":"api/containers/#textual.containers.Center","title":"Center","text":"<pre><code>Center(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container which aligns children on the X axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Center(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Center(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Center(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Center(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Center(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Container","title":"Container","text":"<pre><code>Container(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Simple container widget, with vertical layout.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Container(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Container(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Container(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Container(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Container(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Grid","title":"Grid","text":"<pre><code>Grid(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container with grid layout.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Grid(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Grid(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Grid(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Grid(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Grid(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal","title":"Horizontal","text":"<pre><code>Horizontal(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container with horizontal layout and no scrollbars.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Horizontal(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll","title":"HorizontalScroll","text":"<pre><code>HorizontalScroll(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>ScrollableContainer</code></p> <p>A container with horizontal layout and an automatic scrollbar on the X axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.HorizontalScroll(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Middle","title":"Middle","text":"<pre><code>Middle(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container which aligns children on the Y axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Middle(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Middle(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Middle(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Middle(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Middle(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer","title":"ScrollableContainer","text":"<pre><code>ScrollableContainer(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A scrollable container with vertical layout, and auto scrollbars on both axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.ScrollableContainer(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"up\", \"scroll_up\", \"Scroll Up\", show=False),\n    Binding(\n        \"down\", \"scroll_down\", \"Scroll Down\", show=False\n    ),\n    Binding(\"left\", \"scroll_left\", \"Scroll Up\", show=False),\n    Binding(\n        \"right\", \"scroll_right\", \"Scroll Right\", show=False\n    ),\n    Binding(\n        \"home\", \"scroll_home\", \"Scroll Home\", show=False\n    ),\n    Binding(\"end\", \"scroll_end\", \"Scroll End\", show=False),\n    Binding(\"pageup\", \"page_up\", \"Page Up\", show=False),\n    Binding(\n        \"pagedown\", \"page_down\", \"Page Down\", show=False\n    ),\n    Binding(\n        \"ctrl+pageup\", \"page_left\", \"Page Left\", show=False\n    ),\n    Binding(\n        \"ctrl+pagedown\",\n        \"page_right\",\n        \"Page Right\",\n        show=False,\n    ),\n]\n</code></pre> <p>Keyboard bindings for scrollable containers.</p> Key(s) Description up Scroll up, if vertical scrolling is available. down Scroll down, if vertical scrolling is available. left Scroll left, if horizontal scrolling is available. right Scroll right, if horizontal scrolling is available. home Scroll to the home position, if scrolling is available. end Scroll to the end position, if scrolling is available. pageup Scroll up one page, if vertical scrolling is available. pagedown Scroll down one page, if vertical scrolling is available. ctrl+pageup Scroll left one page, if horizontal scrolling is available. ctrl+pagedown Scroll right one page, if horizontal scrolling is available."},{"location":"api/containers/#textual.containers.Vertical","title":"Vertical","text":"<pre><code>Vertical(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container with vertical layout and no scrollbars.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Vertical(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll","title":"VerticalScroll","text":"<pre><code>VerticalScroll(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>ScrollableContainer</code></p> <p>A container with vertical layout and an automatic scrollbar on the Y axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.VerticalScroll(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/coordinate/","title":"textual.coordinate","text":"<p>A class to store a coordinate, used by the DataTable.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate","title":"Coordinate","text":"<p>               Bases: <code>NamedTuple</code></p> <p>An object representing a row/column coordinate within a grid.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.column","title":"column  <code>instance-attribute</code>","text":"<pre><code>column\n</code></pre> <p>The column of the coordinate within a grid.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.row","title":"row  <code>instance-attribute</code>","text":"<pre><code>row\n</code></pre> <p>The row of the coordinate within a grid.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.down","title":"down","text":"<pre><code>down()\n</code></pre> <p>Get the coordinate below.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate below.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.left","title":"left","text":"<pre><code>left()\n</code></pre> <p>Get the coordinate to the left.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate to the left.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.right","title":"right","text":"<pre><code>right()\n</code></pre> <p>Get the coordinate to the right.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate to the right.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.up","title":"up","text":"<pre><code>up()\n</code></pre> <p>Get the coordinate above.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate above.</p>"},{"location":"api/dom_node/","title":"textual.dom","text":"<p>The module contains <code>DOMNode</code>, the base class for any object within the Textual Document Object Model, which includes all Widgets, Screens, and Apps.</p>"},{"location":"api/dom_node/#textual.dom.QueryOneCacheKey","title":"QueryOneCacheKey  <code>module-attribute</code>","text":"<pre><code>QueryOneCacheKey = 'tuple[int, str, Type[Widget] | None]'\n</code></pre> <p>The key used to cache query_one results.</p>"},{"location":"api/dom_node/#textual.dom.WalkMethod","title":"WalkMethod  <code>module-attribute</code>","text":"<pre><code>WalkMethod = Literal['depth', 'breadth']\n</code></pre> <p>Valid walking methods for the <code>DOMNode.walk_children</code> method.</p>"},{"location":"api/dom_node/#textual.dom.BadIdentifier","title":"BadIdentifier","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised if you supply a <code>id</code> attribute or class name in the wrong format.</p>"},{"location":"api/dom_node/#textual.dom.DOMError","title":"DOMError","text":"<p>               Bases: <code>Exception</code></p> <p>Base exception class for errors relating to the DOM.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode","title":"DOMNode","text":"<pre><code>DOMNode(*, name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>MessagePump</code></p> <p>The base class for object that can be in the Textual DOM (App and Widget)</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.BINDING_GROUP_TITLE","title":"BINDING_GROUP_TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDING_GROUP_TITLE = None\n</code></pre> <p>Title of widget used where bindings are displayed (such as in the key panel).</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.HELP","title":"HELP  <code>class-attribute</code>","text":"<pre><code>HELP = None\n</code></pre> <p>Optional help text shown in help panel (Markdown format).</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.SCOPED_CSS","title":"SCOPED_CSS  <code>class-attribute</code>","text":"<pre><code>SCOPED_CSS = True\n</code></pre> <p>Should default css be limited to the widget type?</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.ancestors","title":"ancestors  <code>property</code>","text":"<pre><code>ancestors\n</code></pre> <p>A list of ancestor nodes found by tracing a path all the way back to App.</p> <p>Returns:</p> Type Description <code>list[DOMNode]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.ancestors_with_self","title":"ancestors_with_self  <code>property</code>","text":"<pre><code>ancestors_with_self\n</code></pre> <p>A list of ancestor nodes found by tracing a path all the way back to App.</p> Note <p>This is inclusive of <code>self</code>.</p> <p>Returns:</p> Type Description <code>list[DOMNode]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.auto_refresh","title":"auto_refresh  <code>property</code> <code>writable</code>","text":"<pre><code>auto_refresh\n</code></pre> <p>Number of seconds between automatic refresh, or <code>None</code> for no automatic refresh.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.background_colors","title":"background_colors  <code>property</code>","text":"<pre><code>background_colors\n</code></pre> <p>The background color and the color of the parent's background.</p> <p>Returns:</p> Type Description <code>tuple[Color, Color]</code> <p><code>(&lt;background color&gt;, &lt;color&gt;)</code></p>"},{"location":"api/dom_node/#textual.dom.DOMNode.children","title":"children  <code>property</code>","text":"<pre><code>children\n</code></pre> <p>A view on to the children.</p> <p>Returns:</p> Type Description <code>Sequence['Widget']</code> <p>The node's children.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.classes","title":"classes  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>classes = _ClassesDescriptor()\n</code></pre> <p>CSS class names for this node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.colors","title":"colors  <code>property</code>","text":"<pre><code>colors\n</code></pre> <p>The widget's background and foreground colors, and the parent's background and foreground colors.</p> <p>Returns:</p> Type Description <code>tuple[Color, Color, Color, Color]</code> <p><code>(&lt;parent background&gt;, &lt;parent color&gt;, &lt;background&gt;, &lt;color&gt;)</code></p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_identifier","title":"css_identifier  <code>property</code>","text":"<pre><code>css_identifier\n</code></pre> <p>A CSS selector that identifies this DOM node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_identifier_styled","title":"css_identifier_styled  <code>property</code>","text":"<pre><code>css_identifier_styled\n</code></pre> <p>A syntax highlighted CSS identifier.</p> <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_path_nodes","title":"css_path_nodes  <code>property</code>","text":"<pre><code>css_path_nodes\n</code></pre> <p>A list of nodes from the App to this node, forming a \"path\".</p> <p>Returns:</p> Type Description <code>list[DOMNode]</code> <p>A list of nodes, where the first item is the App, and the last is this node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_tree","title":"css_tree  <code>property</code>","text":"<pre><code>css_tree\n</code></pre> <p>A Rich tree to display the DOM, annotated with the node's CSS.</p> <p>Log this to visualize your app in the textual console.</p> Example <pre><code>self.log(self.css_tree)\n</code></pre> <p>Returns:</p> Type Description <code>Tree</code> <p>A Tree renderable.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.display","title":"display  <code>property</code> <code>writable</code>","text":"<pre><code>display\n</code></pre> <p>Should the DOM node be displayed?</p> <p>May be set to a boolean to show or hide the node, or to any valid value for the <code>display</code> rule.</p> Example <pre><code>my_widget.display = False  # Hide my_widget\n</code></pre>"},{"location":"api/dom_node/#textual.dom.DOMNode.displayed_children","title":"displayed_children  <code>property</code>","text":"<pre><code>displayed_children\n</code></pre> <p>The child nodes which will be displayed.</p> <p>Returns:</p> Type Description <code>list[Widget]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.id","title":"id  <code>property</code> <code>writable</code>","text":"<pre><code>id\n</code></pre> <p>The ID of this node, or None if the node has no ID.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.is_modal","title":"is_modal  <code>property</code>","text":"<pre><code>is_modal\n</code></pre> <p>Is the node a modal?</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.name","title":"name  <code>property</code>","text":"<pre><code>name\n</code></pre> <p>The name of the node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.parent","title":"parent  <code>property</code>","text":"<pre><code>parent\n</code></pre> <p>The parent node.</p> <p>All nodes have parent once added to the DOM, with the exception of the App which is the root node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.pseudo_classes","title":"pseudo_classes  <code>property</code>","text":"<pre><code>pseudo_classes\n</code></pre> <p>A (frozen) set of all pseudo classes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.rich_style","title":"rich_style  <code>property</code>","text":"<pre><code>rich_style\n</code></pre> <p>Get a Rich Style object for this DOMNode.</p> <p>Returns:</p> Type Description <code>Style</code> <p>A Rich style.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.screen","title":"screen  <code>property</code>","text":"<pre><code>screen\n</code></pre> <p>The screen containing this node.</p> <p>Returns:</p> Type Description <code>'Screen[object]'</code> <p>A screen object.</p> <p>Raises:</p> Type Description <code>NoScreen</code> <p>If this node isn't mounted (and has no screen).</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.text_style","title":"text_style  <code>property</code>","text":"<pre><code>text_style\n</code></pre> <p>Get the text style object.</p> <p>A widget's style is influenced by its parent. for instance if a parent is bold, then the child will also be bold.</p> <p>Returns:</p> Type Description <code>Style</code> <p>A Rich Style.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.tree","title":"tree  <code>property</code>","text":"<pre><code>tree\n</code></pre> <p>A Rich tree to display the DOM.</p> <p>Log this to visualize your app in the textual console.</p> Example <pre><code>self.log(self.tree)\n</code></pre> <p>Returns:</p> Type Description <code>Tree</code> <p>A Tree renderable.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.visible","title":"visible  <code>property</code> <code>writable</code>","text":"<pre><code>visible\n</code></pre> <p>Is this widget visible in the DOM?</p> <p>If a widget hasn't had its visibility set explicitly, then it inherits it from its DOM ancestors.</p> <p>This may be set explicitly to override inherited values. The valid values include the valid values for the <code>visibility</code> rule and the booleans <code>True</code> or <code>False</code>, to set the widget to be visible or invisible, respectively.</p> <p>When a node is invisible, Textual will reserve space for it, but won't display anything.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.workers","title":"workers  <code>property</code>","text":"<pre><code>workers\n</code></pre> <p>The app's worker manager. Shortcut for <code>self.app.workers</code>.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.action_toggle","title":"action_toggle  <code>async</code>","text":"<pre><code>action_toggle(attribute_name)\n</code></pre> <p>Toggle an attribute on the node.</p> <p>Assumes the attribute is a bool.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute.</p> required"},{"location":"api/dom_node/#textual.dom.DOMNode.action_toggle(attribute_name)","title":"<code>attribute_name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.add_class","title":"add_class","text":"<pre><code>add_class(*class_names, update=True)\n</code></pre> <p>Add class names to this Node.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to add.</p> <code>()</code> <code>bool</code> <p>Also update styles.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.add_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.add_class(update)","title":"<code>update</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.automatic_refresh","title":"automatic_refresh","text":"<pre><code>automatic_refresh()\n</code></pre> <p>Perform an automatic refresh.</p> <p>This method is called when you set the <code>auto_refresh</code> attribute. You could implement this method if you want to perform additional work during an automatic refresh.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.check_action","title":"check_action","text":"<pre><code>check_action(action, parameters)\n</code></pre> <p>Check whether an action is enabled.</p> <p>Implement this method to add logic for dynamic actions / bindings.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The name of an action.</p> required <code>tuple[object, ...]</code> <p>A tuple of any action parameters.</p> required <p>Returns:</p> Type Description <code>bool | None</code> <p><code>True</code> if the action is enabled+visible, <code>False</code> if the action is disabled+hidden, <code>None</code> if the action is disabled+visible (grayed out in footer)</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.check_action(action)","title":"<code>action</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.check_action(parameters)","title":"<code>parameters</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.check_consume_key","title":"check_consume_key","text":"<pre><code>check_consume_key(key, character)\n</code></pre> <p>Check if the widget may consume the given key.</p> <p>This should be implemented in widgets that handle <code>Key</code> events and stop propagation (such as Input and TextArea).</p> <p>Implementing this method will hide key bindings from the footer and key panel that would be consumed by the focused widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A key identifier.</p> required <code>str | None</code> <p>A character associated with the key, or <code>None</code> if there isn't one.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may capture the key in its <code>Key</code> event handler, or <code>False</code> if it won't.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.check_consume_key(key)","title":"<code>key</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.check_consume_key(character)","title":"<code>character</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.data_bind","title":"data_bind","text":"<pre><code>data_bind(*reactives, **bind_vars)\n</code></pre> <p>Bind reactive data so that changes to a reactive automatically change the reactive on another widget.</p> <p>Reactives may be given as positional arguments or keyword arguments. See the guide on data binding.</p> Example <pre><code>def compose(self) -&gt; ComposeResult:\n    yield WorldClock(\"Europe/London\").data_bind(WorldClockApp.time)\n    yield WorldClock(\"Europe/Paris\").data_bind(WorldClockApp.time)\n    yield WorldClock(\"Asia/Tokyo\").data_bind(WorldClockApp.time)\n</code></pre> <p>Raises:</p> Type Description <code>ReactiveError</code> <p>If the data wasn't bound.</p> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.get_component_styles","title":"get_component_styles","text":"<pre><code>get_component_styles(*names)\n</code></pre> <p>Get a \"component\" styles object (must be defined in COMPONENT_CLASSES classvar).</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Names of the components.</p> <code>()</code> <p>Raises:</p> Type Description <code>KeyError</code> <p>If the component class doesn't exist.</p> <p>Returns:</p> Type Description <code>RenderStyles</code> <p>A Styles object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.get_component_styles(names)","title":"<code>names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.get_pseudo_classes","title":"get_pseudo_classes","text":"<pre><code>get_pseudo_classes()\n</code></pre> <p>Get any pseudo classes applicable to this Node, e.g. hover, focus.</p> <p>Returns:</p> Type Description <code>Iterable[str]</code> <p>Iterable of strings, such as a generator.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_class","title":"has_class","text":"<pre><code>has_class(*class_names)\n</code></pre> <p>Check if the Node has all the given class names.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to check.</p> <code>()</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the node has all the given class names, otherwise <code>False</code>.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_class","title":"has_pseudo_class","text":"<pre><code>has_pseudo_class(class_name)\n</code></pre> <p>Check the node has the given pseudo class.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The pseudo class to check for.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the DOM node has the pseudo class, <code>False</code> if not.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_classes","title":"has_pseudo_classes","text":"<pre><code>has_pseudo_classes(class_names)\n</code></pre> <p>Check the node has all the given pseudo classes.</p> <p>Parameters:</p> Name Type Description Default <code>set[str]</code> <p>Set of class names to check for.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if all pseudo class names are present.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_classes(class_names)","title":"<code>class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.mutate_reactive","title":"mutate_reactive","text":"<pre><code>mutate_reactive(reactive)\n</code></pre> <p>Force an update to a mutable reactive.</p> Example <pre><code>self.reactive_name_list.append(\"Jessica\")\nself.mutate_reactive(MyClass.reactive_name_list)\n</code></pre> <p>Textual will automatically detect when a reactive is set to a new value, but it is unable to detect if a value is mutated (such as updating a list, dict, or attribute of an object). If you do wish to use a collection or other mutable object in a reactive, then you can call this method after your reactive is updated. This will ensure that all the reactive superpowers work.</p> <p>Note</p> <p>This method will cause watchers to be called, even if the value hasn't changed.</p> <p>Parameters:</p> Name Type Description Default <code>Reactive[ReactiveType]</code> <p>A reactive property (use the class scope syntax, i.e. <code>MyClass.my_reactive</code>).</p> required"},{"location":"api/dom_node/#textual.dom.DOMNode.mutate_reactive(reactive)","title":"<code>reactive</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.notify_style_update","title":"notify_style_update","text":"<pre><code>notify_style_update()\n</code></pre> <p>Called after styles are updated.</p> <p>Implement this in a subclass if you want to clear any cached data when the CSS is reloaded.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query","title":"query","text":"<pre><code>query(selector: str | None = None) -&gt; DOMQuery[Widget]\n</code></pre><pre><code>query(selector: type[QueryType]) -&gt; DOMQuery[QueryType]\n</code></pre> <pre><code>query(selector=None)\n</code></pre> <p>Query the DOM for children that match a selector or widget type.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType] | None</code> <p>A CSS selector, widget type, or <code>None</code> for all nodes.</p> <code>None</code> <p>Returns:</p> Type Description <code>DOMQuery[Widget] | DOMQuery[QueryType]</code> <p>A query object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_children","title":"query_children","text":"<pre><code>query_children(\n    selector: str | None = None,\n) -&gt; DOMQuery[Widget]\n</code></pre><pre><code>query_children(\n    selector: type[QueryType],\n) -&gt; DOMQuery[QueryType]\n</code></pre> <pre><code>query_children(selector=None)\n</code></pre> <p>Query the DOM for the immediate children that match a selector or widget type.</p> <p>Note that this will not return child widgets more than a single level deep. If you want to a query to potentially match all children in the widget tree, see query.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType] | None</code> <p>A CSS selector, widget type, or <code>None</code> for all nodes.</p> <code>None</code> <p>Returns:</p> Type Description <code>DOMQuery[Widget] | DOMQuery[QueryType]</code> <p>A query object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query_children(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_exactly_one","title":"query_exactly_one","text":"<pre><code>query_exactly_one(selector: str) -&gt; Widget\n</code></pre><pre><code>query_exactly_one(selector: type[QueryType]) -&gt; QueryType\n</code></pre><pre><code>query_exactly_one(\n    selector: str, expect_type: type[QueryType]\n) -&gt; QueryType\n</code></pre> <pre><code>query_exactly_one(selector, expect_type=None)\n</code></pre> <p>Get a widget from this widget's children that matches a selector or widget type.</p> <p>Note</p> <p>This method is similar to query_one. The only difference is that it will raise <code>TooManyMatches</code> if there is more than a single match.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>A selector or widget type.</p> required <code>type[QueryType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If no node matches the query.</p> <code>TooManyMatches</code> <p>If there is more than one matching node in the query (and <code>exactly_one==True</code>).</p> <p>Returns:</p> Type Description <code>QueryType | Widget</code> <p>A widget matching the selector.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query_exactly_one(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_exactly_one(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_one","title":"query_one","text":"<pre><code>query_one(selector: str) -&gt; Widget\n</code></pre><pre><code>query_one(selector: type[QueryType]) -&gt; QueryType\n</code></pre><pre><code>query_one(\n    selector: str, expect_type: type[QueryType]\n) -&gt; QueryType\n</code></pre> <pre><code>query_one(selector, expect_type=None)\n</code></pre> <p>Get a widget from this widget's children that matches a selector or widget type.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>A selector or widget type.</p> required <code>type[QueryType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If no node matches the query.</p> <p>Returns:</p> Type Description <code>QueryType | Widget</code> <p>A widget matching the selector.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query_one(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_one(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.refresh_bindings","title":"refresh_bindings","text":"<pre><code>refresh_bindings()\n</code></pre> <p>Call to prompt widgets such as the Footer to update the display of key bindings.</p> <p>See actions for how to use this method.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.remove_class","title":"remove_class","text":"<pre><code>remove_class(*class_names, update=True)\n</code></pre> <p>Remove class names from this Node.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to remove.</p> <code>()</code> <code>bool</code> <p>Also update styles.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.remove_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.remove_class(update)","title":"<code>update</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.reset_styles","title":"reset_styles","text":"<pre><code>reset_styles()\n</code></pre> <p>Reset styles back to their initial state.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker","title":"run_worker","text":"<pre><code>run_worker(\n    work,\n    name=\"\",\n    group=\"default\",\n    description=\"\",\n    exit_on_error=True,\n    start=True,\n    exclusive=False,\n    thread=False,\n)\n</code></pre> <p>Run work in a worker.</p> <p>A worker runs a function, coroutine, or awaitable, in the background as an async task or as a thread.</p> <p>Parameters:</p> Name Type Description Default <code>WorkType[ResultType]</code> <p>A function, async function, or an awaitable object to run in a worker.</p> required <code>str | None</code> <p>A short string to identify the worker (in logs and debugging).</p> <code>''</code> <code>str</code> <p>A short string to identify a group of workers.</p> <code>'default'</code> <code>str</code> <p>A longer string to store longer information on the worker.</p> <code>''</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Start the worker immediately.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group.</p> <code>False</code> <code>bool</code> <p>Mark the worker as a thread worker.</p> <code>False</code> <p>Returns:</p> Type Description <code>Worker[ResultType]</code> <p>New Worker instance.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(work)","title":"<code>work</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(name)","title":"<code>name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(group)","title":"<code>group</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(description)","title":"<code>description</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(start)","title":"<code>start</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(thread)","title":"<code>thread</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_class","title":"set_class","text":"<pre><code>set_class(add, *class_names, update=True)\n</code></pre> <p>Add or remove class(es) based on a condition.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Add the classes if True, otherwise remove them.</p> required <code>bool</code> <p>Also update styles.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_class(add)","title":"<code>add</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_class(update)","title":"<code>update</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_classes","title":"set_classes","text":"<pre><code>set_classes(classes)\n</code></pre> <p>Replace all classes.</p> <p>Parameters:</p> Name Type Description Default <code>str | Iterable[str]</code> <p>A string containing space separated classes, or an iterable of class names.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_classes(classes)","title":"<code>classes</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_reactive","title":"set_reactive","text":"<pre><code>set_reactive(reactive, value)\n</code></pre> <p>Sets a reactive value without invoking validators or watchers.</p> Example <pre><code>self.set_reactive(App.dark_mode, True)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Reactive[ReactiveType]</code> <p>A reactive property (use the class scope syntax, i.e. <code>MyClass.my_reactive</code>).</p> required <code>ReactiveType</code> <p>New value of reactive.</p> required <p>Raises:</p> Type Description <code>AttributeError</code> <p>If the first argument is not a reactive.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_reactive(reactive)","title":"<code>reactive</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_reactive(value)","title":"<code>value</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_styles","title":"set_styles","text":"<pre><code>set_styles(css=None, **update_styles)\n</code></pre> <p>Set custom styles on this object.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Styles in CSS format.</p> <code>None</code> <code>Any</code> <p>Keyword arguments map style names onto style values.</p> <code>{}</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_styles(css)","title":"<code>css</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_styles(update_styles)","title":"<code>update_styles</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.sort_children","title":"sort_children","text":"<pre><code>sort_children(*, key=None, reverse=False)\n</code></pre> <p>Sort child widgets with an optional key function.</p> <p>If <code>key</code> is not provided then widgets will be sorted in the order they are constructed.</p> Example <pre><code># Sort widgets by name\nscreen.sort_children(key=lambda widget: widget.name or \"\")\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Callable[[Widget], SupportsRichComparison] | None</code> <p>A callable which accepts a widget and returns something that can be sorted, or <code>None</code> to sort without a key function.</p> <code>None</code> <code>bool</code> <p>Sort in descending order.</p> <code>False</code>"},{"location":"api/dom_node/#textual.dom.DOMNode.sort_children(key)","title":"<code>key</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.sort_children(reverse)","title":"<code>reverse</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.toggle_class","title":"toggle_class","text":"<pre><code>toggle_class(*class_names)\n</code></pre> <p>Toggle class names on this Node.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to toggle.</p> <code>()</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.toggle_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children","title":"walk_children","text":"<pre><code>walk_children(\n    filter_type: type[WalkType],\n    *,\n    with_self: bool = False,\n    method: WalkMethod = \"depth\",\n    reverse: bool = False\n) -&gt; list[WalkType]\n</code></pre><pre><code>walk_children(\n    *,\n    with_self: bool = False,\n    method: WalkMethod = \"depth\",\n    reverse: bool = False\n) -&gt; list[DOMNode]\n</code></pre> <pre><code>walk_children(\n    filter_type=None,\n    *,\n    with_self=False,\n    method=\"depth\",\n    reverse=False\n)\n</code></pre> <p>Walk the subtree rooted at this node, and return every descendant encountered in a list.</p> <p>Parameters:</p> Name Type Description Default <code>type[WalkType] | None</code> <p>Filter only this type, or None for no filter.</p> <code>None</code> <code>bool</code> <p>Also yield self in addition to descendants.</p> <code>False</code> <code>WalkMethod</code> <p>One of \"depth\" or \"breadth\".</p> <code>'depth'</code> <code>bool</code> <p>Reverse the order (bottom up).</p> <code>False</code> <p>Returns:</p> Type Description <code>list[DOMNode] | list[WalkType]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(with_self)","title":"<code>with_self</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(method)","title":"<code>method</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(reverse)","title":"<code>reverse</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch","title":"watch","text":"<pre><code>watch(obj, attribute_name, callback, init=True)\n</code></pre> <p>Watches for modifications to reactive attributes on another object.</p> Example <pre><code>def on_dark_change(old_value:bool, new_value:bool) -&gt; None:\n    # Called when app.dark changes.\n    print(\"App.dark went from {old_value} to {new_value}\")\n\nself.watch(self.app, \"dark\", self.on_dark_change, init=False)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>Object containing attribute to watch.</p> required <code>str</code> <p>Attribute to watch.</p> required <code>WatchCallbackType</code> <p>A callback to run when attribute changes.</p> required <code>bool</code> <p>Check watchers on first call.</p> <code>True</code>"},{"location":"api/dom_node/#textual.dom.DOMNode.watch(obj)","title":"<code>obj</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch(attribute_name)","title":"<code>attribute_name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch(callback)","title":"<code>callback</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch(init)","title":"<code>init</code>","text":""},{"location":"api/dom_node/#textual.dom.NoScreen","title":"NoScreen","text":"<p>               Bases: <code>DOMError</code></p> <p>Raised when the node has no associated screen.</p>"},{"location":"api/dom_node/#textual.dom.check_identifiers","title":"check_identifiers","text":"<pre><code>check_identifiers(description, *names)\n</code></pre> <p>Validate identifier and raise an error if it fails.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Description of where identifier is used for error message.</p> required <code>str</code> <p>Identifiers to check.</p> <code>()</code>"},{"location":"api/dom_node/#textual.dom.check_identifiers(description)","title":"<code>description</code>","text":""},{"location":"api/dom_node/#textual.dom.check_identifiers(*names)","title":"<code>*names</code>","text":""},{"location":"api/errors/","title":"textual.errors","text":"<p>General exception classes.</p>"},{"location":"api/errors/#textual.errors.DuplicateKeyHandlers","title":"DuplicateKeyHandlers","text":"<p>               Bases: <code>TextualError</code></p> <p>More than one handler for a single key press.</p> <p>For example, if the handlers <code>key_ctrl_i</code> and <code>key_tab</code> were defined on the same widget, then this error would be raised.</p>"},{"location":"api/errors/#textual.errors.NoWidget","title":"NoWidget","text":"<p>               Bases: <code>TextualError</code></p> <p>Specified widget was not found.</p>"},{"location":"api/errors/#textual.errors.RenderError","title":"RenderError","text":"<p>               Bases: <code>TextualError</code></p> <p>An object could not be rendered.</p>"},{"location":"api/errors/#textual.errors.TextualError","title":"TextualError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for Textual errors.</p>"},{"location":"api/events/","title":"textual.events","text":"<p>Builtin events sent by Textual.</p> <p>Events may be marked as \"Bubbles\" and \"Verbose\". See the events guide for an explanation of bubbling. Verbose events are excluded from the textual console, unless you explicitly request them with the <code>-v</code> switch as follows:</p> <pre><code>textual console -v\n</code></pre>"},{"location":"api/events/#textual.events.AppBlur","title":"AppBlur","text":"<pre><code>AppBlur()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the app loses focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusOut</code>, or when running via textual-web.</p>"},{"location":"api/events/#textual.events.AppFocus","title":"AppFocus","text":"<pre><code>AppFocus()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the app has focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusIn</code>, or when running via textual-web.</p>"},{"location":"api/events/#textual.events.Blur","title":"Blur","text":"<pre><code>Blur()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is blurred (un-focussed).</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Callback","title":"Callback","text":"<pre><code>Callback(callback)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent by Textual to invoke a callback (see call_next and call_later).</p>"},{"location":"api/events/#textual.events.Click","title":"Click","text":"<pre><code>Click(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when a widget is clicked.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Compose","title":"Compose","text":"<pre><code>Compose()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to a widget to request it to compose and mount children.</p> <p>This event is used internally by Textual. You won't typically need to explicitly handle it,</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.CursorPosition","title":"CursorPosition  <code>dataclass</code>","text":"<pre><code>CursorPosition(x, y)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Internal event used to retrieve the terminal's cursor position.</p>"},{"location":"api/events/#textual.events.DeliveryComplete","title":"DeliveryComplete  <code>dataclass</code>","text":"<pre><code>DeliveryComplete(key, path=None, name=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to App when a file has been delivered.</p>"},{"location":"api/events/#textual.events.DeliveryComplete.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key\n</code></pre> <p>The delivery key associated with the delivery.</p> <p>This is the same key that was returned by <code>App.deliver_text</code>/<code>App.deliver_binary</code>.</p>"},{"location":"api/events/#textual.events.DeliveryComplete.name","title":"name  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>name = None\n</code></pre> <p>Optional name returned to the app to identify the download.</p>"},{"location":"api/events/#textual.events.DeliveryComplete.path","title":"path  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>path = None\n</code></pre> <p>The path where the file was saved, or <code>None</code> if the path is not available, for example if the file was delivered via web browser.</p>"},{"location":"api/events/#textual.events.DeliveryFailed","title":"DeliveryFailed  <code>dataclass</code>","text":"<pre><code>DeliveryFailed(key, exception, name=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to App when a file delivery fails.</p>"},{"location":"api/events/#textual.events.DeliveryFailed.exception","title":"exception  <code>instance-attribute</code>","text":"<pre><code>exception\n</code></pre> <p>The exception that was raised during the delivery.</p>"},{"location":"api/events/#textual.events.DeliveryFailed.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key\n</code></pre> <p>The delivery key associated with the delivery.</p>"},{"location":"api/events/#textual.events.DeliveryFailed.name","title":"name  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>name = None\n</code></pre> <p>Optional name returned to the app to identify the download.</p>"},{"location":"api/events/#textual.events.DescendantBlur","title":"DescendantBlur  <code>dataclass</code>","text":"<pre><code>DescendantBlur(widget)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a child widget is blurred.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.DescendantBlur.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was blurred (alias of <code>widget</code>).</p>"},{"location":"api/events/#textual.events.DescendantBlur.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was blurred.</p>"},{"location":"api/events/#textual.events.DescendantFocus","title":"DescendantFocus  <code>dataclass</code>","text":"<pre><code>DescendantFocus(widget)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a child widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.DescendantFocus.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was focused (alias of <code>widget</code>).</p>"},{"location":"api/events/#textual.events.DescendantFocus.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was focused.</p>"},{"location":"api/events/#textual.events.Enter","title":"Enter","text":"<pre><code>Enter(node)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved over a widget.</p> <p>Note that this event bubbles, so a widget may receive this event when the mouse moves over a child widget. Check the <code>node</code> attribute for the widget directly under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Enter.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node directly under the mouse.</p>"},{"location":"api/events/#textual.events.Event","title":"Event","text":"<pre><code>Event()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The base class for all events.</p>"},{"location":"api/events/#textual.events.Focus","title":"Focus","text":"<pre><code>Focus()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Hide","title":"Hide","text":"<pre><code>Hide()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget has been hidden.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Sent when any of the following conditions apply:</p> <ul> <li>The widget is removed from the DOM.</li> <li>The widget is no longer displayed because it has been scrolled or clipped from the terminal or its container.</li> <li>The widget has its <code>display</code> attribute set to <code>False</code>.</li> <li>The widget's <code>display</code> style is set to <code>\"none\"</code>.</li> </ul>"},{"location":"api/events/#textual.events.Idle","title":"Idle","text":"<pre><code>Idle()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when there are no more items in the message queue.</p> <p>This is a pseudo-event in that it is created by the Textual system and doesn't go through the usual message queue.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.InputEvent","title":"InputEvent","text":"<pre><code>InputEvent()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Base class for input events.</p>"},{"location":"api/events/#textual.events.Key","title":"Key","text":"<pre><code>Key(key, character)\n</code></pre> <p>               Bases: <code>InputEvent</code></p> <p>Sent when the user hits a key on the keyboard.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The key that was pressed.</p> required <code>str | None</code> <p>A printable character or <code>None</code> if it is not printable.</p> required"},{"location":"api/events/#textual.events.Key(key)","title":"<code>key</code>","text":""},{"location":"api/events/#textual.events.Key(character)","title":"<code>character</code>","text":""},{"location":"api/events/#textual.events.Key.aliases","title":"aliases  <code>instance-attribute</code>","text":"<pre><code>aliases = _get_key_aliases(key)\n</code></pre> <p>The aliases for the key, including the key itself.</p>"},{"location":"api/events/#textual.events.Key.character","title":"character  <code>instance-attribute</code>","text":"<pre><code>character = (\n    key\n    if len(key) == 1\n    else None if character is None else character\n)\n</code></pre> <p>A printable character or <code>None</code> if it is not printable.</p>"},{"location":"api/events/#textual.events.Key.is_printable","title":"is_printable  <code>property</code>","text":"<pre><code>is_printable\n</code></pre> <p>Check if the key is printable (produces a unicode character).</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the key is printable.</p>"},{"location":"api/events/#textual.events.Key.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key = key\n</code></pre> <p>The key that was pressed.</p>"},{"location":"api/events/#textual.events.Key.name","title":"name  <code>property</code>","text":"<pre><code>name\n</code></pre> <p>Name of a key suitable for use as a Python identifier.</p>"},{"location":"api/events/#textual.events.Key.name_aliases","title":"name_aliases  <code>property</code>","text":"<pre><code>name_aliases\n</code></pre> <p>The corresponding name for every alias in <code>aliases</code> list.</p>"},{"location":"api/events/#textual.events.Leave","title":"Leave","text":"<pre><code>Leave(node)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved away from a widget, or if a widget is programmatically disabled while hovered.</p> <p>Note that this widget bubbles, so a widget may receive Leave events for any child widgets. Check the <code>node</code> parameter for the original widget that was previously under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Leave.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was previously directly under the mouse.</p>"},{"location":"api/events/#textual.events.Load","title":"Load","text":"<pre><code>Load()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the App is running but before the terminal is in application mode.</p> <p>Use this event to run any setup that doesn't require any visuals such as loading configuration and binding keys.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Mount","title":"Mount","text":"<pre><code>Mount()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is mounted and may receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseCapture","title":"MouseCapture","text":"<pre><code>MouseCapture(mouse_position)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the mouse has been captured.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>When a mouse has been captured, all further mouse events will be sent to the capturing widget.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when captured.</p> required"},{"location":"api/events/#textual.events.MouseCapture(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"api/events/#textual.events.MouseCapture.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when captured.</p>"},{"location":"api/events/#textual.events.MouseDown","title":"MouseDown","text":"<pre><code>MouseDown(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is pressed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseEvent","title":"MouseEvent","text":"<pre><code>MouseEvent(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>InputEvent</code></p> <p>Sent in response to a mouse event.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The relative x coordinate.</p> required <code>int</code> <p>The relative y coordinate.</p> required <code>int</code> <p>Change in x since the last message.</p> required <code>int</code> <p>Change in y since the last message.</p> required <code>int</code> <p>Indexed of the pressed button.</p> required <code>bool</code> <p>True if the shift key is pressed.</p> required <code>bool</code> <p>True if the meta key is pressed.</p> required <code>bool</code> <p>True if the ctrl key is pressed.</p> required <code>int | None</code> <p>The absolute x coordinate.</p> <code>None</code> <code>int | None</code> <p>The absolute y coordinate.</p> <code>None</code> <code>Style | None</code> <p>The Rich Style under the mouse cursor.</p> <code>None</code>"},{"location":"api/events/#textual.events.MouseEvent(x)","title":"<code>x</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(y)","title":"<code>y</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(delta_x)","title":"<code>delta_x</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(delta_y)","title":"<code>delta_y</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(button)","title":"<code>button</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(shift)","title":"<code>shift</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(meta)","title":"<code>meta</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(ctrl)","title":"<code>ctrl</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(screen_x)","title":"<code>screen_x</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(screen_y)","title":"<code>screen_y</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(style)","title":"<code>style</code>","text":""},{"location":"api/events/#textual.events.MouseEvent.button","title":"button  <code>instance-attribute</code>","text":"<pre><code>button = button\n</code></pre> <p>Indexed of the pressed button.</p>"},{"location":"api/events/#textual.events.MouseEvent.ctrl","title":"ctrl  <code>instance-attribute</code>","text":"<pre><code>ctrl = ctrl\n</code></pre> <p><code>True</code> if the ctrl key is pressed.</p>"},{"location":"api/events/#textual.events.MouseEvent.delta","title":"delta  <code>property</code>","text":"<pre><code>delta\n</code></pre> <p>Mouse coordinate delta (change since last event).</p>"},{"location":"api/events/#textual.events.MouseEvent.delta_x","title":"delta_x  <code>instance-attribute</code>","text":"<pre><code>delta_x = delta_x\n</code></pre> <p>Change in x since the last message.</p>"},{"location":"api/events/#textual.events.MouseEvent.delta_y","title":"delta_y  <code>instance-attribute</code>","text":"<pre><code>delta_y = delta_y\n</code></pre> <p>Change in y since the last message.</p>"},{"location":"api/events/#textual.events.MouseEvent.meta","title":"meta  <code>instance-attribute</code>","text":"<pre><code>meta = meta\n</code></pre> <p><code>True</code> if the meta key is pressed.</p>"},{"location":"api/events/#textual.events.MouseEvent.offset","title":"offset  <code>property</code>","text":"<pre><code>offset\n</code></pre> <p>The mouse coordinate as an offset.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Mouse coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.screen_offset","title":"screen_offset  <code>property</code>","text":"<pre><code>screen_offset\n</code></pre> <p>Mouse coordinate relative to the screen.</p>"},{"location":"api/events/#textual.events.MouseEvent.screen_x","title":"screen_x  <code>instance-attribute</code>","text":"<pre><code>screen_x = x if screen_x is None else screen_x\n</code></pre> <p>The absolute x coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.screen_y","title":"screen_y  <code>instance-attribute</code>","text":"<pre><code>screen_y = y if screen_y is None else screen_y\n</code></pre> <p>The absolute y coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.shift","title":"shift  <code>instance-attribute</code>","text":"<pre><code>shift = shift\n</code></pre> <p><code>True</code> if the shift key is pressed.</p>"},{"location":"api/events/#textual.events.MouseEvent.style","title":"style  <code>property</code> <code>writable</code>","text":"<pre><code>style\n</code></pre> <p>The (Rich) Style under the cursor.</p>"},{"location":"api/events/#textual.events.MouseEvent.x","title":"x  <code>instance-attribute</code>","text":"<pre><code>x = x\n</code></pre> <p>The relative x coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.y","title":"y  <code>instance-attribute</code>","text":"<pre><code>y = y\n</code></pre> <p>The relative y coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.get_content_offset","title":"get_content_offset","text":"<pre><code>get_content_offset(widget)\n</code></pre> <p>Get offset within a widget's content area, or None if offset is not in content (i.e. padding or border).</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Widget receiving the event.</p> required <p>Returns:</p> Type Description <code>Offset | None</code> <p>An offset where the origin is at the top left of the content area.</p>"},{"location":"api/events/#textual.events.MouseEvent.get_content_offset(widget)","title":"<code>widget</code>","text":""},{"location":"api/events/#textual.events.MouseEvent.get_content_offset_capture","title":"get_content_offset_capture","text":"<pre><code>get_content_offset_capture(widget)\n</code></pre> <p>Get offset from a widget's content area.</p> <p>This method works even if the offset is outside the widget content region.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Widget receiving the event.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>An offset where the origin is at the top left of the content area.</p>"},{"location":"api/events/#textual.events.MouseEvent.get_content_offset_capture(widget)","title":"<code>widget</code>","text":""},{"location":"api/events/#textual.events.MouseMove","title":"MouseMove","text":"<pre><code>MouseMove(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse cursor moves.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseRelease","title":"MouseRelease","text":"<pre><code>MouseRelease(mouse_position)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Mouse has been released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when released.</p> required"},{"location":"api/events/#textual.events.MouseRelease(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"api/events/#textual.events.MouseRelease.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when released.</p>"},{"location":"api/events/#textual.events.MouseScrollDown","title":"MouseScrollDown","text":"<pre><code>MouseScrollDown(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseScrollUp","title":"MouseScrollUp","text":"<pre><code>MouseScrollUp(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled up.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseUp","title":"MouseUp","text":"<pre><code>MouseUp(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Paste","title":"Paste","text":"<pre><code>Paste(text)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Event containing text that was pasted into the Textual application. This event will only appear when running in a terminal emulator that supports bracketed paste mode. Textual will enable bracketed pastes when an app starts, and disable it when the app shuts down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text that has been pasted.</p> required"},{"location":"api/events/#textual.events.Paste(text)","title":"<code>text</code>","text":""},{"location":"api/events/#textual.events.Paste.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was pasted.</p>"},{"location":"api/events/#textual.events.Print","title":"Print","text":"<pre><code>Print(text, stderr=False)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to a widget that is capturing <code>print</code>.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text that was printed.</p> required <code>bool</code> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p> <code>False</code> Note <p>Python's <code>print</code> output can be captured with <code>App.begin_capture_print</code>.</p>"},{"location":"api/events/#textual.events.Print(text)","title":"<code>text</code>","text":""},{"location":"api/events/#textual.events.Print(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/events/#textual.events.Print.stderr","title":"stderr  <code>instance-attribute</code>","text":"<pre><code>stderr = stderr\n</code></pre> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p>"},{"location":"api/events/#textual.events.Print.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was printed.</p>"},{"location":"api/events/#textual.events.Ready","title":"Ready","text":"<pre><code>Ready()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to the <code>App</code> when the DOM is ready and the first frame has been displayed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Resize","title":"Resize","text":"<pre><code>Resize(size, virtual_size, container_size=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the app or widget has been resized.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>The new size of the Widget.</p> required <code>Size</code> <p>The virtual size (scrollable size) of the Widget.</p> required <code>Size | None</code> <p>The size of the Widget's container widget.</p> <code>None</code>"},{"location":"api/events/#textual.events.Resize(size)","title":"<code>size</code>","text":""},{"location":"api/events/#textual.events.Resize(virtual_size)","title":"<code>virtual_size</code>","text":""},{"location":"api/events/#textual.events.Resize(container_size)","title":"<code>container_size</code>","text":""},{"location":"api/events/#textual.events.Resize.container_size","title":"container_size  <code>instance-attribute</code>","text":"<pre><code>container_size = (\n    size if container_size is None else container_size\n)\n</code></pre> <p>The size of the Widget's container widget.</p>"},{"location":"api/events/#textual.events.Resize.size","title":"size  <code>instance-attribute</code>","text":"<pre><code>size = size\n</code></pre> <p>The new size of the Widget.</p>"},{"location":"api/events/#textual.events.Resize.virtual_size","title":"virtual_size  <code>instance-attribute</code>","text":"<pre><code>virtual_size = virtual_size\n</code></pre> <p>The virtual size (scrollable size) of the Widget.</p>"},{"location":"api/events/#textual.events.ScreenResume","title":"ScreenResume","text":"<pre><code>ScreenResume()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to screen that has been made active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.ScreenSuspend","title":"ScreenSuspend","text":"<pre><code>ScreenSuspend()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to screen when it is no longer active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Show","title":"Show","text":"<pre><code>Show()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is first displayed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Timer","title":"Timer","text":"<pre><code>Timer(timer, time, count=0, callback=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent in response to a timer.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Unmount","title":"Unmount","text":"<pre><code>Unmount()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is unmounted and may no longer receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/filter/","title":"textual.filter","text":"<p>Filter classes.</p> <p>Note</p> <p>Filters are used internally, and not recommended for use by Textual app developers.</p> <p>Filters are used internally to process terminal output after it has been rendered. Currently this is used internally to convert the application to monochrome, when the NO_COLOR env var is set.</p> <p>In the future, this system will be used to implement accessibility features.</p>"},{"location":"api/filter/#textual.filter.NO_DIM","title":"NO_DIM  <code>module-attribute</code>","text":"<pre><code>NO_DIM = Style(dim=False)\n</code></pre> <p>A Style to set dim to False.</p>"},{"location":"api/filter/#textual.filter.ANSIToTruecolor","title":"ANSIToTruecolor","text":"<pre><code>ANSIToTruecolor(terminal_theme)\n</code></pre> <p>               Bases: <code>LineFilter</code></p> <p>Convert ANSI colors to their truecolor equivalents.</p> <p>Parameters:</p> Name Type Description Default <code>TerminalTheme</code> <p>A rich terminal theme.</p> required"},{"location":"api/filter/#textual.filter.ANSIToTruecolor(terminal_theme)","title":"<code>terminal_theme</code>","text":""},{"location":"api/filter/#textual.filter.ANSIToTruecolor.apply","title":"apply","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.ANSIToTruecolor.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.ANSIToTruecolor.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.ANSIToTruecolor.truecolor_style","title":"truecolor_style  <code>cached</code>","text":"<pre><code>truecolor_style(style)\n</code></pre> <p>Replace system colors with truecolor equivalent.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>Style to apply truecolor filter to.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>New style.</p>"},{"location":"api/filter/#textual.filter.ANSIToTruecolor.truecolor_style(style)","title":"<code>style</code>","text":""},{"location":"api/filter/#textual.filter.DimFilter","title":"DimFilter","text":"<pre><code>DimFilter(dim_factor=0.5)\n</code></pre> <p>               Bases: <code>LineFilter</code></p> <p>Replace dim attributes with modified colors.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>The factor to dim by; 0 is 100% background (i.e. invisible), 1.0 is no change.</p> <code>0.5</code>"},{"location":"api/filter/#textual.filter.DimFilter(dim_factor)","title":"<code>dim_factor</code>","text":""},{"location":"api/filter/#textual.filter.DimFilter.apply","title":"apply","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.DimFilter.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.DimFilter.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.LineFilter","title":"LineFilter","text":"<p>               Bases: <code>ABC</code></p> <p>Base class for a line filter.</p>"},{"location":"api/filter/#textual.filter.LineFilter.apply","title":"apply  <code>abstractmethod</code>","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.LineFilter.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.LineFilter.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.Monochrome","title":"Monochrome","text":"<p>               Bases: <code>LineFilter</code></p> <p>Convert all colors to monochrome.</p>"},{"location":"api/filter/#textual.filter.Monochrome.apply","title":"apply","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.Monochrome.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.Monochrome.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.dim_color","title":"dim_color  <code>cached</code>","text":"<pre><code>dim_color(background, color, factor)\n</code></pre> <p>Dim a color by blending towards the background</p> <p>Parameters:</p> Name Type Description Default <code>Color</code> <p>background color.</p> required <code>Color</code> <p>Foreground color.</p> required <code>float</code> <p>Blend factor</p> required <p>Returns:</p> Type Description <code>Color</code> <p>New dimmer color.</p>"},{"location":"api/filter/#textual.filter.dim_color(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.dim_color(color)","title":"<code>color</code>","text":""},{"location":"api/filter/#textual.filter.dim_color(factor)","title":"<code>factor</code>","text":""},{"location":"api/filter/#textual.filter.dim_style","title":"dim_style  <code>cached</code>","text":"<pre><code>dim_style(style, background, factor)\n</code></pre> <p>Replace dim attribute with a dim color.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>Style to dim.</p> required <code>float</code> <p>Blend factor.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>New dimmed style.</p>"},{"location":"api/filter/#textual.filter.dim_style(style)","title":"<code>style</code>","text":""},{"location":"api/filter/#textual.filter.dim_style(factor)","title":"<code>factor</code>","text":""},{"location":"api/filter/#textual.filter.monochrome_style","title":"monochrome_style  <code>cached</code>","text":"<pre><code>monochrome_style(style)\n</code></pre> <p>Convert colors in a style to monochrome.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>A Rich Style.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>A new Rich style.</p>"},{"location":"api/filter/#textual.filter.monochrome_style(style)","title":"<code>style</code>","text":""},{"location":"api/fuzzy_matcher/","title":"textual.fuzzy","text":"<p>Fuzzy matcher.</p> <p>This class is used by the command palette to match search terms.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher","title":"Matcher","text":"<pre><code>Matcher(query, *, match_style=None, case_sensitive=False)\n</code></pre> <p>A fuzzy matcher.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A query as typed in by the user.</p> required <code>Style | None</code> <p>The style to use to highlight matched portions of a string.</p> <code>None</code> <code>bool</code> <p>Should matching be case sensitive?</p> <code>False</code>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher(query)","title":"<code>query</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher(match_style)","title":"<code>match_style</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.case_sensitive","title":"case_sensitive  <code>property</code>","text":"<pre><code>case_sensitive\n</code></pre> <p>Is this matcher case sensitive?</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.match_style","title":"match_style  <code>property</code>","text":"<pre><code>match_style\n</code></pre> <p>The style that will be used to highlight hits in the matched text.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.query","title":"query  <code>property</code>","text":"<pre><code>query\n</code></pre> <p>The query string to look for.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.query_pattern","title":"query_pattern  <code>property</code>","text":"<pre><code>query_pattern\n</code></pre> <p>The regular expression pattern built from the query.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.highlight","title":"highlight","text":"<pre><code>highlight(candidate)\n</code></pre> <p>Highlight the candidate with the fuzzy match.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A [rich.text.Text][<code>Text</code>] object with highlighted matches.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.highlight(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.match","title":"match","text":"<pre><code>match(candidate)\n</code></pre> <p>Match the candidate against the query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>float</code> <p>Strength of the match from 0 to 1.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.match(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/geometry/","title":"textual.geometry","text":"<p>Functions and classes to manage terminal geometry (anything involving coordinates or dimensions).</p>"},{"location":"api/geometry/#textual.geometry.NULL_OFFSET","title":"NULL_OFFSET  <code>module-attribute</code>","text":"<pre><code>NULL_OFFSET = Offset(0, 0)\n</code></pre> <p>An offset constant for (0, 0).</p>"},{"location":"api/geometry/#textual.geometry.NULL_REGION","title":"NULL_REGION  <code>module-attribute</code>","text":"<pre><code>NULL_REGION = Region(0, 0, 0, 0)\n</code></pre> <p>A Region constant for a null region (at the origin, with both width and height set to zero).</p>"},{"location":"api/geometry/#textual.geometry.NULL_SIZE","title":"NULL_SIZE  <code>module-attribute</code>","text":"<pre><code>NULL_SIZE = Size(0, 0)\n</code></pre> <p>A Size constant for a null size (with zero area).</p>"},{"location":"api/geometry/#textual.geometry.NULL_SPACING","title":"NULL_SPACING  <code>module-attribute</code>","text":"<pre><code>NULL_SPACING = Spacing(0, 0, 0, 0)\n</code></pre> <p>A Spacing constant for no space.</p>"},{"location":"api/geometry/#textual.geometry.SpacingDimensions","title":"SpacingDimensions  <code>module-attribute</code>","text":"<pre><code>SpacingDimensions = Union[\n    int,\n    Tuple[int],\n    Tuple[int, int],\n    Tuple[int, int, int, int],\n]\n</code></pre> <p>The valid ways in which you can specify spacing.</p>"},{"location":"api/geometry/#textual.geometry.Offset","title":"Offset","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A cell offset defined by x and y coordinates.</p> <p>Offsets are typically relative to the top left of the terminal or other container.</p> <p>Textual prefers the names <code>x</code> and <code>y</code>, but you could consider <code>x</code> to be the column and <code>y</code> to be the row.</p> <p>Offsets support addition, subtraction, multiplication, and negation.</p> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Offset\n&gt;&gt;&gt; offset = Offset(3, 2)\n&gt;&gt;&gt; offset\nOffset(x=3, y=2)\n&gt;&gt;&gt; offset += Offset(10, 0)\n&gt;&gt;&gt; offset\nOffset(x=13, y=2)\n&gt;&gt;&gt; -offset\nOffset(x=-13, y=-2)\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Offset.clamped","title":"clamped  <code>property</code>","text":"<pre><code>clamped\n</code></pre> <p>This offset with <code>x</code> and <code>y</code> restricted to values above zero.</p>"},{"location":"api/geometry/#textual.geometry.Offset.is_origin","title":"is_origin  <code>property</code>","text":"<pre><code>is_origin\n</code></pre> <p>Is the offset at (0, 0)?</p>"},{"location":"api/geometry/#textual.geometry.Offset.x","title":"x  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>x = 0\n</code></pre> <p>Offset in the x-axis (horizontal)</p>"},{"location":"api/geometry/#textual.geometry.Offset.y","title":"y  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>y = 0\n</code></pre> <p>Offset in the y-axis (vertical)</p>"},{"location":"api/geometry/#textual.geometry.Offset.blend","title":"blend","text":"<pre><code>blend(destination, factor)\n</code></pre> <p>Calculate a new offset on a line between this offset and a destination offset.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>Point where factor would be 1.0.</p> required <code>float</code> <p>A value between 0 and 1.0.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>A new point on a line between self and destination.</p>"},{"location":"api/geometry/#textual.geometry.Offset.blend(destination)","title":"<code>destination</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.blend(factor)","title":"<code>factor</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.clamp","title":"clamp","text":"<pre><code>clamp(width, height)\n</code></pre> <p>Clamp the offset to fit within a rectangle of width x height.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Width to clamp.</p> required <code>int</code> <p>Height to clamp.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>A new offset.</p>"},{"location":"api/geometry/#textual.geometry.Offset.clamp(width)","title":"<code>width</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.clamp(height)","title":"<code>height</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.get_distance_to","title":"get_distance_to","text":"<pre><code>get_distance_to(other)\n</code></pre> <p>Get the distance to another offset.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>An offset.</p> required <p>Returns:</p> Type Description <code>float</code> <p>Distance to other offset.</p>"},{"location":"api/geometry/#textual.geometry.Offset.get_distance_to(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Region","title":"Region","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Defines a rectangular region.</p> <p>A Region consists of a coordinate (x and y) and dimensions (width and height).</p> <pre><code>  (x, y)\n    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u25b2\n    \u2502                    \u2502 \u2502\n    \u2502                    \u2502 \u2502\n    \u2502                    \u2502 height\n    \u2502                    \u2502 \u2502\n    \u2502                    \u2502 \u2502\n    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u25bc\n    \u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2500 width \u2500\u2500\u2500\u2500\u2500\u2500\u25b6\n</code></pre> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Region\n&gt;&gt;&gt; region = Region(4, 5, 20, 10)\n&gt;&gt;&gt; region\nRegion(x=4, y=5, width=20, height=10)\n&gt;&gt;&gt; region.area\n200\n&gt;&gt;&gt; region.size\nSize(width=20, height=10)\n&gt;&gt;&gt; region.offset\nOffset(x=4, y=5)\n&gt;&gt;&gt; region.contains(1, 2)\nFalse\n&gt;&gt;&gt; region.contains(10, 8)\nTrue\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Region.area","title":"area  <code>property</code>","text":"<pre><code>area\n</code></pre> <p>The area under the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.bottom","title":"bottom  <code>property</code>","text":"<pre><code>bottom\n</code></pre> <p>Maximum Y value (non inclusive).</p>"},{"location":"api/geometry/#textual.geometry.Region.bottom_left","title":"bottom_left  <code>property</code>","text":"<pre><code>bottom_left\n</code></pre> <p>Bottom left offset of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.bottom_right","title":"bottom_right  <code>property</code>","text":"<pre><code>bottom_right\n</code></pre> <p>Bottom right offset of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.center","title":"center  <code>property</code>","text":"<pre><code>center\n</code></pre> <p>The center of the region.</p> <p>Note, that this does not return an <code>Offset</code>, because the center may not be an integer coordinate.</p> <p>Returns:</p> Type Description <code>tuple[float, float]</code> <p>Tuple of floats.</p>"},{"location":"api/geometry/#textual.geometry.Region.column_range","title":"column_range  <code>property</code>","text":"<pre><code>column_range\n</code></pre> <p>A range object for X coordinates.</p>"},{"location":"api/geometry/#textual.geometry.Region.column_span","title":"column_span  <code>property</code>","text":"<pre><code>column_span\n</code></pre> <p>A pair of integers for the start and end columns (x coordinates) in this region.</p> <p>The end value is exclusive.</p>"},{"location":"api/geometry/#textual.geometry.Region.corners","title":"corners  <code>property</code>","text":"<pre><code>corners\n</code></pre> <p>The top left and bottom right coordinates as a tuple of four integers.</p>"},{"location":"api/geometry/#textual.geometry.Region.height","title":"height  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>height = 0\n</code></pre> <p>The height of the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.line_range","title":"line_range  <code>property</code>","text":"<pre><code>line_range\n</code></pre> <p>A range object for Y coordinates.</p>"},{"location":"api/geometry/#textual.geometry.Region.line_span","title":"line_span  <code>property</code>","text":"<pre><code>line_span\n</code></pre> <p>A pair of integers for the start and end lines (y coordinates) in this region.</p> <p>The end value is exclusive.</p>"},{"location":"api/geometry/#textual.geometry.Region.offset","title":"offset  <code>property</code>","text":"<pre><code>offset\n</code></pre> <p>The top left corner of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.reset_offset","title":"reset_offset  <code>property</code>","text":"<pre><code>reset_offset\n</code></pre> <p>An region of the same size at (0, 0).</p> <p>Returns:</p> Type Description <code>Region</code> <p>A region at the origin.</p>"},{"location":"api/geometry/#textual.geometry.Region.right","title":"right  <code>property</code>","text":"<pre><code>right\n</code></pre> <p>Maximum X value (non inclusive).</p>"},{"location":"api/geometry/#textual.geometry.Region.size","title":"size  <code>property</code>","text":"<pre><code>size\n</code></pre> <p>Get the size of the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.top_right","title":"top_right  <code>property</code>","text":"<pre><code>top_right\n</code></pre> <p>Top right offset of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.width","title":"width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>width = 0\n</code></pre> <p>The width of the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.x","title":"x  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>x = 0\n</code></pre> <p>Offset in the x-axis (horizontal).</p>"},{"location":"api/geometry/#textual.geometry.Region.y","title":"y  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>y = 0\n</code></pre> <p>Offset in the y-axis (vertical).</p>"},{"location":"api/geometry/#textual.geometry.Region.at_offset","title":"at_offset","text":"<pre><code>at_offset(offset)\n</code></pre> <p>Get a new Region with the same size at a given offset.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>An offset.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>New Region with adjusted offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.at_offset(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.clip","title":"clip","text":"<pre><code>clip(width, height)\n</code></pre> <p>Clip this region to fit within width, height.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Width of bounds.</p> required <code>int</code> <p>Height of bounds.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>Clipped region.</p>"},{"location":"api/geometry/#textual.geometry.Region.clip(width)","title":"<code>width</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.clip(height)","title":"<code>height</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains","title":"contains","text":"<pre><code>contains(x, y)\n</code></pre> <p>Check if a point is in the region.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.contains(x)","title":"<code>x</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains(y)","title":"<code>y</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains_point","title":"contains_point","text":"<pre><code>contains_point(point)\n</code></pre> <p>Check if a point is in the region.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>A tuple of x and y coordinates.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.contains_point(point)","title":"<code>point</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains_region","title":"contains_region  <code>cached</code>","text":"<pre><code>contains_region(other)\n</code></pre> <p>Check if a region is entirely contained within this region.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A region.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the other region fits perfectly within this region.</p>"},{"location":"api/geometry/#textual.geometry.Region.contains_region(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.crop_size","title":"crop_size","text":"<pre><code>crop_size(size)\n</code></pre> <p>Get a region with the same offset, with a size no larger than <code>size</code>.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Maximum width and height (WIDTH, HEIGHT).</p> required <p>Returns:</p> Type Description <code>Region</code> <p>New region that could fit within <code>size</code>.</p>"},{"location":"api/geometry/#textual.geometry.Region.crop_size(size)","title":"<code>size</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.expand","title":"expand","text":"<pre><code>expand(size)\n</code></pre> <p>Increase the size of the region by adding a border.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Additional width and height.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region.</p>"},{"location":"api/geometry/#textual.geometry.Region.expand(size)","title":"<code>size</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners","title":"from_corners  <code>classmethod</code>","text":"<pre><code>from_corners(x1, y1, x2, y2)\n</code></pre> <p>Construct a Region form the top left and bottom right corners.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Top left x.</p> required <code>int</code> <p>Top left y.</p> required <code>int</code> <p>Bottom right x.</p> required <code>int</code> <p>Bottom right y.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region.</p>"},{"location":"api/geometry/#textual.geometry.Region.from_corners(x1)","title":"<code>x1</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners(y1)","title":"<code>y1</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners(x2)","title":"<code>x2</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners(y2)","title":"<code>y2</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_offset","title":"from_offset  <code>classmethod</code>","text":"<pre><code>from_offset(offset, size)\n</code></pre> <p>Create a region from offset and size.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Offset (top left point).</p> required <code>tuple[int, int]</code> <p>Dimensions of region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A region instance.</p>"},{"location":"api/geometry/#textual.geometry.Region.from_offset(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_offset(size)","title":"<code>size</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_union","title":"from_union  <code>classmethod</code>","text":"<pre><code>from_union(regions)\n</code></pre> <p>Create a Region from the union of other regions.</p> <p>Parameters:</p> Name Type Description Default <code>Collection[Region]</code> <p>One or more regions.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A Region that encloses all other regions.</p>"},{"location":"api/geometry/#textual.geometry.Region.from_union(regions)","title":"<code>regions</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible","title":"get_scroll_to_visible  <code>classmethod</code>","text":"<pre><code>get_scroll_to_visible(window_region, region, *, top=False)\n</code></pre> <p>Calculate the smallest offset required to translate a window so that it contains another region.</p> <p>This method is used to calculate the required offset to scroll something in to view.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>The window region.</p> required <code>Region</code> <p>The region to move inside the window.</p> required <code>bool</code> <p>Get offset to top of window.</p> <code>False</code> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset required to add to region to move it inside window_region.</p>"},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible(window_region)","title":"<code>window_region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible(top)","title":"<code>top</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_spacing_between","title":"get_spacing_between","text":"<pre><code>get_spacing_between(region)\n</code></pre> <p>Get spacing between two regions.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Another region.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p>Spacing that if subtracted from <code>self</code> produces <code>region</code>.</p>"},{"location":"api/geometry/#textual.geometry.Region.get_spacing_between(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.grow","title":"grow  <code>cached</code>","text":"<pre><code>grow(margin)\n</code></pre> <p>Grow a region by adding spacing.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int, int, int]</code> <p>Grow space by <code>(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code>.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>New region.</p>"},{"location":"api/geometry/#textual.geometry.Region.grow(margin)","title":"<code>margin</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.inflect","title":"inflect","text":"<pre><code>inflect(x_axis=+1, y_axis=+1, margin=None)\n</code></pre> <p>Inflect a region around one or both axis.</p> <p>The <code>x_axis</code> and <code>y_axis</code> parameters define which direction to move the region. A positive value will move the region right or down, a negative value will move the region left or up. A value of <code>0</code> will leave that axis unmodified.</p> <pre><code>\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557    \u2502\n\u2551          \u2551\n\u2551   Self   \u2551    \u2502\n\u2551          \u2551\n\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d    \u2502\n\n\u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u253c \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500\n\n                \u2502    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n                     \u2502          \u2502\n                \u2502    \u2502  Result  \u2502\n                     \u2502          \u2502\n                \u2502    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>+1 to inflect in the positive direction, -1 to inflect in the negative direction.</p> <code>+1</code> <code>int</code> <p>+1 to inflect in the positive direction, -1 to inflect in the negative direction.</p> <code>+1</code> <code>Spacing | None</code> <p>Additional margin.</p> <code>None</code> <p>Returns:</p> Type Description <code>Region</code> <p>A new region.</p>"},{"location":"api/geometry/#textual.geometry.Region.inflect(x_axis)","title":"<code>x_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.inflect(y_axis)","title":"<code>y_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.inflect(margin)","title":"<code>margin</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.intersection","title":"intersection  <code>cached</code>","text":"<pre><code>intersection(region)\n</code></pre> <p>Get the overlapping portion of the two regions.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A region that overlaps this region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region that covers when the two regions overlap.</p>"},{"location":"api/geometry/#textual.geometry.Region.intersection(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.overlaps","title":"overlaps  <code>cached</code>","text":"<pre><code>overlaps(other)\n</code></pre> <p>Check if another region overlaps this region.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A Region.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if other region shares any cells with this region.</p>"},{"location":"api/geometry/#textual.geometry.Region.overlaps(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.shrink","title":"shrink  <code>cached</code>","text":"<pre><code>shrink(margin)\n</code></pre> <p>Shrink a region by subtracting spacing.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int, int, int]</code> <p>Shrink space by <code>(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code>.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>The new, smaller region.</p>"},{"location":"api/geometry/#textual.geometry.Region.shrink(margin)","title":"<code>margin</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split","title":"split  <code>cached</code>","text":"<pre><code>split(cut_x, cut_y)\n</code></pre> <p>Split a region in to 4 from given x and y offsets (cuts).</p> <pre><code>           cut_x \u2193\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n        \u2502        \u2502 \u2502   \u2502\n        \u2502    0   \u2502 \u2502 1 \u2502\n        \u2502        \u2502 \u2502   \u2502\ncut_y \u2192 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n        \u2502    2   \u2502 \u2502 3 \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Offset from self.x where the cut should be made. If negative, the cut is taken from the right edge.</p> required <code>int</code> <p>Offset from self.y where the cut should be made. If negative, the cut is taken from the lower edge.</p> required <p>Returns:</p> Type Description <code>tuple[Region, Region, Region, Region]</code> <p>Four new regions which add up to the original (self).</p>"},{"location":"api/geometry/#textual.geometry.Region.split(cut_x)","title":"<code>cut_x</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split(cut_y)","title":"<code>cut_y</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split_horizontal","title":"split_horizontal  <code>cached</code>","text":"<pre><code>split_horizontal(cut)\n</code></pre> <p>Split a region in to two, from a given y offset.</p> <pre><code>            \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n            \u2502    0    \u2502\n            \u2502         \u2502\n    cut \u2192   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n            \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n            \u2502    1    \u2502\n            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>An offset from self.y where the cut should be made. May be negative, for the offset to start from the lower edge.</p> required <p>Returns:</p> Type Description <code>tuple[Region, Region]</code> <p>Two regions, which add up to the original (self).</p>"},{"location":"api/geometry/#textual.geometry.Region.split_horizontal(cut)","title":"<code>cut</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split_vertical","title":"split_vertical  <code>cached</code>","text":"<pre><code>split_vertical(cut)\n</code></pre> <p>Split a region in to two, from a given x offset.</p> <pre><code>         cut \u2193\n    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2510\n    \u2502    0   \u2502\u2502 1 \u2502\n    \u2502        \u2502\u2502   \u2502\n    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>An offset from self.x where the cut should be made. If cut is negative, it is taken from the right edge.</p> required <p>Returns:</p> Type Description <code>tuple[Region, Region]</code> <p>Two regions, which add up to the original (self).</p>"},{"location":"api/geometry/#textual.geometry.Region.split_vertical(cut)","title":"<code>cut</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate","title":"translate  <code>cached</code>","text":"<pre><code>translate(offset)\n</code></pre> <p>Move the offset of the Region.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Offset to add to region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region shifted by (x, y).</p>"},{"location":"api/geometry/#textual.geometry.Region.translate(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate_inside","title":"translate_inside","text":"<pre><code>translate_inside(container, x_axis=True, y_axis=True)\n</code></pre> <p>Translate this region, so it fits within a container.</p> <p>This will ensure that there is as little overlap as possible. The top left of the returned region is guaranteed to be within the container.</p> <pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510         \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502    container     \u2502         \u2502    container     \u2502\n\u2502                  \u2502         \u2502    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                  \u2502   \u2500\u2500\u25b6   \u2502    \u2502    return   \u2502\n\u2502       \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2510      \u2502    \u2502             \u2502\n\u2502       \u2502    self     \u2502      \u2502    \u2502             \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524             \u2502      \u2514\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n        \u2502             \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A container region.</p> required <code>bool</code> <p>Allow translation of X axis.</p> <code>True</code> <code>bool</code> <p>Allow translation of Y axis.</p> <code>True</code> <p>Returns:</p> Type Description <code>Region</code> <p>A new region with same dimensions that fits with inside container.</p>"},{"location":"api/geometry/#textual.geometry.Region.translate_inside(container)","title":"<code>container</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate_inside(x_axis)","title":"<code>x_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate_inside(y_axis)","title":"<code>y_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.union","title":"union  <code>cached</code>","text":"<pre><code>union(region)\n</code></pre> <p>Get the smallest region that contains both regions.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Another region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>An optimally sized region to cover both regions.</p>"},{"location":"api/geometry/#textual.geometry.Region.union(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Size","title":"Size","text":"<p>               Bases: <code>NamedTuple</code></p> <p>The dimensions (width and height) of a rectangular region.</p> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Size\n&gt;&gt;&gt; size = Size(2, 3)\n&gt;&gt;&gt; size\nSize(width=2, height=3)\n&gt;&gt;&gt; size.area\n6\n&gt;&gt;&gt; size + Size(10, 20)\nSize(width=12, height=23)\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Size.area","title":"area  <code>property</code>","text":"<pre><code>area\n</code></pre> <p>The area occupied by a region of this size.</p>"},{"location":"api/geometry/#textual.geometry.Size.height","title":"height  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>height = 0\n</code></pre> <p>The height in cells.</p>"},{"location":"api/geometry/#textual.geometry.Size.line_range","title":"line_range  <code>property</code>","text":"<pre><code>line_range\n</code></pre> <p>A range object that covers values between 0 and <code>height</code>.</p>"},{"location":"api/geometry/#textual.geometry.Size.region","title":"region  <code>property</code>","text":"<pre><code>region\n</code></pre> <p>A region of the same size, at the origin.</p>"},{"location":"api/geometry/#textual.geometry.Size.width","title":"width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>width = 0\n</code></pre> <p>The width in cells.</p>"},{"location":"api/geometry/#textual.geometry.Size.clamp_offset","title":"clamp_offset","text":"<pre><code>clamp_offset(offset)\n</code></pre> <p>Clamp an offset to fit within the width x height.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>An offset.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>A new offset that will fit inside the dimensions defined in the Size.</p>"},{"location":"api/geometry/#textual.geometry.Size.clamp_offset(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.contains","title":"contains","text":"<pre><code>contains(x, y)\n</code></pre> <p>Check if a point is in area defined by the size.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Size.contains(x)","title":"<code>x</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.contains(y)","title":"<code>y</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.contains_point","title":"contains_point","text":"<pre><code>contains_point(point)\n</code></pre> <p>Check if a point is in the area defined by the size.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>A tuple of x and y coordinates.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Size.contains_point(point)","title":"<code>point</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.with_height","title":"with_height","text":"<pre><code>with_height(height)\n</code></pre> <p>Get a new Size with just the height changed.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New height.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>New Size instance.</p>"},{"location":"api/geometry/#textual.geometry.Size.with_height(height)","title":"<code>height</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.with_width","title":"with_width","text":"<pre><code>with_width(width)\n</code></pre> <p>Get a new Size with just the width changed.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New width.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>New Size instance.</p>"},{"location":"api/geometry/#textual.geometry.Size.with_width(width)","title":"<code>width</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing","title":"Spacing","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Stores spacing around a widget, such as padding and border.</p> <p>Spacing is defined by four integers for the space at the top, right, bottom, and left of a region.</p> <pre><code>\u250c \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500\u25b2\u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2510\n               \u2502 top\n\u2502        \u250f\u2501\u2501\u2501\u2501\u2501\u25bc\u2501\u2501\u2501\u2501\u2501\u2501\u2513         \u2502\n \u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\u2503            \u2503\u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\n\u2502  left  \u2503            \u2503 right   \u2502\n         \u2503            \u2503\n\u2502        \u2517\u2501\u2501\u2501\u2501\u2501\u25b2\u2501\u2501\u2501\u2501\u2501\u2501\u251b         \u2502\n               \u2502 bottom\n\u2514 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500\u25bc\u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2518\n</code></pre> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Region, Spacing\n&gt;&gt;&gt; region = Region(2, 3, 20, 10)\n&gt;&gt;&gt; spacing = Spacing(1, 2, 3, 4)\n&gt;&gt;&gt; region.grow(spacing)\nRegion(x=-2, y=2, width=26, height=14)\n&gt;&gt;&gt; region.shrink(spacing)\nRegion(x=6, y=4, width=14, height=6)\n&gt;&gt;&gt; spacing.css\n'1 2 3 4'\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Spacing.bottom","title":"bottom  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>bottom = 0\n</code></pre> <p>Space from the bottom of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.bottom_right","title":"bottom_right  <code>property</code>","text":"<pre><code>bottom_right\n</code></pre> <p>A pair of integers for the right, and bottom space.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>A string containing the spacing in CSS format.</p> <p>For example: \"1\" or \"2 4\" or \"4 2 8 2\".</p>"},{"location":"api/geometry/#textual.geometry.Spacing.height","title":"height  <code>property</code>","text":"<pre><code>height\n</code></pre> <p>Total space in the y axis.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.left","title":"left  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>left = 0\n</code></pre> <p>Space from the left of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.right","title":"right  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>right = 0\n</code></pre> <p>Space from the right of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.top","title":"top  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>top = 0\n</code></pre> <p>Space from the top of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.top_left","title":"top_left  <code>property</code>","text":"<pre><code>top_left\n</code></pre> <p>A pair of integers for the left, and top space.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.totals","title":"totals  <code>property</code>","text":"<pre><code>totals\n</code></pre> <p>A pair of integers for the total horizontal and vertical space.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.width","title":"width  <code>property</code>","text":"<pre><code>width\n</code></pre> <p>Total space in the x axis.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.all","title":"all  <code>classmethod</code>","text":"<pre><code>all(amount)\n</code></pre> <p>Construct a Spacing with a given amount of spacing on all edges.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The magnitude of spacing to apply to all edges.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p><code>Spacing(amount, amount, amount, amount)</code></p>"},{"location":"api/geometry/#textual.geometry.Spacing.all(amount)","title":"<code>amount</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.grow_maximum","title":"grow_maximum","text":"<pre><code>grow_maximum(other)\n</code></pre> <p>Grow spacing with a maximum.</p> <p>Parameters:</p> Name Type Description Default <code>Spacing</code> <p>Spacing object.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p>New spacing where the values are maximum of the two values.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.grow_maximum(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.horizontal","title":"horizontal  <code>classmethod</code>","text":"<pre><code>horizontal(amount)\n</code></pre> <p>Construct a Spacing with a given amount of spacing on horizontal edges, and no vertical spacing.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The magnitude of spacing to apply to horizontal edges.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p><code>Spacing(0, amount, 0, amount)</code></p>"},{"location":"api/geometry/#textual.geometry.Spacing.horizontal(amount)","title":"<code>amount</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.unpack","title":"unpack  <code>classmethod</code>","text":"<pre><code>unpack(pad)\n</code></pre> <p>Unpack padding specified in CSS style.</p> <p>Parameters:</p> Name Type Description Default <code>SpacingDimensions</code> <p>An integer, or tuple of 1, 2, or 4 integers.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>If <code>pad</code> is an invalid value.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>New Spacing object.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.unpack(pad)","title":"<code>pad</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.vertical","title":"vertical  <code>classmethod</code>","text":"<pre><code>vertical(amount)\n</code></pre> <p>Construct a Spacing with a given amount of spacing on vertical edges, and no horizontal spacing.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The magnitude of spacing to apply to vertical edges.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p><code>Spacing(amount, 0, amount, 0)</code></p>"},{"location":"api/geometry/#textual.geometry.Spacing.vertical(amount)","title":"<code>amount</code>","text":""},{"location":"api/geometry/#textual.geometry.clamp","title":"clamp","text":"<pre><code>clamp(value, minimum, maximum)\n</code></pre> <p>Restrict a value to a given range.</p> <p>If <code>value</code> is less than the minimum, return the minimum. If <code>value</code> is greater than the maximum, return the maximum. Otherwise, return <code>value</code>.</p> <p>The <code>minimum</code> and <code>maximum</code> arguments values may be given in reverse order.</p> <p>Parameters:</p> Name Type Description Default <code>T</code> <p>A value.</p> required <code>T</code> <p>Minimum value.</p> required <code>T</code> <p>Maximum value.</p> required <p>Returns:</p> Type Description <code>T</code> <p>New value that is not less than the minimum or greater than the maximum.</p>"},{"location":"api/geometry/#textual.geometry.clamp(value)","title":"<code>value</code>","text":""},{"location":"api/geometry/#textual.geometry.clamp(minimum)","title":"<code>minimum</code>","text":""},{"location":"api/geometry/#textual.geometry.clamp(maximum)","title":"<code>maximum</code>","text":""},{"location":"api/lazy/","title":"textual.lazy","text":"<p>Tools for lazy loading widgets.</p>"},{"location":"api/lazy/#textual.lazy.Lazy","title":"Lazy","text":"<pre><code>Lazy(widget)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Wraps a widget so that it is mounted lazily.</p> <p>Lazy widgets are mounted after the first refresh. This can be used to display some parts of the UI very quickly, followed by the lazy widgets. Technically, this won't make anything faster, but it reduces the time the user sees a blank screen and will make apps feel more responsive.</p> <p>Making a widget lazy is beneficial for widgets which start out invisible, such as tab panes.</p> <p>Note that since lazy widgets aren't mounted immediately (by definition), they will not appear in queries for a brief interval until they are mounted. Your code should take this in to account.</p> Example <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Footer()\n    with ColorTabs(\"Theme Colors\", \"Named Colors\"):\n        yield Content(ThemeColorButtons(), ThemeColorsView(), id=\"theme\")\n        yield Lazy(NamedColorsView())\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget that should be mounted after a refresh.</p> required"},{"location":"api/lazy/#textual.lazy.Lazy(widget)","title":"<code>widget</code>","text":""},{"location":"api/logger/","title":"textual","text":"<p>The root Textual module.</p> <p>Exposes some commonly used symbols.</p>"},{"location":"api/logger/#textual.log","title":"log  <code>module-attribute</code>","text":"<pre><code>log = Logger(None)\n</code></pre> <p>Global logger that logs to the currently active app.</p> Example <pre><code>from textual import log\nlog(locals())\n</code></pre>"},{"location":"api/logger/#textual.Logger","title":"Logger","text":"<pre><code>Logger(log_callable, group=INFO, verbosity=NORMAL)\n</code></pre> <p>A logger class that logs to the Textual console.</p>"},{"location":"api/logger/#textual.Logger.debug","title":"debug  <code>property</code>","text":"<pre><code>debug\n</code></pre> <p>Logs debug messages.</p>"},{"location":"api/logger/#textual.Logger.error","title":"error  <code>property</code>","text":"<pre><code>error\n</code></pre> <p>Logs errors.</p>"},{"location":"api/logger/#textual.Logger.event","title":"event  <code>property</code>","text":"<pre><code>event\n</code></pre> <p>Logs events.</p>"},{"location":"api/logger/#textual.Logger.info","title":"info  <code>property</code>","text":"<pre><code>info\n</code></pre> <p>Logs information.</p>"},{"location":"api/logger/#textual.Logger.logging","title":"logging  <code>property</code>","text":"<pre><code>logging\n</code></pre> <p>Logs from stdlib logging module.</p>"},{"location":"api/logger/#textual.Logger.system","title":"system  <code>property</code>","text":"<pre><code>system\n</code></pre> <p>Logs system information.</p>"},{"location":"api/logger/#textual.Logger.verbose","title":"verbose  <code>property</code>","text":"<pre><code>verbose\n</code></pre> <p>A verbose logger.</p>"},{"location":"api/logger/#textual.Logger.warning","title":"warning  <code>property</code>","text":"<pre><code>warning\n</code></pre> <p>Logs warnings.</p>"},{"location":"api/logger/#textual.Logger.worker","title":"worker  <code>property</code>","text":"<pre><code>worker\n</code></pre> <p>Logs worker information.</p>"},{"location":"api/logger/#textual.Logger.verbosity","title":"verbosity","text":"<pre><code>verbosity(verbose)\n</code></pre> <p>Get a new logger with selective verbosity.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True to use HIGH verbosity, otherwise NORMAL.</p> required <p>Returns:</p> Type Description <code>Logger</code> <p>New logger.</p>"},{"location":"api/logger/#textual.Logger.verbosity(verbose)","title":"<code>verbose</code>","text":""},{"location":"api/logger/#textual.LoggerError","title":"LoggerError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the logger failed.</p>"},{"location":"api/logger/#textual.on","title":"on","text":"<pre><code>on(message_type, selector=None, **kwargs)\n</code></pre> <p>Decorator to declare that the method is a message handler.</p> <p>The decorator accepts an optional CSS selector that will be matched against a widget exposed by a <code>control</code> property on the message.</p> Example <pre><code># Handle the press of buttons with ID \"#quit\".\n@on(Button.Pressed, \"#quit\")\ndef quit_button(self) -&gt; None:\n    self.app.quit()\n</code></pre> <p>Keyword arguments can be used to match additional selectors for attributes listed in <code>ALLOW_SELECTOR_MATCH</code>.</p> Example <pre><code># Handle the activation of the tab \"#home\" within the `TabbedContent` \"#tabs\".\n@on(TabbedContent.TabActivated, \"#tabs\", pane=\"#home\")\ndef switch_to_home(self) -&gt; None:\n    self.log(\"Switching back to the home tab.\")\n    ...\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>type[Message]</code> <p>The message type (i.e. the class).</p> required <code>str | None</code> <p>An optional selector. If supplied, the handler will only be called if <code>selector</code> matches the widget from the <code>control</code> attribute of the message.</p> <code>None</code> <code>str</code> <p>Additional selectors for other attributes of the message.</p> <code>{}</code>"},{"location":"api/logger/#textual.on(message_type)","title":"<code>message_type</code>","text":""},{"location":"api/logger/#textual.on(selector)","title":"<code>selector</code>","text":""},{"location":"api/logger/#textual.on(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/logger/#textual.work","title":"work","text":"<pre><code>work(\n    method: Callable[\n        FactoryParamSpec, Coroutine[None, None, ReturnType]\n    ],\n    *,\n    name: str = \"\",\n    group: str = \"default\",\n    exit_on_error: bool = True,\n    exclusive: bool = False,\n    description: str | None = None,\n    thread: bool = False\n) -&gt; Callable[FactoryParamSpec, \"Worker[ReturnType]\"]\n</code></pre><pre><code>work(\n    method: Callable[FactoryParamSpec, ReturnType],\n    *,\n    name: str = \"\",\n    group: str = \"default\",\n    exit_on_error: bool = True,\n    exclusive: bool = False,\n    description: str | None = None,\n    thread: bool = False\n) -&gt; Callable[FactoryParamSpec, \"Worker[ReturnType]\"]\n</code></pre><pre><code>work(\n    *,\n    name: str = \"\",\n    group: str = \"default\",\n    exit_on_error: bool = True,\n    exclusive: bool = False,\n    description: str | None = None,\n    thread: bool = False\n) -&gt; Decorator[..., ReturnType]\n</code></pre> <pre><code>work(\n    method=None,\n    *,\n    name=\"\",\n    group=\"default\",\n    exit_on_error=True,\n    exclusive=False,\n    description=None,\n    thread=False\n)\n</code></pre> <p>A decorator used to create workers.</p> <p>Parameters:</p> Name Type Description Default <code>Callable[FactoryParamSpec, ReturnType] | Callable[FactoryParamSpec, Coroutine[None, None, ReturnType]] | None</code> <p>A function or coroutine.</p> <code>None</code> <code>str</code> <p>A short string to identify the worker (in logs and debugging).</p> <code>''</code> <code>str</code> <p>A short string to identify a group of workers.</p> <code>'default'</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group.</p> <code>False</code> <code>str | None</code> <p>Readable description of the worker for debugging purposes. By default, it uses a string representation of the decorated method and its arguments.</p> <code>None</code> <code>bool</code> <p>Mark the method as a thread worker.</p> <code>False</code>"},{"location":"api/logger/#textual.work(method)","title":"<code>method</code>","text":""},{"location":"api/logger/#textual.work(name)","title":"<code>name</code>","text":""},{"location":"api/logger/#textual.work(group)","title":"<code>group</code>","text":""},{"location":"api/logger/#textual.work(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/logger/#textual.work(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/logger/#textual.work(description)","title":"<code>description</code>","text":""},{"location":"api/logger/#textual.work(thread)","title":"<code>thread</code>","text":""},{"location":"api/logging/","title":"textual.logging","text":"<p>A Textual Logging handler.</p> <p>If there is an active Textual app, then log messages will go via the app (and logged via textual console).</p> <p>If there is no active app, then log messages will go to stderr or stdout, depending on configuration.</p>"},{"location":"api/logging/#textual.logging.TextualHandler","title":"TextualHandler","text":"<pre><code>TextualHandler(stderr=True, stdout=False)\n</code></pre> <p>               Bases: <code>Handler</code></p> <p>A Logging handler for Textual apps.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Log to stderr when there is no active app.</p> <code>True</code> <code>bool</code> <p>Log to stdout when there is no active app.</p> <code>False</code>"},{"location":"api/logging/#textual.logging.TextualHandler(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/logging/#textual.logging.TextualHandler(stdout)","title":"<code>stdout</code>","text":""},{"location":"api/logging/#textual.logging.TextualHandler.emit","title":"emit","text":"<pre><code>emit(record)\n</code></pre> <p>Invoked by logging.</p>"},{"location":"api/map_geometry/","title":"textual.map_geometry","text":"<p>A data structure returned by screen.find_widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry","title":"MapGeometry","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Defines the absolute location of a Widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.clip","title":"clip  <code>instance-attribute</code>","text":"<pre><code>clip\n</code></pre> <p>A region to clip the widget by (if a Widget is within a container).</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.container_size","title":"container_size  <code>instance-attribute</code>","text":"<pre><code>container_size\n</code></pre> <p>The container size (area not occupied by scrollbars).</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.dock_gutter","title":"dock_gutter  <code>instance-attribute</code>","text":"<pre><code>dock_gutter\n</code></pre> <p>Space from the container reserved by docked widgets.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.order","title":"order  <code>instance-attribute</code>","text":"<pre><code>order\n</code></pre> <p>Tuple of tuples defining the painting order of the widget.</p> <p>Each successive triple represents painting order information with regards to ancestors in the DOM hierarchy and the last triple provides painting order information for this specific widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.region","title":"region  <code>instance-attribute</code>","text":"<pre><code>region\n</code></pre> <p>The (screen) region occupied by the widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.virtual_region","title":"virtual_region  <code>instance-attribute</code>","text":"<pre><code>virtual_region\n</code></pre> <p>The region relative to the container (but not necessarily visible).</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.virtual_size","title":"virtual_size  <code>instance-attribute</code>","text":"<pre><code>virtual_size\n</code></pre> <p>The virtual size (scrollable area) of a widget if it is a container.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.visible_region","title":"visible_region  <code>property</code>","text":"<pre><code>visible_region\n</code></pre> <p>The Widget region after clipping.</p>"},{"location":"api/message/","title":"textual.message","text":"<p>The base class for all messages (including events).</p>"},{"location":"api/message/#textual.message.Message","title":"Message","text":"<pre><code>Message()\n</code></pre> <p>Base class for a message.</p>"},{"location":"api/message/#textual.message.Message.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = set()\n</code></pre> <p>Additional attributes that can be used with the <code>on</code> decorator.</p> <p>These attributes must be widgets.</p>"},{"location":"api/message/#textual.message.Message.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget associated with this message, or None by default.</p>"},{"location":"api/message/#textual.message.Message.handler_name","title":"handler_name  <code>class-attribute</code>","text":"<pre><code>handler_name\n</code></pre> <p>Name of the default message handler.</p>"},{"location":"api/message/#textual.message.Message.is_forwarded","title":"is_forwarded  <code>property</code>","text":"<pre><code>is_forwarded\n</code></pre> <p>Has the message been forwarded?</p>"},{"location":"api/message/#textual.message.Message.prevent_default","title":"prevent_default","text":"<pre><code>prevent_default(prevent=True)\n</code></pre> <p>Suppress the default action(s). This will prevent handlers in any base classes from being called.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True if the default action should be suppressed, or False if the default actions should be performed.</p> <code>True</code>"},{"location":"api/message/#textual.message.Message.prevent_default(prevent)","title":"<code>prevent</code>","text":""},{"location":"api/message/#textual.message.Message.set_sender","title":"set_sender","text":"<pre><code>set_sender(sender)\n</code></pre> <p>Set the sender of the message.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>The sender.</p> required Note <p>When creating a message the sender is automatically set. Normally there will be no need for this method to be called. This method will be used when strict control is required over the sender of a message.</p> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/message/#textual.message.Message.set_sender(sender)","title":"<code>sender</code>","text":""},{"location":"api/message/#textual.message.Message.stop","title":"stop","text":"<pre><code>stop(stop=True)\n</code></pre> <p>Stop propagation of the message to parent.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>The stop flag.</p> <code>True</code>"},{"location":"api/message/#textual.message.Message.stop(stop)","title":"<code>stop</code>","text":""},{"location":"api/message_pump/","title":"textual.message_pump","text":"<p>A <code>MessagePump</code> is a base class for any object which processes messages, which includes Widget, Screen, and App.</p> <p>Tip</p> <p>Most of the method here are useful in general app development.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump","title":"MessagePump","text":"<pre><code>MessagePump(parent=None)\n</code></pre> <p>Base class which supplies a message pump.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.app","title":"app  <code>property</code>","text":"<pre><code>app\n</code></pre> <p>Get the current app.</p> <p>Returns:</p> Type Description <code>'App[object]'</code> <p>The current app.</p> <p>Raises:</p> Type Description <code>NoActiveAppError</code> <p>if no active app could be found for the current asyncio context</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.has_parent","title":"has_parent  <code>property</code>","text":"<pre><code>has_parent\n</code></pre> <p>Does this object have a parent?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_attached","title":"is_attached  <code>property</code>","text":"<pre><code>is_attached\n</code></pre> <p>Is this node linked to the app through the DOM?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_dom_root","title":"is_dom_root  <code>property</code>","text":"<pre><code>is_dom_root\n</code></pre> <p>Is this a root node (i.e. the App)?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_parent_active","title":"is_parent_active  <code>property</code>","text":"<pre><code>is_parent_active\n</code></pre> <p>Is the parent active?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_running","title":"is_running  <code>property</code>","text":"<pre><code>is_running\n</code></pre> <p>Is the message pump running (potentially processing messages)?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.log","title":"log  <code>property</code>","text":"<pre><code>log\n</code></pre> <p>Get a logger for this object.</p> <p>Returns:</p> Type Description <code>Logger</code> <p>A logger.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.message_queue_size","title":"message_queue_size  <code>property</code>","text":"<pre><code>message_queue_size\n</code></pre> <p>The current size of the message queue.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.message_signal","title":"message_signal  <code>instance-attribute</code>","text":"<pre><code>message_signal = Signal(self, 'messages')\n</code></pre> <p>Subscribe to this signal to be notified of all messages sent to this widget.</p> <p>This is a fairly low-level mechanism, and shouldn't replace regular message handling.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_after_refresh","title":"call_after_refresh","text":"<pre><code>call_after_refresh(callback, *args, **kwargs)\n</code></pre> <p>Schedule a callback to run after all messages are processed and the screen has been refreshed. Positional and keyword arguments are passed to the callable.</p> <p>Parameters:</p> Name Type Description Default <code>Callback</code> <p>A callable.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the callback was scheduled, or <code>False</code> if the callback could not be scheduled (may occur if the message pump was closed or closing).</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_after_refresh(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later","title":"call_later","text":"<pre><code>call_later(callback, *args, **kwargs)\n</code></pre> <p>Schedule a callback to run after all messages are processed in this object. Positional and keywords arguments are passed to the callable.</p> <p>Parameters:</p> Name Type Description Default <code>Callback</code> <p>Callable to call next.</p> required <code>Any</code> <p>Positional arguments to pass to the callable.</p> <code>()</code> <code>Any</code> <p>Keyword arguments to pass to the callable.</p> <code>{}</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the callback was scheduled, or <code>False</code> if the callback could not be scheduled (may occur if the message pump was closed or closing).</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later(*args)","title":"<code>*args</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next","title":"call_next","text":"<pre><code>call_next(callback, *args, **kwargs)\n</code></pre> <p>Schedule a callback to run immediately after processing the current message.</p> <p>Parameters:</p> Name Type Description Default <code>Callback</code> <p>Callable to run after current event.</p> required <code>Any</code> <p>Positional arguments to pass to the callable.</p> <code>()</code> <code>Any</code> <p>Keyword arguments to pass to the callable.</p> <code>{}</code>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next(*args)","title":"<code>*args</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.check_idle","title":"check_idle","text":"<pre><code>check_idle()\n</code></pre> <p>Prompt the message pump to call idle if the queue is empty.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.check_message_enabled","title":"check_message_enabled","text":"<pre><code>check_message_enabled(message)\n</code></pre> <p>Check if a given message is enabled (allowed to be sent).</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>A message object.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the message will be sent, or <code>False</code> if it is disabled.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.check_message_enabled(message)","title":"<code>message</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.disable_messages","title":"disable_messages","text":"<pre><code>disable_messages(*messages)\n</code></pre> <p>Disable message types from being processed.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.enable_messages","title":"enable_messages","text":"<pre><code>enable_messages(*messages)\n</code></pre> <p>Enable processing of messages types.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.on_event","title":"on_event  <code>async</code>","text":"<pre><code>on_event(event)\n</code></pre> <p>Called to process an event.</p> <p>Parameters:</p> Name Type Description Default <code>Event</code> <p>An Event object.</p> required"},{"location":"api/message_pump/#textual.message_pump.MessagePump.on_event(event)","title":"<code>event</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.post_message","title":"post_message","text":"<pre><code>post_message(message)\n</code></pre> <p>Posts a message on to this widget's queue.</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>A message (including Event).</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the messages was processed, <code>False</code> if it wasn't.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.post_message(message)","title":"<code>message</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.prevent","title":"prevent","text":"<pre><code>prevent(*message_types)\n</code></pre> <p>A context manager to temporarily prevent the given message types from being posted.</p> Example <pre><code>input = self.query_one(Input)\nwith self.prevent(Input.Changed):\n    input.value = \"foo\"\n</code></pre>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval","title":"set_interval","text":"<pre><code>set_interval(\n    interval,\n    callback=None,\n    *,\n    name=None,\n    repeat=0,\n    pause=False\n)\n</code></pre> <p>Call a function at periodic intervals.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Time (in seconds) between calls.</p> required <code>TimerCallback | None</code> <p>Function to call.</p> <code>None</code> <code>str | None</code> <p>Name of the timer object.</p> <code>None</code> <code>int</code> <p>Number of times to repeat the call or 0 for continuous.</p> <code>0</code> <code>bool</code> <p>Start the timer paused.</p> <code>False</code> <p>Returns:</p> Type Description <code>Timer</code> <p>A timer object.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(interval)","title":"<code>interval</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(name)","title":"<code>name</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(repeat)","title":"<code>repeat</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(pause)","title":"<code>pause</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer","title":"set_timer","text":"<pre><code>set_timer(delay, callback=None, *, name=None, pause=False)\n</code></pre> <p>call a function after a delay.</p> Example <pre><code>def ready():\n    self.notify(\"Your soft boiled egg is ready!\")\n# Call ready() after 3 minutes\nself.set_timer(3 * 60, ready)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Time (in seconds) to wait before invoking callback.</p> required <code>TimerCallback | None</code> <p>Callback to call after time has expired.</p> <code>None</code> <code>str | None</code> <p>Name of the timer (for debug).</p> <code>None</code> <code>bool</code> <p>Start timer paused.</p> <code>False</code> <p>Returns:</p> Type Description <code>Timer</code> <p>A timer object.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(delay)","title":"<code>delay</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(name)","title":"<code>name</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(pause)","title":"<code>pause</code>","text":""},{"location":"api/on/","title":"On","text":"<p>Decorator to declare that the method is a message handler.</p> <p>The decorator accepts an optional CSS selector that will be matched against a widget exposed by a <code>control</code> property on the message.</p> Example <pre><code># Handle the press of buttons with ID \"#quit\".\n@on(Button.Pressed, \"#quit\")\ndef quit_button(self) -&gt; None:\n    self.app.quit()\n</code></pre> <p>Keyword arguments can be used to match additional selectors for attributes listed in <code>ALLOW_SELECTOR_MATCH</code>.</p> Example <pre><code># Handle the activation of the tab \"#home\" within the `TabbedContent` \"#tabs\".\n@on(TabbedContent.TabActivated, \"#tabs\", pane=\"#home\")\ndef switch_to_home(self) -&gt; None:\n    self.log(\"Switching back to the home tab.\")\n    ...\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>type[Message]</code> <p>The message type (i.e. the class).</p> required <code>str | None</code> <p>An optional selector. If supplied, the handler will only be called if <code>selector</code> matches the widget from the <code>control</code> attribute of the message.</p> <code>None</code> <code>str</code> <p>Additional selectors for other attributes of the message.</p> <code>{}</code>"},{"location":"api/on/#textual.on(message_type)","title":"<code>message_type</code>","text":""},{"location":"api/on/#textual.on(selector)","title":"<code>selector</code>","text":""},{"location":"api/on/#textual.on(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/pilot/","title":"textual.pilot","text":"<p>This module contains the <code>Pilot</code> class used by App.run_test to programmatically operate an app.</p> <p>See the guide on how to test Textual apps.</p>"},{"location":"api/pilot/#textual.pilot.OutOfBounds","title":"OutOfBounds","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the pilot mouse target is outside of the (visible) screen.</p>"},{"location":"api/pilot/#textual.pilot.Pilot","title":"Pilot","text":"<pre><code>Pilot(app)\n</code></pre> <p>               Bases: <code>Generic[ReturnType]</code></p> <p>Pilot object to drive an app.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.app","title":"app  <code>property</code>","text":"<pre><code>app\n</code></pre>"},{"location":"api/pilot/#textual.pilot.Pilot.click","title":"click  <code>async</code>","text":"<pre><code>click(\n    selector=None,\n    offset=(0, 0),\n    shift=False,\n    meta=False,\n    control=False,\n)\n</code></pre> <p>Simulate clicking with the mouse at a specified position.</p> <p>The final position to be clicked is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> Example <p>The code below runs an app and clicks its only button right in the middle: <pre><code>async with SingleButtonApp().run_test() as pilot:\n    await pilot.click(Button, offset=(8, 1))\n</code></pre></p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None</code> <p>A selector to specify a widget that should be used as the reference for the click offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to click on a specific widget. However, if the widget is currently hidden or obscured by another widget, the click may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset to click. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <code>bool</code> <p>Click with the shift key held down.</p> <code>False</code> <code>bool</code> <p>Click with the meta key held down.</p> <code>False</code> <code>bool</code> <p>Click with the control key held down.</p> <code>False</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position to be clicked is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the click landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.click(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(shift)","title":"<code>shift</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(meta)","title":"<code>meta</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(control)","title":"<code>control</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.exit","title":"exit  <code>async</code>","text":"<pre><code>exit(result)\n</code></pre> <p>Exit the app with the given result.</p> <p>Parameters:</p> Name Type Description Default <code>ReturnType</code> <p>The app result returned by <code>run</code> or <code>run_async</code>.</p> required"},{"location":"api/pilot/#textual.pilot.Pilot.exit(result)","title":"<code>result</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.hover","title":"hover  <code>async</code>","text":"<pre><code>hover(selector=None, offset=(0, 0))\n</code></pre> <p>Simulate hovering with the mouse cursor at a specified position.</p> <p>The final position to be hovered is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None | None</code> <p>A selector to specify a widget that should be used as the reference for the hover offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to hover a specific widget. However, if the widget is currently hidden or obscured by another widget, the hover may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset to hover. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position to be hovered is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the hover landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.hover(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.hover(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down","title":"mouse_down  <code>async</code>","text":"<pre><code>mouse_down(\n    selector=None,\n    offset=(0, 0),\n    shift=False,\n    meta=False,\n    control=False,\n)\n</code></pre> <p>Simulate a <code>MouseDown</code> event at a specified position.</p> <p>The final position for the event is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None</code> <p>A selector to specify a widget that should be used as the reference for the event offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to target a specific widget. However, if the widget is currently hidden or obscured by another widget, the event may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset for the event. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <code>bool</code> <p>Simulate the event with the shift key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the meta key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the control key held down.</p> <code>False</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position for the event is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the event landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(shift)","title":"<code>shift</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(meta)","title":"<code>meta</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(control)","title":"<code>control</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up","title":"mouse_up  <code>async</code>","text":"<pre><code>mouse_up(\n    selector=None,\n    offset=(0, 0),\n    shift=False,\n    meta=False,\n    control=False,\n)\n</code></pre> <p>Simulate a <code>MouseUp</code> event at a specified position.</p> <p>The final position for the event is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None</code> <p>A selector to specify a widget that should be used as the reference for the event offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to target a specific widget. However, if the widget is currently hidden or obscured by another widget, the event may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset for the event. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <code>bool</code> <p>Simulate the event with the shift key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the meta key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the control key held down.</p> <code>False</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position for the event is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the event landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(shift)","title":"<code>shift</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(meta)","title":"<code>meta</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(control)","title":"<code>control</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.pause","title":"pause  <code>async</code>","text":"<pre><code>pause(delay=None)\n</code></pre> <p>Insert a pause.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>Seconds to pause, or None to wait for cpu idle.</p> <code>None</code>"},{"location":"api/pilot/#textual.pilot.Pilot.pause(delay)","title":"<code>delay</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.press","title":"press  <code>async</code>","text":"<pre><code>press(*keys)\n</code></pre> <p>Simulate key-presses.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Keys to press.</p> <code>()</code>"},{"location":"api/pilot/#textual.pilot.Pilot.press(*keys)","title":"<code>*keys</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.resize_terminal","title":"resize_terminal  <code>async</code>","text":"<pre><code>resize_terminal(width, height)\n</code></pre> <p>Resize the terminal to the given dimensions.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The new width of the terminal.</p> required <code>int</code> <p>The new height of the terminal.</p> required"},{"location":"api/pilot/#textual.pilot.Pilot.resize_terminal(width)","title":"<code>width</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.resize_terminal(height)","title":"<code>height</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.wait_for_animation","title":"wait_for_animation  <code>async</code>","text":"<pre><code>wait_for_animation()\n</code></pre> <p>Wait for any current animation to complete.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.wait_for_scheduled_animations","title":"wait_for_scheduled_animations  <code>async</code>","text":"<pre><code>wait_for_scheduled_animations()\n</code></pre> <p>Wait for any current and scheduled animations to complete.</p>"},{"location":"api/pilot/#textual.pilot.WaitForScreenTimeout","title":"WaitForScreenTimeout","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised if messages aren't being processed quickly enough.</p> <p>If this occurs, the most likely explanation is some kind of deadlock in the app code.</p>"},{"location":"api/query/","title":"textual.css.query","text":"<p>This module contains the <code>DOMQuery</code> class and related objects.</p> <p>A DOMQuery is a set of DOM nodes returned by query.</p> <p>The set of nodes may be further refined with filter and exclude. Additional methods apply actions to all nodes in the query.</p> <p>Info</p> <p>If this sounds like JQuery, a (once) popular JS library, it is no coincidence.</p>"},{"location":"api/query/#textual.css.query.ExpectType","title":"ExpectType  <code>module-attribute</code>","text":"<pre><code>ExpectType = TypeVar('ExpectType')\n</code></pre> <p>Type variable used to further restrict queries.</p>"},{"location":"api/query/#textual.css.query.QueryType","title":"QueryType  <code>module-attribute</code>","text":"<pre><code>QueryType = TypeVar('QueryType', bound='Widget')\n</code></pre> <p>Type variable used to type generic queries.</p>"},{"location":"api/query/#textual.css.query.DOMQuery","title":"DOMQuery","text":"<pre><code>DOMQuery(\n    node,\n    *,\n    filter=None,\n    exclude=None,\n    deep=True,\n    parent=None\n)\n</code></pre> <p>               Bases: <code>Generic[QueryType]</code></p> <p>Warning</p> <p>You won't need to construct this manually, as <code>DOMQuery</code> objects are returned by query.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>A DOM node.</p> required <code>str | None</code> <p>Query to filter children in the node.</p> <code>None</code> <code>str | None</code> <p>Query to exclude children in the node.</p> <code>None</code> <code>bool</code> <p>Query should be deep, i.e. recursive.</p> <code>True</code> <code>DOMQuery | None</code> <p>The parent query, if this is the result of filtering another query.</p> <code>None</code> <p>Raises:</p> Type Description <code>InvalidQueryFormat</code> <p>If the format of the query is invalid.</p>"},{"location":"api/query/#textual.css.query.DOMQuery(node)","title":"<code>node</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(filter)","title":"<code>filter</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(exclude)","title":"<code>exclude</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(deep)","title":"<code>deep</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(parent)","title":"<code>parent</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.node","title":"node  <code>property</code>","text":"<pre><code>node\n</code></pre> <p>The node being queried.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.nodes","title":"nodes  <code>property</code>","text":"<pre><code>nodes\n</code></pre> <p>Lazily evaluate nodes.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.add_class","title":"add_class","text":"<pre><code>add_class(*class_names)\n</code></pre> <p>Add the given class name(s) to nodes.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.blur","title":"blur","text":"<pre><code>blur()\n</code></pre> <p>Blur the first matching node that is focused.</p> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.exclude","title":"exclude","text":"<pre><code>exclude(selector)\n</code></pre> <p>Exclude nodes that match a given selector.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A CSS selector.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>New DOM query.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.exclude(selector)","title":"<code>selector</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.filter","title":"filter","text":"<pre><code>filter(selector)\n</code></pre> <p>Filter this set by the given CSS selector.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A CSS selector.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>New DOM Query.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.filter(selector)","title":"<code>selector</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.first","title":"first","text":"<pre><code>first() -&gt; QueryType\n</code></pre><pre><code>first(expect_type: type[ExpectType]) -&gt; ExpectType\n</code></pre> <pre><code>first(expect_type=None)\n</code></pre> <p>Get the first matching node.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>Require matched node is of this type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If there are no matching nodes in the query.</p> <p>Returns:</p> Type Description <code>QueryType | ExpectType</code> <p>The matching Widget.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.first(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.focus","title":"focus","text":"<pre><code>focus()\n</code></pre> <p>Focus the first matching node that permits focus.</p> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.last","title":"last","text":"<pre><code>last() -&gt; QueryType\n</code></pre><pre><code>last(expect_type: type[ExpectType]) -&gt; ExpectType\n</code></pre> <pre><code>last(expect_type=None)\n</code></pre> <p>Get the last matching node.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>Require matched node is of this type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If there are no matching nodes in the query.</p> <p>Returns:</p> Type Description <code>QueryType | ExpectType</code> <p>The matching Widget.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.last(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.only_one","title":"only_one","text":"<pre><code>only_one() -&gt; QueryType\n</code></pre><pre><code>only_one(expect_type: type[ExpectType]) -&gt; ExpectType\n</code></pre> <pre><code>only_one(expect_type=None)\n</code></pre> <p>Get the only matching node.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>Require matched node is of this type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If no node matches the query.</p> <code>TooManyMatches</code> <p>If there is more than one matching node in the query.</p> <p>Returns:</p> Type Description <code>QueryType | ExpectType</code> <p>The matching Widget.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.only_one(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.refresh","title":"refresh","text":"<pre><code>refresh(*, repaint=True, layout=False, recompose=False)\n</code></pre> <p>Refresh matched nodes.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Repaint node(s).</p> <code>True</code> <code>bool</code> <p>Layout node(s).</p> <code>False</code> <code>bool</code> <p>Recompose node(s).</p> <code>False</code> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.refresh(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.refresh(layout)","title":"<code>layout</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.refresh(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.remove","title":"remove","text":"<pre><code>remove()\n</code></pre> <p>Remove matched nodes from the DOM.</p> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the widgets to be removed.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.remove_class","title":"remove_class","text":"<pre><code>remove_class(*class_names)\n</code></pre> <p>Remove the given class names from the nodes.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.results","title":"results","text":"<pre><code>results() -&gt; Iterator[QueryType]\n</code></pre><pre><code>results(\n    filter_type: type[ExpectType],\n) -&gt; Iterator[ExpectType]\n</code></pre> <pre><code>results(filter_type=None)\n</code></pre> <p>Get query results, optionally filtered by a given type.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>A Widget class to filter results, or None for no filter.</p> <code>None</code> <p>Yields:</p> Type Description <code>QueryType | ExpectType</code> <p>Iterator[Widget | ExpectType]: An iterator of Widget instances.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.results(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set","title":"set","text":"<pre><code>set(\n    display=None, visible=None, disabled=None, loading=None\n)\n</code></pre> <p>Sets common attributes on matched nodes.</p> <p>Parameters:</p> Name Type Description Default <code>bool | None</code> <p>Set <code>display</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <code>bool | None</code> <p>Set <code>visible</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <code>bool | None</code> <p>Set <code>disabled</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <code>bool | None</code> <p>Set <code>loading</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.set(display)","title":"<code>display</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set(visible)","title":"<code>visible</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set(loading)","title":"<code>loading</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set_class","title":"set_class","text":"<pre><code>set_class(add, *class_names)\n</code></pre> <p>Set the given class name(s) according to a condition.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Add the classes if True, otherwise remove them.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Self.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.set_class(add)","title":"<code>add</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set_classes","title":"set_classes","text":"<pre><code>set_classes(classes)\n</code></pre> <p>Set the classes on nodes to exactly the given set.</p> <p>Parameters:</p> Name Type Description Default <code>str | Iterable[str]</code> <p>A string of space separated classes, or an iterable of class names.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Self.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.set_classes(classes)","title":"<code>classes</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set_styles","title":"set_styles","text":"<pre><code>set_styles(css=None, **update_styles)\n</code></pre> <p>Set styles on matched nodes.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>CSS declarations to parser, or None.</p> <code>None</code>"},{"location":"api/query/#textual.css.query.DOMQuery.set_styles(css)","title":"<code>css</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.toggle_class","title":"toggle_class","text":"<pre><code>toggle_class(*class_names)\n</code></pre> <p>Toggle the given class names from matched nodes.</p>"},{"location":"api/query/#textual.css.query.InvalidQueryFormat","title":"InvalidQueryFormat","text":"<p>               Bases: <code>QueryError</code></p> <p>Query did not parse correctly.</p>"},{"location":"api/query/#textual.css.query.NoMatches","title":"NoMatches","text":"<p>               Bases: <code>QueryError</code></p> <p>No nodes matched the query.</p>"},{"location":"api/query/#textual.css.query.QueryError","title":"QueryError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for a query related error.</p>"},{"location":"api/query/#textual.css.query.TooManyMatches","title":"TooManyMatches","text":"<p>               Bases: <code>QueryError</code></p> <p>Too many nodes matched the query.</p>"},{"location":"api/query/#textual.css.query.WrongType","title":"WrongType","text":"<p>               Bases: <code>QueryError</code></p> <p>Query result was not of the correct type.</p>"},{"location":"api/reactive/","title":"textual.reactive","text":"<p>This module contains the <code>Reactive</code> class which implements reactivity.</p>"},{"location":"api/reactive/#textual.reactive.Reactive","title":"Reactive","text":"<pre><code>Reactive(\n    default,\n    *,\n    layout=False,\n    repaint=True,\n    init=False,\n    always_update=False,\n    compute=True,\n    recompose=False,\n    bindings=False\n)\n</code></pre> <p>               Bases: <code>Generic[ReactiveType]</code></p> <p>Reactive descriptor.</p> <p>Parameters:</p> Name Type Description Default <code>ReactiveType | Callable[[], ReactiveType]</code> <p>A default value or callable that returns a default.</p> required <code>bool</code> <p>Perform a layout on change.</p> <code>False</code> <code>bool</code> <p>Perform a repaint on change.</p> <code>True</code> <code>bool</code> <p>Call watchers on initialize (post mount).</p> <code>False</code> <code>bool</code> <p>Call watchers even when the new value equals the old value.</p> <code>False</code> <code>bool</code> <p>Run compute methods when attribute is changed.</p> <code>True</code> <code>bool</code> <p>Compose the widget again when the attribute changes.</p> <code>False</code> <code>bool</code> <p>Refresh bindings when the reactive changes.</p> <code>False</code>"},{"location":"api/reactive/#textual.reactive.Reactive(default)","title":"<code>default</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(layout)","title":"<code>layout</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(init)","title":"<code>init</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(always_update)","title":"<code>always_update</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(compute)","title":"<code>compute</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive.owner","title":"owner  <code>property</code>","text":"<pre><code>owner\n</code></pre> <p>The owner (class) where the reactive was declared.</p>"},{"location":"api/reactive/#textual.reactive.ReactiveError","title":"ReactiveError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for reactive errors.</p>"},{"location":"api/reactive/#textual.reactive.TooManyComputesError","title":"TooManyComputesError","text":"<p>               Bases: <code>ReactiveError</code></p> <p>Raised when an attribute has public and private compute methods.</p>"},{"location":"api/reactive/#textual.reactive.reactive","title":"reactive","text":"<pre><code>reactive(\n    default,\n    *,\n    layout=False,\n    repaint=True,\n    init=True,\n    always_update=False,\n    recompose=False,\n    bindings=False\n)\n</code></pre> <p>               Bases: <code>Reactive[ReactiveType]</code></p> <p>Create a reactive attribute.</p> <p>Parameters:</p> Name Type Description Default <code>ReactiveType | Callable[[], ReactiveType]</code> <p>A default value or callable that returns a default.</p> required <code>bool</code> <p>Perform a layout on change.</p> <code>False</code> <code>bool</code> <p>Perform a repaint on change.</p> <code>True</code> <code>bool</code> <p>Call watchers on initialize (post mount).</p> <code>True</code> <code>bool</code> <p>Call watchers even when the new value equals the old value.</p> <code>False</code> <code>bool</code> <p>Refresh bindings when the reactive changes.</p> <code>False</code>"},{"location":"api/reactive/#textual.reactive.reactive(default)","title":"<code>default</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(layout)","title":"<code>layout</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(init)","title":"<code>init</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(always_update)","title":"<code>always_update</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/reactive/#textual.reactive.var","title":"var","text":"<pre><code>var(\n    default, init=True, always_update=False, bindings=False\n)\n</code></pre> <p>               Bases: <code>Reactive[ReactiveType]</code></p> <p>Create a reactive attribute (with no auto-refresh).</p> <p>Parameters:</p> Name Type Description Default <code>ReactiveType | Callable[[], ReactiveType]</code> <p>A default value or callable that returns a default.</p> required <code>bool</code> <p>Call watchers on initialize (post mount).</p> <code>True</code> <code>bool</code> <p>Call watchers even when the new value equals the old value.</p> <code>False</code> <code>bool</code> <p>Refresh bindings when the reactive changes.</p> <code>False</code>"},{"location":"api/reactive/#textual.reactive.var(default)","title":"<code>default</code>","text":""},{"location":"api/reactive/#textual.reactive.var(init)","title":"<code>init</code>","text":""},{"location":"api/reactive/#textual.reactive.var(always_update)","title":"<code>always_update</code>","text":""},{"location":"api/reactive/#textual.reactive.var(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/reactive/#textual.reactive.await_watcher","title":"await_watcher  <code>async</code>","text":"<pre><code>await_watcher(obj, awaitable)\n</code></pre> <p>Coroutine to await an awaitable returned from a watcher</p>"},{"location":"api/reactive/#textual.reactive.invoke_watcher","title":"invoke_watcher","text":"<pre><code>invoke_watcher(\n    watcher_object, watch_function, old_value, value\n)\n</code></pre> <p>Invoke a watch function.</p> <p>Parameters:</p> Name Type Description Default <code>Reactable</code> <p>The object watching for the changes.</p> required <code>WatchCallbackType</code> <p>A watch function, which may be sync or async.</p> required <code>object</code> <p>The old value of the attribute.</p> required <code>object</code> <p>The new value of the attribute.</p> required"},{"location":"api/reactive/#textual.reactive.invoke_watcher(watcher_object)","title":"<code>watcher_object</code>","text":""},{"location":"api/reactive/#textual.reactive.invoke_watcher(watch_function)","title":"<code>watch_function</code>","text":""},{"location":"api/reactive/#textual.reactive.invoke_watcher(old_value)","title":"<code>old_value</code>","text":""},{"location":"api/reactive/#textual.reactive.invoke_watcher(value)","title":"<code>value</code>","text":""},{"location":"api/renderables/","title":"textual.renderables","text":"<p>A collection of Rich renderables which may be returned from a widget's <code>render()</code> method.</p>"},{"location":"api/renderables/#textual.renderables.bar.Bar","title":"Bar","text":"<pre><code>Bar(\n    highlight_range=(0, 0),\n    highlight_style=\"magenta\",\n    background_style=\"grey37\",\n    clickable_ranges=None,\n    width=None,\n    gradient=None,\n)\n</code></pre> <p>Thin horizontal bar with a portion highlighted.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[float, float]</code> <p>The range to highlight.</p> <code>(0, 0)</code> <code>StyleType</code> <p>The style of the highlighted range of the bar.</p> <code>'magenta'</code> <code>StyleType</code> <p>The style of the non-highlighted range(s) of the bar.</p> <code>'grey37'</code> <code>int | None</code> <p>The width of the bar, or <code>None</code> to fill available width.</p> <code>None</code> <code>Gradient | None</code> <p>Optional gradient object.</p> <code>None</code>"},{"location":"api/renderables/#textual.renderables.bar.Bar(highlight_range)","title":"<code>highlight_range</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(highlight_style)","title":"<code>highlight_style</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(background_style)","title":"<code>background_style</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(width)","title":"<code>width</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(gradient)","title":"<code>gradient</code>","text":""},{"location":"api/renderables/#textual.renderables.blank.Blank","title":"Blank","text":"<pre><code>Blank(color='transparent')\n</code></pre> <p>Draw solid background color.</p>"},{"location":"api/renderables/#textual.renderables.digits.Digits","title":"Digits","text":"<pre><code>Digits(text, style='')\n</code></pre> <p>Renders a 3X3 unicode 'font' for numerical values.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text to display.</p> required <code>StyleType</code> <p>Style to apply to the digits.</p> <code>''</code>"},{"location":"api/renderables/#textual.renderables.digits.Digits(text)","title":"<code>text</code>","text":""},{"location":"api/renderables/#textual.renderables.digits.Digits(style)","title":"<code>style</code>","text":""},{"location":"api/renderables/#textual.renderables.digits.Digits.get_width","title":"get_width  <code>classmethod</code>","text":"<pre><code>get_width(text)\n</code></pre> <p>Calculate the width without rendering.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text which may be displayed in the <code>Digits</code> widget.</p> required <p>Returns:</p> Type Description <code>int</code> <p>width of the text (in cells).</p>"},{"location":"api/renderables/#textual.renderables.digits.Digits.get_width(text)","title":"<code>text</code>","text":""},{"location":"api/renderables/#textual.renderables.gradient.LinearGradient","title":"LinearGradient","text":"<pre><code>LinearGradient(angle, stops)\n</code></pre> <p>Render a linear gradient with a rotation.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Angle of rotation in degrees.</p> required <code>Sequence[tuple[float, Color | str]]</code> <p>List of stop consisting of pairs of offset (between 0 and 1) and color.</p> required"},{"location":"api/renderables/#textual.renderables.gradient.LinearGradient(angle)","title":"<code>angle</code>","text":""},{"location":"api/renderables/#textual.renderables.gradient.LinearGradient(stops)","title":"<code>stops</code>","text":""},{"location":"api/renderables/#textual.renderables.gradient.VerticalGradient","title":"VerticalGradient","text":"<pre><code>VerticalGradient(color1, color2)\n</code></pre> <p>Draw a vertical gradient.</p>"},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline","title":"Sparkline","text":"<pre><code>Sparkline(\n    data,\n    *,\n    width,\n    min_color=from_rgb(0, 255, 0),\n    max_color=from_rgb(255, 0, 0),\n    summary_function=max\n)\n</code></pre> <p>               Bases: <code>Generic[T]</code></p> <p>A sparkline representing a series of data.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence[T]</code> <p>The sequence of data to render.</p> required <code>int | None</code> <p>The width of the sparkline/the number of buckets to partition the data into.</p> required <code>Color</code> <p>The color of values equal to the min value in data.</p> <code>from_rgb(0, 255, 0)</code> <code>Color</code> <p>The color of values equal to the max value in data.</p> <code>from_rgb(255, 0, 0)</code> <code>SummaryFunction[T]</code> <p>Function that will be applied to each bucket.</p> <code>max</code>"},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(data)","title":"<code>data</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(width)","title":"<code>width</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(min_color)","title":"<code>min_color</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(max_color)","title":"<code>max_color</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(summary_function)","title":"<code>summary_function</code>","text":""},{"location":"api/screen/","title":"textual.screen","text":"<p>This module contains the <code>Screen</code> class and related objects.</p> <p>The <code>Screen</code> class is a special widget which represents the content in the terminal. See Screens for details.</p>"},{"location":"api/screen/#textual.screen.ScreenResultCallbackType","title":"ScreenResultCallbackType  <code>module-attribute</code>","text":"<pre><code>ScreenResultCallbackType = Union[\n    Callable[[Optional[ScreenResultType]], None],\n    Callable[[Optional[ScreenResultType]], Awaitable[None]],\n]\n</code></pre> <p>Type of a screen result callback function.</p>"},{"location":"api/screen/#textual.screen.ScreenResultType","title":"ScreenResultType  <code>module-attribute</code>","text":"<pre><code>ScreenResultType = TypeVar('ScreenResultType')\n</code></pre> <p>The result type of a screen.</p>"},{"location":"api/screen/#textual.screen.ModalScreen","title":"ModalScreen","text":"<pre><code>ModalScreen(name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>Screen[ScreenResultType]</code></p> <p>A screen with bindings that take precedence over the App's key bindings.</p> <p>The default styling of a modal screen will dim the screen underneath.</p>"},{"location":"api/screen/#textual.screen.ResultCallback","title":"ResultCallback","text":"<pre><code>ResultCallback(requester, callback, future=None)\n</code></pre> <p>               Bases: <code>Generic[ScreenResultType]</code></p> <p>Holds the details of a callback.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>The object making a request for the callback.</p> required <code>ScreenResultCallbackType[ScreenResultType] | None</code> <p>The callback function.</p> required <code>Future[ScreenResultType] | None</code> <p>A Future to hold the result.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.ResultCallback(requester)","title":"<code>requester</code>","text":""},{"location":"api/screen/#textual.screen.ResultCallback(callback)","title":"<code>callback</code>","text":""},{"location":"api/screen/#textual.screen.ResultCallback(future)","title":"<code>future</code>","text":""},{"location":"api/screen/#textual.screen.ResultCallback.callback","title":"callback  <code>instance-attribute</code>","text":"<pre><code>callback = callback\n</code></pre> <p>The callback function.</p>"},{"location":"api/screen/#textual.screen.ResultCallback.future","title":"future  <code>instance-attribute</code>","text":"<pre><code>future = future\n</code></pre> <p>A future for the result</p>"},{"location":"api/screen/#textual.screen.ResultCallback.requester","title":"requester  <code>instance-attribute</code>","text":"<pre><code>requester = requester\n</code></pre> <p>The object in the DOM that requested the callback.</p>"},{"location":"api/screen/#textual.screen.Screen","title":"Screen","text":"<pre><code>Screen(name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>Generic[ScreenResultType]</code>, <code>Widget</code></p> <p>The base class for screens.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The name of the screen.</p> <code>None</code> <code>str | None</code> <p>The ID of the screen in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the screen.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.Screen(name)","title":"<code>name</code>","text":""},{"location":"api/screen/#textual.screen.Screen(id)","title":"<code>id</code>","text":""},{"location":"api/screen/#textual.screen.Screen(classes)","title":"<code>classes</code>","text":""},{"location":"api/screen/#textual.screen.Screen.ALLOW_IN_MAXIMIZED_VIEW","title":"ALLOW_IN_MAXIMIZED_VIEW  <code>class-attribute</code>","text":"<pre><code>ALLOW_IN_MAXIMIZED_VIEW = '.-textual-system,Footer'\n</code></pre> <p>A selector for the widgets (direct children of Screen) that are allowed in the maximized view (in addition to maximized widget).</p>"},{"location":"api/screen/#textual.screen.Screen.AUTO_FOCUS","title":"AUTO_FOCUS  <code>class-attribute</code>","text":"<pre><code>AUTO_FOCUS = None\n</code></pre> <p>A selector to determine what to focus automatically when the screen is activated.</p> <p>The widget focused is the first that matches the given CSS selector. Set to <code>None</code> to inherit the value from the screen's app. Set to <code>\"\"</code> to disable auto focus.</p>"},{"location":"api/screen/#textual.screen.Screen.COMMANDS","title":"COMMANDS  <code>class-attribute</code>","text":"<pre><code>COMMANDS = set()\n</code></pre> <p>Command providers used by the command palette, associated with the screen.</p> <p>Should be a set of <code>command.Provider</code> classes.</p>"},{"location":"api/screen/#textual.screen.Screen.CSS","title":"CSS  <code>class-attribute</code>","text":"<pre><code>CSS = ''\n</code></pre> <p>Inline CSS, useful for quick scripts. Rules here take priority over CSS_PATH.</p> Note <p>This CSS applies to the whole app.</p>"},{"location":"api/screen/#textual.screen.Screen.CSS_PATH","title":"CSS_PATH  <code>class-attribute</code>","text":"<pre><code>CSS_PATH = None\n</code></pre> <p>File paths to load CSS from.</p> Note <p>This CSS applies to the whole app.</p>"},{"location":"api/screen/#textual.screen.Screen.ESCAPE_TO_MINIMIZE","title":"ESCAPE_TO_MINIMIZE  <code>class-attribute</code>","text":"<pre><code>ESCAPE_TO_MINIMIZE = None\n</code></pre> <p>Use escape key to minimize (potentially overriding bindings) or <code>None</code> to defer to <code>App.ESCAPE_TO_MINIMIZE</code>.</p>"},{"location":"api/screen/#textual.screen.Screen.SUB_TITLE","title":"SUB_TITLE  <code>class-attribute</code>","text":"<pre><code>SUB_TITLE = None\n</code></pre> <p>A class variable to set the default sub-title for the screen.</p> <p>This overrides the app sub-title. To update the sub-title while the screen is running, you can set the sub_title attribute.</p>"},{"location":"api/screen/#textual.screen.Screen.TITLE","title":"TITLE  <code>class-attribute</code>","text":"<pre><code>TITLE = None\n</code></pre> <p>A class variable to set the default title for the screen.</p> <p>This overrides the app title. To update the title while the screen is running, you can set the title attribute.</p>"},{"location":"api/screen/#textual.screen.Screen.active_bindings","title":"active_bindings  <code>property</code>","text":"<pre><code>active_bindings\n</code></pre> <p>Get currently active bindings for this screen.</p> <p>If no widget is focused, then app-level bindings are returned. If a widget is focused, then any bindings present in the screen and app are merged and returned.</p> <p>This property may be used to inspect current bindings.</p> <p>Returns:</p> Type Description <code>dict[str, ActiveBinding]</code> <p>A map of keys to a tuple containing (NAMESPACE, BINDING, ENABLED).</p>"},{"location":"api/screen/#textual.screen.Screen.bindings_updated_signal","title":"bindings_updated_signal  <code>instance-attribute</code>","text":"<pre><code>bindings_updated_signal = Signal(self, 'bindings_updated')\n</code></pre> <p>A signal published when the bindings have been updated</p>"},{"location":"api/screen/#textual.screen.Screen.focus_chain","title":"focus_chain  <code>property</code>","text":"<pre><code>focus_chain\n</code></pre> <p>A list of widgets that may receive focus, in focus order.</p>"},{"location":"api/screen/#textual.screen.Screen.focused","title":"focused  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>focused = Reactive(None)\n</code></pre> <p>The focused widget or <code>None</code> for no focus. To set focus, do not update this value directly. Use set_focus instead.</p>"},{"location":"api/screen/#textual.screen.Screen.is_active","title":"is_active  <code>property</code>","text":"<pre><code>is_active\n</code></pre> <p>Is the screen active (i.e. visible and top of the stack)?</p>"},{"location":"api/screen/#textual.screen.Screen.is_current","title":"is_current  <code>property</code>","text":"<pre><code>is_current\n</code></pre> <p>Is the screen current (i.e. visible to user)?</p>"},{"location":"api/screen/#textual.screen.Screen.is_modal","title":"is_modal  <code>property</code>","text":"<pre><code>is_modal\n</code></pre> <p>Is the screen modal?</p>"},{"location":"api/screen/#textual.screen.Screen.layers","title":"layers  <code>property</code>","text":"<pre><code>layers\n</code></pre> <p>Layers from parent.</p> <p>Returns:</p> Type Description <code>tuple[str, ...]</code> <p>Tuple of layer names.</p>"},{"location":"api/screen/#textual.screen.Screen.maximized","title":"maximized  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>maximized = Reactive(None, layout=True)\n</code></pre> <p>The currently maximized widget, or <code>None</code> for no maximized widget.</p>"},{"location":"api/screen/#textual.screen.Screen.screen_layout_refresh_signal","title":"screen_layout_refresh_signal  <code>instance-attribute</code>","text":"<pre><code>screen_layout_refresh_signal = Signal(\n    self, \"layout-refresh\"\n)\n</code></pre> <p>The signal that is published when the screen's layout is refreshed.</p>"},{"location":"api/screen/#textual.screen.Screen.stack_updates","title":"stack_updates  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>stack_updates = Reactive(0, repaint=False)\n</code></pre> <p>An integer that updates when the screen is resumed.</p>"},{"location":"api/screen/#textual.screen.Screen.sub_title","title":"sub_title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>sub_title = SUB_TITLE\n</code></pre> <p>Screen sub-title to override the app sub-title.</p>"},{"location":"api/screen/#textual.screen.Screen.title","title":"title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>title = TITLE\n</code></pre> <p>Screen title to override the app title.</p>"},{"location":"api/screen/#textual.screen.Screen.action_dismiss","title":"action_dismiss  <code>async</code>","text":"<pre><code>action_dismiss(result=None)\n</code></pre> <p>A wrapper around <code>dismiss</code> that can be called as an action.</p> <p>Parameters:</p> Name Type Description Default <code>ScreenResultType | None</code> <p>The optional result to be passed to the result callback.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.Screen.action_dismiss(result)","title":"<code>result</code>","text":""},{"location":"api/screen/#textual.screen.Screen.action_maximize","title":"action_maximize","text":"<pre><code>action_maximize()\n</code></pre> <p>Action to maximize the currently focused widget.</p>"},{"location":"api/screen/#textual.screen.Screen.action_minimize","title":"action_minimize","text":"<pre><code>action_minimize()\n</code></pre> <p>Action to minimize the currently maximized widget.</p>"},{"location":"api/screen/#textual.screen.Screen.can_view","title":"can_view","text":"<pre><code>can_view(widget)\n</code></pre> <p>Check if a given widget is in the current view (scrollable area).</p> <p>Note: This doesn't necessarily equate to a widget being visible. There are other reasons why a widget may not be visible.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget that is a descendant of self.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the entire widget is in view, False if it is partially visible or not in view.</p>"},{"location":"api/screen/#textual.screen.Screen.can_view(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.dismiss","title":"dismiss","text":"<pre><code>dismiss(result=None)\n</code></pre> <p>Dismiss the screen, optionally with a result.</p> <p>Any callback provided in push_screen will be invoked with the supplied result.</p> <p>Only the active screen may be dismissed. This method will produce a warning in the logs if called on an inactive screen (but otherwise have no effect).</p> <p>Warning</p> <p>Textual will raise a <code>ScreenError</code> if you await the return value from a message handler on the Screen being dismissed. If you want to dismiss the current screen, you can call <code>self.dismiss()</code> without awaiting.</p> <p>Parameters:</p> Name Type Description Default <code>ScreenResultType | None</code> <p>The optional result to be passed to the result callback.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.Screen.dismiss(result)","title":"<code>result</code>","text":""},{"location":"api/screen/#textual.screen.Screen.find_widget","title":"find_widget","text":"<pre><code>find_widget(widget)\n</code></pre> <p>Get the screen region of a Widget.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A Widget within the composition.</p> required <p>Returns:</p> Type Description <code>MapGeometry</code> <p>Region relative to screen.</p> <p>Raises:</p> Type Description <code>NoWidget</code> <p>If the widget could not be found in this screen.</p>"},{"location":"api/screen/#textual.screen.Screen.find_widget(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.focus_next","title":"focus_next","text":"<pre><code>focus_next(selector='*')\n</code></pre> <p>Focus the next widget, optionally filtered by a CSS selector.</p> <p>If no widget is currently focused, this will focus the first focusable widget. If no focusable widget matches the given CSS selector, focus is set to <code>None</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>CSS selector to filter what nodes can be focused.</p> <code>'*'</code> <p>Returns:</p> Type Description <code>Widget | None</code> <p>Newly focused widget, or None for no focus. If the return is not <code>None</code>, then it is guaranteed that the widget returned matches the CSS selectors given in the argument.</p>"},{"location":"api/screen/#textual.screen.Screen.focus_next(selector)","title":"<code>selector</code>","text":""},{"location":"api/screen/#textual.screen.Screen.focus_previous","title":"focus_previous","text":"<pre><code>focus_previous(selector='*')\n</code></pre> <p>Focus the previous widget, optionally filtered by a CSS selector.</p> <p>If no widget is currently focused, this will focus the first focusable widget. If no focusable widget matches the given CSS selector, focus is set to <code>None</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>CSS selector to filter what nodes can be focused.</p> <code>'*'</code> <p>Returns:</p> Type Description <code>Widget | None</code> <p>Newly focused widget, or None for no focus. If the return is not <code>None</code>, then it is guaranteed that the widget returned matches the CSS selectors given in the argument.</p>"},{"location":"api/screen/#textual.screen.Screen.focus_previous(selector)","title":"<code>selector</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_focusable_widget_at","title":"get_focusable_widget_at","text":"<pre><code>get_focusable_widget_at(x, y)\n</code></pre> <p>Get the focusable widget under a given coordinate.</p> <p>If the widget directly under the given coordinate is not focusable, then this method will check if any of the ancestors are focusable. If no ancestors are focusable, then <code>None</code> will be returned.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>Widget | None</code> <p>A <code>Widget</code>, or <code>None</code> if there is no focusable widget underneath the coordinate.</p>"},{"location":"api/screen/#textual.screen.Screen.get_focusable_widget_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_focusable_widget_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_offset","title":"get_offset","text":"<pre><code>get_offset(widget)\n</code></pre> <p>Get the absolute offset of a given Widget.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>The widget's offset relative to the top left of the terminal.</p>"},{"location":"api/screen/#textual.screen.Screen.get_offset(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_style_at","title":"get_style_at","text":"<pre><code>get_style_at(x, y)\n</code></pre> <p>Get the style under a given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X Coordinate.</p> required <code>int</code> <p>Y Coordinate.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>Rich Style object.</p>"},{"location":"api/screen/#textual.screen.Screen.get_style_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_style_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widget_at","title":"get_widget_at","text":"<pre><code>get_widget_at(x, y)\n</code></pre> <p>Get the widget at a given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X Coordinate.</p> required <code>int</code> <p>Y Coordinate.</p> required <p>Returns:</p> Type Description <code>tuple[Widget, Region]</code> <p>Widget and screen region.</p> <p>Raises:</p> Type Description <code>NoWidget</code> <p>If there is no widget under the screen coordinate.</p>"},{"location":"api/screen/#textual.screen.Screen.get_widget_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widget_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widgets_at","title":"get_widgets_at","text":"<pre><code>get_widgets_at(x, y)\n</code></pre> <p>Get all widgets under a given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>Iterable[tuple[Widget, Region]]</code> <p>Sequence of (WIDGET, REGION) tuples.</p>"},{"location":"api/screen/#textual.screen.Screen.get_widgets_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widgets_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.maximize","title":"maximize","text":"<pre><code>maximize(widget, container=True)\n</code></pre> <p>Maximize a widget, so it fills the screen.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Widget to maximize.</p> required <code>bool</code> <p>If one of the widgets ancestors is a maximizeable widget, maximize that instead.</p> <code>True</code>"},{"location":"api/screen/#textual.screen.Screen.maximize(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.maximize(container)","title":"<code>container</code>","text":""},{"location":"api/screen/#textual.screen.Screen.minimize","title":"minimize","text":"<pre><code>minimize()\n</code></pre> <p>Restore any maximized widget to normal state.</p>"},{"location":"api/screen/#textual.screen.Screen.refresh_bindings","title":"refresh_bindings","text":"<pre><code>refresh_bindings()\n</code></pre> <p>Call to request a refresh of bindings.</p>"},{"location":"api/screen/#textual.screen.Screen.set_focus","title":"set_focus","text":"<pre><code>set_focus(widget, scroll_visible=True)\n</code></pre> <p>Focus (or un-focus) a widget. A focused widget will receive key events first.</p> <p>Parameters:</p> Name Type Description Default <code>Widget | None</code> <p>Widget to focus, or None to un-focus.</p> required <code>bool</code> <p>Scroll widget in to view.</p> <code>True</code>"},{"location":"api/screen/#textual.screen.Screen.set_focus(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.set_focus(scroll_visible)","title":"<code>scroll_visible</code>","text":""},{"location":"api/screen/#textual.screen.Screen.validate_sub_title","title":"validate_sub_title","text":"<pre><code>validate_sub_title(sub_title)\n</code></pre> <p>Ensure the sub-title is a string or <code>None</code>.</p>"},{"location":"api/screen/#textual.screen.Screen.validate_title","title":"validate_title","text":"<pre><code>validate_title(title)\n</code></pre> <p>Ensure the title is a string or <code>None</code>.</p>"},{"location":"api/screen/#textual.screen.SystemModalScreen","title":"SystemModalScreen","text":"<pre><code>SystemModalScreen(name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>ModalScreen[ScreenResultType]</code></p> <p>A variant of <code>ModalScreen</code> for internal use.</p> <p>This version of <code>ModalScreen</code> allows us to build system-level screens; the type being used to indicate that the screen should be isolated from the main application.</p> Note <p>This screen is set to not inherit CSS.</p>"},{"location":"api/scroll_view/","title":"textual.scroll_view","text":"<p><code>ScrollView</code> is a base class for line api widgets.</p>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView","title":"ScrollView","text":"<pre><code>ScrollView(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>ScrollableContainer</code></p> <p>A base class for a Widget that handles its own scrolling (i.e. doesn't rely on the compositor to render children).</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(*children)","title":"<code>*children</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(name)","title":"<code>name</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(id)","title":"<code>id</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(classes)","title":"<code>classes</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.is_scrollable","title":"is_scrollable  <code>property</code>","text":"<pre><code>is_scrollable\n</code></pre> <p>Always scrollable.</p>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_line","title":"refresh_line","text":"<pre><code>refresh_line(y)\n</code></pre> <p>Refresh a single line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Coordinate of line.</p> required"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_line(y)","title":"<code>y</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_lines","title":"refresh_lines","text":"<pre><code>refresh_lines(y_start, line_count=1)\n</code></pre> <p>Refresh one or more lines.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>First line to refresh.</p> required <code>int</code> <p>Total number of lines to refresh.</p> <code>1</code>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_lines(y_start)","title":"<code>y_start</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_lines(line_count)","title":"<code>line_count</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to","title":"scroll_to","text":"<pre><code>scroll_to(\n    x=None,\n    y=None,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to a given (absolute) coordinate, optionally animating.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>X coordinate (column) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>float | None</code> <p>Y coordinate (row) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>bool</code> <p>Animate to new scroll position.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(x)","title":"<code>x</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(y)","title":"<code>y</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(animate)","title":"<code>animate</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(speed)","title":"<code>speed</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(duration)","title":"<code>duration</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(easing)","title":"<code>easing</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(force)","title":"<code>force</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(level)","title":"<code>level</code>","text":""},{"location":"api/scrollbar/","title":"textual.scrollbar","text":"<p>Contains the widgets that manage Textual scrollbars.</p> <p>Note</p> <p>You will not typically need this for most apps.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar","title":"ScrollBar","text":"<pre><code>ScrollBar(vertical=True, name=None, *, thickness=1)\n</code></pre> <p>               Bases: <code>Widget</code></p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.renderer","title":"renderer  <code>class-attribute</code>","text":"<pre><code>renderer = ScrollBarRender\n</code></pre> <p>The class used for rendering scrollbars. This can be overridden and set to a ScrollBarRender-derived class in order to delegate all scrollbar rendering to that class. E.g.:</p> <pre><code>class MyScrollBarRender(ScrollBarRender): ...\n\napp = MyApp()\nScrollBar.renderer = MyScrollBarRender\napp.run()\n</code></pre> <p>Because this variable is accessed through specific instances (rather than through the class ScrollBar itself) it is also possible to set this on specific scrollbar instance to change only that instance:</p> <pre><code>my_widget.horizontal_scrollbar.renderer = MyScrollBarRender\n</code></pre>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.action_grab","title":"action_grab","text":"<pre><code>action_grab()\n</code></pre> <p>Begin capturing the mouse cursor.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.action_scroll_down","title":"action_scroll_down","text":"<pre><code>action_scroll_down()\n</code></pre> <p>Scroll vertical scrollbars down, horizontal scrollbars right.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.action_scroll_up","title":"action_scroll_up","text":"<pre><code>action_scroll_up()\n</code></pre> <p>Scroll vertical scrollbars up, horizontal scrollbars left.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarCorner","title":"ScrollBarCorner","text":"<pre><code>ScrollBarCorner(name=None)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Widget which fills the gap between horizontal and vertical scrollbars, should they both be present.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender","title":"ScrollBarRender","text":"<pre><code>ScrollBarRender(\n    virtual_size=100,\n    window_size=0,\n    position=0,\n    thickness=1,\n    vertical=True,\n    style=\"bright_magenta on #555555\",\n)\n</code></pre>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender.BLANK_GLYPH","title":"BLANK_GLYPH  <code>class-attribute</code>","text":"<pre><code>BLANK_GLYPH = ' '\n</code></pre> <p>Glyph used for the main body of the scrollbar</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender.HORIZONTAL_BARS","title":"HORIZONTAL_BARS  <code>class-attribute</code>","text":"<pre><code>HORIZONTAL_BARS = ['\u2589', '\u258a', '\u258b', '\u258c', '\u258d', '\u258e', '\u258f', ' ']\n</code></pre> <p>Glyphs used for horizontal scrollbar ends, for smoother display.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender.VERTICAL_BARS","title":"VERTICAL_BARS  <code>class-attribute</code>","text":"<pre><code>VERTICAL_BARS = ['\u2581', '\u2582', '\u2583', '\u2584', '\u2585', '\u2586', '\u2587', ' ']\n</code></pre> <p>Glyphs used for vertical scrollbar ends, for smoother display.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollDown","title":"ScrollDown","text":"<pre><code>ScrollDown()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking below handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollLeft","title":"ScrollLeft","text":"<pre><code>ScrollLeft()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking above handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollMessage","title":"ScrollMessage","text":"<pre><code>ScrollMessage()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Base class for all scrollbar messages.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollRight","title":"ScrollRight","text":"<pre><code>ScrollRight()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking below handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollTo","title":"ScrollTo","text":"<pre><code>ScrollTo(x=None, y=None, animate=True)\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when click and dragging handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollUp","title":"ScrollUp","text":"<pre><code>ScrollUp()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking above handle.</p>"},{"location":"api/signal/","title":"textual.signal","text":"<p>Signals are a simple pub-sub mechanism.</p> <p>DOMNodes can subscribe to a signal, which will invoke a callback when the signal is published.</p> <p>This is experimental for now, for internal use. It may be part of the public API in a future release.</p>"},{"location":"api/signal/#textual.signal.Signal","title":"Signal","text":"<pre><code>Signal(owner, name)\n</code></pre> <p>               Bases: <code>Generic[SignalT]</code></p> <p>A signal that a widget may subscribe to, in order to invoke callbacks when an associated event occurs.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The owner of this signal.</p> required <code>str</code> <p>An identifier for debugging purposes.</p> required"},{"location":"api/signal/#textual.signal.Signal(owner)","title":"<code>owner</code>","text":""},{"location":"api/signal/#textual.signal.Signal(name)","title":"<code>name</code>","text":""},{"location":"api/signal/#textual.signal.Signal.publish","title":"publish","text":"<pre><code>publish(data)\n</code></pre> <p>Publish the signal (invoke subscribed callbacks).</p> <p>Parameters:</p> Name Type Description Default <code>SignalT</code> <p>An argument to pass to the callbacks.</p> required"},{"location":"api/signal/#textual.signal.Signal.publish(data)","title":"<code>data</code>","text":""},{"location":"api/signal/#textual.signal.Signal.subscribe","title":"subscribe","text":"<pre><code>subscribe(node, callback, immediate=False)\n</code></pre> <p>Subscribe a node to this signal.</p> <p>When the signal is published, the callback will be invoked.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>Node to subscribe.</p> required <code>SignalCallbackType</code> <p>A callback function which takes a single argument and returns anything (return type ignored).</p> required <code>bool</code> <p>Invoke the callback immediately on publish if <code>True</code>, otherwise post it to the DOM node to be called once existing messages have been processed.</p> <code>False</code> <p>Raises:</p> Type Description <code>SignalError</code> <p>Raised when subscribing a non-mounted widget.</p>"},{"location":"api/signal/#textual.signal.Signal.subscribe(node)","title":"<code>node</code>","text":""},{"location":"api/signal/#textual.signal.Signal.subscribe(callback)","title":"<code>callback</code>","text":""},{"location":"api/signal/#textual.signal.Signal.subscribe(immediate)","title":"<code>immediate</code>","text":""},{"location":"api/signal/#textual.signal.Signal.unsubscribe","title":"unsubscribe","text":"<pre><code>unsubscribe(node)\n</code></pre> <p>Unsubscribe a node from this signal.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>Node to unsubscribe,</p> required"},{"location":"api/signal/#textual.signal.Signal.unsubscribe(node)","title":"<code>node</code>","text":""},{"location":"api/signal/#textual.signal.SignalError","title":"SignalError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised for Signal errors.</p>"},{"location":"api/strip/","title":"textual.strip","text":"<p>This module contains the <code>Strip</code> class and related objects.</p> <p>A <code>Strip</code> contains the result of rendering a widget. See line API for how to use Strips.</p>"},{"location":"api/strip/#textual.strip.Strip","title":"Strip","text":"<pre><code>Strip(segments, cell_length=None)\n</code></pre> <p>Represents a 'strip' (horizontal line) of a Textual Widget.</p> <p>A Strip is like an immutable list of Segments. The immutability allows for effective caching.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Segment]</code> <p>An iterable of segments.</p> required <code>int | None</code> <p>The cell length if known, or None to calculate on demand.</p> <code>None</code>"},{"location":"api/strip/#textual.strip.Strip(segments)","title":"<code>segments</code>","text":""},{"location":"api/strip/#textual.strip.Strip(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.cell_length","title":"cell_length  <code>property</code>","text":"<pre><code>cell_length\n</code></pre> <p>Get the number of cells required to render this object.</p>"},{"location":"api/strip/#textual.strip.Strip.link_ids","title":"link_ids  <code>property</code>","text":"<pre><code>link_ids\n</code></pre> <p>A set of the link ids in this Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.text","title":"text  <code>property</code>","text":"<pre><code>text\n</code></pre> <p>Segment text.</p>"},{"location":"api/strip/#textual.strip.Strip.adjust_cell_length","title":"adjust_cell_length","text":"<pre><code>adjust_cell_length(cell_length, style=None)\n</code></pre> <p>Adjust the cell length, possibly truncating or extending.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New desired cell length.</p> required <code>Style | None</code> <p>Style when extending, or <code>None</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>A new strip with the supplied cell length.</p>"},{"location":"api/strip/#textual.strip.Strip.adjust_cell_length(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.adjust_cell_length(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.apply_filter","title":"apply_filter","text":"<pre><code>apply_filter(filter, background)\n</code></pre> <p>Apply a filter to all segments in the strip.</p> <p>Parameters:</p> Name Type Description Default <code>LineFilter</code> <p>A line filter object.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A new Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.apply_filter(filter)","title":"<code>filter</code>","text":""},{"location":"api/strip/#textual.strip.Strip.apply_style","title":"apply_style","text":"<pre><code>apply_style(style)\n</code></pre> <p>Apply a style to the Strip.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>A Rich style.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A new strip.</p>"},{"location":"api/strip/#textual.strip.Strip.apply_style(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.blank","title":"blank  <code>classmethod</code>","text":"<pre><code>blank(cell_length, style=None)\n</code></pre> <p>Create a blank strip.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Desired cell length.</p> required <code>StyleType | None</code> <p>Style of blank.</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>New strip.</p>"},{"location":"api/strip/#textual.strip.Strip.blank(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.blank(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop","title":"crop","text":"<pre><code>crop(start, end=None)\n</code></pre> <p>Crop a strip between two cell positions.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The start cell position (inclusive).</p> required <code>int | None</code> <p>The end cell position (exclusive).</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>A new Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.crop(start)","title":"<code>start</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop(end)","title":"<code>end</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop_extend","title":"crop_extend","text":"<pre><code>crop_extend(start, end, style)\n</code></pre> <p>Crop between two points, extending the length if required.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Start offset of crop.</p> required <code>int</code> <p>End offset of crop.</p> required <code>Style | None</code> <p>Style of additional padding.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>New cropped Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.crop_extend(start)","title":"<code>start</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop_extend(end)","title":"<code>end</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop_extend(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.divide","title":"divide","text":"<pre><code>divide(cuts)\n</code></pre> <p>Divide the strip in to multiple smaller strips by cutting at given (cell) indices.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[int]</code> <p>An iterable of cell positions as ints.</p> required <p>Returns:</p> Type Description <code>Sequence[Strip]</code> <p>A new list of strips.</p>"},{"location":"api/strip/#textual.strip.Strip.divide(cuts)","title":"<code>cuts</code>","text":""},{"location":"api/strip/#textual.strip.Strip.extend_cell_length","title":"extend_cell_length","text":"<pre><code>extend_cell_length(cell_length, style=None)\n</code></pre> <p>Extend the cell length if it is less than the given value.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Required minimum cell length.</p> required <code>Style | None</code> <p>Style for padding if the cell length is extended.</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>A new Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.extend_cell_length(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.extend_cell_length(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.from_lines","title":"from_lines  <code>classmethod</code>","text":"<pre><code>from_lines(lines, cell_length=None)\n</code></pre> <p>Convert lines (lists of segments) to a list of Strips.</p> <p>Parameters:</p> Name Type Description Default <code>list[list[Segment]]</code> <p>List of lines, where a line is a list of segments.</p> required <code>int | None</code> <p>Cell length of lines (must be same) or None if not known.</p> <code>None</code> <p>Returns:</p> Type Description <code>list[Strip]</code> <p>List of strips.</p>"},{"location":"api/strip/#textual.strip.Strip.from_lines(lines)","title":"<code>lines</code>","text":""},{"location":"api/strip/#textual.strip.Strip.from_lines(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.index_to_cell_position","title":"index_to_cell_position","text":"<pre><code>index_to_cell_position(index)\n</code></pre> <p>Given a character index, return the cell position of that character. This is the sum of the cell lengths of all the characters before the character at <code>index</code>.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index to convert.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The cell position of the character at <code>index</code>.</p>"},{"location":"api/strip/#textual.strip.Strip.index_to_cell_position(index)","title":"<code>index</code>","text":""},{"location":"api/strip/#textual.strip.Strip.join","title":"join  <code>classmethod</code>","text":"<pre><code>join(strips)\n</code></pre> <p>Join a number of strips in to one.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Strip | None]</code> <p>An iterable of Strips.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A new combined strip.</p>"},{"location":"api/strip/#textual.strip.Strip.join(strips)","title":"<code>strips</code>","text":""},{"location":"api/strip/#textual.strip.Strip.simplify","title":"simplify","text":"<pre><code>simplify()\n</code></pre> <p>Simplify the segments (join segments with same style)</p> <p>Returns:</p> Type Description <code>Strip</code> <p>New strip.</p>"},{"location":"api/strip/#textual.strip.Strip.style_links","title":"style_links","text":"<pre><code>style_links(link_id, link_style)\n</code></pre> <p>Apply a style to Segments with the given link_id.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A link id.</p> required <code>Style</code> <p>Style to apply.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>New strip (or same Strip if no changes).</p>"},{"location":"api/strip/#textual.strip.Strip.style_links(link_id)","title":"<code>link_id</code>","text":""},{"location":"api/strip/#textual.strip.Strip.style_links(link_style)","title":"<code>link_style</code>","text":""},{"location":"api/strip/#textual.strip.StripRenderable","title":"StripRenderable","text":"<pre><code>StripRenderable(strips, width=None)\n</code></pre> <p>A renderable which renders a list of strips in to lines.</p>"},{"location":"api/strip/#textual.strip.get_line_length","title":"get_line_length","text":"<pre><code>get_line_length(segments)\n</code></pre> <p>Get the line length (total length of all segments).</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Segment]</code> <p>Iterable of segments.</p> required <p>Returns:</p> Type Description <code>int</code> <p>Length of line in cells.</p>"},{"location":"api/strip/#textual.strip.get_line_length(segments)","title":"<code>segments</code>","text":""},{"location":"api/suggester/","title":"textual.suggester","text":"<p>Contains the <code>Suggester</code> class, used by the Input widget.</p>"},{"location":"api/suggester/#textual.suggester.SuggestFromList","title":"SuggestFromList","text":"<pre><code>SuggestFromList(suggestions, *, case_sensitive=True)\n</code></pre> <p>               Bases: <code>Suggester</code></p> <p>Give completion suggestions based on a fixed list of options.</p> Example <pre><code>countries = [\"England\", \"Scotland\", \"Portugal\", \"Spain\", \"France\"]\n\nclass MyApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        yield Input(suggester=SuggestFromList(countries, case_sensitive=False))\n</code></pre> <p>If the user types P inside the input widget, a completion suggestion for <code>\"Portugal\"</code> appears.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[str]</code> <p>Valid suggestions sorted by decreasing priority.</p> required <code>bool</code> <p>Whether suggestions are computed in a case sensitive manner or not. The values provided in the argument <code>suggestions</code> represent the canonical representation of the completions and they will be suggested with that same casing.</p> <code>True</code>"},{"location":"api/suggester/#textual.suggester.SuggestFromList(suggestions)","title":"<code>suggestions</code>","text":""},{"location":"api/suggester/#textual.suggester.SuggestFromList(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/suggester/#textual.suggester.SuggestFromList.get_suggestion","title":"get_suggestion  <code>async</code>","text":"<pre><code>get_suggestion(value)\n</code></pre> <p>Gets a completion from the given possibilities.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The current value.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A valid completion suggestion or <code>None</code>.</p>"},{"location":"api/suggester/#textual.suggester.SuggestFromList.get_suggestion(value)","title":"<code>value</code>","text":""},{"location":"api/suggester/#textual.suggester.Suggester","title":"Suggester","text":"<pre><code>Suggester(*, use_cache=True, case_sensitive=False)\n</code></pre> <p>               Bases: <code>ABC</code></p> <p>Defines how widgets generate completion suggestions.</p> <p>To define a custom suggester, subclass <code>Suggester</code> and implement the async method <code>get_suggestion</code>. See <code>SuggestFromList</code> for an example.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether to cache suggestion results.</p> <code>True</code> <code>bool</code> <p>Whether suggestions are case sensitive or not. If they are not, incoming values are casefolded before generating the suggestion.</p> <code>False</code>"},{"location":"api/suggester/#textual.suggester.Suggester(use_cache)","title":"<code>use_cache</code>","text":""},{"location":"api/suggester/#textual.suggester.Suggester(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/suggester/#textual.suggester.Suggester.cache","title":"cache  <code>instance-attribute</code>","text":"<pre><code>cache = LRUCache(1024) if use_cache else None\n</code></pre> <p>Suggestion cache, if used.</p>"},{"location":"api/suggester/#textual.suggester.Suggester.get_suggestion","title":"get_suggestion  <code>abstractmethod</code> <code>async</code>","text":"<pre><code>get_suggestion(value)\n</code></pre> <p>Try to get a completion suggestion for the given input value.</p> <p>Custom suggesters should implement this method.</p> Note <p>The value argument will be casefolded if <code>self.case_sensitive</code> is <code>False</code>.</p> Note <p>If your implementation is not deterministic, you may need to disable caching.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The current value of the requester widget.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A valid suggestion or <code>None</code>.</p>"},{"location":"api/suggester/#textual.suggester.Suggester.get_suggestion(value)","title":"<code>value</code>","text":""},{"location":"api/suggester/#textual.suggester.SuggestionReady","title":"SuggestionReady  <code>dataclass</code>","text":"<pre><code>SuggestionReady(value, suggestion)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Sent when a completion suggestion is ready.</p>"},{"location":"api/suggester/#textual.suggester.SuggestionReady.suggestion","title":"suggestion  <code>instance-attribute</code>","text":"<pre><code>suggestion\n</code></pre> <p>The string suggestion.</p>"},{"location":"api/suggester/#textual.suggester.SuggestionReady.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value\n</code></pre> <p>The value to which the suggestion is for.</p>"},{"location":"api/system_commands_source/","title":"textual.system_commands","text":"<p>This module contains <code>SystemCommands</code>, a command palette command provider for Textual system commands.</p> <p>This is a simple command provider that makes the most obvious application actions available via the command palette.</p> <p>Note</p> <p>The App base class installs this automatically.</p>"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider","title":"SystemCommandsProvider","text":"<pre><code>SystemCommandsProvider(screen, match_style=None)\n</code></pre> <p>               Bases: <code>Provider</code></p> <p>A source of command palette commands that run app-wide tasks.</p> <p>Used by default in <code>App.COMMANDS</code>.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[Any]</code> <p>A reference to the active screen.</p> required"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider(screen)","title":"<code>screen</code>","text":""},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider.discover","title":"discover  <code>async</code>","text":"<pre><code>discover()\n</code></pre> <p>Handle a request for the discovery commands for this provider.</p> <p>Yields:</p> Type Description <code>Hits</code> <p>Commands that can be discovered.</p>"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider.search","title":"search  <code>async</code>","text":"<pre><code>search(query)\n</code></pre> <p>Handle a request to search for system commands that match the query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The user input to be matched.</p> required <p>Yields:</p> Type Description <code>Hits</code> <p>Command hits for use in the command palette.</p>"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider.search(query)","title":"<code>query</code>","text":""},{"location":"api/timer/","title":"textual.timer","text":"<p>Contains the <code>Timer</code> class. Timer objects are created by set_interval or     set_timer.</p>"},{"location":"api/timer/#textual.timer.TimerCallback","title":"TimerCallback  <code>module-attribute</code>","text":"<pre><code>TimerCallback = Union[\n    Callable[[], Awaitable[Any]], Callable[[], Any]\n]\n</code></pre> <p>Type of valid callbacks to be used with timers.</p>"},{"location":"api/timer/#textual.timer.EventTargetGone","title":"EventTargetGone","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if the timer event target has been deleted prior to the timer event being sent.</p>"},{"location":"api/timer/#textual.timer.Timer","title":"Timer","text":"<pre><code>Timer(\n    event_target,\n    interval,\n    *,\n    name=None,\n    callback=None,\n    repeat=None,\n    skip=True,\n    pause=False\n)\n</code></pre> <p>A class to send timer-based events.</p> <p>Parameters:</p> Name Type Description Default <code>MessageTarget</code> <p>The object which will receive the timer events.</p> required <code>float</code> <p>The time between timer events, in seconds.</p> required <code>str | None</code> <p>A name to assign the event (for debugging).</p> <code>None</code> <code>TimerCallback | None</code> <p>A optional callback to invoke when the event is handled.</p> <code>None</code> <code>int | None</code> <p>The number of times to repeat the timer, or None to repeat forever.</p> <code>None</code> <code>bool</code> <p>Enable skipping of scheduled events that couldn't be sent in time.</p> <code>True</code> <code>bool</code> <p>Start the timer paused.</p> <code>False</code>"},{"location":"api/timer/#textual.timer.Timer(event_target)","title":"<code>event_target</code>","text":""},{"location":"api/timer/#textual.timer.Timer(interval)","title":"<code>interval</code>","text":""},{"location":"api/timer/#textual.timer.Timer(name)","title":"<code>name</code>","text":""},{"location":"api/timer/#textual.timer.Timer(callback)","title":"<code>callback</code>","text":""},{"location":"api/timer/#textual.timer.Timer(repeat)","title":"<code>repeat</code>","text":""},{"location":"api/timer/#textual.timer.Timer(skip)","title":"<code>skip</code>","text":""},{"location":"api/timer/#textual.timer.Timer(pause)","title":"<code>pause</code>","text":""},{"location":"api/timer/#textual.timer.Timer.pause","title":"pause","text":"<pre><code>pause()\n</code></pre> <p>Pause the timer.</p> <p>A paused timer will not send events until it is resumed.</p>"},{"location":"api/timer/#textual.timer.Timer.reset","title":"reset","text":"<pre><code>reset()\n</code></pre> <p>Reset the timer, so it starts from the beginning.</p>"},{"location":"api/timer/#textual.timer.Timer.resume","title":"resume","text":"<pre><code>resume()\n</code></pre> <p>Resume a paused timer.</p>"},{"location":"api/timer/#textual.timer.Timer.stop","title":"stop","text":"<pre><code>stop()\n</code></pre> <p>Stop the timer.</p> <p>Returns:</p> Type Description <code>Task</code> <p>A Task object. Await this to wait until the timer has completed.</p>"},{"location":"api/types/","title":"textual.types","text":"<p>Export some objects that are used by Textual and that help document other features.</p>"},{"location":"api/types/#textual.types.ActionParseResult","title":"ActionParseResult  <code>module-attribute</code>","text":"<pre><code>ActionParseResult = 'tuple[str, str, tuple[object, ...]]'\n</code></pre> <p>An action is its name and the arbitrary tuple of its arguments.</p>"},{"location":"api/types/#textual.types.AnimationLevel","title":"AnimationLevel  <code>module-attribute</code>","text":"<pre><code>AnimationLevel = Literal['none', 'basic', 'full']\n</code></pre> <p>The levels that the <code>TEXTUAL_ANIMATIONS</code> env var can be set to.</p>"},{"location":"api/types/#textual.types.CSSPathType","title":"CSSPathType  <code>module-attribute</code>","text":"<pre><code>CSSPathType = Union[\n    str, PurePath, List[Union[str, PurePath]]\n]\n</code></pre> <p>Valid ways of specifying paths to CSS files.</p>"},{"location":"api/types/#textual.types.CallbackType","title":"CallbackType  <code>module-attribute</code>","text":"<pre><code>CallbackType = Union[\n    Callable[[], Awaitable[None]], Callable[[], None]\n]\n</code></pre> <p>Type used for arbitrary callables used in callbacks.</p>"},{"location":"api/types/#textual.types.Direction","title":"Direction  <code>module-attribute</code>","text":"<pre><code>Direction = Literal[-1, 1]\n</code></pre> <p>Valid values to determine navigation direction.</p> <p>In a vertical setting, 1 points down and -1 points up. In a horizontal setting, 1 points right and -1 points left.</p>"},{"location":"api/types/#textual.types.EasingFunction","title":"EasingFunction  <code>module-attribute</code>","text":"<pre><code>EasingFunction = Callable[[float], float]\n</code></pre> <p>Signature for a function that parametrizes animation speed.</p> <p>An easing function must map the interval [0, 1] into the interval [0, 1].</p>"},{"location":"api/types/#textual.types.IgnoreReturnCallbackType","title":"IgnoreReturnCallbackType  <code>module-attribute</code>","text":"<pre><code>IgnoreReturnCallbackType = Union[\n    Callable[[], Awaitable[Any]], Callable[[], Any]\n]\n</code></pre> <p>A callback which ignores the return type.</p>"},{"location":"api/types/#textual.types.InputValidationOn","title":"InputValidationOn  <code>module-attribute</code>","text":"<pre><code>InputValidationOn = Literal['blur', 'changed', 'submitted']\n</code></pre> <p>Possible messages that trigger input validation.</p>"},{"location":"api/types/#textual.types.NewOptionListContent","title":"NewOptionListContent  <code>module-attribute</code>","text":"<pre><code>NewOptionListContent = (\n    \"OptionListContent | None | RenderableType\"\n)\n</code></pre> <p>The type of a new item of option list content to be added to an option list.</p> <p>This type represents all of the types that will be accepted when adding new content to the option list. This is a superset of <code>OptionListContent</code>.</p>"},{"location":"api/types/#textual.types.OptionListContent","title":"OptionListContent  <code>module-attribute</code>","text":"<pre><code>OptionListContent = 'Option | Separator'\n</code></pre> <p>The type of an item of content in the option list.</p> <p>This type represents all of the types that will be found in the list of content of the option list after it has been processed for addition.</p>"},{"location":"api/types/#textual.types.PlaceholderVariant","title":"PlaceholderVariant  <code>module-attribute</code>","text":"<pre><code>PlaceholderVariant = Literal['default', 'size', 'text']\n</code></pre> <p>The different variants of placeholder.</p>"},{"location":"api/types/#textual.types.SelectType","title":"SelectType  <code>module-attribute</code>","text":"<pre><code>SelectType = TypeVar('SelectType')\n</code></pre> <p>The type used for data in the Select.</p>"},{"location":"api/types/#textual.types.WatchCallbackType","title":"WatchCallbackType  <code>module-attribute</code>","text":"<pre><code>WatchCallbackType = Union[\n    WatchCallbackBothValuesType,\n    WatchCallbackNewValueType,\n    WatchCallbackNoArgsType,\n]\n</code></pre> <p>Type used for callbacks passed to the <code>watch</code> method of widgets.</p>"},{"location":"api/types/#textual.types.Animatable","title":"Animatable","text":"<p>               Bases: <code>Protocol</code></p> <p>Protocol for objects that can have their intrinsic values animated.</p> <p>For example, the transition between two colors can be animated because the class <code>Color</code> satisfies this protocol.</p>"},{"location":"api/types/#textual.types.CSSPathError","title":"CSSPathError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when supplied CSS path(s) are invalid.</p>"},{"location":"api/types/#textual.types.DirEntry","title":"DirEntry  <code>dataclass</code>","text":"<pre><code>DirEntry(path, loaded=False)\n</code></pre> <p>Attaches directory information to a <code>DirectoryTree</code> node.</p>"},{"location":"api/types/#textual.types.DirEntry.loaded","title":"loaded  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>loaded = False\n</code></pre> <p>Has this been loaded?</p>"},{"location":"api/types/#textual.types.DirEntry.path","title":"path  <code>instance-attribute</code>","text":"<pre><code>path\n</code></pre> <p>The path of the directory entry.</p>"},{"location":"api/types/#textual.types.DuplicateID","title":"DuplicateID","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if a duplicate ID is used when adding options to an option list.</p>"},{"location":"api/types/#textual.types.MessageTarget","title":"MessageTarget","text":"<p>               Bases: <code>Protocol</code></p> <p>Protocol that must be followed by objects that can receive messages.</p>"},{"location":"api/types/#textual.types.NoActiveAppError","title":"NoActiveAppError","text":"<p>               Bases: <code>RuntimeError</code></p> <p>Runtime error raised if we try to retrieve the active app when there is none.</p>"},{"location":"api/types/#textual.types.NoSelection","title":"NoSelection","text":"<p>Used by the <code>Select</code> widget to flag the unselected state. See <code>Select.BLANK</code>.</p>"},{"location":"api/types/#textual.types.OptionDoesNotExist","title":"OptionDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when a request has been made for an option that doesn't exist.</p>"},{"location":"api/types/#textual.types.RenderStyles","title":"RenderStyles","text":"<pre><code>RenderStyles(node, base, inline_styles)\n</code></pre> <p>               Bases: <code>StylesBase</code></p> <p>Presents a combined view of two Styles object: a base Styles and inline Styles.</p>"},{"location":"api/types/#textual.types.RenderStyles.base","title":"base  <code>property</code>","text":"<pre><code>base\n</code></pre> <p>Quick access to base (css) style.</p>"},{"location":"api/types/#textual.types.RenderStyles.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>Get the CSS for the combined styles.</p>"},{"location":"api/types/#textual.types.RenderStyles.gutter","title":"gutter  <code>property</code>","text":"<pre><code>gutter\n</code></pre> <p>Get space around widget.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Space around widget content.</p>"},{"location":"api/types/#textual.types.RenderStyles.inline","title":"inline  <code>property</code>","text":"<pre><code>inline\n</code></pre> <p>Quick access to the inline styles.</p>"},{"location":"api/types/#textual.types.RenderStyles.rich_style","title":"rich_style  <code>property</code>","text":"<pre><code>rich_style\n</code></pre> <p>Get a Rich style for this Styles object.</p>"},{"location":"api/types/#textual.types.RenderStyles.animate","title":"animate","text":"<pre><code>animate(\n    attribute,\n    value,\n    *,\n    final_value=...,\n    duration=None,\n    speed=None,\n    delay=0.0,\n    easing=DEFAULT_EASING,\n    on_complete=None,\n    level=\"full\"\n)\n</code></pre> <p>Animate an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute to animate.</p> required <code>str | float | Animatable</code> <p>The value to animate to.</p> required <code>object</code> <p>The final value of the animation. Defaults to <code>value</code> if not set.</p> <code>...</code> <code>float | None</code> <p>The duration (in seconds) of the animation.</p> <code>None</code> <code>float | None</code> <p>The speed of the animation.</p> <code>None</code> <code>float</code> <p>A delay (in seconds) before the animation starts.</p> <code>0.0</code> <code>EasingFunction | str</code> <p>An easing method.</p> <code>DEFAULT_EASING</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'full'</code>"},{"location":"api/types/#textual.types.RenderStyles.animate(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(value)","title":"<code>value</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(final_value)","title":"<code>final_value</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(duration)","title":"<code>duration</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(speed)","title":"<code>speed</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(delay)","title":"<code>delay</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(easing)","title":"<code>easing</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(level)","title":"<code>level</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.clear_rule","title":"clear_rule","text":"<pre><code>clear_rule(rule_name)\n</code></pre> <p>Clear a rule (from inline).</p>"},{"location":"api/types/#textual.types.RenderStyles.get_rules","title":"get_rules","text":"<pre><code>get_rules()\n</code></pre> <p>Get rules as a dictionary</p>"},{"location":"api/types/#textual.types.RenderStyles.has_rule","title":"has_rule","text":"<pre><code>has_rule(rule)\n</code></pre> <p>Check if a rule has been set.</p>"},{"location":"api/types/#textual.types.RenderStyles.merge","title":"merge","text":"<pre><code>merge(other)\n</code></pre> <p>Merge values from another Styles.</p> <p>Parameters:</p> Name Type Description Default <code>StylesBase</code> <p>A Styles object.</p> required"},{"location":"api/types/#textual.types.RenderStyles.merge(other)","title":"<code>other</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.reset","title":"reset","text":"<pre><code>reset()\n</code></pre> <p>Reset the rules to initial state.</p>"},{"location":"api/types/#textual.types.UnusedParameter","title":"UnusedParameter","text":"<p>Helper type for a parameter that isn't specified in a method call.</p>"},{"location":"api/validation/","title":"textual.validation","text":"<p>This module provides a number of classes for validating input.</p> <p>See Validating Input for details.</p>"},{"location":"api/validation/#textual.validation.Failure","title":"Failure  <code>dataclass</code>","text":"<pre><code>Failure(validator, value=None, description=None)\n</code></pre> <p>Information about a validation failure.</p>"},{"location":"api/validation/#textual.validation.Failure.description","title":"description  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>description = None\n</code></pre> <p>An optional override for describing this failure. Takes precedence over any messages set in the Validator.</p>"},{"location":"api/validation/#textual.validation.Failure.validator","title":"validator  <code>instance-attribute</code>","text":"<pre><code>validator\n</code></pre> <p>The Validator which produced the failure.</p>"},{"location":"api/validation/#textual.validation.Failure.value","title":"value  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>value = None\n</code></pre> <p>The value which resulted in validation failing.</p>"},{"location":"api/validation/#textual.validation.Function","title":"Function","text":"<pre><code>Function(function, failure_description=None)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>A flexible validator which allows you to provide custom validation logic.</p>"},{"location":"api/validation/#textual.validation.Function.function","title":"function  <code>instance-attribute</code>","text":"<pre><code>function = function\n</code></pre> <p>Function which takes the value to validate and returns True if valid, and False otherwise.</p>"},{"location":"api/validation/#textual.validation.Function.ReturnedFalse","title":"ReturnedFalse  <code>dataclass</code>","text":"<pre><code>ReturnedFalse(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates validation failed because the supplied function returned False.</p>"},{"location":"api/validation/#textual.validation.Function.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Function.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Function.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Validate that the supplied function returns True.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to pass into the supplied function.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A ValidationResult indicating success if the function returned True, and failure if the function return False.</p>"},{"location":"api/validation/#textual.validation.Function.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Integer","title":"Integer","text":"<pre><code>Integer(\n    minimum=None, maximum=None, failure_description=None\n)\n</code></pre> <p>               Bases: <code>Number</code></p> <p>Validator which ensures the value is an integer which falls within a range.</p>"},{"location":"api/validation/#textual.validation.Integer.NotAnInteger","title":"NotAnInteger  <code>dataclass</code>","text":"<pre><code>NotAnInteger(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the value not being a valid integer.</p>"},{"location":"api/validation/#textual.validation.Integer.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Integer.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Integer.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that <code>value</code> is an integer, optionally within a range.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Integer.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Length","title":"Length","text":"<pre><code>Length(\n    minimum=None, maximum=None, failure_description=None\n)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>Validate that a string is within a range (inclusive).</p>"},{"location":"api/validation/#textual.validation.Length.maximum","title":"maximum  <code>instance-attribute</code>","text":"<pre><code>maximum = maximum\n</code></pre> <p>The inclusive maximum length of the value, or None if unbounded.</p>"},{"location":"api/validation/#textual.validation.Length.minimum","title":"minimum  <code>instance-attribute</code>","text":"<pre><code>minimum = minimum\n</code></pre> <p>The inclusive minimum length of the value, or None if unbounded.</p>"},{"location":"api/validation/#textual.validation.Length.Incorrect","title":"Incorrect  <code>dataclass</code>","text":"<pre><code>Incorrect(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the length of the value being outside the range.</p>"},{"location":"api/validation/#textual.validation.Length.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Length.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Length.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that value falls within the maximum and minimum length constraints.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Length.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Number","title":"Number","text":"<pre><code>Number(\n    minimum=None, maximum=None, failure_description=None\n)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>Validator that ensures the value is a number, with an optional range check.</p>"},{"location":"api/validation/#textual.validation.Number.maximum","title":"maximum  <code>instance-attribute</code>","text":"<pre><code>maximum = maximum\n</code></pre> <p>The maximum value of the number, inclusive. If <code>None</code>, the maximum is unbounded.</p>"},{"location":"api/validation/#textual.validation.Number.minimum","title":"minimum  <code>instance-attribute</code>","text":"<pre><code>minimum = minimum\n</code></pre> <p>The minimum value of the number, inclusive. If <code>None</code>, the minimum is unbounded.</p>"},{"location":"api/validation/#textual.validation.Number.NotANumber","title":"NotANumber  <code>dataclass</code>","text":"<pre><code>NotANumber(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the value not being a valid number (decimal/integer, inc. scientific notation)</p>"},{"location":"api/validation/#textual.validation.Number.NotInRange","title":"NotInRange  <code>dataclass</code>","text":"<pre><code>NotInRange(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the number not being within the range [minimum, maximum].</p>"},{"location":"api/validation/#textual.validation.Number.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Number.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Number.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that <code>value</code> is a valid number, optionally within a range.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Number.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Regex","title":"Regex","text":"<pre><code>Regex(regex, flags=0, failure_description=None)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>A validator that checks the value matches a regex (via <code>re.fullmatch</code>).</p>"},{"location":"api/validation/#textual.validation.Regex.flags","title":"flags  <code>instance-attribute</code>","text":"<pre><code>flags = flags\n</code></pre> <p>The flags to pass to <code>re.fullmatch</code>.</p>"},{"location":"api/validation/#textual.validation.Regex.regex","title":"regex  <code>instance-attribute</code>","text":"<pre><code>regex = regex\n</code></pre> <p>The regex which we'll validate is matched by the value.</p>"},{"location":"api/validation/#textual.validation.Regex.NoResults","title":"NoResults  <code>dataclass</code>","text":"<pre><code>NoResults(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates validation failed because the regex could not be found within the value string.</p>"},{"location":"api/validation/#textual.validation.Regex.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Regex.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Regex.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that the value matches the regex.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value that should match the regex.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Regex.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.URL","title":"URL","text":"<pre><code>URL(failure_description=None)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>Validator that checks if a URL is valid (ensuring a scheme is present).</p>"},{"location":"api/validation/#textual.validation.URL.InvalidURL","title":"InvalidURL  <code>dataclass</code>","text":"<pre><code>InvalidURL(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates that the URL is not valid.</p>"},{"location":"api/validation/#textual.validation.URL.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.URL.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.URL.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Validates that <code>value</code> is a valid URL (contains a scheme).</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.URL.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.ValidationResult","title":"ValidationResult  <code>dataclass</code>","text":"<pre><code>ValidationResult(failures=list())\n</code></pre> <p>The result of calling a <code>Validator.validate</code> method.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failure_descriptions","title":"failure_descriptions  <code>property</code>","text":"<pre><code>failure_descriptions\n</code></pre> <p>Utility for extracting failure descriptions as strings.</p> <p>Useful if you don't care about the additional metadata included in the <code>Failure</code> objects.</p> <p>Returns:</p> Type Description <code>list[str]</code> <p>A list of the string descriptions explaining the failing validations.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failures","title":"failures  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>failures = field(default_factory=list)\n</code></pre> <p>A list of reasons why the value was invalid. Empty if valid=True</p>"},{"location":"api/validation/#textual.validation.ValidationResult.is_valid","title":"is_valid  <code>property</code>","text":"<pre><code>is_valid\n</code></pre> <p>True if the validation was successful.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failure","title":"failure  <code>staticmethod</code>","text":"<pre><code>failure(failures)\n</code></pre> <p>Construct a failure ValidationResult.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence[Failure]</code> <p>The failures.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A failure ValidationResult.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failure(failures)","title":"<code>failures</code>","text":""},{"location":"api/validation/#textual.validation.ValidationResult.merge","title":"merge  <code>staticmethod</code>","text":"<pre><code>merge(results)\n</code></pre> <p>Merge multiple ValidationResult objects into one.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence['ValidationResult']</code> <p>List of ValidationResult objects to merge.</p> required <p>Returns:</p> Type Description <code>'ValidationResult'</code> <p>Merged ValidationResult object.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.merge(results)","title":"<code>results</code>","text":""},{"location":"api/validation/#textual.validation.ValidationResult.success","title":"success  <code>staticmethod</code>","text":"<pre><code>success()\n</code></pre> <p>Construct a successful ValidationResult.</p> <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A successful ValidationResult.</p>"},{"location":"api/validation/#textual.validation.Validator","title":"Validator","text":"<pre><code>Validator(failure_description=None)\n</code></pre> <p>               Bases: <code>ABC</code></p> <p>Base class for the validation of string values.</p> <p>Commonly used in conjunction with the <code>Input</code> widget, which accepts a list of validators via its constructor. This validation framework can also be used to validate any 'stringly-typed' values (for example raw command line input from <code>sys.args</code>).</p> <p>To implement your own <code>Validator</code>, subclass this class.</p> Example <pre><code>class Palindrome(Validator):\n    def validate(self, value: str) -&gt; ValidationResult:\n        def is_palindrome(value: str) -&gt; bool:\n            return value == value[::-1]\n        return self.success() if is_palindrome(value) else self.failure(\"Not palindrome!\")\n</code></pre>"},{"location":"api/validation/#textual.validation.Validator.failure_description","title":"failure_description  <code>instance-attribute</code>","text":"<pre><code>failure_description = failure_description\n</code></pre> <p>A description of why the validation failed.</p> <p>The description (intended to be user-facing) to attached to the Failure if the validation fails. This failure description is ultimately accessible at the time of validation failure  via the <code>Input.Changed</code> or <code>Input.Submitted</code> event, and you can access it on your message handler (a method called, for example, <code>on_input_changed</code> or a method decorated with <code>@on(Input.Changed)</code>.</p>"},{"location":"api/validation/#textual.validation.Validator.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Return a string description of the Failure.</p> <p>Used to provide a more fine-grained description of the failure. A Validator could fail for multiple reasons, so this method could be used to provide a different reason for different types of failure.</p> <p>Warning</p> <p>This method is only called if no other description has been supplied. If you supply a description inside a call to <code>self.failure(description=\"...\")</code>, or pass a description into the constructor of the validator, those will take priority, and this method won't be called.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Validator.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Validator.failure","title":"failure","text":"<pre><code>failure(description=None, value=None, failures=None)\n</code></pre> <p>Shorthand for signaling validation failure.</p> <p>You can return failure(...) from a <code>Validator.validate</code> implementation to signal validation succeeded.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The failure description that will be used. When used in conjunction with the Input widget, this is the description that will ultimately be available inside the handler for <code>Input.Changed</code>. If not supplied, the <code>failure_description</code> from the <code>Validator</code> will be used. If that is not supplied either, then the <code>describe_failure</code> method on <code>Validator</code> will be called.</p> <code>None</code> <code>str | None</code> <p>The value that was considered invalid. This is optional, and only needs to be supplied if required in your <code>Input.Changed</code> handler.</p> <code>None</code> <code>Failure | Sequence[Failure] | None</code> <p>The reasons the validator failed. If not supplied, a generic <code>Failure</code> will be included in the ValidationResult returned from this function.</p> <code>None</code> <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A ValidationResult representing failed validation, and containing the metadata supplied to this function.</p>"},{"location":"api/validation/#textual.validation.Validator.failure(description)","title":"<code>description</code>","text":""},{"location":"api/validation/#textual.validation.Validator.failure(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Validator.failure(failures)","title":"<code>failures</code>","text":""},{"location":"api/validation/#textual.validation.Validator.success","title":"success","text":"<pre><code>success()\n</code></pre> <p>Shorthand for <code>ValidationResult(True)</code>.</p> <p>You can return success() from a <code>Validator.validate</code> method implementation to signal that validation has succeeded.</p> <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A ValidationResult indicating validation succeeded.</p>"},{"location":"api/validation/#textual.validation.Validator.validate","title":"validate  <code>abstractmethod</code>","text":"<pre><code>validate(value)\n</code></pre> <p>Validate the value and return a ValidationResult describing the outcome of the validation.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Validator.validate(value)","title":"<code>value</code>","text":""},{"location":"api/walk/","title":"textual.walk","text":"<p>Functions for walking the DOM.</p> <p>Note</p> <p>For most purposes you would be better off using query, which uses these functions internally.</p>"},{"location":"api/walk/#textual.walk.walk_breadth_first","title":"walk_breadth_first","text":"<pre><code>walk_breadth_first(\n    root: DOMNode, *, with_root: bool = True\n) -&gt; Iterable[DOMNode]\n</code></pre><pre><code>walk_breadth_first(\n    root: WalkType,\n    filter_type: type[WalkType],\n    *,\n    with_root: bool = True\n) -&gt; Iterable[WalkType]\n</code></pre> <pre><code>walk_breadth_first(\n    root, filter_type=None, *, with_root=True\n)\n</code></pre> <p>Walk the tree breadth first (children first).</p> <p>Note</p> <p>Avoid changing the DOM (mounting, removing etc.) while iterating with this function. Consider walk_children which doesn't have this limitation.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The root note (starting point).</p> required <code>type[WalkType] | None</code> <p>Optional DOMNode subclass to filter by, or <code>None</code> for no filter.</p> <code>None</code> <code>bool</code> <p>Include the root in the walk.</p> <code>True</code> <p>Returns:</p> Type Description <code>Iterable[DOMNode] | Iterable[WalkType]</code> <p>An iterable of DOMNodes, or the type specified in <code>filter_type</code>.</p>"},{"location":"api/walk/#textual.walk.walk_breadth_first(root)","title":"<code>root</code>","text":""},{"location":"api/walk/#textual.walk.walk_breadth_first(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/walk/#textual.walk.walk_breadth_first(with_root)","title":"<code>with_root</code>","text":""},{"location":"api/walk/#textual.walk.walk_depth_first","title":"walk_depth_first","text":"<pre><code>walk_depth_first(\n    root: DOMNode, *, with_root: bool = True\n) -&gt; Iterable[DOMNode]\n</code></pre><pre><code>walk_depth_first(\n    root: WalkType,\n    filter_type: type[WalkType],\n    *,\n    with_root: bool = True\n) -&gt; Iterable[WalkType]\n</code></pre> <pre><code>walk_depth_first(root, filter_type=None, *, with_root=True)\n</code></pre> <p>Walk the tree depth first (parents first).</p> <p>Note</p> <p>Avoid changing the DOM (mounting, removing etc.) while iterating with this function. Consider walk_children which doesn't have this limitation.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The root note (starting point).</p> required <code>type[WalkType] | None</code> <p>Optional DOMNode subclass to filter by, or <code>None</code> for no filter.</p> <code>None</code> <code>bool</code> <p>Include the root in the walk.</p> <code>True</code> <p>Returns:</p> Type Description <code>Iterable[DOMNode] | Iterable[WalkType]</code> <p>An iterable of DOMNodes, or the type specified in <code>filter_type</code>.</p>"},{"location":"api/walk/#textual.walk.walk_depth_first(root)","title":"<code>root</code>","text":""},{"location":"api/walk/#textual.walk.walk_depth_first(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/walk/#textual.walk.walk_depth_first(with_root)","title":"<code>with_root</code>","text":""},{"location":"api/widget/","title":"textual.widget","text":"<p>This module contains the <code>Widget</code> class, the base class for all widgets.</p>"},{"location":"api/widget/#textual.widget.AwaitMount","title":"AwaitMount","text":"<pre><code>AwaitMount(parent, widgets)\n</code></pre> <p>An optional awaitable returned by mount and mount_all.</p> Example <pre><code>await self.mount(Static(\"foo\"))\n</code></pre>"},{"location":"api/widget/#textual.widget.BadWidgetName","title":"BadWidgetName","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when widget class names do not satisfy the required restrictions.</p>"},{"location":"api/widget/#textual.widget.MountError","title":"MountError","text":"<p>               Bases: <code>WidgetError</code></p> <p>Error raised when there was a problem with the mount request.</p>"},{"location":"api/widget/#textual.widget.PseudoClasses","title":"PseudoClasses","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Used for render/render_line based widgets that use caching. This structure can be used as a cache-key.</p>"},{"location":"api/widget/#textual.widget.PseudoClasses.enabled","title":"enabled  <code>instance-attribute</code>","text":"<pre><code>enabled\n</code></pre> <p>Is 'enabled' applied?</p>"},{"location":"api/widget/#textual.widget.PseudoClasses.focus","title":"focus  <code>instance-attribute</code>","text":"<pre><code>focus\n</code></pre> <p>Is 'focus' applied?</p>"},{"location":"api/widget/#textual.widget.PseudoClasses.hover","title":"hover  <code>instance-attribute</code>","text":"<pre><code>hover\n</code></pre> <p>Is 'hover' applied?</p>"},{"location":"api/widget/#textual.widget.Widget","title":"Widget","text":"<pre><code>Widget(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>DOMNode</code></p> <p>A Widget is the base class for Textual widgets.</p> <p>See also static for starting point for your own widgets.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/widget/#textual.widget.Widget(*children)","title":"<code>*children</code>","text":""},{"location":"api/widget/#textual.widget.Widget(name)","title":"<code>name</code>","text":""},{"location":"api/widget/#textual.widget.Widget(id)","title":"<code>id</code>","text":""},{"location":"api/widget/#textual.widget.Widget(classes)","title":"<code>classes</code>","text":""},{"location":"api/widget/#textual.widget.Widget(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/widget/#textual.widget.Widget.ALLOW_MAXIMIZE","title":"ALLOW_MAXIMIZE  <code>class-attribute</code>","text":"<pre><code>ALLOW_MAXIMIZE = None\n</code></pre> <p>Defines default logic to allow the widget to be maximized.</p> <ul> <li><code>None</code> Use default behavior (Focusable widgets may be maximized)</li> <li><code>False</code> Do not allow widget to be maximized</li> <li><code>True</code> Allow widget to be maximized</li> </ul>"},{"location":"api/widget/#textual.widget.Widget.BORDER_SUBTITLE","title":"BORDER_SUBTITLE  <code>class-attribute</code>","text":"<pre><code>BORDER_SUBTITLE = ''\n</code></pre> <p>Initial value for border_subtitle attribute.</p>"},{"location":"api/widget/#textual.widget.Widget.BORDER_TITLE","title":"BORDER_TITLE  <code>class-attribute</code>","text":"<pre><code>BORDER_TITLE = ''\n</code></pre> <p>Initial value for border_title attribute.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_horizontal_scroll","title":"allow_horizontal_scroll  <code>property</code>","text":"<pre><code>allow_horizontal_scroll\n</code></pre> <p>Check if horizontal scroll is permitted.</p> <p>May be overridden if you want different logic regarding allowing scrolling.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_maximize","title":"allow_maximize  <code>property</code>","text":"<pre><code>allow_maximize\n</code></pre> <p>Check if the widget may be maximized.</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may be maximized, or <code>False</code> if it should not be maximized.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_vertical_scroll","title":"allow_vertical_scroll  <code>property</code>","text":"<pre><code>allow_vertical_scroll\n</code></pre> <p>Check if vertical scroll is permitted.</p> <p>May be overridden if you want different logic regarding allowing scrolling.</p>"},{"location":"api/widget/#textual.widget.Widget.auto_links","title":"auto_links  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_links = Reactive(True)\n</code></pre> <p>Widget will highlight links automatically.</p>"},{"location":"api/widget/#textual.widget.Widget.border_subtitle","title":"border_subtitle  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>border_subtitle = _BorderTitle()\n</code></pre> <p>A title to show in the bottom border (if there is one).</p>"},{"location":"api/widget/#textual.widget.Widget.border_title","title":"border_title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>border_title = _BorderTitle()\n</code></pre> <p>A title to show in the top border (if there is one).</p>"},{"location":"api/widget/#textual.widget.Widget.can_focus","title":"can_focus  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>can_focus = False\n</code></pre> <p>Widget may receive focus.</p>"},{"location":"api/widget/#textual.widget.Widget.can_focus_children","title":"can_focus_children  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>can_focus_children = True\n</code></pre> <p>Widget's children may receive focus.</p>"},{"location":"api/widget/#textual.widget.Widget.container_size","title":"container_size  <code>property</code>","text":"<pre><code>container_size\n</code></pre> <p>The size of the container (parent widget).</p> <p>Returns:</p> Type Description <code>Size</code> <p>Container size.</p>"},{"location":"api/widget/#textual.widget.Widget.container_viewport","title":"container_viewport  <code>property</code>","text":"<pre><code>container_viewport\n</code></pre> <p>The viewport region (parent window).</p> <p>Returns:</p> Type Description <code>Region</code> <p>The region that contains this widget.</p>"},{"location":"api/widget/#textual.widget.Widget.content_offset","title":"content_offset  <code>property</code>","text":"<pre><code>content_offset\n</code></pre> <p>An offset from the Widget origin where the content begins.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Offset from widget's origin.</p>"},{"location":"api/widget/#textual.widget.Widget.content_region","title":"content_region  <code>property</code>","text":"<pre><code>content_region\n</code></pre> <p>Gets an absolute region containing the content (minus padding and border).</p> <p>Returns:</p> Type Description <code>Region</code> <p>Screen region that contains a widget's content.</p>"},{"location":"api/widget/#textual.widget.Widget.content_size","title":"content_size  <code>property</code>","text":"<pre><code>content_size\n</code></pre> <p>The size of the content area.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Content area size.</p>"},{"location":"api/widget/#textual.widget.Widget.disabled","title":"disabled  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>disabled = disabled\n</code></pre> <p>Is the widget disabled? Disabled widgets can not be interacted with, and are typically styled to look dimmer.</p>"},{"location":"api/widget/#textual.widget.Widget.dock_gutter","title":"dock_gutter  <code>property</code>","text":"<pre><code>dock_gutter\n</code></pre> <p>Space allocated to docks in the parent.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Space to be subtracted from scrollable area.</p>"},{"location":"api/widget/#textual.widget.Widget.expand","title":"expand  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>expand = Reactive(False)\n</code></pre> <p>Rich renderable may expand beyond optimal size.</p>"},{"location":"api/widget/#textual.widget.Widget.focusable","title":"focusable  <code>property</code>","text":"<pre><code>focusable\n</code></pre> <p>Can this widget currently be focused?</p>"},{"location":"api/widget/#textual.widget.Widget.gutter","title":"gutter  <code>property</code>","text":"<pre><code>gutter\n</code></pre> <p>Spacing for padding / border / scrollbars.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Additional spacing around content area.</p>"},{"location":"api/widget/#textual.widget.Widget.has_focus","title":"has_focus  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>has_focus = Reactive(False, repaint=False)\n</code></pre> <p>Does this widget have focus? Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.highlight_link_id","title":"highlight_link_id  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlight_link_id = Reactive('')\n</code></pre> <p>The currently highlighted link id. Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.horizontal_scrollbar","title":"horizontal_scrollbar  <code>property</code>","text":"<pre><code>horizontal_scrollbar\n</code></pre> <p>The horizontal scrollbar.</p> Note <p>This will create a scrollbar if one doesn't exist.</p> <p>Returns:</p> Type Description <code>ScrollBar</code> <p>ScrollBar Widget.</p>"},{"location":"api/widget/#textual.widget.Widget.hover_style","title":"hover_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>hover_style = Reactive(Style, repaint=False)\n</code></pre> <p>The current hover style (style under the mouse cursor). Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.is_anchored","title":"is_anchored  <code>property</code>","text":"<pre><code>is_anchored\n</code></pre> <p>Is this widget anchored?</p>"},{"location":"api/widget/#textual.widget.Widget.is_container","title":"is_container  <code>property</code>","text":"<pre><code>is_container\n</code></pre> <p>Is this widget a container (contains other widgets)?</p>"},{"location":"api/widget/#textual.widget.Widget.is_horizontal_scroll_end","title":"is_horizontal_scroll_end  <code>property</code>","text":"<pre><code>is_horizontal_scroll_end\n</code></pre> <p>Is the horizontal scroll position at the maximum?</p>"},{"location":"api/widget/#textual.widget.Widget.is_horizontal_scrollbar_grabbed","title":"is_horizontal_scrollbar_grabbed  <code>property</code>","text":"<pre><code>is_horizontal_scrollbar_grabbed\n</code></pre> <p>Is the user dragging the vertical scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.is_maximized","title":"is_maximized  <code>property</code>","text":"<pre><code>is_maximized\n</code></pre> <p>Is this widget maximized?</p>"},{"location":"api/widget/#textual.widget.Widget.is_mounted","title":"is_mounted  <code>property</code>","text":"<pre><code>is_mounted\n</code></pre> <p>Check if this widget is mounted.</p>"},{"location":"api/widget/#textual.widget.Widget.is_mouse_over","title":"is_mouse_over  <code>property</code>","text":"<pre><code>is_mouse_over\n</code></pre> <p>Is the mouse currently over this widget?</p> <p>Note this will be <code>True</code> if the mouse pointer is within the widget's region, even if the mouse pointer is not directly over the widget (there could be another widget between the mouse pointer and self).</p>"},{"location":"api/widget/#textual.widget.Widget.is_scrollable","title":"is_scrollable  <code>property</code>","text":"<pre><code>is_scrollable\n</code></pre> <p>Can this widget be scrolled?</p>"},{"location":"api/widget/#textual.widget.Widget.is_vertical_scroll_end","title":"is_vertical_scroll_end  <code>property</code>","text":"<pre><code>is_vertical_scroll_end\n</code></pre> <p>Is the vertical scroll position at the maximum?</p>"},{"location":"api/widget/#textual.widget.Widget.is_vertical_scrollbar_grabbed","title":"is_vertical_scrollbar_grabbed  <code>property</code>","text":"<pre><code>is_vertical_scrollbar_grabbed\n</code></pre> <p>Is the user dragging the vertical scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.layer","title":"layer  <code>property</code>","text":"<pre><code>layer\n</code></pre> <p>Get the name of this widgets layer.</p> <p>Returns:</p> Type Description <code>str</code> <p>Name of layer.</p>"},{"location":"api/widget/#textual.widget.Widget.layers","title":"layers  <code>property</code>","text":"<pre><code>layers\n</code></pre> <p>Layers of from parent.</p> <p>Returns:</p> Type Description <code>tuple[str, ...]</code> <p>Tuple of layer names.</p>"},{"location":"api/widget/#textual.widget.Widget.link_style","title":"link_style  <code>property</code>","text":"<pre><code>link_style\n</code></pre> <p>Style of links.</p> <p>Returns:</p> Type Description <code>Style</code> <p>Rich style.</p>"},{"location":"api/widget/#textual.widget.Widget.link_style_hover","title":"link_style_hover  <code>property</code>","text":"<pre><code>link_style_hover\n</code></pre> <p>Style of links underneath the mouse cursor.</p> <p>Returns:</p> Type Description <code>Style</code> <p>Rich Style.</p>"},{"location":"api/widget/#textual.widget.Widget.loading","title":"loading  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>loading = Reactive(False)\n</code></pre> <p>If set to <code>True</code> this widget will temporarily be replaced with a loading indicator.</p>"},{"location":"api/widget/#textual.widget.Widget.lock","title":"lock  <code>instance-attribute</code>","text":"<pre><code>lock = RLock()\n</code></pre> <p><code>asyncio</code> lock to be used to synchronize the state of the widget.</p> <p>Two different tasks might call methods on a widget at the same time, which might result in a race condition. This can be fixed by adding <code>async with widget.lock:</code> around the method calls.</p>"},{"location":"api/widget/#textual.widget.Widget.max_scroll_x","title":"max_scroll_x  <code>property</code>","text":"<pre><code>max_scroll_x\n</code></pre> <p>The maximum value of <code>scroll_x</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.max_scroll_y","title":"max_scroll_y  <code>property</code>","text":"<pre><code>max_scroll_y\n</code></pre> <p>The maximum value of <code>scroll_y</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.mouse_hover","title":"mouse_hover  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>mouse_hover = Reactive(False, repaint=False)\n</code></pre> <p>Is the mouse over this widget? Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.offset","title":"offset  <code>property</code> <code>writable</code>","text":"<pre><code>offset\n</code></pre> <p>Widget offset from origin.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Relative offset.</p>"},{"location":"api/widget/#textual.widget.Widget.opacity","title":"opacity  <code>property</code>","text":"<pre><code>opacity\n</code></pre> <p>Total opacity of widget.</p>"},{"location":"api/widget/#textual.widget.Widget.outer_size","title":"outer_size  <code>property</code>","text":"<pre><code>outer_size\n</code></pre> <p>The size of the widget (including padding and border).</p> <p>Returns:</p> Type Description <code>Size</code> <p>Outer size.</p>"},{"location":"api/widget/#textual.widget.Widget.region","title":"region  <code>property</code>","text":"<pre><code>region\n</code></pre> <p>The region occupied by this widget, relative to the Screen.</p> <p>Raises:</p> Type Description <code>NoScreen</code> <p>If there is no screen.</p> <code>NoWidget</code> <p>If the widget is not on the screen.</p> <p>Returns:</p> Type Description <code>Region</code> <p>Region within screen occupied by widget.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_offset","title":"scroll_offset  <code>property</code>","text":"<pre><code>scroll_offset\n</code></pre> <p>Get the current scroll offset.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Offset a container has been scrolled by.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_x","title":"scroll_x  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>scroll_x = Reactive(0.0, repaint=False, layout=False)\n</code></pre> <p>The scroll position on the X axis.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_y","title":"scroll_y  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>scroll_y = Reactive(0.0, repaint=False, layout=False)\n</code></pre> <p>The scroll position on the Y axis.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollable_content_region","title":"scrollable_content_region  <code>property</code>","text":"<pre><code>scrollable_content_region\n</code></pre> <p>Gets an absolute region containing the scrollable content (minus padding, border, and scrollbars).</p> <p>Returns:</p> Type Description <code>Region</code> <p>Screen region that contains a widget's content.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollable_size","title":"scrollable_size  <code>property</code>","text":"<pre><code>scrollable_size\n</code></pre> <p>The size of the scrollable content.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Scrollable content size.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_corner","title":"scrollbar_corner  <code>property</code>","text":"<pre><code>scrollbar_corner\n</code></pre> <p>The scrollbar corner.</p> Note <p>This will create a scrollbar corner if one doesn't exist.</p> <p>Returns:</p> Type Description <code>ScrollBarCorner</code> <p>ScrollBarCorner Widget.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_gutter","title":"scrollbar_gutter  <code>property</code>","text":"<pre><code>scrollbar_gutter\n</code></pre> <p>Spacing required to fit scrollbar(s).</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Scrollbar gutter spacing.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_size_horizontal","title":"scrollbar_size_horizontal  <code>property</code>","text":"<pre><code>scrollbar_size_horizontal\n</code></pre> <p>Get the height used by the horizontal scrollbar.</p> <p>Returns:</p> Type Description <code>int</code> <p>Number of rows in the horizontal scrollbar.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_size_vertical","title":"scrollbar_size_vertical  <code>property</code>","text":"<pre><code>scrollbar_size_vertical\n</code></pre> <p>Get the width used by the vertical scrollbar.</p> <p>Returns:</p> Type Description <code>int</code> <p>Number of columns in the vertical scrollbar.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbars_enabled","title":"scrollbars_enabled  <code>property</code>","text":"<pre><code>scrollbars_enabled\n</code></pre> <p>A tuple of booleans that indicate if scrollbars are enabled.</p> <p>Returns:</p> Type Description <code>tuple[bool, bool]</code> <p>A tuple of (, )"},{"location":"api/widget/#textual.widget.Widget.scrollbars_space","title":"scrollbars_space  <code>property</code>","text":"<pre><code>scrollbars_space\n</code></pre> <p>The number of cells occupied by scrollbars for width and height</p>"},{"location":"api/widget/#textual.widget.Widget.show_horizontal_scrollbar","title":"show_horizontal_scrollbar  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_horizontal_scrollbar = Reactive(False, layout=True)\n</code></pre> <p>Show a horizontal scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.show_vertical_scrollbar","title":"show_vertical_scrollbar  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_vertical_scrollbar = Reactive(False, layout=True)\n</code></pre> <p>Show a vertical scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.shrink","title":"shrink  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>shrink = Reactive(True)\n</code></pre> <p>Rich renderable may shrink below optimal size.</p>"},{"location":"api/widget/#textual.widget.Widget.siblings","title":"siblings  <code>property</code>","text":"<pre><code>siblings\n</code></pre> <p>Get the widget's siblings (self is removed from the return list).</p> <p>Returns:</p> Type Description <code>list[Widget]</code> <p>A list of siblings.</p>"},{"location":"api/widget/#textual.widget.Widget.size","title":"size  <code>property</code>","text":"<pre><code>size\n</code></pre> <p>The size of the content area.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Content area size.</p>"},{"location":"api/widget/#textual.widget.Widget.tooltip","title":"tooltip  <code>property</code> <code>writable</code>","text":"<pre><code>tooltip\n</code></pre> <p>Tooltip for the widget, or <code>None</code> for no tooltip.</p>"},{"location":"api/widget/#textual.widget.Widget.vertical_scrollbar","title":"vertical_scrollbar  <code>property</code>","text":"<pre><code>vertical_scrollbar\n</code></pre> <p>The vertical scrollbar (create if necessary).</p> Note <p>This will create a scrollbar if one doesn't exist.</p> <p>Returns:</p> Type Description <code>ScrollBar</code> <p>ScrollBar Widget.</p>"},{"location":"api/widget/#textual.widget.Widget.virtual_region","title":"virtual_region  <code>property</code>","text":"<pre><code>virtual_region\n</code></pre> <p>The widget region relative to its container (which may not be visible, depending on scroll offset).</p> <p>Returns:</p> Type Description <code>Region</code> <p>The virtual region.</p>"},{"location":"api/widget/#textual.widget.Widget.virtual_region_with_margin","title":"virtual_region_with_margin  <code>property</code>","text":"<pre><code>virtual_region_with_margin\n</code></pre> <p>The widget region relative to its container (including margin), which may not be visible, depending on the scroll offset.</p> <p>Returns:</p> Type Description <code>Region</code> <p>The virtual region of the Widget, inclusive of its margin.</p>"},{"location":"api/widget/#textual.widget.Widget.virtual_size","title":"virtual_size  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>virtual_size = Reactive(Size(0, 0), layout=True)\n</code></pre> <p>The virtual (scrollable) size of the widget.</p>"},{"location":"api/widget/#textual.widget.Widget.visible_siblings","title":"visible_siblings  <code>property</code>","text":"<pre><code>visible_siblings\n</code></pre> <p>A list of siblings which will be shown.</p> <p>Returns:</p> Type Description <code>list[Widget]</code> <p>List of siblings.</p>"},{"location":"api/widget/#textual.widget.Widget.window_region","title":"window_region  <code>property</code>","text":"<pre><code>window_region\n</code></pre> <p>The region within the scrollable area that is currently visible.</p> <p>Returns:</p> Type Description <code>Region</code> <p>New region.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_focus","title":"allow_focus","text":"<pre><code>allow_focus()\n</code></pre> <p>Check if the widget is permitted to focus.</p> <p>The base class returns <code>can_focus</code>. This method may be overridden if additional logic is required.</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may be focused, or <code>False</code> if it may not be focused.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_focus_children","title":"allow_focus_children","text":"<pre><code>allow_focus_children()\n</code></pre> <p>Check if a widget's children may be focused.</p> <p>The base class returns <code>can_focus_children</code>. This method may be overridden if additional logic is required.</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget's children may be focused, or <code>False</code> if the widget's children may not be focused.</p>"},{"location":"api/widget/#textual.widget.Widget.anchor","title":"anchor","text":"<pre><code>anchor(*, animate=False)\n</code></pre> <p>Anchor the widget, which scrolls it into view (like scroll_visible), but also keeps it in view if the widget's size changes, or the size of its container changes.</p> <p>Note</p> <p>Anchored widgets will be un-anchored if the users scrolls the container.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p><code>True</code> if the scroll should animate, or <code>False</code> if it shouldn't.</p> <code>False</code>"},{"location":"api/widget/#textual.widget.Widget.anchor(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate","title":"animate","text":"<pre><code>animate(\n    attribute,\n    value,\n    *,\n    final_value=...,\n    duration=None,\n    speed=None,\n    delay=0.0,\n    easing=DEFAULT_EASING,\n    on_complete=None,\n    level=\"full\"\n)\n</code></pre> <p>Animate an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute to animate.</p> required <code>float | Animatable</code> <p>The value to animate to.</p> required <code>object</code> <p>The final value of the animation. Defaults to <code>value</code> if not set.</p> <code>...</code> <code>float | None</code> <p>The duration (in seconds) of the animation.</p> <code>None</code> <code>float | None</code> <p>The speed of the animation.</p> <code>None</code> <code>float</code> <p>A delay (in seconds) before the animation starts.</p> <code>0.0</code> <code>EasingFunction | str</code> <p>An easing method.</p> <code>DEFAULT_EASING</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'full'</code>"},{"location":"api/widget/#textual.widget.Widget.animate(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(value)","title":"<code>value</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(final_value)","title":"<code>final_value</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(delay)","title":"<code>delay</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.batch","title":"batch  <code>async</code>","text":"<pre><code>batch()\n</code></pre> <p>Async context manager that combines widget locking and update batching.</p> <p>Use this async context manager whenever you want to acquire the widget lock and batch app updates at the same time.</p> Example <pre><code>async with container.batch():\n    await container.remove_children(Button)\n    await container.mount(Label(\"All buttons are gone.\"))\n</code></pre>"},{"location":"api/widget/#textual.widget.Widget.begin_capture_print","title":"begin_capture_print","text":"<pre><code>begin_capture_print(stdout=True, stderr=True)\n</code></pre> <p>Capture text from print statements (or writes to stdout / stderr).</p> <p>If printing is captured, the widget will be sent an <code>events.Print</code> message.</p> <p>Call <code>end_capture_print</code> to disable print capture.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether to capture stdout.</p> <code>True</code> <code>bool</code> <p>Whether to capture stderr.</p> <code>True</code>"},{"location":"api/widget/#textual.widget.Widget.begin_capture_print(stdout)","title":"<code>stdout</code>","text":""},{"location":"api/widget/#textual.widget.Widget.begin_capture_print(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/widget/#textual.widget.Widget.blur","title":"blur","text":"<pre><code>blur()\n</code></pre> <p>Blur (un-focus) the widget.</p> <p>Focus will be moved to the next available widget in the focus chain..</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Widget</code> instance.</p>"},{"location":"api/widget/#textual.widget.Widget.can_view","title":"can_view","text":"<pre><code>can_view(widget)\n</code></pre> <p>Check if a given widget is in the current view (scrollable area).</p> <p>Note: This doesn't necessarily equate to a widget being visible. There are other reasons why a widget may not be visible.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget that is a descendant of self.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the entire widget is in view, False if it is partially visible or not in view.</p>"},{"location":"api/widget/#textual.widget.Widget.can_view(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.capture_mouse","title":"capture_mouse","text":"<pre><code>capture_mouse(capture=True)\n</code></pre> <p>Capture (or release) the mouse.</p> <p>When captured, mouse events will go to this widget even when the pointer is not directly over the widget.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True to capture or False to release.</p> <code>True</code>"},{"location":"api/widget/#textual.widget.Widget.capture_mouse(capture)","title":"<code>capture</code>","text":""},{"location":"api/widget/#textual.widget.Widget.check_message_enabled","title":"check_message_enabled","text":"<pre><code>check_message_enabled(message)\n</code></pre> <p>Check if a given message is enabled (allowed to be sent).</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>A message object</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the message will be sent, or <code>False</code> if it is disabled.</p>"},{"location":"api/widget/#textual.widget.Widget.check_message_enabled(message)","title":"<code>message</code>","text":""},{"location":"api/widget/#textual.widget.Widget.clear_anchor","title":"clear_anchor","text":"<pre><code>clear_anchor()\n</code></pre> <p>Stop anchoring this widget (a no-op if this widget is not anchored).</p>"},{"location":"api/widget/#textual.widget.Widget.clear_cached_dimensions","title":"clear_cached_dimensions","text":"<pre><code>clear_cached_dimensions()\n</code></pre> <p>Clear cached results of <code>get_content_width</code> and <code>get_content_height</code>.</p> <p>Call if the widget's renderable changes size after the widget has been created.</p> <p>Note</p> <p>This is not required if you are extending <code>Static</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.compose","title":"compose","text":"<pre><code>compose()\n</code></pre> <p>Called by Textual to create child widgets.</p> <p>This method is called when a widget is mounted or by setting <code>recompose=True</code> when calling <code>refresh()</code>.</p> <p>Note that you don't typically need to explicitly call this method.</p> Example <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Header()\n    yield Label(\"Press the button below:\")\n    yield Button()\n    yield Footer()\n</code></pre>"},{"location":"api/widget/#textual.widget.Widget.compose_add_child","title":"compose_add_child","text":"<pre><code>compose_add_child(widget)\n</code></pre> <p>Add a node to children.</p> <p>This is used by the compose process when it adds children. There is no need to use it directly, but you may want to override it in a subclass if you want children to be attached to a different node.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A Widget to add.</p> required"},{"location":"api/widget/#textual.widget.Widget.compose_add_child(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.end_capture_print","title":"end_capture_print","text":"<pre><code>end_capture_print()\n</code></pre> <p>End print capture (set with <code>begin_capture_print</code>).</p>"},{"location":"api/widget/#textual.widget.Widget.focus","title":"focus","text":"<pre><code>focus(scroll_visible=True)\n</code></pre> <p>Give focus to this widget.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Scroll parent to make this widget visible.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Widget</code> instance.</p>"},{"location":"api/widget/#textual.widget.Widget.focus(scroll_visible)","title":"<code>scroll_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_child_by_id","title":"get_child_by_id","text":"<pre><code>get_child_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_child_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_child_by_id(id, expect_type=None)\n</code></pre> <p>Return the first child (immediate descendent) of this node with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the child.</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first child of this node with the ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>if no children could be found for this ID</p> <code>WrongType</code> <p>if the wrong type was found.</p>"},{"location":"api/widget/#textual.widget.Widget.get_child_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_child_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_child_by_type","title":"get_child_by_type","text":"<pre><code>get_child_by_type(expect_type)\n</code></pre> <p>Get the first immediate child of a given type.</p> <p>Only returns exact matches, and so will not match subclasses of the given type.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType]</code> <p>The type of the child to search for.</p> required <p>Raises:</p> Type Description <code>NoMatches</code> <p>If no matching child is found.</p> <p>Returns:</p> Type Description <code>ExpectType</code> <p>The first immediate child widget with the expected type.</p>"},{"location":"api/widget/#textual.widget.Widget.get_child_by_type(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_component_rich_style","title":"get_component_rich_style","text":"<pre><code>get_component_rich_style(*names, partial=False)\n</code></pre> <p>Get a Rich style for a component.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Names of components.</p> <code>()</code> <code>bool</code> <p>Return a partial style (not combined with parent).</p> <code>False</code> <p>Returns:</p> Type Description <code>Style</code> <p>A Rich style object.</p>"},{"location":"api/widget/#textual.widget.Widget.get_component_rich_style(names)","title":"<code>names</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_component_rich_style(partial)","title":"<code>partial</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_height","title":"get_content_height","text":"<pre><code>get_content_height(container, viewport, width)\n</code></pre> <p>Called by Textual to get the height of the content area. May be overridden in a subclass.</p> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>Size of the container (immediate parent) widget.</p> required <code>Size</code> <p>Size of the viewport.</p> required <code>int</code> <p>Width of renderable.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The height of the content.</p>"},{"location":"api/widget/#textual.widget.Widget.get_content_height(container)","title":"<code>container</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_height(viewport)","title":"<code>viewport</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_height(width)","title":"<code>width</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_width","title":"get_content_width","text":"<pre><code>get_content_width(container, viewport)\n</code></pre> <p>Called by textual to get the width of the content area. May be overridden in a subclass.</p> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>Size of the container (immediate parent) widget.</p> required <code>Size</code> <p>Size of the viewport.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The optimal width of the content.</p>"},{"location":"api/widget/#textual.widget.Widget.get_content_width(container)","title":"<code>container</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_width(viewport)","title":"<code>viewport</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_loading_widget","title":"get_loading_widget","text":"<pre><code>get_loading_widget()\n</code></pre> <p>Get a widget to display a loading indicator.</p> <p>The default implementation will defer to App.get_loading_widget.</p> <p>Returns:</p> Type Description <code>Widget</code> <p>A widget in place of this widget to indicate a loading.</p>"},{"location":"api/widget/#textual.widget.Widget.get_pseudo_class_state","title":"get_pseudo_class_state","text":"<pre><code>get_pseudo_class_state()\n</code></pre> <p>Get an object describing whether each pseudo class is present on this object or not.</p> <p>Returns:</p> Type Description <code>PseudoClasses</code> <p>A PseudoClasses object describing the pseudo classes that are present.</p>"},{"location":"api/widget/#textual.widget.Widget.get_pseudo_classes","title":"get_pseudo_classes","text":"<pre><code>get_pseudo_classes()\n</code></pre> <p>Pseudo classes for a widget.</p> <p>Returns:</p> Type Description <code>Iterable[str]</code> <p>Names of the pseudo classes.</p>"},{"location":"api/widget/#textual.widget.Widget.get_style_at","title":"get_style_at","text":"<pre><code>get_style_at(x, y)\n</code></pre> <p>Get the Rich style in a widget at a given relative offset.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate relative to the widget.</p> required <code>int</code> <p>Y coordinate relative to the widget.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>A rich Style object.</p>"},{"location":"api/widget/#textual.widget.Widget.get_style_at(x)","title":"<code>x</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_style_at(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_widget_by_id","title":"get_widget_by_id","text":"<pre><code>get_widget_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_widget_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_widget_by_id(id, expect_type=None)\n</code></pre> <p>Return the first descendant widget with the given ID.</p> <p>Performs a depth-first search rooted at this widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID to search for in the subtree.</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first descendant encountered with this ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>if no children could be found for this ID.</p> <code>WrongType</code> <p>if the wrong type was found.</p>"},{"location":"api/widget/#textual.widget.Widget.get_widget_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_widget_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount","title":"mount","text":"<pre><code>mount(*widgets, before=None, after=None)\n</code></pre> <p>Mount widgets below this widget (making this widget a container).</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widget(s) to mount.</p> <code>()</code> <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/widget/#textual.widget.Widget.mount(*widgets)","title":"<code>*widgets</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount(before)","title":"<code>before</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount(after)","title":"<code>after</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_all","title":"mount_all","text":"<pre><code>mount_all(widgets, *, before=None, after=None)\n</code></pre> <p>Mount widgets from an iterable.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Widget]</code> <p>An iterable of widgets.</p> required <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/widget/#textual.widget.Widget.mount_all(widgets)","title":"<code>widgets</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_all(before)","title":"<code>before</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_all(after)","title":"<code>after</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_composed_widgets","title":"mount_composed_widgets  <code>async</code>","text":"<pre><code>mount_composed_widgets(widgets)\n</code></pre> <p>Called by Textual to mount widgets after compose.</p> <p>There is generally no need to implement this method in your application. See Lazy for a class which uses this method to implement lazy mounting.</p> <p>Parameters:</p> Name Type Description Default <code>list[Widget]</code> <p>A list of child widgets.</p> required"},{"location":"api/widget/#textual.widget.Widget.mount_composed_widgets(widgets)","title":"<code>widgets</code>","text":""},{"location":"api/widget/#textual.widget.Widget.move_child","title":"move_child","text":"<pre><code>move_child(\n    child: int | Widget,\n    *,\n    before: int | Widget,\n    after: None = None\n) -&gt; None\n</code></pre><pre><code>move_child(\n    child: int | Widget,\n    *,\n    after: int | Widget,\n    before: None = None\n) -&gt; None\n</code></pre> <pre><code>move_child(child, *, before=None, after=None)\n</code></pre> <p>Move a child widget within its parent's list of children.</p> <p>Parameters:</p> Name Type Description Default <code>int | Widget</code> <p>The child widget to move.</p> required <code>int | Widget | None</code> <p>Child widget or location index to move before.</p> <code>None</code> <code>int | Widget | None</code> <p>Child widget or location index to move after.</p> <code>None</code> <p>Raises:</p> Type Description <code>WidgetError</code> <p>If there is a problem with the child or target.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If neither or both are provided a <code>WidgetError</code> will be raised.</p>"},{"location":"api/widget/#textual.widget.Widget.move_child(child)","title":"<code>child</code>","text":""},{"location":"api/widget/#textual.widget.Widget.move_child(before)","title":"<code>before</code>","text":""},{"location":"api/widget/#textual.widget.Widget.move_child(after)","title":"<code>after</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify","title":"notify","text":"<pre><code>notify(\n    message,\n    *,\n    title=\"\",\n    severity=\"information\",\n    timeout=None\n)\n</code></pre> <p>Create a notification.</p> <p>Tip</p> <p>This method is thread-safe.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The message for the notification.</p> required <code>str</code> <p>The title for the notification.</p> <code>''</code> <code>SeverityLevel</code> <p>The severity of the notification.</p> <code>'information'</code> <code>float | None</code> <p>The timeout (in seconds) for the notification, or <code>None</code> for default.</p> <code>None</code> <p>See <code>App.notify</code> for the full documentation for this method.</p>"},{"location":"api/widget/#textual.widget.Widget.notify(message)","title":"<code>message</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify(title)","title":"<code>title</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify(severity)","title":"<code>severity</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify(timeout)","title":"<code>timeout</code>","text":""},{"location":"api/widget/#textual.widget.Widget.on_prune","title":"on_prune  <code>async</code>","text":"<pre><code>on_prune(event)\n</code></pre> <p>Close message loop when asked to prune.</p>"},{"location":"api/widget/#textual.widget.Widget.post_message","title":"post_message","text":"<pre><code>post_message(message)\n</code></pre> <p>Post a message to this widget.</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>Message to post.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the message was posted, False if this widget was closed / closing.</p>"},{"location":"api/widget/#textual.widget.Widget.post_message(message)","title":"<code>message</code>","text":""},{"location":"api/widget/#textual.widget.Widget.post_render","title":"post_render","text":"<pre><code>post_render(renderable)\n</code></pre> <p>Applies style attributes to the default renderable.</p> <p>This method is called by Textual itself. It is unlikely you will need to call or implement this method.</p> <p>Returns:</p> Type Description <code>ConsoleRenderable</code> <p>A new renderable.</p>"},{"location":"api/widget/#textual.widget.Widget.recompose","title":"recompose  <code>async</code>","text":"<pre><code>recompose()\n</code></pre> <p>Recompose the widget.</p> <p>Recomposing will remove children and call <code>self.compose</code> again to remount.</p>"},{"location":"api/widget/#textual.widget.Widget.refresh","title":"refresh","text":"<pre><code>refresh(\n    *regions, repaint=True, layout=False, recompose=False\n)\n</code></pre> <p>Initiate a refresh of the widget.</p> <p>This method sets an internal flag to perform a refresh, which will be done on the next idle event. Only one refresh will be done even if this method is called multiple times.</p> <p>By default this method will cause the content of the widget to refresh, but not change its size. You can also set <code>layout=True</code> to perform a layout.</p> <p>Warning</p> <p>It is rarely necessary to call this method explicitly. Updating styles or reactive attributes will do this automatically.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Additional screen regions to mark as dirty.</p> <code>()</code> <code>bool</code> <p>Repaint the widget (will call render() again).</p> <code>True</code> <code>bool</code> <p>Also layout widgets in the view.</p> <code>False</code> <code>bool</code> <p>Re-compose the widget (will remove and re-mount children).</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Widget</code> instance.</p>"},{"location":"api/widget/#textual.widget.Widget.refresh(*regions)","title":"<code>*regions</code>","text":""},{"location":"api/widget/#textual.widget.Widget.refresh(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/widget/#textual.widget.Widget.refresh(layout)","title":"<code>layout</code>","text":""},{"location":"api/widget/#textual.widget.Widget.refresh(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/widget/#textual.widget.Widget.release_mouse","title":"release_mouse","text":"<pre><code>release_mouse()\n</code></pre> <p>Release the mouse.</p> <p>Mouse events will only be sent when the mouse is over the widget.</p>"},{"location":"api/widget/#textual.widget.Widget.remove","title":"remove","text":"<pre><code>remove()\n</code></pre> <p>Remove the Widget from the DOM (effectively deleting it).</p> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the widget to be removed.</p>"},{"location":"api/widget/#textual.widget.Widget.remove_children","title":"remove_children","text":"<pre><code>remove_children(selector='*')\n</code></pre> <p>Remove the immediate children of this Widget from the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType] | Iterable[Widget]</code> <p>A CSS selector or iterable of widgets to remove.</p> <code>'*'</code> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the direct children to be removed.</p>"},{"location":"api/widget/#textual.widget.Widget.remove_children(selector)","title":"<code>selector</code>","text":""},{"location":"api/widget/#textual.widget.Widget.render","title":"render","text":"<pre><code>render()\n</code></pre> <p>Get text or Rich renderable for this widget.</p> <p>Implement this for custom widgets.</p> Example <pre><code>from textual.app import RenderableType\nfrom textual.widget import Widget\n\nclass CustomWidget(Widget):\n    def render(self) -&gt; RenderableType:\n        return \"Welcome to [bold red]Textual[/]!\"\n</code></pre> <p>Returns:</p> Type Description <code>RenderResult</code> <p>Any renderable.</p>"},{"location":"api/widget/#textual.widget.Widget.render_line","title":"render_line","text":"<pre><code>render_line(y)\n</code></pre> <p>Render a line of content.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Y Coordinate of line.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A rendered line.</p>"},{"location":"api/widget/#textual.widget.Widget.render_line(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.render_lines","title":"render_lines","text":"<pre><code>render_lines(crop)\n</code></pre> <p>Render the widget in to lines.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Region within visible area to render.</p> required <p>Returns:</p> Type Description <code>list[Strip]</code> <p>A list of list of segments.</p>"},{"location":"api/widget/#textual.widget.Widget.render_lines(crop)","title":"<code>crop</code>","text":""},{"location":"api/widget/#textual.widget.Widget.render_str","title":"render_str","text":"<pre><code>render_str(text_content)\n</code></pre> <p>Convert str in to a Text object.</p> <p>If you pass in an existing Text object it will be returned unaltered.</p> <p>Parameters:</p> Name Type Description Default <code>str | Text</code> <p>Text or str.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A text object.</p>"},{"location":"api/widget/#textual.widget.Widget.render_str(text_content)","title":"<code>text_content</code>","text":""},{"location":"api/widget/#textual.widget.Widget.run_action","title":"run_action  <code>async</code>","text":"<pre><code>run_action(action)\n</code></pre> <p>Perform a given action, with this widget as the default namespace.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Action encoded as a string.</p> required"},{"location":"api/widget/#textual.widget.Widget.run_action(action)","title":"<code>action</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down","title":"scroll_down","text":"<pre><code>scroll_down(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one line down.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_down(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end","title":"scroll_end","text":"<pre><code>scroll_end(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to the end of the container.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_end(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home","title":"scroll_home","text":"<pre><code>scroll_home(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to home position.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use duration.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_home(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left","title":"scroll_left","text":"<pre><code>scroll_left(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one cell left.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_left(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down","title":"scroll_page_down","text":"<pre><code>scroll_page_down(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page down.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left","title":"scroll_page_left","text":"<pre><code>scroll_page_left(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page left.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right","title":"scroll_page_right","text":"<pre><code>scroll_page_right(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page right.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up","title":"scroll_page_up","text":"<pre><code>scroll_page_up(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page up.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative","title":"scroll_relative","text":"<pre><code>scroll_relative(\n    x=None,\n    y=None,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll relative to current position.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>X distance (columns) to scroll, or <code>None</code> for no change.</p> <code>None</code> <code>float | None</code> <p>Y distance (rows) to scroll, or <code>None</code> for no change.</p> <code>None</code> <code>bool</code> <p>Animate to new scroll position.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>. Or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if animate is <code>True</code> and speed is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_relative(x)","title":"<code>x</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right","title":"scroll_right","text":"<pre><code>scroll_right(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one cell right.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_right(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to","title":"scroll_to","text":"<pre><code>scroll_to(\n    x=None,\n    y=None,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to a given (absolute) coordinate, optionally animating.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>X coordinate (column) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>float | None</code> <p>Y coordinate (row) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>bool</code> <p>Animate to new scroll position.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code> Note <p>The call to scroll is made after the next refresh.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_to(x)","title":"<code>x</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center","title":"scroll_to_center","text":"<pre><code>scroll_to_center(\n    widget,\n    animate=True,\n    *,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    origin_visible=True,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll this widget to the center of self.</p> <p>The center of the widget will be scrolled to the center of the container.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widget to scroll to the center of self.</p> required <code>bool</code> <p>Whether to animate the scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>bool</code> <p>Ensure that the top left corner of the widget remains visible after the scroll.</p> <code>True</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(origin_visible)","title":"<code>origin_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region","title":"scroll_to_region","text":"<pre><code>scroll_to_region(\n    region,\n    *,\n    spacing=None,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    center=False,\n    top=False,\n    origin_visible=True,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scrolls a given region in to view, if required.</p> <p>This method will scroll the least distance required to move <code>region</code> fully within the scrollable area.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A region that should be visible.</p> required <code>Spacing | None</code> <p>Optional spacing around the region.</p> <code>None</code> <code>bool</code> <p><code>True</code> to animate, or <code>False</code> to jump.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Scroll <code>region</code> to top of container.</p> <code>False</code> <code>bool</code> <p>Ensure that the top left of the widget is within the window.</p> <code>True</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code> <p>Returns:</p> Type Description <code>Offset</code> <p>The distance that was scrolled.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(region)","title":"<code>region</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(spacing)","title":"<code>spacing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(top)","title":"<code>top</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(origin_visible)","title":"<code>origin_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget","title":"scroll_to_widget","text":"<pre><code>scroll_to_widget(\n    widget,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    center=False,\n    top=False,\n    origin_visible=True,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll scrolling to bring a widget in to view.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A descendant widget.</p> required <code>bool</code> <p><code>True</code> to animate, or <code>False</code> to jump.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Scroll widget to top of container.</p> <code>False</code> <code>bool</code> <p>Ensure that the top left of the widget is within the window.</p> <code>True</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if any scrolling has occurred in any descendant, otherwise <code>False</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(top)","title":"<code>top</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(origin_visible)","title":"<code>origin_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up","title":"scroll_up","text":"<pre><code>scroll_up(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one line up.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and speed is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_up(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible","title":"scroll_visible","text":"<pre><code>scroll_visible(\n    animate=True,\n    *,\n    speed=None,\n    duration=None,\n    top=False,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll the container to make this widget visible.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>bool</code> <p>Scroll to top of container.</p> <code>False</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_visible(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(top)","title":"<code>top</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.set_loading","title":"set_loading","text":"<pre><code>set_loading(loading)\n</code></pre> <p>Set or reset the loading state of this widget.</p> <p>A widget in a loading state will display a LoadingIndicator that obscures the widget.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p><code>True</code> to put the widget into a loading state, or <code>False</code> to reset the loading state.</p> required <p>Returns:</p> Type Description <code>Awaitable</code> <p>An optional awaitable.</p>"},{"location":"api/widget/#textual.widget.Widget.set_loading(loading)","title":"<code>loading</code>","text":""},{"location":"api/widget/#textual.widget.Widget.stop_animation","title":"stop_animation  <code>async</code>","text":"<pre><code>stop_animation(attribute, complete=True)\n</code></pre> <p>Stop an animation on an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute whose animation should be stopped.</p> required <code>bool</code> <p>Should the animation be set to its final value?</p> <code>True</code> Note <p>If there is no animation scheduled or running, this is a no-op.</p>"},{"location":"api/widget/#textual.widget.Widget.stop_animation(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/widget/#textual.widget.Widget.stop_animation(complete)","title":"<code>complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.suppress_click","title":"suppress_click","text":"<pre><code>suppress_click()\n</code></pre> <p>Suppress a click event.</p> <p>This will prevent a Click event being sent, if called after a mouse down event and before the click itself.</p>"},{"location":"api/widget/#textual.widget.Widget.watch_disabled","title":"watch_disabled","text":"<pre><code>watch_disabled(disabled)\n</code></pre> <p>Update the styles of the widget and its children when disabled is toggled.</p>"},{"location":"api/widget/#textual.widget.Widget.watch_has_focus","title":"watch_has_focus","text":"<pre><code>watch_has_focus(value)\n</code></pre> <p>Update from CSS if has focus state changes.</p>"},{"location":"api/widget/#textual.widget.Widget.watch_mouse_hover","title":"watch_mouse_hover","text":"<pre><code>watch_mouse_hover(value)\n</code></pre> <p>Update from CSS if mouse over state changes.</p>"},{"location":"api/widget/#textual.widget.WidgetError","title":"WidgetError","text":"<p>               Bases: <code>Exception</code></p> <p>Base widget error.</p>"},{"location":"api/work/","title":"textual.work","text":"<p>A decorator used to create workers.</p> <p>Parameters:</p> Name Type Description Default <code>Callable[FactoryParamSpec, ReturnType] | Callable[FactoryParamSpec, Coroutine[None, None, ReturnType]] | None</code> <p>A function or coroutine.</p> <code>None</code> <code>str</code> <p>A short string to identify the worker (in logs and debugging).</p> <code>''</code> <code>str</code> <p>A short string to identify a group of workers.</p> <code>'default'</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group.</p> <code>False</code> <code>str | None</code> <p>Readable description of the worker for debugging purposes. By default, it uses a string representation of the decorated method and its arguments.</p> <code>None</code> <code>bool</code> <p>Mark the method as a thread worker.</p> <code>False</code>"},{"location":"api/work/#textual.work(method)","title":"<code>method</code>","text":""},{"location":"api/work/#textual.work(name)","title":"<code>name</code>","text":""},{"location":"api/work/#textual.work(group)","title":"<code>group</code>","text":""},{"location":"api/work/#textual.work(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/work/#textual.work(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/work/#textual.work(description)","title":"<code>description</code>","text":""},{"location":"api/work/#textual.work(thread)","title":"<code>thread</code>","text":""},{"location":"api/worker/","title":"textual.worker","text":"<p>This module contains the <code>Worker</code> class and related objects.</p> <p>See the guide for how to use workers.</p>"},{"location":"api/worker/#textual.worker.WorkType","title":"WorkType  <code>module-attribute</code>","text":"<pre><code>WorkType = Union[\n    Callable[[], Coroutine[None, None, ResultType]],\n    Callable[[], ResultType],\n    Awaitable[ResultType],\n]\n</code></pre> <p>Type used for workers.</p>"},{"location":"api/worker/#textual.worker.active_worker","title":"active_worker  <code>module-attribute</code>","text":"<pre><code>active_worker = ContextVar('active_worker')\n</code></pre> <p>Currently active worker context var.</p>"},{"location":"api/worker/#textual.worker.DeadlockError","title":"DeadlockError","text":"<p>               Bases: <code>WorkerError</code></p> <p>The operation would result in a deadlock.</p>"},{"location":"api/worker/#textual.worker.NoActiveWorker","title":"NoActiveWorker","text":"<p>               Bases: <code>Exception</code></p> <p>There is no active worker.</p>"},{"location":"api/worker/#textual.worker.Worker","title":"Worker","text":"<pre><code>Worker(\n    node,\n    work,\n    *,\n    name=\"\",\n    group=\"default\",\n    description=\"\",\n    exit_on_error=True,\n    thread=False\n)\n</code></pre> <p>               Bases: <code>Generic[ResultType]</code></p> <p>A class to manage concurrent work (either a task or a thread).</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The widget, screen, or App that initiated the work.</p> required <code>WorkType</code> <p>A callable, coroutine, or other awaitable object to run in the worker.</p> required <code>str</code> <p>Name of the worker (short string to help identify when debugging).</p> <code>''</code> <code>str</code> <p>The worker group.</p> <code>'default'</code> <code>str</code> <p>Description of the worker (longer string with more details).</p> <code>''</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Mark the worker as a thread worker.</p> <code>False</code>"},{"location":"api/worker/#textual.worker.Worker(node)","title":"<code>node</code>","text":""},{"location":"api/worker/#textual.worker.Worker(work)","title":"<code>work</code>","text":""},{"location":"api/worker/#textual.worker.Worker(name)","title":"<code>name</code>","text":""},{"location":"api/worker/#textual.worker.Worker(group)","title":"<code>group</code>","text":""},{"location":"api/worker/#textual.worker.Worker(description)","title":"<code>description</code>","text":""},{"location":"api/worker/#textual.worker.Worker(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/worker/#textual.worker.Worker(thread)","title":"<code>thread</code>","text":""},{"location":"api/worker/#textual.worker.Worker.cancelled_event","title":"cancelled_event  <code>instance-attribute</code>","text":"<pre><code>cancelled_event = Event()\n</code></pre> <p>A threading event set when the worker is cancelled.</p>"},{"location":"api/worker/#textual.worker.Worker.completed_steps","title":"completed_steps  <code>property</code>","text":"<pre><code>completed_steps\n</code></pre> <p>The number of completed steps.</p>"},{"location":"api/worker/#textual.worker.Worker.error","title":"error  <code>property</code>","text":"<pre><code>error\n</code></pre> <p>The exception raised by the worker, or <code>None</code> if there was no error.</p>"},{"location":"api/worker/#textual.worker.Worker.is_cancelled","title":"is_cancelled  <code>property</code>","text":"<pre><code>is_cancelled\n</code></pre> <p>Has the work been cancelled?</p> <p>Note that cancelled work may still be running.</p>"},{"location":"api/worker/#textual.worker.Worker.is_finished","title":"is_finished  <code>property</code>","text":"<pre><code>is_finished\n</code></pre> <p>Has the task finished (cancelled, error, or success)?</p>"},{"location":"api/worker/#textual.worker.Worker.is_running","title":"is_running  <code>property</code>","text":"<pre><code>is_running\n</code></pre> <p>Is the task running?</p>"},{"location":"api/worker/#textual.worker.Worker.node","title":"node  <code>property</code>","text":"<pre><code>node\n</code></pre> <p>The node where this worker was run from.</p>"},{"location":"api/worker/#textual.worker.Worker.progress","title":"progress  <code>property</code>","text":"<pre><code>progress\n</code></pre> <p>Progress as a percentage.</p> <p>If the total steps is None, then this will return 0. The percentage will be clamped between 0 and 100.</p>"},{"location":"api/worker/#textual.worker.Worker.result","title":"result  <code>property</code>","text":"<pre><code>result\n</code></pre> <p>The result of the worker, or <code>None</code> if there is no result.</p>"},{"location":"api/worker/#textual.worker.Worker.state","title":"state  <code>property</code> <code>writable</code>","text":"<pre><code>state\n</code></pre> <p>The current state of the worker.</p>"},{"location":"api/worker/#textual.worker.Worker.total_steps","title":"total_steps  <code>property</code>","text":"<pre><code>total_steps\n</code></pre> <p>The number of total steps, or None if indeterminate.</p>"},{"location":"api/worker/#textual.worker.Worker.StateChanged","title":"StateChanged","text":"<pre><code>StateChanged(worker, state)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The worker state changed.</p> <p>Parameters:</p> Name Type Description Default <code>Worker</code> <p>The worker object.</p> required <code>WorkerState</code> <p>New state.</p> required"},{"location":"api/worker/#textual.worker.Worker.StateChanged(worker)","title":"<code>worker</code>","text":""},{"location":"api/worker/#textual.worker.Worker.StateChanged(state)","title":"<code>state</code>","text":""},{"location":"api/worker/#textual.worker.Worker.advance","title":"advance","text":"<pre><code>advance(steps=1)\n</code></pre> <p>Advance the number of completed steps.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Number of steps to advance.</p> <code>1</code>"},{"location":"api/worker/#textual.worker.Worker.advance(steps)","title":"<code>steps</code>","text":""},{"location":"api/worker/#textual.worker.Worker.cancel","title":"cancel","text":"<pre><code>cancel()\n</code></pre> <p>Cancel the task.</p>"},{"location":"api/worker/#textual.worker.Worker.run","title":"run  <code>async</code>","text":"<pre><code>run()\n</code></pre> <p>Run the work.</p> <p>Implement this method in a subclass, or pass a callable to the constructor.</p> <p>Returns:</p> Type Description <code>ResultType</code> <p>Return value of the work.</p>"},{"location":"api/worker/#textual.worker.Worker.update","title":"update","text":"<pre><code>update(completed_steps=None, total_steps=-1)\n</code></pre> <p>Update the number of completed steps.</p> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>The number of completed seps, or <code>None</code> to not change.</p> <code>None</code> <code>int | None</code> <p>The total number of steps, <code>None</code> for indeterminate, or -1 to leave unchanged.</p> <code>-1</code>"},{"location":"api/worker/#textual.worker.Worker.update(completed_steps)","title":"<code>completed_steps</code>","text":""},{"location":"api/worker/#textual.worker.Worker.update(total_steps)","title":"<code>total_steps</code>","text":""},{"location":"api/worker/#textual.worker.Worker.wait","title":"wait  <code>async</code>","text":"<pre><code>wait()\n</code></pre> <p>Wait for the work to complete.</p> <p>Raises:</p> Type Description <code>WorkerFailed</code> <p>If the Worker raised an exception.</p> <code>WorkerCancelled</code> <p>If the Worker was cancelled before it completed.</p> <p>Returns:</p> Type Description <code>ResultType</code> <p>The return value of the work.</p>"},{"location":"api/worker/#textual.worker.WorkerCancelled","title":"WorkerCancelled","text":"<p>               Bases: <code>WorkerError</code></p> <p>The worker was cancelled and did not complete.</p>"},{"location":"api/worker/#textual.worker.WorkerError","title":"WorkerError","text":"<p>               Bases: <code>Exception</code></p> <p>A worker related error.</p>"},{"location":"api/worker/#textual.worker.WorkerFailed","title":"WorkerFailed","text":"<pre><code>WorkerFailed(error)\n</code></pre> <p>               Bases: <code>WorkerError</code></p> <p>The worker raised an exception and did not complete.</p>"},{"location":"api/worker/#textual.worker.WorkerState","title":"WorkerState","text":"<p>               Bases: <code>Enum</code></p> <p>A description of the worker's current state.</p>"},{"location":"api/worker/#textual.worker.WorkerState.CANCELLED","title":"CANCELLED  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>CANCELLED = 3\n</code></pre> <p>Worker is not running, and was cancelled.</p>"},{"location":"api/worker/#textual.worker.WorkerState.ERROR","title":"ERROR  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ERROR = 4\n</code></pre> <p>Worker is not running, and exited with an error.</p>"},{"location":"api/worker/#textual.worker.WorkerState.PENDING","title":"PENDING  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>PENDING = 1\n</code></pre> <p>Worker is initialized, but not running.</p>"},{"location":"api/worker/#textual.worker.WorkerState.RUNNING","title":"RUNNING  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>RUNNING = 2\n</code></pre> <p>Worker is running.</p>"},{"location":"api/worker/#textual.worker.WorkerState.SUCCESS","title":"SUCCESS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>SUCCESS = 5\n</code></pre> <p>Worker is not running, and completed successfully.</p>"},{"location":"api/worker/#textual.worker.get_current_worker","title":"get_current_worker","text":"<pre><code>get_current_worker()\n</code></pre> <p>Get the currently active worker.</p> <p>Raises:</p> Type Description <code>NoActiveWorker</code> <p>If there is no active worker.</p> <p>Returns:</p> Type Description <code>Worker</code> <p>A Worker instance.</p>"},{"location":"api/worker_manager/","title":"textual.worker_manager","text":"<p>Contains <code>WorkerManager</code>, a class to manage workers for an app.</p> <p>You access this object via App.workers or Widget.workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager","title":"WorkerManager","text":"<pre><code>WorkerManager(app)\n</code></pre> <p>An object to manager a number of workers.</p> <p>You will not have to construct this class manually, as widgets, screens, and apps have a worker manager accessibly via a <code>workers</code> attribute.</p> <p>Parameters:</p> Name Type Description Default <code>App</code> <p>An App instance.</p> required"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager(app)","title":"<code>app</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker","title":"add_worker","text":"<pre><code>add_worker(worker, start=True, exclusive=True)\n</code></pre> <p>Add a new worker.</p> <p>Parameters:</p> Name Type Description Default <code>Worker</code> <p>A Worker instance.</p> required <code>bool</code> <p>Start the worker if True, otherwise the worker must be started manually.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group as <code>worker</code>.</p> <code>True</code>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker(worker)","title":"<code>worker</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker(start)","title":"<code>start</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_all","title":"cancel_all","text":"<pre><code>cancel_all()\n</code></pre> <p>Cancel all workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_group","title":"cancel_group","text":"<pre><code>cancel_group(node, group)\n</code></pre> <p>Cancel a single group.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>Worker DOM node.</p> required <code>str</code> <p>A group name.</p> required <p>Returns:</p> Type Description <code>list[Worker]</code> <p>A list of workers that were cancelled.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_group(node)","title":"<code>node</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_group(group)","title":"<code>group</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_node","title":"cancel_node","text":"<pre><code>cancel_node(node)\n</code></pre> <p>Cancel all workers associated with a given node</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>A DOM node (widget, screen, or App).</p> required <p>Returns:</p> Type Description <code>list[Worker]</code> <p>List of cancelled workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_node(node)","title":"<code>node</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.start_all","title":"start_all","text":"<pre><code>start_all()\n</code></pre> <p>Start all the workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.wait_for_complete","title":"wait_for_complete  <code>async</code>","text":"<pre><code>wait_for_complete(workers=None)\n</code></pre> <p>Wait for workers to complete.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Worker] | None</code> <p>An iterable of workers or None to wait for all workers in the manager.</p> <code>None</code>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.wait_for_complete(workers)","title":"<code>workers</code>","text":""},{"location":"blog/","title":"Textual Blog","text":""},{"location":"blog/2023/03/15/no-async-async-with-python/","title":"No-async async with Python","text":"<p>A (reasonable) criticism of async is that it tends to proliferate in your code. In order to <code>await</code> something, your functions must be <code>async</code> all the way up the call-stack. This tends to result in you making things <code>async</code> just to support that one call that needs it or, worse, adding <code>async</code> just-in-case. Given that going from <code>def</code> to <code>async def</code> is a breaking change there is a strong incentive to go straight there.</p> <p>Before you know it, you have adopted a policy of \"async all the things\".</p> <p>Textual is an async framework, but doesn't require the app developer to use the <code>async</code> and <code>await</code> keywords (but you can if you need to). This post is about how Textual accomplishes this async-agnosticism.</p> <p>Info</p> <p>See this example from the docs for an async-less Textual app.</p>"},{"location":"blog/2023/03/15/no-async-async-with-python/#an-apology","title":"An apology","text":"<p>But first, an apology! In a previous post I said Textual \"doesn't do any IO of its own\". This is not accurate. Textual responds to keys and mouse events (Input) and writes content to the terminal (Output).</p> <p>Although Textual clearly does do IO, it uses <code>asyncio</code> mainly for concurrency. It allows each widget to update its part of the screen independently from the rest of the app.</p>"},{"location":"blog/2023/03/15/no-async-async-with-python/#await-me-maybe","title":"Await me (maybe)","text":"<p>The first no-async async technique is the \"Await me maybe\" pattern, a term first coined by Simon Willison. This is particularly applicable to callbacks (or in Textual terms, message handlers).</p> <p>The <code>await_me_maybe</code> function below can run a callback that is either a plain old function or a coroutine (<code>async def</code>). It does this by awaiting the result of the callback if it is awaitable, or simply returning the result if it is not.</p> <pre><code>import asyncio\nimport inspect\n\n\ndef plain_old_function():\n    return \"Plain old function\"\n\nasync def async_function():\n    return \"Async function\"\n\n\nasync def await_me_maybe(callback):\n    result = callback()\n    if inspect.isawaitable(result):\n        return await result\n    return result\n\n\nasync def run_framework():\n    print(\n        await await_me_maybe(plain_old_function)\n    )\n    print(\n        await await_me_maybe(async_function)\n    )\n\n\nif __name__ == \"__main__\":\n    asyncio.run(run_framework())\n</code></pre>"},{"location":"blog/2023/03/15/no-async-async-with-python/#optionally-awaitable","title":"Optionally awaitable","text":"<p>The \"await me maybe\" pattern is great when an async framework calls the app's code. The app developer can choose to write async code or not. Things get a little more complicated when the app wants to call the framework's API. If the API has asynced all the things, then it would force the app to do the same.</p> <p>Textual's API consists of regular methods for the most part, but there are a few methods which are optionally awaitable. These are not coroutines (which must be awaited to do anything).</p> <p>In practice, this means that those API calls initiate something which will complete a short time later. If you discard the return value then it won't prevent it from working. You only need to <code>await</code> if you want to know when it has finished.</p> <p>The <code>mount</code> method is one such method. Calling it will add a widget to the screen:</p> <pre><code>def on_key(self):\n    # Add MyWidget to the screen\n    self.mount(MyWidget(\"Hello, World!\"))\n</code></pre> <p>In this example we don't care that the widget hasn't been mounted immediately, only that it will be soon.</p> <p>Note</p> <p>Textual awaits the result of mount after the message handler, so even if you don't explicitly await it, it will have been completed by the time the next message handler runs.</p> <p>We might care if we want to mount a widget then make some changes to it. By making the handler <code>async</code> and awaiting the result of mount, we can be sure that the widget has been initialized before we update it:</p> <pre><code>async def on_key(self):\n    # Add MyWidget to the screen\n    await self.mount(MyWidget(\"Hello, World!\"))\n    # add a border\n    self.query_one(MyWidget).styles.border = (\"heavy\", \"red\")\n</code></pre> <p>Incidentally, I found there were very few examples of writing awaitable objects in Python. So here is the code for <code>AwaitMount</code> which is returned by the <code>mount</code> method:</p> <pre><code>class AwaitMount:\n    \"\"\"An awaitable returned by mount() and mount_all().\"\"\"\n\n    def __init__(self, parent: Widget, widgets: Sequence[Widget]) -&gt; None:\n        self._parent = parent\n        self._widgets = widgets\n\n    async def __call__(self) -&gt; None:\n        \"\"\"Allows awaiting via a call operation.\"\"\"\n        await self\n\n    def __await__(self) -&gt; Generator[None, None, None]:\n        async def await_mount() -&gt; None:\n            if self._widgets:\n                aws = [\n                    create_task(widget._mounted_event.wait(), name=\"await mount\")\n                    for widget in self._widgets\n                ]\n                if aws:\n                    await wait(aws)\n                    self._parent.refresh(layout=True)\n\n        return await_mount().__await__()\n</code></pre>"},{"location":"blog/2023/03/15/no-async-async-with-python/#summing-up","title":"Summing up","text":"<p>Textual did initially \"async all the things\", which you might see if you find some old Textual code. Now async is optional.</p> <p>This is not because I dislike async. I'm a fan! But it does place a small burden on the developer (more to type and think about). With the current API you generally don't need to write coroutines, or remember to await things. But async is there if you need it.</p> <p>We're finding that Textual is increasingly becoming a UI to things which are naturally concurrent, so async was a good move. Concurrency can be a tricky subject, so we're planning some API magic to take the pain out of running tasks, threads, and processes. Stay tuned!</p> <p>Join us on our Discord server if you want to talk about these things with the Textualize developers.</p>"},{"location":"blog/2022/12/08/be-the-keymaster/","title":"Be the Keymaster!","text":""},{"location":"blog/2022/12/08/be-the-keymaster/#that-didnt-go-to-plan","title":"That didn't go to plan","text":"<p>So... yeah... the blog. When I wrote my previous (and first) post I had wanted to try and do a post towards the end of each week, highlighting what I'd done on the \"dogfooding\" front. Life kinda had other plans. Not in a terrible way, but it turns out that getting both flu and Covid jabs (AKA \"jags\" as they tend to say in my adopted home) on the same day doesn't really agree with me too well.</p> <p>I have been working, but there's been some odd moments in the past week and a bit and, last week, once I got to the end, I was glad for it to end. So no blog post happened.</p> <p>Anyway...</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#what-have-i-been-up-to","title":"What have I been up to?","text":"<p>While mostly sat feeling sorry for myself on my sofa, I have been coding. Rather than list all the different things here in detail, I'll quickly mention them with links to where to find them and play with them if you want:</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#fivepyfive","title":"FivePyFive","text":"<p>While my Textual 5x5 puzzle is one of the examples in the Textual repo, I wanted to make it more widely available so people can download it with <code>pip</code> or <code>pipx</code>. See over on PyPi and see if you can solve it. ;-)</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#textual-qrcode","title":"textual-qrcode","text":"<p>I wanted to put together a very small example of how someone may put together a third party widget library, and in doing so selected what I thought was going to be a mostly-useless example: a wrapper around a text-based QR code generator website. Weirdly I've had a couple of people express a need for QR codes in the terminal since publishing that!</p> <p></p>"},{"location":"blog/2022/12/08/be-the-keymaster/#pispy","title":"PISpy","text":"<p>PISpy is a very simple terminal-based client for the PyPi API. Mostly it provides a hypertext interface to Python package details, letting you look up a package and then follow its dependency links. It's very simple at the moment, but I think more fun things can be done with this.</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#oidia","title":"OIDIA","text":"<p>I'm a big fan of the use of streak-tracking in one form or another. Personally I use a streak-tracking app for keeping tabs of all sorts of good (and bad) habits, and as a heavy user of all things Apple I make a lot of use of the Fitness rings, etc. So I got to thinking it might be fun to do a really simple, no shaming, no counting, just recording, steak app for the Terminal. OIDIA is the result.</p> <p>As of the time of writing I only finished the first version of this yesterday evening, so there are plenty of rough edges; but having got it to a point where it performed the basic tasks I wanted from it, that seemed like a good time to publish.</p> <p>Expect to see this getting more updates and polish.</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#wait-what-about-this-keymaster-thing","title":"Wait, what about this Keymaster thing?","text":"<p>Ahh, yes, about that... So one of the handy things I'm finding about Textual is its key binding system. The more I build Textual apps, the more I appreciate the bindings, how they can be associated with specific widgets, the use of actions (which can be used from other places too), etc.</p> <p>But... (there's always a \"but\" right -- I mean, there'd be no blog post to be had here otherwise).</p> <p>The terminal doesn't have access to all the key combinations you may want to use, and also, because some keys can't necessarily be \"typed\", at least not easily (think about it: there's no F1 character, you have to type <code>F1</code>), many keys and key combinations need to be bound with specific names.</p> <p>So there's two problems here: how do I discover what keys even turn up in my application, and when they do, what should I call them when I pass them to <code>Binding</code>?</p> <p>That felt like a \"well Dave just build an app for it!\" problem. So I did:</p> <p>If you're building apps with Textual and you want to discover what keys turn up from your terminal and are available to your application, you can:</p> <pre><code>$ pipx install textual-keys\n</code></pre> <p>and then just run <code>textual-keys</code> and start mashing the keyboard to find out.</p> <p>There's a good chance that this app, or at least a version of it, will make it into Textual itself (very likely as one of the devtools). But for now it's just an easy install away.</p> <p>I think there's a call to be made here too: have you built anything to help speed up how you work with Textual, or just make the development experience \"just so\"? If so, do let us know, and come yell about it on the <code>#show-and-tell</code> channel in our Discord server.</p>"},{"location":"blog/2022/12/30/a-better-asyncio-sleep-for-windows-to-fix-animation/","title":"A better asyncio sleep for Windows to fix animation","text":"<p>I spent some time optimizing Textual on Windows recently, and discovered something which may be of interest to anyone working with async code on that platform.</p> <p>Animation, scrolling, and fading had always been unsatisfactory on Windows. Textual was usable, but the lag when scrolling made apps feel far less snappy that other platforms. On macOS and Linux, scrolling is fast enough that it feels close to a native app, not something running in a terminal. Yet the Windows experience never improved, even as Textual got faster with each release.</p> <p>I had chalked this up to Windows Terminal being slow to render updates. After all, the classic Windows terminal was (and still is) glacially slow. Perhaps Microsoft just weren't focusing on performance.</p> <p>In retrospect, that was highly improbable. Like all modern terminals, Windows Terminal uses the GPU to render updates. Even without focussing on performance, it should be fast.</p> <p>I figured I'd give it one last attempt to speed up Textual on Windows. If I failed, Windows would forever be a third-class platform for Textual apps.</p> <p>It turned out that it was nothing to do with performance, per se. The issue was with a single asyncio function: <code>asyncio.sleep</code>.</p> <p>Textual has a <code>Timer</code> class which creates events at regular intervals. It powers the JS-like <code>set_interval</code> and <code>set_timer</code> functions. It is also used internally to do animation (such as smooth scrolling). This Timer class calls <code>asyncio.sleep</code> to wait the time between one event and the next.</p> <p>On macOS and Linux, calling <code>asynco.sleep</code> is fairly accurate. If you call <code>sleep(3.14)</code>, it will return within 1% of 3.14 seconds. This is not the case for Windows, which for historical reasons uses a timer with a granularity of 15 milliseconds. The upshot is that sleep times will be rounded up to the nearest multiple of 15 milliseconds.</p> <p>This limit appears to hold true for all async primitives on Windows. If you wait for something with a timeout, it will return on a multiple of 15 milliseconds. Fortunately there is work in the CPython pipeline to make this more accurate. Thanks to Steve Dower for pointing this out.</p> <p>This lack of accuracy in the timer meant that timer events were created at a far slower rate than intended. Animation was slower because Textual was waiting too long between updates.</p> <p>Once I had figured that out, I needed an alternative to <code>asyncio.sleep</code> for Textual's Timer class. And I found one. The following version of <code>sleep</code> is accurate to well within 1%:</p> <pre><code>from time import sleep as time_sleep\nfrom asyncio import get_running_loop\n\nasync def sleep(sleep_for: float) -&gt; None:\n    \"\"\"An asyncio sleep.\n\n    On Windows this achieves a better granularity than asyncio.sleep\n\n    Args:\n        sleep_for (float): Seconds to sleep for.\n    \"\"\"    \n    await get_running_loop().run_in_executor(None, time_sleep, sleep_for)\n</code></pre> <p>That is a drop-in replacement for sleep on Windows. With it, Textual runs a lot smoother. Easily on par with macOS and Linux.</p> <p>It's not quite perfect. There is a little tearing during full \"screen\" updates, but performance is decent all round. I suspect when this bug is fixed (big thanks to Paul Moore for looking in to that), and Microsoft implements this protocol then Textual on Windows will be A+.</p> <p>This Windows improvement will be in v0.9.0 of Textual, which will be released in a few days.</p>"},{"location":"blog/2023/02/11/the-heisenbug-lurking-in-your-async-code/","title":"The Heisenbug lurking in your async code","text":"<p>I'm taking a brief break from blogging about Textual to bring you this brief PSA for Python developers who work with async code. I wanted to expand a little on this tweet.</p> <p>If you have ever used <code>asyncio.create_task</code> you may have created a bug for yourself that is challenging (read almost impossible) to reproduce. If it occurs, your code will likely fail in unpredictable ways.</p> <p>The root cause of this Heisenbug is that if you don't hold a reference to the task object returned by <code>create_task</code> then the task may disappear without warning when Python runs garbage collection. In other words, the code in your task will stop running with no obvious indication why.</p> <p>This behavior is well documented, as you can see from this excerpt (emphasis mine):</p> <p></p> <p>But who reads all the docs? And who has perfect recall if they do? A search on GitHub indicates that there are a lot of projects where this bug is waiting for just the right moment to ruin somebody's day.</p> <p>I suspect the reason this mistake is so common is that tasks are a lot like threads (conceptually at least). With threads you can just launch them and forget. Unless you mark them as \"daemon\" threads they will exist for the lifetime of your app. Not so with Tasks.</p> <p>The solution recommended in the docs is to keep a reference to the task for as long as you need it to live. On modern Python you could use TaskGroups which will keep references to your tasks. As long as all the tasks you spin up are in TaskGroups, you should be fine.</p>"},{"location":"blog/2023/03/08/overhead-of-python-asyncio-tasks/","title":"Overhead of Python Asyncio tasks","text":"<p>Every widget in Textual, be it a button, tree view, or a text input, runs an asyncio task. There is even a task for scrollbar corners (the little space formed when horizontal and vertical scrollbars meet).</p> <p>Info</p> <p>It may be IO that gives AsyncIO its name, but Textual doesn't do any IO of its own. Those tasks are used to power message queues, so that widgets (UI components) can do whatever they do at their own pace.</p> <p>Its fair to say that Textual apps launch a lot of tasks. Which is why when I was trying to optimize startup (for apps with 1000s of widgets) I suspected it was task related.</p> <p>I needed to know how much of an overhead it was to launch tasks. Tasks are lighter weight than threads, but how much lighter? The only way to know for certain was to profile.</p> <p>The following code launches a load of do nothing tasks, then waits for them to shut down. This would give me an idea of how performant <code>create_task</code> is, and also a baseline for optimizations. I would know the absolute limit of any optimizations I make.</p> <pre><code>from asyncio import create_task, wait, run\nfrom time import process_time as time\n\n\nasync def time_tasks(count=100) -&gt; float:\n    \"\"\"Time creating and destroying tasks.\"\"\"\n\n    async def nop_task() -&gt; None:\n        \"\"\"Do nothing task.\"\"\"\n        pass\n\n    start = time()\n    tasks = [create_task(nop_task()) for _ in range(count)]\n    await wait(tasks)\n    elapsed = time() - start\n    return elapsed\n\n\nfor count in range(100_000, 1000_000 + 1, 100_000):\n    create_time = run(time_tasks(count))\n    create_per_second = 1 / (create_time / count)\n    print(f\"{count:,} tasks \\t {create_per_second:0,.0f} tasks per/s\")\n</code></pre> <p>And here is the output:</p> <pre><code>100,000 tasks    280,003 tasks per/s\n200,000 tasks    255,275 tasks per/s\n300,000 tasks    248,713 tasks per/s\n400,000 tasks    248,383 tasks per/s\n500,000 tasks    241,624 tasks per/s\n600,000 tasks    260,660 tasks per/s\n700,000 tasks    244,510 tasks per/s\n800,000 tasks    247,455 tasks per/s\n900,000 tasks    242,744 tasks per/s\n1,000,000 tasks          259,715 tasks per/s\n</code></pre> <p>Info</p> <p>Running on an M1 MacBook Pro.</p> <p>This tells me I can create, run, and shutdown 260K tasks per second.</p> <p>That's fast.</p> <p>Clearly <code>create_task</code> is as close as you get to free in the Python world, and I would need to look elsewhere for optimizations. Turns out Textual spends far more time processing CSS rules than creating tasks (obvious in retrospect). I've noticed some big wins there, so the next version of Textual will be faster to start apps with a metric tonne of widgets.</p> <p>But I still need to know what to do with those scrollbar corners. A task for two characters. I don't even...</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/","title":"A year of building for the terminal","text":"<p>I joined Textualize back in January 2022, and since then have been hard at work with the team on both Rich and Textual. Over the course of the year, I\u2019ve been able to work on a lot of really cool things. In this post, I\u2019ll review a subset of the more interesting and visual stuff I\u2019ve built. If you\u2019re into terminals and command line tooling, you\u2019ll hopefully see at least one thing of interest!</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#a-file-manager-powered-by-textual","title":"A file manager powered by Textual","text":"<p>I\u2019ve been slowly developing a file manager as a \u201cdogfooding\u201d project for Textual. It takes inspiration from tools such as Ranger and Midnight Commander.</p> <p></p> <p>As of December 2022, it lets you browse your file system, filtering, multi-selection, creating and deleting files/directories, opening files in your <code>$EDITOR</code> and more.</p> <p>I\u2019m happy with how far this project has come \u2014 I think it\u2019s a good example of the type of powerful application that can be built with Textual with relatively little code. I\u2019ve been able to focus on features, instead of worrying about terminal emulator implementation details.</p> <p></p> <p>The project is available on GitHub.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#better-diffs-in-the-terminal","title":"Better diffs in the terminal","text":"<p>Diffs in the terminal are often difficult to read at a glance. I wanted to see how close I could get to achieving a diff display of a quality similar to that found in the GitHub UI.</p> <p>To attempt this, I built a tool called Dunk. It\u2019s a command line program which you can pipe your <code>git diff</code> output into, and it\u2019ll convert it into something which I find much more readable.</p> <p></p> <p>Although I\u2019m not particularly proud of the code - there are a lot of \u201chacks\u201d going on, but I\u2019m proud of the result. If anything, it shows what can be achieved for tools like this.</p> <p>For many diffs, the difference between running <code>git diff</code> and <code>git diff | dunk | less -R</code> is night and day.</p> <p></p> <p>It\u2019d be interesting to revisit this at some point. It has its issues, but I\u2019d love to see how it can be used alongside Textual to build a terminal-based diff/merge tool. Perhaps it could be combined with\u2026</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#code-editor-floating-gutter","title":"Code editor floating gutter","text":"<p>This is a common feature in text editors and IDEs: when you scroll to the right, you should still be able to see what line you\u2019re on. Out of interest, I tried to recreate the effect in the terminal using Textual.</p> <p></p> <p>Textual CSS offers a <code>dock</code> property which allows you to attach a widget to an edge of its parent. By creating a widget that contains a vertical list of numbers and setting the <code>dock</code> property to <code>left</code>, we can create a floating gutter effect. Then, we just need to keep the <code>scroll_y</code> in sync between the gutter and the content to ensure the line numbers stay aligned.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#dropdown-autocompletion-menu","title":"Dropdown autocompletion menu","text":"<p>While working on Shira (a proof-of-concept, terminal-based Python object explorer), I wrote some autocompleting dropdown functionality.</p> <p></p> <p>Textual forgoes the z-index concept from browser CSS and instead uses a \u201cnamed layer\u201d system. Using the <code>layers</code> property you can defined an ordered list of named layers, and using the <code>layer</code> property, you can assign a descendant widget to one of those layers.</p> <p>By creating a new layer above all others and assigning a widget to that layer, we can ensure that widget is painted above everything else.</p> <p>In order to determine where to place the dropdown, we can track the current value in the dropdown by <code>watch</code>ing the reactive input \u201cvalue\u201d inside the Input widget. This method will be called every time the <code>value</code> of the Input changes, and we can use this hook to amend the position of our dropdown position to accommodate for the length of the input value.</p> <p></p> <p>I\u2019ve now extracted this into a separate library called textual-autocomplete.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#tabs-with-animated-underline","title":"Tabs with animated underline","text":"<p>The aim here was to create a tab widget with underlines that animates smoothly as another tab is selected.</p> <p>The difficulty with implementing something like this is that we don\u2019t have pixel-perfect resolution when animating - a terminal window is just a big grid of fixed-width character cells.</p> <p> However, when animating things in a terminal, we can often achieve better granularity using Unicode related tricks. In this case, instead of shifting the bar along one whole cell, we adjust the endings of the bar to be a character which takes up half of a cell.</p> <p>The exact characters that form the bar are \"\u257a\", \"\u2501\" and \"\u2578\". When the bar sits perfectly within cell boundaries, every character is \u201c\u2501\u201d. As it travels over a cell boundary, the left and right ends of the bar are updated to \"\u257a\" and \"\u2578\" respectively.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#snapshot-testing-for-terminal-apps","title":"Snapshot testing for terminal apps","text":"<p>One of the great features we added to Rich this year was the ability to export console contents to an SVG. This feature was later exposed to Textual, allowing users to capture screenshots of their running Textual apps. Ultimately, I ended up creating a tool for snapshot testing in the Textual codebase.</p> <p>Snapshot testing is used to ensure that Textual output doesn\u2019t unexpectedly change. On disk, we store what we expect the output to look like. Then, when we run our unit tests, we get immediately alerted if the output has changed.</p> <p>This essentially automates the process of manually spinning up several apps and inspecting them for unexpected visual changes. It\u2019s great for catching subtle regressions!</p> <p>In Textual, each CSS property has its own canonical example and an associated snapshot test. If we accidentally break a property in a way that affects the visual output, the chances of it sneaking into a release are greatly reduced, because the corresponding snapshot test will fail.</p> <p>As part of this work, I built a web interface for comparing snapshots with test output. There\u2019s even a little toggle which highlights the differences, since they\u2019re sometimes rather subtle.</p> <p>Since the terminal output shown in the video above is just an SVG image, I was able to add the \"Show difference\" functionality by overlaying the two images and applying a single CSS property: <code>mix-blend-mode: difference;</code>.</p> <p>The snapshot testing functionality itself is implemented as a pytest plugin, and it builds on top of a snapshot testing framework called syrupy.</p> <p></p> <p>It's quite likely that this will eventually be exposed to end-users of Textual.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#demonstrating-animation","title":"Demonstrating animation","text":"<p>I built an example app to demonstrate how to animate in Textual and the available easing functions.</p> <p>The smoothness here is achieved using tricks similar to those used in the tabs I discussed earlier. In fact, the bar that animates in the video above is the same Rich renderable that is used by Textual's scrollbars.</p> <p>You can play with this app by running <code>textual easing</code>. Please use animation sparingly.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#developer-console","title":"Developer console","text":"<p>When developing terminal based applications, performing simple debugging using <code>print</code> can be difficult, since the terminal is in application mode.</p> <p>A project I worked on earlier in the year to improve the situation was the Textual developer console, which you can launch with <code>textual console</code>.</p> On the right, Dave's 5x5 Textual app. On the left, the Textual console. <p>Then, by running a Textual application with the <code>--dev</code> flag, all standard output will be redirected to it. This means you can use the builtin <code>print</code> function and still immediately see the output. Textual itself also writes information to this console, giving insight into the messages that are flowing through an application.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#pixel-art","title":"Pixel art","text":"<p>Cells in the terminal are roughly two times taller than they are wide. This means, that two horizontally adjacent cells form an approximate square.</p> <p>Using this fact, I wrote a simple library based on Rich and PIL which can convert an image file into terminal output. You can find the library, <code>rich-pixels</code>, on GitHub.</p> <p>It\u2019s particularly good for displaying simple pixel art images. The SVG image below is also a good example of the SVG export functionality I touched on earlier.</p> Rich <p>Since the library generates an object which is renderable using Rich, these can easily be embedded inside Textual applications.</p> <p>Here's an example of that in a scrapped \"Pok\u00e9dex\" app I threw together:</p> <p>This is a rather naive approach to the problem... but I did it for fun!</p> <p>Other methods for displaying images in the terminal include:</p> <ul> <li>A more advanced library like chafa, which uses a range of Unicode characters to achieve a more accurate representation of the image.</li> <li>One of the available terminal image protocols, such as Sixel, Kitty\u2019s Terminal Graphics Protocol, and iTerm Inline Images Protocol.</li> </ul> <p>That was a whirlwind tour of just some of the projects I tackled in 2022. If you found it interesting, be sure to follow me on Twitter. I don't post often, but when I do, it's usually about things similar to those I've discussed here.</p>"},{"location":"blog/2022/11/06/new-blog/","title":"New Blog","text":"<p>Welcome to the first post on the Textual blog.</p> <p>I plan on using this as a place to make announcements regarding new releases of Textual, and any other relevant news.</p> <p>The first piece of news is that we've reorganized this site a little. The Events, Styles, and Widgets references are now under \"Reference\", and what used to be under \"Reference\" is now \"API\" which contains API-level documentation. I hope that's a little clearer than it used to be!</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/","title":"Behind the Curtain of Inline Terminal Applications","text":"<p>Textual recently added the ability to run inline terminal apps. You can see this in action if you run the calculator example:</p> <p></p> <p>The application appears directly under the prompt, rather than occupying the full height of the screen\u2014which is more typical of TUI applications. You can interact with this calculator using keys or the mouse. When you press Ctrl+C the calculator disappears and returns you to the prompt.</p> <p>Here's another app that creates an inline code editor:</p> Videoinline.py <p> </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\n\nclass InlineApp(App):\n    CSS = \"\"\"\n    TextArea {\n        height: auto;\n        max-height: 50vh;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield TextArea(language=\"python\")\n\n\nif __name__ == \"__main__\":\n    InlineApp().run(inline=True)\n</code></pre> <p>This post will cover some of what goes on under the hood to make such inline apps work.</p> <p>It's not going to go in to too much detail. I'm assuming most readers will be more interested in a birds-eye view rather than all the gory details.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#programming-the-terminal","title":"Programming the terminal","text":"<p>Firstly, let's recap how you program the terminal. Broadly speaking, the terminal is a device for displaying text. You write (or print) text to the terminal which typically appears at the end of a continually growing text buffer. In addition to text you can also send escape codes, which are short sequences of characters that instruct the terminal to do things such as change the text color, scroll, or other more exotic things.</p> <p>We only need a few of these escape codes to implement inline apps.</p> <p>Note</p> <p>I will gloss over the exact characters used for these escape codes. It's enough to know that they exist for now. If you implement any of this yourself, refer to the wikipedia article. </p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#rendering-frames","title":"Rendering frames","text":"<p>The first step is to display the app, which is simply text (possibly with escape sequences to change color and style). The lines are terminated with a newline character (<code>\"\\n\"</code>), except for the very last line (otherwise we get a blank line a the end which we don't need). Rather than a final newline, we write an escape code that moves the cursor back to it's prior position.</p> <p>The cursor is where text will be written. It's the same cursor you see as you type. Normally it will be at the end of the text in the terminal, but it can be moved around terminal with escape codes. It can be made invisible (as in Textual apps), but the terminal will keep track of the cursor, even if it can not be seen.</p> <p>Textual moves the cursor back to its original starting position so that subsequent frames will overwrite the previous frame.</p> <p>Here's a diagram that shows how the cursor is positioned:</p> <p>Note</p> <p>I've drawn the cursor in red, although it isn't typically visible.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2caW7bSFx1MDAxNoD/51x1MDAxNIIzP7qBuFL7XHUwMDEyYDCwZStyXHUwMDFj2+1VTmZcdTAwMWFcckqiLMZcdTAwMTQpkZRspVx1MDAxMWAwZ+hcdTAwMWNjljPlJPOKdkRKMlx1MDAxNcWb1EmUwLGruDxcdTAwMTa/t5fz+5NSaSVcdTAwMTl23ZVcdTAwMTelXHUwMDE197Lh+F4zci5WntnxgVx1MDAxYsVeXHUwMDE4wFx1MDAxNE1/jsN+1EiPbCdJN37x/HnHic7dpOs7XHJcdTAwMTdccry47/hx0m96IWqEnede4nbiv9mvu07H/Ws37DSTXGJlN1l1m15cdTAwMTJGV/dyfbfjXHUwMDA2SVxmV/87/FxcKv2efs1JXHUwMDE3uY3EXHTOfDc9IZ3KXHUwMDA0JJjxyeHdMEilpVJcdCOVXHUwMDE5zXvxXHUwMDA23C5xmzDZXHUwMDAykd1sxlx1MDAwZa3UX56u8lajfr6zj/VvXHUwMDAz1yHRRT+7a8vz/cNk6KdSNaIwjlfbTtJoZ0fESVx1MDAxNJ67Na+ZtD8vXm58dG5cdTAwMWPCQmRnRWH/rFx1MDAxZLixXVx1MDAwMzJcdTAwMWFccrtOw0uG6TPi0ejVQrwoZSOX9k6UIcxcZlWGXHUwMDFhZrRQajRtLyAl0lpcdTAwMWGuXHUwMDE55lRzbiZcdTAwMDQrhz68XHUwMDBlXHUwMDEw7ClOP5lodadxflx1MDAwNvJcdTAwMDXN0TFJ5Fx1MDAwNHHXieClZcddXFw/slx1MDAwMEGYMEJJw5RmLJOj7Xpn7Vx1MDAwNFx1MDAwZWFcdTAwMTIjTbDhXFwyJoimMpPGTV9cclx1MDAxMVxcK1xml8jOtjJ0t5opJb9mLyRcdTAwMDK+tuwpQd/38+tcdTAwMTk0r9dzbKJuJzZzwGWX6nebzlx1MDAxNVx1MDAxOERcdTAwMTEmKeZSgJSjed9cdTAwMGLOJy/nh43zjKV09MOzWzCsjChCmGCl4aVcbknmhtjpVVx1MDAwNqe7XHUwMDA3bqvSOKqel/1cdTAwMWHFXHUwMDFi61x1MDAwNVx1MDAxME+AuDh8OdJcdTAwMDLAoFx1MDAxNFOjXGah4/hqhGFcdTAwMWSoxFx1MDAwMpBRWj9cdTAwMWO+xCBDODVcXGqBQZBpfKlGQlx0hTU2RmEpmZ7GXHUwMDE3c0OtXHUwMDFhfjP4ur7vdeNcdTAwMWLhhftcdTAwMTTBK7li5Gvs78nxK+dQXGYvejtcdTAwMDde69xcdTAwMDSV+JeXRfZ3Jrrk8dBlXHUwMDFjXHSARVx1MDAwMppEXHUwMDEzg8ctr5JAXHUwMDBio5JcdTAwMDHZXHUwMDE4kOJ3Qfdpy1x1MDAxMVTQaWxcdENcdTAwMWN0XHUwMDA3nFx1MDAxZOhcdTAwMGblWvNpblx0XHUwMDA1OSU3YHIxZYxyNcktXHUwMDAwXHUwMDBilvtbsrozsFU5XHUwMDFiM4Gt4kRcdTAwMWH4Oze2g+5cdTAwMWXpuoPN9ZbgZ69cdTAwMTmpXVbLtSXHVlx1MDAxMsSNXHUwMDExlFBcclx1MDAxNlx1MDAxNYtxalx1MDAwNThxooQ2XHUwMDE4XFwx0fKO1NYxXHUwMDE2XHUwMDBmRS1cdTAwMDSANtigmHxcdTAwMTfYSlWELVx1MDAwM3NLhNBsbm533uDt/dPN3v4gpju7XXZcdTAwMTJcdTAwMGZcdTAwMWG/LTm32iCwgYJDLKshvuTj3EJcdTAwMTiBOVx1MDAwNJZcdTAwMWNsMeNE3IlbQutcdTAwMTA1P1x1MDAxOLdKQKzOXHQ131xmt4l7mdxcdTAwMThcIlx1MDAxNEZcYlxcW88oclB/idmzzsn62/CiXHUwMDE19Fx1MDAwZvc3TpOeXGLeXHUwMDBivdzRLVx1MDAxN1x1MDAxNCmIXHIwY0bAs04kZ1xuI8CDXHUwMDE5XGJcdTAwMWQ0VzznfiehJa79c/voXHUwMDE2zDpEKIaBJJgqxm/glopJTjlIXHUwMDA1XGbrXHUwMDA1Yio1hORUf1x1MDAwNaaZVGGQXHUwMDFjeu/Talx1MDAwMFx1MDAxZVx1MDAxYq04XHUwMDFkz1x1MDAxZo691JTflOOo41x1MDAwNY6/Mjaz5ntnluZcdTAwMTXfbY1jnnhccsdcdTAwMWZNJ2E3m23AnVx1MDAxYy9wo+mVXHQj78ze5ajwrvCcbnVkUVDu3dSd2LWzdlxc30oniTCTo6OckzCqXHUwMDE1pGPzR0CXeu2UvD5cdTAwMWGcvCtv1JPGsLKvPLLcWkmZLYpcdTAwMTBuuMBgwlxyXHUwMDFlzzmpxogxQVx1MDAxNbf+RIviksldtZJcdTAwMTKMXGZT2cvNlDGXLVxcKSPF0qQ2YoGp5ZU2mjyl96iNWfTyWVx1MDAxYv9S6lx1MDAwZZN2XHUwMDE4lLzAXCKPusPH1ctZ95/U0Fx1MDAxYlx1MDAxNdTcUkHJ5OhIQVx1MDAwNbYhXHUwMDA1o/O7TYdcZumx13ldebllZCu52KItvrPkXG5KJVx1MDAwMlx1MDAxZsVcdTAwMDSXRFKFc4FtXG5cbjZIQZpcdTAwMDYpNzdE6clcdTAwMTg0U1DaMi7ndylcblx0JOlccvpJclx1MDAxMF8rKCNcdTAwMTCFa/pcdTAwMWSp56eP//70xz9cdTAwMTf59+N//lx1MDAxMXz6418lr9NccqOklLS9uDTzXHUwMDAzXHUwMDA3X53RXG6jktXrXHUwMDEyvP4z9yeCf37xhTPsp1x1MDAxYnlB8lPw81x1MDAxY/f4+L9Fr81/XHUwMDFm11j+oOHPQsNcXK6LiJm+a3ZnjnA5OTzyYJA9U1tcdTAwMWKe24GpzfiClVtcdTAwMGX1anHjpFLeXHUwMDFjen7052jNXHTEId9cdTAwMTKUgF9cdTAwMThrV1x1MDAwZdP0ykBgr4WEIFx1MDAxM1x1MDAxNlx1MDAwNcs71SxcdTAwMWWhN6chMIHogyy8uUHyKD9Yby5f0J/qzVx0SNgxJ/NT3H7/+vByUD1+e+iL9XpMnMBcdTAwMWK2lz1cZlOIci6UwMZcdTAwMDae48VcdTAwMGJu0yRcdTAwMDW8QDjKJeeYPVx1MDAxY7730puDlFx1MDAwZkIkyG+/XHUwMDE5fGdVi1x1MDAxNS6C1+a98FLN/H3lkzZda1x1MDAxZZQjUj1uXHUwMDFlXHUwMDFjNdpq66R6seTVYsjxXHJYPKZcdTAwMDVcdTAwMDXDy+SE7dVcdTAwMWFcdTAwMDG6WsExmuW7zsvXnKPEdpRccv4+wNW0cFOPzfkgIzTztzmq+28q4dbh+erQK7d5r856tfLakoMrXHUwMDE50jaxXHUwMDA150JcdTAwMTlcdTAwMTZ40uoqXHUwMDA040yJtHt3p/1cdTAwMTBcdTAwMGbcnlx1MDAwM72TWkqyyIrVI3Kriquq1LZ7zNdY3Jc7nlx1MDAxYuNcdTAwMWVf9VuDau3dpnpVq95qJ88jgmtcYjhpKYhSVLHc1pDP2Fx1MDAxMiWxpFx1MDAxMGOSO8Zcblx1MDAwZtye00pcdI5cdTAwMDVZeFf53rAtLDTqwiCBMNugs3ZobmYvutH+5j7ZXHUwMDEwu1x1MDAxYvuy2Ze7ZH/TXe5cYpdcdTAwMGKBIOfBXG645Fx1MDAxOPLSySiBXCJbZSRcdTAwMTAvSVx1MDAwNS+keFx1MDAwZs9CXHUwMDFhdFx1MDAwNljHkK0tvEH3UDXH77NBR1Vx/Z/BmlOt8fyJ53FP7jjbtdO1zdW9gyZdq78/7peXWy0h3kVUUS5cdTAwMTUziimWlVwi0j2hhlwiSPFsRFxm5Fx1MDAxOVpcXP5/zP6cLVx0gFx1MDAwMqtcdTAwMWb9ueyYb7Q/XHUwMDA3IXqhfnJqgcFfUVx1MDAxOPLXvM6GqO329ereK1V/XelttypLrp9UI1xi8Vx1MDAxOIUn5ZBCT2zFolx1MDAxNFx1MDAxMckoXHUwMDEznCqueXGs96jtOaGxXmhQl2on+5otV3fTzlx1MDAxZlxymVx1MDAxOWcsVUPmR3vuXHUwMDA3XHKP2Z6jhWmfpmCoXHUwMDE4IfOX2EhvfbuqlcvLb99eXjr97kbz6HLJ3Vx1MDAxN+OIQV5cdTAwMDc+Styw/1x1MDAwYuJNJLFcdTAwMDT/JpWcVVx1MDAxYXYxI4zMdF9PW62GaZhcdTAwMWJKXHUwMDE1XHUwMDE0XHQsXHUwMDA1xpRzwvGNXowypLUxIIfdlkem8z/wK5xA1irvIVx1MDAwMfyMUFx1MDAwNlx1MDAxMbtcdTAwMWX5UOzsRudkZ4/AONi+PN9cdTAwMWVe+q3tpNojvai25Veyus5cdTAwMTitTlx1MDAxNIVcdTAwMTcro5lcdTAwMGbX381ypZLl+6VcdTAwMGbZXHUwMDA2pKSwIM1cdTAwMTTmkI3kXHUwMDA0+ZK2bPT97aNcck81XHUwMDBl+/XtNVapbe3t9e5VW5phYm9/j+pcdTAwMDKJXHUwMDE4YkZAslx1MDAwNeGTytec7flcdTAwMWFzZCRcdTAwMTd2+5PUbEa0t3h1XHUwMDExttZjf1liQeryaFx1MDAwNb8rhbpcdTAwMDFmZoo3Zlx1MDAxMG53vOr5XHUwMDBifrM1fFx1MDAwMaZffVx1MDAxMWWGXHUwMDExNlxubD9k6oTh8X2Fmk7sx79LYaFcdTAwMTBlrjRcdTAwMDKGpaKQjlxiIFlOo6xcdTAwMDRcYmJ/aVBcdTAwMThObJljXG5larRS1NxH6W9cdTAwMWFlelx1MDAxN5RT26xulebEiVx1MDAxMyXrXtD0grPJU9ygmc3kRL7+T1x1MDAwNLbmXGJG0pSp0bfyr2LEIVFnRHNJMDNgMXjusDOna99cdTAwMTSCjI1rMFx1MDAxOFQoa1CmlsV34qRcdTAwMWN2Op61ub+EXHUwMDEwb06KnT7SmlXHtutMvVx1MDAwNnio/Nyk3nbtXHUwMDE1x1x1MDAxZG32XSljO/1h9P2vz248epVyg6RUXHUwMDAwN4RccpCW6/zpq1xuKWNgkCtpofzi1YoxvrrcJMHZXHUwMDA1n+T/vZ1LxoVcdTAwMDVcdTAwMTj7aNpQOn9cdTAwMDB7vMferVV3XHUwMDFijvP2/M3uprOxeeRcdTAwMWQtd1x1MDAwMKvA1UlcYl+lxvC4dLw8XG4mXHUwMDFlaSo45pxSlf8ls6VzyFx1MDAwNixcdTAwMTiwI+6hZHrP/lhqXHUwMDEwLVx1MDAxNyfM64+fXFwrzIrT7Vx1MDAxZSZwyZFo8Ghe87qGk11mZeC5XHUwMDE36zeuu/3YmDiV32Lops/54cmH/1x1MDAwM7lI91xmIn0= terminal$ python inline.py\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 import this                              \u2502\u2502 for n in range(10):                      \u2502\u2502     print(n)                             \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256fterminal$ python inline.py\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 import this                              \u2502\u2502 for n in range(10):                      \u2502\u2502     print(n)                             \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>There is an additional consideration that comes in to play when the output has less lines than the previous frame. If we were to write a shorter frame, it wouldn't fully overwrite the previous frame. We would be left with a few lines of a previous frame that wouldn't update.</p> <p>The solution to this problem is to write an escape code that clears lines from the cursor downwards before we write a smaller frame. You can see this in action in the above video. The inline app can grow or shrink in size, and still be anchored to the bottom of the terminal.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#cursor-input","title":"Cursor input","text":"<p>The cursor tells the terminal where any text will be written by the app, but it also assumes this will be where the user enters text. If you enter CJK (Chinese Japanese Korean) text in to the terminal, you will typically see a floating control that points where new text will be written. If you are on a Mac, the emoji entry dialog (Ctrl+Cmd+Space) will also point at the current cursor position. To make this work in a sane way, we need to move the terminal's cursor to where any new text will appear.</p> <p>The following diagram shows the cursor moving to the point where new text is displayed.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2a627bRlx1MDAxNoD/5ylcdTAwMDRlf7RAzMzMmWuAxcJ27Nhx41xc3NSut0VAkyOJNUWyJGVbKVxmXHUwMDE0fYbmMbq7z5Qn2TO0I0qUZKuOb73Qhi3O9fDMd+acM9RPXHUwMDBmWq12Ocxs+0mrbU9cdTAwMDI/jsLcP24/cuVHNi+iNMEqVt1cdTAwMTfpIFx1MDAwZqqWvbLMiiePXHUwMDFm9/380JZZ7Fx1MDAwN9Y7ioqBXHUwMDFmXHUwMDE35SCMUi9I+4+j0vaLf7m/237f/jNL+2GZe/UkSzaMyjQ/m8vGtm+TssDR/433rdZP1d8x6XJcdTAwMWKUftKNbdWhqqpcdTAwMDWkjJlm8XaaVNJSobk2Wkkxalx1MDAxMVx1MDAxNU9xwtKGWN1BoW1d44rar9+Q7GiLraytL29mS/L5yTc/RLv1vJ0ojnfKYVxcyVx1MDAxNeRpUSz1/DLo1S2KMk9cdTAwMGbtblx1MDAxNJa9T+pcdTAwMWIrXHUwMDFm9S1SVEXdK09cdTAwMDfdXmJcdTAwMGKnXHUwMDA1OipNMz+IyqErI2RUeqaKJ6265Fx1MDAwNO+48oBcdTAwMTFGqVx1MDAwMEo0UC5H1WdcdTAwMDNIT3AlJZdMXHRcdTAwMDGsKdlqXHUwMDFh44qgZFx1MDAwZkl11bJcdTAwMWT4wWFcdTAwMTdcdTAwMDVMwlGbMveTXCLzc1xct7rd8fkzXHUwMDBiXHUwMDA2XHUwMDFlXGIjlDSgNIBcdTAwMWG16Nmo2yuxXHRI4mlKXGbnXHUwMDEyQFDNamFcdTAwMGJbrY0mRoBSXHUwMDEyRlx1MDAxNU6EbDOsOPm+XpBcdTAwMWNcdNt0PZJBXHUwMDFjj+szXHTP9TlRceAq1saQq4dcdTAwMWFkoX9cdTAwMDZcdTAwMDZVXHUwMDE0JJOaaSlquOIoOWxcdTAwMGVcdTAwMTenwWHNUlV6+uhcblx1MDAxNFx1MDAxYkPmQqy0MIpcdTAwMThtXHUwMDE2hvjHr7rrq2+Wj9f2uqTc3szWNlx1MDAwM39jXHUwMDBlxFxyXHUwMDEw71xmX+NR4Fx1MDAwMjjnhCjJTYNe5UmpXHUwMDA1Z6CMJOPV104vNZ6hnFx1MDAxOY7zXHUwMDExZeg0vUx7Qlx0RZBRXFxcdTAwMTgpQTfpXHUwMDE1XHUwMDFjgKEhij9ccr02jqOsmMmuXHUwMDE2MI9dzXEtJfDF0e2+j168XHUwMDEw2TqYcqhXzP7zb/rv315cdTAwMDVdemvoXG7taW64UVpqQyVcdTAwMTI8yS6VXHUwMDFlXHUwMDAzMMo4KnBTa0r2u9h92PFcdTAwMDVcdTAwMTNsmltcblx1MDAxZSeMXHQj0Vx1MDAwYjCuNZ9cdTAwMDaXMk+gXHUwMDA3MLjlXHUwMDEyXHUwMDE0iXHVXHUwMDA01/UlnCui/lxu5Jqxx2ySXHUwMDBiwJkyv4Pc7bWXXHUwMDFi5bF+2SGr79ZcdTAwMGZiXHUwMDE28/f7nftNrlx1MDAxNp7SXHUwMDA0d13BiFZKq1x1MDAwNrjCI1x1MDAxNCFcdTAwMTGMaSXImJlfXHLcXHUwMDAzQsRNgUu5llxcMKn+XHUwMDEyWy7qalx1MDAxZbhC4V4jcVFcdTAwMTdcdTAwMDZ36+nhXHUwMDBifTLs7m1nvb2NV1svI1x1MDAwMUf3XHUwMDFiXFyK0GhcZlx1MDAwM1x1MDAxNG5Uwlx1MDAwMLrpXHUwMDA2udzjUtAq1EVi9GdcdTAwMDW7XHUwMDBmKTvQWt5cdTAwMTi5Qlx1MDAxYuCamj9cdTAwMGa5pT0pZ2HL5NxIgUpCccVAwcLc/rD79sSHr0Gvvn6z+3SfLNFnavN+R7lMSc9grFx1MDAwZkJcdTAwMDKT+LyNUIFg7Ek0brycUMVByrncUut+rlx1MDAxZeYqgVx0mDGYK1x1MDAwMmFcbvhcZnSZmEJVXHUwMDAyZcDUWFxi81x1MDAwN0C1lipNyp3ova3inInSdb9cdTAwMWbFw4llrVx1MDAxOK5YzvtR4sftiZrlOOo6otux7UyiXkaBXHUwMDFmj6rLNKtrXHUwMDAznMmPXHUwMDEym09rJs2jrpvl67mz4nPajdGu4o0tzoFfWFfryvWV7Fx1MDAxMoRolo7sXHUwMDEyWUVcdTAwMWUx3VnYLjl59tan20d+9JzRaOdN9mpJsfttl5J66Cw4hlx1MDAwZlxcYOJcdTAwMDeT7lx1MDAwNFxcSmhcdTAwMDTarZIuir85q2SUeFx1MDAwNsZimNpcdTAwMThrXHUwMDAz/WSMXG4loZzDXHUwMDFk+1xyReg4pNdojLUr+GSM/2hlw7KXJq0occR72fB2zfKi+ZtcdTAwMDY60z7N1eyTz81ThDuA0Fx1MDAxNOo1uMw8i63lYfx8XHUwMDA11nskXGJ3XHUwMDBls414S2T32zxcdTAwMDXxJCa9mF9cdTAwMGJcdTAwMDBkrlx1MDAxZaXChFx1MDAxYlx1MDAwZkP/KrdmnEvdkKs2T9YxlvPPOVx1MDAxYlx1MDAxMk6QWVFeLfDIPCWG4VxmQ9C7Nk82juiNmufHXHUwMDBmv3389ee7/P3wn++Sj7/+0or6WZqXrbJcdTAwMTdcdTAwMTWtXHUwMDBiL2x81qOT5i1n1y1cdTAwMDSga7+g5Msnl/RwV5ZHSflF8uVcdTAwMDJzfPjfXevmv7e7Wf5Nw1x1MDAxZoWGhVxcXHUwMDE3XHUwMDE1XHUwMDE3+q5cdTAwMGJfb1x1MDAwMJ3rwDDrk1x1MDAxMjd1tXiA2Vx1MDAwYsPO9ru9XHUwMDFmXHUwMDA3sYSlwVx0W9/v7r+731x1MDAxZYxhXGJcdIxi2qdcdTAwMThRXHUwMDA006hcdFx1MDAxN8ZcdTAwMTnxmCGcXGKXi4HiXHLBalx1MDAxN2axL9BLTto6gVx0zIzzXG7mXHRcIlx1MDAwNSHoJSknMz1cdTAwMTlcdTAwMDNPa1xmdkFSYJrOyFx1MDAwMYlcdTAwMDDsj20+3699gqjGXGLOS07nu7tRn7r3iIxju9594dM1sqo3l5dcdTAwMDa7+1n323ykiFx0Xv08T4/bo5rT80/343Ugp3PfaVx1MDAwM/IhheKLXHUwMDA3fGHk2+Dbbnm4WiztvVx1MDAxYa7oZ6+D19dqLmFauumvM+IznsRcXEtzQrTShky+zMbVQGvSXFxcdTAwMTJpwL1qvsfmXCJcdTAwMTU+giHmXHUwMDFhjkyuZC63XHUwMDA29JlBzYDZSD5cdTAwMGZmyo3WinJYfPO/2MTvYPNXl1x1MDAxZS5cYkxP8Fx1MDAxMSWbtfWDwuyFUFx1MDAwNVx1MDAwMIg7tvqcw4X5LFx1MDAwYuqhsinRWktFZ1x1MDAxZVVjloXJXHUwMDAyo0BcYroppae+k0E1+ih5Uyyz22V5TM1+Xq5ESVx1MDAxOCXdZlx1MDAxN5uEdc2YyOffWdpcXCBcdTAwMWOpsqZg4OQnuFx1MDAwNFxmd1x01LJcdTAwMTRcdTAwMTRcdTAwMTVdXHUwMDFmqjlV+pnTgoerQ1D51X5CzbSFx35Rrqb9fuT23FcpRpxNqasnWnbm2LP+1CrgM43XNe02cyNOOtr6U6tGu7pcdTAwMTl9/v7RzNZKeSCldF9cdTAwMDKQXHUwMDA0o5/xzlxcee49s+S0qmLissHmM+yuKXrr4Vx1MDAxZYz/d46+mqDtZ9lOiVx1MDAxNI2WXHUwMDE2aY7C86S3Vln7KLLHKzNtzV0uhKhcdTAwMTbHbT22Qvv0wen/XHUwMDAxc82RiyJ9 terminal$ python inline.py\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 import this                              \u2502\u2502 for n in range(10):                      \u2502\u2502     print(n)                             \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>This only really impacts text entry (such as the Input and TextArea widgets).</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#mouse-control","title":"Mouse control","text":"<p>Inline apps in Textual support mouse input, which works the same as fullscreen apps.</p> <p>To use the mouse in the terminal you send an escape code which tells the terminal to write encoded mouse coordinates to standard input. The mouse coordinates can then be parsed in much the same was as reading keys.</p> <p>In inline mode this works in a similar way, with an added complication that the mouse origin is at the top left of the terminal. In other words if you move the mouse to the top left of the terminal you get coordinate (0, 0), but the app expects (0, 0) to be where it was displayed.</p> <p>In order for the app to know where the mouse is relative to it's origin, we need to ask the terminal where the cursor is. We do this with an escape code, which tells the terminal to write the current cursor coordinate to standard input. We can then subtract that coordinate from the physical mouse coordinates, so we can send the app mouse events relative to its on-screen origin.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#tldr","title":"tl;dr","text":"<p>Escapes codes.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#found-this-interesting","title":"Found this interesting?","text":"<p>If you are interested in Textual, join our Discord server.</p> <p>Or follow me for more terminal shenanigans.</p> <ul> <li>@willmcgugan</li> <li>mastodon.social/@willmcgugan</li> </ul>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/","title":"So you're looking for a wee bit of Textual help...","text":""},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#introduction","title":"Introduction","text":"<p>Quote</p> <p>Patience, Highlander. You have done well. But it'll take time. You are generations being born and dying. You are at one with all living things. Each man's thoughts and dreams are yours to know. You have power beyond imagination. Use it well, my friend. Don't lose your head.</p> <p>Juan S\u00e1nchez Villalobos Ram\u00edrez, Chief metallurgist to King Charles V of Spain</p> <p>As of the time of writing, I'm a couple or so days off having been with Textualize for 3 months. It's been fun, and educational, and every bit as engaging as I'd hoped, and more. One thing I hadn't quite prepared for though, but which I really love, is how so many other people are learning Textual along with me.</p> <p>Even in those three months the library has changed and expanded quite a lot, and it continues to do so. Meanwhile, more people are turning up and using the framework; you can see this online in social media, blogs and of course in the ever-growing list of projects on GitHub which depend on Textual.</p> <p>This inevitably means there's a lot of people getting to grips with a new tool, and one that is still a bit of a moving target. This in turn means lots of people are coming to us to get help.</p> <p>As I've watched this happen I've noticed a few patterns emerging. Some of these good or neutral, some... let's just say not really beneficial to those seeking the help, or to those trying to provide the help. So I wanted to write a little bit about the different ways you can get help with Textual and your Textual-based projects, and to also try and encourage people to take the most helpful and positive approach to getting that help.</p> <p>Now, before I go on, I want to make something very clear: I'm writing this as an individual. This is my own personal view, and my own advice from me to anyone who wishes to take it. It's not Textual (the project) or Textualize (the company) policy, rules or guidelines. This is just some ageing hacker's take on how best to go about asking for help, informed by years of asking for and also providing help in email, on Usenet, on forums, etc.</p> <p>Or, put another way: if what you read in here seems sensible to you, I figure we'll likely have already hit it off over on GitHub or in the Discord server. ;-)</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#where-to-go-for-help","title":"Where to go for help","text":"<p>At this point this is almost a bit of an FAQ itself, so I thought I'd address it here: where's the best place to ask for help about Textual, and what's the difference between GitHub Issues, Discussions and our Discord server?</p> <p>I'd suggest thinking of them like this:</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#discord","title":"Discord","text":"<p>You have a question, or need help with something, and perhaps you could do with a reply as soon as possible. But, and this is the really important part, it doesn't matter if you don't get a response. If you're in this situation then the Discord server is possibly a good place to start. If you're lucky someone will be hanging about who can help out.</p> <p>I can't speak for anyone else, but keep this in mind: when I look in on Discord I tend not to go scrolling back much to see if anything has been missed. If something catches my eye, I'll try and reply, but if it doesn't... well, it's mostly an instant chat thing so I don't dive too deeply back in time.</p> <p>Going from Discord to a GitHub issue</p> <p>As a slight aside here: sometimes people will pop up in Discord, ask a question about something that turns out looking like a bug, and that's the last we hear of it. Please, please, please, if this happens, the most helpful thing you can do is go raise an issue for us. It'll help us to keep track of problems, it'll help get your problem fixed, it'll mean everyone benefits.</p> <p>My own advice would be to treat Discord as an ephemeral resource. It happens in the moment but fades away pretty quickly. It's like knocking on a friend's door to see if they're in. If they're not in, you might leave them a note, which is sort of like going to...</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#github","title":"GitHub","text":"<p>On the other hand, if you have a question or need some help or something where you want to stand a good chance of the Textual developers (amongst others) seeing it and responding, I'd recommend that GitHub is the place to go. Dropping something into the discussions there, or leaving an issue, ensures it'll get seen. It won't get lost.</p> <p>As for which you should use -- a discussion or an issue -- I'd suggest this: if you need help with something, or you want to check your understanding of something, or you just want to be sure something is a problem before taking it further, a discussion might be the best thing. On the other hand, if you've got a clear bug or feature request on your hands, an issue makes a lot of sense.</p> <p>Don't worry if you're not sure which camp your question or whatever falls into though; go with what you think is right. There's no harm done either way (I may move an issue to a discussion first before replying, if it's really just a request for help -- but that's mostly so everyone can benefit from finding it in the right place later on down the line).</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#the-dos-and-donts-of-getting-help","title":"The dos and don'ts of getting help","text":"<p>Now on to the fun part. This is where I get a bit preachy. Ish. Kinda. A little bit. Again, please remember, this isn't a set of rules, this isn't a set of official guidelines, this is just a bunch of \"if you want my advice, and I know you didn't ask but you've read this far so you actually sort of did don't say I didn't warn you!\" waffle.</p> <p>This isn't going to be an exhaustive collection, far from it. But I feel these are some important highlights.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#do","title":"Do...","text":"<p>When looking for help, in any of the locations mentioned above, I'd totally encourage:</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#be-clear-and-detailed","title":"Be clear and detailed","text":"<p>Too much detail is almost always way better than not enough. \"My program didn't run\", often even with some of the code supplied, is so much harder to help than \"I ran this code I'm posting here, and I expected this particular outcome, and I expected it because I'd read this particular thing in the docs and had comprehended it to mean this, but instead the outcome was this exception here, and I'm a bit stuck -- can someone offer some pointers?\"</p> <p>The former approach means there often ends up having to be a back and forth which can last a long time, and which can sometimes be frustrating for the person asking. Manage frustration: be clear, tell us everything you can.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#say-what-resources-youve-used-already","title":"Say what resources you've used already","text":"<p>If you've read the potions of the documentation that relate to what you're trying to do, it's going to be really helpful if you say so. If you don't, it might be assumed you haven't and you may end up being pointed at them.</p> <p>So, please, if you've checked the documentation, looked in the FAQ, done a search of past issues or discussions or perhaps even done a search on the Discord server... please say so.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#be-polite","title":"Be polite","text":"<p>This one can go a long way when looking for help. Look, I get it, programming is bloody frustrating at times. We've all rage-quit some code at some point, I'm sure. It's likely going to be your moment of greatest frustration when you go looking for help. But if you turn up looking for help acting all grumpy and stuff it's not going to come over well. Folk are less likely to be motivated to lend a hand to someone who seems rather annoyed.</p> <p>If you throw in a please and thank-you here and there that makes it all the better.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#fully-consider-the-replies","title":"Fully consider the replies","text":"<p>You could find yourself getting a reply that you're sure won't help at all. That's fair. But be sure to fully consider it first. Perhaps you missed the obvious along the way and this is 100% the course correction you'd unknowingly come looking for in the first place. Sure, the person replying might have totally misunderstood what was being asked, or might be giving a wrong answer (it me! I've totally done that and will again!), but even then a reply along the lines of \"I'm not sure that's what I'm looking for, because...\" gets everyone to the solution faster than \"lol nah\".</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#entertain-what-might-seem-like-odd-questions","title":"Entertain what might seem like odd questions","text":"<p>Aye, I get it, being asked questions when you're looking for an answer can be a bit frustrating. But if you find yourself on the receiving end of a small series of questions about your question, keep this in mind: Textual is still rather new and still developing and it's possible that what you're trying to do isn't the correct way to do that thing. To the person looking to help you it may seem to them you have an XY problem.</p> <p>Entertaining those questions might just get you to the real solution to your problem.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#allow-for-language-differences","title":"Allow for language differences","text":"<p>You don't need me to tell you that a project such as Textual has a global audience. With that rather obvious fact comes the other fact that we don't all share the same first language. So, please, as much as possible, try and allow for that. If someone is trying to help you out, and they make it clear they're struggling to follow you, keep this in mind.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#acknowledge-the-answer","title":"Acknowledge the answer","text":"<p>I suppose this is a variation on \"be polite\" (really, a thanks can go a long way), but there's more to this than a friendly acknowledgement. If someone has gone to the trouble of offering some help, it's helpful to everyone who comes after you to acknowledge if it worked or not. That way a future help-seeker will know if the answer they're reading stands a chance of being the right one.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#accept-that-textual-is-zero-point-software-right-now","title":"Accept that Textual is zero-point software (right now)","text":"<p>Of course the aim is to have every release of Textual be stable and useful, but things will break. So, please, do keep in mind things like:</p> <ul> <li>Textual likely doesn't have your feature of choice just yet.</li> <li>We might accidentally break something (perhaps pinning Textual and testing   each release is a good plan here?).</li> <li>We might deliberately break something because we've decided to take a   particular feature or way of doing things in a better direction.</li> </ul> <p>Of course it can be a bit frustrating a times, but overall the aim is to have the best framework possible in the long run.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#dont","title":"Don't...","text":"<p>Okay, now for a bit of old-hacker finger-wagging. Here's a few things I'd personally discourage:</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#lack-patience","title":"Lack patience","text":"<p>Sure, it can be annoying. You're in your flow, you've got a neat idea for a thing you want to build, you're stuck on one particular thing and you really need help right now! Thing is, that's unlikely to happen. Badgering individuals, or a whole resource, to reply right now, or complaining that it's been <code>$TIME_PERIOD</code> since you asked and nobody has replied... that's just going to make people less likely to reply.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#unnecessarily-tag-individuals","title":"Unnecessarily tag individuals","text":"<p>This one often goes hand in hand with the \"lack patience\" thing: Be it asking on Discord, or in GitHub issues, discussions or even PRs, unnecessarily tagging individuals is a bit rude. Speaking for myself and only myself: I love helping folk with Textual. If I could help everyone all the time the moment they have a problem, I would. But it doesn't work like that. There's any number of reasons I might not be responding to a particular request, including but not limited to (here I'm talking personally because I don't want to speak for anyone else, but I'm sure I'm not alone here):</p> <ul> <li>I have a job. Sure, my job is (in part) Textual, but there's more to it   than that particular issue. I might be doing other stuff.</li> <li>I have my own projects to work on too. I like coding for fun as well (or   writing preaching old dude blog posts like this I guess, but you get the   idea).</li> <li>I actually have other interests outside of work hours so I might actually   be out doing a 10k in the local glen, or battling headcrabs in VR, or   something.</li> <li>Housework. :-/</li> </ul> <p>You get the idea though. So while I'm off having a well-rounded life, it's not good to get unnecessarily intrusive alerts to something that either a) doesn't actually directly involve me or b) could wait.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#seek-personal-support","title":"Seek personal support","text":"<p>Again, I'm going to speak totally for myself here, but I also feel the general case is polite for all: there's a lot of good support resources available already; sending DMs on Discord or Twitter or in the Fediverse, looking for direct personal support, isn't really the best way to get help. Using the public/collective resources is absolutely the best way to get that help. Why's it a bad idea to dive into DMs? Here's some reasons I think it's not a good idea:</p> <ul> <li>It's a variation on \"unnecessarily tagging individuals\".</li> <li>You're short-changing yourself when it comes to getting help. If you ask   somewhere more public you're asking a much bigger audience, who   collectively have more time, more knowledge and more experience than a   single individual.</li> <li>Following on from that, any answers can be (politely) fact-checked or   enhanced by that audience, resulting in a better chance of getting the   best help possible.</li> <li>The next seeker-of-help gets to miss out on your question and the answer.   If asked and answered in public, it's a record that can help someone else   in the future.</li> </ul>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#doubt-your-ability-or-skill-level","title":"Doubt your ability or skill level","text":"<p>I suppose this should really be phrased as a do rather than a don't, as here I want to encourage something positive. A few times I've helped people out who have been very apologetic about their questions being \"noob\" questions, or about how they're fairly new to Python, or programming in general. Really, please, don't feel the need to apologise and don't be ashamed of where you're at.</p> <p>If you've asked something that's obviously answered in the documentation, that's not a problem; you'll likely get pointed at the docs and it's what happens next that's the key bit. If the attitude is \"oh, cool, that's exactly what I needed to be reading, thanks!\" that's a really positive thing. The only time it's a problem is when there's a real reluctance to use the available resources. We've all seen that person somewhere at some point, right? ;-)</p> <p>Not knowing things is totally cool.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#conclusion","title":"Conclusion","text":"<p>So, that's my waffle over. As I said at the start: this is my own personal thoughts on how to get help with Textual, both as someone whose job it is to work on Textual and help people with Textual, and also as a FOSS advocate and supporter who can normally be found helping Textual users when he's not \"on the clock\" too.</p> <p>What I've written here isn't exhaustive. Neither is it novel. Plenty has been written on the general subject in the past, and I'm sure more will be written on the subject in the future. I do, however, feel that these are the most common things I notice. I'd say those dos and don'ts cover 90% of \"can I get some help?\" interactions; perhaps closer to 99%.</p> <p>Finally, and I think this is the most important thing to remember, the next time you are battling some issue while working with Textual: don't lose your head!</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/","title":"On dog food, the (original) Metaverse, and (not) being bored","text":""},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#introduction","title":"Introduction","text":"<p>Quote</p> <p>Cutler, armed with a schedule, was urging the team to \"eat its own dog food\". Part macho stunt and part common sense, the \"dog food diet\" was the cornerstone of Cutler\u2019s philosophy.</p> <p>G. Pascal Zachary \u2014 Show-Stopper!</p> <p>I can't remember exactly when it was -- it was likely late in 1994 or some time in 1995 -- when I first came across the concept of, or rather the name for the concept of, \"eating your own dog food\". The idea and the name played a huge part in the book Show-Stopper! by G. Pascal Zachary. The idea wasn't new to me of course; I'd been writing code for over a decade by then and plenty of times I'd built things and then used those things to do things, but it was fascinating to a mostly-self-taught 20-something me to be reading this (excellent -- go read it if you care about the history of your craft) book and to see the idea written down and named.</p> <p>While Textualize isn't (thankfully -- really, I do recommend reading the book) anything like working on the team building Windows NT, the idea of taking a little time out from working on Textual, and instead work with Textual, makes a lot of sense. It's far too easy to get focused on adding things and improving things and tweaking things while losing sight of the fact that people will want to build with your product.</p> <p>So you can imagine how pleased I was when Will announced that he wanted all of us to spend a couple or so weeks building something with Textual. I had, of course, already written one small application with the library, and had plans for another (in part it's how I ended up working here), but I'd yet to really dive in and try and build something more involved.</p> <p>Giving it some thought: I wasn't entirely sure what I wanted to build though. I do want to use Textual to build a brand new terminal-based Norton Guide reader (not my first, not by a long way) but I felt that was possibly a bit too niche, and actually could take a bit too long anyway. Maybe not, it remains to be seen.</p> <p>Eventually I decided on this approach: try and do a quick prototype of some daft idea each day or each couple of days, do that for a week or so, and then finally try and settle down on something less trivial. This approach should work well in that it'll help introduce me to more of Textual, help try out a few different parts of the library, and also hopefully discover some real pain-points with working with it and highlight a list of issues we should address -- as seen from the perspective of a developer working with the library.</p> <p>So, here I am, at the end of week one. What I want to try and do is briefly (yes yes, I know, this introduction is the antithesis of brief) talk about what I built and perhaps try and highlight some lessons learnt, highlight some patterns I think are useful, and generally do an end-of-week version of a TIL. TWIL?</p> <p>Yeah. I guess this is a TWIL.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#gridinfo","title":"gridinfo","text":"<p>I started the week by digging out a quick hack I'd done a couple of weeks earlier, with a view to cleaning it up. It started out as a fun attempt to do something with Rich Pixels while also making a terminal-based take on <code>slstats.el</code>. I'm actually pleased with the result and how quickly it came together.</p> <p>The point of the application itself is to show some general information about the current state of the Second Life grid (hello to any fellow residents of the original Metaverse!), and to also provide a simple region lookup screen that, using Rich Pixels, will display the object map (albeit in pretty low resolution -- but that's the fun of this!).</p> <p>So the opening screen looks like this:</p> <p></p> <p>and a lookup of a region looks like this:</p> <p></p> <p>Here's a wee video of the whole thing in action:</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#worth-a-highlight","title":"Worth a highlight","text":"<p>Here's a couple of things from the code that I think are worth a highlight, as things to consider when building Textual apps:</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#dont-use-the-default-screen","title":"Don't use the default screen","text":"<p>Use of the default <code>Screen</code> that's provided by the <code>App</code> is handy enough, but I feel any non-trivial application should really put as much code as possible in screens that relate to key \"work\". Here's the entirety of my application code:</p> <pre><code>class GridInfo( App[ None ] ):\n    \"\"\"TUI app for showing information about the Second Life grid.\"\"\"\n\n    CSS_PATH = \"gridinfo.css\"\n    \"\"\"The name of the CSS file for the app.\"\"\"\n\n    TITLE = \"Grid Information\"\n    \"\"\"str: The title of the application.\"\"\"\n\n    SCREENS = {\n        \"main\": Main,\n        \"region\": RegionInfo\n    }\n    \"\"\"The collection of application screens.\"\"\"\n\n    def on_mount( self ) -&gt; None:\n        \"\"\"Set up the application on startup.\"\"\"\n        self.push_screen( \"main\" )\n</code></pre> <p>You'll notice there's no work done in the app, other than to declare the screens, and to set the <code>main</code> screen running when the app is mounted.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#dont-work-hard-on_mount","title":"Don't work hard <code>on_mount</code>","text":"<p>My initial version of the application had it loading up the data from the Second Life and GridSurvey APIs in <code>Main.on_mount</code>. This obviously wasn't a great idea as it made the startup appear slow. That's when I realised just how handy <code>call_after_refresh</code> is. This meant I could show some placeholder information and then fire off the requests (3 of them: one to get the main grid information, one to get the grid concurrency data, and one to get the grid size data), keeping the application looking active and updating the display when the replies came in.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#pain-points","title":"Pain points","text":"<p>While building this app I think there was only really the one pain-point, and I suspect it's mostly more on me than on Textual itself: getting a good layout and playing whack-a-mole with CSS. I suspect this is going to be down to getting more and more familiar with CSS and the terminal (which is different from laying things out for the web), while also practising with various layout schemes -- which is where the revamped <code>Placeholder</code> class is going to be really useful.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#unbored","title":"unbored","text":"<p>The next application was initially going to be a very quick hack, but actually turned into a less-trivial build than I'd initially envisaged; not in a negative way though. The more I played with it the more I explored and I feel that this ended up being my first really good exploration of some useful (personal -- your kilometerage may vary) patterns and approaches when working with Textual.</p> <p>The application itself is a terminal client for the Bored-API. I had initially intended to roll my own code for working with the API, but I noticed that someone had done a nice library for it and it seemed silly to not build on that. Not needing to faff with that, I could concentrate on the application itself.</p> <p>At first I was just going to let the user click away at a button that showed a random activity, but this quickly morphed into a \"why don't I make this into a sort of TODO list builder app, where you can add things to do when you are bored, and delete things you don't care for or have done\" approach.</p> <p>Here's a view of the main screen:</p> <p></p> <p>and here's a view of the filter pop-over:</p> <p></p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#worth-a-highlight_1","title":"Worth a highlight","text":""},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#dont-put-all-your-bindings-in-one-place","title":"Don't put all your <code>BINDINGS</code> in one place","text":"<p>This came about from me overloading the use of the <code>escape</code> key. I wanted it to work more or less like this:</p> <ul> <li>If you're inside an activity, move focus up to the activity type selection   buttons.</li> <li>If the filter pop-over is visible, close that.</li> <li>Otherwise exit the application.</li> </ul> <p>It was easy enough to do, and I had an action in the <code>Main</code> screen that <code>escape</code> was bound to (again, in the <code>Main</code> screen) that did all this logic with some <code>if</code>/<code>elif</code> work but it didn't feel elegant. Moreover, it meant that the <code>Footer</code> always displayed the same description for the key.</p> <p>That's when I realised that it made way more sense to have a <code>Binding</code> for <code>escape</code> in every widget that was the actual context for escape's use. So I went from one top-level binding to...</p> <pre><code>...\n\nclass Activity( Widget ):\n    \"\"\"A widget that holds and displays a suggested activity.\"\"\"\n\n    BINDINGS = [\n        ...\n        Binding( \"escape\", \"deselect\", \"Switch to Types\" )\n    ]\n\n...\n\nclass Filters( Vertical ):\n    \"\"\"Filtering sidebar.\"\"\"\n\n    BINDINGS = [\n        Binding( \"escape\", \"close\", \"Close Filters\" )\n    ]\n\n...\n\nclass Main( Screen ):\n    \"\"\"The main application screen.\"\"\"\n\n    BINDINGS = [\n        Binding( \"escape\", \"quit\", \"Close\" )\n    ]\n    \"\"\"The bindings for the main screen.\"\"\"\n</code></pre> <p>This was so much cleaner and I got better <code>Footer</code> descriptions too. I'm going to be leaning hard on this approach from now on.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#messages-are-awesome","title":"Messages are awesome","text":"<p>Until I wrote this application I hadn't really had a need to define or use my own <code>Message</code>s. During work on this I realised how handy they really are. In the code I have an <code>Activity</code> widget which takes care of the job of moving itself amongst its siblings if the user asks to move an activity up or down. When this happens I also want the <code>Main</code> screen to save the activities to the filesystem as things have changed.</p> <p>Thing is: I don't want the screen to know what an <code>Activity</code> is capable of and I don't want an <code>Activity</code> to know what the screen is capable of; especially the latter as I really don't want a child of a screen to know what the screen can do (in this case \"save stuff\").</p> <p>This is where messages come in. Using a message I could just set things up so that the <code>Activity</code> could shout out \"HEY I JUST DID A THING THAT CHANGES ME\" and not care who is listening and not care what they do with that information.</p> <p>So, thanks to this bit of code in my <code>Activity</code> widget...</p> <pre><code>    class Moved( Message ):\n        \"\"\"A message to indicate that an activity has moved.\"\"\"\n\n    def action_move_up( self ) -&gt; None:\n        \"\"\"Move this activity up one place in the list.\"\"\"\n        if self.parent is not None and not self.is_first:\n            parent = cast( Widget, self.parent )\n            parent.move_child(\n                self, before=parent.children.index( self ) - 1\n            )\n            self.emit_no_wait( self.Moved( self ) )\n            self.scroll_visible( top=True )\n</code></pre> <p>...the <code>Main</code> screen can do this:</p> <pre><code>    def on_activity_moved( self, _: Activity.Moved ) -&gt; None:\n        \"\"\"React to an activity being moved.\"\"\"\n        self.save_activity_list()\n</code></pre> <p>Warning</p> <p>The code above used <code>emit_no_wait</code>. Since this blog post was first published that method has been removed from Textual. You should use <code>post_message_no_wait</code> or <code>post_message</code> instead now.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#pain-points_1","title":"Pain points","text":"<p>On top of the issues of getting to know terminal-based-CSS that I mentioned earlier:</p> <ul> <li>Textual currently lacks any sort of selection list or radio-set widget.   This meant that I couldn't quite do the activity type picking how I would   have wanted. Of course I could have rolled my own widgets for this, but I   think I'd sooner wait until such things are in Textual   itself.</li> <li>Similar to that, I could have used some validating <code>Input</code> widgets. They   too are on the roadmap but I managed to cobble together fairly good   working versions for my purposes. In doing so though I did further   highlight that the reactive attribute   facility   needs a wee bit more attention as I ran into some   (already-known) bugs.   Thankfully in my case it was a very easy   workaround.</li> <li>Scrolling in general seems a wee bit off when it comes to widgets that are   more than one line tall. While there's nothing really obvious I can point   my finger at, I'm finding that scrolling containers sometimes get confused   about what should be in view. This becomes very obvious when forcing   things to scroll from code. I feel this deserves a dedicated test   application to explore this more.</li> </ul>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#conclusion","title":"Conclusion","text":"<p>The first week of \"dogfooding\" has been fun and I'm more convinced than ever that it's an excellent exercise for Textualize to engage in. I didn't quite manage my plan of \"one silly trivial prototype per day\", which means I've ended up with two (well technically one and a half I guess given that <code>gridinfo</code> already existed as a prototype) applications rather than four. I'm okay with that. I got a lot of utility out of this.</p> <p>Now to look at the list of ideas I have going and think about what I'll kick next week off with...</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/","title":"What I learned from my first non-trivial PR","text":"PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0 ligula.\u00a0Nullam\u00a0imperdiet\u00a0sem\u00a0tellus, sed\u00a0vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0\u2586\u2586consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0\u2586\u2586 Sed\u00a0lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 lacinia,\u00a0sapien\u00a0sapien\u00a0congue\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis <p>It's 8:59 am and, by my Portuguese standards, it is freezing cold outside: 5 or 6 degrees Celsius. It is my second day at Textualize and I just got into the office. I undress my many layers of clothing to protect me from the Scottish cold and I sit down in my improvised corner of the Textualize office. As I sit down, I turn myself in my chair to face my boss and colleagues to ask \u201cSo, what should I do today?\u201d. I was not expecting Will's answer, but the challenge excited me:</p> <p>\u201cI thought I'll just throw you in the deep end and have you write some code.\u201d</p> <p>What happened next was that I spent two days working on PR #1229 to add a new widget to the Textual code base. At the time of writing, the pull request has not been merged yet. Well, to be honest with you, it hasn't even been reviewed by anyone... But that won't stop me from blogging about some of the things I learned while creating this PR.</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#the-placeholder-widget","title":"The placeholder widget","text":"<p>This PR adds a widget called <code>Placeholder</code> to Textual. As per the documentation, this widget \u201cis meant to have no complex functionality. Use the placeholder widget when studying the layout of your app before having to develop your custom widgets.\u201d</p> <p>The point of the placeholder widget is that you can focus on building the layout of your app without having to have all of your (custom) widgets ready. The placeholder widget also displays a couple of useful pieces of information to help you work out the layout of your app, namely the ID of the widget itself (or a custom label, if you provide one) and the width and height of the widget.</p> <p>As an example of usage of the placeholder widget, you can refer to the screenshot at the top of this blog post, which I included below so you don't have to scroll up:</p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0 ligula.\u00a0Nullam\u00a0imperdiet\u00a0sem\u00a0tellus, sed\u00a0vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0\u2586\u2586consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0\u2586\u2586 Sed\u00a0lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 lacinia,\u00a0sapien\u00a0sapien\u00a0congue\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis <p>The top left and top right widgets have custom labels. Immediately under the top right placeholder, you can see some placeholders identified as <code>#p3</code>, <code>#p4</code>, and <code>#p5</code>. Those are the IDs of the respective placeholders. Then, rows 2 and 3 contain some placeholders that show their respective size and some placeholders that just contain some text.</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#bootstrapping-the-code-for-the-widget","title":"Bootstrapping the code for the widget","text":"<p>So, how does a code monkey start working on a non-trivial PR within 24 hours of joining a company? The answer is simple: just copy and paste code! But instead of copying and pasting from Stack Overflow, I decided to copy and paste from the internal code base.</p> <p>My task was to create a new widget, so I thought it would be a good idea to take a look at the implementation of other Textual widgets. For some reason I cannot seem to recall, I decided to take a look at the implementation of the button widget that you can find in _button.py. By looking at how the button widget is implemented, I could immediately learn a few useful things about what I needed to do and some other things about how Textual works.</p> <p>For example, a widget can have a class attribute called <code>DEFAULT_CSS</code> that specifies the default CSS for that widget. I learned this just from staring at the code for the button widget.</p> <p>Studying the code base will also reveal the standards that are in place. For example, I learned that for a widget with variants (like the button with its \u201csuccess\u201d and \u201cerror\u201d variants), the widget gets a CSS class with the name of the variant prefixed by a dash. You can learn this by looking at the method <code>Button.watch_variant</code>:</p> <pre><code>class Button(Static, can_focus=True):\n    # ...\n\n    def watch_variant(self, old_variant: str, variant: str):\n        self.remove_class(f\"-{old_variant}\")\n        self.add_class(f\"-{variant}\")\n</code></pre> <p>In short, looking at code and files that are related to the things you need to do is a great way to get information about things you didn't even know you needed.</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#handling-the-placeholder-variant","title":"Handling the placeholder variant","text":"<p>A button widget can have a different variant, which is mostly used by Textual to determine the CSS that should apply to the given button. For the placeholder widget, we want the variant to determine what information the placeholder shows. The original GitHub issue mentions 5 variants for the placeholder:</p> <ul> <li>a variant that just shows a label or the placeholder ID;</li> <li>a variant that shows the size and location of the placeholder;</li> <li>a variant that shows the state of the placeholder (does it have focus? is the mouse over it?);</li> <li>a variant that shows the CSS that is applied to the placeholder itself; and</li> <li>a variant that shows some text inside the placeholder.</li> </ul> <p>The variant can be assigned when the placeholder is first instantiated, for example, <code>Placeholder(\"css\")</code> would create a placeholder that shows its own CSS. However, we also want to have an <code>on_click</code> handler that cycles through all the possible variants. I was getting ready to reinvent the wheel when I remembered that the standard module <code>itertools</code> has a lovely tool that does exactly what I needed! Thus, all I needed to do was create a new <code>cycle</code> through the variants each time a placeholder is created and then grab the next variant whenever the placeholder is clicked:</p> <pre><code>class Placeholder(Static):\n    def __init__(\n        self,\n        variant: PlaceholderVariant = \"default\",\n        *,\n        label: str | None = None,\n        name: str | None = None,\n        id: str | None = None,\n        classes: str | None = None,\n    ) -&gt; None:\n        # ...\n\n        self.variant = self.validate_variant(variant)\n        # Set a cycle through the variants with the correct starting point.\n        self._variants_cycle = cycle(_VALID_PLACEHOLDER_VARIANTS_ORDERED)\n        while next(self._variants_cycle) != self.variant:\n            pass\n\n    def on_click(self) -&gt; None:\n        \"\"\"Click handler to cycle through the placeholder variants.\"\"\"\n        self.cycle_variant()\n\n    def cycle_variant(self) -&gt; None:\n        \"\"\"Get the next variant in the cycle.\"\"\"\n        self.variant = next(self._variants_cycle)\n</code></pre> <p>I am just happy that I had the insight to add this little <code>while</code> loop when a placeholder is instantiated:</p> <pre><code>from itertools import cycle\n# ...\nclass Placeholder(Static):\n    # ...\n    def __init__(...):\n        # ...\n        self._variants_cycle = cycle(_VALID_PLACEHOLDER_VARIANTS_ORDERED)\n        while next(self._variants_cycle) != self.variant:\n            pass\n</code></pre> <p>Can you see what would be wrong if this loop wasn't there?</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#updating-the-render-of-the-placeholder-on-variant-change","title":"Updating the render of the placeholder on variant change","text":"<p>If the variant of the placeholder is supposed to determine what information the placeholder shows, then that information must be updated every time the variant of the placeholder changes. Thankfully, Textual has reactive attributes and watcher methods, so all I needed to do was... Defer the problem to another method:</p> <pre><code>class Placeholder(Static):\n    # ...\n    variant = reactive(\"default\")\n    # ...\n    def watch_variant(\n        self, old_variant: PlaceholderVariant, variant: PlaceholderVariant\n    ) -&gt; None:\n        self.validate_variant(variant)\n        self.remove_class(f\"-{old_variant}\")\n        self.add_class(f\"-{variant}\")\n        self.call_variant_update()  # &lt;-- let this method do the heavy lifting!\n</code></pre> <p>Doing this properly required some thinking. Not that the current proposed solution is the best possible, but I did think of worse alternatives while I was thinking how to tackle this. I wasn't entirely sure how I would manage the variant-dependant rendering because I am not a fan of huge conditional statements that look like switch statements:</p> <pre><code>if variant == \"default\":\n    # render the default placeholder\nelif variant == \"size\":\n    # render the placeholder with its size\nelif variant == \"state\":\n    # render the state of the placeholder\nelif variant == \"css\":\n    # render the placeholder with its CSS rules\nelif variant == \"text\":\n    # render the placeholder with some text inside\n</code></pre> <p>However, I am a fan of using the built-in <code>getattr</code> and I thought of creating a rendering method for each different variant. Then, all I needed to do was make sure the variant is part of the name of the method so that I can programmatically determine the name of the method that I need to call. This means that the method <code>Placeholder.call_variant_update</code> is just this:</p> <pre><code>class Placeholder(Static):\n    # ...\n    def call_variant_update(self) -&gt; None:\n        \"\"\"Calls the appropriate method to update the render of the placeholder.\"\"\"\n        update_variant_method = getattr(self, f\"_update_{self.variant}_variant\")\n        update_variant_method()\n</code></pre> <p>If <code>self.variant</code> is, say, <code>\"size\"</code>, then <code>update_variant_method</code> refers to <code>_update_size_variant</code>:</p> <pre><code>class Placeholder(Static):\n    # ...\n    def _update_size_variant(self) -&gt; None:\n        \"\"\"Update the placeholder with the size of the placeholder.\"\"\"\n        width, height = self.size\n        self._placeholder_label.update(f\"[b]{width} x {height}[/b]\")\n</code></pre> <p>This variant <code>\"size\"</code> also interacts with resizing events, so we have to watch out for those:</p> <pre><code>class Placeholder(Static):\n    # ...\n    def on_resize(self, event: events.Resize) -&gt; None:\n        \"\"\"Update the placeholder \"size\" variant with the new placeholder size.\"\"\"\n        if self.variant == \"size\":\n            self._update_size_variant()\n</code></pre>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#deleting-code-is-a-hurtful-blessing","title":"Deleting code is a (hurtful) blessing","text":"<p>To conclude this blog post, let me muse about the fact that the original issue mentioned five placeholder variants and that my PR only includes two and a half.</p> <p>After careful consideration and after coming up with the <code>getattr</code> mechanism to update the display of the placeholder according to the active variant, I started showing the \u201cfinal\u201d product to Will and my other colleagues. Eventually, we ended up getting rid of the variant for CSS and the variant that shows the placeholder state. This means that I had to delete part of my code even before it saw the light of day.</p> <p>On the one hand, deleting those chunks of code made me a bit sad. After all, I had spent quite some time thinking about how to best implement that functionality! But then, it was time to write documentation and tests, and I verified that the best code is the code that you don't even write! The code you don't write is guaranteed to have zero bugs and it also does not need any documentation whatsoever!</p> <p>So, it was a shame that some lines of code I poured my heart and keyboard into did not get merged into the Textual code base. On the other hand, I am quite grateful that I won't have to fix the bugs that will certainly reveal themselves in a couple of weeks or months from now. Heck, the code hasn't been merged yet and just by writing this blog post I noticed a couple of tweaks that were missing!</p>"},{"location":"blog/2023/07/29/pull-requests-are-cake-or-puppies/","title":"Pull Requests are cake or puppies","text":"<p>Broadly speaking, there are two types of contributions you can make to an Open Source project.</p> <p>The first type is typically a bug fix, but could also be a documentation update, linting fix, or other change which doesn't impact core functionality. Such a contribution is like cake. It's a simple, delicious, gift to the project.</p> <p>The second type of contribution often comes in the form of a new feature. This contribution likely represents a greater investment of time and effort than a bug fix. It is still a gift to the project, but this contribution is not cake.</p> <p>A feature PR has far more in common with a puppy. The maintainer(s) may really like the feature but hesitate to merge all the same. They may even reject the contribution entirely. This is because a feature PR requires an ongoing burden to maintain. In the same way that a puppy needs food and walkies, a new feature will require updates and fixes long after the original contribution. Even if it is an amazing feature, the maintainer may not want to commit to that ongoing work.</p> <p></p> <p>The chances of a feature being merged can depend on the maturity of the project. At the beginning of a project, a maintainer may be delighted with a new feature contribution. After all, having others join you to build something is the joy of Open Source. And yet when a project gets more mature there may be a growing resistance to adding new features, and a greater risk that a feature PR is rejected or sits unappreciated in the PR queue.</p> <p>So how should a contributor avoid this? If there is any doubt, it's best to propose the feature to the maintainers before undertaking the work. In all likelihood they will be happy for your contribution, just be prepared for them to say \"thanks but no thanks\". Don't take it as a rejection of your gift: it's just that the maintainer can't commit to taking on a puppy.</p> <p>There are other ways to contribute code to a project that don't require the code to be merged in to the core. You could publish your change as a third party library. Take it from me: maintainers love it when their project spawns an ecosystem. You could also blog about how you solved your problem without an update to the core project. Having a resource that can be googled for, or a maintainer can direct people to, can be a huge help.</p> <p>What prompted me to think about this is that my two main projects, Rich and Textual, are at quite different stages in their lifetime. Rich is relatively mature, and I'm unlikely to accept a puppy. If you can achieve what you need without adding to the core library, I am probably going to decline a new feature. Textual is younger and still accepting puppies \u2014 in addition to stick insects, gerbils, capybaras and giraffes.</p> <p>Tip</p> <p>If you are maintainer, and you do have to close a feature PR, feel free to link to this post.</p> <p>Join us on the Discord Server if you want to discuss puppies and other creatures.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/","title":"Textual 0.11.0 adds a beautiful Markdown widget","text":"<p>We released Textual 0.10.0 25 days ago, which is a little longer than our usual release cycle. What have we been up to?</p> <p>The headline feature of this release is the enhanced Markdown support. Here's a screenshot of an example:</p> MarkdownApp \u258bHeader\u00a0level\u00a06\u00a0content. \u25bc\u00a0\u2160\u00a0Textual\u00a0Markdown\u00a0Browser\u00a0-\u00a0Demo\u258b \u251c\u2500\u2500\u00a0\u25bc\u00a0\u2161\u00a0Headers\u258b\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u25bc\u00a0\u2162\u00a0This\u00a0is\u00a0H3\u258b\u258e\u258b \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u25bc\u00a0\u2163\u00a0This\u00a0is\u00a0H4\u258b\u258eTypography\u258b \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u25bc\u00a0\u2164\u00a0This\u00a0is\u00a0H5\u258b\u258e\u258b \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u2165\u00a0This\u00a0is\u00a0H6\u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u251c\u2500\u2500\u00a0\u25bc\u00a0\u2161\u00a0Typography\u258bThe\u00a0usual\u00a0Markdown\u00a0typography\u00a0is\u00a0supported.\u00a0The\u00a0exact\u00a0output\u00a0depends\u00a0on\u00a0 \u2502\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0\u2162\u00a0Emphasis\u258byour\u00a0terminal,\u00a0although\u00a0most\u00a0are\u00a0fairly\u00a0consistent.\u2581\u2581 \u2502\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0\u2162\u00a0Strong\u258b \u2502\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0\u2162\u00a0Strikethrough\u258bEmphasis \u2502\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0\u2162\u00a0Inline\u00a0code\u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u251c\u2500\u2500\u00a0\u2161\u00a0Fences\u258bEmphasis\u00a0is\u00a0rendered\u00a0with\u00a0*asterisks*,\u00a0and\u00a0looks\u00a0like\u00a0this; \u251c\u2500\u2500\u00a0\u2161\u00a0Quote\u258b \u2514\u2500\u2500\u00a0\u2161\u00a0Tables\u258bStrong \u258b\u2594\u2594\u2594\u2594\u2594\u2594 \u258bUse\u00a0two\u00a0asterisks\u00a0to\u00a0indicate\u00a0strong\u00a0which\u00a0renders\u00a0in\u00a0bold,\u00a0e.g.\u00a0 \u258b**strong**\u00a0render\u00a0strong. \u258b \u258bStrikethrough \u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258bTwo\u00a0tildes\u00a0indicates\u00a0strikethrough,\u00a0e.g.\u00a0~~cross\u00a0out~~\u00a0render\u00a0cross\u00a0out. \u258b\u2582\u2582 \u258bInline\u00a0code \u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258bInline\u00a0code\u00a0is\u00a0indicated\u00a0by\u00a0backticks.\u00a0e.g.\u00a0import\u00a0this. \u258b \u258b\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258b\u258e\u258b \u258b\u258eFences\u258b \u258b\u258e\u258b \u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258bFenced\u00a0code\u00a0blocks\u00a0are\u00a0introduced\u00a0with\u00a0three\u00a0back-ticks\u00a0and\u00a0the\u00a0optional\u00a0 \u258bparser.\u00a0Here\u00a0we\u00a0are\u00a0rendering\u00a0the\u00a0code\u00a0in\u00a0a\u00a0sub-widget\u00a0with\u00a0syntax\u00a0 \u258bhighlighting\u00a0and\u00a0indent\u00a0guides. \u258b \u258bIn\u00a0the\u00a0future\u00a0I\u00a0think\u00a0we\u00a0could\u00a0add\u00a0controls\u00a0to\u00a0export\u00a0the\u00a0code,\u00a0copy\u00a0to\u00a0 \u258bthe\u00a0clipboard.\u00a0Heck,\u00a0even\u00a0run\u00a0it\u00a0and\u00a0show\u00a0the\u00a0output? \u258b \u258b \u258b@lru_cache(maxsize=1024) \u258bdefsplit(self,cut_x:int,cut_y:int)-&gt;tuple[Region,Region,Regi \u258b\u2502\u00a0\u00a0\u00a0\"\"\"Split\u00a0a\u00a0region\u00a0in\u00a0to\u00a04\u00a0from\u00a0given\u00a0x\u00a0and\u00a0y\u00a0offsets\u00a0(cuts). \u00a0T\u00a0\u00a0TOC\u00a0\u00a0B\u00a0\u00a0Back\u00a0\u00a0F\u00a0\u00a0Forward\u00a0 <p>Tip</p> <p>You can generate these SVG screenshots for your app with <code>textual run my_app.py --screenshot 5</code> which will export a screenshot after 5 seconds.</p> <p>There are actually 2 new widgets: Markdown for a simple Markdown document, and MarkdownViewer which adds browser-like navigation and a table of contents.</p> <p>Textual has had support for Markdown since day one by embedding a Rich Markdown object -- which still gives decent results! This new widget adds dynamic controls such as scrollable code fences and tables, in addition to working links.</p> <p>In future releases we plan on adding more Markdown extensions, and the ability to easily embed custom widgets within the document. I'm sure there are plenty of interesting applications that could be powered by dynamically generated Markdown documents.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#datatable-improvements","title":"DataTable improvements","text":"<p>There has been a lot of work on the DataTable API. We've added the ability to sort the data, which required that we introduce the concept of row and column keys. You can now reference rows / columns / cells by their coordinate or by row / column key.</p> <p>Additionally there are new update_cell and update_cell_at methods to update cells after the data has been populated. Future releases will have more methods to manipulate table data, which will make it a very general purpose (and powerful) widget.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#tree-control","title":"Tree control","text":"<p>The Tree widget has grown a few methods to programmatically expand, collapse and toggle tree nodes.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#breaking-changes","title":"Breaking changes","text":"<p>There are a few breaking changes in this release. These are mostly naming and import related, which should be easy to fix if you are affected. Here's a few notable examples:</p> <ul> <li><code>Checkbox</code> has been renamed to <code>Switch</code>. This is because we plan to introduce complimentary <code>Checkbox</code> and <code>RadioButton</code> widgets in a future release, but we loved the look of Switches too much to drop them.</li> <li>We've dropped the <code>emit</code> and <code>emit_no_wait</code> methods. These methods posted message to the parent widget, but we found that made it problematic to subclass widgets. In almost all situations you want to replace these with <code>self.post_message</code> (or <code>self.post_message_no_wait</code>).</li> </ul> <p>Be sure to check the CHANGELOG for the full details on potential breaking changes.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#join-us","title":"Join us!","text":"<p>We're having fun on our Discord server. Join us there to talk to Textualize developers and share ideas.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/","title":"Textual 0.12.0 adds syntactical sugar and batch updates","text":"<p>It's been just 9 days since the previous release, but we have a few interesting enhancements to the Textual API to talk about.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#better-compose","title":"Better compose","text":"<p>We've added a little syntactical sugar to Textual's <code>compose</code> methods, which aids both readability and editability (that might not be a word).</p> <p>First, let's look at the old way of building compose methods. This snippet is taken from the <code>textual colors</code> command.</p> <pre><code>for color_name in ColorSystem.COLOR_NAMES:\n\n    items: list[Widget] = [ColorLabel(f'\"{color_name}\"')]\n    for level in LEVELS:\n        color = f\"{color_name}-{level}\" if level else color_name\n        item = ColorItem(\n            ColorBar(f\"${color}\", classes=\"text label\"),\n            ColorBar(\"$text-muted\", classes=\"muted\"),\n            ColorBar(\"$text-disabled\", classes=\"disabled\"),\n            classes=color,\n        )\n        items.append(item)\n\n    yield ColorGroup(*items, id=f\"group-{color_name}\")\n</code></pre> <p>This code composes the following color swatches:</p> ColorsApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 primary \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b\u2581\u2581 secondary\u258e\"primary\"\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b background\u258e$primary-darken-3$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b primary-background\u258e$primary-darken-2$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b secondary-background\u258e$primary-darken-1$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b surface\u258e$primary$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b panel\u258e$primary-lighten-1$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b boost\u258e$primary-lighten-2$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b warning\u258e$primary-lighten-3$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b error\u258e\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 success \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b accent\u258e\"secondary\"\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u258e\u258b \u00a0D\u00a0\u00a0Toggle\u00a0dark\u00a0mode\u00a0 <p>Tip</p> <p>You can see this by running <code>textual colors</code> from the command line.</p> <p>The old way was not all that bad, but it did make it hard to see the structure of your app at-a-glance, and editing compose methods always felt a little laborious.</p> <p>Here's the new syntax, which uses context managers to add children to containers:</p> <pre><code>for color_name in ColorSystem.COLOR_NAMES:\n    with ColorGroup(id=f\"group-{color_name}\"):\n        yield Label(f'\"{color_name}\"')\n        for level in LEVELS:\n            color = f\"{color_name}-{level}\" if level else color_name\n            with ColorItem(classes=color):\n                yield ColorBar(f\"${color}\", classes=\"text label\")\n                yield ColorBar(\"$text-muted\", classes=\"muted\")\n                yield ColorBar(\"$text-disabled\", classes=\"disabled\")\n</code></pre> <p>The context manager approach generally results in fewer lines of code, and presents attributes on the same line as containers themselves. Additionally, adding widgets to a container can be as simple is indenting them.</p> <p>You can still construct widgets and containers with positional arguments, but this new syntax is preferred. It's not documented yet, but you can start using it now. We will be updating our examples in the next few weeks.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#batch-updates","title":"Batch updates","text":"<p>Textual is smart about performing updates to the screen. When you make a change that might repaint the screen, those changes don't happen immediately. Textual makes a note of them, and repaints the screen a short time later (around a 1/60th of a second). Multiple updates are combined so that Textual does less work overall, and there is none of the flicker you might get with multiple repaints.</p> <p>Although this works very well, it is possible to introduce a little flicker if you make changes across multiple widgets. And especially if you add or remove many widgets at once. To combat this we have added a batch_update context manager which tells Textual to disable screen updates until the end of the with block.</p> <p>The new Markdown widget uses this context manager when it updates its content. Here's the code:</p> <pre><code>with self.app.batch_update():\n    await self.query(\"MarkdownBlock\").remove()\n    await self.mount_all(output)\n</code></pre> <p>Without the batch update there are a few frames where the old markdown blocks are removed and the new blocks are added (which would be perceived as a brief flicker). With the update, the update appears instant.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#disabled-widgets","title":"Disabled widgets","text":"<p>A few widgets (such as Button) had a <code>disabled</code> attribute which would fade the widget a little and make it unselectable. We've extended this to all widgets. Although it is particularly applicable to input controls, anything may be disabled. Disabling a container makes its children disabled, so you could use this for disabling a form, for example.</p> <p>Tip</p> <p>Disabled widgets may be styled with the <code>:disabled</code> CSS pseudo-selector.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#preventing-messages","title":"Preventing messages","text":"<p>Also in this release is another context manager, which will disable specified Message types. This doesn't come up as a requirement very often, but it can be very useful when it does. This one is documented, see Preventing events for details.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#full-changelog","title":"Full changelog","text":"<p>As always see the release page for additional changes and bug fixes.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#join-us","title":"Join us!","text":"<p>We're having fun on our Discord server. Join us there to talk to Textualize developers and share ideas.</p>"},{"location":"blog/2023/03/09/textual-0140-shakes-up-posting-messages/","title":"Textual 0.14.0 shakes up posting messages","text":"<p>Textual version 0.14.0 has landed just a week after 0.13.0.</p> <p>Note</p> <p>We like fast releases for Textual. Fast releases means quicker feedback, which means better code.</p> <p>What's new?</p> <p>We did a little shake-up of posting messages which will simplify building widgets. But this does mean a few breaking changes.</p> <p>There are two methods in Textual to post messages: <code>post_message</code> and <code>post_message_no_wait</code>. The former was asynchronous (you needed to <code>await</code> it), and the latter was a regular method call. These two methods have been replaced with a single <code>post_message</code> method.</p> <p>To upgrade your project to Textual 0.14.0, you will need to do the following:</p> <ul> <li>Remove <code>await</code> keywords from any calls to <code>post_message</code>.</li> <li>Replace any calls to <code>post_message_no_wait</code> with <code>post_message</code>.</li> </ul> <p>Additionally, we've simplified constructing messages classes. Previously all messages required a <code>sender</code> argument, which had to be manually set. This was a clear violation of our \"no boilerplate\" policy, and has been dropped. There is still a <code>sender</code> property on messages / events, but it is set automatically.</p> <p>So prior to 0.14.0 you might have posted messages like the following:</p> <pre><code>await self.post_message(self.Changed(self, item=self.item))\n</code></pre> <p>You can now replace it with this simpler function call:</p> <pre><code>self.post_message(self.Change(item=self.item))\n</code></pre> <p>This also means that you will need to drop the sender from any custom messages you have created.</p> <p>If this was code pre-0.14.0:</p> <pre><code>class MyWidget(Widget):\n\n    class Changed(Message):\n        \"\"\"My widget change event.\"\"\"\n        def __init__(self, sender:MessageTarget, item_index:int) -&gt; None:\n            self.item_index = item_index\n            super().__init__(sender)\n</code></pre> <p>You would need to make the following change (dropping <code>sender</code>).</p> <pre><code>class MyWidget(Widget):\n\n    class Changed(Message):\n        \"\"\"My widget change event.\"\"\"\n        def __init__(self, item_index:int) -&gt; None:\n            self.item_index = item_index\n            super().__init__()\n</code></pre> <p>If you have any problems upgrading, join our Discord server, we would be happy to help.</p> <p>See the release notes for the full details on this update.</p>"},{"location":"blog/2023/03/13/textual-0150-adds-a-tabs-widget/","title":"Textual 0.15.0 adds a tabs widget","text":"<p>We've just pushed Textual 0.15.0, only 4 days after the previous version. That's a little faster than our typical release cadence of 1 to 2 weeks.</p> <p>What's new in this release?</p> <p>The highlight of this release is a new Tabs widget to display tabs which can be navigated much like tabs in a browser. Here's a screenshot:</p> TabsApp Paul\u00a0AtreidiesDuke\u00a0Leto\u00a0AtreidesLady\u00a0JessicaGurney\u00a0Halleck \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aLady\u00a0Jessica\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0A\u00a0\u00a0Add\u00a0tab\u00a0\u00a0R\u00a0\u00a0Remove\u00a0active\u00a0tab\u00a0\u00a0C\u00a0\u00a0Clear\u00a0tabs\u00a0 <p>In a future release, this will be combined with the ContentSwitcher widget to create a traditional tabbed dialog. Although Tabs is still useful as a standalone widgets.</p> <p>Tip</p> <p>I like to tweet progress with widgets on Twitter. See the #textualtabs hashtag which documents progress on this widget.</p> <p>Also in this release is a new LoadingIndicator widget to display a simple animation while waiting for data. Here's a screenshot:</p> LoadingApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf <p>As always, see the release notes for the full details on this update.</p> <p>If you want to talk about these widgets, or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/","title":"Textual 0.16.0 adds TabbedContent and border titles","text":"<p>Textual 0.16.0 lands 9 days after the previous release. We have some new features to show you.</p> <p>There are two highlights in this release. In no particular order, the first is TabbedContent which uses a row of tabs to navigate content. You will have likely encountered this UI in the desktop and web. I think in Windows they are known as \"Tabbed Dialogs\".</p> <p>This widget combines existing Tabs and ContentSwitcher widgets and adds an expressive interface for composing. Here's a trivial example to use content tabs to navigate a set of three markdown documents:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent(\"Leto\", \"Jessica\", \"Paul\"):\n        yield Markdown(LETO)\n        yield Markdown(JESSICA)\n        yield Markdown(PAUL)\n</code></pre> <p>Here's an example of the UI you can create with this widget (note the nesting)!</p> <p> TabbedApp LetoJessicaPaul \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. PaulAlia \u2501\u2578\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 First\u00a0child\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0l\u00a0Leto\u00a0\u00a0j\u00a0Jessica\u00a0\u00a0p\u00a0Paul\u00a0\u258f^p\u00a0palette </p>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/#border-titles","title":"Border titles","text":"<p>The second highlight is a frequently requested feature (FRF?). Widgets now have the two new string properties, <code>border_title</code> and <code>border_subtitle</code>, which will be displayed within the widget's border.</p> <p>You can set the alignment of these titles via <code>border-title-align</code> and <code>border-subtitle-align</code>. Titles may contain Console Markup, so you can add additional color and style to the labels.</p> <p>Here's an example of a widget with a title:</p> BorderApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 ascii \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 none \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550double\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 hidden\u2551\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551I\u00a0must\u00a0not\u00a0fear.\u2551 blank\u2551Fear\u00a0is\u00a0the\u00a0mind-killer.\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2551 round\u2551I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551path.\u2551 solid\u2586\u2586\u2551Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551remain.\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551\u2551 double\u2551\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 dashed \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 heavy \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 <p>BTW the above is a command you can run to see the various border styles you can apply to widgets.</p> <pre><code>textual borders\n</code></pre>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/#container-changes","title":"Container changes","text":"<p>Breaking change</p> <p>If you have an app that uses any container classes, you should read this section.</p> <p>We've made a change to containers in this release. Previously all containers had auto scrollbars, which means that any container would scroll if its children didn't fit. With nested layouts, it could be tricky to understand exactly which containers were scrolling. In 0.16.0 we split containers in to scrolling and non-scrolling versions. So <code>Horizontal</code> will now not scroll by default, but <code>HorizontalScroll</code> will have automatic scrollbars.</p>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/#what-else","title":"What else?","text":"<p>As always, see the release notes for the full details on this update.</p> <p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/","title":"Textual 0.17.0 adds translucent screens and Option List","text":"<p>This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).</p> <p>What's new in this release?</p> <p>There are two new notable features I want to cover. The first is a compositor effect.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#translucent-screens","title":"Translucent screens","text":"<p>Textual has a concept of \"screens\" which you can think of as independent UI modes, each with their own user interface and logic. The App class keeps a stack of these screens so you can switch to a new screen and later return to the previous screen.</p> <p>Screens</p> <p>See the guide to learn more about the screens API.</p> <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1cXOtT20hcdTAwMTL/nr+C4r7sVcWz0z3vrbq6XHUwMDAyXHUwMDEyXHUwMDEyQnhsyObB3VZK2MLW4ddaMsZs5X+/XHUwMDFlhSDJQorBxnHiXHUwMDBmXHUwMDE4a+RRa+bX3b9+yH8/2djYTKbDcPO3jc3wqlx1MDAxOXSj1iiYbD71xy/DUVx1MDAxY1xy+jSE6ed4MFx1MDAxZTXTMztJMox/+/XXXjC6XGKTYTdohuwyisdBN07GrWjAmoPer1FcdTAwMTL24n/7v4dBL/zXcNBrJSOWXaRcdTAwMTG2omQw+nKtsFx1MDAxYvbCflx1MDAxMtPs/6HPXHUwMDFiXHUwMDFif6d/c9K1oqA36LfS09OBnHhazFx1MDAxZT1cdTAwMWP0U1FBXHUwMDBiLZW28vaEKH5GXHUwMDE3S8JcdTAwMTaNnpPAYTbiXHUwMDBmbcrRNNFcdTAwMDae897Fx119cmhcdTAwMGZOxyfZVc+jbvckmXZTmeJcdTAwMDHdSjZcdTAwMTYno8FF+D5qJVx1MDAxZH/pmeNV31x1MDAxYVxyxu1OP4zjwndcdTAwMDbDoFx1MDAxOSVTOqb47cGg306nyI5cXNGnXHUwMDA2cs6M0Vx1MDAxNqTiXHUwMDEy6G7V7fiXXHRcdTAwMDQz1lx1MDAxOFx1MDAwNUJcdTAwMWEhXHUwMDA1qFx1MDAxOcl2XHUwMDA2XdpcdTAwMDeS7Fx1MDAxZjx9ZbKdXHUwMDA1zYs2XHTYb2XngFxugrPz7JzJzf1Kp5i0Uphs+k5cdTAwMTi1O4nfIauZNcBdfjRcdTAwMGXTTXCgpJNaZlvkrzjca6Vg+HN2XHUwMDE1O8FoeLNam7H/kJPWXHUwMDBi+nxcdTAwMTZJeTTl9lm8grPdXHUwMDEwYKe1v/3X85NcdTAwMDP5+2CrfztXXHUwMDAxesFoNJhs3o58vvkvXHUwMDEzbTxsXHUwMDA1X1x1MDAxMFx1MDAwNVpLa43TXHUwMDEyTVx1MDAwNspu1L+gwf64282OXHKaXHUwMDE3XHUwMDE5XGLTo5+f3lx1MDAxYvp0mSroo+OO0KD03NBcdTAwMGbHU3ux39vnfHz+ctLeiyb6hfue0Fx1MDAwN/5N7IPTTFx1MDAxOSNRc1x1MDAwZVx1MDAwMoyyXHUwMDA17EuBXGalQYKeddo4vlx1MDAxOPbPgzPO1Vx1MDAxMrGPQipwlq9cdTAwMTb7vd45n2zx5NlhNFxmwz9eXHUwMDFlbb86iJeEfVx1MDAwYlxccG6Whf0kvEruXHUwMDAyvkVdXHUwMDA1fFx1MDAxMNZx5NLh3Mh/d941l1fDy5fT3taHwfjj8PiF2F1v5CMqprRBXHUwMDA0dEZ6XHUwMDBiWlx1MDAwML7lwMhcdTAwMDRJclxi1iHkrMBDcG+c4udYxj1wW1x1MDAwNryBWZhrgdL7pp/IxDtcdTAwMGJK2PvAPEPToJ+cRNepjbaFo7tBL+pOXHUwMDBikEjxT1x1MDAwMp40R2HY34D/9n/pRK1W2P9nfsfikK7vJ9TFb251o7bXls1ueF5UoyRcIlx1MDAxZXY7nFxmcmvcJElcdTAwMDKabrTXmr2jwShqR/2g+7Zaqlpt/rLMd6gzUVx1MDAxM5w9nNNnIHojxPz6XFy/8/fQZ5zF5uPps3HMSFx1MDAwMGm4pXdbVGfjJFx1MDAwM81cdTAwMWRcdTAwMWGU6EjjXHUwMDFmRZ1cdTAwMWQyrogwS2MsR9TuXHUwMDBl5XZMIzk6KVFcdTAwMDHXOlx1MDAwM/BXlyaFv4VcdTAwMDeoeipkjao/ijLGSTBKtqN+K+q3aTCzXCJfQ5K9OVx1MDAxY0Sqvs2xl5IzhVxcS8FpI5UgL1x1MDAwNLmT2sHQLyFcdTAwMDMgTqLJZKNVTtibXHUwMDEzPt9cblx1MDAxNfZb31x1MDAxNqk+UMmJ1OBcZml5nPV7pjhqilx1MDAxM0pCSaZcdTAwMDVIXHUwMDA3nITiTlmnSlJ1gzjZXHUwMDE59HpRQmt/PIj6yexcdTAwMWGni7nldbxcdTAwMTNcdTAwMDYl40F3lVx1MDAxZps1XHUwMDA2Qz9j0aZn/21k2pJ+uP3/z6d3nt2ohHI6WkJxNt+T/PtcdTAwMDNcdTAwMTi5sJWGXGYtqVx1MDAwNlx1MDAxMZdM8b/JyM9G2NpcdTAwMGKuw/1nW1x1MDAwN89f9LWNIVhvXlwinGOOTFx1MDAxNVxiNN5y68xcdTAwMTJ8XHRGLeNcdTAwMDLAOeK+ZCaEmJHsIcGo1suj5ESVkKJcYs5cdTAwMWaBrNRYMECFuIqIkYLtSkeLZLhcdTAwMDVwNb+jPdzpXHUwMDFjXGZfXHUwMDFjvdtcdTAwMWRcdTAwMWNfj9xhcjQ+XHUwMDFmivVcdTAwMDao5IJcdJ9cdFGWdFWqYrJEXG7NuOPGXHUwMDEyQqVcdTAwMDZcXFxmnsuOXHUwMDE3SVx1MDAxZaE4mTS7fHDWMenXZ8rufYyvOsPx+MNWdPomuVx1MDAxOMllXHUwMDA1jIQ3yHG7x4O+XHUwMDE1qlxu+k6AUkS65jfN76eHb9o9t3+0r/76NH32abtzKI+WivxWXHUwMDEwd8IlQ98xolx1MDAxZYJcdTAwMTONXHUwMDA0YpGuXHUwMDAwfaGQXHUwMDExKZFcdTAwMDY5cDBcXC9GMi02XHUwMDFkhGqZ6CdcdTAwMTNpSTS+4nSJXHLDl+PX19fds1P96VxcJJGYnvL50P+0bt5Y7U+v4+3jyejgdO/Vofj0x9SeLWHe8+H7ydvG5Ni+v+7Fp1x1MDAxN83wI3ZcdTAwMGaWMC9cdTAwMWab//VO3mLyprl9XHUwMDE1NT/uvlx1MDAxMc1oWfE0J+S5pTnAqrSRrktcdTAwMWKRWjiKvOzcNuAsnuKOONpcdTAwMDXV3u6Mmq33h+r6dL3DTGlcdTAwMWSzSkvNOZleNZMuXHUwMDA1QaNOcrKERJ3JXHUwMDE3zlxudj9cdTAwMTNA6npcdTAwMTbewc1ErqZxq/myrO9CWqIrhj+Ct6tBolx1MDAwMan1fZCYbXiW2Vx1MDAxMVx1MDAxNOWlgYfnwDZcdTAwMTdJXHUwMDE38jzZVb7meYLhkFxyXHUwMDA3w09xmln55e4sj9CF7z12lqckU63qVeZ4dHVkROxXXHUwMDEz71Zyft2rN57L0L1H8L8gmERUXHUwMDE0ZiOZOzFTq7CGIVx1MDAxN9pcYqPJXHUwMDE3w2Ip2yrd40RvXHUwMDAxkVgwXHUwMDAx06E1QpZ1XHUwMDExuPGCmpRvXHUwMDAyXHUwMDE5XHUwMDA0V9ZNQjUpTC7JvopEXHUwMDBmcFqcx0z01NO6jUJWxVEsXHUwMDBmjmyoRE2rmUsx3CRVXHUwMDE0U1x1MDAxNFx1MDAwMyuOdFx1MDAwMtpvZnqKt/EjZVtqQJWOl/GUTfkk/35vo2JyRYVZo0JwXHUwMDAx8iD3yFx1MDAxYtczp/U0Ko5LZi1ZXGZDsaySZtaoXGJmXHUwMDA0V4pWnlxmXHUwMDBizEZcdTAwMWLLMipoOWghfSmfLpIrRuVsimWSglx1MDAwZetcdTAwMWNcdTAwMTiCXG6WykSgjZXOc5PV2lx1MDAxNKCYXCJbte9oU4DRXHUwMDBl0PIopykqJlx1MDAxZVJOXHUwMDFlXHUwMDAzZ8QmrNTkQoThXFyan9SmVEPKv1x1MDAxYWU0LcuiXHUwMDE08l+zXHUwMDE5XFyurZS+nDm3SalPnaynSdHKMCO55lx1MDAxMiVIk+tk8d/XXHUwMDAyXHUwMDE4+X3iMd6x4YItXHUwMDE1VSaFdMFcdTAwMTkjyWhJWnXSiez+b02KU1xmpXbKcsFccqrcrtxYXHUwMDE0dPRdhfpcdTAwMDFcdTAwMDHEQiSFK5fJ8nCDMqt8P4FaN6r3NVx1MDAxZC5t6T3Vuq5XSldTXHUwMDA1Tv5cdTAwMTM06vmpgn6m8FX0cnLZfvfhQrevT49+j79rn+C31ZrIMzBcbj6QTCatr5lpXHUwMDE5UUAkTSluXHUwMDFkUSaXL8ivR2VGeTOvVptcZlhdJ59cdTAwMTbVXlx1MDAwN4Rwvk1s/ui4cbU/tn+1wsvOycdLXHUwMDExTl87PNhZe3Rq5uNcdTAwMDdB2DMobLFwSG6XkS9cIuRcbq2EQbdcdTAwMTA6l16YcUIgUTfzgHB4kdR0I57s7CB2I9lcdTAwMTZcdTAwMWZa4z+O48nFslKyVlpuga9cdTAwMDD7NuegS1xy3IAkjJyfcMX93dFe7+L5azHF8L1otTvDg9Z6Q79cdTAwMDHWMrCKmKXTzmlcdTAwMGVcdTAwMDXoXHUwMDBiKYlcZiuL3KLv6l1cYvlfyjLLLElcdTAwMTJHXHUwMDA0XHUwMDEy7CcpypxtPT9/XHUwMDFmbPHD9rv9t1x1MDAwN83rQZDE46X1xqK0uDSNqlxmYWpcbp2gfHVbajN/W3h92Wd9I1x1MDAxOFxupYVcdTAwMDRSXHUwMDFiXHUwMDAxekafiOiQWfHxi6b9WKzOWVx1MDAxZMBcdTAwMThFXHUwMDExlKPolYiLJZ9VVizincxnZZRcIq/mfLmjpF5cdTAwMTTqy2Jss5pcdTAwMTCG1P1BNZBl50Q448AlxXBKXHUwMDE5jeA4N3d2r/neNk3RKsWlZJBuTvjZklwijWpQfVx1MDAxOS7hKZvxSf79vnVTqWD26C071cjR3ec5k6vXoVx1MDAxY530XHUwMDFiz/u6od1+6/CV6thcboPSXHSanfEoXFxcdTAwMDNcdTAwMWZN+GJcdTAwMDZ89yTB0T/jUEy0XHUwMDFhJ1x1MDAxOHF0X1x1MDAwZVx1MDAxMMpavlD1Jlx1MDAxOVx1MDAwNf14XHUwMDE4jEhd7jAsucxpTdO9XHUwMDE0qJw1YsWM9DGfLfHZXHUwMDAy41bedI9r2XSPizfdc1fdXHJBtsOSf7zHk5P1O38vtV5dP0SDXHUwMDAySlx1MDAwNspYIynYXHUwMDE3zuqZxnuLjLyhptPQmVxccWXpWlxyilx0XHUwMDAwKYiekW1x7q5cdTAwMTJcblx1MDAwMpM+XHLCLYVMoPJcdTAwMWRaN3TBu1x1MDAwN4fwkCzJXCJ0gTyzclx1MDAwZtHLOelCvcvYKDa7k+8z5CONTOvo5bIscEaLJITl3JdR9Ndi5D1cdTAwMWLw61x1MDAxZpcsUFx1MDAxOFx1MDAxMCCNpZ3zXHUwMDE5XHUwMDAyJY0uyWRcdTAwMTjSgCR648jGXHUwMDE5xJJMP1x1MDAxMk+pXHUwMDA2s381yjheXHUwMDE2TVx1MDAxMZWJXHUwMDA0XHUwMDA0n2+mUHV+nlwiPlxcyNa1fHn54tnhm9Z04sK+qirdrFx1MDAwZk9cdTAwMDHBmSFoI7FD32ePRYOGqH1cdTAwMDXRKCAuY6VSXHUwMDBipVx1MDAxM75BVO5o8ypcdTAwMTNcdTAwMTWyXHUwMDFjUlx0IdWPw1Se1s37mFx1MDAxOVx1MDAwNLK0Wq+eXHUwMDAxXHTiXHUwMDFhl1FcdTAwMWOddcN1okBcdTAwMDWxXHUwMDFlxoFcdTAwMTRWXHUwMDA2NuAsoZK4/vxN4fVbv65cdTAwMTTIP/IglFTeLKBRYqYtXHUwMDFjkFx0Ylx1MDAxNVx1MDAxNoUherTYXHUwMDAzO7X2XHUwMDAyXHUwMDFkOUokj01Ow3IpsyvdWlx1MDAwZu3du/TJXHUwMDAwXHS0MVjOl/jSXHUwMDAxRaSr7iF5sFrOSYDqfVGRXHUwMDAwgdCeXHUwMDA3Ulx1MDAxNFxuXHUwMDE2yeHlclx1MDAwNF9cdTAwMTmQZNJvJaBcdTAwMTJcdTAwMWOMeegziPW59qJUXFxcbmPJISljtNEu94NcdTAwMWa3YllmNHFcdTAwMDPaWue4MkKWpPqRSFAlnP2rXHUwMDA05CUxIFGdqCFhUEtcdTAwMGbXue3ZyfXlKzWNj6ZHL+LB5OPWZft479O6MyCK1ohcdTAwMDGh4MSCjK9ZXHUwMDE0XHUwMDEzNUJcdTAwMThGXHUwMDExgnRElFxibvlfUPlOmVx1MDAxYSBcdTAwMWHmIFx1MDAxN1x1MDAxNfzotUPHXHUwMDA1t8LlbmiFmZo15Cm4OE8xrlqvwVx1MDAxN1xyrTXzN6/Ub/2a8lx1MDAxNFxuKsH/mFx1MDAwZjk3w41cdTAwMTC5eCFtXHUwMDEwXHUwMDAwzdAnckxcdTAwMWHai8VcdTAwMWXdrNVr7dtotPDP9/tcdTAwMDdcdTAwMDfhXHUwMDBlLdeGOeu7XHUwMDE2NddWlVx1MDAxYdP8U2zKoV3l7yQspJVz0pR6h7FRKOs4RS9OXHUwMDFiXHUwMDA1WphcXGfyRpZcdTAwMTORXGLCao1cdTAwMWH8XHUwMDEzYuWfJJiLpNT3wszIRFxcSCvyyEJq8lx1MDAxZqIkXHUwMDEzkmfx7Wv+4XY0d7X0/0hcdTAwMTSlXHUwMDEyyOlgXHUwMDExwlVcdTAwMDTlyc3s/jGhk4TwdrtcdTAwMTVcdTAwMDTpqHVjyrNb3LyMwsn2XT056cvbx3QxvVx1MDAxNVxu/Y3+/fnJ5/9cdTAwMDPV4pXXIn0= Screen 1(hidden)app.pop_screen()Screen 2(hidden)Screen 3(visible)Screen 2(visible) </p> <p>Screens can be used to build modal dialogs by pushing a screen with controls / buttons, and popping the screen when the user has finished with it. The problem with this approach is that there was nothing to indicate to the user that the original screen was still there, and could be returned to.</p> <p>In this release we have added alpha support to the Screen's background color which allows the screen underneath to show through, typically blended with a little color. Applying this to a screen makes it clear than the user can return to the previous screen when they have finished interacting with the modal.</p> <p>Here's how you can enable this effect with CSS:</p> <pre><code>DialogScreen {\n    align: center middle;\n    background: $primary 30%;\n}\n</code></pre> <p>Setting the background to <code>$primary</code> will make the background blue (with the default theme). The addition of <code>30%</code> sets the alpha so that it will be blended with the background. Here's the kind of effect this creates:</p> DialogApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588Good\u00a0for\u00a0natural\u00a0breaks\u00a0in\u00a0the\u00a0content,\u00a0that\u00a0don't\u00a0require\u00a0another\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588header.\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u258e\u258b\u2588\u258b\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u258eLists\u258b\u2588\u258b\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588\u258e\u258b\u2582\u2582\u2588\u258b\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2582\u2582\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u00a01.\u00a0Lists\u00a0can\u00a0be\u00a0ordered\u2588down\u00a0widgets.\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u00a02.\u00a0Lists\u00a0can\u00a0be\u00a0unordered\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u25cf\u00a0I\u00a0must\u00a0not\u00a0fear.\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u25aa\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u2584\u2584\u2588\u258b\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588\u2023\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2588\u258b\u2588\u2580\u2580\u2580\u2580\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2022\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u258b\u2588\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u2b51\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u25aa\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0\u2588\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588see\u00a0its\u00a0path.\u2588\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u25cf\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u2588\u2588\u2582\u2582\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588remain.\u2588\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2588\u2588\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588Longer\u00a0list\u2588\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u00a0\u00a01.\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides,\u00a0head\u00a0of\u00a0House\u00a0Atreides\u2588\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588\u00a0headings.\u2588\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u2588\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0O\u2588This\u00a0is\u00a0H5\u2588\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer.\u2588\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0oblit\u2588Header\u00a0level\u00a05\u00a0content.\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2588This\u00a0is\u00a0H6\u2588\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u2588This\u00a0is\u00a0H4\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer.\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliterati\u2588Header\u00a0level\u00a04\u00a0content.\u00a0Drilling\u00a0down\u00a0in\u00a0to\u00a0finer\u00a0headings.\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2588This\u00a0is\u00a0H5\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u2588Header\u00a0level\u00a05\u00a0content.\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer.\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliterati\u2588This\u00a0is\u00a0H6\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. <p>There are 4 screens in the above screenshot, one for the base screen and one for each of the three dialogs. Note how each screen modifies the color of the screen below, but leaves everything visible.</p> <p>See the docs on screen opacity if you want to add this to your apps.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#option-list","title":"Option list","text":"<p>Textual has had a ListView widget for a while, which is an excellent way of navigating a list of items (actually other widgets). In this release we've added an OptionList which is similar in appearance, but uses the line api under the hood. The Line API makes it more efficient when you approach thousands of items.</p> <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aTauron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aVirgon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <p>The Options List accepts Rich renderable, which means that anything Rich can render may be displayed in a list. Here's an Option List of tables:</p> <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Demeter\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a01.2\u00a0Billion\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Gaoth\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2582\u2582\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Hermes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a075,000\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0None\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Canceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Hephaestus\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a06.7\u00a0Billion\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Hades\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Caprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <p>We plan to build on the <code>OptionList</code> widget to implement drop-downs, menus, check lists, etc. But it is still very useful as it is, and you can add it to apps now.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#what-else","title":"What else?","text":"<p>There are a number of fixes regarding refreshing in this release. If you had issues with parts of the screen not updating, the new version should resolve it.</p> <p>There's also a new logging handler, and a \"thick\" border type.</p> <p>See release notes for the full details.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#next-week","title":"Next week","text":"<p>Next week we plan to take a break from building Textual to building apps with Textual. We do this now and again to give us an opportunity to step back and understand things from the perspective of a developer using Textual. We will hopefully have something interesting to show from the exercise, and new Open Source apps to share.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/","title":"Textual 0.18.0 adds API for managing concurrent workers","text":"<p>Less than a week since the last release, and we have a new API to show you.</p> <p>This release adds a new Worker API designed to manage concurrency, both asyncio tasks and threads.</p> <p>An API to manage concurrency may seem like a strange addition to a library for building user interfaces, but on reflection it makes a lot of sense. People are building Textual apps to interface with REST APIs, websockets, and processes; and they are running into predictable issues. These aren't specifically Textual problems, but rather general problems related to async tasks and threads. It's not enough for us to point users at the asyncio docs, we needed a better answer.</p> <p>The new <code>run_worker</code> method provides an easy way of launching \"Workers\" (a wrapper over async tasks and threads) which also manages their lifetime.</p> <p>One of the challenges I've found with tasks and threads is ensuring that they are shut down in an orderly manner. Interestingly enough, Textual already implemented an orderly shutdown procedure to close the tasks that power widgets: children are shut down before parents, all the way up to the App (the root node). The new API piggybacks on to that existing mechanism to ensure that worker tasks are also shut down in the same order.</p> <p>Tip</p> <p>You won't need to worry about this gnarly issue with the new Worker API.</p> <p>I'm particularly pleased with the new <code>@work</code> decorator which can turn a coroutine OR a regular function into a Textual Worker object, by scheduling it as either an asyncio task or a thread. I suspect this will solve 90% of the concurrency issues we see with Textual apps.</p> <p>See the Worker API for the details.</p>"},{"location":"blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/","title":"Textual 0.23.0 improves message handling","text":"<p>It's been a busy couple of weeks at Textualize. We've been building apps with Textual, as part of our dog-fooding week. The first app, Frogmouth, was released at the weekend and already has 1K GitHub stars! Expect two more such apps this month.</p> Frogmouth /Users/willmcgugan/projects/textual/FAQ.md ContentsLocalBookmarksHistory\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u258e\u258a \u258eHow\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u258a \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e\u258a \u2503\u25bc\u00a0\u2160\u00a0Frequently\u00a0Asked\u00a0Questions\u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Does\u00a0Textual\u00a0support\u00a0images?\u2503When\u00a0creating\u00a0your\u00a0App\u00a0class,\u00a0override\u00a0__init__\u00a0as\u00a0you\u00a0would\u00a0wheninheriting\u00a0normally.\u00a0For\u00a0example: \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0fix\u00a0ImportError\u00a0cannot\u00a0i\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0select\u00a0and\u00a0copy\u00a0text\u00a0in\u00a0\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0set\u00a0a\u00a0translucent\u00a0app\u00a0ba\u2503fromtextual.appimportApp,ComposeResult \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0center\u00a0a\u00a0widget\u00a0in\u00a0a\u00a0scre\u2503fromtextual.widgetsimportStatic \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0do\u00a0some\u00a0key\u00a0combinations\u00a0never\u2503classGreetings(App[None]): \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0look\u00a0good\u00a0on\u00a0m\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2514\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0support\u00a0ANSI\u00a0t\u2503\u2502\u00a0\u00a0\u00a0def__init__(self,greeting:str=\"Hello\",to_greet:str=\"World\")-&gt;None: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.greeting=greeting \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.to_greet=to_greet \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0super().__init__() \u2503\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2503\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;ComposeResult: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yieldStatic(f\"{self.greeting},\u00a0{self.to_greet}\") \u2503\u2503 \u2503\u2503 \u2503\u2503Then\u00a0the\u00a0app\u00a0can\u00a0be\u00a0run,\u00a0passing\u00a0in\u00a0various\u00a0arguments;\u00a0for\u00a0example: \u2503\u2503\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0default\u00a0arguments. \u2503\u2503Greetings().run() \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0a\u00a0keyword\u00a0arguyment. \u2503\u2503Greetings(to_greet=\"davep\").run()\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0both\u00a0positional\u00a0arguments. \u2503\u2503Greetings(\"Well\u00a0hello\",\"there\").run() \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2503\u2589\u2503\u258e\u258a \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u00a0F1\u00a0\u00a0Help\u00a0\u00a0F2\u00a0\u00a0About\u00a0\u00a0CTRL+N\u00a0\u00a0Navigation\u00a0\u00a0CTRL+Q\u00a0\u00a0Quit\u00a0 <p>Tip</p> <p>Join our mailing list if you would like to be the first to hear about our apps.</p> <p>We haven't stopped developing Textual in that time. Today we released version 0.23.0 which has a really interesting API update I'd like to introduce.</p> <p>Textual widgets can send messages to each other. To respond to those messages, you implement a message handler with a naming convention. For instance, the Button widget sends a <code>Pressed</code> event. To handle that event, you implement a method called <code>on_button_pressed</code>.</p> <p>Simple enough, but handler methods are called to handle pressed events from all Buttons. To manage multiple buttons you typically had to write a large <code>if</code> statement to wire up each button to the code it should run. It didn't take many Buttons before the handler became hard to follow.</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/#on-decorator","title":"On decorator","text":"<p>Version 0.23.0 introduces the <code>@on</code> decorator which allows you to dispatch events based on the widget that initiated them.</p> <p>This is probably best explained in code. The following two listings respond to buttons being pressed. The first uses a single message handler, the second uses the decorator approach:</p> on_decorator01.pyon_decorator02.pyOutput on_decorator01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:  # (1)!\n        \"\"\"Handle all button pressed events.\"\"\"\n        if event.button.id == \"bell\":\n            self.bell()\n        elif event.button.has_class(\"toggle\", \"dark\"):\n            self.dark = not self.dark\n        elif event.button.id == \"quit\":\n            self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>The message handler is called when any button is pressed</li> </ol> on_decorator02.py<pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    @on(Button.Pressed, \"#bell\")  # (1)!\n    def play_bell(self):\n        \"\"\"Called when the bell button is pressed.\"\"\"\n        self.bell()\n\n    @on(Button.Pressed, \".toggle.dark\")  # (2)!\n    def toggle_dark(self):\n        \"\"\"Called when the 'toggle dark' button is pressed.\"\"\"\n        self.dark = not self.dark\n\n    @on(Button.Pressed, \"#quit\")  # (3)!\n    def quit(self):\n        \"\"\"Called when the quit button is pressed.\"\"\"\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>Matches the button with an id of \"bell\" (note the <code>#</code> to match the id)</li> <li>Matches the button with class names \"toggle\" and \"dark\"</li> <li>Matches the button with an id of \"quit\"</li> </ol> <p> OnDecoratorApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Bell\u00a0\u00a0Toggle\u00a0dark\u00a0\u00a0Quit\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>The decorator dispatches events based on a CSS selector. This means that you could have a handler per button, or a handler for buttons with a shared class, or parent.</p> <p>We think this is a very flexible mechanism that will help keep code readable and maintainable.</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/#why-didnt-we-do-this-earlier","title":"Why didn't we do this earlier?","text":"<p>It's a reasonable question to ask: why didn't we implement this in an earlier version? We were certainly aware there was a deficiency in the API.</p> <p>The truth is simply that we didn't have an elegant solution in mind until recently. The <code>@on</code> decorator is, I believe, an elegant and powerful mechanism for dispatching handlers. It might seem obvious in hindsight, but it took many iterations and brainstorming in the office to come up with it!</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/","title":"Textual 0.24.0 adds a Select control","text":"<p>Coming just 5 days after the last release, we have version 0.24.0 which we are crowning the King of Textual releases. At least until it is deposed by version 0.25.0.</p> <p>The highlight of this release is the new Select widget: a very familiar control from the web and desktop worlds. Here's a screenshot and code:</p> Output (expanded)select_widget.pyselect.css <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Header, Select\n\nLINES = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\"\"\".splitlines()\n\n\nclass SelectApp(App):\n    CSS_PATH = \"select.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Select((line, line) for line in LINES)\n\n    @on(Select.Changed)\n    def select_changed(self, event: Select.Changed) -&gt; None:\n        self.title = str(event.value)\n\n\nif __name__ == \"__main__\":\n    app = SelectApp()\n    app.run()\n</code></pre> <pre><code>\n</code></pre>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#new-styles","title":"New styles","text":"<p>This one required new functionality in Textual itself. The \"pull-down\" overlay with options presented a difficulty with the previous API. The overlay needed to appear over any content below it. This is possible (using layers), but there was no simple way of positioning it directly under the parent widget.</p> <p>We solved this with a new \"overlay\" concept, which can considered a special layer for user interactions like this Select, but also pop-up menus, tooltips, etc. Widgets styled to use the overlay appear in their natural place in the \"document\", but on top of everything else.</p> <p>A second problem we tackled was ensuring that an overlay widget was never clipped. This was also solved with a new rule called \"constrain\". Applying <code>constrain</code> to a widget will keep the widget within the bounds of the screen. In the case of <code>Select</code>, if you expand the options while at the bottom of the screen, then the overlay will be moved up so that you can see all the options.</p> <p>These new rules are currently undocumented as they are still subject to change, but you can see them in the Select source if you are interested.</p> <p>In a future release these will be finalized and you can confidently use them in your own projects.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#fixes-for-the-on-decorator","title":"Fixes for the @on decorator","text":"<p>The new <code>@on</code> decorator is proving popular. To recap, it is a more declarative and finely grained way of dispatching messages. Here's a snippet from the calculator example which uses <code>@on</code>:</p> <pre><code>    @on(Button.Pressed, \"#plus,#minus,#divide,#multiply\")\n    def pressed_op(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Pressed one of the arithmetic operations.\"\"\"\n        self.right = Decimal(self.value or \"0\")\n        self._do_math()\n        assert event.button.id is not None\n        self.operator = event.button.id\n</code></pre> <p>The decorator arranges for the method to be called when any of the four math operation buttons are pressed.</p> <p>In 0.24.0 we've fixed some missing attributes which prevented the decorator from working with some messages. We've also extended the decorator to use keywords arguments, so it will match attributes other than <code>control</code>.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#other-fixes","title":"Other fixes","text":"<p>There is a surprising number of fixes in this release for just 5 days. See CHANGELOG.md for details.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/","title":"Textual adds Sparklines, Selection list, Input validation, and tool tips","text":"<p>It's been 12 days since the last Textual release, which is longer than our usual release cycle of a week.</p> <p>We've been a little distracted with our \"dogfood\" projects: Frogmouth and Trogon. Both of which hit 1000 Github stars in 24 hours. We will be maintaining / updating those, but it is business as usual for this Textual release (and it's a big one). We have such sights to show you.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#sparkline-widget","title":"Sparkline widget","text":"<p>A Sparkline is essentially a mini-plot. Just detailed enough to keep an eye on time-series data.</p> SparklineColorsApp \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 <p>Colors are configurable, and all it takes is a call to <code>set_interval</code> to make it animate.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#selection-list","title":"Selection list","text":"<p>Next up is the SelectionList widget. Essentially a scrolling list of checkboxes. Lots of use cases for this one.</p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258cFalken's\u00a0Maze\u2502 \u2502\u2590X\u258cBlack\u00a0Jack\u2502 \u2502\u2590X\u258cGin\u00a0Rummy\u2502 \u2502\u2590X\u258cHearts\u2502 \u2502\u2590X\u258cBridge\u2502 \u2502\u2590X\u258cCheckers\u2502 \u2502\u2590X\u258cChess\u2502 \u2502\u2590X\u258cPoker\u2502 \u2502\u2590X\u258cFighter\u00a0Combat\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#tooltips","title":"Tooltips","text":"<p>We've added tooltips to Textual widgets.</p> <p>The API couldn't be simpler: simply assign a string to the <code>tooltip</code> property on any widget. This string will be displayed after 300ms when you hover over the widget.</p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 Click\u00a0me \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. <p>As always, you can configure how the tooltips will be displayed with CSS.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#input-updates","title":"Input updates","text":"<p>We have some quality of life improvements for the Input widget.</p> <p>You can now use a simple declarative API to validating input.</p> InputApp Enter\u00a0an\u00a0even\u00a0number\u00a0between\u00a01\u00a0and\u00a0100\u00a0that\u00a0is\u00a0also\u00a0a\u00a0palindrome. \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258afoo\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e ['Must\u00a0be\u00a0a\u00a0valid\u00a0number.',\u00a0'Value\u00a0is\u00a0not\u00a0even.',\u00a0\"That's\u00a0not\u00a0a\u00a0palindrome\u00a0:/\"] <p>Also in this release is a suggestion API, which will suggest auto completions as you type. Hit right to accept the suggestion.</p> <p>Here's a screenshot:</p> FruitsApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258astrawberry\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e <p>You could use this API to offer suggestions from a fixed list, or even pull the data from a network request.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#join-us","title":"Join us","text":"<p>Development on Textual is fast. We're very responsive to issues and feature requests.</p> <p>If you have any suggestions, jump on our Discord server and you may see your feature in the next release!</p>"},{"location":"blog/2023/07/03/textual-0290-refactors-dev-tools/","title":"Textual 0.29.0 refactors dev tools","text":"<p>It's been a slow week or two at Textualize, with Textual devs taking well-earned annual leave, but we still managed to get a new version out.</p> <p>Version 0.29.0 has shipped with a number of fixes (see the release notes for details), but I'd like to use this post to explain a change we made to how Textual developer tools are distributed.</p> <p>Previously if you installed <code>textual[dev]</code> you would get the Textual dev tools plus the library itself. If you were distributing Textual apps and didn't need the developer tools you could drop the <code>[dev]</code>.</p> <p>We did this because the less dependencies a package has, the fewer installation issues you can expect to get in the future. And Textual is surprisingly lean if you only need to run apps, and not build them.</p> <p>Alas, this wasn't quite as elegant solution as we hoped. The dependencies defined in extras wouldn't install commands, so <code>textual</code> was bundled with the core library. This meant that if you installed the Textual package without the <code>[dev]</code> you would still get the <code>textual</code> command on your path but it wouldn't run.</p> <p>We solved this by creating two packages: <code>textual</code> contains the core library (with minimal dependencies) and <code>textual-dev</code> contains the developer tools. If you are building Textual apps, you should install both as follows:</p> <pre><code>pip install textual textual-dev\n</code></pre> <p>That's the only difference. If you run in to any issues feel free to ask on the Discord server!</p>"},{"location":"blog/2023/07/17/textual-0300-adds-desktop-style-notifications/","title":"Textual 0.30.0 adds desktop-style notifications","text":"<p>We have a new release of Textual to talk about, but before that I'd like to cover a little Textual news.</p> <p>By sheer coincidence we reached 20,000 stars on GitHub today. Now stars don't mean all that much (at least until we can spend them on coffee), but its nice to know that twenty thousand developers thought Textual was interesting enough to hit the \u2605 button. Thank you!</p> <p>In other news: we moved office. We are now a stone's throw away from Edinburgh Castle. The office is around three times as big as the old place, which means we have room for wide standup desks and dual monitors. But more importantly we have room for new employees. Don't send your CVs just yet, but we hope to grow the team before the end of the year.</p> <p>Exciting times.</p>"},{"location":"blog/2023/07/17/textual-0300-adds-desktop-style-notifications/#new-release","title":"New Release","text":"<p>And now, for the main feature. Version 0.30 adds a new notification system. Similar to desktop notifications, it displays a small window with a title and message (called a toast) for a pre-defined number of seconds.</p> <p>Notifications are great for short timely messages to add supplementary information for the user. Here it is in action:</p> <p>The API is super simple. To display a notification, call <code>notify()</code> with a message and an optional title.</p> <pre><code>def on_mount(self) -&gt; None:\n    self.notify(\"Hello, from Textual!\", title=\"Welcome\")\n</code></pre>"},{"location":"blog/2023/07/17/textual-0300-adds-desktop-style-notifications/#textualize-video-channel","title":"Textualize Video Channel","text":"<p>In case you missed it; Textualize now has a YouTube channel. Our very own Rodrigo has recorded a video tutorial series on how to build Textual apps. Check it out!</p> <p>We will be adding more videos in the near future, covering anything from beginner to advanced topics.</p> <p>Don't worry if you prefer reading to watching videos. We will be adding plenty more content to the Textual docs in the near future. Watch this space.</p> <p>As always, if you want to discuss anything with the Textual developers, join us on the Discord server.</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/","title":"Textual 0.38.0 adds a syntax aware TextArea","text":"<p>This is the second big feature release this month after last week's command palette.</p> <p>The TextArea has finally landed. I know a lot of folk have been waiting for this one. Textual's TextArea is a fully-featured widget for editing code, with syntax highlighting and line numbers. It is highly configurable, and looks great.</p> <p>Darren Burns (the author of this widget) has penned a terrific write-up on the TextArea. See Things I learned while building Textual's TextArea for some of the challenges he faced.</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#scoped-css","title":"Scoped CSS","text":"<p>Another notable feature added in 0.38.0 is scoped CSS. A common gotcha in building Textual widgets is that you could write CSS that impacted styles outside of that widget.</p> <p>Consider the following widget:</p> <pre><code>class MyWidget(Widget):\n    DEFAULT_CSS = \"\"\"\n    MyWidget {\n        height: auto;\n        border: magenta;\n    }\n    Label {\n        border: solid green;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"foo\")\n        yield Label(\"bar\")\n</code></pre> <p>The author has intended to style the labels in that widget by adding a green border. This does work for the widget in question, but (prior to 0.38.0) the <code>Label</code> rule would style all Labels (including any outside of the widget) \u2014 which was probably not intended.</p> <p>With version 0.38.0, the CSS is scoped so that only the widget's labels will be styled. This is almost always what you want, which is why it is enabled by default. If you do want to style something outside of the widget you can set <code>SCOPED_CSS=False</code> (as a classvar).</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#light-and-dark-pseudo-selectors","title":"Light and Dark pseudo selectors","text":"<p>We've also made a slight quality of life improvement to the CSS, by adding <code>:light</code> and <code>:dark</code> pseudo selectors. This allows you to change styles depending on whether you have dark mode enabled or not.</p> <p>This was possible before, just a little verbose. Here's how you would do it in 0.37.0:</p> <pre><code>App.-dark-mode MyWidget Label {\n    ...\n}\n</code></pre> <p>In 0.38.0 it's a little more concise and readable:</p> <pre><code>MyWidget:dark Label {\n    ...\n}\n</code></pre>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#testing-guide","title":"Testing guide","text":"<p>Not strictly part of the release, but we've added a guide on testing Textual apps.</p> <p>As you may know, we are on a mission to make TUIs a serious proposition for critical apps, which makes testing essential. We've extracted and documented our internal testing tools, including our snapshot tests pytest plugin pytest-textual-snapshot.</p> <p>This gives devs powerful tools to ensure the quality of their apps. Let us know your thoughts on that!</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#release-notes","title":"Release notes","text":"<p>See the release page for the full details on this release.</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#whats-next","title":"What's next?","text":"<p>There's lots of features planned over the next few months. One feature I am particularly excited by is a widget to generate plots by wrapping the awesome Plotext library. Check out some early work on this feature:</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#join-us","title":"Join us","text":"<p>Join our Discord server if you want to discuss Textual with the Textualize devs, or the community.</p>"},{"location":"blog/2022/11/08/version-040/","title":"Version 0.4.0","text":"<p>We've released version 0.4.0 of Textual.</p> <p>As this is the first post tagged with <code>release</code> let me first explain where the blog fits in with releases. We plan on doing a post for every note-worthy release. Which likely means all but the most trivial updates (typos just aren't that interesting). Blog posts will be supplementary to release notes which you will find on the Textual repository.</p> <p>Blog posts will give a little more background for the highlights in a release, and a rationale for changes and new additions. We embrace building in public, which means that we would like you to be as up-to-date with new developments as if you were sitting in our office. It's a small office, and you might not be a fan of the Scottish weather (it's dreich), but you can at least be here virtually.</p> <p>Release 0.4.0 follows 0.3.0, released on October 31st. Here are the highlights of the update.</p>"},{"location":"blog/2022/11/08/version-040/#updated-mount-method","title":"Updated Mount Method","text":"<p>The mount method has seen some work. We've dropped the ability to assign an <code>id</code> via keyword attributes, which wasn't terribly useful. Now, an <code>id</code> must be assigned via the constructor. </p> <p>The mount method has also grown <code>before</code> and <code>after</code> parameters which tell Textual where to add a new Widget (the default was to add it to the end). Here are a few examples:</p> <pre><code># Mount at the start\nself.mount(Button(id=\"Buy Coffee\"), before=0)\n\n# Mount after a selector\nself.mount(Static(\"Password is incorrect\"), after=\"Dialog Input.-error\")\n\n# Mount after a specific widget\ntweet = self.query_one(\"Tweet\")\nself.mount(Static(\"Consider switching to Mastodon\"), after=tweet)\n</code></pre> <p>Textual needs much of the same kind of operations as the JS API exposed by the browser. But we are determined to make this way more intuitive. The new mount method is a step towards that. </p>"},{"location":"blog/2022/11/08/version-040/#faster-updates","title":"Faster Updates","text":"<p>Textual now writes to stdout in a thread. The upshot of this is that Textual can work on the next update before the terminal has displayed the previous frame.</p> <p>This means smoother updates all round! You may notice this when scrolling and animating, but even if you don't, you will have more CPU cycles to play with in your Textual app.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2ca3Oa3Fx1MDAxNsff91NkPG8r3fdLZ86cybW5t401SXPmmVx1MDAwZUFUXCKK4WIunX73Z0FsXHUwMDAwI2pcdTAwMTKDTPLCKlx1MDAxYvZebNaP/1prQ39/WFurhXdDu/Z5rWbfWqbrtHzzpvYx3j6y/cDxXHUwMDA20ESS34FcdTAwMTf5VrJnN1xmh8HnT5/6pt+zw6FrWrYxcoLIdIMwajmeYXn9T05o94P/xZ/HZt/+79Drt0LfSFx1MDAwN6nbLSf0/IexbNfu24MwgN7/XHUwMDBmv9fWfiefXHUwMDE563zbXG7NQce1k1x1MDAwM5Km1ECK1eTWY2+QXHUwMDE4SzDDVFx1MDAxMk7Q41x1MDAxZU6wXHUwMDA144V2XHUwMDBimttgs522xJtq55fW8dVgOzo971xuWd857UaDzct02Lbjuo3wzn2YXG7T6kZ+xqgg9L2efea0wi6044ntj8dcdTAwMDVcdTAwMWXMQnqU70Wd7sBcdTAwMGWC3DHe0LSc8C7ehlLzXHUwMDFmZuHzWrrlXHUwMDE2filuKClcdTAwMTVcdTAwMTVCYc6kXHUwMDE0j63J8ZxcdTAwMWGEU41cdTAwMDThXGL+Ju3a9FxcuFx1MDAxNGDXf6hgbUumll2aVq9cdTAwMDPmXHJa6T6EqEtbKJXudfP3fJkyiJSUUclcdTAwMWZcdTAwMWK7ttPphtDKkKGlXCJgI5KYXHUwMDExRVMr7ORqxC2USMZcdTAwMWVcdTAwMWLioYd7rcQx/pmczK7pXHUwMDBmx5NWXHUwMDBi4lx1MDAxZlx1MDAxObNji7cnvSrrWZlcdTAwMGJ+2T5qXHUwMDFjOMdcciFcdTAwMWPinp9uXHUwMDFmXHUwMDA218HPx75yblx1MDAxONq3Ye2x4c/H6d3m9v646IBpt+Nv6Vx0R8OW+eCwWFxiqWGKJaY09Vx1MDAwMNdcdTAwMTn0oHFcdTAwMTC5brrNs3qpj3/I2PtMuDQthotKXHUwMDA03pa5YPPgut9ccr5aR0PyvVlf92+PLbp/9l1UXHUwMDFkrjp4q0GRXHUwMDE2XHUwMDA0cy01opzk8FwiXGJcdTAwMWKEUnBuJqTChFx1MDAxN+LF27Rlsdl42YJphabhRVxiM4RmkjMmgFx1MDAxZq5ewFx1MDAxONxcdTAwMGaVwHBcdTAwMDaqXFzIml/I/p55MrpAw9b1tT/sbl37J29cdNn0XHUwMDAxn1x1MDAwM1x1MDAxOUwkUrxcdTAwMTTIXHUwMDE4xkWQYSm4RIhxsTBkw1x1MDAxZt++7l1cdTAwMWW1aGRcdTAwMWTgId9wej/vulWHjFx0XHUwMDBljGFcdTAwMDJcdTAwMTOviKSgXCJcdTAwMTNcdTAwMTImXGbMlVx1MDAxNFx1MDAxOCeuzYohW6mGYaQg2lx1MDAxMFx1MDAxNJNy+dq17qXd22t2b2lvyLqX9uHoXHUwMDFifku+plx1MDAwZlhRXHUwMDExY1pcdTAwMTbxJZhcIkhgtLiG3e2qKPq1dVx1MDAxZlx1MDAxYzXNkfn91t05cdpVx4tQaVx1MDAwMFVcdTAwMTju/pJzzSfo0spA0FwiXHUwMDE555RLnLnZVE/CXGLinCnKsChcdTAwMTexg63v6Ng+6nxcdTAwMGbCbvO62d7mqH/2lohNXHUwMDFmcHWI5ezMJoikXGIuTFx1MDAxOIeQnujFxWt2oFBRuupCXHUwMDE4TIBzM1xuai2QyONFkDZcYokjyPiCKKqXXHUwMDExIT6FKyOZjzRlg9ExPlx1MDAwMJVcdTAwMTBYv4VCLTOaSi+5N1xiXHUwMDFizn2ScaDc1lx1MDAxZLPvuHe5q5b4aOxGyfjZeVxmbFx1MDAxODNxSpXbe911OrFcdTAwMTfXLDhcdTAwMGLbzzl46Fim+7hD32m1svpigVx0JvTp7y2S23i+03FcdTAwMDam+yNv4YuIK6x3MKmpQGRxMZud/FZcdTAwMTQ3TJmBsODgUFxcQFx1MDAwMqry+Vx1MDAxOFx1MDAxNpCPMVxu07BENXuKWyZcdTAwMGKcgVx1MDAxYqaEXHUwMDBirbF8XHUwMDAztVrmnf91uJ35Tsm0zSnTTdL2YOCLYCvOzTjHXHUwMDFhJluphXGbXHUwMDFkQ1RcdTAwMTQ3iqnBXHUwMDE1Y5prXHUwMDA0mZGarH5cYlx1MDAwM0muYFx1MDAxZYA1ls18ViFuXHUwMDEwNCrMdbniVjJtK1x1MDAxMLc5SU8p4iYgZ6BU4cWDydlZcUVx44BcdTAwMWKjWsPpclx1MDAxOVdCJsSNXHUwMDE5XHUwMDE4JE/qh1xmSqo3wW1BcVx1MDAwMyvB0pJDyXevbXNcbngv0LbZ1ZHMZE4gJ1x0QpqpZ1x1MDAwNJT7I3SAdjZa/kE/XHUwMDFhnUdHfp1wXXXkMKKGXHUwMDAy5WJcYkI1hjjOIcewNFx1MDAwNChcdTAwMWZCY5ErJG7FpUfQZ1x1MDAwMVx1MDAwMW/JdVx1MDAxMeF87TaO2DpB9+bJSe8wwvhm9Jq6yFx1MDAxYnU7r9wyfcC02/G3alQ0OS1cXJbjRGhCsmvAc2Wy8+XQPJDfnOZF65c2zZsrc++u6szWMUlcdTAwMTa9OTi8oFwiXHUwMDBlTfPUXG6QUak4pH/JqncxtasvaWKCQEhFdpGnXHUwMDE0dCN2u3s9ijbcXHUwMDAzT9zwweHVcc/uvVx1MDAxZd2ldztcdTAwMGbd6Vx1MDAwM1ZcdTAwMTVdrYvQJZpoXHIh7uJye9A7adCGa91ftK9+7Gy2T5v3vdOqo0spMTAnXHUwMDAwLlx1MDAxMVxmXCJZzfLkYmFcYlx1MDAxZcdcdTAwMWRcdTAwMGbAZG51lVx1MDAxMlxcolC85l82tPvWyW5k4u0uP6xcdTAwMWaMblx1MDAwNlx1MDAwM1Cr6PXQLr3bedBOXHUwMDFmsKLQSsSLoMVcdTAwMWHFSal+XHUwMDA2tdH2VXR4tyt/ycPG9lx1MDAxNW9IsnfxperUYsRcZsqFwpJSXHUwMDExL2boPLWgt5CfYyrwPGorILiSY1x1MDAxNa9Olczu1sXXy0NN7ky457Gj4O6871xmL1/P7tK7ncfu9Fx1MDAwMVfHbmHtVlx1MDAxND9YoyA4XHUwMDA0aJ+R286OayqKbZ0jXHUwMDAzUYRcdTAwMTVcdTAwMDI448WSiYdDmcRcdTAwMDZcdTAwMTNSUPqQ3L7Rasli9du4sqWIxO+7orSC+u2cXHUwMDE0b5n1W4xcdTAwMGLjWy21ZOCKiyM3u1xuUFHkMMeGjlx1MDAxN/0gxGVxOWmCOEhcXLlcdTAwMDYh1VgnXG62yvXJeMVcdTAwMDRcdKrouyau/Fx1MDAxYe6cOuhcdTAwMTLXJ8lcZt5cdTAwMTSDm756xuM3syOJqvKmkEFcdTAwMTDDXHUwMDFh4jnIx8hEOlx0XHUwMDAyJyghT+PF8vVNQ85cdTAwMGKRqX7XXHUwMDBmXHUwMDAzrEDe5iRUS5U3XZxcdFIpiFr8VaPZKXdFYaMxbCBtTGGqp1x1MDAxNG/i7IwhJMRY2+Sb4Lbg+iRcdTAwMDfkJc247jvErXxtm1N0XFyitlx1MDAxNT5cdTAwMGKAXHUwMDA1XCKCaJEpy8yj7eJLdK+Q02tcXHX3XHUwMDFhO1dnW0PvdLfqtGFFXGZcdTAwMTRnZVx1MDAwNCdcdTAwMGZcdTAwMDPofCippVx1MDAwMUmdYip+qlx1MDAxM9LZV7FWXFwoXHUwMDE1U2osT2mjXHUwMDA0bn/wUX4kSXRptG3Ybc9/XHUwMDFlbq7dXHUwMDBlZ8BcdTAwMTZ6w1wi0nJnMYnV2JJcdTAwMTdxVfg6XHUwMDA0ZkzHIUqmejePK9usb1x1MDAwNH3xrd+MzlG9j++3tjevK8+VIIZcdTAwMDBqXG64ojxeoVx1MDAxMFxuKVx1MDAxND9BOut1o9eRlcn9ZpAlKKVSKVa+jpVI1no7J0qrXHUwMDAz68GQmVxcmb7v3UxNxlDhujxcdTAwMDQjSHKK9OJoscb53k7n+HJ9py72/P3dU7y19cKHaSafynzDV424QWAvTjWjkIzhiXSMXCJlcFx1MDAwMOLvXHUwMDAzbK9Lx4rJgsFccqD872NymE5J0LChMFx1MDAwNKtiSuSIOFFcdTAwMWGJXHUwMDE3vIueWFg2cUFo+uGGM2g5g87kIfagVdDimkG46fX7TlxiZnzznEE4uUfS73rs7V3bfEJcdTAwMGX0nG2rhb4zsYI2jDvNL4uk39ZSz0l+PH7/5+PUvVx0llx1MDAwNlI4juhxPreI/+rI0EhcdTAwMDGAmPB5PVx1MDAxNTtH0lPqXHUwMDE3aUdcdTAwMWay/z5Xb0XxS/SIKU3gfNLLPrdGc/Szuf+r88VcdTAwMTXO6c9r+/asqe2rqt9cdTAwMTXqXFxcdTAwMTlcdTAwMTBcdTAwMWRcblx1MDAxZf+PXHUwMDFjQiOevytAKG9gzcZcdTAwMDXRV69CzLgtLCS4mFx0grR8529t/HD6lYhkXHUwMDEzO1x1MDAxZbj6MEa2Zlx1MDAwZYeNMC7SfFx1MDAxZVNcdTAwMDZcdTAwMTfAaY1PMe2tNnLsm40pXHUwMDFl0E7+4l5cdTAwMTNWYyrsePp///nw51+TJY25In0= UpdateWriteUpdateWriteUpdateWriteUpdateWriteBeforeAfterTime"},{"location":"blog/2022/11/08/version-040/#multiple-css-paths","title":"Multiple CSS Paths","text":"<p>Up to version 0.3.0, Textual would only read a single CSS file set in the <code>CSS_PATH</code> class variable. You can now supply a list of paths if you have more than one CSS file.</p> <p>This change was prompted by tuilwindcss which brings a TailwindCSS like approach to building Textual Widgets. Also check out calmcode.io by the same author, which is an amazing resource.</p>"},{"location":"blog/2022/12/11/version-060/","title":"Textual 0.6.0 adds a treemendous new widget","text":"<p>A new release of Textual lands 3 weeks after the previous release -- and it's a big one.</p> <p>Information</p> <p>If you're new here, Textual is TUI framework for Python.</p>"},{"location":"blog/2022/12/11/version-060/#tree-control","title":"Tree Control","text":"<p>The headline feature of version 0.6.0 is a new tree control built from the ground-up. The previous Tree control suffered from an overly complex API and wasn't scalable (scrolling slowed down with 1000s of nodes).</p> <p>This new version has a simpler API and is highly scalable (no slowdown with larger trees). There are also a number of visual enhancements in this version.</p> <p>Here's a very simple example:</p> Outputtree.py <p> TreeApp \u25bc\u00a0Dune \u2517\u2501\u2501\u00a0\u25bc\u00a0Characters \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Paul \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Jessica \u00a0\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0Chani </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Tree\n\n\nclass TreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        tree: Tree[dict] = Tree(\"Dune\")\n        tree.root.expand()\n        characters = tree.root.add(\"Characters\", expand=True)\n        characters.add_leaf(\"Paul\")\n        characters.add_leaf(\"Jessica\")\n        characters.add_leaf(\"Chani\")\n        yield tree\n\n\nif __name__ == \"__main__\":\n    app = TreeApp()\n    app.run()\n</code></pre> <p>Here's the tree control being used to navigate some JSON (json_tree.py in the examples directory).</p> <p>I'm biased of course, but I think this terminal based tree control is more usable (and even prettier) than just about anything I've seen on the web or desktop. So much of computing tends to organize itself in to a tree that I think this widget will find a lot of uses. </p> <p>The Tree control forms the foundation of the DirectoryTree widget, which has also been updated. Here it is used in the code_browser.py example:</p>"},{"location":"blog/2022/12/11/version-060/#list-view","title":"List View","text":"<p>We have a new ListView control to navigate and select items in a list. Items can be widgets themselves, which makes this a great platform for building more sophisticated controls.</p> Outputlist_view.pylist_view.css <p> ListViewExample One Two Three \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, ListItem, ListView\n\n\nclass ListViewExample(App):\n    CSS_PATH = \"list_view.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ListViewExample()\n    app.run()\n</code></pre> <pre><code>\n</code></pre>"},{"location":"blog/2022/12/11/version-060/#placeholder","title":"Placeholder","text":"<p>The Placeholder widget was broken since the big CSS update. We've brought it back and given it a bit of a polish.</p> <p>Use this widget in place of custom widgets you have yet to build when designing your UI. The colors are automatically cycled to differentiate one placeholder from the next. You can click a placeholder to cycle between its ID, size, and lorem ipsum text.</p> Outputplaceholder.pyplaceholder.css <p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3 #p5Placeholder Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0 Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0 33\u00a0x\u00a011nec\u00a0libero\u00a0quis\u00a0gravida.\u00a034\u00a0x\u00a011 Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0 Nullam\u00a0imperdiet\u00a0sem\u00a0tellus,\u00a0 sed\u00a0vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0 amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0consectetur\u00a0 adipiscing\u00a0elit.\u00a0Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0Nullam\u00a0 imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0vehicula\u00a0nisl\u00a0faucibus50\u00a0x\u00a011 sit\u00a0amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sed lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0sapien\u00a0sapien congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0pellentesque\u00a0quam\u00a0quam\u00a0 vel\u00a0nisl.\u00a0Curabitur\u00a0vulputate\u00a0erat\u00a0pellentesque\u00a0 mauris\u00a0posuere,\u00a0non\u00a0dictum\u00a0risus\u00a0mattis. Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0consectetur\u00a0Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0consectetur\u00a0 adipiscing\u00a0elit.\u00a0Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0Nullam\u00a0gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0Nullam\u00a0 imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0vehicula\u00a0nisl\u00a0faucibusimperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0vehicula\u00a0nisl\u00a0faucibus sit\u00a0amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sedsit\u00a0amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sed lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0sapien\u00a0sapienlacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0sapien\u00a0sapien congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0pellentesque\u00a0quam\u00a0quam\u00a0congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0pellentesque\u00a0quam\u00a0quam\u00a0 vel\u00a0nisl.\u00a0Curabitur\u00a0vulputate\u00a0erat\u00a0pellentesque\u00a0vel\u00a0nisl.\u00a0Curabitur\u00a0vulputate\u00a0erat\u00a0pellentesque\u00a0 mauris\u00a0posuere,\u00a0non\u00a0dictum\u00a0risus\u00a0mattis.mauris\u00a0posuere,\u00a0non\u00a0dictum\u00a0risus\u00a0mattis. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal, VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass PlaceholderApp(App):\n    CSS_PATH = \"placeholder.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield VerticalScroll(\n            Container(\n                Placeholder(\"This is a custom label for p1.\", id=\"p1\"),\n                Placeholder(\"Placeholder p2 here!\", id=\"p2\"),\n                Placeholder(id=\"p3\"),\n                Placeholder(id=\"p4\"),\n                Placeholder(id=\"p5\"),\n                Placeholder(),\n                Horizontal(\n                    Placeholder(variant=\"size\", id=\"col1\"),\n                    Placeholder(variant=\"text\", id=\"col2\"),\n                    Placeholder(variant=\"size\", id=\"col3\"),\n                    id=\"c1\",\n                ),\n                id=\"bot\",\n            ),\n            Container(\n                Placeholder(variant=\"text\", id=\"left\"),\n                Placeholder(variant=\"size\", id=\"topright\"),\n                Placeholder(variant=\"text\", id=\"botright\"),\n                id=\"top\",\n            ),\n            id=\"content\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = PlaceholderApp()\n    app.run()\n</code></pre> <pre><code>\n</code></pre>"},{"location":"blog/2022/12/11/version-060/#fixes","title":"Fixes","text":"<p>As always, there are a number of fixes in this release. Mostly related to layout. See CHANGELOG.md for the details.</p>"},{"location":"blog/2022/12/11/version-060/#whats-next","title":"What's next?","text":"<p>The next release will focus on pain points we discovered while in a dog-fooding phase (see the DevLog for details on what Textual devs have been building).</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/","title":"Textual 0.37.0 adds a command palette","text":"<p>Textual version 0.37.0 has landed! The highlight of this release is the new command palette.</p> <p>A command palette gives users quick access to features in your app. If you hit ctrl+backslash in a Textual app, it will bring up the command palette where you can start typing commands. The commands are matched with a fuzzy search, so you only need to type two or three characters to get to any command.</p> <p>Here's a video of it in action:</p> <p>Adding your own commands to the command palette is a piece of cake. Here's the (command) Provider class used in the example above:</p> <pre><code>class ColorCommands(Provider):\n    \"\"\"A command provider to select colors.\"\"\"\n\n    async def search(self, query: str) -&gt; Hits:\n        \"\"\"Called for each key.\"\"\"\n        matcher = self.matcher(query)\n        for color in COLOR_NAME_TO_RGB.keys():\n            score = matcher.match(color)\n            if score &gt; 0:\n                yield Hit(\n                    score,\n                    matcher.highlight(color),\n                    partial(self.app.post_message, SwitchColor(color)),\n                )\n</code></pre> <p>And here is how you add a provider to your app:</p> <pre><code>class ColorApp(App):\n    \"\"\"Experiment with the command palette.\"\"\"\n\n    COMMANDS = App.COMMANDS | {ColorCommands}\n</code></pre> <p>We're excited about this feature because it is a step towards bringing a common user interface to Textual apps.</p> <p>Quote</p> <p>It's a Textual app. I know this.</p> <p>\u2014 You, maybe.</p> <p>The goal is to be able to build apps that may look quite different, but take no time to learn, because once you learn how to use one Textual app, you can use them all.</p> <p>See the Guide for details on how to work with the command palette.</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/#what-else","title":"What else?","text":"<p>Also in 0.37.0 we have a new Collapsible widget, which is a great way of adding content while avoiding a cluttered screen.</p> <p>And of course, bug fixes and other updates. See the release page for the full details.</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/#whats-next","title":"What's next?","text":"<p>Coming very soon, is a new TextEditor widget. This is a super powerful widget to enter arbitrary text, with beautiful syntax highlighting for a number of languages. We're expecting that to land next week. Watch this space, or join the Discord server if you want to be the first to try it out.</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/#join-us","title":"Join us","text":"<p>Join our Discord server if you want to discuss Textual with the Textualize devs, or the community.</p>"},{"location":"blog/2024/02/20/remote-memory-profiling-with-memray/","title":"Remote memory profiling with Memray","text":"<p>Memray is a memory profiler for Python, built by some very smart devs at Bloomberg. It is a fantastic tool to identify memory leaks in your code or other libraries (down to the C level)!</p> <p>They recently added a Textual interface which looks amazing, and lets you monitor your process right from the terminal:</p> <p></p> <p>You would typically run this locally, or over a ssh session, but it is also possible to serve the interface over the web with the help of textual-web. I'm not sure if even the Memray devs themselves are aware of this, but here's how.</p> <p>First install Textual web (ideally with pipx) alongside Memray:</p> <pre><code>pipx install textual-web\n</code></pre> <p>Now you can serve Memray with the following command (replace the text in quotes with your Memray options):</p> <pre><code>textual-web -r \"memray run --live -m http.server\"\n</code></pre> <p>This will return a URL you can use to access the Memray app from anywhere. Here's a quick video of that in action:</p>"},{"location":"blog/2024/02/20/remote-memory-profiling-with-memray/#found-this-interesting","title":"Found this interesting?","text":"<p>Join our Discord server if you want to discuss this post with the Textual devs or community.</p>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/","title":"Letting your cook multitask while bringing water to a boil","text":"<p>Whenever you are cooking a time-consuming meal, you want to multitask as much as possible. For example, you do not want to stand still while you wait for a pot of water to start boiling. Similarly, you want your applications to remain responsive (i.e., you want the cook to \u201cmultitask\u201d) while they do some time-consuming operations in the background (e.g., while the water heats up).</p> <p>The animation below shows an example of an application that remains responsive (colours on the left still change on click) even while doing a bunch of time-consuming operations (shown on the right).</p> <p></p> <p>In this blog post, I will teach you how to multitask like a good cook.</p>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/#wasting-time-staring-at-pots","title":"Wasting time staring at pots","text":"<p>There is no point in me presenting a solution to a problem if you don't understand the problem I am trying to solve. Suppose we have an application that needs to display a huge amount of data that needs to be read and parsed from a file. The first time I had to do something like this, I ended up writing an application that \u201cblocked\u201d. This means that while the application was reading and parsing the data, nothing else worked.</p> <p>To exemplify this type of scenario, I created a simple application that spends five seconds preparing some data. After the data is ready, we display a <code>Label</code> on the right that says that the data has been loaded. On the left, the app has a big rectangle (a custom widget called <code>ColourChanger</code>) that you can click and that changes background colours randomly.</p> <p>When you start the application, you can click the rectangle on the left to change the background colour of the <code>ColourChanger</code>, as the animation below shows:</p> <p></p> <p>However, as soon as you press <code>l</code> to trigger the data loading process, clicking the <code>ColourChanger</code> widget doesn't do anything. The app doesn't respond because it is busy working on the data. This is the code of the app so you can try it yourself:</p> <pre><code>import time\nfrom random import randint\n\nfrom textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Grid, VerticalScroll\nfrom textual.widget import Widget\nfrom textual.widgets import Footer, Label\n\n\nclass ColourChanger(Widget):  # (1)!\n    def on_click(self) -&gt; None:\n        self.styles.background = Color(\n            randint(1, 255),\n            randint(1, 255),\n            randint(1, 255),\n        )\n\n\nclass MyApp(App[None]):\n    BINDINGS = [(\"l\", \"load\", \"Load data\")]  # (2)!\n    CSS = \"\"\"\n    Grid {\n        grid-size: 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            ColourChanger(),\n            VerticalScroll(id=\"log\"),\n        )\n        yield Footer()\n\n    def action_load(self) -&gt; None:  # (3)!\n        time.sleep(5)  # (4)!\n        self.query_one(\"#log\").mount(Label(\"Data loaded \u2705\"))\n\n\nMyApp().run()\n</code></pre> <ol> <li>The widget <code>ColourChanger</code> changes colours, randomly, when clicked.</li> <li>We create a binding to the key <code>l</code> that runs an action that we know will take some time (for example, reading and parsing a huge file).</li> <li>The method <code>action_load</code> is responsible for starting our time-consuming task and then reporting back.</li> <li>To simplify things a bit, our \u201ctime-consuming task\u201d is just standing still for 5 seconds.</li> </ol> <p>I think it is easy to understand why the widget <code>ColourChanger</code> stops working when we hit the <code>time.sleep</code> call if we consider the cooking analogy I have written about before in my blog. In short, Python behaves like a lone cook in a kitchen:</p> <ul> <li>the cook can be clever and multitask. For example, while water is heating up and being brought to a boil, the cook can go ahead and chop some vegetables.</li> <li>however, there is only one cook in the kitchen, so if the cook is chopping up vegetables, they can't be seasoning a salad.</li> </ul> <p>Things like \u201cchopping up vegetables\u201d and \u201cseasoning a salad\u201d are blocking, i.e., they need the cook's time and attention. In the app that I showed above, the call to <code>time.sleep</code> is blocking, so the cook can't go and do anything else until the time interval elapses.</p>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/#how-can-a-cook-multitask","title":"How can a cook multitask?","text":"<p>It makes a lot of sense to think that a cook would multitask in their kitchen, but Python isn't like a smart cook. Python is like a very dumb cook who only ever does one thing at a time and waits until each thing is completely done before doing the next thing. So, by default, Python would act like a cook who fills up a pan with water, starts heating the water, and then stands there staring at the water until it starts boiling instead of doing something else. It is by using the module <code>asyncio</code> from the standard library that our cook learns to do other tasks while awaiting the completion of the things they already started doing.</p> <p>Textual is an async framework, which means it knows how to interoperate with the module <code>asyncio</code> and this will be the solution to our problem. By using <code>asyncio</code> with the tasks we want to run in the background, we will let the application remain responsive while we load and parse the data we need, or while we crunch the numbers we need to crunch, or while we connect to some slow API over the Internet, or whatever it is you want to do.</p> <p>The module <code>asyncio</code> uses the keyword <code>async</code> to know which functions can be run asynchronously. In other words, you use the keyword <code>async</code> to identify functions that contain tasks that would otherwise force the cook to waste time. (Functions with the keyword <code>async</code> are called coroutines.)</p> <p>The module <code>asyncio</code> also introduces a function <code>asyncio.create_task</code> that you can use to run coroutines concurrently. So, if we create a coroutine that is in charge of doing the time-consuming operation and then run it with <code>asyncio.create_task</code>, we are well on our way to fix our issues.</p> <p>However, the keyword <code>async</code> and <code>asyncio.create_task</code> alone aren't enough. Consider this modification of the previous app, where the method <code>action_load</code> now uses <code>asyncio.create_task</code> to run a coroutine who does the sleeping:</p> <pre><code>import asyncio\nimport time\nfrom random import randint\n\nfrom textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Grid, VerticalScroll\nfrom textual.widget import Widget\nfrom textual.widgets import Footer, Label\n\n\nclass ColourChanger(Widget):\n    def on_click(self) -&gt; None:\n        self.styles.background = Color(\n            randint(1, 255),\n            randint(1, 255),\n            randint(1, 255),\n        )\n\n\nclass MyApp(App[None]):\n    BINDINGS = [(\"l\", \"load\", \"Load data\")]\n    CSS = \"\"\"\n    Grid {\n        grid-size: 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            ColourChanger(),\n            VerticalScroll(id=\"log\"),\n        )\n        yield Footer()\n\n    def action_load(self) -&gt; None:  # (1)!\n        asyncio.create_task(self._do_long_operation())  # (2)!\n\n    async def _do_long_operation(self) -&gt; None:  # (3)!\n        time.sleep(5)\n        self.query_one(\"#log\").mount(Label(\"Data loaded \u2705\"))\n\n\nMyApp().run()\n</code></pre> <ol> <li>The action method <code>action_load</code> now defers the heavy lifting to another method we created.</li> <li>The time-consuming operation can be run concurrently with <code>asyncio.create_task</code> because it is a coroutine.</li> <li>The method <code>_do_long_operation</code> has the keyword <code>async</code>, so it is a coroutine.</li> </ol> <p>This modified app also works but it suffers from the same issue as the one before! The keyword <code>async</code> tells Python that there will be things inside that function that can be awaited by the cook. That is, the function will do some time-consuming operation that doesn't require the cook's attention. However, we need to tell Python which time-consuming operation doesn't require the cook's attention, i.e., which time-consuming operation can be awaited, with the keyword <code>await</code>.</p> <p>Whenever we want to use the keyword <code>await</code>, we need to do it with objects that are compatible with it. For many things, that means using specialised libraries:</p> <ul> <li>instead of <code>time.sleep</code>, one can use <code>await asyncio.sleep</code>;</li> <li>instead of the module <code>requests</code> to make Internet requests, use <code>aiohttp</code>; or</li> <li>instead of using the built-in tools to read files, use <code>aiofiles</code>.</li> </ul>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/#achieving-good-multitasking","title":"Achieving good multitasking","text":"<p>To fix the last example application, all we need to do is replace the call to <code>time.sleep</code> with a call to <code>asyncio.sleep</code> and then use the keyword <code>await</code> to signal Python that we can be doing something else while we sleep. The animation below shows that we can still change colours while the application is completing the time-consuming operation.</p> CodeAnimation <pre><code>import asyncio\nfrom random import randint\n\nfrom textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Grid, VerticalScroll\nfrom textual.widget import Widget\nfrom textual.widgets import Footer, Label\n\n\nclass ColourChanger(Widget):\n    def on_click(self) -&gt; None:\n        self.styles.background = Color(\n            randint(1, 255),\n            randint(1, 255),\n            randint(1, 255),\n        )\n\n\nclass MyApp(App[None]):\n    BINDINGS = [(\"l\", \"load\", \"Load data\")]\n    CSS = \"\"\"\n    Grid {\n        grid-size: 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            ColourChanger(),\n            VerticalScroll(id=\"log\"),\n        )\n        yield Footer()\n\n    def action_load(self) -&gt; None:\n        asyncio.create_task(self._do_long_operation())\n\n    async def _do_long_operation(self) -&gt; None:\n        self.query_one(\"#log\").mount(Label(\"Starting \u23f3\"))  # (1)!\n        await asyncio.sleep(5)  # (2)!\n        self.query_one(\"#log\").mount(Label(\"Data loaded \u2705\"))  # (3)!\n\n\nMyApp().run()\n</code></pre> <ol> <li>We create a label that tells the user that we are starting our time-consuming operation.</li> <li>We <code>await</code> the time-consuming operation so that the application remains responsive.</li> <li>We create a label that tells the user that the time-consuming operation has been concluded.</li> </ol> <p></p> <p>Because our time-consuming operation runs concurrently, everything else in the application still works while we await for the time-consuming operation to finish. In particular, we can keep changing colours (like the animation above showed) but we can also keep activating the binding with the key <code>l</code> to start multiple instances of the same time-consuming operation! The animation below shows just this:</p> <p></p> <p>Warning</p> <p>The animation GIFs in this blog post show low-quality colours in an attempt to reduce the size of the media files you have to download to be able to read this blog post. If you run Textual locally you will see beautiful colours \u2728</p>"},{"location":"blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/","title":"Using Rich Inspect to interrogate Python objects","text":"<p>The Rich library has a few functions that are admittedly a little out of scope for a terminal color library. One such function is <code>inspect</code> which is so useful you may want to <code>pip install rich</code> just for this feature.</p> <p>The easiest way to describe <code>inspect</code> is that it is Python's builtin <code>help()</code> but easier on the eye (and with a few more features). If you invoke it with any object, <code>inspect</code> will display a nicely formatted report on that object \u2014 which makes it great for interrogating objects from the REPL. Here's an example:</p> <pre><code>&gt;&gt;&gt; from rich import inspect\n&gt;&gt;&gt; text_file = open(\"foo.txt\", \"w\")\n&gt;&gt;&gt; inspect(text_file)\n</code></pre> <p>Here we're inspecting a file object, but it could be literally anything. You will see the following output in the terminal:</p> Rich \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500&lt;class'_io.TextIOWrapper'&gt;\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502Character\u00a0and\u00a0line\u00a0based\u00a0layer\u00a0over\u00a0a\u00a0BufferedIOBase\u00a0object,\u00a0buffer.\u2502 \u2502\u2502 \u2502\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2502\u2502&lt;_io.TextIOWrappername='foo.txt'mode='w'encoding='UTF-8'&gt;\u2502\u2502 \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2502\u2502 \u2502buffer\u00a0=&lt;_io.BufferedWritername='foo.txt'&gt;\u2502 \u2502closed\u00a0=False\u2502 \u2502encoding\u00a0='UTF-8'\u2502 \u2502errors\u00a0='strict'\u2502 \u2502line_buffering\u00a0=False\u2502 \u2502mode\u00a0='w'\u2502 \u2502name\u00a0='foo.txt'\u2502 \u2502newlines\u00a0=None\u2502 \u2502write_through\u00a0=False\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>By default, <code>inspect</code> will generate a data-oriented summary with a text representation of the object and its data attributes. You can also add <code>methods=True</code> to show all the methods in the public API. Here's an example:</p> <pre><code>&gt;&gt;&gt; inspect(text_file, methods=True)\n</code></pre> Rich \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500&lt;class'_io.TextIOWrapper'&gt;\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502Character\u00a0and\u00a0line\u00a0based\u00a0layer\u00a0over\u00a0a\u00a0BufferedIOBase\u00a0object,\u00a0buffer.\u2502 \u2502\u2502 \u2502\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2502\u2502&lt;_io.TextIOWrappername='foo.txt'mode='w'encoding='UTF-8'&gt;\u2502\u2502 \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2502\u2502 \u2502buffer\u00a0=&lt;_io.BufferedWritername='foo.txt'&gt;\u2502 \u2502closed\u00a0=False\u2502 \u2502encoding\u00a0='UTF-8'\u2502 \u2502errors\u00a0='strict'\u2502 \u2502line_buffering\u00a0=False\u2502 \u2502mode\u00a0='w'\u2502 \u2502name\u00a0='foo.txt'\u2502 \u2502newlines\u00a0=None\u2502 \u2502write_through\u00a0=False\u2502 \u2502close\u00a0=def\u00a0close():Flush\u00a0and\u00a0close\u00a0the\u00a0IO\u00a0object.\u2502 \u2502detach\u00a0=def\u00a0detach():Separate\u00a0the\u00a0underlying\u00a0buffer\u00a0from\u00a0the\u00a0TextIOBase\u00a0and\u00a0return\u00a0it.\u2502 \u2502fileno\u00a0=def\u00a0fileno():Returns\u00a0underlying\u00a0file\u00a0descriptor\u00a0if\u00a0one\u00a0exists.\u2502 \u2502flush\u00a0=def\u00a0flush():Flush\u00a0write\u00a0buffers,\u00a0if\u00a0applicable.\u2502 \u2502isatty\u00a0=def\u00a0isatty():Return\u00a0whether\u00a0this\u00a0is\u00a0an\u00a0'interactive'\u00a0stream.\u2502 \u2502read\u00a0=def\u00a0read(size=-1,\u00a0/):Read\u00a0at\u00a0most\u00a0n\u00a0characters\u00a0from\u00a0stream.\u2502 \u2502readable\u00a0=def\u00a0readable():Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0reading.\u2502 \u2502readline\u00a0=def\u00a0readline(size=-1,\u00a0/):Read\u00a0until\u00a0newline\u00a0or\u00a0EOF.\u2502 \u2502readlines\u00a0=def\u00a0readlines(hint=-1,\u00a0/):Return\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0from\u00a0the\u00a0stream.\u2502 \u2502reconfigure\u00a0=def\u00a0reconfigure(*,\u00a0encoding=None,\u00a0errors=None,\u00a0newline=None,\u00a0line_buffering=None,\u00a0\u2502 \u2502write_through=None):Reconfigure\u00a0the\u00a0text\u00a0stream\u00a0with\u00a0new\u00a0parameters.\u2502 \u2502seek\u00a0=def\u00a0seek(cookie,\u00a0whence=0,\u00a0/):Change\u00a0stream\u00a0position.\u2502 \u2502seekable\u00a0=def\u00a0seekable():Return\u00a0whether\u00a0object\u00a0supports\u00a0random\u00a0access.\u2502 \u2502tell\u00a0=def\u00a0tell():Return\u00a0current\u00a0stream\u00a0position.\u2502 \u2502truncate\u00a0=def\u00a0truncate(pos=None,\u00a0/):Truncate\u00a0file\u00a0to\u00a0size\u00a0bytes.\u2502 \u2502writable\u00a0=def\u00a0writable():Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0writing.\u2502 \u2502write\u00a0=def\u00a0write(text,\u00a0/):\u2502 \u2502Write\u00a0string\u00a0to\u00a0stream.\u2502 \u2502Returns\u00a0the\u00a0number\u00a0of\u00a0characters\u00a0written\u00a0(which\u00a0is\u00a0always\u00a0equal\u00a0to\u2502 \u2502the\u00a0length\u00a0of\u00a0the\u00a0string).\u2502 \u2502writelines\u00a0=def\u00a0writelines(lines,\u00a0/):Write\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0to\u00a0stream.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>The documentation is summarized by default to avoid generating verbose reports. If you want to see the full unabbreviated help you can add <code>help=True</code>:</p> <pre><code>&gt;&gt;&gt; inspect(text_file, methods=True, help=True)\n</code></pre> Rich \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500&lt;class'_io.TextIOWrapper'&gt;\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502Character\u00a0and\u00a0line\u00a0based\u00a0layer\u00a0over\u00a0a\u00a0BufferedIOBase\u00a0object,\u00a0buffer.\u2502 \u2502\u2502 \u2502encoding\u00a0gives\u00a0the\u00a0name\u00a0of\u00a0the\u00a0encoding\u00a0that\u00a0the\u00a0stream\u00a0will\u00a0be\u2502 \u2502decoded\u00a0or\u00a0encoded\u00a0with.\u00a0It\u00a0defaults\u00a0to\u00a0locale.getencoding().\u2502 \u2502\u2502 \u2502errors\u00a0determines\u00a0the\u00a0strictness\u00a0of\u00a0encoding\u00a0and\u00a0decoding\u00a0(see\u2502 \u2502help(codecs.Codec)\u00a0or\u00a0the\u00a0documentation\u00a0for\u00a0codecs.register)\u00a0and\u2502 \u2502defaults\u00a0to\u00a0\"strict\".\u2502 \u2502\u2502 \u2502newline\u00a0controls\u00a0how\u00a0line\u00a0endings\u00a0are\u00a0handled.\u00a0It\u00a0can\u00a0be\u00a0None,\u00a0'',\u2502 \u2502'\\n',\u00a0'\\r',\u00a0and\u00a0'\\r\\n'.\u00a0\u00a0It\u00a0works\u00a0as\u00a0follows:\u2502 \u2502\u2502 \u2502*\u00a0On\u00a0input,\u00a0if\u00a0newline\u00a0is\u00a0None,\u00a0universal\u00a0newlines\u00a0mode\u00a0is\u2502 \u2502\u00a0\u00a0enabled.\u00a0Lines\u00a0in\u00a0the\u00a0input\u00a0can\u00a0end\u00a0in\u00a0'\\n',\u00a0'\\r',\u00a0or\u00a0'\\r\\n',\u00a0and\u2502 \u2502\u00a0\u00a0these\u00a0are\u00a0translated\u00a0into\u00a0'\\n'\u00a0before\u00a0being\u00a0returned\u00a0to\u00a0the\u2502 \u2502\u00a0\u00a0caller.\u00a0If\u00a0it\u00a0is\u00a0'',\u00a0universal\u00a0newline\u00a0mode\u00a0is\u00a0enabled,\u00a0but\u00a0line\u2502 \u2502\u00a0\u00a0endings\u00a0are\u00a0returned\u00a0to\u00a0the\u00a0caller\u00a0untranslated.\u00a0If\u00a0it\u00a0has\u00a0any\u00a0of\u2502 \u2502\u00a0\u00a0the\u00a0other\u00a0legal\u00a0values,\u00a0input\u00a0lines\u00a0are\u00a0only\u00a0terminated\u00a0by\u00a0the\u00a0given\u2502 \u2502\u00a0\u00a0string,\u00a0and\u00a0the\u00a0line\u00a0ending\u00a0is\u00a0returned\u00a0to\u00a0the\u00a0caller\u00a0untranslated.\u2502 \u2502\u2502 \u2502*\u00a0On\u00a0output,\u00a0if\u00a0newline\u00a0is\u00a0None,\u00a0any\u00a0'\\n'\u00a0characters\u00a0written\u00a0are\u2502 \u2502\u00a0\u00a0translated\u00a0to\u00a0the\u00a0system\u00a0default\u00a0line\u00a0separator,\u00a0os.linesep.\u00a0If\u2502 \u2502\u00a0\u00a0newline\u00a0is\u00a0''\u00a0or\u00a0'\\n',\u00a0no\u00a0translation\u00a0takes\u00a0place.\u00a0If\u00a0newline\u00a0is\u00a0any\u2502 \u2502\u00a0\u00a0of\u00a0the\u00a0other\u00a0legal\u00a0values,\u00a0any\u00a0'\\n'\u00a0characters\u00a0written\u00a0are\u00a0translated\u2502 \u2502\u00a0\u00a0to\u00a0the\u00a0given\u00a0string.\u2502 \u2502\u2502 \u2502If\u00a0line_buffering\u00a0is\u00a0True,\u00a0a\u00a0call\u00a0to\u00a0flush\u00a0is\u00a0implied\u00a0when\u00a0a\u00a0call\u00a0to\u2502 \u2502write\u00a0contains\u00a0a\u00a0newline\u00a0character.\u2502 \u2502\u2502 \u2502\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2502\u2502&lt;_io.TextIOWrappername='foo.txt'mode='w'encoding='UTF-8'&gt;\u2502\u2502 \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2502\u2502 \u2502buffer\u00a0=&lt;_io.BufferedWritername='foo.txt'&gt;\u2502 \u2502closed\u00a0=False\u2502 \u2502encoding\u00a0='UTF-8'\u2502 \u2502errors\u00a0='strict'\u2502 \u2502line_buffering\u00a0=False\u2502 \u2502mode\u00a0='w'\u2502 \u2502name\u00a0='foo.txt'\u2502 \u2502newlines\u00a0=None\u2502 \u2502write_through\u00a0=False\u2502 \u2502close\u00a0=def\u00a0close():\u2502 \u2502Flush\u00a0and\u00a0close\u00a0the\u00a0IO\u00a0object.\u2502 \u2502\u2502 \u2502This\u00a0method\u00a0has\u00a0no\u00a0effect\u00a0if\u00a0the\u00a0file\u00a0is\u00a0already\u00a0closed.\u2502 \u2502detach\u00a0=def\u00a0detach():\u2502 \u2502Separate\u00a0the\u00a0underlying\u00a0buffer\u00a0from\u00a0the\u00a0TextIOBase\u00a0and\u00a0return\u00a0it.\u2502 \u2502\u2502 \u2502After\u00a0the\u00a0underlying\u00a0buffer\u00a0has\u00a0been\u00a0detached,\u00a0the\u00a0TextIO\u00a0is\u00a0in\u00a0an\u2502 \u2502unusable\u00a0state.\u2502 \u2502fileno\u00a0=def\u00a0fileno():\u2502 \u2502Returns\u00a0underlying\u00a0file\u00a0descriptor\u00a0if\u00a0one\u00a0exists.\u2502 \u2502\u2502 \u2502OSError\u00a0is\u00a0raised\u00a0if\u00a0the\u00a0IO\u00a0object\u00a0does\u00a0not\u00a0use\u00a0a\u00a0file\u00a0descriptor.\u2502 \u2502flush\u00a0=def\u00a0flush():\u2502 \u2502Flush\u00a0write\u00a0buffers,\u00a0if\u00a0applicable.\u2502 \u2502\u2502 \u2502This\u00a0is\u00a0not\u00a0implemented\u00a0for\u00a0read-only\u00a0and\u00a0non-blocking\u00a0streams.\u2502 \u2502isatty\u00a0=def\u00a0isatty():\u2502 \u2502Return\u00a0whether\u00a0this\u00a0is\u00a0an\u00a0'interactive'\u00a0stream.\u2502 \u2502\u2502 \u2502Return\u00a0False\u00a0if\u00a0it\u00a0can't\u00a0be\u00a0determined.\u2502 \u2502read\u00a0=def\u00a0read(size=-1,\u00a0/):\u2502 \u2502Read\u00a0at\u00a0most\u00a0n\u00a0characters\u00a0from\u00a0stream.\u2502 \u2502\u2502 \u2502Read\u00a0from\u00a0underlying\u00a0buffer\u00a0until\u00a0we\u00a0have\u00a0n\u00a0characters\u00a0or\u00a0we\u00a0hit\u00a0EOF.\u2502 \u2502If\u00a0n\u00a0is\u00a0negative\u00a0or\u00a0omitted,\u00a0read\u00a0until\u00a0EOF.\u2502 \u2502readable\u00a0=def\u00a0readable():\u2502 \u2502Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0reading.\u2502 \u2502\u2502 \u2502If\u00a0False,\u00a0read()\u00a0will\u00a0raise\u00a0OSError.\u2502 \u2502readline\u00a0=def\u00a0readline(size=-1,\u00a0/):\u2502 \u2502Read\u00a0until\u00a0newline\u00a0or\u00a0EOF.\u2502 \u2502\u2502 \u2502Returns\u00a0an\u00a0empty\u00a0string\u00a0if\u00a0EOF\u00a0is\u00a0hit\u00a0immediately.\u2502 \u2502readlines\u00a0=def\u00a0readlines(hint=-1,\u00a0/):\u2502 \u2502Return\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0from\u00a0the\u00a0stream.\u2502 \u2502\u2502 \u2502hint\u00a0can\u00a0be\u00a0specified\u00a0to\u00a0control\u00a0the\u00a0number\u00a0of\u00a0lines\u00a0read:\u00a0no\u00a0more\u2502 \u2502lines\u00a0will\u00a0be\u00a0read\u00a0if\u00a0the\u00a0total\u00a0size\u00a0(in\u00a0bytes/characters)\u00a0of\u00a0all\u2502 \u2502lines\u00a0so\u00a0far\u00a0exceeds\u00a0hint.\u2502 \u2502reconfigure\u00a0=def\u00a0reconfigure(*,\u00a0encoding=None,\u00a0errors=None,\u00a0newline=None,\u00a0line_buffering=None,\u00a0\u2502 \u2502write_through=None):\u2502 \u2502Reconfigure\u00a0the\u00a0text\u00a0stream\u00a0with\u00a0new\u00a0parameters.\u2502 \u2502\u2502 \u2502This\u00a0also\u00a0does\u00a0an\u00a0implicit\u00a0stream\u00a0flush.\u2502 \u2502seek\u00a0=def\u00a0seek(cookie,\u00a0whence=0,\u00a0/):\u2502 \u2502Change\u00a0stream\u00a0position.\u2502 \u2502\u2502 \u2502Change\u00a0the\u00a0stream\u00a0position\u00a0to\u00a0the\u00a0given\u00a0byte\u00a0offset.\u00a0The\u00a0offset\u00a0is\u2502 \u2502interpreted\u00a0relative\u00a0to\u00a0the\u00a0position\u00a0indicated\u00a0by\u00a0whence.\u00a0\u00a0Values\u2502 \u2502for\u00a0whence\u00a0are:\u2502 \u2502\u2502 \u2502*\u00a00\u00a0--\u00a0start\u00a0of\u00a0stream\u00a0(the\u00a0default);\u00a0offset\u00a0should\u00a0be\u00a0zero\u00a0or\u00a0positive\u2502 \u2502*\u00a01\u00a0--\u00a0current\u00a0stream\u00a0position;\u00a0offset\u00a0may\u00a0be\u00a0negative\u2502 \u2502*\u00a02\u00a0--\u00a0end\u00a0of\u00a0stream;\u00a0offset\u00a0is\u00a0usually\u00a0negative\u2502 \u2502\u2502 \u2502Return\u00a0the\u00a0new\u00a0absolute\u00a0position.\u2502 \u2502seekable\u00a0=def\u00a0seekable():\u2502 \u2502Return\u00a0whether\u00a0object\u00a0supports\u00a0random\u00a0access.\u2502 \u2502\u2502 \u2502If\u00a0False,\u00a0seek(),\u00a0tell()\u00a0and\u00a0truncate()\u00a0will\u00a0raise\u00a0OSError.\u2502 \u2502This\u00a0method\u00a0may\u00a0need\u00a0to\u00a0do\u00a0a\u00a0test\u00a0seek().\u2502 \u2502tell\u00a0=def\u00a0tell():Return\u00a0current\u00a0stream\u00a0position.\u2502 \u2502truncate\u00a0=def\u00a0truncate(pos=None,\u00a0/):\u2502 \u2502Truncate\u00a0file\u00a0to\u00a0size\u00a0bytes.\u2502 \u2502\u2502 \u2502File\u00a0pointer\u00a0is\u00a0left\u00a0unchanged.\u00a0\u00a0Size\u00a0defaults\u00a0to\u00a0the\u00a0current\u00a0IO\u2502 \u2502position\u00a0as\u00a0reported\u00a0by\u00a0tell().\u00a0\u00a0Returns\u00a0the\u00a0new\u00a0size.\u2502 \u2502writable\u00a0=def\u00a0writable():\u2502 \u2502Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0writing.\u2502 \u2502\u2502 \u2502If\u00a0False,\u00a0write()\u00a0will\u00a0raise\u00a0OSError.\u2502 \u2502write\u00a0=def\u00a0write(text,\u00a0/):\u2502 \u2502Write\u00a0string\u00a0to\u00a0stream.\u2502 \u2502Returns\u00a0the\u00a0number\u00a0of\u00a0characters\u00a0written\u00a0(which\u00a0is\u00a0always\u00a0equal\u00a0to\u2502 \u2502the\u00a0length\u00a0of\u00a0the\u00a0string).\u2502 \u2502writelines\u00a0=def\u00a0writelines(lines,\u00a0/):\u2502 \u2502Write\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0to\u00a0stream.\u2502 \u2502\u2502 \u2502Line\u00a0separators\u00a0are\u00a0not\u00a0added,\u00a0so\u00a0it\u00a0is\u00a0usual\u00a0for\u00a0each\u00a0of\u00a0the\u2502 \u2502lines\u00a0provided\u00a0to\u00a0have\u00a0a\u00a0line\u00a0separator\u00a0at\u00a0the\u00a0end.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>There are a few more arguments to refine the level of detail you need (private methods, dunder attributes etc). You can see the full range of options with this delightful little incantation:</p> <pre><code>&gt;&gt;&gt; inspect(inspect)\n</code></pre> <p>If you are interested in Rich or Textual, join our Discord server!</p>"},{"location":"blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/#addendum","title":"Addendum","text":"<p>Here's how to have <code>inspect</code> always available without an explicit import:</p> <p>Put this in your pythonrc file: pic.twitter.com/pXTi69ykZL</p>\u2014 Tushar Sadhwani (@sadhlife) July 27, 2023"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/","title":"Spinners and progress bars in Textual","text":"<p>One of the things I love about mathematics is that you can solve a problem just by guessing the correct answer. That is a perfectly valid strategy for solving a problem. The only thing you need to do after guessing the answer is to prove that your guess is correct.</p> <p>I used this strategy, to some success, to display spinners and indeterminate progress bars from Rich in Textual.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#display-an-indeterminate-progress-bar-in-textual","title":"Display an indeterminate progress bar in Textual","text":"<p>I have been playing around with Textual and recently I decided I needed an indeterminate progress bar to show that some data was loading. Textual is likely to get progress bars in the future, but I don't want to wait for the future! I want my progress bars now! Textual builds on top of Rich, so if Rich has progress bars, I reckoned I could use them in my Textual apps.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#progress-bars-in-rich","title":"Progress bars in Rich","text":"<p>Creating a progress bar in Rich is as easy as opening up the documentation for <code>Progress</code> and copying &amp; pasting the code.</p> CodeOutput <pre><code>import time\nfrom rich.progress import track\n\nfor _ in track(range(20), description=\"Processing...\"):\n    time.sleep(0.5)  # Simulate work being done\n</code></pre> <p></p> <p>The function <code>track</code> provides a very convenient interface for creating progress bars that keep track of a well-specified number of steps. In the example above, we were keeping track of some task that was going to take 20 steps to complete. (For example, if we had to process a list with 20 elements.) However, I am looking for indeterminate progress bars.</p> <p>Scrolling further down the documentation for <code>rich.progress</code> I found what I was looking for:</p> CodeOutput <pre><code>import time\nfrom rich.progress import Progress\n\nwith Progress() as progress:\n    _ = progress.add_task(\"Loading...\", total=None)  # (1)!\n    while True:\n        time.sleep(0.01)\n</code></pre> <ol> <li>Setting <code>total=None</code> is what makes it an indeterminate progress bar.</li> </ol> <p></p> <p>So, putting an indeterminate progress bar on the screen is easy. Now, I only needed to glue that together with the little I know about Textual to put an indeterminate progress bar in a Textual app.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#guessing-what-is-what-and-what-goes-where","title":"Guessing what is what and what goes where","text":"<p>What I want is to have an indeterminate progress bar inside my Textual app. Something that looks like this:</p> <p></p> <p>The GIF above shows just the progress bar. Obviously, the end goal is to have the progress bar be part of a Textual app that does something.</p> <p>So, when I set out to do this, my first thought went to the stopwatch app in the Textual tutorial because it has a widget that updates automatically, the <code>TimeDisplay</code>. Below you can find the essential part of the code for the <code>TimeDisplay</code> widget and a small animation of it updating when the stopwatch is started.</p> <code>TimeDisplay</code> widgetOutput <pre><code>from time import monotonic\n\nfrom textual.reactive import reactive\nfrom textual.widgets import Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n</code></pre> <p></p> <p>The reason the time display updates magically is due to the three methods that I highlighted in the code above:</p> <ol> <li>The method <code>on_mount</code> is called when the <code>TimeDisplay</code> widget is mounted on the app and, in it, we use the method <code>set_interval</code> to let Textual know that every <code>1 / 60</code> seconds we would like to call the method <code>update_time</code>. (In other words, we would like <code>update_time</code> to be called 60 times per second.)</li> <li>In turn, the method <code>update_time</code> (which is called automatically a bunch of times per second) will update the reactive attribute <code>time</code>. When this attribute update happens, the method <code>watch_time</code> kicks in.</li> <li>The method <code>watch_time</code> is a watcher method and gets called whenever the attribute <code>self.time</code> is assigned to.  So, if the method <code>update_time</code> is called a bunch of times per second, the watcher method <code>watch_time</code> is also called a bunch of times per second. In it, we create a nice representation of the time that has elapsed and we use the method <code>update</code> to update the time that is being displayed.</li> </ol> <p>I thought it would be reasonable if a similar mechanism needed to be in place for my progress bar, but then I realised that the progress bar seems to update itself... Looking at the indeterminate progress bar example from before, the only thing going on was that we used <code>time.sleep</code> to stop our program for a bit. We didn't do anything to update the progress bar... Look:</p> <pre><code>with Progress() as progress:\n    _ = progress.add_task(\"Loading...\", total=None)  # (1)!\n    while True:\n        time.sleep(0.01)\n</code></pre> <p>After pondering about this for a bit, I realised I would not need a watcher method for anything. The watcher method would only make sense if I needed to update an attribute related to some sort of artificial progress, but that clearly isn't needed to get the bar going...</p> <p>At some point, I realised that the object <code>progress</code> is the object of interest. At first, I thought <code>progress.add_task</code> would return the progress bar, but it actually returns the integer ID of the task added, so the object of interest is <code>progress</code>. Because I am doing nothing to update the bar explicitly, the object <code>progress</code> must be updating itself.</p> <p>The Textual documentation also says that we can build widgets from Rich renderables, so I concluded that if <code>Progress</code> were a renderable, then I could inherit from <code>Static</code> and use the method <code>update</code> to update the widget with my instance of <code>Progress</code> directly. I gave it a try and I put together this code:</p> <pre><code>from rich.progress import Progress, BarColumn\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass IndeterminateProgress(Static):\n    def __init__(self):\n        super().__init__(\"\")\n        self._bar = Progress(BarColumn())  # (1)!\n        self._bar.add_task(\"\", total=None)  # (2)!\n\n    def on_mount(self) -&gt; None:\n        # When the widget is mounted start updating the display regularly.\n        self.update_render = self.set_interval(\n            1 / 60, self.update_progress_bar\n        )  # (3)!\n\n    def update_progress_bar(self) -&gt; None:\n        self.update(self._bar)  # (4)!\n\n\nclass MyApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield IndeterminateProgress()\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <ol> <li>Create an instance of <code>Progress</code> that just cares about the bar itself (Rich progress bars can have a label, an indicator for the time left, etc).</li> <li>We add the indeterminate task with <code>total=None</code> for the indeterminate progress bar.</li> <li>When the widget is mounted on the app, we want to start calling <code>update_progress_bar</code> 60 times per second.</li> <li>To update the widget of the progress bar we just call the method <code>Static.update</code> with the <code>Progress</code> object because <code>self._bar</code> is a Rich renderable.</li> </ol> <p>And lo and behold, it worked:</p> <p></p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#proving-it-works","title":"Proving it works","text":"<p>I finished writing this piece of code and I was ecstatic because it was working! After all, my Textual app starts and renders the progress bar. And so, I shared this simple app with someone who wanted to do a similar thing, but I was left with a bad taste in my mouth because I couldn't really connect all the dots and explain exactly why it worked.</p> <p>Plot twist</p> <p>By the end of the blog post, I will be much closer to a full explanation!</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#display-a-rich-spinner-in-a-textual-app","title":"Display a Rich spinner in a Textual app","text":"<p>A day after creating my basic <code>IndeterminateProgress</code> widget, I found someone that was trying to display a Rich spinner in a Textual app. Actually, it was someone that had filed an issue against Rich. They didn't ask \u201chow can I display a Rich spinner in a Textual app?\u201d, but they filed an alleged bug that crept up on them when they tried displaying a spinner in a Textual app.</p> <p>When reading the issue I realised that displaying a Rich spinner looked very similar to displaying a Rich progress bar, so I made a tiny change to my code and tried to run it:</p> CodeSpinner running <pre><code>from rich.spinner import Spinner\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass SpinnerWidget(Static):\n    def __init__(self):\n        super().__init__(\"\")\n        self._spinner = Spinner(\"moon\")  # (1)!\n\n    def on_mount(self) -&gt; None:\n        self.update_render = self.set_interval(1 / 60, self.update_spinner)\n\n    def update_spinner(self) -&gt; None:\n        self.update(self._spinner)\n\n\nclass MyApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        yield SpinnerWidget()\n\n\nMyApp().run()\n</code></pre> <ol> <li>Instead of creating an instance of <code>Progress</code>, we create an instance of <code>Spinner</code> and save it so we can call <code>self.update(self._spinner)</code> later on.</li> </ol> <p></p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#losing-the-battle-against-pausing-the-animations","title":"Losing the battle against pausing the animations","text":"<p>After creating the progress bar and spinner widgets I thought of creating the little display that was shown at the beginning of the blog post:</p> <p></p> <p>When writing the code for this app, I realised both widgets had a lot of shared code and logic and I tried abstracting away their common functionality. That led to the code shown below (more or less) where I implemented the updating functionality in <code>IntervalUpdater</code> and then let the <code>IndeterminateProgressBar</code> and <code>SpinnerWidget</code> instantiate the correct Rich renderable.</p> <pre><code>from rich.progress import Progress, BarColumn\nfrom rich.spinner import Spinner\n\nfrom textual.app import RenderableType\nfrom textual.widgets import Button, Static\n\n\nclass IntervalUpdater(Static):\n    _renderable_object: RenderableType  # (1)!\n\n    def update_rendering(self) -&gt; None:  # (2)!\n        self.update(self._renderable_object)\n\n    def on_mount(self) -&gt; None:  # (3)!\n        self.interval_update = self.set_interval(1 / 60, self.update_rendering)\n\n\nclass IndeterminateProgressBar(IntervalUpdater):\n    \"\"\"Basic indeterminate progress bar widget based on rich.progress.Progress.\"\"\"\n    def __init__(self) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Progress(BarColumn())  # (4)!\n        self._renderable_object.add_task(\"\", total=None)\n\n\nclass SpinnerWidget(IntervalUpdater):\n    \"\"\"Basic spinner widget based on rich.spinner.Spinner.\"\"\"\n    def __init__(self, style: str) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Spinner(style)  # (5)!\n</code></pre> <ol> <li>Instances of <code>IntervalUpdate</code> should set the attribute <code>_renderable_object</code> to the instance of the Rich renderable that we want to animate.</li> <li>The methods <code>update_rendering</code> and <code>on_mount</code> are exactly the same as what we had before, both in the progress bar widget and in the spinner widget.</li> <li>The methods <code>update_rendering</code> and <code>on_mount</code> are exactly the same as what we had before, both in the progress bar widget and in the spinner widget.</li> <li>For an indeterminate progress bar we set the attribute <code>_renderable_object</code> to an instance of <code>Progress</code>.</li> <li>For a spinner we set the attribute <code>_renderable_object</code> to an instance of <code>Spinner</code>.</li> </ol> <p>But I wanted something more! I wanted to make my app similar to the stopwatch app from the terminal and thus wanted to add a \u201cPause\u201d and a \u201cResume\u201d button. These buttons should, respectively, stop the progress bar and the spinner animations and resume them.</p> <p>Below you can see the code I wrote and a short animation of the app working.</p> App codeCSSOutput <pre><code>from rich.progress import Progress, BarColumn\nfrom rich.spinner import Spinner\n\nfrom textual.app import App, ComposeResult, RenderableType\nfrom textual.containers import Grid, Horizontal, Vertical\nfrom textual.widgets import Button, Static\n\n\nclass IntervalUpdater(Static):\n    _renderable_object: RenderableType\n\n    def update_rendering(self) -&gt; None:\n        self.update(self._renderable_object)\n\n    def on_mount(self) -&gt; None:\n        self.interval_update = self.set_interval(1 / 60, self.update_rendering)\n\n    def pause(self) -&gt; None:  # (1)!\n        self.interval_update.pause()\n\n    def resume(self) -&gt; None:  # (2)!\n        self.interval_update.resume()\n\n\nclass IndeterminateProgressBar(IntervalUpdater):\n    \"\"\"Basic indeterminate progress bar widget based on rich.progress.Progress.\"\"\"\n    def __init__(self) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Progress(BarColumn())\n        self._renderable_object.add_task(\"\", total=None)\n\n\nclass SpinnerWidget(IntervalUpdater):\n    \"\"\"Basic spinner widget based on rich.spinner.Spinner.\"\"\"\n    def __init__(self, style: str) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Spinner(style)\n\n\nclass LiveDisplayApp(App[None]):\n    \"\"\"App showcasing some widgets that update regularly.\"\"\"\n    CSS_PATH = \"myapp.css\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Vertical(\n                Grid(\n                    SpinnerWidget(\"moon\"),\n                    IndeterminateProgressBar(),\n                    SpinnerWidget(\"aesthetic\"),\n                    SpinnerWidget(\"bouncingBar\"),\n                    SpinnerWidget(\"earth\"),\n                    SpinnerWidget(\"dots8Bit\"),\n                ),\n                Horizontal(\n                    Button(\"Pause\", id=\"pause\"),  # (3)!\n                    Button(\"Resume\", id=\"resume\", disabled=True),\n                ),\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:  # (4)!\n        pressed_id = event.button.id\n        assert pressed_id is not None\n        for widget in self.query(IntervalUpdater):\n            getattr(widget, pressed_id)()  # (5)!\n\n        for button in self.query(Button):  # (6)!\n            if button.id == pressed_id:\n                button.disabled = True\n            else:\n                button.disabled = False\n\n\nLiveDisplayApp().run()\n</code></pre> <ol> <li>The method <code>pause</code> looks at the attribute <code>interval_update</code> (returned by the method <code>set_interval</code>) and tells it to stop calling the method <code>update_rendering</code> 60 times per second.</li> <li>The method <code>resume</code> looks at the attribute <code>interval_update</code> (returned by the method <code>set_interval</code>) and tells it to resume calling the method <code>update_rendering</code> 60 times per second.</li> <li>We set two distinct IDs for the two buttons so we can easily tell which button was pressed and what the press of that button means.</li> <li>The event handler <code>on_button_pressed</code> will wait for button presses and will take care of pausing or resuming the animations.</li> <li>We look for all of the instances of <code>IntervalUpdater</code> in our app and use a little bit of introspection to call the correct method (<code>pause</code> or <code>resume</code>) in our widgets. Notice this was only possible because the buttons were assigned IDs that matched the names of the methods. (I love Python !)</li> <li>We go through our two buttons to disable the one that was just pressed and to enable the other one.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    height: 1fr;\n    align-horizontal: center;\n}\n\nButton {\n    margin: 0 3 0 3;\n}\n\nGrid {\n    height: 4fr;\n    align: center middle;\n    grid-size: 3 2;\n    grid-columns: 8;\n    grid-rows: 1;\n    grid-gutter: 1;\n    border: gray double;\n}\n\nIntervalUpdater {\n    content-align: center middle;\n}\n</code></pre> <p></p> <p>If you think this was a lot, take a couple of deep breaths before moving on.</p> <p>The only issue with my app is that... it does not work! If you press the button to pause the animations, it looks like the widgets are paused. However, you can see that if I move my mouse over the paused widgets, they update:</p> <p></p> <p>Obviously, that caught me by surprise, in the sense that I expected it work. On the other hand, this isn't surprising. After all, I thought I had guessed how I could solve the problem of displaying these Rich renderables that update live and I thought I knew how to pause and resume their animations, but I hadn't convinced myself I knew exactly why it worked.</p> <p>Warning</p> <p>This goes to show that sometimes it is not the best idea to commit code that you wrote and that works if you don't know why it works. The code might seem to work and yet have deficiencies that will hurt you further down the road.</p> <p>As it turns out, the reason why pausing is not working is that I did not grok why the rendering worked in the first place... So I had to go down that rabbit hole first.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#understanding-the-rich-rendering-magic","title":"Understanding the Rich rendering magic","text":""},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#how-staticupdate-works","title":"How <code>Static.update</code> works","text":"<p>The most basic way of creating a Textual widget is to inherit from <code>Widget</code> and implement the method <code>render</code> that just returns the thing that must be printed on the screen. Then, the widget <code>Static</code> provides some functionality on top of that: the method <code>update</code>.</p> <p>The method <code>Static.update(renderable)</code> is used to tell the widget in question that its method <code>render</code> (called when the widget needs to be drawn) should just return <code>renderable</code>. So, if the implementation of the method <code>IntervalUpdater.update_rendering</code> (the method that gets called 60 times per second) is this:</p> <pre><code>class IntervalUpdater(Static):\n    # ...\n    def update_rendering(self) -&gt; None:\n        self.update(self._renderable_object)\n</code></pre> <p>Then, we are essentially saying \u201chey, the thing in <code>self._renderable_object</code> is what must be returned whenever Textual asks you to render yourself. So, this really proves that both <code>Progress</code> and <code>Spinner</code> from Rich are renderables. But what is more, this shows that my implementation of <code>IntervalUpdater</code> can be simplified greatly! In fact, we can boil it down to just this:</p> <pre><code>class IntervalUpdater(Static):\n    _renderable_object: RenderableType\n\n    def __init__(self, renderable_object: RenderableType) -&gt; None:  # (1)!\n        super().__init__(renderable_object)  # (2)!\n\n    def on_mount(self) -&gt; None:\n        self.interval_update = self.set_interval(1 / 60, self.refresh)  # (3)!\n</code></pre> <ol> <li>To create an instance of <code>IntervalUpdater</code>, now we give it the Rich renderable that we want displayed. If this Rich renderable is something that updates over time, then those changes will be reflected in the rendering.</li> <li>We initialise <code>Static</code> with the renderable object itself, instead of initialising with the empty string <code>\"\"</code> and then updating repeatedly.</li> <li>We call <code>self.refresh</code> 60 times per second. We don't need the auxiliary method <code>update_rendering</code> because this widget (an instance of <code>Static</code>) already knows what its renderable is.</li> </ol> <p>Once you understand the code above you will realise that the previous implementation of <code>update_rendering</code> was actually doing superfluous work because the repeated calls to <code>self.update</code> always had the exact same object. Again, we see strong evidence that the Rich progress bars and the spinners have the inherent ability to display a different representation of themselves as time goes by.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#how-rich-spinners-get-updated","title":"How Rich spinners get updated","text":"<p>I kept seeing strong evidence that Rich spinners and Rich progress bars updated their own rendering but I still did not have actual proof. So, I went digging around to see how <code>Spinner</code> was implemented and I found this code (from the file <code>spinner.py</code> at the time of writing):</p> <pre><code>class Spinner:\n    # ...\n\n    def __rich_console__(\n        self, console: \"Console\", options: \"ConsoleOptions\"\n    ) -&gt; \"RenderResult\":\n        yield self.render(console.get_time())  # (1)!\n\n    # ...\n    def render(self, time: float) -&gt; \"RenderableType\":  # (2)!\n        # ...\n\n        frame_no = ((time - self.start_time) * self.speed) / (  # (3)!\n            self.interval / 1000.0\n        ) + self.frame_no_offset\n        # ...\n\n    # ...\n</code></pre> <ol> <li>The Rich spinner implements the function <code>__rich_console__</code> that is supposed to return the result of rendering the spinner. Instead, it defers its work to the method <code>render</code>... However, to call the method <code>render</code>, we need to pass the argument <code>console.get_time()</code>, which the spinner uses to know in which state it is!</li> <li>The method <code>render</code> takes a <code>time</code> and returns a renderable!</li> <li>To determine the frame number (the current look of the spinner) we do some calculations with the \u201ccurrent time\u201d, given by the parameter <code>time</code>, and the time when the spinner started!</li> </ol> <p>The snippet of code shown above, from the implementation of <code>Spinner</code>, explains why moving the mouse over a spinner (or a progress bar) that supposedly was paused makes it move. We no longer get repeated updates (60 times per second) because we told our app that we wanted to pause the result of <code>set_interval</code>, so we no longer get automatic updates. However, moving the mouse over the spinners and the progress bar makes Textual want to re-render them and, when it does, it figures out that time was not frozen (obviously!) and so the spinners and the progress bar have a different frame to show.</p> <p>To get a better feeling for this, do the following experiment:</p> <ol> <li>Run the command <code>textual console</code> in a terminal to open the Textual devtools console.</li> <li>Add a print statement like <code>print(\"Rendering from within spinner\")</code> to the beginning of the method <code>Spinner.render</code> (from Rich).</li> <li>Add a print statement like <code>print(\"Rendering static\")</code> to the beginning of the method <code>Static.render</code> (from Textual).</li> <li>Put a blank terminal and the devtools console side by side.</li> <li>Run the app: notice that you get a lot of both print statements.</li> <li>Hit the Pause button: the print statements stop.</li> <li>Move your mouse over a widget or two: you get a couple of print statements, one from the <code>Static.render</code> and another from the <code>Spinner.render</code>.</li> </ol> <p>The result of steps 6 and 7 are shown below. Notice that, in the beginning of the animation, the screen on the right shows some prints but is quiet because no more prints are coming in. When the mouse enters the screen and starts going over widgets, the screen on the right gets new prints in pairs, first from <code>Static.render</code> (which Textual calls to render the widget) and then from <code>Spinner.render</code> because ultimately we need to know how the Spinner looks.</p> <p></p> <p>Now, at this point, I made another educated guess and deduced that progress bars work in the same way! I still have to prove it, and I guess I will do so in another blog post, coming soon, where our spinner and progress bar widgets can be properly paused!</p> <p>I will see you soon </p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/","title":"Stealing Open Source code from Textual","text":"<p>I would like to talk about a serious issue in the Free and Open Source software world. Stealing code. You wouldn't steal a car would you?</p> <p>But you should steal code from Open Source projects. Respect the license (you may need to give attribution) but stealing code is not like stealing a car. If I steal your car, I have deprived you of a car. If you steal my open source code, I haven't lost anything.</p> <p>Warning</p> <p>I'm not advocating for piracy. Open source code gives you explicit permission to use it.</p> <p>From my point of view, I feel like code has greater value when it has been copied / modified in another project.</p> <p>There are a number of files and modules in Textual that could either be lifted as is, or wouldn't require much work to extract. I'd like to cover a few here. You might find them useful in your next project.</p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#loop-first-last","title":"Loop first / last","text":"<p>How often do you find yourself looping over an iterable and needing to know if an element is the first and/or last in the sequence? It's a simple thing, but I find myself needing this a lot, so I wrote some helpers in _loop.py.</p> <p>I'm sure there is an equivalent implementation on PyPI, but steal this if you need it.</p> <p>Here's an example of use:</p> <pre><code>for last, (y, line) in loop_last(enumerate(self.lines, self.region.y)):\n    yield move_to(x, y)\n    yield from line\n    if not last:\n        yield new_line\n</code></pre>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#lru-cache","title":"LRU Cache","text":"<p>Python's lru_cache can be the one-liner that makes your code orders of magnitude faster. But it has a few gotchas.</p> <p>The main issue is managing the lifetime of these caches. The decorator keeps a single global cache, which will keep a reference to every object in the function call. On an instance method that means you keep references to <code>self</code> for the lifetime of your app.</p> <p>For a more flexibility you can use the LRUCache implementation from Textual. This uses essentially the same algorithm as the stdlib decorator, but it is implemented as a container.</p> <p>Here's a quick example of its use. It works like a dictionary until you reach a maximum size. After that, new elements will kick out the element that was used least recently.</p> <pre><code>&gt;&gt;&gt; from textual._cache import LRUCache\n&gt;&gt;&gt; cache = LRUCache(maxsize=3)\n&gt;&gt;&gt; cache[\"foo\"] = 1\n&gt;&gt;&gt; cache[\"bar\"] = 2\n&gt;&gt;&gt; cache[\"baz\"] = 3\n&gt;&gt;&gt; dict(cache)\n{'foo': 1, 'bar': 2, 'baz': 3}\n&gt;&gt;&gt; cache[\"egg\"] = 4\n&gt;&gt;&gt; dict(cache)\n{'bar': 2, 'baz': 3, 'egg': 4}\n</code></pre> <p>In Textual, we use a LRUCache to store the results of rendering content to the terminal. For example, in a datatable it is too costly to render everything up front. So Textual renders only the lines that are currently visible on the \"screen\". The cache ensures that scrolling only needs to render the newly exposed lines, and lines that haven't been displayed in a while are discarded to save memory.</p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#color","title":"Color","text":"<p>Textual has a Color class which could be extracted in to a module of its own.</p> <p>The Color class can parse colors encoded in a variety of HTML and CSS formats. Color object support a variety of methods and operators you can use to manipulate colors, in a fairly natural way.</p> <p>Here's some examples in the REPL.</p> <pre><code>&gt;&gt;&gt; from textual.color import Color\n&gt;&gt;&gt; color = Color.parse(\"lime\")\n&gt;&gt;&gt; color\nColor(0, 255, 0, a=1.0)\n&gt;&gt;&gt; color.darken(0.8)\nColor(0, 45, 0, a=1.0)\n&gt;&gt;&gt; color + Color.parse(\"red\").with_alpha(0.1)\nColor(25, 229, 0, a=1.0)\n&gt;&gt;&gt; color = Color.parse(\"#12a30a\")\n&gt;&gt;&gt; color\nColor(18, 163, 10, a=1.0)\n&gt;&gt;&gt; color.css\n'rgb(18,163,10)'\n&gt;&gt;&gt; color.hex\n'#12A30A'\n&gt;&gt;&gt; color.monochrome\nColor(121, 121, 121, a=1.0)\n&gt;&gt;&gt; color.monochrome.hex\n'#797979'\n&gt;&gt;&gt; color.hsl\nHSL(h=0.3246187363834423, s=0.8843930635838151, l=0.33921568627450976)\n&gt;&gt;&gt;\n</code></pre> <p>There are some very good color libraries in PyPI, which you should also consider using. But Textual's Color class is lean and performant, with no C dependencies.</p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#geometry","title":"Geometry","text":"<p>This may be my favorite module in Textual: geometry.py.</p> <p>The geometry module contains a number of classes responsible for storing and manipulating 2D geometry. There is an <code>Offset</code> class which is a two dimensional point. A <code>Region</code> class which is a rectangular region defined by a coordinate and dimensions. There is a <code>Spacing</code> class which defines additional space around a region. And there is a <code>Size</code> class which defines the dimensions of an area by its width and height.</p> <p>These objects are used by Textual's layout engine and compositor, which makes them the oldest and most thoroughly tested part of the project.</p> <p>There's a lot going on in this module, but the docstrings are quite detailed and have unicode art like this to help explain things.</p> <pre><code>              cut_x \u2193\n          \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n          \u2502        \u2502 \u2502   \u2502\n          \u2502    0   \u2502 \u2502 1 \u2502\n          \u2502        \u2502 \u2502   \u2502\n  cut_y \u2192 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n          \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n          \u2502    2   \u2502 \u2502 3 \u2502\n          \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n</code></pre>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#you-should-steal-our-code","title":"You should steal our code","text":"<p>There is a lot going on in the Textual Repository. Including a CSS parser, renderer, layout and compositing engine. All written in pure Python. Steal it with my blessing.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/","title":"Things I learned building a text editor for the terminal","text":"<p><code>TextArea</code> is the latest widget to be added to Textual's growing collection. It provides a multi-line space to edit text, and features optional syntax highlighting for a selection of languages.</p> <p></p> <p>Adding a <code>TextArea</code> to your Textual app is as simple as adding this to your <code>compose</code> method:</p> <pre><code>yield TextArea()\n</code></pre> <p>Enabling syntax highlighting for a language is as simple as:</p> <pre><code>yield TextArea(language=\"python\")\n</code></pre> <p>Working on the <code>TextArea</code> widget for Textual taught me a lot about Python and my general approach to software engineering. It gave me an appreciation for the subtle functionality behind the editors we use on a daily basis \u2014 features we may not even notice, despite some engineer spending hours perfecting it to provide a small boost to our development experience.</p> <p>This post is a tour of some of these learnings.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#vertical-cursor-movement-is-more-than-just-cursor_row","title":"Vertical cursor movement is more than just <code>cursor_row++</code>","text":"<p>When you move the cursor vertically, you can't simply keep the same column index and clamp it within the line. Editors should maintain the visual column offset where possible, meaning they must account for double-width emoji (sigh \ud83d\ude14) and East-Asian characters.</p> <p></p> <p>Notice that although the cursor is on column 11 while on line 1, it lands on column 6 when it arrives at line 3. This is because the 6th character of line 3 visually aligns with the 11th character of line 1.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#edits-from-other-sources-may-move-my-cursor","title":"Edits from other sources may move my cursor","text":"<p>There are two ways to interact with the <code>TextArea</code>:</p> <ol> <li>You can type into it.</li> <li>You can make API calls to edit the content in it.</li> </ol> <p>In the example below, <code>Hello, world!\\n</code> is repeatedly inserted at the start of the document via the API. Notice that this updates the location of my cursor, ensuring that I don't lose my place.</p> <p></p> <p>This subtle feature should aid those implementing collaborative and multi-cursor editing.</p> <p>This turned out to be one of the more complex features of the whole project, and went through several iterations before I was happy with the result.</p> <p>Thankfully it resulted in some wonderful Tetris-esque whiteboards along the way!</p> <p> </p> A TetrisArea white-boarding session. <p>Sometimes stepping away from the screen and scribbling on a whiteboard with your colleagues (thanks Dave!) is what's needed to finally crack a tough problem.</p> <p>Many thanks to David Brochart for sending me down this rabbit hole!</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#spending-a-few-minutes-running-a-profiler-can-be-really-beneficial","title":"Spending a few minutes running a profiler can be really beneficial","text":"<p>While building the <code>TextArea</code> widget I avoided heavy optimisation work that may have affected readability or maintainability.</p> <p>However, I did run a profiler in an attempt to detect flawed assumptions or mistakes which were affecting the performance of my code.</p> <p>I spent around 30 minutes profiling <code>TextArea</code> using pyinstrument, and the result was a ~97% reduction in the time taken to handle a key press. What an amazing return on investment for such a minimal time commitment!</p> <p> </p> \"pyinstrument -r html\" produces this beautiful output. <p>pyinstrument unveiled two issues that were massively impacting performance.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#1-reparsing-highlighting-queries-on-each-key-press","title":"1. Reparsing highlighting queries on each key press","text":"<p>I was constructing a tree-sitter <code>Query</code> object on each key press, incorrectly assuming it was a low-overhead call. This query was completely static, so I moved it into the constructor ensuring the object was created only once. This reduced key processing time by around 94% - a substantial and very much noticeable improvement.</p> <p>This seems obvious in hindsight, but the code in question was written earlier in the project and had been relegated in my mind to \"code that works correctly and will receive less attention from here on out\". pyinstrument quickly brought this code back to my attention and highlighted it as a glaring performance bug.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#2-namedtuples-are-slower-than-i-expected","title":"2. NamedTuples are slower than I expected","text":"<p>In Python, <code>NamedTuple</code>s are slow to create relative to <code>tuple</code>s, and this cost was adding up inside an extremely hot loop which was instantiating a large number of them. pyinstrument revealed that a large portion of the time during syntax highlighting was spent inside <code>NamedTuple.__new__</code>.</p> <p>Here's a quick benchmark which constructs 10,000 <code>NamedTuple</code>s:</p> <pre><code>\u276f hyperfine -w 2 'python sandbox/darren/make_namedtuples.py'\nBenchmark 1: python sandbox/darren/make_namedtuples.py\n  Time (mean \u00b1 \u03c3):      15.9 ms \u00b1   0.5 ms    [User: 12.8 ms, System: 2.5 ms]\n  Range (min \u2026 max):    15.2 ms \u2026  18.4 ms    165 runs\n</code></pre> <p>Here's the same benchmark using <code>tuple</code> instead:</p> <pre><code>\u276f hyperfine -w 2 'python sandbox/darren/make_tuples.py'\nBenchmark 1: python sandbox/darren/make_tuples.py\n  Time (mean \u00b1 \u03c3):       9.3 ms \u00b1   0.5 ms    [User: 6.8 ms, System: 2.0 ms]\n  Range (min \u2026 max):     8.7 ms \u2026  12.3 ms    256 runs\n</code></pre> <p>Switching to <code>tuple</code> resulted in another noticeable increase in responsiveness. Key-press handling time dropped by almost 50%! Unfortunately, this change does impact readability. However, the scope in which these tuples were used was very small, and so I felt it was a worthy trade-off.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#syntax-highlighting-is-very-different-from-what-i-expected","title":"Syntax highlighting is very different from what I expected","text":"<p>In order to support syntax highlighting, we make use of the tree-sitter library, which maintains a syntax tree representing the structure of our document.</p> <p>To perform highlighting, we follow these steps:</p> <ol> <li>The user edits the document.</li> <li>We inform tree-sitter of the location of this edit.</li> <li>tree-sitter intelligently parses only the subset of the document impacted by the change, updating the tree.</li> <li>We run a query against the tree to retrieve ranges of text we wish to highlight.</li> <li>These ranges are mapped to styles (defined by the chosen \"theme\").</li> <li>These styles to the appropriate text ranges when rendering the widget.</li> </ol> <p> </p> Cycling through a few of the builtin themes. <p>Another benefit that I didn't consider before working on this project is that tree-sitter parsers can also be used to highlight syntax errors in a document. This can be useful in some situations - for example, highlighting mismatched HTML closing tags:</p> <p> </p> Highlighting mismatched closing HTML tags in red. <p>Before building this widget, I was oblivious as to how we might approach syntax highlighting. Without tree-sitter's incremental parsing approach, I'm not sure reasonable performance would have been feasible.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#edits-are-replacements","title":"Edits are replacements","text":"<p>All single-cursor edits can be distilled into a single behaviour: <code>replace_range</code>. This replaces a range of characters with some text. We can use this one method to easily implement deletion, insertion, and replacement of text.</p> <ul> <li>Inserting text is replacing a zero-width range with the text to insert.</li> <li>Pressing backspace (delete left) is just replacing the character behind the cursor with an empty   string.</li> <li>Selecting text and pressing delete is just replacing the selected text with an empty string.</li> <li>Selecting text and pasting is replacing the selected text with some other text.</li> </ul> <p>This greatly simplified my initial approach, which involved unique implementations for inserting and deleting.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#the-line-between-text-area-and-vscode-in-the-terminal","title":"The line between \"text area\" and \"VSCode in the terminal\"","text":"<p>A project like this has no clear finish line. There are always new features, optimisations, and refactors waiting to be made.</p> <p>So where do we draw the line?</p> <p>We want to provide a widget which can act as both a basic multiline text area that anyone can drop into their app, yet powerful and extensible enough to act as the foundation for a Textual-powered text editor.</p> <p>Yet, the more features we add, the more opinionated the widget becomes, and the less that users will feel like they can build it into their own thing. Finding the sweet spot between feature-rich and flexible is no easy task.</p> <p>I don't think the answer is clear, and I don't believe it's possible to please everyone.</p> <p>Regardless, I'm happy with where we've landed, and I'm really excited to see what people build using <code>TextArea</code> in the future!</p>"},{"location":"blog/2023/10/04/announcing-textual-plotext/","title":"Announcing textual-plotext","text":"<p>It's no surprise that a common question on the Textual Discord server is how to go about producing plots in the terminal. A popular solution that has been suggested is Plotext. While Plotext doesn't directly support Textual, it is easy to use with Rich and, because of this, we wanted to make it just as easy to use in your Textual applications.</p> <p>With this in mind we've created <code>textual-plotext</code>: a library that provides a widget for using Plotext plots in your app. In doing this we've tried our best to make it as similar as possible to using Plotext in a conventional Python script.</p> <p>Take this code from the Plotext README:</p> <pre><code>import plotext as plt\ny = plt.sin() # sinusoidal test signal\nplt.scatter(y)\nplt.title(\"Scatter Plot\") # to apply a title\nplt.show() # to finally plot\n</code></pre> <p>The Textual equivalent of this (including everything needed to make this a fully-working Textual application) is:</p> <pre><code>from textual.app import App, ComposeResult\n\nfrom textual_plotext import PlotextPlot\n\nclass ScatterApp(App[None]):\n\n    def compose(self) -&gt; ComposeResult:\n        yield PlotextPlot()\n\n    def on_mount(self) -&gt; None:\n        plt = self.query_one(PlotextPlot).plt\n        y = plt.sin() # sinusoidal test signal\n        plt.scatter(y)\n        plt.title(\"Scatter Plot\") # to apply a title\n\nif __name__ == \"__main__\":\n    ScatterApp().run()\n</code></pre> <p>When run the result will look like this:</p> <p></p> <p>Aside from a couple of the more far-out plot types<sup>1</sup> you should find that everything you can do with Plotext in a conventional script can also be done in a Textual application.</p> <p>Here's a small selection of screenshots from a demo built into the library, each of the plots taken from the Plotext README:</p> <p></p> <p></p> <p></p> <p></p> <p>A key design goal of this widget is that you can develop your plots so that the resulting code looks very similar to that in the Plotext documentation. The core difference is that, where you'd normally import the <code>plotext</code> module <code>as plt</code> and then call functions via <code>plt</code>, you instead use the <code>plt</code> property made available by the widget.</p> <p>You don't even need to call the <code>build</code> or <code>show</code> functions as <code>textual-plotext</code> takes care of this for you. You can see this in action in the scatter code shown earlier.</p> <p>Of course, moving any existing plotting code into your Textual app means you will need to think about how you get the data and when and where you build your plot. This might be where the Textual worker API becomes useful.</p> <p>We've included a longer-form example application that shows off the glorious Scottish weather we enjoy here at Textual Towers, with an application that uses workers to pull down weather data from a year ago and plot it.</p> <p></p> <p>If you are an existing Plotext user who wants to turn your plots into full terminal applications, we think this will be very familiar and accessible. If you're a Textual user who wants to add plots to your application, we think Plotext is a great library for this.</p> <p>If you have any questions about this, or anything else to do with Textual, feel free to come and join us on our Discord server or in our GitHub discussions.</p> <ol> <li> <p>Right now there's no animated gif or video support.\u00a0\u21a9</p> </li> </ol>"},{"location":"blog/2023/09/06/what-is-textual-web/","title":"What is Textual Web?","text":"<p>If you know us, you will know that we are the team behind Rich and Textual \u2014 two popular Python libraries that work magic in the terminal.</p> <p>Note</p> <p>Not to mention Rich-CLI, Trogon, and Frogmouth</p> <p>Today we are adding one project more to that lineup: textual-web.</p> <p>Textual Web takes a Textual-powered TUI and turns it in to a web application. Here's a video of that in action:</p> <p>With the <code>textual-web</code> command you can publish any Textual app on the web, making it available to anyone you send the URL to. This works without creating a socket server on your machine, so you won't have to configure firewalls and ports to share your applications.</p> <p>We're excited about the possibilities here. Textual web apps are fast to spin up and tear down, and they can run just about anywhere that has an outgoing internet connection. They can be built by a single developer without any experience with a traditional web stack. All you need is proficiency in Python and a little time to read our lovely docs.</p> <p>Future releases will expose more of the Web platform APIs to Textual apps, such as notifications and file system access. We plan to do this in a way that allows the same (Python) code to drive those features. For instance, a Textual app might save a file to disk in a terminal, but offer to download it in the browser.</p> <p>Also in the pipeline is PWA support, so you can build terminal apps, web apps, and desktop apps with a single codebase.</p> <p>Textual Web is currently in a public beta. Join our Discord server if you would like to help us test, or if you have any questions.</p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/","title":"To TUI or not to TUI","text":"<p>Tech moves pretty fast. If you don\u2019t stop and look around once in a while, you could miss it. And yet some technology feels like it has been around forever.</p> <p>Terminals are one of those forever-technologies.</p> <p>My interest is in Text User Interfaces:  interactive apps that run within a terminal. I spend lot of time thinking about where TUIs might fit within the tech ecosystem, and how much more they could be doing for developers. Hardly surprising, since that is what we do at Textualize.</p> <p>Recently I had the opportunity to test how new TUI projects would be received. You can consider these to be \"testing the water\", and hopefully representative of TUI apps in general.</p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/#the-projects","title":"The projects","text":"<p>In April we took a break from building Textual, to building apps with Textual. We had three ideas to work on, and three devs to do the work. One idea we parked for later. The other two were so promising we devoted more time to them. Both projects took around three developer-weeks to build, which also included work on Textual itself and standard duties for responding to issues / community requests. We released them in May.</p> <p>The first project was Frogmouth, a Markdown browser. I think this TUI does better than the equivalent web experience in many ways. The only notable missing feature is images, and that will happen before too long.</p> <p>Here's a screenshot:</p> Frogmouth /Users/willmcgugan/projects/textual/FAQ.md ContentsLocalBookmarksHistory\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u258e\u258a \u258eHow\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u258a \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e\u258a \u2503\u25bc\u00a0\u2160\u00a0Frequently\u00a0Asked\u00a0Questions\u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Does\u00a0Textual\u00a0support\u00a0images?\u2503When\u00a0creating\u00a0your\u00a0App\u00a0class,\u00a0override\u00a0__init__\u00a0as\u00a0you\u00a0would\u00a0wheninheriting\u00a0normally.\u00a0For\u00a0example: \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0fix\u00a0ImportError\u00a0cannot\u00a0i\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0select\u00a0and\u00a0copy\u00a0text\u00a0in\u00a0\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0set\u00a0a\u00a0translucent\u00a0app\u00a0ba\u2503fromtextual.appimportApp,ComposeResult \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0center\u00a0a\u00a0widget\u00a0in\u00a0a\u00a0scre\u2503fromtextual.widgetsimportStatic \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0do\u00a0some\u00a0key\u00a0combinations\u00a0never\u2503classGreetings(App[None]): \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0look\u00a0good\u00a0on\u00a0m\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2514\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0support\u00a0ANSI\u00a0t\u2503\u2502\u00a0\u00a0\u00a0def__init__(self,greeting:str=\"Hello\",to_greet:str=\"World\")-&gt;None: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.greeting=greeting \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.to_greet=to_greet \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0super().__init__() \u2503\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2503\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;ComposeResult: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yieldStatic(f\"{self.greeting},\u00a0{self.to_greet}\") \u2503\u2503 \u2503\u2503 \u2503\u2503Then\u00a0the\u00a0app\u00a0can\u00a0be\u00a0run,\u00a0passing\u00a0in\u00a0various\u00a0arguments;\u00a0for\u00a0example: \u2503\u2503\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0default\u00a0arguments. \u2503\u2503Greetings().run() \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0a\u00a0keyword\u00a0arguyment. \u2503\u2503Greetings(to_greet=\"davep\").run()\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0both\u00a0positional\u00a0arguments. \u2503\u2503Greetings(\"Well\u00a0hello\",\"there\").run() \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2503\u2589\u2503\u258e\u258a \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u00a0F1\u00a0\u00a0Help\u00a0\u00a0F2\u00a0\u00a0About\u00a0\u00a0CTRL+N\u00a0\u00a0Navigation\u00a0\u00a0CTRL+Q\u00a0\u00a0Quit\u00a0 <p>Info</p> <p>Quick aside about these \"screenshots\", because its a common ask. They aren't true screenshots, but rather SVGs exported by Textual.</p> <p>We posted Frogmouth on Hacker News and Reddit on a Sunday morning (US time). A day later, it had 1,000 stars and lots of positive feedback.</p> <p>The second project was Trogon, a library this time. Trogon automatically creates a TUI for command line apps. Same deal: we released it on a Sunday morning, and it reached 1K stars even quicker than Frogmouth.</p> Trogon sqlite-utilstransform v3.31Transform\u00a0a\u00a0table\u00a0beyond\u00a0the\u00a0capabilities\u00a0of\u00a0ALTER\u00a0TABLE \u258a\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258e disable-wal\u258a\u258a\u258e\u258e drop-table\u258a\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258e drop-view\u258a\u258e\u2587\u2587 dump\u258aOptions\u258e duplicate\u258a\u258e enable-counts\u258a--type\u00a0multiple\u00a0&lt;text\u00a0choice&gt;\u258e enable-fts\u258a\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u258e enable-wal\u258a\u2502\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2502\u258e extract\u258a\u2502\u258a\u258e\u2502\u258e\u2585\u2585 index-foreign-keys\u258a\u2502\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2502\u258e indexes\u258a\u2502\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2502\u258e insert\u258a\u2502\u258aSelect\u25b2\u258e\u2502\u258e insert-files\u258a\u2502\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2502\u258e install\u258a\u2514\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2518\u258e memory\u258a\u258aSelect\u258e\u258e optimize\u258a\u258aINTEGER\u258e\u258e populate-fts\u258a\u258aTEXT\u258e\u258e query\u258a\u258aFLOAT\u258e\u258e rebuild-fts\u258a\u258a\u258aBLOB\u258e\u258e\u258e reset-counts\u258a\u258a\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258e\u258e rows\u258a\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258e schema\u258a+\u00a0value\u258e search\u258aDrop\u00a0this\u00a0column\u258e tables\u258a\u258e transform\u258a--rename\u00a0multiple\u00a0&lt;text\u00a0text&gt;\u258e triggers\u258a\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u258e uninstall\u258a\u2502\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2502\u258e upsert\u258a\u2502\u258a\u258e\u2502\u258e vacuum views$\u00a0sqlite-utils\u00a0transform \u00a0CTRL+R\u00a0\u00a0Close\u00a0&amp;\u00a0Run\u00a0\u00a0CTRL+T\u00a0Focus\u00a0Command\u00a0Tree\u00a0\u00a0CTRL+O\u00a0\u00a0Command\u00a0Info\u00a0\u00a0CTRL+S\u00a0\u00a0Search\u00a0\u00a0F1\u00a0\u00a0About\u00a0 <p>Both of these projects are very young, but off to a great start. I'm looking forward to seeing how far we can taken them.</p> <p></p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/#wrapping-up","title":"Wrapping up","text":"<p>With previous generations of software, TUIs have required a high degree of motivation to build. That has changed with the work that we (and others) have been doing. A TUI can be a powerful and maintainable piece of software which works as a standalone project, or as a value-add to an existing project.</p> <p>As a forever-technology, a TUI is a safe bet.</p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/#discord","title":"Discord","text":"<p>Want to discuss this post with myself or other Textualize devs? Join our Discord server...</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/","title":"File magic with the Python standard library","text":"<p>I recently published Toolong, an app for viewing log files. There were some interesting technical challenges in building Toolong that I'd like to cover in this post.</p> <p>Python is awesome</p> <p>This isn't specifically Textual related. These techniques could be employed in any Python project.</p> <p>These techniques aren't difficult, and shouldn't be beyond anyone with an intermediate understanding of Python. They are the kind of \"if you know it you know it\" knowledge that you may not need often, but can make a massive difference when you do!</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#opening-large-files","title":"Opening large files","text":"<p>If you were to open a very large text file (multiple gigabyte in size) in an editor, you will almost certainly find that it takes a while. You may also find that it doesn't load at all because you don't have enough memory, or it disables features like syntax highlighting.</p> <p>This is because most app will do something analogous to this:</p> <pre><code>with open(\"access.log\", \"rb\") as log_file:\n    log_data = log_file.read()\n</code></pre> <p>All the data is read in to memory, where it can be easily processed. This is fine for most files of a reasonable size, but when you get in to the gigabyte territory the read and any additional processing will start to use a significant amount of time and memory.</p> <p>Yet Toolong can open a file of any size in a second or so, with syntax highlighting. It can do this because it doesn't need to read the entire log file in to memory. Toolong opens a file and reads only the portion of it required to display whatever is on screen at that moment. When you scroll around the log file, Toolong reads the data off disk as required -- fast enough that you may never even notice it.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#scanning-lines","title":"Scanning lines","text":"<p>There is an additional bit of work that Toolong has to do up front in order to show the file. If you open a large file you may see a progress bar and a message about \"scanning\".</p> <p>Toolong needs to know where every line starts and ends in a log file, so it can display a scrollbar bar and allow the user to navigate lines in the file. In other words it needs to know the offset of every new line (<code>\\n</code>) character within the file.</p> <p>This isn't a hard problem in itself. You might have imagined a loop that reads a chunk at a time and searches for new lines characters. And that would likely have worked just fine, but there is a bit of magic in the Python standard library that can speed that up.</p> <p>The mmap module is a real gem for this kind of thing. A memory mapped file is an OS-level construct that appears to load a file instantaneously. In Python you get an object which behaves like a <code>bytearray</code>, but loads data from disk when it is accessed. The beauty of this module is that you can work with files in much the same way as if you had read the entire file in to memory, while leaving the actual reading of the file to the OS.</p> <p>Here's the method that Toolong uses to scan for line breaks. Forgive the micro-optimizations, I was going for raw execution speed here.</p> <pre><code>    def scan_line_breaks(\n        self, batch_time: float = 0.25\n    ) -&gt; Iterable[tuple[int, list[int]]]:\n        \"\"\"Scan the file for line breaks.\n\n        Args:\n            batch_time: Time to group the batches.\n\n        Returns:\n            An iterable of tuples, containing the scan position and a list of offsets of new lines.\n        \"\"\"\n        fileno = self.fileno\n        size = self.size\n        if not size:\n            return\n        log_mmap = mmap.mmap(fileno, size, prot=mmap.PROT_READ)\n        rfind = log_mmap.rfind\n        position = size\n        batch: list[int] = []\n        append = batch.append\n        get_length = batch.__len__\n        monotonic = time.monotonic\n        break_time = monotonic()\n\n        while (position := rfind(b\"\\n\", 0, position)) != -1:\n            append(position)\n            if get_length() % 1000 == 0 and monotonic() - break_time &gt; batch_time:\n                break_time = monotonic()\n                yield (position, batch)\n                batch = []\n                append = batch.append\n        yield (0, batch)\n        log_mmap.close()\n</code></pre> <p>This code runs in a thread (actually a worker), and will generate line breaks in batches. Without batching, it risks slowing down the UI with millions of rapid events.</p> <p>It's fast because most of the work is done in <code>rfind</code>, which runs at C speed, while the OS reads from the disk.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#watching-a-file-for-changes","title":"Watching a file for changes","text":"<p>Toolong can tail files in realtime. When something appends to the file, it will be read and displayed virtually instantly. How is this done?</p> <p>You can easily poll a file for changes, by periodically querying the size or timestamp of a file until it changes. The downside of this is that you don't get notified immediately if a file changes between polls. You could poll at a very fast rate, but if you were to do that you would end up burning a lot of CPU for no good reason.</p> <p>There is a very good solution for this in the standard library. The selectors module is typically used for working with sockets (network data), but can also work with files (at least on macOS and Linux).</p> <p>Software developers are an unimaginative bunch when it comes to naming things</p> <p>Not to be confused with CSS selectors!    </p> <p>The selectors module can tell you precisely when a file can be read. It can do this very efficiently, because it relies on the OS to tell us when a file can be read, and doesn't need to poll.</p> <p>You register a file with a <code>Selector</code> object, then call <code>select()</code> which returns as soon as there is new data available for reading.</p> <p>See watcher.py in Toolong, which runs a thread to monitors files for changes with a selector.</p> <p>Addendum</p> <p>So it turns out that watching regular files for changes with selectors only works with <code>KqueueSelector</code> which is the default on macOS. Disappointingly, the Python docs aren't clear on this. Toolong will use a polling approach where this selector is unavailable.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#textual-learnings","title":"Textual learnings","text":"<p>This project was a chance for me to \"dogfood\" Textual. Other Textual devs have build some cool projects (Trogon and Frogmouth), but before Toolong I had only ever written example apps for docs.</p> <p>I paid particular attention to Textual error messages when working on Toolong, and improved many of them in Textual. Much of what I improved were general programming errors, and not Textual errors per se. For instance, if you forget to call <code>super()</code> on a widget constructor, Textual used to give a fairly cryptic error. It's a fairly common gotcha, even for experience devs, but now Textual will detect that and tell you how to fix it.</p> <p>There's a lot of other improvements which I thought about when working on this app. Mostly quality of life features that will make implementing some features more intuitive. Keep an eye out for those in the next few weeks.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#found-this-interesting","title":"Found this interesting?","text":"<p>If you would like to talk about this post or anything Textual related, join us on the Discord server.</p>"},{"location":"css_types/","title":"CSS Types","text":"<p>CSS types define the values that Textual CSS styles accept.</p> <p>CSS types will be linked from within the styles reference in the \"Formal Syntax\" section of each style. The CSS types will be denoted by a keyword enclosed by angle brackets <code>&lt;</code> and <code>&gt;</code>.</p> <p>For example, the style <code>align-horizontal</code> references the CSS type <code>&lt;horizontal&gt;</code>:</p> <pre>\nalign-horizontal: &lt;horizontal&gt;;\n</pre>"},{"location":"css_types/border/","title":"&lt;border&gt;","text":"<p>The <code>&lt;border&gt;</code> CSS type represents a border style.</p>"},{"location":"css_types/border/#syntax","title":"Syntax","text":"<p>The <code>&lt;border&gt;</code> type can take any of the following values:</p> Border type Description <code>ascii</code> A border with plus, hyphen, and vertical bar characters. <code>blank</code> A blank border (reserves space for a border). <code>dashed</code> Dashed line border. <code>double</code> Double lined border. <code>heavy</code> Heavy border. <code>hidden</code> Alias for \"none\". <code>hkey</code> Horizontal key-line border. <code>inner</code> Thick solid border. <code>none</code> Disabled border. <code>outer</code> Solid border with additional space around content. <code>panel</code> Solid border with thick top. <code>round</code> Rounded corners. <code>solid</code> Solid border. <code>tall</code> Solid border with additional space top and bottom. <code>thick</code> Border style that is consistently thick across edges. <code>vkey</code> Vertical key-line border. <code>wide</code> Solid border with additional space left and right."},{"location":"css_types/border/#border-command","title":"Border command","text":"<p>The <code>textual</code> CLI has a subcommand which will let you explore the various border types interactively, when applied to the CSS rule <code>border</code>:</p> <pre><code>textual borders\n</code></pre>"},{"location":"css_types/border/#examples","title":"Examples","text":""},{"location":"css_types/border/#css","title":"CSS","text":"<pre><code>#container {\n    border: heavy red;\n}\n\n#heading {\n    border-bottom: solid blue;\n}\n</code></pre>"},{"location":"css_types/border/#python","title":"Python","text":"<pre><code>widget.styles.border = (\"heavy\", \"red\")\nwidget.styles.border_bottom = (\"solid\", \"blue\")\n</code></pre>"},{"location":"css_types/color/","title":"&lt;color&gt;","text":"<p>The <code>&lt;color&gt;</code> CSS type represents a color.</p> <p>Warning</p> <p>Not to be confused with the <code>color</code> CSS rule to set text color.</p>"},{"location":"css_types/color/#syntax","title":"Syntax","text":"<p>A <code>&lt;color&gt;</code> should be in one of the formats explained in this section. A bullet point summary of the formats available follows:</p> <ul> <li>a recognised named color (e.g., <code>red</code>);</li> <li>a 3 or 6 hexadecimal digit number representing the RGB values of the color (e.g., <code>#F35573</code>);</li> <li>a 4 or 8 hexadecimal digit number representing the RGBA values of the color (e.g., <code>#F35573A0</code>);</li> <li>a color description in the RGB system, with or without opacity (e.g., <code>rgb(23, 78, 200)</code>);</li> <li>a color description in the HSL system, with or without opacity (e.g., <code>hsl(290, 70%, 80%)</code>);</li> </ul> <p>Textual's default themes also provide many CSS variables with colors that can be used out of the box.</p>"},{"location":"css_types/color/#named-colors","title":"Named colors","text":"<p>A named color is a <code>&lt;name&gt;</code> that Textual recognises. Below, you can find a (collapsed) list of all of the named colors that Textual recognises, along with their hexadecimal values, their RGB values, and a visual sample.</p> All named colors available. colors \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503hex\u00a0\u00a0\u00a0\u00a0\u2503RGB\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503Color\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\"aliceblue\"\u2502#F0F8FF\u2502rgb(240,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"ansi_black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_blue\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_black\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_green\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_bright_magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_bright_white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_cyan\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"ansi_magenta\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_red\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_white\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"ansi_yellow\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"antiquewhite\"\u2502#FAEBD7\u2502rgb(250,\u00a0235,\u00a0215)\u2502\u2502 \u2502\"aqua\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"aquamarine\"\u2502#7FFFD4\u2502rgb(127,\u00a0255,\u00a0212)\u2502\u2502 \u2502\"azure\"\u2502#F0FFFF\u2502rgb(240,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"beige\"\u2502#F5F5DC\u2502rgb(245,\u00a0245,\u00a0220)\u2502\u2502 \u2502\"bisque\"\u2502#FFE4C4\u2502rgb(255,\u00a0228,\u00a0196)\u2502\u2502 \u2502\"black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"blanchedalmond\"\u2502#FFEBCD\u2502rgb(255,\u00a0235,\u00a0205)\u2502\u2502 \u2502\"blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"blueviolet\"\u2502#8A2BE2\u2502rgb(138,\u00a043,\u00a0226)\u2502\u2502 \u2502\"brown\"\u2502#A52A2A\u2502rgb(165,\u00a042,\u00a042)\u2502\u2502 \u2502\"burlywood\"\u2502#DEB887\u2502rgb(222,\u00a0184,\u00a0135)\u2502\u2502 \u2502\"cadetblue\"\u2502#5F9EA0\u2502rgb(95,\u00a0158,\u00a0160)\u2502\u2502 \u2502\"chartreuse\"\u2502#7FFF00\u2502rgb(127,\u00a0255,\u00a00)\u2502\u2502 \u2502\"chocolate\"\u2502#D2691E\u2502rgb(210,\u00a0105,\u00a030)\u2502\u2502 \u2502\"coral\"\u2502#FF7F50\u2502rgb(255,\u00a0127,\u00a080)\u2502\u2502 \u2502\"cornflowerblue\"\u2502#6495ED\u2502rgb(100,\u00a0149,\u00a0237)\u2502\u2502 \u2502\"cornsilk\"\u2502#FFF8DC\u2502rgb(255,\u00a0248,\u00a0220)\u2502\u2502 \u2502\"crimson\"\u2502#DC143C\u2502rgb(220,\u00a020,\u00a060)\u2502\u2502 \u2502\"cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"darkblue\"\u2502#00008B\u2502rgb(0,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkcyan\"\u2502#008B8B\u2502rgb(0,\u00a0139,\u00a0139)\u2502\u2502 \u2502\"darkgoldenrod\"\u2502#B8860B\u2502rgb(184,\u00a0134,\u00a011)\u2502\u2502 \u2502\"darkgray\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkgreen\"\u2502#006400\u2502rgb(0,\u00a0100,\u00a00)\u2502\u2502 \u2502\"darkgrey\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkkhaki\"\u2502#BDB76B\u2502rgb(189,\u00a0183,\u00a0107)\u2502\u2502 \u2502\"darkmagenta\"\u2502#8B008B\u2502rgb(139,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkolivegreen\"\u2502#556B2F\u2502rgb(85,\u00a0107,\u00a047)\u2502\u2502 \u2502\"darkorange\"\u2502#FF8C00\u2502rgb(255,\u00a0140,\u00a00)\u2502\u2502 \u2502\"darkorchid\"\u2502#9932CC\u2502rgb(153,\u00a050,\u00a0204)\u2502\u2502 \u2502\"darkred\"\u2502#8B0000\u2502rgb(139,\u00a00,\u00a00)\u2502\u2502 \u2502\"darksalmon\"\u2502#E9967A\u2502rgb(233,\u00a0150,\u00a0122)\u2502\u2502 \u2502\"darkseagreen\"\u2502#8FBC8F\u2502rgb(143,\u00a0188,\u00a0143)\u2502\u2502 \u2502\"darkslateblue\"\u2502#483D8B\u2502rgb(72,\u00a061,\u00a0139)\u2502\u2502 \u2502\"darkslategray\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkslategrey\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkturquoise\"\u2502#00CED1\u2502rgb(0,\u00a0206,\u00a0209)\u2502\u2502 \u2502\"darkviolet\"\u2502#9400D3\u2502rgb(148,\u00a00,\u00a0211)\u2502\u2502 \u2502\"deeppink\"\u2502#FF1493\u2502rgb(255,\u00a020,\u00a0147)\u2502\u2502 \u2502\"deepskyblue\"\u2502#00BFFF\u2502rgb(0,\u00a0191,\u00a0255)\u2502\u2502 \u2502\"dimgray\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dimgrey\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dodgerblue\"\u2502#1E90FF\u2502rgb(30,\u00a0144,\u00a0255)\u2502\u2502 \u2502\"firebrick\"\u2502#B22222\u2502rgb(178,\u00a034,\u00a034)\u2502\u2502 \u2502\"floralwhite\"\u2502#FFFAF0\u2502rgb(255,\u00a0250,\u00a0240)\u2502\u2502 \u2502\"forestgreen\"\u2502#228B22\u2502rgb(34,\u00a0139,\u00a034)\u2502\u2502 \u2502\"fuchsia\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"gainsboro\"\u2502#DCDCDC\u2502rgb(220,\u00a0220,\u00a0220)\u2502\u2502 \u2502\"ghostwhite\"\u2502#F8F8FF\u2502rgb(248,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"gold\"\u2502#FFD700\u2502rgb(255,\u00a0215,\u00a00)\u2502\u2502 \u2502\"goldenrod\"\u2502#DAA520\u2502rgb(218,\u00a0165,\u00a032)\u2502\u2502 \u2502\"gray\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"greenyellow\"\u2502#ADFF2F\u2502rgb(173,\u00a0255,\u00a047)\u2502\u2502 \u2502\"grey\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"honeydew\"\u2502#F0FFF0\u2502rgb(240,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"hotpink\"\u2502#FF69B4\u2502rgb(255,\u00a0105,\u00a0180)\u2502\u2502 \u2502\"indianred\"\u2502#CD5C5C\u2502rgb(205,\u00a092,\u00a092)\u2502\u2502 \u2502\"indigo\"\u2502#4B0082\u2502rgb(75,\u00a00,\u00a0130)\u2502\u2502 \u2502\"ivory\"\u2502#FFFFF0\u2502rgb(255,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"khaki\"\u2502#F0E68C\u2502rgb(240,\u00a0230,\u00a0140)\u2502\u2502 \u2502\"lavender\"\u2502#E6E6FA\u2502rgb(230,\u00a0230,\u00a0250)\u2502\u2502 \u2502\"lavenderblush\"\u2502#FFF0F5\u2502rgb(255,\u00a0240,\u00a0245)\u2502\u2502 \u2502\"lawngreen\"\u2502#7CFC00\u2502rgb(124,\u00a0252,\u00a00)\u2502\u2502 \u2502\"lemonchiffon\"\u2502#FFFACD\u2502rgb(255,\u00a0250,\u00a0205)\u2502\u2502 \u2502\"lightblue\"\u2502#ADD8E6\u2502rgb(173,\u00a0216,\u00a0230)\u2502\u2502 \u2502\"lightcoral\"\u2502#F08080\u2502rgb(240,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"lightcyan\"\u2502#E0FFFF\u2502rgb(224,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"lightgoldenrodyellow\"\u2502#FAFAD2\u2502rgb(250,\u00a0250,\u00a0210)\u2502\u2502 \u2502\"lightgray\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightgreen\"\u2502#90EE90\u2502rgb(144,\u00a0238,\u00a0144)\u2502\u2502 \u2502\"lightgrey\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightpink\"\u2502#FFB6C1\u2502rgb(255,\u00a0182,\u00a0193)\u2502\u2502 \u2502\"lightsalmon\"\u2502#FFA07A\u2502rgb(255,\u00a0160,\u00a0122)\u2502\u2502 \u2502\"lightseagreen\"\u2502#20B2AA\u2502rgb(32,\u00a0178,\u00a0170)\u2502\u2502 \u2502\"lightskyblue\"\u2502#87CEFA\u2502rgb(135,\u00a0206,\u00a0250)\u2502\u2502 \u2502\"lightslategray\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightslategrey\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightsteelblue\"\u2502#B0C4DE\u2502rgb(176,\u00a0196,\u00a0222)\u2502\u2502 \u2502\"lightyellow\"\u2502#FFFFE0\u2502rgb(255,\u00a0255,\u00a0224)\u2502\u2502 \u2502\"lime\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"limegreen\"\u2502#32CD32\u2502rgb(50,\u00a0205,\u00a050)\u2502\u2502 \u2502\"linen\"\u2502#FAF0E6\u2502rgb(250,\u00a0240,\u00a0230)\u2502\u2502 \u2502\"magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"maroon\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"mediumaquamarine\"\u2502#66CDAA\u2502rgb(102,\u00a0205,\u00a0170)\u2502\u2502 \u2502\"mediumblue\"\u2502#0000CD\u2502rgb(0,\u00a00,\u00a0205)\u2502\u2502 \u2502\"mediumorchid\"\u2502#BA55D3\u2502rgb(186,\u00a085,\u00a0211)\u2502\u2502 \u2502\"mediumpurple\"\u2502#9370DB\u2502rgb(147,\u00a0112,\u00a0219)\u2502\u2502 \u2502\"mediumseagreen\"\u2502#3CB371\u2502rgb(60,\u00a0179,\u00a0113)\u2502\u2502 \u2502\"mediumslateblue\"\u2502#7B68EE\u2502rgb(123,\u00a0104,\u00a0238)\u2502\u2502 \u2502\"mediumspringgreen\"\u2502#00FA9A\u2502rgb(0,\u00a0250,\u00a0154)\u2502\u2502 \u2502\"mediumturquoise\"\u2502#48D1CC\u2502rgb(72,\u00a0209,\u00a0204)\u2502\u2502 \u2502\"mediumvioletred\"\u2502#C71585\u2502rgb(199,\u00a021,\u00a0133)\u2502\u2502 \u2502\"midnightblue\"\u2502#191970\u2502rgb(25,\u00a025,\u00a0112)\u2502\u2502 \u2502\"mintcream\"\u2502#F5FFFA\u2502rgb(245,\u00a0255,\u00a0250)\u2502\u2502 \u2502\"mistyrose\"\u2502#FFE4E1\u2502rgb(255,\u00a0228,\u00a0225)\u2502\u2502 \u2502\"moccasin\"\u2502#FFE4B5\u2502rgb(255,\u00a0228,\u00a0181)\u2502\u2502 \u2502\"navajowhite\"\u2502#FFDEAD\u2502rgb(255,\u00a0222,\u00a0173)\u2502\u2502 \u2502\"navy\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"oldlace\"\u2502#FDF5E6\u2502rgb(253,\u00a0245,\u00a0230)\u2502\u2502 \u2502\"olive\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"olivedrab\"\u2502#6B8E23\u2502rgb(107,\u00a0142,\u00a035)\u2502\u2502 \u2502\"orange\"\u2502#FFA500\u2502rgb(255,\u00a0165,\u00a00)\u2502\u2502 \u2502\"orangered\"\u2502#FF4500\u2502rgb(255,\u00a069,\u00a00)\u2502\u2502 \u2502\"orchid\"\u2502#DA70D6\u2502rgb(218,\u00a0112,\u00a0214)\u2502\u2502 \u2502\"palegoldenrod\"\u2502#EEE8AA\u2502rgb(238,\u00a0232,\u00a0170)\u2502\u2502 \u2502\"palegreen\"\u2502#98FB98\u2502rgb(152,\u00a0251,\u00a0152)\u2502\u2502 \u2502\"paleturquoise\"\u2502#AFEEEE\u2502rgb(175,\u00a0238,\u00a0238)\u2502\u2502 \u2502\"palevioletred\"\u2502#DB7093\u2502rgb(219,\u00a0112,\u00a0147)\u2502\u2502 \u2502\"papayawhip\"\u2502#FFEFD5\u2502rgb(255,\u00a0239,\u00a0213)\u2502\u2502 \u2502\"peachpuff\"\u2502#FFDAB9\u2502rgb(255,\u00a0218,\u00a0185)\u2502\u2502 \u2502\"peru\"\u2502#CD853F\u2502rgb(205,\u00a0133,\u00a063)\u2502\u2502 \u2502\"pink\"\u2502#FFC0CB\u2502rgb(255,\u00a0192,\u00a0203)\u2502\u2502 \u2502\"plum\"\u2502#DDA0DD\u2502rgb(221,\u00a0160,\u00a0221)\u2502\u2502 \u2502\"powderblue\"\u2502#B0E0E6\u2502rgb(176,\u00a0224,\u00a0230)\u2502\u2502 \u2502\"purple\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"rebeccapurple\"\u2502#663399\u2502rgb(102,\u00a051,\u00a0153)\u2502\u2502 \u2502\"red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"rosybrown\"\u2502#BC8F8F\u2502rgb(188,\u00a0143,\u00a0143)\u2502\u2502 \u2502\"royalblue\"\u2502#4169E1\u2502rgb(65,\u00a0105,\u00a0225)\u2502\u2502 \u2502\"saddlebrown\"\u2502#8B4513\u2502rgb(139,\u00a069,\u00a019)\u2502\u2502 \u2502\"salmon\"\u2502#FA8072\u2502rgb(250,\u00a0128,\u00a0114)\u2502\u2502 \u2502\"sandybrown\"\u2502#F4A460\u2502rgb(244,\u00a0164,\u00a096)\u2502\u2502 \u2502\"seagreen\"\u2502#2E8B57\u2502rgb(46,\u00a0139,\u00a087)\u2502\u2502 \u2502\"seashell\"\u2502#FFF5EE\u2502rgb(255,\u00a0245,\u00a0238)\u2502\u2502 \u2502\"sienna\"\u2502#A0522D\u2502rgb(160,\u00a082,\u00a045)\u2502\u2502 \u2502\"silver\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"skyblue\"\u2502#87CEEB\u2502rgb(135,\u00a0206,\u00a0235)\u2502\u2502 \u2502\"slateblue\"\u2502#6A5ACD\u2502rgb(106,\u00a090,\u00a0205)\u2502\u2502 \u2502\"slategray\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"slategrey\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"snow\"\u2502#FFFAFA\u2502rgb(255,\u00a0250,\u00a0250)\u2502\u2502 \u2502\"springgreen\"\u2502#00FF7F\u2502rgb(0,\u00a0255,\u00a0127)\u2502\u2502 \u2502\"steelblue\"\u2502#4682B4\u2502rgb(70,\u00a0130,\u00a0180)\u2502\u2502 \u2502\"tan\"\u2502#D2B48C\u2502rgb(210,\u00a0180,\u00a0140)\u2502\u2502 \u2502\"teal\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"thistle\"\u2502#D8BFD8\u2502rgb(216,\u00a0191,\u00a0216)\u2502\u2502 \u2502\"tomato\"\u2502#FF6347\u2502rgb(255,\u00a099,\u00a071)\u2502\u2502 \u2502\"turquoise\"\u2502#40E0D0\u2502rgb(64,\u00a0224,\u00a0208)\u2502\u2502 \u2502\"violet\"\u2502#EE82EE\u2502rgb(238,\u00a0130,\u00a0238)\u2502\u2502 \u2502\"wheat\"\u2502#F5DEB3\u2502rgb(245,\u00a0222,\u00a0179)\u2502\u2502 \u2502\"white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"whitesmoke\"\u2502#F5F5F5\u2502rgb(245,\u00a0245,\u00a0245)\u2502\u2502 \u2502\"yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"yellowgreen\"\u2502#9ACD32\u2502rgb(154,\u00a0205,\u00a050)\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"},{"location":"css_types/color/#hex-rgb-value","title":"Hex RGB value","text":"<p>The hexadecimal RGB format starts with an octothorpe <code>#</code> and is then followed by 3 or 6 hexadecimal digits: <code>0123456789ABCDEF</code>. Casing is ignored.</p> <ul> <li>If 6 digits are used, the format is <code>#RRGGBB</code>:</li> <li><code>RR</code> represents the red channel;</li> <li><code>GG</code> represents the green channel; and</li> <li><code>BB</code> represents the blue channel.</li> <li>If 3 digits are used, the format is <code>#RGB</code>.</li> </ul> <p>In a 3 digit color, each channel is represented by a single digit which is duplicated when converting to the 6 digit format. For example, the color <code>#A2F</code> is the same as <code>#AA22FF</code>.</p>"},{"location":"css_types/color/#hex-rgba-value","title":"Hex RGBA value","text":"<p>This is the same as the hex RGB value, but with an extra channel for the alpha component (that sets opacity).</p> <ul> <li>If 8 digits are used, the format is <code>#RRGGBBAA</code>, equivalent to the format <code>#RRGGBB</code> with two extra digits for opacity.</li> <li>If 4 digits are used, the format is <code>#RGBA</code>, equivalent to the format <code>#RGB</code> with an extra digit for opacity.</li> </ul>"},{"location":"css_types/color/#rgb-description","title":"<code>rgb</code> description","text":"<p>The <code>rgb</code> format description is a functional description of a color in the RGB color space. This description follows the format <code>rgb(red, green, blue)</code>, where <code>red</code>, <code>green</code>, and <code>blue</code> are decimal integers between 0 and 255. They represent the value of the channel with the same name.</p> <p>For example, <code>rgb(0, 255, 32)</code> is equivalent to <code>#00FF20</code>.</p>"},{"location":"css_types/color/#rgba-description","title":"<code>rgba</code> description","text":"<p>The <code>rgba</code> format description is the same as the <code>rgb</code> with an extra parameter for opacity, which should be a value between <code>0</code> and <code>1</code>.</p> <p>For example, <code>rgba(0, 255, 32, 0.5)</code> is the color <code>rgb(0, 255, 32)</code> with 50% opacity.</p>"},{"location":"css_types/color/#hsl-description","title":"<code>hsl</code> description","text":"<p>The <code>hsl</code> format description is a functional description of a color in the HSL color space. This description follows the format <code>hsl(hue, saturation, lightness)</code>, where</p> <ul> <li><code>hue</code> is a float between 0 and 360;</li> <li><code>saturation</code> is a percentage between <code>0%</code> and <code>100%</code>; and</li> <li><code>lightness</code> is a percentage between <code>0%</code> and <code>100%</code>.</li> </ul> <p>For example, the color <code>#00FF20</code> would be represented as <code>hsl(128, 100%, 50%)</code> in the HSL color space.</p>"},{"location":"css_types/color/#hsla-description","title":"<code>hsla</code> description","text":"<p>The <code>hsla</code> format description is the same as the <code>hsl</code> with an extra parameter for opacity, which should be a value between <code>0</code> and <code>1</code>.</p> <p>For example, <code>hsla(128, 100%, 50%, 0.5)</code> is the color <code>hsl(128, 100%, 50%)</code> with 50% opacity.</p>"},{"location":"css_types/color/#examples","title":"Examples","text":""},{"location":"css_types/color/#css","title":"CSS","text":"<pre><code>Header {\n    background: red;           /* Color name */\n}\n\n.accent {\n    color: $accent;            /* Textual variable */\n}\n\n#footer {\n    tint: hsl(300, 20%, 70%);  /* HSL description */\n}\n</code></pre>"},{"location":"css_types/color/#python","title":"Python","text":"<p>In Python, rules that expect a <code>&lt;color&gt;</code> can also accept an instance of the type <code>Color</code>.</p> <pre><code># Mimicking the CSS syntax\nwidget.styles.background = \"red\"           # Color name\nwidget.styles.color = \"$accent\"            # Textual variable\nwidget.styles.tint = \"hsl(300, 20%, 70%)\"  # HSL description\n\nfrom textual.color import Color\n# Using a Color object directly...\ncolor = Color(16, 200, 45)\n# ... which can also parse the CSS syntax\ncolor = Color.parse(\"#A8F\")\n</code></pre>"},{"location":"css_types/hatch/","title":"&lt;hatch&gt;","text":"<p>The <code>&lt;hatch&gt;</code> CSS type represents a character used in the hatch rule.</p>"},{"location":"css_types/hatch/#syntax","title":"Syntax","text":"Value Description <code>cross</code> A diagonal crossed line. <code>horizontal</code> A horizontal line. <code>left</code> A left leaning diagonal line. <code>right</code> A right leaning diagonal line. <code>vertical</code> A vertical line."},{"location":"css_types/hatch/#examples","title":"Examples","text":""},{"location":"css_types/hatch/#css","title":"CSS","text":"<pre><code>.some-class {\n    hatch: cross green;\n}\n</code></pre>"},{"location":"css_types/hatch/#python","title":"Python","text":"<pre><code>widget.styles.hatch = (\"cross\", \"red\")\n</code></pre>"},{"location":"css_types/horizontal/","title":"&lt;horizontal&gt;","text":"<p>The <code>&lt;horizontal&gt;</code> CSS type represents a position along the horizontal axis.</p>"},{"location":"css_types/horizontal/#syntax","title":"Syntax","text":"<p>The <code>&lt;horizontal&gt;</code> type can take any of the following values:</p> Value Description <code>center</code> Aligns in the center of the horizontal axis. <code>left</code> (default) Aligns on the left of the horizontal axis. <code>right</code> Aligns on the right of the horizontal axis."},{"location":"css_types/horizontal/#examples","title":"Examples","text":""},{"location":"css_types/horizontal/#css","title":"CSS","text":"<pre><code>.container {\n    align-horizontal: right;\n}\n</code></pre>"},{"location":"css_types/horizontal/#python","title":"Python","text":"<pre><code>widget.styles.align_horizontal = \"right\"\n</code></pre>"},{"location":"css_types/integer/","title":"&lt;integer&gt;","text":"<p>The <code>&lt;integer&gt;</code> CSS type represents an integer number.</p>"},{"location":"css_types/integer/#syntax","title":"Syntax","text":"<p>An <code>&lt;integer&gt;</code> is any valid integer number like <code>-10</code> or <code>42</code>.</p> <p>Note</p> <p>Some CSS rules may expect an <code>&lt;integer&gt;</code> within certain bounds. If that is the case, it will be noted in that rule.</p>"},{"location":"css_types/integer/#examples","title":"Examples","text":""},{"location":"css_types/integer/#css","title":"CSS","text":"<pre><code>.classname {\n    offset: 10 -20\n}\n</code></pre>"},{"location":"css_types/integer/#python","title":"Python","text":"<p>In Python, a rule that expects a CSS type <code>&lt;integer&gt;</code> will expect a value of the type <code>int</code>:</p> <pre><code>widget.styles.offset = (10, -20)\n</code></pre>"},{"location":"css_types/keyline/","title":"&lt;keyline&gt;","text":"<p>The <code>&lt;keyline&gt;</code> CSS type represents a line style used in the keyline rule.</p>"},{"location":"css_types/keyline/#syntax","title":"Syntax","text":"Value Description <code>none</code> No line (disable keyline). <code>thin</code> A thin line. <code>heavy</code> A heavy (thicker) line. <code>double</code> A double line."},{"location":"css_types/keyline/#examples","title":"Examples","text":""},{"location":"css_types/keyline/#css","title":"CSS","text":"<pre><code>Vertical {\n    keyline: thin green;\n}\n</code></pre>"},{"location":"css_types/keyline/#python","title":"Python","text":"<pre><code># A tuple of &lt;keyline&gt; and color\nwidget.styles.keyline = (\"thin\", \"green\")\n</code></pre>"},{"location":"css_types/name/","title":"&lt;name&gt;","text":"<p>The <code>&lt;name&gt;</code> type represents a sequence of characters that identifies something.</p>"},{"location":"css_types/name/#syntax","title":"Syntax","text":"<p>A <code>&lt;name&gt;</code> is any non-empty sequence of characters:</p> <ul> <li>starting with a letter <code>a-z</code>, <code>A-Z</code>, or underscore <code>_</code>; and</li> <li>followed by zero or more letters <code>a-zA-Z</code>, digits <code>0-9</code>, underscores <code>_</code>, and hiphens <code>-</code>.</li> </ul>"},{"location":"css_types/name/#examples","title":"Examples","text":""},{"location":"css_types/name/#css","title":"CSS","text":"<pre><code>Screen {\n    layers: onlyLetters Letters-and-hiphens _lead-under letters-1-digit;\n}\n</code></pre>"},{"location":"css_types/name/#python","title":"Python","text":"<pre><code>widget.styles.layers = \"onlyLetters Letters-and-hiphens _lead-under letters-1-digit\"\n</code></pre>"},{"location":"css_types/number/","title":"&lt;number&gt;","text":"<p>The <code>&lt;number&gt;</code> CSS type represents a real number, which can be an integer or a number with a decimal part (akin to a <code>float</code> in Python).</p>"},{"location":"css_types/number/#syntax","title":"Syntax","text":"<p>A <code>&lt;number&gt;</code> is an <code>&lt;integer&gt;</code>, optionally followed by the decimal point <code>.</code> and a decimal part composed of one or more digits.</p>"},{"location":"css_types/number/#examples","title":"Examples","text":""},{"location":"css_types/number/#css","title":"CSS","text":"<pre><code>Grid {\n    grid-size: 3 6  /* Integers are numbers */\n}\n\n.translucid {\n    opacity: 0.5    /* Numbers can have a decimal part */\n}\n</code></pre>"},{"location":"css_types/number/#python","title":"Python","text":"<p>In Python, a rule that expects a CSS type <code>&lt;number&gt;</code> will accept an <code>int</code> or a <code>float</code>:</p> <pre><code>widget.styles.grid_size = (3, 6)  # Integers are numbers\nwidget.styles.opacity = 0.5       # Numbers can have a decimal part\n</code></pre>"},{"location":"css_types/overflow/","title":"&lt;overflow&gt;","text":"<p>The <code>&lt;overflow&gt;</code> CSS type represents overflow modes.</p>"},{"location":"css_types/overflow/#syntax","title":"Syntax","text":"<p>The <code>&lt;overflow&gt;</code> type can take any of the following values:</p> Value Description <code>auto</code> Determine overflow mode automatically. <code>hidden</code> Don't overflow. <code>scroll</code> Allow overflowing."},{"location":"css_types/overflow/#examples","title":"Examples","text":""},{"location":"css_types/overflow/#css","title":"CSS","text":"<pre><code>#container {\n    overflow-y: hidden;  /* Don't overflow */\n}\n</code></pre>"},{"location":"css_types/overflow/#python","title":"Python","text":"<pre><code>widget.styles.overflow_y = \"hidden\"  # Don't overflow\n</code></pre>"},{"location":"css_types/percentage/","title":"&lt;percentage&gt;","text":"<p>The <code>&lt;percentage&gt;</code> CSS type represents a percentage value. It is often used to represent values that are relative to the parent's values.</p> <p>Warning</p> <p>Not to be confused with the <code>&lt;scalar&gt;</code> type.</p>"},{"location":"css_types/percentage/#syntax","title":"Syntax","text":"<p>A <code>&lt;percentage&gt;</code> is a <code>&lt;number&gt;</code> followed by the percent sign <code>%</code> (without spaces). Some rules may clamp the values between <code>0%</code> and <code>100%</code>.</p>"},{"location":"css_types/percentage/#examples","title":"Examples","text":""},{"location":"css_types/percentage/#css","title":"CSS","text":"<pre><code>#footer {\n    /* Integer followed by % */\n    color: red 70%;\n\n    /* The number can be negative/decimal, although that may not make sense */\n    offset: -30% 12.5%;\n}\n</code></pre>"},{"location":"css_types/percentage/#python","title":"Python","text":"<pre><code># Integer followed by %\nwidget.styles.color = \"red 70%\"\n\n# The number can be negative/decimal, although that may not make sense\nwidget.styles.offset = (\"-30%\", \"12.5%\")\n</code></pre>"},{"location":"css_types/scalar/","title":"&lt;scalar&gt;","text":"<p>The <code>&lt;scalar&gt;</code> CSS type represents a length. It can be a <code>&lt;number&gt;</code> and a unit, or the special value <code>auto</code>. It is used to represent lengths, for example in the <code>width</code> and <code>height</code> rules.</p> <p>Warning</p> <p>Not to be confused with the <code>&lt;number&gt;</code> or <code>&lt;percentage&gt;</code> types.</p>"},{"location":"css_types/scalar/#syntax","title":"Syntax","text":"<p>A <code>&lt;scalar&gt;</code> can be any of the following:</p> <ul> <li>a fixed number of cells (e.g., <code>10</code>);</li> <li>a fractional proportion relative to the sizes of the other widgets (e.g., <code>1fr</code>);</li> <li>a percentage relative to the container widget (e.g., <code>50%</code>);</li> <li>a percentage relative to the container width/height (e.g., <code>25w</code>/<code>75h</code>);</li> <li>a percentage relative to the viewport width/height (e.g., <code>25vw</code>/<code>75vh</code>); or</li> <li>the special value <code>auto</code> to compute the optimal size to fit without scrolling.</li> </ul> <p>A complete reference table and detailed explanations follow. You can skip to the examples.</p> Unit symbol Unit Example Description <code>\"\"</code> Cell <code>10</code> Number of cells (rows or columns). <code>\"fr\"</code> Fraction <code>1fr</code> Specifies the proportion of space the widget should occupy. <code>\"%\"</code> Percent <code>75%</code> Length relative to the container widget. <code>\"w\"</code> Width <code>25w</code> Percentage relative to the width of the container widget. <code>\"h\"</code> Height <code>75h</code> Percentage relative to the height of the container widget. <code>\"vw\"</code> Viewport width <code>25vw</code> Percentage relative to the viewport width. <code>\"vh\"</code> Viewport height <code>75vh</code> Percentage relative to the viewport height. - Auto <code>auto</code> Tries to compute the optimal size to fit without scrolling."},{"location":"css_types/scalar/#cell","title":"Cell","text":"<p>The number of cells is the only unit for a scalar that is absolute. This can be an integer or a float but floats are truncated to integers.</p> <p>If used to specify a horizontal length, it corresponds to the number of columns. For example, in <code>width: 15</code>, this sets the width of a widget to be equal to 15 cells, which translates to 15 columns.</p> <p>If used to specify a vertical length, it corresponds to the number of lines. For example, in <code>height: 10</code>, this sets the height of a widget to be equal to 10 cells, which translates to 10 lines.</p>"},{"location":"css_types/scalar/#fraction","title":"Fraction","text":"<p>The unit fraction is used to represent proportional sizes.</p> <p>For example, if two widgets are side by side and one has <code>width: 1fr</code> and the other has <code>width: 3fr</code>, the second one will be three times as wide as the first one.</p>"},{"location":"css_types/scalar/#percent","title":"Percent","text":"<p>The percent unit matches a <code>&lt;percentage&gt;</code> and is used to specify a total length relative to the space made available by the container widget.</p> <p>If used to specify a horizontal length, it will be relative to the width of the container. For example, <code>width: 50%</code> sets the width of a widget to 50% of the width of its container.</p> <p>If used to specify a vertical length, it will be relative to the height of the container. For example, <code>height: 50%</code> sets the height of a widget to 50% of the height of its container.</p>"},{"location":"css_types/scalar/#width","title":"Width","text":"<p>The width unit is similar to the percent unit, except it sets the percentage to be relative to the width of the container.</p> <p>For example, <code>width: 25w</code> sets the width of a widget to 25% of the width of its container and <code>height: 25w</code> sets the height of a widget to 25% of the width of its container. So, if the container has a width of 100 cells, the width and the height of the child widget will be of 25 cells.</p>"},{"location":"css_types/scalar/#height","title":"Height","text":"<p>The height unit is similar to the percent unit, except it sets the percentage to be relative to the height of the container.</p> <p>For example, <code>height: 75h</code> sets the height of a widget to 75% of the height of its container and <code>width: 75h</code> sets the width of a widget to 75% of the height of its container. So, if the container has a height of 100 cells, the width and the height of the child widget will be of 75 cells.</p>"},{"location":"css_types/scalar/#viewport-width","title":"Viewport width","text":"<p>This is the same as the width unit, except that it is relative to the width of the viewport instead of the width of the immediate container. The width of the viewport is the width of the terminal minus the widths of widgets that are docked left or right.</p> <p>For example, <code>width: 25vw</code> will try to set the width of a widget to be 25% of the viewport width, regardless of the widths of its containers.</p>"},{"location":"css_types/scalar/#viewport-height","title":"Viewport height","text":"<p>This is the same as the height unit, except that it is relative to the height of the viewport instead of the height of the immediate container. The height of the viewport is the height of the terminal minus the heights of widgets that are docked top or bottom.</p> <p>For example, <code>height: 75vh</code> will try to set the height of a widget to be 75% of the viewport height, regardless of the height of its containers.</p>"},{"location":"css_types/scalar/#auto","title":"Auto","text":"<p>This special value will try to calculate the optimal size to fit the contents of the widget without scrolling.</p> <p>For example, if its container is big enough, a label with <code>width: auto</code> will be just as wide as its text.</p>"},{"location":"css_types/scalar/#examples","title":"Examples","text":""},{"location":"css_types/scalar/#css","title":"CSS","text":"<pre><code>Horizontal {\n    width: 60;     /* 60 cells */\n    height: 1fr;   /* proportional size of 1 */\n}\n</code></pre>"},{"location":"css_types/scalar/#python","title":"Python","text":"<pre><code>widget.styles.width = 16       # Cell unit can be specified with an int/float\nwidget.styles.height = \"1fr\"   # proportional size of 1\n</code></pre>"},{"location":"css_types/text_align/","title":"&lt;text-align&gt;","text":"<p>The <code>&lt;text-align&gt;</code> CSS type represents alignments that can be applied to text.</p> <p>Warning</p> <p>Not to be confused with the <code>text-align</code> CSS rule that sets the alignment of text in a widget.</p>"},{"location":"css_types/text_align/#syntax","title":"Syntax","text":"<p>A <code>&lt;text-align&gt;</code> can be any of the following values:</p> Value Alignment type <code>center</code> Center alignment. <code>end</code> Alias for <code>right</code>. <code>justify</code> Text is justified inside the widget. <code>left</code> Left alignment. <code>right</code> Right alignment. <code>start</code> Alias for <code>left</code>. <p>Tip</p> <p>The meanings of <code>start</code> and <code>end</code> will likely change when RTL languages become supported by Textual.</p>"},{"location":"css_types/text_align/#examples","title":"Examples","text":""},{"location":"css_types/text_align/#css","title":"CSS","text":"<pre><code>Label {\n    text-align: justify;\n}\n</code></pre>"},{"location":"css_types/text_align/#python","title":"Python","text":"<pre><code>widget.styles.text_align = \"justify\"\n</code></pre>"},{"location":"css_types/text_style/","title":"&lt;text-style&gt;","text":"<p>The <code>&lt;text-style&gt;</code> CSS type represents styles that can be applied to text.</p> <p>Warning</p> <p>Not to be confused with the <code>text-style</code> CSS rule that sets the style of text in a widget.</p>"},{"location":"css_types/text_style/#syntax","title":"Syntax","text":"<p>A <code>&lt;text-style&gt;</code> can be the value <code>none</code> for plain text with no styling, or any space-separated combination of the following values:</p> Value Description <code>bold</code> Bold text. <code>italic</code> Italic text. <code>reverse</code> Reverse video text (foreground and background colors reversed). <code>strike</code> Strikethrough text. <code>underline</code> Underline text."},{"location":"css_types/text_style/#examples","title":"Examples","text":""},{"location":"css_types/text_style/#css","title":"CSS","text":"<pre><code>#label1 {\n    /* You can specify any value by itself. */\n    rule: strike;\n}\n\n#label2 {\n    /* You can also combine multiple values. */\n    rule: strike bold italic reverse;\n}\n</code></pre>"},{"location":"css_types/text_style/#python","title":"Python","text":"<pre><code># You can specify any value by itself\nwidget.styles.text_style = \"strike\"\n\n# You can also combine multiple values\nwidget.styles.text_style = \"strike bold italic reverse\n</code></pre>"},{"location":"css_types/vertical/","title":"&lt;vertical&gt;","text":"<p>The <code>&lt;vertical&gt;</code> CSS type represents a position along the vertical axis.</p>"},{"location":"css_types/vertical/#syntax","title":"Syntax","text":"<p>The <code>&lt;vertical&gt;</code> type can take any of the following values:</p> Value Description <code>bottom</code> Aligns at the bottom of the vertical axis. <code>middle</code> Aligns in the middle of the vertical axis. <code>top</code> (default) Aligns at the top of the vertical axis."},{"location":"css_types/vertical/#examples","title":"Examples","text":""},{"location":"css_types/vertical/#css","title":"CSS","text":"<pre><code>.container {\n    align-vertical: top;\n}\n</code></pre>"},{"location":"css_types/vertical/#python","title":"Python","text":"<pre><code>widget.styles.align_vertical = \"top\"\n</code></pre>"},{"location":"events/","title":"Events","text":"<p>A reference to Textual events.</p> <p>See the links to the left of the page, or in the hamburger menu (three horizontal bars, top left).</p>"},{"location":"events/app_blur/","title":"AppBlur","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the app loses focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusOut</code>, or when running via textual-web.</p>"},{"location":"events/app_blur/#see-also","title":"See also","text":"<ul> <li>AppFocus</li> </ul>"},{"location":"events/app_focus/","title":"AppFocus","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the app has focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusIn</code>, or when running via textual-web.</p>"},{"location":"events/app_focus/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> </ul>"},{"location":"events/blur/","title":"Blur","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is blurred (un-focussed).</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/blur/#see-also","title":"See also","text":"<ul> <li>DescendantBlur</li> <li>DescendantFocus</li> <li>Focus</li> </ul>"},{"location":"events/click/","title":"Click","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when a widget is clicked.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/click/#see-also","title":"See also","text":"<ul> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/descendant_blur/","title":"DescendantBlur","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a child widget is blurred.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/descendant_blur/#textual.events.DescendantBlur.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was blurred (alias of <code>widget</code>).</p>"},{"location":"events/descendant_blur/#textual.events.DescendantBlur.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was blurred.</p>"},{"location":"events/descendant_blur/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> <li>AppFocus</li> <li>Blur</li> <li>DescendantFocus</li> <li>Focus</li> </ul>"},{"location":"events/descendant_focus/","title":"DescendantFocus","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a child widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/descendant_focus/#textual.events.DescendantFocus.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was focused (alias of <code>widget</code>).</p>"},{"location":"events/descendant_focus/#textual.events.DescendantFocus.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was focused.</p>"},{"location":"events/descendant_focus/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> <li>AppFocus</li> <li>Blur</li> <li>DescendantBlur</li> <li>Focus</li> </ul>"},{"location":"events/enter/","title":"Enter","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved over a widget.</p> <p>Note that this event bubbles, so a widget may receive this event when the mouse moves over a child widget. Check the <code>node</code> attribute for the widget directly under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/enter/#textual.events.Enter.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node directly under the mouse.</p>"},{"location":"events/enter/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Leave</li> <li>MouseDown</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/focus/","title":"Focus","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/focus/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> <li>AppFocus</li> <li>Blur</li> <li>DescendantBlur</li> <li>DescendantFocus</li> </ul>"},{"location":"events/hide/","title":"Hide","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget has been hidden.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Sent when any of the following conditions apply:</p> <ul> <li>The widget is removed from the DOM.</li> <li>The widget is no longer displayed because it has been scrolled or clipped from the terminal or its container.</li> <li>The widget has its <code>display</code> attribute set to <code>False</code>.</li> <li>The widget's <code>display</code> style is set to <code>\"none\"</code>.</li> </ul>"},{"location":"events/key/","title":"Key","text":"<p>               Bases: <code>InputEvent</code></p> <p>Sent when the user hits a key on the keyboard.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The key that was pressed.</p> required <code>str | None</code> <p>A printable character or <code>None</code> if it is not printable.</p> required"},{"location":"events/key/#textual.events.Key(key)","title":"<code>key</code>","text":""},{"location":"events/key/#textual.events.Key(character)","title":"<code>character</code>","text":""},{"location":"events/key/#textual.events.Key.aliases","title":"aliases  <code>instance-attribute</code>","text":"<pre><code>aliases = _get_key_aliases(key)\n</code></pre> <p>The aliases for the key, including the key itself.</p>"},{"location":"events/key/#textual.events.Key.character","title":"character  <code>instance-attribute</code>","text":"<pre><code>character = (\n    key\n    if len(key) == 1\n    else None if character is None else character\n)\n</code></pre> <p>A printable character or <code>None</code> if it is not printable.</p>"},{"location":"events/key/#textual.events.Key.is_printable","title":"is_printable  <code>property</code>","text":"<pre><code>is_printable\n</code></pre> <p>Check if the key is printable (produces a unicode character).</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the key is printable.</p>"},{"location":"events/key/#textual.events.Key.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key = key\n</code></pre> <p>The key that was pressed.</p>"},{"location":"events/key/#textual.events.Key.name","title":"name  <code>property</code>","text":"<pre><code>name\n</code></pre> <p>Name of a key suitable for use as a Python identifier.</p>"},{"location":"events/key/#textual.events.Key.name_aliases","title":"name_aliases  <code>property</code>","text":"<pre><code>name_aliases\n</code></pre> <p>The corresponding name for every alias in <code>aliases</code> list.</p>"},{"location":"events/leave/","title":"Leave","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved away from a widget, or if a widget is programmatically disabled while hovered.</p> <p>Note that this widget bubbles, so a widget may receive Leave events for any child widgets. Check the <code>node</code> parameter for the original widget that was previously under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/leave/#textual.events.Leave.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was previously directly under the mouse.</p>"},{"location":"events/leave/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>MouseDown</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/load/","title":"Load","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the App is running but before the terminal is in application mode.</p> <p>Use this event to run any setup that doesn't require any visuals such as loading configuration and binding keys.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/load/#see-also","title":"See also","text":"<ul> <li>Mount</li> </ul>"},{"location":"events/mount/","title":"Mount","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is mounted and may receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/mount/#see-also","title":"See also","text":"<ul> <li>Load</li> <li>Unmount</li> </ul>"},{"location":"events/mouse_capture/","title":"MouseCapture","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the mouse has been captured.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>When a mouse has been captured, all further mouse events will be sent to the capturing widget.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when captured.</p> required"},{"location":"events/mouse_capture/#textual.events.MouseCapture(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"events/mouse_capture/#textual.events.MouseCapture.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when captured.</p>"},{"location":"events/mouse_capture/#see-also","title":"See also","text":"<ul> <li>capture_mouse</li> <li>release_mouse</li> <li>MouseRelease</li> </ul>"},{"location":"events/mouse_down/","title":"MouseDown","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is pressed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_down/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_move/","title":"MouseMove","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse cursor moves.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_move/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_release/","title":"MouseRelease","text":"<p>               Bases: <code>Event</code></p> <p>Mouse has been released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when released.</p> required"},{"location":"events/mouse_release/#textual.events.MouseRelease(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"events/mouse_release/#textual.events.MouseRelease.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when released.</p>"},{"location":"events/mouse_release/#see-also","title":"See also","text":"<ul> <li>capture_mouse</li> <li>release_mouse</li> <li>MouseCapture</li> </ul>"},{"location":"events/mouse_scroll_down/","title":"MouseScrollDown","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_scroll_down/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_scroll_up/","title":"MouseScrollUp","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled up.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_scroll_up/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_up/","title":"MouseUp","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_up/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> </ul>"},{"location":"events/paste/","title":"Paste","text":"<p>               Bases: <code>Event</code></p> <p>Event containing text that was pasted into the Textual application. This event will only appear when running in a terminal emulator that supports bracketed paste mode. Textual will enable bracketed pastes when an app starts, and disable it when the app shuts down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text that has been pasted.</p> required"},{"location":"events/paste/#textual.events.Paste(text)","title":"<code>text</code>","text":""},{"location":"events/paste/#textual.events.Paste.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was pasted.</p>"},{"location":"events/print/","title":"Print","text":"<p>               Bases: <code>Event</code></p> <p>Sent to a widget that is capturing <code>print</code>.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text that was printed.</p> required <code>bool</code> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p> <code>False</code> Note <p>Python's <code>print</code> output can be captured with <code>App.begin_capture_print</code>.</p>"},{"location":"events/print/#textual.events.Print(text)","title":"<code>text</code>","text":""},{"location":"events/print/#textual.events.Print(stderr)","title":"<code>stderr</code>","text":""},{"location":"events/print/#textual.events.Print.stderr","title":"stderr  <code>instance-attribute</code>","text":"<pre><code>stderr = stderr\n</code></pre> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p>"},{"location":"events/print/#textual.events.Print.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was printed.</p>"},{"location":"events/resize/","title":"Resize","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the app or widget has been resized.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>The new size of the Widget.</p> required <code>Size</code> <p>The virtual size (scrollable size) of the Widget.</p> required <code>Size | None</code> <p>The size of the Widget's container widget.</p> <code>None</code>"},{"location":"events/resize/#textual.events.Resize(size)","title":"<code>size</code>","text":""},{"location":"events/resize/#textual.events.Resize(virtual_size)","title":"<code>virtual_size</code>","text":""},{"location":"events/resize/#textual.events.Resize(container_size)","title":"<code>container_size</code>","text":""},{"location":"events/resize/#textual.events.Resize.container_size","title":"container_size  <code>instance-attribute</code>","text":"<pre><code>container_size = (\n    size if container_size is None else container_size\n)\n</code></pre> <p>The size of the Widget's container widget.</p>"},{"location":"events/resize/#textual.events.Resize.size","title":"size  <code>instance-attribute</code>","text":"<pre><code>size = size\n</code></pre> <p>The new size of the Widget.</p>"},{"location":"events/resize/#textual.events.Resize.virtual_size","title":"virtual_size  <code>instance-attribute</code>","text":"<pre><code>virtual_size = virtual_size\n</code></pre> <p>The virtual size (scrollable size) of the Widget.</p>"},{"location":"events/screen_resume/","title":"ScreenResume","text":"<p>               Bases: <code>Event</code></p> <p>Sent to screen that has been made active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/screen_resume/#see-also","title":"See also","text":"<ul> <li>ScreenSuspend</li> </ul>"},{"location":"events/screen_suspend/","title":"ScreenSuspend","text":"<p>               Bases: <code>Event</code></p> <p>Sent to screen when it is no longer active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/screen_suspend/#see-also","title":"See also","text":"<ul> <li>ScreenResume</li> </ul>"},{"location":"events/show/","title":"Show","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is first displayed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/unmount/","title":"Unmount","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is unmounted and may no longer receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/unmount/#see-also","title":"See also","text":"<ul> <li>Mount</li> </ul>"},{"location":"examples/styles/","title":"Index","text":"<p>These are the examples from the documentation, used to generate screenshots.</p> <p>You can run them with the textual CLI.</p> <p>For example:</p> <pre><code>textual run text_style.py\n</code></pre>"},{"location":"guide/","title":"Guide","text":"<p>Welcome to the Textual Guide! An in-depth reference on how to build apps with Textual.</p>"},{"location":"guide/#example-code","title":"Example code","text":"<p>Most of the code in this guide is fully working\u2014you could cut and paste it if you wanted to.</p> <p>Although it is probably easier to check out the Textual repository and navigate to the <code>docs/examples/guide</code> directory and run the examples from there.</p>"},{"location":"guide/CSS/","title":"Textual CSS","text":"<p>Textual uses CSS to apply style to widgets. If you have any exposure to web development you will have encountered CSS, but don't worry if you haven't: this chapter will get you up to speed.</p> <p>VSCode User?</p> <p>The official Textual CSS extension adds syntax highlighting for both external files and inline CSS.</p>"},{"location":"guide/CSS/#stylesheets","title":"Stylesheets","text":"<p>CSS stands for Cascading Stylesheet. A stylesheet is a list of styles and rules about how those styles should be applied to a web page. In the case of Textual, the stylesheet applies styles to widgets, but otherwise it is the same idea.</p> <p>Let's look at some Textual CSS.</p> <pre><code>Header {\n  dock: top;\n  height: 3;\n  content-align: center middle;\n  background: blue;\n  color: white;\n}\n</code></pre> <p>This is an example of a CSS rule set. There may be many such sections in any given CSS file.</p> <p>Let's break this CSS code down a bit.</p> <pre><code>Header {\n  dock: top;\n  height: 3;\n  content-align: center middle;\n  background: blue;\n  color: white;\n}\n</code></pre> <p>The first line is a selector which tells Textual which widget(s) to modify. In the above example, the styles will be applied to a widget defined by the Python class <code>Header</code>.</p> <pre><code>Header {\n  dock: top;\n  height: 3;\n  content-align: center middle;\n  background: blue;\n  color: white;\n}\n</code></pre> <p>The lines inside the curly braces contains CSS rules, which consist of a rule name and rule value separated by a colon and ending in a semicolon. Such rules are typically written one per line, but you could add additional rules as long as they are separated by semicolons.</p> <p>The first rule in the above example reads <code>\"dock: top;\"</code>. The rule name is <code>dock</code> which tells Textual to place the widget on an edge of the screen. The text after the colon is <code>top</code> which tells Textual to dock to the top of the screen. Other valid values for <code>dock</code> are \"right\", \"bottom\", or \"left\"; but \"top\" is most appropriate for a header.</p>"},{"location":"guide/CSS/#the-dom","title":"The DOM","text":"<p>The DOM, or Document Object Model, is a term borrowed from the web world. Textual doesn't use documents but the term has stuck. In Textual CSS, the DOM is an arrangement of widgets you can visualize as a tree-like structure.</p> <p>Some widgets contain other widgets: for instance, a list control widget will likely also have item widgets, or a dialog widget may contain button widgets. These child widgets form the branches of the tree.</p> <p>Let's look at a trivial Textual app.</p> dom1.pyOutput <pre><code>from textual.app import App\n\n\nclass ExampleApp(App):\n    pass\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p> ExampleApp </p> <p>This example creates an instance of <code>ExampleApp</code>, which will implicitly create a <code>Screen</code> object. In DOM terms, the <code>Screen</code> is a child of <code>ExampleApp</code>.</p> <p>With the above example, the DOM will look like the following:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nM1Ya0/jOFx1MDAxNP3Or6i6X3YlXGKOY8fxSKtcdTAwMTXPpSywo1x1MDAwMVxyj9VcYrmJaT3Na1x1MDAxMpfHIP77XqdMXHUwMDFlbVxiZVx1MDAxN0ZEUZv4OtfX1+fc4+R+pdfr67tU9j/0+vLWXHUwMDE3oVxuMnHTXzXt1zLLVVx1MDAxMoNcdFx1MDAxN/d5Ms38oudY6zT/sL5cdTAwMWWJbFwidVx1MDAxYVxuX1rXKp+KMNfTQCWWn0TrSsso/8P8XHUwMDFliUj+niZRoDOrXHUwMDFhZE1cdTAwMDZKJ9lsLFx1MDAxOcpIxjpcdTAwMDfv/8B9r3df/NaiXHUwMDBilIiSOCi6XHUwMDE3hlp4njvfepTERaiUIVx1MDAwN3PqkbKDyrdhMC1cdTAwMDOwXkHAsrKYpn56sbN1pD45eiNcdTAwMWKyfNP5Nvy6d1WNeqXC8FjfhbM8XGJ/PM1kZc11lkzkqVxu9Fx1MDAxOOz2XFx7+VxcnkBcbqqnsmQ6XHUwMDFhxzLPXHUwMDFizySp8JW+M21cYpWtXCJcdTAwMWVcdTAwMTU+qpZbk1x1MDAwMeJamHmO5zpcdTAwMGV1XHUwMDEwqc23cECY5VLsXHUwMDEwh9G5mLaSXHUwMDEw1lx1MDAwMGL6XHUwMDA1XHUwMDE1R1x1MDAxNdVQ+JNcdTAwMTGEXHUwMDE2XHUwMDA3VVx1MDAxZlx1MDAwZvvcrs335sdMa1x1MDAwM46lXHUwMDFhjbVpxNjyXHUwMDEwcT1GZ75r+ZBF/m3P5pRcdTAwMTKMcWkxI6aDoFx1MDAwMMKX+fyNRZY+5qmfm5tatCbQnXlcdTAwMTTVkVRbY+dcIkv5vlx1MDAxYVxmvk7GfyX88CxcdTAwMWRcdTAwMGZcdTAwMGVLX1xy2Gl5q/ul4WG1y+2Ze1x1MDAxMm1cdTAwMGUv7evp9v6BPls7+8jRfrtbkWXJzfN+XHUwMDFiUawuO5HK7eNVlchpXHUwMDFhiFx1MDAxOfZt10XE5sjjXHUwMDBl4aU9VPFcdTAwMDSM8TRcZqu2xJ9UdFmpxbtA0kacdYba5CmG2thQXHUwMDE0XHUwMDEw4i1N0e7le69cdTAwMTSldidFObeAXG6GLP+HoTpcdTAwMTNxnopcZljQwlLWxlK+wErmeraDXFxcdTAwMWK9Piu7kMihOr1cdTAwMDSJ1YInsT5W31x1MDAwYjS5XHUwMDE2hWKEsIsw41x1MDAxY1HW6LUrXCJcdTAwMTXeNdawgCxEvnMrojSUXHUwMDFiafrrb/VcdTAwMTTnXHUwMDEyXCIpXFyTxjNcdTAwMWKhXHUwMDFhXHUwMDE5aPd9mJvMXHUwMDFhqNdcbkSu7Fx1MDAxMKkgXGJrXGL0IVx1MDAxMFx1MDAwMT6zwTKCk2RqpGJcdTAwMTGetMXZScZM+nqGxVx1MDAxNkZS+qRmYlx1MDAwNCDkUJXdpVx1MDAxOXn+PdGXXyfDk+PRwblzQsefkvPLd89IXHUwMDE3W8hlhHheXHUwMDFiI1x1MDAxZNuxXHUwMDEwI9h+U0pSukhJj0GlmFx1MDAxM+tHalx1MDAwMqRcdTAwMTHFXHUwMDFlcV+fml3KXHUwMDE27MfnQ0rOXHUwMDBmtlx1MDAwMrw33tldu9zDn9+jYM78nu5/vr45INuHXHUwMDA3XHUwMDE5XHL+vMNTTLbdV/CLT4PB3u7EP/Q2iH1cdTAwMTKFf+/EXHUwMDE3ozdcdTAwMTX49sS/QOCZkVZe7a/eSOBcdPXmW3+UXHUwMDEzwinUYUKX34J3o+3dVlx1MDAxM9ZZTVxisZhdaNzbXHUwMDE1XHUwMDEz0lJMsDNfREBcdTAwMWFhXHUwMDE3wp2fKu8vx2GbvGPUaO2Q82M/kzJ+SspZo/+rSfkzMjgv5WWMnZSbVZJcdTAwMTbOMfxcdTAwMTTlQCZAv+FcXF7Bu0vxO+Wc43BcdTAwMGJe7lx1MDAxMXNaOYdcdTAwMTm1XFzOjYJcdTAwMTNujjdjXHUwMDFlslxid5vkLlx06Fx1MDAxMIsz7FJcdTAwMTcvyLlcdTAwMDebXuDGf9loXHUwMDE3wf1sJuZaZHpTxYGKR2CslFxm2OhPzbhryEKO7VLCoVx1MDAxNlKOXHTyylmb6YnU7D0tXHUwMDAyckBcdTAwMWPYg1x1MDAxYYxWr5+98kNQ19b4sXMpqX1cdTAwMTlcdTAwMDfPXHUwMDA2hThUX8Tg1Vx1MDAwME7KmLdcdTAwMTBcdTAwMTW24LWh2HVcdTAwMTXfKmyHPVx1MDAxNVY7zVx1MDAxN8JcbkWut5IoUlx1MDAxYdL/MVGxnk9zkc9ccsPvsVx1MDAxNMG8XHUwMDE1plW3zVx1MDAxN4LUeGzu3KqrXsWU4qa8/rLa2nttXHUwMDExweaoYbfysFL/NzuQwmdfpOmxXHUwMDA2pJVrXHUwMDAwYFbBY+GuJta/VvJms+Xb0lVxmDRcdTAwMTYpNCVHmundP6w8/Fx1MDAwYlxiYlx1MDAxObwifQ== ExampleApp()Screen() <p>This doesn't look much like a tree yet. Let's add a header and a footer to this application, which will create more branches of the tree:</p> dom2.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass ExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p> ExampleApp \u2b58ExampleApp \u258f^p\u00a0palette </p> <p>With a header and a footer widget the DOM looks like this:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1aa0/bSFx1MDAxNP3Or0DZL7tS4877UWm1glx1MDAxNpZ3aWFcdTAwMDNlVVWuPSReP2s7QKj633dsgu28XHUwMDFjXHUwMDEzXHUwMDEyNpXWQiGZmdy5nrnnzLk3/r6xudlKXHUwMDA3kWq92WypO8v0XHUwMDFjOzZvW6+y9lx1MDAxYlx1MDAxNSdOXHUwMDE46C6Uf07CfmzlI3tpXHUwMDFhJW9ev/bN2FVp5JmWMm6cpG96Sdq3ndCwQv+1kyo/+SN7PTF99XtcdTAwMTT6dlx1MDAxYVx1MDAxYuUkbWU7aVx1MDAxOD/MpTzlqyBNtPW/9efNze/5a8U72zH9MLDz4XlHxT0hx1tPwiB3XHUwMDE1Ulx1MDAwNLEkklx1MDAxNFx1MDAwM5zknZ4sVbbuvdZcdTAwMGWrsidralxyTi//7Jn/qItLwY5Odq7hh17nvJz12vG8s3TgPayDafX6sSp7kzRcdTAwMGVddeHYaS+bfKy9+F5cdTAwMTLqJSi/XHUwMDE1h/1uL1BJMvKdMDItJ1x1MDAxZOg2XG6KRjPo5ibKlrtsXHUwMDAxIDVcdTAwMTBcdTAwMTdYMIwpXHUwMDA2RJS3m31fSINRhFx05nTMo7ehp3dAe/RcdTAwMGLIr9Knr6bldrVjgV2OXHUwMDExyJKwcre3j/dZma+nnG4vzVx1MDAxYVx1MDAxMTJcdTAwMDQgTHD6YLuyXHUwMDFhKl99yCDjknAhip5sxmjfzsPg8/jq9cw4XHUwMDFhrlIryT5UvM1cdTAwMWPdXHUwMDE5j6FqXHUwMDFjVXbY/bgtrlx1MDAwZTBoR9euc9x7f+6eqm+FrZGgS9Vd2io6fryqM1x1MDAwYjto76vf+3JLOsHX+Pro+vh+f3u6WTOOw9umdpfu7sjoV00nLM1cdTAwMGXflfvTj2wzXHUwMDFkbilcdTAwMDNcdTAwMDTpXHUwMDAwpITgot9zXHUwMDAyV3dcdTAwMDZ9zyvbQsstMbhR8XdcdTAwMDL5I35WYVx1MDAwZsFM2DMuJEKYoca4r1/mNcU9XHUwMDAydbiHXHUwMDA0XHUwMDFhlOZcdTAwMTB8XHUwMDBl7tPYXGaSyIw1tqZgn0/Dvlx1MDAxY8c6oYBwKjFaPtSXXHUwMDE5h+V2h0F65tw/xJJBNcNcdTAwMDHEXHUwMDAw4lJcdTAwMDLKR0btmr7jXHJGdjBcdTAwMGZY7fnOnelHntqKol9/q65worQnuWky8p0tz+lmgd2y9L2peCTmU0efm8VcdTAwMDDfsW2vXHUwMDEyf5Z2xNQ24/0mZ1hcdTAwMTg7XScwvfNpftZCMVZW+lx1MDAxMIpT8EhcdTAwMTmcjcd87Vx1MDAwNGON8eh9ROdcdTAwMDcn51dXXHUwMDFjfGA+3btcbkkvXXc8YmhcdTAwMDDGXHRcdTAwMTFiXHUwMDFhXHUwMDFlXHUwMDExpVx1MDAwNuBcdTAwMDTBlVx1MDAwMpLSSUBcbq55YkxcdTAwMDA8XHUwMDFlwlx1MDAxNHLOKV9cdTAwMDEy6061I6ftfzlcdTAwMWFcdTAwMWO+9c47g0/3XHUwMDFkeb69dbK+h/DFQefm9oi8Oz6Kqf3nXHUwMDAw9Vx1MDAxMXnHlmBcdTAwMTdd2Pt7u651LLZcYjz3vfc7wVV3XHR2l76880TD9Fx0XHUwMDFiekturtt+6rZcdTAwMDdcdTAwMWbIXHUwMDE3c0dYd+q47y9hXHUwMDE1tlx1MDAwZb+ddtPww5dTR4pcdTAwMDO307uEnzrN7DZcdTAwMTE5XHUwMDE4gVx1MDAxMjUrXHUwMDEyOYTNXHUwMDE2OZhcbkkolOWIeaRaXHUwMDFmXHUwMDE260qqrJZUXHUwMDA1MzhcdTAwMDTymclNPaeSKZyKSmHxyKVQICQpYCtIaJZcdTAwMTmI01RcdTAwMGVcdTAwMDIjrTWq5syKlVxuZilcdTAwMWE+Mn5pimaOXHUwMDFhXHUwMDE4VzSFj7WYe8D8XHUwMDE00HExXHUwMDEzc1x1MDAxMFx1MDAxMEq0lm1eUKg/ktZcdTAwMTNzXHUwMDE4XGJDUlx1MDAwMTiejjnIXHImZSZkiMyulSFcdTAwMGZcdTAwMThEslFwXHUwMDE3XHUwMDAwxMSQXHUwMDFjMcrQpKrRniGh4bhcdTAwMDBcdTAwMTJz71x1MDAxNkWiwIwvgsQkNeN021x0bCfo6s7yLNNotPrZvG1gXHUwMDAwrNVcdTAwMWGRmlxmqURcdTAwMDSI4raz2zOjbGNcckKylIdSJlx0YkRWRlxmS2x1XHUwMDE5wnBwcai2VGDPdVxuSE2/gOtcZkn/UV5ip/Bcblx1MDAxOTp7ytVnXlx1MDAwN4KYz3JrOswn3PLMJH1cdTAwMWL6vpPq5T9ccp0gXHUwMDFkX+Z8PbcyfPeUaY/36tuq9o1cdTAwMTNBlFlcdTAwMWNVsOW7zVx1MDAxMir5h+L951dTR7cnQzi7KsFbWtio/l8oXHUwMDA3g1x1MDAwMM1OwpD2g2KEmlx1MDAxN0VOXHUwMDBmXHUwMDA3b4OrvnQv/Y8n9uG9+5f7z81/y1061uaQXHUwMDE31OSFMIJcdTAwMDRcdMr1a4XNM1x1MDAwM4RcdTAwMTBDY4Q9dldy0v84XHUwMDE304QlKIa0dOhFUjHn6F03OtlNXHUwMDBmLv0t92T70N/12zPU9/+p2NPtrmh5l252XoY3fcKG3j4jw3skxdnHblx1MDAwNqfKT0ArysQkJuOtXHUwMDE1ZoX64GWoeXmrfvvWlVkhrmVWzlxmJiBmkIFVM2uzjFxmccZYRqsvmpA9OVx1MDAxZZ+XkO1pXHUwMDE1o+JcdTAwMTdOyOYog/GErPDxXHUwMDE50oaBurSMIy2NafNSiJfsXHUwMDFlmGfx9o06oJ3j+z3w7XhcdTAwMWKsO1x1MDAwMDFhXHUwMDA2gZzAXHUwMDFjX9mvXHUwMDFiY9KGXHUwMDFiWId8MWBdlI3kOkmQ1VrWiyib40+nZF/sWIdcdTAwMDNcdTAwMTd+ci/aN1F/XHUwMDAw/1c2y1I2K1ren8XsPME0fcKG3q60dI04rXLNilx1MDAwNFx1MDAxM6SYjTdcdTAwMTeEzTHQvoAnKKb6/VtXwqawlrC5NCjEWFx1MDAwZVx1MDAwNdVcblx0u2FcdDvLPzlcdTAwMDGlmy8jmJ5cdTAwMTiPz1x1MDAxM0y7YZi+uGCaozfGXHUwMDA1U+FjLfRmVrBcdTAwMTma/UicoEBcdTAwMTJcZnDzXHUwMDEydn32tq7QXHUwMDAzwFx1MDAxMFRcYplVQ1x1MDAwNVx1MDAxNmhcdTAwMDR5WEslwXV+wIfIw6uDXHUwMDFlXHUwMDAyhqSMS0klg1JCMYlEgVxyqZNIJFx1MDAxONY+M4nGgUmAhFx1MDAxNEm0XHUwMDAwMJ9R0F48k5ld0G5Q8C2PuWqlmVBcdTAwMDBcdTAwMDGlXHUwMDAy6pVgXGLDyqjH6jdFXHUwMDE0wmH2KTBcdTAwMWVcdTAwMGWYX89cdTAwMWXxqT61XHUwMDE59YkhoONcZnFJXHUwMDAw1uGEJnyCyOA6USZMZ8Ukq1x1MDAxM6BcdKd+qmr27GDOrokwLu1tVP8/mc8gwLNcdI3RXGbmXFw011x1MDAxMvXqal1cdFxyXHUwMDBiXHUwMDAzScFcdTAwMDVikmnJUFx1MDAxZVRcdTAwMGaEpqVcdTAwMDTCNPuVnFxiQenqXGJNYoNBiHQ8M4xw5cHeks6kgVx1MDAwNOeSUo6ZoHLy2V/B9Z2QhTLCZ/HZokJj2XxcdTAwMDZcZk1j2lx1MDAxYlx1MDAwMfR2MSRk+ZxiwVx1MDAxZNyA+TOTXHUwMDEwPGzognxWrzxGfKJASL1OTGtcdTAwMDRcbinhXHUwMDEzLlx0gzJ9XGZcdTAwMDGYXHUwMDFmm1iIn5rNZlx1MDAwNXJ2TYTwLCrbXHUwMDE4mm+ZUXSW6ngrtkKHtGNcdTAwMGbVaXmPrVx1MDAxYkfdbk95vP46vzLBl69mxkIqu9PvPzZ+/Fx1MDAwYlx0sVx1MDAwYuIifQ== ExampleApp()Screen()Header()Footer() <p>Note</p> <p>We've simplified the above example somewhat. Both the Header and Footer widgets contain children of their own. When building an app with pre-built widgets you rarely need to know how they are constructed unless you plan on changing the styles of individual components.</p> <p>Both Header and Footer are children of the Screen object.</p> <p>To further explore the DOM, we're going to build a simple dialog with a question and two buttons. To do this we're going to import and use a few more builtin widgets:</p> <ul> <li><code>textual.layout.Container</code> For our top-level dialog.</li> <li><code>textual.layout.Horizontal</code> To arrange widgets left to right.</li> <li><code>textual.widgets.Static</code> For simple content.</li> <li><code>textual.widgets.Button</code> For a clickable button.</li> </ul> dom3.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal\nfrom textual.widgets import Button, Footer, Header, Static\n\nQUESTION = \"Do you want to learn about Textual CSS?\"\n\n\nclass ExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Footer()\n        yield Container(\n            Static(QUESTION, classes=\"question\"),\n            Horizontal(\n                Button(\"Yes\", variant=\"success\"),\n                Button(\"No\", variant=\"error\"),\n                classes=\"buttons\",\n            ),\n            id=\"dialog\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p>We've added a Container to our DOM which (as the name suggests) is a container for other widgets. The container has a number of other widgets passed as positional arguments which will be added as the children of the container. Not all widgets accept child widgets in this way. A Button widget doesn't require any children, for example.</p> <p>Here's the DOM created by the above code:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1d+1PiyFx1MDAxNv59/oop95e9VWO2+/T7Vt265Vx1MDAwYnVcdTAwMWSfOFx1MDAwYnrnllx1MDAxNSFcdTAwMDIjLyGIurX/+z1cdTAwMWSVXHUwMDA0Qlx1MDAwMihB2DvU7qhJ6Jx0n/Od7+tX/vz0+fOa/9j21v75ec17KLn1Wrnj9te+2OP3XqdbazXxXHUwMDE0XHUwMDA0f3dbvU4puLLq++3uP3/7reF2bj2/XXdLnnNf6/bcetfvlWstp9Rq/FbzvUb33/bfI7fh/avdapT9jlx1MDAxM95k3SvX/Fbn+V5e3Wt4Tb+Lpf9cdTAwMDf//vz5z+DfiHXlmttoNcvB5cGJiHlGjlx1MDAxZT1qNVx1MDAwM1NccuGCXHUwMDAzIzC4oNbdxpv5Xlx1MDAxOc/eoMFeeMZcdTAwMWVa29y+K3b2XHUwMDFlL5t5wXP7f0C+d212w7ve1Or1vP9Yf65cdTAwMDe3VO11vPBs1++0br1CrexX8TxcdTAwMWQ5Pvhet4VVXHUwMDEwfqvT6lWqTa/bXHUwMDFk+k6r7ZZq/iNcdTAwMWVcdTAwMTNkcNBtVoJcIsIjXHUwMDBmwVx1MDAwNeBQJkBcdTAwMTCquDBE8cHp4PvUYYRqo1x1MDAxOFBcdTAwMGVajtq11apjO6Bdv5DgXHUwMDEzWnbtlm4raF6zXHUwMDFjXqOhZGjkmfuvT6uZwzlcdTAwMDPA21x1MDAxOGZcYojBJVWvVqn69lx1MDAxYVx1MDAwMEdcdTAwMTMutVx1MDAxMs+3ipjiXHUwMDA1TUJcdTAwMDVQ4FLqsEmtXHUwMDAx7f1y4Fx1MDAxYv9cdTAwMWSt0qrbab9U3VrX/lx1MDAxMTHe2r0z6lhR54o0u5bnXHUwMDFi5sdlsVrq7JOTk8vCuVuQg7KGPNH3XHUwMDFl/LXBib++pFx1MDAxNXt4uv90kXso+p1tb72a71x1MDAxNlx1MDAxNfCb8cW6nU6rP225XHUwMDE5mTv3Yoeu/jLtXHLDYl9+XHUwMDBim73XLrvPwUulJFxco1trqfXgfL3WvMWTzV69XHUwMDFlXHUwMDFla5Vuw3j/XHUwMDE0sTeGMkN2RiGG6NGjr1x1MDAxMCOAXHUwMDE50IqEXHUwMDBlO1x0YtJreVkhRqVBXGZFXHUwMDA0XHUwMDAywoFTot6PMX7HbXbbblx1MDAwN1x1MDAwM3dcZs6oyThcdTAwMDNxXFxB41xmXHUwMDEwakK754Yr8/TO0Fx1MDAwYlpNP1978oKyXHUwMDFjQTUnIFx0KGOIUENX5dxGrf441LCBXHUwMDFio+VcdTAwMWLt9q//iFZ110NcdTAwMTOCMsXQxVx1MDAxYvVaxfr5Wlx0XHUwMDFmyutcZoWAX8OUPbigUSuX61x1MDAxMX8soVx1MDAwNS6W2dmfJn22OrVKrenWz4dcZkxccsmOV/KffXJMXFxcbkWS4pIqIyhorvTUgVx0rdO9XHUwMDFi/fitcX2+sd+oXHUwMDFlVcVV/2TZXHUwMDAzkyrHXHUwMDAwZ1x1MDAxNORzYFx1MDAwZcUloO8oYFxu/3/O/dmFpVx1MDAxOFx1MDAxM4daOVx1MDAxOKacKVx1MDAxMYtHrlxyIZpcbj3/eEzLcGfyxtvtq1x1MDAxZtWzwl3ha+OSi527+vLm+cLvf9z3v/Ltw69cdTAwMWRR3n2EXHUwMDFl8O2EhDxTuVAo7+/lbkuHeoPT80b9eKd5WZlDuVx1MDAxOVVvRsWq+9pe7m6HNjo7V+Vt/1x1MDAxZe6P6/OoXHUwMDA1Tjpt2rwvXHUwMDFkXHUwMDE1clx1MDAwN0e6sF1oXHUwMDFk+lx1MDAwN+8qd1x1MDAxMo9cdTAwMWFfQVOae/2jsXFSv5dU+OubZVM5OGo9PE5n7rLwMy7V6NFBXHUwMDFlkIgykis2fVx1MDAxZUh3tyXNXHUwMDAzKK1S8lx1MDAwMNdcdTAwMGXD9jCv/Cy7PMDH8TFcdTAwMTbDf6VBWDKTgc7Lmo9cdTAwMDFcdTAwMTk6msK/8qWO5zWTKJhcdTAwMWG6fm5cdTAwMTRsXHUwMDAyi1x1MDAxOaVgXHUwMDAzXHUwMDFiU1x1MDAwM+858MdEnoakwFx1MDAwM+CCXHUwMDEzXHUwMDFkYdyT4i49i35I3FEyMfCMcDTlhqlxgYcs1GFcXFx1MDAwZlximMgs8IjDjSQmyrVcdTAwMDbxx7hjXHUwMDE0SCEhTsRcdTAwMDQzmnEuYfZAXGasW3Qgdn2342/WmuVas4Inw3yGwVjq2fuuXHUwMDEzhzAqXHUwMDA1R3RRXHUwMDAyQZGE1W5cdTAwMWbPbdtmQ1x1MDAxMSlQR1xuIVxyXHUwMDA3yU3kipfeyDRF83LxILGuec3yRKOIUehPXG6lXHUwMDFj/idUqExcdTAwMDZWgYMyLyDMQe9cdTAwMThlKsms8VFcdTAwMWUzq+52/a1Wo1HzsfpPWrWmP1rNQX1u2PCuem559Cw+VvTcKFx1MDAwZbRticOkO/ztc1x1MDAxOCnBXHUwMDFmg9//+2Xs1etxXHUwMDE3tp+I84YlfIr+fJN0pJSz0cOv0MUlw3yKXjo1dDVcdTAwMGVcbnDyXGJ721vffpQ2L2BcdTAwMDOKXHUwMDA172Ohi09CLkaZI1x1MDAxOJJcdTAwMDFuOOJTRIpcdTAwMDVfZ9rRRFx1MDAxM2OoXHUwMDA0TcjSSEfJXHUwMDA1YGTDgnuIycPW9UFLXlx1MDAxZJT13f3ZUfuGnlx1MDAxZPKfynFeyjGj6l2tYucvSCdcdMfxXHUwMDBmXHUwMDEyXHUwMDE2+4qzXHUwMDFmLfAoiYDEXGJaY1wipVxiUtN3wKe33rKCtU5cdTAwMDNrRVx1MDAxY8OxNZShXHUwMDAxWC+BwFx1MDAwM6Q7iohcdTAwMGbocDczeOP7XHUwMDA03lx1MDAxZdJcIq+zYIE3gWuMXG68gY3v4Epa0KTo41x1MDAxMt2NSja9zDvYOqnkjqhqyZvzvavTi2qp+vWDx78mhlx1MDAxZlx1MDAxMlBkQ1x1MDAwNFx1MDAwNZ4kmqlcYvlcYr7OiaMkRiVjWiFtJ9nJvFx1MDAxOclcdTAwMTJcYoPijrxB3L2HK12RnD686lx1MDAxNVx1MDAwZp425FaDbPbORK/4kyvNiytlVL0/i/2QvvvxXHUwMDBmMjNcdTAwMDWbJem9jYIpZUZcdTAwMGZcdTAwMGYmQVx1MDAxMKlcdTAwMTjRfHpcdTAwMGWW3nxLmlx1MDAwNFx1MDAxOE1LXHUwMDAyXG5cdTAwMWNtXGZRQFnWSWA6XHUwMDBlXHUwMDA2XHUwMDA0oVx1MDAxZqniR3SyL46D5Votf+FcdTAwMWNsXHUwMDAyh1x1MDAxOeVgXHUwMDAzXHUwMDFiUyMvuZNd8sTIk8LYvs7pIy9dZC7p6JamXHUwMDBlhlx1MDAxNuGGcEKJNEORx4hxJDOCaFx1MDAwM1ooynl2kWdQaFx1MDAxOabBSKBcXI2LQ2rn63BGXHUwMDE4wlx1MDAwMGgqqVx1MDAxOY1LKvCo5lGVtrA+9zfFZXKf+1x1MDAxNH3SYcqLdoZzQTUxQiCY2s68cETyc9hDLzmAeVx1MDAxZLJk7OWCyX3uQ0alq6Vho7CtXHUwMDEwuLlcdTAwMTRcdTAwMWFcdTAwMTRmu7hNXHUwMDE0XHUwMDFjXHRCXGKtJeVcdTAwMTRcZo/ZtFJcdTAwMWTuid5sP3E/XHUwMDBly/tcdTAwMTT9OTOcof8ndr1TJrF6XHKfYT5lOmVbTkCTTDvAqMK4tLOhR1x1MDAwMY1Sh1wi2+DUgLQ/Mlx1MDAwNDTJXHUwMDFkaWPMoFSkhof9SpFZ29QhdpYrXHUwMDA1jf9Hc81gNpfSXGZcdTAwMTBkVlx1MDAxZtBe0YA41FBlQYrhXHUwMDAzXHUwMDAzeiRcdTAwMGKD41x1MDAwNVxyXHUwMDE0Nlx1MDAxMuproGiMXHUwMDE2KP4jV7xlsG7SXHUwMDE4XCJxbIojXHUwMDFjMHtcYkFcdTAwMDVXMZO0g4RcdTAwMDBcdTAwMTDFlE2ETOskk8ZcdTAwMTOYlYazRFdcdTAwMGVOxpx4XmiGzZ9cdTAwMDRmKFx1MDAwNdArpJl+XHUwMDFjMX0u1pJOgUA1ZFeYIEkzXFxhK1xmz1xyt8OMhklCMckwxSC7rmnpXHUwMDE4XHUwMDE0XtyuMEF6xWSYZFwi5Fxmg1xiXHUwMDA1kUJYZaBRxsWwjGDcc6pM+IyrimVvJmdAQFAk2kZgXHUwMDE2UiQ+e8Jgi2rkb1x1MDAxYUOKMKNeqcGM3Kx0ly/+vv/Acr9fX5y6hzfXh+R4N8EmgsmQXCJhMVx1MDAwMVx1MDAxZFHAY0ZR7mhO0dHAXHUwMDAwIKc0sNJwtp7ozvZcdTAwMTN35Fx1MDAxOfEstcNcdTAwMWaISOzroUhJXHUwMDE4g1kmdqW385KiXHUwMDFh5n5cdTAwMDdcdTAwMTBcbjhcdTAwMTOgsFx1MDAxMUKkeJ5cdTAwMWVhXHUwMDFjhjrBKNQoQI1cdTAwMWGxa55cZi1EzLDHP0wpr7jFgGk0KFSkXHUwMDBi6ep/8vvC2z2R3fLvKt8/qNxvbVx1MDAxZW/+7OqfV1d/RtW7WsVmNU9/tWrhXHUwMDFk0/RcdTAwMTPKnTQyMf5BpjT3x7fqU1x1MDAxOfLFYt4tnpeqV4WN+lnCmo2ZXHUwMDFh7eBcXO+c9HKHXHUwMDA3Z113vXrQudl4qO9OV+5rXpwjXHUwMDBiS02xyatJVeJyXHUwMDA14NoopF7TS4Z0d1vW5FxuLC25XG6kcotJrmJMco0ssHxNrlx1MDAxMrOrnbKbQXbNeiSFyqGjKSMpW69jXHUwMDFjv35v2lx1MDAxM7Xyv77bjVx1MDAxN+qtyve1783xIyxcdTAwMDKGylx1MDAxOVxmoNS9m2Hnn2l8ZVx1MDAwMmNcdTAwMWNcdTAwMWRfmWj5O6gwJ4mDL+jAXHUwMDAwis6wvcTR3vXm7Teyv5477uzU1pv89NvjzrJcdTAwMDer5Kg17LwzrpRcclZcdTAwMThcblZhuGNQh2CsZlx1MDAxZKxcdTAwMTFNXHUwMDFlMuF4b6TQilx0XHUwMDEzXHUwMDFkgF1cYlx1MDAxNW7vNftcdTAwMTe3x9c7ZVLNre+vXHUwMDFmk3rx8CdcdTAwMTWeXHUwMDE3XHUwMDE1zqh6V6vYrKjwatXC/KlwRuZOYtjjb5g9XHUwMDEzTi13v3/WKPTFjr7eJFx1MDAxN/6RPKrRq4TJ7TOVu9voXHUwMDFll76dNd2LgtgvbNx5lav1/nTlLlxyc+cscVwirFCEK1x1MDAxMd1cdTAwMTllXHUwMDEyXHUwMDE5SHe3pSVcdTAwMDNcIoVcZkhiXHUwMDFjvlx1MDAxODKgx5CBMczdjklcdTAwMTi7XHUwMDA2/O/M3PeQXHUwMDEwP1lcdTAwMGVcXP/VXHUwMDFlfybBpbrb7XpdZMLXPd9vNbuLJvFcdTAwMTPIbmyi+lxmXHUwMDBm8Vx1MDAwZT4vk/eM4VRwXCJcdTAwMDUjU4dweX/f39l+2uHXrFuu7l+oRv/SXfZcdTAwMTBcdTAwMTZ2N1x1MDAwMCUkl1JcdTAwMDCG8PB4nZLS4YBS1273xIBnuJXTlHzeLmoxoFx1MDAxNzyJfbt597he8lxi9b8+Ulwi+24+d978SefnReczqt7VKjYrOr9atZBcdTAwMTWdX61aqJvNLX29u8W3pPTy51x1MDAwN1x1MDAwZpVcXG5KevxG9TH+Qf6P2Hx0ksdo11x1MDAxZWFMaVxyYno6n+5cdTAwMTfLylx1MDAwNVx1MDAwNEvjXHUwMDAyii6KXHUwMDBijKPzKsZcdTAwMDVcZppIuFAruKp0eja/XHUwMDE5MN1cYlx0/r524SHx/fL8173bqblNXHUwMDFmKXG3Vyrh0yXzejVcXPiceP1cdTAwMDTSO8rr3/Y472D4KD6TwtpQ6+UgZpiR97Tlnp6ap7PKZvGylds4h0b+dNmjWlx1MDAxOe1IXHUwMDAzxE5cdTAwMDWFmEhXUjh2wi5+1FIwfCCUMY46fcG7QbKvxW5+s974arbyxe5cdTAwMWb8x5Ms/tzTY25cdTAwMTQ/o+pdrWKzovirVVx1MDAwYllR/NWqhflT/IzMnaRcdTAwMWPG33BKa98xvvDy28crh2h/cmxcdTAwMDVcdTAwMTNcdTAwMDXgTNLplUN6+y0px9CEpXFcZkVcdTAwMTbFMaZTXHUwMDBlVFx1MDAxOY5qLjqz6v9DOlx1MDAxY7XGUG1cdTAwMGZcdTAwMDOrs2jdMIFKT6FcdTAwMWImPUtqMKeLXHUwMDA2XHUwMDAxyX1cdTAwMDFcdTAwMDJQz3NcdTAwMDPTr0ms9o+L9fouK/hf20y15GX+zr1e9ohmmjtcdTAwMTiqWmKYXHUwMDA0fVx1MDAwMWIopIWRjkBtpbnKXFw2jFm6M2ZgwFx1MDAxMIFBRt+yd+l7ZMN957Kfq2z+qKpK+3ZrY+Obq9tnP2XDvGRDRtW7WsVmJVx1MDAxYlarXHUwMDE2spJccqtSXHUwMDBik3j4+Fx1MDAxYi4hX1x1MDAxNjqRL2thqN1cdTAwMGV++uSaXs1Lm1xcTVpylYQuKrnqMcl1XGZfJswgX1ZvWFx1MDAwNrs6dDnvu8hgXyaNn37byZ/vXHUwMDFmXHUwMDFmfbF/jM4+uet5Xb+WOokmXHUwMDFi0jyBSca283/rXHUwMDEzpcZ14uJ3mVx1MDAxONacXHUwMDFhLYDNsJAlfcXQkoZ1sP0/U6hcdTAwMTCQjGL0XHUwMDBl78sqXHUwMDE4c4BJxlXmKlx1MDAxOIyDXHUwMDE1zijeXGLsmmFcdTAwMTVcdTAwMGZyyZ3xu0RyorRcdTAwMWHaROpvseR9luXlQjBit8IhWIfcaFx1MDAxYbnqdTtcIq00XHUwMDExxK7GJnY19stcdTAwMDVcdEveh1x1MDAxZmOVlp0ne5L9XGZ8KCznU/Tn7JtcdTAwMDFFXHUwMDEy/ygz0NpcbrxcdTAwMTmW16RPiV5SXGKRXHUwMDAwXHUwMDBlXHUwMDE3WNtCWM+iw3tcdTAwMDFcdCZcdTAwMWNcdEoxXHUwMDA1zDBcdTAwMDZmxK45QlxikY7dt9A6ONGM6DFcdTAwMTBcIrD57Yt77IxcdTAwMDBjKJD4XHUwMDBiRYDYxXJcdTAwMWM+4IVcIktcdTAwMDEmxOFKcFCSSqVcdTAwMTFRTPw1XHUwMDFm2lx1MDAwMWk4J4Tad3wgXHUwMDE3TMeSJJPS59eOmKSEXCJUMlwiqNAmvpdcdTAwMTF37I5mTHGBXHUwMDE2XHUwMDBiyVTMpFVcdTAwMDKxZFe2n7hcdTAwMTPPXHUwMDBizCRJ3jaDM/vuVD3DsED6QMmSoplcdTAwMTLSXHUwMDAxu1x1MDAxZj/XytjN3IZljlx1MDAwMcegrmBcdTAwMTK4nYmhR+ya42ZAxNFcdTAwMDKBk1x1MDAwMlD7hoKw2kM+JFx1MDAxY5RiRiq7ZT5nXHUwMDEw31ODW9/h5i1vjV1mLJtcdTAwMDE4wM7+4kiJhGG2VaPvSVx1MDAxYeyJSKyu5VxiL1x1MDAwNONN67ehWfrowDBbXHUwMDAzKkBSXHUwMDEwOliCQlh8IzTlIFx1MDAwMCuqXHUwMDA3RGU1gSzRi4OTo/47L1x1MDAxOItsZVx1MDAxN+NklGKiYDO8TTF9ouiyolx1MDAxOJNcdTAwMGV7fte1XHUwMDA0VFx1MDAwNsNbPVtcdTAwMTSzkk4pad/LrNiIXfNDMbxcdTAwMTFcYlRnRnOmkVSNQzHlgFx1MDAwNo2pXHUwMDA1qN2bKbZcdTAwMDSKoZnYZvxvRsimXHUwMDA2seC9YkhcdTAwMDFcdTAwMDBZqaaMKjlmL0dKXHUwMDFkgdyIXGIuUPNgXHUwMDEye+N2s+lzI0esYsq+XCJcdTAwMDVcdTAwMThcdTAwMTNKo9aKb2kmXHUwMDFkXGZuJIlcdTAwMDSI3Ss0btMqYdl6ojPbT8yNk8Ds08tcctbcdtv2dnmD1kC/rpVf+lx1MDAwMMOnXFy7r3n9zXjc/XJcdTAwMTN8bMdXUJ9cdTAwMTaJPPusf/716a//XHUwMDAxsk3fXHUwMDAxIn0= App()Screen()Header()Footer()Container(    id=\"dialog\")Horizontal(        classes=\"buttons\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")Static(    QUESTION,        classes=\"questions\") <p>Here's the output from this example:</p> <p> ExampleApp \u2b58ExampleApp Do\u00a0you\u00a0want\u00a0to\u00a0learn\u00a0about\u00a0Textual\u00a0CSS? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258f^p\u00a0palette </p> <p>You may recognize some elements in the above screenshot, but it doesn't quite look like a dialog. This is because we haven't added a stylesheet.</p>"},{"location":"guide/CSS/#css-files","title":"CSS files","text":"<p>To add a stylesheet set the <code>CSS_PATH</code> classvar to a relative path:</p> <p>Note</p> <p>Textual CSS files are typically given the extension <code>.tcss</code> to differentiate them from browser CSS (<code>.css</code>).</p> dom4.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal\nfrom textual.widgets import Button, Footer, Header, Static\n\nQUESTION = \"Do you want to learn about Textual CSS?\"\n\n\nclass ExampleApp(App):\n    CSS_PATH = \"dom4.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Footer()\n        yield Container(\n            Static(QUESTION, classes=\"question\"),\n            Horizontal(\n                Button(\"Yes\", variant=\"success\"),\n                Button(\"No\", variant=\"error\"),\n                classes=\"buttons\",\n            ),\n            id=\"dialog\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p>You may have noticed that some constructors have additional keyword arguments: <code>id</code> and <code>classes</code>. These are used by the CSS to identify parts of the DOM. We will cover these in the next section.</p> <p>Here's the CSS file we are applying:</p> dom4.tcss<pre><code>/* The top level dialog (a Container) */\n#dialog {\n    height: 100%;\n    margin: 4 8;\n    background: $panel;\n    color: $text;\n    border: tall $background;\n    padding: 1 2;\n}\n\n/* The button class */\nButton {\n    width: 1fr;\n}\n\n/* Matches the question text */\n.question {\n    text-style: bold;\n    height: 100%;\n    content-align: center middle;\n}\n\n/* Matches the button container */\n.buttons {\n    width: 100%;\n    height: auto;\n    dock: bottom;\n}\n</code></pre> <p>The CSS contains a number of rule sets with a selector and a list of rules. You can also add comments with text between <code>/*</code> and <code>*/</code> which will be ignored by Textual. Add comments to leave yourself reminders or to temporarily disable selectors.</p> <p>With the CSS in place, the output looks very different:</p> <p> ExampleApp \u2b58ExampleApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aDo\u00a0you\u00a0want\u00a0to\u00a0learn\u00a0about\u00a0Textual\u00a0CSS?\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u00a0Yes\u00a0\u00a0No\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p>"},{"location":"guide/CSS/#using-multiple-css-files","title":"Using multiple CSS files","text":"<p>You can also set the <code>CSS_PATH</code> class variable to a list of paths. Textual will combine the rules from all of the supplied paths.</p>"},{"location":"guide/CSS/#why-css","title":"Why CSS?","text":"<p>It is reasonable to ask why use CSS at all? Python is a powerful and expressive language. Wouldn't it be easier to set styles in your <code>.py</code> files?</p> <p>A major advantage of CSS is that it separates how your app looks from how it works. Setting styles in Python can generate a lot of spaghetti code which can make it hard to see the important logic in your application.</p> <p>A second advantage of CSS is that you can customize builtin and third-party widgets just as easily as you can your own app or widgets.</p> <p>Finally, Textual CSS allows you to live edit the styles in your app. If you run your application with the following command, any changes you make to the CSS file will be instantly updated in the terminal:</p> <pre><code>textual run my_app.py --dev\n</code></pre> <p>Being able to iterate on the design without restarting the application makes it easier and faster to design beautiful interfaces.</p>"},{"location":"guide/CSS/#selectors","title":"Selectors","text":"<p>A selector is the text which precedes the curly braces in a set of rules. It tells Textual which widgets it should apply the rules to.</p> <p>Selectors can target a kind of widget or a very specific widget. For instance, you could have a selector that modifies all buttons, or you could target an individual button used in one dialog. This gives you a lot of flexibility in customizing your user interface.</p> <p>Let's look at the selectors supported by Textual CSS.</p>"},{"location":"guide/CSS/#type-selector","title":"Type selector","text":"<p>The type selector matches the name of the (Python) class. Consider the following widget class:</p> <pre><code>from textual.widgets import Static\n\nclass Alert(Static):\n    pass\n</code></pre> <p>Alert widgets may be styled with the following CSS (to give them a red border):</p> <pre><code>Alert {\n  border: solid red;\n}\n</code></pre> <p>The type selector will also match a widget's base classes. Consequently, a <code>Static</code> selector will also style the button because the <code>Alert</code> (Python) class extends <code>Static</code>.</p> <pre><code>Static {\n  background: blue;\n  border: rounded green;\n}\n</code></pre> <p>Note</p> <p>The fact that the type selector matches base classes is a departure from browser CSS which doesn't have the same concept.</p> <p>You may have noticed that the <code>border</code> rule exists in both <code>Static</code> and <code>Alert</code>. When this happens, Textual will use the most recently defined sub-class. So <code>Alert</code> wins over <code>Static</code>, and <code>Static</code> wins over <code>Widget</code> (the base class of all widgets). Hence if both rules were in a stylesheet, <code>Alert</code> widgets would have a \"solid red\" border and not a \"rounded green\" border.</p>"},{"location":"guide/CSS/#id-selector","title":"ID selector","text":"<p>Every Widget can have a single <code>id</code> attribute, which is set via the constructor. The ID should be unique to its container.</p> <p>Here's an example of a widget with an ID:</p> <pre><code>yield Button(id=\"next\")\n</code></pre> <p>You can match an ID with a selector starting with a hash (<code>#</code>). Here is how you might draw a red outline around the above button:</p> <pre><code>#next {\n  outline: red;\n}\n</code></pre> <p>A Widget's <code>id</code> attribute can not be changed after the Widget has been constructed.</p>"},{"location":"guide/CSS/#class-name-selector","title":"Class-name selector","text":"<p>Every widget can have a number of class names applied. The term \"class\" here is borrowed from web CSS, and has a different meaning to a Python class. You can think of a CSS class as a tag of sorts. Widgets with the same tag will share styles.</p> <p>CSS classes are set via the widget's <code>classes</code> parameter in the constructor. Here's an example:</p> <pre><code>yield Button(classes=\"success\")\n</code></pre> <p>This button will have a single class called <code>\"success\"</code> which we could target via CSS to make the button a particular color.</p> <p>You may also set multiple classes separated by spaces. For instance, here is a button with both an <code>error</code> class and a <code>disabled</code> class:</p> <pre><code>yield Button(classes=\"error disabled\")\n</code></pre> <p>To match a Widget with a given class in CSS you can precede the class name with a dot (<code>.</code>). Here's a rule with a class selector to match the <code>\"success\"</code> class name:</p> <pre><code>.success {\n  background: green;\n  color: white;\n}\n</code></pre> <p>Note</p> <p>You can apply a class name to any widget, which means that widgets of different types could share classes.</p> <p>Class name selectors may be chained together by appending another full stop and class name. The selector will match a widget that has all of the class names set. For instance, the following sets a red background on widgets that have both <code>error</code> and <code>disabled</code> class names.</p> <pre><code>.error.disabled {\n  background: darkred;\n}\n</code></pre> <p>Unlike the <code>id</code> attribute, a widget's classes can be changed after the widget was created. Adding and removing CSS classes is the recommended way of changing the display while your app is running. There are a few methods you can use to manage CSS classes.</p> <ul> <li>add_class() Adds one or more classes to a widget.</li> <li>remove_class() Removes class name(s) from a widget.</li> <li>toggle_class() Removes a class name if it is present, or adds the name if it's not already present.</li> <li>has_class() Checks if one or more classes are set on a widget.</li> <li>classes Is a frozen set of the class(es) set on a widget.</li> </ul>"},{"location":"guide/CSS/#universal-selector","title":"Universal selector","text":"<p>The universal selector is denoted by an asterisk and will match all widgets.</p> <p>For example, the following will draw a red outline around all widgets:</p> <pre><code>* {\n  outline: solid red;\n}\n</code></pre>"},{"location":"guide/CSS/#pseudo-classes","title":"Pseudo classes","text":"<p>Pseudo classes can be used to match widgets in a particular state. Pseudo classes are set automatically by Textual. For instance, you might want a button to have a green background when the mouse cursor moves over it. We can do this with the <code>:hover</code> pseudo selector.</p> <pre><code>Button:hover {\n  background: green;\n}\n</code></pre> <p>The <code>background: green</code> is only applied to the Button underneath the mouse cursor. When you move the cursor away from the button it will return to its previous background color.</p> <p>Here are some other pseudo classes:</p> <ul> <li><code>:blur</code> Matches widgets which do not have input focus.</li> <li><code>:dark</code> Matches widgets in dark mode (where <code>App.dark == True</code>).</li> <li><code>:disabled</code> Matches widgets which are in a disabled state.</li> <li><code>:enabled</code> Matches widgets which are in an enabled state.</li> <li><code>:focus-within</code> Matches widgets with a focused child widget.</li> <li><code>:focus</code> Matches widgets which have input focus.</li> <li><code>:inline</code> Matches widgets when the app is running in inline mode.</li> <li><code>:light</code> Matches widgets in dark mode (where <code>App.dark == False</code>).</li> </ul>"},{"location":"guide/CSS/#combinators","title":"Combinators","text":"<p>More sophisticated selectors can be created by combining simple selectors. The logic used to combine selectors is know as a combinator.</p>"},{"location":"guide/CSS/#descendant-combinator","title":"Descendant combinator","text":"<p>If you separate two selectors with a space it will match widgets with the second selector that have an ancestor that matches the first selector.</p> <p>Here's a section of DOM to illustrate this combinator:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1dWXPiSFx1MDAxMn7vX+HwPOzsRKOp+5iIiVxyfODbbjdu293bXHUwMDEzXHUwMDBljGSQXHUwMDExXHUwMDEylmSwPTH/favARlx1MDAwMiRZXHUwMDFjYmCnefAhQSmVyuP7KiuLPz9sbGyGz1x1MDAxZGvzt41N66lec2zTr/U2P+rjXctcdTAwMGZsz1WnUP//wHv06/13NsOwXHUwMDEz/Pbrr+2a37LCjlOrW0bXXHUwMDBlXHUwMDFla05cdTAwMTA+mrZn1L32r3ZotYP/6J+ntbb1e8drm6FvRFx1MDAxNylZplx1MDAxZHr+4FqWY7UtN1xm1Oj/Vf9vbPzZ/1x1MDAxOZPOt+phzW04Vv9cdTAwMDP9UzFcdTAwMDFcdTAwMTEg44dPPbcvLVx1MDAxNFx1MDAxY1x1MDAwYimAkMN32MGOumBomer0nVx1MDAxMtqKzpj9a1x1MDAwNVx1MDAwN7x5b1Pil1x1MDAxOWx/2nX2v5Ur0XXvbMephs/OQFx1MDAxN7V689GPSVx1MDAxNYS+17KubDNs6quPXHUwMDFkXHUwMDFmfi7wlFx1MDAxYaJP+d5jo+laQTDyXHUwMDE5r1Or2+GzPlx1MDAwNsDw6EBccr9tREee1H+UY4MxTlx1MDAwNGFcdTAwMDBxQfDwrP48ZtJcdTAwMDBEQCoxoOokXHUwMDE5k2vbc9SzUHL9ZDHOXHUwMDAxiCS7rdVbXHIlnmtcdTAwMGXfXHUwMDEz+jU36NR89cSi9/Xe7pix4bGmZTeaoTooRHQ9q693iFx1MDAwMFaCMFx1MDAxYd2FvkrnwOxcdTAwMWLBXHUwMDFm43pr1vzOq342XHUwMDAz/U9MQi3c7rhcdTAwMDXFrSj2bKl7V7rCsve1aVx1MDAxZcKb26dcdTAwMTPGYDBcdTAwMWNrxORC6yncXHUwMDFjnvjrY9aw7W9fji727ra64ZfLw9557+Wk0blNXHUwMDFltub7Xi/vuFeHl93eMdk5OfapufeMXHUwMDFlXHUwMDEx2WFcdTAwMGJcdTAwMThcdTAwMTddmVx1MDAwN/uVVv1ElFx0vGg7Z7vut8ZcdTAwMDLGLUi96zXs8ePOPpDXXHUwMDA3L0934qhSMZ9uat3eXHUwMDBm5S5m2H1rXHUwMDBmXHUwMDA33bpdvtm+XHUwMDBi7ytcdTAwMDe75fOr47mUO1wixce8N5JT3Obxdlx1MDAwZmBcdTAwMGK07zudg6Pj7svN+U6YT9zXv6JQ+Ngxa4OspYIsJJBcIiZcdTAwMDSPwq1juy110n10nOiYV29Fie5DTOCJXHUwMDE0O3L/I9lcdTAwMTWK8cNv2ZVzKiHjMMpZ7yXXbLNY2eQqspKrIFx1MDAwNl1OcqVcdMmV8vHkilR2RVx1MDAxY9LosS0sty7SXHUwMDFho4fuuWHVfunDNTZytFJr287zyHPrm6mSdFudrtmu5f/83dUnbPP375umXXO8xvfN7+6/41pcdTAwMGUsJY1cdTAwMWWeopFxyo7d0Ca+6Vh3o7ZcdTAwMWbaXG6oXHUwMDBlT7dt04xDz/rbtVx1MDAwZvJcdTAwMDBGz7dcdTAwMWK2W3Mu8kqe6abZSJhClOarkCtcdTAwMTAsOVx1MDAxMjy3s55fPDjWS3nr8XHr5MA5Obt2ryv3f6+z0nd9lVx1MDAwMYNCXHRcYodcdL5KMTOkgJwqV9W+SlN9XHUwMDE19F9z+KpcdTAwMDSTvirYhK9cdTAwMDKAMYNAXHUwMDE24KxZiem+etjYvfDc7Va9xfyn1sG31kNKYvpcdTAwMDGEp1x1MDAxZrcg9a7XsEVcdTAwMDHh9dLChd/c6d12rYtcdTAwMTBcdTAwMWY6XHUwMDEwiZfWeWc+xLqOWlg8blx1MDAxZoyLn1x1MDAxZkpfkajUQ9JcdKrW887Z9lx1MDAwM1/AuGZcdTAwMWJcXG57h597leujbafb8XdvXHUwMDFiuFCekaz4aNjXvzJcdTAwMTFcdTAwMThmJMr/RfFcdTAwMDGKU/lcdTAwMDCkilx1MDAwYlxiRkGUV9/DXHUwMDE42fa2qlx1MDAxOINmYVxmXG5ccrJcdTAwMWOMIVx1MDAxMjDGJFx1MDAxZpCAXHUwMDEzIFxiL2CubZHWOFx1MDAxZlx1MDAxZthXMPtFI2vnZ318XHUwMDAwretOLVxirEDh69vHMPTcYNnU4Fx1MDAxZFx1MDAwND1OXHKmuYlM581mXHRcXKbOlzPMXHUwMDA1Izj/bPmX8PzCe3q+2eptnZ1+uXj5/PKpzFL8d8xcdTAwMGb/LjpPODGApFxiXG7JuXJfQkb8lyNqKCpcdTAwMGJcdFx1MDAxM8rJXHRcdTAwMTfz+O9PXHUwMDEw3VxuoajxzFxmXHUwMDAxXHUwMDEyrKRcdTAwMDScocW7b1ZcdTAwMDZkrOneyy77elolnYY8wkfHj5X5gcBcdTAwMGaGUKh612vYolx1MDAxOMJ6aaEohrBeWnDk1ra43dsm24xZ1Yujp0alssK2sHyCkHwjOcWtXHUwMDFmnV6QzrF/+tXfvjWt44483vuyuELEUoiHiNWWx4lcdTAwMDeTXHUwMDEwXCKJRX7ikW1cdTAwMTcrWokgXFxmQlx1MDAxNypccrwo6DI99YBcdTAwMTFsfJvepLpARPCyS1x1MDAxMUulXHUwMDFlW31Y/vP3za+WwubJ9Fx1MDAwMpKRj1xy+UNd3Y7lz04w3oHf41x1MDAwNGNcXNRMR8wmXHUwMDExXCK2pGbMXHUwMDFiXHUwMDExXHUwMDA0XGZDOUVZkMPKWYvsud3mXvUlaODnXHUwMDEz379ebVx1MDAxNsEkMqBSXHUwMDAye3XF0UlcdTAwMDBNXCKo1GW41SBcdTAwMTFAeyElYMkk4iGQlaP2WZVcdTAwMWOet2jFNe/RzqfLXHUwMDFmJGJRJKIg9a7XsEWRiPXSQlEkYr20UFx1MDAxNIlYLy0svijyXHUwMDFlN0m+kWjY17/+flx1MDAwZSFlOodAurTBXHUwMDEwyT/5mf38VpRDMMmzgFx1MDAwYtVcZmNBwGVcdTAwMTFcdTAwMTSCS0VcdTAwMWZcYohhmv9nXG5x6i2bQbxcdTAwMDO9U1x1MDAxOcRA0kwvXHUwMDFjXHUwMDA0l1x1MDAwNDdkIL2EXGIh1oYp83thdm15NUuITFx1MDAxN1x0XHRjXHUwMDE0YFwigEQjPkhcdTAwMThVJ1x1MDAxMZVcdTAwMTJDKinjhfkgMDBcdTAwMDZUcixcdTAwMTCmXGIozdNJn2TSgMopKIVCxVx1MDAwZS7wuItcIlx1MDAwMDliKFZVyu2ifVlndVHC4UxcdTAwMGJcdTAwMGWDsOaHW7Zr2m5DnYwy3VsnSp51fX2nrj9cdTAwMDZ9LVx1MDAwMkY5xVxcqVx1MDAxMFx0XHUwMDE5X1x1MDAwM6p1UetoTmZgSVxiXHUwMDAxQFExiFV4fX3DMONuWq75vkzZXHUwMDA1xZhMJSVcdTAwMTTmXHUwMDAwqStcIlxuoZIv8rmhUMjAnDMpKEVcdTAwMTLolDAhlFNcdTAwMGLCba/dtkOl+0+e7YbjOu4rs6w9vWnVzPGz6qbi58ZDQkePOMpcIqO/Nlwin+n/M/z7j4/J7043Zv2aMONovFx1MDAwZvHfU0czXGJcdTAwMDFcdTAwMWU/PKynXHUwMDAySFx1MDAwNIQyesN70SxcdTAwMWK8rSqmYMTgXHUwMDAyMimFJJLEVozrzzNMXGYqMUOIUPVcdTAwMDY2LtdcdTAwMDIxXHUwMDA1xFx1MDAwNkZQXHUwMDFiPEbKolGk92h2XHUwMDA0XHUwMDE4XGZzhFx0xFx1MDAwNKugXHUwMDE1W58xXGJnXHUwMDAyS6DcgswwVzJXOJtcdTAwMTVx5FxmZ7lDXHUwMDA3MFxiplx1MDAxOCCgMCDAkkNcdTAwMWPzo9fIXHUwMDAxocH0Ulx1MDAxZklcdTAwMDBcdTAwMDE6XHUwMDE0z1x1MDAxNs6ywceoTFxiS8l1L1x1MDAxZmBcdTAwMDKDJJlUXHUwMDAwoFKrknKOXHUwMDEw4utcdTAwMWTO0m1ZvyaseFHRLD5tO4HNJCfKmfNcdTAwMDez7CrZqlx1MDAwNjMsXGaKXHUwMDEwg0JiXHUwMDE1zMZjXHUwMDE5M1x1MDAwMMVcdTAwMWF8MJX1i1x1MDAwYmVSKmvGkimszFWWTmr9XHUwMDEwKuhcIqFbXFxcdTAwMTGEKn5MrPyCXG6VIKpS/z81lJU0JiCSqidJmYLZQrCYXHUwMDE3vcVccmyoUKf8jFx1MDAwM4XFlabfkMGUwSy7XHUwMDE2MyqVTodSuVx1MDAxM0QqpElcdTAwMDQnhKJcdTAwMDZcdTAwMDRUhVfOgZZrUqR1XG5lpVRj1q9cdDOeMpRl1qlcdTAwMTQySVxyZyq39d08f9HYadbA2XFnL7Shf0rK7Z3wyjxdcapJdEfMSFxmQ0hcdTAwMThQQlx1MDAwMlx1MDAxOCpwcSpNoJKCXHUwMDFiiKtcdTAwMDTCJ0BcdTAwMTfGkGDFhJfcXHUwMDEw7jlP1XLrwobynpZcdTAwMWN0ePxcdTAwMTLUq/PPwJ6cXHUwMDFmvHytPF2H/o5ValaDa47I3T+wQFWQelx1MDAwYlx1MDAxYZZ37f3Kwy5s+7s35k7YRd0zZ1x1MDAxMVogwO9At1s/vapcdTAwMWOdiqudK+8kPFpd7d7et8ufnC6DNCxtmbJxdKqyWqHlg+RcdTAwMWLJKe5cdTAwMWM91pnjfjmzzmXpwWqJ3a8v95/cs8vSXU5reEtb70CkXGJHXHUwMDE3VO6gNH2elWFFXHUwMDFmXHUwMDE0ssjfXHUwMDBlmm1uq5r86Hjyo9JcdTAwMTBcbm5cdTAwMTSZ+khC6kNcdTAwMTPTpopaKFx1MDAxNlFExluk4UXPNypsIDByNKOwUa37luX+nFLS4CPvX1hJ41x1MDAxZJQ2XtJcdTAwMTjKmOljqYSZp1ZcdTAwMTSFXHUwMDAy+EDPUud2sexYtpouRlx0MahmWFx1MDAxYzLEYUxcdTAwMWT93Vx1MDAxMaA0KKSFXCJNXGJcciggZlSRKSooTZj0IypcZqQgT6hcdTAwMWVRX+5cdTAwMTkqjPOWL/gsjpiTJGd7wUZ8bo1KrtNcdTAwMDElkjCMXHUwMDEyKDIxXHUwMDAwXHUwMDA1XFxcdTAwMDfN1zNTUuMpSilMPVx1MDAwZu04XHUwMDA0ci6jRqS4KEA339F+c1x1MDAxZJZyQqJ1YsbptqtfMauNXHUwMDA2+lx1MDAxMP8929pNlE6KXHTlXGIjPsVcdTAwMWPf+YV74MnHo93OTfPo7vzm0uJcdTAwMGbWiscsjJShgdGwNNgoTShwQFx1MDAxMFx1MDAxNJz2o1x1MDAxMlx1MDAxYpNogVEr305pSGFcdTAwMDTlnXyG2upcXFx1MDAxYqV99tF1q/n5oXlwWeru032zu3OfXGZ+fyzcnH7cgtS7XsNcdTAwMTa2UdpaaaGgYYvacKEgcVx1MDAxN0/i393XLfFGcor7cIvLVVRmdyc7XHUwMDE31WvvM7l7MlvrNTeAkEhdtVx1MDAwMLFUp5mg+SdcdTAwMDey7WJVUVx1MDAwME1GXHUwMDAxglx1MDAxOHhJKCDflm5QXGJcdTAwMDSgXHUwMDEyqID+jaInXHUwMDBi5tzTLbBN67bmL3/nhkxUm2tTt1x1MDAxMdHngOtZJXmqWFx1MDAxOVx1MDAwNGCKXd26veolsvDR4fVpq1x0fdn4dmydpHhq3feCoNSshfXm3++tXHUwMDEwXHUwMDE5irlob1x1MDAwNWNe2f88YobgXHUwMDA1zjJwPumpXHSdVlxiXCLMgIRL3tCtVVx1MDAwNtf7N4dP5llcdTAwMGaf7l1cdTAwMTDzmJXdXHUwMDFmgH1RgL0g9a7XsEVcdTAwMDH29dJCUZ1W66WFojqtXG5cdTAwMTJ38ds1XHUwMDE0JO57tCX5gjmlnYO2ZI5bpdVnSlx1MDAwZt2DXHUwMDFitoPuXHUwMDFliLtXPkwhhStLh6RM7WdXUiBAOEf5XHUwMDBiOdl2saJ0XGLyTIBFoIGLXHUwMDA0WCxcdTAwMDFgTVIhLplUkFx1MDAxN69h2XTqfjB9bMAnvm9cdTAwMWW4QVhznGXzoHfYQkp7WKrgmb6Z3i+W3rQpOVx1MDAwMphROMWOdZnrOlbTNSlcdTAwMTaGXHUwMDE4W7XwVl3tN1x1MDAxY1x1MDAxNemXRK/PXHUwMDFjxIVJXHUwMDA3JdKgjI0tJVx1MDAxY+5Dj1VUXHUwMDE1s1CheVdcdTAwMWbP5KqLLqyWgMGERIxJXHUwMDE1WpmEOKr3bkTlTIIxlVGFL6WyOir/XHUwMDFhVThLSfajXzHLicb4XHUwMDEw/z11nIgtZlx1MDAxYe/DYlxcb6RI85c1s7HSaoZcdFx1MDAwMqhBqMBcdTAwMTKqZIpZbHnBoK2UXHUwMDE4sexe5LQm0F83JaTuXHUwMDFml0xFZ0FcdTAwMTJyO4OGnmIl8vVcdTAwMTX74ozXuVx1MDAxNEgp5ZLPsjn+Klx1MDAwN5DsucXRXHUwMDAwotuwXHUwMDAwJZjplUSQxL4oYFx1MDAxOEK4IbBKglx1MDAxMFxyNJnQK5BrjUZ2pt9cdTAwMThpd1VcdTAwMDJJSlx0XHUwMDEyglx1MDAwYoZcdTAwMTPaXSfbW9cpZmWYr35NXHUwMDE47pTxK70kk1qRwSp5UEbzdypcdTAwMWP4n+Wlc/FcYus9XHUwMDFmXHUwMDA1l1x1MDAwN95J2fs8+ywvXHUwMDFh97VcdTAwMWMhLIpN03RfIVx1MDAwMlxmoWyLxSdz+ztTXGJmXGIwWIU0T+D66a5GXHUwMDExRYm7aaHoPqOFm5MrxpBe76ZcdTAwMDRZ8qKM4jdxXFzewtC2traNsGlcdTAwMDVWXCKbiYHGadhM6HXSqMzIrYzzlrg4s2FcdTAwMGYq0796R1LdcVx1MDAxZW98fs99s1x1MDAxZvVS3He25knMXHUwMDEzvLTvvlx1MDAxMlx1MDAxOFhcbiwwXHUwMDAzXHUwMDFjXHUwMDAzmr6pRY6vycrwYa5cdTAwMThcdTAwMTFcdTAwMWWjRNH2MsRQaVx1MDAxMlx1MDAwMVxyyrnKp5N7WWi6XCJcdTAwMTBe9lZcdTAwMTZcdTAwMDUjjuxsMJLbXHUwMDExXHUwMDAwXHUwMDEyXHUwMDEzhiBVhEVSjmLvXHUwMDFh9ktKQvHMi0Fz90lqYaR6XoLrfnxAJUlo3uRcbvFcdTAwMTJFoF43ROVcdTAwMTMyrVx1MDAxM/BIMF79Kk3a7YIgXHUwMDA3lOlcdTAwMWRcIpwjpU+FP3NHLeubXHUwMDBm7ZOtW8e8XHUwMDExqGe13Fx1MDAxNv+yv1x1MDAxNqBcdTAwMDNcdTAwMTNcdTAwMTW1JjGHOmAw2bf1oiCHiEJNXHUwMDA25GBSXHUwMDExOimW/SVcdTAwMDCrNbE/XHUwMDFm4vjF9Nx/hb9svKV6O1hcdTAwMDXgkSDVbPhcdTAwMDPFZsTH9+NcdTAwMDVUXHUwMDA1T8R5fk/OfvCrjD9cdTAwMTAxMMaC6u2zIIjvXHUwMDEw1XdoXHUwMDE1YYnsr+wqXGJ/MGlwyoWKXHUwMDE5XHUwMDEyYUXdo4npqKjBjMGU31x1MDAwNLFcdTAwMTCMU5XIwLJbUVxuhlx1MDAxZtl5YWNkwlx1MDAwMynlYaQ3RVx1MDAxMIIgNDndIYz+ZMeM4CP3LIdcdTAwMTJF51lcYlx1MDAwMVwiXGbr73lcdTAwMTJsQlx1MDAxNjiQN0madYJcdTAwMWSpNqtfpaG5pmGOXHUwMDBmr1x1MDAwM2/WOp1qqGxrqH9lvrb5XHUwMDFhqaO72+zaVm8ryav6L1x1MDAxZFx1MDAwMPt61GHG0vf4519cdTAwMWb++lx1MDAxZow/wb0ifQ== Container(    id=\"dialog\")Horizontal(        classes=\"buttons\")Button(\"Yes\")Button(\"No\")Screen()Container(    id=\"sidebar\")Button(        \"Install\")match these*don't* match this <p>Let's say we want to make the text of the buttons in the dialog bold, but we don't want to change the Button in the sidebar. We can do this with the following rule:</p> <pre><code>#dialog Button {\n  text-style: bold;\n}\n</code></pre> <p>The <code>#dialog Button</code> selector matches all buttons that are below the widget with an ID of \"dialog\". No other buttons will be matched.</p> <p>As with all selectors, you can combine as many as you wish. The following will match a <code>Button</code> that is under a <code>Horizontal</code> widget and under a widget with an id of <code>\"dialog\"</code>:</p> <pre><code>#dialog Horizontal Button {\n  text-style: bold;\n}\n</code></pre>"},{"location":"guide/CSS/#child-combinator","title":"Child combinator","text":"<p>The child combinator is similar to the descendant combinator but will only match an immediate child. To create a child combinator, separate two selectors with a greater than symbol (<code>&gt;</code>). Any whitespace around the <code>&gt;</code> will be ignored.</p> <p>Let's use this to match the Button in the sidebar given the following DOM:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPayFx1MDAxNv2eX+HyfMmrXHUwMDFhNL0vUzX1ylx1MDAxYl6It1x1MDAxOMdxXqamXHUwMDA0yFi2QFjIYDw1//3dxlx1MDAxOFx0kFx1MDAwNDiIQCaaqlx1MDAxOCTRurp9l3P6dvf8/W5jYzPstZzN3zc2naeq7bm1wO5u/mrOd5yg7fpNuET639v+Y1Dt33lcdTAwMWKGrfbvv/3WsIN7J2x5dtWxOm770fba4WPN9a2q3/jNXHKdRvu/5t9cdTAwMTO74fzR8lx1MDAxYrUwsKKHXHUwMDE0nJpcdTAwMWL6wcuzXHUwMDFjz2k4zbBccq3/XHUwMDBmvm9s/N3/NyZd4FRDu1n3nP5cdTAwMGb6l2JcdTAwMDJcdTAwMTLKx0+f+M2+tJgxxKhiWFx1MDAwZe9w27vwwNCpweVcdTAwMWJcdTAwMTDaia6YU5unT1x1MDAwZr3CcfehXFyq1iv+x6B81Ph4XHUwMDE1PffG9byLsOe96MKu3j5cdTAwMDYxqdph4N87V24tvDVPXHUwMDFmOz/8XdtcdTAwMDc1RL9cbvzH+m3TabdHfuO37KpcdTAwMWL24Fx1MDAxY0fDky9a+H0jOvNkblDIYkQxoZSgSpPhRfNrirhFJOiAIcSU0HxMqlx1MDAxZN+Dnlx1MDAwMKl+Qf0jkqtiV+/rIFxcsza8J1xm7Ga7ZVx1MDAwN9Bf0X3d1/dcdTAwMTVieO7Wceu3IZxUKnqe09e6VlJcdTAwMTKCWNQn5iGtw1rfXHUwMDAy/lx1MDAxY1farVx1MDAxZLRcdTAwMDbK2WybLzFcdTAwMDGNbHvj5lx1MDAxMzehWMdcdTAwMWU3gkcquttb+1x1MDAwNz1153/aqYf+zrCtXHUwMDExe1x1MDAwYp2ncHN44Z9fs5ptfLkslfdvtjvh5aej7nn3+bjeqiQ3a1x1MDAwN4HfnbXdq6NPne5cdTAwMDe2e/wh4LX9XHUwMDFleSRsVyygXXJVOzwo3leP1Vx1MDAxNsPlhne61/xSX0C7Oal3vZr98Lh7gPTnw+enXHUwMDFiVSpcdTAwMTZrT3/Zne5P5S6m2eYneVx1MDAxM1xcf9zzd0J9dl1raX5Fb1ZXucGjLu70xNlflza9Pqtf1vjV0dk3iTtcIsWvs75I1OzgU1x1MDAxNGFcdTAwMWZbNfslXHUwMDEzQuiG5KBcdTAwMDX8p/Twuuc27+Fi89HzonN+9T5Knu9i8k6k7Vx1MDAxMTlHMjZT46eHXHUwMDE5XHUwMDFicoMkSNCZXHUwMDEzdnb3rWrC5lx1MDAxOVx0myBLLidh84SEzaO8PEjYkKtcdTAwMDVcdTAwMTOYxSxjYVx1MDAxOXuRxlx1MDAxOPW531xmL9znvj2JkbNFu+F6vZFu61spSLpcdTAwMDOXbbfpXHUwMDA07782zVx1MDAwNbf2x9fNmmt7fv3r5tfmf+JqbjsgjWmek5F2tjy3bix803NuRk0/dFx1MDAwMftcdTAwMGUvN9xaLY5mq6/PPpxcdTAwMDWD+oFbd5u2V55V8kwvzVx1MDAwNtec41RX5eDHWjOGZ/bVx+1tzfZ6qHhyt9XcVzLsnlx1MDAwNEer7qtCWkQhRDGd9FUmqUVcdTAwMTlTXHUwMDA0XHUwMDEx3vfVXHUwMDFjnVWjSWdVYtxZmWZcdTAwMTBBOc7BV7Oy3e5D8S44Oz54OC/uljpN++7y41x1MDAxN/cnul5cdTAwMTS6zkm969VsXuh6vbRQXHUwMDBlbne7lY5TXHUwMDBl6ZGHiXq+P299+NdpIS8ycNCz5e1e62z3ktxXXHUwMDFmcIufXHUwMDFmXHUwMDFl11x1MDAxNtBuVVx1MDAxY5/xc9ooXHUwMDFl1IJS4aSwfVK8JavYa9NIRvJcdTAwMDOjZlx1MDAwN5++P8ngUoyfXHUwMDFlXCJcdTAwMTdcIjHVUszBMrL1vKLIRZJcZuSipKWWhFxcVFx1MDAwMnKZpFx1MDAxOVpSjaj6sVnGXHUwMDAxgPdng9e99+b8XHUwMDBiYK96drvttFx1MDAwMbVXXHUwMDFlw9BvtpdNOKbg8nHCMc9LZDpvNvdQKHVgXzGwXHUwMDEzhYme2YErXb3fKNRDXSn0XHUwMDBlnXapt394WllxXHUwMDA3ZmZcXJ9LKbg0fkFGPVhcYmJhLFx1MDAxOcKcI+M835t6SI6QknHGuFx1MDAxNOqx5fTY/vmhf1cv71x1MDAxNLYudz63y92Ugbaf1GP+dnNS73o1m1x1MDAxN/VYLy3kRT3WS1x1MDAwYp7e3lGV/Vx1MDAxZLYjhHNRLj3Vi8VcdTAwMTW2hbyYx8LFncY8klx1MDAxZlx1MDAxODU7+PT9mYfSLJV5IFwiIFczOfuYabaeV1x1MDAxNbjwLOCiuSWWXHUwMDAzXFySmEdsaPSVeSBcZlxmXGKxXHUwMDFjgMtcdTAwMTRrjFx1MDAwMau8mcd2XHUwMDFmlb//unntXHUwMDAwNE9mXHUwMDE3mI38bEhcdTAwMWaq8DpO8HZ+MVx1MDAwNXyP84txUTPdMJtDQNem+lwiVlxuXHUwMDBijsXsJOLx+aDTPH1+vmS03PN4VTS/PFx1MDAxN1fcXHUwMDE3wcgspFx1MDAxNXDrXHUwMDE3X1x1MDAxY+NcdTAwMTDYklpcIqXRanBcYkqxXHUwMDE2XFzFRiOWwiGuXHUwMDBlXHUwMDBmzz5cXD8/bFx1MDAxZlx1MDAxNC78QtdcdTAwMGWfPznHPznEojhETupdr2bz4lx1MDAxMOulhbw4xHppIS9cdTAwMGWxXlrIq9iycHGnUZPkXHUwMDA3Rs1cdTAwMGU+LVx1MDAxMlxmZmKiNGpCXHUwMDExkuOnI2pcIjlSfJ6iSLaeV1x1MDAxM1x1MDAwZUnEMuBcdTAwMTAwXHUwMDEzslx1MDAxYzg0XHUwMDFiM8GaKVx1MDAwMmLKXHUwMDFjJkuvIDU58ZfNTKYg+lRm8lwiaaZcdTAwMTO+hKxcdTAwMDQvlFx1MDAwNKU6IcdSKCb57E6YXVx0X00nXHUwMDA0hG9cdTAwMTFwQLAyjlx1MDAxMJd8xFx1MDAwYlx1MDAxOcKWkERx+MC0XCKxQu6i3Vx1MDAxMFlAOFx1MDAxMMZcXEumheI0NnQzdEuhISgwXCKgZ1x1MDAwNHiimvRSjLjCwHDo/F7aXHUwMDE3dtle2lx1MDAwZe0g3HabNbdZh4tRrntdjDPLPMS+X1dcdTAwMWbbfTVcIlx1MDAwMb1IJSeIKOgyLWN31e2W4XpcdTAwMTYolzGEjL4pkXhwwzDnbjrN2nSZskuVMZlcbiBcdTAwMTSViMBcdTAwMTNcdMdA9LlSfEIqYlEphVx1MDAwNsJJNIJAKyak8ux2uOM3XHUwMDFhblxiyj/z3WY4ruS+NreMt986dm38KrxV/Np4WGiZXHUwMDE2R/lp9Gkj8pv+l+HnP39NvjvdnM0xYchRe+/if+eOaJjg1MlcdTAwMTbgXHUwMDE1nDGsZ1x1MDAxZvHMhoUrXHUwMDFh0SS2OIGghSRYN4uiSP/XXHUwMDEyWVx1MDAxYZCVMkNcdTAwMWKaxIZDXHUwMDE3XHUwMDBlKzC1qFCKQWDlbGTSRzTogiymXHUwMDAwXHUwMDAyMZCTgj3EJn5cZuq4mijMwWt+rGg2c+RcdTAwMDD9UI6FMj5EXHUwMDA0pFx1MDAxZlx1MDAxNvOiQdzAkKKwXHUwMDE5NWaIIU5cdTAwMDR7YzTLhFx1MDAxZqMyXHUwMDExqjX4rEJIKFxuXHUwMDFkPSlcdTAwMTO4P9dcZnPCzVxuO1x1MDAxMHytg1m6LZtjwopcdTAwMTdcdTAwMTbLIGWkwjOALIRcbj7HvJPs8tuKXHUwMDA2M8aBIyHMTWKkMjZA/lx1MDAxMs2IxbAwI7VcXFx1MDAwYinHxVpcXDTTXHUwMDFh+phA0NRcdTAwMWNDOoutXHUwMDFhioJcdTAwMTmz4CqVcFx1MDAxZsZE0IlZZVx1MDAxOEJcdTAwMTlcdTAwMDNcdTAwMGbG/9ZoVjCggHFMXHUwMDAwalx1MDAxM1xiaYyihHBGLUhcXFx1MDAwMJOAXHUwMDFlQ1xu44K+LZ5lXHUwMDE3ekal4lx1MDAxYfA/1lx1MDAxMlx1MDAxM4hqmuBcdKG4XHUwMDA1uFx1MDAxYVwirJTIyDUp0jpFs0KqMZtjwoznjGaZRTBcdTAwMTnjJWNcdTAwMDGNaCyQmme1nfZKl6Wb+6fS9dVFrfaJ2Fx1MDAxN1x1MDAxZj6ueDhjZlx1MDAwNY8wuYJAzkYyXG4j/eFcYlx1MDAwMbpcdTAwMDeEKlx1MDAwMbVpXHUwMDA0d+RcdTAwMDfOYlWtKICBbPBoKidgXHUwMDE4QGZcdLQknmyWUlx1MDAwYrvrlu9cXO+ycdTuak4qXi0sep++fbD3+Pzw+br49DlcZnadwu1F+7MkbFx1MDAxMTP2161cdTAwMTaWk3pzalZ23IPiw1x1MDAxZW5cdTAwMDR7f9V2w1x1MDAwZemceovQXHUwMDAyQ0FcdTAwMGI3O9WTq2LpRF3tXvnHYWl1tVu5a2ydeVx1MDAxZIF5WNiu6XrpxH/qra64i197PlDD58NcdTAwMTLx2lx1MDAxN6p1etxmndZt6ZBfflO70yoryVxuipp9zY5cdTAwMGJEYpmJNq2yXHUwMDAySDiVNCDgYkQxOnuWzTaLXHUwMDE1zbJmtUl6ltXCgoSGXHUwMDAx5+mcsyxLyLIk0v1rdqVUamqw1uKza96VlVj9YEpl5aJcdTAwMWE4TvN9Sk1Fjty/sJrKXHUwMDE0jDheU1x1MDAxOcqY6XjpfF2lbyZBgD4gTdjs2z9lR87V9DzOsVx1MDAwNWRcdTAwMWNcXItcdTAwMTGqXGJcdTAwMWatpsB3S0klluB5XHUwMDE4XHUwMDAzi1SUaOCZSopYrXnoiIybMlx1MDAwMFx1MDAwN8ebwLtcdTAwMDQhRpjW4lxyeHeVmXq2O2zEx/i4llx1MDAwMuJcdTAwMTJcdTAwMDeWLijhMYo4oMTMQlx1MDAxY1RcZtpcdTAwMWJcXJmTn89R0Vx1MDAxMVx1MDAxOFx0XHUwMDA19JxhXHSBMqGgXHUwMDAzsiCgsohzbpKb1lx1MDAxM1wirVx1MDAxMz9PN15zxMw2auhd/O/bpqfSdGpcdTAwMGVsUYE7izm217huPV2497RyfcnK4fn+XHUwMDE26dyffl7x4EWJtKggXHUwMDFjSHpcdTAwMDJsMJvXYWVqwfqFnH/33eugQ1x1MDAxOFn+XCK34z1WPFdq9+amVun2yrf+VlhOISA/J6jO325O6l2vZnPbvW6ttJBTs7ntXpePuHmNIOQk7nn9oX7uXFw9XHUwMDEwLb94lyeNtt1yUsZRXHUwMDE2tdle4otEzb6Cg+89MEEoSV1cdTAwMDFDMCFCKI5nh1x1MDAxONn9t6JcdTAwMTCDkiyIQVx1MDAwMOsuXHRizLbfXHUwMDFlxpIjSlx1MDAwMX2v39DEN+6313ZrTsVcdTAwMGWWvf/FXHUwMDE04DzThnsjome66pRcdTAwMTVr6ZtjMsaAiDE++3DG9lHTx1xi6JdDjypP5Vx1MDAxMr7URSfFXcfcbtRZx6csvdVZMZrqrVhbXGZpRvCLt45OPmCCWIJcbo6Y+PbRjF8wqSgllEpwVZkweJGw5Vx1MDAwNSZcdTAwMTKx+Fx1MDAwNNalsIHzvaND9CRLN6dXLr66PdNfetf7P9nAothATupdr2bzYlx1MDAwM+ulhbyWq62XXHUwMDE28lqulpO4eW15sV6dtnxOlPxcIjOKe1rd3T65bqn60Ze7Y7vje0/bjM0m7uDTd+daXHUwMDE00dTldUT3t9mLIYVp2C3bLL5cdTAwMGLVmlx1MDAwMb1cdTAwMTGWhd6ktPCi0NuU0dxcdTAwMDT8lrC1uWRMXHUwMDAzXHUwMDA0zFx1MDAwMb+tXHUwMDBl01x1MDAxYSxaM+de+MrXzcNmO7Q9b9k8a1xuXHUwMDFkSVltlyp4ppOmXHUwMDE3jFx1MDAxOUl1Ulx1MDAwNCleUDVcdTAwMDfDyp5cdTAwMTKzmlx1MDAwM1winHFLMCp14oBcYuHCMsMgS3BSxixJiOCCJMzZYNriQjAkJkvFVCBwJPKWXUJ+iEpxwVxmWWlcIoSmXHUwMDEwZzWmOKk8yyjlmsoppeJR+deoYltIMlx1MDAxZnPEXGYnauNd/O/8MYOn1mk55cpUjGfP65m4bDUjXHUwMDA2w8Si4OuvQ6hcdCt2XHUwMDExNsaY91x1MDAxY1x1MDAxM2RcdTAwMTFuZvQogYmAXGJcdTAwMTCb2Fx1MDAxNa3XNZNcdTAwMTckVlx0U6qppGZcdTAwMDe2t+T7VVx1MDAwZVx1MDAxY9njl6OBXHUwMDAzXHUwMDExJFx1MDAxMWdUSCRcdTAwMTiOZlx1MDAxN1xmXHUwMDAzh7RcdTAwMTQliGIzXHUwMDE3XHUwMDA3joR1XHUwMDE3M001yc71XHUwMDFiI4uHQVx1MDAxY7PGiygzUYlINLlOd3K18DqFqnSrNUdkr3OGq3RcdTAwMWWSselcdTAwMTnHRFx1MDAxMqlm5yFS2yd35O7sYLdXrX/0xd72WUWkxKtcdTAwMTVcdTAwMTlDJlx1MDAxNFx1MDAwMI7Go9jhZb8z9mrd31TmyVx1MDAxODkmSdPeJiFcZlx1MDAwNtJcdTAwMDH2IN8y2+1bho5Xi2YnXHUwMDExm9lnt142a05gXGLLRnjrtjde9lx1MDAxZE+e6qpGfjz7VNfQb6WxmZHXXHUwMDFhpy7Jor1ccnxA0EhcdTAwMDVcdTAwMWbIJGQ5x+L67P5fSW+mWFlcdTAwMTC2zNbiXHUwMDE0Y6FGx1x1MDAxNFx1MDAwNMA9zNToXG6qMY92hJRv92hNLU0pXHUwMDE1ZjNcdTAwMWUmaGxCXnxcdTAwMTVX4lx1MDAxYS6zmo/QkZLdXHUwMDBmXHUwMDAxOLJzwijggNxcdTAwMGXAXHUwMDExXHUwMDExXGKMWkNATli4XHUwMDBl0VrNwlW+XHUwMDE5a1x1MDAxOHGkJmbSqlZcdTAwMDSeiVTiYliwMqzM/zvDbFx1MDAwMrXe2CPVes1ReDXcNOTxbtDupt1qXYRgZcNeXHUwMDAwQ3Zrg5BcdTAwMWS93GbHdbrbXHTuddM/TFx1MDAwNOyr0Vx1MDAwNFx1MDAxYce84t//vPvn/yxzRNUifQ== Container(    id=\"dialog\")Horizontal(        classes=\"buttons\")Button(\"Yes\")Button(\"No\")Screen()Container(    id=\"sidebar\")Button(        \"Install\")Underline this button <p>We can use the following CSS to style all buttons which have a parent with an ID of <code>sidebar</code>:</p> <pre><code>#sidebar &gt; Button {\n  text-style: underline;\n}\n</code></pre>"},{"location":"guide/CSS/#specificity","title":"Specificity","text":"<p>It is possible that several selectors match a given widget. If the same style is applied by more than one selector then Textual needs a way to decide which rule wins. It does this by following these rules:</p> <ul> <li> <p>The selector with the most IDs wins. For instance <code>#next</code> beats <code>.button</code> and <code>#dialog #next</code> beats <code>#next</code>. If the selectors have the same number of IDs then move to the next rule.</p> </li> <li> <p>The selector with the most class names wins. For instance <code>.button.success</code> beats <code>.success</code>. For the purposes of specificity, pseudo classes are treated the same as regular class names, so <code>.button:hover</code> counts as 2 class names. If the selectors have the same number of class names then move to the next rule.</p> </li> <li> <p>The selector with the most types wins. For instance <code>Container Button</code> beats <code>Button</code>.</p> </li> </ul>"},{"location":"guide/CSS/#important-rules","title":"Important rules","text":"<p>The specificity rules are usually enough to fix any conflicts in your stylesheets. There is one last way of resolving conflicting selectors which applies to individual rules. If you add the text <code>!important</code> to the end of a rule then it will \"win\" regardless of the specificity.</p> <p>Warning</p> <p>Use <code>!important</code> sparingly (if at all) as it can make it difficult to modify your CSS in the future.</p> <p>Here's an example that makes buttons blue when hovered over with the mouse, regardless of any other selectors that match Buttons:</p> <pre><code>Button:hover {\n  background: blue !important;\n}\n</code></pre>"},{"location":"guide/CSS/#css-variables","title":"CSS Variables","text":"<p>You can define variables to reduce repetition and encourage consistency in your CSS. Variables in Textual CSS are prefixed with <code>$</code>. Here's an example of how you might define a variable called <code>$border</code>:</p> <pre><code>$border: wide green;\n</code></pre> <p>With our variable assigned, we can write <code>$border</code> and it will be substituted with <code>wide green</code>. Consider the following snippet:</p> <pre><code>#foo {\n  border: $border;\n}\n</code></pre> <p>This will be translated into:</p> <pre><code>#foo {\n  border: wide green;\n}\n</code></pre> <p>Variables allow us to define reusable styling in a single place. If we decide we want to change some aspect of our design in the future, we only have to update a single variable.</p> <p>Note</p> <p>Variables can only be used in the values of a CSS declaration. You cannot, for example, refer to a variable inside a selector.</p> <p>Variables can refer to other variables. Let's say we define a variable <code>$success: lime;</code>. Our <code>$border</code> variable could then be updated to <code>$border: wide $success;</code>, which will be translated to <code>$border: wide lime;</code>.</p>"},{"location":"guide/CSS/#initial-value","title":"Initial value","text":"<p>All CSS rules support a special value called <code>initial</code>, which will reset a value back to its default.</p> <p>Let's look at an example. The following will set the background of a button to green:</p> <pre><code>Button {\n  background: green;\n}\n</code></pre> <p>If we want a specific button (or buttons) to use the default color, we can set the value to <code>initial</code>. For instance, if we have a widget with a (CSS) class called <code>dialog</code>, we could reset the background color of all buttons inside the dialog with the following CSS:</p> <pre><code>.dialog Button {\n  background: initial;\n}\n</code></pre> <p>Note that <code>initial</code> will set the value back to the value defined in any default css. If you use <code>initial</code> within default css, it will treat the rule as completely unstyled.</p>"},{"location":"guide/CSS/#nesting-css","title":"Nesting CSS","text":"<p>Added in version 0.47.0</p> <p>CSS rule sets may be nested, i.e. they can contain other rule sets. When a rule set occurs within an existing rule set, it inherits the selector from the enclosing rule set.</p> <p>Let's put this into practical terms. The following example will display two boxes containing the text \"Yes\" and \"No\" respectively. These could eventually form the basis for buttons, but for this demonstration we are only interested in the CSS.</p> nesting01.tcss (no nesting)nesting01.pyOutput <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n}\n\n/* Style all buttons */\n#questions .button {\n    width: 1fr;\n    padding: 1 2;\n    margin: 1 2;\n    text-align: center;\n    border: heavy $panel;\n}\n\n/* Style the Yes button */\n#questions .button.affirmative {\n    border: heavy $success;\n}\n\n/* Style the No button */\n#questions .button.negative {\n    border: heavy $error;\n}\n</code></pre> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Static\n\n\nclass NestingDemo(App):\n    \"\"\"App that doesn't have nested CSS.\"\"\"\n\n    CSS_PATH = \"nesting01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal(id=\"questions\"):\n            yield Static(\"Yes\", classes=\"button affirmative\")\n            yield Static(\"No\", classes=\"button negative\")\n\n\nif __name__ == \"__main__\":\n    app = NestingDemo()\n    app.run()\n</code></pre> <p> NestingDemo \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Yes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0No\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>The CSS is quite straightforward; there is one rule for the container, one for all buttons, and one rule for each of the buttons. However it is easy to imagine this stylesheet growing more rules as we add features.</p> <p>Nesting allows us to group rule sets which have common selectors. In the example above, the rules all start with <code>#questions</code>. When we see a common prefix on the selectors, this is a good indication that we can use nesting.</p> <p>The following produces identical results to the previous example, but adds nesting of the rules.</p> nesting02.tcss (with nesting)nesting02.pyOutput <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n\n    /* Style all buttons */\n    .button {\n        width: 1fr;\n        padding: 1 2;\n        margin: 1 2;\n        text-align: center;\n        border: heavy $panel;\n\n        /* Style the Yes button */\n        &amp;.affirmative {\n            border: heavy $success;\n        }\n\n        /* Style the No button */\n        &amp;.negative {\n            border: heavy $error;\n        }\n    }\n}\n</code></pre> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Static\n\n\nclass NestingDemo(App):\n    \"\"\"App with nested CSS.\"\"\"\n\n    CSS_PATH = \"nesting02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal(id=\"questions\"):\n            yield Static(\"Yes\", classes=\"button affirmative\")\n            yield Static(\"No\", classes=\"button negative\")\n\n\nif __name__ == \"__main__\":\n    app = NestingDemo()\n    app.run()\n</code></pre> <p> NestingDemo \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Yes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0No\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Tip</p> <p>Indenting the rule sets is not strictly required, but it does make it easier to understand how the rule sets are related to each other.</p> <p>In the first example we had a rule set that began with the selector <code>#questions .button</code>, which would match any widget with a class called \"button\" that is inside a container with id <code>questions</code>.</p> <p>In the second example, the button rule selector is simply <code>.button</code>, but it is within the rule set with selector <code>#questions</code>. The nesting means that the button rule set will inherit the selector from the outer rule set, so it is equivalent to <code>#questions .button</code>.</p>"},{"location":"guide/CSS/#nesting-selector","title":"Nesting selector","text":"<p>The two remaining rules are nested within the button rule, which means they will inherit their selectors from the button rule set and the outer <code>#questions</code> rule set.</p> <p>You may have noticed that the rules for the button styles contain a syntax we haven't seen before. The rule for the Yes button is <code>&amp;.affirmative</code>. The ampersand (<code>&amp;</code>) is known as the nesting selector and it tells Textual that the selector should be combined with the selector from the outer rule set.</p> <p>So <code>&amp;.affirmative</code> in the example above, produces the equivalent of <code>#questions .button.affirmative</code> which selects a widget with both the <code>button</code> and <code>affirmative</code> classes. Without <code>&amp;</code> it would be equivalent to <code>#questions .button .affirmative</code> (note the additional space) which would only match a widget with class <code>affirmative</code> inside a container with class <code>button</code>.</p> <p>For reference, lets see those two CSS files side-by-side:</p> nesting01.tcssnesting02.tcss <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n}\n\n/* Style all buttons */\n#questions .button {\n    width: 1fr;\n    padding: 1 2;\n    margin: 1 2;\n    text-align: center;\n    border: heavy $panel;\n}\n\n/* Style the Yes button */\n#questions .button.affirmative {\n    border: heavy $success;\n}\n\n/* Style the No button */\n#questions .button.negative {\n    border: heavy $error;\n}\n</code></pre> <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n\n    /* Style all buttons */\n    .button {\n        width: 1fr;\n        padding: 1 2;\n        margin: 1 2;\n        text-align: center;\n        border: heavy $panel;\n\n        /* Style the Yes button */\n        &amp;.affirmative {\n            border: heavy $success;\n        }\n\n        /* Style the No button */\n        &amp;.negative {\n            border: heavy $error;\n        }\n    }\n}\n</code></pre> <p>Note how nesting bundles related rules together. If we were to add other selectors for additional screens or widgets, it would be easier to find the rules which will be applied.</p>"},{"location":"guide/CSS/#why-use-nesting","title":"Why use nesting?","text":"<p>There is no requirement to use nested CSS, but it can help to group related rule sets together (which makes it easier to edit). Nested CSS can also help you avoid some repetition in your selectors, i.e. in the nested CSS we only need to type <code>#questions</code> once, rather than four times in the non-nested CSS.</p>"},{"location":"guide/actions/","title":"Actions","text":"<p>Actions are allow-listed functions with a string syntax you can embed in links and bind to keys. In this chapter we will discuss how to create actions and how to run them.</p>"},{"location":"guide/actions/#action-methods","title":"Action methods","text":"<p>Action methods are methods on your app or widgets prefixed with <code>action_</code>. Aside from the prefix these are regular methods which you could call directly if you wished.</p> <p>Information</p> <p>Action methods may be coroutines (defined with the <code>async</code> keyword).</p> <p>Let's write an app with a simple action method.</p> actions01.py<pre><code>from textual.app import App\nfrom textual import events\n\n\nclass ActionsApp(App):\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n    def on_key(self, event: events.Key) -&gt; None:\n        if event.key == \"r\":\n            self.action_set_background(\"red\")\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p>The <code>action_set_background</code> method is an action method which sets the background of the screen. The key handler above will call this action method if you press the R key.</p> <p>Although it is possible (and occasionally useful) to call action methods in this way, they are intended to be parsed from an action string. For instance, the string <code>\"set_background('red')\"</code> is an action string which would call <code>self.action_set_background('red')</code>.</p> <p>The following example replaces the immediate call with a call to run_action() which parses an action string and dispatches it to the appropriate method.</p> actions02.py<pre><code>from textual import events\nfrom textual.app import App\n\n\nclass ActionsApp(App):\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n    async def on_key(self, event: events.Key) -&gt; None:\n        if event.key == \"r\":\n            await self.run_action(\"set_background('red')\")\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p>Note that the <code>run_action()</code> method is a coroutine so <code>on_key</code> needs to be prefixed with the <code>async</code> keyword.</p> <p>You will not typically need this in a real app as Textual will run actions in links or key bindings. Before we discuss these, let's have a closer look at the syntax for action strings.</p>"},{"location":"guide/actions/#syntax","title":"Syntax","text":"<p>Action strings have a simple syntax, which for the most part replicates Python's function call syntax.</p> <p>Important</p> <p>As much as they look like Python code, Textual does not call Python's <code>eval</code> function to compile action strings.</p> <p>Action strings have the following format:</p> <ul> <li>The name of an action on its own will call the action method with no parameters. For example, an action string of <code>\"bell\"</code> will call <code>action_bell()</code>.</li> <li>Action strings may be followed by parenthesis containing Python objects. For example, the action string <code>set_background(\"red\")</code> will call <code>action_set_background(\"red\")</code>.</li> <li>Action strings may be prefixed with a namespace (see below) and a dot.</li> </ul> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaW2/bNlx1MDAxNH7vr1xivIduQK3y8M5cdTAwMDLDkNuKtFl6SdJ0XHUwMDFkhkGV6Fi1LGmScluR/75DJbFkxXZsx8kyIXAsklx1MDAxMlx1MDAwZlx1MDAwZs/3nVx1MDAwYv392dpap7zIbOfVWseeXHUwMDA3flx1MDAxY4W5f9Z54dpPbV5EaYJdtLov0pM8qEb2yzIrXr18OfTzgS2z2Fx1MDAwZqx3XHUwMDFhXHUwMDE1J35cXJQnYZR6QTp8XHUwMDE5lXZY/OI+9/yh/TlLh2GZe/UkXVx1MDAxYkZlml/NZWM7tElZ4Nv/wPu1te/VZ0O63Fx1MDAwNqWfXHUwMDFjx7Z6oOqqXHUwMDA1VES0W/fSpFx1MDAxMlx1MDAxNoQm1ChQajRcIiq2cL7ShtjdQ5lt3eOaOlx1MDAxZr6c9T92//HXeSo/fzvc3Oz725/qaXtRXHUwMDFj75dcdTAwMTdxJVaR4mrqvqLM04E9isKy7+ZutY+eXG79om9cdTAwMWKP5enJcT+xhVs/XHUwMDE5taaZXHUwMDFmROWFe1x1MDAxMalbr5TQXHUwMDFjd+62iHBPUy5cdTAwMDSVhlx1MDAxOcpGne5xajyptDJGa8XAXGLgLcE201x1MDAxOHdcdTAwMDJcdTAwMDX7gVRXLdlXP1x1MDAxOFx1MDAxY6N4SViP6fmC4jyyXHUwMDFldXa9YGk80CC4oVxcSqJlPU/fRsf9XHUwMDEyh3DuXHRmiKT1jlx1MDAxNbbaXG5DgSlupFx1MDAxOXW4ibOdsLKKP9u67Pt5dq2yTiVgQ2h3u902qaZZNXY7se+2j3bPw3LvaHt3a7d7MVx1MDAxNFx1MDAwN2b0rjFcdTAwMWL08zw964x6Lq+/1aKdZKF/ZVcgJeeodC6YqC0vjpJcdTAwMDF2JidxXFy3pcGgNsWq9fLFXHUwMDEyXHUwMDE4XHUwMDAwwshUXHUwMDEwXHUwMDE4YJQoQ+dcdTAwMDfBodj66O++zz92L96dXHL6XyCM5ZenXHUwMDBlXHUwMDAypT3FXHRcdTAwMTdcdTAwMWGhQCVt2FhcdTAwMDVcdTAwMDPtYVx1MDAxYpVMXHUwMDEypcBokPeCXHUwMDAx0K9ay0kwoFxiOM6N4kpcYqNcdTAwMTUsglx1MDAwMmCEK6VcdTAwMDU8Mlxm9lx1MDAwNjD4evr69MPml/M9+lv5XHUwMDFl5M5fK4OBxMU+XHUwMDEyXGaAT4dcdTAwMDE3XHUwMDA0jVx1MDAwMlx1MDAwMOaGXHUwMDAx/7xcdTAwMGXs8+DtRry1l4b7mdVvksMnXHUwMDBlXHUwMDAzXFygp5HrNdHGLVaNo0ChM+CK4ntcdTAwMTRChZt7gYBcdTAwMDfS9sQkXHUwMDEwXHUwMDAwUE9cdTAwMDNjaOSaKYq+aSFcdTAwMThcYsm4RCHF48KgSzdcdTAwMDb7hkT5/plMdXFA5MHu69XBQKNXXFxcdTAwMTVcZkp7Xk5EXHUwMDAwct9UXHUwMDA0XHUwMDEwyVx1MDAxOFx1MDAxN1x1MDAwNOZ3XHUwMDA04dveutjaevO7POSDzUMt4r9cdTAwMGbTlVwioPVUXHUwMDEzXHUwMDAwsFx1MDAxNFx1MDAwMFDdnpTCXHUwMDAwRdNcdTAwMTOKyjFcdTAwMDCAXHUwMDE2XHUwMDFlQ3rmoFxiekUj7+dcdTAwMDZmIMBMYP7bpq4lcIrRXHUwMDE5LG7phbt5knFcdTAwMGYzyixC+LU9pUm5XHUwMDFm/WOrmHas9Vd/XHUwMDE4xVx1MDAxN2NGUUFcdTAwMDBcdTAwMDV8l5Vo5H68lmCqUaCl2OaeXHUwMDE1XHUwMDE256+sX489uVx1MDAxZUfHXHUwMDBlMJ3Y9saRVEaYpYy6y7Sh41x1MDAwMCXx8XX5TtheUZpHx1x1MDAxMUpxMF2qpVx1MDAwMI1x+3Q8XHUwMDBizkBqMT+eTVx1MDAxMoP/Nt/RKflwXlx1MDAxY+yGcL71+mnjmVx04UmmXGIlwNBXqPHsXHUwMDA2uPKAMkFcZsewj90zqpvl0Golz4AzQ1JBbmH14EeB88PGb4rrhlN5aDivXHUwMDA3XHUwMDBlOFx1MDAxNWxcdTAwMTbCcYCKsvlcdTAwMDMguSnQUlx1MDAxMNbCtFtHXHUwMDEwXHUwMDA2iVlcdTAwMDJIPn9QSvzuMP37nLPy2+5OfiZcdTAwMDby8Nvm04Ywl8Zj2lx1MDAwNXVcdTAwMWHjTpef3fLJklx1MDAxOFx1MDAwNDFaXHUwMDFjqGZcdTAwMDSzWlx1MDAxMCOFzFx1MDAwM2JcdTAwMDOCXG7M3Fx1MDAxZdknP2z0+Vx1MDAxZvnkzM9cdTAwMTE3XGLM4mmAeZJgM0F9pepJkTafXHUwMDFlaWP2olx1MDAxNFVcctzfherZXHUwMDAx2Vx1MDAwMqhuY2dZVKs76y1cZlFcdTAwMGKMYqLJpFa6sZWVTSjmgeKCSiUx4aQzXHUwMDAy7Vx1MDAxMH036S1cdTAwMGJq5lx0TlxmwYlcYlx1MDAwN8x4xVx1MDAwNEetjUdccnZLKVx0XHUwMDEx0IghriFPMSXmmKku4bfvSjhXWSBsyOHn5UaUhFFyjJ01m9xcdTAwMTTTd+ZI39wq/axKXHUwMDFhcatQPdwwzbVq9PfS4MStoks86spdUlx1MDAxMalQlVxmdXk96nIklE3Cu0WaXV9cdTAwMWaJZDCHk5QrhZsloHaP4zJcdTAwMTFqXHUwMDE44J/AUNhVttktmWK/KDfT4TAqUfPv0ygp21x1MDAxYa5Uue5Q3rf+Lf7ANTX72nSQuTeOM3v9ba1GTHUz+v7ni4mjp1uyu7q3jLh+37Pm/8WZzGjWbr5hMlxumJ1yVPP8OcbsYPQpUlx1MDAxOTPGXHUwMDAzV1x1MDAxYmGaUIG23YpPmPKEQtunklx1MDAxM4lmJlqC1TQlXHUwMDAyw0m4dHziUUE4ZnWSMCMwXHUwMDAwmVA1XHUwMDEzzNNcdTAwMThHoaTKXGKuTENJV1SmMCNkgKB5XFwqWzpJmJPKZmeuXHLeQO05h8RBacxcdTAwMTh5Y0STzKRcdTAwMTGoYoJcdTAwMDRCXHUwMDE1Q+e0XHUwMDFjmc0+J6n5lXhCXHUwMDEzQVx1MDAxY98z9DL1vrboXGZcdTAwMDdhmFx1MDAwNoxJVCdy3/+azqZbs7u6t1xmeVV0hvQp280jOmNcZlWMucjcbDY7Kv9cdTAwMGbYTN95XHUwMDAy4Fx1MDAwZWJcdEZeLrdslz+V9ihSXHUwMDE51UZcdTAwMDOlzeJSm8qY5L1ALUtlxFx1MDAwM4NuTDrPjJmf1mzCcbBhXHUwMDFlikmFoe40gjeLN9dcdTAwMDdcdTAwMDGG4FuU4Fx1MDAwZnBcdTAwMTCwylL9omQ2O4dcdTAwMWbxhvJcdTAwMThzkSlobjjlnDVGNGmDaIyQjNCIMkOlXHUwMDA2s1x1MDAxY5vNPu5qRovS7arE0Fx1MDAxZThhdIpUKFx1MDAxMVx1MDAwM7fxXHUwMDFhjVFh9v+/ZrNcdTAwMTlcdTAwMDbtru4tW16QzqZcdTAwMTWP2PRcdTAwMTNNzShcdTAwMTdEwvxkZuS23GbBh4NPnzc+XHUwMDFkvTmKN/OMTCGzvlx1MDAxZvRPcjuNzlZVPTJ35pmAcbGghGFcdTAwMTiKITEh4+f6XGY8XHUwMDA21J1rOVx1MDAwZqu0udfPW8rcT4rMz1x1MDAxMVx1MDAxM7c5jcOE8lGD125Ii1OqMVA0S5DW0z3TXHUwMDExtFlcXF+yfqTHWkf1ozr7uKlcdTAwMWb5WeZcdTAwMTW2/Kveolx1MDAxZp/nNnz+08QqUuOXLY9xtDNduGc32qw06Vx1MDAwNu6XqMdcdTAwMTHnoiFE4bUy6ik6p5E925j0W6vqcm+tWMPh0zoz+H757PJfPFx1MDAxMrdyIn0= Optional namespaceAction nameOptional parametersapp.set_background('red')"},{"location":"guide/actions/#parameters","title":"Parameters","text":"<p>If the action string contains parameters, these must be valid Python literals, which means you can include numbers, strings, dicts, lists, etc., but you can't include variables or references to any other Python symbols.</p> <p>Consequently <code>\"set_background('blue')\"</code> is a valid action string, but <code>\"set_background(new_color)\"</code> is not \u2014 because <code>new_color</code> is a variable and not a literal.</p>"},{"location":"guide/actions/#links","title":"Links","text":"<p>Actions may be embedded as links within console markup. You can create such links with a <code>@click</code> tag.</p> <p>The following example mounts simple static text with embedded action links.</p> actions03.pyOutput actions03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\n[b]Set your background[/b]\n[@click=app.set_background('red')]Red[/]\n[@click=app.set_background('green')]Green[/]\n[@click=app.set_background('blue')]Blue[/]\n\"\"\"\n\n\nclass ActionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Static(TEXT)\n\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p> ActionsApp Set\u00a0your\u00a0background Red Green Blue </p> <p>When you click any of the links, Textual runs the <code>\"set_background\"</code> action to change the background to the given color.</p>"},{"location":"guide/actions/#bindings","title":"Bindings","text":"<p>Textual will run actions bound to keys. The following example adds key bindings for the R, G, and B keys which call the <code>\"set_background\"</code> action.</p> actions04.pyOutput actions04.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\n[b]Set your background[/b]\n[@click=app.set_background('red')]Red[/]\n[@click=app.set_background('green')]Green[/]\n[@click=app.set_background('blue')]Blue[/]\n\"\"\"\n\n\nclass ActionsApp(App):\n    BINDINGS = [\n        (\"r\", \"set_background('red')\", \"Red\"),\n        (\"g\", \"set_background('green')\", \"Green\"),\n        (\"b\", \"set_background('blue')\", \"Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(TEXT)\n\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p> ActionsApp Set\u00a0your\u00a0background Red Green Blue </p> <p>If you run this example, you can change the background by pressing keys in addition to clicking links.</p> <p>See the previous section on input for more information on bindings.</p>"},{"location":"guide/actions/#namespaces","title":"Namespaces","text":"<p>Textual will look for action methods in the class where they are defined (App, Screen, or Widget). If we were to create a custom widget it can have its own set of actions.</p> <p>The following example defines a custom widget with its own <code>set_background</code> action.</p> actions05.pyactions05.tcss actions05.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\n[b]Set your background[/b]\n[@click=app.set_background('cyan')]Cyan[/]\n[@click=app.set_background('magenta')]Magenta[/]\n[@click=app.set_background('yellow')]Yellow[/]\n\"\"\"\n\n\nclass ColorSwitcher(Static):\n    def action_set_background(self, color: str) -&gt; None:\n        self.styles.background = color\n\n\nclass ActionsApp(App):\n    CSS_PATH = \"actions05.tcss\"\n    BINDINGS = [\n        (\"r\", \"set_background('red')\", \"Red\"),\n        (\"g\", \"set_background('green')\", \"Green\"),\n        (\"b\", \"set_background('blue')\", \"Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield ColorSwitcher(TEXT)\n        yield ColorSwitcher(TEXT)\n\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> actions05.tcss<pre><code>Screen {\n    layout: grid;\n    grid-size: 1;\n    grid-gutter: 2 4;\n    grid-rows: 1fr;\n}\n\nColorSwitcher {\n   height: 100%;\n   margin: 2 4;\n}\n</code></pre> <p>There are two instances of the custom widget mounted. If you click the links in either of them it will change the background for that widget only. The R, G, and B key bindings are set on the App so will set the background for the screen.</p> <p>You can optionally prefix an action with a namespace, which tells Textual to run actions for a different object.</p> <p>Textual supports the following action namespaces:</p> <ul> <li><code>app</code> invokes actions on the App.</li> <li><code>screen</code> invokes actions on the screen.</li> <li><code>focused</code> invokes actions on the currently focused widget (if there is one).</li> </ul> <p>In the previous example if you wanted a link to set the background on the app rather than the widget, we could set a link to <code>app.set_background('red')</code>.</p>"},{"location":"guide/actions/#dynamic-actions","title":"Dynamic actions","text":"<p>Added in version 0.61.0</p> <p>There may be situations where an action is temporarily unavailable due to some internal state within your app. For instance, consider an app with a fixed number of pages and actions to go to the next and previous page. It doesn't make sense to go to the previous page if we are on the first, or the next page when we are on the last page.</p> <p>We could easily add this logic to the action methods, but the footer would still display the keys even if they would have no effect. The user may wonder why the app is showing keys that don't appear to work.</p> <p>We can solve this issue by implementing the <code>check_action</code> on our app, screen, or widget. This method is called with the name of the action and any parameters, prior to running actions or refreshing the footer. It should return one of the following values:</p> <ul> <li><code>True</code> to show the key and run the action as normal.</li> <li><code>False</code> to hide the key and prevent the action running.</li> <li><code>None</code> to disable the key (show dimmed), and prevent the action running.</li> </ul> <p>Let's write an app to put this into practice:</p> actions06.pyactions06.tcssOutput actions06.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll\nfrom textual.reactive import reactive\nfrom textual.widgets import Footer, Placeholder\n\nPAGES_COUNT = 5\n\n\nclass PagesApp(App):\n    BINDINGS = [\n        (\"n\", \"next\", \"Next\"),\n        (\"p\", \"previous\", \"Previous\"),\n    ]\n\n    CSS_PATH = \"actions06.tcss\"\n\n    page_no = reactive(0)\n\n    def compose(self) -&gt; ComposeResult:\n        with HorizontalScroll(id=\"page-container\"):\n            for page_no in range(PAGES_COUNT):\n                yield Placeholder(f\"Page {page_no}\", id=f\"page-{page_no}\")\n        yield Footer()\n\n    def action_next(self) -&gt; None:\n        self.page_no += 1\n        self.refresh_bindings()  # (1)!\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def action_previous(self) -&gt; None:\n        self.page_no -= 1\n        self.refresh_bindings()  # (2)!\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def check_action(\n        self, action: str, parameters: tuple[object, ...]\n    ) -&gt; bool | None:  # (3)!\n        \"\"\"Check if an action may run.\"\"\"\n        if action == \"next\" and self.page_no == PAGES_COUNT - 1:\n            return False\n        if action == \"previous\" and self.page_no == 0:\n            return False\n        return True\n\n\nif __name__ == \"__main__\":\n    app = PagesApp()\n    app.run()\n</code></pre> <ol> <li>Prompts the footer to refresh, if bindings change.</li> <li>Prompts the footer to refresh, if bindings change.</li> <li>Guards the actions from running and also what keys are displayed in the footer.</li> </ol> actions06.tcss<pre><code>#page-container {\n    # This hides the scrollbar\n    scrollbar-size: 0 0;\n}\n</code></pre> <p> PagesApp Page\u00a00 \u00a0n\u00a0Next\u00a0\u258f^p\u00a0palette </p> <p>This app has key bindings for N and P to navigate the pages. Notice how the keys are hidden from the footer when they would have no effect.</p> <p>The actions above call <code>refresh_bindings</code> to prompt Textual to refresh the footer. An alternative to doing this manually is to set <code>bindings=True</code> on a reactive, which will refresh the bindings if the reactive changes.</p> <p>Let's make this change. We will also demonstrate what the footer will show if we return <code>None</code> from <code>check_action</code> (rather than <code>False</code>):</p> actions07.pyactions06.tcssOutput actions06.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll\nfrom textual.reactive import reactive\nfrom textual.widgets import Footer, Placeholder\n\nPAGES_COUNT = 5\n\n\nclass PagesApp(App):\n    BINDINGS = [\n        (\"n\", \"next\", \"Next\"),\n        (\"p\", \"previous\", \"Previous\"),\n    ]\n\n    CSS_PATH = \"actions06.tcss\"\n\n    page_no = reactive(0, bindings=True)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        with HorizontalScroll(id=\"page-container\"):\n            for page_no in range(PAGES_COUNT):\n                yield Placeholder(f\"Page {page_no}\", id=f\"page-{page_no}\")\n        yield Footer()\n\n    def action_next(self) -&gt; None:\n        self.page_no += 1\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def action_previous(self) -&gt; None:\n        self.page_no -= 1\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def check_action(self, action: str, parameters: tuple[object, ...]) -&gt; bool | None:\n        \"\"\"Check if an action may run.\"\"\"\n        if action == \"next\" and self.page_no == PAGES_COUNT - 1:\n            return None  # (2)!\n        if action == \"previous\" and self.page_no == 0:\n            return None  # (3)!\n        return True\n\n\nif __name__ == \"__main__\":\n    app = PagesApp()\n    app.run()\n</code></pre> <ol> <li>The <code>bindings=True</code> causes the footer to refresh when <code>page_no</code> changes.</li> <li>Returning <code>None</code> disables the key in the footer rather than hides it</li> <li>Returning <code>None</code> disables the key in the footer rather than hides it.</li> </ol> actions06.tcss<pre><code>#page-container {\n    # This hides the scrollbar\n    scrollbar-size: 0 0;\n}\n</code></pre> <p> PagesApp Page\u00a00 \u00a0n\u00a0Next\u00a0\u00a0p\u00a0Previous\u00a0\u258f^p\u00a0palette </p> <p>Note how the logic is the same but we don't need to explicitly call <code>refresh_bindings</code>. The change to <code>check_action</code> also causes the disabled footer keys to be grayed out, indicating they are temporarily unavailable.</p>"},{"location":"guide/actions/#builtin-actions","title":"Builtin actions","text":"<p>Textual supports the following builtin actions which are defined on the app.</p> <ul> <li>action_add_class</li> <li>action_back</li> <li>action_bell</li> <li>action_focus_next</li> <li>action_focus_previous</li> <li>action_focus</li> <li>action_pop_screen</li> <li>action_push_screen</li> <li>action_quit</li> <li>action_remove_class</li> <li>action_screenshot</li> <li>action_simulate_key</li> <li>action_suspend_process</li> <li>action_switch_screen</li> <li>action_toggle_class</li> <li>action_toggle_dark</li> </ul>"},{"location":"guide/animation/","title":"Animation","text":"<p>This chapter discusses how to use Textual's animation system to create visual effects such as movement, blending, and fading.</p>"},{"location":"guide/animation/#animating-styles","title":"Animating styles","text":"<p>Textual's animator can change an attribute from one value to another in fixed increments over a period of time. You can apply animations to styles such as <code>offset</code> to move widgets around the screen, and <code>opacity</code> to create fading effects.</p> <p>Apps and widgets both have an animate method which will animate properties on those objects. Additionally, <code>styles</code> objects have an identical <code>animate</code> method which will animate styles.</p> <p>Let's look at an example of how we can animate the opacity of a widget to make it fade out. The following example app contains a single <code>Static</code> widget which is immediately animated to an opacity of <code>0.0</code> (making it invisible) over a duration of two seconds.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass AnimationApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.box = Static(\"Hello, World!\")\n        self.box.styles.background = \"red\"\n        self.box.styles.color = \"black\"\n        self.box.styles.padding = (1, 2)\n        yield self.box\n\n    def on_mount(self):\n        self.box.styles.animate(\"opacity\", value=0.0, duration=2.0)\n\n\nif __name__ == \"__main__\":\n    app = AnimationApp()\n    app.run()\n</code></pre> <p>The animator updates the value of the <code>opacity</code> attribute on the <code>styles</code> object in small increments over two seconds. Here's how the widget will change as time progresses:</p> After 0sAfter 1sAfter 1.5sAfter 2s <p> AnimationApp Hello,\u00a0World! </p> <p> AnimationApp Hello,\u00a0World! </p> <p> AnimationApp Hello,\u00a0World! </p> <p> AnimationApp Hello,\u00a0World! </p>"},{"location":"guide/animation/#duration-and-speed","title":"Duration and Speed","text":"<p>When requesting an animation you can specify a duration or speed. The duration is how long the animation should take in seconds. The speed is how many units a value should change in one second. For instance, if you animate a value at 0 to 10 with a speed of 2, it will complete in 5 seconds.</p>"},{"location":"guide/animation/#easing-functions","title":"Easing functions","text":"<p>The easing function determines the journey a value takes on its way to the target value. It could move at a constant pace, or it might start off slow then accelerate towards its final value. Textual supports a number of easing functions.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1XWVPjRlx1MDAxMH7nV1DeVyzmPrYqlYJcdTAwMDVcdTAwMTJcdTAwMDJLXHUwMDBlczib2ofBXHUwMDFh21x1MDAxM8uSkMZcdTAwMDaW4r+nJVx1MDAxM48vwrnUblX0YGumZ3q+6e6vu3Wztr7e8Ne5bbxfb9irjklcXFxcmMvGRjU/tkXpslx1MDAxNESkXHUwMDFll9mo6NQr+97n5fvNzaEpXHUwMDA21ueJ6dho7MqRSUo/il1cdTAwMTZ1suGm83ZY/lj9XHUwMDFlmaH9Ic+GsS+icEjTxs5nxeQsm9ihTX1cdNr/gvH6+k39O4POXHUwMDE0RTZcdTAwMDFWT1x1MDAwN3BKL05cdTAwMWVlaY1cdTAwMTMjrjSjWuDpXG5X7sBR3sYg7lx1MDAwMlxcXHUwMDFiJNVU42Tvl7TZ/nX76rh1fDDO+4j+dNVcdKd2XZK0/HUysYLp9EeFXHLS0lx1MDAxN9nAnrnY9/812sz8dF9syj5cdTAwMDCYiots1OuntqwuXHUwMDFmkGa56Th/XV9cdTAwMDNNZ03aq5WEmStcdTAwMThRwSMqXHUwMDE0XHUwMDE3XGZRQZhUU2m1n2lcdTAwMWNxXHUwMDAxcsyRRIxcdTAwMTK5gOxDloBcdTAwMWZcdTAwMDDZO1Q/XHUwMDAx2rnpXGZ6gC+Np2t8YdIyN1x1MDAwNXgrrLu8uzOONGZIXHUwMDEwPpX0rev1fWVcdTAwMGXCXCIlg6C0tVx1MDAxM7DCmiuhUZBUXHUwMDA35vtxXHUwMDFkXHUwMDBin1x1MDAxN43YN0V+Z6tGXHJsXHUwMDA2bDXcnVx0pLB5lMdm4nQsXHUwMDA0x1xcXHUwMDEzWtlqKk9cXDpcdTAwMDBhOkqSMJd1XHUwMDA2K+Kk9Kbw2y6NXdpb3GLT+Fx1MDAxZUliSv8hXHUwMDFiXHUwMDBlnVx1MDAwN1x1MDAxOL9lLvWLK2q9W1WQ962JV2ielS2yIa80XHUwMDA28lRPeFtcdTAwMGbRUlx1MDAwZqbvnzdWrm4uebGevXNg2L02+3+78UTa4pkwXFzkraCaIaxkYPZDvKUnh1x1MDAwN7y9d/7n3uFheaJHgra3+t9cdTAwMDFvRUQgXHUwMDE2pdRaXHUwMDAwbdlcdTAwMTJvMaFIYES1XHUwMDE0mi9cdTAwMDB7PdpShFwiKSmjclx1MDAwNXFxJCFtUEyWuEs5Ykpr9sbUhdAgwY7/U3dmwVxuR1ZPM/jwifRcdTAwMDXr2pXsRfL+skuYpkpjXHUwMDFj8utD9G3r38nu2cfty7//6F1cZoa7R1x1MDAwM3aQvDJ9y1xm+o7Xr7pUXHUwMDAwNSWjeJagNX2VjJCQXFxTRojmSC9cdTAwMDBcdTAwMGL0VYJY3XlcdH1pJKSCUsqpRFqH8lx1MDAxZqovXHUwMDAyMFx1MDAwNHMhJWGKXHUwMDEyvURmgpnAXHUwMDAyIf6mbFZcbmCrXHUwMDAw+Htj85zsVamMMYso4lpqSoRcdTAwMTYqNLHV06QogsZcdTAwMTZxJjWD5lx0yVx1MDAwN/VpXHUwMDEyKVwiJHTDoJJzzOb0YYVcIkisWFIou1x1MDAxMlx1MDAwYvVwqrkn6Gp1y/H2xMTj7ZVflXjEfVmnSjpcdTAwMDRcbkPoKlx1MDAxZUo6O+3Wyadd0vz482D3tDX+1L44z/Hzklx1MDAwZV5kx1dLOuDsiDBcdTAwMDZdPuJcdTAwMDRcbvB8q89cdHiRay5cdTAwMTTl0PD/R855acvAXHUwMDAyrJBklrt7wYggirFw2UcnlbJcdTAwMWE8M6lQKlmIlCcklW6W+pb7Ulx1MDAwN1x1MDAxNJqb3TNDl1xcz/mtjtHKUG5oZy1Z2rpsVlx1MDAxZjdza7dcdTAwMTLXS+uqarvzwe1cdTAwMWR8XHUwMDE1T8U+m7l3XHUwMDA3zjagrthfyjdZ4XouNcnxLI5nsYrcW8zhq1x1MDAxMVPIXG6Pp9Vps9y/lGdcdTAwMTe90+ukvfOlO+52bfNbp1x1MDAxNYH0x1x1MDAxNaZcXCqFkObznTiQKVx1MDAxMlxcK2jEXHUwMDE5NFLQkn81XnHyKF5BktaKMvyMYv1cdTAwMTJesSrLvlx1MDAxOa/GJlx1MDAxOX1cdTAwMTPEmlx1MDAwMJkwa+2uXCI2TJ63PNhcdTAwMDdcdTAwMTZMeFx1MDAwNi5w8d0lg7rG2NnL7eUoeNetn0przdaKXHUwMDE4tnLAze3a7T8uXFzYXHUwMDFjIn0= timevalue <p>Run the following from the command prompt to preview them.</p> <pre><code>textual easing\n</code></pre> <p>You can specify which easing method to use via the <code>easing</code> parameter on the <code>animate</code> method. The default easing method is <code>\"in_out_cubic\"</code> which accelerates and then decelerates to produce a pleasing organic motion.</p> <p>Note</p> <p>The <code>textual easing</code> preview requires the <code>textual-dev</code> package to be installed (using <code>pip install textual-dev</code>).</p>"},{"location":"guide/animation/#completion-callbacks","title":"Completion callbacks","text":"<p>You can pass a callable to the animator via the <code>on_complete</code> parameter. Textual will run the callable when the animation has completed.</p>"},{"location":"guide/animation/#delaying-animations","title":"Delaying animations","text":"<p>You can delay the start of an animation with the <code>delay</code> parameter of the <code>animate</code> method. This parameter accepts a <code>float</code> value representing the number of seconds to delay the animation by. For example, <code>self.box.styles.animate(\"opacity\", value=0.0, duration=2.0, delay=5.0)</code> delays the start of the animation by five seconds, meaning the animation will start after 5 seconds and complete 2 seconds after that.</p>"},{"location":"guide/app/","title":"App Basics","text":"<p>In this chapter we will cover how to use Textual's App class to create an application. Just enough to get you up to speed. We will go in to more detail in the following chapters.</p>"},{"location":"guide/app/#the-app-class","title":"The App class","text":"<p>The first step in building a Textual app is to import the App class and create a subclass. Let's look at the simplest app class:</p> <pre><code>from textual.app import App\n\n\nclass MyApp(App):\n    pass\n</code></pre>"},{"location":"guide/app/#the-run-method","title":"The run method","text":"<p>To run an app we create an instance and call run().</p> simple02.py<pre><code>from textual.app import App\n\n\nclass MyApp(App):\n    pass\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <p>Apps don't get much simpler than this\u2014don't expect it to do much.</p> <p>Tip</p> <p>The <code>__name__ == \"__main__\":</code> condition is true only if you run the file with <code>python</code> command. This allows us to import <code>app</code> without running the app immediately. It also allows the devtools run command to run the app in development mode. See the Python docs for more information.</p> <p>If we run this app with <code>python simple02.py</code> you will see a blank terminal, something like the following:</p> <p> MyApp </p> <p>When you call App.run() Textual puts the terminal in to a special state called application mode. When in application mode the terminal will no longer echo what you type. Textual will take over responding to user input (keyboard and mouse) and will update the visible portion of the terminal (i.e. the screen).</p> <p>If you hit Ctrl+C Textual will exit application mode and return you to the command prompt. Any content you had in the terminal prior to application mode will be restored.</p> <p>Tip</p> <p>A side effect of application mode is that you may no longer be able to select and copy text in the usual way. Terminals typically offer a way to bypass this limit with a key modifier. On iTerm you can select text if you hold the Option key. See the documentation for your terminal software for how to select text in application mode.</p>"},{"location":"guide/app/#run-inline","title":"Run inline","text":"<p>Added in version 0.55.0</p> <p>You can also run apps in inline mode, which will cause the app to appear beneath the prompt (and won't go in to application mode). Inline apps are useful for tools that integrate closely with the typical workflow of a terminal.</p> <p>To run an app in inline mode set the <code>inline</code> parameter to <code>True</code> when you call App.run(). See Style Inline Apps for how to apply additional styles to inline apps.</p> <p>Note</p> <p>Inline mode is not currently supported on Windows.</p>"},{"location":"guide/app/#events","title":"Events","text":"<p>Textual has an event system you can use to respond to key presses, mouse actions, and internal state changes. Event handlers are methods prefixed with <code>on_</code> followed by the name of the event.</p> <p>One such event is the mount event which is sent to an application after it enters application mode. You can respond to this event by defining a method called <code>on_mount</code>.</p> <p>Info</p> <p>You may have noticed we use the term \"send\" and \"sent\" in relation to event handler methods in preference to \"calling\". This is because Textual uses a message passing system where events are passed (or sent) between components. See events for details.</p> <p>Another such event is the key event which is sent when the user presses a key. The following example contains handlers for both those events:</p> event01.py<pre><code>from textual.app import App\nfrom textual import events\n\n\nclass EventApp(App):\n\n    COLORS = [\n        \"white\",\n        \"maroon\",\n        \"red\",\n        \"purple\",\n        \"fuchsia\",\n        \"olive\",\n        \"yellow\",\n        \"navy\",\n        \"teal\",\n        \"aqua\",\n    ]\n\n    def on_mount(self) -&gt; None:\n        self.screen.styles.background = \"darkblue\"\n\n    def on_key(self, event: events.Key) -&gt; None:\n        if event.key.isdecimal():\n            self.screen.styles.background = self.COLORS[int(event.key)]\n\n\nif __name__ == \"__main__\":\n    app = EventApp()\n    app.run()\n</code></pre> <p>The <code>on_mount</code> handler sets the <code>self.screen.styles.background</code> attribute to <code>\"darkblue\"</code> which (as you can probably guess) turns the background blue. Since the mount event is sent immediately after entering application mode, you will see a blue screen when you run this code.</p> <p> EventApp </p> <p>The key event handler (<code>on_key</code>) has an <code>event</code> parameter which will receive a Key instance. Every event has an associated event object which will be passed to the handler method if it is present in the method's parameter list.</p> <p>Note</p> <p>It is unusual (but not unprecedented) for a method's parameters to affect how it is called. Textual accomplishes this by inspecting the method prior to calling it.</p> <p>Some events contain additional information you can inspect in the handler. The Key event has a <code>key</code> attribute which is the name of the key that was pressed. The <code>on_key</code> method above uses this attribute to change the background color if any of the keys from 0 to 9 are pressed.</p>"},{"location":"guide/app/#async-events","title":"Async events","text":"<p>Textual is powered by Python's asyncio framework which uses the <code>async</code> and <code>await</code> keywords.</p> <p>Textual knows to await your event handlers if they are coroutines (i.e. prefixed with the <code>async</code> keyword). Regular functions are generally fine unless you plan on integrating other async libraries (such as httpx for reading data from the internet).</p> <p>Tip</p> <p>For a friendly introduction to async programming in Python, see FastAPI's concurrent burgers article.</p>"},{"location":"guide/app/#widgets","title":"Widgets","text":"<p>Widgets are self-contained components responsible for generating the output for a portion of the screen. Widgets respond to events in much the same way as the App. Most apps that do anything interesting will contain at least one (and probably many) widgets which together form a User Interface.</p> <p>Widgets can be as simple as a piece of text, a button, or a fully-fledged component like a text editor or file browser (which may contain widgets of their own).</p>"},{"location":"guide/app/#composing","title":"Composing","text":"<p>To add widgets to your app implement a <code>compose()</code> method which should return an iterable of <code>Widget</code> instances. A list would work, but it is convenient to yield widgets, making the method a generator.</p> <p>The following example imports a builtin <code>Welcome</code> widget and yields it from <code>App.compose()</code>.</p> widgets01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Welcome\n\n\nclass WelcomeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Welcome()\n\n    def on_button_pressed(self) -&gt; None:\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <p>When you run this code, Textual will mount the <code>Welcome</code> widget which contains Markdown content and a button:</p> <p> WelcomeApp \u00a0\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0 \u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0 \u00a0\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u00a0 \u00a0Textual\u00a0is\u00a0a\u00a0TUI,\u00a0or\u00a0Text\u00a0User\u00a0Interface,\u00a0framework\u00a0for\u00a0Python\u00a0inspired\u00a0by\u00a0\u00a0\u00a0 \u00a0modern\u00a0web\u00a0development.\u00a0We\u00a0hope\u00a0you\u00a0enjoy\u00a0using\u00a0Textual! Dune\u00a0quote \u258c\u00a0\"I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that \u258c\u00a0brings\u00a0total\u00a0obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass \u258c\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner \u258c\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only \u258c\u00a0I\u00a0will\u00a0remain.\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0OK\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Notice the <code>on_button_pressed</code> method which handles the Button.Pressed event sent by a button contained in the <code>Welcome</code> widget. The handler calls App.exit() to exit the app.</p>"},{"location":"guide/app/#mounting","title":"Mounting","text":"<p>While composing is the preferred way of adding widgets when your app starts it is sometimes necessary to add new widget(s) in response to events. You can do this by calling mount() which will add a new widget to the UI.</p> <p>Here's an app which adds a welcome widget in response to any key press:</p> widgets02.py<pre><code>from textual.app import App\nfrom textual.widgets import Welcome\n\n\nclass WelcomeApp(App):\n    def on_key(self) -&gt; None:\n        self.mount(Welcome())\n\n    def on_button_pressed(self) -&gt; None:\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <p>When you first run this you will get a blank screen. Press any key to add the welcome widget. You can even press a key multiple times to add several widgets.</p> <p> WelcomeApp \u00a0\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0 \u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0\u2582\u2582 \u00a0\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u00a0 \u00a0Textual\u00a0is\u00a0a\u00a0TUI,\u00a0or\u00a0Text\u00a0User\u00a0Interface,\u00a0framework\u00a0for\u00a0Python\u00a0inspired\u00a0by\u00a0 \u00a0modern\u00a0web\u00a0development.\u00a0We\u00a0hope\u00a0you\u00a0enjoy\u00a0using\u00a0Textual! Dune\u00a0quote \u258c\u00a0\"I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0\u00a0\u00a0 \u258c\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0 \u258c\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn \u258c\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u00a0 \u258c\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0OK\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#awaiting-mount","title":"Awaiting mount","text":"<p>When you mount a widget, Textual will mount everything the widget composes. Textual guarantees that the mounting will be complete by the next message handler, but not immediately after the call to <code>mount()</code>. This may be a problem if you want to make any changes to the widget in the same message handler.</p> <p>Let's first illustrate the problem with an example. The following code will mount the Welcome widget in response to a key press. It will also attempt to modify the Button in the Welcome widget by changing its label from \"OK\" to \"YES!\".</p> <pre><code>from textual.app import App\nfrom textual.widgets import Button, Welcome\n\n\nclass WelcomeApp(App):\n    def on_key(self) -&gt; None:\n        self.mount(Welcome())\n        self.query_one(Button).label = \"YES!\" # (1)!\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <ol> <li>See queries for more information on the <code>query_one</code> method.</li> </ol> <p>If you run this example, you will find that Textual raises a NoMatches exception when you press a key. This is because the mount process has not yet completed when we attempt to change the button.</p> <p>To solve this we can optionally await the result of <code>mount()</code>, which requires we make the function <code>async</code>. This guarantees that by the following line, the Button has been mounted, and we can change its label.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Button, Welcome\n\n\nclass WelcomeApp(App):\n    async def on_key(self) -&gt; None:\n        await self.mount(Welcome())\n        self.query_one(Button).label = \"YES!\"\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <p>Here's the output. Note the changed button text:</p> <p> WelcomeApp \u00a0\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0 \u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0 \u00a0\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u00a0 \u00a0Textual\u00a0is\u00a0a\u00a0TUI,\u00a0or\u00a0Text\u00a0User\u00a0Interface,\u00a0framework\u00a0for\u00a0Python\u00a0inspired\u00a0by\u00a0\u00a0\u00a0 \u00a0modern\u00a0web\u00a0development.\u00a0We\u00a0hope\u00a0you\u00a0enjoy\u00a0using\u00a0Textual! Dune\u00a0quote \u258c\u00a0\"I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that \u258c\u00a0brings\u00a0total\u00a0obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass \u258c\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner \u258c\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only \u258c\u00a0I\u00a0will\u00a0remain.\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0YES!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#exiting","title":"Exiting","text":"<p>An app will run until you call App.exit() which will exit application mode and the run method will return. If this is the last line in your code you will return to the command prompt.</p> <p>The exit method will also accept an optional positional value to be returned by <code>run()</code>. The following example uses this to return the <code>id</code> (identifier) of a clicked button.</p> question01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, Button\n\n\nclass QuestionApp(App[str]):\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>Running this app will give you the following:</p> <p> QuestionApp Do\u00a0you\u00a0love\u00a0Textual?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Clicking either of those buttons will exit the app, and the <code>run()</code> method will return either <code>\"yes\"</code> or <code>\"no\"</code> depending on button clicked.</p>"},{"location":"guide/app/#return-type","title":"Return type","text":"<p>You may have noticed that we subclassed <code>App[str]</code> rather than the usual <code>App</code>.</p> question01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, Button\n\n\nclass QuestionApp(App[str]):\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>The addition of <code>[str]</code> tells mypy that <code>run()</code> is expected to return a string. It may also return <code>None</code> if App.exit() is called without a return value, so the return type of <code>run</code> will be <code>str | None</code>. Replace the <code>str</code> in <code>[str]</code> with the type of the value you intend to call the exit method with.</p> <p>Note</p> <p>Type annotations are entirely optional (but recommended) with Textual.</p>"},{"location":"guide/app/#return-code","title":"Return code","text":"<p>When you exit a Textual app with <code>App.exit()</code>, you can optionally specify a return code with the <code>return_code</code> parameter.</p> <p>What are return codes?</p> <p>Returns codes are a standard feature provided by your operating system. When any application exits it can return an integer to indicate if it was successful or not. A return code of <code>0</code> indicates success, any other value indicates that an error occurred. The exact meaning of a non-zero return code is application-dependant.</p> <p>When a Textual app exits normally, the return code will be <code>0</code>. If there is an unhandled exception, Textual will set a return code of <code>1</code>. You may want to set a different value for the return code if there is error condition that you want to differentiate from an unhandled exception.</p> <p>Here's an example of setting a return code for an error condition:</p> <pre><code>if critical_error:\n    self.exit(return_code=4, message=\"Critical error occurred\")\n</code></pre> <p>The app's return code can be queried with <code>app.return_code</code>, which will be <code>None</code> if it hasn't been set, or an integer.</p> <p>Textual won't explicitly exit the process. To exit the app with a return code, you should call <code>sys.exit</code>. Here's how you might do that:</p> <pre><code>if __name__ == \"__main__\"\n    app = MyApp()\n    app.run()\n    import sys\n    sys.exit(app.return_code or 0)\n</code></pre>"},{"location":"guide/app/#suspending","title":"Suspending","text":"<p>A Textual app may be suspended so you can leave application mode for a period of time. This is often used to temporarily replace your app with another terminal application.</p> <p>You could use this to allow the user to edit content with their preferred text editor, for example.</p> <p>Info</p> <p>App suspension is unavailable with textual-web.</p>"},{"location":"guide/app/#suspend-context-manager","title":"Suspend context manager","text":"<p>You can use the App.suspend context manager to suspend your app. The following Textual app will launch vim (a text editor) when the user clicks a button:</p> suspend.pyOutput <pre><code>from os import system\n\nfrom textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass SuspendingApp(App[None]):\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"Open the editor\", id=\"edit\")\n\n    @on(Button.Pressed, \"#edit\")\n    def run_external_editor(self) -&gt; None:\n        with self.suspend():  # (1)!\n            system(\"vim\")\n\n\nif __name__ == \"__main__\":\n    SuspendingApp().run()\n</code></pre> <ol> <li>All code in the body of the <code>with</code> statement will be run while the app is suspended.</li> </ol> <p> SuspendingApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Open\u00a0the\u00a0editor\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#suspending-from-foreground","title":"Suspending from foreground","text":"<p>On Unix and Unix-like systems (GNU/Linux, macOS, etc) Textual has support for the user pressing a key combination to suspend the application as the foreground process. Ordinarily this key combination is Ctrl+Z; in a Textual application this is disabled by default, but an action is provided (<code>action_suspend_process</code>) that you can bind in the usual way. For example:</p> suspend_process.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.binding import Binding\nfrom textual.widgets import Label\n\n\nclass SuspendKeysApp(App[None]):\n\n    BINDINGS = [Binding(\"ctrl+z\", \"suspend_process\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Press Ctrl+Z to suspend!\")\n\n\nif __name__ == \"__main__\":\n    SuspendKeysApp().run()\n</code></pre> <p> SuspendKeysApp Press\u00a0Ctrl+Z\u00a0to\u00a0suspend!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p>Note</p> <p>If <code>suspend_process</code> is called on Windows, or when your application is being hosted under Textual Web, the call will be ignored.</p>"},{"location":"guide/app/#css","title":"CSS","text":"<p>Textual apps can reference CSS files which define how your app and widgets will look, while keeping your Python code free of display related code (which tends to be messy).</p> <p>Info</p> <p>Textual apps typically use the extension <code>.tcss</code> for external CSS files to differentiate them from browser (<code>.css</code>) files.</p> <p>The chapter on Textual CSS describes how to use CSS in detail. For now let's look at how your app references external CSS files.</p> <p>The following example enables loading of CSS by adding a <code>CSS_PATH</code> class variable:</p> question02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button, Label\n\n\nclass QuestionApp(App[str]):\n    CSS_PATH = \"question02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>Note</p> <p>We also added an <code>id</code> to the <code>Label</code>, because we want to style it in the CSS.</p> <p>If the path is relative (as it is above) then it is taken as relative to where the app is defined. Hence this example references <code>\"question01.tcss\"</code> in the same directory as the Python code. Here is that CSS file:</p> question02.tcss<pre><code>Screen {\n    layout: grid;\n    grid-size: 2;\n    grid-gutter: 2;\n    padding: 2;\n}\n#question {\n    width: 100%;\n    height: 100%;\n    column-span: 2;\n    content-align: center bottom;\n    text-style: bold;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>When <code>\"question02.py\"</code> runs it will load <code>\"question02.tcss\"</code> and update the app and widgets accordingly. Even though the code is almost identical to the previous sample, the app now looks quite different:</p> <p> QuestionApp Do\u00a0you\u00a0love\u00a0Textual? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#classvar-css","title":"Classvar CSS","text":"<p>While external CSS files are recommended for most applications, and enable some cool features like live editing, you can also specify the CSS directly within the Python code.</p> <p>To do this set a <code>CSS</code> class variable on the app to a string containing your CSS.</p> <p>Here's the question app with classvar CSS:</p> question03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, Button\n\n\nclass QuestionApp(App[str]):\n    CSS = \"\"\"\n    Screen {\n        layout: grid;\n        grid-size: 2;\n        grid-gutter: 2;\n        padding: 2;\n    }\n    #question {\n        width: 100%;\n        height: 100%;\n        column-span: 2;\n        content-align: center bottom;\n        text-style: bold;\n    }\n\n    Button {\n        width: 100%;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre>"},{"location":"guide/app/#title-and-subtitle","title":"Title and subtitle","text":"<p>Textual apps have a <code>title</code> attribute which is typically the name of your application, and an optional <code>sub_title</code> attribute which adds additional context (such as the file your are working on). By default, <code>title</code> will be set to the name of your App class, and <code>sub_title</code> is empty. You can change these defaults by defining <code>TITLE</code> and <code>SUB_TITLE</code> class variables. Here's an example of that:</p> question_title01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button, Header, Label\n\n\nclass MyApp(App[str]):\n    CSS_PATH = \"question02.tcss\"\n    TITLE = \"A Question App\"\n    SUB_TITLE = \"The most important question\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>Note that the title and subtitle are displayed by the builtin Header widget at the top of the screen:</p> <p> A\u00a0Question\u00a0App \u2b58A\u00a0Question\u00a0App\u00a0\u2014\u00a0The\u00a0most\u00a0important\u00a0question Do\u00a0you\u00a0love\u00a0Textual? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>You can also set the title attributes dynamically within a method of your app. The following example sets the title and subtitle in response to a key press:</p> question_title02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.events import Key\nfrom textual.widgets import Button, Header, Label\n\n\nclass MyApp(App[str]):\n    CSS_PATH = \"question02.tcss\"\n    TITLE = \"A Question App\"\n    SUB_TITLE = \"The most important question\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n    def on_key(self, event: Key):\n        self.title = event.key\n        self.sub_title = f\"You just pressed {event.key}!\"\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>If you run this app and press the T key, you should see the header update accordingly:</p> <p> A\u00a0Question\u00a0App \u2b58t\u00a0\u2014\u00a0You\u00a0just\u00a0pressed\u00a0t! Do\u00a0you\u00a0love\u00a0Textual? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Info</p> <p>Note that there is no need to explicitly refresh the screen when setting the title attributes. This is an example of reactivity, which we will cover later in the guide.</p>"},{"location":"guide/app/#whats-next","title":"What's next","text":"<p>In the following chapter we will learn more about how to apply styles to your widgets and app.</p>"},{"location":"guide/command_palette/","title":"Command Palette","text":"<p>Textual apps have a built-in command palette, which gives users a quick way to access certain functionality within your app.</p> <p>In this chapter we will explain what a command palette is, how to use it, and how you can add your own commands.</p>"},{"location":"guide/command_palette/#launching-the-command-palette","title":"Launching the command palette","text":"<p>Press Ctrl+P to invoke the command palette screen, which contains of a single input widget. Textual will suggest commands as you type in that input. Press Up or Down to select a command from the list, and Enter to invoke it.</p> <p>Commands are looked up via a fuzzy search, which means Textual will show commands that match the keys you type in the same order, but not necessarily at the start of the command. For instance the \"Toggle light/dark mode\" command will be shown if you type \"to\" (for toggle), but you could also type \"dm\" (to match dark mode). This scheme allows the user to quickly get to a particular command with a minimum of key-presses.</p> Command PaletteCommand Palette after 't'Command Palette after 'td' <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0eSearch\u00a0for\u00a0commands\u2026 \u00a0\u00a0Bell\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Ring\u00a0the\u00a0bell \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u00a0\u00a0Quit\u00a0the\u00a0application\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quit\u00a0the\u00a0application\u00a0as\u00a0soon\u00a0as\u00a0possible \u00a0\u00a0Save\u00a0screenshot\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Save\u00a0an\u00a0SVG\u00a0'screenshot'\u00a0of\u00a0the\u00a0current\u00a0screen \u00a0\u00a0Show\u00a0keys\u00a0and\u00a0help\u00a0panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Show\u00a0help\u00a0for\u00a0the\u00a0focused\u00a0widget\u00a0and\u00a0a\u00a0summary\u00a0of\u00a0available\u00a0keys \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0et \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u00a0\u00a0Quit\u00a0the\u00a0application\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quit\u00a0the\u00a0application\u00a0as\u00a0soon\u00a0as\u00a0possible \u00a0\u00a0Save\u00a0screenshot Save\u00a0an\u00a0SVG\u00a0'screenshot'\u00a0of\u00a0the\u00a0current\u00a0screen \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0etd \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/command_palette/#system-commands","title":"System commands","text":"<p>Textual apps have a number of system commands enabled by default. These are declared in the <code>App.get_system_commands</code> method. You can implement this method in your App class to add more commands.</p> <p>To declare a command, define a <code>get_system_commands</code> method on your App. Textual will call this method with the screen that was active when the user summoned the command palette. </p> <p>You can add a command by yielding a <code>SystemCommand</code> object which contains <code>title</code> and <code>help</code> text to be shown in the command palette, and <code>callback</code> which is a callable to run when the user selects the command. Additionally, there is a <code>discover</code> boolean which when <code>True</code> (the default) shows the command even if the search import is empty. When set to <code>False</code>, the command will show only when there is input.</p> <p>Here's how we would add a command to ring the terminal bell (a super useful piece of functionality):</p> command01.pyOutput command01.py<pre><code>from typing import Iterable\n\nfrom textual.app import App, SystemCommand\nfrom textual.screen import Screen\n\n\nclass BellCommandApp(App):\n    \"\"\"An app with a 'bell' command.\"\"\"\n\n    def get_system_commands(self, screen: Screen) -&gt; Iterable[SystemCommand]:\n        yield from super().get_system_commands(screen)  # (1)!\n        yield SystemCommand(\"Bell\", \"Ring the bell\", self.bell)  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = BellCommandApp()\n    app.run()\n</code></pre> <ol> <li>Adds the default commands from the base class.</li> <li>Adds a new command.</li> </ol> <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0eSearch\u00a0for\u00a0commands\u2026 \u00a0\u00a0Bell\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Ring\u00a0the\u00a0bell \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u00a0\u00a0Quit\u00a0the\u00a0application\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quit\u00a0the\u00a0application\u00a0as\u00a0soon\u00a0as\u00a0possible \u00a0\u00a0Save\u00a0screenshot\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Save\u00a0an\u00a0SVG\u00a0'screenshot'\u00a0of\u00a0the\u00a0current\u00a0screen \u00a0\u00a0Show\u00a0keys\u00a0and\u00a0help\u00a0panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Show\u00a0help\u00a0for\u00a0the\u00a0focused\u00a0widget\u00a0and\u00a0a\u00a0summary\u00a0of\u00a0available\u00a0keys \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>This is a straightforward way of adding commands to your app. For more advanced integrations you can implement your own command providers.</p>"},{"location":"guide/command_palette/#command-providers","title":"Command providers","text":"<p>To add your own command(s) to the command palette, define a <code>command.Provider</code> class then add it to the <code>COMMANDS</code> class var on your <code>App</code> class.</p> <p>Let's look at a simple example which adds the ability to open Python files via the command palette.</p> <p>The following example will display a blank screen initially, but if you bring up the command palette and start typing the name of a Python file, it will show the command to open it.</p> <p>Tip</p> <p>If you are running that example from the repository, you may want to add some additional Python files to see how the examples works with multiple files.</p> command02.py<pre><code>from __future__ import annotations\n\nfrom functools import partial\nfrom pathlib import Path\n\nfrom textual.app import App, ComposeResult\nfrom textual.command import Hit, Hits, Provider\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Static\n\n\nclass PythonFileCommands(Provider):\n    \"\"\"A command provider to open a Python file in the current working directory.\"\"\"\n\n    def read_files(self) -&gt; list[Path]:\n        \"\"\"Get a list of Python files in the current working directory.\"\"\"\n        return list(Path(\"./\").glob(\"*.py\"))\n\n    async def startup(self) -&gt; None:  # (1)!\n        \"\"\"Called once when the command palette is opened, prior to searching.\"\"\"\n        worker = self.app.run_worker(self.read_files, thread=True)\n        self.python_paths = await worker.wait()\n\n    async def search(self, query: str) -&gt; Hits:  # (2)!\n        \"\"\"Search for Python files.\"\"\"\n        matcher = self.matcher(query)  # (3)!\n\n        app = self.app\n        assert isinstance(app, ViewerApp)\n\n        for path in self.python_paths:\n            command = f\"open {str(path)}\"\n            score = matcher.match(command)  # (4)!\n            if score &gt; 0:\n                yield Hit(\n                    score,\n                    matcher.highlight(command),  # (5)!\n                    partial(app.open_file, path),\n                    help=\"Open this file in the viewer\",\n                )\n\n\nclass ViewerApp(App):\n    \"\"\"Demonstrate a command source.\"\"\"\n\n    COMMANDS = App.COMMANDS | {PythonFileCommands}  # (6)!\n\n    def compose(self) -&gt; ComposeResult:\n        with VerticalScroll():\n            yield Static(id=\"code\", expand=True)\n\n    def open_file(self, path: Path) -&gt; None:\n        \"\"\"Open and display a file with syntax highlighting.\"\"\"\n        from rich.syntax import Syntax\n\n        syntax = Syntax.from_path(\n            str(path),\n            line_numbers=True,\n            word_wrap=False,\n            indent_guides=True,\n            theme=\"github-dark\",\n        )\n        self.query_one(\"#code\", Static).update(syntax)\n\n\nif __name__ == \"__main__\":\n    app = ViewerApp()\n    app.run()\n</code></pre> <ol> <li>This method is called when the command palette is first opened.</li> <li>Called on each key-press.</li> <li>Get a Matcher instance to compare against hits.</li> <li>Use the matcher to get a score.</li> <li>Highlights matching letters in the search.</li> <li>Adds our custom command provider and the default command provider.</li> </ol> <p>There are four methods you can override in a command provider: <code>startup</code>, <code>search</code>, <code>discover</code> and <code>shutdown</code>. All of these methods should be coroutines (<code>async def</code>). Only <code>search</code> is required, the other methods are optional. Let's explore those methods in detail.</p>"},{"location":"guide/command_palette/#startup-method","title":"startup method","text":"<p>The <code>startup</code> method is called when the command palette is opened. You can use this method as way of performing work that needs to be done prior to searching. In the example, we use this method to get the Python (.py) files in the current working directory.</p>"},{"location":"guide/command_palette/#search-method","title":"search method","text":"<p>The <code>search</code> method is responsible for finding results (or hits) that match the user's input. This method should yield <code>Hit</code> objects for any command that matches the <code>query</code> argument.</p> <p>Exactly how the matching is implemented is up to the author of the command provider, but we recommend using the builtin fuzzy matcher object, which you can get by calling <code>matcher</code>. This object has a <code>match()</code> method which compares the user's search term against the potential command and returns a score. A score of zero means no hit, and you can discard the potential command. A score of above zero indicates the confidence in the result, where 1 is an exact match, and anything lower indicates a less confident match.</p> <p>The <code>Hit</code> contains information about the score (used in ordering) and how the hit should be displayed, and an optional help string. It also contains a callback, which will be run if the user selects that command.</p> <p>In the example above, the callback is a lambda which calls the <code>open_file</code> method in the example app.</p> <p>Note</p> <p>Unlike most other places in Textual, errors in command provider will not exit the app. This is a deliberate design decision taken to prevent a single broken <code>Provider</code> class from making the command palette unusable. Errors in command providers will be logged to the console.</p>"},{"location":"guide/command_palette/#discover-method","title":"discover method","text":"<p>The <code>discover</code> method is responsible for providing results (or discovery hits) that should be shown to the user when the command palette input is empty; this is to aid in command discoverability.</p> <p>Note</p> <p>Because <code>discover</code> hits are shown the moment the command palette is opened, these should ideally be quick to generate; commands that might take time to generate are best left for <code>search</code> -- use <code>discover</code> to help the user easily find the most important commands.</p> <p><code>discover</code> is similar to <code>search</code> but with these differences:</p> <ul> <li><code>discover</code> accepts no parameters (instead of the search value)</li> <li><code>discover</code> yields instances of <code>DiscoveryHit</code> (instead of instances of <code>Hit</code>)</li> </ul> <p>Instances of <code>DiscoveryHit</code> contain information about how the hit should be displayed, an optional help string, and a callback which will be run if the user selects that command.</p>"},{"location":"guide/command_palette/#shutdown-method","title":"shutdown method","text":"<p>The <code>shutdown</code> method is called when the command palette is closed. You can use this as a hook to gracefully close any objects you created in <code>startup</code>.</p>"},{"location":"guide/command_palette/#screen-commands","title":"Screen commands","text":"<p>You can also associate commands with a screen by adding a <code>COMMANDS</code> class var to your Screen class.</p> <p>Commands defined on a screen are only considered when that screen is active. You can use this to implement commands that are specific to a particular screen, that wouldn't be applicable everywhere in the app.</p>"},{"location":"guide/command_palette/#disabling-the-command-palette","title":"Disabling the command palette","text":"<p>The command palette is enabled by default. If you would prefer not to have the command palette, you can set <code>ENABLE_COMMAND_PALETTE = False</code> on your app class.</p> <p>Here's an app class with no command palette:</p> <pre><code>class NoPaletteApp(App):\n    ENABLE_COMMAND_PALETTE = False\n</code></pre>"},{"location":"guide/command_palette/#changing-command-palette-key","title":"Changing command palette key","text":"<p>You can change the key that opens the command palette by setting the class variable <code>COMMAND_PALETTE_BINDING</code> on your app.</p> <p>Prior to version 0.77.0, Textual used the binding <code>ctrl+backslash</code> to launch the command palette. Here's how you would restore the older key binding:</p> <pre><code>class NewPaletteBindingApp(App):\n    COMMAND_PALETTE_BINDING = \"ctrl+backslash\"\n</code></pre>"},{"location":"guide/design/","title":"Design System","text":"<p>Textual's design system consists of a number of predefined colors and guidelines for how to use them in your app.</p> <p>You don't have to follow these guidelines, but if you do, you will be able to mix builtin widgets with third party widgets and your own creations, without worrying about clashing colors.</p> <p>Information</p> <p>Textual's color system is based on Google's Material design system, modified to suit the terminal.</p>"},{"location":"guide/design/#designing-with-colors","title":"Designing with Colors","text":"<p>Textual pre-defines a number of colors as CSS variables. For instance, the CSS variable <code>$primary</code> is set to <code>#004578</code> (the blue used in headers). You can use <code>$primary</code> in place of the color in the background and color rules, or other any other rule that accepts a color.</p> <p>Here's an example of CSS that uses color variables:</p> <pre><code>MyWidget {\n    background: $primary;\n    color: $text;\n}\n</code></pre> <p>Using variables rather than explicit colors allows Textual to apply color themes. Textual supplies a default light and dark theme, but in the future many more themes will be available.</p>"},{"location":"guide/design/#base-colors","title":"Base Colors","text":"<p>There are 12 base colors defined in the color scheme. The following table lists each of the color names (as used in CSS) and a description of where to use them.</p> Color Description <code>$primary</code> The primary color, can be considered the branding color. Typically used for titles, and backgrounds for strong emphasis. <code>$secondary</code> An alternative branding color, used for similar purposes as <code>$primary</code>, where an app needs to differentiate something from the primary color. <code>$primary-background</code> The primary color applied to a background. On light mode this is the same as <code>$primary</code>. In dark mode this is a dimmed version of <code>$primary</code>. <code>$secondary-background</code> The secondary color applied to a background. On light mode this is the same as <code>$secondary</code>. In dark mode this is a dimmed version of <code>$secondary</code>. <code>$background</code> A color used for the background, where there is no content. <code>$surface</code> The color underneath text. <code>$panel</code> A color used to differentiate a part of the UI form the main content. Typically used for dialogs or sidebars. <code>$boost</code> A color with alpha that can be used to create layers on a background. <code>$warning</code> Indicates a warning. Text or background. <code>$error</code> Indicates an error.  Text or background. <code>$success</code> Used to indicate success.  Text or background. <code>$accent</code> Used sparingly to draw attention to a part of the UI (typically borders around focused widgets)."},{"location":"guide/design/#shades","title":"Shades","text":"<p>For every color, Textual generates 3 dark shades and 3 light shades.</p> <ul> <li>Add <code>-lighten-1</code>, <code>-lighten-2</code>, or <code>-lighten-3</code> to the color's variable name to get lighter shades (3 is the lightest).</li> <li>Add <code>-darken-1</code>, <code>-darken-2</code>, and <code>-darken-3</code> to a color to get the darker shades (3 is the darkest).</li> </ul> <p>For example, <code>$secondary-darken-1</code> is a slightly darkened <code>$secondary</code>, and <code>$error-lighten-3</code> is a very light version of the <code>$error</code> color.</p>"},{"location":"guide/design/#dark-mode","title":"Dark mode","text":"<p>There are two color themes in Textual, a light mode and dark mode. You can switch between them by toggling the <code>dark</code> attribute on the App class.</p> <p>In dark mode <code>$background</code> and <code>$surface</code> are off-black. Dark mode also set <code>$primary-background</code> and <code>$secondary-background</code> to dark versions of <code>$primary</code> and <code>$secondary</code>.</p>"},{"location":"guide/design/#text-color","title":"Text color","text":"<p>The design system defines three CSS variables you should use for text color.</p> <ul> <li><code>$text</code> sets the color of text in your app. Most text in your app should have this color.</li> <li><code>$text-muted</code> sets a slightly faded text color. Use this for text which has lower importance. For instance a sub-title or supplementary information.</li> <li><code>$text-disabled</code> sets faded out text which indicates it has been disabled. For instance, menu items which are not applicable and can't be clicked.</li> </ul> <p>You can set these colors via the color property. The design system uses <code>auto</code> colors for text, which means that Textual will pick either white or black (whichever has better contrast).</p> <p>Information</p> <p>These text colors all have some alpha applied, so that even <code>$text</code> isn't pure white or pure black. This is done because blending in a little of the background color produces text that is not so harsh on the eyes.</p>"},{"location":"guide/design/#theming","title":"Theming","text":"<p>In a future version of Textual you will be able to modify theme colors directly, and allow users to configure preferred themes.</p>"},{"location":"guide/design/#color-preview","title":"Color Preview","text":"<p>Run the following from the command line to preview the colors defined in the color system:</p> <pre><code>textual colors\n</code></pre>"},{"location":"guide/design/#theme-reference","title":"Theme Reference","text":"<p>Here's a list of the colors defined in the default light and dark themes.</p> <p>Note</p> <p><code>$boost</code> will look different on different backgrounds because of its alpha channel.</p> <p> Textual\u00a0Theme\u00a0Colors \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Light\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Dark\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0$primary-background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-darken-3\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0$primary-background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-darken-2\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0$primary-background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-darken-1\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$primary-background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-lighten-1\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$primary-background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-lighten-2\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$primary-background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-lighten-3\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$secondary-background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-darken-3\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$secondary-background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-darken-2\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$secondary-background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-darken-1\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0$secondary-background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-lighten-1\u00a0\u00a0\u00a0 \u00a0\u00a0$secondary-background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-lighten-2\u00a0\u00a0\u00a0 \u00a0\u00a0$secondary-background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-lighten-3\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"guide/devtools/","title":"Devtools","text":"<p>Note</p> <p>If you don't have the <code>textual</code> command on your path, you may have forgotten to install the <code>textual-dev</code> package.</p> <p>See getting started for details.</p> <p>Textual comes with a command line application of the same name. The <code>textual</code> command is a super useful tool that will help you to build apps.</p> <p>Take a moment to look through the available subcommands. There will be even more helpful tools here in the future.</p> <pre><code>textual --help\n</code></pre>"},{"location":"guide/devtools/#run","title":"Run","text":"<p>The <code>run</code> sub-command runs Textual apps. If you supply a path to a Python file it will load and run the app.</p> <pre><code>textual run my_app.py\n</code></pre> <p>This is equivalent to running <code>python my_app.py</code> from the command prompt, but will allow you to set various switches which can help you debug, such as <code>--dev</code> which enable the Console.</p> <p>See the <code>run</code> subcommand's help for details:</p> <pre><code>textual run --help\n</code></pre> <p>You can also run Textual apps from a python import. The following command would import <code>music.play</code> and run a Textual app in that module:</p> <pre><code>textual run music.play\n</code></pre> <p>This assumes you have a Textual app instance called <code>app</code> in <code>music.play</code>. If your app has a different name, you can append it after a colon:</p> <pre><code>textual run music.play:MusicPlayerApp\n</code></pre> <p>Note</p> <p>This works for both Textual app instances and classes.</p>"},{"location":"guide/devtools/#running-from-commands","title":"Running from commands","text":"<p>If your app is installed as a command line script, you can use the <code>-c</code> switch to run it. For instance, the following will run the <code>textual colors</code> command:</p> <pre><code>textual run -c textual colors\n</code></pre>"},{"location":"guide/devtools/#live-editing","title":"Live editing","text":"<p>If you combine the <code>run</code> command with the <code>--dev</code> switch your app will run in development mode.</p> <pre><code>textual run --dev my_app.py\n</code></pre> <p>One of the features of dev mode is live editing of CSS files: any changes to your CSS will be reflected in the terminal a few milliseconds later.</p> <p>This is a great feature for iterating on your app's look and feel. Open the CSS in your editor and have your app running in a terminal. Edits to your CSS will appear almost immediately after you save.</p>"},{"location":"guide/devtools/#console","title":"Console","text":"<p>When building a typical terminal application you are generally unable to use <code>print</code> when debugging (or log to the console). This is because anything you write to standard output will overwrite application content. Textual has a solution to this in the form of a debug console which restores <code>print</code> and adds a few additional features to help you debug.</p> <p>To use the console, open up two terminal emulators. Run the following in one of the terminals:</p> <pre><code>textual console\n</code></pre> <p>You should see the Textual devtools welcome message:</p> <p> textual\u00a0console \u258cTextual\u00a0Development\u00a0Console\u00a0v0.78.0 \u258cRun\u00a0a\u00a0Textual\u00a0app\u00a0with\u00a0textual\u00a0run\u00a0--dev\u00a0my_app.py\u00a0to\u00a0connect. \u258cPress\u00a0Ctrl+C\u00a0to\u00a0quit. </p> <p>In the other console, run your application with <code>textual run</code> and the <code>--dev</code> switch:</p> <pre><code>textual run --dev my_app.py\n</code></pre> <p>Anything you <code>print</code> from your application will be displayed in the console window. Textual will also write log messages to this window which may be helpful when debugging your application.</p>"},{"location":"guide/devtools/#increasing-verbosity","title":"Increasing verbosity","text":"<p>Textual writes log messages to inform you about certain events, such as when the user presses a key or clicks on the terminal. To avoid swamping you with too much information, some events are marked as \"verbose\" and will be excluded from the logs. If you want to see these log messages, you can add the <code>-v</code> switch.</p> <pre><code>textual console -v\n</code></pre>"},{"location":"guide/devtools/#decreasing-verbosity","title":"Decreasing verbosity","text":"<p>Log messages are classififed in to groups, and the <code>-x</code> flag can be used to exclude all message from a group. The groups are: <code>EVENT</code>, <code>DEBUG</code>, <code>INFO</code>, <code>WARNING</code>, <code>ERROR</code>, <code>PRINT</code>, <code>SYSTEM</code>, <code>LOGGING</code> and <code>WORKER</code>. The group a message belongs to is printed after its timestamp.</p> <p>Multiple groups may be excluded, for example to exclude everything except warning, errors, and <code>print</code> statements:</p> <pre><code>textual console -x SYSTEM -x EVENT -x DEBUG -x INFO\n</code></pre>"},{"location":"guide/devtools/#custom-port","title":"Custom port","text":"<p>You can use the option <code>--port</code> to specify a custom port to run the console on, which comes in handy if you have other software running on the port that Textual uses by default:</p> <pre><code>textual console --port 7342\n</code></pre> <p>Then, use the command <code>run</code> with the same <code>--port</code> option:</p> <pre><code>textual run --dev --port 7342 my_app.py\n</code></pre>"},{"location":"guide/devtools/#textual-log","title":"Textual log","text":"<p>Use the <code>log</code> function to pretty-print data structures and anything that Rich can display.</p> <p>You can import the log function as follows:</p> <pre><code>from textual import log\n</code></pre> <p>Here's a few examples of writing to the console, with <code>log</code>:</p> <pre><code>def on_mount(self) -&gt; None:\n    log(\"Hello, World\")  # simple string\n    log(locals())  # Log local variables\n    log(children=self.children, pi=3.141592)  # key/values\n    log(self.tree)  # Rich renderables\n</code></pre>"},{"location":"guide/devtools/#log-method","title":"Log method","text":"<p>There's a convenient shortcut to <code>log</code> on the <code>App</code> and <code>Widget</code> objects. This is useful in event handlers. Here's an example:</p> <pre><code>from textual.app import App\n\nclass LogApp(App):\n\n    def on_load(self):\n        self.log(\"In the log handler!\", pi=3.141529)\n\n    def on_mount(self):\n        self.log(self.tree)\n\nif __name__ == \"__main__\":\n    LogApp().run()\n</code></pre>"},{"location":"guide/devtools/#logging-handler","title":"Logging handler","text":"<p>Textual has a logging handler which will write anything logged via the builtin logging library to the devtools. This may be useful if you have a third-party library that uses the logging module, and you want to see those logs with Textual logs.</p> <p>Note</p> <p>The logging library works with strings only, so you won't be able to log Rich renderables such as <code>self.tree</code> with the logging handler.</p> <p>Here's an example of configuring logging to use the <code>TextualHandler</code>.</p> <pre><code>import logging\nfrom textual.app import App\nfrom textual.logging import TextualHandler\n\nlogging.basicConfig(\n    level=\"NOTSET\",\n    handlers=[TextualHandler()],\n)\n\n\nclass LogApp(App):\n    \"\"\"Using logging with Textual.\"\"\"\n\n    def on_mount(self) -&gt; None:\n        logging.debug(\"Logged via TextualHandler\")\n\n\nif __name__ == \"__main__\":\n    LogApp().run()\n</code></pre>"},{"location":"guide/events/","title":"Events and Messages","text":"<p>We've used event handler methods in many of the examples in this guide. This chapter explores events and messages (see below) in more detail.</p>"},{"location":"guide/events/#messages","title":"Messages","text":"<p>Events are a particular kind of message sent by Textual in response to input and other state changes. Events are reserved for use by Textual, but you can also create custom messages for the purpose of coordinating between widgets in your app.</p> <p>More on that later, but for now keep in mind that events are also messages, and anything that is true of messages is true of events.</p>"},{"location":"guide/events/#message-queue","title":"Message Queue","text":"<p>Every App and Widget object contains a message queue. You can think of a message queue as orders at a restaurant. The chef takes an order and makes the dish. Orders that arrive while the chef is cooking are placed in a line. When the chef has finished a dish they pick up the next order in the line.</p> <p>Textual processes messages in the same way. Messages are picked off a queue and processed (cooked) by a handler method. This guarantees messages and events are processed even if your code can not handle them right away.</p> <p>This processing of messages is done within an asyncio Task which is started when you mount the widget. The task monitors a queue for new messages and dispatches them to the appropriate handler when they arrive.</p> <p>Tip</p> <p>The FastAPI docs have an excellent introduction to Python async programming.</p> <p>By way of an example, let's consider what happens if you were to type \"Text\" in to a <code>Input</code> widget. When you hit the T key, Textual creates a key event and sends it to the widget's message queue. Ditto for E, X, and T.</p> <p>The widget's task will pick the first message from the queue (a key event for the T key) and call the <code>on_key</code> method with the event as the first argument. In other words it will call <code>Input.on_key(event)</code>, which updates the display to show the new letter.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9zq+g2C97q4Iyj57XVm3dXG6Eh8NcdTAwMWJCSPbuXHUwMDE2JWzZViw/sGRcZknlv99cdTAwMWVcdTAwMDGWLEu2McaYutdcdFx1MDAxOEujUVvTp/ucnpF+rqyurkV3XHUwMDFkb+2P1TXvtuxcdTAwMDZ+pev2197Z7TdeN/TbLdzF4s9hu9ctxy3rUdRcdP94/77pdlx1MDAxYl7UXHTcsufc+GHPXHLCqFfx20653XzvR14z/Lf9feg2vT877WYl6jrJSda9ilx1MDAxZrW79+fyXHUwMDAyr+m1olx1MDAxMHv/XHUwMDBmfl5d/Vx1MDAxOf9OWVx1MDAxN/gtL25cdTAwMWJvTWzjhGW3XHUwMDFltluxnYxpJYFcbjlo4IdcdTAwMWbxTJFXwb1VtNZL9thNa3ew7a9v1GuNw6P92uXn453d/r5Mzlr1g+Asulx1MDAwYu4vgluu97opm8Ko2254XHUwMDE3fiWqP16z1PbBcVx1MDAxNTeso1x1MDAwMYPd3XavVm95of3udLC13XHLfnRnt1x1MDAxMTLY6rZqcSfJllv8XHUwMDA0TDlcXFFiuFx1MDAxMoNcdTAwMWT2UC7AoZRRZncxo1x1MDAxNM9cdTAwMTi12Vx1MDAwZXBcdTAwMDTQqN9I/EqsunLLjVx1MDAxYZrWqlxm2kRdt1x1MDAxNXbcLo5T0q7/+HVcdTAwMWRJQSpcbmBwREApXHUwMDE4NKl7fq1cdTAwMWVZczRzXHUwMDE4lZRcbs2pXHUwMDAyloxL6MVDXCK0XHUwMDA2LiE51FrQKVVit/gne0HrbrfzcN3WYktT1tuPWymfSlx1MDAwZe51Ku69XHUwMDAzUCk5XHUwMDEzaCmXLLmg6GdcctzZ6lx1MDAwNUGyrV1u5PhMXHUwMDE4ud1ow29V/FYte4jXqlx1MDAxNOxcdNww2mw3m36EZlx1MDAxY7f9VpRtXHUwMDEx9/uh2233655byem5cF/HdpeAyL6Sv1ZcdTAwMTO3iT9cZv7+511u6+Ihta+RwUy6W0m//3r3RDxLkt36iGdcdTAwMDVUXHUwMDEyTVJccibhueyT7cMvnXWz8dm/8b5cdTAwMDU7p+ftT0uPZ0Ul4llcdTAwMWJcIllcdTAwMTbP3MGQxlx0XHUwMDA3/Mf0y8HZOIRxjfiQglBcbjRcdTAwMGbNyjhMMcE5XHUwMDA1wVjyVVx1MDAxZsBMNTWMS6lcdTAwMTKY/1x1MDAxZs6vXGLnwiG1r+xgPlx1MDAxMcxdr1x1MDAxY937clx1MDAwZaKFVEWIplxuXHUwMDA3jFx1MDAwYlx1MDAwNXpqSJ9/b1xis8v5XHUwMDA1bFx1MDAxZVx1MDAxZV1Hd5dHSjZngzTNuuDjcWFcdTAwMWIpylxcMzRwR2mBVCSDaClExognYfg3KEuvKlx1MDAwMHJcdTAwMTKyTK7pXHUwMDAwszpcdTAwMTXFXHUwMDFlUMqBMMFcdTAwMDQkXHUwMDA2z1xypVx1MDAwMyf6mfK0gc9E3m1cdTAwMTJ4Ulx1MDAwM1xcPWq4ncjb0Xe1T0dbknxcdTAwMDH6w19cdTAwMWK0+/Uuv9v7gzfV0Y3r9Xav3fN+dHHEXHUwMDBmw8Nob/gsj+d3LepS/T46+lx1MDAxY0PLWMxcZn3/NFxcaCFcXDDVcmGQ1k6NlvyLufRo0Vx1MDAwNWjR4DxcdTAwMGIv4ymsyEFcZuNZxFx1MDAwMKXKMMlnSGuh/bDotFZtt6Iz/0csiMjQ1m236Vx1MDAwNzGvXHUwMDE4bI6d0mrBXHUwMDFia5Oz59393vDu/vx77fPfa/9KX9rQi1x0XHUwMDFj2meGXHUwMDBl/lx1MDAxMPi1Vky9sFx1MDAwM6875OCRj9pv0KDpVyrphFFGi1xc7LNbmibOt7t+zW+5weexXHUwMDA2z560kPNcdTAwMTYmLcGUXCKYJNnUMCTVjdb2xkWTXHUwMDFk7PbPvm9dnVx1MDAxZJWbfPlhSFx1MDAxZKo5Q6bJjaaSXHUwMDBmYVFcYuEg61dcdTAwMDb5qFx1MDAwNinUc3A5hzymKCVcblxy0U+H5Wx57H5kw89cdTAwMDcnXHUwMDFmLjpy0z24U7J1XHUwMDFhfe3fVvNcdTAwMTNOjK2JeWxSesw/4fKlMfSeQlx1MDAwMCHTXHUwMDA0LZWeXsiNv8xLXHUwMDBiIDlcdTAwMGVAmMzMvFx1MDAwMDSPxEa1llx1MDAwNNW+nIFcbr7hzOYtOrNNSFx1MDAwNlx1MDAxMzObNzGz3VPbXHUwMDFjUFwiqSpcdTAwMDIlXHUwMDAwXHUwMDAzxSVMXHLJ8VR7SSEpNHU4IZwrKrVG2TNcdTAwMDRJhTnN4GZNWTHNxGtULavx6azqoqRiUo5iXHUwMDExUypcdTAwMDDmKq2I1Pa/XHUwMDE4hSaAY00kWnMlXHUwMDA1g5HSikBcdTAwMWLwXHUwMDFi0DdaWUny3WPdf1x1MDAxYcpcdTAwMTdDu9yzVq5cdTAwMTNcdTAwMDdcdTAwMDNcdTAwMTWOlK3uXHUwMDBiW1xiXHUwMDAzwVPtam4njmeDwXzYNci5w/WcXCJ7dvrkR61xcvDtU/PM6NBcdTAwMWNdnlx1MDAxZbM8e9BcdTAwMWPCLP1AUqRMbFx1MDAxNchcdTAwMTF7XHUwMDE4sVU9Jlx1MDAwNGZcdTAwMDKQXHUwMDFj4/6IWXMuJmVcdTAwMDPBXFzrScWebF8jPpx0t5J+n4mcayOzW1x1MDAxM26BmVRSdIqpXHUwMDAz2aHZuNBcdTAwMDY2TrpcdTAwMDem8uV6//r6Q+922Vx1MDAwM1x1MDAxOVx1MDAwMHFQgiB70KhGbVx1MDAxMW0okiFcdTAwMWVcdTAwMWNFiFx1MDAxMdxcdTAwMDBcdTAwMGVcdTAwMDFJz7W8XHUwMDBlPVx1MDAxN1x1MDAxOHpcdTAwMTFcdTAwMWJcdTAwMGIrM92Prdzp175931xc3708//bps/6q6mqDPYeev1C3k1h//lx0p7T2W2f/ekdvVIOvXHUwMDE3f7ntvV23tHnWfltFMVxyxTVkQe0sr2HTU5fxw7e0iFx1MDAxN2NcdTAwMTGvucPmhvh56Fx0rVx1MDAwNDpH+ov9L8iJ20XLiVx06WuinLidKCdcbivVKchlQGlcYqXUwPRcdTAwMDJfbrPaycc72DpcdTAwMTW9nql978nLzt2yQ1JcdTAwMTnioGRcdTAwMWWpU1x1MDAwYtxupFYvNbeD3DdcdTAwMDeAXCJcdTAwMGJANEzb4MhcdTAwMTZcXFx1MDAxM1uufPNcdTAwMTR80yGIWlx1MDAwM1x1MDAwZvB6uDVv9brn9bx8XFzroYNcdTAwMDawXHK8ajRcdTAwMDbVUbtTXHUwMDA06aEvk8XvsEFjcVtYXHUwMDA2oHRMOqXcIJtcdTAwMTdPwO748V5S7GqgXHUwMDBlXHUwMDAwXHUwMDE4SbmmXFyZXGaCNThcZlx1MDAxOH1BXGZT7lCFSoZcYsZcdTAwMDQjyYBcZlx1MDAxMG2UwzhcdTAwMDGJTYhSSo+sl1x1MDAwMkzzgmj2XHUwMDAypPo161x1MDAwMONzwWq2XHUwMDBlgNFXgWGUaaF5stZg9VF3S0ehKJSzVlx1MDAwMcbn12FrcDhccjNKcCEwL+SWXHUwMDAwXGJcdTAwMDAj2MagXHUwMDFlXHUwMDAypkdsekslgPVCJ473jvhv0t9K+r0oflV8t9lOe2lqdkFcdTAwMTSuXHUwMDEyY4Rb5snp9Ms+x1x1MDAxN3qWNIBh8HK0XHUwMDE0dnEnXHUwMDE1SpiMXHUwMDFlwKjgMGUwglx1MDAwMTJcdTAwMTHgJmPY0+LYfUEzt1x1MDAwMKByuFxiZcaRoCG9IPUhZiFOXHUwMDE5oF2zyILnkJJnrFxmeZff7yTNLi5PXCLYgNOrvd3u7dFx+aJeOjmeVrP/pc7Pt672zlx1MDAwZvC6d3+cd8PN2+rB/DiUVjzh7i+k2XnxQlx1MDAxNiaBaOtPU0M0/2IuPUTNWIgqjvKBXHUwMDAzkZZoPFx1MDAxN6LjanR5cmF0/lx1MDAwZrRWXHUwMDEyg/lbWX89k2Bvty5R9/5cdTAwMWXL4MVcbvVcdFkmS/SHXHKdXHSBjFx1MDAxNM/BI/9QWpjpk+TJlemTm6PNXHUwMDEyLdPti7vatquDcNlcdTAwMTGokIMgK2RcXFKquExcdTAwMTWm4/k+TVx1MDAxZGOsXG5cdTAwMDDQ3OiXypGU58zyjep1ZVxiVUy/XHUwMDAw/F4x0yxUrW9ZsKzW3Vx1MDAxNuKwm1x1MDAwZu7FqvVhg8aCuFCtKz6O6zKM2IRNL9bHXHUwMDBm97LCWHNcdTAwMDcpP1hcdTAwMWOPwlhcdTAwMTPqXGKhha1+XHUwMDEzolPMZr4wNlxmo1x1MDAwNWpNlN2a4agksXNcdTAwMDBqQVx1MDAxZFwiXHUwMDA0xWCj8Vx1MDAwN1LceLDIRtgpU/1cdTAwMDIludeU7OOTw2p6qlxcoTI2wOyEoFxyeCzV6GHeXHUwMDFlXHUwMDFjylx1MDAxNzNtz/GyKM5cdGpx1KlKiFFjhMM1XHUwMDAwupZUWinJzYhRb0qxXHUwMDE3+rB9jXhv0t1K+n2mSXtKivVcdTAwMDBcdTAwMDVcdTAwMTTtXHUwMDA0zZk+jqldz5elXm1cdTAwMDM2LkNZ+Ytz9/Ro2eNcdTAwMThyfMdII6XAK0+0XHUwMDFjjmNcXChcdTAwMDe4jitIhEry2ktqhTBcdTAwMDQlXHUwMDAxWfD0Qalx2bioXHUwMDA2/CvtnqhcdTAwMGa3lZ0621x1MDAwZZ4/Z/9Wup1UVsg/4YuSsrGgL1x1MDAxMlx1MDAxZkZcdTAwMTXSXHUwMDE2VJqc2rtKp7+RZfxlXla4XHUwMDAzjIO7lo6ZXHUwMDE33OcxYc+IXHUwMDE0KJhmwftcdTAwMWKesI9cdTAwMTY9YT8hc02csI+ed2eLLr6zhVx1MDAxOUzDVlx1MDAwZk9ccstcdTAwMDNSql5cdTAwMWNdRKWQ7ZQvvG+eOP9SKoBludtcdTAwMGXD9bpcdTAwMWKV669cdTAwMGZNpHNcdTAwMGUyPs24Xb+YWmJcdTAwMWJ7XHJoh1x1MDAxMW0pIVx1MDAxNUSl65TzhqZQXGbZruFcdTAwMDaZJSbr1PrsoVx1MDAxYq1cdMdcdTAwMTbI2URcXLdcdTAwMTlcdTAwMDUuoFx1MDAwZeTmXHUwMDE1bkmjT1x1MDAwMO7sPitk4UM+7O3wXHUwMDFhuez0qaTSb7tl3W5tXHUwMDA3VyGr1Fp998dOUSrJ+N2Uj1x1MDAwNHhcdTAwMTFvxcG3t0pcdTAwMWJOhcy6q33+XHUwMDA3XHUwMDExhkrQRKpcdTAwMTdcXPolXHUwMDE0cVx1MDAwMKhRQJhGRZ6TVzhx7FJoSbhBXHUwMDExh/pqhFcqXHUwMDAzXHUwMDAyMM+8wsKwubmrXHUwMDE3XHUwMDA0fifMd1ZerHNcYlx1MDAxN1ZdmelXJ1+VTndcci25n8pcdTAwMDErl1x1MDAwM6M/qkZvXHUwMDE2b11gbMWAhY5cbkQwpDU8VVa9VzlcdTAwMWElNXqytM8jXHUwMDAwMY9qTd5cdTAwMTIphyiD0TteXHUwMDFmQSCnVkPtgklbXHUwMDE2tus8XHUwMDE4KtBRXHUwMDA1JCVSXCLD2VxmJdk34ammcH5AKo5xRD1hXHUwMDEyvXlrbrauv3/8us+jq1x1MDAxYrfqXHUwMDFk7+1cdTAwMTXd47okjootlIP5X2AsI4qAyD5uRWEoI1xc2ck5JVKqeTZPvVwiRLyQp1x1MDAwMrpcdTAwMGXG2te4dW9cdTAwMTGOKkFcdTAwMTQ5KqPx04fQW6f21HOXlEo/tpplJk5O9XW9XFzz5e6yeyrHXHUwMDFjT1x1MDAxOUFMYlx1MDAwZeFcIsNcdTAwMDCEdOzDkYjUklx1MDAxMmDPm8ii7ErrvHvX5lx1MDAxMlNcdTAwMDHiqDpLXHUwMDA1fGlcXHX8o1x1MDAwM3Rx4UNrJGmM8enDqiq3dvfDm1x1MDAxZF1vymr3MvhQqvpmtsLH4vgqRUnlUKGZNMo+XHUwMDA3avg2S8GIozVFSYNcdTAwMTRcdTAwMDFkXHUwMDE2RfNjq9xcdTAwMTBHWSdcdTAwMTSA0VvTvFx0XHUwMDFi7iBcdTAwMTNcdTAwMDVqn+oh7TrQrL9yaiTmhtd43Fx1MDAwN1+Iu45Zxc9cdTAwMDE4t3Cd2lt31zuNnb1bV1x1MDAxZl/pfr9zXHUwMDFjnFx1MDAxZpr9ZVx1MDAwZq2KO0rZKVx1MDAxMeuvOlWHi52VY9RcdTAwMDP0JFx1MDAwZZpcdTAwMTIqnuWtXHUwMDBmRfmc0KpcdTAwMWNcdTAwMTR3qGONQHVl1ySPuirTjp2HQkuJoExcdTAwMTgyqqwk2FuDXHUwMDA0vEJsfbqzrjxcdTAwMTSp19xO5yzCLtdcdTAwMWXn9NBqv/JQ2Uu6Wbvxvf5GXHUwMDFls4pftiRcdTAwMTZcdTAwMDPAeplnbf75a+XXf1x1MDAwMfpa2G0ifQ== events.Key(key=\"T\")events.Key(key=\"e\")events.Key(key=\"x\")Message queueon_key(event)Event handlerevents.Key(key=\"t\") <p>When the <code>on_key</code> method returns, Textual will get the next event from the queue and repeat the process for the remaining keys. At some point the queue will be empty and the widget is said to be in an idle state.</p> <p>Note</p> <p>This example illustrates a point, but a typical app will be fast enough to have processed a key before the next event arrives. So it is unlikely you will have so many key events in the message queue.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPbOLb93r9cIpX+8l5Vi1xy3Fx1MDAwYlxcXHUwMDAwUzX1yrvlxI5cdTAwMTfF25splyxRiy1LskSvXf3f50JxLGohJVlL5ExUldgmaVx1MDAxMCbP3Vx1MDAwZi7++u3Dh4/RUzP8+I9cdTAwMGZcdTAwMWbDx0K+Vi228lx1MDAwZlx1MDAxZv/wx+/DVrvaqPMp6Pzcbty1XG6dKytR1Gz/488/b/Kt6zBq1vKFMLivtu/ytXZ0V6w2gkLj5s9qXHUwMDE03rT/z/+/l79cdP/ZbNxcdTAwMTSjVtC9SSYsVqNG69u9wlp4XHUwMDEz1qM2j/7//POHXHUwMDBmf3X+j82uVq2HnWs7R7tzU6D7j+416p15XCKR4tOye0G1vc53isJcIp8t8WzD7lx1MDAxOX/oY+FY1pu721x1MDAwN42709rGTqV1+bTXyHTvWqrWakfRU+3bQ8hcdTAwMTcqd63YnNpRq3FcdTAwMWSeVItR5fszi1x1MDAxZH/9vWK+XeFcdLyebjXuypV62PZ/u3w92mjmXHUwMDBi1ejJXHUwMDFmXHUwMDEz4vVovl7uXGbSPfLIP2VcdTAwMDBFYFx1MDAxZFx1MDAxOaW1QjSWXk/7XHUwMDAxMnxSKyc0WWONUYawb25rjVx1MDAxYb9cYp7b76Lz6U7uMl+4LvNcZuvF12uiVr7ebuZb/Lq61z18/6tcdTAwMDOSioxUyqFcdTAwMDDFd3u9pFx1MDAxMlbLlci/XHUwMDE2XHUwMDBiXHUwMDAxSJJSW5RGQXe27bDzZow2xlxup8zrXHQ/hWa22IHHv/tcdTAwMWZsJd9qvjy/j52pxqbvf9yIYav7y3fNYv5cdTAwMWJcdTAwMTAkXHUwMDExgjZcdTAwMWFcdTAwMTGlfT3PeLvmk/W7Wq17rFG4XHUwMDFlgp12lG9Fq9V6sVov9/9KWC8mnKnl29Fa4+amXHUwMDFh8TT2XHUwMDFi1XrUf0Vn3JVWq/FQXHTzxSEjJ55r+uG6wuQ/3e8+dOHT+eH1+3//MfTq5HfqP1x1MDAwM2+zO9xv8a9//zGZXFzHxbZPrqU1XHUwMDEy/VvrXHUwMDAyZJRgXHUwMDE3XHUwMDFmt+uHNbm/cqLXilLKp1P8urX0gk1cdTAwMTiAQaeVllx1MDAwNqxm+e5cdTAwMTVsXHUwMDE5KFx1MDAwM1JoaYGUk6J/arOTa1xmLFx0x4IpXHUwMDE0KiMsdoW2K9fGXHUwMDA1pNFJLdFcYsDYbL7LtZaSQHfVzy+5/oFynfxOO2f73+aEct1cblx1MDAwYtE3VFx1MDAwZlx1MDAxMW5cdTAwMGKq/+h34TYgyFkruiBcdTAwMTkl23pcdTAwMTez6vhuf0tcdTAwMWWXXHUwMDBln45WN6urXHUwMDBme2+TbdmPwe+/126w0zJbmy1VQGCsklpb/qe74uJHXHUwMDAwZ1x1MDAwMudcdTAwMDRcdTAwMTFYh85p0zeziUT7d1WgsKSVXHUwMDFhYrCpK1x1MDAxYa+SbFx1MDAwN0TXXHUwMDE5XCJWMNrNXnRfcfVXXGZ9L6/2+jS7cnZcdTAwMWGFZ1x1MDAwZW9Xwp2zbPSw1vxcdTAwMTiH6SveovAx+vh64u8/foZhe67+Y9xcdTAwMWJ2h/0uqDNUjqky3zPPmLhcdTAwMWIjksRdXHUwMDFhUsiuKcmx5T39MS+tvFx1MDAwYpcm71xiJlCzkvd0XHUwMDE3XVx1MDAwZpF4wH6JZ/3EXHUwMDEzVSrmc4wt8m3/w6KtdalRj46qz/7Rg+g5upm/qdY6XHUwMDBm+fVwXHUwMDA3qT7mvfdzXG4+hU//c1x1MDAxZD79819cdTAwMWbDf3383/izbYdcdTAwMWRcdTAwMDeV5+d6fnmlVi3XOyEjXHUwMDBmXHUwMDEwtnpQXHUwMDFmVTnGfb3gplosxq1ggWeU5zFb2XGsV6NVLVfr+VoudcJvt8RSOpckmyDY9+T34cZcdTAwMGagm0BQyX6y95VTKp5+NjuGtnaWXzalXHUwMDBljJLkUKFjV1x1MDAwN/pssVCBs8ZZJVxmsG+ippHN6W0xsVtG1mo5uWBOY4tLXHUwMDE2Tyh7sEVCXHUwMDFlZTZcdTAwMGLbUT17tT290fwvXHUwMDFmdpSJXHUwMDFmfsPlM/FSxtI1/TZeXHUwMDE44jBC4vg+ffpzXl49XCJS9VxiqkDNSo/MxMZrhWTi7+W/wcQ/LtrEjzCKI03845QmXHUwMDFlY2++XzSVcFx1MDAxY+lrM777fWLv7k5LVXyqf3Lbd+XqMUVN/Vx1MDAwZURTXHUwMDA11pJBpYXSZGLa6ttcYi4wXHUwMDE2vOdttXFcdTAwMTLtNLI5vY2X6KQlqWBcdTAwMGU58DT7tpYt3lZutrPQus3kSoXyVrNcdTAwMDJcdTAwMGbTm81fw85j2FG+w/BcdTAwMWIuoe9cdTAwMDAmMVx1MDAxZFxiXHUwMDAyyLDcqq5uXHUwMDFlpaDSn/PSKijWQGlcblxuXVx1MDAwMDNTULNwXHUwMDFlkDg45Hm8ISX4jp2HaNHOw1xiczvSeYimdFx1MDAxZYSEJNmUvqpsSajx81x1MDAwM6JcXCg+fd543nzOrZ6a1np0YrYuXHUwMDEzZLPQarTbmUo+KlQmrsXNXFw+Ob5cdKRcdTAwMDGSTrGEOid7xVNcdTAwMDdWXHUwMDBiw+60clx1MDAwNlx1MDAwNcr5pe/Yq1xiWFx1MDAxMtBnTaWMXHUwMDE1Sbt1OFx1MDAxMoFlh0YpQuzUXHUwMDA2+0WXWMU4K/Fcclx1MDAxOYRpRJescjSB6L5cdTAwMWS1XHUwMDA2XHUwMDEyXHUwMDEzzmA58lwimKB2/PDl7Ph+t+lobbN+vXffzl2VaDdcdTAwMDGzfbj7cWjFwFxuzViUgpW0xD6wXHUwMDAyaTYhPi5nXHUwMDE42XmCXHUwMDE1XHUwMDAzIUn74rU0zlxmMyw2IFx1MDAxMqhYj1x1MDAwMCFcdTAwMDNlXHUwMDAwrdJcIlnygcpyW5pUuIa1WrXZXHUwMDFlXG5W0olMXHUwMDA3p4W39+P7Puu3bq0sXHUwMDFh1fUoV6GV+pdqWTxfvVx1MDAwNauL83wk6MBcYumENlx1MDAwNlx1MDAxND952Vx1MDAwM1apXHUwMDAzjUaQY8xqXHUwMDA2K01Fcvi9lNegYVx1MDAxMKksMEpcdTAwMDBoR+xxgoonZ16hKiHQRMqxUlx1MDAxNYBcYjFcdTAwMTftO1RcdTAwMWRJY1x1MDAxNDtoPydUjUgsXHUwMDE2+EJcdTAwMDJpJeT4Sb6TxtZOY2vvYHf/5jh7lFx1MDAxN7lneX605GDV4K1vJzRX6ND2eekqQKk1Y4RcdTAwMDVcdTAwMTdcZsXM3dvAeimEnlx1MDAxYljRSkOCZe8nXHUwMDA1KyWnvdjYgEOYgGWSoULrRu+F1fPTs8v80VWrjodPS1x1MDAwZVYrXHUwMDAy0pbh4Yz3XHUwMDA2bS9WkVxyL1tV7SyHcYyT6VJeXHUwMDEyLtmvmlx1MDAxN1ZZliSHxPie9Wqqx0o6UbNqUFx1MDAxMlmnjFx1MDAxZmWd5MzVYSV/U9k938k837ab1y6iXHUwMDA0rL6V7ThztIKgXHUwMDAwpFJAXHUwMDA2vVbqJTFLclx1MDAwMTgvs6y1PMV5jlxcRyNcdTAwMDPHYZZX4GRUTD2+XHUwMDAyVstcdTAwMDDNNzWPXG6MjnHQvytX45xcdTAwMDWcS23l5cTQJOP9cVbVVm+fNr82M/fb59tfT7ZKZ/NMMlx1MDAwZb9hd9iX7354klx1MDAxMZO9bClYN1x1MDAxMlx1MDAxODF+TJj+mJc0x1xiUqZJmKFAWWG0L1xisveC81x1MDAwYlx1MDAwYpFGSlx1MDAxOFx1MDAwZZhcdTAwMDBcdTAwMDaLs07rd8hH8sszXHUwMDE4Y2jIXHUwMDAya1x1MDAwYqN7LkpJP+aGplx1MDAxYVH0XFz4mkmshaVe6E+WaEw3XHUwMDFh/YnG3Fx1MDAxNElFJWWSLJJcdTAwMDEhrFx1MDAxNuOHvMeZ6PK2urlXOz0pn12VVk4zN/nscjtmLFuBJasth6LaOWN7ef3SYoDs7CiUgFx1MDAxY/xOtVxc56VcdTAwMTY5xDEzgWGnT7BMKVx1MDAxZrfi8OSMXHUwMDEywnFIKzTH6U5cZjpmyidtOEpZbqlMxWryXHUwMDEylORo11x1MDAxYZRKqFx0XHUwMDAyiIddsV68P195PG89Xrebh1FUeWjN2Cmby9oy1tVWO4UgjZZcdTAwMWPi92BVkVx1MDAwZZBDXGb5Ld6FfiFasqVlUmhfTsS3xLy/1qB0zv1cdTAwMDRryyhZsI2w1lx1MDAxOFx1MDAwYuPzYS42L53UT7BfrFx1MDAxZcv1c7neLlx1MDAxZp4svVxcXHUwMDEz+Fx1MDAxNaPgWIU5xyFMb9LVSzU/dDZR5Dx+xfyoalx1MDAxOEjl2CfloE5rXHUwMDAwXHUwMDE4YoX8UiQgskpY9lx1MDAxNy1cckg1O1fOL2Waw+qUX0LtP5MuLEt4pZ2T/S9zQplcdTAwMWVBdVOJnqVcdTAwMTRoXHUwMDA1mHh9YZRor+7fXVx1MDAxY8r26flDTWy3rlx1MDAwZlx0sVx1MDAwMctcdTAwMWXlZVhjXHUwMDA2noPKVpmkYC+lN84z2lx1MDAwNb6K7UChXHUwMDE22s3Cu5yG6SZYs/ty5IKZboXWYeZi5XRtu1x1MDAwNNW7jWN+zc/H+9OTvH5ccjuPYUcloYbfsDvsd82yqIhcIpnpZm3/4S6bXHUwMDA2lNPG2lx02lWkPufl1U8yVT9ZXHUwMDFi0Kz00yyIbpI9VH415i39KH505uk90eRHWNu50+S1SF7B4pRcdTAwMTakXHUwMDEwx09LRe58y17WWpXN58+5q0+5i82tKImJsUyyyY4/kSSQVkiUvYkpPlx1MDAxMXSWt4DlmExN10dmetfBXGKNPnhcXLDnXHUwMDEwfn740l5dfb4o7aysRcdcdTAwMWKHub3bcHqj+WvYdzTsKIdk+Fxyl9AhUTpR6ZGViJMszE9/ysur8kSaynNcInCzUnkz8Ua01Vx1MDAwNMLJJc+4z9hcdTAwMWJZOO9+hP2eO+9cdTAwMWUokXfv0Fx1MDAxOHJajC+ZT1dP5d3jXG6gK2Tz+0dcctkw2fz7oN3rXHUwMDAwkP1cdTAwMDF2v1x1MDAxZItnf57SYEBWKOUkkmDJmF+eUmtcdTAwMTlcYoNgXHUwMDEwWVx1MDAxM0DM6YhcdTAwMTHvNV9iXHUwMDFjkTZcdTAwMWPokVx1MDAxOFJ+UKCs027BoYRcdTAwMDGn1Fx1MDAwNML7dty6WGewfthKUlx1MDAxYeI07pFd29a/NL9cdTAwMWWph3ZOZa5lTX6+XFy/uFh25r3HXHUwMDAwaWLAcrTvpO1cdTAwMDMsXHUwMDA0YKywXGZcdTAwMDGNen7VMq1cXKDQovJcdTAwMGLGKL6ONF7cdc5cdTAwMDFbXHUwMDEyy3hGUv1oRY7OeziSXHUwMDBiwapcdTAwMDJQM1slkkJcdTAwMGa1NpFcdTAwMWVcboJDPclcbmV8XHL7aaWZrZePi5vnj7uVtdrGp690t+QsXHUwMDA0NjGBdVx1MDAxNlx1MDAwMY10IJXp5TIri1x1MDAwMVx1MDAwZqJQa4NcdTAwMWNo4bRcXOZE4r0mzzpSgr84I4d0XHUwMDE2lFx1MDAxMFx1MDAxOKklq1/tXHUwMDFjuXjrk1dcdTAwMWFcdTAwMDKAdKhcdTAwMTesV1x1MDAxN4VVh8mpXHRcdTAwMTZRYmtcdTAwMDPjpybOro4q2Vx1MDAxM1co1Vx1MDAwYitcdTAwMDeZ3U27+1x1MDAxNZeed69cdTAwMDKPUCNAsONDivqwKlx1MDAwM9ZyymotSKrp8lx1MDAxMims+1x1MDAxOSCVpc5cdTAwMTH/XHUwMDE1uGD/fWFQdYlcdTAwMTU4VEJIXHUwMDAxMD7N8su5OVxcKa1cdTAwMWPU90pfi632Sq7cLN4tOVItXHUwMDA0WmhALaxfx1xyXHUwMDAzQFx1MDAwNb8kz1x1MDAxYlxcS1O2Yk4j3c9cdTAwMDCqRiqrLL2BKrM0QFx1MDAxZOGrJrZcdTAwMWSQmpBgolx1MDAxOOvgYCVcdTAwMTNlbr/uPt6b/U+nlXpNbL+xXHLpXCJJ9zbo8Pek0X49f1/HXCJCXHUwMDFikFGsblx1MDAxOcxg5Pz8VTRcdTAwMTSwl+GZhOBLwkNcdTAwMDCrPVx1MDAxMY1naDtsIVx1MDAxMFx1MDAwM/6qNJZxTKRcdTAwMTbMub+9P6jIkthcdTAwMTD7N7vV0+yXyu7Jp+5b6sHjJEnLmVx1MDAwZjsqaTn8ht1hX75cdTAwMWIlvHNPWpJJ5mVcdTAwMDJcdTAwMTkt0NnxbUz6Y17SrCWbj1S5VTogXCIgwYrMoJnjYlx1MDAxOVx1MDAxYSm38VYlL4LK8bFmV1xyXHUwMDE3767Hqkhv5PLLQFx1MDAxYcdxXHUwMDExsNUkNp+q56o0Mn9cdTAwMTh/zHNm84+wRlx1MDAwM2z+cIpcXKWRid1cdTAwMTaMXHUwMDA1/uBcdTAwMDTiWL86XHUwMDE3XHUwMDBlz8zuZeuomTvcKOWz0cZyu3ygfdHU8lx1MDAxN5IgXHUwMDA0qD5Z9JlcdTAwMThAJdnP8vHJVFx1MDAxZV9cbptcdTAwMWZcYtHPQrGDXHUwMDE505DxfI/hXHUwMDBiNMuqRf5ucNFcdTAwMWFcYt/01yyc6eCthptALlOhmsjmd4lcdTAwMGLAQLKDXHUwMDAziGp8mJrjzY2mOP1aKT2stHdcdTAwMTGuXHUwMDFmSup+6Vm/nZ1iiP/zvTbQ8S/0dlx1MDAwNnHCXHUwMDA1gFKC8ett3Vx1MDAxYzeUmFxym99cdTAwMGbgJP5cIv4uXHUwMDA38fdcdTAwMDex+V1ipYyjXG5jhJ2gJ8Xh5Vx1MDAxNT5cItjbp88n7UyYscfl+vrSyzVh4Fh/WVx1MDAwZehZtEH0eoNeqn3mRYBcdTAwMDZcdTAwMTNfXHUwMDA3O3suv7K+14+z7Fx1MDAxNzlcdTAwMTVPxCWS+c1ghVtpYJy8qS/FL6nunJsxnT/prXbOXHUwMDBlvM9cdMU6vVxmTsmdvKTfzcw5sFx1MDAxM3ScuXiWpcszudW42C192s/WcpWd99G7Vvt9kzjqY1x1MDAwZlxydN/CbemMX4PnwDdQ0qzyZuBhTkHLXHUwMDAz4djnXHUwMDA1WjAtb1/kLteal+p0o3L7eFx1MDAxODZcdTAwMGJPutTtstxcdTAwMDO5SbIwv4b9NeyoxNnwXHUwMDFidof9rlx1MDAwN2dofFJValwi209TYubMt4OUksZffJD+lJdWl7IvlKZLwVx1MDAxN8VnpUtnwvdcdTAwMTNcdTAwMWOzcyxml7xLV/fFv0++31xi12BcdTAwMDF8v+RilFG+i9dcdTAwMDR+XHUwMDBlbd5dXHUwMDE3zvbWqfglX4n29s/3dlx1MDAxM1uWLlx1MDAxN99cdTAwMGZE4FxmXGKjhe9MKmNdsTqRjPeE/Fx1MDAxZbdW+35mMD82rla+RYe0VnC8KmxM+mJ0P1xiXHUwMDFjz5M0XHREgYP1KIlcbv062Fx1MDAwNYuu8f06ZmVL0iuoyV3LJOtQ313WjV9B3dws2Mdy9sneX8rdtdXSefnpxC053Vx1MDAwZnyvZd+e1oKxMr4v6je8YmB8/zZcdTAwMGXBnW9cZjlHvFJcdTAwMDDI01CgXHUwMDFjuWHL6MFcdTAwMDZcdTAwMTZcdTAwMDU4w+FcdTAwMWNcdTAwMDdxclx1MDAxMK+ao1xiJFx0i6amWICZ4TWNmpKywMuT01x1MDAxY6hcdJrsrWx9Pmt8LbSL5nzncdvIjcuzXFz0XHUwMDE2tC6Qm4K+0Vwi61dcdTAwMDPot1x1MDAxMOjrXsp/f1x1MDAwMM5cbuf33o5b/1k32mV/XHUwMDA2pee/alx1MDAxYq9cdTAwMDHGqSmkpG88pFl76njm/rUntFwiYlxys3By6qKgSoksKraBrN7dXHUwMDA0u9qf4Vnt071dWa3uX1x1MDAxZdRcdTAwMWWbd4XjZpKnvixI1a7TXHUwMDE23PBLVtag6stoXHUwMDAyXHUwMDA2orPNXHUwMDE2P1x0RtN0O/KltdmdXHUwMDAxVFx02Vwiszgtmke1IKhKkbJTu2CsXHUwMDAyXHUwMDFim/FcdTAwMGJra7dnj2H2aKNw0FxcvTtcbqN2e+UmKVx1MDAwMb8sYLXsK7K2s8Yho9U521x1MDAwN1ZcYpRU7Eii9WCdikSV2md3XHUwMDA2YDVglVx1MDAxNvGC/ftcdTAwMDNrusuarFn5PVx1MDAwMitcdTAwMWRN41x1MDAwN1rR7v6FuSiXTu7yrvX5oZy5XFw3XHUwMDA3S0/665CHtGVb70j5/d178CqFsYHjqMY3aFx1MDAxMHK69oMjSH8qkMR4XHUwMDA08MyJYYtUtPRcdTAwMGK8wCm/XHUwMDE3sVSDi1RYu0jPXHUwMDFmgDm0hn45MTTJuHef39v7slx1MDAwZke3mYeHwu1D+2v1tjF97vK9XGY7KiU6/IbdYV++XHUwMDFipVx1MDAxM3BWOiFxa3KV2JBcdTAwMDVcdTAwMTjbXHUwMDFjSdP4XHUwMDBiK9Kf8pKmREHadG1gtd9Lxlx1MDAwN4ZcdTAwMWHQzrNcdTAwMTVcdTAwMWONVFx1MDAwN8O4hFx1MDAxY15r86adXHUwMDEyp7NYXHUwMDE4S5a/uS+wY1fW51x1MDAwZXhAXHUwMDE3V7UjuYSPXHUwMDBiJFx1MDAxM46wcoNkwsdp2IRp7F70q7xgXHUwMDAyPkflrPJ8eYqVK5cp5FpHn3dL9XJ5ud1JXHUwMDA2XHUwMDAzXHUwMDA3N563Yp3xLYJVv0D6XHUwMDEyhjWecKuJY/qp/MlcdTAwMTRCIYuWIa2VUsbK2HL0eEZJd1x1MDAxYTmBYdUh41x1MDAxYkl9zyhJQyB/SOwzs/XOibyj5Iy95qjUM9HHhmmzoj+3r0ru6GrroJJTh3hw/by29LSjXGaA8cuZlFx1MDAxM35xiO03XHUwMDFk6L03v+LL75dn58c7mlx0mZA63YTe5EdOyzqahPtcdTAwMWGbx0/NOvoxXFxCflx1MDAxZonuIN/MeUU3vlRHVysnbnPzZrN+9OX86Gz1dOP8aHXppdrIQHg2l187KGz/JvZcdTAwMWShdlxuXHRcdTAwMWRcdTAwMTA//DluxFwi/G5cdTAwMTVcdTAwMWOFalwi8LtFqGE2XGI5WGXH1SpU7Fx1MDAxYmhcdTAwMWOQa09qd7pni/Nfgv1cdTAwMDNcdTAwMDU7k/Ja/WfghU4o2iPK7GmbLfL9/Fx1MDAxMo2x5Xun0ag8rjdk5n5/7aZyer5xXHUwMDFh3W++jzK7XHRYvK1Fllx1MDAwZYfxXHUwMDFkKF9k3O/J6Jv+k1x1MDAxMobN99xk3PcpXHUwMDAxLYxfy2ZcdTAwMDTqYYxhwsDybKzwsZ52XHUwMDAzIaBf1sUgolx1MDAwNW9cdTAwMGVmJbpJXCLAt6PWqcSQXGL4Vfq93cavsl9X7E21JU736qtHxbtnVXu8v3xTgn2xcFx1MDAwNe3/Ut3pKY5cdTAwMDMmSTFcXK3SSrJTXHUwMDAwen6kLU9cdTAwMGLhgFx1MDAwNpTPXHUwMDEzW6GG0EJ8W1x1MDAxZOFcdTAwMTkqwneCwngg8lx1MDAxYVx1MDAxNfl9j1x1MDAwNIpcdTAwMDWnLCa1SKmATeus41x1MDAxMuvsfomCJ++MX1x1MDAwZrpoP118udtsVWBlz62V98rm4K603Fx1MDAwMTzrhYBcdTAwMTHg9SqrWCn7o1wi0lx1MDAwMVjR2fC4t0nYjNvqsL8qXHUwMDFjKE/NxyHrXHUwMDAxfTXIoNDaoensXHQ2WFxyQmfYu47npX4qoDqdXFxcdTAwMGLyPVx1MDAxNk18O4GRXHUwMDFkoGzt881u5ejE1Y+b+TD6VMmJJc808fNcdTAwMGV8Po3YzKPyPn0/Ulx1MDAxNYdcdTAwMDLWOWPQTFu4TGurMz1SwTdcdTAwMDNmQ/iTXCJVxnfY6ocqR8BW9qzaXHUwMDFkzbTbyVx1MDAxZEa3ollcXL9ccq9BrV/Jh+aSY9WpQGnyvo6RxJI7oFUx4JDUNyxjZ9HAdGo1rbHO1GBcdTAwMDVgpLr4XHUwMDFlQ+9cdTAwMGarI2ihKVxcZn5cIuArumOD9TjKStrP5chd01x1MDAxOYX526eVqkhcdTAwMDDrXHUwMDEy1dhd4DpcdTAwMTU1wSGnjL3rb5vag1xiUDFI+Jx05KZSrSNq7DqQ7GyA51OzN+KGRFhaXHUwMDA27KZ4rq5veyjt4EJr3+uCT8/DY305MbRsfV3BXHUwMDFjfcpcdTAwMWTa7fVjzK5uhZtccnszfTX8v3zYUbX74TfsXHUwMDBl+/LdwnRNYlx1MDAxZiCZzOf1IZiRQo+vZtJcdTAwMWbzslx1MDAxNu9BpatcdTAwMTlcdTAwMGWcXHUwMDE1XHUwMDA3rEJcdTAwMTjfXHUwMDFicY5qhkarmSHFe3ROk1Y/YvvQN+Vme1x1MDAxYlx1MDAwMVx0tvNGKfZcdTAwMDaI/1xi6rkqvXhcdTAwMWbFn/Scq/cj7OeQ6n00RfneQvJcdTAwMGVHXHUwMDE2pfKZj/EzrNnzfFttnn2l/f1wd0OYnZvPoV1uR1x1MDAxNYVcbsjvU+1cdTAwMTe/KG1s31xuQ41s+i1pY3zLrFx1MDAxZVx1MDAwZeaM+1x1MDAwMVx0XHUwMDAyo3zlnuLNe+OJKl+0l4o/woe6XHUwMDAzjqpB1Fx1MDAxNlx1MDAxMN5FUPXbi0X6mG82j1wiXHUwMDFlkk9/gy7Pulp8kdruMFx1MDAxZu+r4cPqsEC18/FcItBcdTAwMTFcdTAwMDBcdTAwMGay0M/5r79/+/s/t9XlXHUwMDAwIn0= events.Key(key=\"e\")events.Key(key=\"x\")events.Key(key=\"t\")Tevents.Key(key=\"x\")events.Key(key=\"t\")Teevents.Key(key=\"t\")TexText"},{"location":"guide/events/#default-behaviors","title":"Default behaviors","text":"<p>You may be familiar with Python's super function to call a function defined in a base class. You will not have to use this in event handlers as Textual will automatically call handler methods defined in a widget's base class(es).</p> <p>For instance, let's say we are building the classic game of Pong and we have written a <code>Paddle</code> widget which extends Static. When a Key event arrives, Textual calls <code>Paddle.on_key</code> (to respond to Up and Down keys), then <code>Static.on_key</code>, and finally <code>Widget.on_key</code>.</p>"},{"location":"guide/events/#preventing-default-behaviors","title":"Preventing default behaviors","text":"<p>If you don't want this behavior you can call prevent_default() on the event object. This tells Textual not to call any more handlers on base classes.</p> <p>Warning</p> <p>You won't need <code>prevent_default</code> very often. Be sure to know what your base classes do before calling it, or you risk disabling some core features builtin to Textual.</p>"},{"location":"guide/events/#bubbling","title":"Bubbling","text":"<p>Messages have a <code>bubble</code> attribute. If this is set to <code>True</code> then events will be sent to a widget's parent after processing. Input events typically bubble so that a widget will have the opportunity to respond to input events if they aren't handled by their children.</p> <p>The following diagram shows an (abbreviated) DOM for a UI with a container and two buttons. With the \"No\" button focused, it will receive the key event first.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1bbVPa2lx1MDAxNv7ur3C4X3pnarrfX85M54yioFSxVk+tPZ5xYlx1MDAxMiElJDRcdCDt9L/fXHUwMDE1UFx1MDAxMt5cdTAwMDIqcHBu80Eh2eysvfZ6nv2slZ2fW9vbhbjXclxuf2xcdTAwMTece8v0XFw7NLuFt8n5jlx1MDAxM0Zu4MMl0v9cdTAwMWVcdTAwMDXt0Oq3rMdxK/rj3bumXHUwMDE5Npy45ZmWY3TcqG16Udy23cCwguY7N3aa0Z/J36rZdN63gqZcdTAwMWSHRnqTXHUwMDFkx3bjIFx1MDAxY9zL8Zym48dcdTAwMTH0/jd8397+2f+bsc52zWbg2/3m/Vx1MDAwYql5nODxs9XA75uKOUKcMCT1sIVcdTAwMWLtw91ix4bLd2Cxk15JTlx1MDAxNXrRt6vuXHUwMDE34pu8yI/l/snt58reSXrbO9fzzuOeN3CEadXboZNejeIwaDiXrlx1MDAxZNeTu4+dXHUwMDFm/i5cbsBcdTAwMDfpr8KgXav7Tlx1MDAxNI38JmiZllx1MDAxYveSc1xiXHLPmn6t30d65j6ZIcVcciQ0JZprLDVVw6vJ77UhMeJcdTAwMTQrjSTmmo3bVVxmPJhcYrDrP6h/pJbdmlajXHUwMDA25vl22kZcdTAwMTFL48yYu4+jVdRgjFx1MDAxMlwiwVxmqlx1MDAxMeHDJnXHrdXjpFxyIYZCTCjJXHUwMDA3t8qY4vSnhGtFqVx1MDAxNul8JbdvXHUwMDFk2f3Q+GfcoXUzbD04rlx1MDAxMCVfMqYnVlx1MDAxZozHVTa2MpNOxFWl7Fx1MDAxZlQ+fyzvX1rfj3ul8/tw2NdIIMbOfVxcXHUwMDE4Xvj19ne3M7tcdTAwMWRp/XbRXHUwMDFiLmituL+6b1x1MDAxZvPDkPpnJdwrnXlfet3p1pphXHUwMDE4dDP9PnxKo6ndss1cdTAwMDEjYCEoSyiDS8SG1z3Xb8BFv+156bnAaqQkspUxeIK7RsafIS5G0fjZR+JcIohSXHUwMDA0WOApiOZcdTAwMTFX/vRtKnFplENcXFx1MDAwMlx1MDAxOVx1MDAwMlx1MDAxMyBcdTAwMGLBXHUwMDA2zPVcdTAwMTLiikPTj1pmXGJ8MIW85HzyXCJcdTAwMTNkRVx1MDAxMJFMJ3S2fLrKj05O5Vx1MDAxM6IzXHKCwI/P3Vx1MDAxZv2lUVx1MDAxOFx1MDAxYyuGiIBBaI24XHUwMDFjaVUym67XXHUwMDFimdd+XHUwMDE4g+W7rdab/2ZdXHUwMDFkOWDCYLlcdTAwMWRpvOu5tSTOXHUwMDBiXHUwMDE2XGbKXHRHIFx1MDAxMLsgXHUwMDA0hlxymq5te5lwtMBcdTAwMDJcdTAwMTP6XGaPXHUwMDE2WZOD0K25vuldjFx1MDAxOJhcdTAwMGLJXHUwMDAxJUzBpFwiszGJwfGYscyiNVx1MDAwZpP5JLWhmKRSXHUwMDFhhDIsZKJcdTAwMTVENjL6XHUwMDFkMGJwwCsgUilBJScrQyU1XHUwMDE0cCSTQlxugShXelxuKqk2XHUwMDE0xVopLjSGcJ5cdTAwMDAp5lxcwigofjpG+6Y+XHUwMDFio09bQTJ2mGG85/q269fgYrr0ParkRTDRR7HVTqzcXHUwMDAxhlx1MDAwNYBzjlxiU8BcdTAwMWNEZFx1MDAxYdXMVlx1MDAxMvRcdTAwMDZcdTAwMTeKSFx1MDAwNbHNlCZYPDRcdTAwMTiuwFx1MDAwNce355tUvPlcdTAwMDbS8NI8s8t2T/rt3a87++VZJjGsMdZIYyqJXHUwMDEyRLFcdKswg+mHmcNEXHUwMDEzglx1MDAwNPydMMszo7hcdTAwMTg0m25cZs7/XHUwMDE4uH487uS+N3dcdTAwMTO011x1MDAxZNNcdTAwMWW/XG7Dyl5cdTAwMWKnhVbS46h4TD9tp7Dpf1x1MDAxOX7+5+3U1juzozk5JuI47W8r+39cdTAwMTajhY5cdTAwMTVcdTAwMGbwPIXVXGK4eFx1MDAxNq1cdTAwMDGSXHRcdTAwMDaxsbjSyJ/nXHJlNaKUQSVcdTAwMTJIJ1x1MDAwYp5iZIzVNJBcdTAwMWWiSFx1MDAwM2q1TtbF1WlccpHOxZDGVKp8XHUwMDFleFx1MDAwYphVipHVZi2pkGp8iM5kpV5FOLBkLL+dWl9PXp5cXHjNXHUwMDFmn2/+wlx1MDAxZr2DYlxye3Xkur1ytJhcXM/t97LyudM9ZvsnxyG3yz3SJmxfLKFfcmlcdTAwMWZcdTAwMWSWXHUwMDFh1onaZfii6Z1cdTAwMWX4X2tL6HdF7n1d3TbE5VGn1PqEb9pRvdHhJXRXtf/vnPuCXGZ2vebOy+On33BBa0vlxoUon3+7u6yfdSp+3Tv+XHUwMDE27CzBXHUwMDBi91fki/zavjmpoHL5XHUwMDE2k2bN6Z0tqT7AJFx1MDAxMZCOrro+QIhW46dcdTAwMWZXbYq51ELRxXOR/LDY1FVb07xVXHUwMDFiUjJDrmnV5lNW7Uxq9LBqKyk4XHUwMDE4K+g6K1x1MDAwMkxohTR6QjxOr1xiLFpcdTAwMDEoPqbnb6795IJrv79OKvReULsuXFz704tcdTAwMDOZPHGkOOA5d6PR/6TSwFx1MDAxYy06Xlx1MDAxYZhr+fM1NkWKzkIrRlxcI0GzYTFcdTAwMGaunVx1MDAxYoJlLf7c2bPo0W3ZP2qflXv/Llxc+Ty0YkFcZqIxpDmSUsGoXHUwMDFhRSucMrhmSlx1MDAwMVx1MDAxMFx1MDAwNWFMrlx1MDAwZaxcdTAwMTkwpFx1MDAxMluMg5VgjDBkY5lq31o09sVheFOMnfaN3K1Wrq7qny5+XHUwMDFjfvitsZelsVfk3tfV7ao09uvywqo09uvygqf3iuq2XFxkRSGc84tcdTAwMGb3tVJpg72w/JRgXlx1MDAwNjN9IGm3XHUwMDBmn3JcdTAwMTSYwpqwpyiwXFyhMSsjoCSjcMc1XHUwMDA2wVRRgejiXHUwMDFhI3/+NlVjyHyNodelMdRcdTAwMTSNISc0htKYScroXG52NMxcdTAwMGJH/IRwfFlCsNeO48B/k5xcdTAwMWLo6uvClVx1MDAxM11cdTAwMTfeXHUwMDBlvnXM0DX9XHUwMDE4pHbUtixcdTAwMTjd7CxBjna+pCxhjphcdTAwMWXPXHUwMDEynjecXFxE56dcdTAwMGV49lNHjFx1MDAwNYQ8hPvimf7ljYjrxdZt1W+ffqrY9ztcdTAwMDeXZ/VNz/SpVlx1MDAwNoaoXHUwMDE1QkHSz4SczFx1MDAxZJCAbjjTjJOV7lx1MDAwNVgsecCISkQ5ZWtOXHUwMDFl0MfK4Un7qnL48axcdTAwMTL39lx1MDAwZXo8OPF/J1x1MDAwZstKXHUwMDFlVuTe19XtqpKH1+WFVSVcdTAwMGavy1x1MDAwYqtKXHUwMDFlXpdcdTAwMTde8DjhmTnJ9IGk3T58yntKwUEkp09cdTAwMTBWlpPgmTlcdFGCXHUwMDEzQcjie1x1MDAwYvKnb0O1XHUwMDBiQzRfu+i1aZdcdTAwMDWTXHUwMDEypSmiXHUwMDAyr0C6LDNcdTAwMWWXnpRUgylcIt5cdTAwMDG8huvOSOZo9Fx1MDAwNTKSeWPJXHUwMDA188z9j1jJmc9cdTAwMWMx0kJLxjPhPVx1MDAwZs75tLmhcKaKXHUwMDE5QiCtklx1MDAwMoLi2YpK/6Gjklx1MDAwNlx1MDAxNZJizYHeOFErrDFgXGaWXGJGXHUwMDE4p5RQwtkkulx1MDAwNTe45lopRGjyglx1MDAwN1x1MDAxZFx1MDAwNztnyXNi8ZyNRM/fXHUwMDAw+Vx1MDAwMrAvuFx1MDAwMXLh3YbIYJgqrFx1MDAwNeVIJvOVaTPYaUhcZlxmPoZlilxuLlx1MDAxNOTakztcclx1MDAxN9pcdTAwMDCZXHUwMDBm6lx1MDAxMZO4XHUwMDEwyVx1MDAwZUBcdTAwMDSrXHUwMDA1pJFcbk/YXHUwMDA0M4+0XHUwMDA0vIE9SMBcZuNcdJte0+7H2ZGcXHUwMDFjXHUwMDEzMZx2t5X9/1xmOpstTmBcdTAwMDKoktn8fVx1MDAxZZvlXHUwMDE3pjeVzSQxINDAXHUwMDEzXGYpxHXqj1x1MDAwMZkpQzCMOaeKXHUwMDBi/qJXw+ZQXHUwMDE5NVx1MDAxOMijxFx1MDAwNM4kKKUpVEZcZlx1MDAwMcJcdTAwMDR0iVJcdTAwMTIxltnv/Vh0oUpcYs1AvKyXzJgmXHUwMDE5sfQvktlcdTAwMGVQXHUwMDA3lVx1MDAwMCTMQEpKJsgkdYCjKbhZUVxuLCM0aM7n0Vl+1XTMqMQmXHUwMDA07UEkSEz0hFEw/UQgcCeiXHUwMDE45CdWr5rOdmaHc3JMXHUwMDA28lx1MDAxM1x0LbdcXCwzr7OOcVx1MDAxYeeYwaLCXHUwMDE3L1x1MDAxNvNcdTAwMWatfetL7XDvwlx1MDAxM7FC3S46vmttOqdcdEZcckWJgHDjXHUwMDEyKzZZK9ZUKFhQYGXNvlT2nPddmSWcO87YJKVcdTAwMTGR9pxcdTAwMTaKM1vQXHUwMDFlOEtCqqVhTp7xXGJoXHUwMDFlZ1xyw2pKyaLt69L9j6/V71cq+u53j3ixcVJ9eSWkKE87ptM+/G7+1Y0vT2k1qsYzXHUwMDFl+i6pXHUwMDEyMn0gabePiJrN36BcdTAwMDKUeMrjsFxccM6qhEiSkzrBIVx1MDAwNVx1MDAxNotcdTAwMDMzf/o2XHUwMDE2mCpcdTAwMGaYmsHStCRg5qpccsKnQJNMpEZcdTAwMThcdTAwMDNXcs7Uup/OPjFcdTAwMWPTWU9cdTAwMGIhmUeGI4WQdJCPhVx1MDAxMKeT2GR8cHpvXHUwMDFhTu/9deHiujDjXHUwMDA1Tj3y46W9wDlnkVx1MDAxOa92TDd4gMmtXHUwMDA3oFx1MDAxN8xW6zxcdTAwMDa/XHUwMDBlXHUwMDA1XGZMnWs/OCf1ZaHjOt29Kbx+1z+SXvs4T1x1MDAwMOUkXHUwMDEz9/PX1q//XHUwMDAxXHUwMDA3vCMgIn0= App()Container(    id=\"dialog\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")events.Key(key=\"T\") <p>After Textual calls <code>Button.on_key</code> the event bubbles to the button's parent and will call <code>Container.on_key</code> (if it exists).</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXG1T4spcdTAwMTL+7q+wOF/2Vq3ZeX85VVu3XHUwMDE01PXdVVddr6e2YohcdTAwMTBcdFx0Jlx1MDAwMcSt/e+ngyxJeFx0iODi3U1ZXHUwMDAymaHT09P9zNOdXHTfV1ZXXHUwMDBiUadhXHUwMDE3/l4t2Fx1MDAwZpbpOuXAbFx1MDAxN97H51t2XHUwMDEwOr5cdTAwMDdNpPs59JuB1e1ZjaJG+PeHXHUwMDBmdTOo2VHDNS3baDlh03TDqFl2fMPy61x1MDAxZpzIrof/jf9cdTAwMWaadftjw6+Xo8BILrJml53IXHUwMDBmnq5lu3bd9qJcdTAwMTCk/1x1MDAwZj6vrn7v/k9pV3bMuu+Vu927XHKJekKiwbOHvtdVVWpMJNOc9js4YVx0Llx1MDAxNtllaL1cdTAwMDWF7aQlPlVwS+dccr0vNre3qvdRdHrepHf1teSqt47rnkZcdTAwMWT3yVx1MDAwZaZVbVx1MDAwNnbSXHUwMDFhRoFfsy+cclSFdjxwvv+90Fx1MDAwN1x1MDAxMyTfXG78ZqXq2WGY+Y7fMC0n6sTnUDI+06t0ZSRnXHUwMDFl4lx1MDAxZVx1MDAxOFx1MDAxYlgozjiTQlLBkvF2es1cXCiKNSWSQC86oFnRd2EmQLO/UPdIdLsxrVpcdTAwMDVcdTAwMTT0yklcdTAwMWZFLI1To27/XHUwMDFjr6JcdTAwMDZjlFx1MDAxMEmJplx1MDAxYVx1MDAxMd7vUrWdSjWK+1x1MDAxMGIoxISS/OlSKSPZ3UlRQlDCiEh0jK/f2Cl3neOfQZtWzaDRs10hjD+kdI/V3lx1MDAxY/SstHel5t1sX3ok2tza31x1MDAxMZfhiSutVl3gvqyMK0b2Q1ToN/x4nyf24XBcdTAwMTe7Zpl9uSi192osujQv9uhosWZcdTAwMTD47WnlLkjd31xcbKb3+2kvmIjtvUuctNkom09Yg8GtXHUwMDE54kRwOPrtruPVoNFrum5yzrdqXHQ8raT0XHUwMDFkXHUwMDAyxYyeKUTkaixcIjKlkYbwTHSYhIj5Vl5aRFx1MDAxNLmIKIjBJII5QfLliFx1MDAxOFx1MDAwNaZcdTAwMTc2zFx1MDAwMHBmXHUwMDA0KsrJqEiGUJAqzVxilkLPXHUwMDFmXHUwMDA15+mdiVx1MDAxN/hedOo82l1ZXHUwMDA2x4ohXCJcdTAwMTCRWiMuM722zLrjdjJcdTAwMTPbdWPQfL3RePeftKVDXHUwMDFiVOjK5JnO665Tif28YMGg7CBcdTAwMTNcdTAwMDKRXHUwMDAzXGaj36HulMtuylx1MDAxZi3QwFx1MDAwNJnBzjSrvVx1MDAxZjhcdTAwMTXHM92zjIK5IfmE4iNiUlx1MDAwYjYuJqmG6eaYTc9S8peVJY1JgpBBXHUwMDE0xKRElFx0hjHLxCSh2kCEMM41XHUwMDA355dcXCwsJpGhpeSKgzaMyVx1MDAxMVx1MDAwMcm4QVx1MDAxNVx1MDAxMlxuaU0wk1SKwVx1MDAwMMVUUIlcdTAwMTVHM/CUrqazRiggXGKZJULDyFxmolxyxys7Xlx1MDAwNVx1MDAxYZN17yf5niZcIroxbDXDrlxyXHUwMDExo1xu0JMpXHUwMDAwUoKFZDzVrWI24oXIoFx1MDAxOMGUY1x1MDAwNeingIj3OvRcdTAwMTfggu2VJyvFOo9cdTAwMWN92l5v75OrWqd0XCK+XFw0ySil1kArXHJTg5HATFxizaRcdTAwMWVWXG5TQ1x1MDAxMVx1MDAwNViHOcFYa4yHtHLNMCr69bpcdTAwMTOB9Y99x4tcdTAwMDat3DXnelx1MDAxY+xV2yxcdTAwMGa2wqjSbYOo0IglZilp8m41XHSb7of++3/ej+492pnjY9iNXHUwMDEzYSvp13FoXHUwMDE22Fb0XHUwMDE0zCNcdTAwMTCNUDpcdTAwMTbSMIQvl1qpXHUwMDA0KiZhWv4kLymmQXppYIUhX0GUUKF1lmdcdTAwMTCtXGZCMSyGXHUwMDE4QStTfECzOfJcZpFgVFx1MDAxZseUXHUwMDFhwi2CtITVJoV6r5Jfbd7W6N3mbadxb53csk7rlG6ffVre/Opi97zV3melg/2Al7c7pElYScxBLrko73zaqllcdTAwMDdqneGzunu06V1V5iB3QeZ9W2Jr4mKntdU4wd+aYbXW4lvo9rD8x7hLLfaRblx1MDAxZu/fsiNyXiu5XHUwMDFi9p44q1x1MDAxZOzOo0Bycllj1YOz/a/0+HHnq/ulxYLSi+ROKlx1MDAwZYw2UFwi9ueCm0PuuEB44cVcdTAwMDFC2fhlWyhcdTAwMTmTXGKS5J2Tlu18v1jWZZuSvGWbXHUwMDAyRZSvtGzzXHUwMDExy3YqZe4v20RLyqRIxvtcblx1MDAwNVx1MDAwMaZcdTAwMTTCXHUwMDFhP8MjR1x1MDAxN1x1MDAwNKYtXHUwMDAwXHUwMDE0f2bn7669uMEpf7yOK/+uX7kuXFx7o2tcdTAwMDOcZOT0U3/Xvs36/7MqXHUwMDAzXHUwMDEz2OhgZWCi5rPTbHDG8fc3XGLTXGLy0OnD9ZN9ZNPHc+fh6/bxSXX7xrNcdTAwMWXto19cdTAwMWKufGK0XHUwMDFhXHUwMDE4XHUwMDExXHUwMDAx2CgohFx1MDAwMYCTyEQrXHUwMDEz3Fx1MDAxMMCyIVx1MDAxOedap1x1MDAwYlhzXHUwMDBmVo2Gg1VcctdcdTAwMDY0xZhS9dr3ME7XnMvS/tq3b0FJ31xir3VPXHUwMDAzbP3h2PPi2Fx1MDAwYjLv21x1MDAxMrsojv22rOBeXHUwMDE2vfXO1n2FXHUwMDE3afXIosXjqIh+PyvojaK62S6yolx1MDAxMPbp2d5DZWurvbxWWFSqMXd1J2VcdTAwMWGjL5iI7b2bJ6/LpS/jMlxySphcdTAwMWE8nTBcdTAwMTeluKY0YbqTmEu+mZeTuYgsc8lmXHUwMDE5TKLX4i1qXHUwMDA0b1x1MDAxOXFPQ1NcdTAwMWRXilOT8n+YZGw0o8j33sXnnrj6deGrXHUwMDFkXlx1MDAxN94/fWqZgWN6XHUwMDEx0PewaVkwuvGZh8xcbp9T5jGBoVx1MDAwZmZcdTAwMWWzXHInN54npCNCjlx1MDAwYmrOXHUwMDE44/g5NzLXLiufxVWntLPjXHUwMDFjuvbnzm7n7mHpq1x1MDAwN4RcbkNThFx1MDAxNCVcXGlAuYG4hnxcdTAwMDTBeYw4U9BXysVcdTAwMDX2dFx0XHSDMVx0qVx1MDAxN1A7yKWK+uiIq8+HzZ3L5teaf2Fe3W3JP+nIvNKRXHUwMDA1mfeNiV1QOvK2rLCodOSNWWFB6cjbssL8b3wsSN1JWc7oXHUwMDBiJmJ775Ygy+Fjs1x1MDAxY6KB4Ovn3E7JN/OyXHUwMDEyXCKGc1x0XHUwMDExJDqvRYimzHRcdTAwMDRcdTAwMTJUKM5cdTAwMTdQoV3qTOfQXHUwMDFmkVx1MDAxOdiAXHUwMDAzwWunOVx1MDAxM5j/XHUwMDE0ac6kseRG89h9mlx1MDAwNOHxt0fBwbHkWj5j93QuXHUwMDFjL2s8XHUwMDEzajBcdLFEhGSMZm+3UKVcZsA0QZiIN/nSXHUwMDA1XHUwMDA2M8aGXHUwMDEwglx1MDAxMcYpJYAtbDi2IdeK94tCZFx1MDAwMdBcIonpUKgrgCNGOZmhqDH7Rs1cdTAwMTeE+pRcdTAwMWI1p95cdTAwMTOJXGaGYfhgXHUwMDAyKjhHhKhUp6dcdTAwMWSRxMBgZULiXHUwMDFlQilGSa/HM/dp5sd0RicuXHUwMDA0LFx1MDAxNTzeXHRMJUpcdTAwMTC6r1x1MDAxM8w90lJoXHT6IFx1MDAwMXP8tndpjvfl+Fx1MDAxOPLiRNxK+vXZaIY104Onkz2aSkpYtNn0ezTzS+jLWYMlYHkpkFx1MDAwNk+iUjCW2lx1MDAxM/lcdTAwMDRn2oh3XG5cdTAwMGLEqKZcdTAwMDIrNqDYPPFcZmBVXHUwMDExrVx1MDAxMEw2k0IlO1x1MDAxN1x1MDAxMjwjhlx1MDAwMColMFdKXCLGdKoq3Fx1MDAwMzREXHUwMDAwk1x1MDAxNVEzlHNmXHUwMDA3NPjHuUx86Vx1MDAxN1x1MDAwMtpcdTAwMWGgXHUwMDA3zKRgmDGAdSZIqtNcdTAwMTN4gJ0pWFlRXG44I7RmM248z6/FXHUwMDBl6Fx1MDAxNKuEgFx1MDAxZmDALZxQ/tXUvnNcIrrPXHUwMDFjUayUxupNXHUwMDAz2tp4b46PYT9+JqTlXHUwMDE2oWFix6NcdTAwMWFnXHUwMDA0ol1PX4Qu31x1MDAxY1/c3947l6XPx7e6yuT5oW3+WlSjk1BccixvSLA6XHUwMDAx6ytcdTAwMDbeNLwnRlx1MDAwYlx1MDAwZcu6XHUwMDEyWCP2omdp/mKWsG85Y8OQRkSCpklcdTAwMDE6wbVcdTAwMWVmcZhcdTAwMTNccvrMsOl8XHUwMDEyZPXdakTNorTl7IR8XHUwMDE37Z5cdTAwMWNcdTAwMWY+3lhHlebGWvHlJZaiPGqZdvPTvfmlXHUwMDFkXVx1MDAxY9HD8DDam0OJZe7qTiqxjL7glNo6n3evLm4qdrBn1qnliK90s/FtOiv8XHUwMDA0gDz6XGZ/iWstqHQj5djKXHJGgoLLajZ9qpc/fctcbiMyXHUwMDE3RjQ3WFx1MDAxYUZcdTAwMTaX7KWraMmDscPpXHUwMDFjQLtcdTAwMDI6J39B5Wam5+5SlVx1MDAxYoIyZ/uVm2QoPys3divWydizO+9qdufjdeHsujDmyVid+fLcnoydsCZcdTAwMGWWZ0YrPPtcdTAwMDKvUyvWYE1cdTAwMTWmgrDnZC3ty9ZR5+BTZJ5vr31ztrfq7EBtLntcclx1MDAwNlJcdTAwMTFDQqIo4u0jXFxcdTAwMTA+UIVBkDJcbowhhWNAhNGLXHUwMDAy8+VcdTAwMGI8dIOo1LM8r/6SXHUwMDA13lx1MDAxNlx1MDAxYid3ev2uuVtad+W3dus4OKsv71x1MDAwMr8gdecudlx1MDAxMm9cdTAwMTh9wd+HNyg9dkc+iZ+Fxlx1MDAxMLfT3/LJn76lhSeRXHUwMDBiT5RcdTAwMWJoXvA0XHUwMDE33iBjXHUwMDEywyVdwHOvf3hDwlx1MDAxYiastXPgXHJja52pZ6NcdTAwMDb3pXFcdTAwMDSrXHUwMDEzXHUwMDE208dkPkg9KybJq8UkV8JAkGjHv66VpfFcdTAwMWNcdTAwMTkqrktROX6TqS3iavDsgSjhXHUwMDFhXHUwMDA0UTzqXHUwMDA3brgwQC/IXHUwMDFmXHUwMDA0RfG2XzlcXNVkQmtMkX7d2zRwSZz6XHUwMDE1g/lXNfN59Gr6llxiXHUwMDAxnGRIi/hX0SBcdTAwMTVcdTAwMWLxc1x1MDAxYVx1MDAxOEBVXHUwMDAzmGI4YmuyXodnVjXzY3RAJ+B1Or6nT1x1MDAwNJNsSCNhXHUwMDAwwnVnlOk4W6ZDXHUwMDFhvama5rBcdTAwMGZ3T1x1MDAwZrtvXCJpJf36bFwiMb6MyblShKR/X2ZcdTAwMTJmSeteXHUwMDFkXFzV/eKRf3/X1vqiendcdTAwMTUuP2ZJXHUwMDAz+Fx1MDAwM9aKgWdjNlx1MDAwMFxcSFx1MDAxYZpJQYVWWDGxuC3yPFlcdTAwMWJcdTAwMTJcdTAwMTYxjFI0vlx1MDAxZFx0gfeqv8slXHUwMDA00UrNhFJTsIjhfSM3zZub9Fx1MDAxMp+mXHIq03vavSCR31x1MDAxOMdcdTAwMTgyo1x1MDAxOKRcdTAwMDc9TZ5ia6VcdTAwMTe3XHUwMDA1s9E4jcBCfYiDSXDKvWEm8lxuLcdub4zIdm+7Ryy1XHUwMDFir3Fk2PFcdTAwMTR8/7Hy419iJnwqIn0= App()Container(    id=\"dialog\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")events.Key(key=\"T\")events.Key(key=\"T\")bubble <p>As before, the event bubbles to its parent (the App class).</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT4lhcdTAwMTP+7q+w2C/zVlxy2XO/bNXWW4p3XHUwMDFkXHUwMDFkXHUwMDA1dZzXLStAhFxmgWBcdTAwMTK8zNb+97dcdTAwMGYqXHS3XHUwMDEwlTgwO1QpkFx1MDAxYzqdPt1Pnu7Tyd8rq6uF6KHrXHUwMDE0/lgtOPc123PrgX1X+Gi23zpB6PpcdTAwMWTYRfrfQ79cdTAwMTfU+iObUdRccv/4/fe2XHUwMDFktJyo69k1x7p1w57thVGv7vpWzW//7kZOO/yv+X9ot50/u367XHUwMDFlXHUwMDA1VnyQolN3Iz94PJbjOW2nXHUwMDEzhSD9f/B9dfXv/v+EdnXXbvuden94f0esXHUwMDFl13p066Hf6auKmWBMak3jXHUwMDExbrhcdTAwMDFHi5w67L5cdTAwMDaNnXiP2VRAZVxc/LZ3vr7+5UpUrtTa3XkobuPDXrueV45cdTAwMWW8R0PYtWYvcOK9YVx1MDAxNPgt59ytR01z9JHtg9+FPtgg/lXg91x1MDAxYc2OXHUwMDEzhkO/8bt2zY1cdTAwMWXMNoRcdTAwMDZb7U6jLyPeclx1MDAwZt+KmEhLIaQ5ZZxJitRgd19cdTAwMDDllmJKI0a1YFxu61x1MDAxMcVKvlx1MDAwNzNcdTAwMDGK/Yb6r1i1ql1rNUC/Tj1cdTAwMWWjSE3jxEnfPZ+uolx1MDAxNmOUXHUwMDEwSVx0WFx1MDAxY1x1MDAxMT5cdTAwMTjSdNxGMzJjXGJcdTAwMDE9mVCSP1x1MDAxZSphI6c/J1hJolx05yreY1x1MDAxNOju1vve8deoTZt20H2yXSE0X1x1MDAxMspcdTAwMWK9N0ddK+leiXnvKSEu9q/0fveb+vL15vtR8M0hXHUwMDAzWUO+XHUwMDE4OfdRYbDjn4+/xP4kYodGf8x6wKzaXHUwMDFlRrf35Vx1MDAwYreoP92cVnfOTlx1MDAxZZwvXHUwMDA3k7W1g8C/S8h9+lx1MDAxNPt+r1u3XHUwMDFmIVxmXHUwMDBiQVx1MDAxOeJEUarkYL/ndlqws9PzvHibX2vFqLeSUHhcZmyHzj+JtEhMRVrEXHUwMDE4w0igOOhnIW369C0u0pI0pFXCklx1MDAxY1x1MDAxM1x1MDAwMFn2ZqSNXHUwMDAyu1x1MDAxM3btXHUwMDAw4GtcdTAwMDLaytloS8bRXHUwMDE1SSFcYvxcIlZsbug6T/eMvcDvRGX3e9/FhMWxYohcYkTgmo64XHUwMDFjXHUwMDFhtWW3Xe9haGL7flxmmq91u1x1MDAxZv6TNHXogFxufZl8aPCa5zaMo1x1MDAxN2pwUk4wXHUwMDE0XHUwMDAzkVx1MDAwYtRlMKDt1utewlx1MDAxZmuggVxyMoPdLCzCXHUwMDBm3Ibbsb3KkIKpMfmIXHRcdTAwMTOCXHUwMDEyI6KmRaVcIkozJjDOXHUwMDFllKkotahBSYVFXGJFhHCFNNA9OVx1MDAxNJREUPBcdTAwMWNcdTAwMDAnJoFYYIJZflFpSawxVlxcXHRkXFyejFx1MDAwNyUjXHUwMDE2XHUwMDE1lFJcYlxcRVx1MDAxNUpQ0+dcdTAwMTiVmFx1MDAxMcpwwjczx2hf1dfG6Fx1MDAxMJq9IEbDyFx1MDAwZaJ1t1N3O1xy2Fx1MDAxOV/7nnl9lpjoR3GtZ7QsXCJcdTAwMGJcIlxcMiVcdTAwMTUgLONcdTAwMWMmViXGNeyusaOFsWCYXHUwMDFhsFVgcfI0YHBcdTAwMTUuOJ36bK22909Pd13S+7z9cNw624nOTsrlL5O0XHUwMDAypVx1MDAwMDypQDA/iiNcdTAwMDPwMeZcdTAwMGW00lx1MDAxNlKUXHUwMDBiialWiFA5ppRnh1HJb7fdXGKs/9l3O9GolfvmXFwz4d507ProXjip5L5RXFzoXHUwMDFhicNkN/60XHUwMDFhx03/y+DzX1x1MDAxZieOLk51Z/NcdTAwMWFz5FjcSvJ9XHUwMDFholx1MDAwNU4teoznXHSoRijlo5ufUY0gpYngmtLMsJY+y4tcbmuYUEsyXG54QJnJ31hsXHUwMDEyI4FiZmkuIaWD2Vx1MDAxMZrlSDZETPxcdTAwMDZApmKweEIuXHKhylx1MDAxMCM5kIs0Zu2fXHUwMDE3T2+6p9WOOjhu3n1cdTAwMGbsi1wiZ29PL7pF50SSXHLt7jKt9nuHLba9s5eNsKfKPd87u707YFx1MDAxYp9cdTAwMGVcdTAwMDJe334gPcI2xFx1MDAxY+SS8/ruzlar9kmtMVxcaXtHm52vjTnIzcm8yyW2Jc53b7e6J/iqXHUwMDE3Nlu3fFx1MDAwYl1cdTAwMWbW/3XGfUNcdTAwMGX7XHUwMDEzWSHqXu00Nq+0s1x1MDAxOVRxsX5cdTAwMWKG3l4wXHUwMDA3KyCnsvnJ82XjqHm/s394sulT725cdTAwMTGtO6tOMvmAsdhnejCVjDLNgcfH5Dmnelx1MDAwNrDsqSRcdTAwMDNcdTAwMGItXHT8yewkI93OXHUwMDBiSzKwSiVcdTAwMTlcdTAwMTRZ7H1IXHUwMDA2n0AyXHUwMDEySf5cdTAwMTPJgFx1MDAxY85cdTAwMTQxWDwv71DBeHRI/Fx1MDAwMoecXFzByFqxKD2XXHUwMDEzPlxcdsxcdTAwMGW3/uelWVx1MDAwM/H8xmXhsjO5mMHJkJxBrcJzrofd/0WljFx1MDAxOdR5tJQxU/PUSE3NXHQopmRauCpIXyVjQmaO1kP3XHUwMDA2bzU66/dcdTAwMDeoev39SFKvVKr/2GjlM4OVMG0pXHUwMDAyXHUwMDE5L1wiWFxuotVwsDJcdTAwMDU5XHUwMDE505JJzjWwcZFfsGo0XHUwMDFlrEqMXHUwMDA2K1NcdTAwMDIyYczeOSNwTnmVVuAlO8Xt1s3DWsA3rn5lXHUwMDA088pcYnIy73KJzSsjWC4r5JVcdTAwMTEsl1x1MDAxNTy9XlLV7Vx1MDAxMitcdOGUK/v3ja2teTD3nNTNK4FZlkmblb9MPmAs9unTXHUwMDBmz18oYdNbXySmlFx1MDAwYqqzM6J0Oy8sI2LpjEi+XHUwMDE3I1JcdTAwMTNcdTAwMTiRXHUwMDFjY0RKaES1UD91+rLei1wiv/PBbHvMXHUwMDAyLlx1MDAwYlx1MDAxN054Wfj4+O3WXHUwMDBlXFy7XHUwMDEzQWJcdTAwMTD2ajU4u+k5jVx1MDAxY1x1MDAxNj6nnGZcdTAwMDb3XHUwMDFmzWledzqpIT0j0Vx1MDAxMVPjmmjNMKTj2fss1Oej3fXjXHUwMDBi965q22F5u/LlU/PsfvHLXHUwMDEy1IJ4RVxcYoI1XHUwMDExmqmRuMaWwtysWULSQ4XKL64zZjpCaa6QeOe2tWtSo7h3Ujyon8pcdTAwMTLueC1ug9Bfmc6cMp2czLtcXGLzynSWy1xueWU6y2WFvDKd5bJCXis1y2KFWVx01ORcdTAwMDPGYp8+LUBcdTAwMDLFU1x1MDAxMijJJWGSZb93IN3Oi8q01FxmoiXei2hlS6BcdTAwMTjTjCgt/m1cdNShPyHhcFx1MDAwMF2C986eZiRcdTAwMTRcdTAwMTmyp1nnklx1MDAxYcxTO2FcdMJpy7mYMcp59rwpXHUwMDFk5Fx1MDAxNzWaibRcdTAwMTinlEqJXHUwMDA0I5QmXG5ccv1wRtzChGAlsemkppLnXHUwMDE3z1x1MDAxOFtCgFx1MDAxMkZcdTAwMWZcdTAwMDJQy8bDW3CLa66V6ZXUSGI6XHUwMDFh7Vx1MDAwMExCICXly6P99b2wL7/6JPSY1lx1MDAwYlx1MDAxYveRMkw5XHUwMDAxX6RiSmsrsTCYjVx1MDAxMDNCKMVoou8yS/fq0+DZnbCxTmBlXHUwMDBlXHQsolxmfFx1MDAwMsWoO9BcdCZcdTAwMTNpKbRcdTAwMDR9kIBJw9N0mlxmXHUwMDBmYzotUyPsdFc2rzEnjsWtJN9f3tqvp9d3KTiQubsxO56lV/1cdTAwMTdcdTAwMTXPqDbBgFx1MDAxOdicXHUwMDEygHBcdTAwMWRfQ1x1MDAxZvFMWFRcdTAwMGJcYiNNNVx1MDAxNXnecIOpXHUwMDA1XGZIK1x1MDAwNJPNpFBcdTAwMTN6+1x1MDAwNbGEpkhcdTAwMDBfUlx1MDAxMoGyXHR0fWIvXFxcIlx1MDAwZVx1MDAwMPOKXHUwMDA18Vx1MDAwNcWzXCKAXHUwMDA3NVxyOTA5nEgmkmD1iFx1MDAxZGA4XG5mU2ZBQlxinWgxylx0z4xORiWzJoBcdTAwMDG2cNySXHUwMDFjXHUwMDAzXHUwMDFhtYhAYFx1MDAxZkSxUlx1MDAxYatpOk0uXHUwMDE2LzWeXHUwMDE1pzuzeY278Vx1MDAwYlx1MDAxMS21uq3o9LtcYvshTjDJjmqVXHUwMDA3t1k+uHPuSifOt/Jaw1x0i9/2fyyq0VmgRihcdTAwMWVes1x1MDAxYcm4jPmxJNLgXHUwMDE5SvY0veZ2bVZcdTAwMTPONWdsXHUwMDFj0UhcIpmLK9sxTDzfj4SVuWmKklx1MDAxY+5HXHUwMDFh+NWEqkXt+vz4QNb3mq1cdTAwMWLvXHUwMDBivjj8fmJvbb29XHUwMDE4UpJHt7bT27mxT++i8yN6XHUwMDE4XHUwMDFlRvuTxb6odpOTunNcdTAwMTc7q3Yz+YCx2GdcdTAwMDBIudpcdTAwMDDyJlx1MDAxNk1yqt1IOb10g1x1MDAwMdZcdTAwMTBcdTAwMDeyllx1MDAxOUbSzbyoMFwiUmBcdTAwMDRi1sJcdFx1MDAxOHlcdTAwMTOKpDIjwifgXGJcdTAwMTlL5bBkXFzBgX5A4eZV1CdRuCFoaOugcFx1MDAxM5/Kc+HGuTU6WfvOw4eW8/DnZaFyWZhy67FcdTAwMWX68dxuPZ5xQVx1MDAxY63OTFb49Vd3nUjzx8KSYE2xTjzaY1ZYejdl9nnz/qHZ3tpu672d43DXX1/wsFx1MDAwNPSxuGKacHPNXHUwMDE0hI801Fx1MDAxM2KZZmVI/Vx1MDAxOXBmJN90N/LbL+8ms9LoVVx1MDAwYtdvubpfXHR0UdtZP946p3vVs/2Tln/8eWNxr+45qbssYmeRhslcdTAwMDfMqG2vWj/fYdXKzV6RrYn2UbVabspsc5aBjEhNaO5PRlE65W5lSLA4ZSp7TpM+fYuKejxcdTAwMTX1OLbk3FBvXHUwMDFldISYslx1MDAwMEf8XZ+EXHUwMDAy7kg5euuTUJaJjsy4gudNR8wjiaZGJqZKcYNcdTAwMGaZI3N9jbZcdTAwMTTfaWzfn5XOfMlC7yxoLXpcclx1MDAxNZtcdTAwMWGpXHUwMDEwXHUwMDFjklx1MDAwMY20XHUwMDEymlxyhSbm3JJcXHJwTZO64eRcIsyPICRcXDNO2KtcdTAwMTZ430JIPt/qYD3c6V03v29ffN3arGzc3PdcdTAwMTaXkOSk7nKJ3f3aq5xViN495Vx1MDAxN2frd07P35XeXCJcdTAwMWF3XHUwMDE2f5p8wFx1MDAxZs+fKFVEXHUwMDEynHsxXHUwMDA3J59cdTAwMDQ5XG7TXHUwMDE0XHUwMDAwQSRJ3CyUTp++RUVpjFNRWnGLzFxypedSz4G0kSMk87i5c55cdTAwMGW57Fxmalx1MDAwNueYXHUwMDAzg0p5ttz09WdJXHRcdTAwMTOcveDRcqkw9aKoJO9cdTAwMTaV5vZcItPywKnCiGAx0lx1MDAxZEeRtFx1MDAwNMdSIVxykavV9NuLXHUwMDFjIeVbgtI8fkxRhDnlXGaSK8YxmfC4XHUwMDA0XHUwMDAxWVx1MDAxNoP9XHUwMDE0eC2nVNCx9jmTnUlcdTAwMDRcdTAwMTDznlx1MDAxZDVPUfuq/rmMT5dLzzNWh5/jXHUwMDA2zF9rJMCI2DzCLNHN8bw4zCxBuVx1MDAxNppIhVx1MDAxOWj+3NPxwqfLpcfu6tCKNaJEKTgq4qbpR3MxrpayXHUwMDAwdDVkrlxcKUSVYGNaLdUqdJpP91x1MDAwN4y7cyxzJfn+Yr6RuJyNXHUwMDAwXHUwMDFiU5pcIk1Zdrpx4GyfXpVON4vnVcq/ke1cdTAwMTLZrp0sPLBJYVx1MDAxMbP2jzhcdTAwMDZGQYZxjUjz5DlOzJ2KXG6ihOXXJpgowMRkY6xvxviAIFi9a7VcdTAwMDbYXHUwMDE45TSvxaPxrt9qr1pNXHUwMDEygSS5UEOjs3byRn53XHUwMDFhr1x1MDAxODqLUVx1MDAxMvGkyWNsrTxFcMHudstcdTAwMTFYaFx1MDAwMHgwXHRu/ek0Y3mFW9e5W59QXHUwMDFhuO6/jNR+vJrIcMxcdTAwMTT8/c/KP/9cdTAwMDeoXHUwMDAzMlx1MDAwNiJ9 App()Container(    id=\"dialog\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")events.Key(key=\"T\")events.Key(key=\"T\")events.Key(key=\"T\")bubble <p>The App class is always the root of the DOM, so there is nowhere for the event to bubble to.</p>"},{"location":"guide/events/#stopping-bubbling","title":"Stopping bubbling","text":"<p>Event handlers may stop this bubble behavior by calling the stop() method on the event or message. You might want to do this if a widget has responded to the event in an authoritative way. For instance when a text input widget responds to a key event it stops the bubbling so that the key doesn't also invoke a key binding.</p>"},{"location":"guide/events/#custom-messages","title":"Custom messages","text":"<p>You can create custom messages for your application that may be used in the same way as events (recall that events are simply messages reserved for use by Textual).</p> <p>The most common reason to do this is if you are building a custom widget and you need to inform a parent widget about a state change.</p> <p>Let's look at an example which defines a custom message. The following example creates color buttons which\u2014when clicked\u2014send a custom message.</p> custom01.pyOutput custom01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.message import Message\nfrom textual.widgets import Static\n\n\nclass ColorButton(Static):\n    \"\"\"A color button.\"\"\"\n\n    class Selected(Message):\n        \"\"\"Color selected message.\"\"\"\n\n        def __init__(self, color: Color) -&gt; None:\n            self.color = color\n            super().__init__()\n\n    def __init__(self, color: Color) -&gt; None:\n        self.color = color\n        super().__init__()\n\n    def on_mount(self) -&gt; None:\n        self.styles.margin = (1, 2)\n        self.styles.content_align = (\"center\", \"middle\")\n        self.styles.background = Color.parse(\"#ffffff33\")\n        self.styles.border = (\"tall\", self.color)\n\n    def on_click(self) -&gt; None:\n        # The post_message method sends an event to be handled in the DOM\n        self.post_message(self.Selected(self.color))\n\n    def render(self) -&gt; str:\n        return str(self.color)\n\n\nclass ColorApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ColorButton(Color.parse(\"#008080\"))\n        yield ColorButton(Color.parse(\"#808000\"))\n        yield ColorButton(Color.parse(\"#E9967A\"))\n        yield ColorButton(Color.parse(\"#121212\"))\n\n    def on_color_button_selected(self, message: ColorButton.Selected) -&gt; None:\n        self.screen.styles.animate(\"background\", message.color, duration=0.5)\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <p> ColorApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(0,\u00a0128,\u00a0128)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(128,\u00a0128,\u00a00)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(233,\u00a0150,\u00a0122)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(18,\u00a018,\u00a018)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the custom message class which extends Message. The constructor stores a color object which handler methods will be able to inspect.</p> <p>The message class is defined within the widget class itself. This is not strictly required but recommended, for these reasons:</p> <ul> <li>It reduces the amount of imports. If you import <code>ColorButton</code>, you have access to the message class via <code>ColorButton.Selected</code>.</li> <li>It creates a namespace for the handler. So rather than <code>on_selected</code>, the handler name becomes <code>on_color_button_selected</code>. This makes it less likely that your chosen name will clash with another message.</li> </ul>"},{"location":"guide/events/#sending-messages","title":"Sending messages","text":"<p>To send a message call the post_message() method. This will place a message on the widget's message queue and run any message handlers.</p> <p>It is common for widgets to send messages to themselves, and allow them to bubble. This is so a base class has an opportunity to handle the message. We do this in the example above, which means a subclass could add a <code>on_color_button_selected</code> if it wanted to handle the message itself.</p>"},{"location":"guide/events/#preventing-messages","title":"Preventing messages","text":"<p>You can temporarily disable posting of messages of a particular type by calling prevent, which returns a context manager (used with Python's <code>with</code> keyword). This is typically used when updating data in a child widget and you don't want to receive notifications that something has changed.</p> <p>The following example will play the terminal bell as you type. It does this by handling Input.Changed and calling bell(). There is a Clear button which sets the input's value to an empty string. This would normally also result in a <code>Input.Changed</code> event being sent (and the bell playing). Since we don't want the button to make a sound, the assignment to <code>value</code> is wrapped within a prevent context manager.</p> <p>Tip</p> <p>In reality, playing the terminal bell as you type would be very irritating -- we don't recommend it!</p> prevent.pyOutput prevent.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button, Input\n\n\nclass PreventApp(App):\n    \"\"\"Demonstrates `prevent` context manager.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input()\n        yield Button(\"Clear\", id=\"clear\")\n\n    def on_button_pressed(self) -&gt; None:\n        \"\"\"Clear the text input.\"\"\"\n        input = self.query_one(Input)\n        with input.prevent(Input.Changed):  # (1)!\n            input.value = \"\"\n\n    def on_input_changed(self) -&gt; None:\n        \"\"\"Called as the user types.\"\"\"\n        self.bell()  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = PreventApp()\n    app.run()\n</code></pre> <ol> <li>Clear the input without sending an Input.Changed event.</li> <li>Plays the terminal sound when typing.</li> </ol> <p> PreventApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Clear\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/events/#message-handlers","title":"Message handlers","text":"<p>Most of the logic in a Textual app will be written in message handlers. Let's explore handlers in more detail.</p>"},{"location":"guide/events/#handler-naming","title":"Handler naming","text":"<p>Textual uses the following scheme to map messages classes on to a Python method.</p> <ul> <li>Start with <code>\"on_\"</code>.</li> <li>Add the message's namespace (if any) converted from CamelCase to snake_case plus an underscore <code>\"_\"</code>.</li> <li>Add the name of the class converted from CamelCase to snake_case.</li> </ul> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaa0/byFx1MDAxYf7eX1x1MDAxMeV8OStcdTAwMTV37pdKq1x1MDAxNbC0hZSKXHUwMDE2SludripjT1x1MDAxMlx1MDAxN8c29oTLVvz3845cdLGdXHUwMDFiJFx1MDAwNJaNXHUwMDA0iWcm9ut3nud5L86vXHUwMDE3rVbbXmWm/brVNpeBXHUwMDFmR2HuX7RfuvFzk1x1MDAxN1GawFx1MDAxNCmPi3SYXHUwMDA35cq+tVnx+tWrgZ+fXHUwMDFhm8V+YLzzqFx1MDAxOPpxYYdhlHpBOnhcdTAwMTVZMyj+cP8/+Fx1MDAwM/N7llx1MDAwZUKbe9VFNkxcdTAwMTjZNL+5lonNwCS2gLP/XHUwMDBmjlutX+X/mnW5XHSsn/RiU36hnKpcZqSMT45+SJPSWEyEIEghQcYrouJPuJ41IUx3wWZTzbih9uHRWXbGf36Sxu/wY3HOWYfH1WW7UVx1MDAxY1x1MDAxZtqruDSrSOFuqrnC5ump+Vx1MDAxMoW27649MT7+VuhcdTAwMTd9U/tanlx1MDAwZXv9xFx1MDAxNO7+0Xg0zfwgslfuRKhcdTAwMWG9cUJ93WXpXHUwMDAx5mkqJEOSY0mVqlx1MDAxY+JOQFx1MDAxNfVcdTAwMTRiWlx1MDAxMy2xkpLwXHTTttNcdTAwMTj2XHUwMDAyTPtcdTAwMGYqX5VtJ35w2lx1MDAwM1x1MDAwM5OwWtP1OeHg2GrVxeiWufaI1FIqxqjQRHAxXtI3Ua9vYVxymMqphlx1MDAxZKlcdTAwMTlhyt2QREmMqVx1MDAxYY+7XHUwMDBiZ7thiYu/Jr3Z9/Ns5LR2aWDNaHe4U1x1MDAwM1X15WFcdTAwMTb6N3uPhaCMYiYwl3Q8XHUwMDFmR8kpTCbDOK7G0uC0gks5ev1yXHUwMDA1nHIh5uGUaoKpVETcXHUwMDFiprvKbH3K2LtT8/VL9mZjiFx1MDAwZnW8/8xhypDwsFx1MDAwMjcgXHUwMDAxb0hKOVx1MDAwMVPmwYZIqplmgmPxIJRicqKUmIVSgpCHXHUwMDA1lkpywrRAWC2DUsw1sEgyjNaP09FEXHUwMDA1rNqGZ2pPXHUwMDA1vv3z8it786M3/FZcdTAwMWO9XHUwMDFkRuNzNVDo53l60Vx1MDAxZc9cXI8+zWdcdTAwMDHilMHNPlx0XHUwMDBiXHUwMDE0V/NYoCRBVFx1MDAwYszuzYKtg86eke92XHUwMDBlXHUwMDA2W+Kk0z00XHUwMDE355vZM2eBQMqTXHUwMDFjIaEoXHUwMDA1KFwiPEVcdTAwMDLFXGIjXHUwMDFhlNyJwsNYwFx1MDAwMmG6fFx1MDAxNlx1MDAwYjDhXHUwMDFlgFx1MDAxOPM6xu+Bf65cdTAwMTQhgj6GTC+C//bnz2FHXuxcdTAwMDdcdTAwMWb3tnl+2T/svDtGa4M/k6qGulx1MDAwN8Lfmks7XHUwMDBi+Vx1MDAxOOm5XHUwMDAxXHUwMDAwXHUwMDEyXHUwMDE1XGKcXGYtgX1fXHUwMDFl51x1MDAwN/tZxFx1MDAwZtOf4uJIbnx7n+C1Yn/iW3Xo45WgT1x1MDAxMfVcdTAwMTjSWiHIWIRqyj+XIMtcdTAwMWMxqTlnXHUwMDFhXHUwMDA06bGAr+g03jmaxLnETElIY8TyOC/cwYo4XHUwMDE3Nk63szOqTj7GfPPqfNOc7H5dXHUwMDEzzlx0oYIqslx1MDAwNM4rNKWJPYz+NmX4bIy+8Vx1MDAwN1F81YBESVx1MDAwMDBw3z81Rcv2TWtgbD9ccr8nPnwqXG6/Z1p9P1x0Y5PXN7EwYJC7XHUwMDAyo41TbcZRz/GnXHUwMDFkm26TWDaCemI8bdOa01x1MDAwMzDNh9Plu+HkLaZ51ItcdTAwMTI/PlrCzJVcYi/lXFy+Q6AjIFx1MDAwN7yWRdzF9zefd97KLOb9y1x1MDAxZPb+7eCg8377p37efGeMe1x1MDAwNFx1MDAwM6khmDHBVDPUQcrhQSjhXHUwMDA0SSYg4j1apNOVqC4gPKFgiUtcdTAwMGKflvCPmddcdTAwMTFcdTAwMDI7oKpcdTAwMWJ6dMKPWJNAzV9cdTAwMDBOzPfkv+nQmrxcdTAwMTXEflH8tlx1MDAxNNtcdTAwMDPwXl0g1sf3u6xcXInsXHUwMDAyycnRMdlcdTAwMTXVUNjo+3M97n56XHUwMDFmn3X2985+fOufpztcdTAwMWaO9o7X24RYO9dcdTAwMDUlnlx1MDAwMFx1MDAxYbuyTihBmlxc54J6RFx1MDAxMq2g2Fx1MDAwNtFTXHUwMDBm60As4DqrrruA61hLXHJ/XHUwMDFjVcHwScj+mFksRHdcdTAwMDVC+2Rkd429Vtr9ntzGypI9z4Pic2xbSOxcdTAwMWKHz6pYiZ5cdTAwMWO9ZTaTpKyH7t9eXFyc3y3BbDKJ0Vx1MDAxNZkt70zahfa05sQ1ypieiOGcS09Csq6ohDBcdTAwMGbEnsvrUDOFuqtXq641XHUwMDA0nlaUKC2FnNFZxIR6XHUwMDFhMSpcdTAwMTVcdTAwMThcdTAwMDJcdTAwMDU0q1x1MDAwNPm2duVQ5nGxXHUwMDAy6VfvMN4k3ct0XHUwMDE4a3b4ud2KkjBKejBZ6cltx3z3XHUwMDFlhWBJ5GDorNxAXHUwMDFlRYxzjClcdTAwMTJQ84Jtsras52cjT3NcdTAwMDFcdTAwMWJcdTAwMGVBS1x1MDAxM4bxaMH12CyThHdcdTAwMWLV/Vx1MDAxNvTzqyP68biTXHUwMDExxTa2gy8mnmVcdTAwMTTyXHUwMDE0XHUwMDE4xFx1MDAxMFx1MDAxNH1cdTAwMTIkWVA9bVx1MDAxMvdcdTAwMTBsLFx1MDAxM6497HrYesomoLfdTlx1MDAwN4PIgu9cdTAwMGbSKLGTPi6duek43jf+lIDAPdXnJsUgc2dsqnv1qVVcdTAwMTGmPFx1MDAxOH/+6+XM1fOx7F5cdTAwMWLTMK5O+KL+vrSQQVx1MDAxMEeTw5WSXHTYdCnv339YnLg+RyXjWHuuv4ggzVx1MDAwN6+z6sJlOaKQx6FcIlx1MDAwM4oghvWChyQ80FxmhatKXHUwMDE5XHUwMDA1XHUwMDFiXHUwMDE4p5hcbsY10bXYUXXfqMcoXHUwMDE0RIpgxFx1MDAxMVx1MDAxMzVVXHUwMDFk5S+YKIFcdTAwMTnI8dNKXHUwMDE5g1x1MDAwZlUwXFy/lC2ucZtS5kpoTDjDXG70SkheY9FINzQkpJhqXHUwMDA0rlx1MDAwNDditpqSLX7S0rRcdEmCXHUwMDA1lLRKYoqRXHUwMDE0fMomXHUwMDA1abBEXHUwMDAyYVxydkGWPG3Uv0nKNuaCuZydwvHalIyrudVcdTAwMTZWIJ5Y1blxl5QtTsv/XHUwMDAxKVN3VltaeKrsW0OgRnDHXHUwMDEzWZlcdTAwMDAoUijFXHUwMDFj7sX8xlxubFs3kKsqXHUwMDE5cTVcdTAwMWRkN1x1MDAxYVx1MDAwNFWDINVcdTAwMTKuKinDwnNSi7iCilx1MDAwYik5lZRp95iB1DvfT5OVrVos3VPKXHUwMDE2l/CNXHUwMDA0XGLCsqZcXFNcbuVcdTAwMDSkZOCQXHUwMDFhjUa6IT1QXGbwn1x1MDAwMGAzwlx1MDAxOF1NzFx1MDAxNj8wa1olmGBaXHUwMDBipIWSkFxyztJXXHL7XHUwMDBmlTSDRIVCMf3v1rL5cC6np5G8pJrN61x1MDAxY1x1MDAxMTz3iSiBbFx1MDAwNMKJXFyidbQ48W5qWd9cdTAwMGb6w9zMU7N1NY/0nSUmV56mXHUwMDAwJii1QdpcdTAwMTVrylx1MDAxOVXSQ1gypLSm5IE/XGawuZ9cdTAwMTSZn1x1MDAwMyVm5GZcdTAwMTJcIlx1MDAxNilcdTAwMDFfnmlGbkaxJ1x1MDAxNSbAjNGrZs2oyoRbgJJ4lVx1MDAxZlxiPNcnR5hJcEu1tyv2loTHXHUwMDE0XHUwMDE0Nje+hZdsrFx1MDAxYfeamt1cImdwmvxcYtxcdTAwMDb+OFx1MDAxOVpcdTAwMGJcdTAwMDdcdTAwMDVQILCmkYOPu02Ez92hp3icNNfWXHUwMDE3t74u/dz2s+zQgpfHalxyMInCkauqK7TPI3OxNetnWOXLnbVcdTAwMTRcdTAwMWPHbONA8uv6xfX/XHUwMDAx2ibQXHUwMDAzIn0= Makes the methoda message handlerMessage namespace(outer class)Name ofmessage classon_color_button_selected <p>Messages have a namespace if they are defined as a child class of a Widget. The namespace is the name of the parent class. For instance, the builtin <code>Input</code> class defines its <code>Changed</code> message as follows:</p> <pre><code>class Input(Widget):\n    ...\n    class Changed(Message):\n        \"\"\"Posted when the value changes.\"\"\"\n        ...\n</code></pre> <p>Because <code>Changed</code> is a child class of <code>Input</code>, its namespace will be \"input\" (and the handler name will be <code>on_input_changed</code>). This allows you to have similarly named events, without clashing event handler names.</p> <p>Tip</p> <p>If you are ever in doubt about what the handler name should be for a given event, print the <code>handler_name</code> class variable for your event class.</p> <p>Here's how you would check the handler name for the <code>Input.Changed</code> event:</p> <pre><code>&gt;&gt;&gt; from textual.widgets import Input\n&gt;&gt;&gt; Input.Changed.handler_name\n'on_input_changed'\n</code></pre>"},{"location":"guide/events/#on-decorator","title":"On decorator","text":"<p>In addition to the naming convention, message handlers may be created with the <code>on</code> decorator, which turns a method into a handler for the given message or event.</p> <p>For instance, the two methods declared below are equivalent:</p> <pre><code>@on(Button.Pressed)\ndef handle_button_pressed(self):\n    ...\n\ndef on_button_pressed(self):\n    ...\n</code></pre> <p>While this allows you to name your method handlers anything you want, the main advantage of the decorator approach over the naming convention is that you can specify which widget(s) you want to handle messages for.</p> <p>Let's first explore where this can be useful. In the following example we have three buttons, each of which does something different; one plays the bell, one toggles dark mode, and the other quits the app.</p> on_decorator01.pyon_decorator.tcssOutput on_decorator01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:  # (1)!\n        \"\"\"Handle all button pressed events.\"\"\"\n        if event.button.id == \"bell\":\n            self.bell()\n        elif event.button.has_class(\"toggle\", \"dark\"):\n            self.dark = not self.dark\n        elif event.button.id == \"quit\":\n            self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>The message handler is called when any button is pressed</li> </ol> on_decorator.tcss<pre><code>Screen {\n    align: center middle;\n    layout: horizontal;\n}\n\nButton {\n    margin: 2 4;\n}\n</code></pre> <p> OnDecoratorApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Bell\u00a0\u00a0Toggle\u00a0dark\u00a0\u00a0Quit\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Note how the message handler has a chained <code>if</code> statement to match the action to the button. While this works just fine, it can be a little hard to follow when the number of buttons grows.</p> <p>The <code>on</code> decorator takes a CSS selector in addition to the event type which will be used to select which controls the handler should work with. We can use this to write a handler per control rather than manage them all in a single handler.</p> <p>The following example uses the decorator approach to write individual message handlers for each of the three buttons:</p> on_decorator02.pyon_decorator.tcssOutput on_decorator02.py<pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    @on(Button.Pressed, \"#bell\")  # (1)!\n    def play_bell(self):\n        \"\"\"Called when the bell button is pressed.\"\"\"\n        self.bell()\n\n    @on(Button.Pressed, \".toggle.dark\")  # (2)!\n    def toggle_dark(self):\n        \"\"\"Called when the 'toggle dark' button is pressed.\"\"\"\n        self.dark = not self.dark\n\n    @on(Button.Pressed, \"#quit\")  # (3)!\n    def quit(self):\n        \"\"\"Called when the quit button is pressed.\"\"\"\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>Matches the button with an id of \"bell\" (note the <code>#</code> to match the id)</li> <li>Matches the button with class names \"toggle\" and \"dark\"</li> <li>Matches the button with an id of \"quit\"</li> </ol> on_decorator.tcss<pre><code>Screen {\n    align: center middle;\n    layout: horizontal;\n}\n\nButton {\n    margin: 2 4;\n}\n</code></pre> <p> OnDecoratorApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Bell\u00a0\u00a0Toggle\u00a0dark\u00a0\u00a0Quit\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>While there are a few more lines of code, it is clearer what will happen when you click any given button.</p> <p>Note that the decorator requires that the message class has a <code>control</code> property which should return the widget associated with the message. Messages from builtin controls will have this attribute, but you may need to add a <code>control</code> property to any custom messages you write.</p> <p>Note</p> <p>If multiple decorated handlers match the message, then they will all be called in the order they are defined.</p> <p>The naming convention handler will be called after any decorated handlers.</p>"},{"location":"guide/events/#applying-css-selectors-to-arbitrary-attributes","title":"Applying CSS selectors to arbitrary attributes","text":"<p>The <code>on</code> decorator also accepts selectors as keyword arguments that may be used to match other attributes in a Message, provided those attributes are in <code>Message.ALLOW_SELECTOR_MATCH</code>.</p> <p>The snippet below shows how to match the message <code>TabbedContent.TabActivated</code> only when the tab with id <code>home</code> was activated:</p> <pre><code>@on(TabbedContent.TabActivated, pane=\"#home\")\ndef home_tab(self) -&gt; None:\n    self.log(\"Switched back to home tab.\")\n    ...\n</code></pre>"},{"location":"guide/events/#handler-arguments","title":"Handler arguments","text":"<p>Message handler methods can be written with or without a positional argument. If you add a positional argument, Textual will call the handler with the event object. The following handler (taken from <code>custom01.py</code> above) contains a <code>message</code> parameter. The body of the code makes use of the message to set a preset color.</p> <pre><code>    def on_color_button_selected(self, message: ColorButton.Selected) -&gt; None:\n        self.screen.styles.animate(\"background\", message.color, duration=0.5)\n</code></pre> <p>A similar handler can be written using the decorator <code>on</code>:</p> <pre><code>    @on(ColorButton.Selected)\n    def animate_background_color(self, message: ColorButton.Selected) -&gt; None:\n        self.screen.styles.animate(\"background\", message.color, duration=0.5)\n</code></pre> <p>If the body of your handler doesn't require any information in the message you can omit it from the method signature. If we just want to play a bell noise when the button is clicked, we could write our handler like this:</p> <pre><code>    def on_color_button_selected(self) -&gt; None:\n        self.app.bell()\n</code></pre> <p>This pattern is a convenience that saves writing out a parameter that may not be used.</p>"},{"location":"guide/events/#async-handlers","title":"Async handlers","text":"<p>Message handlers may be coroutines. If you prefix your handlers with the <code>async</code> keyword, Textual will <code>await</code> them. This lets your handler use the <code>await</code> keyword for asynchronous APIs.</p> <p>If your event handlers are coroutines it will allow multiple events to be processed concurrently, but bear in mind an individual widget (or app) will not be able to pick up a new message from its message queue until the handler has returned. This is rarely a problem in practice; as long as handlers return within a few milliseconds the UI will remain responsive. But slow handlers might make your app hard to use.</p> <p>Info</p> <p>To re-use the chef analogy, if an order comes in for beef wellington (which takes a while to cook), orders may start to pile up and customers may have to wait for their meal. The solution would be to have another chef work on the wellington while the first chef picks up new orders.</p> <p>Network access is a common cause of slow handlers. If you try to retrieve a file from the internet, the message handler may take anything up to a few seconds to return, which would prevent the widget or app from updating during that time. The solution is to launch a new asyncio task to do the network task in the background.</p> <p>Let's look at an example which looks up word definitions from an api as you type.</p> <p>Note</p> <p>You will need to install httpx with <code>pip install httpx</code> to run this example.</p> dictionary.pydictionary.tcssOutput dictionary.py<pre><code>import asyncio\n\ntry:\n    import httpx\nexcept ImportError:\n    raise ImportError(\"Please install httpx with 'pip install httpx' \")\n\nfrom rich.json import JSON\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass DictionaryApp(App):\n    \"\"\"Searches a dictionary API as-you-type.\"\"\"\n\n    CSS_PATH = \"dictionary.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Search for a word\")\n        yield VerticalScroll(Static(id=\"results\"), id=\"results-container\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"A coroutine to handle a text changed message.\"\"\"\n        if message.value:\n            # Look up the word in the background\n            asyncio.create_task(self.lookup_word(message.value))\n        else:\n            # Clear the results\n            self.query_one(\"#results\", Static).update()\n\n    async def lookup_word(self, word: str) -&gt; None:\n        \"\"\"Looks up a word.\"\"\"\n        url = f\"https://api.dictionaryapi.dev/api/v2/entries/en/{word}\"\n        async with httpx.AsyncClient() as client:\n            results = (await client.get(url)).text\n\n        if word == self.query_one(Input).value:\n            self.query_one(\"#results\", Static).update(JSON(results))\n\n\nif __name__ == \"__main__\":\n    app = DictionaryApp()\n    app.run()\n</code></pre> dictionary.tcss<pre><code>Screen {\n    background: $panel;\n}\n\nInput {\n    dock: top;\n    width: 100%;\n    height: 1;\n    padding: 0 1;\n    margin: 1 1 0 1;\n}\n\n#results {\n    width: auto;\n    min-height: 100%;\n}\n\n#results-container {\n    background: $background 50%;\n    overflow: auto;\n    margin: 1 2;\n    height: 100%;\n}\n</code></pre> <p> DictionaryApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the highlighted line in the above code which calls <code>asyncio.create_task</code> to run a coroutine in the background. Without this you would find typing in to the text box to be unresponsive.</p>"},{"location":"guide/input/","title":"Input","text":"<p>This chapter will discuss how to make your app respond to input in the form of key presses and mouse actions.</p> <p>Quote</p> <p>More Input!</p> <p>\u2014 Johnny Five</p>"},{"location":"guide/input/#keyboard-input","title":"Keyboard input","text":"<p>The most fundamental way to receive input is via Key events which are sent to your app when the user presses a key. Let's write an app to show key events as you type.</p> key01.pyOutput key01.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\n\nclass InputApp(App):\n    \"\"\"App to display key events.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog()\n\n    def on_key(self, event: events.Key) -&gt; None:\n        self.query_one(RichLog).write(event)\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> <p> InputApp Key(key='T',\u00a0character='T',\u00a0name='upper_t',\u00a0is_printable=True) Key(key='e',\u00a0character='e',\u00a0name='e',\u00a0is_printable=True) Key(key='x',\u00a0character='x',\u00a0name='x',\u00a0is_printable=True) Key(key='t',\u00a0character='t',\u00a0name='t',\u00a0is_printable=True) Key(key='u',\u00a0character='u',\u00a0name='u',\u00a0is_printable=True) Key(key='a',\u00a0character='a',\u00a0name='a',\u00a0is_printable=True) Key(key='l',\u00a0character='l',\u00a0name='l',\u00a0is_printable=True) Key( key='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 character='!',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 is_printable=True ) </p> <p>When you press a key, the app will receive the event and write it to a RichLog widget. Try pressing a few keys to see what happens.</p> <p>Tip</p> <p>For a more feature rich version of this example, run <code>textual keys</code> from the command line.</p>"},{"location":"guide/input/#key-event","title":"Key Event","text":"<p>The key event contains the following attributes which your app can use to know how to respond.</p>"},{"location":"guide/input/#key","title":"key","text":"<p>The <code>key</code> attribute is a string which identifies the key that was pressed. The value of <code>key</code> will be a single character for letters and numbers, or a longer identifier for other keys.</p> <p>Some keys may be combined with the Shift key. In the case of letters, this will result in a capital letter as you might expect. For non-printable keys, the <code>key</code> attribute will be prefixed with <code>shift+</code>. For example, Shift+Home will produce an event with <code>key=\"shift+home\"</code>.</p> <p>Many keys can also be combined with Ctrl which will prefix the key with <code>ctrl+</code>. For instance, Ctrl+P will produce an event with <code>key=\"ctrl+p\"</code>.</p> <p>Warning</p> <p>Not all keys combinations are supported in terminals and some keys may be intercepted by your OS. If in doubt, run <code>textual keys</code> from the command line.</p>"},{"location":"guide/input/#character","title":"character","text":"<p>If the key has an associated printable character, then <code>character</code> will contain a string with a single Unicode character. If there is no printable character for the key (such as for function keys) then <code>character</code> will be <code>None</code>.</p> <p>For example the P key will produce <code>character=\"p\"</code> but F2 will produce <code>character=None</code>.</p>"},{"location":"guide/input/#name","title":"name","text":"<p>The <code>name</code> attribute is similar to <code>key</code> but, unlike <code>key</code>, is guaranteed to be valid within a Python function name. Textual derives <code>name</code> from the <code>key</code> attribute by lower casing it and replacing <code>+</code> with <code>_</code>. Upper case letters are prefixed with <code>upper_</code> to distinguish them from lower case names.</p> <p>For example, Ctrl+P produces <code>name=\"ctrl_p\"</code> and Shift+P produces <code>name=\"upper_p\"</code>.</p>"},{"location":"guide/input/#is_printable","title":"is_printable","text":"<p>The <code>is_printable</code> attribute is a boolean which indicates if the key would typically result in something that could be used in an input widget. If <code>is_printable</code> is <code>False</code> then the key is a control code or function key that you wouldn't expect to produce anything in an input.</p>"},{"location":"guide/input/#aliases","title":"aliases","text":"<p>Some keys or combinations of keys can produce the same event. For instance, the Tab key is indistinguishable from Ctrl+I in the terminal. For such keys, Textual events will contain a list of the possible keys that may have produced this event. In the case of Tab, the <code>aliases</code> attribute will contain <code>[\"tab\", \"ctrl+i\"]</code></p>"},{"location":"guide/input/#key-methods","title":"Key methods","text":"<p>Textual offers a convenient way of handling specific keys. If you create a method beginning with <code>key_</code> followed by the key name (the event's <code>name</code> attribute), then that method will be called in response to the key press.</p> <p>Let's add a key method to the example code.</p> key02.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\n\nclass InputApp(App):\n    \"\"\"App to display key events.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog()\n\n    def on_key(self, event: events.Key) -&gt; None:\n        self.query_one(RichLog).write(event)\n\n    def key_space(self) -&gt; None:\n        self.bell()\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> <p>Note the addition of a <code>key_space</code> method which is called in response to the space key, and plays the terminal bell noise.</p> <p>Note</p> <p>Consider key methods to be a convenience for experimenting with Textual features. In nearly all cases, key bindings and actions are preferable.</p>"},{"location":"guide/input/#input-focus","title":"Input focus","text":"<p>Only a single widget may receive key events at a time. The widget which is actively receiving key events is said to have input focus.</p> <p>The following example shows how focus works in practice.</p> key03.pykey03.tcssOutput key03.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\n\nclass KeyLogger(RichLog):\n    def on_key(self, event: events.Key) -&gt; None:\n        self.write(event)\n\n\nclass InputApp(App):\n    \"\"\"App to display key events.\"\"\"\n\n    CSS_PATH = \"key03.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield KeyLogger()\n        yield KeyLogger()\n        yield KeyLogger()\n        yield KeyLogger()\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> key03.tcss<pre><code>Screen {\n    layout: grid;\n    grid-size: 2 2;\n    grid-columns: 1fr;\n}\n\nKeyLogger {\n    border: blank;\n}\n\nKeyLogger:hover {\n    border: wide $secondary;\n}\n\nKeyLogger:focus {\n    border: wide $accent;\n}\n</code></pre> <p> InputApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Key(key='l',\u00a0character='l',\u00a0name='l'\u258eKey(key='r',\u00a0character='r',\u00a0name='r'\u258a Key(key='o',\u00a0character='o',\u00a0name='o'\u258eKey(key='l',\u00a0character='l',\u00a0name='l'\u2583\u2583\u258a Key(\u2586\u2586\u258eKey(key='d',\u00a0character='d',\u00a0name='d'\u258a key='tab',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258eKey(\u258a character='\\t',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258ekey='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a name='tab',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258echaracter='!',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a is_printable=False,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258ename='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a aliases=['tab',\u00a0'ctrl+i']\u258eis_printable=True\u258a )\u258e)\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>The app splits the screen in to quarters, with a <code>RichLog</code> widget in each quarter. If you click any of the text logs, you should see that it is highlighted to show that the widget has focus. Key events will be sent to the focused widget only.</p> <p>Tip</p> <p>the <code>:focus</code> CSS pseudo-selector can be used to apply a style to the focused widget.</p> <p>You can move focus by pressing the Tab key to focus the next widget. Pressing Shift+Tab moves the focus in the opposite direction.</p>"},{"location":"guide/input/#controlling-focus","title":"Controlling focus","text":"<p>Textual will handle keyboard focus automatically, but you can tell Textual to focus a widget by calling the widget's focus() method.</p>"},{"location":"guide/input/#focus-events","title":"Focus events","text":"<p>When a widget receives focus, it is sent a Focus event. When a widget loses focus it is sent a Blur event.</p>"},{"location":"guide/input/#bindings","title":"Bindings","text":"<p>Keys may be associated with actions for a given widget. This association is known as a key binding.</p> <p>To create bindings, add a <code>BINDINGS</code> class variable to your app or widget. This should be a list of tuples of three strings. The first value is the key, the second is the action, the third value is a short human readable description.</p> <p>The following example binds the keys R, G, and B to an action which adds a bar widget to the screen.</p> binding01.pybinding01.tcssOutput binding01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.widgets import Footer, Static\n\n\nclass Bar(Static):\n    pass\n\n\nclass BindingApp(App):\n    CSS_PATH = \"binding01.tcss\"\n    BINDINGS = [\n        (\"r\", \"add_bar('red')\", \"Add Red\"),\n        (\"g\", \"add_bar('green')\", \"Add Green\"),\n        (\"b\", \"add_bar('blue')\", \"Add Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Footer()\n\n    def action_add_bar(self, color: str) -&gt; None:\n        bar = Bar(color)\n        bar.styles.background = Color.parse(color).with_alpha(0.5)\n        self.mount(bar)\n        self.call_after_refresh(self.screen.scroll_end, animate=False)\n\n\nif __name__ == \"__main__\":\n    app = BindingApp()\n    app.run()\n</code></pre> binding01.tcss<pre><code>Bar {\n    height: 5;\n    content-align: center middle;\n    text-style: bold;\n    margin: 1 2;\n    color: $text;\n}\n</code></pre> <p> BindingApp red\u2582\u2582 green blue blue \u00a0r\u00a0Add\u00a0Red\u00a0\u00a0g\u00a0Add\u00a0Green\u00a0\u00a0b\u00a0Add\u00a0Blue\u00a0\u258f^p\u00a0palette </p> <p>Note how the footer displays bindings and makes them clickable.</p> <p>Tip</p> <p>Multiple keys can be bound to a single action by comma-separating them. For example, <code>(\"r,t\", \"add_bar('red')\", \"Add Red\")</code> means both R and T are bound to <code>add_bar('red')</code>.</p>"},{"location":"guide/input/#binding-class","title":"Binding class","text":"<p>The tuple of three strings may be enough for simple bindings, but you can also replace the tuple with a Binding instance which exposes a few more options.</p>"},{"location":"guide/input/#priority-bindings","title":"Priority bindings","text":"<p>Individual bindings may be marked as a priority, which means they will be checked prior to the bindings of the focused widget. This feature is often used to create hot-keys on the app or screen. Such bindings can not be disabled by binding the same key on a widget.</p> <p>You can create priority key bindings by setting <code>priority=True</code> on the Binding object. Textual uses this feature to add a default binding for Ctrl+C so there is always a way to exit the app. Here's the bindings from the App base class. Note the first binding is set as a priority:</p> <pre><code>    BINDINGS = [\n        Binding(\"ctrl+c\", \"quit\", \"Quit\", show=False, priority=True),\n        Binding(\"tab\", \"focus_next\", \"Focus Next\", show=False),\n        Binding(\"shift+tab\", \"focus_previous\", \"Focus Previous\", show=False),\n    ]\n</code></pre>"},{"location":"guide/input/#show-bindings","title":"Show bindings","text":"<p>The footer widget can inspect bindings to display available keys. If you don't want a binding to display in the footer you can set <code>show=False</code>. The default bindings on App do this so that the standard Ctrl+C, Tab and Shift+Tab bindings don't typically appear in the footer.</p>"},{"location":"guide/input/#mouse-input","title":"Mouse Input","text":"<p>Textual will send events in response to mouse movement and mouse clicks. These events contain the coordinates of the mouse cursor relative to the terminal or widget.</p> <p>Information</p> <p>The trackpad (and possibly other pointer devices) are treated the same as the mouse in terminals.</p> <p>Terminal coordinates are given by a pair values named <code>x</code> and <code>y</code>. The X coordinate is an offset in characters, extending from the left to the right of the screen. The Y coordinate is an offset in lines, extending from the top of the screen to the bottom.</p> <p>Coordinates may be relative to the screen, so <code>(0, 0)</code> would be the top left of the screen. Coordinates may also be relative to a widget, where <code>(0, 0)</code> would be the top left of the widget itself.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1ba0/bSFx1MDAxNP3eX1x1MDAxMaVfdqUynfej0mpcdTAwMDVcdTAwMDGaQHktXHUwMDAxXG6rVeUmTmxw7GA7XHUwMDA0qPjve+1A7DxcdKHJhlXzXHUwMDAxyIxcdTAwMWbXM+ecOfeO+fGuUCjGd227+KlQtG9rlufWQ6tb/JC039hh5Fx1MDAwNj500fR7XHUwMDE0dMJaeqRcdTAwMTPH7ejTx48tK7yy47Zn1Wx040ZcdTAwMWTLi+JO3VxyUC1ofXRju1x1MDAxNf2Z/Ny3WvZcdTAwMWbtoFWPQ5TdZM2uu3FcdTAwMTD27mV7dsv241xirv43fC9cdTAwMTR+pD9z0YV2Lbb8pmenJ6RdWYBcdTAwMDRcdTAwMTM63LxcdTAwMWb4abREcIO1xFxc9I9wo024YWzXobtcdTAwMDFB21lP0lRcXN/ddcqh3GlFe7dcdTAwMDd1p4nXP5Nqdt+G63nH8Z2XxlVcdTAwMGKDKFpzrLjmZEdEcVx1MDAxOFxc2WduPXaehi/X3j83XG5gKLKzwqDTdHw7SkaB9FuDtlVz47v0KXG/tTdcdTAwMTSfXG5Zyy18Y1xcIS1cdTAwMTVcdTAwMTFEsuShs0dOzqdKIK2l4ZphTnVuQHpxlVx1MDAwMlx1MDAwZuZcdTAwMDPieo/TT1x1MDAxNtl3q3bVhPD8ev+YOLT8qG2FMGvZcd3HJ1x1MDAxNpwjySjjXGZcdTAwMGJCSHYjx3abTpxEKjHSXHUwMDA0XHUwMDFiziVjgmgqs2DsdGKMVIJjzni/I4mgXamnIPlneExcdTAwMWQrbD+OXTFKvuSiT1x1MDAwMt/KISw7udOuWz1cdTAwMWNcdTAwMTApOVFKJSGpfr/n+lfQ6Xc8L2tcdTAwMGJqV1x1MDAxOXTS1odcdTAwMGZzgFZRPFx0s1RcdTAwMWKYKMrUzJC9pXW+tS3Pr02zVbnc2zrnNz6ZXHUwMDAw2SHY/ZdgXHUwMDE1XHUwMDE4XHUwMDBiLFx1MDAxODbKaDlcdTAwMDJWhinBXG5LSoyii0QrQ5hIQbVQRFx1MDAxOaVH4Uo1klx1MDAxMjNcdTAwMGU6QiVcdTAwMDNoj8BVSmNcYjVcdTAwMDS/Ybjanue2o7FglUJMXHUwMDAyq1x1MDAxMdhcYi3MzFg9XzPfhFPdPmp2tXdcdTAwMTFEe/5e4/M8WCXLw6owiFx1MDAxOclcdTAwMTnAQ1x1MDAxYWL0IFa1QEJcdTAwMDEoXHUwMDE4pVx1MDAxOGuB+Wuw+r5hXHQq6ChOXHRDXHUwMDFjUyqMpPCLa81HgUooXHUwMDEyXHUwMDAwXHJcdTAwMDOaiiljNFx1MDAwN45HoFxuiFx1MDAxNEiVQ/D/XG6ocKOJToBcdTAwMTgjYU0hbGaofnXx93XiXHUwMDFj8Z3908PWXHUwMDA2/evM7norXHUwMDBlVS1cdTAwMTGjilx1MDAxOSap1ppcdTAwMTA1hFWOXHUwMDAwXHUwMDFjSmiDXHUwMDA11yQnu/Nh9TtI+KKwSlx1MDAxOSxcZkyI/6moKskmYlx1MDAxNVx1MDAxNlx1MDAxYWpcdTAwMTjFs2M12rwpy3W3s3dcdTAwMWWas9qFiNbL5Hi1scpJXHUwMDAyRlx1MDAwNoNONFx1MDAwMJaTIagypDBcdTAwMDYzZFx1MDAxOKgue5VcdTAwMDN4T+h38FSLQiphXHSjXHUwMDE4e8tItcIw6I5Nr9jExZ8rpjCTuVx1MDAwNfE5mKqD+0atpiW/3qVhyexcdTAwMTFIXHUwMDAzK1x1MDAxM2DqWDWnXHUwMDEz2v89UJlUSEkh6WBGxVx1MDAxOEFcdTAwMTgyLblAd4pcdTAwMTFVXG4yKTUmi5JitPNcdJDwUMJoMUf6lFx1MDAwNjcnILlcdTAwMDBcdTAwMWL9XHUwMDAyQObisMJ4w/Xrrt9cdTAwMWM+xfbrWc9cdTAwMTNsXHUwMDBi/apBpecqO9s7+5ub3Vx1MDAxM6dy24lOon1cdTAwMTmfZrhKkFx1MDAxNdQ6UTqghFx1MDAxOUHBrFx1MDAwM+UlOFx1MDAwMpI7qGm1XHUwMDEzVCNB01F97HjIoreiuFx1MDAxNLRablxmz31cdTAwMTi4fjxcdTAwMWNs+iDrXHSVXHUwMDFj26qPeZR83zDn2slcdTAwMTWzKkjyyf4qZKBMv/T//ufD2KPXRqGTfHKgya7wLv/7xVx1MDAwMqHkcGM/k4XEXG6QSNTsXHUwMDAyXHUwMDEx3G59bVxcnljd06tSuXFz0vWv/7pYfYGAXGZcdTAwMTFWMTUkXHUwMDEw1CDJsVx1MDAwNpVkXHUwMDFhw2rOhlwi+olZrEGQepixOkFcdTAwMTDBZEC9nlRCc2a4WrZMXHUwMDE4pvNcdP0yZeLwRl+FR+t39dYhO7mp4jiu7tTHy1x1MDAwNCZcdTAwMTTUjIO6q0RLiaa5w3pCQTCSvZF900oxip3ks9aHzVx1MDAwYnVcIrZv43EykUPZkExcYkGYJHmj/5xKTJ/HXHUwMDE1VVx0zjT43Vx1MDAwMY6mKkFcdTAwMDTSSi/WR+Sy3qysNSpcYlx1MDAwMGdcIlx1MDAxOPD051x1MDAxYtk+in7kQDaT6Fx1MDAwZqCrR4R+z8NcdTAwMTMkp7lcdTAwMTLKSTZjL5CbRuDHx+59byVcdTAwMWJo3bZarnc3gIRcdTAwMTT2SdEgP0mRXHK3SzM6PXDguuc2XHUwMDEzTlx1MDAxND27MUiW2K1ZXr87XHUwMDBlckNag1x1MDAxYltwubAyXCJcdTAwMTdB6DZd3/Kq/SDmoqiavI+iXHLVIIM4O+LZQt9US7aiXHUwMDFjXHUwMDA1XHUwMDFkQorgXHUwMDExknKMXHUwMDExJKl60Gz/bJJmsUwjqUnqO1xc5EzVUkg6PXVcdTAwMWLA1zwknTd1mIukd6tA0rvpJJ26fcTYRNMtlZGJY8mW2+eYKr/qzeq5+ra5xaPTXHUwMDFhoSdl91x1MDAxMs/H1OVtIFx0IdBwRs45RYxyOuDE5yps1pVNOOejXHUwMDFjZYlcdTAwMTCMddnSoLEuW1HCtFFkuVuZWsFgyFx1MDAxN1x1MDAxMGoqXHUwMDE2J+Z+Uk0sXHUwMDBlJU5CQs7D5cxA1MI76HSFdqtB6aLEq3LvXHUwMDFiu1xc9SVcdTAwMDOEXHUwMDE4XHQ96uu4ZFxic2rkK8G4iPpQsrPKwOjllvNlZH5cdTAwMWFzpfBcdTAwMGJA+fMyv/tNZ9uznS1TvdhVpVp5o0qP4tzq9atA9PhZQIFIYjXc2lx1MDAxN1x0WMhcYoXRnl0kqvbpl8P7vc+4XHUwMDFhhpVyffdr4/42Wn2RMIhcdTAwMWI6Ulwi4onfZJpqsshXXHUwMDFj5ilcdTAwMGVRXGYzwzWZx2a+TYnoVlx1MDAwZU7Lbjlyb732l42Se3h3fXw1oTiEXHUwMDA12Fx1MDAwM5gzpmBhXHUwMDE3ODd7hV/VodzDzpx6MjptN5Qkb4O9IPecPpUrqlx1MDAxMZKDg1SDfqHnalx1MDAxNdJcdTAwMGKWiNnqQzrZc9RCLcDK9mE0JvOcrvhcdTAwMDPwennmXHSCkzexv8pDUzia26JcdTAwMWbmqOGgXHUwMDExlJDZs87pjmxFOSpcdTAwMTRF4JuH8k7BKFqF0pDSsCwl3nS5/JyetlxyQGvl+flcdTAwMTYqQ5P4SfFEfjLNXHUwMDA1y7+g8lx1MDAxYztcdTAwMWT7vGxFYSm4a1xcXHUwMDFjXHUwMDFkXHUwMDE4vGNcImfl92HpSFxyJt1gwVx1MDAwNqnXloSeMdizsFx1MDAxM1wiXHUwMDEz4PfZkl++1FxmgzYtjUC/4Vx1MDAwZlx1MDAwNfz7KrDoMZK5qKRy7zRcctdXXHUwMDE5JpqJXHUwMDE3uNHKmXW4WflyXHUwMDE4XHUwMDFknYlcbrlukMvd49aqc4lrgyC/XHUwMDE53JZM7SjTi99cbpmRUZxcdTAwMWLMtDHLffFOU54vr/9iVGFcdTAwMTbzOHFt4jR5I1x1MDAwNM9eXHUwMDAxKlx1MDAxMa5cdTAwMGVD3N611i/3jsXJie9/2171/VxuqSmSckx6J4hChL9293/KloVcdTAwMWPzTutcdTAwMTguKYqTfzpcdTAwMTJcdTAwMGLYVpzGJVx1MDAwM7dd3upcdTAwMDTz3rTjVeDSYyQ9Lr17tMBFq90+jmGEik9lKphcdTAwMDS3/viY2fWKN67d3Vx1MDAxOIeC9JNcXDXlZ8JcdTAwMDU7mYJcdTAwMWZcdTAwMGbvXHUwMDFl/lx1MDAwNeEmVVx1MDAxOCJ9 XyXy(0, 0)(0, 0)Widget"},{"location":"guide/input/#mouse-movements","title":"Mouse movements","text":"<p>When you move the mouse cursor over a widget it will receive MouseMove events which contain the coordinate of the mouse and information about what modifier keys (Ctrl, Shift etc) are held down.</p> <p>The following example shows mouse movements being used to attach a widget to the mouse cursor.</p> mouse01.pymouse01.tcss mouse01.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog, Static\n\n\nclass Ball(Static):\n    pass\n\n\nclass MouseApp(App):\n    CSS_PATH = \"mouse01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog()\n        yield Ball(\"Textual\")\n\n    def on_mouse_move(self, event: events.MouseMove) -&gt; None:\n        self.screen.query_one(RichLog).write(event)\n        self.query_one(Ball).offset = event.screen_offset - (8, 2)\n\n\nif __name__ == \"__main__\":\n    app = MouseApp()\n    app.run()\n</code></pre> mouse01.tcss<pre><code>Screen {\n    layers: log ball;\n}\n\nRichLog {\n    layer: log;\n}\n\nBall {\n    layer: ball;\n    width: auto;\n    height: 1;\n    background: $secondary;\n    border: tall $secondary;\n    color: $background;\n    box-sizing: content-box;\n    text-style: bold;\n    padding: 0 4;\n}\n</code></pre> <p>If you run <code>mouse01.py</code> you should find that it logs the mouse move event, and keeps a widget pinned directly under the cursor.</p> <p>The <code>on_mouse_move</code> handler sets the offset style of the ball (a rectangular one) to match the mouse coordinates.</p>"},{"location":"guide/input/#mouse-capture","title":"Mouse capture","text":"<p>In the <code>mouse01.py</code> example there was a call to <code>capture_mouse()</code> in the mount handler. Textual will send mouse move events to the widget directly under the cursor. You can tell Textual to send all mouse events to a widget regardless of the position of the mouse cursor by calling capture_mouse.</p> <p>Call release_mouse to restore the default behavior.</p> <p>Warning</p> <p>If you capture the mouse, be aware you might get negative mouse coordinates if the cursor is to the left of the widget.</p> <p>Textual will send a MouseCapture event when the mouse is captured, and a MouseRelease event when it is released.</p>"},{"location":"guide/input/#enter-and-leave-events","title":"Enter and Leave events","text":"<p>Textual will send a Enter event to a widget when the mouse cursor first moves over it, and a Leave event when the cursor moves off a widget.</p> <p>Both <code>Enter</code> and <code>Leave</code> bubble, so a widget may receive these events from a child widget. You can check the initial widget these events were sent to by comparing the <code>node</code> attribute against <code>self</code> in the message handler.</p>"},{"location":"guide/input/#click-events","title":"Click events","text":"<p>There are three events associated with clicking a button on your mouse. When the button is initially pressed, Textual sends a MouseDown event, followed by MouseUp when the button is released. Textual then sends a final Click event.</p> <p>If you want your app to respond to a mouse click you should prefer the Click event (and not MouseDown or MouseUp). This is because a future version of Textual may support other pointing devices which don't have up and down states.</p>"},{"location":"guide/input/#scroll-events","title":"Scroll events","text":"<p>Most mice have a scroll wheel which you can use to scroll the window underneath the cursor. Scrollable containers in Textual will handle these automatically, but you can handle MouseScrollDown and MouseScrollUp if you want build your own scrolling functionality.</p> <p>Information</p> <p>Terminal emulators will typically convert trackpad gestures in to scroll events.</p>"},{"location":"guide/layout/","title":"Layout","text":"<p>In Textual, the layout defines how widgets will be arranged (or laid out) inside a container. Textual supports a number of layouts which can be set either via a widget's <code>styles</code> object or via CSS. Layouts can be used for both high-level positioning of widgets on screen, and for positioning of nested widgets.</p>"},{"location":"guide/layout/#vertical","title":"Vertical","text":"<p>The <code>vertical</code> layout arranges child widgets vertically, from top to bottom.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2ZW2/aSFx1MDAxNIDf8ytcIvrauHO/VFqtXHUwMDAyTdrck9KkTVdVNLFcdTAwMDdwMLbXXHUwMDFlXHUwMDEyoOp/37FJMVx1MDAxOFx1MDAxY1FcdTAwMWFRtrt+MPjM7XjmO2fOXHUwMDE5f93a3q6ZYaxrr7dreuCqwPdcdTAwMTL1UHuZye91kvpRaItQ/pxG/cTNa3aMidPXr171VNLVJlx1MDAwZZSrnXs/7asgNX3Pj1x1MDAxYzfqvfKN7qV/ZvdT1dN/xFHPM4lTXGayoz3fRMl4LFx1MDAxZOieXHUwMDBlTWp7/8s+b29/ze9T2iXaNSpsXHUwMDA3Om+QXHUwMDE3XHUwMDE1XG5CLsrS0yjMlYVcdTAwMDJRxFx1MDAxMGZsUsNP39jxjPZsccvqrIuSTFS7rNdcdTAwMGbj+/6RSNBdfFF/84lcdTAwMGZIUlxm2/KDoGmGQa6Wm0RputNRxu1cdTAwMTQ1UpNEXf3R90wn06Akn7RNIztcdTAwMTNFqyTqtzuhTtOZNlGsXFzfXGYzXHUwMDE5XHUwMDAwXHUwMDEz6XgmXm9cdTAwMTeSQbZOQjqSUFxmXHUwMDExncjzloI6XHUwMDE4gVx1MDAxOflYl0ZcdTAwMTTYJbC6vFx1MDAwMPlVaHOr3G7bqlx1MDAxNHqTOiZRYVx1MDAxYavELlRR7+HxLYlkXHUwMDBl5kJcdTAwMDI2NUhH++2OsaVcdTAwMThcdEdcdTAwMTDMp8bX+fxD24ZcdTAwMGLBWVGSjVx1MDAxYVx1MDAxZng5XHUwMDBiX8pz11FJ/DhHtTR7mNI4U3ZvXG6konE/9tR4vSFjXGJJiVx1MDAwMVx1MDAxN6yYvMBcdTAwMGa7tjDsXHUwMDA3QSGL3G6BSC799nJcdTAwMTU2KapiU2AkhSRkeTRcdTAwMTk4XCJcdTAwMThGh+qm8/Gi07jY8y/gTVx1MDAwNZolvGahROuDUlx1MDAwModIXHUwMDA0XHUwMDA1L0NJXHUwMDFjgGd5eX4oiVNBJGJcdTAwMGVEXHUwMDEwyFx1MDAwNUxcIkgpwFx1MDAxOK5cdTAwMTFJXGZcdTAwMDCUjHD0XFxI6iDw43QxkKjSWVxujJl1XHUwMDE0kixccuS+PLl517x6f/k+uvp09Fx1MDAwZXXdYd1bXHUwMDA1yPV5SVxmoFx1MDAwMyBlZSdpWSmJV8DxRUtRu+HMo1xikYMgmfWBXHUwMDEzXHUwMDE4IXRKbvu7e+SIQYq5/Fx1MDAxN3vHp1BcdTAwMTSVvpFbs4VcdTAwMThRsDSKny/SgTm6eXu81/Aurlx1MDAxM91NSXC04ShcIupQXHUwMDA2KGFz3lFcIuu5XHUwMDEwnt0zV+LxXHUwMDE2XHUwMDAw+lxcPFwiwFx0XHUwMDAzkEn8e1x1MDAwMmnjxCogXHQj2DpqKZZcdTAwMDbyslx1MDAxZTY/XHUwMDFm3lx1MDAwNVx1MDAwZnz0rn/gN+7vXFx8sOFAUuhAYO9cdTAwMGLcI3IwXHUwMDEwVP4skFx1MDAxMN1cbsGeXHUwMDBiSMKJpIKJ3zZ8xE+kNvaShEO8PJLnXHUwMDFmklH3nDY8vvu3fHOTXHUwMDA0QI3OKpDsKLfTT/RcdTAwMDZAXHSBXHUwMDAz5YJcdTAwMTDSukeHlZBZfc+mXHUwMDBivCQhwsk8nlxcSCW1Sc04r1wiMrtcdTAwMDQr44lcdTAwMTBEmGNcdTAwMDLXiifN7Eg8XHUwMDE3nkZcdTAwMGbMQl9Z6SohQ4xhgsDyiVxybV2NTsO3g+udYDS63mVR86ZcdTAwMTFvOpg2S5jlkZKf4fDJVIaRef5cdTAwMTbEi1x1MDAxNkKbSeBcco9cdTAwMTeLdY1C0/RHOlx1MDAwZi1mpPuq51x1MDAwN8OZpclBtJrahW5rMz2VqbZjjk97ZmrvXHUwMDA2fjtDtVx1MDAxNujWLMPGd1UwKTbR1Ju7dnRlu0tcdTAwMGW88ltEid/2Q1x1MDAxNXyY1WR1705cdTAwMTCv9u6SXHUwMDAwIaRcXD5cdTAwMDKW51x1MDAxMFx1MDAxY1x1MDAwZY7htZa3rZM9fkz76d6mXHUwMDFiXHUwMDExXHUwMDA20mFcdTAwMDLPXHUwMDA2XHUwMDE2w9ztXHUwMDEzR1xiJH7y1OpcdTAwMDVcdTAwMDEuoJwtXGI5XGIlXHUwMDBlp7jihFx1MDAwMELqXGLISFaaXHUwMDBmXHUwMDAz56yNXCJJKON0vdFcdTAwMDdcdTAwMDXUboZriT4oJlV8YmRcdTAwMTM0xvnyeKrPO83hzd6nncuTw+O6XHUwMDFj+Gr/Q3Pj8bTBXHUwMDA3gVxczmVoWWhApSzFXHUwMDA2K1x1MDAwMeoy3aKLXHUwMDAxtUFxJaCEOyjXazzIPJ9cYoBcZm+I15utUWhDtWfjUyVJ9LD4XHUwMDFjqzpX43ZcdTAwMGKU8Fx1MDAwN+KP+5OUjc5cdTAwMGUur0x8XHUwMDE2JOfDs1x1MDAwN4YvVmNzfUerwsa/slx1MDAxY1x1MDAwMH8/yypHrWUybVx1MDAxYaawfprMqlxcXHI4nHO8OFXDXGI5XHUwMDA0US5cdTAwMTZcdTAwMWZnXHRcblxiWyFcdTAwMWPONVt3eJJcdTAwMWGVmLpcdTAwMWZ6ftguN9GhV1FcdTAwMTKo1DSiXs83Vo3zyFx1MDAwZk25Rt7vblx1MDAwNnZHq7kow/Y8XVa2gDjrsfhSll3Fv+1cdTAwMDKR/GHy/8vLxbXnVjK7ptew6GFr+vdHs1x1MDAwNVwiy8JJoGMxlVhQtLy1plx1MDAwN/qwvdc+xfuXcrA/knetNiSbvpNYN+0ghNjc0Vxutnnk/LeIX5M/XHUwMDAwTG3ehjb9POW/lEBUWZR84ps3QcKGrj/wzftYJo2O2b3bXHUwMDFk6uOr3TPVc+/ev918i+JcdTAwMGVcdTAwMTFg/vScWIviXGbymVx1MDAxM6NfZFFYXHUwMDEwXHS53aP/t6i1W9TW475XU3HcNHaGbI2xfdlF8L3H1yz6q937+qG+6IQwv7JecyvN7EFnS/D129a3f1x1MDAwMLFE1Vx1MDAwMCJ9 WidgetWidgetWidget <p>The example below demonstrates how children are arranged inside a container with the <code>vertical</code> layout.</p> Outputvertical_layout.pyvertical_layout.tcss <p> VerticalLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Two\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Three\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass VerticalLayoutExample(App):\n    CSS_PATH = \"vertical_layout.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = VerticalLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: vertical;\n}\n\n.box {\n    height: 1fr;\n    border: solid green;\n}\n</code></pre> <p>Notice that the first widget yielded from the <code>compose</code> method appears at the top of the display, the second widget appears below it, and so on. Inside <code>vertical_layout.tcss</code>, we've assigned <code>layout: vertical</code> to <code>Screen</code>. <code>Screen</code> is the parent container of the widgets yielded from the <code>App.compose</code> method, and can be thought of as the terminal window itself.</p> <p>Note</p> <p>The <code>layout: vertical</code> CSS isn't strictly necessary in this case, since Screens use a <code>vertical</code> layout by default.</p> <p>We've assigned each child <code>.box</code> a height of <code>1fr</code>, which ensures they're each allocated an equal portion of the available height.</p> <p>You might also have noticed that the child widgets are the same width as the screen, despite nothing in our CSS file suggesting this. This is because widgets expand to the width of their parent container (in this case, the <code>Screen</code>).</p> <p>Just like other styles, <code>layout</code> can be adjusted at runtime by modifying the <code>styles</code> of a <code>Widget</code> instance:</p> <pre><code>widget.styles.layout = \"vertical\"\n</code></pre> <p>Using <code>fr</code> units guarantees that the children fill the available height of the parent. However, if the total height of the children exceeds the available space, then Textual will automatically add a scrollbar to the parent <code>Screen</code>.</p> <p>Note</p> <p>A scrollbar is added automatically because <code>Screen</code> contains the declaration <code>overflow-y: auto;</code>.</p> <p>For example, if we swap out <code>height: 1fr;</code> for <code>height: 10;</code> in the example above, the child widgets become a fixed height of 10, and a scrollbar appears (assuming our terminal window is sufficiently small):</p> <p> VerticalLayoutScrolledExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2582\u2582 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Two\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 </p> <p>With the parent container in focus, we can use our mouse wheel, trackpad, or keyboard to scroll it.</p>"},{"location":"guide/layout/#horizontal","title":"Horizontal","text":"<p>The <code>horizontal</code> layout arranges child widgets horizontally, from left to right.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2aa0/bSFx1MDAxNIa/8ytQ+rVM536ptFpcdTAwMTEuLTQtlNAtdFVVjj1JZnFsYztcdGnFf9+xQ+PE2GxcYlHKatdCSTzX45nnXHUwMDFjvzPDj63t7UY6iXTj9XZD37iOb7zYXHUwMDE5N15m6SNcdTAwMWQnJlxmbFx1MDAxNs7vk3BcdTAwMTi7ecl+mkbJ61evXHUwMDA2Tnyl08h3XFxcckYmXHUwMDE5On6SXHUwMDBlPVx1MDAxM1x1MDAwMjdcdTAwMWO8MqlcdTAwMWUkv2efXHUwMDFmnIH+LVxuXHUwMDA3Xlx1MDAxYYOik1x1MDAxZO2ZNIynfWlfXHUwMDBmdJAmtvU/7f329o/8c866WLupXHUwMDEz9HydV8izXG5cdTAwMDNcdTAwMTFH5dRcdTAwMGZhkFx1MDAxYitcdTAwMDRnTFBOZ1x1MDAwNUyyb7tLtWdzu9ZkXeRkSY1wrHY6o1x1MDAxMbuiTv8vfja8uWw3o6LXrvH9djrxc6vcOEySnb6Tuv2iRJLG4ZX+bLy0n9lWSp/VTUI7XHUwMDEwRa04XHUwMDFj9vqBTpKFOmHkuCadZGlcdTAwMTDOUqdcdTAwMDPxertIubF3XHUwMDFjXHUwMDAxXHUwMDA0XHUwMDEx45jNkvOKXHUwMDA0XHUwMDAyXHUwMDBlXHUwMDA1xUhcblYyZi/07Vx1MDAxNFhjXsD8KszpOO5Vz9pcdTAwMTR4szJp7Fx1MDAwNEnkxHaiinLju8ekilx1MDAwM1wipILz3fe16fVTm0uwXHUwMDA0kpL5/nU+XHUwMDAxXGJhXHUwMDAyle2ZzHKyXqMjL2fha3nw+k5cdTAwMWPdXHJSI8lu5izOjD2YXHUwMDAzqag8jDxnOuGIc4yVXCJcbjNajJ5vgiubXHUwMDE5XGZ9v0hcdTAwMGLdq4KRPPX25SpsXHUwMDEyXsemopxcdTAwMGKO4fJs9odB29//LryTZvzHXHUwMDA1jpLjT+ZdXHKbJb5cdTAwMTapxJukktPFuc8rYlx1MDAwNVx1MDAwNJSqRMXaqaSgXHUwMDA2ScxcdTAwMDHCXGKqKii55Vx1MDAxMVNcdTAwMDHR5qAkXHUwMDEwYiigQOuCUvu+iZJqJFx1MDAxMalDkiNCqP1cdTAwMTNLI/lpsPd2ctChqOd8eXt4zVvHcFx1MDAxZq2C5OZcdTAwMDKlwFx1MDAwMImFaDiNk1xuMIZcdTAwMDV5KpEvulx1MDAwZcNcZt+nXHUwMDExYYBRyVx1MDAxN2Y8XCJcdTAwMDQoI1xi36NcdTAwMTFbw1xiUYJvNERaKyGkXHUwMDFioZGLOlx1MDAxYe1gXHREkIBqaVx1MDAxY9E5vWmpTtg62lx1MDAxOUYnh63v3eB493njaN+cwlx1MDAwZYLi94mUgFx1MDAxMlXGYiVcIjtcdTAwMTCytVx1MDAxMVx0MWFIWiY3TyTeXHUwMDAwkVx1MDAxONfKSeuLUmJCKVmayPeuuL5pXlx1MDAxY6TiYHzcla0v+/1o/3lcdTAwMTOJsOWC2ZBTISaFXHUwMDE1ckzAJyOJcEdKvi4kXHUwMDExQlx1MDAxMCumXHUwMDE4+1x1MDAxNyP5oI7k9WtcdTAwMWOroZVgXG7hpZmM3r9PzpvDvdZxcn74RSr+5qzztobJvuP2h7H+9VRcblx1MDAwMaxywVx1MDAxMpWZXHUwMDE0XGYwWKZ19Vx1MDAxNzevopJZuShcdFOVWGIuXHUwMDAxrMKSWIVPIedqk1QqSlx1MDAxMCNiXVSm+iatVpGyXHUwMDE2SIVskGRKLS8jj1x1MDAwZttJ2mpCdlx1MDAxMnjJ8FrH74KLi+dO5DROksVcdTAwMTVGVlx1MDAxNUtcYlxixvjJSD64upnb1ChQrFjNWFxirYhcIlx1MDAxYlxczWShUVwiwsgjICzmOlxm0rb5rnOlsZB66FxmjD9ZmK6cTmupnfyeTufHMtG2z5xGuVB61ze9jN+Gr7uLYKfGdfxZdlx1MDAxYc49uWt7d2xz8ZFXfoowNj1cdTAwMTM4/vmiJatHeilonWNcdFx1MDAxYuelJIIv7Ve4NWiN+67eXHUwMDFm6dbHyWRMh2ejo+fuV5gxUN5cdTAwMWGYRnr7XG6AVns+OdJP1UdlpIdcdTAwMWPYt7pYeM3MRXpcdTAwMDZ4aZPtp59Jqz6gIHijXHUwMDEyRFFcdTAwMWJq4WP8bHUwXHUwMDE1YnVgXCJMoWBYLs3ldde9hEcn15+Cvve5N1x1MDAxYZs2Pfz23Lkkklx1MDAwMJS90O8pXHUwMDEwXHUwMDA0eFmarIIlxrKjq7HkXHUwMDE4SJ53QVV2iSo4XHUwMDE1kFx1MDAwNFcqXHUwMDExpCRWVJBccitcdTAwMTEsXHUwMDA15OuCs1aJqHouKYNcdTAwMWOJR+xnnYs3x6NT7/SjY051e6/3wfF26/aznlxymFhIIGBpVTZcdTAwMTVcIlx1MDAxMqh1bCGsQYhQqlxis4vHTetcdTAwMTAqXHUwMDFmJYb/Szqk1qPkXHUwMDAzXHUwMDEyhNs4w+dm8Vx1MDAxZlx1MDAwZtQ+XHUwMDFmOJff6NklvDa9sVaBOPlr8tw9imJcdTAwMDHKbvPToaDgpf3jX6TsieJ2sUfxpj0qO7T636Oyr3tcdTAwMWXlxHE4rnQpWOtSdrVoXHUwMDAzOH/EnuK3uHnK946uXHUwMDA35uDj8I1vlHmz667mUlx1MDAxYjxcdJSA4vu73FxmXCLwkCtJ0WWdp1x1MDAxY1x1MDAwMTJA+KK7XHUwMDE2+4mAK1U6XHUwMDE4v/MtaHOs4EUr7HHn1q3mW1xmMkVcdTAwMWVz6jJnh1x1MDAxM6dNXHUwMDEzeCbolavowKvJ8Z0k3Vx1MDAwYlx1MDAwN1x1MDAwM5NaM05DXHUwMDEzpOVcdTAwMTJ5u7tcdTAwMTnVfe3cc1x1MDAxMdvyfF5cdTAwMTn/KGux+K+O7Cp+bVx1MDAxN3zkN7PfX19Wlq6Yyewq5rBoYGv++3brrsmGXHUwMDEzRe3UXHUwMDBluDVo6rh2To13XHUwMDE3kYrnaoyMXHUwMDFlN6v2XHUwMDA38ytcdTAwMGJcdTAwMDC5+2d+prOn+3G7dfs38GbaXHUwMDA3In0= WidgetWidgetWidget <p>The example below shows how we can arrange widgets horizontally, with minimal changes to the vertical layout example above.</p> Outputhorizontal_layout.pyhorizontal_layout.tcss <p> HorizontalLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass HorizontalLayoutExample(App):\n    CSS_PATH = \"horizontal_layout.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = HorizontalLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: horizontal;\n}\n\n.box {\n    height: 100%;\n    width: 1fr;\n    border: solid green;\n}\n</code></pre> <p>We've changed the <code>layout</code> to <code>horizontal</code> inside our CSS file. As a result, the widgets are now arranged from left to right instead of top to bottom.</p> <p>We also adjusted the height of the child <code>.box</code> widgets to <code>100%</code>. As mentioned earlier, widgets expand to fill the width of their parent container. They do not, however, expand to fill the container's height. Thus, we need explicitly assign <code>height: 100%</code> to achieve this.</p> <p>A consequence of this \"horizontal growth\" behavior is that if we remove the width restriction from the above example (by deleting <code>width: 1fr;</code>), each child widget will grow to fit the width of the screen, and only the first widget will be visible. The other two widgets in our layout are offscreen, to the right-hand side of the screen. In the case of <code>horizontal</code> layout, Textual will not automatically add a scrollbar.</p> <p>To enable horizontal scrolling, we can use the <code>overflow-x: auto;</code> declaration:</p> Outputhorizontal_layout_overflow.pyhorizontal_layout_overflow.tcss <p> HorizontalLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258a </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass HorizontalLayoutExample(App):\n    CSS_PATH = \"horizontal_layout_overflow.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = HorizontalLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: horizontal;\n    overflow-x: auto;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>With <code>overflow-x: auto;</code>, Textual automatically adds a horizontal scrollbar since the width of the children exceeds the available horizontal space in the parent container.</p>"},{"location":"guide/layout/#utility-containers","title":"Utility containers","text":"<p>Textual comes with several \"container\" widgets. Among them, we have Vertical, Horizontal, and Grid which have the corresponding layout.</p> <p>The example below shows how we can combine these containers to create a simple 2x2 grid. Inside a single <code>Horizontal</code> container, we place two <code>Vertical</code> containers. In other words, we have a single row containing two columns.</p> Outpututility_containers.pyutility_containers.tcss <p> UtilityContainersExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502One\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Two\u2502\u2502Four\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\n\nclass UtilityContainersExample(App):\n    CSS_PATH = \"utility_containers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Vertical(\n                Static(\"One\"),\n                Static(\"Two\"),\n                classes=\"column\",\n            ),\n            Vertical(\n                Static(\"Three\"),\n                Static(\"Four\"),\n                classes=\"column\",\n            ),\n        )\n\n\nif __name__ == \"__main__\":\n    app = UtilityContainersExample()\n    app.run()\n</code></pre> <pre><code>Static {\n    content-align: center middle;\n    background: crimson;\n    border: solid darkred;\n    height: 1fr;\n}\n\n.column {\n    width: 1fr;\n}\n</code></pre> <p>You may be tempted to use many levels of nested utility containers in order to build advanced, grid-like layouts. However, Textual comes with a more powerful mechanism for achieving this known as grid layout, which we'll discuss below.</p>"},{"location":"guide/layout/#composing-with-context-managers","title":"Composing with context managers","text":"<p>In the previous section, we've shown how you add children to a container (such as <code>Horizontal</code> and <code>Vertical</code>) using positional arguments. It's fine to do it this way, but Textual offers a simplified syntax using context managers, which is generally easier to write and edit.</p> <p>When composing a widget, you can introduce a container using Python's <code>with</code> statement. Any widgets yielded within that block are added as a child of the container.</p> <p>Let's update the utility containers example to use the context manager approach.</p> utility_containers_using_with.pyutility_containers.pyutility_containers.tcssOutput <p>Note</p> <p>This code uses context managers to compose widgets.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\n\nclass UtilityContainersExample(App):\n    CSS_PATH = \"utility_containers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            with Vertical(classes=\"column\"):\n                yield Static(\"One\")\n                yield Static(\"Two\")\n            with Vertical(classes=\"column\"):\n                yield Static(\"Three\")\n                yield Static(\"Four\")\n\n\nif __name__ == \"__main__\":\n    app = UtilityContainersExample()\n    app.run()\n</code></pre> <p>Note</p> <p>This is the original code using positional arguments.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\n\nclass UtilityContainersExample(App):\n    CSS_PATH = \"utility_containers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Vertical(\n                Static(\"One\"),\n                Static(\"Two\"),\n                classes=\"column\",\n            ),\n            Vertical(\n                Static(\"Three\"),\n                Static(\"Four\"),\n                classes=\"column\",\n            ),\n        )\n\n\nif __name__ == \"__main__\":\n    app = UtilityContainersExample()\n    app.run()\n</code></pre> <pre><code>Static {\n    content-align: center middle;\n    background: crimson;\n    border: solid darkred;\n    height: 1fr;\n}\n\n.column {\n    width: 1fr;\n}\n</code></pre> <p> UtilityContainersExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502One\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Two\u2502\u2502Four\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <p>Note how the end result is the same, but the code with context managers is a little easier to read. It is up to you which method you want to use, and you can mix context managers with positional arguments if you like!</p>"},{"location":"guide/layout/#grid","title":"Grid","text":"<p>The <code>grid</code> layout arranges widgets within a grid. Widgets can span multiple rows and columns to create complex layouts. The diagram below hints at what can be achieved using <code>layout: grid</code>.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2ZW3PaRlx1MDAxNMff8yk85DVsds/eM9PpONimwZc40NZ2O52MkFx1MDAxNiQjkCxcdOM4k+/elUhcdTAwMTFcYpNQyrhcdTAwMDQ9aEZnb8e7P875n/XnXHUwMDE3XHUwMDA3XHUwMDA3texTbGpvXHUwMDBlaubBdcLAS5xJ7VVuvzdJXHUwMDFhRCPbXHUwMDA0xXdcdTAwMWGNXHUwMDEzt+jpZ1mcvnn9eugkXHUwMDAzk8Wh41x1MDAxYXRcdTAwMWakYydMs7FcdTAwMTdEyI2Gr4PMXGbTn/P3hTM0P8XR0MtcdTAwMTJULlI3XpBFyXQtXHUwMDEzmqFcdTAwMTllqZ39T/t9cPC5eM95l1x1MDAxODdzRv3QXHUwMDE0XHUwMDAziqbSQVx1MDAwZbRqvYhGhbNSYYEpV3rWIUiP7HKZ8Wxrz7psypbcVLtpnVx1MDAxZl596NavLlx1MDAxZlx1MDAxZVx1MDAxYVx1MDAxZlx1MDAwNmN8d/rQKlftXHUwMDA1YdjJPoWFV25cdTAwMTKlad13Mtcve6RZXHUwMDEyXHLMVeBlvu1DKvbZ2DSyXHUwMDFiUY5KonHfXHUwMDFmmTRdXHUwMDE4XHUwMDEzxY5cdTAwMWJkn3JcdTAwMWLGM+t0I95cdTAwMWOUloeiXHUwMDA3Q1RSzISSfNZSjFx1MDAxNVxuXHUwMDExxjglwCvuNKLQXHUwMDFlgnXnJS6e0qGu41x1MDAwZfrWq5E365MlziiNncRcdTAwMWVV2W/y9Vx1MDAwZmVa2OWVxmJuXHUwMDEx31x1MDAwNH0/s61cdTAwMTRcdTAwMTRSjM45lpriXGKIXHUwMDEyUlGQsjzCfNX4nVfQ8Fd1+3wnib9uUy3NP+Y8zp09nkOpXHUwMDFjPI49Z3rkRFxioFhcYo0xLfcvXGZGXHUwMDAz2zhcdTAwMWGHYWmL3EFJSWH98mpcdTAwMDM6iYaVdFxuKblQhKxN51x1MDAxOVHtWH7sezeP/lHnulx1MDAwMVx1MDAwZbm+XUFnhbBFLuFZuVx1MDAwNFxuXGbIMpdcdTAwMTIxXCL1XHUwMDAysNvnkqFcdTAwMTVQgkBcdTAwMDRcYtZPYSmVXHUwMDEyhCtJfmAsTVx1MDAxOFx1MDAwNnH6NJRCroKSgKCSYGB8bSpvvZPTNlx1MDAxN73r5nEr6pCscXtydrZcdJXPXHUwMDE4LVx0Q0phxVx1MDAxN06/XHUwMDE4K1x1MDAwNdJcdTAwMTJcdTAwMDRcdTAwMTf/LVq+7DlcdTAwMWM4LFx1MDAxM0lcdTAwMDBcdTAwMDFhi9FwxiQhqFx1MDAxYainRCrGXGLYUfr5gSTPXHUwMDAwJFx1MDAwMFlccqSywYNpvj6QN2MxOUs8t3nphONcdTAwMTNcdTAwMTI770izu+NAUo1cdTAwMThwqebPfsojR1x1MDAxNUw3o7GLMd9cdTAwMTaNVHPFlFx1MDAwNrmnNM5tRpVGLG101DZGrk2j4dK9ad+178bvo7fHl0o49cbJjtMobNZcXFx1MDAxNpJcdTAwMTbFLVx1MDAwNEZcdTAwMDJdm123hVwiyVx1MDAxMzVVWvxcdTAwMGapemssfltBXHUwMDEyvlJCMlxuQtn6Zv1cdTAwMDKn58i02ei/u3J9OrlodY/Os4+rkrXvuP44MTvAI1x1MDAxMMujkMtMgqVmSV1unq7FU1xcaoxA0pzL6UR0XHUwMDE5T1x0/0hZpotnXHRTomxxROeF195hOldmV6OmxsDtr1x1MDAxNNbnNFx1MDAxOep2M2xcdTAwMWReXHUwMDBl07f3LGh15MVxvOucUmo5kFhiWk3jgDXKz2KxXHUwMDE22S6oXG4jOc8p2YRT4FQrofT+ckphdfGDqS3KQdP1Of2j0W1cdTAwMDa3V4T83nPdX25cdTAwMWb751x1MDAxN0fOrnNq01x1MDAwNlJSaL7MqY2nXFxhvChEt1x1MDAxY1CZLb6YzJXElEK5XGZqrkB4cZc1XVx1MDAwYosqqfZcdTAwMTclOFx1MDAwNjJcdTAwMTf3941UXHUwMDAyeCWpXHUwMDAyXHUwMDEzRYGT9XXo+aVw621y18x4NOanp93eIVx1MDAxOe06qXnmZ5zj5cKIYkBWjW8h9U9cdTAwMDXp06mfXCLNXGLLg/bmqZ8qZXOCwPurUC2H30j9Np3k97xrg0rYUVx1MDAwMHU2oYG+gUFrXHUwMDEyTn5cdTAwMTk+7DqolDKElV4sX6ac2lpKq8rF/HY53U7mXHUwMDE33Go0YPub+blcdTAwMTIrMZVC2OPjZP1bps71yfk5jDJcdTAwMGbjTP7620X9LIuPdlx1MDAxZNOikpJM4KWLT6ol4lpXWjbhXHUwMDE0QHXNk5yCJohcbrlcdTAwMTCx/1xyofm9PFx1MDAxMXR/XHUwMDAzKdPf0Ka5XHUwMDFlgLl7ju9cdTAwMDH6cVx1MDAxON++T4Pe44fw0L+Pzvw2ucG7XHUwMDBlKLNxlC39X2ZcdTAwMDboVqTpakBcdFx1MDAxM0hPr2FXStPvclxuWFx1MDAxMK2A/Vx1MDAxOJf19l1MWnPiuJPZKW3zlFrrdeB1gkezME3tPjCTt09cdP7iqb34yn7Ol8l9/vzlxZe/XHUwMDAxUO5ccsMifQ== <p>Note</p> <p>Grid layouts in Textual have little in common with browser-based CSS Grid.</p> <p>To get started with grid layout, define the number of columns and rows in your grid with the <code>grid-size</code> CSS property and set <code>layout: grid</code>. Widgets are inserted into the \"cells\" of the grid from left-to-right and top-to-bottom order.</p> <p>The following example creates a 3 x 2 grid and adds six widgets to it</p> Outputgrid_layout1.pygrid_layout1.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout1.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3 2;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>If we were to yield a seventh widget from our <code>compose</code> method, it would not be visible as the grid does not contain enough cells to accommodate it. We can tell Textual to add new rows on demand to fit the number of widgets, by omitting the number of rows from <code>grid-size</code>. The following example creates a grid with three columns, with rows created on demand:</p> Outputgrid_layout2.pygrid_layout2.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Seven\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout2.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n        yield Static(\"Seven\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Since we specified that our grid has three columns (<code>grid-size: 3</code>), and we've yielded seven widgets in total, a third row has been created to accommodate the seventh widget.</p> <p>Now that we know how to define a simple uniform grid, let's look at how we can customize it to create more complex layouts.</p>"},{"location":"guide/layout/#row-and-column-sizes","title":"Row and column sizes","text":"<p>You can adjust the width of columns and the height of rows in your grid using the <code>grid-columns</code> and <code>grid-rows</code> properties. These properties can take multiple values, letting you specify dimensions on a column-by-column or row-by-row basis.</p> <p>Continuing on from our earlier 3x2 example grid, let's adjust the width of the columns using <code>grid-columns</code>. We'll make the first column take up half of the screen width, with the other two columns sharing the remaining space equally.</p> Outputgrid_layout3_row_col_adjust.pygrid_layout3_row_col_adjust.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout3_row_col_adjust.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-columns: 2fr 1fr 1fr;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Since our <code>grid-size</code> is 3 (meaning it has three columns), our <code>grid-columns</code> declaration has three space-separated values. Each of these values sets the width of a column. The first value refers to the left-most column, the second value refers to the next column, and so on. In the example above, we've given the left-most column a width of <code>2fr</code> and the other columns widths of <code>1fr</code>. As a result, the first column is allocated twice the width of the other columns.</p> <p>Similarly, we can adjust the height of a row using <code>grid-rows</code>. In the following example, we use <code>%</code> units to adjust the first row of our grid to <code>25%</code> height, and the second row to <code>75%</code> height (while retaining the <code>grid-columns</code> change from above).</p> Outputgrid_layout4_row_col_adjust.pygrid_layout4_row_col_adjust.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout4_row_col_adjust.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-columns: 2fr 1fr 1fr;\n    grid-rows: 25% 75%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>If you don't specify enough values in a <code>grid-columns</code> or <code>grid-rows</code> declaration, the values you have provided will be \"repeated\". For example, if your grid has four columns (i.e. <code>grid-size: 4;</code>), then <code>grid-columns: 2 4;</code> is equivalent to <code>grid-columns: 2 4 2 4;</code>. If it instead had three columns, then <code>grid-columns: 2 4;</code> would be equivalent to <code>grid-columns: 2 4 2;</code>.</p>"},{"location":"guide/layout/#auto-rows-columns","title":"Auto rows / columns","text":"<p>The <code>grid-columns</code> and <code>grid-rows</code> rules can both accept a value of \"auto\" in place of any of the dimensions, which tells Textual to calculate an optimal size based on the content.</p> <p>Let's modify the previous example to make the first column an <code>auto</code> column.</p> Outputgrid_layout_auto.pygrid_layout_auto.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502First\u00a0column\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout_auto.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"First column\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-columns: auto 1fr 1fr;\n    grid-rows: 25% 75%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Notice how the first column is just wide enough to fit the content of each cell. The layout will adjust accordingly if you update the content for any widget in that column.</p>"},{"location":"guide/layout/#cell-spans","title":"Cell spans","text":"<p>Cells may span multiple rows or columns, to create more interesting grid arrangements.</p> <p>To make a single cell span multiple rows or columns in the grid, we need to be able to select it using CSS. To do this, we'll add an ID to the widget inside our <code>compose</code> method so we can set the <code>row-span</code> and <code>column-span</code> properties using CSS.</p> <p>Let's add an ID of <code>#two</code> to the second widget yielded from <code>compose</code>, and give it a <code>column-span</code> of 2 to make that widget span two columns. We'll also add a slight tint using <code>tint: magenta 40%;</code> to draw attention to it.</p> Outputgrid_layout5_col_span.pygrid_layout5_col_span.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u00a0(column-span:\u00a02)\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Three\u2502\u2502Four\u2502\u2502Five\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Six\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout5_col_span.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two [b](column-span: 2)\", classes=\"box\", id=\"two\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n}\n\n#two {\n    column-span: 2;\n    tint: magenta 40%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Notice that the widget expands to fill columns to the right of its original position. Since <code>#two</code> now spans two cells instead of one, all widgets that follow it are shifted along one cell in the grid to accommodate. As a result, the final widget wraps on to a new row at the bottom of the grid.</p> <p>Note</p> <p>In the example above, setting the <code>column-span</code> of <code>#two</code> to be 3 (instead of 2) would have the same effect, since there are only 2 columns available (including <code>#two</code>'s original column).</p> <p>We can similarly adjust the <code>row-span</code> of a cell to have it span multiple rows. This can be used in conjunction with <code>column-span</code>, meaning one cell may span multiple rows and columns. The example below shows <code>row-span</code> in action. We again target widget <code>#two</code> in our CSS, and add a <code>row-span: 2;</code> declaration to it.</p> Outputgrid_layout6_row_span.pygrid_layout6_row_span.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u00a0(column-span:\u00a02\u00a0and\u00a0row-span:\u00a02)\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2502\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502\u2502 \u2502Three\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout6_row_span.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two [b](column-span: 2 and row-span: 2)\", classes=\"box\", id=\"two\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\napp = GridLayoutExample()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n}\n\n#two {\n    column-span: 2;\n    row-span: 2;\n    tint: magenta 40%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Widget <code>#two</code> now spans two columns and two rows, covering a total of four cells. Notice how the other cells are moved to accommodate this change. The widget that previously occupied a single cell now occupies four cells, thus displacing three cells to a new row.</p>"},{"location":"guide/layout/#gutter","title":"Gutter","text":"<p>The spacing between cells in the grid can be adjusted using the <code>grid-gutter</code> CSS property. By default, cells have no gutter, meaning their edges touch each other. Gutter is applied across every cell in the grid, so <code>grid-gutter</code> must be used on a widget with <code>layout: grid</code> (not on a child/cell widget).</p> <p>To illustrate gutter let's set our <code>Screen</code> background color to <code>lightgreen</code>, and the background color of the widgets we yield to <code>darkmagenta</code>. Now if we add <code>grid-gutter: 1;</code> to our grid, one cell of spacing appears between the cells and reveals the light green background of the <code>Screen</code>.</p> Outputgrid_layout7_gutter.pygrid_layout7_gutter.tcss <p> GridLayoutExample OneTwoThree FourFiveSix </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout7_gutter.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-gutter: 1;\n    background: lightgreen;\n}\n\n.box {\n    background: darkmagenta;\n    height: 100%;\n}\n</code></pre> <p>Notice that gutter only applies between the cells in a grid, pushing them away from each other. It doesn't add any spacing between cells and the edges of the parent container.</p> <p>Tip</p> <p>You can also supply two values to the <code>grid-gutter</code> property to set vertical and horizontal gutters respectively. Since terminal cells are typically two times taller than they are wide, it's common to set the horizontal gutter equal to double the vertical gutter (e.g. <code>grid-gutter: 1 2;</code>) in order to achieve visually consistent spacing around grid cells.</p>"},{"location":"guide/layout/#docking","title":"Docking","text":"<p>Widgets may be docked. Docking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container. Docked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2aWXPbNlx1MDAxMIDf8ys0ymvM4D4y0+nItpKocWwnjuOj0+nQJCTSokiWpCxLXHUwMDE5//cuaVXURVx1MDAxZrKqqtGDLWFcdGBcdHy72Fx1MDAwNfDjVa1Wz4axqb+r1c2tY1x1MDAwN76b2IP6m7z8xiSpXHUwMDFmhSBcIsXvNOonTvGkl2Vx+u7t256ddE1cdTAwMTZcdTAwMDe2Y6xcdTAwMWI/7dtBmvVdP7KcqPfWz0wv/TX/e2j3zC9x1HOzxCo72TGun0XJfV8mMD1cdTAwMTNmKbT+O/yu1X5cdTAwMTR/p7RLjJPZYScwRYVCVCrIXHSbLz2MwkJZzDXHTCuMJk/46T70l1x1MDAxOVx1MDAxN8Rt0NmUkryovk9cdTAwMWKNLDiPm7vvveD4YtQ6b3mdstu2XHUwMDFmXHUwMDA0J9kwKNRykihNdzw7c7zyiTRLoq45893MyzWYK5/UTSNcdTAwMTiJslZcdTAwMTL1O15o0nSmTlx1MDAxNNuOn1xy8zJUvsL9SLyrlSW3+TBcYksppLimkk9cdTAwMDR5VVwiLc0wQ4LwOWX2olx1MDAwMOZcdTAwMDCUeY2KT6nOle10O6BT6E6eyVx1MDAxMjtMYzuBmSqfXHUwMDFijF+TaWFRqfRMJ57xO15cdTAwMDZSSpSl2LReqSkmQFLMXHUwMDE4RVxcTVx1MDAwNHmnccstWPhjfuw8O4nHY1RP81x1MDAxZlNcbue6NqdAKiv3Y9e+n28sXHUwMDA0YVx1MDAxYyOtJKJcdTAwMTN54IddXHUwMDEwhv0gKMtcIqdbXCJSlN69WYFNrGklm4wjXCI1k09nM+yfXHUwMDFj73qX3/rdXHUwMDEz3jvY/Vx1MDAxNCFf7lWwOcfXLJVkk1RKhlxiZUuoJJjNUbF2KplVgSRcdTAwMTFcdTAwMTYmQMIyKJHGXHUwMDFhXHUwMDFjXHUwMDA3+lx1MDAxZkNpgsCP0+VIXG5VhaQg4D84werJRLZUvG9uj6L9a9p2/mzEPlx1MDAxYuhwXHUwMDE1XCI35yeFtKhSQmI1RyRcdTAwMDVUheZcdTAwMTS/zE++btuccLJIIyaLxE94xNhic13f08hcdTAwMDVSQlx1MDAwYkV+Tlx1MDAxYVx0IVU0YiykJuA7no6jz0dnXel+uP14ddL63CW94Pw82G5cdTAwMWM1tjSli6s25ZbgL1xcslx1MDAwMcUrhPi6UCyCXGLNlPhJUZSiXG5FmFx1MDAxZKQwsPhkXHUwMDEym8R8O/R6XzzxvXf05f1+s5mNXHUwMDBltptEjKXF5Cx0Y1x1MDAxMl9cdTAwMWE7vsbkXG587rpA1FgqJqT8P6/QXHUwMDBmh41cdTAwMTC5VLpFSlx1MDAxOVx1MDAxM1x1MDAxMOc/PW68uTj8XHUwMDFj68ug2T/5yptcdTAwMTk7v4pdv1x1MDAwMkbPdrx+Yv57XHUwMDFjuVx1MDAwNjTIXFxKkVfldJ3rtFhGJdWWXHUwMDEwRcZ031x1MDAxMF2Ek1wiYtFZ5cZ0XG4miCZywys2jFx1MDAwNkViM3TKXHUwMDA3Mm4qXGJoJJ+R1Vx1MDAxY1x1MDAxZYlcdTAwMTZpXFz3XHUwMDAzX35cdTAwMTmq9vfWzaCRbjudXHUwMDA0c0stYJjXXHUwMDE11FKQ2NGXZjZjn7mMT8iYLYZcdTAwMTHmS1NcdTAwMWJJQCghZJRMXHUwMDE3n3lAMVx1MDAwNF2SK0o2SygkXHUwMDE3SMrNXHUwMDEwqpSsXCKU5IqoZ1x1MDAxMbpz9MGcfo/OzcDP1M7p8V+O23K2n1BlgUdcdTAwMTBswYFiziyBJCMzKdB6XHUwMDExJVpZfFVAXHUwMDA1olQwyjaLJ5jFxvBElVmPRlhTNZ1cdTAwMTY9Rif969PnVn/onO3tfrn0mmfNTvL5z+2nXHUwMDEzsu2lyzthzFKU6lx1MDAxN29ccj1Cp0RcdTAwMTDN4dVcdTAwMWMoQ+A/MaGbXHJAYc2hXHUwMDAyb4RQgmTlLlx1MDAxMURHVEJcdTAwMWH4jGyo8enyMOy6UUz6R3vu7c23bD+Mt1x1MDAxZFFOmSU5X7KjLoWl+Dr8JyHqyiwlXHUwMDE0wotcIrZcdTAwMThcdTAwMTOotVjkXHUwMDE0XHUwMDBibTGxdFx1MDAwZlx1MDAxM1x1MDAxMiRcblx1MDAxM1x1MDAwNPRveIlcdTAwMTeYboZQrFHl1rpSmmBKpnKox1x1MDAwMFx1MDAxNa33e8e/XHRcdTAwMTnstM2+STJFXHUwMDBm+61tXHUwMDA3NF/hXHRcdTAwMTWUqPlcdTAwMTiUQs4uOV5DkvSQXHUwMDBmXHUwMDA1K1x1MDAxOJ83XHUwMDE1XHItI1RbsJapXHUwMDEyYzpcdTAwMGYqpVx1MDAxNFDlerMnQDBykESvi1M7SaLBUi/KKlx1MDAxMWWUS4LwM1x1MDAwZSbbl1xyXHUwMDE571x1MDAwN5/E6FwiuKTy4243XHUwMDFjXHUwMDBlVkN0c8c/WECaRDBmRFx1MDAxMIWEwnKGU5afTT5cZil3NEPuqpDmm1xiXHUwMDEwXHUwMDAyc5jyonu2yChB2lr0n1x1MDAwMoPqXG6vcjJZKLdcdTAwMWGXlMKQPsd/TulhJ9muXHUwMDFmun7YXHUwMDAx4T+M1ian661cdTAwMDKig49fvUBcdTAwMGVcdGmedk4v5ECnX9HpRNdcdTAwMWOjyOnnWu4gXHUwMDBiwlxywlx1MDAxNbhcdTAwMTdCNSyDik891rHjYv4teZ/ojiV3XHUwMDEzfUzoltrMvoCdZntRr+dn8OrHkVx1MDAxZmbzT1x1MDAxNO/SyI3KM7Y7L4WWp2Xz1lx1MDAxN+ctlldcdPJP+a1W4ln8mHz/483Sp3cq+SmkXHUwMDA1OmVcdTAwMWKvpv9XOYvM3GZLfVx1MDAwNa5cZrgkg0BcdTAwMTRcdTAwMDLO0sE+5itcdTAwMWWe5i1dznCxnC1cdTAwMWNcdTAwMTQzXG6xOnn5WUi1k4BwfolbWPBcdFx1MDAxME9cdIhcdP+N449cdEM/pvB6kt+fYeveXHUwMDE0JpK7f4D8N1x1MDAxY047XG6zXHUwMDEzf1TsqKCZ0vd2z1x1MDAwZoYzXHUwMDE4XHUwMDE00OeXa4q2ajDwXHUwMDFkk01PV2qg61wiuVAzlVx1MDAxYYHfya2jXHUwMDFlmPas2WS+Y1x1MDAwN1x1MDAxM3FcdTAwMTZNXHKvXHUwMDAzStjQXFzSWnBcdTAwMWVR4nf80Fx1MDAwZb4tVWglw8XVW02QIVxuSVx1MDAxOFJPz5RcdTAwMGVcdTAwMDJzdINij35cdTAwMThdOFe/XVx1MDAwZkbBaMWt+s2t8lRLaz6NXHUwMDA3O7aUnj+/WfNcdTAwMDVcdTAwMGbMS4VcdTAwMWawXFyMXHUwMDE01lx1MDAxMHuwXHKb7uHxdYNeKXamlZdcXCeDXHUwMDBmo1x1MDAwMTtYm+lyjMRz9qteZrpcdTAwMDf2MOpnY0tJt8F25zRaMUTn1Vx1MDAxN7RcdTAwMTCh+DnXs1x1MDAxZZ7uLbVdxoVFXHUwMDE5yq/hIaXx1GWL+1x1MDAwMJ1Z+rG7g0q2+dXqRqykhbjGeqzA1MZTadJcdTAwMTBcdTAwMWFUXdeCcsGJ5qusyy9cdNVz81OrmN9TQ/VcdTAwMDdXgtlQXHUwMDFkVpj8SFxcUYihJFXlJJahOrG0QkyonzdWr+SokE4jVFx1MDAxNbK/XHUwMDFhN1634/gkg/meTFx1MDAwZiDlu2OfWb5h/cY3g91lR8vFJ3dJxSjnpm/y9/xx9+rub5B4Q/4ifQ== Docked widgetLayout widgets <p>To dock a widget to an edge, add a <code>dock: &lt;EDGE&gt;;</code> declaration to it, where <code>&lt;EDGE&gt;</code> is one of <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code>. For example, a sidebar similar to that shown in the diagram above can be achieved using <code>dock: left;</code>. The code below shows a simple sidebar implementation.</p> Outputdock_layout1_sidebar.pydock_layout1_sidebar.tcss <p> DockLayoutExample SidebarDocking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0\u2587\u2587 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout1_sidebar.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Sidebar\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\nif __name__ == \"__main__\":\n    app = DockLayoutExample()\n    app.run()\n</code></pre> <pre><code>#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre> <p>If we run the app above and scroll down, the body text will scroll but the sidebar does not (note the position of the scrollbar in the output shown above).</p> <p>Docking multiple widgets to the same edge will result in overlap. The first widget yielded from <code>compose</code> will appear below widgets yielded after it. Let's dock a second sidebar, <code>#another-sidebar</code>, to the left of the screen. This new sidebar is double the width of the one previous one, and has a <code>deeppink</code> background.</p> Outputdock_layout2_sidebar.pydock_layout2_sidebar.tcss <p> DockLayoutExample Sidebar1Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0 fixes\u00a0its\u00a0position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0 right,\u00a0bottom,\u00a0or\u00a0left\u00a0edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0 making\u00a0them\u00a0ideal\u00a0for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0 and\u00a0sidebars. \u2587\u2587 Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0 fixes\u00a0its\u00a0position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0 right,\u00a0bottom,\u00a0or\u00a0left\u00a0edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0 making\u00a0them\u00a0ideal\u00a0for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0 and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0 fixes\u00a0its\u00a0position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0 right,\u00a0bottom,\u00a0or\u00a0left\u00a0edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0 making\u00a0them\u00a0ideal\u00a0for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0 and\u00a0sidebars. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout2_sidebar.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Sidebar2\", id=\"another-sidebar\")\n        yield Static(\"Sidebar1\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\napp = DockLayoutExample()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>#another-sidebar {\n    dock: left;\n    width: 30;\n    height: 100%;\n    background: deeppink;\n}\n\n#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre> <p>Notice that the original sidebar (<code>#sidebar</code>) appears on top of the newly docked widget. This is because <code>#sidebar</code> was yielded after <code>#another-sidebar</code> inside the <code>compose</code> method.</p> <p>Of course, we can also dock widgets to multiple edges within the same container. The built-in <code>Header</code> widget contains some internal CSS which docks it to the top. We can yield it inside <code>compose</code>, and without any additional CSS, we get a header fixed to the top of the screen.</p> Outputdock_layout3_sidebar_header.pydock_layout3_sidebar_header.tcss <p> DockLayoutExample Sidebar1DockLayoutExample Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout3_sidebar_header.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"header\")\n        yield Static(\"Sidebar1\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\nif __name__ == \"__main__\":\n    app = DockLayoutExample()\n    app.run()\n</code></pre> <pre><code>#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre> <p>If we wished for the sidebar to appear below the header, it'd simply be a case of yielding the sidebar before we yield the header.</p>"},{"location":"guide/layout/#layers","title":"Layers","text":"<p>Textual has a concept of layers which gives you finely grained control over the order widgets are placed.</p> <p>When drawing widgets, Textual will first draw on lower layers, working its way up to higher layers. As such, widgets on higher layers will be drawn on top of those on lower layers.</p> <p>Layer names are defined with a <code>layers</code> style on a container (parent) widget. Descendants of this widget can then be assigned to one of these layers using a <code>layer</code> style.</p> <p>The <code>layers</code> style takes a space-separated list of layer names. The leftmost name is the lowest layer, and the rightmost is the highest layer. Therefore, if you assign a descendant to the rightmost layer name, it'll be drawn on the top layer and will be visible above all other descendants.</p> <p>An example <code>layers</code> declaration looks like: <code>layers: one two three;</code>. To add a widget to the topmost layer in this case, you'd add a declaration of <code>layer: three;</code> to it.</p> <p>In the example below, <code>#box1</code> is yielded before <code>#box2</code>. Given our earlier discussion on yield order, you'd expect <code>#box2</code> to appear on top. However, in this case, both <code>#box1</code> and <code>#box2</code> are assigned to layers which define the reverse order, so <code>#box1</code> is on top of <code>#box2</code></p> Outputlayers.pylayers.tcss <p> LayersExample box1\u00a0(layer\u00a0=\u00a0above) box2\u00a0(layer\u00a0=\u00a0below) </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass LayersExample(App):\n    CSS_PATH = \"layers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"box1 (layer = above)\", id=\"box1\")\n        yield Static(\"box2 (layer = below)\", id=\"box2\")\n\n\nif __name__ == \"__main__\":\n    app = LayersExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n    layers: below above;\n}\n\nStatic {\n    width: 28;\n    height: 8;\n    color: auto;\n    content-align: center middle;\n}\n\n#box1 {\n    layer: above;\n    background: darkcyan;\n}\n\n#box2 {\n    layer: below;\n    background: orange;\n    offset: 12 6;\n}\n</code></pre>"},{"location":"guide/layout/#offsets","title":"Offsets","text":"<p>Widgets have a relative offset which is added to the widget's location, after its location has been determined via its parent's layout. This means that if a widget hasn't had its offset modified using CSS or Python code, it will have an offset of <code>(0, 0)</code>.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2ZWVPbSFx1MDAxMIDf+Vx1MDAxNZTzXHUwMDFhK3NcdTAwMWap2triXlxiS8JcdTAwMTVcYlspSkhjWWtZUqQx2Enx37clXHUwMDFjS744XGZhXHR6sK3p0Uxr5utr/GNpeblhXHUwMDA3qWm8X26YvudGoZ+5V423RfulyfIwiUFEyvs86WVe2bNtbZq/f/eu62ZcdTAwMWRj08j1jHNcdTAwMTnmPTfKbc9cdTAwMGZcdTAwMTPHS7rvQmu6+Z/F557bNX+kSde3mVNN0jR+aJPsZi5cdTAwMTOZroltXHUwMDBlo/9cdTAwMDP3y8s/ys+adpnxrFx1MDAxYlx1MDAwN5EpXHUwMDFmKEWVgpywyda9JC6VJVxcaM1cdTAwMDRBo1x1MDAwZWG+XHUwMDBl01njg7RcdTAwMDUqm0pSNDU2/L/pRvvbv70g+1x1MDAxNlxmVulgTZ82q1lbYVx1MDAxNFx1MDAxZNpBVGrlZUmeN9uu9dpVj9xmScechL5tQ1x1MDAxZjzRPno2T2AhqqeypFx1MDAxN7Rjk+djzySp64V2ULSh6lx1MDAxNW5cdTAwMTbi/XLV0i96UO4ohVx1MDAxNNdU8pGkeJYw7miGXHUwMDE5XHUwMDEyhE+os5ZEsFx0oM5cdTAwMWJUXpVCXHUwMDE3rtdcdECr2Fx1MDAxZvWxmVx1MDAxYuepm8FWVf2uhi/KtHCoVHpskrZcdIO2XHUwMDA1KSXKUayuWG7KLSCIYKWkpnokKWZNt/2Shq+Ty9d2s3S4TI28uKlpXFwou1FDqXq4l/ruzZZjIWA5XGJcdTAwMTDBdbV+UVx1MDAxOHdAXHUwMDE496Koaku8TkVJ2Xr9dlx1MDAwMTqxpvPoxJxgyTGW5N54XHUwMDFl2Y39081wV7ubXHUwMDFiJjv1z9OrvXl4TiA2XHUwMDBlJnlWMCVDhLJZYFx1MDAxMswmwHhyMJkzh0pcIlx1MDAxY0ww0jO4xEpQyonC9Dfm0kRRmOazqVx1MDAxNGoulVJcdTAwMTJcdTAwMDFb8lx1MDAwMCqT1Ytm/7CXx53Vg72TY4hcdTAwMDWfcGdcdTAwMTEqn9FdMvBXSlx0idUklZw5UmhO8ePc5ZuWy1x0J9NEYjJN/YhJjFx1MDAxZDYx9VxykUIrXHUwMDBlNqTx61x1MDAwNJKQuW5SIcxcdTAwMDVcdTAwMTX8/jz2XHUwMDBljoONwzPvUH6x4V/euWKnweZcdTAwMGLnUVwiR4PLmY7enDqTcXUxXHUwMDFhL1x1MDAxMOJPRaNUQkjxat0jkWKue0RCYK5FrcedOaV111vrQaY656q/x21rv1x1MDAxYixcdTAwMTS0n1x1MDAxMUdI55hcdTAwMTS8Tt1PXHUwMDFhXHUwMDFmjVwiJlx1MDAxN+B5n1xuRXDgiEtBlfyNWbw9hYQ0cS6OTCHN1Vx1MDAwM2hcXNvaOuqibbZ1XHUwMDE2fVx1MDAxOFxmdnbyj0r259DYdr12LzP/P49Eclx1MDAwN3EhxouYkkilXHUwMDFjOonq4uFazOJSI4fIMn+9XHUwMDE5iE7jKYnDsNRCSabLa1xuU1akXHUwMDE0XHUwMDE0iV9Q6VxmXHUwMDA1XHUwMDE1V7Xt3jnZXHUwMDBm6cpcdTAwMGU/kGebO1v+Jv34feXbaKwxXGLdLEuuXHUwMDFhI8n18NdcdTAwMGIxXHUwMDAyRvlcXCNcdTAwMTBcdTAwMTLyOMJqSe1dVtBstdbTXcp2dz+fb1xyzk74v51IvXQroFx1MDAxYUNcdTAwMTlccu+JucRIsYlUgVx1MDAxMeJcYqxcdTAwMWZf6Vx1MDAwZj30bFugo8OEhW2BgsdiYFxmr8pcdTAwMTRcbv+An8dcdTAwMTSEnpueXHUwMDEwpLDWhUO8tylE6+GXo1x1MDAwM2mClt7vtN0zkXhb+Us3hVwiICguXHUwMDE5marfXHUwMDE4l1x1MDAwZSNS0sdcdTAwMWUr3Fx1MDAxNlx1MDAxMVx1MDAxNHNcdTAwMTRReGhcdTAwMDNcYolcdTAwMDWsXHUwMDAwXHUwMDA24Fx1MDAwNKL373z0dWMnM931/FxmmjHQXHUwMDAxq/s769tccvdBhD7fuVx1MDAxN9RcdTAwMTDFiShDgKnCUvFxTGmR0eC7jlx1MDAxOZRs8YvFXHUwMDBmv6BYccCPa4Uxhe3neFx1MDAxYdPicJgzpYnSklx1MDAwYkbVJKZQknIsXHUwMDE5W6DUKzVdXHUwMDEw08J8yVx1MDAwMzCt6eFmdjWM/TBcdTAwMGVAWMWBn/8zbN8jXHIuqEq8Xrn7XHUwMDBllpD4gVx1MDAxOeNcItxcdTAwMDG8tU6Bm5ZEO1BcdTAwMTiVNfpQdD1Sx8T+3crcno3UlGlcIlx1MDAwN4FLwVx1MDAwNPJdpTVcdTAwMDRRxKbUUY7kRCvGOIJccuVCTilcdTAwMTW5uV1Lut3QwqJ/SsLYTi5uuYorhXW3jetPSuGl6rJJN5BcdTAwMTYjjofj6tdyZSflzej317cze89luLim6K1GW6p/z/Nf1vTtLPfF0S3uiyNYf0iB7u2/Lq8+dE6PV7+vN9m2/Cy7l3ZggpdcdTAwMWVhsdLgv1x1MDAwNNNMICaAqGpFSv8llFx1MDAwM9ZQxC+tMUTbx4TaW51YLauvju6nj1x1MDAwMSTkpFJcdTAwMTDyzMdcdTAwMDBcdTAwMTTXI9lcdTAwMDP8VCuJ7WH4/SZpXHUwMDFia910u2E0XHUwMDE427iSU9D0Y6uVXHUwMDFiW1/L3MCcJZdqrPdKXHUwMDE0XHUwMDA2cZnemdY44jb03GgktkntzT2Y3YXhsu0pk0+yMFxiYzc6XHUwMDFh1+RcdTAwMTFZLNdkro1xjFx1MDAwNUVS3d/G9pvHXHUwMDFl2ewrlVE//JCGe8dcdTAwMWLu2Vx1MDAxM9uYn1x1MDAxNP7yaZNcdTAwMDTmcKRnnLRRSVx1MDAxZHDv4tf+bfsk5Vx1MDAxYyZcZnKEwlx1MDAxYV5TPVfkyVx1MDAwZq/nloaDNtw0PbQw5Cjqw5qE/tDgq2FcdTAwMWGXoblanVV8lFehcmldXHUwMDA1wKZYkVx1MDAxZtdL1/9cdTAwMDE0elVbIn0= Offset <p>The offset of a widget can be set using the <code>offset</code> CSS property. <code>offset</code> takes two values.</p> <ul> <li>The first value defines the <code>x</code> (horizontal) offset. Positive values will shift the widget to the right. Negative values will shift the widget to the left.</li> <li>The second value defines the <code>y</code> (vertical) offset. Positive values will shift the widget down. Negative values will shift the widget up.</li> </ul>"},{"location":"guide/layout/#putting-it-all-together","title":"Putting it all together","text":"<p>The sections above show how the various layouts in Textual can be used to position widgets on screen. In a real application, you'll make use of several layouts.</p> <p>The example below shows how an advanced layout can be built by combining the various techniques described on this page.</p> Outputcombining_layouts.pycombining_layouts.tcss <p> CombiningLayoutsExample \u2b58CombiningLayoutsExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502HorizontallyPositionedChildrenHere\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a00\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a01\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2585\u2585\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a02\u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2502\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502Thispanelis\u2502 \u2502\u2502\u2502\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a03\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502usinggrid\u00a0layout!\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a04\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal, VerticalScroll\nfrom textual.widgets import Header, Static\n\n\nclass CombiningLayoutsExample(App):\n    CSS_PATH = \"combining_layouts.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        with Container(id=\"app-grid\"):\n            with VerticalScroll(id=\"left-pane\"):\n                for number in range(15):\n                    yield Static(f\"Vertical layout, child {number}\")\n            with Horizontal(id=\"top-right\"):\n                yield Static(\"Horizontally\")\n                yield Static(\"Positioned\")\n                yield Static(\"Children\")\n                yield Static(\"Here\")\n            with Container(id=\"bottom-right\"):\n                yield Static(\"This\")\n                yield Static(\"panel\")\n                yield Static(\"is\")\n                yield Static(\"using\")\n                yield Static(\"grid layout!\", id=\"bottom-right-final\")\n\n\nif __name__ == \"__main__\":\n    app = CombiningLayoutsExample()\n    app.run()\n</code></pre> <pre><code>#app-grid {\n    layout: grid;\n    grid-size: 2;  /* two columns */\n    grid-columns: 1fr;\n    grid-rows: 1fr;\n}\n\n#left-pane &gt; Static {\n    background: $boost;\n    color: auto;\n    margin-bottom: 1;\n    padding: 1;\n}\n\n#left-pane {\n    width: 100%;\n    height: 100%;\n    row-span: 2;\n    background: $panel;\n    border: dodgerblue;\n}\n\n#top-right {\n    height: 100%;\n    background: $panel;\n    border: mediumvioletred;\n}\n\n#top-right &gt; Static {\n    width: auto;\n    height: 100%;\n    margin-right: 1;\n    background: $boost;\n}\n\n#bottom-right {\n    height: 100%;\n    layout: grid;\n    grid-size: 3;\n    grid-columns: 1fr;\n    grid-rows: 1fr;\n    grid-gutter: 1;\n    background: $panel;\n    border: greenyellow;\n}\n\n#bottom-right-final {\n    column-span: 2;\n}\n\n#bottom-right &gt; Static {\n    height: 100%;\n    background: $boost;\n}\n</code></pre> <p>Textual layouts make it easy to design and build real-life applications with relatively little code.</p>"},{"location":"guide/queries/","title":"DOM Queries","text":"<p>In the previous chapter we introduced the DOM which is how Textual apps keep track of widgets. We saw how you can apply styles to the DOM with CSS selectors.</p> <p>Selectors are a very useful idea and can do more than apply styles. We can also find widgets in Python code with selectors, and make updates to widgets in a simple expressive way. Let's look at how!</p> <p>Tip</p> <p>See the Textual Query Sandbox project for an interactive way of experimenting with DOM queries.</p>"},{"location":"guide/queries/#query-one","title":"Query one","text":"<p>The query_one method is used to retrieve a single widget that matches a selector or a type.</p> <p>Let's say we have a widget with an ID of <code>send</code> and we want to get a reference to it in our app. We could do this with the following line of code:</p> <pre><code>send_button = self.query_one(\"#send\")\n</code></pre> <p>This will retrieve a widget with an ID of <code>send</code>, if there is exactly one. If there are no matching widgets, Textual will raise a NoMatches exception.</p> <p>You can also add a second parameter for the expected type, which will ensure that you get the type you are expecting.</p> <pre><code>send_button = self.query_one(\"#send\", Button)\n</code></pre> <p>If the matched widget is not a button (i.e. if <code>isinstance(widget, Button)</code> equals <code>False</code>), Textual will raise a WrongType exception.</p> <p>Tip</p> <p>The second parameter allows type-checkers like MyPy to know the exact return type. Without it, MyPy would only know the result of <code>query_one</code> is a Widget (the base class).</p> <p>You can also specify a widget type in place of a selector, which will return a widget of that type. For instance, the following would return a <code>Button</code> instance (assuming there is a single Button).</p> <pre><code>my_button = self.query_one(Button)\n</code></pre>"},{"location":"guide/queries/#making-queries","title":"Making queries","text":"<p>Apps and widgets also have a query method which finds (or queries) widgets. This method returns a DOMQuery object which is a list-like container of widgets.</p> <p>If you call <code>query</code> with no arguments, you will get back a <code>DOMQuery</code> containing all widgets. This method is recursive, meaning it will also return child widgets (as many levels as required).</p> <p>Here's how you might iterate over all the widgets in your app:</p> <pre><code>for widget in self.query():\n    print(widget)\n</code></pre> <p>Called on the <code>app</code>, this will retrieve all widgets in the app. If you call the same method on a widget, it will return the children of that widget.</p> <p>Note</p> <p>All the query and related methods work on both App and Widget sub-classes.</p>"},{"location":"guide/queries/#query-selectors","title":"Query selectors","text":"<p>You can call <code>query</code> with a CSS selector. Let's look a few examples:</p> <p>If we want to find all the button widgets, we could do something like the following:</p> <pre><code>for button in self.query(\"Button\"):\n    print(button)\n</code></pre> <p>Any selector that works in CSS will work with the <code>query</code> method. For instance, if we want to find all the disabled buttons in a Dialog widget, we could do this:</p> <pre><code>for button in self.query(\"Dialog Button.disabled\"):\n    print(button)\n</code></pre> <p>Info</p> <p>The selector <code>Dialog Button.disabled</code> says find all the <code>Button</code> with a CSS class of <code>disabled</code> that are a child of a <code>Dialog</code> widget.</p>"},{"location":"guide/queries/#results","title":"Results","text":"<p>Query objects have a results method which is an alternative way of iterating over widgets. If you supply a type (i.e. a Widget class) then this method will generate only objects of that type.</p> <p>The following example queries for widgets with the <code>disabled</code> CSS class and iterates over just the Button objects.</p> <pre><code>for button in self.query(\".disabled\").results(Button):\n    print(button)\n</code></pre> <p>Tip</p> <p>This method allows type-checkers like MyPy to know the exact type of the object in the loop. Without it, MyPy would only know that <code>button</code> is a <code>Widget</code> (the base class).</p>"},{"location":"guide/queries/#query-objects","title":"Query objects","text":"<p>We've seen that the query method returns a DOMQuery object you can iterate over in a for loop. Query objects behave like Python lists and support all of the same operations (such as <code>query[0]</code>, <code>len(query)</code> ,<code>reverse(query)</code> etc). They also have a number of other methods to simplify retrieving and modifying widgets.</p>"},{"location":"guide/queries/#first-and-last","title":"First and last","text":"<p>The first and last methods return the first or last matching widget from the selector, respectively.</p> <p>Here's how we might find the last button in an app:</p> <pre><code>last_button = self.query(\"Button\").last()\n</code></pre> <p>If there are no buttons, Textual will raise a NoMatches exception. Otherwise it will return a button widget.</p> <p>Both <code>first()</code> and <code>last()</code> accept an <code>expect_type</code> argument that should be the class of the widget you are expecting. Let's say we want to get the last widget with class <code>.disabled</code>, and we want to check it really is a button. We could do this:</p> <pre><code>disabled_button = self.query(\".disabled\").last(Button)\n</code></pre> <p>The query selects all widgets with a <code>disabled</code> CSS class. The <code>last</code> method gets the last disabled widget and checks it is a <code>Button</code> and not any other kind of widget.</p> <p>If the last widget is not a button, Textual will raise a WrongType exception.</p> <p>Tip</p> <p>Specifying the expected type allows type-checkers like MyPy to know the exact return type.</p>"},{"location":"guide/queries/#filter","title":"Filter","text":"<p>Query objects have a filter method which further refines a query. This method will return a new query object with widgets that match both the original query and the new selector.</p> <p>Let's say we have a query which gets all the buttons in an app, and we want a new query object with just the disabled buttons. We could write something like this:</p> <pre><code># Get all the Buttons\nbuttons_query = self.query(\"Button\")\n# Buttons with 'disabled' CSS class\ndisabled_buttons = buttons_query.filter(\".disabled\")\n</code></pre> <p>Iterating over <code>disabled_buttons</code> will give us all the disabled buttons.</p>"},{"location":"guide/queries/#exclude","title":"Exclude","text":"<p>Query objects have an exclude method which is the logical opposite of filter. The <code>exclude</code> method removes any widgets from the query object which match a selector.</p> <p>Here's how we could get all the buttons which don't have the <code>disabled</code> class set.</p> <pre><code># Get all the Buttons\nbuttons_query = self.query(\"Button\")\n# Remove all the Buttons with the 'disabled' CSS class\nenabled_buttons = buttons_query.exclude(\".disabled\")\n</code></pre>"},{"location":"guide/queries/#loop-free-operations","title":"Loop-free operations","text":"<p>Once you have a query object, you can loop over it to call methods on the matched widgets. Query objects also support a number of methods which make an update to every matched widget without an explicit loop.</p> <p>For instance, let's say we want to disable all buttons in an app. We could do this by calling add_class() on a query object.</p> <pre><code>self.query(\"Button\").add_class(\"disabled\")\n</code></pre> <p>This single line is equivalent to the following:</p> <pre><code>for widget in self.query(\"Button\"):\n    widget.add_class(\"disabled\")\n</code></pre> <p>Here are the other loop-free methods on query objects:</p> <ul> <li>add_class Adds a CSS class (or classes) to matched widgets.</li> <li>blur Blurs (removes focus) from matching widgets.</li> <li>focus Focuses the first matching widgets.</li> <li>refresh Refreshes matched widgets.</li> <li>remove_class Removes a CSS class (or classes) from matched widgets.</li> <li>remove Removes matched widgets from the DOM.</li> <li>set_class Sets a CSS class (or classes) on matched widgets.</li> <li>set Sets common attributes on a widget.</li> <li>toggle_class Sets a CSS class (or classes) if it is not set, or removes the class (or classes) if they are set on the matched widgets.</li> </ul>"},{"location":"guide/reactivity/","title":"Reactivity","text":"<p>Textual's reactive attributes are attributes with superpowers. In this chapter we will look at how reactive attributes can simplify your apps.</p> <p>Quote</p> <p>With great power comes great responsibility.</p> <p>\u2014 Uncle Ben</p>"},{"location":"guide/reactivity/#reactive-attributes","title":"Reactive attributes","text":"<p>Textual provides an alternative way of adding attributes to your widget or App, which doesn't require adding them to your class constructor (<code>__init__</code>). To create these attributes import reactive from <code>textual.reactive</code>, and assign them in the class scope.</p> <p>The following code illustrates how to create reactive attributes:</p> <pre><code>from textual.reactive import reactive\nfrom textual.widget import Widget\n\nclass Reactive(Widget):\n\n    name = reactive(\"Paul\")  # (1)!\n    count = reactive(0) # (2)!\n    is_cool = reactive(True)  # (3)!\n</code></pre> <ol> <li>Create a string attribute with a default of <code>\"Paul\"</code></li> <li>Creates an integer attribute with a default of <code>0</code>.</li> <li>Creates a boolean attribute with a default of <code>True</code>.</li> </ol> <p>The <code>reactive</code> constructor accepts a default value as the first positional argument.</p> <p>Information</p> <p>Textual uses Python's descriptor protocol to create reactive attributes, which is the same protocol used by the builtin <code>property</code> decorator.</p> <p>You can get and set these attributes in the same way as if you had assigned them in an <code>__init__</code> method. For instance <code>self.name = \"Jessica\"</code>, <code>self.count += 1</code>, or <code>print(self.is_cool)</code>.</p>"},{"location":"guide/reactivity/#dynamic-defaults","title":"Dynamic defaults","text":"<p>You can also set the default to a function (or other callable). Textual will call this function to get the default value. The following code illustrates a reactive value which will be automatically assigned the current time when the widget is created:</p> <pre><code>from time import time\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\n\nclass Timer(Widget):\n\n    start_time = reactive(time)  # (1)!\n</code></pre> <ol> <li>The <code>time</code> function returns the current time in seconds.</li> </ol>"},{"location":"guide/reactivity/#typing-reactive-attributes","title":"Typing reactive attributes","text":"<p>There is no need to specify a type hint if a reactive attribute has a default value, as type checkers will assume the attribute is the same type as the default.</p> <p>You may want to add explicit type hints if the attribute type is a superset of the default type. For instance if you want to make an attribute optional. Here's how you would create a reactive string attribute which may be <code>None</code>:</p> <pre><code>    name: reactive[str | None] = reactive(\"Paul\")\n</code></pre>"},{"location":"guide/reactivity/#smart-refresh","title":"Smart refresh","text":"<p>The first superpower we will look at is \"smart refresh\". When you modify a reactive attribute, Textual will make note of the fact that it has changed and refresh automatically.</p> <p>Information</p> <p>If you modify multiple reactive attributes, Textual will only do a single refresh to minimize updates.</p> <p>Let's look at an example which illustrates this. In the following app, the value of an input is used to update a \"Hello, World!\" type greeting.</p> refresh01.pyrefresh01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input\n\n\nclass Name(Widget):\n    \"\"\"Generates a greeting.\"\"\"\n\n    who = reactive(\"name\")\n\n    def render(self) -&gt; str:\n        return f\"Hello, {self.who}!\"\n\n\nclass WatchApp(App):\n    CSS_PATH = \"refresh01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter your name\")\n        yield Name()\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        self.query_one(Name).who = event.value\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\nName {\n    height: 100%;\n    content-align: center middle;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aTextual\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e Hello,\u00a0Textual! </p> <p>The <code>Name</code> widget has a reactive <code>who</code> attribute. When the app modifies that attribute, a refresh happens automatically.</p> <p>Information</p> <p>Textual will check if a value has really changed, so assigning the same value wont prompt an unnecessary refresh.</p>"},{"location":"guide/reactivity/#disabling-refresh","title":"Disabling refresh","text":"<p>If you don't want an attribute to prompt a refresh or layout but you still want other reactive superpowers, you can use var to create an attribute. You can import <code>var</code> from <code>textual.reactive</code>.</p> <p>The following code illustrates how you create non-refreshing reactive attributes.</p> <pre><code>class MyWidget(Widget):\n    count = var(0)  # (1)!\n</code></pre> <ol> <li>Changing <code>self.count</code> wont cause a refresh or layout.</li> </ol>"},{"location":"guide/reactivity/#layout","title":"Layout","text":"<p>The smart refresh feature will update the content area of a widget, but will not change its size. If modifying an attribute should change the size of the widget, you can set <code>layout=True</code> on the reactive attribute. This ensures that your CSS layout will update accordingly.</p> <p>The following example modifies \"refresh01.py\" so that the greeting has an automatic width.</p> refresh02.pyrefresh02.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input\n\n\nclass Name(Widget):\n    \"\"\"Generates a greeting.\"\"\"\n\n    who = reactive(\"name\", layout=True)  # (1)!\n\n    def render(self) -&gt; str:\n        return f\"Hello, {self.who}!\"\n\n\nclass WatchApp(App):\n    CSS_PATH = \"refresh02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter your name\")\n        yield Name()\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        self.query_one(Name).who = event.value\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <ol> <li>This attribute will update the layout when changed.</li> </ol> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\nName {\n    width: auto;\n    height: auto;\n    border: heavy $secondary;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aname\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Hello,\u00a0name!\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>If you type in to the input now, the greeting will expand to fit the content. If you were to set <code>layout=False</code> on the reactive attribute, you should see that the box remains the same size when you type.</p>"},{"location":"guide/reactivity/#validation","title":"Validation","text":"<p>The next superpower we will look at is validation, which can check and potentially modify a value you assign to a reactive attribute.</p> <p>If you add a method that begins with <code>validate_</code> followed by the name of your attribute, it will be called when you assign a value to that attribute. This method should accept the incoming value as a positional argument, and return the value to set (which may be the same or a different value).</p> <p>A common use for this is to restrict numbers to a given range. The following example keeps a count. There is a button to increase the count, and a button to decrease it. The validation ensures that the count will never go above 10 or below zero.</p> validate01.pyvalidate01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, RichLog\n\n\nclass ValidateApp(App):\n    CSS_PATH = \"validate01.tcss\"\n\n    count = reactive(0)\n\n    def validate_count(self, count: int) -&gt; int:\n        \"\"\"Validate value.\"\"\"\n        if count &lt; 0:\n            count = 0\n        elif count &gt; 10:\n            count = 10\n        return count\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Button(\"+1\", id=\"plus\", variant=\"success\"),\n            Button(\"-1\", id=\"minus\", variant=\"error\"),\n            id=\"buttons\",\n        )\n        yield RichLog(highlight=True)\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"plus\":\n            self.count += 1\n        else:\n            self.count -= 1\n        self.query_one(RichLog).write(f\"count = {self.count}\")\n\n\nif __name__ == \"__main__\":\n    app = ValidateApp()\n    app.run()\n</code></pre> <pre><code>#buttons {\n    dock: top;\n    height: auto;\n}\n</code></pre> <p> ValidateApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0+1\u00a0\u00a0-1\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>If you click the buttons in the above example it will show the current count. When <code>self.count</code> is modified in the button handler, Textual runs <code>validate_count</code> which performs the validation to limit the value of count.</p>"},{"location":"guide/reactivity/#watch-methods","title":"Watch methods","text":"<p>Watch methods are another superpower. Textual will call watch methods when reactive attributes are modified. Watch method names begin with <code>watch_</code> followed by the name of the attribute, and should accept one or two arguments. If the method accepts a single argument, it will be called with the new assigned value. If the method accepts two positional arguments, it will be called with both the old value and the new value.</p> <p>The following app will display any color you type in to the input. Try it with a valid color in Textual CSS. For example <code>\"darkorchid\"</code> or <code>\"#52de44\"</code>.</p> watch01.pywatch01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color, ColorParseError\nfrom textual.containers import Grid\nfrom textual.reactive import reactive\nfrom textual.widgets import Input, Static\n\n\nclass WatchApp(App):\n    CSS_PATH = \"watch01.tcss\"\n\n    color = reactive(Color.parse(\"transparent\"))  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a color\")\n        yield Grid(Static(id=\"old\"), Static(id=\"new\"), id=\"colors\")\n\n    def watch_color(self, old_color: Color, new_color: Color) -&gt; None:  # (2)!\n        self.query_one(\"#old\").styles.background = old_color\n        self.query_one(\"#new\").styles.background = new_color\n\n    def on_input_submitted(self, event: Input.Submitted) -&gt; None:\n        try:\n            input_color = Color.parse(event.value)\n        except ColorParseError:\n            pass\n        else:\n            self.query_one(Input).value = \"\"\n            self.color = input_color  # (3)!\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <ol> <li>Creates a reactive color attribute.</li> <li>Called when <code>self.color</code> is changed.</li> <li>New color is assigned here.</li> </ol> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\n#colors {\n    grid-size: 2 1;\n    grid-gutter: 2 4;\n    grid-columns: 1fr;\n    margin: 0 1;\n}\n\n#old {\n    height: 100%;\n    border: wide $secondary;\n}\n\n#new {\n    height: 100%;\n    border: wide $secondary;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258adarkorchid\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>The color is parsed in <code>on_input_submitted</code> and assigned to <code>self.color</code>. Because <code>color</code> is reactive, Textual also calls <code>watch_color</code> with the old and new values.</p>"},{"location":"guide/reactivity/#when-are-watch-methods-called","title":"When are watch methods called?","text":"<p>Textual only calls watch methods if the value of a reactive attribute changes. If the newly assigned value is the same as the previous value, the watch method is not called. You can override this behavior by passing <code>always_update=True</code> to <code>reactive</code>.</p>"},{"location":"guide/reactivity/#dynamically-watching-reactive-attributes","title":"Dynamically watching reactive attributes","text":"<p>You can programmatically add watchers to reactive attributes with the method <code>watch</code>. This is useful when you want to react to changes to reactive attributes for which you can't edit the watch methods.</p> <p>The example below shows a widget <code>Counter</code> that defines a reactive attribute <code>counter</code>. The app that uses <code>Counter</code> uses the method <code>watch</code> to keep its progress bar synced with the reactive attribute:</p> dynamic_watch.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Button, Label, ProgressBar\n\n\nclass Counter(Widget):\n    DEFAULT_CSS = \"Counter { height: auto; }\"\n    counter = reactive(0)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label()\n        yield Button(\"+10\")\n\n    def on_button_pressed(self) -&gt; None:\n        self.counter += 10\n\n    def watch_counter(self, counter_value: int):\n        self.query_one(Label).update(str(counter_value))\n\n\nclass WatchApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        yield Counter()\n        yield ProgressBar(total=100, show_eta=False)\n\n    def on_mount(self):\n        def update_progress(counter_value: int):  # (2)!\n            self.query_one(ProgressBar).update(progress=counter_value)\n\n        self.watch(self.query_one(Counter), \"counter\", update_progress)  # (3)!\n\n\nif __name__ == \"__main__\":\n    WatchApp().run()\n</code></pre> <ol> <li><code>counter</code> is a reactive attribute defined inside <code>Counter</code>.</li> <li><code>update_progress</code> is a custom callback that will update the progress bar when <code>counter</code> changes.</li> <li>We use the method <code>watch</code> to set <code>update_progress</code> as an additional watcher for the reactive attribute <code>counter</code>.</li> </ol> <p> WatchApp 10\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0+10\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250110%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"guide/reactivity/#recompose","title":"Recompose","text":"<p>An alternative to a refresh is recompose. If you set <code>recompose=True</code> on a reactive, then Textual will remove all the child widgets and call <code>compose()</code> again, when the reactive attribute changes. The process of removing and mounting new widgets occurs in a single update, so it will appear as though the content has simply updated.</p> <p>The following example uses recompose:</p> refresh03.pyrefresh03.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label\n\n\nclass Name(Widget):\n    \"\"\"Generates a greeting.\"\"\"\n\n    who = reactive(\"name\", recompose=True)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:  # (2)!\n        yield Label(f\"Hello, {self.who}!\")\n\n\nclass WatchApp(App):\n    CSS_PATH = \"refresh02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter your name\")\n        yield Name()\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        self.query_one(Name).who = event.value\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <ol> <li>Setting <code>recompose=True</code> will cause all child widgets to be removed and <code>compose</code> called again to add new widgets.</li> <li>This <code>compose()</code> method will be called when <code>who</code> is changed.</li> </ol> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\nName {\n    width: auto;\n    height: auto;\n    border: heavy $secondary;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aPaul\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Hello,\u00a0Paul!\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>While the end-result is identical to <code>refresh02.py</code>, this code works quite differently. The main difference is that recomposing creates an entirely new set of child widgets rather than updating existing widgets. So when the <code>who</code> attribute changes, the <code>Name</code> widget will replace its <code>Label</code> with a new instance (containing updated content).</p> <p>Warning</p> <p>You should avoid storing a reference to child widgets when using recompose. Better to query for a child widget when you need them.</p> <p>It is important to note that any child widgets will have their state reset after a recompose. For simple content, that doesn't matter much. But widgets with an internal state (such as <code>DataTable</code>, <code>Input</code>, or <code>TextArea</code>) would not be particularly useful if recomposed.</p> <p>Recomposing is slightly less efficient than a simple refresh, and best avoided if you need to update rapidly or you have many child widgets. That said, it can often simplify your code. Let's look at a practical example. First a version without recompose:</p> recompose01.pyOutput <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widgets import Digits\n\n\nclass Clock(App):\n\n    CSS = \"\"\"\n    Screen {align: center middle}\n    Digits {width: auto}\n    \"\"\"\n\n    time: reactive[datetime] = reactive(datetime.now, init=False)\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(f\"{self.time:%X}\")\n\n    def watch_time(self) -&gt; None:  # (1)!\n        self.query_one(Digits).update(f\"{self.time:%X}\")\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.set_interval(1, self.update_time)  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = Clock()\n    app.run()\n</code></pre> <ol> <li>Called when the <code>time</code> attribute changes.</li> <li>Update the time once a second.</li> </ol> <p> Clock \u00a0\u2513\u00a0\u250f\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u257b\u00a0\u257b \u00a0\u2503\u00a0\u2523\u2501\u2513\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u252b \u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u00a0\u00a0\u2579 </p> <p>This displays a clock which updates once a second. The code is straightforward, but note how we format the time in two places: <code>compose()</code> and <code>watch_time()</code>. We can simplify this by recomposing rather than refreshing:</p> recompose02.pyOutput <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widgets import Digits\n\n\nclass Clock(App):\n\n    CSS = \"\"\"\n    Screen {align: center middle}\n    Digits {width: auto}\n    \"\"\"\n\n    time: reactive[datetime] = reactive(datetime.now, recompose=True)\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(f\"{self.time:%X}\")\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    app = Clock()\n    app.run()\n</code></pre> <p> Clock \u00a0\u2513\u00a0\u250f\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u257b\u00a0\u257b \u00a0\u2503\u00a0\u2523\u2501\u2513\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u252b \u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u00a0\u00a0\u2579 </p> <p>In this version, the app is recomposed when the <code>time</code> attribute changes, which replaces the <code>Digits</code> widget with a new instance and updated time. There's no need for the <code>watch_time</code> method, because the new <code>Digits</code> instance will already show the current time.</p>"},{"location":"guide/reactivity/#compute-methods","title":"Compute methods","text":"<p>Compute methods are the final superpower offered by the <code>reactive</code> descriptor. Textual runs compute methods to calculate the value of a reactive attribute. Compute methods begin with <code>compute_</code> followed by the name of the reactive value.</p> <p>You could be forgiven in thinking this sounds a lot like Python's property decorator. The difference is that Textual will cache the value of compute methods, and update them when any other reactive attribute changes.</p> <p>The following example uses a computed attribute. It displays three inputs for each color component (red, green, and blue). If you enter numbers in to these inputs, the background color of another widget changes.</p> computed01.pycomputed01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive\nfrom textual.widgets import Input, Static\n\n\nclass ComputedApp(App):\n    CSS_PATH = \"computed01.tcss\"\n\n    red = reactive(0)\n    green = reactive(0)\n    blue = reactive(0)\n    color = reactive(Color.parse(\"transparent\"))\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Input(\"0\", placeholder=\"Enter red 0-255\", id=\"red\"),\n            Input(\"0\", placeholder=\"Enter green 0-255\", id=\"green\"),\n            Input(\"0\", placeholder=\"Enter blue 0-255\", id=\"blue\"),\n            id=\"color-inputs\",\n        )\n        yield Static(id=\"color\")\n\n    def compute_color(self) -&gt; Color:  # (1)!\n        return Color(self.red, self.green, self.blue).clamped\n\n    def watch_color(self, color: Color) -&gt; None:  # (2)\n        self.query_one(\"#color\").styles.background = color\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        try:\n            component = int(event.value)\n        except ValueError:\n            self.bell()\n        else:\n            if event.input.id == \"red\":\n                self.red = component\n            elif event.input.id == \"green\":\n                self.green = component\n            else:\n                self.blue = component\n\n\nif __name__ == \"__main__\":\n    app = ComputedApp()\n    app.run()\n</code></pre> <ol> <li>Combines color components in to a Color object.</li> <li>The watch method is called when the result of <code>compute_color</code> changes.</li> </ol> <pre><code>#color-inputs {\n    dock: top;\n    height: auto;\n}\n\nInput {\n    width: 1fr;\n}\n\n#color {\n    height: 100%;\n    border: tall $secondary;\n}\n</code></pre> <p> ComputedApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a0\u258e\u258a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e\u258a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the <code>compute_color</code> method which combines the color components into a Color object. It will be recalculated when any of the <code>red</code> , <code>green</code>, or <code>blue</code> attributes are modified.</p> <p>When the result of <code>compute_color</code> changes, Textual will also call <code>watch_color</code> since <code>color</code> still has the watch method superpower.</p> <p>Note</p> <p>Textual will first attempt to call the compute method for a reactive attribute, followed by the validate method, and finally the watch method.</p> <p>Note</p> <p>It is best to avoid doing anything slow or CPU-intensive in a compute method. Textual calls compute methods on an object when any reactive attribute changes.</p>"},{"location":"guide/reactivity/#setting-reactives-without-superpowers","title":"Setting reactives without superpowers","text":"<p>You may find yourself in a situation where you want to set a reactive value, but you don't want to invoke watchers or the other super powers. This is fairly common in constructors which run prior to mounting; any watcher which queries the DOM may break if the widget has not yet been mounted.</p> <p>To work around this issue, you can call set_reactive as an alternative to setting the attribute. The <code>set_reactive</code> method accepts the reactive attribute (as a class variable) and the new value.</p> <p>Let's look at an example. The following app is intended to cycle through various greeting when you press Space, however it contains a bug.</p> set_reactive01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive, var\nfrom textual.widgets import Label\n\nGREETINGS = [\n    \"Bonjour\",\n    \"Hola\",\n    \"\u3053\u3093\u306b\u3061\u306f\",\n    \"\u4f60\u597d\",\n    \"\uc548\ub155\ud558\uc138\uc694\",\n    \"Hello\",\n]\n\n\nclass Greeter(Horizontal):\n    \"\"\"Display a greeting and a name.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Greeter {\n        width: auto;\n        height: 1;\n        &amp; Label {\n            margin: 0 1;\n        }\n    }\n    \"\"\"\n    greeting: reactive[str] = reactive(\"\")\n    who: reactive[str] = reactive(\"\")\n\n    def __init__(self, greeting: str = \"Hello\", who: str = \"World!\") -&gt; None:\n        super().__init__()\n        self.greeting = greeting  # (1)!\n        self.who = who\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.greeting, id=\"greeting\")\n        yield Label(self.who, id=\"name\")\n\n    def watch_greeting(self, greeting: str) -&gt; None:\n        self.query_one(\"#greeting\", Label).update(greeting)  # (2)!\n\n    def watch_who(self, who: str) -&gt; None:\n        self.query_one(\"#who\", Label).update(who)\n\n\nclass NameApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n    greeting_no: var[int] = var(0)\n    BINDINGS = [(\"space\", \"greeting\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Greeter(who=\"Textual\")\n\n    def action_greeting(self) -&gt; None:\n        self.greeting_no = (self.greeting_no + 1) % len(GREETINGS)\n        self.query_one(Greeter).greeting = GREETINGS[self.greeting_no]\n\n\nif __name__ == \"__main__\":\n    app = NameApp()\n    app.run()\n</code></pre> <ol> <li>Setting this reactive attribute invokes a watcher.</li> <li>The watcher attempts to update a label before it is mounted.</li> </ol> <p>If you run this app, you will find Textual raises a <code>NoMatches</code> error in <code>watch_greeting</code>.  This is because the constructor has assigned the reactive before the widget has fully mounted.</p> <p>The following app contains a fix for this issue:</p> set_reactive02.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive, var\nfrom textual.widgets import Label\n\nGREETINGS = [\n    \"Bonjour\",\n    \"Hola\",\n    \"\u3053\u3093\u306b\u3061\u306f\",\n    \"\u4f60\u597d\",\n    \"\uc548\ub155\ud558\uc138\uc694\",\n    \"Hello\",\n]\n\n\nclass Greeter(Horizontal):\n    \"\"\"Display a greeting and a name.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Greeter {\n        width: auto;\n        height: 1;\n        &amp; Label {\n            margin: 0 1;\n        }\n    }\n    \"\"\"\n    greeting: reactive[str] = reactive(\"\")\n    who: reactive[str] = reactive(\"\")\n\n    def __init__(self, greeting: str = \"Hello\", who: str = \"World!\") -&gt; None:\n        super().__init__()\n        self.set_reactive(Greeter.greeting, greeting)  # (1)!\n        self.set_reactive(Greeter.who, who)\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.greeting, id=\"greeting\")\n        yield Label(self.who, id=\"name\")\n\n    def watch_greeting(self, greeting: str) -&gt; None:\n        self.query_one(\"#greeting\", Label).update(greeting)\n\n    def watch_who(self, who: str) -&gt; None:\n        self.query_one(\"#who\", Label).update(who)\n\n\nclass NameApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n    greeting_no: var[int] = var(0)\n    BINDINGS = [(\"space\", \"greeting\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Greeter(who=\"Textual\")\n\n    def action_greeting(self) -&gt; None:\n        self.greeting_no = (self.greeting_no + 1) % len(GREETINGS)\n        self.query_one(Greeter).greeting = GREETINGS[self.greeting_no]\n\n\nif __name__ == \"__main__\":\n    app = NameApp()\n    app.run()\n</code></pre> <ol> <li>The attribute is set via <code>set_reactive</code>, which avoids calling the watcher.</li> </ol> <p> NameApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hello\u00a0Textual\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p>The line <code>self.set_reactive(Greeter.greeting, greeting)</code> sets the <code>greeting</code> attribute but doesn't immediately invoke the watcher.</p>"},{"location":"guide/reactivity/#mutable-reactives","title":"Mutable reactives","text":"<p>Textual can detect when you set a reactive to a new value, but it can't detect when you mutate a value. In practice, this means that Textual can detect changes to basic types (int, float, str, etc.), but not if you update a collection, such as a list or dict. </p> <p>You can still use collections and other mutable objects in reactives, but you will need to call <code>mutate_reactive</code> after making changes for the reactive superpowers to work.</p> <p>Here's an example, that uses a reactive list:</p> set_reactive03.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widgets import Input, Label\n\n\nclass MultiGreet(App):\n    names: reactive[list[str]] = reactive(list, recompose=True)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Give me a name\")\n        for name in self.names:\n            yield Label(f\"Hello, {name}\")\n\n    def on_input_submitted(self, event: Input.Changed) -&gt; None:\n        self.names.append(event.value)\n        self.mutate_reactive(MultiGreet.names)  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = MultiGreet()\n    app.run()\n</code></pre> <ol> <li>Creates a reactive list of strings.</li> <li>Explicitly mutate the reactive list.</li> </ol> <p> MultiGreet \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aGive\u00a0me\u00a0a\u00a0name\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e Hello,\u00a0Will\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p>Note the call to <code>mutate_reactive</code>. Without it, the display would not update when a new name is appended to the list.</p>"},{"location":"guide/reactivity/#data-binding","title":"Data binding","text":"<p>Reactive attributes may be bound (connected) to attributes on child widgets, so that changes to the parent are automatically reflected in the children. This can simplify working with compound widgets where the value of an attribute might be used in multiple places.</p> <p>To bind reactive attributes, call data_bind on a widget. This method accepts reactives (as class attributes) in positional arguments or keyword arguments.</p> <p>Let's look at an app that could benefit from data binding. In the following code we have a <code>WorldClock</code> widget which displays the time in any given timezone.</p> <p>Note</p> <p>This example uses the pytz library for working with timezones. You can install pytz with <code>pip install pytz</code>.</p> world_clock01.pyworld_clock01.tcssOutput <pre><code>from datetime import datetime\n\nfrom pytz import timezone\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Digits, Label\n\n\nclass WorldClock(Widget):\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def __init__(self, timezone: str) -&gt; None:\n        self.timezone = timezone\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.timezone)\n        yield Digits()\n\n    def watch_time(self, time: datetime) -&gt; None:\n        localized_time = time.astimezone(timezone(self.timezone))\n        self.query_one(Digits).update(localized_time.strftime(\"%H:%M:%S\"))\n\n\nclass WorldClockApp(App):\n    CSS_PATH = \"world_clock01.tcss\"\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def compose(self) -&gt; ComposeResult:\n        yield WorldClock(\"Europe/London\")\n        yield WorldClock(\"Europe/Paris\")\n        yield WorldClock(\"Asia/Tokyo\")\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def watch_time(self, time: datetime) -&gt; None:\n        for world_clock in self.query(WorldClock):  # (1)!\n            world_clock.time = time\n\n    def on_mount(self) -&gt; None:\n        self.update_time()\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    app = WorldClockApp()\n    app.run()\n</code></pre> <ol> <li>Update the <code>time</code> reactive attribute of every <code>WorldClock</code>.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nWorldClock {\n    width: auto;\n    height: auto;\n    padding: 1 2;\n    background: $panel;\n    border: wide $background;\n\n    &amp; Digits {\n        width: auto;\n        color: $secondary;\n    }\n}\n</code></pre> <p> WorldClockApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/London\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u00a0\u2503\u00a0\u2523\u2501\u2513\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/Paris\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u257a\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u00a0\u2503\u00a0\u00a0\u00a0\u2503\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u257a\u253b\u2578\u00a0\u00a0\u2579\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eAsia/Tokyo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u250f\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u2503\u00a0\u2503\u2503\u00a0\u2503\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u2517\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>We've added three world clocks for London, Paris, and Tokyo. The clocks are kept up-to-date by watching the app's <code>time</code> reactive, and updating the clocks in a loop.</p> <p>While this approach works fine, it does require we take care to update every <code>WorldClock</code> we mount. Let's see how data binding can simplify this.</p> <p>The following app calls <code>data_bind</code> on the world clock widgets to connect the app's <code>time</code> with the widget's <code>time</code> attribute:</p> world_clock02.pyworld_clock01.tcssOutput <pre><code>from datetime import datetime\n\nfrom pytz import timezone\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Digits, Label\n\n\nclass WorldClock(Widget):\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def __init__(self, timezone: str) -&gt; None:\n        self.timezone = timezone\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.timezone)\n        yield Digits()\n\n    def watch_time(self, time: datetime) -&gt; None:\n        localized_time = time.astimezone(timezone(self.timezone))\n        self.query_one(Digits).update(localized_time.strftime(\"%H:%M:%S\"))\n\n\nclass WorldClockApp(App):\n    CSS_PATH = \"world_clock01.tcss\"\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def compose(self) -&gt; ComposeResult:\n        yield WorldClock(\"Europe/London\").data_bind(WorldClockApp.time)  # (1)!\n        yield WorldClock(\"Europe/Paris\").data_bind(WorldClockApp.time)\n        yield WorldClock(\"Asia/Tokyo\").data_bind(WorldClockApp.time)\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.update_time()\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    WorldClockApp().run()\n</code></pre> <ol> <li>Bind the <code>time</code> attribute, so that changes to <code>time</code> will also change the <code>time</code> attribute on the <code>WorldClock</code> widgets. The <code>data_bind</code> method also returns the widget, so we can yield its return value.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nWorldClock {\n    width: auto;\n    height: auto;\n    padding: 1 2;\n    background: $panel;\n    border: wide $background;\n\n    &amp; Digits {\n        width: auto;\n        color: $secondary;\n    }\n}\n</code></pre> <p> WorldClockApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/London\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u00a0\u2503\u00a0\u2523\u2501\u2513\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/Paris\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u257a\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u00a0\u2503\u00a0\u00a0\u00a0\u2503\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u257a\u253b\u2578\u00a0\u00a0\u2579\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eAsia/Tokyo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u250f\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u2503\u00a0\u2503\u2503\u00a0\u2503\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u2517\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note how the addition of the <code>data_bind</code> methods negates the need for the watcher in <code>world_clock01.py</code>.</p> <p>Note</p> <p>Data binding works in a single direction. Setting <code>time</code> on the app updates the clocks. But setting <code>time</code> on the clocks will not update <code>time</code> on the app.</p> <p>In the previous example app, the call to <code>data_bind(WorldClockApp.time)</code> worked because both reactive attributes were named <code>time</code>. If you want to bind a reactive attribute which has a different name, you can use keyword arguments.</p> <p>In the following app we have changed the attribute name on <code>WorldClock</code> from <code>time</code> to <code>clock_time</code>. We can make the app continue to work by changing the <code>data_bind</code> call to <code>data_bind(clock_time=WorldClockApp.time)</code>:</p> world_clock03.pyworld_clock01.tcssOutput <pre><code>from datetime import datetime\n\nfrom pytz import timezone\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Digits, Label\n\n\nclass WorldClock(Widget):\n\n    clock_time: reactive[datetime] = reactive(datetime.now)\n\n    def __init__(self, timezone: str) -&gt; None:\n        self.timezone = timezone\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.timezone)\n        yield Digits()\n\n    def watch_clock_time(self, time: datetime) -&gt; None:\n        localized_time = time.astimezone(timezone(self.timezone))\n        self.query_one(Digits).update(localized_time.strftime(\"%H:%M:%S\"))\n\n\nclass WorldClockApp(App):\n    CSS_PATH = \"world_clock01.tcss\"\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def compose(self) -&gt; ComposeResult:\n        yield WorldClock(\"Europe/London\").data_bind(\n            clock_time=WorldClockApp.time  # (1)!\n        )\n        yield WorldClock(\"Europe/Paris\").data_bind(clock_time=WorldClockApp.time)\n        yield WorldClock(\"Asia/Tokyo\").data_bind(clock_time=WorldClockApp.time)\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.update_time()\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    WorldClockApp().run()\n</code></pre> <ol> <li>Uses keyword arguments to bind the <code>time</code> attribute of <code>WorldClockApp</code> to <code>clock_time</code> on <code>WorldClock</code>.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nWorldClock {\n    width: auto;\n    height: auto;\n    padding: 1 2;\n    background: $panel;\n    border: wide $background;\n\n    &amp; Digits {\n        width: auto;\n        color: $secondary;\n    }\n}\n</code></pre> <p> WorldClockApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/London\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u00a0\u2503\u00a0\u2523\u2501\u2513\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/Paris\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u257a\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u00a0\u2503\u00a0\u00a0\u00a0\u2503\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u257a\u253b\u2578\u00a0\u00a0\u2579\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eAsia/Tokyo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u250f\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u258a \u258e\u2503\u00a0\u2503\u2503\u00a0\u2503\u00a0:\u00a0\u250f\u2501\u251b\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2517\u2501\u2513\u258a \u258e\u2517\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"guide/screens/","title":"Screens","text":"<p>This chapter covers Textual's screen API. We will discuss how to create screens and switch between them.</p>"},{"location":"guide/screens/#what-is-a-screen","title":"What is a screen?","text":"<p>Screens are containers for widgets that occupy the dimensions of your terminal. There can be many screens in a given app, but only one screen is active at a time.</p> <p>Textual requires that there be at least one screen object and will create one implicitly in the App class. If you don't change the screen, any widgets you mount or compose will be added to this default screen.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nM1Ya0/jOFx1MDAxNP3Or6i6X3YlXGKOY8fxSKtcdTAwMTXPpSywo1x1MDAwMVxyj9VcYrmJaT3Na1x1MDAxMpfHIP77XqdMXHUwMDFlbVxiZVx1MDAxN0ZEUZv4OtfX1+fc4+R+pdfr67tU9j/0+vLWXHUwMDE3oVxuMnHTXzXt1zLLVVx1MDAxMoNcdFx1MDAxN/d5Ms38oudY6zT/sL5cdTAwMWWJbFwidVx1MDAxYVxuX1rXKp+KMNfTQCWWn0TrSsso/8P8XHUwMDFliUj+niZRoDOrXHUwMDFhZE1cdTAwMDZKJ9lsLFx1MDAxOcpIxjpcdTAwMDfv/8B9r3df/NaiXHUwMDBilIiSOCi6XHUwMDE3hlp4njvfepTERaiUIVx1MDAwN3PqkbKDyrdhMC1cdTAwMDOwXkHAsrKYpn56sbN1pD45eiNcdTAwMWKyfNP5Nvy6d1WNeqXC8FjfhbM8XGJ/PM1kZc11lkzkqVxu9Fx1MDAxOOz2XFx7+VxcnkBcbqqnsmQ6XHUwMDFhxzLPXHUwMDFizySp8JW+M21cYpWtXCJcdTAwMWVcdTAwMTU+qpZbk1x1MDAwMeJamHmO5zpcdTAwMGV1XHUwMDEwqc23cECY5VLsXHUwMDEwh9G5mLaSXHUwMDEw1lx1MDAwMGL6XHUwMDA1XHUwMDE1R1x1MDAxNdVQ+JNcdTAwMTGEXHUwMDE2XHUwMDA3VVx1MDAxZlx1MDAwZvvcrs335sdMa1x1MDAwM46lXHUwMDFhjbVpxNjyXHUwMDEwcT1GZ75r+ZBF/m3P5pRcdTAwMTKMcWkxI6aDoFx1MDAwMMKX+fyNRZY+5qmfm5tatCbQnXlcdTAwMTTVkVRbY+dcIkv5vlx1MDAxYVxmvk7GfyX88CxcdTAwMWRcdTAwMGZcdTAwMGVLX1xy2Gl5q/ul4WG1y+2Ze1x1MDAxMm1cdTAwMGUv7evp9v6BPls7+8jRfrtbkWXJzfN+XHUwMDFiUawuO5HK7eNVlchpXHUwMDFhiFx1MDAxOfZt10XE5sjjXHUwMDBl4aU9VPFcdTAwMDSM8TRcZqu2xJ9UdFmpxbtA0kacdYba5CmG2thQXHUwMDE0XHUwMDEw4i1N0e7le69cdTAwMTSldidFObeAXG6GLP+HoTpcdTAwMTNxnopcZljQwlLWxlK+wErmeraDXFxcdTAwMWK9Piu7kMihOr1cdTAwMDSJ1YInsT5W31x1MDAwYjS5XHUwMDE2hWKEsIsw41x1MDAxY1HW6LUrXCJcdTAwMTXeNdawgCxEvnMrojSUXHUwMDFiafrrb/VcdTAwMTTnXHUwMDEyXCIpXFyTxjNcdTAwMWKhXHUwMDFhXHUwMDE5aPd9mJvMXHUwMDFhqNdcbkSu7Fx1MDAxMKkgXGJrXGL0IVx1MDAxMFx1MDAwMT6zwTKCk2RqpGJcdTAwMTGetMXZScZM+nqGxVx1MDAxNkZS+qRmYlx1MDAwNCDkUJXdpVx1MDAxOXn+PdGXXyfDk+PRwblzQsefkvPLd89IXHUwMDE3W8hlhHheXHUwMDFiI1x1MDAxZNuxXHUwMDEwI9h+U0pSukhJj0GlmFx1MDAxM+tHalx1MDAwMqRcdTAwMTHFXHUwMDFlcV+fml3KXHUwMDE27MfnQ0rOXHUwMDBmtlx1MDAwMrw33tldu9zDn9+jYM78nu5/vr45INuHXHUwMDA3XHUwMDE5XHL+vMNTTLbdV/CLT4PB3u7EP/Q2iH1cdTAwMTKFf+/EXHUwMDE3ozdcdTAwMTX49sS/QOCZkVZe7a/eSOBcdPXmW3+UXHUwMDEzwinUYUKX34J3o+3dVlx1MDAxM9ZZTVxisZhdaNzbXHUwMDE1XHUwMDEz0lJMsDNfREBcdTAwMWFhXHUwMDE3wp2fKu8vx2GbvGPUaO2Q82M/kzJ+SspZo/+rSfkzMjgv5WWMnZSbVZJcdTAwMTbOMfxcdTAwMTTlQCZAv+FcXF7Bu0vxO+Wc43BcdTAwMGJe7lx1MDAxMXNaOYdcdTAwMTm1XFzOjYJcdTAwMTNujjdjXHUwMDFlslxid5vkLlx06Fx1MDAxMIsz7FJcdTAwMTcvyLlcdTAwMDebXuDGf9loXHUwMDE3wf1sJuZaZHpTxYGKR2CslFxm2OhPzbhryEKO7VLCoVx1MDAxNlKOXHTyylmb6YnU7D0tXHUwMDAyckBcdTAwMWPYg1x1MDAxYYxWr5+98kNQ19b4sXMpqX1cdTAwMTlcdTAwMDfPXHUwMDA2hThUX8Tg1Vx1MDAwME7KmLdcdTAwMTBcdTAwMTW24LWh2HVcdTAwMTXfKmyHPVx1MDAxNVY7zVx1MDAxN8JcbkWut5IoUlx1MDAxYdL/MVGxnk9zkc9ccsPvsVx1MDAxNMG8XHUwMDE1plW3zVx1MDAxN4LUeGzu3KqrXsWU4qa8/rLa2nttXHUwMDExweaoYbfysFL/NzuQwmdfpOmxXHUwMDA2pJVrXHUwMDAwYFbBY+GuJta/VvJms+Xb0lVxmDRcdTAwMTYpNCVHmundP6w8/Fx1MDAwYlxiYlx1MDAxObwifQ== ExampleApp()Screen()"},{"location":"guide/screens/#creating-a-screen","title":"Creating a screen","text":"<p>You can create a screen by extending the Screen class which you can import from <code>textual.screen</code>. The screen may be styled in the same way as other widgets, with the exception that you can't modify the screen's dimensions (as these will always be the size of your terminal).</p> <p>Let's look at a simple example of writing a screen class to simulate Window's blue screen of death.</p> screen01.pyscreen01.tcssOutput screen01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Static\n\nERROR_TEXT = \"\"\"\nAn error has occurred. To continue:\n\nPress Enter to return to Windows, or\n\nPress CTRL+ALT+DEL to restart your computer. If you do this,\nyou will lose any unsaved information in all open applications.\n\nError: 0E : 016F : BFF9B3D4\n\"\"\"\n\n\nclass BSOD(Screen):\n    BINDINGS = [(\"escape\", \"app.pop_screen\", \"Pop screen\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\" Windows \", id=\"title\")\n        yield Static(ERROR_TEXT)\n        yield Static(\"Press any key to continue [blink]_[/]\", id=\"any-key\")\n\n\nclass BSODApp(App):\n    CSS_PATH = \"screen01.tcss\"\n    SCREENS = {\"bsod\": BSOD}\n    BINDINGS = [(\"b\", \"push_screen('bsod')\", \"BSOD\")]\n\n\nif __name__ == \"__main__\":\n    app = BSODApp()\n    app.run()\n</code></pre> screen01.tcss<pre><code>BSOD {\n    align: center middle;\n    background: blue;\n    color: white;\n}\n\nBSOD&gt;Static {\n    width: 70;\n}\n\n#title {\n    content-align-horizontal: center;\n    text-style: reverse;\n}\n\n#any-key {\n    content-align-horizontal: center;\n}\n</code></pre> <p> BSODApp \u00a0Windows\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0An\u00a0error\u00a0has\u00a0occurred.\u00a0To\u00a0continue: \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0Enter\u00a0to\u00a0return\u00a0to\u00a0Windows,\u00a0or \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0CTRL+ALT+DEL\u00a0to\u00a0restart\u00a0your\u00a0computer.\u00a0If\u00a0you\u00a0do\u00a0this, \u00a0\u00a0\u00a0\u00a0\u00a0you\u00a0will\u00a0lose\u00a0any\u00a0unsaved\u00a0information\u00a0in\u00a0all\u00a0open\u00a0applications. \u00a0\u00a0\u00a0\u00a0\u00a0Error:\u00a00E\u00a0:\u00a0016F\u00a0:\u00a0BFF9B3D4 Press\u00a0any\u00a0key\u00a0to\u00a0continue\u00a0_ </p> <p>If you run this you will see an empty screen. Hit the B key to show a blue screen of death. Hit Esc to return to the default screen.</p> <p>The <code>BSOD</code> class above defines a screen with a key binding and compose method. These should be familiar as they work in the same way as apps.</p> <p>The app class has a new <code>SCREENS</code> class variable. Textual uses this class variable to associate a name with screen object (the name is used to reference screens in the screen API). Also in the app is a key binding associated with the action <code>\"push_screen('bsod')\"</code>. The screen class has a similar action <code>\"pop_screen\"</code> bound to the Esc key. We will cover these actions below.</p>"},{"location":"guide/screens/#named-screens","title":"Named screens","text":"<p>You can associate a screen with a name by defining a <code>SCREENS</code> class variable in your app, which should be a <code>dict</code> that maps names on to <code>Screen</code> objects. The name of the screen may be used interchangeably with screen objects in much of the screen API.</p> <p>You can also install new named screens dynamically with the install_screen method. The following example installs the <code>BSOD</code> screen in a mount handler rather than from the <code>SCREENS</code> variable.</p> screen02.pyscreen02.tcssOutput screen02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Static\n\nERROR_TEXT = \"\"\"\nAn error has occurred. To continue:\n\nPress Enter to return to Windows, or\n\nPress CTRL+ALT+DEL to restart your computer. If you do this,\nyou will lose any unsaved information in all open applications.\n\nError: 0E : 016F : BFF9B3D4\n\"\"\"\n\n\nclass BSOD(Screen):\n    BINDINGS = [(\"escape\", \"app.pop_screen\", \"Pop screen\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\" Windows \", id=\"title\")\n        yield Static(ERROR_TEXT)\n        yield Static(\"Press any key to continue [blink]_[/]\", id=\"any-key\")\n\n\nclass BSODApp(App):\n    CSS_PATH = \"screen02.tcss\"\n    BINDINGS = [(\"b\", \"push_screen('bsod')\", \"BSOD\")]\n\n    def on_mount(self) -&gt; None:\n        self.install_screen(BSOD(), name=\"bsod\")\n\n\nif __name__ == \"__main__\":\n    app = BSODApp()\n    app.run()\n</code></pre> screen02.tcss<pre><code>BSOD {\n    align: center middle;\n    background: blue;\n    color: white;\n}\n\nBSOD&gt;Static {\n    width: 70;\n}\n\n#title {\n    content-align-horizontal: center;\n    text-style: reverse;\n}\n\n#any-key {\n    content-align-horizontal: center;\n}\n</code></pre> <p> BSODApp \u00a0Windows\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0An\u00a0error\u00a0has\u00a0occurred.\u00a0To\u00a0continue: \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0Enter\u00a0to\u00a0return\u00a0to\u00a0Windows,\u00a0or \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0CTRL+ALT+DEL\u00a0to\u00a0restart\u00a0your\u00a0computer.\u00a0If\u00a0you\u00a0do\u00a0this, \u00a0\u00a0\u00a0\u00a0\u00a0you\u00a0will\u00a0lose\u00a0any\u00a0unsaved\u00a0information\u00a0in\u00a0all\u00a0open\u00a0applications. \u00a0\u00a0\u00a0\u00a0\u00a0Error:\u00a00E\u00a0:\u00a0016F\u00a0:\u00a0BFF9B3D4 Press\u00a0any\u00a0key\u00a0to\u00a0continue\u00a0_ </p> <p>Although both do the same thing, we recommend <code>SCREENS</code> for screens that exist for the lifetime of your app.</p>"},{"location":"guide/screens/#uninstalling-screens","title":"Uninstalling screens","text":"<p>Screens defined in <code>SCREENS</code> or added with install_screen are installed screens. Textual will keep these screens in memory for the lifetime of your app.</p> <p>If you have installed a screen, but you later want it to be removed and cleaned up, you can call uninstall_screen.</p>"},{"location":"guide/screens/#screen-stack","title":"Screen stack","text":"<p>Textual apps keep a stack of screens. You can think of this screen stack as a stack of paper, where only the very top sheet is visible. If you remove the top sheet, the paper underneath becomes visible. Screens work in a similar way.</p> <p>Note</p> <p>You can also make parts of the top screen translucent, so that deeper screens show through. See Screen opacity.</p> <p>The active screen (top of the stack) will render the screen and receive input events. The following API methods on the App class can manipulate this stack, and let you decide which screen the user can interact with.</p>"},{"location":"guide/screens/#push-screen","title":"Push screen","text":"<p>The push_screen method puts a screen on top of the stack and makes that screen active. You can call this method with the name of an installed screen, or a screen object.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVcXG1z2khcdTAwMTL+nl/h8n3Zq1xu2nnr6Zmturpcbk5cdTAwMWN7XHUwMDEzx/Fb/HK35ZJBgNaAMFx1MDAxMrbxVv779chcdTAwMGVcdTAwMTIvXCJgMEtyVGyMRkitmaeffrpnJn+92tjYTPqdYPO3jc3gvuI3w2rXv9t87Y7fXHUwMDA23TiM2tQk0s9x1OtW0jNcdTAwMWJJ0ol/+/XXlt+9XHUwMDBlkk7Tr1x1MDAwNN5tXHUwMDE49/xmnPSqYeRVotavYVx1MDAxMrTif7vfn/xW8K9O1KomXS+7SSmohknUfbxX0FxmWkE7ienq/6HPXHUwMDFiXHUwMDFif6W/c9ZVQ79cdTAwMTW1q+npaUPOPLSjRz9F7dRUY5hgWqFcdTAwMWGcXHUwMDEwxm/pZklQpdZcdTAwMWFcdTAwMTlcdTAwMWNkLe7QJjQv9MPZWalafuj/WTqqmebJXHUwMDE3nt21XHUwMDE2NptHSb+Z2lx1MDAxNEf0KFlbnHSj6+A0rCZccmrlI8eLvtWNevVGO4jjoe9EXHUwMDFkv1x1MDAxMiZ9d4yxwVG/XU+vkVx1MDAxZLmnT4prjzFccmgtN1x1MDAwMCx7WPd9oYzHuFVWgFx1MDAxMlpxgSOGbUVNXHUwMDFhXHUwMDA2MuxcdTAwMWYsfWWmXfmV6zrZ165m53Dw/aua1tlZd09cdTAwMGasLHjKKIkwaGpcdTAwMDRhvZE4I4z2XGZyZvOtcZCOXHUwMDAyV1ZbhsCzXHUwMDE2d9PObjWFw1x1MDAxZqP92PC7naf+2ozdh5zBztZ3o1jK4yk30sFu9fz86Fg97Fx1MDAxZVx1MDAxZX5IToKqvdy6XHUwMDFmXFxrXGJ8frdcdTAwMWLdbVx1MDAwZVq+Pv2VmdbrVP1HTHGtlWVcdTAwMTJcZkeW9XQzbF9TY7vXbGbHosp1XHUwMDA2w/To19dzg19cdFVcdTAwMDR+Qo7Qmis5O/rvoHFwvV+PXHUwMDBmPnROXHK7XHUwMDEwd1dvP/TWXHUwMDFj/YJ5wjKu6FGNNiiH4c9Re1xujVx1MDAwNcGNsoh8MfjX/CvGYIng18BcdTAwMDRYo/lqwVx1MDAxZuvz8Kh8X98qb5v7crdzqe3t4VLAb1xmXHUwMDFhLkGwZYE/XHTuk0nIXHUwMDA3XHKFyDdGXHUwMDEx+Fx0XHUwMDBmMyNfto9iXHUwMDFktMzno3q3vHuO8mRfrDnvXHUwMDFiXHSe0VJoXHUwMDAzipxcdTAwMWPsXHUwMDEw8ClcdTAwMTB4TCgujaBcdTAwMWZccrBcdTAwMTDu0Vx1MDAwMquJcdxzZsZcdTAwMDGPfFxm5lx1MDAxNH6YlIrJn4fjhbZKSJhcdTAwMDPmXHUwMDE5mqJ2clx1MDAxND5cdTAwMDQpOVxmXHUwMDFk3fZbYbM/XHUwMDA0iVx1MDAxNP9k4FGlXHUwMDFiXHUwMDA07Vxy/t/2L42wWlxy2v/MXHUwMDBmWVx1MDAxY9D93Vx1MDAwNfXwN980w7rzls1mUFx1MDAxYnajJCQpNmhOolxcXHUwMDFmV8hcdTAwMTKfLtfdrY4+UdRccuth229cdTAwMWVcdTAwMTdb9Sxv1kZcdTAwMTR7M1xigUTgXHUwMDE5/L/nzVx1MDAxNyfbd35n//D+Zlx1MDAwN45bV+clXHUwMDE5Xa+5Nyu0XHUwMDFlSoZWUawg+squ4r5P4cVcdTAwMTDgkFx0ozSSWHpcdTAwMTFvXHUwMDE2MiPMgTfnjj15s2aS5FxymiyU/uAxy1x0Nupblj3pipxZbPxCiVN41VxmJjuzgKFvrsiZ81ZNdebHbp7gzVxc5eLCqDtTTFKkj0Xm8N9z5+kjP4c7i1Fsvpg7g9RcdTAwMWVcdTAwMThtKTZLhZSaXHKrUqU8y8iVXHUwMDA1Q2lAczli2HL8XHUwMDE50JOcXiR/XHUwMDE13Vx1MDAwYsxcdTAwMDT3RuY5cVxmkqhF0082bt9it6A2inXyXHUwMDE5+Vlq51x1MDAxNHf/nkPOk0Hl7PC7STlsV8N2nVx1MDAxYTMm+VZm2J0hRqQuXFzpOSuZp4FzSYNI6Vx1MDAwNVx09ixRdV3hd5zN0mOGRFx1MDAwZadMg34o6Xo64+vAqqBd/b5N0/OvIZtcdTAwMTgpXFxOXHRccpL2s1xcXHQ7Zlx1MDAxNNmkZZrzcCYkmT5mU9OPk62o1VxuXHUwMDEz6vrPUdhORrs47cs3zs1cdTAwMWKBP8ZcdTAwMWb0TPm2UT7ouCtcdTAwMGXTevbXRuYw6YfB33+8nnh2MZbda1xmxdnlXuXf52Yyul0hkZGsZsRcdTAwMDSQucz3iGy6XHUwMDFlXUtcIjPUtYpcdTAwMGLrKkdEMyp72DTLkOhRzoeugEN5iFUjdi2HxzR6hmv6p4GowfKMTFx1MDAwNzRmXGJcdTAwMDCaXHUwMDEyaVdH4qBzicZcdTAwMTONSUtcdTAwMDJcdTAwMTJgxSSGXCLPqMsnselp61x1MDAxMGFI5ViCXHUwMDEzYl1HWZM76YnEhCdcdTAwMTEoWilwWog/l8Sml1BzNpXIKGlpXFy4pZtcdTAwMDGiVuNGecagdIqBMkgk++GHZrFSIZTT1jFcdTAwMTTPSWNTXG6F0rDRo1x1MDAwM1wi05K7bFx1MDAxNmZPsPzfXHUwMDBm3vfffLx4+yG86PcvL9tcdTAwMGbNXHUwMDAztt5cdFx1MDAxNiFcdTAwMWY8XHUwMDA1oDSjIE3cnYmhtE5cdTAwMGXCQ8s1UlJPRJZcdTAwMTNsa1ImJ7BokCBeoExeXFzLI6fjdq5cIsdz8Vx0qjBjUOT3zpjZq3kx6NPLclx1MDAxZuO9m/2y6uzU7vq4t/bwtJ6SXHUwMDAyXFzh0lx1MDAwMojhQMuN8Fx1MDAxOKN2XHUwMDEyQYyyXG47qlx1MDAwMP7eOjblXGJcdTAwMDBMw1x1MDAwYpSxp1TgrFwiPWJXXHUwMDAwTi1kXHUwMDExOEFKrTnD2UXgVrVcdTAwMWQlW5c7+zbeerhcdTAwMGXOeVJcdTAwMGab61x1MDAwZU4hPFLXRlJ4XHUwMDAyru1wdaqktYdcdTAwMTTTSGExJPDgYjLQiIrlwVx1MDAxMqkzzcCZYSueYTRBsNP7+PDQvLrQlzWZhLJ/wXJCaCz/XHUwMDE4tHx9Pe26+/H+obi77iad29Ln2t71l/v34tNcdTAwMTKuW8Wbm+B3/Vx0opCfRNt7N3uldydLuO5N+fN+VZ2etu7Ptt9WoFx1MDAwYu/fXHUwMDA0/WVV4Y1GsHJZXHUwMDFjUFSelpJcdTAwMTdcdTAwMTFcdTAwMDBSVkHaWsqZXHTg0n93/mf/rnZcdTAwMTi/3T/dub1Oro72dtY7XHUwMDBipDOMR1x1MDAxOZ5kLolcdTAwMTJsZJa1RKmFJ4hcYkmju0lYu2BcIkhZ01UwQTxBbrZ74PpqzOGVm/cmmbdSqYRcYozPXHUwMDE1jbJcdTAwMTHPSsiUT3NDbKtJoXKj7dA5g4JyhrVvXHUwMDA1Zb/T8Tq9uHFcdTAwMTmnNdxfXHUwMDFl3+TksnKupL+KsnKhbVNdsbAkI6coRZe1XHUwMDAym10oTqe8Zbhi1Y9cdTAwMWLBsoOx9ijUSlxutIYh48PB2IBcdTAwMDecXHUwMDE5amTkhsYsNvFb5IncXHUwMDEzzsW04kZxd5dcdI7JuSRSsKBpRCwl72JsJom7iVx1MDAwMiZI187vqc8vy5BuJLvnWaCQs2Omssx0ibeRL8tYo5hQSlCqRfwhclXNp1xuXGJ4Wlxu5UaUXHUwMDEz/VEnPp1QUJVcdTAwMTl+ilx1MDAxZqg0UoyotHVcZkvZ9V7l3+emXHUwMDEzZVxuQztHkETtYlx1MDAwZXE/XeusKaFcdTAwMDBcdTAwMDePUkpcdEaCXCKVn027pISiSFkjXG5cdTAwMDDNgVx1MDAxOGexuapcIkJcdTAwMTFcdTAwMWVQnm+UIHfgUptcdFx1MDAxYZ9z7qFby6WsK7vz3ErHgdJHXHUwMDFhM3jWcqpF+IS6jWfG/I18UlwiQrGCuVVBjjGktpg765FQKHhcYkB3krbaMGV/UkIpRJR7jWNpWXxC2UAhnyhcdTAwMDZMXG4+R6F1eq63pnxcIjR6qJTRmlx1MDAxMiPQw3RcIoT1pFx1MDAxNVppXHUwMDFhXHUwMDE4o5larJJVLFAsY5xuT9lcbpOcTZj6pifxSEXRXHUwMDE1LKUsbv52lE9QXHUwMDExMii1y1x1MDAxYVZCJ0ipy0vOXHUwMDFhzSFPSJxJKy2iXHUwMDA2olxuXHUwMDFh1DE6sVx1MDAxZadcdTAwMGUkkyl40Kjit6nXn41OXG5cdTAwMDGVNo5BaU46mbbEu3ihK7FcdTAwMWKSaJqjMv7pTInTqFxcOjg9tlx1MDAwZqdYPWbnX2prXnwkXHTmKTBGK0U9j7lcdTAwMTn5lE8096hcdTAwMDeMJFVohFx1MDAxNHKx0sNLbHBAXHUwMDEy+EOZ2ErKj0dcdTAwMTf7b5p7R8FJr1x1MDAwM+XD6qfT3avP0bLKbujkRcbcL1h6l4XhVEmwXHUwMDFhQc++kKxxU2p3XHUwMDBmto7fn15Hl5dxq9xTbz+sO/qBMlx1MDAxZlx1MDAwNsg5PaxQo/tcdTAwMWIs86RbdUSpXHUwMDEx0zQq6zUvxLlgXHUwMDE0RC0+I4IuMDGElph4XHUwMDFlQf5cXHSiLlxctmyF0qTF5+Dmz7+fd9iX3bPem/P6Wb9S7d10+s8qRq1cdTAwMTSdgjRcdTAwMDJ1ttRcdTAwMWElz3XH41x1MDAwNZRcdTAwMDdcXKBcdTAwMTKkXHUwMDExXHUwMDAw0C6WOy59Yki4WXVjV7wrYYF5oe9cdTAwMTKzJI3CzNKIuWg+RPDiJMcyRVx1MDAwMlxi7ezbzirJznZ8dVx1MDAxYpr7sniItpvxzVFcdTAwMTfWPckxaDw3XHUwMDExQsLEas1gWJWUXHUwMDA0+Vx1MDAwNaBUaaqthF5s31lcdTAwMTHy81x1MDAxYlCmrNjnXGYkokSxYqSrOHp7v7d3wpPjg6D8caeCeLK/XHUwMDE0pFPmzjVH8ayqy1wiS/blWi7Zl1x1MDAwYi/ZXHUwMDA3LC6DOpaXgs1cdTAwMTHKplx1MDAwZvx6TnFazTyBXHUwMDAyJMFcbpRcdTAwMWTZRq09bi0pXHUwMDE5Zlx1MDAwNXk7vkwgk5LuopVA6TJcdTAwMWGYtFx1MDAxZMcqz1xiSomsUW5cdTAwMTNcdTAwMGVcdTAwMWL3dVx1MDAwMaBcZua3XHUwMDFmr2Kp69xxJ2fHTEWL6UFiI1+0oFx1MDAwNF1cdTAwMGLLSSy7moTiuZNcdTAwMDZLXVx1MDAwNWjDnO3I3L7EpzN+tqJFqVx1MDAxMFHuNYal7HKv8u9zq1x1MDAwM1moio3klKHjXHUwMDFje/mOXHUwMDBm3vdKeHi6/eXjx/pd/fL0T41FS01cdTAwMWJ+pdHrXHUwMDA266CL0Vx1MDAxNYRAWMNcdTAwMTQoPZK1XHUwMDAxqWYrgCSElJbU68uIg9zE1jRtXHUwMDAwlMhz58Gr1Vx1MDAwNrUusWjnXGaO3zW2XHUwMDBmv1x1MDAxY4ja4bugM5s2eD3tui9a9rDWTZCtTHM8bqldXHUwMDA3nfFkyfO0XHUwMDA1isL/ocWme+D4XHUwMDFjM6zTcTNcdTAwMTdcdTAwMWasUFxcaItcdTAwMWVBR9Cjulx1MDAxZPt2ZFx1MDAxYo1cdTAwMTJcdTAwMWVoXHUwMDA13M2aUFx1MDAxZbtYXHUwMDExpzBZXHUwMDAwj9PFXHLnkrJxJifJXHUwMDBiro1cdTAwMDeIRksrXHUwMDA1XHUwMDEy6Mc20qCbu2GYXHUwMDFisZXMiTzb8WaUXHUwMDE308PMxvCuXHUwMDE1t0NDS+pAt0JcdTAwMDAmLNrgdJLmMt1qwMBcdTAwMDD8rFx1MDAwMqNcdTAwMThT7lVcdTAwMWGH05xcdTAwMTKjkFM0K+RcdTAwMTTQbjGylLNrjOkxY105XHUwMDA1085329qY0E5VjXCKJVx1MDAwNWKYNcYoXHUwMDE0L7Qm2yjPpYaoLaOsg7p9nFLIXHUwMDBlt1KNJCjRXHUwMDFiSW4xXoejhEpxQlHWef9/nFwiaFx1MDAxOK2rXHUwMDE4XHUwMDE56lx1MDAwYs3HOUW6rXCIlIQq1EaQfpzOKUVWTZ9cdTAwMDJcdTAwMWOxijFlJLOKI1GZlVx1MDAxM5jOc5UwTckxxVx1MDAwNUvZxI+9Qa9cdTAwMTDP7lVcdTAwMWGHclx1MDAxMZ29erqDW/x6lFx1MDAxMO5cdTAwMDZcdTAwMDNC0Fx1MDAwZatPSjB7zM3bMLgrT5qRSV9OeKVcdTAwMWTquChwXHUwMDBm+9fXV1//XHUwMDA3mNhRliJ9 Screen 1(hidden)Screen 2 (visible)app.push_screen(screen3)Screen 3 (visible)hidden"},{"location":"guide/screens/#action","title":"Action","text":"<p>You can also push screens with the <code>\"app.push_screen\"</code> action, which requires the name of an installed screen.</p>"},{"location":"guide/screens/#pop-screen","title":"Pop screen","text":"<p>The pop_screen method removes the top-most screen from the stack, and makes the new top screen active.</p> <p>Note</p> <p>The screen stack must always have at least one screen. If you attempt to remove the last screen, Textual will raise a ScreenStackError exception.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1cXOtT20hcdTAwMTL/nr+C4r7sVcWz0z3vrbq6XHUwMDAyXHUwMDEyXHUwMDEyQnhsyObB3VZK2MLW4ddaMsZs5X+/XHUwMDFlhSDJQorBxnHiXHUwMDBmXHUwMDE4a+RRa+bX3b9+yH8/2djYTKbDcPO3jc3wqlx1MDAxOXSj1iiYbD71xy/DUVx1MDAxY1xy+jSE6ed4MFx1MDAxZTXTMztJMox/+/XXXjC6XGKTYTdohuwyisdBN07GrWjAmoPer1FcdTAwMTL24n/7v4dBL/zXcNBrJSOWXaRcdTAwMTG2omQw+nKtsFx1MDAxYvbCflx1MDAxMtPs/6HPXHUwMDFiXHUwMDFif6d/c9K1oqA36LfS09OBnHhazFx1MDAxZT1cdTAwMWP0U1FBXHUwMDBiLZW28vaEKH5GXHUwMDE3S8JcdTAwMTaNnpPAYTbiXHUwMDBmbcrRNNFcdTAwMDae897Fx119cmhcdTAwMGZOxyfZVc+jbvckmXZTmeJcdTAwMDHdSjZcdTAwMTYno8FF+D5qJVx1MDAxZH/pmeNV31x1MDAxYVxyxu1OP4zjwndcdTAwMDbDoFx1MDAxOSVTOqb47cGg306nyI5cXNGnXHUwMDA2cs6M0Vx1MDAxNqTiXHUwMDEy6G7V7fiXXHRcdTAwMDQz1lx1MDAxOFx1MDAwNUJcdTAwMWEhXHUwMDA1qFx1MDAxOcl2XHUwMDA2XdpcdTAwMDeS7Fx1MDAxZjx9ZbKdXHUwMDA1zYs2XHTYb2XngFxugrPz7JzJzf1Kp5i0Uphs+k5cdTAwMTi1O4nfIauZNcBdfjRcdTAwMGXTTXCgpJNaZlvkrzjca6Vg+HN2XHUwMDE1O8FoeLNam7H/kJPWXHUwMDBi+nxcdTAwMTZJeTTl9lm8grPdXHUwMDEwYKe1v/3X85NcdTAwMDP5+2CrfztXXHUwMDAxesFoNJhs3o58vvkvXHUwMDEzbTxsXHUwMDA1X1x1MDAxMFx1MDAwNVpLa43TXHUwMDEyTVx1MDAwNspu1L+gwf64282OXHKaXHUwMDE3XHUwMDE5XGLTo5+f3lx1MDAxYvp0mSroo+OO0KD03NBcdTAwMGbHU3ux39vnfHz+ctLeiyb6hfue0Fx1MDAwN/5N7IPTTFx1MDAxOSNRc1x1MDAwZVx1MDAwMoyyXHUwMDA17EuBXGalQYKeddo4vlx1MDAxOPbPgzPO1Vx1MDAxMrGPQipwlq9cdTAwMTb7vd45n2zx5NlhNFxmwz9eXHUwMDFlbb86iJeEfVx1MDAwYlxccG6Whf0kvEruXHUwMDAyvkVdXHUwMDA1fFx1MDAxMNZx5NLh3Mh/d941l1fDy5fT3taHwfjj8PiF2F1v5CMqprRBXHUwMDA0dEZ6XHUwMDBiWlx1MDAwML7lwMhcdTAwMDRJclxi1iHkrMBDcG+c4udYxj1wW1x1MDAwNryBWZhrgdL7pp/IxDtcdTAwMGJK2PvAPEPToJ+cRNepjbaFo7tBL+pOXHUwMDBikEjxT1x1MDAwMp40R2HY34D/9n/pRK1W2P9nfsfikK7vJ9TFb251o7bXls1ueF5UoyRcIlx1MDAxZXY7nFxmcmvcJElcdTAwMDKabrTXmr2jwShqR/2g+7Zaqlpt/rLMd6gzUVx1MDAxM5w9nNNnIHojxPz6XFy/8/fQZ5zF5uPps3HMSFx1MDAwMGm4pXdbVGfjJFx1MDAwM81cdTAwMWRcdTAwMWGU6EjjXHUwMDFmRZ1cdTAwMWQyrogwS2MsR9TuXHUwMDBl5XZMIzk6KVFcdTAwMDHXOlx1MDAwM/BXlyaFv4VcdTAwMDeoeipkjao/ijLGSTBKtqN+K+q3aTCzXCJfQ5K9OVx1MDAxY0Sqvs2xl5IzhVxcS8FpI5UgL1x1MDAwNLmT2sHQLyFcdTAwMDMgTqLJZKNVTtibXHUwMDEzPt9cblx1MDAxNfZb31x1MDAxNqk+UMmJ1OBcZml5nPV7pjhqilx1MDAxM0pCSaZcdTAwMDVIXHUwMDA3nITiTlmnSlJ1gzjZXHUwMDE59HpRQmt/PIj6yexcdTAwMWGni7nldbxcdTAwMTNcdTAwMDYl40F3lVx1MDAxZps1XHUwMDA2Qz9j0aZn/21k2pJ+uP3/z6d3nt2ohHI6WkJxNt+T/PtcdTAwMDNcdTAwMTi5sJWGXGYtqVx1MDAwNlx1MDAxMZdM8b/JyM9G2NpcdTAwMGKuw/1nW1x1MDAwN89f9LWNIVhvXlwinGOOTFx1MDAxNVxiNN5y68xcdTAwMTJ8XHRGLeNcdTAwMDLAOeK+ZCaEmJHsIcGo1suj5ESVkKJcYs5cdTAwMWaBrNRYMECFuIqIkYLtSkeLZLhcdTAwMDVwNb+jPdzpXHUwMDFjXGZfXHUwMDFjvdtcdTAwMWRcdTAwMWNfj9xhcjQ+XHUwMDFmivVcdTAwMDao5IJcdJ9cdFGWdFWqYrJEXG7NuOPGXHUwMDEyQqVcdTAwMDZcXFxmnsuOXHUwMDE3SVx1MDAxZaE4mTS7fHDWMenXZ8rufYyvOsPx+MNWdPomuVx1MDAxOMllXHUwMDA1jIQ3yHG7x4O+XHUwMDE1qlxu+k6AUkS65jfN76eHb9o9t3+0r/76NH32abtzKI+WivxWXHUwMDEwd8IlQ98xolx1MDAxZYJcdTAwMTONXHUwMDA0YpGuXHUwMDAwfaGQXHUwMDExKZFcdTAwMDY5cDBcXC9GMi02XHUwMDFkhGqZ6CdcdTAwMTNpSTS+4nSJXHLDl+PX19fds1P96VxcJJGYnvL50P+0bt5Y7U+v4+3jyejgdO/Vofj0x9SeLWHe8+H7ydvG5Ni+v+7Fp1x1MDAxN83wI3ZcdTAwMGaWMC9cdTAwMWab//VO3mLyprl9XHUwMDE1NT/uvlx1MDAxMc1oWfE0J+S5pTnAqrSRrktcdTAwMWKRWjiKvOzcNuAsnuKOONpcdTAwMDXV3u6Mmq33h+r6dL3DTGlcdTAwMWSzSkvNOZleNZMuXHUwMDA1QaNOcrKERJ3JXHUwMDE3zlxudj9cdTAwMTNA6npcdTAwMTbewc1ErqZxq/myrO9CWqIrhj+Ct6tBolx1MDAwMan1fZCYbXiW2Vx1MDAxMVx1MDAxNOWlgYfnwDZcdTAwMTdJXHUwMDE38jzZVb7meYLhkFxyXHUwMDA3w09xmln55e4sj9CF7z12lqckU63qVeZ4dHVkROxXXHUwMDEz71Zyft2rN57L0L1H8L8gmERUXHUwMDE0ZiOZOzFTq7CGIVx1MDAxN9pcYqPJXHUwMDE3w2Ip2yrd40RvXHUwMDAxkVgwXHUwMDAx06E1QpZ1XHUwMDExuPGCmpRvXHUwMDAyXHUwMDE5XHUwMDA0V9ZNQjUpTC7JvopEXHUwMDBmcFqcx0z01NO6jUJWxVEsXHUwMDBmjmyoRE2rmUsx3CRVXHUwMDE0U1x1MDAxNFx1MDAwMyuOdFx1MDAwMtpvZnqKt/EjZVtqQJWOl/GUTfkk/35vo2JyRYVZo0JwXHUwMDAx8iD3yFx1MDAxYtczp/U0Ko5LZi1ZXGZDsaySZtaoXGJmXHUwMDA0V4pWnlxmXHUwMDBizEZcdTAwMWLLMipoOWghfSmfLpIrRuVsimWSglx1MDAwZetcdTAwMWNcdTAwMTiCXG6WykSgjZXOc5PV2lx1MDAxNKCYXCJbte9oU4DRXHUwMDBl0PIopykqJlx1MDAxZVJOXHUwMDFlXHUwMDAzZ8QmrNTkQoThXFyan9SmVEPKv1x1MDAxYWU0LcuiXHUwMDE08l+zXHUwMDE5XFyurZS+nDm3SalPnaynSdHKMCO55lx1MDAxMiVIk+tk8d/XXHUwMDAyXHUwMDE4+X3iMd6x4YItXHUwMDE1VSaFdMFcdTAwMTkjyWhJWnXSiez+b02KU1xmpXbKcsFccqrcrtxYXHUwMDE0dPRdhfpcdTAwMDFcdTAwMDHEQiSFK5fJ8nCDMqt8P4FaN6r3NVx1MDAxZC5t6T3Vuq5XSldTXHUwMDA1Tv5cdTAwMTM06vmpgn6m8FX0cnLZfvfhQrevT49+j79rn+C31ZrIMzBcbj6QTCatr5lpXHUwMDE5UUAkTSluXHUwMDFkUSaXL8ivR2VGeTOvVptcZlhdJ59cdTAwMTbVXlx1MDAwN4Rwvk1s/ui4cbU/tn+1wsvOycdLXHUwMDExTl87PNhZe3Rq5uNcdTAwMDdB2DMobLFwSG6XkS9cIuRcbq2EQbdcdTAwMTA6l16YcUIgUTfzgHB4kdR0I57s7CB2I9lcdTAwMTZcdTAwMWZa4z+O48nFslKyVlpuga9cdTAwMDD7NuegS1xy3IAkjJyfcMX93dFe7+L5azHF8L1otTvDg9Z6Q79cdTAwMDHWMrCKmKXTzmlcdTAwMGVcdTAwMDXoXHUwMDBiKYlcZiuL3KLv6l1cYvlfyjLLLElcdTAwMTJHXHUwMDA0XHUwMDEy7CcpypxtPT9/XHUwMDFmbPHD9rv9t1x1MDAwN83rQZDE46X1xqK0uDSNqlxmYWpcbp2gfHVbajN/W3h92Wd9I1x1MDAxOFxupYVcdTAwMDRSXHUwMDFiXHUwMDAxekafiOiQWfHxi6b9WKzOWVx1MDAxZMBcdTAwMThFXHUwMDExlKPolYiLJZ9VVizincxnZZRcIq/mfLmjpF5cdTAwMTTqy2Jss5pcdTAwMTCG1P1BNZBl50Q448AlxXBKXHUwMDE5jeA4N3d2r/neNk3RKsWlZJBuTvjZklwijWpQfVx1MDAxOS7hKZvxSf79vnVTqWD26C071cjR3ec5k6vXoVx1MDAxY530XHUwMDFiz/u6od1+6/CV6thcboPSXHSanfEoXFxcdTAwMDNcdTAwMWZN+GJcdTAwMDZ89yTB0T/jUEy0XHUwMDFhJ1x1MDAxOHF0X1x1MDAwZVx1MDAxMMpavlD1Jlx1MDAxOVx1MDAwNf14XHUwMDE4jEhd7jAsucxpTdO9XHUwMDE0qJw1YsWM9DGfLfHZXHUwMDAy41bedI9r2XSPizfdc1fdXHJBtsOSf7zHk5P1O38vtV5dP0SDXHUwMDAySlx1MDAwNspYIynYXHUwMDE3zuqZxnuLjLyhptPQmVxccWXpWlxyilx0XHUwMDAwKYiekW1x7q5cdTAwMTJcblx1MDAwMpM+XHLCLYVMoPJcdTAwMWRaN3TBu1x1MDAwN4fwkCzJXCJ0gTyzclx1MDAwZtHLOelCvcvYKDa7k+8z5CONTOvo5bIscEaLJITl3JdR9Ndi5D1cdTAwMWLw61x1MDAxZpcsUFx1MDAxOFx1MDAxMCCNpZ3zXHUwMDE5XHUwMDAyJY0uyWRcdTAwMTjSgCR648jGXHUwMDE5xJJMP1x1MDAxMk+pXHUwMDA2s381yjheXHUwMDE2TVx1MDAxMZWJXHUwMDA0XHUwMDA0n2+mUHV+nlwiPlxcyNa1fHn54tnhm9Z04sK+qirdrFx1MDAwZk9cdTAwMDHBmSFoI7FD32ePRYOGqH1cdTAwMDXRKCAuY6VSXHUwMDBipVx1MDAxM75BVO5o8ypcdTAwMTNcdTAwMTWyXHUwMDFjUlx0IdWPw1Se1s37mFx1MDAxOVx1MDAwNLK0Wq+eXHUwMDAxXHTiXHUwMDFhl1FcdTAwMWOddcN1okBcdTAwMDWxXHUwMDFlxoFcdTAwMTRWXHUwMDA2NuAsoZK4/vxN4fVbv65cdTAwMTTIP/IglFTeLKBRYqYtXHUwMDFjkFx0Ylx1MDAxNVx1MDAxNoUherTYXHUwMDAzO7X2XHUwMDAyXHUwMDFkOUokj01Ow3IpsyvdWlx1MDAwZu3du/TJXHUwMDAwXHS0MVjOl/jSXHUwMDAxRaSr7iF5sFrOSYDqfVGRXHUwMDAwgdCeXHUwMDA3Ulx1MDAxNFxuXHUwMDE2yeHlclx1MDAwNF9cdTAwMTmQZNJvJaBcdTAwMTJcdTAwMWOMeegziPW59qJUXFxcbmPJISljtNEu94NcdTAwMWa3YllmNHFcdTAwMDPaWue4MkKWpPqRSFAlnP2rXHUwMDA05CUxIFGdqCFhUEtcdTAwMGbXue3ZyfXlKzWNj6ZHL+LB5OPWZft479O6MyCK1ohcdTAwMDGh4MSCjK9ZXHUwMDE0XHUwMDEzNUJcdTAwMThGXHUwMDExgnRElFxibvlfUPlOmVx1MDAxYSBcdTAwMWHmIFx1MDAxN1x1MDAxNfzotUPHXHUwMDA1t8LlbmiFmZo15Cm4OE8xrlqvwVx1MDAxN1xyrTXzN6/Ub/2a8lx1MDAxNFxuKsH/mFx1MDAwZjk3w41cdTAwMTC5eCFtXHUwMDEwXHUwMDAwzdAnckxcdTAwMWHai8VcdTAwMWXdrNVr7dtotPDP9/tcdTAwMDdcdTAwMDfhXHUwMDBlLdeGOeu7XHUwMDE2NddWlVx1MDAxYdP8U2zKoV3l7yQspJVz0pR6h7FRKOs4RS9OXHUwMDFiXHUwMDA1WphcXGfyRpZcdTAwMTORXGLCao1cdTAwMWH8XHUwMDEzYuWfJJiLpNT3wszIRFxcSCvyyEJq8lx1MDAxZqIkXHUwMDEzkmfx7Wv+4XY0d7X0/0hcdTAwMTSlXHUwMDEyyOlgXHUwMDExwlVcdTAwMDTlyc3s/jGhk4TwdrtcdTAwMTVcdTAwMDTpqHVjyrNb3LyMwsn2XT056cvbx3QxvVx1MDAxNVxu/Y3+/fnJ5/9cdTAwMDPV4pXXIn0= Screen 1(hidden)app.pop_screen()Screen 2(hidden)Screen 3(visible)Screen 2(visible) <p>When you pop a screen it will be removed and deleted unless it has been installed or there is another copy of the screen on the stack.</p>"},{"location":"guide/screens/#action_1","title":"Action","text":"<p>You can also pop screens with the <code>\"app.pop_screen\"</code> action.</p>"},{"location":"guide/screens/#switch-screen","title":"Switch screen","text":"<p>The switch_screen method replaces the top of the stack with a new screen.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1cXG1T20hcdTAwMTL+nl9BcV/2qsLsTPe8btXVXHUwMDE1XHUwMDAxNlx1MDAwMVx1MDAxMpNccuH17opcdTAwMTK2bGsxsrFlXGZs5b9fjyCWLL9gg3DIKlXY1sjj1szTTz/dM8pfb1ZWVpPbTrj628pqeFNcclpRrVx1MDAxYlxmVt/689dht1x1MDAxN7VjaoL0c6/d71bTK5tJ0un99uuvl0H3XCJMOq2gXHUwMDFhsuuo11x1MDAwZlq9pF+L2qzavvw1SsLL3r/930pwXHUwMDE5/qvTvqwlXZb9yFpYi5J29/63wlZ4XHUwMDE5xkmPev9cdTAwMGZ9Xln5K/2bs65cdTAwMTZcdTAwMDWX7biWXp425MwzUDxbacepqWiElFxiKrsg6m3SjyVhjVrrZHCYtfhTq7fHrZPex6uT643+2ra4qrq7KKlmv1qPWq395LaV2tRr061kbb2k275cYo+iWtKkVlE4P+1b3Xa/0YzDXm/kO+1OUI2SWzqn+PBkXHUwMDEwN9IusjM39GlccpVgxmgrpOJSKG3VsN13IDUyY41RXHUwMDAypUGJQlx1MDAxNSzbaLdoXHUwMDFlyLJ/8PTIbDtcdTAwMGaqXHUwMDE3XHIyMK5l11xiXHUwMDE1XHUwMDA05/XsmsHD/UqnmLRcdTAwMTJN1n0zjFx1MDAxYc3Ez5DVzFx1MDAxYcFdvrVcdTAwMTemk1x1MDAwMCA5OpR22OB/sbNdS8Hwv+IoNoNu52G0Vnv+Q85ab+hWXHUwMDExSXk05eY5TCpR2N89QLt7uub0detcZuKPw75GoFx1MDAxN3S77cHqsOXbw7vMtH6nXHUwMDE23CNKaC2tdU5cIupsMltRfEGNcb/Vys61q1x1MDAxN1x1MDAxOVxi07Pf3i5cZn2Jalx1MDAxYfSFXHUwMDExllx1MDAxYm5cdTAwMTTOjf0/wi+wKW/OKp9cdTAwMGU+XHUwMDFjXHLuTreCne0vP1x1MDAxMvuCP1x1MDAwZX5pmDJGguZcXKAwelx1MDAwNPvogKHlXHUwMDFjXGJfTlx1MDAxYsefh/16cM65Klx1MDAxMftkmHBOw5LB/2Vf7Z00vsRna/31w62d/atccn5cdTAwMTmUXHUwMDAyfsdRcO2kKVx1MDAwYvxJeJNMQr6yelx1MDAxYfKNdMid4PNcdTAwMDM/6H95t3n2Z3vzc3x4dHP8YaNcIlx1MDAwZVx1MDAwZl478J1hloNBXHUwMDAx3FhrR4FvhGJIzi+ERUW+XHUwMDAxz8K9cYrXYVx1MDAxY/eC23HAXHUwMDFiUYS5UVxuLU1cdCxcdTAwMTflL0fxXHUwMDFl5dKAxlx1MDAwNVCeoalcdTAwMWQn+9FdmHLDyNnfg8uodTtcdTAwMDKJXHUwMDE0/mTgfrVcdTAwMWKG8Yr4b/xLM6rVwvif+Vx1MDAxOeuF9Pu+Qz36zfVW1PDOstpcbuujXpREpMOGzUk7N8ZVsiSg7rrbteJcdTAwMWS1u1EjioPW1+lWPc2ZXHUwMDAxi2eHYVxmOEVUoXF+bz4wx1f609ZBv9M53ZKbXHUwMDFmq+8/71x1MDAxZL52b7aOkXJDq1BobnKKNlxyYyiYoJNaodNKKlMwrFx1MDAxY29cdTAwMDbMOGTozblzXHUwMDBm3uxcZqCRSmZ38DeIWUpQzFi2N8PKL5Q2ReetcLI3g1x1MDAxYfnmkrw5b9VMb75cdTAwMWbmXHTuLCjgTPVnXHJcdTAwMTSXtMuJocf8efbML+DPxSD4gv5cZsYxdEpLZVx1MDAwNXJNideoQ2vrm41cdTAwMTDg6FJcdTAwMTC6YFo5XHUwMDFlrYk2hFBcdTAwMTKApsQ6nvHG0L9cdTAwMWRnXHUwMDE20GpDjsCdmaRRSVxccKKdJ0Tv1MxcdTAwMTn+PsMjlbJOLKJcInN2XHUwMDA03eRdXHUwMDE016K4QY1cdTAwMTmVfK8ybM9cdTAwMTElUlx1MDAxZq72vZWcXHTllPSJsybcWpVcdEs/XHUwMDE2QcdcdTAwMWLNQFhJk01aXmr/7+GKb0Ozwrj2uFGzM7CcUWucgeHcijTrp+R/kk2KQqexUjjpaO6tXHUwMDE5s6lcdTAwMTX0ko325WWU0Nh/bkdxUlx1MDAxY+N0MNe9ozfDYIxB6J7ybUVG6PhcdTAwMWVHiT17t5K5TPph+P5/bydePVx1MDAxNcv+XHUwMDE4Q3HW25v868JUZkFOT7BcdTAwMTUnW3CBPGO2XCJ9pUxmgUnUymjDSX7wQnXJSMtIXHUwMDBmWFx1MDAxNFx1MDAwMlx1MDAxMVxi/C9DZI5ZckJjuOFWTiQy5Vx1MDAxOGiN5H9cdTAwMDLISclZx5iMfIE6cFnDMojs6YnCnEQ2O3lcdTAwMWQhMs0taUhKXHRBccvR5i6651xmw1BrcjJCtsy50YIsNruGOmJcdTAwMTGXxPIkJo1cdTAwMTREU1x1MDAxM0js5+asabD1x9o4Ylx1MDAxN2StXHUwMDE5hUG0tnj2O29cdTAwMDHXXHUwMDE0yEDLjNlcdTAwMWXjrePT885e5Th+31x1MDAxZlxcRWu1TrR+dNF83Vx1MDAxOVx1MDAxNfi6oPWFXHUwMDExMFx1MDAwMimBzO72vihuXHUwMDE5+aZwzlx1MDAxMYNbmUsvn15cdTAwMTTXurzSoCNgSJJemdmlZVmPXHUwMDE1rrPg8nKFa6LGafjUToLBXFx6+Vx1MDAxODrXb+tcdTAwMDfBzqf1+LyyTTnCIN6CratS0VlcdTAwMGJ6zbBcXHgqYL5cXG2c4Vx1MDAwZYBcdTAwMTdcdTAwMTN+R0GXlI5cdTAwMDalwaJ2ZdStVYmVayFcdTAwMDWCUy+CzyFcdTAwMGJOqFx1MDAwMtTtYSVuXHUwMDFjbFx1MDAxY21tXZ9WKlx1MDAxZiuN3km/nCqAplx1MDAxMETiQC1cdTAwMDH9gtT4dFnprFEqP+WP0vOHs697h5+PzuqdXHUwMDAzPKq15Hn7Knnl9KzSlFx0lNdcdTAwMWFcblRu+S/twCGzaDSBTNNYQK75Kfi3UHVcIixz3caBXCI5vOxFS1x1MDAxYoZcdTAwMWb6XHUwMDFm7+5a56f6rI5JhLenfD70v53V77vbzul54/Bi1+3dbVx1MDAwZrqbUbR7Wi+h3+NrXHUwMDFi697B7mDQaZze1bu1qLr+R1x0/fbE+sGOXHUwMDFl3Fx1MDAwZWrrXCLYUdHazWkvLIdcdTAwMDW8KJDKubJYYFrJXHUwMDFi3dRcdTAwMDDo9Tl3Ml9Ee4xcdTAwMDFcdTAwMGX1p+jaXHUwMDFkh1eV3ubmn1j5uvm+rZ7CXHUwMDAwy0ssXHUwMDAxNVOCXCJcdTAwMWNcdTAwMTjKLa1Uo1x1MDAwYliCI6OMUyNpOGVcdTAwMTQ+s+ZccmDPw1x08kzpXHSppJxcdTAwMTDuaEpcdTAwMTRlTi9Q9J4lx5RxsFxiXHUwMDE0s1x1MDAxOc/K0mhcdTAwMTjZXHKgvVxmttqNXFwzLFJn+vd7kTrodFhvQJlb86yXVoZ/uX/BycXq3ELBMorVM6yb6Y/Ti9ZcdTAwMWPMNI90vvRHOkzM7ZCzma9cZod8XHRNqli6sMNcdH7kl06MeCRKzVxmSLBcXFhDI1JcdTAwMTRcdTAwMGLlOCQw37lUoFxyWIE4qdRjXHUwMDA1Q4da+1VlXHUwMDE0+dTtwVvRSikt8ieE5+dUeoBTQvlcdTAwMTRvnbPSM1vnreTrKs761X+Lylx1MDAxOcmlyVx1MDAxNVx1MDAxZVx1MDAxZVxuK4o5wf1FSFOluJFcdTAwMGZcdTAwMTdMKfWM3sVPVIKZjid/XHUwMDE0kZT19ib/+oRcdTAwMTWwnHuMhXdcdTAwMGUkLFx1MDAwNZ9f4M/WO6+TTYw0zO+70ki3i4iFXHUwMDA1MFx0TKVcdTAwMDOhTH7TVplUwpklia5IO5BzgsZcdFwi3zpcdTAwMDagUFJYXHUwMDE0xlx1MDAxYZlcdTAwMWKfXHUwMDA3Klx1MDAxMZo0XGKiWm7R2C836SetR5dNJWuCUTwgMVwiOWViXG5cdTAwMTByXHUwMDE33VOJZKTPNEpBI619reJvSiVrU1x1MDAwMeWPMSiVxiXcTS9cdTAwMTZcdTAwMTC1SePdaG4umZ3rvU4ukY5cdTAwMDaXK2JVXHUwMDFmzLRcdTAwMWRcdTAwMTUmNOSMa1x1MDAwZVx1MDAwNECjKVuXXHUwMDA1w8piXHUwMDEzpL7RXGItXHUwMDE1IV2bSUVcdTAwMDPHmfa0RmlcdTAwMDVcdTAwMDClNFx1MDAxM6SJcSgo21nyajrkPffHSlx1MDAxM6JcdTAwMTMgceaXRSjqar9vfTKlOO5cZo20X71cdTAwMWVfuv57UMpcZlD5Y1xmTlx1MDAwYnLKrJ3jZvqWO0cj75TUXHUwMDE57TxKKr/38fxz/Wj75FCfSLu373ai3dddgbSWM+VcdTAwMDR4tuZo5Gj5gSQzI6bn1ilcdTAwMDSH8nn7Z8tfXHUwMDFlks44Q1x1MDAxZbLkesSyloesnFx1MDAxZfJoSEg1gpj/mZ6dXHJcdTAwMGW7h4Ov8CFpVFx1MDAwNvWrvT+7W+9fOzolo2nXVlx1MDAwYidcdTAwMDGwXHUwMDEw8biXXCJCXHUwMDFiR6qMW8WfXHUwMDE38souj5NmJlx1MDAwNlEvUSxcdTAwMWJcdTAwMTLgXHUwMDEyq+NcdTAwMWLHXHUwMDFmZaRO63+Yg9v1rb3Eid8/XZRSbS7dpaZusJ7+iJyg8FwiXHSQXHUwMDBiXHUwMDE0t1x1MDAwME+qX9Q+bm13XHUwMDE0XHUwMDFjvW+a5ufaa5eQVvpcctbKbzJBa/Lrb2k6KvzOXHUwMDE3J8ibKFx1MDAxZlXuZfxcdCaloONcdTAwMWKshd/jrVx1MDAxNVx1MDAxN0t+XuLlcO6LY2ilWPrzXHUwMDEy+Cp3WOPzd1hLmPr4k/D79Ei32Pn3Jc6e+Ve5fOS0ZqBImVHex7WDwv5cdK2Ypmb/JIWw+efryvRnbVx1MDAxOGl30ipSS+B20sNQ1jFOXHUwMDEzXHUwMDAyXHUwMDAwXHUwMDBl1Eih68HXwVxuxV1+rW8ppeone+Oc+eDsXHUwMDEwMZJcdTAwMGZcbktJMeU3KFx1MDAxZFx0WpywXHUwMDA3XHUwMDEwaKa11ztaXHUwMDFhTjP+PVxyWnBb4mxcdTAwMTm4MrK5WlC+ZZVcdTAwMTbaot+GkD1dN7Rcblx1MDAxOKWupHGs81dKbse3fP9MmehULPujiOKsszf510VVicht8iqSXHUwMDE4aVx1MDAxMrA0vvPnoFti33aSRudT+6ZDaDpcYmrx2bspJNZcZqrNfjf88TpfkPDgQlxiIDCholxmf1ToXHUwMDFigcwh+ke+QPuc7zk8lnSDuNdcdLrkXHUwMDEwXHUwMDEztEkuxc20ybi058I/s/xcIlx1MDAwYuGztMmL7vuS4DRmkm9pT391w8v2dV7m/nBlktn0NF2SX+YperT0iSwp7Pk9evakL+TRS9zXXCItU9zHdK7AXHUwMDA3hsLzXHUwMDEyfl+LzzMoeZbGuGetos/0aFx1MDAwMaSB/Fx1MDAxNlNOXHUwMDFhSXOZ+48gsno1MFx1MDAwNc5vMjHoXHUwMDFmRCu6u0/wpXJmmdXq5/jjnOpkdqgoKFx1MDAwMUupo6LwbqSQOlx1MDAxYqJMnnCGXHUwMDE0XHUwMDE40Vx1MDAxMI+npamnqZPZu5hHXHUwMDE0XHUwMDEzd1xuaL6Ms1r6xYRxmyhqkDiRaK2jTFx1MDAwMIT6uZ/9mlx1MDAwZWV/rFx1MDAxNVE8TZ68efhcdTAwMDG/eWg/IcxccqeDYFx1MDAxZNVcdTAwMWWIPLvL1esoXHUwMDFjvJu0nzo9PEem4+mZKPT3+te3N9/+XHUwMDBmJe3LnyJ9 Screen 1(hidden)Screen 2 (visible)app.switch_screen(screen3)Screen 3 (visible)Screen 2 removed <p>Like pop_screen, if the screen being replaced is not installed it will be removed and deleted.</p>"},{"location":"guide/screens/#action_2","title":"Action","text":"<p>You can also switch screens with the <code>\"app.switch_screen\"</code> action which accepts the name of the screen to switch to.</p>"},{"location":"guide/screens/#screen-opacity","title":"Screen opacity","text":"<p>If a screen has a background color with an alpha component, then the background color will be blended with the screen beneath it. For example, if the top-most screen has a background set to <code>rgba(0,0,255,0.5)</code> then anywhere in the screen not occupied with a widget will display the second screen from the top, tinted with 50% blue.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVZ2VLjRlx1MDAxNH3nK1x1MDAxY+dlUlx1MDAwNZrel0mlUixhwizMXHUwMDAyXHUwMDE0Q5KplLDatsay5EhtMDPFv+dKXHUwMDE4tySvgJmFXHUwMDA3Y/dtt666zzn3XFz5y0aj0bRXXHUwMDAz03zWaJpRy4/CIPUvm5v5+IVJszCJIUSKz1kyTFvFzK61g+zZ06d9P+1cdTAwMTk7iPyW8S7CbOhHmVx1MDAxZFx1MDAwNmHitZL+09CafvZ7/nro981vg6RcdTAwMWbY1HNcdTAwMTfZMkFok/TmWiYyfVx1MDAxM9tcZlb/XHUwMDFiPjdcdTAwMWFfitdSdkHo95M4KKZcdTAwMTeBUnqK1kdcdTAwMGaTuEiVIEJcdTAwMTTmXHUwMDEyqcmMMNuDq1lcdTAwMTNAuFxyXHUwMDE5XHUwMDFiXHUwMDE3yYeaXHUwMDA3e6fPj7blaKsjRm/7r+WLbo+G7rLtMIqO7FVUJJUlcC8ultk06ZnTMLBdiOLa+Lxvpcmw041NllW+k1xm/FZor2CMo8mgXHUwMDFmd4ol3MhcYj5RwT2EhMKaXG4tKGVuO/LvXHUwMDBirDzKidKEUU0x4bW8dpNcYo5cdTAwMDHy+lx1MDAxOVx1MDAxNX8us3O/1etAenHg5mByrpRwcy7Hd8s095hiVLrluybsdG1xQMJTXHUwMDEyI12OZqY4XHUwMDAyrFx1MDAwNOFcYiniTii/5OAgKMDwsbxNcTDepnhcdTAwMThFLss88EdcdTAwMWRAZVx1MDAxMJVO99S+XHUwMDFh7n/OaHv44cxcdTAwMGbRXHQjvc7u5G4qiPPTNLlsTlwi1+N3LqPhIPBvcISF1Eoohlx1MDAxNEVu86Mw7tWTjZJWz0GvXHUwMDE4vd6cjXhrRnZcdTAwMTbctVx1MDAxNvPgzpXmikuyMti3tzvmg1x1MDAxY52/39k7XGbOXrB9/+jlm29cdHa1XGbskjOPYlx1MDAwZZCRhGvEZVx1MDAwNetKY48qXHUwMDA0jGBYYYJcdTAwMWaGdak5apNprONcdTAwMTIlJyDnuFx1MDAwZW2CqdSSUcF+cGhrJCnnWsg7QNthKIntUfj5Ro0ro/t+P4yuKkAoMFx1MDAwZlx07viZaWSt1Jj4n/jJwE9t6Edccqgx4XlkfimfWmYgl3zxkurlq2xHYSdnSzMy7SqNbFxiJWhcdTAwMTK2ycBFW5CVXHUwMDBmy6VcdTAwMDdB/e6SNOyEsVx1MDAxZlx1MDAxZK+W4UJm32z/XGZqY4llffiW21hJhDSidHV2L0bEXHUwMDFk2E1q4/dlN0ZL6S2FR6FqM62k4sLxt2C3VFDoXHUwMDE051goweRcdTAwMDMr2Vxcdlx1MDAwYk8rXHUwMDAypUpxRFx1MDAxMSup6YTrjIDKQFx1MDAwZZAoQpxxR/Ax9TlVipOy7VjOfEfpW6CQ8cj1fEFYUI1cdTAwMDT8x+w+lM0swHknjIMw7lRcdTAwMTNcdTAwMWL7tINcdTAwMTWKR0Hy1jDPclx1MDAwYnmMXHUwMDExTjCWXHUwMDFja02k5LQ0reNcdTAwMGbyrKlHJYg2lVx1MDAxNFx1MDAwYqZcdTAwMTGmU3dv4mB5Vov9Wy0rSYhcdTAwMDY0gUeUXHUwMDA03rNZWYGMc5goXHUwMDE54pzK6TOJ/MzuJv1+aGH73yZhbOvbXFzs53ZO+q7xp5RcdTAwMDXuqlx1MDAxY6urwyBfsSr+7l3D0af4MHn/cXPm7K254C6iU7h2622U/89cdTAwMTO2XHUwMDA1Jl2XqmDdpGMmKNdwXGYrK9v5q+10p3+xS+K93f1Pg97OSetcXH/nJl16YFx1MDAwZlx1MDAxNVx1MDAxMYJcdTAwMDFcdTAwMTFwzaRzykDaKEVcdTAwMWPioHO0ltfdpC2f0W6vz6QrTYG1uFR6XHUwMDFl08hkx1x1MDAwN0efgyx5d3T4qtc+XHUwMDE57tn/9vl6jFxmQUJAidGP7dFcdTAwMDWei3aMXHUwMDE1dDtSs9XR3rvAXHUwMDA3Q7/bZfzy9fut5+jw5cuT/lx1MDAxY7R3/VZ3mJrHxrtehnfCpKdcdTAwMTDCQlMmudBYVfDOoJTDXHUwMDE0qMFaXHUwMDAx9Vx1MDAxMWNcdTAwMGZcdTAwMDG8Tf04XHUwMDAzXHUwMDBmXHUwMDA26JpcdTAwMDY90WpcdTAwMWHt025cdTAwMWS6XHUwMDA1XHKtk6Lix1x1MDAwNzlXuX5/Nbd+nFxmtvpJZid+2Fx1MDAxZNGzRto595+gTbRJON9EXHUwMDFl/+XX78G+3zXl+/l5XVLMulxmXHUwMDEwiolAtESkZTKwXHUwMDE4MneSga9n6Fx1MDAxOZdcdTAwMWU4p7yJXHUwMDE0WKmyaS/qXHUwMDFlo56kXGaD+6JKXHUwMDEzVU9sfTJQ6Fx1MDAxMaRcdTAwMDCSxEB+S1x1MDAwZlx1MDAwZZytp55ASjFcZonkRdopwa1GIIrh4PSdXG7hWn19QW7KXHUwMDFm1dcvLjdVXHUwMDA3jYnWmGHwiphLrkt28tZAM3BcdTAwMWOC5s9cdTAwMWQpwlJSdT9bv9jxVZNC4HBcdTAwMTTO5VxcXG4o9nQ6K+VJXHUwMDAxglx1MDAwZolcdTAwMDMuOViCXHUwMDFm2tXPhXZcdTAwMTGsg/qOnr7Q51nahuY+hsR5h1x1MDAwMVxyk1hd20YjLsy74+fxv+/SreNR/81W/Fx1MDAxN/qWhn65slx0rj2Ru3VcZrZcdTAwMWSUy1GyeOqOmCeIgK6RsvyZ7MNcZn17lpsnTHlcdTAwMWFLaNhcdTAwMDDo4M/pXGafXHUwMDAzzPTAYyEmQHkxNFx1MDAxN072bjVccu6UcSRLT15cdTAwMWbqe5Y9XCJfh3jVyTYnsmZcdTAwMWFXYuvuzFn+qIFyUYNT/lx1MDAwN4XHQ0RcdTAwMTM4KyrhMMXS5SSUXZDbvJ/UnGJV0YRpVCxbTzFcdTAwMGauyzFcdTAwMDHTLlx1MDAxONOV5Th4JFx1MDAwNEJKsZZMwuJs2XLz9mYlRZrbdPFcdTAwMDVuXHUwMDBieMpcdTAwMDCBqyuSPbeH5oCEn9jhi1x1MDAxM3N0XHUwMDE2nqG389zWN1Mk7oHOglx1MDAwMHFcIjlUV+S+lytcdTAwMTRcdTAwMTfYg6BWgFx1MDAxYlx1MDAwNWfmXHUwMDA0u1AoXHUwMDAxVVx1MDAxMLxcZlVcdTAwMWO8XHUwMDE3zF2/QuGST3GS5LrvsVx1MDAwNFx0XHUwMDAyXaBcdTAwMDJ3+OhcbpT/kiFcdFbuXu/XXHUwMDFilaxhpTeqNjH5xvxpoihpnCZpXHUwMDE0/DSz8Sn9RvU1XHUwMDFhn0o+NzTbXHUwMDE407TpXHUwMDBmXHUwMDA2R1x1MDAxNnZrYsPgXHUwMDFjwmB8y27V5kVoLndmYyCHwcaYujlHTOGArzeu/1x1MDAwN0PH3J0ifQ== Base screen(partial visible)Top-most screenbackground: rgba(0,0,255,0.5);Hello World! <p>Note</p> <p>Although parts of other screens may be made visible with background alpha, only the top-most is active (can respond to mouse and keyboard).</p> <p>One use of background alpha is to style modal dialogs (see below).</p>"},{"location":"guide/screens/#modal-screens","title":"Modal screens","text":"<p>Screens may be used to create modal dialogs, where the main interface is temporarily disabled (but still visible) while the user is entering information.</p> <p>The following example pushes a screen when you hit the Q key to ask you if you really want to quit. From the quit screen you can click either Quit to exit the app immediately, or Cancel to dismiss the screen and return to the main screen.</p> OutputOutput (after pressing Q)modal01.pymodal01.tcss <p> ModalApp \u2b58ModalApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2585\u2585 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. \u00a0q\u00a0Quit\u00a0\u258f^p\u00a0palette </p> <p> ModalApp \u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588 \u2588\u2588 \u2588Are\u00a0you\u00a0sure\u00a0you\u00a0want\u00a0to\u00a0quit?\u2588 \u2588\u2588 \u2588\u2588 \u2588\u2588 \u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588 \u2588\u00a0Quit\u00a0\u00a0Cancel\u00a0\u2588 \u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 \u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588 </p> modal01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.screen import Screen\nfrom textual.widgets import Button, Footer, Header, Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass QuitScreen(Screen):\n    \"\"\"Screen with a dialog to quit.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            Label(\"Are you sure you want to quit?\", id=\"question\"),\n            Button(\"Quit\", variant=\"error\", id=\"quit\"),\n            Button(\"Cancel\", variant=\"primary\", id=\"cancel\"),\n            id=\"dialog\",\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"quit\":\n            self.app.exit()\n        else:\n            self.app.pop_screen()\n\n\nclass ModalApp(App):\n    \"\"\"An app with a modal dialog.\"\"\"\n\n    CSS_PATH = \"modal01.tcss\"\n    BINDINGS = [(\"q\", \"request_quit\", \"Quit\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(TEXT * 8)\n        yield Footer()\n\n    def action_request_quit(self) -&gt; None:\n        self.push_screen(QuitScreen())\n\n\nif __name__ == \"__main__\":\n    app = ModalApp()\n    app.run()\n</code></pre> modal01.tcss<pre><code>QuitScreen {\n    align: center middle;\n}\n\n#dialog {\n    grid-size: 2;\n    grid-gutter: 1 2;\n    grid-rows: 1fr 3;\n    padding: 0 1;\n    width: 60;\n    height: 11;\n    border: thick $background 80%;\n    background: $surface;\n}\n\n#question {\n    column-span: 2;\n    height: 1fr;\n    width: 1fr;\n    content-align: center middle;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>Note the <code>request_quit</code> action in the app which pushes a new instance of <code>QuitScreen</code>. This makes the quit screen active. If you click Cancel, the quit screen calls pop_screen to return the default screen. This also removes and deletes the <code>QuitScreen</code> object.</p> <p>There are two flaws with this modal screen, which we can fix in the same way.</p> <p>The first flaw is that the app adds a new quit screen every time you press Q, even when the quit screen is still visible. Consequently if you press Q three times, you will have to click Cancel three times to get back to the main screen. This is because bindings defined on App are always checked, and we call <code>push_screen</code> for every press of Q.</p> <p>The second flaw is that the modal dialog doesn't look modal. There is no indication that the main interface is still there, waiting to become active again.</p> <p>We can solve both those issues by replacing our use of Screen with ModalScreen. This screen sub-class will prevent key bindings on the app from being processed. It also sets a background with a little alpha to allow the previous screen to show through.</p> <p>Let's see what happens when we use <code>ModalScreen</code>.</p> OutputOutput (after pressing Q)modal02.pymodal01.tcss <p> ModalApp \u2b58ModalApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2585\u2585 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. \u00a0q\u00a0Quit\u00a0\u258f^p\u00a0palette </p> <p> ModalApp \u2b58ModalApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0i\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 Where\u00a0the\u00a0\u2588\u2588st\u00a0not\u00a0f Fear\u00a0is\u00a0th\u2588\u2588 Fear\u00a0is\u00a0th\u2588Are\u00a0you\u00a0sure\u00a0you\u00a0want\u00a0to\u00a0quit?\u2588 I\u00a0will\u00a0fac\u2588\u2588 I\u00a0will\u00a0per\u2588\u2588\u2585\u2585 And\u00a0when\u00a0i\u2588\u2588 Where\u00a0the\u00a0\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588st\u00a0not\u00a0f Fear\u00a0is\u00a0th\u2588\u00a0Quit\u00a0\u00a0Cancel\u00a0\u2588 Fear\u00a0is\u00a0th\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 I\u00a0will\u00a0fac\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. \u00a0q\u00a0Quit\u00a0\u258f^p\u00a0palette </p> modal02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.screen import ModalScreen\nfrom textual.widgets import Button, Footer, Header, Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass QuitScreen(ModalScreen):\n    \"\"\"Screen with a dialog to quit.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            Label(\"Are you sure you want to quit?\", id=\"question\"),\n            Button(\"Quit\", variant=\"error\", id=\"quit\"),\n            Button(\"Cancel\", variant=\"primary\", id=\"cancel\"),\n            id=\"dialog\",\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"quit\":\n            self.app.exit()\n        else:\n            self.app.pop_screen()\n\n\nclass ModalApp(App):\n    \"\"\"An app with a modal dialog.\"\"\"\n\n    CSS_PATH = \"modal01.tcss\"\n    BINDINGS = [(\"q\", \"request_quit\", \"Quit\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(TEXT * 8)\n        yield Footer()\n\n    def action_request_quit(self) -&gt; None:\n        \"\"\"Action to display the quit dialog.\"\"\"\n        self.push_screen(QuitScreen())\n\n\nif __name__ == \"__main__\":\n    app = ModalApp()\n    app.run()\n</code></pre> modal01.tcss<pre><code>QuitScreen {\n    align: center middle;\n}\n\n#dialog {\n    grid-size: 2;\n    grid-gutter: 1 2;\n    grid-rows: 1fr 3;\n    padding: 0 1;\n    width: 60;\n    height: 11;\n    border: thick $background 80%;\n    background: $surface;\n}\n\n#question {\n    column-span: 2;\n    height: 1fr;\n    width: 1fr;\n    content-align: center middle;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>Now when we press Q, the dialog is displayed over the main screen. The main screen is darkened to indicate to the user that it is not active, and only the dialog will respond to input.</p>"},{"location":"guide/screens/#returning-data-from-screens","title":"Returning data from screens","text":"<p>It is a common requirement for screens to be able to return data. For instance, you may want a screen to show a dialog and have the result of that dialog processed after the screen has been popped.</p> <p>To return data from a screen, call <code>dismiss()</code> on the screen with the data you wish to return. This will pop the screen and invoke a callback set when the screen was pushed (with <code>push_screen</code>).</p> <p>Let's modify the previous example to use <code>dismiss</code> rather than an explicit <code>pop_screen</code>.</p> modal03.pymodal01.tcss modal03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.screen import ModalScreen\nfrom textual.widgets import Button, Footer, Header, Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass QuitScreen(ModalScreen[bool]):  # (1)!\n    \"\"\"Screen with a dialog to quit.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            Label(\"Are you sure you want to quit?\", id=\"question\"),\n            Button(\"Quit\", variant=\"error\", id=\"quit\"),\n            Button(\"Cancel\", variant=\"primary\", id=\"cancel\"),\n            id=\"dialog\",\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"quit\":\n            self.dismiss(True)\n        else:\n            self.dismiss(False)\n\n\nclass ModalApp(App):\n    \"\"\"An app with a modal dialog.\"\"\"\n\n    CSS_PATH = \"modal01.tcss\"\n    BINDINGS = [(\"q\", \"request_quit\", \"Quit\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(TEXT * 8)\n        yield Footer()\n\n    def action_request_quit(self) -&gt; None:\n        \"\"\"Action to display the quit dialog.\"\"\"\n\n        def check_quit(quit: bool | None) -&gt; None:\n            \"\"\"Called when QuitScreen is dismissed.\"\"\"\n            if quit:\n                self.exit()\n\n        self.push_screen(QuitScreen(), check_quit)\n\n\nif __name__ == \"__main__\":\n    app = ModalApp()\n    app.run()\n</code></pre> <ol> <li>See below for an explanation of the <code>[bool]</code></li> </ol> modal01.tcss<pre><code>QuitScreen {\n    align: center middle;\n}\n\n#dialog {\n    grid-size: 2;\n    grid-gutter: 1 2;\n    grid-rows: 1fr 3;\n    padding: 0 1;\n    width: 60;\n    height: 11;\n    border: thick $background 80%;\n    background: $surface;\n}\n\n#question {\n    column-span: 2;\n    height: 1fr;\n    width: 1fr;\n    content-align: center middle;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>In the <code>on_button_pressed</code> message handler we call <code>dismiss</code> with a boolean that indicates if the user has chosen to quit the app. This boolean is passed to the <code>check_quit</code> function we provided when <code>QuitScreen</code> was pushed.</p> <p>Although this example behaves the same as the previous code, it is more flexible because it has removed responsibility for exiting from the modal screen to the caller. This makes it easier for the app to perform any cleanup actions prior to exiting, for example.</p> <p>Returning data in this way can help keep your code manageable by making it easy to re-use your <code>Screen</code> classes in other contexts.</p>"},{"location":"guide/screens/#typing-screen-results","title":"Typing screen results","text":"<p>You may have noticed in the previous example that we changed the base class to <code>ModalScreen[bool]</code>. The addition of <code>[bool]</code> adds typing information that tells the type checker to expect a boolean in the call to <code>dismiss</code>, and that any callback set in <code>push_screen</code> should also expect the same type. As always, typing is optional in Textual, but this may help you catch bugs.</p>"},{"location":"guide/screens/#waiting-for-screens","title":"Waiting for screens","text":"<p>It is also possible to wait on a screen to be dismissed, which can feel like a more natural way of expressing logic than a callback. The <code>push_screen_wait()</code> method will push a screen and wait for its result (the value from <code>Screen.dismiss()</code>).</p> <p>This can only be done from a worker, so that waiting for the screen doesn't prevent your app from updating.</p> <p>Let's look at an example that uses <code>push_screen_wait</code> to ask a question and waits for the user to reply by clicking a button.</p> questions01.pyquestions01.tcssOutput questions01.py<pre><code>from textual import on, work\nfrom textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Button, Label\n\n\nclass QuestionScreen(Screen[bool]):\n    \"\"\"Screen with a parameter.\"\"\"\n\n    def __init__(self, question: str) -&gt; None:\n        self.question = question\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.question)\n        yield Button(\"Yes\", id=\"yes\", variant=\"success\")\n        yield Button(\"No\", id=\"no\")\n\n    @on(Button.Pressed, \"#yes\")\n    def handle_yes(self) -&gt; None:\n        self.dismiss(True)  # (1)!\n\n    @on(Button.Pressed, \"#no\")\n    def handle_no(self) -&gt; None:\n        self.dismiss(False)  # (2)!\n\n\nclass QuestionsApp(App):\n    \"\"\"Demonstrates wait_for_dismiss\"\"\"\n\n    CSS_PATH = \"questions01.tcss\"\n\n    @work  # (3)!\n    async def on_mount(self) -&gt; None:\n        if await self.push_screen_wait(  # (4)!\n            QuestionScreen(\"Do you like Textual?\"),\n        ):\n            self.notify(\"Good answer!\")\n        else:\n            self.notify(\":-(\", severity=\"error\")\n\n\nif __name__ == \"__main__\":\n    app = QuestionsApp()\n    app.run()\n</code></pre> <ol> <li>Dismiss with <code>True</code> when pressing the Yes button.</li> <li>Dismiss with <code>False</code> when pressing the No button.</li> <li>The <code>work</code> decorator will make this method run in a worker (background task).</li> <li>Will return a result when the user clicks one of the buttons.</li> </ol> questions01.tcss<pre><code>QuestionScreen {\n    layout: grid;\n    grid-size: 2 2;\n    align: center bottom;\n}\n\nQuestionScreen &gt; Label {\n    margin: 1;\n    text-align: center;\n    column-span: 2;\n    width: 1fr;\n}\n\nQuestionScreen Button {\n    margin: 2;\n    width: 1fr;\n}\n</code></pre> <p> QuestionsApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Do\u00a0you\u00a0like\u00a0Textual?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>The mount handler on the app is decorated with <code>@work</code>, which makes the code run in a worker (background task). In the mount handler we push the screen with the <code>push_screen_wait</code>. When the user presses one of the buttons, the screen calls <code>dismiss()</code> with either <code>True</code> or <code>False</code>. This value is then returned from the <code>push_screen_wait</code> method in the mount handler.</p>"},{"location":"guide/screens/#modes","title":"Modes","text":"<p>Some apps may benefit from having multiple screen stacks, rather than just one. Consider an app with a dashboard screen, a settings screen, and a help screen. These are independent in the sense that we don't want to prevent the user from switching between them, even if there are one or more modal screens on the screen stack. But we may still want each individual screen to have a navigation stack where we can push and pop screens.</p> <p>In Textual we can manage this with modes. A mode is simply a named screen stack, which we can switch between as required. When we switch modes, the topmost screen in the new mode becomes the active visible screen.</p> <p>The following diagram illustrates such an app with modes. On startup the app switches to the \"dashboard\" mode which makes the top of the stack visible.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2aW0/bSFx1MDAxNMff+ylQ9mVXKu7cL5VWK6ClXHUwMDA1UmhJuZRtVTn2JPHGsY3tJEDFd99jw8ZcdTAwMTdcYiSkXHUwMDA0Km1cdTAwMWWCPWfsOTPz+885M+HHi5WVRnpcdTAwMWWZxuuVhjlzbN9zY3vceJmVj0yceGFcdTAwMDAmkt8n4TB28pq9NI2S169eXHLsuG/SyLdcdTAwMWRjjbxkaPtJOnS90HLCwSsvNYPkr+x711x1MDAxZZg/o3DgprFVNLJqXFwvXHLjq7aMb1x1MDAwNiZIXHUwMDEzePvfcL+y8iP/LnnnevYgXGbcvHpuKLmnab10N1xmclcx5YpcdTAwMTOJNZrU8JI30FpqXFwwd8BjU1iyosaRjYZ7zeh78+JTW9uO2t48+/ChaLbj+X4rPfdzp5JcdTAwMTD6UtiSNFx1MDAwZfvmyHPTXtZ2rXzaU3E47PZcdTAwMDKTJJVnwsh2vPRcdTAwMWPKeOG7XHUwMDFkdPNXXHUwMDE0JWdwtyotjVx00pxcdTAwMTFOlGKMTMxXz1OLXHUwMDEwwlx1MDAwNYyT0lxuXHUwMDA2pObYRujDPIBjv6H8U7jWtp1+XHUwMDE3/Fx1MDAwYtyiXHUwMDBl5rbd7lx1MDAxNHXG190lQlpMM1x1MDAwMe1ThbVWk1x1MDAxYT3jdXtp1jvOLCWxkFxiXHUwMDBiTqUo/DD5dGioXHUwMDAwb2BsYshcdTAwMWGPttyci2/lXHUwMDExXHUwMDBi3OtcdTAwMTFcdTAwMGKGvl/4m1x1MDAxOd6WWCqeXHUwMDE5Rq59NelYwDhQxbGkolx1MDAxOCnfXHUwMDBi+vXX+aHTLzjJSy9fzo0n43wqnoogISijbGY8t9+hQ9U8+dTc2Wz7zY3Drffn0f5T4onRvXxyXHUwMDBi5lRrwpiQmFAlK3zChFtcdTAwMDIhSiSlSmjJXHUwMDE2wrNjt1x1MDAxMeKPgyehjGOt0Fx1MDAxMvBkQiMk+Vx1MDAxMvBUpaGo4amFXCLgzVx1MDAxY3SK3ogo01x1MDAxMu6J8665ftzdx1x1MDAwM3fzmdOJLYyBTC44V1xmRlx1MDAxZtEqnlhCXHUwMDA1ilx1MDAxOPArXHUwMDA1XHUwMDExdLHlU1x1MDAxMUdj8yh8YkJcdTAwMTiGJYUsXHUwMDAxUIZcdTAwMTFF0NxcdTAwMTJcdTAwMDClkkxcdTAwMDM0XHUwMDBiaowjiWdcdTAwMDd0dEC3u1EoRu/eXHUwMDFlOKnauaCO/5SA0vv4lDhcdTAwMDOUQ1dcdTAwMDVDWlx1MDAxMF6hkyNkMWCTaSGZYrTu1nxwtlxya7vtXz22g4gxXHUwMDEzVC6DzVIwuFx1MDAxMduZZJrCnM1cZufnL/2NcNPZ+4L39b67ZtZcdTAwMDej95+fNZxUUEtcbqmk1Fx1MDAwMsM3rcGpLSWIJCBhzLhaiM2OK1xyZv+zOTObnN3BJkJKc0g8Z2bT/b56vLcrm+GgXHUwMDFk+73xXHUwMDA2e+tvnjw3Ni3IXCJplkUykucuvFx1MDAwNiu3lIZcdTAwMDSTMYlcdTAwMTFcdTAwMTdcdTAwMTVWmURgXHUwMDE08Fx1MDAxNIxccqRcdTAwMDJ0IViZI0znl89CfzasqTlLbyNcdTAwMTWXwlaNVMVhaYG1Q85cZqp/SFtvdk9OTtaJcS76slx1MDAxZnL1aVxuqD3b6VxyY/P0SShcdTAwMTOWXHUwMDEwkFxcMlx1MDAwNmkoIZKzXG6cXHUwMDEySVx1MDAwYlZRyHUgxSOYL5aCTovymCuLaq6xlkAmYvImnOXk91xuR4Ipw1x1MDAxY5V20o+II+TmisyTc1x1MDAxNtNcdTAwMWVcdTAwMDZpy7vIk0ZVKd20XHUwMDA3nn9embmcU1x1MDAxOKmvXHLXTnrt0I7dr41Gxbzme90gx810qkynnmP7XHUwMDEzc1x1MDAxYUaF1YHmbC8w8ZZbdzuMva5cdTAwMTfY/ue7m4ZcdTAwMWWb95OVwiolg207MZk1z4pcdTAwMWakQqBrarzAXGa2o4ry2eOFQVx0+uLt75zzXvfirFx1MDAxZq7udFx1MDAwZbaeVobsPlx1MDAxNSpMsr0ggTVcdTAwMDfyadiD10SoLYIo5lx1MDAxYWFcYjNqsXOKaVwiXHUwMDE0ylx1MDAxMopqXGJRXGJyJlXKSZ6NXGKh92iek4lFRdgzfrR8/dVbfVTpTVx1MDAwZoDZgVx1MDAxOFwipdbuXHUwMDEz3sH2If9cdTAwMThcdTAwMWSGp7J1vrHzXHUwMDBmYmunb5vPXFx4jHKLYlx1MDAwNblcdTAwMWJHnGOlqvuIXFx5XHUwMDA0Q1qnRCa/R1xuf0RZsIvWRCDCqS6r6dlIXHUwMDBmKTlXOrao9Fx1MDAxMpOmXtBNli+/21p+TFx0lnO0mzt5yLnpPLsl0Vx1MDAxMuHx+MBcdTAwMWZ8XGLGXFydXlx1MDAxY1x1MDAwZtvjvYeJkNTKXHUwMDFmL1x0JcRCXHUwMDAy4p5cdTAwMDagQVx1MDAwNJRU41x1MDAxZtHEXHUwMDAyocLOKtNcdTAwMDfEpukqVLLD21x1MDAwZlShVlkrXHUwMDEwZJDimpaOwO9cdTAwMTChUOAz4z9vS3RtKPgpze1ol1x1MDAxY21/POqf4vFWa20zSnbtuNjqVWCz4zhcdTAwMWM3JpbL66s7XHUwMDE0rjQofJ5fpVx1MDAxNlP4mpN6I7Py+8hLvLZv/liuyqe3/jOUfjX4t0mdsHrpROqwXHUwMDA3k0rL2bebd9PwJEqX91x0PYt0QnPKXHUwMDE51Vx1MDAxNFx1MDAxM1ngklx1MDAxZqxAMOZIXHSuXGLnTEl2x1HIXHUwMDAyQkdcdTAwMTZWXHUwMDFjgStMZb9OXHUwMDEzSW45XGZhzJKIXHUwMDExgYXQWGB9U/lCQFx1MDAwZlx1MDAxOCqWqvulX2j6P1bIdcnlg6LywzWbpHacrnuBXHUwMDBika7q2PU/RGzNXHUwMDEwTXKVO8PMy1VkIcmFJJpjXGJZTFx1MDAxNucm2cjYUbbJgSqUXG5CKMKSiJtdN4FbuFTthZ2kXHUwMDFi4WDgpdD/j6FcdTAwMTek9Vx1MDAxYXmH1jLh9Yx9Q//w5rKtrtAoe2N1+S2uVlxuhvObyfW3l7fWXr2Dr+xzg6zihS/Kf7M1O2+iYUdRK4WZn0xcdTAwMTSg5rnXS27Rz8bIM+P121x1MDAwZbDzT1x1MDAxNlxy8rHOllx1MDAwNpPjePni8l9cdTAwMDSHyVx1MDAxMCJ9 \"dashboard\"\"help\"\"settings\"Active (visible) <p>If we later change the mode to \"settings\", the top of that mode's screen stack becomes visible.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2a2VLbSFx1MDAxNIbv81x1MDAxNJTnNii9L6mammJfMmxcdTAwMDFcdTAwMDJkkkrJUttWLEtCkrFJinef01xuYy1gNrNlfGHsPrL6tPr7z1wi8fPN3FxcKz9PTOv9XFzLjD03XGb81Fx1MDAxZLXe2vEzk2ZBXHUwMDFjgYlcdTAwMTTfs3iYesWRvTxPsvfv3lxy3LRv8iR0PeOcXHUwMDA12dBccrN86Fx1MDAwN7HjxYN3QW5cdTAwMDbZX/Z921x1MDAxZJg/k3jg56lTTjJv/CCP019zmdBcZkyUZ3D2f+D73NzP4r3inVx1MDAxZriDOPKLw1x1MDAwYkPpXHUwMDFlJbw5ulx1MDAxZEeFq5xcdIlcdTAwMTlcIlx1MDAxM3uQLcNcXLnxwdhcdTAwMDF/TWmxQ62j3Z01s7iXu9m8TpLTlW/JsEPLSTtBXHUwMDE47ufnYeFSXHUwMDE2w0pKW5ancd9cdTAwMWNcdTAwMDV+3lx1MDAwMytujE/7VVx1MDAxYVx1MDAwZru9yGRZ7Tdx4npBfm5cdTAwMTeHJoNu1C1OUY6M7Y80dbDWmGtcIpggQtOJ2f6eKe4wXCK1XHUwMDA2XHUwMDEzZVxcNdxaikPYXHUwMDAzcOtcdTAwMGZUvErH2q7X74J3kV9cdTAwMWWDueu2O+Uxo8vFXHUwMDEyIVx1MDAxZKaZUIxRXHUwMDA1zpSz9EzQ7eXWTc5cdTAwMWMlsZBcYlx1MDAwYk6lKP0wxWbAXHUwMDAy7Fx1MDAxOVx1MDAxOJtcdTAwMTjs5MmGXzDxtXq9XCL/8npFwzAs/bWGlSZHVZYq27y/sX7a3/Hzle1w72Rk0sWTxW97k3XVwHPTNFx1MDAxZbUmlovLT6VHw8R3f1x1MDAwMYXh4iuGXHUwMDA1oVKWSIZB1G86XHUwMDFixl6/ZLBcdTAwMTi9eHtv8JlcdTAwMTLTwFx1MDAwNyooJVx1MDAwMle24jb0+3LpQ1x1MDAxYeJvx6j9PTzoxt3R9+HWK0dcdTAwMWbYXHUwMDE2XHUwMDAwNiGMXHUwMDEy1Fx1MDAwMJ9cdEchLlx1MDAwNVx1MDAxMoLCzrCZyO+4bYT405BPQJewUejRyH9ccmxqoqexSTVBmHBy96jMR8nR1tjfpOM12U+Xu0ujT/HglaOpXHUwMDFkiLlSaURcdTAwMTmSVNbYpGClWDFFuCRIK8ZnglNcdTAwMTFPY/MkcGKQXHUwMDE2xoqQ/1x1MDAxN520kiWbJYOWmFx1MDAxM87Znek88Vx1MDAwZdaOt7zOp7PNY7W1tDFYWF7cfkk62W10akxcdTAwMWNCXHUwMDA0x5hSpKSqwVx0VDpcdTAwMWHUXHTVhKRcdTAwMTji60xstlxya/vt36RkuFx1MDAxMU0hlHpcdTAwMTY01TQ0MVKwYCwqaf82NlPlkf7ybrhcdTAwMWLujE829lx1MDAwZvn6SftF61mMboOTXHUwMDBiu+1cdTAwMWFTXHUwMDBiqNSkXHUwMDFlOpkmXHUwMDBlXHUwMDEyXG5ziVx1MDAxONdcdTAwMTQ1/bpnWvelwez3p1x1MDAxM1xuXHUwMDFjhckz0Mn59F6LXG6GIKKgO8OZeWp1NzvrbVxmP6ydjr6vXHUwMDA0KplfeXVwOohcdTAwMTIoppVgRFx1MDAwYlx1MDAwNVA2aJVcdTAwMGXCSENcdTAwMDcmXHUwMDEwpFx1MDAwZVanlUNzhlxixlx1MDAwMlxuXHUwMDFlTORsRSjzhOn8XHUwMDBmitDHpTU34/w6VGGSqYGUI4FcdTAwMTnn8u7dUZet7+xcdTAwMWRcdTAwMWStRHtYXHUwMDFk8uHpeEzaXHUwMDBiU1jtuV5vmJpcdTAwMTdP84QpXHUwMDA3NpxcdMKVRErX2Vx1MDAxNLZcYoXuiCPIKZg+UZ7HXFw5VHONtVx1MDAwNDBcdTAwMTGTV9mkvEkjwZTZPVwiz0GjJlCG03vQWG56XHUwMDFj5fvBXHUwMDBme+GJqo2uuoMgPK/tW4EpXFypLy3fzXrt2E39L61WzbxcdTAwMTBcdTAwMDZdS24rNJ060nngueHEnMdJafVgOjeITLrhN92O06BcdTAwMWJEbnhw89SwYrM+XHRcdTAwMTRO5W5a282MtdpcdTAwMDXyXHUwMDA3ibBcdTAwMWHymlwiXHUwMDE0UHpcIoird+9cdTAwMDPnPZxcdTAwMWZcdTAwMWZ8Xo/ib5tcdTAwMWZHW6uHy8qLXrlcYjFEXFyHKi6FgFpcdTAwMDZcdTAwMTFdr2ckkkWG4IgwTrSa7Vx1MDAwNt00XHUwMDE1XG7lXGJFNWPgXHUwMDAwZqpSlLxcdTAwMWFcdTAwMTVCI4Lv0/rNqsKeXHST51x1MDAxN2Bz1ifVnsDN0Yn2JKOSQ69992Ltx+r4cIVcdTAwMDdq6cTdPmDR2s5cdTAwMGZ/8PFltXd7LyEocygniDJbc6Ayxf2SXHUwMDFlNLpSI6lcdTAwMTDngqjZWompXHSQKEdcdTAwMGLoY1x1MDAwNII0o6tyejXaI5yx+9Rjs2ovM3lcdTAwMWVE3ez59XfdzE+pQYxlc7TMf1RqXHUwMDAxjcHd85//cXfps4/mN8+S4OPSh8V2XHUwMDEwz88/TIOkMf6EXHUwMDFhZNpB0MkjibWwbVJNhERxh2PMidJQqaLqfbcrKlSyw9tcdTAwMGZToYI4QDn0b1xiQ9yrdlx1MDAxZjeIUEDJXGZtwuP1RJeGa1x1MDAxZknhwd/n/vKmiFx1MDAwZldcdTAwMGU6cZxiubpQ3pmowXb/R1Ka2j/PpvBcdTAwMDUvXHUwMDBmzszzars552Oo+teFvk7WeuqTN4K0JETf48HbzTv/XCKqlreK2lxuXG60LyhcdTAwMTSuiuD6LWRcbjlPSlvTaY5cdTAwMTWYb3i+MYOoqVx1MDAwMz08gTDKtOQgVVROM1G11I5iXHUwMDFjXHUwMDBlXHUwMDAxzdubhldFblx1MDAxZlx1MDAwZlx1MDAxMlapXHJuV3kp3/9QIZcjXHUwMDE3XHUwMDBmLH5cdTAwMWYqzyx303wxiHxIanXHLv+lYuNcdTAwMGWJo1x1MDAxMLQ3tF5cIlx1MDAwNyvrk6BcblOoQVx1MDAxMKGVo7puYmOpXHUwMDAztVxmWFx1MDAxMId2XHUwMDFlXHUwMDEyXHUwMDE4u7J2XHUwMDEz+aVP9WW4Wb5cdTAwMTRcdTAwMGZcdTAwMDZBXHUwMDBlXHUwMDE3YDdcdTAwMGWivHlEsaJcdTAwMDUrvJ5xr6hcdTAwMWXOXFy1NVx1MDAxNZrYM9ZDbflprmS4+DL5/PXttUdPx8u+roBVnu5N9a+NzsVcdTAwMDQtN0n2c9j4yT5cdTAwMDFpgX9cdTAwMTlcXMtVts5cdTAwMDIzWrzuZnXxsnG/uNI2MJiCxos3XHUwMDE3/1x1MDAwMiHc1HkifQ== \"dashboard\"\"help\"\"settings\"Active <p>To add modes to your app, define a <code>MODES</code> class variable in your App class which should be a <code>dict</code> that maps the name of the mode on to either a screen object, a callable that returns a screen, or the name of an installed screen. However you specify it, the values in <code>MODES</code> set the base screen for each mode's screen stack.</p> <p>You can switch between these screens at any time by calling <code>App.switch_mode</code>. When you switch to a new mode, the topmost screen in the new stack becomes visible. Any calls to <code>App.push_screen</code> or <code>App.pop_screen</code> will affect only the active mode.</p> <p>Let's look at an example with modes:</p> modes01.pyOutputOutput (after pressing S) <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Footer, Placeholder\n\n\nclass DashboardScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Placeholder(\"Dashboard Screen\")\n        yield Footer()\n\n\nclass SettingsScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Placeholder(\"Settings Screen\")\n        yield Footer()\n\n\nclass HelpScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Placeholder(\"Help Screen\")\n        yield Footer()\n\n\nclass ModesApp(App):\n    BINDINGS = [\n        (\"d\", \"switch_mode('dashboard')\", \"Dashboard\"),  # (1)!\n        (\"s\", \"switch_mode('settings')\", \"Settings\"),\n        (\"h\", \"switch_mode('help')\", \"Help\"),\n    ]\n    MODES = {\n        \"dashboard\": DashboardScreen,  # (2)!\n        \"settings\": SettingsScreen,\n        \"help\": HelpScreen,\n    }\n\n    def on_mount(self) -&gt; None:\n        self.switch_mode(\"dashboard\")  # (3)!\n\n\nif __name__ == \"__main__\":\n    app = ModesApp()\n    app.run()\n</code></pre> <ol> <li><code>switch_mode</code> is a builtin action to switch modes.</li> <li>Associates <code>DashboardScreen</code> with the name \"dashboard\".</li> <li>Switches to the dashboard mode.</li> </ol> <p> ModesApp Dashboard\u00a0Screen \u00a0d\u00a0Dashboard\u00a0\u00a0s\u00a0Settings\u00a0\u00a0h\u00a0Help\u00a0\u258f^p\u00a0palette </p> <p> ModesApp Settings\u00a0Screen \u00a0d\u00a0Dashboard\u00a0\u00a0s\u00a0Settings\u00a0\u00a0h\u00a0Help\u00a0\u258f^p\u00a0palette </p> <p>Here we have defined three screens. One for a dashboard, one for settings, and one for help. We've bound keys to each of these screens, so the user can switch between the screens.</p> <p>Pressing D, S, or H switches between these modes.</p>"},{"location":"guide/screens/#screen-events","title":"Screen events","text":"<p>Textual will send a ScreenSuspend event to screens that have become inactive due to another screen being pushed, or switching via a mode.</p> <p>When a screen becomes active, Textual will send a ScreenResume event to the newly active screen.</p> <p>These events can be useful if you want to disable processing for a screen that is no longer visible, for example.</p>"},{"location":"guide/styles/","title":"Styles","text":"<p>In this chapter we will explore how you can apply styles to your application to create beautiful user interfaces.</p>"},{"location":"guide/styles/#styles-object","title":"Styles object","text":"<p>Every Textual widget class provides a <code>styles</code> object which contains a number of attributes. These attributes tell Textual how the widget should be displayed. Setting any of these attributes will update the screen accordingly.</p> <p>Note</p> <p>These docs use the term screen to describe the contents of the terminal, which will typically be a window on your desktop.</p> <p>Let's look at a simple example which sets styles on <code>screen</code> (a special widget that represents the screen).</p> screen.py<pre><code>from textual.app import App\n\n\nclass ScreenApp(App):\n    def on_mount(self) -&gt; None:\n        self.screen.styles.background = \"darkblue\"\n        self.screen.styles.border = (\"heavy\", \"white\")\n\n\nif __name__ == \"__main__\":\n    app = ScreenApp()\n    app.run()\n</code></pre> <p>The first line sets the background style to <code>\"darkblue\"</code> which will change the background color to dark blue. There are a few other ways of setting color which we will explore later.</p> <p>The second line sets border to a tuple of <code>(\"heavy\", \"white\")</code> which tells Textual to draw a white border with a style of <code>\"heavy\"</code>. Running this code will show the following:</p> <p> ScreenApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p>"},{"location":"guide/styles/#styling-widgets","title":"Styling widgets","text":"<p>Setting styles on screen is useful, but to create most user interfaces we will also need to apply styles to other widgets.</p> <p>The following example adds a static widget which we will apply some styles to:</p> widget.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass WidgetApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(\"Textual\")\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.border = (\"heavy\", \"white\")\n\n\nif __name__ == \"__main__\":\n    app = WidgetApp()\n    app.run()\n</code></pre> <p>The compose method stores a reference to the widget before yielding it. In the mount handler we use that reference to set the same styles on the widget as we did for the screen example. Here is the result:</p> <p> WidgetApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Textual\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Widgets will occupy the full width of their container and as many lines as required to fit in the vertical direction.</p> <p>Note how the combined height of the widget is three rows in the terminal. This is because a border adds two rows (and two columns). If you were to remove the line that sets the border style, the widget would occupy a single row.</p> <p>Information</p> <p>Widgets will wrap text by default. If you were to replace <code>\"Textual\"</code> with a long paragraph of text, the widget will expand downwards to fit.</p>"},{"location":"guide/styles/#colors","title":"Colors","text":"<p>There are a number of style attributes which accept colors. The most commonly used are color which sets the default color of text on a widget, and background which sets the background color (beneath the text).</p> <p>You can set a color value to one of a number of pre-defined color constants, such as <code>\"crimson\"</code>, <code>\"lime\"</code>, and <code>\"palegreen\"</code>. You can find a full list in the Color API.</p> <p>Here's how you would set the screen background to lime:</p> <pre><code>self.screen.styles.background = \"lime\"\n</code></pre> <p>In addition to color names, you can also use any of the following ways of expressing a color:</p> <ul> <li>RGB hex colors starts with a <code>#</code> followed by three pairs of one or two hex digits; one for the red, green, and blue color components. For example, <code>#f00</code> is an intense red color, and <code>#9932CC</code> is dark orchid.</li> <li>RGB decimal color start with <code>rgb</code> followed by a tuple of three numbers in the range 0 to 255. For example <code>rgb(255,0,0)</code> is intense red, and <code>rgb(153,50,204)</code> is dark orchid.</li> <li>HSL colors start with <code>hsl</code> followed by a angle between 0 and 360 and two percentage values, representing Hue, Saturation and Lightness. For example <code>hsl(0,100%,50%)</code> is intense red and <code>hsl(280,60%,49%)</code> is dark orchid.</li> </ul> <p>The background and color styles also accept a Color object which can be used to create colors dynamically.</p> <p>The following example adds three widgets and sets their color styles.</p> colors01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.widgets import Static\n\n\nclass ColorApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(\"Textual One\")\n        yield self.widget1\n        self.widget2 = Static(\"Textual Two\")\n        yield self.widget2\n        self.widget3 = Static(\"Textual Three\")\n        yield self.widget3\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"#9932CC\"\n        self.widget2.styles.background = \"hsl(150,42.9%,49.4%)\"\n        self.widget2.styles.color = \"blue\"\n        self.widget3.styles.background = Color(191, 78, 96)\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <p>Here is the output:</p> <p> ColorApp Textual\u00a0One Textual\u00a0Two Textual\u00a0Three </p>"},{"location":"guide/styles/#alpha","title":"Alpha","text":"<p>Textual represents color internally as a tuple of three values for the red, green, and blue components.</p> <p>Textual supports a common fourth value called alpha which can make a color translucent. If you set alpha on a background color, Textual will blend the background with the color beneath it. If you set alpha on the text color, then Textual will blend the text with the background color.</p> <p>There are a few ways you can set alpha on a color in Textual.</p> <ul> <li>You can set the alpha value of a color by adding a fourth digit or pair of digits to a hex color. The extra digits form an alpha component which ranges from 0 for completely transparent to 255 (completely opaque). Any value between 0 and 255 will be translucent. For example <code>\"#9932CC7f\"</code> is a dark orchid which is roughly 50% translucent.</li> <li>You can also set alpha with the <code>rgba</code> format, which is identical to <code>rgb</code> with the additional of a fourth value that should be between 0 and 1, where 0 is invisible and 1 is opaque. For example <code>\"rgba(192,78,96,0.5)\"</code>.</li> <li>You can add the <code>a</code> parameter on a Color object. For example <code>Color(192, 78, 96, a=0.5)</code> creates a translucent dark orchid.</li> </ul> <p>The following example shows what happens when you set alpha on background colors:</p> colors01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.widgets import Static\n\n\nclass ColorApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widgets = [Static(\"\") for n in range(10)]\n        yield from self.widgets\n\n    def on_mount(self) -&gt; None:\n        for index, widget in enumerate(self.widgets, 1):\n            alpha = index * 0.1\n            widget.update(f\"alpha={alpha:.1f}\")\n            widget.styles.background = Color(191, 78, 96, a=alpha)\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <p>Notice that at an alpha of 0.1 the background almost matches the screen, but at 1.0 it is a solid color.</p> <p> ColorApp alpha=0.1 alpha=0.2 alpha=0.3 alpha=0.4 alpha=0.5 alpha=0.6 alpha=0.7 alpha=0.8 alpha=0.9 alpha=1.0 </p>"},{"location":"guide/styles/#dimensions","title":"Dimensions","text":"<p>Widgets occupy a rectangular region of the screen, which may be as small as a single character or as large as the screen (potentially larger if scrolling is enabled).</p>"},{"location":"guide/styles/#box-model","title":"Box Model","text":"<p>The following styles influence the dimensions of a widget.</p> <ul> <li>width and height define the size of the widget.</li> <li>padding adds optional space around the content area.</li> <li>border draws an optional rectangular border around the padding and the content area.</li> </ul> <p>Additionally, the margin style adds space around a widget's border, which isn't technically part of the widget, but provides visual separation between widgets.</p> <p>Together these styles compose the widget's box model. The following diagram shows how these settings are combined:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT2txcdTAwMTb+3l/h+H4tu/t+6cyZM9VqrbfWevfMO51cYlx1MDAwMaJAaFx1MDAxMlx1MDAxNHyn//2sXHUwMDFklCSERFCw6Dn50EpcdTAwMTKSxd7redaz1r78825lZTVcdTAwMWF03dWPK6tuv+q0vFrg3K6+t+dv3CD0/Fx1MDAwZVxcovHn0O9cdTAwMDXV+M5mXHUwMDE0dcOPXHUwMDFmPrSd4NqNui2n6qJcdTAwMWIv7DmtMOrVPFx1MDAxZlX99lx1MDAwNy9y2+G/7b/7Ttv9V9dv16JcdTAwMDAlL6m4NS/yg+G73JbbdjtRXGJP/1x1MDAwZnxeWfkn/jdlXeBWI6fTaLnxXHUwMDE34kuJgZzT8bP7fic2llBFleCck9FcdTAwMWRe+Fx1MDAxOd5cdTAwMTe5NbhcXFx1MDAwN5vd5Io9tTo46Tt6Y//TbvubXHUwMDFmnISHXHUwMDFkv16tJa+te63WYTRoXHKbwqk2e0HKqDBcbvxr99SrRU379rHzo+/V/MhcdTAwMWEwulx1MDAxY/i9RrPjhmHmS37XqXrRwJ7DeHR22FxmXHUwMDFmV5IzfdtcdTAwMDZYXCIhpMGYXHUwMDEwybA0cnQ5flx1MDAwMMdIY2FcYiZGKEFcdTAwMTVcdTAwMWYzbd1vQW+AaX/h+Ehsu3Sq11xyMLBTXHUwMDFi3Vx1MDAxM1x1MDAwNU4n7DpcdTAwMDH0WXLf7f2PXHUwMDE22CCmNJVUXHUwMDBiplxyS35P0/VcdTAwMWHNyFx1MDAxYUtcdMJaXHUwMDE4psTwbYmxoVx1MDAxYndcZtjJXGI8JfmR1oTu11rsI3+Pt2vTXHS69823XHUwMDFh2lx1MDAwZinzreVcdTAwMWLjXHUwMDBllnayVN9/r+v+vt5vXa5HV0dH52dVXHUwMDE11ndGz8p4pFx1MDAxM1x1MDAwNP7t6ujK7/u/XHUwMDEy03rdmjP0MlwiJSOSSo0l06PrLa9zXHJcdTAwMTc7vVYrOedXr1x1MDAxM8eMz/5+/1x1MDAwNERIZVxuXHUwMDExYYji4Fx1MDAwNFRNjYjdra+tur9f3aq3XHUwMDA3P1x1MDAxYd7N7lx1MDAwMd1cZlx1MDAwYlx1MDAxMFx1MDAxMfqA75nxMPatx+DAXHUwMDFlRYNcdTAwMDI0XHUwMDE4TVx1MDAxOVx1MDAxNVx1MDAxYyshWFx1MDAxNlxylGokJSZKXHS4R6cvj6NB1FmtykvR8Fx1MDAxN69Kty7ySGBCIS1cdTAwMDSXWok8XGKoMIhcdTAwMWFcdTAwMDNewVx1MDAxOcNU5EFAXHUwMDE5XHUwMDEzklxirl9cdTAwMTZcdTAwMDTVb7vnzbOt49rAmE5vn3RVs+a9Qlx1MDAxMHBZXGZcdTAwMDImMeVUSjE1XGKud6+u2mHw6zRw+4HZONu46PHPT1x1MDAwYlx1MDAwYrRcYlx1MDAwNjUnbM43LFxiRpFSXFxIYaiSWpAsXHUwMDBlXHUwMDE0uKDWWlx1MDAxOUOoIIqwQlx1MDAxY7hSqedEXHUwMDA18O88XHUwMDA0SMq1XHUwMDFmiJ9pXGJh0DX8pZz+wZdcIrdcdTAwMWZlvXzY8TtcdTAwMTef9k5+bW1drG1dXHUwMDA0P2818/prTsrn309+7PDLd1x1MDAwM7355Yiz3Z1+c933mt+rXHUwMDFi11+WXHUwMDEzS5nfn5Z/KZCMwchIQjhcdTAwMDeKmlx1MDAxYUU3XHUwMDFlZnzT7Kvewefq9aU52D6W3+YsrmZcZiaPg0hcdTAwMWGDuLA/lEpmtKFcdTAwMTlcdTAwMTBcdMKQ1pJcdTAwMTgjtNRcdTAwMTBNXHUwMDE2pqwkzUOIilx1MDAxY4KwkFQxiHHzR9A8nTHpdL9cdTAwMTNcdTAwMWR6d7bdKc6c3XTaXmuQ6bfYS8HSPSdoeJ10W4YuvDMmd525+1PLa1g/Xm259ayDR1x1MDAxZWQjo8uRn/rlVXi7XHUwMDAzj1x1MDAwYr7Wxn+FXHUwMDFmePBmp3WUteRJ2GKiXHUwMDEwW1x1MDAwNGSaUcDabGpwXHLCzs7hQe1qw2l+3dq9lp2Dm7D5gplcdTAwMGJ+XCK6IERRK4K0XHLLXFxk0Fx1MDAwNalcdTAwMWJcdTAwMDLgYSpccmRcdTAwMTOMXHUwMDFhtTB4pXKicngpSFxcXGZ+YVXmqeb2TXV7/etGh31yu+etSPw8mmskSdTSosH73anVvE5jXHUwMDE50PtgytNCI1bjZ1x1MDAxZuBcdTAwMGLaXHUwMDFkXHUwMDEyXFwpplx1MDAwZo2Tdcayo1cwVVwiMFx1MDAxOSdIvZDA5Fx1MDAxM1x1MDAwNCZNvW9cYl9gXHUwMDFiyLYgUL98cFxcXHUwMDE0vlhcdTAwMGVf63BcdTAwMTmsWoGmciaDzExcdTAwMDZZXHUwMDE1vuVcdTAwMDYlMGt7tVo628pcIu2xJGlcdTAwMWN8XHUwMDE5O0tcdTAwMTFYnuhpXlx1MDAwNEPCpWCCSjJ9tWPnR6O5dbm5b1x1MDAwNs2rk8b+USDO+rdcdTAwMDU4rFx1MDAwNn5cdTAwMThWmk5UbVx1MDAxNmFxvNC2OJlcdTAwMWFcdTAwMTc9tFx1MDAxMYRgI1xyIYxnsEipRJBZXHRNjZREM1lcXFx1MDAwMpyi6FGKxcdcdTAwMGJcdTAwMWaGcCzzwVVcYlxyvVx1MDAwNVx1MDAwMvZlY+vF55/O2t2nauv48MugvXf16cfBXHUwMDE1ny62lmZ/e9v9XHLj17c3RXBUOe+37rw9df3HYnYpwIbvn1x1MDAwNC4qcVx1MDAxMbooMUopkGVTg6u8pWdcdTAwMDZXYSVl7uBcdTAwMTJGIU4heGCNtVx1MDAwMcfO5oBcdTAwMTSucmhcdGIgXHUwMDAzNGRxOSAjiHJcYqZcdTAwMWNiKSeQdubxxTRcdTAwMTJcdTAwMDRMZFx1MDAxNFBuMOXjKCNYWv+RqXxyapjFpr50XHUwMDEwXGYjJ4jWvE6s1D6mkPYwcjSMPj0xOOmJdXzt4cPTtmxf3ahcdTAwMTM/XHUwMDA1N1xim9Ve7Fx1MDAwMlxiY26w4Fx1MDAxYfqCXHUwMDFhbFL3NJxu3ESIKMNcdTAwMTVcdTAwMTAp3Mah3+/vXHUwMDE4XHUwMDAxftXt1Fx1MDAxZTepPJikTKpgRDU3jFxi8DBwMS1VziiKjFx1MDAwMXMgXHSC+5SUQuWMajlhtO63257Ved99r1x1MDAxM403cdyWnyzam66Tk8fwo9LXxmmha5+YpdPkr5VcdTAwMDQy8YfR33+/n3h3oSvbo5Lz4uRx79L/z6rZ7buK+Ixhrlx1MDAxOZMzpNzlLvdcInz2RN1O49ZXoFx1MDAxNojmNFW5XHUwMDE51rQ4XHUwMDAyNU9cdTAwMTlIXHUwMDA1cDSlx+yaY00rXHT1JUm35sImXHUwMDEwL1dcdTAwMTR+ti5YQPyeJSfI59xrflBLS/s/l3LfW/I0OWL5sVxivuCwilE9vdQv12fzXHUwMDE505k7cpUmXGJcdTAwMTRcYoGMmyvKx1Q+5DqIgFx1MDAxMiFcdTAwMDRcdTAwMTBDXHUwMDE0Xdw4P1x1MDAwNCwhpVxyVMDdXFzTXHTFaWB4XHUwMDA29zCOXHUwMDE52GnrezkpXCKYYoxi/lx1MDAwNGQvg1x1MDAxNFx1MDAxOVx1MDAwZp5zUFx1MDAwNMNYr5GWXHUwMDE0Q8tcdTAwMTgsQX/wtERJaVx1MDAwNoWNVkpyyZTQkHK9akFQ6FH2qOSdaUZFUMwpjJeMXHUwMDE0K2MoVnz6Ql75JJIlZlx1MDAxNWh6XHUwMDAzv5RA2/Ox/IZhXHUwMDA0XHQ7tFx1MDAxM8EgkPi4XfNkXHUwMDE1XHTv4LFcdTAwMTZcdTAwMDbP5olcZs7QitJcdTAwMTRslWCtJFxc5jNcdTAwMWNcdTAwMDHGgqh5ylx1MDAxONjrpJXyWWsp0oCO5EZcdTAwMDCSKFFcdTAwMDI4I2m8JPl55SxS5EH2yPvOjCxcdTAwMTJrplx0JKJTXHUwMDEyepxDpGBcdTAwMDY4LTUp6zFcdTAwMGVZ29w4ucWuUP0tsbl95ZxXfTlY9nFyYFxyXHUwMDA09IHt1Cqp+Vx1MDAxOIdAXHUwMDFlh1xmqFx1MDAxMiPhXHUwMDA2I1x1MDAwNF/kXHUwMDE0RESkMpPLj1x1MDAwNI1XJlx1MDAxZkhDXHUwMDEzhTGHZPOtkUb2YfPFcubaXFyBPKFcdTAwMTftMeq/OVx1MDAwMVfIYuBqJY2tqE9fXHUwMDEwYNu/blx1MDAwZqtcdTAwMDbj3unNSbOmyMHaN7b0wIWmVpBdXHUwMDFiqZSwXHUwMDAzXGJcdTAwMTngcq3tbF3OoNlcdTAwMDEgIDdcdTAwMTdcdTAwMDZcXFx1MDAwZbJXXHUwMDEwkVx1MDAxZVx1MDAxOVx1MDAxOOFcdTAwMTYjXHUwMDE2K8NcdMDlXHUwMDAwXFyRKVP8XHUwMDFmuH9cdTAwMTC4+V60RyXpwHlcdPd0oT1cdTAwMDddyCVcdTAwMTQ1eHrofu7XpXvxq7Le9DaOf7Y/fz6+/LGx9NBVXHUwMDE0KfBHyqmiXHUwMDEyXHUwMDA0XVx1MDAwNrqMcWQ4t9OIXHUwMDE1aFx1MDAxZbLIaoBRRnHGXGJjoKxcZp9Q14PcXHUwMDAxXHSMNYeeseV3kUoj7mc8cylcdTAwMTSh4pVcdTAwMDK5SJz7Z8e7J25w1T350Vx1MDAxZmzc7eytNUNZMFxugDlcdTAwMTaMQdBRiimuVaoqnoxNUFx1MDAwMklcdTAwMWFcdTAwMTNwp5mQ879cdTAwMTiFLFTHV4pdKr6c96Z50VxuKFg2fvqBV5TClNmumZpWSO07ub08qG5+ObxsrK/fnlx1MDAwN+J4b/lphSBbeLKDUYaQ8Wk9SiNlsJ3xg+2s2MVccndcdTAwMTJkbbAlXHUwMDA3zOFl6XZcdTAwMWbRiiHgKKBbiKCaKZErXHUwMDA2KEq4XHUwMDA2J3mlsv7ZpFx1MDAwMjKaQKbLJFx1MDAwNVxmYYEpyXOKRra4Q5WhmFx1MDAxMSHMXHUwMDFi5ZRid7LHuCPNyCdFI466eFx1MDAwMoWCfrEj0dOLlPJeX1Y24Vx1MDAxY0lNtDBKXGLI/rOFXHUwMDAxxlx1MDAwNbI+Z9dCcWpSq3bmXlx1MDAxN0hcdTAwMWVdMthoQDpcdTAwMTKhzVx1MDAwYk/wLY9cdTAwMTNcdTAwMTlPm2lcdTAwMTJSuawtfe6D2y+C5Z40iLk17LWUXHUwMDAz/KlBzHtLSlx0oajiYEwhIVx1MDAxMMUhrIKomX698vlp4/i6urfryruoe0hMv1x1MDAxMX3dWnZG4DZtXHUwMDExTFPQd5ZcdTAwMDGzaVx1MDAwYsVcdTAwMDYkrq38gPbA6ULiXHUwMDAyhlx1MDAxYqC9gfCp4cD8lEzQXHUwMDE3QE9cdTAwMTiDXHUwMDEw1Vx1MDAwMi5TjXW+XHUwMDAwXHUwMDAxeZfAdsnz65RcdTAwMThvrVx1MDAwMFHcq/ao5Dt0xkhfXHUwMDA07LQ8XHUwMDFkn5sgjLaZw/TDiL1m55Z4XHUwMDBl+bV5Snb5trk46vhF85CXXHUwMDA215pcdESltPPqMNCcyuZcclx1MDAxNEtEQIcyw5nGgJrFVVx1MDAxMjHSRmktXHUwMDA1SCwstZ5Uj+B2XHUwMDE3XHUwMDAyUIFK2GXimuSHXHUwMDExJaRcdTAwMGWcavXmZie8VlxcXHUwMDE3dao9Krn+nFx1MDAxMdbFXHUwMDA1gZJcdTAwMTVcdTAwMDbUzlx1MDAxMOCQXHUwMDExT4/s5vb15UG3Ujlccu+2XHUwMDBl1ytsoPYrRZOgl1x1MDAwNtmSaGR3XHUwMDE2XHUwMDAxXHUwMDE1z5igKrtMj1x1MDAxOMu5XHUwMDE4Wt72S3pa8twrXHUwMDAyTFwiXHUwMDEwXGbA21x1MDAwNOjFpEZdUyN8QENcdTAwMWOua8ZcdTAwMTRcdTAwMDVcdJFbZc4451pcdTAwMTP6SuN1UUngSNd37i62XHUwMDFiP9yzjbWdwDn9eXjzs6DOSOxcXFx1MDAwZYhJXHUwMDEyMmHDSXqyTVJntHOMsVx1MDAxMZgzm1x1MDAxMt3f8NaKXHUwMDAylUKXXHUwMDFhXs1509xoJb1mLbdxXHUwMDExwVSotPZ9jFakS25PXHUwMDBm1k7Xe7+O62FwuH6MXbr0tGIoMsDXkFx1MDAwYmBlXGZcdTAwMWKjXHUwMDE1bZBcItb9qFLMyOLlg8+mXHUwMDE1amfcXHUwMDAxfeF4jDNN+JlcdTAwMTFIwlx0RJ94sJHp9GLke8VAiMBcdTAwMDJj/r/KLFx1MDAxOMHPl1RBXG5cdTAwMGKQsqFxwvxcIoKInZwllMKEQ7fn1zG8XHJmKXYqe1Qm+NOM1FJUclQlK1wiXHK1vjLDfMbyvl9WXrFNXHUwMDBmylx1MDAxZNI7q81otuRIlERSc6OJsfNcdTAwMWQoW1x1MDAxY7GI5NFlu1xuQMakiZb6XHS88ZyiY7lcdTAwMTTN+NpMRcfyWFT63Fx1MDAwN8dfXHUwMDA02z2p6Dh03pRcdTAwMDP8qZrj0JCnaVxyXjxVgjOioEVnmJ1YvqvR0s5wZlxiYo3dQ4RplopLw0lOQiFiXGaVIDMoXHUwMDExophcdTAwMTBcdTAwMThnXHUwMDBlf1ZlXHUwMDAyXHUwMDEzO81cdTAwMTAzXGJcdTAwMGbAw8JM2nfEqlwiXHUwMDAxYcFcdTAwMTZBIUayXFxcbmOkgUeItzdZsUiClO8tMFx1MDAxMlx1MDAxN1x1MDAxMlx1MDAxOWm1uuTSjk7zlJhP0lx1MDAxZrtcdTAwMDCUXHUwMDAw30L+w6lcdTAwMDHflzlcdTAwMDXymnRGpcSn4ut5d5pRaFx1MDAxNOcwqmRcdTAwMDcjIZmgRE5PLOWb3CwtsVDEscF2koFcdTAwMTFybPKkXHUwMDA0satBXGZcdTAwMTOFXHUwMDAxPCUrKZ/PK5rH0/ol1liI9JKqpDKikVx1MDAwNPlHIKM1oI7YhFx1MDAwNVlgpmBY0SdswbBcZrxSuD6idG+sLDdASlwiuYYkRoNOJGpCZUTYtTKScFx1MDAwNUhcdTAwMTOg3lx1MDAxZiqNby2BqVx1MDAxNDuVPfLuNCOtlG7rYkjhts5cdTAwMTRDjMaE0umzmIprjs+jy7NQRc2Ts1x1MDAwZebru79cdTAwMGVcbqhlubZ10Vx1MDAxONJlu1kpt9BMVyaG27pcdTAwMThky3eGXHRNKFBNMcM8f1tcdTAwMTeCXHUwMDE4J0VcdTAwMGIrqKCIMUj9qWRcdTAwMDVcdTAwMTO1IeBcdTAwMWFcdTAwMGXukrTEsq/jLs1yXHUwMDE2ur+LgoQwtfXmtPu7vLt/6KrT7Vx1MDAxZUbwyFx1MDAxMSlCW3u1++wneczqjeferk3Y1bhcdTAwMWVcdTAwMWbW5LhcdTAwMTEsQlxc29L//H73+7/nXHUwMDBiXHUwMDAzXCIifQ== MarginPaddingContent areaBorderHeightWidth"},{"location":"guide/styles/#width-and-height","title":"Width and height","text":"<p>Setting the width restricts the number of columns used by a widget, and setting the height restricts the number of rows. Let's look at an example which sets both dimensions.</p> dimensions01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.height = 10\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>This code produces the following result.</p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0 me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0 will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see its\u00a0path. </p> <p>Note how the text wraps in the widget, and is cropped because it doesn't fit in the space provided.</p>"},{"location":"guide/styles/#auto-dimensions","title":"Auto dimensions","text":"<p>In practice, we generally want the size of a widget to adapt to its content, which we can do by setting a dimension to <code>\"auto\"</code>.</p> <p>Let's set the height to auto and see what happens.</p> dimensions02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.height = \"auto\"\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>If you run this you will see the height of the widget now grows to accommodate the full text:</p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0 me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0 will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0 will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p>"},{"location":"guide/styles/#units","title":"Units","text":"<p>Textual offers a few different units which allow you to specify dimensions relative to the screen or container. Relative units can better make use of available space if the user resizes the terminal.</p> <ul> <li>Percentage units are given as a number followed by a percent (<code>%</code>) symbol and will set a dimension to a proportion of the widget's parent size. For instance, setting width to <code>\"50%\"</code> will cause a widget to be half the width of its parent.</li> <li>View units are similar to percentage units, but explicitly reference a dimension. The <code>vw</code> unit sets a dimension to a percentage of the terminal width, and <code>vh</code> sets a dimension to a percentage of the terminal height.</li> <li>The <code>w</code> unit sets a dimension to a percentage of the available width (which may be smaller than the terminal size if the widget is within another widget).</li> <li>The <code>h</code> unit sets a dimension to a percentage of the available height.</li> </ul> <p>The following example demonstrates applying percentage units:</p> dimensions03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.height = \"80%\"\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>With the width set to <code>\"50%\"</code> and the height set to <code>\"80%\"</code>, the widget will keep those relative dimensions when resizing the terminal window:</p> 60 x 2080 x 30120 x 40 <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0 me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0 will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0 will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0 total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0 through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0 the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0 nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. </p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0 its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p>"},{"location":"guide/styles/#fr-units","title":"FR units","text":"<p>Percentage units can be problematic for some relative values. For instance, if we want to divide the screen into thirds, we would have to set a dimension to <code>33.3333333333%</code> which is awkward. Textual supports <code>fr</code> units which are often better than percentage-based units for these situations.</p> <p>When specifying <code>fr</code> units for a given dimension, Textual will divide the available space by the sum of the <code>fr</code> units on that dimension. That space will then be divided amongst the widgets as a proportion of their individual <code>fr</code> values.</p> <p>Let's look at an example. We will create two widgets, one with a height of <code>\"2fr\"</code> and one with a height of <code>\"1fr\"</code>.</p> dimensions04.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(TEXT)\n        yield self.widget1\n        self.widget2 = Static(TEXT)\n        yield self.widget2\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"purple\"\n        self.widget2.styles.background = \"darkgreen\"\n        self.widget1.styles.height = \"2fr\"\n        self.widget2.styles.height = \"1fr\"\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>The total <code>fr</code> units for height is 3. The first widget will have a screen height of two thirds because its height style is set to <code>2fr</code>. The second widget's height style is <code>1fr</code> so its screen height will be one third. Here's what that looks like.</p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. </p>"},{"location":"guide/styles/#maximum-and-minimums","title":"Maximum and minimums","text":"<p>The same units may also be used to set limits on a dimension. The following styles set minimum and maximum sizes and can accept any of the values used in width and height.</p> <ul> <li>min-width sets a minimum width.</li> <li>max-width sets a maximum width.</li> <li>min-height sets a minimum height.</li> <li>max-height sets a maximum height.</li> </ul>"},{"location":"guide/styles/#padding","title":"Padding","text":"<p>Padding adds space around your content which can aid readability. Setting padding to an integer will add that number additional rows and columns around the content area. The following example sets padding to 2:</p> padding01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass PaddingApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.padding = 2\n\n\nif __name__ == \"__main__\":\n    app = PaddingApp()\n    app.run()\n</code></pre> <p>Notice the additional space around the text:</p> <p> PaddingApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0 that\u00a0brings\u00a0total\u00a0 obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past, I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0 to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0 there\u00a0will\u00a0be\u00a0nothing.\u00a0 Only\u00a0I\u00a0will\u00a0remain. </p> <p>You can also set padding to a tuple of two integers which will apply padding to the top/bottom and left/right edges. The following example sets padding to <code>(2, 4)</code> which adds two rows to the top and bottom of the widget, and 4 columns to the left and right of the widget.</p> padding02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass PaddingApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.padding = (2, 4)\n\n\nif __name__ == \"__main__\":\n    app = PaddingApp()\n    app.run()\n</code></pre> <p>Compare the output of this example to the previous example:</p> <p> PaddingApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0 mind-killer. Fear\u00a0is\u00a0the\u00a0 little-death\u00a0that\u00a0 brings\u00a0total\u00a0 obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0 pass\u00a0over\u00a0me\u00a0and\u00a0 through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0 past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0 inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0 path. Where\u00a0the\u00a0fear\u00a0has\u00a0 gone\u00a0there\u00a0will\u00a0be\u00a0 nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p> <p>You can also set padding to a tuple of four values which applies padding to each edge individually. The first value is the padding for the top of the widget, followed by the right of the widget, then bottom, then left.</p>"},{"location":"guide/styles/#border","title":"Border","text":"<p>The border style draws a border around a widget. To add a border set <code>styles.border</code> to a tuple of two values. The first value is the border type, which should be a string. The second value is the border color which will accept any value that works with  color and background.</p> <p>The following example adds a border around a widget:</p> border01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass BorderApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Label(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.border = (\"heavy\", \"yellow\")\n\n\nif __name__ == \"__main__\":\n    app = BorderApp()\n    app.run()\n</code></pre> <p>Here is the result:</p> <p> BorderApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0\u2503 \u2503total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u2503 \u2503through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u2503 \u2503the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u2503 \u2503nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>There are many other border types. Run the following from the command prompt to preview them.</p> <pre><code>textual borders\n</code></pre>"},{"location":"guide/styles/#title-alignment","title":"Title alignment","text":"<p>Widgets have two attributes, <code>border_title</code> and <code>border_subtitle</code> which (if set) will be displayed within the border. The <code>border_title</code> attribute is displayed in the top border, and <code>border_subtitle</code> is displayed in the bottom border.</p> <p>There are two styles to set the alignment of these border labels, which may be set to \"left\", \"right\", or \"center\".</p> <ul> <li><code>border-title-align</code> sets the alignment of the title, which defaults to \"left\".</li> <li><code>border-subtitle-align</code> sets the alignment of the subtitle, which defaults to \"right\".</li> </ul> <p>The following example sets both titles and changes the alignment of the title (top) to \"center\".</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass BorderTitleApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.border = (\"heavy\", \"yellow\")\n        self.widget.border_title = \"Litany Against Fear\"\n        self.widget.border_subtitle = \"by Frank Herbert, in \u201cDune\u201d\"\n        self.widget.styles.border_title_align = \"center\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <p>Note the addition of the titles and their alignments:</p> <p> BorderTitleApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Litany\u00a0Against\u00a0Fear\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0\u2503 \u2503total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u2503 \u2503through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u2503 \u2503the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u2503 \u2503nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0by\u00a0Frank\u00a0Herbert,\u00a0in\u00a0\u201cDune\u201d\u00a0\u2501\u251b </p>"},{"location":"guide/styles/#outline","title":"Outline","text":"<p>Outline is similar to border and is set in the same way. The difference is that outline will not change the size of the widget, and may overlap the content area. The following example sets an outline on a widget:</p> outline01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.outline = (\"heavy\", \"yellow\")\n\n\nif __name__ == \"__main__\":\n    app = OutlineApp()\n    app.run()\n</code></pre> <p>Notice how the outline overlaps the text in the widget.</p> <p> OutlineApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503ear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503ear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0\u2503 \u2503otal\u00a0obliteration.\u2503 \u2503\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u2503 \u2503hrough\u00a0me.\u2503 \u2503nd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0\u2503 \u2503he\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503here\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Outline can be useful to emphasize a widget, but be mindful that it may obscure your content.</p>"},{"location":"guide/styles/#box-sizing","title":"Box sizing","text":"<p>When you set padding or border it reduces the size of the widget's content area. In other words, setting padding or border won't change the width or height of the widget.</p> <p>This is generally desirable when you arrange things on screen as you can add border or padding without breaking your layout. Occasionally though you may want to keep the size of the content area constant and grow the size of the widget to fit padding and border. The box-sizing style allows you to switch between these two modes.</p> <p>If you set <code>box_sizing</code> to <code>\"content-box\"</code> then the space required for padding and border will be added to the widget dimensions. The default value of <code>box_sizing</code> is <code>\"border-box\"</code>. Compare the box model diagram for <code>content-box</code> to the box model for <code>border-box</code>.</p> content-boxborder-box <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGlT28pcdTAwMTL9nl9Bcb/Gysz0bJ2qV6/Yl1x1MDAxMCAsXHTJq1spYVx1MDAwYizwXHUwMDE2W8bArfz31yNcdTAwMTZJliWwMY6TukpCsEaWRjN9Tp/uWf55s7CwXHUwMDE43XSCxfdcdTAwMGKLwXXVb4S1rj9YfOvOX1x1MDAwNd1e2G5RkYg/99r9bjW+slx1MDAxZUWd3vt375p+9zKIOlxyv1x1MDAxYXhXYa/vN3pRv1x1MDAxNra9arv5LoyCZu+/7ueu31xm/tNpN2tR10tcdTAwMWVSXHRqYdTu3j0raFx1MDAwNM2gXHUwMDE19eju/6PPXHUwMDBiXHUwMDBi/8Q/U7XrXHUwMDA21chvnTeC+Fx1MDAwYnFRUkGpzPDZ3XYrrqxUXFxLieyxPOyt0tOioEaFZ1TjIClxp1x1MDAxNtVJX+2Y48anXHUwMDBmK8tcdTAwMDfXjWZ40lo+Tlx1MDAxZXpcdTAwMTY2XHUwMDFhh9FN464h/Gq9301VqVx1MDAxN3Xbl8GXsFx1MDAxNtWpnFx1MDAwZp1//F6tXHUwMDFkuVxuPFx1MDAxNnfb/fN6K+j1Ml9qd/xqXHUwMDE43bhzLKn/XSO8X0jOXFzTp1xuXGJcdTAwMGa1NVxcXHUwMDFhRW9rRNIg7lx1MDAwNkJ5Qlx1MDAxYtDKMlx1MDAwYkYrXHUwMDA1Q1VbaTeoL6hqf7H4SOp26lcvz6mCrdrjNVHXb/U6fpd6LLlucP/SiqFcdTAwMDfGXG4trFx1MDAwMouQvE89XGLP65HrXHUwMDEzwT1mXHUwMDE1glF3T9NJbYK4Y1x1MDAwNENtuNaQvKWrQ2erXHUwMDE2m8jfw1xyW/e7nfv2W+y5XHUwMDBmqfq7qq9ccttX2sZSnf/j+uvG9tnJPr+48LdVyGorXHUwMDFmLlx1MDAwZVx1MDAxZe+VMUi/221cdTAwMGZcdTAwMTZcdTAwMWZLft7/llSt36n5d2bmXkRIxplcdTAwMTQqeaFG2Lqkwla/0UjOtauXiWXGZ3++nVx1MDAwMFx1MDAxMFx1MDAxYaFcdTAwMTBcdTAwMTCAXHUwMDFjJTPPR0TQ6e5o4P5t31x1MDAxZixvfP+6Jzu6WYCIXpvQPTZcdTAwMWWGvvVcdTAwMTRcdTAwMWPgKTSA8VxiXHUwMDAymlx1MDAxYq1RSc6MzKCBc/C44Fx1MDAxYYAjWSAyVYhcdTAwMDZ1XHUwMDA2taosRcNfsqqDM5VHXHUwMDAyKONZpSTBUuVBIFx1MDAxNHpcdTAwMDJcdLNMXHUwMDAyMDKMXHUwMDFjXGK4Je5ijIOdLVxiqns7X+snm8e1XHUwMDFixFZ/l3dMvVx1MDAxNv6GIJBWXHUwMDE3gYBcYlxuXGZcIpfPXHUwMDA2XHUwMDAxRqfB7sdGY1x1MDAxYsz+5kr9495BuLkxmVtcdTAwMTCFbsHv1afrXHUwMDE2XHUwMDEwPCEtKs6UloZZkcWBXHUwMDA2jyhcdTAwMThAKaG4JNdQiINAXHUwMDFi81x1MDAxMq+Q7vNHXGJwaYdtXHUwMDFlXHUwMDA01YLqNWOT34K1o5Poy97H9kmwXHUwMDFmNcLLz8fV76NNPlxurqOUxb8tu+3h0fopu8L95tGn6HJ5aXn1eFuL5yGp9L5Tr27m6rfPfeCvw32mnmmlamxcdTAwMTHkpSaq1TiG37tcdTAwMTZcdTAwMWSz/vXHSudQXpyurP6wrZrembJcdTAwMTJcdTAwMWPT8z2NeOdWUFgrNaAwRmJcdTAwMDbxgNZcdTAwMDPpXHUwMDA0IEeUWlxmU9H0ZKBcdTAwMTZ5vFx1MDAwYjVcZndcdTAwMGVcbiW5YvNcbjpvmsaYdHq7XHUwMDE1XHUwMDFkhrdBrFEzZ9f9Zti4yfRbbKVU049+9zxspduyXHUwMDE30DOD2Mdnrl5qhOfOjlx1MDAxN1x1MDAxYsFZ1sCjkFx1MDAwMqfH4qidevMqPd2n23W3asNv0e6G9GS/cZStyUTYXHUwMDAyI1xusSWsZEKq57vTpUF978dutHVzc1xm6+2br6dflr75M4yy2ITgXCLhiNJyi1JcdTAwMDCyrDtcdTAwMDVhXHR65G+F0lrSP/Nq6EpcdNoydGkjKVx1MDAxYzMptz9cdTAwMTNvurRdw9Wr3dMts1x1MDAwNlx1MDAxZjuDXHK5PMDOL1x1MDAxM5Avw+6+X6uFrfN5XHUwMDAw70NVJvOMglx1MDAwZp99QC93XHUwMDAyUY+RXCIpl1x1MDAxZvNcbl5yfSVaWFxi7YlcdTAwMTlpYTlCXHUwMDBii9Tz7tHLhdRcbq36g3wj5PC1QsVUq1x1MDAwNWorfzTIcDTIqvStoFtcdTAwMDKzZlirpVx1MDAwM8Ms0p5cbuiGwZepZylcdTAwMDLLY1IsXHUwMDE0qFxcOM/CpFx1MDAxNM9cdTAwMDZitX/bWPmxXHUwMDE0+T40XHUwMDBlj1pcdTAwMWbPw5NOrVx1MDAwMIjVbrvXq9T9qFovXHUwMDAyoyxcdTAwMDLj1FWqS9BQkIekQJXT5CqDRc6ZR1wilYFVxlpGTqxcdTAwMTCLz8jPlGLx6Vx1MDAxY1xyXHUwMDEyXHUwMDE56Lxv1Vx1MDAxNtEgn3F+ctnfq96eXW037GF7XHUwMDBm+X57U/k4hYCyxj5/qHZPbtesXHUwMDFhyNslXFw7XHK7dj5TPnfPXHUwMDFmXHUwMDA1rZLgT3AgzjdqXGYnV97UY2OrMOkzdWxxMmlkoLlLsFx1MDAxYiVTuVx1MDAxNHdcdTAwMDPJOVx1MDAxNVtcdTAwMGLUXHUwMDFhWnElhlE/PZVcbpw8LpJcdTAwMWIzXHUwMDFjJLd6xFBcdTAwMDBYj0JRbUFw61x1MDAwNLVcdTAwMWPGXHUwMDE5xalWKlx1MDAxNJMgLa7qrL1gL/K70XLYiqXa+1x1MDAxNNjIXHUwMDEzVvtxt3qMSWRKWmpdgVxmXHUwMDEznC2e+524kz1uUFx1MDAxYdTuMomJOFh4XHUwMDFjK7vzYitwc7Mp+ss7XHUwMDFi+uhi/Zj8WCNYekDnI+ZcdTAwMTeDVq20Slx1MDAxNeZRXGKHwFx1MDAxNZBp0N8kdnmslPBcdTAwMTCpOiCQrjNaK1NUqdFuKVepht+LVtrNZuiU3n47bEXDTVx1MDAxY7flklx1MDAwM3w98HP6mF4qXTbMXGZcdTAwMWR3xyyjJr8tJKCJPzz+/vfbkVdcdTAwMTeasjsqOStObvcm/f+4op2DKkxhc1x0zKF7XGZKXHUwMDFibSwzpbTJpLvlnlx1MDAxMZI4nNpfMMwltdBcdTAwMTOCsKKEJTzxYrXw4qRW0lx1MDAxYiVht+JEwZKzXHUwMDE5R90v0Fx1MDAwNq/gw8eJXG7yUfdyu1tLi/tfXHUwMDE3dN/XZDJJwpUsnJjA3aBcdTAwMWaF3qlBqqfwW67SpjNcdTAwMDY1deyCXHUwMDE0XHUwMDFlkMKnuJskPcEziVx1MDAwMe/kXGLzNLNGXHUwMDEzsIFcdTAwMWPecEJgeuAlXHUwMDE3p7R2ro34W1oxXCJBTSxPjKtBMpD0x/JcXFAuXGYyhlx1MDAwMn9TNTLsP59cdTAwMTJcdTAwMDWGoTVGS01q0VKclFx1MDAxM1x1MDAwNdazmjqOSJm5aTYyrWX+dE1QaFDuqORtaUxRUMwqXHUwMDE0y1x1MDAxNFx1MDAwNjqMXHUwMDE0PSGNP19cdTAwMTWUz3mZY1bhhFxyXHUwMDE0SiphWHaCh+SS7NJYRnJNkVx1MDAwNac4dvqsotHB06lngopMJf3TtGKssFx1MDAwNFx1MDAxMUZcdTAwMTdwqfNRXHUwMDBlt4bCXHUwMDAxnCRT/9vxXG7ziClcdTAwMTSBQ3CjiFaS5khcdTAwMDKgXCJcdTAwMWFcdTAwMTk9O+83p5FcIlx1MDAwYnJH3nbGpJFYNo1gXHUwMDExhOJMpDUomLYqueIpXHUwMDEy0cd0Tn7b3T9cdTAwMWaovY3o1lZcdTAwMDbt7mQkMruxcsmUZ610Q+HkwFxmXHUwMDFmykJq4Vx1MDAxMblQkVx1MDAxNKhcZvLXXHUwMDFizpPoWdTU4kZcbklcdTAwMDYgR1xm7zGPWSlcdTAwMDGsJDVlNaRH9Vx1MDAxZcSJdrGRSc0km1x0iVx1MDAxMM+mXHUwMDA2l16DRLI3my62M2VTXHUwMDA1dnGvuqMyokOnXHUwMDA0bVxyavjsI7RcdTAwMTGIbUhrPz/qODw+Xr3+hD++NU5cdTAwMDbtlVUxOPig+nNcdTAwMGZtLjwmjFFcdTAwMWFJXHUwMDA0gM7mQIH0gbGK2oFcdTAwMTSEpk+vlzKQpJBcdTAwMTVX6Vx1MDAxMYRcdTAwMTSkIVx1MDAxNo9mxLxcdTAwMThO6Fx1MDAxMnbWUFx1MDAxNoCQxDz/QvnhyPeiOypJXHUwMDA3Tkvbo8XhsylpT0EygHq+tF/fXGYvwP9yeHKw9v3G9PR688BuzT10XHUwMDAxPDBAYVxmMi7lkFems1x1MDAxZfltyzl55Hio/lx1MDAxNaW9Mlx1MDAwNlx1MDAxMJVcdTAwMDYg8YVyRPaPOF5cdTAwMTC9W+DGpfRVzidzelx1MDAwN6TXkDNW9lxc8pQpTWX8XCIjxPXF8vbpkeZXl37YPFx1MDAxZfRcdTAwMWHLXHUwMDExT09cdTAwMWRNZ1x1MDAxMShcdTAwMDJcdTAwMTbIKFZcdTAwMDOOViPafFx1MDAxZYFTME2UJ8m6XHUwMDE1oHrAU8FcYsZrksirav1KsU3FxTlzmlx1MDAxNq9wLorlvlx1MDAxMoxcdTAwMTGNyedrgsp1/fvR5dbFWuvbh481pj/rw09zPzVWUiylwFquSbNcIiP1lWVcdTAwMTZccp5QXHUwMDAy3ChcdTAwMGXxrFx1MDAxNq+3Ror8XHUwMDA2Z4JcZl4yN8/BwKj5fORzgOojjXGLXHUwMDE1VC5nXHUwMDAwZCDaoJpgqvyLiIXE6lxcXHUwMDEwXHUwMDBi8zhDNMqNgVx0hdqkoPSYndQgUbhoXHUwMDE2uFL4h7JKiTm5Y9iQxuSUosFJa1xus5DWcCZcdTAwMTlcdTAwMWIjXHRZ3uvzSihMeU5cdTAwMTRKaS1YJYaUikBPXHUwMDEzj1x1MDAxM4ujdvmU11MqKlx1MDAwMWTJuCRIt1x1MDAxYc6KXHRiipeMS5b7ioypjTVnqVxc3Jbe98HuS2hutuOdm3e9ljKAXzXeeV+TUkYoyjtcdTAwMTBcdTAwMWZcdTAwMTdSQiwySM2PkXhY2j483Fplllx1MDAxZKxcdTAwMWT8WGnsbKnjrVx0XHUwMDA3JmbHXHTIPa1Rc5JcdTAwMTkk45TKJlx1MDAxZVB6XHUwMDFjhdVCXHUwMDE40NrK11t/wz3rVsBcdTAwMDI9xFxyQOmU/EtcdTAwMTSG8khcdTAwMDVZXHUwMDA0i0ZKrUx+XHQquVxmdGNcdTAwMTMzjl6IU8FMgr4/PFx1MDAwZlEp7ta4ON+jYzr7XCJoW1W4+EdwXHUwMDA2XGJcIj2g/uTKOlx1MDAxZV2cXHUwMDFlX0U7387WQrH+5Wrtw+lg3pFNze2RXHUwMDE3Z8LSoVx1MDAxZIqz0HbJIGFcdTAwMTW5e+Pmmr4mtEFow9yQXHUwMDExcVxijExLMM+6OaBWaYoxOeaCh3heoeapqGI2uDYgXne88bfFdUGfxqW57lx1MDAxY1x1MDAxM9UlXHUwMDEzlFThsiDBlFx1MDAwMW7ZXHUwMDE4XHUwMDEzXGZbS2ebn7+sRlx1MDAxYqe3N7jx+Vx1MDAxY7aD02kvXGaa/nxp48JEQ3yqKebnILJcdTAwMTOUXGZRKvlrZrTlbjFcdTAwMWRcdTAwMGVVbHq4ttTLwjDDrTI8PTybXHUwMDFhMDBWulx1MDAwNFx1MDAxYVx1MDAwMFx1MDAxOIGc59bPc0GBl8suzTgrQO2X0lxi089cbny++bz27Wj95OKK0LpcdTAwMTNt3X5a2d0uSDdyQOGmlFx1MDAxOVCMJNaIqcxuzlx1MDAxOTlHaigmKTTmf2y6scik4sK8NU2NVqB4taFVaMmN4vPXXG53t0Cavf7tdme9YTe+Nb/uhLti3lnFLVx1MDAxNSbbc0pcZrQxmF1taKRHoolcdTAwMTlFP5hg/PXEgqWIg7ulZZLiLyPtiEQj97hcdTAwMTVcdTAwMWNccuNuzbKFXHUwMDE0wz2QilIxoGZMKsJcdTAwMWGchlp4MakwjyCkXGJJWjO00pr0eox7SqFWXHUwMDE0JFx1MDAwMJWhdpTMilx1MDAwN+X9p3FKoUG5o5KzpTEppSjZaIrXTYJbiWdcdTAwMTV//mSl8n6fU0LhXHUwMDE2PWDAOVx1MDAxMDzIv1x1MDAwZi3r0tTyUlPUrIxb7FaypdWLk42JPirbe4BcIiVyrVx1MDAwMFx1MDAxM0RcdTAwMTgvyTaWS9CMrY2VbSx3QqX3fTD8XHUwMDEypptttvHOeFNcdTAwMDbwq5KNd1x1MDAxNZlMY5BwK5RcdTAwMThWU4huxtjdq3yjprmdXHUwMDAzXHKeUlJQjOYmobCko+M5TtJlXCKZXHUwMDExQFElXHRcdTAwMTBePJxJN/Lli4YzyYJJSVx1MDAxMztcdItSKVx1MDAxY7U9ifBQkY7Qd9tUMsjHLmi15NJMsunjbzdcdLriVoFyt5OMdfNL2ajhS+2h5syCllTKpEzJ96yQXHUwMDE5vZdBToD8TjKjUmJUcXnensaUXHUwMDFhxdFLSnRcdTAwMGUxXHUwMDBiUiBFfTVcdTAwMDazlO+FM7fMXCI8a4lcdTAwMTZAo0tGXHLNnpTK01x1MDAxMq1LXHUwMDBmoYSS9ZYvJ1x1MDAxNivjdVx1MDAwMlx1MDAxNH0wRcH6qOjFepriSW7BXHUwMDA1llx1MDAxNvJrtrj7srRcdTAwMTNtJjtcdTAwMGa8Mpo9JDOaXkpcdTAwMTjLjeYmtfjoIVwioV5cIk/odlx1MDAwNFaotMoss8jQx+jNuHL08WfEL5Vio3JH3pzGpJXS7V+wZFx1MDAxNlx1MDAxNrqlMEaPseji5lxmev1PW8dw+vX6y/fT6569Piqa3jlX279I5lHrut0nQIGgTshcdTAwMGWluP15rZvFgi5nJYUuli4v3/+Fe6SUXGZcdTAwMTZtXHUwMDAwIzxcdTAwMDBhXHUwMDE41aFgpjZcdTAwMTlcdTAwMTEhkU8yU/vfnWCet1x1MDAxM8yb+5su+p3OYUS3fCRFauuwdlx1MDAxZv8kt1m8XG6DwfKInZrP4sNVOW5cdTAwMDSHkMC19D8/3/z8P1KdJ/cifQ== MarginPaddingContent areaBorderHeightWidth </p> <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9vr+CYr/G2nn0vFJ161x1MDAxNs9cdTAwMTBcdTAwMTJcYpCsgdzaSim2sFx1MDAwNbJlZFx1MDAxMSBb+e+3RybWw5KwjU2c7CqpXHUwMDA0NLLU1vQ5fbrn8fdva2vr8f3AW3+5tu7dtdzAb0fu7fpcdTAwMGJ7/otcdTAwMTdccv2wj00s+X1cdTAwMTjeRK3kym5cdTAwMWNcdTAwMGaGL//4o+dGV148XGLclud88Yc3bjCMb9p+6LTC3lx1MDAxZn7s9Yb/tf9cdTAwMWW6Pe8/g7DXjiMnfUjDa/txXHUwMDE4jZ7lXHUwMDA1Xs/rx0O8+//w97W1v5N/M9ZFXit2+53ASz6QNKVcdTAwMDaCkMWzh2E/MVZIXHUwMDAyyihcdTAwMTi3+8NtfFrstbHxXHUwMDAyLfbSXHUwMDE2e2r9rue/8+NmcPL57IB5XHUwMDE3LvGvXHUwMDA2nfShXHUwMDE3flx1MDAxMLyP74PRi3Bb3ZsoY9IwjsIr79Rvx11sp4Xz48+1w9hcdTAwMWEwbo7Cm06371xyh7lcdTAwMGaFXHUwMDAzt+XH9/ZcdTAwMWMh47Ojl/ByLT1zh79x7nBKtNRCcVwiOOhxq/082GaiOVx1MDAxN1xmXHUwMDE4SC5cdTAwMGKGbYVcdTAwMDH2XHUwMDA0XHUwMDFh9jtJjtSyz27rqoPm9dvja+LI7Vx1MDAwZlx1MDAwN26E/ZVed/vwlVx1MDAwNTFcdTAwMGVXmkmmXHUwMDA114an36br+Z1ubI1h1CFaXHUwMDE4rsToaVx1MDAxOWu8pFskp5wrotm4wZoweN1O/OOv4lvtutHg4eWtXHUwMDBm7S9cdTAwMTnzreU7RefKOlim51xy8TZO7k7J3edBXHUwMDEzneY0eHfahPG9ct7oRlF4uz5u+fbwU2razaDtjnyMSslcdTAwMTlcdTAwMTB8+6D5uD3w+1fY2L9cdIL0XFzYukrdMjn77cVcdTAwMWNokIZVoYFqYjRcdTAwMTDK2NR4ODm97MZcdTAwMWLhtup97Hxccj5+eCvfvb2vwMMwRGzPjIbCp1x1MDAxZVx1MDAwM1x1MDAwM39cZlx1MDAwYpSgt1x1MDAwYsZcYjFcdTAwMDZ9jGb8yH5eoP9RySRBJzXEyKJdKVx1MDAxOMRcdTAwMDVvt6BcdTAwMTZcZr9DS3pcdTAwMTdiXHUwMDEyXGJcXChHXHUwMDBiXHUwMDAxUisxiVx1MDAwMSaMw4yRmiA0XHRcdTAwMTOTXHUwMDE44JxqLkHA82Kg9e7tefds78/2vTH9m0M6UN22/1x1MDAxM2JcdTAwMDA0VGKAUMJcdTAwMDDUXGYxYftcXJxcXDc9ev9n8+xEXHUwMDBm995cdTAwMDSXXHUwMDFmTueLXHSsXG5cdTAwMDVtd9hdbEyg6GTC8jBwXHLAqVB5XHUwMDFjKOooQzlcdTAwMDEjXGZjylTiwJNKPSUooH9PQoBmYtSDzzNcboDxKXv5szj94U5M3vpcdTAwMWRcdTAwMTF/jravTuLgXCLce/Wm3Olj7y7O+PyLutteXGZOXulX/a2d/YbYi09aXHUwMDAxOT6/m1x1MDAwZUtcdTAwMTX3zVnxYtov8uMgmrMzKyiVrkInSCRFaVx1MDAxNJlcdTAwMWGcXHUwMDA3XHUwMDFmVaB29oP30cX713s3w43b1n60YME2Y4iaQq8x6TCigVx1MDAxOcWI4kJCXHUwMDBlm/hcblx1MDAxY661tGKNXHUwMDBiMLxcdTAwMTKbT1x1MDAxNWySTUKTiVwiMlx1MDAwMcMkXG6yZUSjRTpj2ulhP37vf7XvnZHc2V2351x1MDAwN/e5fku81DqSXHUwMDFidfx+9lVcdTAwMGU9fOZIN+Wu3lxi/I714/XAu8g7eOxjfjNujsPMN2/h0128XfS6XfxcdTAwMTZh5OOT3eBD3pK5sMVcdTAwMTWtwlx1MDAxNkXppylcdTAwMTAxfeR7c35w+nZn+PntznHcUTuvOifdT3NGvrmyITJcdTAwMWa6qHFAXHUwMDAxXHUwMDEwXGZrhGNOkkeX4tIxkoNAiYgvg6uloSujMWrQRVxyXHUwMDEzXHUwMDEyreR68fCqXHUwMDBiUFFHXHUwMDFlNFx1MDAwM/r5LrzqkyDUp2Hv4vCHib2ngffIbbf9fmdcdTAwMTXQ+92U+UJj5itcdTAwMTfhK4iNXHUwMDE3POMmj8G3XtmsKnyphDrhisjF5OlZhCuUXGJXllx0xlx1MDAwZvhcdTAwMDVcblx1MDAxOMzR8X+d8MgnXHUwMDEwtoXNaNVcdTAwMWG+K7dcdTAwMWNmplx1MDAxY2Yt/JRcdTAwMTfVXHUwMDAwree329k0Lo+1x7KvXCL8cnbWYrA+gzSqXHUwMDEyiEQxRtksXHUwMDE5ZGfbb59s3HXce/ewXHUwMDE37t1cZm72gFRcdTAwMDCxXHUwMDE1hcNho+vGrW5cdTAwMTVcdTAwMTihXG6MXHUwMDBiXHUwMDE3qkkxXHUwMDA1OCgjXHUwMDA0l0LlXHUwMDBii4JqR6AyJJpQplxyiEooTlFLqYXi4/VcdTAwMTSDykaWXHUwMDA0V8JcdTAwMTlVmstnriY2L11/6+p6p8ng3WB/+PngVu2cPyn7XHUwMDFi3fe8/fVi19/a273YdU9PT10uP7Y+rWaFZvT8MmwhdqrAhXxcdTAwMGWU80xF7DFs1b/pmbFVWaFZOLZcdTAwMThcdTAwMDOHalx1MDAxNKuGIbKooDxcdTAwMDcujSrWgNFcdTAwMDQ1LJGELS9cdOTUYWAoXHUwMDAzRTlQLUuq9txcdTAwMDLdSI1g0txcdTAwMTBcdTAwMDZFnKH1wsBcXCliYulzx8Bh7Ebxpt9PpNrLXGbSMFx1MDAwZbZukk51XGJKXGZMXHUwMDEwNL5cXFsqTkG23nFcdTAwMDdJXHUwMDE3O1x1MDAxNN1VXHUwMDE5aS9cdTAwMDOTdtHaeExrXHUwMDE0w+KtY3bNdjY25T5rvTmmh/y8t/1cdTAwMWSaY8Cve/12rUlccuIwXHJcdTAwMDYlXHUwMDExJ1rjX6kmjGKOMWhcdTAwMGVnXHUwMDA2r1NSXG5VZVR5UJowKnCH8VbY6/lW51x1MDAxZIV+Py6+4uRdbli0dz13Qlx1MDAxZuOXyrZcdTAwMTVpYWDvmKfT9Ke1XHUwMDE0Mskv45//elF6daUn26Mx4cTp7X7L/j+raEfXXHUwMDE3xdNjsYCRx8pYPT2hlTvLs1x1MDAxMtqcwlx1MDAxZDRihitqhLKygFx1MDAxNataysGEXFxK7Fx1MDAxZMy6dbVaeHJVK33ZdXk31cJIhO3PI1xyllx1MDAxMMJnyVxuJvPuzTBqZ8X9j0u7XHUwMDFmLJlPkVBUlpVcYmbSKIXeP/2gab1IW8yA0cLRXHUwMDBiRDtSXHUwMDEwJE4g3GiTwedIjmAzZkVcdTAwMWP9TGnk0KWhXHUwMDE3g5yQ0lx1MDAwNjdkcNCspESNPM/xXHUwMDFhjpaCLVx1MDAxM9CJpNygnVx1MDAxNNRcdTAwMWMltVWQI8VcdTAwMDD6mCpQxGilJGDXXGKt02g0Vlx1MDAwNdrRkmEqRFxmkahUICtmfnVRUOlP9mhMutKMqqCaVLjkxdNjUsHwx7iZZWZS/fyUXHUwMDE1Jlx1MDAxNVx1MDAwMIZZu1accZpGkIRTXHUwMDE4qlWCnlx1MDAwYlRcdTAwMTCioLqU93ROkYZcdTAwMTJI1LN9Xiqcc6SiNNOIXHUwMDEwNFx1MDAwNclDTiQ50tY5XHUwMDA05mT/XHUwMDAwViHYb0YgNFx1MDAxOFVcdTAwMDJJJX1cdTAwMWJp/lNFXCLlk+h+clx1MDAxMqlyIHtMus6MJJJoplx1MDAxMlx1MDAwZdGiejyAII1cdTAwMGL0yOnHynfc+91B0CHNe9o6+nIs2NZ1pz9cdTAwMWaFPN9YOShw8ItcIj2D4sJQmtclglJcdTAwMDdTPWCUXCLhSrk8XVwiMN2XmOyXliCpU6xOfs8yXHUwMDEwPVxcSzPPdMbVJo38zVx1MDAxNovlXFzbQoFcXNKL9lx1MDAxOPffgoCLwKxcdTAwMDIuYlpcYok6e2rcfo1JTM8uL4/5K7155DF+pE/C1cetclx1MDAwNFKmRKFjU6g8bJUmXHUwMDBlalx1MDAwMi2JoFx1MDAxY4XZ8opcdTAwMDGA2ldQkVx1MDAxZFx1MDAxYlx1MDAxOKOWODyRhSWwTSZcdTAwMGZgXHUwMDE2NMeg3r+wTdpcdTAwMTZcbtvJXrRHI+3ARal2wyonp1FJmJI0XHUwMDFik1x1MDAxZkNu97T1seG7uumfiNthXHUwMDE0XGbgar9q4G91kGvszFHCXGZTzNhZNPmBXHTJXHUwMDE0akOpNGWYWGUnky9etVx1MDAxYrt4g9tcdTAwMDVcdTAwMDE2PYCSup5cdTAwMWShxORBg5DKlutFxpxcdTAwMTGUNbdF2J82XHUwMDAwl2f8XHUwMDA0iOBcXFx1MDAxYqFcdTAwMTRXoFVWi49HJ1BcdTAwMTNJ4Fx1MDAxOG64ydVcdTAwMDRyYl1cXEf87O71wac+XHUwMDA0fPPr8aG5fffpkbGJZXLIUmV8o9qlkuZJb1pcdTAwMTSvUKKqS4xIYVxcIK9MX2I87X9yNztcdTAwMWJcdTAwMDfXsblcdTAwMGVft44/6aG6Wn1iUY62Yy+Gg9CSZtZtJcSiqMOMXaYkUVx1MDAxNDC+vFx1MDAxMU9MXHUwMDE5gFx1MDAxM84lXHUwMDEwUJiz8ZJygKHoKlxuXHUwMDEzXHUwMDBlwTRXYrJcdTAwMTiAmFI8y0k/O62gMqaYvFwiWVwiLlxieiOdZFx1MDAxNe1IXHUwMDBlXHUwMDE4XHUwMDE4XGYjnFxuUVlH/EexSrU72aPoSDMyStWoo1bV1UXQXHUwMDA0I7NR009cdTAwMTUs769V51x1MDAxMyRcZoxvmml0VU15fqWX5MqRQlx1MDAwM1x1MDAwM8XxXmp583xTXHUwMDE41I43XHUwMDAyp9RcdTAwMGXaz05cdTAwMThPXHUwMDE5bqyPXHUwMDE0OVebaSZSvbStve93v19cdTAwMDbNzTWMuTfqtYxcdTAwMDP8qGHMXHUwMDA3S2pcdTAwMTmhquaQXHUwMDFioyzOq1wiRlx1MDAxYqpcdTAwMTlMP1x1MDAwZmEn2N30olx1MDAwZsHB9kWjcfl+b/NAdVc+d7GpXHUwMDBiQt1cYm2IMpLnU1x1MDAxN0GoYydvUmaFs1x1MDAxMMurOlx1MDAxMEdcdTAwMTLDkPIxg0LuZ7REYYBwXGJBMapcdTAwMDU2M010SfHQ2HnFdJ6lXHUwMDAxqyAyfrUqRHWv2qMx2aEzxvoqZGeHxlxuwFaCSsblXGZcdTAwMDOJW/os+qT3z/eGTdlvXHUwMDFmeTJqbp6tOq5BMocwzKE0SClcdTAwMDXPZ1x1MDAwZWCsLtVSXHUwMDAyaFBMXHUwMDE2J0gvXHUwMDEy11x1MDAxYWWVlkJJSqTWZSVcdLA7XHUwMDFjoFxmVIKJZMnVXHUwMDA0rDm26rmUwFNRndryL6rHXHUwMDE3VPapPVx1MDAxYVx1MDAxM905I6irS1x1MDAwMjWLXGYwvbKlRlx1MDAwZdOXXHUwMDA0ro/8+y3SNedcdTAwMWa67Y7vn53e7u6t/ChcdTAwMDFcdTAwMDNwXGaVRktjXGLDfLqwdYnmXHUwMDBlxUxTKWqzTbnEcVx1MDAwMlx1MDAwNKVDsEeYpkTR7Gq8zCCf5lx1MDAwMrBdc66YoXRiXHI7xYTDUFwi5plTuFxu0C4vNqKjUtSPJNlMXHUwMDA3aHZcdTAwMDZNWmy0U42JXHUwMDExXHUwMDA0OFx1MDAxM7Sy2rjt9ptnPGTn9+JcdTAwMGJcdTAwMWKqo2PYV41ftS7QqPSpUeuEOy2MWZioLFx1MDAwZVx1MDAxOCWTXYCmXHUwMDE3XGaXYuvd61x1MDAxYlxugygkV1+uXHUwMDA2zd1ccrq/6sRiXHUwMDE3XHUwMDAxK1wiXHUwMDExiShcdTAwMDeULTlcdTAwMTaIhTmMMrthXHUwMDEyXHUwMDAzu6JrebzC7OQ7u9hYKjvJSZcsXG62w1hcdTAwMTQoXHUwMDA2ICGl0lxcZ1x1MDAwMsN3ZtHG2PDzI1KBJTFcdTAwMGJxiCDSXHUwMDBls1x1MDAwMoKEI7WUzDGiXHUwMDBlZVxcM0zXXGJcdTAwMDVM6SqXM/yjmKXaqezRKPGnXHUwMDE5qaWq6qhqJFx1MDAwYrpcdTAwMGJcdTAwMTUzTEcq77FcdTAwMTXnXHUwMDE1JoQjNJN25Vx1MDAwMFxiY1xuq7ZAXHUwMDFhh2qFnopdw1x1MDAxOC9cdTAwMWG2wKJj+uC6oqO09Icq65lcdTAwMTc51IvRnKvNVHWsj0W19/3u98sgu7mqjiPnzTjAjyo6jlxmmU9qQMbFi8NcdTAwMTBUXHUwMDE4JG0mp6851m+atLKTnFxyKjmuXHTlRmCQyqcwXG6sXHUwMDEwwVx1MDAxNIeB3dOnZoJcIlx1MDAwN+7Ck2pcdTAwMTNcdTAwMDSNtSNRo9XYwpTtP8JcdTAwMWMjXHUwMDA0hlx1MDAwNTtcdTAwMDVcdTAwMGWN5ZM5XGbmWUJcdTAwMTIxzz5cXKugNGZbPGGXeVKN6krb7TUwnGaS/1x1MDAwN1xyYreLsVwiXVx1MDAwMrZcdTAwMTKAjIovSJDSrVxuJiTIzyQ0XHUwMDFhNU6VtE/604xKozqJ0ZVFT8G5xD9meq1Rv9nNXG5cdTAwMTNcdTAwMGKVnNi1lPhfcVxupeCONFx1MDAwNLVcYv4k6qZQPp1YNCQrXHUwMDAxJNGWXHUwMDE3oIRX7PIwRmzJSlx1MDAxOM3snKtcIq/gWck5Uz9gifiySiPUQaEnQWNcdTAwMTKjqZJUlVRGhGPXXHUwMDFlUVBcYlx1MDAxZCFFblx1MDAxZEWOPco325pgj18jgWlU+5Q9Jr1pRlap3dzFsMokxqC254ZPTyyt4y+dm6NBcDxodT9s0r1cdTAwMGZfL5tVeyyt2NYu0tFcbr8tui9nupDH2G1yXHI6LbW+bZipnjzx9K1dqMOBVi2sYII5ljUsXHUwMDAzlk/VtjsoamaL88+b4vy8W7zMQoe/fb9xctN1dzB4XHUwMDFm4y3HhIjv2m8/pD7pbda/+N7tZsmGyVx1MDAxN8lhTU5egsWHZ9/0399++/Z/3Vx1MDAxNVx1MDAwZVx1MDAwMiJ9 MarginPaddingContent areaBorderHeightWidth </p> <p>The following example creates two widgets with a width of 30, a height of 6, and a border and padding of 1. The first widget has the default <code>box_sizing</code> (<code>\"border-box\"</code>). The second widget sets <code>box_sizing</code> to <code>\"content-box\"</code>.</p> box_sizing01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass BoxSizing(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(TEXT)\n        yield self.widget1\n        self.widget2 = Static(TEXT)\n        yield self.widget2\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"purple\"\n        self.widget2.styles.background = \"darkgreen\"\n        self.widget1.styles.width = 30\n        self.widget2.styles.width = 30\n        self.widget1.styles.height = 6\n        self.widget2.styles.height = 6\n        self.widget1.styles.border = (\"heavy\", \"white\")\n        self.widget2.styles.border = (\"heavy\", \"white\")\n        self.widget1.styles.padding = 1\n        self.widget2.styles.padding = 1\n        self.widget2.styles.box_sizing = \"content-box\"\n\n\nif __name__ == \"__main__\":\n    app = BoxSizing()\n    app.run()\n</code></pre> <p>The padding and border of the first widget is subtracted from the height leaving only 2 lines in the content area. The second widget also has a height of 6, but the padding and border adds additional height so that the content area remains 6 lines.</p> <p> BoxSizing \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u2503 \u2503brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p>"},{"location":"guide/styles/#margin","title":"Margin","text":"<p>Margin is similar to padding in that it adds space, but unlike padding, margin is outside of the widget's border. It is used to add space between widgets.</p> <p>The following example creates two widgets, each with a margin of 2.</p> margin01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass MarginApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(TEXT)\n        yield self.widget1\n        self.widget2 = Static(TEXT)\n        yield self.widget2\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"purple\"\n        self.widget2.styles.background = \"darkgreen\"\n        self.widget1.styles.border = (\"heavy\", \"white\")\n        self.widget2.styles.border = (\"heavy\", \"white\")\n        self.widget1.styles.margin = 2\n        self.widget2.styles.margin = 2\n\n\nif __name__ == \"__main__\":\n    app = MarginApp()\n    app.run()\n</code></pre> <p>Notice how each widget has an additional two rows and columns around the border.</p> <p> MarginApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Note</p> <p>In the above example both widgets have a margin of 2, but there are only 2 lines of space between the widgets. This is because margins of consecutive widgets overlap. In other words when there are two widgets next to each other Textual picks the greater of the two margins.</p>"},{"location":"guide/styles/#more-styles","title":"More styles","text":"<p>We've covered the most fundamental styles used by Textual apps, but there are many more which you can use to customize many aspects of how your app looks. See the Styles reference for a comprehensive list.</p> <p>In the next chapter we will discuss Textual CSS which is a powerful way of applying styles to widgets that keeps your code free of style attributes.</p>"},{"location":"guide/testing/","title":"Testing","text":"<p>Code testing is an important part of software development. This chapter will cover how to write tests for your Textual apps.</p>"},{"location":"guide/testing/#what-is-testing","title":"What is testing?","text":"<p>It is common to write tests alongside your app. A test is simply a function that confirms your app is working correctly.</p> <p>Learn more about testing</p> <p>We recommend Python Testing with pytest for a comprehensive guide to writing tests.</p>"},{"location":"guide/testing/#do-you-need-to-write-tests","title":"Do you need to write tests?","text":"<p>The short answer is \"no\", you don't need to write tests.</p> <p>In practice however, it is almost always a good idea to write tests. Writing code that is completely bug free is virtually impossible, even for experienced developers. If you want to have confidence that your application will run as you intended it to, then you should write tests. Your test code will help you find bugs early, and alert you if you accidentally break something in the future.</p>"},{"location":"guide/testing/#testing-frameworks-for-textual","title":"Testing frameworks for Textual","text":"<p>Textual doesn't require any particular test framework. You can use any test framework you are familiar with, but we will be using pytest in this chapter.</p>"},{"location":"guide/testing/#testing-apps","title":"Testing apps","text":"<p>You can often test Textual code in the same way as any other app, and use similar techniques. But when testing user interface interactions, you may need to use Textual's dedicated test features.</p> <p>Let's write a simple Textual app so we can demonstrate how to test it. The following app shows three buttons labelled \"red\", \"green\", and \"blue\". Clicking one of those buttons or pressing a corresponding R, G, and B key will change the background color.</p> rgb.pyOutput <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Button, Footer\n\n\nclass RGBApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    Horizontal {\n        width: auto;\n        height: auto;\n    }\n    \"\"\"\n\n    BINDINGS = [\n        (\"r\", \"switch_color('red')\", \"Go Red\"),\n        (\"g\", \"switch_color('green')\", \"Go Green\"),\n        (\"b\", \"switch_color('blue')\", \"Go Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            yield Button(\"Red\", id=\"red\")\n            yield Button(\"Green\", id=\"green\")\n            yield Button(\"Blue\", id=\"blue\")\n        yield Footer()\n\n    @on(Button.Pressed)\n    def pressed_button(self, event: Button.Pressed) -&gt; None:\n        assert event.button.id is not None\n        self.action_switch_color(event.button.id)\n\n    def action_switch_color(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = RGBApp()\n    app.run()\n</code></pre> <p> RGBApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Red\u00a0\u00a0Green\u00a0\u00a0Blue\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0r\u00a0Go\u00a0Red\u00a0\u00a0g\u00a0Go\u00a0Green\u00a0\u00a0b\u00a0Go\u00a0Blue\u00a0\u258f^p\u00a0palette </p> <p>Although it is straightforward to test an app like this manually, it is not practical to click every button and hit every key in your app after changing a single line of code. Tests allow us to automate such testing so we can quickly simulate user interactions and check the result.</p> <p>To test our simple app we will use the <code>run_test()</code> method on the <code>App</code> class. This replaces the usual call to <code>run()</code> and will run the app in headless mode, which prevents Textual from updating the terminal but otherwise behaves as normal.</p> <p>The <code>run_test()</code> method is an async context manager which returns a <code>Pilot</code> object. You can use this object to interact with the app as if you were operating it with a keyboard and mouse.</p> <p>Let's look at the tests for the example above:</p> test_rgb.py<pre><code>from rgb import RGBApp\n\nfrom textual.color import Color\n\n\nasync def test_keys():  # (1)!\n    \"\"\"Test pressing keys has the desired result.\"\"\"\n    app = RGBApp()\n    async with app.run_test() as pilot:  # (2)!\n        # Test pressing the R key\n        await pilot.press(\"r\")  # (3)!\n        assert app.screen.styles.background == Color.parse(\"red\")  # (4)!\n\n        # Test pressing the G key\n        await pilot.press(\"g\")\n        assert app.screen.styles.background == Color.parse(\"green\")\n\n        # Test pressing the B key\n        await pilot.press(\"b\")\n        assert app.screen.styles.background == Color.parse(\"blue\")\n\n        # Test pressing the X key\n        await pilot.press(\"x\")\n        # No binding (so no change to the color)\n        assert app.screen.styles.background == Color.parse(\"blue\")\n\n\nasync def test_buttons():\n    \"\"\"Test pressing keys has the desired result.\"\"\"\n    app = RGBApp()\n    async with app.run_test() as pilot:\n        # Test clicking the \"red\" button\n        await pilot.click(\"#red\")  # (5)!\n        assert app.screen.styles.background == Color.parse(\"red\")\n\n        # Test clicking the \"green\" button\n        await pilot.click(\"#green\")\n        assert app.screen.styles.background == Color.parse(\"green\")\n\n        # Test clicking the \"blue\" button\n        await pilot.click(\"#blue\")\n        assert app.screen.styles.background == Color.parse(\"blue\")\n</code></pre> <ol> <li>The <code>run_test()</code> method requires that it run in a coroutine, so tests must use the <code>async</code> keyword.</li> <li>This runs the app and returns a Pilot instance we can use to interact with it.</li> <li>Simulates pressing the R key.</li> <li>This checks that pressing the R key has resulted in the background color changing.</li> <li>Simulates clicking on the widget with an <code>id</code> of <code>red</code> (the button labelled \"Red\").</li> </ol> <p>There are two tests defined in <code>test_rgb.py</code>. The first to test keys and the second to test button clicks. Both tests first construct an instance of the app and then call <code>run_test()</code> to get a Pilot object. The <code>test_keys</code> function simulates key presses with <code>Pilot.press</code>, and <code>test_buttons</code> simulates button clicks with <code>Pilot.click</code>.</p> <p>After simulating a user interaction, Textual tests will typically check the state has been updated with an <code>assert</code> statement. The <code>pytest</code> module will record any failures of these assert statements as a test fail.</p> <p>If you run the tests with <code>pytest test_rgb.py</code> you should get 2 passes, which will confirm that the user will be able to click buttons or press the keys to change the background color.</p> <p>If you later update this app, and accidentally break this functionality, one or more of your tests will fail. Knowing which test has failed will help you quickly track down where your code was broken.</p>"},{"location":"guide/testing/#simulating-key-presses","title":"Simulating key presses","text":"<p>We've seen how the <code>press</code> method simulates keys. You can also supply multiple keys to simulate the user typing in to the app. Here's an example of simulating the user typing the word \"hello\".</p> <pre><code>await pilot.press(\"h\", \"e\", \"l\", \"l\", \"o\")\n</code></pre> <p>Each string creates a single keypress. You can also use the name for non-printable keys (such as \"enter\") and the \"ctrl+\" modifier. These are the same identifiers as used for key events, which you can experiment with by running <code>textual keys</code>.</p>"},{"location":"guide/testing/#simulating-clicks","title":"Simulating clicks","text":"<p>You can simulate mouse clicks in a similar way with <code>Pilot.click</code>. If you supply a CSS selector Textual will simulate clicking on the matching widget.</p> <p>Note</p> <p>If there is another widget in front of the widget you want to click, you may end up clicking the topmost widget rather than the widget indicated in the selector. This is generally what you want, because a real user would experience the same thing.</p>"},{"location":"guide/testing/#clicking-the-screen","title":"Clicking the screen","text":"<p>If you don't supply a CSS selector, then the click will be relative to the screen. For example, the following simulates a click at (0, 0):</p> <pre><code>await pilot.click()\n</code></pre>"},{"location":"guide/testing/#click-offsets","title":"Click offsets","text":"<p>If you supply an <code>offset</code> value, it will be added to the coordinates of the simulated click. For example the following line would simulate a click at the coordinates (10, 5).</p> <pre><code>await pilot.click(offset=(10, 5))\n</code></pre> <p>If you combine this with a selector, then the offset will be relative to the widget. Here's how you would click the line above a button.</p> <pre><code>await pilot.click(Button, offset=(0, -1))\n</code></pre>"},{"location":"guide/testing/#modifier-keys","title":"Modifier keys","text":"<p>You can simulate clicks in combination with modifier keys, by setting the <code>shift</code>, <code>meta</code>, or <code>control</code> parameters. Here's how you could simulate ctrl-clicking a widget with an ID of \"slider\":</p> <pre><code>await pilot.click(\"#slider\", control=True)\n</code></pre>"},{"location":"guide/testing/#changing-the-screen-size","title":"Changing the screen size","text":"<p>The default size of a simulated app is (80, 24). You may want to test what happens when the app has a different size. To do this, set the <code>size</code> parameter of <code>run_test</code> to a different size. For example, here is how you would simulate a terminal resized to 100 columns and 50 lines:</p> <pre><code>async with app.run_test(size=(100, 50)) as pilot:\n    ...\n</code></pre>"},{"location":"guide/testing/#pausing-the-pilot","title":"Pausing the pilot","text":"<p>Some actions in a Textual app won't change the state immediately. For instance, messages may take a moment to bubble from the widget that sent them. If you were to post a message and immediately <code>assert</code> you may find that it fails because the message hasn't yet been processed.</p> <p>You can generally solve this by calling <code>pause()</code> which will wait for all pending messages to be processed. You can also supply a <code>delay</code> parameter, which will insert a delay prior to waiting for pending messages.</p>"},{"location":"guide/testing/#textuals-tests","title":"Textual's tests","text":"<p>Textual itself has a large battery of tests. If you are interested in how we write tests, see the tests/ directory in the Textual repository.</p>"},{"location":"guide/testing/#snapshot-testing","title":"Snapshot testing","text":"<p>Snapshot testing is the process of recording the output of a test, and comparing it against the output from previous runs.</p> <p>Textual uses snapshot testing internally to ensure that the builtin widgets look and function correctly in every release. We've made the pytest plugin we built available for public use.</p> <p>The official Textual pytest plugin can help you catch otherwise difficult to detect visual changes in your app.</p> <p>It works by generating an SVG screenshot (such as the images in these docs) from your app. If the screenshot changes in any test run, you will have the opportunity to visually compare the new output against previous runs.</p>"},{"location":"guide/testing/#installing-the-plugin","title":"Installing the plugin","text":"<p>You can install <code>pytest-textual-snapshot</code> using your favorite package manager (<code>pip</code>, <code>poetry</code>, etc.).</p> <pre><code>pip install pytest-textual-snapshot\n</code></pre>"},{"location":"guide/testing/#creating-a-snapshot-test","title":"Creating a snapshot test","text":"<p>With the package installed, you now have access to the <code>snap_compare</code> pytest fixture.</p> <p>Let's look at an example of how we'd create a snapshot test for the calculator app below.</p> <p> CalculatorApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0C\u00a0\u00a0+/-\u00a0\u00a0%\u00a0\u00a0\u00f7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a07\u00a0\u00a08\u00a0\u00a09\u00a0\u00a0\u00d7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a04\u00a0\u00a05\u00a0\u00a06\u00a0\u00a0-\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a01\u00a0\u00a02\u00a0\u00a03\u00a0\u00a0+\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a00\u00a0\u00a0.\u00a0\u00a0=\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>First, we need to create a new test and specify the path to the Python file containing the app. This path should be relative to the location of the test.</p> <pre><code>def test_calculator(snap_compare):\n    assert snap_compare(\"path/to/calculator.py\")\n</code></pre> <p>Let's run the test as normal using <code>pytest</code>.</p> <pre><code>pytest\n</code></pre> <p>When this test runs for the first time, an SVG screenshot of the calculator app is generated, and the test will fail. Snapshot tests always fail on the first run, since there's no previous version to compare the snapshot to.</p> <p></p> <p>If you open the snapshot report in your browser, you'll see something like this:</p> <p></p> <p>Tip</p> <p>You can usually open the link directly from the terminal, but some terminal emulators may require you to hold Ctrl or Cmd while clicking for links to work.</p> <p>The report explains that there's \"No history for this test\". It's our job to validate that the initial snapshot looks correct before proceeding. Our calculator is rendering as we expect, so we'll save this snapshot:</p> <pre><code>pytest --snapshot-update\n</code></pre> <p>Warning</p> <p>Only ever run pytest with <code>--snapshot-update</code> if you're happy with how the output looks on the left hand side of the snapshot report. When using <code>--snapshot-update</code>, you're saying \"I'm happy with all of the screenshots in the snapshot test report, and they will now represent the ground truth which all future runs will be compared against\". As such, you should only run <code>pytest --snapshot-update</code> after running <code>pytest</code> and confirming the output looks good.</p> <p>Now that our snapshot is saved, if we run <code>pytest</code> (with no arguments) again, the test will pass. This is because the screenshot taken during this test run matches the one we saved earlier.</p>"},{"location":"guide/testing/#catching-a-bug","title":"Catching a bug","text":"<p>The real power of snapshot testing comes from its ability to catch visual regressions which could otherwise easily be missed.</p> <p>Imagine a new developer joins your team, and tries to make a few changes to the calculator. While making this change they accidentally break some styling which removes the orange coloring from the buttons on the right of the app. When they run <code>pytest</code>, they're presented with a report which reveals the damage:</p> <p></p> <p>On the right, we can see our \"historical\" snapshot - this is the one we saved earlier. On the left is how our app is currently rendering - clearly not how we intended!</p> <p>We can click the \"Show difference\" toggle at the top right of the diff to overlay the two versions:</p> <p></p> <p>This reveals another problem, which could easily be missed in a quick visual inspection - our new developer has also deleted the number 4!</p> <p>Tip</p> <p>Snapshot tests work well in CI on all supported operating systems, and the snapshot report is just an HTML file which can be exported as a build artifact.</p>"},{"location":"guide/testing/#pressing-keys","title":"Pressing keys","text":"<p>You can simulate pressing keys before the snapshot is captured using the <code>press</code> parameter.</p> <pre><code>def test_calculator_pressing_numbers(snap_compare):\n    assert snap_compare(\"path/to/calculator.py\", press=[\"1\", \"2\", \"3\"])\n</code></pre>"},{"location":"guide/testing/#changing-the-terminal-size","title":"Changing the terminal size","text":"<p>To capture the snapshot with a different terminal size, pass a tuple <code>(width, height)</code> as the <code>terminal_size</code> parameter.</p> <pre><code>def test_calculator(snap_compare):\n    assert snap_compare(\"path/to/calculator.py\", terminal_size=(50, 100))\n</code></pre>"},{"location":"guide/testing/#running-setup-code","title":"Running setup code","text":"<p>You can also run arbitrary code before the snapshot is captured using the <code>run_before</code> parameter.</p> <p>In this example, we use <code>run_before</code> to hover the mouse cursor over the widget with ID <code>number-5</code> before taking the snapshot.</p> <pre><code>def test_calculator_hover_number(snap_compare):\n    async def run_before(pilot) -&gt; None:\n        await pilot.hover(\"#number-5\")\n\n    assert snap_compare(\"path/to/calculator.py\", run_before=run_before)\n</code></pre> <p>For more information, visit the <code>pytest-textual-snapshot</code> repo on GitHub.</p>"},{"location":"guide/widgets/","title":"Widgets","text":"<p>In this chapter we will explore widgets in more detail, and how you can create custom widgets of your own.</p>"},{"location":"guide/widgets/#what-is-a-widget","title":"What is a widget?","text":"<p>A widget is a component of your UI responsible for managing a rectangular region of the screen. Widgets may respond to events in much the same way as an app. In many respects, widgets are like mini-apps.</p> <p>Information</p> <p>Every widget runs in its own asyncio task.</p>"},{"location":"guide/widgets/#custom-widgets","title":"Custom widgets","text":"<p>There is a growing collection of builtin widgets in Textual, but you can build entirely custom widgets that work in the same way.</p> <p>The first step in building a widget is to import and extend a widget class. This can either be Widget which is the base class of all widgets, or one of its subclasses.</p> <p>Let's create a simple custom widget to display a greeting.</p> hello01.py<pre><code>from textual.app import App, ComposeResult, RenderResult\nfrom textual.widget import Widget\n\n\nclass Hello(Widget):\n    \"\"\"Display a greeting.\"\"\"\n\n    def render(self) -&gt; RenderResult:\n        return \"Hello, [b]World[/b]!\"\n\n\nclass CustomApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> <p>The highlighted lines define a custom widget class with just a render() method. Textual will display whatever is returned from render in the content area of your widget. We have returned a string in the code above, but there are other possible return types which we will cover later.</p> <p>Note that the text contains tags in square brackets, i.e. <code>[b]</code>. This is console markup which allows you to embed various styles within your content. If you run this you will find that <code>World</code> is in bold.</p> <p> CustomApp Hello,\u00a0World! </p> <p>This (very simple) custom widget may be styled in the same way as builtin widgets, and targeted with CSS. Let's add some CSS to this app.</p> hello02.pyhello02.tcss hello02.py<pre><code>from textual.app import App, ComposeResult, RenderResult\nfrom textual.widget import Widget\n\n\nclass Hello(Widget):\n    \"\"\"Display a greeting.\"\"\"\n\n    def render(self) -&gt; RenderResult:\n        return \"Hello, [b]World[/b]!\"\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello02.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    color: $text;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p>The addition of the CSS has completely transformed our custom widget.</p> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHello,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"guide/widgets/#static-widget","title":"Static widget","text":"<p>While you can extend the Widget class, a subclass will typically be a better starting point. The Static class is a widget subclass which caches the result of render, and provides an update() method to update the content area.</p> <p>Let's use Static to create a widget which cycles through \"hello\" in various languages.</p> hello03.pyhello03.tcssOutput hello03.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.next_word()\n\n    def on_click(self) -&gt; None:\n        self.next_word()\n\n    def next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"{hello}, [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello03.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello03.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note that there is no <code>render()</code> method on this widget. The Static class is handling the render for us. Instead we call <code>update()</code> when we want to update the content within the widget.</p> <p>The <code>next_word</code> method updates the greeting. We call this method from the mount handler to get the first word, and from a click handler to cycle through the greetings when we click the widget.</p>"},{"location":"guide/widgets/#default-css","title":"Default CSS","text":"<p>When building an app it is best to keep your CSS in an external file. This allows you to see all your CSS in one place, and to enable live editing. However if you intend to distribute a widget (via PyPI for instance) it can be convenient to bundle the code and CSS together. You can do this by adding a <code>DEFAULT_CSS</code> class variable inside your widget class.</p> <p>Textual's builtin widgets bundle CSS in this way, which is why you can see nicely styled widgets without having to copy any CSS code.</p> <p>Here's the Hello example again, this time the widget has embedded default CSS:</p> hello04.pyhello04.tcssOutput hello04.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Hello {\n        width: 40;\n        height: 9;\n        padding: 1 2;\n        background: $panel;\n        border: $secondary tall;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.next_word()\n\n    def on_click(self) -&gt; None:\n        self.next_word()\n\n    def next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"{hello}, [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello04.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello04.tcss<pre><code>Screen {\n    align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"guide/widgets/#scoped-css","title":"Scoped CSS","text":"<p>Default CSS is scoped by default. All this means is that CSS defined in <code>DEFAULT_CSS</code> will affect the widget and potentially its children only. This is to prevent you from inadvertently breaking an unrelated widget.</p> <p>You can disable scoped CSS by setting the class var <code>SCOPED_CSS</code> to <code>False</code>.</p>"},{"location":"guide/widgets/#default-specificity","title":"Default specificity","text":"<p>CSS defined within <code>DEFAULT_CSS</code> has an automatically lower specificity than CSS read from either the App's <code>CSS</code> class variable or an external stylesheet. In practice this means that your app's CSS will take precedence over any CSS bundled with widgets.</p>"},{"location":"guide/widgets/#text-links","title":"Text links","text":"<p>Text in a widget may be marked up with links which perform an action when clicked. Links in console markup use the following format:</p> <pre><code>\"Click [@click='app.bell']Me[/]\"\n</code></pre> <p>The <code>@click</code> tag introduces a click handler, which runs the <code>app.bell</code> action.</p> <p>Let's use markup links in the hello example so that the greeting becomes a link which updates the widget.</p> hello05.pyhello05.tcssOutput hello05.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.action_next_word()\n\n    def action_next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"[@click='next_word']{hello}[/], [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello05.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello05.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>If you run this example you will see that the greeting has been underlined, which indicates it is clickable. If you click on the greeting it will run the <code>next_word</code> action which updates the next word.</p>"},{"location":"guide/widgets/#border-titles","title":"Border titles","text":"<p>Every widget has a <code>border_title</code> and <code>border_subtitle</code> attribute. Setting <code>border_title</code> will display text within the top border, and setting <code>border_subtitle</code> will display text within the bottom border.</p> <p>Note</p> <p>Border titles will only display if the widget has a border enabled.</p> <p>The default value for these attributes is empty string, which disables the title. You can change the default value for the title attributes with the <code>BORDER_TITLE</code> and <code>BORDER_SUBTITLE</code> class variables.</p> <p>Let's demonstrate setting a title, both as a class variable and a instance variable:</p> hello06.pyhello06.tcssOutput hello06.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    BORDER_TITLE = \"Hello Widget\"  # (1)!\n\n    def on_mount(self) -&gt; None:\n        self.action_next_word()\n        self.border_subtitle = \"Click for next hello\"  # (2)!\n\n    def action_next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"[@click='next_word']{hello}[/], [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello05.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> <ol> <li>Setting the default for the <code>title</code> attribute via class variable.</li> <li>Setting <code>subtitle</code> via an instance attribute.</li> </ol> hello06.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u00a0Hello\u00a0Widget\u00a0\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0Click\u00a0for\u00a0next\u00a0hello\u00a0\u2581\u258e </p> <p>Note that titles are limited to a single line of text. If the supplied text is too long to fit within the widget, it will be cropped (and an ellipsis added).</p> <p>There are a number of styles that influence how titles are displayed (color and alignment). See the style reference for details.</p>"},{"location":"guide/widgets/#rich-renderables","title":"Rich renderables","text":"<p>In previous examples we've set strings as content for Widgets. You can also use special objects called renderables for advanced visuals. You can use any renderable defined in Rich or third party libraries.</p> <p>Lets make a widget that uses a Rich table for its content. The following app is a solution to the classic fizzbuzz problem often used to screen software engineers in job interviews. The problem is this: Count up from 1 to 100, when the number is divisible by 3, output \"fizz\"; when the number is divisible by 5, output \"buzz\"; and when the number is divisible by both 3 and 5 output \"fizzbuzz\".</p> <p>This app will \"play\" fizz buzz by displaying a table of the first 15 numbers and columns for fizz and buzz.</p> fizzbuzz01.pyfizzbuzz01.tcssOutput fizzbuzz01.py<pre><code>from rich.table import Table\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass FizzBuzz(Static):\n    def on_mount(self) -&gt; None:\n        table = Table(\"Number\", \"Fizz?\", \"Buzz?\")\n        for n in range(1, 16):\n            fizz = not n % 3\n            buzz = not n % 5\n            table.add_row(\n                str(n),\n                \"fizz\" if fizz else \"\",\n                \"buzz\" if buzz else \"\",\n            )\n        self.update(table)\n\n\nclass FizzBuzzApp(App):\n    CSS_PATH = \"fizzbuzz01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield FizzBuzz()\n\n\nif __name__ == \"__main__\":\n    app = FizzBuzzApp()\n    app.run()\n</code></pre> fizzbuzz01.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nFizzBuzz {\n    width: auto;\n    height: auto;\n    background: $primary;\n    color: $text;\n}\n</code></pre> <p> FizzBuzzApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u00a0Number\u00a0\u2503\u00a0Fizz?\u00a0\u2503\u00a0Buzz?\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u2502 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a010\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u2502 \u2502\u00a011\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a012\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a013\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a014\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a015\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p>"},{"location":"guide/widgets/#content-size","title":"Content size","text":"<p>Textual will auto-detect the dimensions of the content area from rich renderables if width or height is set to <code>auto</code>. You can override auto dimensions by implementing get_content_width() or get_content_height().</p> <p>Let's modify the default width for the fizzbuzz example. By default, the table will be just wide enough to fix the columns. Let's force it to be 50 characters wide.</p> fizzbuzz02.pyfizzbuzz02.tcssOutput fizzbuzz02.py<pre><code>from rich.table import Table\n\nfrom textual.app import App, ComposeResult\nfrom textual.geometry import Size\nfrom textual.widgets import Static\n\n\nclass FizzBuzz(Static):\n    def on_mount(self) -&gt; None:\n        table = Table(\"Number\", \"Fizz?\", \"Buzz?\", expand=True)\n        for n in range(1, 16):\n            fizz = not n % 3\n            buzz = not n % 5\n            table.add_row(\n                str(n),\n                \"fizz\" if fizz else \"\",\n                \"buzz\" if buzz else \"\",\n            )\n        self.update(table)\n\n    def get_content_width(self, container: Size, viewport: Size) -&gt; int:\n        \"\"\"Force content width size.\"\"\"\n        return 50\n\n\nclass FizzBuzzApp(App):\n    CSS_PATH = \"fizzbuzz02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield FizzBuzz()\n\n\nif __name__ == \"__main__\":\n    app = FizzBuzzApp()\n    app.run()\n</code></pre> fizzbuzz02.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nFizzBuzz {\n    width: auto;\n    height: auto;\n    background: $primary;\n    color: $text;\n}\n</code></pre> <p> FizzBuzzApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u00a0Number\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Fizz?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Buzz?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a010\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a011\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a012\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a013\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a014\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a015\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <p>Note that we've added <code>expand=True</code> to tell the <code>Table</code> to expand beyond the optimal width, so that it fills the 50 characters returned by <code>get_content_width</code>.</p>"},{"location":"guide/widgets/#tooltips","title":"Tooltips","text":"<p>Widgets can have tooltips which is content displayed when the user hovers the mouse over the widget. You can use tooltips to add supplementary information or help messages.</p> <p>Tip</p> <p>It is best not to rely on tooltips for essential information. Some users prefer to use the keyboard exclusively and may never see tooltips.</p> <p>To add a tooltip, assign to the widget's <code>tooltip</code> property. You can set text or any other Rich renderable.</p> <p>The following example adds a tooltip to a button:</p> tooltip01.pyOutput (before hover)Output (after hover) tooltip01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\"\"\"\n\n\nclass TooltipApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"Click me\", variant=\"success\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(Button).tooltip = TEXT\n\n\nif __name__ == \"__main__\":\n    app = TooltipApp()\n    app.run()\n</code></pre> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Click\u00a0me\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. </p>"},{"location":"guide/widgets/#customizing-the-tooltip","title":"Customizing the tooltip","text":"<p>If you don't like the default look of the tooltips, you can customize them to your liking with CSS. Add a rule to your CSS that targets <code>Tooltip</code>. Here's an example:</p> tooltip02.pyOutput (before hover)Output (after hover) tooltip02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\"\"\"\n\n\nclass TooltipApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    Tooltip {\n        padding: 2 4;\n        background: $primary;\n        color: auto 90%;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"Click me\", variant=\"success\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(Button).tooltip = TEXT\n\n\nif __name__ == \"__main__\":\n    app = TooltipApp()\n    app.run()\n</code></pre> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Click\u00a0me\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581 I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. </p>"},{"location":"guide/widgets/#loading-indicator","title":"Loading indicator","text":"<p>Widgets have a <code>loading</code> reactive which when set to <code>True</code> will temporarily replace your widget with a <code>LoadingIndicator</code>.</p> <p>You can use this to indicate to the user that the app is currently working on getting data, and there will be content when that data is available. Let's look at an example of this.</p> loading01.pyOutput loading01.py<pre><code>from asyncio import sleep\nfrom random import randint\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass DataApp(App):\n    CSS = \"\"\"\n    Screen {\n        layout: grid;\n        grid-size: 2;\n    }\n    DataTable {\n        height: 1fr;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n        yield DataTable()\n        yield DataTable()\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        for data_table in self.query(DataTable):\n            data_table.loading = True  # (1)!\n            self.load_data(data_table)\n\n    @work\n    async def load_data(self, data_table: DataTable) -&gt; None:\n        await sleep(randint(2, 10))  # (2)!\n        data_table.add_columns(*ROWS[0])\n        data_table.add_rows(ROWS[1:])\n        data_table.loading = False  # (3)!\n\n\nif __name__ == \"__main__\":\n    app = DataApp()\n    app.run()\n</code></pre> <ol> <li>Shows the loading indicator in place of the data table.</li> <li>Insert a random sleep to simulate a network request.</li> <li>Show the new data.</li> </ol> <p> DataApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf </p> <p>In this example we have four DataTable widgets, which we put into a loading state by setting the widget's <code>loading</code> property to <code>True</code>. This will temporarily replace the widget with a loading indicator animation. When the (simulated) data has been retrieved, we reset the <code>loading</code> property to show the new data.</p> <p>Tip</p> <p>See the guide on Workers if you want to know more about the <code>@work</code> decorator.</p>"},{"location":"guide/widgets/#line-api","title":"Line API","text":"<p>A downside of widgets that return Rich renderables is that Textual will redraw the entire widget when its state is updated or it changes size. If a widget is large enough to require scrolling, or updates frequently, then this redrawing can make your app feel less responsive. Textual offers an alternative API which reduces the amount of work required to refresh a widget, and makes it possible to update portions of a widget (as small as a single character) without a full redraw. This is known as the line API.</p> <p>Note</p> <p>The Line API requires a little more work that typical Rich renderables, but can produce powerful widgets such as the builtin DataTable which can handle thousands or even millions of rows.</p>"},{"location":"guide/widgets/#render-line-method","title":"Render Line method","text":"<p>To build a widget with the line API, implement a <code>render_line</code> method rather than a <code>render</code> method. The <code>render_line</code> method takes a single integer argument <code>y</code> which is an offset from the top of the widget, and should return a Strip object containing that line's content. Textual will call this method as required to get content for every row of characters in the widget.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9nl9BsV/2Vlx1MDAwNe109zxTtXVcdTAwMGJIIISER4BcdTAwMTBya4tcdTAwMTK2bFx1MDAxNORcdTAwMDe2eG7lv99cdTAwMWWHWPJDxjY2ce5d71x1MDAwNowk2+OZc7pPP0Z/v1haWk7vmtHyq6Xl6LZcdTAwMTQmcblcdTAwMTXeLL/0x6+jVjtu1PlcdTAwMTR2/m43rlqlzpXnadpsv/rjj1rYuojSZlx1MDAxMpai4DpuX4VJO70qx42g1Kj9XHUwMDExp1Gt/W//cyesRX82XHUwMDFitXLaXG6yXHUwMDBmWYnKcdpoff+sKIlqUT1t87v/h/9eWvq78zM3ulZUSsN6NYk6L+icylx1MDAwNqjR9Vx1MDAxZt1p1DuDtWhJkJa6e0Hcfs1cdTAwMWaXRmU+W+EhR9lcdTAwMTl/aFndXHUwMDFlnVx1MDAxY16fNnfM0d398cmhkqdlzD61XHUwMDEyJ8lBepd8n4mwdH7Vyo2pnbZcdTAwMWFcdTAwMTfRcVxcTs/5vOw73n1du8GTkL2q1biqntejtv/+0D3aaIalOL3zX0J0XHUwMDBmfp+DV0vZkVv+a0VcdTAwMDVOklx1MDAwMuuUMMZcdJd9sn89KFxurFJGgUGhrXR941pvJLxcdTAwMTI8rt9UhcolmY3sLCxdVHl49XL3mrRcdTAwMTXW282wxeuVXXfz8I3JUICCXHUwMDAwVffUeVx1MDAxNFfPU1x1MDAwZiPUgVLOKtLKOevQZMOIOstcdTAwMDFaXHUwMDFhRONM9u38hze3ylx1MDAxZGT8lZ+wevlhwupXSZKN159404+mPKJyK920Z9VduFx1MDAxMVxmiFx1MDAxOGpn764qm4er3e/UXHUwMDAzv7DVatwsd898e3iWjeiqWVx1MDAwZdOHL2GURGLgWYvd80lcXL/oXHUwMDFmbNIoXWQw7Fx1MDAxY/32clxu+IOAQvzzSljhQMmx8Z9cXLy7PD1vbev9N3uJhlx1MDAwYrmLd1x1MDAxYlx1MDAwNfgvtVx1MDAxYe32ynmYls6LOIAz4lx1MDAwMIhHSeBE4LRgiFx1MDAxYqFcdTAwMDXwXHUwMDFh9JDAuMA5XHUwMDA3vCokrdVAhSRcdTAwMTCdx/QkUFJcdTAwMDaakCRcdFx1MDAwNVx1MDAwMEOoQFpcdTAwMDRcdTAwMTaYplKTpy3qXHUwMDAxKpBTXGYkUnZmVFx1MDAxOFx1MDAwMVaDRln9LGA1aFx1MDAwYrHqnCG2XGZkx1x1MDAwNqvaxvVSZecmxNXjk1x1MDAxYqrCadIuMtZ9gPt5MIWA0JA2glx1MDAxNFx0hFx1MDAwMZhK6yRcdTAwMWFUxlhw84QpXHUwMDA1XHUwMDAytEKrXGaw0bWDOEVcdTAwMWJoLZgvWqAmxvQgTlx1MDAxZCn2KFx1MDAxYWZnslx1MDAxZsOpmVx1MDAxNU6jJImb7eGKQkNcdTAwMTFKnbcsykpcdTAwMWNcdTAwMWKk+1uV6+279t37xsV++nqrtd3ePL+cXHUwMDA2pPB8IPUwJJBsw7RcdTAwMDX2IL0gtS5QhtFAiEJYJfqFzkQg/a1cdTAwMTIqVDhcYlCgQFxuROU08i822nJcdTAwMTChgIHSWjJcbkEgXHUwMDExylx1MDAwMVEh2bxaySrwf1xuoCbnVvpcdTAwMDCK1pFGY8dcdTAwMDcolurV++Rz+aB+bj/o9kH49cRcdTAwMTS5/EVcdTAwMDGo4oVcdTAwMTdCXHUwMDFha0AjsLPsXHUwMDA1qFxyXHUwMDE4XHUwMDExvFx1MDAxNk4oyVx1MDAwMNZPXHUwMDA06JlcdTAwMTBqXlx1MDAwMCW2v0Yw1Z5ccqD2OVx1MDAwMKpcdTAwMGI1qXKs0YhyjHxcZqDHe1x1MDAxN/d7n87XXHUwMDEy8UnvbO2+PvhcdTAwMWNcdTAwMDItOEBRXHUwMDA20kipXHUwMDE0aFx1MDAwMM1cdTAwMTBQvVxiNYFcdTAwMTGCueqIp4qVwJNcdTAwMTBcbnjGmnZeXGLl8TlhrNC/XHUwMDFlQkdqUetcbr08XHUwMDAwSZBKuPFBWj7Y3CuX3lx1MDAxZlx1MDAxZX01N1dcdTAwMWZut1Vauf70XFwgXHUwMDE1U4FUXHUwMDA0QILYO3JULpSPm7BcdTAwMDekoFxcXHUwMDAw0jlEXHUwMDA2MVx1MDAxOYbIk1BqnFx1MDAxMlx1MDAxNcQhrt5cdTAwMDdEikNcdTAwMDNyUqNcdTAwMWOePtBcdTAwMWO/SZSKjFx1MDAxNPwzXHUwMDA35Vx1MDAxZoZUasPhnZ5cdTAwMDSmWVrgXHUwMDA3ZOjhyLdi9HZfMySp8PHy+uaotH178WXjrb7/fLe+d4234yVcdTAwMTVejnrfuSYrXGZcdTAwMWJkSbPiXFxcdTAwMWHdpsPohrYw9EMjrVx1MDAwNDOBSzhxXHUwMDFm31x1MDAxZidcdTAwMDdvjqp2rXK1trL1QZVcdTAwMGWnS9M9o1Mgli0sSViyoPWhXHUwMDE39NFcclx1MDAwMz5swElcdTAwMDFI4Pqj0tlcdTAwMDV/mMuOZFx1MDAxNFP9lGLyK+/DZmj650SeR0HOVoVtuppcdTAwMDDkXHUwMDE5mFx1MDAxYfX0IL7vXHUwMDAwVfRcdTAwMWPdXGJrcXLXg4dcdTAwMGX6X3Vmulx1MDAxYaVcdTAwMDFPfzlqnfKnRb/f/Sn+lV+yduRcdTAwMGb7V9uel68mcdVcdTAwMTNmOYkqvUxK41KYdE+njWZ2tsTDXHT57Vpb5f6v1WjF1bhcdTAwMWUmh49cZm0qVlNxqFxmXHUwMDFjXHUwMDBikdMwfvJRXHUwMDFklsT2znFsWnt2o11cdTAwMGJ33ea7rV+C1Up4SrNzXCKle4NlNq1cdTAwMDEosFx1MDAxNkmwi2NcdTAwMTU2P1ZcdTAwMGZLNlx1MDAwZbKa1Vx1MDAxY0p2o5l5mSepL0vr7urg8qDkbPJ2O6xcXGxdfjibXHUwMDE5qVnTimzZflxuqWFxSVxyU5JajojehHLkI5qxSZ2YKt6n+9H1p9219fhzJV7Zw5tfgNQqQMGKmONcdTAwMTFcdTAwMTamprekhopcdTAwMDJhQLP168R4pm9gs/TUQ2K2IZ6anOPh2GdcInWj9CVsnVTfXHUwMDFlxXs7d+5g/8Jd7u/OjtSan/1cXFLj4pJcdTAwMWFcdTAwMWYh9fdcdFx1MDAxZsJqsLk0Wb+vJiU5XG5cdTAwMTg/aThaqy0qq1lWM29cdTAwMWRcdTAwMWFAzf6YSd6rwDWfVtrn45RcdTAwMDUgnJ9cdTAwMDJcdTAwMDewgVWGPOJRO8rlKLPUXGZcdTAwMDRoXHUwMDA1x2eWQ3Difznp8KNkzr5cdTAwMWOJ9CS0XHUwMDFmXGZ68eHIiKB3XHUwMDE0X0lLmspcdLfTsJWuxfVyXFyv9lx1MDAwZeyhJWRrjGCvw/DSlVx1MDAxZuWKXGKUlZJNtjI8JG0zseVnJmzyNTqwqKzzVXOSzFxioVx1MDAwNr480+3xQX1U5eZXiCvq6HiXPtRcdTAwMGWqq9VwtWBQXHUwMDA2wPB/1pLjNVdcdTAwMDNjXHUwMDAyXG5cYqWUwvjAz6EzXHUwMDAzY0rCdrreqNXilOd+r1x1MDAxMdfT/jnuTOaqJ/95XHUwMDE0XHUwMDBlmFx1MDAxNv5O+XP9VqLp37HX7GfPljJcdTAwMWF1/ug+/+vl0KuLsf39bD+qs/d7kf89uYFcdTAwMTNS9Fx1MDAxZv5h4CRcdTAwMThfUp+guDxauC6uhbNcdTAwMDFLe9ZcdTAwMDO+PFwiOf7qXHUwMDE1LiBcdTAwMDOn0WhpNIl8d8LMXHJcdTAwMWPKwFdg0DphhVOZQ8/6IJitvCp8gXS+ijOsJUghaWEmalx0mrl94zHgJL08k9q30WFvzpSIXHUwMDAwhFx1MDAwNuGs9Wl9XHUwMDBlrVx1MDAxNeSu+m5LePk77S+KULMxXHUwMDE5/OpjWbeTnd23qzWx6u7bZ7T1+vBetdebw4eEmlx1MDAxOExaW7Ik+HPNwJBAXHUwMDA0JFx1MDAxNS8w+1XprFx1MDAwNPdrm7dcImT7x8ogqGdm3vKxwEDzXGbrXHUwMDE29M1EY9u30Vx1MDAxYX5x7Vx1MDAxYrJEQ1x1MDAwNGRWSqFtb1x1MDAwZVx1MDAxNTXbN+NcdTAwMWJalCAgkvOLzNin+5KEVk5LadlMXHLpoFx1MDAwMVx1MDAxNVx1MDAwMFx1MDAwM1x1MDAwNSQrXHUwMDEydJZoiIWz1lxuMmaSTq+ZW7ipI64xLdzoXHUwMDFjQI85YelGzCpjkWWEM4NcdTAwMDbO16TYhnhcdTAwMDPoW+zUYMVmLFx1MDAwYrd1e5rcrVSPcUW3PsLnzXfNK7k3fEhsctF6YUasZyzpIUNcIoau0lxuoNP++ovbt0Jg+8fKIKYnNHCFWSco7lxyRI7IWDVOXHUwMDEyoI7U51x1MDAxM5m3wu7Actg+j2bZyc3YXHUwMDE2qHjWmY/ev/dFp8h+lGkhnWKZl/dcdTAwMDYzzzrl2oeyrFM21q7xXHUwMDEyXGZcdTAwMDRHM+yu6mJptkXQl6Ped751J2JdlKVTp8tmge452s1mZaWGXHUwMDFm2ayDtFx1MDAxNTd//087qvopfbnUfVx1MDAxMlx1MDAwNMFfXHUwMDA1SS3d8y7zTmo9MsKRpmNkP4fLtSn221x1MDAwZtZGPvKewH7EryVtv0nCS6rJXHUwMDBioq9cdTAwMWI3t7VcInm0IP1cdTAwMWMrXCKQaIT1qlx1MDAxM1xmWtvfXHUwMDE3XHUwMDA3Tlx1MDAwN1xuXHUwMDA0XHUwMDBiVO8/zdOa4Ofdz+FNvlx1MDAwNtLuacroiVxyXHUwMDFk8yxfkW9cdTAwMDM3z9PsxIFjYfLXi+lOz8H4RZ1K+0vdnF9cXH84PLtf+1irt+tuM1l4dqBwznI4L1x1MDAxOXhGqL6aXHUwMDBlSfa+TivB/6N4Ws/onLnB4ouv6Nm18Vx1MDAxM7gxzypcdTAwMTD5lqBcXNpnTk1JJFx1MDAwYiud2vq9RGqCRurRSZNcdTAwMDWVnDogjUL4rVNWXHSw/d1cdTAwMGJcIjDo87iW8WjNXHUwMDFjXHUwMDBinWNKTuLoz29cdTAwMTN6XHUwMDE2xTlX62+F31fzjzKciTIs7k8q7jpcdTAwMTSKpFx1MDAxNdaNnzNcdTAwMWKdNFhQhqtcdTAwMDBcdTAwMTUq0dnAxXymfrdnXHUwMDAyXHJW++SF1ajnV1x1MDAxMVx1MDAxOJPhljQoXprniSnn6sNcdTAwMThcXEr/XHUwMDEz+82X4a44Ka6N76PNV8dcdTAwMWYjOJhcdTAwMWS92fq0cXK11npT3r9d/bJn381U146i9zBh+yi9/T5O5dCXu5Umlvn9/Fx1MDAwZVgtXHUwMDEyKVx1MDAwZfeU0UZcdTAwMTdcdTAwMGLbMbb/j1x1MDAxMLaghm0hXHUwMDFk7FRija2cmSysW9Rd/lJcdTAwMTgzVWVwqk6l90yypdW9raXjTl/QXCJ0KPVcdTAwMGZpJINcdTAwMGIrW7r4XHUwMDBlXHUwMDA2KKRcdTAwMDSfa1x1MDAxZb+LePSSz3lX+FRcdTAwMTT2XHJcdTAwMTOGY0Gyxlx1MDAxN4Ogd1x1MDAxYlx1MDAwZVx1MDAwN4zOXHUwMDE3iDhe1Fx1MDAxMmGEh35cdTAwMWGBpVx1MDAwYoS0vqeRQ1x1MDAwMVx1MDAxNlx1MDAwNEPobGWgrZagJZtcdTAwMTOgXFz+6MF3I1x1MDAwN21mlvtcdTAwMDVGsk/lXHUwMDBiXHUwMDAys69ajXZcdTAwMDZLPUVwYVx00Vx1MDAxOFx1MDAxMKT81FHuqodcIjhcdTAwMDbGMZitXHUwMDAzniRp7WCPz1h1q9H7zHpcdTAwMDYloNM6gdJcdTAwMDdcdTAwMWHo01x1MDAxZYOjooC1oUFeclx1MDAwNpiU4tcuXVx1MDAxNULYP/rBm73Zi/zv6dJrVHxjXHUwMDBi35BmnZ5AhVT3bk72t1blUUlhfFgtl0qfP5ZnqkImtGDqUVx1MDAwYlx1MDAxNiAozfAxvu8kn9TsaFx1MDAxMCNcdTAwMDLpXHUwMDA0XHUwMDBiXHUwMDE0R8hRRv+wZpZbU96OknWK/OpcdTAwMDNcZuudfjS5ZslqY1xyPq2ncpFza7xcdTAwMDIzvOFLkTBXuW6HPkpcdTAwMTAvgGOvP75T39i5rq2vJPK02Tyrne5v7X51Z5s/OfKWj0rzwJBjny4sXHUwMDE4Ry5/XHUwMDAzle+0kFx1MDAwMet2sEjOXGIj5rjfb9x6rtTkd8o9z81cYizHXHUwMDAyk2w7/Sc6ntY7gSws/liw3v+Pn1x1MDAwM/uyefYubFx1MDAxZdy//Xik11x1MDAwZeMvd9vVm2e7XHUwMDFiw1TOybeFS/Y9yMFcdTAwMDSgXHUwMDEykEv6d7BcInRgWFx1MDAxM1xinlx1MDAwN806ySx0XVx1MDAxNFhnWpA0/43uI6sz/j4z8/YgUlx1MDAxNXpcdTAwMTDQYNCx3lx1MDAxON+FvK9cdTAwMWbbo1J8vH5v65XD083W12azseguhFx1MDAwMoaLUuyzfVecXHUwMDEzvVx1MDAxYlZcYjj08Dd11PyDr/rpXHUwMDBlRFx1MDAxOVL+plGz24Y20oFImKhE+I9cdTAwMDOZ2oFcdTAwMTTfY1x1MDAxNaThZfftx2MzcVVUrrd0RUNyrfZKXHUwMDFm4q9n9rqojPIsLuRRXHUwMDFh+lx1MDAxNFxmXGJGtkO/P6xv31x1MDAxOElcdTAwMGWjjXaC40q0+Z7kXHUwMDA19Fx1MDAxZlx1MDAxY4uSr3z9XFz34UvN83dcdTAwMWaFXHJhKCx6XHUwMDFkYMbXPXftjav7hjsyNqkmZXO6oe7fvVl098FoIHKotZ9vwVx1MDAxZaJcdTAwMWa4Olx1MDAxMP5mR75Q5XdcdTAwMGL99Po+XG7lt1SoXHUwMDE5llx1MDAwN0Z6XHUwMDEwjrqeelOQ/ztcdTAwMGby4iG5sFx1MDAxYzabXHUwMDA3Kc9o10LwWsXlh2nJPmf5Oo5u1obdWa/z8O/aobbnUNQxN99efPsvXHUwMDFht7uQIn0= widget.render_line(y=0)widget.render_line(y=1)widget.render_line(y=2)Strip([segment, segment, ...])Strip([segment, segment, ...])Strip([segment, segment, ...])Line API WidgetStrip([segment, segment, ...])Strip([segment, segment, ...])Strip([segment, segment, ...]) <p>Let's look at an example before we go in to the details. The following Textual app implements a widget with the line API that renders a checkerboard pattern. This might form the basis of a chess / checkers game. Here's the code:</p> checker01.pyOutput checker01.py<pre><code>from rich.segment import Segment\nfrom rich.style import Style\n\nfrom textual.app import App, ComposeResult\nfrom textual.strip import Strip\nfrom textual.widget import Widget\n\n\nclass CheckerBoard(Widget):\n    \"\"\"Render an 8x8 checkerboard.\"\"\"\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        row_index = y // 4  # A checkerboard square consists of 4 rows\n\n        if row_index &gt;= 8:  # Generate blank lines when we reach the end\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2  # Used to alternate the starting square on each row\n\n        white = Style.parse(\"on white\")  # Get a style object for a white background\n        black = Style.parse(\"on black\")  # Get a style object for a black background\n\n        # Generate a list of segments with alternating black and white space characters\n        segments = [\n            Segment(\" \" * 8, black if (column + is_odd) % 2 else white)\n            for column in range(8)\n        ]\n        strip = Strip(segments, 8 * 8)\n        return strip\n\n\nclass BoardApp(App):\n    \"\"\"A simple app to show our widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard()\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp </p> <p>The <code>render_line</code> method above calculates a <code>Strip</code> for every row of characters in the widget. Each strip contains alternating black and white space characters which form the squares in the checkerboard.</p> <p>You may have noticed that the checkerboard widget makes use of some objects we haven't covered before. Let's explore those.</p>"},{"location":"guide/widgets/#segment-and-style","title":"Segment and Style","text":"<p>A Segment is a class borrowed from the Rich project. It is small object (actually a named tuple) which bundles a string to be displayed and a Style which tells Textual how the text should look (color, bold, italic etc).</p> <p>Let's look at a simple segment which would produce the text \"Hello, World!\" in bold.</p> <pre><code>greeting = Segment(\"Hello, World!\", Style(bold=True))\n</code></pre> <p>This would create the following object:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1aW1PbRlx1MDAxOH3nVzDuSztcdTAwMTM2e790ptOhJFx1MDAxNEIuUEJoaTuMsNa2gixcdTAwMTlJ5pJO/nu/XHUwMDE1RpIl7CBjUqd+XHUwMDAwe3el/Xb3nPNdpH/W1tc72c3Idn5cXO/Y665cdTAwMTdcdTAwMDZ+4l11nrn2S5ukQVx1MDAxY0FcdTAwMTfNf6fxOOnmI1x1MDAwN1k2Sn98/nzoJec2XHUwMDFihV7XossgXHUwMDFke2Gajf0gRt14+DzI7DD92f1961xy7U+jeOhnXHQqJ9mwfpDFye1cXDa0Q1x1MDAxYmUp3P1P+L2+/k/+t2JdYruZXHUwMDE39UObX5B3lVx1MDAwNirJ661v4yg3lkhFhGRcdTAwMWHLYkSQvoD5MutDd1x1MDAwZmy2ZY9r6vAjuvlhK+7ffPQvtlx1MDAwZcJNSo7CP8ppe0FcdTAwMThcdTAwMWVmN+HtVnjdwTipXHUwMDE4lWZJfG6PXHUwMDAzP1x1MDAxYrjZa+3Fdb6XXHUwMDBlwICiO4nH/UFkU7dcdTAwMDO4aI1HXjfIbtyNcNl6u1xy1XHX7pBcZkZSca41Zsatueh11zNKXHUwMDExx0ZLyZRcdTAwMTCMypphW3FcYmdcdTAwMDGGfYfzT2nZmdc974N5kV+MyVx1MDAxMi9KR15cdTAwMDInVo67miyZXHUwMDBiiqQglCqMXHKunszAXHUwMDA2/UHmjosgho1SynDMsJCiNMbmp0JcZnN2XHUwMDEyo4tcdTAwMWVnwmjXz1x1MDAxMfJ3ddtcIn+ybXeQKUHDJi2fy8W48S/rYKtcdTAwMDKugoN3e0dXxmNDtn/iXHUwMDFk7uyeblx1MDAxZqTvVLHgKXR6SVx1MDAxMl91ip7Pk2+loeOR791cIlx1MDAwZVx1MDAwMCk4XHUwMDExWlFDTdFcdTAwMWZcdTAwMDbROXRG4zAs2+LueVx00rXKStqxg1a2scZcdTAwMGVcdTAwMDBcdTAwMGLRilx1MDAxOf5gclxcnrw7vd5S9rV93dvjsYjt/lx0WYxcdTAwMWN0XHUwMDE2OdJcdTAwMTgk4n5ukFx1MDAwNblhkFwiXFxzXHUwMDAw1TQtXHUwMDE4QVhSMZNcclpSa7qLs4FiiaQhXHUwMDFjJuHGfVSTXHUwMDBlgiFtpm2744HEmlxuzivn80Q8mIdUXHUwMDAxu8SWhdTMXmf3gnQmRlx1MDAwNTVcZnSLPlxcwI9Aen57b7btx4R9XHUwMDE0Nt7ZXHUwMDBlg8GSXHUwMDA1fOlcdTAwMThlRFwirakmtFx1MDAwNlH+dFpNKtJbwJHyOlxmXHKmXHUwMDA0XHUwMDBiptqgcFxuXHUwMDFmrWT3evx7cPkq+nBp9/ax2Lu+Or5cdTAwMWPsLUl2OWfaXHUwMDE40lx1MDAwMswlauIoO1xmPtmc1FOt294wXGLzoyqac5SDgX91dmxcdTAwMTjGz9aP4yT0/+pUjyq1MHvtdu66zTDoO0Z0QtubpkpcdTAwMTZA8FR0Z/Go7O2CXHUwMDFkXHUwMDFl3C7Z9evriZOgXHUwMDFmRF74fpZNi3tcdTAwMTbGVL31jrWGXHUwMDEwIK3hXHUwMDBmZ+3u3ubbbSrVxYuD991cdTAwMWXTn3x/J5jB2lx1MDAxYfv+K79cIihGVIBCmqZjwVxiT7XWucsk73XVIzxcdTAwMGJhSNx5ldaeRTpBxZqV6/m/XHUwMDA1WMYwgkvFelwit0VmM4AoyjGRpEVwdfM2ftU/O9u/XHUwMDEx4uJ0g1x1MDAxZI9e71x1MDAxZmyuuuNcdTAwMTJMI6yVXHUwMDEyhlPnKNg0XHUwMDExuECSc8HInCjr0X5Mmyb4m35MSaG5Ulx1MDAxNU16Sj/2q/fJo3tcdTAwMDO6uSuOduTxsWTnLy+Wlj5cdTAwMTjNOG2B7sf5sVx1MDAxYz3fn8Wh/9P7ZGx/WFx1MDAwNT/WsGmxuLNidZ3AnEHKXHUwMDAwaWhcdTAwMTmafonAL0/UwcvRfnK+8bt9dbQpe1x1MDAxYofh6apcdTAwMTOYUYYoJNzwMVxuXHUwMDEy93K57nouOVx1MDAwMvpSXHUwMDE3PHHYjbp3XVwii+k9Low2XFyXkka6QK6N61rNaFRcdTAwMTBcdTAwMTBF9lQsJlNsdFx1MDAwNvZcdTAwMTNrsyDqo2kyVChcXIH616DwtEGL8Vx1MDAxN8/kL/gjXHR7rMpcdTAwMDFfou9V/8Ppm1x1MDAxNyPpXHUwMDFmvtl68UZEoThcdTAwMWOfrDp9hYJA0HBiZO6AWZ2+XG5RIDV0XHUwMDAwezWresVl87dCyTn8hWReSY1L2H+zTphcdTAwMTCBK1x1MDAxOfRXo2+aY2mV+Htr0VxcXHUwMDAy327vfUlkpVxmWvfAWlx1MDAwYlx1MDAwMVx1MDAxOU5cdTAwMGJcdTAwMGY8X69XlMJMXHUwMDBiJFx1MDAwNGR04Fx1MDAwZaRcdTAwMDF/PFx1MDAxZENzSZCmmFNtnthcdTAwMDVcdTAwMWKkQElcXKFEaqOwvqc8pDRSICXmLlx1MDAxY6hcdTAwMThzV7yXcFx1MDAwM6ZcdTAwMWVXu6eTlsVqlos71jTzkuyXIPJcdTAwMDHW04ZNnlHtPiDQy7ncXHUwMDFkOys3MMJcXFx1MDAxMVc9g3CSUWp4+WjG7Y03cqtFkuWlv8aqbeR/2Zr5XHUwMDA1z4o1YFxmwVx1MDAwNsPeMEyoNIRy1TCGMMjn8pJGw5rQS7OteDhcZjLY7v04iLL6tub7t+m4PrBeQ0BgNdW+uiiM3Fx1MDAxZKc1vfy2XpIm/1F8//vZvaNnYtl9Nlx1MDAxYTAub7dW/d9azqiaWclcdTAwMDYh4EJcYqVcdTAwMWUuZ/P914rKmWRcdTAwMWNcdTAwMTmqMVMu6IDMoaFmsFx1MDAwNdJhzEUkrGbX8tRcZuJcIsyNUkZcdTAwMGLIb4SsJP6lnCmEXHUwMDFkXHUwMDE1INOrXHUwMDE5M1EzJjXRXHUwMDFjyzZFg2XL2eLZ/lx1MDAwM+VsfuBblzNcdTAwMDaUYiBoXHUwMDEwVzqK8cq4W1x1MDAwNVx1MDAxMYgzdr+CPEjP5tfBpvWMXG7KNVx1MDAwMVx1MDAwNitOsKaGNawhXHUwMDAykVx1MDAxOer6LenZxmw45911JLdcdTAwMTS0WVx0lmGi3lokWFxmpuK0zZO5M9zt9a8hXHUwMDFhXHUwMDFkXHUwMDFmXnw8+qN38mv8epFcdTAwMWH/XCJitth7XHUwMDE1Tq5cdTAwMDTPdUxgXHUwMDAzwVlZpHA3oJQh8KJGXHUwMDEy6TA/O7tcdTAwMDLn7/H5YvZdr9drqph6UFWEQOKHtWStdGrxvOqJS/dSV6pQXyuvWqWMasFcXIpSQurNRfRcdTAwMDFbXHUwMDBiQCUtkqn5p7ySj+S4XHUwMDExiCqmlVCUS1x1MDAxMMKSkTldhUBaQSxuXHUwMDA0eHZiKq/GLI2wXHUwMDEwP3NcZiqtJOdcdTAwMWFCoEq4Vz6ZI65mg4VDPDZcdTAwMTJX9GzygFx1MDAwZbSVske+XHUwMDAw9aioQ2JcdTAwMTeutnlFqW3UMd9cdTAwMWJMuXnKMVx1MDAwM99GKTbCbUwz5lBIuUhAaYWpXHUwMDE0RuNcdTAwMDVjj/lv/9ViXHUwMDBmLMDlau5cdTAwMWVwSaFpwyhcdTAwMDKBMNPgrImGMFx1MDAxMoY0n5h+SyHIbGS7T1x1MDAwM9OzXCKQtclcdTAwMDRcdTAwMWRvNDrMXHUwMDAwdMVxXHUwMDAwylx1MDAwM39cIuDlKjuXgb365X76OVx1MDAwNq5N9tNcdJLNmfB57fO/MTl+mCJ9 \"Hello, World\"Style(bold=True)greeting.textgreeting.stylegreeting <p>Both Rich and Textual work with segments to generate content. A Textual app is the result of combining hundreds, or perhaps thousands, of segments,</p>"},{"location":"guide/widgets/#strips","title":"Strips","text":"<p>A Strip is a container for a number of segments covering a single line (or row) in the Widget. A Strip will contain at least one segment, but often many more.</p> <p>A <code>Strip</code> is constructed from a list of <code>Segment</code> objects. Here's now you might construct a strip that displays the text \"Hello, World!\", but with the second word in bold:</p> <pre><code>segments = [\n    Segment(\"Hello, \"),\n    Segment(\"World\", Style(bold=True)),\n    Segment(\"!\")\n]\nstrip = Strip(segments)\n</code></pre> <p>The first and third <code>Segment</code> omit a style, which results in the widget's default style being used. The second segment has a style object which applies bold to the text \"World\". If this were part of a widget it would produce the text: <code>Hello, World!</code></p> <p>The <code>Strip</code> constructor has an optional second parameter, which should be the cell length of the strip. The strip above has a length of 13, so we could have constructed it like this:</p> <pre><code>strip = Strip(segments, 13)\n</code></pre> <p>Note that the cell length parameter is not the total number of characters in the string. It is the number of terminal \"cells\". Some characters (such as Asian language characters and certain emoji) take up the space of two Western alphabet characters. If you don't know in advance the number of cells your segments will occupy, it is best to omit the length parameter so that Textual calculates it automatically.</p>"},{"location":"guide/widgets/#component-classes","title":"Component classes","text":"<p>When applying styles to widgets we can use CSS to select the child widgets. Widgets rendered with the line API don't have children per-se, but we can still use CSS to apply styles to parts of our widget by defining component classes. Component classes are associated with a widget by defining a <code>COMPONENT_CLASSES</code> class variable which should be a <code>set</code> of strings containing CSS class names.</p> <p>In the checkerboard example above we hard-coded the color of the squares to \"white\" and \"black\". But what if we want to create a checkerboard with different colors? We can do this by defining two component classes, one for the \"white\" squares and one for the \"dark\" squares. This will allow us to change the colors with CSS.</p> <p>The following example replaces our hard-coded colors with component classes.</p> checker02.pyOutput checker02.py<pre><code>from rich.segment import Segment\n\nfrom textual.app import App, ComposeResult\nfrom textual.strip import Strip\nfrom textual.widget import Widget\n\n\nclass CheckerBoard(Widget):\n    \"\"\"Render an 8x8 checkerboard.\"\"\"\n\n    COMPONENT_CLASSES = {\n        \"checkerboard--white-square\",\n        \"checkerboard--black-square\",\n    }\n\n    DEFAULT_CSS = \"\"\"\n    CheckerBoard .checkerboard--white-square {\n        background: #A5BAC9;\n    }\n    CheckerBoard .checkerboard--black-square {\n        background: #004578;\n    }\n    \"\"\"\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        row_index = y // 4  # four lines per row\n\n        if row_index &gt;= 8:\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2\n\n        white = self.get_component_rich_style(\"checkerboard--white-square\")\n        black = self.get_component_rich_style(\"checkerboard--black-square\")\n\n        segments = [\n            Segment(\" \" * 8, black if (column + is_odd) % 2 else white)\n            for column in range(8)\n        ]\n        strip = Strip(segments, 8 * 8)\n        return strip\n\n\nclass BoardApp(App):\n    \"\"\"A simple app to show our widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard()\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp </p> <p>The <code>COMPONENT_CLASSES</code> class variable above adds two class names: <code>checkerboard--white-square</code> and <code>checkerboard--black-square</code>. These are set in the <code>DEFAULT_CSS</code> but can modified in the app's <code>CSS</code> class variable or external CSS.</p> <p>Tip</p> <p>Component classes typically begin with the name of the widget followed by two hyphens. This is a convention to avoid potential name clashes.</p> <p>The <code>render_line</code> method calls get_component_rich_style to get <code>Style</code> objects from the CSS, which we apply to the segments to create a more colorful looking checkerboard.</p>"},{"location":"guide/widgets/#scrolling","title":"Scrolling","text":"<p>A Line API widget can be made to scroll by extending the ScrollView class (rather than <code>Widget</code>). The <code>ScrollView</code> class will do most of the work, but we will need to manage the following details:</p> <ol> <li>The <code>ScrollView</code> class requires a virtual size, which is the size of the scrollable content and should be set via the <code>virtual_size</code> property. If this is larger than the widget then Textual will add scrollbars.</li> <li>We need to update the <code>render_line</code> method to generate strips for the visible area of the widget, taking into account the current position of the scrollbars.</li> </ol> <p>Let's add scrolling to our checkerboard example. A standard 8 x 8 board isn't sufficient to demonstrate scrolling so we will make the size of the board configurable and set it to 100 x 100, for a total of 10,000 squares.</p> checker03.pyOutput checker03.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.geometry import Size\nfrom textual.strip import Strip\nfrom textual.scroll_view import ScrollView\n\nfrom rich.segment import Segment\n\n\nclass CheckerBoard(ScrollView):\n    COMPONENT_CLASSES = {\n        \"checkerboard--white-square\",\n        \"checkerboard--black-square\",\n    }\n\n    DEFAULT_CSS = \"\"\"\n    CheckerBoard .checkerboard--white-square {\n        background: #A5BAC9;\n    }\n    CheckerBoard .checkerboard--black-square {\n        background: #004578;\n    }\n    \"\"\"\n\n    def __init__(self, board_size: int) -&gt; None:\n        super().__init__()\n        self.board_size = board_size\n        # Each square is 4 rows and 8 columns\n        self.virtual_size = Size(board_size * 8, board_size * 4)\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        scroll_x, scroll_y = self.scroll_offset  # The current scroll position\n        y += scroll_y  # The line at the top of the widget is now `scroll_y`, not zero!\n        row_index = y // 4  # four lines per row\n\n        white = self.get_component_rich_style(\"checkerboard--white-square\")\n        black = self.get_component_rich_style(\"checkerboard--black-square\")\n\n        if row_index &gt;= self.board_size:\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2\n\n        segments = [\n            Segment(\" \" * 8, black if (column + is_odd) % 2 else white)\n            for column in range(self.board_size)\n        ]\n        strip = Strip(segments, self.board_size * 8)\n        # Crop the strip so that is covers the visible area\n        strip = strip.crop(scroll_x, scroll_x + self.size.width)\n        return strip\n\n\nclass BoardApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard(100)\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp \u2585\u2585 \u258b </p> <p>The virtual size is set in the constructor to match the total size of the board, which will enable scrollbars (unless you have your terminal zoomed out very far). You can update the <code>virtual_size</code> attribute dynamically as required, but our checkerboard isn't going to change size so we only need to set it once.</p> <p>The <code>render_line</code> method gets the scroll offset which is an Offset containing the current position of the scrollbars. We add <code>scroll_offset.y</code> to the <code>y</code> argument because <code>y</code> is relative to the top of the widget, and we need a Y coordinate relative to the scrollable content.</p> <p>We also need to compensate for the position of the horizontal scrollbar. This is done in the call to <code>strip.crop</code> which crops the strip to the visible area between <code>scroll_x</code> and <code>scroll_x + self.size.width</code>.</p> <p>Tip</p> <p>Strip objects are immutable, so methods will return a new Strip rather than modifying the original.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVdaXNcIkmS/d6/QlbzcZuccI97zMbWdKFcdTAwMTPd6GB3TMYpkFKAOCSktv7v645UXCI5XHUwMDEyoYvKYtVtqiqSI4h87v6eh4fHX38sLf3oPDbLP/619KPcK+bDWqmVf/jxJz9+X261a406XcL+v9uNbqvYf2a102m2//XPf97mWzflTjPMXHUwMDE3y8F9rd3Nh+1Ot1RrXHUwMDA0xcbtP2ud8m37v/n3Xv62/O9m47bUaVx1MDAwNYNcdTAwMGZJlUu1TqP1/FnlsHxbrnfa9O7/Q/9eWvqr/zsyula52MnXr8Jy/1x1MDAwNf1Lg1x1MDAwMVx1MDAxYWVHXHUwMDFm3WvU+4NcdTAwMDVcdTAwMTRotdBavj6j1l6jz+uUS3S5QmMuXHUwMDBmrvBDP453K1AvX/dcdTAwMGWLK6nWib/e1M3LjcHHVmpheNx5XGafp1wiX6x2W5FBtTutxk35rFbqVPnTR1x1MDAxZX99XbtBszB4VavRvarWy+320GtcdTAwMWHNfLHWeaTHpHh98HlcdTAwMTL+tTR4pEf/SjlcZjRcdTAwMDJ4kFx1MDAwZZXE14v8auVcXKC0tVJIROE1yJFhrTZCulx1MDAxMzSsf4j+z2BghXzx5opGVy9ccp6D6FxuZTN4zsPLlzUmXHUwMDEwylqtUGlnhFevz6iWa1fVXHUwMDBlPcVi4KQ2wlx1MDAxOIHCOTdcdTAwMThnu9y/XHUwMDFmXGJSKbruXHUwMDA3N5Q/vrlV6mPjP9FcdTAwMTmrl15mrN5ccsPBiPnCelx1MDAwNE+D13SbpfzzbVx1MDAwN2O1Rk9DoLl5vVx1MDAxZdbqN6NvXHUwMDE3Noo3XHUwMDAzpPRcdTAwMWb9+89cdTAwMGZAlO5KXHUwMDFjRK1cdTAwMDaNXHUwMDAy3OxcYl3LVm6ue8t7d1x1MDAxOXl2eFxcObnPZdeWXHUwMDEzjlBtXHUwMDAy0MpcdTAwMWGp0ErrnDfjXHUwMDE4ldJrXHRcdTAwMDRTacEkXHUwMDE2ozR85b0wesEgaoWLgyhISSZcdORDZsZo+WRzm1x1MDAwNl8olNTRQWbL7excdTAwMWPcqIRjNFx1MDAwNTJcdTAwMTDgnfZgwVx1MDAxOedgXHUwMDE4pNrIQFx1MDAxOSfoXHUwMDEyoFOj40pcdTAwMGVEQUvp6D9YOIjqOIhaa5SQxsLMXGI93y/s7VxcaFdoXHUwMDFjXHUwMDFj3ubP7zeJ37R/LUJBvOlGVWC1oWl3XHUwMDA2vFFgh1x1MDAwMGqkXHUwMDBmiFx1MDAwM3hPXHUwMDFlSmilMbFcYkWwVtFQXHUwMDE3XHUwMDBloVx1MDAxMEtFUSjiNqD97IH+NpXLy3RxOXucq96U16pcdTAwMDfrXHUwMDFiISTdiTpcYoiFKidccjqg71xmw1x1MDAxMFVcIiBcdTAwMGaqtFx1MDAwMkVE1erEQlx1MDAxNCyRXHUwMDE0TTFg0bio9bFcXFx1MDAxNFx1MDAxY01cdTAwMTdFNz27XHUwMDFi9TZvdNi4vu5cdTAwMTazcFx1MDAxOXZLjX27l3CMXHUwMDAy6sBcdTAwMWKhKcxcdTAwMTNcdTAwMDR8RFx1MDAxMD2HeU1cXNRcYutQ9mNKciHafy25lPm5UT9cdTAwMWa5JHxcdTAwMWNEtfDOXHUwMDAy+plcdTAwMDHaetquLtv1PVxym5uynFp7Slx1MDAxZlRPk1x1MDAxZefpzlKgJ1x1MDAwNmdR05/aXHJLesJtgI6UvDGoPGKSqahw4KxcdTAwMTBcdTAwMGJcdTAwMDdRXHUwMDE5n3RykmKbfIdcdTAwMTNdllx1MDAwNd+53Xpyjerm8Xr2XGbyp/WkK/pcdTAwMTRgIDmvRLLeoSBHaUYwqomMXG5E68lFXHUwMDE5n9ysXHUwMDEzgDWk6oWaX6SfXHUwMDBmRq0wcVx1MDAxOPXgPOiogHhcdTAwMGKjK141fKdzs1Jo3+CtKUH7ot5MOEbBXHUwMDEzXHUwMDA2lVx1MDAwNVx1MDAwMUpcdTAwMDLFe1x1MDAxY470ylx1MDAxOYKGoD+EQYr3oJKLUUnwcdZEXHUwMDAy42JglD4pXHUwMDBlo8zMlNJmdozuhL3qWlXmMlx1MDAxZFFcdTAwMGXXzcNj2OydJFx1MDAxY6NSyoCYptBcdTAwMTTKhTM4mrwniFxuY+mOWCFRJDgxSjZGMUBoOb/M6JzcqME4iFwiKE30Rjo9M0b1zXpYKFXu08f3WpRy5+FlfT1MOEbRqEA68j9cdTAwMWWU0TKShntcdTAwMTZMXHUwMDEwOMKuQk5MYYKdKPlcdTAwMTJA4qNcdTAwMGKHUFx1MDAxZJu7d2hQ0q2ZPeu0eqMuOnBdusruXHUwMDE1W6dcdTAwMGYtma3m80lcdTAwMTdM7EWV8kQzXHRcdTAwMDFcdTAwMDCRtYyfWSdA4ywvjoIzXHSGqJVcdTAwMTL418JBVMk4iKKj2dL+XHUwMDFkq0v6+mJze9dm95dVuYHb+6enzZxNOkTBm4Cw4STxXHUwMDFhXHUwMDAxUo5hXHUwMDE0XHUwMDAzLSjWkGJcImbuklx1MDAwYlGyMbpjOMdF+jlRUVx1MDAxZFx1MDAwYlFtke5cdTAwMWH42SU9bi7bo3C7lrtfbV5f7eNtRVxc51x1MDAxMlx1MDAxZeaVkIEha1x1MDAxNN4rXHUwMDBmVo2GeVwiXHUwMDAxSMhcdTAwMTDSeUy0oDfaWWW1XTQn6lxcbF6UvIvxRkaXSN+C6F7n8r6mbnqnzZW73HLnMXN8VF3/XHUwMDFkIGqEJS6qnZMjqXvOOVx1MDAxMVd1gqhcdTAwMDCr/eSKJS6FsVx1MDAxNtTCIVTGMlFcdTAwMDM0a1rI2X3oxe7DRqHaq4Rdd7ZV92erjfr+RdLDPNHMwFiHJJPAOI3KjkDUXHUwMDA2XHUwMDAyXHUwMDFk31x1MDAxOGe4jiixXHUwMDEwReEleVHQi5ZysjLWiyryoUJqNbtcdTAwMTNcci+ecvumqFx1MDAwZm/NQ72zv3N73To/TLhcdTAwMTNNOZJD9D3BSclcdJtcdTAwMTGEelx1MDAxMVgwSoNcdTAwMDaLTiVXLCktkWJeRFksXHUwMDA2QJ1cdTAwMTdxXHUwMDAwXHUwMDA1Vlx1MDAxMHTv9OxcYr16KKZPa21wl9nH7VpVmePc+i9Ois5Q6GRJXGZJ+qaEQZr3KD6eMVxugdJkrFZcdTAwMDOp/YiLSlx1MDAxYUbpXCLxXHUwMDE05Vx1MDAxNm3908ZjlL+wgWhZxZvVou2KKp6c7Oid5mrT5DLd6nphM+lOXHUwMDE0REA6wztcdTAwMDOoud4uUpPAb+BcYj2kokjqk2Am8CS3jMRcdTAwMTlnhV84JlxusVFcdTAwMWWFXHUwMDE2Xoj3rCx5XHUwMDExVjvdwoYt75ZqXCJzXuymdlx1MDAxYlx0Ryj5UGk8ek1cXFR7gcNy3itcdTAwMTF4hSRDXHUwMDE0XG6Z4Fx1MDAxMlx1MDAxMpLxxEXkwiXtnYivXHUwMDE1JXySdphcdTAwMWSehUZcdTAwMTWuWts7t08rXHUwMDA3t1f3ze398/VMwuGZsi6w1pIs1I6IJrnRXHUwMDExfMpAopTOoqbJwORWiqIgLi1cdTAwMTDEwvFQXHUwMDFiW2+PLJSMtbPT0OPMRerk5nxv67540d3aL4dcdTAwMGZcdTAwMGb791x0hyigXHJcdTAwMTR7SFCS5LBcdTAwMWGN8Fx1MDAwNGAgnU86RHlcdTAwMGLJLbe3aLVfQFx1MDAxN+ohNtukpLXo4Vx1MDAxZEp+fcs9XFyd7tQz9+XD7PLKSemyW096OpRcdTAwMDHKy1x1MDAxMp5cdTAwMWOQ5FxyIUNcdTAwMDAl7qlcdTAwMDMhNTlZrZXxNsGLSob/035cdTAwMDG1fHwps1x1MDAwNE9cIvZcdTAwMWRL8/dcdTAwMWJcdTAwMGad86Otq8xarry6fX2xXazmz1x1MDAxM1x1MDAwZdFcdTAwMTS5UMF1MsJpY6xcdTAwMWYpZSaM2sAp+lx1MDAxMUT0SEol14tcdTAwMDJdsDSChcuHmtgw7zQ4XHUwMDE33Y79pk7avYHbTmpzt3l3XHUwMDEwbuyk6j19eZD0ZFx1MDAxM3jL2+eFQCSkRpcwnnNNXHUwMDE4KND9XHJ3hGKdXFylXHUwMDA0QCYk1OIlRH188VxiOO2dXHUwMDE3XHUwMDA2Zlx1MDAwZvS5Wlx1MDAxNcqNVLpWz2RrOrO50fBcdTAwMGa/WMvPUuBkXHUwMDAyQqDXllx1MDAxM0p+dFWJMCqJXHIxepBcdTAwMTdtXHUwMDEyi1FjUJOkc4vmRJ2MdaIgOIXt5DtcbpzOT1x1MDAwZotccn9YujqrXHUwMDFkZU+0bj21Vs5cdTAwMTJcdTAwMWXo0fDKJil2pYiWXHUwMDEy3Vx1MDAxY07ZO7qsSMqT4JdcdTAwMWGT7EXRWuJcIkYvmlpyJjbhpFhcdTAwMWPCe7YsZc+3m1x1MDAxYrWtjaNMa2tXn3SOz07bSW+TI6VcdTAwMGVcdTAwMWNcYqKhxEhp1ofVkldcdTAwMTA4a/t1I+RpXHUwMDEznFx1MDAxMVx1MDAwNcnKwZk59iCZV1x1MDAwNV5spT2QNDBWKJw9zvuV8/rpffWyU8BcdTAwMTW3WXkqrJVcdTAwMWbuXHUwMDEyXHUwMDBlUfAuIDFvhffaaFx1MDAwMGlGMKpcdTAwMDKKn2iIqYJEmVxcQe/J0Kywi0dFMX7fp1x1MDAxMZr3jNvZNydcdTAwMWbs7dhuSp7ByeN1/cGmsVPYLCdcdTAwMWOiSlx1MDAxMDxIXHTT/UUhhVx1MDAxZNlcckJyMTCaVD1xVMNro8mFqDZcbr3Ri1bH7OPT9oCO63tRzVx1MDAwZdH1Qlhv3e1cdTAwMTfSXHUwMDBltleObjZuXHUwMDFl1sKjxEOUXHUwMDAzPVFRYclcdTAwMGaBXHUwMDE4dqL9tKi3gvyr8kbK5Fx1MDAxNo9cdTAwMDCS/Vxit4iCPt6LUtBcdTAwMTDc9WB2Lrpmd+5ztfW1p/AqbNbq4DauNm5cdTAwMTNcdTAwMGVR8p+BIMmOdPspkFx1MDAwYmdHMcqro16C1nR7olQvcSBVvDuVSfOCgVSa+I54zit05Edmz91X7/Nb6V1cdTAwMTf2Llxua2m7nXdHO+W4XHUwMDFhp1x1MDAxMbBcckN0tFx1MDAxZfP1VaV8u1p+XHUwMDA3Ru0sbUVZXHRpZTn1NJq6573JXHUwMDA2eEcl31x1MDAxOTDuUyVOnVa+3m7mW4SBcZxqrVx1MDAwMmOs05ZmXurIkskrTlx0oUG/o5TWRJ9hUs8xxWu5qL5cdTAwMGWnL1x1MDAxN1x1MDAwNsCK3O+Gvdjcv8Dl5ulx+7RSa/m6yVxmmndccqEw32o1XHUwMDFlfrxe+fvPae+bOd+9XHUwMDE2+TOzVz0uioNmoVx1MDAxM+7ordne9+VvybAucDZ+M4vgLXJcdTAwMTbf0c5v+bKS71xcXHUwMDFk7Fx1MDAxZjdSVVkopo+PN1RcXD5iqnmNrj99azM/bblcdTAwMTZNXHUwMDExTyalN8yjjXRcdTAwMDFcdTAwMDV+0CwriG/Hl2HTs/LqjVx1MDAwMFCpVMatSipHI1BI4ZY+30VcdTAwMTbTX62KXCJT4HkvXHUwMDAzyU2DUX3+umHVaMlcdTAwMWJWv45FT7Wq89LpKt5V7vaq+96Yxoo5yJz8juhcdTAwMTdcdTAwMTCf6rA0o85F6/LfQr8tbu7Ui4VO53Hn3pnlp9Ku6vaSvqShdSB5r1x1MDAwNVx1MDAxMoSUVsRyhlxyQEEgyd+DI1x1MDAwNjy0pTtpXGbIglRCLdy6MFxijMcoXHRJ40HNzn+2lrP3XHUwMDBm4U1W5S5219IrWbVij4pJhyh4XHUwMDE1oNFWcl9cdTAwMGIyWTWGUFx1MDAwMVx1MDAwNlx1MDAwNXlp3tGdZI7OXHUwMDA1XHUwMDE4Xi9cdTAwMWNH91x1MDAxMYowuqbRryrRZvZUhzvdyJz27uzmyurxzr06XHUwMDBm5ermL27DNsvCMFx1MDAwNqSYvSdcdTAwMDLurbejPYFcdTAwMTVcdTAwMDaSN1x1MDAxYzpP0TvJzVm80t5TXHUwMDE0WDg3qlxcrFx1MDAxYjVWSVx1MDAxMlc4e6TvPS7fhPlwfTt31MvlTn0h3HWtxPNcXCG04jVGr7mkeyTOXHUwMDEz0SWKS1x1MDAxNJIgqpz93I7YXHUwMDE4omtcdTAwMDOtaFx1MDAxMJKbwGk1QT7CM9tGYl7cKFx1MDAwNqL7dV52XHUwMDFiXG6Dyir4ukW3aURcdTAwMTex97jTbsPxg6rD9uPBtj+utWcjulPl429EoMthWGu2J9tcdTAwMTTxxjibQsKIXHUwMDA2Zdzs4nE1tfm0dbyXlb1cdTAwMDPZvs4101x1MDAwZvthXFxcdTAwMDJxqlHNz+1cdTAwMWKiXHUwMDFlfI5cdTAwMDa3XHUwMDFmXHUwMDEz0c6Fz05fXHUwMDEzMUHJus1+cot5Ja9R47hNsXS0xtHryb+p6IlcdTAwMWSvNuUoKqDtb9Hs96yXoyZcdTAwMDVcdTAwMWVcdTAwMTVyt/D5iMdP2FSSsK+mtPXkXHLsxsvZXHUwMDE3yVx1MDAxZkXtonq/bVx1MDAwMVx1MDAxZXZ6XHUwMDE1n013u+eYbOhbctVAmDFeSEUqeVQ2qn5iXVvlUVxu87l64kq+QN7ke9BvKfJcdTAwMTn9lfnIZMBTx+f1nOZ2rO9pUrPSOzg9Or9q1zOt+onRqdst7dLJxqc3XHUwMDAxeUyJwnpBXHUwMDE4XHUwMDFjQadcZlx1MDAxY0hcdTAwMDOWa+GI9Hxcbp2AXHUwMDA15ybw8a9AJyrlXHUwMDAwo0dcdTAwMDH8Nuh8K/NcdTAwMTa79qiNJOeJcnbJeLeVrm0yc7BcdTAwMTdP9e4y3jzI9C9u8zVcdTAwMDMhN4RBL/uiUWvrRurd+SwuuiOSdJxcIsKb3I3rXHUwMDAwaHjBZ+G6KHlcdTAwMTWfeFPsRH20XHUwMDEx9FtcdTAwMThN27ua9duVxure6nlnuXZb3ln7xZ27Z0trXHUwMDEwj9GOlCNnf4drNblHXHLvXHUwMDE1XCKhJrj1QoJrNWl00jrxO0b56aduxm9sXHUwMDAzT1x1MDAxOFx1MDAxNVx1MDAxNFneUU58mOnKXZu9W1x1MDAxM+srOzv32Vx1MDAxNYzd2fblYV58XGKh2lx1MDAwNki+UlxuirROR49cdTAwMTjtl8FpRVxi9U5JQb/d51LDxXJJlfLjXHUwMDAwlcR1pVx1MDAxNUSB0ViylkhkXHUwMDFiJDYwMF4765ltSHKYalx1MDAxNKLIXUeV/Uo3+nJholxuM2m9d5KRT1ukXdcvU3p143LvcDZcdTAwMTX257T33czVTHhSf+q08+Ji9XBv/ab31PgqdUdwILo+XHUwMDFm51x1MDAxZp/aIOZsXHUwMDE0yvdcdTAwMWPEuFJO5eHo2nWaZ49yZb1X2c2sJZ6gXHUwMDEwOVx0LFx1MDAxYc3HL1x07q0w3v1JXGLD59xcdTAwMTlF/jW5PfRcXL9kxSyc85+6Ic9xu1x1MDAwZfOOKuiLsL0s072101x1MDAwYpHN71x1MDAxYtvJp5dlsp0/qdxcdTAwMDClXHUwMDA04tDcjlSPIJS9v6BcdTAwMTBoiK55Jz/ZcFxcXHUwMDE1TbkyIVx0XHUwMDAx3lx1MDAwN9JbXHUwMDAwj9yHSkyo3yDvT+BFQzpUOOWjNVx1MDAwNT8hXG5cXH6iXHUwMDE27oCmaD/xXHUwMDExiEq2SVx1MDAxZF1cZn1cdTAwMTOhd729w4vl/HZnZ2VHnl2J1XVI/uI16lx1MDAwMKxcInhwP3mMXHUwMDFlY/HcidRcdTAwMDSSXHUwMDBiMFx1MDAxNOk8XHUwMDFmLeBJmlx1MDAxN1x1MDAwNU6kWLt4zSHIaOMwalx1MDAxNUU4mozZI31ntbZXrbWrdrmi0o3Udc2ellx1MDAwYknHKFx1MDAxYVx1MDAxOWiB5JpcZoAzY/2cTUBcdTAwMTSagihywjfBzXKl5lx1MDAxM7VcZs4tXHUwMDEzXHUwMDExab/4rdkygFg2yrkh3nw/O0Srayd+67GweplXXHUwMDA3T83zfPmweFx1MDAxOXcqeEJcdTAwMDK9dC6g6GmRmDc5Slx1MDAxY85DXHUwMDE4TVx1MDAxMVihUJI7zmvxPTJcdTAwMGZkoIhE8mJcdTAwMDFZgvGRj1x1MDAxOVx1MDAwNHqv+Cwzy1x1MDAwZV8hUZLxxTbB8mHo1d8p875Vjs3TXHUwMDAyplfBWURcdTAwMDPvqDG6gHSx2Mvu11x1MDAwZdPiuuuf0ie4XHUwMDFld1x1MDAxY2lC1jPYXHUwMDA0LHeC9rxcdTAwMWRFXHUwMDFhXHUwMDFjWXAjscY9KZSxRDC9/tySRizXhcCQtCBkU5RcdTAwMTAmmltcdTAwMWGsaSA3vFx1MDAxNMJb0d8zM8Z1uaU198iYz3Lz91pcdTAwMDBxh1xiw/2kXHUwMDA1dMq9zkTw2/hcXFx1MDAwNDvDfmO5mbF/WMrc7V9cdTAwMWTpjebVQ+8207kut+1jsrfAXHUwMDEw5lx1MDAwM97agqiJXHUwMDE1Kj16yKly/eI7XHUwMDE0ktgpfvKs6Im1S6gn8JHoyVx1MDAxNi+bWYWWnjuKzVx1MDAwNdrftbnlNH1oiqliPsy1ZK+3msvmunj8y4LGXHUwMDAwmY1657j21K8uckOPpvO3tfBxXGJdfVuiXHUwMDAx3tdanW4+vGzTXHUwMDBig5c7XHUwMDE3uf3tMlxyoP+Oeuily2Htik3vR1iuXGbbZKdGXHUwMDEz83q504is4Vx1MDAxNGkoeXq71lZp9Cs1WrWrWj1cdTAwMWaeTFx1MDAxOdZU3/A80Vx1MDAxM5yDjO9cdTAwMWLG68rkqmdcdTAwMTfY01x1MDAwMfVcdTAwMGLKXHUwMDFh3/RcZlrYgMNcdJLxK1x1MDAxN21o1H+51IHU5Fx1MDAxYVR/Z4P83Fx1MDAwMtXkosZAcDrfSevpfy0mXHUwMDE0NVwi14EpxedcdTAwMWIrjUpGT1x1MDAxNXshhY6rXHUwMDAwXFy0XHUwMDE3cZKES2TW8q3OSq1eqtWv6OLAdfwoP3/01lxmXHUwMDExpm+zxS6PMiVcdTAwMDLPRf2aj6ZWpP5cdTAwMDbHXFzwXHUwMDE05JvPtFuS6lx1MDAwM+2lN8R7lHt5xqtcdTAwMGb7Ua6X3lx1MDAxZdT0nZ/RQUFAZkM3RIO1Rlx1MDAxYTM+Jkk0qK+6pNbWXHUwMDFib8aGXHUwMDE05tud1cbtba1DU3/QqNU7o1Pcn8tltupqOT/mL+grRa+Nmn+T33E4Plxm/rY0sJH+P17//p8/Jz47XHUwMDE1i+H+1XH4XHUwMDBl3vCP6J/vdl3g4lx1MDAwZsxcdTAwMTQ0rzp6XHUwMDE4+Fu+a3rQSqTvXHUwMDAyXGacMoq4hTPK4OjiOlx1MDAwMZ9cdTAwMTNcIkKTojTuk1x1MDAxNXRcdTAwMTNJTUBKQTjuXHUwMDEyQoJcdTAwMTYnkXn0JvBoXHUwMDE0N1j2Q2vJr9VcdTAwMWbgSVx1MDAxMkj8f+a6ROCclyTDvFx1MDAwM7qFkSbdr16CXHUwMDBi6lxy3TuCOadcdTAwMDOMn+64hr/F7+Q/YnHEP2NcYnqn94hcdTAwMTNFXHUwMDE4aVx1MDAxYzbqPKRA8lTvKM5pZFx1MDAxZs9ubaPcLGbO2/uq53Xq9EOFXHUwMDBm89NEzlx1MDAwNzTd5LWVdlx1MDAwZYRcdTAwMTjO2fJOzUDxjk3pnJRcbj/XXmWy+1AzaVwiXHUwMDEwXHUwMDEyrHZfeLTJK4K+dmP+VE10eUfM/na1dLV2SVx1MDAxYXPz5GB/q1hdXHUwMDA0TfR8N5MmiZ5H9TFagT5eXHUwMDExkSP22pnZN8xOx1NcdTAwMTJphVTE5/hcdTAwMDRuzV1cdTAwMDEs4qhnQKJcdTAwMWRcdTAwMTSUXHUwMDE09y6Unz1cdTAwMTJpomdcdTAwMDBhXHUwMDAyR1x1MDAxZu1IgFx1MDAxMmsk/TXuKIhCoyT2Yzw3K3U+kjP5mUyxzlxuObfVxm/lXHUwMDE101x1MDAwM8wrZfBcdTAwMDF6a9FYllx1MDAxZdxcdTAwMDd7smhcdTAwMTKcXHUwMDA146JcdTAwMWPBZbdK/oypXy2Jnlx1MDAwN4UuXHUwMDAwzjtznLGSXHUwMDBmMpqsmoRcdTAwMTe8QEKciIZlzLhO+51ITTyE+Sc1jt530pp474XxR7p5x4fcvKPubHrUSqL3sjJwJHZI+TG43UhCXHUwMDA3+KhccuuE1EZ5bsvyXHLbVEFDXHUwMDAwXHUwMDE0XCJcYsaOTFxm3KR1voC7oDrSqJJbbMrIdtSfzotgQaFmfodf/1r3XHUwMDE1cU5AhFx1MDAxNEi1XCJcdTAwMGIk7uw35lC48Vx1MDAxZlqFkmjhc9Ob6f7r91VG8Vh6vjxcdTAwMDajd3qROHFkpm3MRXDeR1Olb/ZHrW489MJcXObx8WlVy+WM0vXK2q/0XCL+LS+S0nyomXL9XHUwMDAzd4zGkcMktFS8nmRRXHUwMDBiukNexi+WXHUwMDE2PeYx/43iqH/ajv9KdTStfppl+mBcZt+tM0hJVIJ2sdVcYsPLRqXSLidi6WXCqD5cdTAwMTapdXzrNG1cdTAwMDRZdZS8vmVj03dFJzFSp6znXHUwMDEzqsnXW66vJa8/ZGOqf4C1JetcdTAwMTJGO4VTemd+2MhcdTAwMDBVYJXnXHUwMDE0XHUwMDFjSC8hsmFrXHUwMDEwqo1cZri3XHUwMDA3elSWrHIsg8l1Q4pcdTAwMGL95tLyXHUwMDA0rDPqK0L1aFB7O4hPb1oywuWl53RcdTAwMWVqcpXCXHJK/pZcdTAwMDbJTU/S0mrF7W608vL3ZvuxQOpfXHUwMDFkhdBcdTAwMTdF6eh+37H6fetcdTAwMWRzg9mj9NHZzX796v60dt29yOS1PCnBdpjsKI3OkGrkQ1x1MDAxNLRA6e1o3SmRJ6GF8WSeXHUwMDE433huXHUwMDA29zG1rSmYXHRcdTAwMWK2JoRqkoOMdfi6XHUwMDFh/VdcdTAwMWP9ilx1MDAxNjFzTDg+Lv176SXiPiaBXHUwMDAyXGaN52PB30yR6aRrjFx1MDAxNPJcdTAwMWR1XHUwMDE3U+91XCJNXHUwMDE3hFxulCNpY6Xpn1x1MDAxYTmyOYyrZT2FXGLe4m7UlMqLT1uv8oHzvHvGcz9cdTAwMTIhJ3BcdTAwMDBSYVx1MDAwZcBcdHR82ICa0Fx1MDAwMseK/smyZi6rmGA1XHUwMDA1ky/gXHUwMDAwcZF+eihYiq5iUpwnXHTCfcOF9laPXHUwMDA3elBcdTAwMDFdI3fBrWelNm682OFr2Vx1MDAwN9FGQYzCsjDiqr5J3IN71HE9oHRa0vB/b+5cdTAwMTFcdTAwMGJg/kmNYfeLyIeRscVcdTAwMTc0XHUwMDBloKDrZ+9cdTAwMGaDXHUwMDA3qdZaeLjse2F2I1u73c6Bc8l2YOSZXHUwMDAydl7kw4zhxZAh/+UlXHUwMDA2SE5cXDllLZeifJ//slx1MDAxM1x1MDAxY9Yk9tE/1O1cdTAwMGKXQ6aRj0/sXHUwMDBlf5t8XHUwMDEwnfaRpv7fTT56g2DfS1x1MDAwMvlcdTAwMThcdTAwMWHPx8hcdTAwMDeXp8VcdTAwMTkvzbAw7zr+aPrNTqTxXHUwMDAy9yVBpygmeTJgXHUwMDFjyT2QTlx1MDAwYlx1MDAxMNGT/Vx1MDAxYe99fO1DibSHqHzCeJ1cdTAwMGZQsCZUxnKX7HFTNuTdjdJeKvLfWsFY41x1MDAwN7DAgfUri8a/xfhm5Fx1MDAxZdNDQSSGXHUwMDBiJTiuXHRyr9xBYFx1MDAwMlx1MDAxM+CVTor0XHUwMDFj4ZWy3HOByPHH2Mf0ziZcdTAwMDOyM2FcdTAwMTTc5Vx1MDAwMFx1MDAwNaBzgLxs/nuTjTjA8k9qXGarX8Q1tI7lXHUwMDFhUvSLe9/RwnzdbKz2uqc5dyGOb25qVX1cdTAwMWFmk801NK9cdTAwMDKR7XnBp11ZO9xcdTAwMWKaZjvgynVNXCKK7suUXHUwMDBl+5+lXHUwMDFhOKk63Y4lRHmbL1x1MDAxOdxcdTAwMTdcdTAwMWVcdTAwMGU8jWp8b8NcdTAwMThUVnxIaX2aaiz91//Wn5dcdTAwMWGmV1mZ4beZJ/uYNMRcdTAwMGZcdTAwMTJcdTAwMTLw8VvUKOKAtO85pWA6Jlx1MDAxMmni3lx1MDAwN55z4ZJcdTAwMWKB2JGaK1wiXCKBRd7VzkdcdTAwMTR4XHUwMDFiT0g+rSbIv5NIXHUwMDA3329RJGDSKqTl4lx1MDAxNW208dKSjejx7Shk/PRiO5+OfsinWOiP2OiMjGR6wFiKZlx1MDAxZZDPylx1MDAwND6uwFC8x/GdXHUwMDFmKuBSW3IqgMhV31x1MDAxZt2MMnVcdTAwMGL+0JCI8lx1MDAxMNEl5Vx1MDAwZp6X7u3YkFxcoPlwXGbNjVx1MDAwZpif/N51V6l4XHUwMDA09y+PgfeLKFxuQPwxcyRcInjh/Fx1MDAxZOdg1dxGXHUwMDBmM+kw18hgunS0JY5cbvvbiXZg4HSgNVx1MDAxZj/FvJDsYPR4XHUwMDAwXHUwMDEzOEt6SkpyXHUwMDBicko70lx1MDAxOc7BmurB7IQ2uZFcXPvPTlx1MDAxZlxc1+Hn2C/p06slkfa/QyxiXHUwMDEwKX6yiJVGvlVabjYn0oXI28yDLryO5dmo/nix21x1MDAxZvlm87hDs/Tq42j+a6WXrzp4x1x1MDAxZve18sPK5OV8XtH/48VQ2VwiynxcdTAwMWL++vuPv/9cdTAwMGZcYuGAVyJ9 virtual_size.heightvirtual_size.widthself.scroll_offsety = scroll_yx = scroll_xx = scroll_x +self.size.widthBoardApp"},{"location":"guide/widgets/#region-updates","title":"Region updates","text":"<p>The Line API makes it possible to refresh parts of a widget, as small as a single character. Refreshing smaller regions makes updates more efficient, and keeps your widget feeling responsive.</p> <p>To demonstrate this we will update the checkerboard to highlight the square under the mouse pointer. Here's the code:</p> checker04.pyOutput checker04.py<pre><code>from __future__ import annotations\n\nfrom textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.geometry import Offset, Region, Size\nfrom textual.reactive import var\nfrom textual.strip import Strip\nfrom textual.scroll_view import ScrollView\n\nfrom rich.segment import Segment\nfrom rich.style import Style\n\n\nclass CheckerBoard(ScrollView):\n    COMPONENT_CLASSES = {\n        \"checkerboard--white-square\",\n        \"checkerboard--black-square\",\n        \"checkerboard--cursor-square\",\n    }\n\n    DEFAULT_CSS = \"\"\"\n    CheckerBoard &gt; .checkerboard--white-square {\n        background: #A5BAC9;\n    }\n    CheckerBoard &gt; .checkerboard--black-square {\n        background: #004578;\n    }\n    CheckerBoard &gt; .checkerboard--cursor-square {\n        background: darkred;\n    }\n    \"\"\"\n\n    cursor_square = var(Offset(0, 0))\n\n    def __init__(self, board_size: int) -&gt; None:\n        super().__init__()\n        self.board_size = board_size\n        # Each square is 4 rows and 8 columns\n        self.virtual_size = Size(board_size * 8, board_size * 4)\n\n    def on_mouse_move(self, event: events.MouseMove) -&gt; None:\n        \"\"\"Called when the user moves the mouse over the widget.\"\"\"\n        mouse_position = event.offset + self.scroll_offset\n        self.cursor_square = Offset(mouse_position.x // 8, mouse_position.y // 4)\n\n    def watch_cursor_square(\n        self, previous_square: Offset, cursor_square: Offset\n    ) -&gt; None:\n        \"\"\"Called when the cursor square changes.\"\"\"\n\n        def get_square_region(square_offset: Offset) -&gt; Region:\n            \"\"\"Get region relative to widget from square coordinate.\"\"\"\n            x, y = square_offset\n            region = Region(x * 8, y * 4, 8, 4)\n            # Move the region in to the widgets frame of reference\n            region = region.translate(-self.scroll_offset)\n            return region\n\n        # Refresh the previous cursor square\n        self.refresh(get_square_region(previous_square))\n\n        # Refresh the new cursor square\n        self.refresh(get_square_region(cursor_square))\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        scroll_x, scroll_y = self.scroll_offset  # The current scroll position\n        y += scroll_y  # The line at the top of the widget is now `scroll_y`, not zero!\n        row_index = y // 4  # four lines per row\n\n        white = self.get_component_rich_style(\"checkerboard--white-square\")\n        black = self.get_component_rich_style(\"checkerboard--black-square\")\n        cursor = self.get_component_rich_style(\"checkerboard--cursor-square\")\n\n        if row_index &gt;= self.board_size:\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2\n\n        def get_square_style(column: int, row: int) -&gt; Style:\n            \"\"\"Get the cursor style at the given position on the checkerboard.\"\"\"\n            if self.cursor_square == Offset(column, row):\n                square_style = cursor\n            else:\n                square_style = black if (column + is_odd) % 2 else white\n            return square_style\n\n        segments = [\n            Segment(\" \" * 8, get_square_style(column, row_index))\n            for column in range(self.board_size)\n        ]\n        strip = Strip(segments, self.board_size * 8)\n        # Crop the strip so that is covers the visible area\n        strip = strip.crop(scroll_x, scroll_x + self.size.width)\n        return strip\n\n\nclass BoardApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard(100)\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp \u2585\u2585 \u258b </p> <p>We've added a style to the checkerboard which is the color of the highlighted square, with a default of \"darkred\". We will need this when we come to render the highlighted square.</p> <p>We've also added a reactive variable called <code>cursor_square</code> which will hold the coordinate of the square underneath the mouse. Note that we have used var which gives us reactive superpowers but won't automatically refresh the whole widget, because we want to update only the squares under the cursor.</p> <p>The <code>on_mouse_move</code> handler takes the mouse coordinates from the MouseMove object and calculates the coordinate of the square underneath the mouse. There's a little math here, so let's break it down.</p> <ul> <li>The event contains the coordinates of the mouse relative to the top left of the widget, but we need the coordinate relative to the top left of board which depends on the position of the scrollbars. We can perform this conversion by adding <code>self.scroll_offset</code> to <code>event.offset</code>.</li> <li>Once we have the board coordinate underneath the mouse we divide the x coordinate by 8 and divide the y coordinate by 4 to give us the coordinate of a square.</li> </ul> <p>If the cursor square coordinate calculated in <code>on_mouse_move</code> changes, Textual will call <code>watch_cursor_square</code> with the previous coordinate and new coordinate of the square. This method works out the regions of the widget to update and essentially does the reverse of the steps we took to go from mouse coordinates to square coordinates. The <code>get_square_region</code> function calculates a Region object for each square and uses them as a positional argument in a call to refresh. Passing Region objects to <code>refresh</code> tells Textual to update only the cells underneath those regions, and not the entire widget.</p> <p>Note</p> <p>Textual is smart about performing updates. If you refresh multiple regions, Textual will combine them into as few non-overlapping regions as possible.</p> <p>The final step is to update the <code>render_line</code> method to use the cursor style when rendering the square underneath the mouse.</p> <p>You should find that if you move the mouse over the widget now, it will highlight the square underneath the mouse pointer in red.</p>"},{"location":"guide/widgets/#line-api-examples","title":"Line API examples","text":"<p>The following builtin widgets use the Line API. If you are building advanced widgets, it may be worth looking through the code for inspiration!</p> <ul> <li>DataTable</li> <li>RichLog</li> <li>Tree</li> </ul>"},{"location":"guide/widgets/#compound-widgets","title":"Compound widgets","text":"<p>Widgets may be combined to create new widgets with additional features. Such widgets are known as compound widgets. The stopwatch in the tutorial is an example of a compound widget.</p> <p>A compound widget can be used like any other widget. The only thing that differs is that when you build a compound widget, you write a <code>compose()</code> method which yields child widgets, rather than implement a <code>render</code> or <code>render_line</code> method.</p> <p>The following is an example of a compound widget.</p> compound01.pyOutput compound01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label\n\n\nclass InputWithLabel(Widget):\n    \"\"\"An input with a label.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    InputWithLabel {\n        layout: horizontal;\n        height: auto;\n    }\n    InputWithLabel Label {\n        padding: 1;\n        width: 12;\n        text-align: right;\n    }\n    InputWithLabel Input {\n        width: 1fr;\n    }\n    \"\"\"\n\n    def __init__(self, input_label: str) -&gt; None:\n        self.input_label = input_label\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:  # (1)!\n        yield Label(self.input_label)\n        yield Input()\n\n\nclass CompoundApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    InputWithLabel {\n        width: 80%;\n        margin: 1;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield InputWithLabel(\"First Name\")\n        yield InputWithLabel(\"Last Name\")\n        yield InputWithLabel(\"Email\")\n\n\nif __name__ == \"__main__\":\n    app = CompoundApp()\n    app.run()\n</code></pre> <ol> <li>The <code>compose</code> method makes this widget a compound widget.</li> </ol> <p> CompoundApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e First\u00a0Name\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0Last\u00a0Name\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0Email\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>The <code>InputWithLabel</code> class bundles an Input with a Label to create a new widget that displays a right-aligned label next to an input control. You can re-use this <code>InputWithLabel</code> class anywhere in a Textual app, including in other widgets.</p>"},{"location":"guide/widgets/#coordinating-widgets","title":"Coordinating widgets","text":"<p>Widgets rarely exist in isolation, and often need to communicate or exchange data with other parts of your app. This is not difficult to do, but there is a risk that widgets can become dependant on each other, making it impossible to reuse a widget without copying a lot of dependant code.</p> <p>In this section we will show how to design and build a fully-working app, while keeping widgets reusable.</p>"},{"location":"guide/widgets/#designing-the-app","title":"Designing the app","text":"<p>We are going to build a byte editor which allows you to enter a number in both decimal and binary. You could use this as a teaching aid for binary numbers.</p> <p>Here's a sketch of what the app should ultimately look like:</p> <p>Tip</p> <p>There are plenty of resources on the web, such as this excellent video from Khan Academy if you want to brush up on binary numbers.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVdaU/jyFx1MDAxNv3ev1x1MDAwMjFf3pMmnlpvVY309MTSQCCsYe2nXHUwMDExMomTmCTOYidcdTAwMDRG/d/frUBcdTAwMTNncchcdTAwMDKM0400PVx1MDAxMNtJueqcU+de36r8/WVtbT16bHrrf66te72CW/OLbfdh/Xf7etdrh34jwEOs/3fY6LRcdTAwMGL9MytR1Fxm//zjj7rbrnpRs+ZcdTAwMTY8p+uHXHUwMDFkt1x1MDAxNkadot9wXG6N+lx1MDAxZn7k1cP/2n+P3Lr3n2ajXozazuBDMl7Rj1x1MDAxYe3nz/JqXt1cdTAwMGKiXHUwMDEw3/1/+Pfa2t/9f2Ota3uFyFxyyjWvf0H/UKyBko++etRcYvqNpVx1MDAwNDQ1lHP6eoZcdTAwMWZu4+dFXlx1MDAxMVx1MDAwZpewzd7giH1pXHUwMDFkzppcdTAwMTdnwVOnSW865dxWZn9jc/dm8LElv1bLR4+1frNcbu1GXHUwMDE4ZipuVKhcZs5cYqN2o+pd+cWoYlsw8vrrtWFcdTAwMDN7YnBVu9EpV1x1MDAwMi9cZoeuaTTdglx1MDAxZj3amySvLz53xJ9rg1d6+Jek2lFEU05cdTAwMTRcdTAwMDHDxetBe7XQ4GggWjNcdTAwMTCEMdAjrdpq1HAwsFW/kf7PoF13bqFaxsZcdTAwMDXFwTmiXHUwMDAwXklcdTAwMGXOeXi5VymoQzhjnFHNKSHy9YyK55crkb01RVx1MDAxZInNUJJcdTAwMTEmqVx1MDAxMmzQXHUwMDEyrz8mXHUwMDE0NKGcXHUwMDExMlx1MDAxOFT7+c1ssY+Pv+I9XHUwMDE2XHUwMDE0X3os6NRqgybbXHUwMDAzX2OYXHUwMDFhXFzTaVx1MDAxNt3o5WOUUoZQrYlcdTAwMTn0Rs1cdTAwMGaqo29Xa1x1MDAxNKpcdTAwMDO09F/9/vtcdTAwMDIwpYQn41RcdTAwMTNcclx1MDAwMsDMjtM9dpJxm72oVT047Fx1MDAxYz1cdTAwMTGze8C/Lo5T9k44xWF/XHUwMDEzqMrBW+VcZlxiUcA4XGYjVVx1MDAxYYdcdTAwMDHiR1HBXHJ2i1pcdTAwMDaqUdtccsKm20YkTIKrcLBcdTAwMTlcXHBcIimlXHUwMDEz0MqBOJpcdTAwMTIjXHUwMDA0cI5cdTAwMDRjMIpWMJJIzpn8NLCaT1x1MDAwMWucmKNY5VpQI1x1MDAwNZiZsZrb2bvZolx1MDAwZlutWq8rRHGDkqfrIFx1MDAwMasjePsnUUqIXHUwMDAxhVomULFGQKpcdTAwMWSthcbxXHUwMDAw0Fxu4CNBylx1MDAxZEJBMi1cdTAwMTVVRulxlDLtXHUwMDAwXHUwMDEwjlx1MDAxYU9cdTAwMThwS6xRlCrNSJ9Sq4dSr1bzm+FEjIJcdTAwMTKJXHUwMDE41YIowbWSM2PU69ZPN77dXHUwMDFmXFzlstmb6kaudbW3XV5cdTAwMDSj7zXjz4BRXHUwMDFjeUMkXHUwMDEwoVx1MDAxMa7EsGGQXHUwMDAygpRLg8rGjIXOUnN+yZVMsnF8Uu5YRyFccuCEzpBcdTAwMTJiXHUwMDFjoJQ5XHUwMDEyQFx1MDAxOJRQwlAshVx1MDAxYVx1MDAwNShcdTAwMTeUMWpibfxcdTAwMTlcdTAwMDCqmE5cdTAwMDIo+jBcdTAwMWMxodTM+DSsV7nNRlx1MDAwN7nuUfd8v51vcdVopFx1MDAxY59SXCJcdTAwMDJcdTAwMDFcdTAwMDEqXHRcdTAwMDe0pSP4VFx1MDAwZVCBRGVUSFx1MDAwNVIsXHTQO3ScXHUwMDFmXHUwMDA1UIZyYlx1MDAxOFx1MDAwMbWCXHUwMDEz/TSE6uRpXlKMXCJcdTAwMDSfXHUwMDE5oHv5ulxmy2euOLmqXHUwMDFmh8F5buN6p5NygGqOYVx1MDAxMZM4W0itXHUwMDE4lyNcdTAwMDBcdTAwMDVcdTAwMDdRY7hmiFWtR83HfPik7E5r+Dh8XHUwMDEynFx1MDAwNriWn1x1MDAxNzV9jlx1MDAxMdUyXHUwMDExoFx1MDAxOERcbowk+excdTAwMTBccjJnV0FwuXta7mZ36MZGePh0t5duiCqG8ZA0SmBgLVx1MDAxMYxmXGKiUjJcdTAwMDSwZIDgXHUwMDExeFAuXHUwMDA10VKpNFx0n1x1MDAxM1x1MDAwMFx1MDAxOWPKj1x1MDAxOVxccpzCcVx1MDAxMp9cdTAwMDN/P5AwwFx1MDAwMn955XsyLF+vXHUwMDE5XFxcdTAwMWTDUuT1XHUwMDA2Jjo28s2Th92jTKV0obY297fJ6WbLO9Drr+d9/33y2z5f/PW47rmt/Xz1kGarXHUwMDE33lGzenFcdTAwMTJcdTAwMGV/yo/Pd9vtxkPsfV9+S+KSxrBSsHgotSSXhu4/RiNhXHUwMDEyaaRBgVx1MDAxYVxuYd+i0eTOnEyjiluodNpe+omk3o9IU1x1MDAwMzrGx+nExuiEXHUwMDAxNjZCXHUwMDEzmc6QbTDWjSDK+099S0uGXt1x637tcWi4+uDE/lkz8e5cdTAwMGI9/LxnJFx1MDAwZZ25UfPLXHUwMDE2uus1rzSM6cgvuLXXw3W/WIzPXHUwMDFkXHUwMDA1/HBcdTAwMTffsZ2dRfNcdTAwMWJtv+xcdTAwMDdu7XzQtsUnK5qciTZCXHUwMDEzYSPSmVnmV0/Oj2vlzMP+9l6tK+tHJrpkqWeZXHUwMDExyDLGNNpcdTAwMTFcZnHYsOVHmXE4xnnKXHUwMDE4jFx1MDAwYthcdTAwMDfm9lx1MDAwNHdsXHUwMDFhXHUwMDFjuKVcdTAwMTBIOSm7x5hcdTAwMDPKSGyyTeRQYsbzJngpXHUwMDFlg3nC0oUmtXR4LWqSXHUwMDEzKqibIONcdTAwMDH6W/DduoON6FwiMsXb++vTXFzwcHK2XHUwMDE1h9o/9Vx1MDAxY+VtXGJrKlx1MDAxZI6ux3CDs7PUZlx1MDAwNMLCMTgmXHUwMDE4XHUwMDFhUUYwMljKcVx0UiBSTZokXHUwMDFj++Rcbj9cdTAwMDQ7XWpKJ6CXOlJcdTAwMTJF7dRtjb9cdTAwMWVcdTAwMDUvN4JK8vGGLFx1MDAxZNhlsXFcdTAwMWRPWHOFgVx1MDAxM5394cp+b/eCXHUwMDA2N1t1cXpPj8J6JnNZ99OuvUZcdTAwMDFcblx1MDAxYdpw9DFCXHUwMDFiMVx1MDAwZVxcITHg11x1MDAwMiNdJZeKZj9Fe5F7XHUwMDEy47t/XHUwMDE2v/Fu/1D8isRAVzFcdTAwMTQhXHUwMDE5XHUwMDFmz7fgXHUwMDFifVx1MDAxNU2/c1jyXHUwMDAytl1RXHUwMDE5kTO79HZcdTAwMTW0XHUwMDE3J1x1MDAxOFx1MDAwN4HKudFcdTAwMTKNOGUjXHUwMDEwXHUwMDA2h0hcdTAwMDGaXHUwMDE5gtJrlkHwh0qvfZzLmFwiep5s4TtGw88oyOe/XHUwMDFkdO/Pe3dunlSOXHUwMDAyUz2JVP3dwlb0d7FHt1x1MDAxZkpccpmYRqdAUTw4mUPaN/d6XHUwMDA10T5Sgp1vfDvdr9Jet1dLu7RjbzuUY8dcdTAwMTNcdTAwMDFExaPCV1ttn1NcdTAwMTP0JahasFxmMT5B2pmy8bdcdTAwMTK/iLRzQVx1MDAxM/HLJEhOyVx1MDAxY88p71xcssd446RVydz1mt6J37qst1ZB2y2G0XegfFNcdTAwMTR3zSeEhuhaKMNAg/LlQsPfNGjPTEi2v4e4o61cdTAwMDai8YRfXHUwMDA0vclVS1x1MDAxOP9cdTAwMTjCXHUwMDE5mT1cdTAwMDHf2rlcdTAwMTf+dnBcdTAwMWJcXJU293dP+d7N8U1SIUhqxFx1MDAxNyiaXHUwMDEyXGb4lFbow1x1MDAwMMRcYnCFI21lndBcblx1MDAwNZGnPadhn2VRXHUwMDFlL877qeGLTE9cdTAwMTRfyYnSqFx1MDAwNLPj9+yqVbx42pG128JZVVx1MDAxNKNm7f6gsFxu4lx1MDAwYlQ7XHUwMDE0XHJcdTAwMWJojFx1MDAwZlxy3vN4bKhcdTAwMTDZwI1SiObUii9lXHUwMDFh8Dao+UXgy03yXHUwMDAzepuZxLBRzVx1MDAxZVx1MDAxNz5cXFb35bedyq6f9erB8VngPVx1MDAxY6Q+rYF65lx1MDAxMCptvVxmXGLsj9G0XHUwMDA2c9D14pQsXHUwMDE1pfFAIJ3ySzlGK4LJX1x1MDAwNcBCJeY1NKP2QVx1MDAwMZ1dfm9Ubkfz4lG1ZIr5Mjts1VtVs1x1MDAxMvKr7MNHNPpoXCK0UWN5XHLEsCRGM2LQbi1ZaPKh8quFXCJGxiOan1x1MDAxYr06Oatsi4Ml9sbsqYf7w1x1MDAxM9K4PLy99MONh43QXFxH+fOktFxcauRXceUwjNgwNiNcdTAwMDTFS41AlztSoCnGIaGGkbRnle1iIFxmt3+Z3IOEZP+A3Vx1MDAwNMJQmD33kMtcdTAwMTauvcr1TeusXrjNPmRcdTAwMGav+fHxKuivXHUwMDA1sTRacS2YfVx1MDAxNqTHQUxt9lx1MDAwMf1cdTAwMTSVii9cdTAwMDPij9VfyVx1MDAxOcM2/ir6K6eU+INcdTAwMTbGMJgjdVbee3wqXHUwMDExt37VaoS3hzdcdTAwMWI8W8Omp1xcf7VE4bOVSURb68BGrUNfXHUwMDE2gSphUcGXeibyXHT6y4kkiH4+T5nqXG7jXHUwMDE3ZGL2gffLis1cdTAwMWNld1ftzVMhzEGvfXfwKFx1MDAxYrVcdTAwMWJcdTAwMWFcdTAwMTb2V0F90Tw4VKBNsE/0uIxVwP2AMChbXHUwMDFiheBcdTAwMDK0walVX4bmXFxY+/CLgJcmi68xVGCwMrv3velcdTAwMTVOdffkXHUwMDAyrlx1MDAwZnfunlqd/cvk1Vx1MDAwManRXjSLqL3CYM8zNbR+91V7cUKWiFrN4s44ndqL5uHZ//xcIvCNXHUwMDE1q43AXHUwMDE3XHUwMDE1XHUwMDAwea7nSPxcdTAwMTa7VffxdrtcdTAwMDS3j3fu08XxiV9/zK6C9lwiT1x1MDAxZEJcdTAwMThcdTAwMDDKL1omOlx1MDAxZb4pZp8/UvtoWaU48Vx1MDAwYii9gPj+eZxvUq0+Jcm6S23yXGKHi8yM3MKW2cs8VkpcdTAwMTc7ep9lg9Pc0Vx1MDAwZZUrgVxcw1x1MDAxY3RcdTAwMGKEXG4lXHUwMDEwejCCXFxcdTAwMDKOXHUwMDEyNppcdTAwMDctUZ2TXHUwMDBi9lx1MDAxMTeuWFx1MDAxMLmxRN1cdTAwMDCqZFx1MDAxNJv9dYHA4lx1MDAwNYbLXHUwMDE2679cdTAwMDJ3Ql1P7mJcdTAwMGZuu7RLOlx1MDAwN/eiXFwq34WN2FQ6XHUwMDA0sbnrelx1MDAwNKNcdTAwMWFiOYPFllx1MDAwMsQqUN5YXG4wNC6DlVx1MDAwMGLoxFlXXHUwMDAyRI1m0jKAoVx1MDAxYlx1MDAxOK35J9NL/pN4XG7JZUmKISbto6qZaXr+UKrlNk0+XGLK7u5Fdvss4zG6XHUwMDEyNLXPXHUwMDBlKWFcdTAwMTjWac3VyMNxXCLt7MPxP1xmX5VKtkjLsHSSXHUwMDFiXHUwMDFhI6mdgDBcdTAwMTD5+PU0n09cIppcdTAwMDZcdTAwMTLRxUhERTKLXHUwMDA0XHUwMDAyRtrtNWZmUY5+bfaK1b2C2JK1m8JJt83yuVVgkVbELoanXHUwMDA2JzOiOZ1AI0BJsfGzkmy0XZ862VEmXHJX8bTxz8Mkllx1MDAwNiaxXHUwMDA1mVx1MDAwNIllhuhcdTAwMTjR/+NcdHpmJu2dbXSzl5fhrp/fyarr6Lq3ebGzXG5MwlDGYVLYXHUwMDFiRnuoKYwxSYKtz5bckPhjoHdl0qRcYmeMSZRcdTAwMTOpOPC5kqGrwiSRXHUwMDA2JolcdTAwMDWZlFxcs6BcZlx1MDAwN61cdTAwMDWfPf66XHUwMDBmz13aOFx1MDAwN5/Ip8fbsOh+O6+vRNZcdTAwMTZcZjhcdTAwMDLjL4M84dyIcVwiXHUwMDAxKENcdTAwMTkwW8r9z1x1MDAxMkmjs/uUzS8+n0gyXHJEkouau+RtXHUwMDA3XGLaXGKGnTk7k85uy3tQb3qV7Y2n3YjSXG5/MKvBJC5cdTAwMWRFtX28rFx1MDAxNWej1T9cdTAwMDRcdTAwMWPWL4RcIooyPeVcdTAwMTHexzOJc6FcdTAwMTVTn7BR3OdcdTAwMTNcdNJAJFiQSDzR22HQIKyhmWNKOi+b/MmFyLiFfWRJJLdcdTAwMWW71XBcdTAwMTWIJFx1MDAxNbo3YiTBXHUwMDE5WFx1MDAwYi1GyjhwSuKcUlx1MDAxMFx1MDAxY12VgOQyjqWIRGYhkt1yz65cbvhcdTAwMTlnJJVcdTAwMDZcIqlcdTAwMDWJZJL34Fx1MDAxNVx1MDAxYeNaXHUwMDEy31XyLVwi8XLQpHukWij1NiumSup1fytpOUuqiKQpdZRdUkw44lxcqdFcdTAwMTlJONTuzStcZmg2bUnLx6dcdTAwMWJcZlx1MDAxMcauqvlcdTAwMTmJxNNAJL4gkZLTdlx1MDAxMuyihDm2XG7ptIS/V2td3T1G3V3voFx1MDAwYse3Okqg0WLbslx1MDAxNd2w4r3zdlLaIVx1MDAwNqdcdTAwMTljjJB0JDrCOdlcdTAwMTFcdTAwMDKhi7GRYYpM2XyVgyhcdTAwMTXUdFxuTdyYTc6U9pbcSPGu+1a+XHUwMDFjWIGd0pZjZzZodqJ//Ttcclx1MDAxY/3RlKlMfe7QXHRUTa5BXHUwMDEz9lx1MDAwYlx1MDAwM0Do2esgplx1MDAwZnA6d1CU4IDk6Fx0cUJDYzi8fkhcYuZQTe3G2VxiMymSXHUwMDBi2Fx1MDAxNyYqY1x1MDAwZfpVQFx1MDAxOVDcME5iNVx1MDAxOINcdTAwMWQ+ibGb4jNb1Gp3XHUwMDAxZWPfi1x1MDAwMFx1MDAxYVBr9Fxc+/ksOlx1MDAxMVwi1WQ8mzJcdTAwMDfVwshtR5t+UPSD8vpQXHUwMDA1xsu3fGRnkPw+OVx1MDAwYlx1MDAxZNtK4lx1MDAxMG1QSXH0XHUwMDAwhUzSwY5Ltlx1MDAwYtymXHUwMDFkYUdcdKLQunGFWGaoxi9nXGaqPLyg+Hajpm9cdTAwMTVcdTAwMTdrVIZYzFx1MDAxOIyUXHUwMDE5XG68xMbJsUZRh1GluMBwXHUwMDA1zyGcwVijam5cdTAwMThtNdA0Rtj5J1xyP4hGO7nfm1x1MDAxYpbYXHUwMDE1z1x1MDAxZJNcdLyp+LFRXHUwMDA1aNp3XHUwMDFjluzBb2tcdTAwMDOW9P94/f2v3yeenVxmYvszXHUwMDBl38H7fYn/f26bkVx1MDAxOPditCdcdTAwMTiXc+z+ynVR+81vN6Ql/bPcXHUwMDE27+RPL5LyRynRLiPAkYaAfC4vieVl7PVcdTAwMWGYY5fzckSixDebkjlaVLtgtlx1MDAwNKyiknE6X1n34i4jXVx1MDAxYtss5zLyXHUwMDBmPkaE6bBcdTAwMTmvbVnMZ0Dy5pdGg/0yhtlr3adcdTAwMGZxOrmqwG4wK5GLz1x1MDAxYt5cdTAwMGZzVWpHKk5sZa4ynCfv0bMwVzGmt3swo1ZcdTAwMTiceDSZQF1cdTAwMDNcdTAwMGVcdTAwMTdcdTAwMTLDfi2pxKhg/NuXXHUwMDA04OVcdTAwMTBflPuRNmNhrs1oM6ZL/vCMjlx1MDAwZVx1MDAwMnWMK+A4hDqW9Xid0rmDc5/hKLtcbm9cdTAwMDAnw8VsxvTd2WKNsjWxXFzbXHUwMDFkXHUwMDE57JdcZlHB2ViTKDpcdTAwMTFA8ae2JsNcdTAwMTiQK20yXHUwMDEyXHUwMDExbH8yY+B9L4+RuMaXXHQjQZHZM1x1MDAxObXC3XaVX3tX8p7C42XuW/787C7dskWtdzOGXHUwMDExm1BcdTAwMTdGjqyNXHUwMDA0YVVNc1uCi1xu9/6qJSdsLz8xXHKo3u/LYaaZi4+srkVlofEt8j/aXFzk3Duvllx1MDAwZW/xoylcdTAwMGJaiymlTVx1MDAwNsNcdTAwMTJcdTAwMTLfjuvNXCLBqSOcVpIyW9XE7ZbwXHUwMDA02Ti8f1x1MDAwZqC5QFVcdTAwMTRMKrvNLUwphl+UpoY7dr9jw6xcIlxuPcFbyH5cdTAwMGLt14xxobiKnfLDW6CEXGJit8H4XHUwMDE0b7Ew1Wb0XHUwMDE207V+LZ7CwFHhxm6/ZPc+l3w8WWB3PVWKgTJcdTAwMDKHj6nFjMX0pVx1MDAxZSNuXHUwMDA3m4KjiZG60XbhsFx1MDAxZW+UcLTRXHUwMDAynaxcdTAwMTREYYipV9pbZJJcdTAwMTBsf8awm2Qtvry8/7rbbOYjRNzrcCCW/eKLQlx1MDAwZm5yvet7XHUwMDBmm5NJZnn25aU7rep4/SVL3798/z/RhT5iIn0=  901245673Input()Switch()Label() <p>There are three types of built-in widget in the sketch, namely (Input, Label, and Switch). Rather than manage these as a single collection of widgets, we can arrange them into logical groups with compound widgets. This will make our app easier to work with.</p> Try in Textual-web <p></p>"},{"location":"guide/widgets/#identifying-components","title":"Identifying components","text":"<p>We will divide this UI into three compound widgets:</p> <ol> <li><code>BitSwitch</code> for a switch with a numeric label.</li> <li><code>ByteInput</code> which contains 8 <code>BitSwitch</code> widgets.</li> <li><code>ByteEditor</code> which contains a <code>ByteInput</code> and an Input to show the decimal value.</li> </ol> <p>This is not the only way we could implement our design with compound widgets. So why these three widgets? As a rule of thumb, a widget should handle one piece of data, which is why we have an independent widget for a bit, a byte, and the decimal value.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVdaVNcdTAwMWJLsv3uX+HwfJlcdTAwMTdx6VtZlbXdiFx1MDAxN1x1MDAxMyDAYEBcYiPWXHUwMDE3XHUwMDEzjpbUWkBcdTAwMWLqXHUwMDE2ICb831+WzKDW0kJcdTAwMGLybVx1MDAwMSYw9KKurjqZeTIrK+s/nz5//lx1MDAxMvXawZe/Pn9cdFx1MDAxZYt+vVbq+Fx1MDAwZl/+cMfvg05YazXpXHUwMDE07/9cdTAwMWS2up1i/8pqXHUwMDE0tcO//vyz4Xdug6hd94uBd19cdTAwMGK7fj2MuqVayyu2XHUwMDFhf9aioFx1MDAxMf7L/cz6jeB/261GKep4g4dsXHUwMDA0pVrU6vx6VlBcdTAwMGZcdTAwMWFBM1xu6dP/j/7+/Pk//Z+x1nWCYuQ3K/Wgf0P/VKyBio9cdTAwMWXNtpr9xlx1MDAwMkMtwGqAlytq4TY9L1xuSnS6TG1cdTAwMGVcdTAwMDZn3KEvT9XLm28n33vfOrlCrprJt2VcdTAwMTFLg8eWa/X6adSr95tV7LTCcKPqR8Xq4Iow6rRug4taKaq6XHUwMDE2jFx1MDAxY3+5N2xRT1xm7uq0upVqM1xiw6F7Wm2/WIt67iXZy8FfXHUwMDFk8dfnwZFH+ktZjzPNJVx1MDAwN8tBoVQvZ93tdNBDg6BcdTAwMTQ3hiGzI83KtOo0XHUwMDFh1Kx/sP7XoGFcdTAwMDW/eFuh1jVLg2uwqIKyXHUwMDFjXFzz8PyyXHUwMDEywWOCc8HBXGJgTL5cXFFccmqVauRcdTAwMWGiwZPGcC0541x1MDAxMjRcdTAwMGXGLlxm+oNcdTAwMDKSziM1cXC3e357v9RcdTAwMDfIv+Nd1iw9d1mzW69cdTAwMGaa7E7sxEA1uKfbLvm/xlx1MDAxZZTWRiDn2sKgXHL1WvN29OPqreLtXHUwMDAwLv2jP/9YXHUwMDAwp1x1MDAwNEZMXHUwMDA0KpeaXHUwMDAzXHUwMDA3XHUwMDEwM1x1MDAwM/VwL7NxcJcrlc+yqnfUqu9njoVcXFx1MDAxY6j8jYBKw/5cdTAwMWFStWeVRNRouZExXHUwMDAw9G9X6Fx1MDAxOSOBsGxBW7RmXHUwMDE5pEZcdTAwMWS/XHUwMDE5tv1cdTAwMGVcdTAwMDFhXHUwMDEyWtFTglx1MDAwYlx1MDAxNExcdTAwMDLAXHUwMDA0sFxuxTxcdTAwMDPMXCIqISRcdTAwMTiuxsDKjdBKk5Z5Z2DVXHUwMDEyXHUwMDEysVxuKNFqasrMWL3LXHUwMDE2dq5cdTAwMThuPcHm4VZWl0s3XHUwMDE3359cdTAwMTKwOoK3v1x1MDAxMaWSXHUwMDE5bYVS1oBRYyils6TMNKCyTOtcdTAwMTWiVHhcZpQkUaGnWW3GYcqNp1x1MDAxNFx1MDAxM2hcdTAwMTTjSlx1MDAxMKTHYGolkKDhOqrUoF6vtcOJXHUwMDE4VUYkYdRcdTAwMDJaxpTUM0P01lx1MDAwNPzkoFx1MDAwMPmbrd7RiVx0ermjy5NFIPpWXHUwMDE2/3WIaushXHUwMDExXHUwMDFjXHUwMDFhc6GsiGnK/u1cdTAwMWE9lFx1MDAxNmjotbJWxPpqXHUwMDExk1/2JXGLcXiCoDZwLq1cInvOkSz3XHUwMDA0m889qVx1MDAxNFpSoYxcdTAwMGLBUY/iXHUwMDEzJFx1MDAxMVx1MDAwMuBkXHUwMDAy31x1MDAxNUC10ElcdTAwMDBcdTAwMDVcdTAwMDKv5ZbPXHUwMDBl0KenzUaNXHUwMDFkXHUwMDFlbaszWVx1MDAwNX9v92t19yzdXHUwMDAwXHUwMDA1pjwynMqANcYy4GJcdTAwMDSiwuNkPi0zilx1MDAwYkviuiREXHUwMDBiRDlXXHUwMDA1UU28lIGAd4ZQm2jmOelcdTAwMTR6aTE7QkWb1W52oqPsTvXmQF1cdTAwMWbnXHUwMDFizcJWylx1MDAxMSrQXHUwMDEzXG40k2RnLfkvOIJQwlx1MDAwNYGT/Fx1MDAxOYtkXcUo/5hcdTAwMGahwFx1MDAwYsaoVSGUXHUwMDEzOrVUxM7WXHUwMDBmoq84TixcdKRgiXxLLYWcXHUwMDE5pfXNzon6epCv6G+t81x1MDAwNopM/qmeSzdKqas9TV6xXHUwMDAy8kaI5ckhkHJpyLcnT8pcdTAwMWHpPEi1XHUwMDE0Rsvl8iSATkBkrM//a8aJf1x1MDAxMvNcItdtXHUwMDBlXHUwMDA0/lx1MDAxN1x1MDAwYlx1MDAwMzSI5yM/k4H5cs/g7lx1MDAxOJqi4HHApGNDn+/ulvf38o9cdTAwMGbly1x1MDAxM7v1vWefXHUwMDBluzdfXq77+fzbb0P9UDtjgJc2XHTvhlx1MDAwNpuTzzl7mGDyO0+Ge9UvVrudIPWAV+LtXHUwMDAwP9X5ilx1MDAxMZaBtzVcdTAwMGV74thcdTAwMTaRpzRcYjBcdTAwMTjrVjM6rT31jTtcdTAwMWI6uus3avXe0HD1sUn989nGuy9cZuh5fcVrhq7crNcqzb52XHLKw5COakW//nK6USuV4kq+SFx1MDAwZvfpXHUwMDEzO/uz6OZWp1apNf16ftC2JazKlLCxZuQsky2dnfucibNN0auD3GiI7c7DztNcdTAwMDO/a6ZdzFx1MDAwNFwiiVx1MDAxOSlsziwoXHUwMDE0w6E4XHUwMDE0xrMo+yFcdTAwMDUgeK8uXHUwMDEyh8LTTFklXGaToKScXHUwMDE0i+PcU9pKbUnyXHJcdTAwMDNmx2NxKFx1MDAxNbXXmnnEcCHrk1x1MDAwZVrEWWL4XHUwMDAzhJRcdTAwMDaQ3P6ZXHUwMDAxfHC2KcOL6Nthpn2OXHUwMDA15V/dV6r3f/+8x1xmIFbSM8BcdTAwMTVcdTAwMTB7N9rYYVuByDyJZCVcYlrWWFx1MDAwMtdS7FxiWZFJPclQeIzcXFxcdTAwMTIoJS11PUxcdTAwMDAweORBanJ6ibxcdTAwMGIjzSh+OWlcdTAwMWOpXHUwMDE5zuNhrjV8XHUwMDEzWVx1MDAwZVjqSnLI2OzwbTX09fZ2ttjL3NbuNkVcdTAwMThcXFx1MDAxZUo/7fpXcu2Ri0lcdTAwMWVcdTAwMWYpNOByXHUwMDFjuoygXHUwMDA0XHUwMDFjOCNcdTAwMDeUL1x1MDAxNcH7XHUwMDFkXG6YMcmN4UZ/XHUwMDEwXHUwMDA0y+T5PMWJunJtZvdLg+2Tk30ondejnVx1MDAxZvLxurXFi9dmXHUwMDFkXHUwMDE0sETjcSFQgVx1MDAxMJprMCMoXHUwMDA2wo22StF1xDFSq37pXGZcdTAwMTNcdTAwMTaIQ3xcdTAwMTD0qsTgtJFSxVxy6WvQLdT3KmdcdTAwMDeb96fFQGm1n+ncdjN3aVe+XHUwMDAwzCNqa1x1MDAxOTjSKKRcdTAwMWVcdTAwMGVOo7BcdTAwMWVjKDRKXHUwMDAxXHUwMDFh5OqczDdSvmQwrTBcXHxcdTAwMTD4XG6ZXHUwMDE4XHUwMDE0JFx1MDAxMWdO+9qZXHUwMDAxvHt4e3pZzp0/tJqN/ePK9SPb7lx1MDAxZa+D7nUgNlx1MDAwNFFitprQg6PK17lwmoNVTFxuS65cdTAwMWMug+J/XHUwMDE4ZVx1MDAwMjshfv1cdTAwMTbql8yHm1x1MDAwMjRcdTAwMWaE/VxuTI4+SO2yo+RcdTAwMWNJa2fnu5eH29vlXHUwMDAzfVx1MDAxNlRcIlZu4o/N9CtgRbzBcMVcdTAwMTjXqK1cdTAwMWVGLpFfXHUwMDEwXHUwMDFjmJFutmOFXHRcdTAwMTZvo35dhlx1MDAxMCNcdTAwMDb/QbQvxnyVUfKgLLWC4eza965Z7+BBuVuA4kE2f3GQffpRTprZTpf2VS7zhli+1eSxas3GMcystYJ4XHUwMDA0MSrUy8VcdTAwMWVWqX1dviZIXHUwMDBlXHUwMDFmxHNDlpzdpvv5fHaOXHUwMDE5xd5pMTRFznd2s51K5nLv5OvGblLKcGq0L+fWI8IghZtHUVxc4Fxidok5SKZcdTAwMTDRzX2DhKWYw+/gv1x1MDAwMP08zY+igE1y7EGgy5+Nx9deQzDkq6adLVx1MDAxN24u9+5cdTAwMWHb19nKg9pPQdL7bCgmssQ5aWF0UbIxXHUwMDEwI1x1MDAxZFdSo1Nvy2VvrFL/KlwiOvTNPlxi+0WTXHUwMDFj+yW/jaivkLOjt3rQyYeNw/bOWXi3u5FcdTAwMGZt8VtcdTAwMTZTr3+N9lxiXHUwMDEw5LZcdFx1MDAxN26B8ehcdTAwMDO4XHUwMDE4XGZotDruLKRU+yrSOZqA9EHUr9TJXHUwMDA0wjDUXHUwMDEwp1Kv4fe+yO5OK7WwsbeFm9cnd5FfbZXXQvtcdTAwMWFDXHUwMDA0V1x1MDAxYmktM1x1MDAxNuOZXHUwMDE4LyBcdTAwMTY0NuS/uUVYfLnMpJXyX+E+wX6U2K9MzpyHflx1MDAxN7mMlpnxe+37aifb/da5rCt21oyAIT9Ku/5Fhlx1MDAxZVfoXCKmjjnwUeZgPcFcdNZklC1PfeqDXHUwMDEyaDR5mlx1MDAxZlx1MDAwNL5KJUZcdTAwMWaASa5cdTAwMTXOXHUwMDEzfrjZle3vR+qSseuef3WV2z82lfN1UL9cdTAwMGXC5KGRLTJWS8PNuPrlVmtcIsdcdTAwMDC4ZHL9SpWvZkyTz/1RtK/iidqXM6Vccqp4mspr8O12evuHXHUwMDE13Fx1MDAxMVet4F5vZXgzb3qp176qr32ZtVx1MDAxY7hcdTAwMTAxr/1F+2olhVx1MDAxNkwxxLRcdTAwMDd/wdL7WMnYXHUwMDA3XHSfUZcl6l9LbJBjXFzdvFx1MDAwNuDHvdtKeHPh8+vHXFw1v3lzXHUwMDFmXT9l10L/9leBgjbKXG5Ffc/lOIpcdTAwMTGFW+5O/2C5OYzVTr4xg1x1MDAwMqx8P5mTSan1XHUwMDAwidDlXGbBXHUwMDE5ojnm3W7bX4PM1VnQ/V45yD49Ni/CcmEt5o0lck9cdTAwMGLnsVx1MDAxMWqJXHUwMDAxj0RcdTAwMWaAk/7lXGKSVLNEmMJcdTAwMWRcdTAwMDRcblx1MDAxZlx1MDAxN0RubLRcdTAwMDdQZaPYXHUwMDA06Vx1MDAwMtBcdTAwMTg3mqvMrid/NVx1MDAwNpHFsutjXHUwMDFm8Ep2/VDPXHKS63HowlmT66NWOymzfuhcdTAwMDVG0+jZ9Cz6JFHSyYtbXHUwMDA10VFrxFx1MDAxY9lvW6J9b3PhUfugoDG30WlcdTAwMWSZncw6SFx1MDAxMlx1MDAxYfQss8LNYVx1MDAwYsVwNInTZVx1MDAxOXEpXWcoMlx1MDAxMlOWYS8jSpNoy7gkUWPcYtx5WMq6XGJcdTAwMTKkQZBgMUFcdTAwMDKZKEnkyoJi8VmtV1NB7ptf4ewqd1x1MDAwMUenbV3M5i+KrcZaXGJcdTAwMTKxXHUwMDE0cNEnRiBlio+LkbHOPLtcXDzF/1aLhIKcXHUwMDEyXHUwMDFiX4L7flx1MDAwNImnQZD4goKkk1x1MDAxN1xuK7DkW1x1MDAwM5+d3PXC6sPj7db53fX33Yvz5tXF1d7xWqSlXGJcdTAwMDaelsI4v1x1MDAwNInLjYpcdTAwMTLJmZGMPG9cdTAwMTJcdTAwMDNjkr2SpSRpklx1MDAxYjIuSeSSXHUwMDE4l1x1MDAxZP5cdTAwMWW5XHUwMDFkpkGScEFJSk4vUORcdTAwMGVYXHUwMDA1c1QuMVdcdTAwMDf4taDOiz/OXHUwMDFh55nocKdcXM111kGQOCrPOs+USVdcdTAwMDVCglx1MDAxYZMkblx1MDAwMazi2lx1MDAxNV5YlZs0kyhx5Vx1MDAxMu90LMfs/UiSTIMkyUXJnUmSJFJ+Uiszz1wiocvDo4ctc7b740T29i5yZYjqtbVcdTAwMTAlsjVcdTAwMWVcdTAwMTlcdTAwMWNcdTAwMDZE4MhcdTAwMWRcdTAwMDJtxkTJoGJcdTAwMDY12Wlr2GrcpFx1MDAxOa1cdTAwMTJcdTAwMTlPRoZxrnDYusiSSoMsqVx1MDAwNWVcdJP5XHUwMDFk00R7mJhjyX6mlM1sh+a8cZMrXHUwMDA03ZNWbvPworJcdTAwMTayxJXHXFzNLGt5v0TTqCwxz0pE1NZVfF2VKLFcdTAwMTlFXHRcdTAwMTmq91x1MDAxObzTaVx1MDAxMCW9mChxlrz+RLmiySDZ7GZcdH50wzB6aLDj8z14ZFmf5UpJ1S9SJUpCcY9cdTAwMTO3XHUwMDAzMJqTXHUwMDBlMSPRO2Y90iuuQFx1MDAxZFx00rRVKKuPOmhUXHUwMDFhLYjfXHUwMDEzdEAyw/DbJEmkQZLEXHUwMDEyxWRscja2XHUwMDE0ynKNZnbD1Ny/vTu4lFulzrm82snrS773mH/jXHUwMDE5/ZJcdTAwMWZWg1x1MDAwNFFiXHUwMDBiiZJcdTAwMDTjITdMMlx1MDAxN1x1MDAwZZdsJOrAhMcsXG6ppNJkqKfU4Sha7nN/qihNndN3XHUwMDE1pN1cdTAwMDNcdTAwMTQ3rmrNpNJlWnmayKawQjBqT9xxe/amXHUwMDE4J1x1MDAwZahQvZ3dej4xUrLsOdRkbOPh4TJ7XFyyt5uV3Yub3o5ccl/ebFxihn6n03pIYc0ySF6PS+4zMVx1MDAwMFx1MDAwMDV7XHUwMDE0+yravc0yntssfisp2/leOdkpJk1cdTAwMDelR1x1MDAwNJRcdTAwMTSeXHUwMDA1REt9bp1cdTAwMWIzJFx1MDAwMsJcdTAwMTJt45qTOpBcdTAwMTIlT15Rs6xcdTAwMDRALD9jSt0yJVG4+mlvZ1HWXHUwMDA345Ps1exF0bZq0elDjVx1MDAxOMw//2ey5VqsOtqilivenKnC+6tjJ0hvPFx1MDAwM2tsa1x1MDAwMtMvkzBHStr0oU5pSppC6TF62X6VXHUwMDEylzI5Yr9cXD14QSBcdTAwMTP0rfiUelx1MDAxMEvbL+Zxi1x1MDAxMo0w9CBcdTAwMTNPm1x1MDAxZlxis/Ikama50UowXHUwMDFlr/k6qMVJhpjFd5RIZVHCMPI70VatWao1K1+Gsoqet4XZn8Eg9CW22O1rbk+7jG3JXHUwMDE5aMuJdsjYRVx1MDAxNb9Nl1x1MDAxOI+4LVxyN/F+RaOtn89cdTAwMGbSloJm6fVcdTAwMTZNZ2lDLVx1MDAwMueZ0oOk1Vx1MDAxY21sqeVLk8Ajb11Zolx1MDAxY9KQbVx1MDAwMDueS1X3wyjTajRqXHUwMDEx9XyuVWtGoz3c78pNJ+LVwFx1MDAxZlNcdTAwMWH0UvFzo7qg7T5xWIlcdTAwMGZ++zyQlf5cdTAwMWYvv//7j4lXbyRj2H2No3fwgZ/i/y9W2FFPKSymjVuKPUf91Ivi9cHTRifs7FfK/KZ519RVm5RcdTAwMWSeXHUwMDFlJmKkJ1x1MDAxNaGNSctcdTAwMTSPr2v5xUS0p6VcdTAwMDRgVkvNpuSkXHUwMDAwKUO/sLguI5XpKdRu6p5+XGJpJySqXHUwMDE4XCLj5NhKrV1cdTAwMDaeVLFuet69QjO0Kp4/uUqeclx1MDAxNvpPcHxRr1x1MDAwNyivRKF1nrHifM24uJ1qzSWNylx1MDAxY8vbj/Ld7t2PTDPfXHQvXHUwMDFl7cVcdTAwMTM8QEGnXlx1MDAwMiR6iEBcdTAwMDZbWaflcZiLS4PkXHUwMDAxXHUwMDEy+pnb1YdjMlx1MDAxN19WXHUwMDAyJm4sNKGGsHSRUivecCZ8fUC+JFx1MDAxOe9FwX6z3Y1SQsZjzVmMjHNIXFzexFx00W5XojnSWKZcdTAwMGZ1Ssk4MOOJX8XXmDDkTVx1MDAwZlenkFp5XHUwMDE2hVx1MDAwMSO1ZdM2XHRbVnyJqlCPc86MsYbHp/hfhNlcdTAwMTJ5c3tHWGO4dcHkMdnWxEJcdTAwMTU19H1Q8en2IEZ8N4j5up3C0FxyoUFr9ThcdTAwMTfXnuHSXG43TSU1qlx1MDAxNyY4J1x1MDAxOZ/O0obdXHUwMDAz0vi/Qn9cdTAwMTJVrNrugIuvNfVOXHUwMDA0rPvaXHUwMDE4w+qbXHUwMDEyb56Y6kBcdTAwMWTNNeBcdTAwMWMxhLMrv36+fdPbPtBfe49cdTAwMGa7ufvd3lsvKp7GOlx1MDAxNtySS3jo0qxcdFmCSzWyuSFnrqKv1lx1MDAwMiXTgvh3Mu2QRYustFx1MDAwNPFcdTAwMTbcI34vgLqd+t5MmGJcdTAwMTJgPCW0KzFM9IjJ8Z04ibZcdTAwMGJt4uuaVslJXG7lw9ZtXHUwMDA3mtunnfLpcclcdTAwMDS3N42t9Vwi3skxcCBcdTAwMTJKqnCeXHUwMDE4+OZjq7jTuS40N+Do/vvtzs2VLrdTL1x1MDAwMZxxr79lXHUwMDAwMuVKQlxme56ESE/2tylSbqNcIm2SXHUwMDBim/CC8UWwXHUwMDA08eaTplUnXHUwMDEwb7fRXHUwMDE1zLVpwHvB+PK8e6e/jXN6iPdLe1x1MDAxNmPekFxck95tXHUwMDFlIIycI+11+linlHiTufBcdTAwMTi3RJtcdTAwMTVze9uO7NiHzPFcdTAwMDdcdTAwMGJCMUcweHJCxNLia0hRKCPIXFxcdTAwMTJNIco2gXlL44JLxlx1MDAwNbpcdTAwMTUqsmJcdTAwMTOkW1omh2pcdTAwMDGvM/Weblx1MDAxMoapN2Ouklx1MDAxNtFu5crzgIs7j1Nd8MiddDXPXHUwMDA1uVOAOFx1MDAxZXaeiX5PJ2tD9Jsxji40LJjWNGh2kFx1MDAxZftOXGJ4MnDd1zhkk1x1MDAxOPin5yd88dvt04iA9tL/XHUwMDA04VrpWV1cdTAwMGZe88t9LXjYmryjm9vU7dNzhzrFXHUwMDEz9Fx1MDAxN3D//PTz/1x1MDAwMcOHY8gifQ==  901245673BitSwitch()ByteInput()ByteEditor() <p>In the following code we will implement the three widgets. There will be no functionality yet, but it should look like our design.</p> byte01.pyOutput byte01.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label, Switch\n\n\nclass BitSwitch(Widget):\n    \"\"\"A Switch with a numeric label above it.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    BitSwitch {\n        layout: vertical;\n        width: auto;\n        height: auto;\n    }\n    BitSwitch &gt; Label {\n        text-align: center;\n        width: 100%;\n    }\n    \"\"\"\n\n    def __init__(self, bit: int) -&gt; None:\n        self.bit = bit\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(str(self.bit))\n        yield Switch()\n\n\nclass ByteInput(Widget):\n    \"\"\"A compound widget with 8 switches.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    ByteInput {\n        width: auto;\n        height: auto;\n        border: blank;\n        layout: horizontal;\n    }\n    ByteInput:focus-within {\n        border: heavy $secondary;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for bit in reversed(range(8)):\n            yield BitSwitch(bit)\n\n\nclass ByteEditor(Widget):\n    DEFAULT_CSS = \"\"\"\n    ByteEditor &gt; Container {\n        height: 1fr;\n        align: center middle;\n    }\n    ByteEditor &gt; Container.top {\n        background: $boost;\n    }\n    ByteEditor Input {\n        width: 16;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Container(classes=\"top\"):\n            yield Input(placeholder=\"byte\")\n        with Container():\n            yield ByteInput()\n\n\nclass ByteInputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ByteEditor()\n\n\nif __name__ == \"__main__\":\n    app = ByteInputApp()\n    app.run()\n</code></pre> <p> ByteInputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258abyte\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0\u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the <code>compose()</code> methods of each of the widgets.</p> <ul> <li> <p>The <code>BitSwitch</code> yields a Label which displays the bit number, and a Switch control for that bit. The default CSS for <code>BitSwitch</code> aligns its children vertically, and sets the label's text-align to center.</p> </li> <li> <p>The <code>ByteInput</code> yields 8 <code>BitSwitch</code> widgets and arranges them horizontally. It also adds a <code>focus-within</code> style in its CSS to draw an accent border when any of the switches are focused.</p> </li> <li> <p>The <code>ByteEditor</code> yields a <code>ByteInput</code> and an <code>Input</code> control. The default CSS stacks the two controls on top of each other to divide the screen into two parts.</p> </li> </ul> <p>With these three widgets, the DOM for our app will look like this:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1daVPjSNL+3r+CYL/0Row1WXfVREy8wdnc0OZo4O1ccsLYXHUwMDAyXHUwMDBijG1kmWtj/vtmXHUwMDE5XHUwMDFhSdZh2fiiPUPTLclyuiqfzCezslL//bKwsFx1MDAxODy33cW/XHUwMDE2XHUwMDE23adqpeHV/Mrj4lx1MDAxZvb4g+t3vFZcdTAwMTNP0d6/O62uX+1dWVx1MDAwZoJ2568//7yr+Ldu0G5Uqq7z4HW6lUYn6Na8llNt3f3pXHUwMDA17l3n/+yfe5U79+92665cdTAwMTb4TvghJbfmXHUwMDA1Lf/1s9yGe+c2g1x1MDAwZd79//HfXHUwMDBiXHUwMDBi/+39XHUwMDE5kc53q0Gled1we2/onVxuXHUwMDA1VET0XHUwMDFm3Ws1e8JSXHUwMDBlVFx1MDAxOcPDXHUwMDBivM4qflxc4Nbw7Fx1MDAxNYrshmfsocUr9nK7d9N9rJtm6eB43Vx1MDAwZs5L5+vhp155jcZh8Nx4XHUwMDFkiUq13vUjMnVcdTAwMDK/dev+8GpB/dfARY6/v6/TwkFcYt/lt7rX9abbsd+fvFx1MDAxZm21K1UveLbHXHUwMDAw3o++XHUwMDBlwl9cdTAwMGLhkSd7hWFcdTAwMGVQQY0xRIDR6v1s7/1cblx1MDAxY6GZltQoKpRhfXKttFx1MDAxYThcdTAwMTMo17/EXHUwMDE1q1V5KNllpXp7jeI1a+/XXHUwMDA0fqXZaVd8nK/wuse3b0xEONB117uuXHUwMDA3eFCa8PPc3rhcdTAwMTOliFx1MDAwNk01fz9jP6W9WeupwH+iI9OsvY1Ms9tohILZXHUwMDEza/1qXHUwMDEzVZ2Y+lx1MDAwNO5TKG1ksluVdndcdTAwMWJMUN7erizz48btaaVZXny/7p8/0m/7+ubO3vdye31cdTAwMWb2dlx1MDAxZb7V+MWe/H7sPsU/5dfnV3y/9Vj0vjv+wVx1MDAwZn61U/7O+ePekeeXvNXvlWL3fftbOIDddq3yqutEKlxyXFyDUSZcdTAwMDKXhte87Vx1MDAxZttGq3pcdTAwMWLC40tE4Fx1MDAwNCxj41x1MDAxYUGkzEakXHUwMDAwbrSRQlx1MDAxNkZk+iSNhEgyNURSMI6IIDJcdTAwMDKC3lxyXGadXHUwMDE2JClNQpKKXHUwMDA0JKlihlx1MDAxMEXk2CCZoYVKXHUwMDBiqUBLoYbQwnC2W83g0Hvp2XaIXHUwMDFkXa/ceY3n2IT11Fx1MDAxM1x1MDAwN2j5OXDXev7m67+jI9lx8ZPtrYiOvWep4V1bNV6s4ndx/ZiGXHUwMDA3XHUwMDFlurD3XHUwMDBi7rxaLeqUqihIXHUwMDA17+lvXHUwMDE2cSYt37v2mpXGUZqcucB7XHUwMDA1flxu8lxiRIal31x1MDAxOVx1MDAxMqI1IyxyxSDs5du4ecWe0Fx1MDAwZYBUgilKXHUwMDE1NSBj2KNcXDqCXHUwMDE4oVx1MDAwNbUjolQ2+KD3XHUwMDFhXHUwMDFkfEY5QDgxXHUwMDA0lOT4k0SiXHUwMDEwXHUwMDBl2lx1MDAwN4WAXHUwMDEwXHUwMDFhgCnSXHUwMDBmTHtKgpHDuMrQqfxSXHUwMDE4+nbknynDtVx1MDAxM1T8YNlr1rzmdVxcsDfOV1x1MDAwNCf2O1fa1q04hlx0nFPKcUg0ZyxyxVWr2rXfo1x1MDAwNFx1MDAwZcd5XHUwMDE30nAj0c1IymTiy7vN2mChLq7u/aP9l2Zru37hi43qQ1N8f0xcbmVcdTAwMWOCdp5cdTAwMWHG0KArSXm6UIJcdTAwMDHHadRIzigorlx1MDAxMjI1Kp1gpXV351x1MDAwNTj2XHUwMDA3La9cdTAwMTn0j3FvMJcs8utupdZ/XHUwMDE2v1P0XFy/iWjbO8apUvi3hVx1MDAxMEG9f7z//T9/pF5dylJs+0qodHi3L9HfWbYtl+tTKmX/4Xf7XHUwMDA2SC6oXHUwMDA2XHUwMDE1erxB9i1/jmdi39Qg86aII1x1MDAwNdVUcEMojm+c7DNcdTAwMDKOMlx1MDAwMq1cdTAwMWLHWUDjJ/rkXHUwMDFhn3UjOiQ171x1MDAwNi1cIv4vXHUwMDBihryTcsZDXHUwMDFmO1x1MDAxYrJ/6W8/updcdTAwMWKb9eP6snfmnrfXl1fOZk32L7rPOytwt/tcdTAwMWPcd8pAXHUwMDFloHJTL81zXHUwMDEwMZI/XHUwMDE4KYigVOssqGtmJEFcdTAwMTdQnMmkz/6cI13mI11MXHLpTCWRLpNIXHUwMDA3gaKCoWND+qRjiEi4MyCGWPnF7L/+bNpcdTAwMTNV9NdcdTAwMWS38/fPxaDV/rn4s5lcdTAwMWVZXGJcdTAwMWW703vg0HCvgtHjilx1MDAwMW6rP64oIPtcdTAwMDc8slxmeVg/TFx0Rr+AlEdcdTAwMTfH6crhnqqdbHzb89ae2lxcb7i+u+TNe/6NXHUwMDEx9MlcdTAwMThYIf9AXHUwMDAyQkGyXHUwMDE4UjlnjqaMIDUhXHUwMDFjgOpMoH442jeQXHUwMDA0qkpE+5Io4JJFvtdsXFzyzfpccl8+u1/deKhcXH6/a+12N48vr4q6uJuLk12x3azed4+f6jdUXHUwMDFk3d22XHUwMDFlxuA6XHUwMDBmbsr153OvfHrbeVhT61stf3XDXHUwMDFiw323r6ube+tcdTAwMGZPasv9UTnaa+/drWP8MS6XzFx1MDAxNGOhXk3KJUtNM7HOuOGaUiiO9fTpn6lPLoB1XHS5WEd6zlwiWFdcdTAwMTPDuklL7CV8sjXBlKE846Pf8+OUbcJss9nuXHUwMDA2WXm9XGbv+9G83lx1MDAwMCeVltf7JebojpYh581cdTAwMDKfMMC1UkNk9nboXHUwMDBm/2bHXdl9WuvSMrku7Z+Wm/PuZylTXHUwMDBlXHUwMDE4xJbgXHUwMDFh/zPxxJ5cdTAwMDTiXGKNJopcdTAwMTjFpFx1MDAxMlx1MDAxM3SzJMXNykTujjD0sdJwOevQl2JQeVjdO395emr5vPHy/HJ/dTRrP3tx841cdTAwMWVtPK2xTX/l4rl+u+5cdTAwMDdwPob78v3DXHUwMDA3s7NcdTAwMTI86lx1MDAxMu8snWnXK2k1Lj+rqWZcIlT4XHT5WcZ19pI2hnpcbqO+SEZ4XHUwMDEw1tOnf879LOU8XHUwMDBm65Q6MFx1MDAxNayblKx90s1SQimyXHUwMDAxXHUwMDBl41vSXHUwMDFlp1x1MDAxNn7QzXrB4aNcdTAwMTdU619hun52gJNK+NmInFx1MDAwYlx1MDAxZlx0aVx1MDAxNWR6WoywMJzT0lx1MDAxNF/AfvK8yr1/e3dSWq+wXHUwMDE3ft899PZmvIgmXHUwMDA3pp7AXHUwMDExxiiOP4wzwXhcZn2cI8lVlFx1MDAwMVd4XHRcdTAwMDOSzXI/nHoyPIk/naS5XHUwMDA06ZEydIy5p9FcXO3a/snN7qM8XT2g66XT1WD7eUOuTSFcdTAwMWI82HVNKWurc7CjqUKFkUOkg9KHc86xI3KxI+LY6WfP41xcnyFJ6CSztkhmmcJIVY4vXHUwMDFiND9cdTAwMTHia9j1mvbslSrWW42a6//9c/FcdTAwMTKDss60XHUwMDEzt1x1MDAwM1xcQb9DKyR9LkwzXHUwMDBiRVx1MDAxNCGZMLWL2ZrpyIrdwHXUXFzDNadcZpNI5lx1MDAxMFsqXHUwMDAwXHUwMDA2tZ/RXHUwMDE4TJm2oSaA0JZeXG5cdTAwMWVZdlx1MDAxZTdOwaFcdTAwMTRxITV+XHUwMDE0YsPoXHUwMDE0jyeYXHUwMDAzQjFcdTAwMDCNYT5cdTAwMThcdTAwMTFBwHuih4PNtqthKrg+XaVIwaJcZulQw7mixtbgXHRJZFpVXHUwMDA2OFx1MDAxOEpJW4kqUG6NLMYkvnyhSpF8VL9cdTAwMGJFcJ654UJcdTAwMTBbmWKkyKhfXHUwMDAxblBcdTAwMWKkoTjjSlFJXHUwMDEyUn2qWpFs9bavpGKHN/xcdTAwMTL9PbSFo1xcZK5cdTAwMWZcdTAwMTODNIUoPVx1MDAwNIvPT4PMqYljWjvSXHUwMDE45F2ao1wi0ThcdTAwMTVBaDiK4yBQsGUz0ULtcVx1MDAxN8JRXHUwMDA3yZ8gqM5MUqHCiVx0iVx0d4iU1GhGgWiTXFy00ohcdTAwMGIzY/uGcpFIiD9++5afWY7bXHRcdTAwMDaaIZxcdTAwMTjYKmI0/ilW0NixJoxwUFx1MDAxY936aOYtP1xuj8uEQ8RcYrJeXCJ6dc9JmexKqVwi1iRTYVx1MDAxZFx1MDAxNv/cxi1Tse0rodJDmrb8JFx1MDAwNc+u9MVcdTAwMTkgXHUwMDE0lVx1MDAxNYrnXGJ3L1a+lcs3zD+puZetnSXxtNahc15cdTAwMWbDwDjoVDRDXHUwMDAzJ1x1MDAwNbKPOIMj3DGMgFx1MDAxMpzgXHUwMDBmzsLkXCKtVINcdTAwMTZJirwlXHRcdTAwMTFcdTAwMTNcdTAwMWMjv1kvXHUwMDA3bJ2s3DWvK8es/qw3ZGX95P6YXHUwMDA2s15cdTAwMWX/XHUwMDFkKtY4z2RcdTAwMWNI5jgyXHUwMDEyXHUwMDE4XCL3kT5Nc1x1MDAwZUkh8iDJtMOnXHUwMDAzSV0obY9cdTAwMDabXHUwMDAzj/Ki3yf1XHUwMDExVn1NN2k/wJNkXHUwMDE3p4285yW6kbBcdTAwMGZ2XHUwMDFj41x1MDAwZWLZbWHU5du3OeX5XHUwMDFjtFx1MDAwM5pcYs21pHh5nOczbVx1MDAxYyEw1jWogISTSEZy/LlcZoZ2TuGAI8pcdOEqJVx1MDAwNckxOqfCbv/UWuNcdTAwMTU6uVx1MDAxYk1cdTAwMGKD0IzuZfpccnNcdTAwMTn5QInzalx1MDAwMkJyYFx1MDAwMlVcdTAwMTlcdTAwMDNpmuTVysGJ14ZzrnrUO5k0KMT1XHUwMDBix1x1MDAxZuBgyI7ScMlQ+YxkJpbOeFx1MDAxNVxuldIuliE1XHUwMDA2IGj4PzfXz9Zt+0pq9ZBsP9u+oYPKsm+Ca/u/LJ6qzedZc2rfcMxcdTAwMWSltVwiXHUwMDFjObTk0X3mr1v6LOtAdkVcdTAwMDBpXHUwMDA3V5NcXFSh1JGglOQ2KWzT5CnMn6HeS6KYZFRcdTAwMTiI7C59s29cXKJcdTAwMWVcdTAwMTk6VLHApzNvhTf1UVx1MDAwMTiQhNg9myotJ1xuXHUwMDBlx1x1MDAxM1xubZvhQFxig1x1MDAxMXf0XHI0uL8kslx1MDAxYslcdTAwMDBQjVx1MDAxOLHqlCqSoIg80au8xVA8ZZPhZ7Jt2VptX1x0fVx1MDAxZdKy5Zc1yki7ikSaXHUwMDE2Z5zhNFx1MDAxNN/Rx5fXuydrm62V04p7UX95MK2no/05XHUwMDBmmohgjpBMqN6ym2AsXHUwMDFlNSlGXHUwMDFjXHUwMDA13O5lRf+OqjY541asrlEjhVRy9u076lx1MDAwZlx1MDAxYvewXq67bOX2qnbaofWDy4PfvfwwXHUwMDFhNE+q/FBFdnb2QVx1MDAxMqmcXHUwMDEyisjiXHUwMDAxVfoszTlcIqXMRaSgXHUwMDBlnVxuXCLT1oKTaVxmLa2QZjo1/kPrYDjVo6QxdiqXbuPrz0X4ufjvhakmMlx1MDAwNriS/kRGXFzQXHUwMDBmOEStMkszKJJcdTAwMWZi2DBcdTAwMWLqXHUwMDBlzrfcs+f7Yyit7m6elPeuyrf1kzmHXHUwMDFm1cg4rLZJXHRUXHRcdTAwMTJcdTAwMDdcdTAwMWa6Q0OQiFCMXHUwMDAzlJi5N1Q4I2Cj4Fx1MDAxOXvD/bVcdTAwMDefL61cdTAwMWZcdTAwMWRstq+6Tb3JO+V9PVx1MDAxZl7LkGhcdTAwMTOWSXktozKz78hsXHUwMDE1V2irXHUwMDBiwyZ9NOdcdTAwMWI2XGYsj8yCXHL6LD5cctjIlK5cdTAwMTApLsvG8kzy6dTLXHUwMDBmq4BcdTAwMWZzWW9F6FN2V1x1MDAwM1xmfb+7XG6FzEVbdlbKiEw3hbGxJU5miEYsuWx8XrNSXG5pIJpcdTAwMTZGXHUwMDE1XHUwMDExOtqAoVcnrLjDNZ5lXHUwMDAwljH3yzU+xFx06ShJXGIyM2X7f6mUjaE2O8mRI1wiU1x1MDAwNIPxNEvm3Fx1MDAxNcG36qhlmEF9jaJ6tI0tXHUwMDA1k1LD1LIwu5hiXHUwMDA3lnDbtimSXHUwMDEyXHRrWVxmgM1cXDGMXHUwMDA2XHUwMDAwVT7x5Vx1MDAwYuWl8olmXFwornBcdTAwMTJccqBMVEguaVIocIxdf+VS4JByopNCfabMVClTue0rqdbh/b5Ef49QPZhTXsOBMsX0XHUwMDEwW93z+dW82jejUd9Q4yjYoSe0b1x1MDAwZp7CIJlcdTAwMTnCJVx1MDAxOE3BTM7AcVxmXHUwMDA3mN1Qj26FoUFlKVEx5460+1x1MDAwNFx1MDAxNcFYWEqW4OnUNiuj3JjZXHUwMDE2XHUwMDEwXCJcdTAwMTOZZNa9sIGzffKQMFx1MDAxYZtXt/tyeKxz3ZstYY5cdTAwMTFcYitbISGYXHUwMDFk99FcZlxcPjWJXHQlXGJcdTAwMTFcdTAwMDS0XaCgXGIxkpRcdFx1MDAxY2XLqI0t39WA4n1q+5at2r2z/Uo9pHlcdTAwMWKQeYfsblx1MDAxZb2F5KF6hZ7cXHUwMDFmXFysLYlD+dgodVx1MDAwZk42Lk7rL4ejmbjpdVx1MDAxNEDn4dhcdTAwMGVcdTAwMTmcXHUwMDBiTanS8ZhcdFx1MDAwN8hRXGZcdTAwMDRcdTAwMDBnyI50dtA0rY5cdTAwMDJcdTAwMTKhoW2XlbGFTe9cdTAwMWE1VLKhc7ZVW/Jqa+Z4/9ErLZeO5OXZ9lx1MDAxNDrh5N634ZLzXHUwMDFk0Tl9MFtcdTAwMDcvXHUwMDE1v96+WSndjeG+3aPmcX1rp7y0XHUwMDEx1O9fSof+j63zsW3L1EyISMg8qeSINJlduoSxLbmH6VxunDr5c05muGF5SKfMoVNBetp+5pS2PcCR3JNxds1cdTAwMWOnXHUwMDBlhnP9sX5cdTAwMDJquqWJXHUwMDAzXFxUdj9cdTAwMDE1cpqEyuwulkTbsihFSPE8Sb7pnFfoMeIwRjFcdTAwMWVlxvbcVvE4QlDuYEBLMNzoXHUwMDE5oslVJ2JcdTAwMDTg2MpcdTAwMGWjgCkqIa2Fllx1MDAwMlx1MDAwNykos5V0XHUwMDFhf6KlRG9xXHUwMDA0Tlx1MDAxYTBOh+rqM/Y4QlxiSkfKaI57I1x1MDAxMjhUXCJZx+jbprq0MskwQjjEXHUwMDFlN4RcdG2f/ZBk7IWiiHz0xqNcYklt/Vx1MDAwZVx1MDAxN7ZcZl0xlVx1MDAxMEk7XHUwMDEyY1x1MDAxZmVcdTAwMWK5aUWJTM7GZ1xuXCKy9dq+XHUwMDEyXHUwMDFhPdYgQqvMVkVWJ1RsZ/Ug81Zb3VIrRy+Px7v3z3urm9v+9f7jjDtcdTAwMTVcclxcdeFUOVxmXGZD48VRoYyMW7de9Vx1MDAwZdo1MDaLRcRcdTAwMDStW7FcdTAwMTiCXG6NTidatDCbXHUwMDEwgtzfXHUwMDFjlLdWa+X25Vn1uHPaZJuXT7831Udzwya+XHUwMDBiXHTNWnZBXHUwMDFkKG2fVjBE5jJ9muZcdTAwMWOSnDg6XHUwMDA3krZ8ZyqQTOvAkkL2kVx1MDAxYtk1hOl0YFx1MDAxOVpcdTAwMGI/RvZ/lcWoqdfvXGZwJln1O+qj9TsmO9TWUvPeWlFh+Fx1MDAxZEO9Jsjyj4fjhzOoPnWPbneuunNcdTAwMGU/ZF9cdTAwMGUyfeRV1G5cdTAwMDeH/vpcdTAwMWS7tIaUXHUwMDEx9dDk9Medkju0JVx1MDAxMchcdTAwMTWVnnVKbf3+XHUwMDA2bpmskcf79o/d5TX329Nz4c5hXHUwMDEz9Vu2gymfuN+yj8fJ9FtcdTAwMTTokHVv6cM558DR1NHZwFx1MDAxMeDoKVx1MDAwMKdYXHUwMDAxXHUwMDBmwUBdXHUwMDE5JulUMlRDq+DHnNZsKnhcdTAwMDbY+vFX8GSXeWtkioxcdTAwMDEp3lx1MDAxZiefkc9pZsp2wLG8XHUwMDBiXHUwMDE0aIK0MN5cdTAwMDNMKoaAY1x1MDAxYc+B4Vx1MDAxYbKbzH54gdtcdTAwMTJSYXu54MdQalJcdTAwMTDIpW0mQoxcIr0nN5DEU1W17fIuh2s2Pe60lEGNXHUwMDE56jFcdTAwMDSRXHUwMDExLZSWKpxcdTAwMDOybaeEwbhcXFx1MDAwMtJdXCIjnfhcdTAwMTdcIkvJtm8oKIlRkaIjPykun2jGheJ2kLTtXGbJKfL+lDV34iiGsVx0Z0Joxpn55Fx1MDAxZHIyVdu+XHUwMDEySlx1MDAxZN7uS/T38Gl3XHUwMDE2cZ79xcD24YHUXGaxZzafXc2rbVx1MDAxM9ox9slrRCvOXHUwMDE19Fx1MDAxN+9oRzImeoVcdTAwMWaCkcl14kBcdTAwMDVcdTAwMDD7uC6tKUFcdTAwMWIlU9a/mHGQ/YHtQsqZ3Vx1MDAxY9tv26Tdi4k2epZcdTAwMWJmR6cg47ZtNn6SYG2IsrUhXHUwMDEwZmBDK8JcdTAwMWRj60okXHUwMDA2o4xSKZJcdTAwMGacLGTa8ilJXFwmxlx0t9V46E2FTjFsXHUwMDE4XHUwMDE0okhUo1x1MDAwMUT+ysTnzrlnqrV9JVx1MDAxNHpIu5ZcdTAwMTUjXHSZmWy3T3lcdTAwMTmi39fz877ZbW3uXpOT/c7SycqZ9+1ged5NXHUwMDFhU8ThvTJPaqjdnFx1MDAxZDdpgCaNgCUhhGnOJ/dQbZPymHuRiJC4ffpcdTAwMTmHKVx1MDAwNUh2q/pIzGukR2o7jvOz+ZUsXHUwMDA0db+7INNX8SNcdTAwMTMwXFyYXHUwMDE0tNpZMVLsXHUwMDBi9Vx1MDAwN0T9Qr1C7MtcdTAwMWKEXHUwMDE3K+32YYCj9m7ucD682ttXXHUwMDBmb7z44LmPy0mN+NdV72Xv2oOtxYjbczT/fPnnf+6uXHUwMDA3ViJ9 ByteEditor()Container(    classes=\"top\")ByteInput()BitSwitch(0)Input(    placeholder=\"bytes\")Container()Label(\"0\") Switch() BitSwitch(7)Label(\"7\") Switch() ...(1 thru 6) <p>Now that we have the design in place, we can implement the behavior.</p>"},{"location":"guide/widgets/#data-flow","title":"Data flow","text":"<p>We want to ensure that our widgets are re-usable, which we can do by following the guideline of \"attributes down, messages up\". This means that a widget can update a child by setting its attributes or calling its methods, but widgets should only ever send messages to their parent (or other ancestors).</p> <p>Info</p> <p>This pattern of only setting attributes in one direction and using messages for the opposite direction is known as uni-directional data flow.</p> <p>In practice, this means that to update a child widget you get a reference to it and use it like any other Python object. Here's an example of an action that updates a child widget:</p> <pre><code>def action_set_true(self):\n    self.query_one(Switch).value = 1\n</code></pre> <p>If a child needs to update a parent, it should send a message with post_message.</p> <p>Here's an example of posting message:</p> <pre><code>def on_click(self):\n    self.post_message(MyWidget.Change(active=True))\n</code></pre> <p>Note that attributes down and messages up means that you can't modify widgets on the same level directly. If you want to modify a sibling, you will need to send a message to the parent, and the parent would make the changes.</p> <p>The following diagram illustrates this concept:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1bbU/byFx1MDAxNv7eX4HYL3uljTtvZ14qXV1cdTAwMTHabmm7QFx1MDAwYrS3vVpVJjHEJYmzjlx1MDAwM6Wr/vd9xkDsxHFcYmkoUF1LpYk9XHUwMDFlXHUwMDFmz5znec45M/n70draenY+iNafrK1HX1phN26n4dn6b/78aZRcdTAwMGXjpI9LXCL/PkxGaStv2cmywfDJ48e9MD2JskE3bEXBaTxcdTAwMWOF3WE2asdJ0Ep6j+Ms6lxy/+P/boe96N+DpNfO0qB4SCNqx1mSXjwr6ka9qJ9cctH7//B9be3v/G/JujRqZWH/uFx1MDAxYuU35Jdcblx1MDAwM6W2bPr0dtLPreWGXHUwMDE5LomsXHUwMDFht4iHT/HALGrj8lx1MDAxMYyOiiv+1Hp7I1x1MDAxOVxmXlx1MDAxZf4uP71qXHUwMDFldk5cdTAwMWJCfNz5XFw89yjudvey8+7FWIStzigtWTXM0uQkelx1MDAxZrezztXQlc6P71x1MDAxYiZcdTAwMTiG4q40XHUwMDE5XHUwMDFkd/rR0I9cdTAwMDBcdTAwMWafTVx1MDAwNmErzs79OVa84MUwPFkrznzBN6VYwPFHSSdcdTAwMWOXjunxZd9cdTAwMDHOXHUwMDA2TFx1MDAxMmdCa+Gc4VOGbSZdTFx1MDAwNlxm+4WOZLulXG7TXHUwMDBlw9bJMezrt8dtsjTsXHUwMDBmXHUwMDA3YYopK9qdXb4yJ1x1MDAxYmjmpOKKlDFE41x1MDAxNp0oPu5kaGJN4Egz6yRcdO6kdoUxUT4rVlx1MDAxYiVcdTAwMWOZYvi8XHUwMDA1g6127iF/loet375cdTAwMWO2/qjbLYz2XHUwMDE3nk17VdmzJrwri75cdTAwMTRvUvKEdCdcdTAwMWWdb1Bz1Njdf7v59Vlj820nXlx1MDAxZrf79tvsbi9ubkafs99Pn37gpn9+4I6V2Op3pp5y9fwwTZOzRftcdTAwMWQ4+vzcbDe/dj+yNOp8lVx1MDAwM2lcdTAwMGZW0O+zt9m2ftE8dPZsZ1s8c3uvKVmFve+fvZJvXHUwMDA3XHUwMDFmtYuy5qe9/us/WKPXWazfy0/FhI9cdTAwMDbt8Fx1MDAwMrhcXFx1MDAxYsuEs0qRLlxcvVx1MDAxYvdPpn2hm7ROXG6sPypcdTAwMTlcXGGZXHQ/KFx1MDAxM4w1NH16TDDWOSGVYHZhgpntVktcdTAwMTHMNI5vkWBcZlx1MDAwYpSyhitNmoQuXtffr7hccpzj3Fx0xom70mCsml9cXNH1mFCo8IBLXHUwMDA2IW1cdTAwMTiXJTO+l0BW6YPFTCf9bC/+6lx1MDAwN1vIwFx1MDAxOKOc0lJcdTAwMTitmJto9Dzsxd3zibnLfVx1MDAxNYO1m4/Tr/8qj+gwglx1MDAxMb5XZSfab3TjY+/P6y3cXHUwMDEypVx1MDAxM66exZDmcYPDJMuSXtGgXHUwMDA1I0L0mW4tXCKRSVx1MDAxYVx1MDAxZsf9sLs/beNcXPTN1XjFLK+FoDRcbjOxOFx1MDAwMF80P785y87Tk8M/PvRenGyop6/l2d1cdTAwMDLQXFyHP2FUoJ0w0mjOlZN8UuDJWK//Vlx1MDAwYoDTcuFqXHUwMDAxyPLjblx1MDAwNVx1MDAxZfZJRCpOr1xmn8tcdPxr2j7/LyUv9ejAfvncO2Bb7tPxzyrwbz5svd9I3iE0fNVP4iMxXHUwMDE4ZsasSIitI0xp4di3JMSIXG51XHUwMDFkXHUwMDBiQJtcdTAwMDRBf1x1MDAxNmaB2ZN/v1lAQmeVM2BDKa21JZnwt2tGXHUwMDAxlFx1MDAxY3PBXHUwMDE4Mabp1kiglEDMUWEr4Gyal7Kz25NheKDmdyfDm5242/7BKnyNjE2r8JWJ3yHC4PNaXHUwMDExhi44y1x1MDAxMFx1MDAwMS5cZkDqf+2evmxcdTAwMWOIvZPPO/uHZ+HWwba551x1MDAwMNRcdTAwMDJcdTAwMTCDe8DhhFx1MDAxNFx1MDAxNVx1MDAxMTZwXHUwMDFmidRVO01GqlvD30pEWCHFdkqy1cFzOVx1MDAxNY7C072NdP9Mmv2/tt8kfGh3mns/QNV+wnSYXHUwMDE0XHUwMDE38tZVXHUwMDE42VUtXHIwqaWU7lx1MDAwNvW22dN/z2lA+3zXh+NETDNpJnhAM1x1MDAxNVx1MDAxOMRDllx1MDAxOKJcdTAwMTI9p9r2Y3TYOKRcdTAwMDZCKLUyoK/SXHUwMDA3XHUwMDFmvFx1MDAwZV+jY0vp8Fx1MDAwNfZngE9oUa/BllxmyF6oxVPh+UnMfS12W1x1MDAxNzhcco+2UivLidRcdTAwMDT8oGtcdTAwMTBH4sxoq1x1MDAxOLPThlx1MDAxNfDjVqvw8DuKUSpAXHUwMDFjYJhcdTAwMDLtcTzRVNFoRIDQXHUwMDE00TozTlx1MDAxMKeKXGZjvlx1MDAxMFCQpZtUu1x1MDAwYmG58lx1MDAxOHF55ttyoF26hjXMwjRrxv123D+eNOxyVWeRilGO69bIW9lggVx1MDAxMFx1MDAxY1x1MDAxY8KJWbJWXCKyLzU7XHUwMDBlXHUwMDA3efhcdTAwMTNoLlx1MDAxZIfN1nKjuKy8fdRvX2/V/FxietIqXHUwMDEwkZPge8hcdTAwMWLhqFx1MDAxYeVcdTAwMDKtlOKwyFx1MDAxMUlesahcdTAwMWJcdTAwMGWzzaTXizNcZv1uXHUwMDEy97PpIc7HcsMjv1x1MDAxM4Xt6at4o/K1aYpcdTAwMTj4XHUwMDFlJ6Ow4tNagaD8y/jzn7/NbN2QNmCOw3G5VVx1MDAwZTGk1OX7XHUwMDE1hoOUVYj3cZVLc21/tUjxR1x1MDAwNSNFd4/K/9+YLJWoXHJUyFxi6Vx1MDAwNWbxOGV+pLlcdTAwMWGqbCfeOVx1MDAxNudKupYqSVx1MDAwNcz4ckH+skpPZiyai0AppoEgXHUwMDAxPiUzZdgqM1x1MDAxNlxuYIxcdTAwMTKet5mRZlx1MDAwNlfCXHJcZlx1MDAxN4asYX6lUlbL+iSVsfpuqXLp+GZBqrxcdClcdJJcZrNmpDbMKWZLsLpkJcFcdTAwMDLIoCGlreRcdTAwMDaR6XJMOT/GKVx1MDAxOcWCXHUwMDFj4dxIJpnmXG6onknfXHUwMDFhyavQxLWDUfSgybLetf1RcepcdTAwMWKSW1x1MDAxZbzO4DZuarnNK1x1MDAxMIaWXHUwMDE3VYHruK3RODxcdTAwMTl0e413nz703n462uc7NnyzXHUwMDFjt01cdTAwMTc9bi9cZoRPXHUwMDA3ym92IORcYkK5qWJcZiSHXHSGLFxmLlxi4qintpZcdTAwMTOhXGKXpzZJXHUwMDAxQWl8XHUwMDFjKiGYppSAjalccnpqXHUwMDEwqXCutJLWQVx1MDAwMitxoECw6inmzrhccjKAaEtcdTAwMTdcdTAwMTO4PLdNY7HmyopRPnFtxfFQ7Vx1MDAxY/ujOrsrXHUwMDAyuWD1q57EuGWalVxue9eh/JXZ33p3tN//a3evXHUwMDExd3Y/7vY2yzi+pyjnXGahKHNcdTAwMWF6XCJcdTAwMWSjyVJcdTAwMGI5XHUwMDFl+HqTXHUwMDE2mlx05Ma3XHUwMDA3cul11GJCuJRCilx1MDAxOeFcdTAwMGLoXGJcdTAwMTk4poWk1UaUmlxcVVxckUEohqt3inFokSpM+z/Gr47aXHUwMDE59kdlbm9cYvD6XHUwMDE0xcnps+NcdTAwMTRFwFuM0IunKPOXju9pNUdqXHUwMDFiKM9kklx1MDAxY1x1MDAxM0pNXHUwMDE2c0grjDyzSmryy1x1MDAxOfVrKpE25nsyXHUwMDE0K1x1MDAwMzyFM1x1MDAwYiVcdTAwMTZOmFx1MDAxOWsqXHUwMDA2TSxcdTAwMTfqosTNbaWY44zz+UkxXHUwMDEwP2Ep5yb5XHT32039tjHpk49S4lbkXHUwMDAy0pfymN9GZ1x1MDAwNMPs28rbL5Sg3KjAhEArz4c1hEXzqk0skPA0MLVcdTAwMGaJyIxcdTAwMGJcdTAwMTJcdTAwMGYzP/HFdMF93VxuaVwiXHUwMDFj1JXvbihcdTAwMTko5vNIvKt23OrruqvFSd5dXHUwMDA1XCKrXCJKcHLtJkxcdTAwMTCHVCRcdTAwMTYve89fhbunREkqr0JcdTAwMTJcdTAwMTG3xu+PniBK5D+B4yRcdTAwMTTmXHUwMDA1woHxqGXK7y17I71Hwmu19lm8sULPqnv7QoBcdTAwMTVcdTAwMDC+c1x1MDAwNKtLw3RcdTAwMTlcZjGEyoIxW9j5XHUwMDEzXHUwMDE2c1x1MDAxNqYlsJIzoCUlXHL+Icx1pVxm44qXMMPgLtKCIVx1MDAxM1x1MDAxMXrJqvdccmo5/udcdTAwMDJKYKqM407MsIhcdTAwMDXgUWNcdTAwMTCngDyMIFMx6SExpVx1MDAxNFx1MDAwMahcdTAwMTDqIJj0xepcdGqTKlBcdTAwMDZcdTAwMTFcYsf0cKmEvK63epj4o1x1MDAwMpBVXHUwMDExJWZrzs9hpDQgS7Z4TDl/I8Q9pUptKPDcXCKl31x1MDAxZlOiwjykJFx1MDAxYvhanZXI11x1MDAxOVx1MDAxOODWQkpHgfNLQlpcdTAwMTE8h5XixTFPalx1MDAwM6+CjVx1MDAxMpE+VNNUat7cec1G9Fvc/Fx1MDAxM/LkTerLXG40o1x1MDAwNVx1MDAwNtRxSZzPiCldQIjsuEDCRuAtW2Wl1caULIBNiLBcdTAwMWPYm/zCs6pcdTAwMTbiPVU643dDglx1MDAxMrhGXvOgqbIhXHUwMDFj0mXn02XwpCPi5dtcdTAwMWKKw/MtoCfhv1baa8myUYuV/GpcdTAwMDUmN2TLur1Mtv6HPbBcdTAwMDQxp6XC7a+jyk7nTTM92n16MNJnh9REYrT//PzeUyVcdTAwMDZcdTAwMWUyZIB0+G15xfTqh4O+oCm130RcYlx1MDAwN741ruRyxi97RKVMzpGpSFx1MDAwZeYuLLm1zUxcYscs5Hupgnh5M1x1MDAxM5s4O2f3Ulx1MDAwZuaGx9Fw7dfRYPZcdTAwMWUmXrOHqVx1MDAxYlx1MDAxZE369+RcdTAwMGWmLFx1MDAxOdRtX5p4mem9SpNcdTAwMDYthTBobFx1MDAxZMSQYlvos1i8gp18jJ/2qdGmdCS2XHUwMDA2zVx1MDAxZGaH2+9cdTAwMWVcdTAwMDLCXHUwMDA09EprST66nMrbiFx1MDAwN2SsX1xi9Vx1MDAwYqeO32LeZtRCXHUwMDEw035DkrP6x0DMr1UuVY9eXG5iYZal8eEo8z7dTs7691x1MDAwMmZVoy6g9uhSLtfDwWAvw7iNg1x1MDAxNcxI3L58+aLr9dM4OmtWveKXo/zwvebw9UCJ8jjx26Nv/1x1MDAwMC2LavoifQ== Parent()Child()Child()messages (up)attributes (down)"},{"location":"guide/widgets/#messages-up","title":"Messages up","text":"<p>Let's extend the <code>ByteEditor</code> so that clicking any of the 8 <code>BitSwitch</code> widgets updates the decimal value. To do this we will add a custom message to <code>BitSwitch</code> that we catch in the <code>ByteEditor</code>.</p> byte02.pyOutput byte02.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.message import Message\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label, Switch\n\n\nclass BitSwitch(Widget):\n    \"\"\"A Switch with a numeric label above it.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    BitSwitch {\n        layout: vertical;\n        width: auto;\n        height: auto;\n    }\n    BitSwitch &gt; Label {\n        text-align: center;\n        width: 100%;\n    }\n    \"\"\"\n\n    class BitChanged(Message):\n        \"\"\"Sent when the 'bit' changes.\"\"\"\n\n        def __init__(self, bit: int, value: bool) -&gt; None:\n            super().__init__()\n            self.bit = bit\n            self.value = value\n\n    value = reactive(0)  # (1)!\n\n    def __init__(self, bit: int) -&gt; None:\n        self.bit = bit\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(str(self.bit))\n        yield Switch()\n\n    def on_switch_changed(self, event: Switch.Changed) -&gt; None:  # (2)!\n        \"\"\"When the switch changes, notify the parent via a message.\"\"\"\n        event.stop()  # (3)!\n        self.value = event.value  # (4)!\n        self.post_message(self.BitChanged(self.bit, event.value))\n\n\nclass ByteInput(Widget):\n    \"\"\"A compound widget with 8 switches.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    ByteInput {\n        width: auto;\n        height: auto;\n        border: blank;\n        layout: horizontal;\n    }\n    ByteInput:focus-within {\n        border: heavy $secondary;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for bit in reversed(range(8)):\n            yield BitSwitch(bit)\n\n\nclass ByteEditor(Widget):\n    DEFAULT_CSS = \"\"\"\n    ByteEditor &gt; Container {\n        height: 1fr;\n        align: center middle;\n    }\n    ByteEditor &gt; Container.top {\n        background: $boost;\n    }\n    ByteEditor Input {\n        width: 16;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Container(classes=\"top\"):\n            yield Input(placeholder=\"byte\")\n        with Container():\n            yield ByteInput()\n\n    def on_bit_switch_bit_changed(self, event: BitSwitch.BitChanged) -&gt; None:\n        \"\"\"When a switch changes, update the value.\"\"\"\n        value = 0\n        for switch in self.query(BitSwitch):\n            value |= switch.value &lt;&lt; switch.bit\n        self.query_one(Input).value = str(value)\n\n\nclass ByteInputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ByteEditor()\n\n\nif __name__ == \"__main__\":\n    app = ByteInputApp()\n    app.run()\n</code></pre> <ol> <li>This will store the value of the \"bit\".</li> <li>This is sent by the builtin <code>Switch</code> widgets, when it changes state.</li> <li>Stop the event, because we don't want it to go to the parent.</li> <li>Store the new value of the \"bit\".</li> </ol> <p> ByteInputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a32\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u00a0\u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2503\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2503 \u2503\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u2503 \u2503\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <ul> <li>The <code>BitSwitch</code> widget now has an <code>on_switch_changed</code> method which will handle a <code>Switch.Changed</code> message, sent when the user clicks a switch. We use this to store the new value of the bit, and sent a new custom message, <code>BitSwitch.BitChanged</code>.</li> <li>The <code>ByteEditor</code> widget handles the <code>BitSwitch.Changed</code> message by calculating the decimal value and setting it on the input.</li> </ul> <p>The following is a (simplified) DOM diagram to show how the new message is processed:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPiSNL+7l9BeL/MXHUwMDFiMdbUlXVMxMaGb7vb99l4e8MhQLZlZKBBPjfmv29cdTAwMTZ2I4FcdTAwMGVcdTAwMDTGgHteOtrYkiilqvLJfDKrsvjvQqm0XHUwMDE4Pre8xT9Li95T1Vxy/FrbfVxc/N1cdTAwMWV/8NpcdTAwMWS/2cBTrPt3p3nfrnavvFx0w1bnzz/+uHPbdS9sXHUwMDA1btVzXHUwMDFl/M69XHUwMDFidML7mt90qs27P/zQu+v8y/7cc++8f7aad7Ww7UQ3WfJqfthsv97LXHUwMDBivDuvXHUwMDExdrD1f+PfpdJ/uz9j0rW9aug2rlx1MDAwM6/7ge6pmIBcdTAwMWH44OG9ZqMrrSGEK0JcdTAwMDTtXeB31vB+oVfDs1cos1x1MDAxN52pdVx1MDAxZs9cdTAwMTfl/ZPjQ7ax/0Rf/MOL5tI2j2575Vx1MDAwN8Fx+Fx1MDAxY7x2hVu9uW/HhOqE7WbdO/dr4c3PnotcdTAwMWTvfa7TxF6IPtVu3l/fNLyO7YBI0GbLrfrhsz1GSO/oay/8WYqOPOFfXHUwMDAwwpHAiFRGXHUwMDFhQ0x05+7nJXWEUExSpoXgQOSAYKvNXHUwMDAwx1x1MDAwMlx1MDAwNftcdTAwMDdcXPFaVUSiVdxq/Vx1MDAxYeVr1HrXhG230Wm5bVx1MDAxY7House3R6Y8uvWN51/fhHhQRlx1MDAwZtXxulx1MDAxZFx1MDAwZlx1MDAxYSRKZFTvhL1Ja7vW1YH/xHumUXvrmcZ9XHUwMDEwRHLZXHUwMDEz64N6XHUwMDEz150+/Vx0vadI2NhgP1x1MDAxZl3723opuPpa11+vvJ1rslx1MDAxNJ4v9q776/f0Zl8/zF42audnXHUwMDE3x0vN3X3plVx1MDAxZla/3Kq1/rv8vL/bbjdcdTAwMWZj7b79XHUwMDE2Peh9q+a+6iSVSlx1MDAxM6FcdDdMR4NcdTAwMWP4jfpgXHUwMDFmXHUwMDA0zWo9UuOFmMBcdPz0PX9cdTAwMWM6hoos6FDNmEFRiC6MnfTuXHUwMDFjXHUwMDBiO3R62FE0XHUwMDBmO5o51ExcdTAwMDU7RiehQ80gdKhcdTAwMDZcdTAwMDZcXFGYXHUwMDE4dLK0kDJKiVx1MDAwMjKKXHUwMDE2RmPdbITH/ktXkWTf0Vxy985cdTAwMGae+4arq57YPSvPobfedVxmv/1fvFx1MDAxZjtcdTAwMWXeudtcdTAwMTTv+8xy4F9bNV6s4rN47T5cclx1MDAwZn30Nb1cdTAwMGLu/Fot7j2qKIiLbba3i1x1MDAxOP1m27/2XHUwMDFibnCSJmcu8HJcdTAwMWRcdTAwMTdHdGWhj1FcdTAwMDaGoz6qwujTle3d1fKjvOzcbLeCSiB2XaPn3nNJ7lx1MDAxMK0oVcSAVMz0oY9p6aAx1Fx1MDAxYzVeXHUwMDAyZVx1MDAwND5cZn2o60U8XHUwMDE32lx1MDAwMkEkxaGZsetqy/UtVl7+tvTilqv1tc7S4flyY1xuriu3XbF3V79cclx1MDAxZaTim+et2y/N8mXdrU+g3VBcdTAwMDSbT4dXXHUwMDBmXHUwMDE1oYOV2vPm84/bJz1cdFerNChD0PhHivVBrpZrk8lSKTIhTlx1MDAwNep3YbCnXHUwMDBm/ydwtdlg50Q6MFx1MDAxZLBcdTAwMWKRxHqKq1XGXGJ0+zGv81x1MDAwYvlaPzx+9MPqzW9qur52iJtK+NqYnKV8Z/tcbv007IEhmdijVCilmCpcdTAwMWVcIuZbzznFnqTSQTZhXHKe6uKv39Ey6ShcdTAwMTDCWkJqiFx1MDAwMJ2JPdJ9jY894qBcdTAwMDWQXHUwMDFhKbVcdTAwMDEgRpuUiFx1MDAxMYgjXHUwMDE41VQrJVx1MDAwNIYgbFx1MDAxMJqGI2Y4k6NcdTAwMDSQkV/5qTHs7chfo1x1MDAwM/ZniEbHXHUwMDAxbCd02+GK36j5jet+wd5SIUVYqX1mt4XXXHSHXHUwMDEzjFx1MDAwN1xml0pII6L+7Fx1MDAxYYHqfafb6Tiw1t1cdJAouFx1MDAwNtCJZ/dcdTAwMWG14TLlo7cnk8ZBRlx1MDAwMov/0LlyXHUwMDAxXCJdJlxmuqjSXG7sf1x1MDAxY26iXHUwMDEyQlx1MDAwNW4nXFxt3t35Ifb9QdNvhIN93O3MZVx1MDAwYv1cdTAwMWLPrVxynsWHip9cdTAwMWK0XHUwMDExLdtiP1x1MDAwYot+K0VcdTAwMTDq/tH7/T+/p1+dqdn2ldDpqLmF+PtYoVx1MDAwNDbHXHUwMDA2XHUwMDBm9yxcdTAwMWNcdTAwMTJcdTAwMGJcdTAwMWNwXHUwMDE5c7fDLFxc5UTedbbWn/ZcdTAwMGVEsFX/8m19tbV1PFtcdTAwMGKnhpJcdTAwMGJcdTAwMDKOUlx1MDAwNrhcdTAwMDTgQotcdTAwMDFcdTAwMGKHps1yXHUwMDBmSz9cYmp/pJFcdTAwMTM3cKmRXHUwMDA0RMfeTFx1MDAxOGPaUFxudNY5sCevfHZ5e7N50ZKrrfrB8u7LVc2fXHUwMDAy4Z9cdTAwMTdijujIzoFcdTAwMTmUwlx1MDAxMCOL58DSu3POoYPYYFx1MDAxMXRcdTAwMDaAw2FKwIk501x1MDAxY1ZutFx1MDAxMFIjaZtcdTAwMWEpXHUwMDFmy8ePRcp33IpcdTAwMTf89n1RfV9EsjtNVj7E4lx1MDAwZrLyfkHf4bdoXHUwMDBlM1x1MDAwNyqBXGJcdTAwMTGLm4eBr3a6t7dzclY7P0TQ3Vx1MDAxY79UV59cdTAwMGXUnINPcqTehHGMM20kovvzz1x1MDAwMmk7kUxQJJyKXGIjs4PiKfktqlx1MDAwNMbnJJ7OmI3jkpvkaUM9fttvXHUwMDFmeU+rXHUwMDE3661V9+jub5RRXHUwMDEyLCejhOacauQ8xTNK6d0559hcdTAwMDHlsGzscDot7EiThE7SdXHKXGaGXHUwMDA1ZnpzN9NzXW9Jmim7rSFcdTAwMDZ/0G1FQuZcIi4zkcQgliZcdTAwMWGAnNboy/goUVY+eZ7XPFx1MDAxMoZZVDFUY2lcdTAwMTBYnPZBjlx1MDAwMzhcdTAwMWPhyKnmiEnGP1xmcYDYNpJcdTAwMTjOXGbjUsTuXHUwMDE0+S7pUINcdTAwMDNiU+tKMMVcdTAwMDfxSFx1MDAxObOeN25cdTAwMTimm0ZcdTAwMWHLWcS6tFBcdTAwMWGpcMpcdTAwMDZcdTAwMDNSMFJcdTAwMDB6d8K0jl3xM2WzZONcdTAwMDTCKJGK2excdTAwMWJRSiZcdTAwMWW+UFx1MDAxZSmfb8aEXHUwMDAywOFlaDhcdTAwMTUnPDJH/UJcdE1cdTAwMTWnwIBcdTAwMThhM2BcdJk+U1x1MDAxYWkpU7XtK6HUUXNcdTAwMGLx99FtXHUwMDFidlxcpm0jXGJ5SiFS02G2LZ9fzatt48xBViVcdTAwMTRcdTAwMWE3XG5aRqHuq20zXHUwMDBl2jeBJyQ3mis1INhkjVx1MDAxYva3wpDbKIRaynSVQLyitlM0XHUwMDFlXHUwMDA2JY5f8zPBRJTQXHUwMDA0Ufr/1s2aeodcdTAwMTMp0WppJVx1MDAxNGozxC6JMtJcdTAwMWOQMnNjKHInKWQyXHUwMDFmXci45bOSmHFcdTAwMTNGXHUwMDAxt/8p1TLVuKFInFx1MDAxYqIpJ8SumDNJe/uZbFumYttXUqVHtG25qVx1MDAwNqpoJndD5ibRmlIovtqGtOvbX7dcdTAwMGWDXHUwMDEzctmRrdN6eHrS+jL3XHUwMDA2zlx1MDAxOIcx27WMaWl0xO67k4CGOVRqVDc8XHUwMDBm6G6z7VtFMVxyufbt7Vx1MDAxYSGS1o2ylGhcdFx1MDAxMvZcdTAwMGJVRFxuytHQvst+0eH2q/eZkfJcdTAwMGbaf1bNaq3R2Vx1MDAxNPvqWMOB6bxcdTAwMTROnMPJ9cph58vt3XVjjSw/XHR2tr4rP1f+gVwiWcxcdTAwMDJcdTAwMTRGQtTOXHUwMDAwysJ4Su/NOceTXCJcIlx1MDAxN096cnjKT92RlPCHJ/JcdTAwMGZMXCKbVFx1MDAwMqa3noWNoITRWMfyXHUwMDBm1EHDzImWTKBKkdhUTV8+oj+9sNhcdTAwMGL1ndVcdTAwMWJcdTAwMWM5r/bb94Y9++BcdTAwMDb33j9P2vfe90b6qlx1MDAxNy77WurlIVx1MDAwMu+qXHUwMDFmXHUwMDA0I6UphjiL9DRFruzjcXyusyk+XGJcdTAwMGV8hEKJfFx1MDAwYjZcdTAwMTnA1tzOjTdRxGqGPk5TXHUwMDEwXHUwMDEyQCPp6l+CJoh0XHUwMDE05UA018hR9MchXHUwMDE2hIO3oFx1MDAxOHNR5OiKcEhcdTAwMDJcdTAwMThcdTAwMTRyViosYUJahOBcdTAwMWTEM0ib1Fx1MDAwND5cbp4nTvC54eojXHR++NU/OHKXbzfPt063j2twpra93TiZjqgyM2huKTfUXHUwMDE4ZVikyz3GXHJcdTAwMGXaarxCXHUwMDAypZxRNuZcIph8OPeLpDhcdTAwMTeW7uJQXHUwMDAz4TIhXHUwMDEyd5jgikpk91xmLTP/7LmLTL1+PT2o0pNk+JzFqOLgenpAXHUwMDFlaVx1MDAwN7+wfSt7QeXg7GqLPD7Cycry/ZHoXFzuz/1yeux/ooFcYlx1MDAwNmBcZiH9XHUwMDE5XGbQxulcdTAwMDaTimMsqSE7gfH+1fSRsYrsWYKQaHTsXFxyMevF9GflzfJcdTAwMTKtrHjV1epcdTAwMGZf3vDypbgqSuXp4cF6cNsgq/7h3kZwtXfyrHaCidSBWVx1MDAxNtWN/j+aynNmMpFDQWpcdTAwMDPoXHUwMDE0WWHopHfnnHP510qUXGI6/VxcXlx1MDAxMuOg3ZpcdTAwMDJ0XG6WgVx1MDAxMYw7qITY/MtHcvlRtTCVy89/XHUwMDFk2Fx1MDAxMJv/QXVggtHMRTCAPotJw4tcdTAwMDfSO/ri6kbpx1v/oHy+fPz88Lgmzubeb0nmXHUwMDEwZsBcdTAwMTBKpCZU94FcdTAwMGa7XHUwMDAw/Vx1MDAxNmBcdTAwMTQtKFKKWFx1MDAxMDOrKjAlJGKPTbAyZDzH1VDrbnAsXq7Kl1qrs8ZdsIy+5+NcdTAwMWRXbruHpzWobZRltVx1MDAxNXYuqD5mlaO9/Vx0tNtoP/JNODva6ZgnODhZXHRX7vjW53K0gsVcdTAwMTZ/JCpRrOtcdTAwMTkpaZY+/PPuaFx1MDAxNcnDumCOnlxu1otcdTAwMTWBcTvNSmBKa3am7GdnVVx1MDAwMzbER31EXHKYkCxz+sdmgjhBT1tcdTAwMTh4+aZzToEnKXGEsrVCXGZcdTAwMTksVf25L1x0zFx1MDAwMZDKXHUwMDA2yoxzPSjX5Ga3hWNX7DFcdTAwMDWKo1x0gFx1MDAxNFx1MDAxOErqoFx1MDAxOVSaaWWUMDpJf1FAjpxcdTAwMWNmVlx1MDAwMNZFq2CxXGJ78qmvfDpaXHUwMDFhLO/SXHUwMDFjiNLG1lGp+Oqdn2ViXHUwMDE4Llx1MDAxOIGBg1x1MDAwMmCCQ+LZXHUwMDBi5b7yoVvKLO/CuybzcdpB6ElDqVx1MDAxNFx1MDAwNohmn3tyO0uv7Suh0VFjXHUwMDBi8ffxXHUwMDAyXGIhs6e2hUShsG8jRVx1MDAxZGbc7k9b6ujBe3jY2Hrcba1cdLPjXHUwMDFkzdi4XHUwMDE1qP7iaNuwbzU3nLBcdTAwMDFSgdbOXHUwMDAxQrStuELkfmB1a9FF9MxWwaNGzDqA8I8qa1crtdtccvdCfDup1Fx1MDAwM1J396dA9OeGkEM2dFBPXHUwMDEwWECL04L03pxz5FDlmGzkSDkl5Fx1MDAxNKv+UoxcdTAwMDDGSXJyXHUwMDE54/mh47Or/lx1MDAxYWLxP6z6XHUwMDBiVOZcblx1MDAxMqQo1Fx1MDAxOGGKXHUwMDA3w99u7veO/fLVKWeN3VbraYtvm4c5XHUwMDA3XHUwMDFm+mZHcIyDpTJMx6ffX91cdTAwMTaSKGq3YEPk0fhsznTcVjLvhUxcdTAwMDOMgZnvfnS6slG5fdg/uEJd9Y/LnFc3Ksd/pzySjFx1MDAxOH5yMaOmwG1qpTB00rtzzqFcdTAwMDPaMdnQkeDAVKBTrPSLMqa7ZWi/4nzNbGq/htj7Sdd+cWmyIVx1MDAwN5JQu1a1eJCVz53nNYNEmMNcdTAwMTlGuJJcdTAwMTDDgffvXHUwMDE0oFxmdaRcdTAwMTZcdTAwMTjjaoVRp1x1MDAxOZw+mmBcdTAwMDbJOCCMUZJwgy5Jpm0hhFx1MDAwMbe0Y4ZgQHljXHUwMDBiP3r7b0hQo/ixT5c+KpyqsWVd0ih0XHUwMDFjSPPRoEZ7kpSyqsN44tFcdTAwMGJlj/KJZim7qFx1MDAwYjiFXHUwMDE0ofqqw0RCps+UPVrKVGr7Sqhz1NxC/H10s2ZU5s5BjFFcdTAwMWPzUTh4PrWaV6vGucPRbFx1MDAxMSYpKvfAKm5lwDFCITaowivIx+XFke1TxolmVlx1MDAxOMVT4mFcdTAwMDFcdTAwMGW39Y1GIErBJEsmUH2UlCNFx7+uWXst51x1MDAxMnainiB2XGKw5PJLaic9bEZcXOFVaEjUmCVf+WSklF3QlVx1MDAxNEk7SGmFIYBcdTAwMDZQXHUwMDEzwz73itAspbavQXVcdTAwMWXRpuV/K1x1MDAwMIPsJW2ca6kkXHUwMDFiIUI65N5cdTAwMGVpiy1cdTAwMTnenZZbT5VvlVx1MDAxM3ExW8Mmhld7Scfmy4TQXHUwMDAwXHUwMDE4gPTvjqFcdTAwMTh3hMUqdoPdXHUwMDA0M5utuZJ6opZr1/7hSWE3i0+r9lx1MDAxMilcdTAwMGLaIEHHMEzjwtD3bun4YdVe9y7dXGb8h/37L/5hsKb3g43640rRjFx1MDAwM/9xcv+1/nxSP/56015fuffPrlduP1fGgdHsxdVUgFGCY1RQXHUwMDE4T+ndOd94wuA9XHUwMDBmT5xOXHUwMDBlT/nJurTNLpLVXpTYRJ31NCMgasYph7HLvXpLROak4muIv8hcXOEyftFXvjfkMnPdXHUwMDE59jVcdTAwMTOKj7DHobtz0Vxcalxcr9HTXHUwMDAzXb/wNm+bZ8/e3LN8Y3fO0EaBVlQgw+pDL1x1MDAxOEQvVcyWR1x1MDAxYVx1MDAxZV/sPlx1MDAxYm8ojWGESP2+vVx1MDAxYj7MXHUwMDFidiqHoVe+8E7MQV2dtFdum5Xdtb+TN2RcInu/XfRcdTAwMTNcdTAwMTKdoSjuXHLTu3POXHUwMDAxZd1hXHUwMDFloMzkXHUwMDAwNVx0d8hcYjVcdTAwMTQ0+URcdTAwMGI5f1x1MDAxOW84xGF8gDfMzHdRqTPT+Fx1MDAwNlx1MDAxOLWhd/F8V74pm9dcImgllUOUNFx1MDAxYdWKoaPpX1xiqqh0tOXz1NhccnNIzjZH7922wFx1MDAxMVozSbjmWktqTErRoOSv+11cdJTHriZMbuJmP6pcdTAwMTSwWVVBTyXplc8nS32Jc8LRJNtcdEfVXVwiK2M5l7dcdTAwMTSTdIBLpYjm3e9bgTHXgubDutS3XHUwMDE2XHUwMDE0PVx1MDAwMZPC1lxc21R+MuslXHUwMDFjprlB3VVgR1MlJ1x1MDAxOD5T1mspW7W7p1x1MDAxM1pcdTAwMWQ1uFx1MDAxMH9cdTAwMWZzp6PY5PlgSlx1MDAxZs2fVYziu1Tm19/PhJvAcFx1MDAwM8fsvrCCXCI/wchnoJZTULtcdTAwMDeE5Izh8NiKz5x9Yaex0Vx1MDAxMVxiYlBcdTAwMGJgXrn+16PDcufMO79i4erezsHDt6WD2nzsczTq3lx1MDAxM2NxfVtlm8n1XHUwMDE5t7KoXHUwMDExguf07px3PKlcXDzpXHTiaVx1MDAxMlx1MDAxYlx1MDAxZFEgqFx1MDAxZDJe8vPRO1x1MDAxZI3l/H+9nY6GeItJ73SUidlcdTAwMWNcdTAwMGaImJVSk1x1MDAxMVxuXCI6wU1l47D98uOyeaafVn/slDfXZuxcdTAwMDJcdTAwMGKUWVxu4oDgXHUwMDE4fVx1MDAxYrtiU/av61x1MDAxNkY51FZZaqT5hKpY0elkfSCPfcFNXHUwMDBmsbEvOowqqi3t0yNtVjo+Ylx1MDAwMVx1MDAxOYJ6L2JcdTAwMGKvj1t2Sq+KXuogXHTtlPq1vnSHT+Nee6kojX0/8ygoXHKbrSyI9j3lIFx1MDAxZVx1MDAwYko6XHUwMDE2JmVOkZKynnyETVx1MDAwZfjT5Y/VJ7qp1lx1MDAxZlr8eV08Xla/VudcdTAwMWWRhDukXHUwMDFidFx1MDAxM40/419waVx1MDAxYjDMfoFcdTAwMTVgPIbRpCTZlVx1MDAxNkUy0NmAjH+bXrSwJPn1VGg60EqS6UxcdTAwMWVJSsW7PWjxumen1Esxldpep9W0ul557io9hrylRFx1MDAwMup7I2yW/LBTXHUwMDFhJCZxhzpdqL7/IV5RvPBGsVx1MDAxN91W6zjEcelFXHUwMDE3OOJ+7a1zI1FcdTAwMTZcdTAwMWZ873ElReWuui/batcyWFx1MDAxMHrdUOWvhb/+XHUwMDA3KtdcdTAwMDdDIn0= ByteEditor()BitSwitch(7)Label(\"7\") Switch() Switch.Changed(    value=True)ByteEditor()BitSwitch(7)Label(\"7\") Switch() BitSwitch.Changed(    value=True)BitSwitch.Changed(    value=True)Switch.Changed(    value=True)A. Switch sends Switch.Changed messageB. BitSwitch responds by sending BitSwitch.Changedto its parent"},{"location":"guide/widgets/#attributes-down","title":"Attributes down","text":"<p>We also want the switches to update if the user edits the decimal value.</p> <p>Since the switches are children of <code>ByteEditor</code> we can update them by setting their attributes directly. This is an example of \"attributes down\".</p> byte03.pyOutput byte03.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.geometry import clamp\nfrom textual.message import Message\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label, Switch\n\n\nclass BitSwitch(Widget):\n    \"\"\"A Switch with a numeric label above it.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    BitSwitch {\n        layout: vertical;\n        width: auto;\n        height: auto;\n    }\n    BitSwitch &gt; Label {\n        text-align: center;\n        width: 100%;\n    }\n    \"\"\"\n\n    class BitChanged(Message):\n        \"\"\"Sent when the 'bit' changes.\"\"\"\n\n        def __init__(self, bit: int, value: bool) -&gt; None:\n            super().__init__()\n            self.bit = bit\n            self.value = value\n\n    value = reactive(0)\n\n    def __init__(self, bit: int) -&gt; None:\n        self.bit = bit\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(str(self.bit))\n        yield Switch()\n\n    def watch_value(self, value: bool) -&gt; None:  # (1)!\n        \"\"\"When the value changes we want to set the switch accordingly.\"\"\"\n        self.query_one(Switch).value = value\n\n    def on_switch_changed(self, event: Switch.Changed) -&gt; None:\n        \"\"\"When the switch changes, notify the parent via a message.\"\"\"\n        event.stop()\n        self.value = event.value\n        self.post_message(self.BitChanged(self.bit, event.value))\n\n\nclass ByteInput(Widget):\n    \"\"\"A compound widget with 8 switches.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    ByteInput {\n        width: auto;\n        height: auto;\n        border: blank;\n        layout: horizontal;\n    }\n    ByteInput:focus-within {\n        border: heavy $secondary;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for bit in reversed(range(8)):\n            yield BitSwitch(bit)\n\n\nclass ByteEditor(Widget):\n    DEFAULT_CSS = \"\"\"\n    ByteEditor &gt; Container {\n        height: 1fr;\n        align: center middle;\n    }\n    ByteEditor &gt; Container.top {\n        background: $boost;\n    }\n    ByteEditor Input {\n        width: 16;\n    }\n    \"\"\"\n\n    value = reactive(0)\n\n    def validate_value(self, value: int) -&gt; int:  # (2)!\n        \"\"\"Ensure value is between 0 and 255.\"\"\"\n        return clamp(value, 0, 255)\n\n    def compose(self) -&gt; ComposeResult:\n        with Container(classes=\"top\"):\n            yield Input(placeholder=\"byte\")\n        with Container():\n            yield ByteInput()\n\n    def on_bit_switch_bit_changed(self, event: BitSwitch.BitChanged) -&gt; None:\n        \"\"\"When a switch changes, update the value.\"\"\"\n        value = 0\n        for switch in self.query(BitSwitch):\n            value |= switch.value &lt;&lt; switch.bit\n        self.query_one(Input).value = str(value)\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:  # (3)!\n        \"\"\"When the text changes, set the value of the byte.\"\"\"\n        try:\n            self.value = int(event.value or \"0\")\n        except ValueError:\n            pass\n\n    def watch_value(self, value: int) -&gt; None:  # (4)!\n        \"\"\"When self.value changes, update switches.\"\"\"\n        for switch in self.query(BitSwitch):\n            with switch.prevent(BitSwitch.BitChanged):  # (5)!\n                switch.value = bool(value &amp; (1 &lt;&lt; switch.bit))  # (6)!\n\n\nclass ByteInputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ByteEditor()\n\n\nif __name__ == \"__main__\":\n    app = ByteInputApp()\n    app.run()\n</code></pre> <ol> <li>When the <code>BitSwitch</code>'s value changed, we want to update the builtin <code>Switch</code> to match.</li> <li>Ensure the value is in a the range of a byte.</li> <li>Handle the <code>Input.Changed</code> event when the user modified the value in the input.</li> <li>When the <code>ByteEditor</code> value changes, update all the switches to match.</li> <li>Prevent the <code>BitChanged</code> message from being sent.</li> <li>Because <code>switch</code> is a child, we can set its attributes directly.</li> </ol> <p> ByteInputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a100\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0\u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <ul> <li>When the user edits the input, the Input widget sends a <code>Changed</code> event, which we handle with <code>on_input_changed</code> by setting <code>self.value</code>, which is a reactive value we added to <code>ByteEditor</code>.</li> <li>If the value has changed, Textual will call <code>watch_value</code> which sets the value of each of the eight switches. Because we are working with children of the <code>ByteEditor</code>, we can set attributes directly without going via a message.</li> </ul>"},{"location":"guide/workers/","title":"Workers","text":"<p>In this chapter we will explore the topic of concurrency and how to use Textual's Worker API to make it easier.</p> <p>The Worker API was added in version 0.18.0</p>"},{"location":"guide/workers/#concurrency","title":"Concurrency","text":"<p>There are many interesting uses for Textual which require reading data from an internet service. When an app requests data from the network it is important that it doesn't prevent the user interface from updating. In other words, the requests should be concurrent (happen at the same time) as the UI updates.</p> <p>This is also true for anything that could take a significant time (more than a few milliseconds) to complete. For instance, reading from a subprocess or doing compute heavy work.</p> <p>Managing this concurrency is a tricky topic, in any language or framework. Even for experienced developers, there are gotchas which could make your app lock up or behave oddly. Textual's Worker API makes concurrency far less error prone and easier to reason about.</p>"},{"location":"guide/workers/#workers_1","title":"Workers","text":"<p>Before we go into detail, let's see an example that demonstrates a common pitfall for apps that make network requests.</p> <p>The following app uses httpx to get the current weather for any given city, by making a request to wttr.in.</p> weather01.pyweather.tcssOutput weather01.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        await self.update_weather(message.value)\n\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> weather.tcss<pre><code>Input {\n    dock: top;\n    width: 100%;\n}\n\n#weather-container {\n    width: 100%;\n    height: 1fr;\n    align: center middle;\n    overflow: auto;\n}\n\n#weather {\n    width: auto;\n    height: auto;\n}\n</code></pre> <p> WeatherApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aEnter\u00a0a\u00a0City\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>If you were to run this app, you should see weather information update as you type. But you may find that the input is not as responsive as usual, with a noticeable delay between pressing a key and seeing it echoed in screen. This is because we are making a request to the weather API within a message handler, and the app will not be able to process other messages until the request has completed (which may be anything from a few hundred milliseconds to several seconds later).</p> <p>To resolve this we can use the run_worker method which runs the <code>update_weather</code> coroutine (<code>async def</code> function) in the background. Here's the code:</p> weather02.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.run_worker(self.update_weather(message.value), exclusive=True)\n\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>This one line change will make typing as responsive as you would expect from any app.</p> <p>The <code>run_worker</code> method schedules a new worker to run <code>update_weather</code>, and returns a Worker object. This happens almost immediately, so it won't prevent other messages from being processed. The <code>update_weather</code> function is now running concurrently, and will finish a second or two later.</p> <p>Tip</p> <p>The Worker object has a few useful methods on it, but you can often ignore it as we did in <code>weather02.py</code>.</p> <p>The call to <code>run_worker</code> also sets <code>exclusive=True</code> which solves an additional problem with concurrent network requests: when pulling data from the network, there is no guarantee that you will receive the responses in the same order as the requests. For instance, if you start typing \"Paris\", you may get the response for \"Pari\" after the response for \"Paris\", which could show the wrong weather information. The <code>exclusive</code> flag tells Textual to cancel all previous workers before starting the new one.</p>"},{"location":"guide/workers/#work-decorator","title":"Work decorator","text":"<p>An alternative to calling <code>run_worker</code> manually is the work decorator, which automatically generates a worker from the decorated method.</p> <p>Let's use this decorator in our weather app:</p> weather03.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.update_weather(message.value)\n\n    @work(exclusive=True)\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>The addition of <code>@work(exclusive=True)</code> converts the <code>update_weather</code> coroutine into a regular function which when called will create and start a worker. Note that even though <code>update_weather</code> is an <code>async def</code> function, the decorator means that we don't need to use the <code>await</code> keyword when calling it.</p> <p>Tip</p> <p>The decorator takes the same arguments as <code>run_worker</code>.</p>"},{"location":"guide/workers/#worker-return-values","title":"Worker return values","text":"<p>When you run a worker, the return value of the function won't be available until the work has completed. You can check the return value of a worker with the <code>worker.result</code> attribute which will initially be <code>None</code>, but will be replaced with the return value of the function when it completes.</p> <p>If you need the return value you can call worker.wait which is a coroutine that will wait for the work to complete. But note that if you do this in a message handler it will also prevent the widget from updating until the worker returns. Often a better approach is to handle worker events which will notify your app when a worker completes, and the return value is available without waiting.</p>"},{"location":"guide/workers/#cancelling-workers","title":"Cancelling workers","text":"<p>You can cancel a worker at any time before it is finished by calling Worker.cancel. This will raise a CancelledError within the coroutine, and should cause it to exit prematurely.</p>"},{"location":"guide/workers/#worker-errors","title":"Worker errors","text":"<p>The default behavior when a worker encounters an exception is to exit the app and display the traceback in the terminal. You can also create workers which will not immediately exit on exception, by setting <code>exit_on_error=False</code> on the call to <code>run_worker</code> or the <code>@work</code> decorator.</p>"},{"location":"guide/workers/#worker-lifetime","title":"Worker lifetime","text":"<p>Workers are managed by a single WorkerManager instance, which you can access via <code>app.workers</code>. This is a container-like object which you iterate over to see your active workers.</p> <p>Workers are tied to the DOM node (widget, screen, or app) where they are created. This means that if you remove the widget or pop the screen where they are created, then the tasks will be cleaned up automatically. Similarly if you exit the app, any running tasks will be cancelled.</p> <p>Worker objects have a <code>state</code> attribute which will contain a WorkerState enumeration that indicates what the worker is doing at any given time. The <code>state</code> attribute will contain one of the following values:</p> Value Description PENDING The worker was created, but not yet started. RUNNING The worker is currently running. CANCELLED The worker was cancelled and is no longer running. ERROR The worker raised an exception, and <code>worker.error</code> will contain the exception. SUCCESS The worker completed successful, and <code>worker.result</code> will contain the return value. <p>Workers start with a <code>PENDING</code> state, then go to <code>RUNNING</code>. From there, they will go to <code>CANCELLED</code>, <code>ERROR</code> or <code>SUCCESS</code>.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVbaVPbSlx1MDAxNv2eX8EwX2aqQqf3JVVTU2BcdTAwMWN2YzDLkFevUsKWjWLZciSZ7VX++7uSwdq8gnFMxkmxqFvS7dv33HNud/PXh7W19fChZ69/Xlu37+uW6zR86279Y3T91vZcdTAwMDPH60JcdTAwMTONf1x1MDAwZry+X4973oRhL/j86VPH8tt22HOtuo1unaBvuUHYbzhcdTAwMWWqe51PTmh3gv9GXytWx/5Pz+s0Qlx1MDAxZiUv2bBcdTAwMWJO6PmDd9mu3bG7YVx1MDAwME//XHUwMDAzfl9b+yv+mrLOt+uh1W25dnxD3JRcdTAwMTjIhM5frXjd2FiKXHUwMDE10YRiTIY9nGBcdTAwMWLeXHUwMDE32lxyaG6CzXbSXHUwMDEyXVq3znrXZLtd3dpUXHUwMDBm21xyfSrtRilIXtt0XFy3XHUwMDE2PrhcdTAwMDNXWPWbvp8yKlxifa9tXzqN8Fx1MDAwNtpJ7vrwvoZcdTAwMTXcgFx1MDAwMcNm3+u3brp2XHUwMDEwZG7yelbdXHRcdTAwMWbgmsTDi1x1MDAwMy98Xkuu3MNvgjDEXHUwMDE1JpozKolcImbYXHUwMDFh3U6MRsxAo1CYXHUwMDExKnJmlTxcdTAwMTdmXHUwMDAyzPonjj+JXddWvd1cdTAwMDLjuo2kXHUwMDBmXHUwMDExlnXdVCrpdfc8XFylkZGaYENcdTAwMTjWwrBkWm5sp3VcdTAwMTNCXHUwMDFmRZDWXFxJIdNm2PFsXHUwMDEww6lcdTAwMTBaXHUwMDEwOWyJXt7ba8SR8WfaXd3Gk7ueQyVcdFx1MDAxNvZ05WcyjKh/OVx1MDAxZmTpQMtcdTAwMDRbaN+Hw9GlXCKDXHUwMDFlYm653vbRySU+7SmveVx1MDAxZPh368N+Pz+Ofuzg5tbX3bPbg4rg2K0+bjaCutNcdTAwMGV19i3P77d830s/9+mnZPz9XsNcdTAwMWFcdTAwMDQwkVx1MDAxYVx1MDAwYmaEMJypYbvrdNvQ2O27bnLNq7eTmP+QMrhcdTAwMDC2zPjTiYCbcTgjlElCXHKZXHUwMDFkZqOduViYXHUwMDA1XHUwMDFlJJtFokxwxFx1MDAwNadMa0MkTsVpdDulXHUwMDE0acYphVxizob3/ChcdTAwMGJ9q1x1MDAxYvQsXHUwMDFmXHUwMDAytogzo4q4oiyPJsNcZotiY1x1MDAxZTBlXCKmgJpFXHUwMDA2YDLRXjesOY+DZJ25+sXqOO5DZq7iyFx1MDAwNPdUy5XtvcpO2oWBXHIvjUNRZbpvuk4rXG7e9TpcZsP2M3FcdTAwMWQ6QEfDXHUwMDBlXHUwMDFkp9FIXHUwMDEzTFx1MDAxZGyw4Jn+3iy84PlOy+la7lnOxIlIm0hrVLPxcMOGXG6qUi6fhrcq/966XGKCbvussnlMSuLhuH9cdTAwMTj+WryZ6aymXHUwMDExQFx04lx1MDAwYuBmXGalXHUwMDE5vHFsXHUwMDEwIJFTpVx1MDAxOFx1MDAwNN/rWFxyUHttyzdhNcKYoVLNXHUwMDA1xCWy2rfqZVmwb3T/ZrfU8qonrTPaO1pcdTAwMDKrTXxuXHUwMDE4XHUwMDFjXHUwMDE4uSVlu3K811xid75x9ztcclx1MDAxN/Dcsz0lws7Z8Vx1MDAxN1BBzdOr+uFV6bv1vliYXHUwMDE4OjYtQHxqRjgzM6eF0bO/4mlBYkQ4XHUwMDA2b3NNOc2JXc5cdTAwMThcdTAwMTJcdTAwMWFcdTAwMDNgXHUwMDA1l/p1aWEyXHKLYlwiKNKwXHUwMDAyNc5cck9N2u9Dw6fnlcqyaXhcbo/lafjZxJfTME/JrVx1MDAxY95cdTAwMDRcdTAwMTPGXGLK2Mxw278qNbulSvXm6urkXFxaTJ5WW1x1MDAwZr9cdTAwMTZuXHUwMDA0T8NcdTAwMWI1XG5cdTAwMTjQ4NE0XGakh0BcZnNJoHpTUGy/ioeb1jXGYvEsrOHNUFx1MDAxZq8qXHTLi3ur6e5cXDx6m1++063+5Vx1MDAxMS6fLoEsV4XUOFx1MDAxZLuEXHUwMDAzYWUwwXNw2mhnrjjIXHUwMDE4VVBbMjya1GAukMRU86j4pK9cdTAwMDTZRFYjqfQ/gdaI0Vx1MDAwNv5cdTAwMTP2O/JaabNSKlx1MDAxZlx1MDAxZZa3l8psU7ghz2yJkS/nNkHEONhRoYWSxMzObf2gVz06bzfZ0ebBl1p5V5VZzVl12Fx1MDAwMXsjQoFcdTAwMWSE0YRcdTAwMDNcdTAwMDBz3CZcdTAwMDCUUlGJXHUwMDE1YFLr18BcdTAwMGW4TURF+1vUmIxSRoRKXHJ3pehtyznY3WnKq9ZuhXnNvc6J7LR+zEpvj03F5f79t83H8I5cXO79aFx1MDAwNY1cdTAwMGLzzuiN87FcdTAwMWFSSC4wobOv5Ix25qrjTClEgFtkviqLYaZcZpLcQPmqtVSvhNlEdlOkXGKsUeRmKMSHTs3a70Nu5dPT49OlXHUwMDEy21x1MDAxNGLIXHUwMDEz28DAl5Oa5HJcdTAwMWPYiIZMbrjWc+xT6KteKdxix51wrytkTe5vXf7iXHUwMDA1kuloU1x1MDAwMiNKXHUwMDE0ZYYpo3VKXFxcdTAwMGZYTSHMXHUwMDE0V9Fmm3ntyinHdSzeZjfQRHeLXHUwMDE1Ldno0f1t7+7r8WG5XSv/j11cXJrKJf8/WodcdTAwMTSpdbpcdTAwMDLMXGKIJVx1MDAwZVbMXHUwMDBls5HeXFx1mFx1MDAxOYZcdTAwMTRwt2FcdTAwMDaUY3pjfVCzXHUwMDExRKmJlmSNfu1cdTAwMDbF5JVIWoTWXGJWXHUwMDAzuGtcIomeRyS+XHUwMDE3Vqudl0rlWm2pvDaFXHUwMDFh8rz2bOJEtFxy0D5cdTAwMDJuTI9dIYlyK+irOUq1yds2v1x1MDAwNG16XHUwMDFh2CRmQFx1MDAxNlx1MDAxMMRcbpiBM5JcdTAwMDVcdTAwMWKUcIjA1Vx1MDAxMXSy2EpcckF0S0O0UlxmftIjkFx1MDAwNypcdTAwMTeIj0FCgFxmSDiWuoBEbahkOj2lL6E2+lbU5tbUj6ZcdTAwMWSow2qtVf8udv3b6ld/PlxugrQok3icXHUwMDAz/UFo+eGW02043VZ21E+nxGbZjY/zRb1cdTAwMWa5YFx1MDAwMyNcZlLEKFx1MDAxZS1RR3pcIknEkd+tXpRAkZagilx1MDAxNOFxoi741e42pps0eWdcImdcdTAwMTKEXHUwMDEwN8JoZVx1MDAwNFCE5Fx1MDAwNZM0opoorJRkUUlEdMEo11xuwpLX6TghuL7qOd0w7+LYl5tRRrmxrUa+XHUwMDE1XHUwMDA2lW7Lp55e9MRsXHUwMDEw/ZFcblx1MDAxNZyOXHUwMDFiPPz5z48je2+MxU30KVwiJnneh/T3eTWKXHUwMDFjL1EkOJ5cdTAwMDPIZ19WXHUwMDFljYrVTprgUmSUVlB6Q+LkJLt1w6hBhEJcdTAwMWNySplk9M2Wt/hsXHUwMDAyRVx1MDAxMYh3upyiW2GskvG+tTy59Py27aNcdTAwMTiQ//r3UlXKXHUwMDE0rs+rlJylL1x1MDAxMytqwnaOwVQxSMazXHUwMDAzb/L+1orWXHUwMDA2QktcdTAwMDS9KDGKZlx1MDAwNUl8SEFcdTAwMWLEhVEkOlx1MDAxN/TKQ1xuXHUwMDEzgEdcdEZSYoVcdTAwMTnoJUzFiNUvXCI5YoRcdTAwMDEzsvyxxSdUQtbGMFx1MDAwMjLPTs9cdTAwMTLFyr7TOvH6cqu822w/XFw2N1x1MDAxZZ3z8423rZfnXHUwMDE1K/MoXHUwMDAzwVxyg6mimkPZyLRK9XpcdTAwMTZcdTAwMDZES0HZy4XK5I2mrDk0OlJcdTAwMDRpXHUwMDE5XmhcdTAwMDCzpGBcdTAwMGVFYKRkw1N471xcplx1MDAwMC5ZdFTAsKfD8un7pVx1MDAwMFFmXHUwMDE0Y4Nl6uFgxz9vLFx1MDAwMKNPXHUwMDAxelx1MDAwYlI9avwxbcJcdTAwMTVhkHJm321cdTAwMThccq9cdTAwMTVPvoyKaFx1MDAxYUFKgtjUXHUwMDAw70zyXHUwMDE1nCFQPVxcgNBkmYXJRcueROJM3G3gWlExVzH4XpZl7lx1MDAwNmqibkH8uUtcdTAwMTY+U2RDXvjkTX2Z8oFcdTAwMDJzbM0ho9NcdTAwMWRcdTAwMDC/2cE3eZl4NU9nSmZcdTAwMDBdRFx1MDAxMKi2WeaoSix8XGaBXHUwMDFjXG7131Nd+2bSh1x1MDAxOIOUXHUwMDE22DBcdTAwMDI1XHUwMDA1o4pcdTAwMTexSCTUnURjXG4l0lx1MDAxOPHDuVx1MDAwMv7jYkXFz87Rdui2+4dcdTAwMWLbvavHg1x1MDAwNt1cdTAwMGZvN3bfqfjBXGLIScnon+QwJSbVZ6A1SLSWQyeJjZn0z+R124xFQDWQnomKTlVcdTAwMGLNaVH/cKRcdTAwMTmTRFx1MDAwM5njhMLfp/whSiCjwfWEXHUwMDE4XHUwMDEyXHUwMDBmJ6N+XGZcIuB6XCJcdTAwMDfbedPVz3hcYsatXHUwMDA18C1I/tDxxadcdTAwMDAsQ1Jis2//jlx1MDAwNthqZ2ClXHUwMDE1UpSDqmC4eNhCcI1cZsWYXHUwMDE3Nq1cdTAwMTabgMVMx+OBXHUwMDA0XGbEXHUwMDEz/lx1MDAxZE9abHtd+1x1MDAxZkuVPFP0Ql7yXGZcZnyZ0GF6rM5cdTAwMTGR8Dacz46yyUe8Vlx1MDAxM2VcdTAwMTLYSGGsoWRcdTAwMDRIXHSVXHUwMDA1XHUwMDE5jir55JBcdTAwMDV/I5BcdTAwMTFgKEJcdTAwMTWWUF1CYoM0O0LlXGKo0bnCQGD5fehcdTAwMDFcdTAwMDbh2VBcdTAwMDeJV56NfzONU71t7Vx1MDAxY7Q23E1v1z5o3oqT+0M9527UojROnpmna43JZ5/WsptCoJaJplx1MDAxNGzlXHUwMDAyXHUwMDE0NC/uXG5RJGT0Z708PqKm3/1yy9jwjT5CI1x1MDAwNlU8V0+nb2dYb1x1MDAwMUhcbqKMUVx1MDAxOL5CVDOVfmBcdTAwMDFcdFx1MDAwYlJcdTAwMWNi/DZcdTAwMTOL8iCAa/ZcXDg63Fc7XHUwMDE3gnpD0Z9CcfB45NnseTPBXHUwMDE1YuD1p02mV/+F0LhkaEaUeEXFQZXBkkv6Oy63lO/rdi+MgnKZqmNcbntcdTAwMTfOd1x1MDAwZY1cdTAwMWOA7cNcdTAwMTOc161er1x1MDAxNoL/hulcdTAwMTRmxmk8OSHx2fqtY99tjYqM+Fx1MDAxMz01XHUwMDA2cFx1MDAwNFx1MDAxNTvmqp9cdTAwMWZ+/lxycIktXGYifQ== PENDINGRUNNINGCANCELLEDERRORSUCCESSWorker.start()worker.cancel()Done!Exception"},{"location":"guide/workers/#worker-events","title":"Worker events","text":"<p>When a worker changes state, it sends a Worker.StateChanged event to the widget where the worker was created. You can handle this message by defining an <code>on_worker_state_changed</code> event handler. For instance, here is how we might log the state of the worker that updates the weather:</p> weather04.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\nfrom textual.worker import Worker\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.update_weather(message.value)\n\n    @work(exclusive=True)\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n    def on_worker_state_changed(self, event: Worker.StateChanged) -&gt; None:\n        \"\"\"Called when the worker state changes.\"\"\"\n        self.log(event)\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>If you run the above code with <code>textual</code> you should see the worker lifetime events logged in the Textual console.</p> <pre><code>textual run weather04.py --dev\n</code></pre>"},{"location":"guide/workers/#thread-workers","title":"Thread workers","text":"<p>In previous examples we used <code>run_worker</code> or the <code>work</code> decorator in conjunction with coroutines. This works well if you are using an async API like <code>httpx</code>, but if your API doesn't support async you may need to use threads.</p> <p>What are threads?</p> <p>Threads are a form of concurrency supplied by your Operating System. Threads allow your code to run more than a single function simultaneously.</p> <p>You can create threads by setting <code>thread=True</code> on the <code>run_worker</code> method or the <code>work</code> decorator. The API for thread workers is identical to async workers, but there are a few differences you need to be aware of when writing code for thread workers.</p> <p>The first difference is that you should avoid calling methods on your UI directly, or setting reactive variables. You can work around this with the App.call_from_thread method which schedules a call in the main thread.</p> <p>The second difference is that you can't cancel threads in the same way as coroutines, but you can manually check if the worker was cancelled.</p> <p>Let's demonstrate thread workers by replacing <code>httpx</code> with <code>urllib.request</code> (in the standard library). The <code>urllib</code> module is not async aware, so we will need to use threads:</p> weather05.py<pre><code>from urllib.parse import quote\nfrom urllib.request import Request, urlopen\n\nfrom rich.text import Text\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\nfrom textual.worker import Worker, get_current_worker\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.update_weather(message.value)\n\n    @work(exclusive=True, thread=True)\n    def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        worker = get_current_worker()\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{quote(city)}\"\n            request = Request(url)\n            request.add_header(\"User-agent\", \"CURL\")\n            response_text = urlopen(request).read().decode(\"utf-8\")\n            weather = Text.from_ansi(response_text)\n            if not worker.is_cancelled:\n                self.call_from_thread(weather_widget.update, weather)\n        else:\n            # No city, so just blank out the weather\n            if not worker.is_cancelled:\n                self.call_from_thread(weather_widget.update, \"\")\n\n    def on_worker_state_changed(self, event: Worker.StateChanged) -&gt; None:\n        \"\"\"Called when the worker state changes.\"\"\"\n        self.log(event)\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>In this example, the <code>update_weather</code> is not asynchronous (i.e. a regular function). The <code>@work</code> decorator has <code>thread=True</code> which makes it a thread worker. Note the use of get_current_worker which the function uses to check if it has been cancelled or not.</p> <p>Important</p> <p>Textual will raise an exception if you add the <code>work</code> decorator to a regular function without <code>thread=True</code>.</p>"},{"location":"guide/workers/#posting-messages","title":"Posting messages","text":"<p>Most Textual functions are not thread-safe which means you will need to use <code>call_from_thread</code> to run them from a thread worker. An exception would be post_message which is thread-safe. If your worker needs to make multiple updates to the UI, it is a good idea to send custom messages and let the message handler update the state of the UI.</p>"},{"location":"how-to/","title":"How To","text":"<p>Welcome to the How To section.</p> <p>Here you will find How To articles which cover various topics at a higher level than the Guide or Reference. We will be adding more articles in the future. If there is anything you would like to see covered, open an issue in the Textual repository!</p>"},{"location":"how-to/center-things/","title":"Center things","text":"<p>If you have ever needed to center something in a web page, you will be glad to know it is much easier in Textual.</p> <p>This article discusses a few different ways in which things can be centered, and the differences between them.</p>"},{"location":"how-to/center-things/#aligning-widgets","title":"Aligning widgets","text":"<p>The align rule will center a widget relative to one or both edges. This rule is applied to a container, and will impact how the container's children are arranged. Let's see this in practice with a trivial app containing a Static widget:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, World!\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's the output:</p> <p> CenterApp Hello,\u00a0World! </p> <p>The container of the widget is the screen, which has the <code>align: center middle;</code> rule applied. The <code>center</code> part tells Textual to align in the horizontal direction, and <code>middle</code> tells Textual to align in the vertical direction.</p> <p>The output may surprise you. The text appears to be aligned in the middle (i.e. vertical edge), but left aligned on the horizontal. This isn't a bug \u2014 I promise. Let's make a small change to reveal what is happening here. In the next example, we will add a background and a border to our text:</p> <p>Tip</p> <p>Adding a border is a very good way of visualizing layout issues, if something isn't behaving as you would expect.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, World!\", id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>The static widget will now have a blue background and white border:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHello,\u00a0World!\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note the static widget is as wide as the screen. Since the widget is as wide as its container, there is no room for it to move in the horizontal direction.</p> <p>Info</p> <p>The <code>align</code> rule applies to widgets, not the text.</p> <p>In order to see the <code>center</code> alignment, we will have to make the widget smaller than the width of the screen. Let's set the width of the Static widget to <code>auto</code>, which will make the widget just wide enough to fit the content:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, World!\", id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this now, you should see the widget is aligned on both axis:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHello,\u00a0World!\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"how-to/center-things/#aligning-text","title":"Aligning text","text":"<p>In addition to aligning widgets, you may also want to align text. In order to demonstrate the difference, lets update the example with some longer text. We will also set the width of the widget to something smaller, to force the text to wrap.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's what it looks like with longer text:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eCould\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258eterminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u258a \u258eclassified\u00a0address.\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note how the widget is centered, but the text within it is flushed to the left edge. Left aligned text is the default, but you can also center the text with the text-align rule. Let's center align the longer text by setting this rule:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n        text-align: center;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this, you will see that each line of text is individually centered:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u00a0Could\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258e\u00a0\u00a0\u00a0terminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0classified\u00a0address.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>You can also use <code>text-align</code> to right align text or justify the text (align to both edges).</p>"},{"location":"how-to/center-things/#aligning-content","title":"Aligning content","text":"<p>There is one last rule that can help us center things. The content-align rule aligns content within a widget. It treats the text as a rectangular region and positions it relative to the space inside a widget's border.</p> <p>In order to see why we might need this rule, we need to make the Static widget larger than required to fit the text. Let's set the height of the Static widget to 9 to give the content room to move:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n        height: 9;\n        text-align: center;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's what it looks like with the larger widget:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u00a0Could\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258e\u00a0\u00a0\u00a0terminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0classified\u00a0address.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Textual aligns a widget's content to the top border by default, which is why the space is below the text. We can tell Textual to align the content to the center by setting <code>content-align: center middle</code>;</p> <p>Note</p> <p>Strictly speaking, we only need to align the content vertically here (there is no room to move the content left or right) So we could have done <code>content-align-vertical: middle;</code></p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n        height: 9;\n        text-align: center;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this now, the content will be centered within the widget:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258e\u258a \u258e\u00a0Could\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258e\u00a0\u00a0\u00a0terminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0classified\u00a0address.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"how-to/center-things/#aligning-multiple-widgets","title":"Aligning multiple widgets","text":"<p>It's just as easy to align multiple widgets as it is a single widget. Applying <code>align: center middle;</code> to the parent widget (screen or other container) will align all its children.</p> <p>Let's create an example with two widgets. The following code adds two widgets with auto dimensions:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    .words {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"How about a nice game\", classes=\"words\")\n        yield Static(\"of chess?\", classes=\"words\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>This produces the following output:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHow\u00a0about\u00a0a\u00a0nice\u00a0game\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eof\u00a0chess?\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>We can center both those widgets by applying the <code>align</code> rule as before:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    .words {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"How about a nice game\", classes=\"words\")\n        yield Static(\"of chess?\", classes=\"words\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's the output:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHow\u00a0about\u00a0a\u00a0nice\u00a0game\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eof\u00a0chess?\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note how the widgets are aligned as if they are a single group. In other words, their position relative to each other didn't change, just their position relative to the screen.</p> <p>If you do want to center each widget independently, you can place each widget inside its own container, and set <code>align</code> for those containers. Textual has a builtin <code>Center</code> container for just this purpose.</p> <p>Let's wrap our two widgets in a <code>Center</code> container:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    .words {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Center():\n            yield Static(\"How about a nice game\", classes=\"words\")\n        with Center():\n            yield Static(\"of chess?\", classes=\"words\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this, you will see that the widgets are centered relative to each other, not just the screen:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHow\u00a0about\u00a0a\u00a0nice\u00a0game\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eof\u00a0chess?\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"how-to/center-things/#summary","title":"Summary","text":"<p>Keep the following in mind when you want to center content in Textual:</p> <ul> <li>In order to center a widget, it needs to be smaller than its container.</li> <li>The <code>align</code> rule is applied to the parent of the widget you want to center (i.e. the widget's container).</li> <li>The <code>text-align</code> rule aligns text on a line by line basis.</li> <li>The <code>content-align</code> rule aligns content within a widget.</li> <li>Use the <code>Center</code> container if you want to align multiple widgets relative to each other.</li> <li>Add a border if the alignment isn't working as you would expect.</li> </ul> <p>If you need further help, we are here to help.</p>"},{"location":"how-to/design-a-layout/","title":"Design a Layout","text":"<p>This article discusses an approach you can take when designing the layout for your applications.</p> <p>Textual's layout system is flexible enough to accommodate just about any application design you could conceive of, but it may be hard to know where to start. We will go through a few tips which will help you get over the initial hurdle of designing an application layout.</p>"},{"location":"how-to/design-a-layout/#tip-1-make-a-sketch","title":"Tip 1. Make a sketch","text":"<p>The initial design of your application is best done with a sketch. You could use a drawing package such as Excalidraw for your sketch, but pen and paper is equally as good.</p> <p>Start by drawing a rectangle to represent a blank terminal, then draw a rectangle for each element in your application. Annotate each of the rectangles with the content they will contain, and note wether they will scroll (and in what direction).</p> <p>For the purposes of this article we are going to design a layout for a Twitter or Mastodon client, which will have a header / footer and a number of columns.</p> <p>Note</p> <p>The approach we are discussing here is applicable even if the app you want to build looks nothing like our sketch!</p> <p>Here's our sketch:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daW9cdTAwMWK7kv1+f0WQ92VcdTAwMDa46ktcdTAwMTbJXCJ5gcHAi1x1MDAxY1mOl8iKt8GDoaUtyda+eHvIf5+ivKjVUsstW7JbuTaQxGktzWafOudcdTAwMTRZTf7njy9fvvbv2v7Xv7989W9LhXqt3C3cfP3TXHUwMDFkv/a7vVqrSS/B8P+91qBbXHUwMDFhvrPa77d7f//1V6PQvfL77Xqh5HvXtd6gUO/1XHUwMDA35VrLK7VcdTAwMWF/1fp+o/e/7u+9QsP/n3arUe53vdFJUn651m91XHUwMDFmzuXX/Ybf7Pfo2/+P/v/ly3+Gf1x1MDAwN1rX9Uv9QrNS94dcdTAwMWZcdTAwMTi+NGogZ0aFXHUwMDBm77Waw9ZyLoxGxVxyPL+j1tukXHUwMDEz9v0yvXxBjfZHr7hDX1x1MDAwZnL9dT+3q/ay56WbXCK2djHdXHUwMDFkjM57UavXXHUwMDBm+3f1YbtK3Vavl6pcdTAwMTb6peroXHUwMDFkvX63deVcdTAwMWbXyv3qU/dcdTAwMDWOP3+216KuXHUwMDE4farbXHUwMDFhVKpNv+d6gT9cdTAwMWZttVx1MDAwYqVa/254lez56ENX/P1ldOSW/pdC4Vx0LY1VqLW1KtAr7lx1MDAwYkAoXHUwMDBmhFx1MDAxNKhcdTAwMDVarahfQi3baNXpjlDL/sWGP6O2XHUwMDE1XHUwMDBipatcbjWwWX5+T79baPbahS7dt9H7blx1MDAxZa9ZSemhcCdjinM+akfVr1WqfXqHQOZcdTAwMTnOrJQohLs9OGqMP7w1XHUwMDFjjNCopVx1MDAxNs+vuCa0t8tDnPw72HHN8mPHNVx1MDAwN/X6qNXuhXRcdTAwMDBbo89cZtrlwlx1MDAwM1x1MDAwMjhcdTAwMWFcdIpJ1Fxio1x1MDAwZanXmlfhr6u3Slcj0Fxmj/7681x1MDAxNXDVKlx1MDAxYa1WcVx1MDAwNIlcdTAwMThcdTAwMWKsuVLn5367sL63s3+Lza2fXHUwMDA3nZ3tTlx1MDAwNFhDgPtImFx1MDAxYcGVtIpxJjhBIIRT6Vx1MDAxOaUlgcJcdTAwMDJKi8vEqfBcdTAwMThHXHUwMDA1dD6urTaTQFx1MDAwNeMhMiFccjJAQaCeXHUwMDAwKt0zJYGuZvVw6tfrtXZvKkpxXHUwMDA2p1x1MDAxYZCcI1cmNkzbP86OS+lstssvc9f5+3TqrtG8fVxyTPn7wVRxz1xuhdTxQljOQIbolDjOMCMl11x1MDAwZcqgw1x1MDAxMTRcdTAwMTdM/3VRUKBgXHUwMDEyolxceJJcdTAwMDEoi0D/SGPkJEY5eFxuKVKISFx1MDAxOVxiXHUwMDAxUocxyql9ilNcdTAwMWL5b1x1MDAwNVItbFx1MDAxNEi1QXfNXHUwMDEwX/dP1jrpu8ZB7qC4tnXT2upvna3jTcIxXG7KY9TdyLnhlsBcdTAwMDEhiFxuT1x1MDAxObRkXG4kUZhV8o1cdTAwMTAtMqaWXHUwMDA1Uc1cdTAwMTXpgeC/XHUwMDE5Qq2IQijnjJSFS81iQ7TeSbdTV1x1MDAxNexs1upXWLrrb53UXHUwMDBlk1xyUVx1MDAxMljgXHUwMDAyQWjBmWRWh1x1MDAxMFxujmQl3Vx1MDAxNVxyxLVv41BcdTAwMGVFY3BZXHUwMDAwpcsgqkcuV1DoZ+dPKlx1MDAxMqPu1iihXHUwMDAzb3hcdKLr37ZcbrsldbLV2V1vnt3+OL6pXHUwMDFjNJJcctFcdTAwMTTlXCKk4lZcdTAwMTFFcnBJyThGXHUwMDExXHQ+hFxmTTTKJcOlYFRJ5oym4Vx1MDAxNCnaQiBOXHUwMDAyOZMnNaekytphO0CFIUquTJGLNYrNXHUwMDAx0SewjOBcIlx1MDAxZY/8ikbu82dGn1x1MDAwZcCt79+O3HZcdTAwMDBcdTAwMWPd9mG1cbB9tj/YK+VzlbXWgVx1MDAxOdx9fX7fr8ffosJCXGImjTLWLiosxtpcdTAwMTmMXGJcdTAwMTNcdTAwMTVcdTAwMTCczs5dvqBiR8T0i55cdTAwMWVcdTAwMTHVQqk66PpcdTAwMWZcdTAwMWZcdTAwMTNcXCO5W+JKQIK+YTLE21x1MDAxYTxcdTAwMDdB4nNcdTAwMTlcbpnXXHUwMDA0XHUwMDA1xVx1MDAxZbuYYn4p8oBcdTAwMTPaXHUwMDE5p1x1MDAwZSeRmJafTVx1MDAwNoFcdTAwMDWuyZ3PXHUwMDE1XHUwMDA0r+Pp11x1MDAwMHJ041vN/mHt3vU9sLGjW4VGrX43du+GSKWuyviFst/9OnZ8rV6rONR+LVF7gy9cdTAwMTJ2+7VSof78hkatXFxcdTAwMGVqQIlOVqg1/e52XHUwMDFj7m51a5Vas1DPR7SFrt3PPOupXHUwMDE3uDPFQs93r1x1MDAwZVx1MDAwM+j1Qlx1MDAwNVx1MDAxOJmTkns0QltcdTAwMTN/5GRtc6O+M2Bddn/XuK/YfL5/lc68LizfcexEXHUwMDE5j5NRkoxsfUhcdTAwMDPcN1xihp7ipGQ8XHUwMDE4XHUwMDE3XHUwMDBiXHUwMDFlNeGKuEFScvEkiKPrXHUwMDFmhSX5KbCGXHUwMDFisnXKqCA/PLkp0IZy6sDgz1x1MDAxMt2UJt5cdTAwMGVkP0t1U1x1MDAwMapcZouHM/zW5fmxUdqpbbT2sr3NXGZ2N1x1MDAwZTK57av9evpV43vvOXBcIjy6t+hcdTAwMTJwMis6hFBuKCdcdTAwMTX0gmIhYLzGTalCoXgh5TTPzz1GSIUpg89Selx1MDAxMjSzj01cYjbxXHUwMDExnUJcdTAwMWKlmVx0XGZcYr5cdTAwMTWcrzNM2Xbnvt45Ov/x48f5Sf3i6vgwfXxcdTAwMWMwTH9O/9qHXHUwMDBm51t7lUIu5Z9095pH9lx1MDAxMCv1y+1cdTAwMWbjZ3k6f6Hbbd3MYcQ4XHUwMDAwhZRQi4qoSCNcdTAwMTY5vkMmjGhcdTAwMGWtiZ+aTO/MhFx1MDAxYrFcdTAwMTRcdTAwMTGpIOtDySBlXHUwMDA1aMLhJJin6bBloFxirnYh2cm0eJLW46QsmnJBy6ZGVcDEPI2MazJvxr5cdTAwMDPFXHUwMDBiSpjIi1x1MDAwNYj1dUaM49jRXHUwMDE5Rix/4/v9JfmwXHUwMDE3SD/sw0JNiWfD5Fx1MDAxYmyYgPDR5/FcdTAwMDLBXGYjb1x1MDAxMt+GVXnaNrYvdzqp6lx1MDAwNuxfyrPTn0onX+BcZnJcdTAwMDGGh+1cdTAwMTdcdTAwMWGPRIVcdTAwMDJEaGCaiVCbPsUteOu3mtlccr9/36hWz5pq/7qU7drcSXxcdTAwMTFcdTAwMDLFKVx1MDAwMdNq+aNcdTAwMDFcdTAwMDFWXGKrkLbcXHUwMDE4w+dcdTAwMTggm37VK6BCJD+KSWHleHYxxL1hXHUwMDFlJSXyzXnHylx1MDAwYpCYXHUwMDAzjMlcdTAwMTWgXHUwMDE3SPnDXHUwMDA1yLLw0ZEtVJJroUT8uen1k5udY5VLnzXRXFzdf9va6ejNXtJcdTAwMTWISN5cdTAwMDBcdC03XHUwMDFjJ4dcdTAwMDEkMOp24iVOIYtGvNFcdTAwMTT+5jqUXHUwMDFmXFyv5fa+X/LU/u3deW692Pl29X1OXHUwMDFkUjJQXHUwMDE4sixcdTAwMWTSkb5cdTAwMGKYkFxcQrBW5iXYT7/qxOuQ8JRigCBcdTAwMTXnlIKG0iHiYU9qXHUwMDEwlFx1MDAwYjFBXHUwMDE27Y1cdTAwMDbsU4xcdTAwMTIgRi/w80eLkTA8fPQpKlxySM1cdTAwMDH1aIzrpaBs9b5cdTAwMWSet9bWe2epn+1jW7lnJ7yQdC1SXHUwMDFlkTjprlx1MDAxNVO1SLteXHUwMDE3Slx1MDAxYm6QXHTFlydGU8ah5cTAc1JU5yB9WG9uXHUwMDFmVlx1MDAwN/5ajde+dUSnXdqZU3U0LF91Zk26kOxcdTAwMDCoOZKf6Vx1MDAxN71cdTAwMDKig0hcdTAwMTIvNJsqOkYsXHUwMDE04Z+qk1x1MDAwMNV5gYk/WnU4RqpcdTAwMGVcdTAwMDHEWUGr45codPZcdTAwMGWvXHUwMDFi6Hc6WXPon9rDwkb7eDPZsmOYp13dNVk9YVx0fCM6f5hlolBcdTAwMTGCXCKTQmk8Yl9cdTAwMTOSXHUwMDAwpuhPKywzXHUwMDFlc1Vj04ORXGLa01x1MDAxOJ6MfZz+ZHTcXG7BR/q0xFwiXHUwMDA1VFxc2PcpJlx1MDAwM1x1MDAxYpmkcCGlq+Ww8f3Qjl83379l6rtcdTAwMTfqqr2pdLfWbq4nXHUwMDFimK6aXGaBOdplXHUwMDE2UYcqXHUwMDFlldJcdTAwMWWlxXRYg5VcdTAwMTbeVvFooGS5P1x0zH9ENVmnWMzk8T6T7V3ft3WuslNax/R8XHUwMDBlytBcdTAwMWTgi4qLyLxcdTAwMWRlVEhoXHUwMDAzwDmzc1D11ItOuIPiWntcdTAwMTKtq8IgymMqVE2mUHiMoXtcdTAwMDe5TXzjXHUwMDEwcmQxmSTAWyvoNCBcZlx1MDAwNNK2hFx1MDAxNJMtyD/FLybbarX6Sysme4G6w1x1MDAwNirclqVcdTAwMTeTXHUwMDA1XHUwMDA3JENRKSkkiacxvk5cdTAwMWSfyduLTnFXZHbSm5mN3Lp/1j9KejFcdTAwMTnnnPyJtGjMw2zl6GtcdTAwMWVqySxFpXJPOHF8c43nSlaUTdelx6Gajla63vJ57fREXFyKrl/cuD1fWHVccmk2W5gwzTZsMnp2k9hcdTAwMWHcJEL86fxcdTAwMDNd6N521i94tre/0Thkx1x1MDAwN+e902RcdTAwMWI2QrdngFx1MDAxMftCuJZ5XHUwMDE4XHUwMDA2wDyrjEW7iDD47SdT1vKnu9vbP1x1MDAwZnY2+1x1MDAxOdk46lx1MDAxZmyd5W3cirXs9o+LU6wp1chu9ZrXR5XCzdXu4irW3NTg0s1cdTAwMWXMKP90s0RcdTAwMWGZjVx1MDAxZE7TezPpbo9SXHUwMDFjrYiOXHUwMDE5Ob6JXHUwMDA0SFxi4ZGlUlxcPZYwvy2cPlx1MDAwN8timr1lXHUwMDBllr3A+lx1MDAxZj1YJmT0xKlcIoiilvGHsEV3/fJ252fZ7MHZcVVV8VStdZOvcKRvJOVcdTAwMTiWsGFEalI4So0oXHUwMDAzs1x1MDAwYnjA7TdcdTAwMTe4/PptrWvWXHUwMDBlb1tcdTAwMWIoikff7zavXHUwMDBi+3M9wyZcdTAwMTRcYlxc+qhDcGooLEQgmUBleXzUT7/qxFx1MDAwYlx1MDAxMXpcdTAwMTZdMkdJ/6RcdTAwMTBcdTAwMTlcdTAwMTJcIvc4r3vY9+3FmqsqRK/AY3KF6Fx1MDAwNXL+cCGy0c8zUL5H2TaK+KtcdTAwMDGcsfNO6qJvMsfVtZ3Uxam6zlx1MDAwNzLQhCqR8lx1MDAxNFx1MDAwNzR0qUJPKJFcdTAwMDTwXGZl92RcdTAwMWQ1uHj5VKJcdTAwMTlKxLLp0rbMs61Byp5cdTAwMWOcXHUwMDE2JWtcdTAwMTVcdTAwMDbzjX9LYiZcdTAwMTbE/1KUKLpCXHUwMDA2NWHBTVx1MDAwYsVcdTAwMDb99IteXHUwMDAxIZJuXHUwMDEwmaDjVlx1MDAxYVx1MDAxOFx1MDAxN1wiKZTHkFx1MDAwMGdcZqi3V2uuqlx1MDAxMP1WXHUwMDE50Vx1MDAwYtz80UIkZ1RQk1WSXHUwMDA20cZcdTAwMTeiXvNO+er7fjs/yFxmWje8t7X5bTfpQiQ98r9aXHUwMDAyQ+VcbmdHXGb0ULQmSIiY0kYwMz5h9Y8uWjtcdTAwMTPrezc3crN4spMvpG4vq7uVg0pcdTAwMDIlR+jIKVeyIHS/jOXxNWf6Va+A5lxi4chcdTAwMWXc8LWRIatl1EJcdTAwMTG+4qozz9pcdTAwMDDJVZ1cdTAwMTeI+KNVh7xeVFSCMlxiwOJPNG01N3c7W6ksbMP5oLnm64vNb1FcdTAwMDNcdTAwMTJcdNFcdTAwMWNQzFOMXHUwMDFiTVx1MDAxZW+yXGJCXHUwMDAwp9RILWpJnZUuWVx1MDAxYq7Ywd6rZE1gdMlcdTAwMWFcdTAwMThB3oDJ+KVcdTAwMDCbOyeH7eyp3fyW/nFweqK+i3w/asWOxJRcdTAwMDLQZXqKYFx1MDAwMUrgtFx1MDAxMWLOPFSWhJPDm59r/u0qXHUwMDAxdvs3p8Wj01x1MDAxY5rMnbzoraW3blpnXHUwMDBim7WUYFx1MDAwMlx1MDAxNfhLrVx1MDAwNFx1MDAxMJFcdTAwMTUxnJO2U0Ns/JVrjptnxVRd18o1xnJZOEinipuphFx1MDAxM7QxRNBaI2pwSz2HaopcdTAwMDE8gr5WXGa5q/JXn/Mks1KFa57ezd3traV+yPtTuGfFjctKMW4hwPFdeW3ztsVcdTAwMGYzuWo5n8FBrnmbW1xcIYCVbOkpyMxVXHUwMDAztNKcXHUwMDFiXHUwMDFi/2nN6b2Z8Fx1MDAxNITMtSeFVdZcdTAwMTlszoJcdTAwMTHzUFx04HJw7Vx1MDAxYziGXHUwMDE20/hMQVY1XHUwMDA1eYH2PzpcdTAwMDVcdTAwMTFcInLgXHUwMDBiKE92i1xixlx1MDAxZvdK93aE/H7q31xcXHUwMDFmd1x1MDAwYmv3ftpcdTAwMWVVo8aiXHUwMDEzI3HaXHUwMDE1u1lheFjEXHUwMDFlSlx1MDAwMcAjkUelXHUwMDFmpkTDXHL7lLjg/b+6YoNGZuOuVsZu75JlZfv84GLO0TD3Z9lSXHUwMDA0PPpcdTAwMDFcdTAwMDRAVFx1MDAwNIb4XHUwMDBmIEy/6MQrkXElaVx1MDAxYbmRjPAvxlFvSIhIXHUwMDE4mISQ7/vUoVXVoVx1MDAxN7j5w3XIRJaJUrRcbuJnmGNcdJutVvU8ZVtHfnX/JNPM1lxuulHNJl+IXGJtQqCSROdhIZIgPWRMuVx1MDAxZFjQ2OC04KdcdTAwMTJNKtH29fqV8Sv5Sr3Fi6Zlv12y9LzzMu+iRFx1MDAxOF1cdTAwMDAjlVuxiFx1MDAwNYpcdTAwMDVegv30q15cdTAwMDEpcvVWyEBcdTAwMWJcdTAwMTGWXCIp0DPcjXxcdG5ccshFbIjxKUVcdTAwMWYrRS+w80dLkdSRUoSKvJLSc9Sk2SNbNlBLr/XyV6XizV1e/cgmfCVcdTAwMDEw6GlGcWCUskqHXHUwMDAzUitPUpxQsqRcdTAwMDAkLi8jWqlCgFx1MDAxMzi9zJTklrxs71c3dnZz+6U7lUDBXHUwMDEx0etkSPdwXHUwMDFiSX98vZl+0SugN1x1MDAxY6zbeskyJoIrRD/UXHUwMDAx6EXi+1NwXHUwMDEyIDgvkPBHXHUwMDBiXHUwMDBlRG+AqrVGXHUwMDAwruOnPt30UZrt7O83hTpJy8Za5uw+9zPZguOqnIGSXG5BXHUwMDA0NNysYywgXHUwMDA1uMdcdTAwMTJcdTAwMDJjcG9cbsjVL1x1MDAwM1x1MDAxMDqQXGIvtVxmQEfv+oRCgWVyjpVr9lmrv5nL+oY31/X6xe4mXjRcdTAwMTO/qix6buEowp52i5mFXHUwMDE28qNcdTAwMWXwrFvv+nFcdTAwMTW0t42SRVx1MDAwMVO6labdhlNuq1x1MDAwM/c1OFx0T5Bu116SXHUwMDExPVxcx1x1MDAwMyZcdTAwMGJcdTAwMDDeXHUwMDE3o1x1MDAxMoRcXPoq5DNYU7n1XHUwMDAyOJujiv460ylmXHUwMDFh9udm+eLozFx1MDAxN1x1MDAwNzlTgGbSnVxmXHUwMDExJlx1MDAwMVx1MDAxMNFwI1x1MDAxMVhgfYSHrSS14yxOyTORhjViedtGk5eR5ExcdTAwMTRcYlx1MDAwYqFAmbGUXGY1yY1wwLKt+9KLUlx1MDAxNuSV5linpnbrlyO8Ut2/6M9wSv1WO8omjTV3Yjma8VMuYjWa6MdjXCLHxITbbFCjiV8nUDXr+3fn1fIgla1s5Vx1MDAxYq3LuzxL/OxcZoWFR1xcL4XVhlEqMl58hpx0h6SXQKeMU55/dFxc58hcdTAwMTZcdTAwMTbyV2dcXF9cdTAwMWNuX36HUjrTb3/G9Vx1MDAwN8b1QzdPM5Qztlx1MDAxMVVuu2vkMv7I2mxCT2pkg/bc9ijKKKVItsdcdTAwMWQloPBcdTAwMDSS41x1MDAxNNxcIuCbxrpnXHUwMDA2tmWeNW5FVMtcdTAwMTRcdTAwMTnHXHUwMDEx31x1MDAwNi0loqA2MOOe0MNcdEvJiXtcdTAwMTSToOdcdTAwMTmMmFxcXGZcdTAwMTFcdTAwMWWPzFhcZnFG5Zog9tOv2my01y90++u1ZrnWrIw3zH849XZcZl84jOjSwLWSeaApYXLzXHUwMDE0bjhSju6s65hC2/G2Ry6c2lxmlj9MsE1cXLrfLL/cpNn11IEmpZhnXHUwMDE0pztkhit6XHUwMDE4hWKiTZR5o9vcW5I9dONQdqJN9UKvv9FqNGp96vmDVq3ZXHUwMDBm9/CwK9dcXNBX/cJcdTAwMDTh0DVcdTAwMDVfXHUwMDBis0PbfeM4yY9++zKKnuF/nn//959T352KwrX7mUD06Nv+XGL+Ozet2ehHq1xmUr9Solx1MDAxY3/4ZracJZXVXHUwMDE0o1x1MDAwNJQpUIbwL9n4g1x1MDAxY1xi3ONusFx1MDAwMJlcdTAwMTaISyyWt8JDbYZLW4xtXGY4mj/gXHUwMDFlXHUwMDEzlFxmW0roXHRcdTAwMWWT01x0XHUwMDFjKWWiTJnNY15cdTAwMTbOasxcYnzVY78xWW22KVx1MDAxZadcdTAwMTBiNNdXXGJARKLZiO6fOcR40m1cdTAwMDIurGTuwVFjZvPa+HWsXHUwMDE0u0yH1/C1XHRkzckukfM1NnIyUlx0NG5p8/iL1lx1MDAxY1X29zZQ9vzaXHUwMDFl+Nnvt53Dw42bpJNLSqJLd4hBrEIlJIyzXHUwMDBiV+5JXHUwMDFkrVxyMolumONNw3Czn8Ux2uNCXHUwMDE5lNHZ0MScXHK3lFxyKVx1MDAwN4x3SYfesMftn7O+91xyK1x1MDAxMc783iU+2OD2one9/8b0Lf5cdTAwMTRcdTAwMTahaNBo9r7811N29qVX6rbq9f9+35QuRjNcdTAwMTYxpVx1MDAxNemHzIxcdTAwMDc9lFtseq5nzWdcdTAwMDM6oZwljEdGXHUwMDEzrHFcdTAwMWJccihcdTAwMDXjXHUwMDAzOI5HXHUwMDE0XHUwMDEzRltcdTAwMTKS5Y7MkunVJM1cbshccmshg9tCjCa3QHiGh2r+nthcdTAwMGKcnVx1MDAxYptSeG8/5MLY7dm3RD80W1x1MDAxN8ezPNBkcyVKpa1Ukk2meZy6XFxcInPVkbONUFRrZu92PO7OXHUwMDE4Uk5jQIOWXG5IlfREczQhkfwsvW4lXHUwMDEycuVEo1bKg0VcdTAwMDPa/Vx1MDAwNKE8p1x1MDAwMYukM2TRdCY510zMs13BbFx1MDAxZE0onVnjaW5cdGSEXCJcdCZUmsxccvfc7CRcYiWXTGfaeJRmSLe/MFx1MDAxMavk09hMoEfo0I55hzvdXHUwMDA0nkp95LRhnVx1MDAwMVx1MDAwNFx1MDAxN194f05T1Ly5dtpYXHUwMDFhp1x1MDAxMYtI4G6tU1wiXG6plbTTSMRyx2jSXHUwMDBlf8zkMFEsZpu9LO5cdTAwMTjPckKVXHUwMDE0YIxcdTAwMDX6VUzSLHiUhJEyuM50T2/halx1MDAxM1skst3PJKZcdTAwMTdGbjxyXHUwMDEynVTOclxu9vjcNtvLJ5TbXGI4XHUwMDFlKkBKLCWA0eOT6NxQz1x1MDAxM945d0umkl1b3pg8R+5m891CXHUwMDBlklx1MDAwMlLBlEJcdTAwMGbKOSlYJcWhXHUwMDFlrvRcdTAwMTBMdlx1MDAxZshNKtRqrlxc8/d1a47ZyPRcZvdop0ZJXHUwMDE2XHUwMDFjXHUwMDEwfnJrZFx1MDAxOEjFXHTsZlg680rPNvsp33FmQ+ZG+MDtduVOOTko71x1MDAxNlx1MDAxNzFuSS73yFx1MDAwMzVcdHGiUatEbdHAXHUwMDFlvjpcdTAwMDHpObkter3nSNvGnfZqPUel88Fpo8GuQF9tnaX3i93SbvbnbtRcIueJoTaNnuSkXHUwMDE3XHUwMDA0fjfXKMeX70CiNiNcZqM/Llx1MDAwZmVLXHUwMDFjN1NIpt1cdTAwMWHlRuhcZuppS9hMKatcdTAwMTSMzLVcclxc5YruXvNYRvDWcaj4ZVx1MDAwNNVWt3bvxoueRn7ed/xpxumXWl5cdTAwMTCoXHUwMDFiXHUwMDBll1xyKcvA7VpcdTAwMTY73mfDIaHxzqX2iF6F21x1MDAwN5TcitLjhdSopVx1MDAwN4xcdTAwMWOkojcuN+Ct52qDrZ3Ykz7gZKwnnVx1MDAwMNqIkSdtXHUwMDE5XHSHlfOE/6In4ubedWpeKzNbVr6EJuKoP9zjXCJ0f8mowlx1MDAxNN/gJvNcdTAwMWZ2d32li5m5a9uYi2Hu4Vx1MDAxOMVcdTAwMDRnROtcdTAwMDKnjIOBoFx1MDAxYqxcdTAwMWTna5fIMTZ5L1bKxURh2v2kJuBcdTAwMWNlYv54PMHXQrt92Ce4Pd9cdTAwMGXCd638yPWjq/x6XfNv1qfUi19cZn+cXGZccvvTUZI/jIFff/z6f3dfuVAifQ== HeaderTweetTweetTweetTweetFooterTweetTweetTweetTweetTweetTweetTweetTweetFixedFixedColumns (vertical scroll)horizontal scroll <p>It's rough, but it's all we need.</p> Try in Textual-web <p></p>"},{"location":"how-to/design-a-layout/#tip-2-work-outside-in","title":"Tip 2. Work outside in","text":"<p>Like a sculpture with a block of marble, it is best to work from the outside towards the center. If your design has fixed elements (like a header, footer, or sidebar), start with those first.</p> <p>In our sketch we have a header and footer. Since these are the outermost widgets, we will begin by adding them.</p> <p>Tip</p> <p>Textual has builtin Header and Footer widgets which you could use in a real application.</p> <p>The following example defines an app, a screen, and our header and footer widgets. Since we're starting from scratch and don't have any functionality for our widgets, we are going to use the Placeholder widget to help us visualize our design.</p> <p>In a real app, we would replace these placeholders with more useful content.</p> layout01.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):  # (1)!\n    pass\n\n\nclass Footer(Placeholder):  # (2)!\n    pass\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")  # (3)!\n        yield Footer(id=\"Footer\")  # (4)!\n\n\nclass LayoutApp(App):\n    def on_mount(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <ol> <li>The Header widget extends Placeholder.</li> <li>The footer widget extends Placeholder.</li> <li>Creates the header widget (the id will be displayed within the placeholder widget).</li> <li>Creates the footer widget.</li> </ol> <p> LayoutApp #Header </p>"},{"location":"how-to/design-a-layout/#tip-3-apply-docks","title":"Tip 3. Apply docks","text":"<p>This app works, but the header and footer don't behave as expected. We want both of these widgets to be fixed to an edge of the screen and limited in height. In Textual this is known as docking which you can apply with the dock rule.</p> <p>We will dock the header and footer to the top and bottom edges of the screen respectively, by adding a little CSS to the widget classes:</p> layout02.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <p> LayoutApp #Header #Footer </p> <p>The <code>DEFAULT_CSS</code> class variable is used to set CSS directly in Python code. We could define these in an external CSS file, but writing the CSS inline like this can be convenient if it isn't too complex.</p> <p>When you dock a widget, it reduces the available area for other widgets. This means that Textual will automatically compensate for the 6 additional lines reserved for the header and footer.</p>"},{"location":"how-to/design-a-layout/#tip-4-use-fr-units-for-flexible-things","title":"Tip 4. Use FR Units for flexible things","text":"<p>After we've added the header and footer, we want the remaining space to be used for the main interface, which will contain the columns in the sketch. This area is flexible (will change according to the size of the terminal), so how do we ensure that it takes up precisely the space needed?</p> <p>The simplest way is to use fr units. By setting both the width and height to <code>1fr</code>, we are telling Textual to divide the space equally amongst the remaining widgets. There is only a single widget, so that widget will fill all of the remaining space.</p> <p>Let's make that change.</p> layout03.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass ColumnsContainer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    ColumnsContainer {\n        width: 1fr;\n        height: 1fr;\n        border: solid white;\n    }\n    \"\"\"  # (1)!\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        yield ColumnsContainer(id=\"Columns\")\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <ol> <li>Here's where we set the width and height to <code>1fr</code>. We also add a border just to illustrate the dimensions better.</li> </ol> <p> LayoutApp #Header \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502#Columns\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 #Footer </p> <p>As you can see, the central Columns area will resize with the terminal window.</p>"},{"location":"how-to/design-a-layout/#tip-5-use-containers","title":"Tip 5. Use containers","text":"<p>Before we add content to the Columns area, we have an opportunity to simplify. Rather than extend <code>Placeholder</code> for our <code>ColumnsContainer</code> widget, we can use one of the builtin containers. A container is simply a widget designed to contain other widgets. Containers are styled with <code>fr</code> units to fill the remaining space so we won't need to add any more CSS.</p> <p>Let's replace the <code>ColumnsContainer</code> class in the previous example with a <code>HorizontalScroll</code> container, which also adds an automatic horizontal scrollbar.</p> layout04.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        yield HorizontalScroll()  # (1)!\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <ol> <li>The builtin container widget.</li> </ol> <p> LayoutApp #Header #Footer </p> <p>The container will appear as blank space until we add some widgets to it.</p> <p>Let's add the columns to the <code>HorizontalScroll</code>. A column is itself a container which will have a vertical scrollbar, so we will define our <code>Column</code> by subclassing <code>VerticalScroll</code>. In a real app, these columns will likely be added dynamically from some kind of configuration, but let's add 4 to visualize the layout.</p> <p>We will also define a <code>Tweet</code> placeholder and add a few to each column.</p> layout05.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll, VerticalScroll\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass Tweet(Placeholder):\n    pass\n\n\nclass Column(VerticalScroll):\n    def compose(self) -&gt; ComposeResult:\n        for tweet_no in range(1, 20):\n            yield Tweet(id=f\"Tweet{tweet_no}\")\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        with HorizontalScroll():\n            yield Column()\n            yield Column()\n            yield Column()\n            yield Column()\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <p> LayoutApp #Header #Tweet1#Tweet1#Tweet1#Tweet1 #Footer </p> <p>Note from the output that each <code>Column</code> takes a quarter of the screen width. This happens because <code>Column</code> extends a container which has a width of <code>1fr</code>.</p> <p>It makes more sense for a column in a Twitter / Mastodon client to use a fixed width. Let's set the width of the columns to 32.</p> <p>We also want to reduce the height of each \"tweet\". In the real app, you might set the height to \"auto\" so it fits the content, but lets set it to 5 lines for now.</p> <p>Here's the final example and a reminder of the sketch.</p> layout06.pyOutputSketch <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll, VerticalScroll\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass Tweet(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Tweet {\n        height: 5;\n        width: 1fr;\n        border: tall $background;\n    }\n    \"\"\"\n\n\nclass Column(VerticalScroll):\n    DEFAULT_CSS = \"\"\"\n    Column {\n        height: 1fr;\n        width: 32;\n        margin: 0 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for tweet_no in range(1, 20):\n            yield Tweet(id=f\"Tweet{tweet_no}\")\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        with HorizontalScroll():\n            yield Column()\n            yield Column()\n            yield Column()\n            yield Column()\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <p> LayoutApp #Header \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet1\u258e\u258a#Tweet1\u258e\u258a#Tweet1\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u2583\u2583\u258a\u258e\u2583\u2583\u258a\u258e \u258a#Tweet2\u258e\u258a#Tweet2\u258e\u258a#Tweet2\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet3\u258e\u258a#Tweet3\u258e\u258a#Tweet3\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet4\u258e\u258a#Tweet4\u258e\u258a#Tweet4\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet5\u258e\u258a#Tweet5\u258e\u258a#Tweet5\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258c #Footer </p> <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daW9cdTAwMWK7kv1+f0WQ92VcdTAwMDa46ktcdTAwMTbJXCJ5gcHAi1x1MDAxY1mOl8iKt8GDoaUtyda+eHvIf5+ivKjVUsstW7JbuTaQxGktzWafOudcdTAwMTRZTf7njy9fvvbv2v7Xv7989W9LhXqt3C3cfP3TXHUwMDFkv/a7vVqrSS/B8P+91qBbXHUwMDFhvrPa77d7f//1V6PQvfL77Xqh5HvXtd6gUO/1XHUwMDA35VrLK7VcdTAwMWF/1fp+o/e/7u+9QsP/n3arUe53vdFJUn651m91XHUwMDFmzuXX/Ybf7Pfo2/+P/v/ly3+Gf1x1MDAwN1rX9Uv9QrNS94dcdTAwMWZcdTAwMTi+NGogZ0aFXHUwMDBm77Waw9ZyLoxGxVxyPL+j1tukXHUwMDEz9v0yvXxBjfZHr7hDX1x1MDAwZnL9dT+3q/ay56WbXCK2djHdXHUwMDFkjM57UavXXHUwMDBm+3f1YbtK3Vavl6pcdTAwMTb6peroXHUwMDFkvX63deVcdTAwMWbXyv3qU/dcdTAwMDWOP3+216KuXHUwMDE4farbXHUwMDFhVKpNv+d6gT9cdTAwMWZttVx1MDAwYqVa/254lez56ENX/P1ldOSW/pdC4Vx0LY1VqLW1KtAr7lx1MDAwYkAoXHUwMDBmhFx1MDAxNKhcdTAwMDVarahfQi3baNXpjlDL/sWGP6O2XHUwMDE1XHUwMDBipatcbjWwWX5+T79baPbahS7dt9H7blx1MDAxZa9ZSemhcCdjinM+akfVr1WqfXqHQOZcdTAwMTnOrJQohLs9OGqMP7w1XHUwMDFjjNCopVx1MDAxNs+vuCa0t8tDnPw72HHN8mPHNVx1MDAwN/X6qNXuhXRcdTAwMDBbo89cZtrlwlx1MDAwM1x1MDAwMjhcdTAwMWFcdIpJ1Fxio1x1MDAwZanXmlfhr6u3Slcj0Fxmj/7681x1MDAxNXDVKlx1MDAxYa1WcVx1MDAwNIlcdTAwMThcdTAwMWKsuVLn5367sL63s3+Lza2fXHUwMDA3nZ3tTlx1MDAwNFhDgPtImFx1MDAxYcGVtIpxJjhBIIRT6Vx1MDAxOaUlgcJcdTAwMDJKi8vEqfBcdTAwMThHXHUwMDA1dD6urTaTQFx1MDAwNeMhMiFccjJAQaCeXHUwMDAwKt0zJYGuZvVw6tfrtXZvKkpxXHUwMDA2p1x1MDAxYZCcI1cmNkzbP86OS+lstssvc9f5+3TqrtG8fVxyTPn7wVRxz1xuhdTxQljOQIbolDjOMCMl11x1MDAwZcqgw1x1MDAxMTRcdTAwMTdM/3VRUKBgXHUwMDEyolxceJJcdTAwMDEoi0D/SGPkJEY5eFxuKVKISFx1MDAxOVxiXHUwMDAxUocxyql9ilNcdTAwMWL5b1x1MDAwNVItbFx1MDAxNEi1QXfNXHUwMDEwX/dP1jrpu8ZB7qC4tnXT2upvna3jTcIxXG7KY9TdyLnhlsBcdTAwMDEhiFxuT1x1MDAxObRkXG4kUZhV8o1cdTAwMTAtMqaWXHUwMDA1Uc1cdTAwMTXpgeC/XHUwMDE5Qq2IQijnjJSFS81iQ7TeSbdTV1x1MDAxNexs1upXWLrrb53UXHUwMDBlk1xyUVx1MDAxMljgXHUwMDAyQWjBmWRWh1x1MDAxMFxujmQl3Vx1MDAxNVxyxLVv41BcdTAwMGVFY3BZXHUwMDAwpcsgqkcuV1DoZ+dPKlx1MDAxMqPu1iihXHUwMDAzb3hcdKLr37ZcbrsldbLV2V1vnt3+OL6pXHUwMDFjNJJcctFcdTAwMTTlXCKk4lZcdTAwMTFFcnBJyThGXHUwMDExXHQ+hFxmTTTKJcOlYFRJ5oym4Vx1MDAxNCnaQiBOXHUwMDAyOZMnNaekytphO0CFIUquTJGLNYrNXHUwMDAx0SewjOBcIlx1MDAxZY/8ikbu82dGn1x1MDAwZcCt79+O3HZcdTAwMDBcdTAwMWPd9mG1cbB9tj/YK+VzlbXWgVx1MDAxOdx9fX7fr8ffosJCXGImjTLWLiosxtpcdTAwMTmMXGJcdTAwMTNcdTAwMTVcdTAwMTCczs5dvqBiR8T0i55cdTAwMWVcdTAwMTHVQqk66PpcdTAwMWZcdTAwMWZcdTAwMTNcXCO5W+JKQIK+YTLE21x1MDAxYTxcdTAwMDdB4nNcdTAwMTlcbpnXXHUwMDA0XHUwMDA1xVx1MDAxZbuYYn4p8oBcdTAwMTPaXHUwMDE5p1x1MDAwZSeRmJafTVx1MDAwNoFcdTAwMDWuyZ3PXHUwMDE1XHUwMDA0r+Pp11x1MDAwMHJ041vN/mHt3vU9sLGjW4VGrX43du+GSKWuyviFst/9OnZ8rV6rONR+LVF7gy9cdTAwMTJ2+7VSof78hkatXFxcdTAwMGVqQIlOVqg1/e52XHUwMDFj7m51a5Vas1DPR7SFrt3PPOupXHUwMDE3uDPFQs93r1x1MDAwZVx1MDAwM+j1Qlx1MDAwNVx1MDAxOJmTkns0QltcdTAwMTN/5GRtc6O+M2Bddn/XuK/YfL5/lc68LizfcexEXHUwMDE5j5NRkoxsfUhcdTAwMDPcN1xihp7ipGQ8XHUwMDE4XHUwMDE3XHUwMDBiXHUwMDFlNeGKuEFScvEkiKPrXHUwMDFmhSX5KbCGXHUwMDFisnXKqCA/PLkp0IZy6sDgz1x1MDAxMt2UJt5cdTAwMGVkP0t1U1x1MDAwMapcZouHM/zW5fmxUdqpbbT2sr3NXGZ2N1x1MDAwZTK57av9evpV43vvOXBcIjy6t+hcdTAwMTJwMis6hFBuKCdcdTAwMTX0gmIhYLzGTalCoXgh5TTPzz1GSIUpg89Selx1MDAxMjSzj01cYjbxXHUwMDExnUJcdTAwMWKlmVx0XGZcYr5cdTAwMTWcrzNM2Xbnvt45Ov/x48f5Sf3i6vgwfXxcdTAwMWMwTH9O/9qHXHUwMDBm51t7lUIu5Z9095pH9lx1MDAxMCv1y+1cdTAwMWbjZ3k6f6Hbbd3MYcQ4XHUwMDAwhZRQi4qoSCNcdTAwMTY5vkMmjGhcdTAwMGWtiZ+aTO/MhFx1MDAxYrFcdTAwMTRcdTAwMTGpIOtDySBlXHUwMDA1aMLhJJin6bBloFxirnYh2cm0eJLW46QsmnJBy6ZGVcDEPI2MazJvxr5cdTAwMDPFXHUwMDBiSpjIi1x1MDAwNYj1dUaM49jRXHUwMDE5Rix/4/v9JfmwXHUwMDE3SD/sw0JNiWfD5Fx1MDAxYmyYgPDR5/FcdTAwMDLBXGYjb1x1MDAxMt+GVXnaNrYvdzqp6lx1MDAwNuxfyrPTn0onX+BcZnJcdTAwMDGGh+1cdTAwMTdcdTAwMWGPRIVcdTAwMDJEaGCaiVCbPsUteOu3mtlccr9/36hWz5pq/7qU7drcSXxcdTAwMTFcdTAwMDLFKVx1MDAwMdNq+aNcdTAwMDFcdTAwMDFWXGKrkLbcXHUwMDE4w+dcdTAwMTggm37VK6BCJD+KSWHleHYxxL1hXHUwMDFlJSXyzXnHylx1MDAwYpCYXHUwMDAzjMlcdTAwMTWgXHUwMDE3SPnDXHUwMDA1yLLw0ZEtVJJroUT8uen1k5udY5VLnzXRXFzdf9va6ejNXtJcdTAwMTWISN5cdTAwMDBcdC03XHUwMDFjJ4dcdTAwMDEkMOp24iVOIYtGvNFcdTAwMTT+5jqUXHUwMDFmXFyv5fa+X/LU/u3deW692Pl29X1OXHUwMDFkUjJQXHUwMDE4sixcdTAwMWTSkb5cdTAwMGKYkFxcQrBW5iXYT7/qxOuQ8JRigCBcdTAwMTXnlIKG0iHiYU9qXHUwMDEwlFx1MDAwYjFBXHUwMDE27Y1cdTAwMDbsU4xcdTAwMTIgRi/w80eLkTA8fPQpKlxySM1cdTAwMDH1aIzrpaBs9b5cdTAwMWSet9bWe2epn+1jW7lnJ7yQdC1SXHUwMDFlkTjprlx1MDAxNVO1SLteXHUwMDE3Slx1MDAxYm6QXHTFlydGU8ah5cTAc1JU5yB9WG9uXHUwMDFmVlx1MDAwN/5ajde+dUSnXdqZU3U0LF91Zk26kOxcdTAwMDCoOZKf6Vx1MDAxN71cdTAwMDKig0hcdTAwMTIvNJsqOkYsXHUwMDE04Z+qk1x1MDAwMNV5gYk/WnU4RqpcdTAwMGVcdTAwMDHEWUGr45codPZcdTAwMGWvXHUwMDFi6Hc6WXPon9rDwkb7eDPZsmOYp13dNVk9YVx0fCM6f5hlolBcdTAwMTGCXCKTQmk8Yl9cdTAwMTOSXHUwMDAwpuhPKywzXHUwMDFlc1Vj04ORXGLa01x1MDAxOJ6MfZz+ZHTcXG7BR/q0xFwiXHUwMDA1VFxc2PcpJlx1MDAwM1x1MDAxYpmkcCGlq+Ww8f3Qjl83379l6rtcdTAwMTfqqr2pdLfWbq4nXHUwMDFimK6aXGaBOdplXHUwMDE2UYcqXHUwMDFlldJcdTAwMWWlxXRYg5VcdTAwMTbeVvFooGS5P1x0zH9ENVmnWMzk8T6T7V3ft3WuslNax/R8XHUwMDBlytBcdTAwMWTgi4qLyLxcdTAwMWRlVEhoXHUwMDAzwDmzc1D11ItOuIPiWntcdTAwMTKtq8IgymMqVE2mUHiMoXtcdTAwMDe5TXzjXHUwMDEwcmQxmSTAWyvoNCBcZlx1MDAwNNK2hFx1MDAxNJMtyD/FLybbarX6Sysme4G6w1x1MDAwNirclqVcdTAwMTeTXHUwMDA1XHUwMDA3JENRKSkkiacxvk5cdTAwMWSfyduLTnFXZHbSm5mN3Lp/1j9KejFcdTAwMTnnnPyJtGjMw2zl6GtcdTAwMWVqySxFpXJPOHF8c43nSlaUTdelx6Gajla63vJ57fREXFyKrl/cuD1fWHVccmk2W5gwzTZsMnp2k9hcdTAwMWHcJEL86fxcdTAwMDNd6N521i94tre/0Thkx1x1MDAwN+e902RcdTAwMWI2QrdngFx1MDAxMftCuJZ5XHUwMDE4XHUwMDA2wDyrjEW7iDD47SdT1vKnu9vbP1x1MDAwZnY2+1x1MDAxOdk46lx1MDAxZmyd5W3cirXs9o+LU6wp1chu9ZrXR5XCzdXu4irW3NTg0s1cdTAwMWXMKP90s0RcdTAwMWGZjVx1MDAxZE7TezPpbo9SXHUwMDFjrYiOXHUwMDE5Ob6JXHUwMDA0SFxi4ZGlUlxcPZYwvy2cPlx1MDAwN8timr1lXHUwMDBllr3A+lx1MDAxZj1YJmT0xKlcIoiilvGHsEV3/fJ252fZ7MHZcVVV8VStdZOvcKRvJOVcdTAwMTiWsGFEalI4So0oXHUwMDAzs1x1MDAwYnjA7TdcdTAwMTe4/PptrWvWXHUwMDBlb1tcdTAwMWIoikff7zavXHUwMDBi+3M9wyZcdTAwMTRcYlxc+qhDcGooLEQgmUBleXzUT7/qxFx1MDAwYlx1MDAxMXpcdTAwMTZdMkdJ/6RcdTAwMTBcdTAwMTlcdTAwMTJcIvc4r3vY9+3FmqsqRK/AY3KF6Fx1MDAwNXL+cCGy0c8zUL5H2TaK+KtcdTAwMDGcsfNO6qJvMsfVtZ3Uxam6zlx1MDAwNzLQhCqR8lx1MDAxNFx1MDAwNzR0qUJPKJFcdTAwMDTwXGZl92RcdTAwMWQ1uHj5VKJcdTAwMTlKxLLp0rbMs61Byp5cdTAwMWOcXHUwMDE2JWtcdTAwMTVcdTAwMDbzjX9LYiZcdTAwMTbE/1KUKLpCXHUwMDA2NWHBTVx1MDAwYsVcdTAwMDb99IteXHUwMDAxIZJuXHUwMDEwmaDjVlx1MDAxYVx1MDAxOFx1MDAxN1wiKZTHkFx1MDAwMGdcZqi3V2uuqlx1MDAxMP1WXHUwMDE50Vx1MDAwYtz80UIkZ1RQk1WSXHUwMDA20cZcdTAwMTeiXvNO+er7fjs/yFxmWje8t7X5bTfpQiQ98r9aXHUwMDAyQ+VcbmdHXGb0ULQmSIiY0kYwMz5h9Y8uWjtcdTAwMTPrezc3crN4spMvpG4vq7uVg0pcdTAwMDIlR+jIKVeyIHS/jOXxNWf6Va+A5lxi4chcdTAwMWXc8LWRIatl1EJcdTAwMTG+4qozz9pcdTAwMDDJVZ1cdTAwMTeI+KNVh7xeVFSCMlxiwOJPNG01N3c7W6ksbMP5oLnm64vNb1FcdTAwMDNcdTAwMTJcdNFcdTAwMWNQzFOMXHUwMDFiTVx1MDAxZW+yXGJCXHUwMDAwp9RILWpJnZUuWVx1MDAxYq7Ywd6rZE1gdMlcdTAwMWFcdTAwMThB3oDJ+KVcdTAwMDCbOyeH7eyp3fyW/nFweqK+i3w/asWOxJRcdTAwMDLQZXqKYFx1MDAwMUrgtFx1MDAxMWLOPFSWhJPDm59r/u0qXHUwMDAxdvs3p8Wj01x1MDAxY5rMnbzoraW3blpnXHUwMDBim7WUYFx1MDAwMlx1MDAxNfhLrVx1MDAwNFx1MDAxMJFcdTAwMTUxnJO2U0Ns/JVrjptnxVRd18o1xnJZOEinipuphFx1MDAxM7QxRNBaI2pwSz2HaopcdTAwMDE8gr5WXGa5q/JXn/Mks1KFa57ezd3traV+yPtTuGfFjctKMW4hwPFdeW3ztsVcdTAwMGYzuWo5n8FBrnmbW1xcIYCVbOkpyMxVXHUwMDAztNKcXHUwMDFiXHUwMDFi/2nN6b2Z8Fx1MDAxNITMtSeFVdZcdTAwMTlszoJcdTAwMTHzUFx04HJw7Vx1MDAxYziGXHUwMDE20/hMQVY1XHUwMDA1eYH2PzpcdTAwMDVcdTAwMTFcInLgXHUwMDBiKE92i1xixlx1MDAxZvdK93aE/H7q31xcXHUwMDFmd1x1MDAwYmv3ftpcdTAwMWVVo8aiXHUwMDEzI3HaXHUwMDE1u1lheFjEXHUwMDFlSlx1MDAwMcAjkUelXHUwMDFmpkTDXHL7lLjg/b+6YoNGZuOuVsZu75JlZfv84GLO0TD3Z9lSXHUwMDA0PPpcdTAwMDFcdTAwMDRAVFx1MDAwNIb4XHUwMDBmIEy/6MQrkXElaVx1MDAxYbmRjPAvxlFvSIhIXHUwMDE4mISQ7/vUoVXVoVx1MDAxN7j5w3XIRJaJUrRcbuJnmGNcdJutVvU8ZVtHfnX/JNPM1lxuulHNJl+IXGJtQqCSROdhIZIgPWRMuVx1MDAxZFjQ2OC04KdcdTAwMTJNKtH29fqV8Sv5Sr3Fi6Zlv12y9LzzMu+iRFx1MDAxOF1cdTAwMDAjlVuxiFx1MDAwNYpcdTAwMDVegv30q15cdTAwMDEpcvVWyEBcdTAwMWJcdTAwMTGWXCIp0DPcjXxcdG5ccshFbIjxKUVcdTAwMWYrRS+w80dLkdSRUoSKvJLSc9Sk2SNbNlBLr/XyV6XizV1e/cgmfCVcdTAwMDEw6GlGcWCUskqHXHUwMDAzUitPUpxQsqRcdTAwMDAkLi8jWqlCgFx1MDAxMzi9zJTklrxs71c3dnZz+6U7lUDBXHUwMDEx0etkSPdwXHUwMDFiSX98vZl+0SugN1x1MDAxY6zbeskyJoIrRD/UXHUwMDAx6EXi+1NwXHUwMDEyIDgvkPBHXHUwMDBiXHUwMDBlRG+AqrVGXHUwMDAwruOnPt30UZrt7O83hTpJy8Za5uw+9zPZguOqnIGSXG5BXHUwMDA0NNysYywgXHUwMDA1uMdcdTAwMTJcdTAwMDJjcG9cbsjVL1x1MDAwM1x1MDAxMDqQXGIvtVxmQEfv+oRCgWVyjpVr9lmrv5nL+oY31/X6xe4mXjRcdTAwMTO/qix6buEowp52i5mFXHUwMDE28qNcdTAwMWXwrFvv+nFcdTAwMTW0t42SRVx1MDAwMVO6labdhlNuq1x1MDAwM/c1OFx0T5Bu116SXHUwMDExPVxcx1x1MDAwMyZcdTAwMGJcdTAwMDDeXHUwMDE3o1x1MDAxMoRcXPoq5DNYU7n1XHUwMDAyOJujiv460ylmXHUwMDFh9udm+eLozFx1MDAxN1x1MDAwNzlTgGbSnVxmXHUwMDExJlx1MDAwMVx1MDAxMNFwI1x1MDAxMVhgfYSHrSS14yxOyTORhjViedtGk5eR5ExcdTAwMTRcYlx1MDAwYqFAmbGUXGY1yY1wwLKt+9KLUlx1MDAxNuSV5linpnbrlyO8Ut2/6M9wSv1WO8omjTV3Yjma8VMuYjWa6MdjXCLHxITbbFCjiV8nUDXr+3fn1fIgla1s5Vx1MDAxYq3LuzxL/OxcZoWFR1xcL4XVhlEqMl58hpx0h6SXQKeMU55/dFxc58hcdTAwMTZcdTAwMTbyV2dcXF9cdTAwMWNuX36HUjrTb3/G9Vx1MDAwN8b1QzdPM5Qztlx1MDAxMVVuu2vkMv7I2mxCT2pkg/bc9ijKKKVItsdcdTAwMWQloPBcdTAwMDSS41x1MDAxNNxcIuCbxrpnXHUwMDA2tmWeNW5FVMtcdTAwMTRcdTAwMTnHXHUwMDEx31x1MDAwNi0loqA2MOOe0MNcdEvJiXtcdTAwMTSToOdcdTAwMTmMmFxcXGZcdTAwMTFcdTAwMWWPzFhcZnFG5Zog9tOv2my01y90++u1ZrnWrIw3zH849XZcZl84jOjSwLWSeaApYXLzXHUwMDE0bjhSju6s65hC2/G2Ry6c2lxmlj9MsE1cXLrfLL/cpNn11IEmpZhnXHUwMDE0pztkhit6XHUwMDE4hWKiTZR5o9vcW5I9dONQdqJN9UKvv9FqNGp96vmDVq3ZXHUwMDBm9/CwK9dcXNBX/cJcdTAwMDTh0DVcdTAwMDVfXHUwMDBis0PbfeM4yY9++zKKnuF/nn//959T352KwrX7mUD06Nv+XGL+Ozet2ehHq1xmUr9Solx1MDAxY3/4ZracJZXVXHUwMDE0o1x1MDAwNJQpUIbwL9n4g1x1MDAxY1xi3ONusFx1MDAwMJlcdTAwMTaISyyWt8JDbYZLW4xtXGY4mj/gXHUwMDFlXHUwMDEzlFxmW0roXHRcdTAwMWWT01x0XHUwMDFjKWWiTJnNY15cdTAwMTbOasxcYnzVY78xWW22KVx1MDAxZadcdTAwMTBiNNdXXGJARKLZiO6fOcR40m1cdTAwMDIurGTuwVFjZvPa+HWsXHUwMDE0u0yH1/C1XHRkzckukfM1NnIyUlx0NG5p8/iL1lx1MDAxY1X29zZQ9vzaXHUwMDFl+Nnvt53Dw42bpJNLSqJLd4hBrEIlJIyzXHUwMDBiV+5JXHUwMDFkrVxyMolumONNw3Czn8Ux2uNCXHUwMDE5lNHZ0MScXHK3lFxyKVx1MDAwN4x3SYfesMftn7O+91xyK1x1MDAxMc783iU+2OD2one9/8b0Lf5cdTAwMTRcdTAwMTahaNBo9r7811N29qVX6rbq9f9+35QuRjNcdTAwMTYxpVx1MDAxNemHzIxcdTAwMDc9lFtseq5nzWdcdTAwMDM6oZwljEdGXHUwMDEzrHFcdTAwMWJccihcdTAwMDXjXHUwMDAzOI5HXHUwMDE0XHUwMDEzRltcdTAwMTKS5Y7MkunVJM1cbshccmshg9tCjCa3QHiGh2r+nthcdTAwMGKcnVx1MDAxYptSeG8/5MLY7dm3RD80W1x1MDAxN8ezPNBkcyVKpa1Ukk2meZy6XFxcInPVkbONUFRrZu92PO7OXHUwMDE4Uk5jQIOWXG5IlfREczQhkfwsvW4lXHUwMDEycuVEo1bKg0VcdTAwMDPa/Vx1MDAwNKE8p1x1MDAwMYukM2TRdCY510zMs13BbFx1MDAxZE0onVnjaW5cdGSEXCJcdCZUmsxccvfc7CRcYiWXTGfaeJRmSLe/MFx1MDAxMavk09hMoEfo0I55hzvdXHUwMDA0nkp95LRhnVx1MDAwMVx1MDAwNFx1MDAxN194f05T1Ly5dtpYXHUwMDFhp1x1MDAxMYtI4G6tU1wiXG6plbTTSMRyx2jSXHUwMDBlf8zkMFEsZpu9LO5cdTAwMTjPckKVXHUwMDE0YIxcdTAwMDX6VUzSLHiUhJEyuM50T2/halx1MDAxM1skst3PJKZcdTAwMTdGbjxyXHUwMDEynVTOclxu9vjcNtvLJ5TbXGI4XHUwMDFlKkBKLCWA0eOT6NxQz1x1MDAxM945d0umkl1b3pg8R+5m891CXHUwMDBlklx1MDAwMlLBlEJcdTAwMGbKOSlYJcWhXHUwMDFlrvRcdTAwMTBMdlx1MDAxZshNKtRqrlxc8/d1a47ZyPRcZvdop0ZJXHUwMDE2XHUwMDFjXHUwMDEwfnJrZFx1MDAxOEjFXHTsZlg680rPNvsp33FmQ+ZG+MDtduVOOTko71x1MDAxNlx1MDAxNzFuSS73yFx1MDAwMzVcdHGiUatEbdHAXHUwMDFlvjpcdTAwMDHpObkter3nSNvGnfZqPUel88Fpo8GuQF9tnaX3i93SbvbnbtRcIueJoTaNnuSkXHUwMDE3XHUwMDA0fjfXKMeX70CiNiNcZqM/Llx1MDAwZmVLXHUwMDFjN1NIpt1cdTAwMWHlRuhcZuppS9hMKatcdTAwMTSMzLVcclxc5YruXvNYRvDWcaj4ZVx1MDAwNNVWt3bvxoueRn7ed/xpxumXWl5cdTAwMTCoXHUwMDFiXHUwMDBll1xyKcvA7VpcdTAwMTY73mfDIaHxzqX2iF6F21x1MDAwN5TcitLjhdSopVx1MDAwN4xcdTAwMWOkojcuN+Ct52qDrZ3Ykz7gZKwnnVx1MDAwMNqIkSdtXHUwMDE5XHSHlfOE/6In4ubedWpeKzNbVr6EJuKoP9zjXCJ0f8mowlx1MDAxNN/gJvNcdTAwMWZ2d32li5m5a9uYi2Hu4Vx1MDAxOMVcdTAwMDRnROtcdTAwMDKnjIOBoFx1MDAxYqxcdTAwMWTna5fIMTZ5L1bKxURh2v2kJuBcdTAwMWNlYv54PMHXQrt92Ce4Pd9cdTAwMGXCd638yPWjq/x6XfNv1qfUi19cZn+cXGZccvvTUZI/jIFff/z6f3dfuVAifQ== HeaderTweetTweetTweetTweetFooterTweetTweetTweetTweetTweetTweetTweetTweetFixedFixedColumns (vertical scroll)horizontal scroll </p> <p>A layout like this is a great starting point. In a real app, you would start replacing each of the placeholders with builtin or custom widgets.</p>"},{"location":"how-to/design-a-layout/#summary","title":"Summary","text":"<p>Layout is the first thing you will tackle when building a Textual app. The following tips will help you get started.</p> <ol> <li>Make a sketch (pen and paper is fine).</li> <li>Work outside in. Start with the entire space of the terminal, add the outermost content first.</li> <li>Dock fixed widgets. If the content doesn't move or scroll, you probably want to dock it.</li> <li>Make use of <code>fr</code> for flexible space within layouts.</li> <li>Use containers to contain other widgets, particularly if they scroll!</li> </ol> <p>If you need further help, we are here to help.</p>"},{"location":"how-to/package-with-hatch/","title":"Package a Textual app with Hatch","text":"<p>Python apps may be distributed via PyPI so they can be installed via <code>pip</code>. This is known as packaging. The packaging process for Textual apps is much the same as any Python library, with the additional requirement that we can launch our app from the command line.</p> <p>Tip</p> <p>An alternative to packaging your app is to turn it into a web application with textual-web.</p> <p>In this How To we will cover how to use Hatch to package an example application.</p> <p>Hatch is a build tool (a command line app to assist with packaging). You could use any build tool to package a Textual app (such as Poetry for example), but Hatch is a good choice given its large feature set and ease of use.</p> <p>Calculator example</p> <p> CalculatorApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0C\u00a0\u00a0+/-\u00a0\u00a0%\u00a0\u00a0\u00f7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a07\u00a0\u00a08\u00a0\u00a09\u00a0\u00a0\u00d7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a04\u00a0\u00a05\u00a0\u00a06\u00a0\u00a0-\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a01\u00a0\u00a02\u00a0\u00a03\u00a0\u00a0+\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a00\u00a0\u00a0.\u00a0\u00a0=\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>This example is <code>calculator.py</code> taken from the examples directory in the Textual repository.</p>"},{"location":"how-to/package-with-hatch/#foreword","title":"Foreword","text":"<p>Packaging with Python can be a little intimidating if you haven't tackled it before. But it's not all that complicated.  When you have been through it once or twice, you should find it fairly straightforward.</p>"},{"location":"how-to/package-with-hatch/#example-repository","title":"Example repository","text":"<p>See the textual-calculator-hatch repository for the project created in this How To.</p>"},{"location":"how-to/package-with-hatch/#the-example-app","title":"The example app","text":"<p>To demonstrate packaging we are going to take the calculator example from the examples directory, and publish it to PyPI. The end goal is to allow a user to install it with pip:</p> <pre><code>pip install textual-calculator\n</code></pre> <p>Then launch the app from the command line:</p> <pre><code>calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#installing-hatch","title":"Installing Hatch","text":"<p>There are a few ways to install Hatch. See the official docs on installation for the best method for your operating system.</p> <p>Once installed, you should have the <code>hatch</code> command available on the command line. Run the following to check Hatch was installed correctly:</p> <pre><code>hatch\n</code></pre>"},{"location":"how-to/package-with-hatch/#hatch-new","title":"Hatch new","text":"<p>Hatch can create an initial directory structure and files with the <code>new</code> subcommand. Enter <code>hatch new</code> followed by the name of your project. For the calculator example, the name will be \"textual calculator\":</p> <pre><code>hatch new \"textual calculator\"\n</code></pre> <p>This will create the following directory structure:</p> <pre><code>textual-calculator\n\u251c\u2500\u2500 LICENSE.txt\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 pyproject.toml\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 textual_calculator\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 __about__.py\n\u2502\u00a0\u00a0     \u2514\u2500\u2500 __init__.py\n\u2514\u2500\u2500 tests\n    \u2514\u2500\u2500 __init__.py\n</code></pre> <p>This follows a well established convention when packaging Python code, and will create the following files:</p> <ul> <li><code>LICENSE.txt</code> contains the license you want to distribute your code under.</li> <li><code>README.md</code> is a markdown file containing information about your project, which will be displayed in PyPI and Github (if you use it). You can edit this with information about your app and how to use it.</li> <li><code>pyproject.toml</code> is a TOML file which contains metadata (additional information) about your project and how to package it. This is a Python standard. This file may be edited manually or by a build tool (such as Hatch).</li> <li><code>src/textual_calculator/__about__.py</code> contains the version number of your app. You should update this when you release new versions.</li> <li><code>src/textual_calculator/__init__.py</code>  and <code>tests/__init__py</code> indicate the directory they are within contains Python code (these files are often empty).</li> </ul> <p>In the top level is a directory called <code>src</code>. This should contain a directory named after your project, and will be the name your code can be imported from. In our example, this directory is <code>textual_calculator</code> so we can do <code>import textual_calculator</code> in Python code.</p> <p>Additionally, there is a <code>tests</code> directory where you can add any test code.</p>"},{"location":"how-to/package-with-hatch/#more-on-naming","title":"More on naming","text":"<p>Note how Hatch replaced the space in the project name with a hyphen (i.e. <code>textual-calculator</code>), but the directory in <code>src</code> with an underscore (i.e. <code>textual_calculator</code>). This is because the directory in <code>src</code> contains the Python module, and a hyphen is not legal in a Python import. The top-level directory doesn't have this restriction and uses a hyphen, which is more typical for a directory name.</p> <p>Bear this in mind if your project name contains spaces.</p>"},{"location":"how-to/package-with-hatch/#got-existing-code","title":"Got existing code?","text":"<p>The <code>hatch new</code> command assumes you are starting from scratch. If you have existing code you would like to package, navigate to your directory and run the following command (replace <code>&lt;YOUR ROJECT NAME&gt;</code> with the name of your project):</p> <pre><code>hatch new --init &lt;YOUR PROJECT NAME&gt;\n</code></pre> <p>This will generate a <code>pyproject.toml</code> in the current directory.</p> <p>Note</p> <p>It will simplify things if your code follows the directory structure convention above. This may require that you move your files -- you only need to do this once!</p>"},{"location":"how-to/package-with-hatch/#adding-code","title":"Adding code","text":"<p>Your code should reside inside <code>src/&lt;PROJECT NAME&gt;</code>. For the calculator example we will copy <code>calculator.py</code> and <code>calculator.tcss</code> into the <code>src/textual_calculator</code> directory, so our directory will look like the following:</p> <pre><code>textual-calculator\n\u251c\u2500\u2500 LICENSE.txt\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 pyproject.toml\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 textual_calculator\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 __about__.py\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 __init__.py\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 calculator.py\n\u2502\u00a0\u00a0     \u2514\u2500\u2500 calculator.tcss\n\u2514\u2500\u2500 tests\n    \u2514\u2500\u2500 __init__.py\n</code></pre>"},{"location":"how-to/package-with-hatch/#adding-dependencies","title":"Adding dependencies","text":"<p>Your Textual app will likely depend on other Python libraries (at the very least Textual itself). We need to list these in <code>pyproject.toml</code> to ensure that these dependencies are installed alongside your app.</p> <p>In <code>pyproject.toml</code> there should be a section beginning with <code>[project]</code>, which will look something like the following:</p> <pre><code>[project]\nname = \"textual-calculator\"\ndynamic = [\"version\"]\ndescription = 'A example app'\nreadme = \"README.md\"\nrequires-python = \"&gt;=3.8\"\nlicense = \"MIT\"\nkeywords = []\nauthors = [\n  { name = \"Will McGugan\", email = \"redacted@textualize.io\" },\n]\nclassifiers = [\n  \"Development Status :: 4 - Beta\",\n  \"Programming Language :: Python\",\n  \"Programming Language :: Python :: 3.8\",\n  \"Programming Language :: Python :: 3.9\",\n  \"Programming Language :: Python :: 3.10\",\n  \"Programming Language :: Python :: 3.11\",\n  \"Programming Language :: Python :: 3.12\",\n  \"Programming Language :: Python :: Implementation :: CPython\",\n  \"Programming Language :: Python :: Implementation :: PyPy\",\n]\ndependencies = []\n</code></pre> <p>We are interested in the <code>dependencies</code> value, which should list the app's dependencies. If you want a particular version of a project you can add <code>==</code> followed by the version.</p> <p>For the calculator, the only dependency is Textual. We can add Textual by modifying the following line:</p> <pre><code>dependencies = [\"textual==0.47.1\"]\n</code></pre> <p>At the time of writing, the latest Textual is <code>0.47.1</code>. The entry in <code>dependencies</code> will ensure we get that particular version, even when newer versions are released.</p> <p>See the Hatch docs for more information on specifying dependencies.</p>"},{"location":"how-to/package-with-hatch/#environments","title":"Environments","text":"<p>A common problem when working with Python code is managing multiple projects with different dependencies. For instance, if we had another app that used version <code>0.40.0</code> of Textual, it may break if we installed version <code>0.47.1</code>.</p> <p>The standard way of solving this is with virtual environments (or venvs), which allow each project to have its own set of dependencies. Hatch can create virtual environments for us, and makes working with them very easy.</p> <p>To create a new virtual environment, navigate to the directory with the <code>pyproject.toml</code> file and run the following command (this is only require once, as the virtual environment will persist):</p> <pre><code>hatch env create\n</code></pre> <p>Then run the following command to activate the virtual environment:</p> <pre><code>hatch shell\n</code></pre> <p>If you run <code>python</code> now, it will have our app and its dependencies available for import:</p> <pre><code>$ python\nPython 3.11.1 (main, Jan  1 2023, 10:28:48) [Clang 14.0.0 (clang-1400.0.29.202)] on darwin\nType \"help\", \"copyright\", \"credits\" or \"license\" for more information.\n&gt;&gt;&gt; from textual_calculator import calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#running-the-app","title":"Running the app","text":"<p>You can launch the calculator from the command line with the following command:</p> <pre><code>python -m textual_calculator.calculator\n</code></pre> <p>The <code>-m</code> switch tells Python to import the module and run it.</p> <p>Although you can run your app this way (and it is fine for development), it's not ideal for sharing. It would be preferable to have a dedicated command to launch the app, so the user can easily run it from the command line. To do that, we will need to add an entry point to pyproject.toml</p>"},{"location":"how-to/package-with-hatch/#entry-points","title":"Entry points","text":"<p>An entry point is a function in your project that can be run from the command line. For our calculator example, we first need to create a function that will run the app. Add the following file to the <code>src/textual_calculator</code> folder, and name it <code>entry_points.py</code>:</p> <pre><code>from textual_calculator.calculator import CalculatorApp\n\n\ndef calculator():\n    app = CalculatorApp()\n    app.run()\n</code></pre> <p>Tip</p> <p>If you already have a function that runs your app, you may not need an <code>entry_points.py</code> file.</p> <p>Then edit <code>pyproject.toml</code> to add the following section:</p> <pre><code>[project.scripts]\ncalculator = \"textual_calculator.entry_points:calculator\"\n</code></pre> <p>Each entry in the <code>[project.scripts]</code> section (there can be more than one) maps a command on to an import and function name. In the second line above, before the <code>=</code> character, <code>calculator</code> is the name of the command. The string after the <code>=</code> character contains the name of the import (<code>textual_calculator.entry_points</code>), followed by a colon (<code>:</code>), and then the name of the function (also called <code>calculator</code>).</p> <p>Specifying an entry point like this is equivalent to doing the following from the Python REPL:</p> <pre><code>&gt;&gt;&gt; import textual_calculator.entry_points\n&gt;&gt;&gt; textual_calculator.entry_points.calculator()\n</code></pre> <p>To add the <code>calculator</code> command once you have edited <code>pyproject.toml</code>, run the following from the command line:</p> <pre><code>pip install -e .\n</code></pre> <p>Info</p> <p>You will have no doubt used <code>pip</code> before, but perhaps not with <code>-e .</code>. The addition of <code>-e</code> installs the project in editable mode which means pip won't copy the <code>.py</code> files code anywhere, the dot (<code>.</code>) indicates were installing the project in the current directory. </p> <p>Now you can launch the calculator from the command line as follows:</p> <pre><code>calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#building","title":"Building","text":"<p>Building produces archive files that contain your code. When you install a package via pip or other tool, it will download one of these archives.</p> <p>To build your project with Hatch, change to the directory containing your <code>pyproject.toml</code> and run the <code>hatch build</code> subcommand:</p> <pre><code>cd textual-calculator\nhatch build\n</code></pre> <p>After a moment, you should find that Hatch has created a <code>dist</code> (distribution) folder, which contains the project archive files. You don't typically need to use these files directly, but feel free to have a look at the directory contents.</p> <p>Packaging TCSS and other files</p> <p>Hatch will typically include all the files needed by your project, i.e. the <code>.py</code> files. It will also include any Textual CSS (<code>.tcss</code>) files in the project directory. Not all build tools will include files other than <code>.py</code>; if you are using another build tool, you may have to consult the documentation for how to add the Textual CSS files.</p>"},{"location":"how-to/package-with-hatch/#publishing","title":"Publishing","text":"<p>After your project has been successfully built you are ready to publish it to PyPI.</p> <p>If you don't have a PyPI account, you can create one now. Be sure to follow the instructions to validate your email and set up 2FA (Two Factor Authentication).</p> <p>Once you have an account, login to PyPI and go to the Account Settings tab. Scroll down and click the \"Add API token\" button. In the \"Create API Token\" form, create a token with name \"Uploads\" and select the \"Entire project\" scope, then click the \"Create token\" button.</p> <p>Copy this API token (long string of random looking characters) somewhere safe. This API token is how PyPI authenticates uploads are for your account, so you should never share your API token or upload it to the internet.</p> <p>Run the following command (replacing <code>&lt;YOUR API TOKEN&gt;</code> with the text generated in the previous step):</p> <pre><code>hatch publish -u __token__ -a &lt;YOUR API TOKEN&gt;\n</code></pre> <p>Hatch will upload the distribution files, and you should see a PyPI URL in the terminal.</p>"},{"location":"how-to/package-with-hatch/#managing-api-tokens","title":"Managing API Tokens","text":"<p>Creating an API token with the \"all projects\" permission is required for the first upload. You may want to generate a new API token with permissions to upload a single project when you upload a new version of your app (and delete the old one). This way if your token is leaked, it will only impact the one project.</p>"},{"location":"how-to/package-with-hatch/#publishing-new-versions","title":"Publishing new versions","text":"<p>If you have made changes to your app, and you want to publish the updates, you will need to update the <code>version</code> value in the <code>__about__.py</code> file, then repeat the build and publish steps.</p> <p>Managing version numbers</p> <p>See Semver for a popular versioning system (used by Textual itself).</p>"},{"location":"how-to/package-with-hatch/#installing-the-calculator","title":"Installing the calculator","text":"<p>From the user's point of view, they only need run the following command to install the calculator:</p> <pre><code>pip install textual_calculator\n</code></pre> <p>They will then be able to launch the calculator with the following command:</p> <pre><code>calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#pipx","title":"Pipx","text":"<p>A downside of installing apps this way is that unless the user has created a virtual environment, they may find it breaks other packages with conflicting dependencies.</p> <p>A good solution to this issue is pipx which automatically creates virtual environments that won't conflict with any other Python commands. Once PipX is installed, you can advise users to install your app with the following command:</p> <pre><code>pipx install textual_calculator\n</code></pre> <p>This will install the calculator and the <code>textual</code> dependency as before, but without the potential of dependency conflicts.</p>"},{"location":"how-to/package-with-hatch/#summary","title":"Summary","text":"<ol> <li>Use a build system, such as Hatch.</li> <li>Initialize your project with <code>hatch new</code> (or equivalent).</li> <li>Write a function to run your app, if there isn't one already.</li> <li>Add your dependencies and entry points to <code>pyproject.toml</code>.</li> <li>Build your app with <code>hatch build</code>.</li> <li>Publish your app with <code>hatch publish</code>.</li> </ol> <p>If you have any problems packaging Textual apps, we are here to help!</p>"},{"location":"how-to/render-and-compose/","title":"Render and compose","text":"<p>A common question that comes up on the Textual Discord server is what is the difference between <code>render</code> and <code>compose</code> methods on a widget? In this article we will clarify the differences, and use both these methods to build something fun.</p>"},{"location":"how-to/render-and-compose/#which-method-to-use","title":"Which method to use?","text":"<p>Render and compose are easy to confuse because they both ultimately define what a widget will look like, but they have quite different uses. </p> <p>The <code>render</code> method on a widget returns a Rich renderable, which is anything you could print with Rich. The simplest renderable is just text; so <code>render()</code> methods often return a string, but could equally return a <code>Text</code> instance, a <code>Table</code>, or anything else from Rich (or third party library). Whatever is returned from <code>render()</code> will be combined with any styles from CSS and displayed within the widget's borders.</p> <p>The <code>compose</code> method is used to build compound widgets (widgets composed of other widgets).</p> <p>A general rule of thumb, is that if you implement a <code>compose</code> method, there is no need for a <code>render</code> method because it is the widgets yielded from <code>compose</code> which define how the custom widget will look. However, you can mix these two methods. If you implement both, the <code>render</code> method will set the custom widget's background and <code>compose</code> will add widgets on top of that background.</p>"},{"location":"how-to/render-and-compose/#combining-render-and-compose","title":"Combining render and compose","text":"<p>Let's look at an example that combines both these methods. We will create a custom widget with a linear gradient as a background. The background will be animated (I did promise fun)!</p> render_compose.pyOutput <pre><code>from time import time\n\nfrom textual.app import App, ComposeResult, RenderResult\nfrom textual.containers import Container\nfrom textual.renderables.gradient import LinearGradient\nfrom textual.widgets import Static\n\nCOLORS = [\n    \"#881177\",\n    \"#aa3355\",\n    \"#cc6666\",\n    \"#ee9944\",\n    \"#eedd00\",\n    \"#99dd55\",\n    \"#44dd88\",\n    \"#22ccbb\",\n    \"#00bbcc\",\n    \"#0099cc\",\n    \"#3366bb\",\n    \"#663399\",\n]\nSTOPS = [(i / (len(COLORS) - 1), color) for i, color in enumerate(COLORS)]\n\n\nclass Splash(Container):\n    \"\"\"Custom widget that extends Container.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Splash {\n        align: center middle;\n    }\n    Static {\n        width: 40;\n        padding: 2 4;\n    }\n    \"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.auto_refresh = 1 / 30  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Making a splash with Textual!\")  # (2)!\n\n    def render(self) -&gt; RenderResult:\n        return LinearGradient(time() * 90, STOPS)  # (3)!\n\n\nclass SplashApp(App):\n    \"\"\"Simple app to show our custom widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Splash()\n\n\nif __name__ == \"__main__\":\n    app = SplashApp()\n    app.run()\n</code></pre> <ol> <li>Refresh the widget 30 times a second.</li> <li>Compose our compound widget, which contains a single Static.</li> <li>Render a linear gradient in the background.</li> </ol> <p> SplashApp \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580Making\u00a0a\u00a0splash\u00a0with\u00a0Textual!\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 </p> <p>The <code>Splash</code> custom widget has a <code>compose</code> method which adds a simple <code>Static</code> widget to display a message. Additionally there is a <code>render</code> method which returns a renderable to fill the background with a gradient.</p> <p>Tip</p> <p>As fun as this is, spinning animated gradients may be too distracting for most apps!</p>"},{"location":"how-to/render-and-compose/#summary","title":"Summary","text":"<p>Keep the following in mind when building custom widgets.</p> <ol> <li>Use <code>render</code> to return simple text, or a Rich renderable.</li> <li>Use <code>compose</code> to create a widget out of other widgets.</li> <li>If you define both, then <code>render</code> will be used as a background.</li> </ol> <p>We are here to help!</p>"},{"location":"how-to/style-inline-apps/","title":"Style Inline Apps","text":"<p>Version 0.55.0 of Textual added support for running apps inline (below the prompt). Running an inline app is as simple as adding <code>inline=True</code> to <code>run()</code>.</p> <p>Your apps will typically run inline without modification, but you may want to make some tweaks for inline mode, which you can do with a little CSS. This How-To will explain how.</p> <p>Let's look at an inline app. The following app displays the the current time (and keeps it up to date).</p> <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass ClockApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    #clock {\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"\", id=\"clock\")\n\n    def on_ready(self) -&gt; None:\n        self.update_clock()\n        self.set_interval(1, self.update_clock)\n\n    def update_clock(self) -&gt; None:\n        clock = datetime.now().time()\n        self.query_one(Digits).update(f\"{clock:%T}\")\n\n\nif __name__ == \"__main__\":\n    app = ClockApp()\n    app.run(inline=True)  #  (1)!\n</code></pre> <ol> <li>The <code>inline=True</code> runs the app inline.</li> </ol> <p>With Textual's default settings, this clock will be displayed in 5 lines; 3 for the digits and 2 for a top and bottom border.</p> <p>You can change the height or the border with CSS and the <code>:inline</code> pseudo-selector, which only matches rules in inline mode. Let's update this app to remove the default border, and increase the height:</p> <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass ClockApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n        &amp;:inline {\n            border: none;\n            height: 50vh;\n            Digits {\n                color: $success;\n            }\n        }\n    }\n    #clock {\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"\", id=\"clock\")\n\n    def on_ready(self) -&gt; None:\n        self.update_clock()\n        self.set_interval(1, self.update_clock)\n\n    def update_clock(self) -&gt; None:\n        clock = datetime.now().time()\n        self.query_one(Digits).update(f\"{clock:%T}\")\n\n\nif __name__ == \"__main__\":\n    app = ClockApp()\n    app.run(inline=True)\n</code></pre> <p>The highlighted CSS targets online inline mode. By setting the <code>height</code> rule on Screen we can define how many lines the app should consume when it runs. Setting <code>border: none</code> removes the default border when running in inline mode.</p> <p>We've also added a rule to change the color of the clock when running inline.</p>"},{"location":"how-to/style-inline-apps/#summary","title":"Summary","text":"<p>Most apps will not require modification to run inline, but if you want to tweak the height and border you can write CSS that targets inline mode with the <code>:inline</code> pseudo-selector.</p>"},{"location":"reference/","title":"Reference","text":"<p>Welcome to the Textual Reference.</p> <ul> <li> <p> CSS Types</p> <p>CSS Types are the data types that CSS styles accept in their rules.</p> <p> CSS Types Reference</p> </li> <li> <p> Events</p> <p>Events are how Textual communicates with your application.</p> <p> Events Reference</p> </li> <li> <p> Styles</p> <p>All the styles you can use to take your Textual app to the next level.</p> <p> Styles Reference</p> </li> <li> <p> Widgets</p> <p>How to use the many widgets builtin to Textual.</p> <p> Widgets Reference</p> </li> </ul>"},{"location":"styles/","title":"Styles","text":"<p>A reference to Widget styles.</p> <p>See the links to the left of the page, or in the hamburger menu (three horizontal bars, top left).</p>"},{"location":"styles/align/","title":"Align","text":"<p>The <code>align</code> style aligns children within a container.</p>"},{"location":"styles/align/#syntax","title":"Syntax","text":"<pre>\nalign: &lt;horizontal&gt; &lt;vertical&gt;;\n\nalign-horizontal: &lt;horizontal&gt;;\nalign-vertical: &lt;vertical&gt;;\n</pre> <p>The <code>align</code> style takes a <code>&lt;horizontal&gt;</code> followed by a <code>&lt;vertical&gt;</code>.</p> <p>You can also set the alignment for each axis individually with <code>align-horizontal</code> and <code>align-vertical</code>.</p>"},{"location":"styles/align/#examples","title":"Examples","text":""},{"location":"styles/align/#basic-usage","title":"Basic usage","text":"<p>This example contains a simple app with two labels centered on the screen with <code>align: center middle;</code>:</p> Outputalign.pyalign.tcss <p> AlignApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503Vertical\u00a0alignment\u00a0with\u00a0Textual\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503Take\u00a0note,\u00a0browsers.\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass AlignApp(App):\n    CSS_PATH = \"align.tcss\"\n\n    def compose(self):\n        yield Label(\"Vertical alignment with [b]Textual[/]\", classes=\"box\")\n        yield Label(\"Take note, browsers.\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = AlignApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\n.box {\n    width: 40;\n    height: 5;\n    margin: 1;\n    padding: 1;\n    background: green;\n    color: white 90%;\n    border: heavy white;\n}\n</code></pre>"},{"location":"styles/align/#all-alignments","title":"All alignments","text":"<p>The next example shows a 3 by 3 grid of containers with text labels. Each label has been aligned differently inside its container, and its text shows its <code>align: ...</code> value.</p> Outputalign_all.pyalign_all.tcss <p> AlignAllApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502left\u00a0top\u2502\u2502center\u00a0top\u2502\u2502right\u00a0top\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502left\u00a0middle\u2502\u2502center\u00a0middle\u2502\u2502right\u00a0middle\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502left\u00a0bottom\u2502\u2502center\u00a0bottom\u2502\u2502right\u00a0bottom\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.widgets import Label\n\n\nclass AlignAllApp(App):\n    \"\"\"App that illustrates all alignments.\"\"\"\n\n    CSS_PATH = \"align_all.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Container(Label(\"left top\"), id=\"left-top\")\n        yield Container(Label(\"center top\"), id=\"center-top\")\n        yield Container(Label(\"right top\"), id=\"right-top\")\n        yield Container(Label(\"left middle\"), id=\"left-middle\")\n        yield Container(Label(\"center middle\"), id=\"center-middle\")\n        yield Container(Label(\"right middle\"), id=\"right-middle\")\n        yield Container(Label(\"left bottom\"), id=\"left-bottom\")\n        yield Container(Label(\"center bottom\"), id=\"center-bottom\")\n        yield Container(Label(\"right bottom\"), id=\"right-bottom\")\n\n\nif __name__ == \"__main__\":\n    AlignAllApp().run()\n</code></pre> <pre><code>#left-top {\n    /* align: left top; this is the default value and is implied. */\n}\n\n#center-top {\n    align: center top;\n}\n\n#right-top {\n    align: right top;\n}\n\n#left-middle {\n    align: left middle;\n}\n\n#center-middle {\n    align: center middle;\n}\n\n#right-middle {\n    align: right middle;\n}\n\n#left-bottom {\n    align: left bottom;\n}\n\n#center-bottom {\n    align: center bottom;\n}\n\n#right-bottom {\n    align: right bottom;\n}\n\nScreen {\n    layout: grid;\n    grid-size: 3 3;\n    grid-gutter: 1;\n}\n\nContainer {\n    background: $boost;\n    border: solid gray;\n    height: 100%;\n}\n\nLabel {\n    width: auto;\n    height: 1;\n    background: $accent;\n}\n</code></pre>"},{"location":"styles/align/#css","title":"CSS","text":"<pre><code>/* Align child widgets to the center. */\nalign: center middle;\n/* Align child widget to the top right */\nalign: right top;\n\n/* Change the horizontal alignment of the children of a widget */\nalign-horizontal: right;\n/* Change the vertical alignment of the children of a widget */\nalign-vertical: middle;\n</code></pre>"},{"location":"styles/align/#python","title":"Python","text":"<pre><code># Align child widgets to the center\nwidget.styles.align = (\"center\", \"middle\")\n# Align child widgets to the top right\nwidget.styles.align = (\"right\", \"top\")\n\n# Change the horizontal alignment of the children of a widget\nwidget.styles.align_horizontal = \"right\"\n# Change the vertical alignment of the children of a widget\nwidget.styles.align_vertical = \"middle\"\n</code></pre>"},{"location":"styles/align/#see-also","title":"See also","text":"<ul> <li><code>content-align</code> to set the alignment of content inside a widget.</li> <li><code>text-align</code> to set the alignment of text in a widget.</li> </ul>"},{"location":"styles/background/","title":"Background","text":"<p>The <code>background</code> style sets the background color of a widget.</p>"},{"location":"styles/background/#syntax","title":"Syntax","text":"<pre>\nbackground: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p>The <code>background</code> style requires a <code>&lt;color&gt;</code> optionally followed by <code>&lt;percentage&gt;</code> to specify the color's opacity (clamped between <code>0%</code> and <code>100%</code>).</p>"},{"location":"styles/background/#examples","title":"Examples","text":""},{"location":"styles/background/#basic-usage","title":"Basic usage","text":"<p>This example creates three widgets and applies a different background to each.</p> Outputbackground.pybackground.tcss <p> BackgroundApp Widget\u00a01 Widget\u00a02 Widget\u00a03 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BackgroundApp(App):\n    CSS_PATH = \"background.tcss\"\n\n    def compose(self):\n        yield Label(\"Widget 1\", id=\"static1\")\n        yield Label(\"Widget 2\", id=\"static2\")\n        yield Label(\"Widget 3\", id=\"static3\")\n\n\nif __name__ == \"__main__\":\n    app = BackgroundApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    width: 100%;\n    height: 1fr;\n    content-align: center middle;\n    color: white;\n}\n\n#static1 {\n    background: red;\n}\n\n#static2 {\n    background: rgb(0, 255, 0);\n}\n\n#static3 {\n    background: hsl(240, 100%, 50%);\n}\n</code></pre>"},{"location":"styles/background/#different-opacity-settings","title":"Different opacity settings","text":"<p>The next example creates ten widgets laid out side by side to show the effect of setting different percentages for the background color's opacity.</p> Outputbackground_transparency.pybackground_transparency.tcss <p> BackgroundTransparencyApp 10%20%30%40%50%60%70%80%90%100% </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass BackgroundTransparencyApp(App):\n    \"\"\"Simple app to exemplify different transparency settings.\"\"\"\n\n    CSS_PATH = \"background_transparency.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"10%\", id=\"t10\")\n        yield Static(\"20%\", id=\"t20\")\n        yield Static(\"30%\", id=\"t30\")\n        yield Static(\"40%\", id=\"t40\")\n        yield Static(\"50%\", id=\"t50\")\n        yield Static(\"60%\", id=\"t60\")\n        yield Static(\"70%\", id=\"t70\")\n        yield Static(\"80%\", id=\"t80\")\n        yield Static(\"90%\", id=\"t90\")\n        yield Static(\"100%\", id=\"t100\")\n\n\nif __name__ == \"__main__\":\n    app = BackgroundTransparencyApp()\n    app.run()\n</code></pre> <pre><code>#t10 {\n    background: red 10%;\n}\n\n#t20 {\n    background: red 20%;\n}\n\n#t30 {\n    background: red 30%;\n}\n\n#t40 {\n    background: red 40%;\n}\n\n#t50 {\n    background: red 50%;\n}\n\n#t60 {\n    background: red 60%;\n}\n\n#t70 {\n    background: red 70%;\n}\n\n#t80 {\n    background: red 80%;\n}\n\n#t90 {\n    background: red 90%;\n}\n\n#t100 {\n    background: red 100%;\n}\n\nScreen {\n    layout: horizontal;\n}\n\nStatic {\n    height: 100%;\n    width: 1fr;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/background/#css","title":"CSS","text":"<pre><code>/* Blue background */\nbackground: blue;\n\n/* 20% red background */\nbackground: red 20%;\n\n/* RGB color */\nbackground: rgb(100, 120, 200);\n\n/* HSL color */\nbackground: hsl(290, 70%, 80%);\n</code></pre>"},{"location":"styles/background/#python","title":"Python","text":"<p>You can use the same syntax as CSS, or explicitly set a <code>Color</code> object for finer-grained control.</p> <pre><code># Set blue background\nwidget.styles.background = \"blue\"\n# Set through HSL model\nwidget.styles.background = \"hsl(351,32%,89%)\"\n\nfrom textual.color import Color\n# Set with a color object by parsing a string\nwidget.styles.background = Color.parse(\"pink\")\nwidget.styles.background = Color.parse(\"#FF00FF\")\n# Set with a color object instantiated directly\nwidget.styles.background = Color(120, 60, 100)\n</code></pre>"},{"location":"styles/background/#see-also","title":"See also","text":"<ul> <li><code>color</code> to set the color of text in a widget.</li> </ul>"},{"location":"styles/border/","title":"Border","text":"<p>The <code>border</code> style enables the drawing of a box around a widget.</p> <p>A border style may also be applied to individual edges with <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, and <code>border-left</code>.</p> <p>Note</p> <p><code>border</code> and <code>outline</code> cannot coexist in the same edge of a widget.</p>"},{"location":"styles/border/#syntax","title":"Syntax","text":"<pre>\nborder: [&lt;border&gt;] [&lt;color&gt;] [&lt;percentage&gt;];\n\nborder-top: [&lt;border&gt;] [&lt;color&gt;] [&lt;percentage&gt;];\nborder-right: [&lt;border&gt;] [&lt;color&gt; [&lt;percentage&gt;]];\nborder-bottom: [&lt;border&gt;] [&lt;color&gt; [&lt;percentage&gt;]];\nborder-left: [&lt;border&gt;] [&lt;color&gt; [&lt;percentage&gt;]];\n</pre> <p>In CSS, the border is set with a border style and a color. Both are optional. An optional percentage may be added to blend the border with the background color.</p> <p>In Python, the border is set with a tuple of border style and a color.</p>"},{"location":"styles/border/#border-command","title":"Border command","text":"<p>The <code>textual</code> CLI has a subcommand which will let you explore the various border types interactively:</p> <pre><code>textual borders\n</code></pre> <p>Alternatively, you can see the examples below.</p>"},{"location":"styles/border/#examples","title":"Examples","text":""},{"location":"styles/border/#basic-usage","title":"Basic usage","text":"<p>This examples shows three widgets with different border styles.</p> Outputborder.pyborder.tcss <p> BorderApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502My\u00a0border\u00a0is\u00a0solid\u00a0red\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 \u254f\u254f \u254fMy\u00a0border\u00a0is\u00a0dashed\u00a0green\u254f \u254f\u254f \u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258aMy\u00a0border\u00a0is\u00a0tall\u00a0blue\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BorderApp(App):\n    CSS_PATH = \"border.tcss\"\n\n    def compose(self):\n        yield Label(\"My border is solid red\", id=\"label1\")\n        yield Label(\"My border is dashed green\", id=\"label2\")\n        yield Label(\"My border is tall blue\", id=\"label3\")\n\n\nif __name__ == \"__main__\":\n    app = BorderApp()\n    app.run()\n</code></pre> <pre><code>#label1 {\n    background: red 20%;\n    color: red;\n    border: solid red;\n}\n\n#label2 {\n    background: green 20%;\n    color: green;\n    border: dashed green;\n}\n\n#label3 {\n    background: blue 20%;\n    color: blue;\n    border: tall blue;\n}\n\nScreen {\n    background: white;\n}\n\nScreen &gt; Label {\n    width: 100%;\n    height: 5;\n    content-align: center middle;\n    color: white;\n    margin: 1;\n    box-sizing: border-box;\n}\n</code></pre>"},{"location":"styles/border/#all-border-types","title":"All border types","text":"<p>The next example shows a grid with all the available border types.</p> Outputborder_all.pyborder_all.tcss <p> AllBordersApp +----------------+\u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 |ascii|blank\u254fdashed\u254f\u2551double\u2551 +----------------+\u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2597\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2596 \u2503heavy\u2503hidden/nonehkey\u2590inner\u258c \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u259d\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2598 \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c\u258a\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u258couter\u2590\u258apanel\u258e\u2502round\u2502\u2502solid\u2502 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258atall\u258e\u2588thick\u2588\u258fvkey\u2595\u258ewide\u258a \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass AllBordersApp(App):\n    CSS_PATH = \"border_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"ascii\", id=\"ascii\"),\n            Label(\"blank\", id=\"blank\"),\n            Label(\"dashed\", id=\"dashed\"),\n            Label(\"double\", id=\"double\"),\n            Label(\"heavy\", id=\"heavy\"),\n            Label(\"hidden/none\", id=\"hidden\"),\n            Label(\"hkey\", id=\"hkey\"),\n            Label(\"inner\", id=\"inner\"),\n            Label(\"outer\", id=\"outer\"),\n            Label(\"panel\", id=\"panel\"),\n            Label(\"round\", id=\"round\"),\n            Label(\"solid\", id=\"solid\"),\n            Label(\"tall\", id=\"tall\"),\n            Label(\"thick\", id=\"thick\"),\n            Label(\"vkey\", id=\"vkey\"),\n            Label(\"wide\", id=\"wide\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = AllBordersApp()\n    app.run()\n</code></pre> <pre><code>#ascii {\n    border: ascii $accent;\n}\n\n#blank {\n    border: blank $accent;\n}\n\n#dashed {\n    border: dashed $accent;\n}\n\n#double {\n    border: double $accent;\n}\n\n#heavy {\n    border: heavy $accent;\n}\n\n#hidden {\n    border: hidden $accent;\n}\n\n#hkey {\n    border: hkey $accent;\n}\n\n#inner {\n    border: inner $accent;\n}\n\n#outer {\n    border: outer $accent;\n}\n\n#panel {\n    border: panel $accent;\n}\n\n#round {\n    border: round $accent;\n}\n\n#solid {\n    border: solid $accent;\n}\n\n#tall {\n    border: tall $accent;\n}\n\n#thick {\n    border: thick $accent;\n}\n\n#vkey {\n    border: vkey $accent;\n}\n\n#wide {\n    border: wide $accent;\n}\n\nGrid {\n    grid-size: 4 4;\n    align: center middle;\n    grid-gutter: 1 2;\n}\n\nLabel {\n    width: 20;\n    height: 3;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/border/#borders-and-outlines","title":"Borders and outlines","text":"<p>The next example makes the difference between <code>border</code> and <code>outline</code> clearer by having three labels side-by-side. They contain the same text, have the same width and height, and are styled exactly the same up to their <code>border</code> and <code>outline</code> styles.</p> <p>This example also shows that a widget cannot contain both a <code>border</code> and an <code>outline</code>:</p> Outputoutline_vs_border.pyoutline_vs_border.tcss <p> OutlineBorderApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502ear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502ear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502nd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path\u2502 \u2502here\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502I\u00a0must\u00a0not\u00a0fear.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineBorderApp(App):\n    CSS_PATH = \"outline_vs_border.tcss\"\n\n    def compose(self):\n        yield Label(TEXT, classes=\"outline\")\n        yield Label(TEXT, classes=\"border\")\n        yield Label(TEXT, classes=\"outline border\")\n\n\nif __name__ == \"__main__\":\n    app = OutlineBorderApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    height: 8;\n}\n\n.outline {\n    outline: $error round;\n}\n\n.border {\n    border: $success heavy;\n}\n</code></pre>"},{"location":"styles/border/#css","title":"CSS","text":"<pre><code>/* Set a heavy white border */\nborder: heavy white;\n\n/* Set a red border on the left */\nborder-left: outer red;\n\n/* Set a rounded orange border, 50% opacity. */\nborder: round orange 50%;\n</code></pre>"},{"location":"styles/border/#python","title":"Python","text":"<pre><code># Set a heavy white border\nwidget.styles.border = (\"heavy\", \"white\")\n\n# Set a red border on the left\nwidget.styles.border_left = (\"outer\", \"red\")\n</code></pre>"},{"location":"styles/border/#see-also","title":"See also","text":"<ul> <li><code>box-sizing</code> to specify how to account for the border in a widget's dimensions.</li> <li><code>outline</code> to add an outline around the content of a widget.</li> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_align/","title":"Border-subtitle-align","text":"<p>The <code>border-subtitle-align</code> style sets the horizontal alignment for the border subtitle.</p>"},{"location":"styles/border_subtitle_align/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-align: &lt;horizontal&gt;;\n</pre> <p>The <code>border-subtitle-align</code> style takes a <code>&lt;horizontal&gt;</code> that determines where the border subtitle is aligned along the top edge of the border. This means that the border corners are always visible.</p>"},{"location":"styles/border_subtitle_align/#default","title":"Default","text":"<p>The default alignment is <code>right</code>.</p>"},{"location":"styles/border_subtitle_align/#examples","title":"Examples","text":""},{"location":"styles/border_subtitle_align/#basic-usage","title":"Basic usage","text":"<p>This example shows three labels, each with a different border subtitle alignment:</p> Outputborder_subtitle_align.pyborder_subtitle_align.tcss <p> BorderSubtitleAlignApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502My\u00a0subtitle\u00a0is\u00a0on\u00a0the\u00a0left.\u2502 \u2502\u2502 \u2514\u2500\u00a0&lt;\u00a0Left\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 \u254f\u254f \u254fMy\u00a0subtitle\u00a0is\u00a0centered\u254f \u254f\u254f \u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u00a0Centered!\u00a0\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258aMy\u00a0subtitle\u00a0is\u00a0on\u00a0the\u00a0right\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0Right\u00a0&gt;\u00a0\u2581\u258e </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BorderSubtitleAlignApp(App):\n    CSS_PATH = \"border_subtitle_align.tcss\"\n\n    def compose(self):\n        lbl = Label(\"My subtitle is on the left.\", id=\"label1\")\n        lbl.border_subtitle = \"&lt; Left\"\n        yield lbl\n\n        lbl = Label(\"My subtitle is centered\", id=\"label2\")\n        lbl.border_subtitle = \"Centered!\"\n        yield lbl\n\n        lbl = Label(\"My subtitle is on the right\", id=\"label3\")\n        lbl.border_subtitle = \"Right &gt;\"\n        yield lbl\n\n\nif __name__ == \"__main__\":\n    app = BorderSubtitleAlignApp()\n    app.run()\n</code></pre> <pre><code>#label1 {\n    border: solid $secondary;\n    border-subtitle-align: left;\n}\n\n#label2 {\n    border: dashed $secondary;\n    border-subtitle-align: center;\n}\n\n#label3 {\n    border: tall $secondary;\n    border-subtitle-align: right;\n}\n\nScreen &gt; Label {\n    width: 100%;\n    height: 5;\n    content-align: center middle;\n    color: white;\n    margin: 1;\n    box-sizing: border-box;\n}\n</code></pre>"},{"location":"styles/border_subtitle_align/#complete-usage-reference","title":"Complete usage reference","text":"<p>This example shows all border title and subtitle alignments, together with some examples of how (sub)titles can have custom markup. Open the code tabs to see the details of the code examples.</p> Outputborder_sub_title_align_all.pyborder_sub_title_align_all.tcss <p> BorderSubTitleAlignAll \u258f\u00a0\u00a0Border\u00a0title\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u256d\u2500\u00a0Lef\u2026\u00a0\u2500\u256e\u2581\u2581\u2581\u2581\u2581\u00a0Left\u00a0\u2581\u2581\u2581\u2581\u2581 \u258fThis\u00a0is\u00a0the\u00a0story\u00a0of\u2595\u2502a\u00a0Python\u2502\u258edeveloper\u00a0that\u258a \u258f\u00a0\u00a0\u00a0Border\u00a0subtitle\u00a0\u00a0\u2595\u2570\u2500\u00a0Cen\u2026\u00a0\u2500\u256f\u2594\u2594\u2594\u2594\u2594\u00a0@@@\u00a0\u2594\u2594\u2594\u2594\u2594\u2594 +--------------+\u2500Title\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 |had\u00a0to\u00a0fill\u00a0up|\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nine\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0and\u00a0ended\u00a0up\u00a0redoing\u00a0it\u00a0\u00a0 +-\u00a0Left\u00a0-------+\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500Subtitle\u2500 \u2500Title,\u00a0but\u00a0really\u00a0looo\u2026\u2500 \u2500Title,\u00a0but\u00a0r\u2026\u2500\u2500Title,\u00a0but\u00a0reall\u2026\u2500 because\u00a0the\u00a0first\u00a0try\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0had\u00a0some\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0that\u00a0were\u00a0too\u00a0long.\u00a0\u00a0\u00a0\u00a0 \u2500Subtitle,\u00a0bu\u2026\u2500\u2500Subtitle,\u00a0but\u00a0re\u2026\u2500 \u2500Subtitle,\u00a0but\u00a0really\u00a0l\u2026\u2500 </p> <pre><code>from textual.app import App\nfrom textual.containers import Container, Grid\nfrom textual.widgets import Label\n\n\ndef make_label_container(  # (11)!\n    text: str, id: str, border_title: str, border_subtitle: str\n) -&gt; Container:\n    lbl = Label(text, id=id)\n    lbl.border_title = border_title\n    lbl.border_subtitle = border_subtitle\n    return Container(lbl)\n\n\nclass BorderSubTitleAlignAll(App[None]):\n    CSS_PATH = \"border_sub_title_align_all.tcss\"\n\n    def compose(self):\n        with Grid():\n            yield make_label_container(  # (1)!\n                \"This is the story of\",\n                \"lbl1\",\n                \"[b]Border [i]title[/i][/]\",\n                \"[u][r]Border[/r] subtitle[/]\",\n            )\n            yield make_label_container(  # (2)!\n                \"a Python\",\n                \"lbl2\",\n                \"[b red]Left, but it's loooooooooooong\",\n                \"[reverse]Center, but it's loooooooooooong\",\n            )\n            yield make_label_container(  # (3)!\n                \"developer that\",\n                \"lbl3\",\n                \"[b i on purple]Left[/]\",\n                \"[r u white on black]@@@[/]\",\n            )\n            yield make_label_container(\n                \"had to fill up\",\n                \"lbl4\",\n                \"\",  # (4)!\n                \"[link=https://textual.textualize.io]Left[/]\",  # (5)!\n            )\n            yield make_label_container(  # (6)!\n                \"nine labels\", \"lbl5\", \"Title\", \"Subtitle\"\n            )\n            yield make_label_container(  # (7)!\n                \"and ended up redoing it\",\n                \"lbl6\",\n                \"Title\",\n                \"Subtitle\",\n            )\n            yield make_label_container(  # (8)!\n                \"because the first try\",\n                \"lbl7\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (9)!\n                \"had some labels\",\n                \"lbl8\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (10)!\n                \"that were too long.\",\n                \"lbl9\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n\n\nif __name__ == \"__main__\":\n    app = BorderSubTitleAlignAll()\n    app.run()\n</code></pre> <ol> <li>Border (sub)titles can contain nested markup.</li> <li>Long (sub)titles get truncated and occupy as much space as possible.</li> <li>(Sub)titles can be stylised with Rich markup.</li> <li>An empty (sub)title isn't displayed.</li> <li>The markup can even contain Rich links.</li> <li>If the widget does not have a border, the title and subtitle are not shown.</li> <li>When the side borders are not set, the (sub)title will align with the edge of the widget.</li> <li>The title and subtitle are aligned on the left and very long, so they get truncated and we can still see the rightmost character of the border edge.</li> <li>The title and subtitle are centered and very long, so they get truncated and are centered with one character of padding on each side.</li> <li>The title and subtitle are aligned on the right and very long, so they get truncated and we can still see the leftmost character of the border edge.</li> <li>An auxiliary function to create labels with border title and subtitle.</li> </ol> <pre><code>Grid {\n    grid-size: 3 3;\n    align: center middle;\n}\n\nContainer {\n    width: 100%;\n    height: 100%;\n    align: center middle;\n}\n\n#lbl1 {  /* (1)! */\n    border: vkey $secondary;\n}\n\n#lbl2 {  /* (2)! */\n    border: round $secondary;\n    border-title-align: right;\n    border-subtitle-align: right;\n}\n\n#lbl3 {\n    border: wide $secondary;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl4 {\n    border: ascii $success;\n    border-title-align: center;  /* (3)! */\n    border-subtitle-align: left;\n}\n\n#lbl5 {  /* (4)! */\n    /* No border = no (sub)title. */\n    border: none $success;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl6 {  /* (5)! */\n    border-top: solid $success;\n    border-bottom: solid $success;\n}\n\n#lbl7 {  /* (6)! */\n    border-top: solid $error;\n    border-bottom: solid $error;\n    padding: 1 2;\n    border-subtitle-align: left;\n}\n\n#lbl8 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl9 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: right;\n}\n</code></pre> <ol> <li>The default alignment for the title is <code>left</code> and the default alignment for the subtitle is <code>right</code>.</li> <li>Specifying an alignment when the (sub)title is too long has no effect. (Although, it will have an effect if the (sub)title is shortened or if the widget is widened.)</li> <li>Setting the alignment does not affect empty (sub)titles.</li> <li>If the border is not set, or set to <code>none</code>/<code>hidden</code>, the (sub)title is not shown.</li> <li>If the (sub)title alignment is on a side which does not have a border edge, the (sub)title will be flush to that side.</li> <li>Naturally, (sub)title positioning is affected by padding.</li> </ol>"},{"location":"styles/border_subtitle_align/#css","title":"CSS","text":"<pre><code>border-subtitle-align: left;\nborder-subtitle-align: center;\nborder-subtitle-align: right;\n</code></pre>"},{"location":"styles/border_subtitle_align/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_align = \"left\"\nwidget.styles.border_subtitle_align = \"center\"\nwidget.styles.border_subtitle_align = \"right\"\n</code></pre>"},{"location":"styles/border_subtitle_align/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_background/","title":"Border-subtitle-background","text":"<p>The <code>border-subtitle-background</code> style sets the background color of the border_subtitle.</p>"},{"location":"styles/border_subtitle_background/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-background: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_subtitle_background/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_subtitle_background/#css","title":"CSS","text":"<pre><code>border-subtitle-background: blue;\n</code></pre>"},{"location":"styles/border_subtitle_background/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_background = \"blue\"\n</code></pre>"},{"location":"styles/border_subtitle_background/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_color/","title":"Border-subtitle-color","text":"<p>The <code>border-subtitle-color</code> style sets the color of the border_subtitle.</p>"},{"location":"styles/border_subtitle_color/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-color: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_subtitle_color/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_subtitle_color/#css","title":"CSS","text":"<pre><code>border-subtitle-color: red;\n</code></pre>"},{"location":"styles/border_subtitle_color/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_color = \"red\"\n</code></pre>"},{"location":"styles/border_subtitle_color/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_style/","title":"Border-subtitle-style","text":"<p>The <code>border-subtitle-style</code> style sets the text style of the border_subtitle.</p>"},{"location":"styles/border_subtitle_style/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-style: &lt;text-style&gt;;\n</pre>"},{"location":"styles/border_subtitle_style/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_subtitle_style/#css","title":"CSS","text":"<pre><code>border-subtitle-style: bold underline;\n</code></pre>"},{"location":"styles/border_subtitle_style/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_style = \"bold underline\"\n</code></pre>"},{"location":"styles/border_subtitle_style/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_align/","title":"Border-title-align","text":"<p>The <code>border-title-align</code> style sets the horizontal alignment for the border title.</p>"},{"location":"styles/border_title_align/#syntax","title":"Syntax","text":"<pre>\nborder-title-align: &lt;horizontal&gt;;\n</pre> <p>The <code>border-title-align</code> style takes a <code>&lt;horizontal&gt;</code> that determines where the border title is aligned along the top edge of the border. This means that the border corners are always visible.</p>"},{"location":"styles/border_title_align/#default","title":"Default","text":"<p>The default alignment is <code>left</code>.</p>"},{"location":"styles/border_title_align/#examples","title":"Examples","text":""},{"location":"styles/border_title_align/#basic-usage","title":"Basic usage","text":"<p>This example shows three labels, each with a different border title alignment:</p> Outputborder_title_align.pyborder_title_align.tcss <p> BorderTitleAlignApp \u250c\u2500\u00a0&lt;\u00a0Left\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502My\u00a0title\u00a0is\u00a0on\u00a0the\u00a0left.\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u00a0Centered!\u00a0\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 \u254f\u254f \u254fMy\u00a0title\u00a0is\u00a0centered\u254f \u254f\u254f \u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u00a0Right\u00a0&gt;\u00a0\u2594\u258e \u258a\u258e \u258aMy\u00a0title\u00a0is\u00a0on\u00a0the\u00a0right\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BorderTitleAlignApp(App):\n    CSS_PATH = \"border_title_align.tcss\"\n\n    def compose(self):\n        lbl = Label(\"My title is on the left.\", id=\"label1\")\n        lbl.border_title = \"&lt; Left\"\n        yield lbl\n\n        lbl = Label(\"My title is centered\", id=\"label2\")\n        lbl.border_title = \"Centered!\"\n        yield lbl\n\n        lbl = Label(\"My title is on the right\", id=\"label3\")\n        lbl.border_title = \"Right &gt;\"\n        yield lbl\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleAlignApp()\n    app.run()\n</code></pre> <pre><code>#label1 {\n    border: solid $secondary;\n    border-title-align: left;\n}\n\n#label2 {\n    border: dashed $secondary;\n    border-title-align: center;\n}\n\n#label3 {\n    border: tall $secondary;\n    border-title-align: right;\n}\n\nScreen &gt; Label {\n    width: 100%;\n    height: 5;\n    content-align: center middle;\n    color: white;\n    margin: 1;\n    box-sizing: border-box;\n}\n</code></pre>"},{"location":"styles/border_title_align/#complete-usage-reference","title":"Complete usage reference","text":"<p>This example shows all border title and subtitle alignments, together with some examples of how (sub)titles can have custom markup. Open the code tabs to see the details of the code examples.</p> Outputborder_sub_title_align_all.pyborder_sub_title_align_all.tcss <p> BorderSubTitleAlignAll \u258f\u00a0\u00a0Border\u00a0title\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u256d\u2500\u00a0Lef\u2026\u00a0\u2500\u256e\u2581\u2581\u2581\u2581\u2581\u00a0Left\u00a0\u2581\u2581\u2581\u2581\u2581 \u258fThis\u00a0is\u00a0the\u00a0story\u00a0of\u2595\u2502a\u00a0Python\u2502\u258edeveloper\u00a0that\u258a \u258f\u00a0\u00a0\u00a0Border\u00a0subtitle\u00a0\u00a0\u2595\u2570\u2500\u00a0Cen\u2026\u00a0\u2500\u256f\u2594\u2594\u2594\u2594\u2594\u00a0@@@\u00a0\u2594\u2594\u2594\u2594\u2594\u2594 +--------------+\u2500Title\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 |had\u00a0to\u00a0fill\u00a0up|\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nine\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0and\u00a0ended\u00a0up\u00a0redoing\u00a0it\u00a0\u00a0 +-\u00a0Left\u00a0-------+\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500Subtitle\u2500 \u2500Title,\u00a0but\u00a0really\u00a0looo\u2026\u2500 \u2500Title,\u00a0but\u00a0r\u2026\u2500\u2500Title,\u00a0but\u00a0reall\u2026\u2500 because\u00a0the\u00a0first\u00a0try\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0had\u00a0some\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0that\u00a0were\u00a0too\u00a0long.\u00a0\u00a0\u00a0\u00a0 \u2500Subtitle,\u00a0bu\u2026\u2500\u2500Subtitle,\u00a0but\u00a0re\u2026\u2500 \u2500Subtitle,\u00a0but\u00a0really\u00a0l\u2026\u2500 </p> <pre><code>from textual.app import App\nfrom textual.containers import Container, Grid\nfrom textual.widgets import Label\n\n\ndef make_label_container(  # (11)!\n    text: str, id: str, border_title: str, border_subtitle: str\n) -&gt; Container:\n    lbl = Label(text, id=id)\n    lbl.border_title = border_title\n    lbl.border_subtitle = border_subtitle\n    return Container(lbl)\n\n\nclass BorderSubTitleAlignAll(App[None]):\n    CSS_PATH = \"border_sub_title_align_all.tcss\"\n\n    def compose(self):\n        with Grid():\n            yield make_label_container(  # (1)!\n                \"This is the story of\",\n                \"lbl1\",\n                \"[b]Border [i]title[/i][/]\",\n                \"[u][r]Border[/r] subtitle[/]\",\n            )\n            yield make_label_container(  # (2)!\n                \"a Python\",\n                \"lbl2\",\n                \"[b red]Left, but it's loooooooooooong\",\n                \"[reverse]Center, but it's loooooooooooong\",\n            )\n            yield make_label_container(  # (3)!\n                \"developer that\",\n                \"lbl3\",\n                \"[b i on purple]Left[/]\",\n                \"[r u white on black]@@@[/]\",\n            )\n            yield make_label_container(\n                \"had to fill up\",\n                \"lbl4\",\n                \"\",  # (4)!\n                \"[link=https://textual.textualize.io]Left[/]\",  # (5)!\n            )\n            yield make_label_container(  # (6)!\n                \"nine labels\", \"lbl5\", \"Title\", \"Subtitle\"\n            )\n            yield make_label_container(  # (7)!\n                \"and ended up redoing it\",\n                \"lbl6\",\n                \"Title\",\n                \"Subtitle\",\n            )\n            yield make_label_container(  # (8)!\n                \"because the first try\",\n                \"lbl7\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (9)!\n                \"had some labels\",\n                \"lbl8\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (10)!\n                \"that were too long.\",\n                \"lbl9\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n\n\nif __name__ == \"__main__\":\n    app = BorderSubTitleAlignAll()\n    app.run()\n</code></pre> <ol> <li>Border (sub)titles can contain nested markup.</li> <li>Long (sub)titles get truncated and occupy as much space as possible.</li> <li>(Sub)titles can be stylised with Rich markup.</li> <li>An empty (sub)title isn't displayed.</li> <li>The markup can even contain Rich links.</li> <li>If the widget does not have a border, the title and subtitle are not shown.</li> <li>When the side borders are not set, the (sub)title will align with the edge of the widget.</li> <li>The title and subtitle are aligned on the left and very long, so they get truncated and we can still see the rightmost character of the border edge.</li> <li>The title and subtitle are centered and very long, so they get truncated and are centered with one character of padding on each side.</li> <li>The title and subtitle are aligned on the right and very long, so they get truncated and we can still see the leftmost character of the border edge.</li> <li>An auxiliary function to create labels with border title and subtitle.</li> </ol> <pre><code>Grid {\n    grid-size: 3 3;\n    align: center middle;\n}\n\nContainer {\n    width: 100%;\n    height: 100%;\n    align: center middle;\n}\n\n#lbl1 {  /* (1)! */\n    border: vkey $secondary;\n}\n\n#lbl2 {  /* (2)! */\n    border: round $secondary;\n    border-title-align: right;\n    border-subtitle-align: right;\n}\n\n#lbl3 {\n    border: wide $secondary;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl4 {\n    border: ascii $success;\n    border-title-align: center;  /* (3)! */\n    border-subtitle-align: left;\n}\n\n#lbl5 {  /* (4)! */\n    /* No border = no (sub)title. */\n    border: none $success;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl6 {  /* (5)! */\n    border-top: solid $success;\n    border-bottom: solid $success;\n}\n\n#lbl7 {  /* (6)! */\n    border-top: solid $error;\n    border-bottom: solid $error;\n    padding: 1 2;\n    border-subtitle-align: left;\n}\n\n#lbl8 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl9 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: right;\n}\n</code></pre> <ol> <li>The default alignment for the title is <code>left</code> and the default alignment for the subtitle is <code>right</code>.</li> <li>Specifying an alignment when the (sub)title is too long has no effect. (Although, it will have an effect if the (sub)title is shortened or if the widget is widened.)</li> <li>Setting the alignment does not affect empty (sub)titles.</li> <li>If the border is not set, or set to <code>none</code>/<code>hidden</code>, the (sub)title is not shown.</li> <li>If the (sub)title alignment is on a side which does not have a border edge, the (sub)title will be flush to that side.</li> <li>Naturally, (sub)title positioning is affected by padding.</li> </ol>"},{"location":"styles/border_title_align/#css","title":"CSS","text":"<pre><code>border-title-align: left;\nborder-title-align: center;\nborder-title-align: right;\n</code></pre>"},{"location":"styles/border_title_align/#python","title":"Python","text":"<pre><code>widget.styles.border_title_align = \"left\"\nwidget.styles.border_title_align = \"center\"\nwidget.styles.border_title_align = \"right\"\n</code></pre>"},{"location":"styles/border_title_align/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_background/","title":"Border-title-background","text":"<p>The <code>border-title-background</code> style sets the background color of the border_title.</p>"},{"location":"styles/border_title_background/#syntax","title":"Syntax","text":"<pre>\nborder-title-background: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_title_background/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_title_background/#css","title":"CSS","text":"<pre><code>border-title-background: blue;\n</code></pre>"},{"location":"styles/border_title_background/#python","title":"Python","text":"<pre><code>widget.styles.border_title_background = \"blue\"\n</code></pre>"},{"location":"styles/border_title_background/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_color/","title":"Border-title-color","text":"<p>The <code>border-title-color</code> style sets the color of the border_title.</p>"},{"location":"styles/border_title_color/#syntax","title":"Syntax","text":"<pre>\nborder-title-color: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_title_color/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_title_color/#css","title":"CSS","text":"<pre><code>border-title-color: red;\n</code></pre>"},{"location":"styles/border_title_color/#python","title":"Python","text":"<pre><code>widget.styles.border_title_color = \"red\"\n</code></pre>"},{"location":"styles/border_title_color/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_style/","title":"Border-title-style","text":"<p>The <code>border-title-style</code> style sets the text style of the border_title.</p>"},{"location":"styles/border_title_style/#syntax","title":"Syntax","text":"<pre>\nborder-title-style: &lt;text-style&gt;;\n</pre>"},{"location":"styles/border_title_style/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_title_style/#css","title":"CSS","text":"<pre><code>border-title-style: bold underline;\n</code></pre>"},{"location":"styles/border_title_style/#python","title":"Python","text":"<pre><code>widget.styles.border_title_style = \"bold underline\"\n</code></pre>"},{"location":"styles/border_title_style/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/box_sizing/","title":"Box-sizing","text":"<p>The <code>box-sizing</code> style determines how the width and height of a widget are calculated.</p>"},{"location":"styles/box_sizing/#syntax","title":"Syntax","text":"<pre><code>box-sizing: border-box | content-box;\n</code></pre>"},{"location":"styles/box_sizing/#values","title":"Values","text":"Value Description <code>border-box</code> (default) Padding and border are included in the width and height. If you add padding and/or border the widget will not change in size, but you will have less space for content. <code>content-box</code> Padding and border will increase the size of the widget, leaving the content area unaffected."},{"location":"styles/box_sizing/#example","title":"Example","text":"<p>Both widgets in this example have the same height (5). The top widget has <code>box-sizing: border-box</code> which means that padding and border reduce the space for content. The bottom widget has <code>box-sizing: content-box</code> which increases the size of the widget to compensate for padding and border.</p> Outputbox_sizing.pybox_sizing.tcss <p> BoxSizingApp \u00a0\u00a0\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0\u00a0 \u258e\u258a \u258eI'm\u00a0using\u00a0border-box!\u258a \u258e\u258a \u00a0\u00a0\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u00a0\u00a0 \u00a0\u00a0\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0\u00a0 \u258e\u258a \u258eI'm\u00a0using\u00a0content-box!\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u00a0\u00a0\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u00a0\u00a0 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\n\nclass BoxSizingApp(App):\n    CSS_PATH = \"box_sizing.tcss\"\n\n    def compose(self):\n        yield Static(\"I'm using border-box!\", id=\"static1\")\n        yield Static(\"I'm using content-box!\", id=\"static2\")\n\n\nif __name__ == \"__main__\":\n    app = BoxSizingApp()\n    app.run()\n</code></pre> <pre><code>#static1 {\n    box-sizing: border-box;\n}\n\n#static2 {\n    box-sizing: content-box;\n}\n\nScreen {\n    background: white;\n    color: black;\n}\n\nApp Static {\n    background: blue 20%;\n    height: 5;\n    margin: 2;\n    padding: 1;\n    border: wide black;\n}\n</code></pre>"},{"location":"styles/box_sizing/#css","title":"CSS","text":"<pre><code>/* Set box sizing to border-box (default) */\nbox-sizing: border-box;\n\n/* Set box sizing to content-box */\nbox-sizing: content-box;\n</code></pre>"},{"location":"styles/box_sizing/#python","title":"Python","text":"<pre><code># Set box sizing to border-box (default)\nwidget.box_sizing = \"border-box\"\n\n# Set box sizing to content-box\nwidget.box_sizing = \"content-box\"\n</code></pre>"},{"location":"styles/box_sizing/#see-also","title":"See also","text":"<ul> <li><code>border</code> to add a border around a widget.</li> <li><code>padding</code> to add spacing around the content of a widget.</li> </ul>"},{"location":"styles/color/","title":"Color","text":"<p>The <code>color</code> style sets the text color of a widget.</p>"},{"location":"styles/color/#syntax","title":"Syntax","text":"<pre>\ncolor: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre> <p>The <code>color</code> style requires a <code>&lt;color&gt;</code> followed by an optional <code>&lt;percentage&gt;</code> to specify the color's opacity.</p> <p>You can also use the special value of <code>\"auto\"</code> in place of a color. This tells Textual to automatically select either white or black text for best contrast against the background.</p>"},{"location":"styles/color/#examples","title":"Examples","text":""},{"location":"styles/color/#basic-usage","title":"Basic usage","text":"<p>This example sets a different text color for each of three different widgets.</p> Outputcolor.pycolor.tcss <p> ColorApp I'm\u00a0red! I'm\u00a0rgb(0,\u00a0255,\u00a00)! I'm\u00a0hsl(240,\u00a0100%,\u00a050%)! </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass ColorApp(App):\n    CSS_PATH = \"color.tcss\"\n\n    def compose(self):\n        yield Label(\"I'm red!\", id=\"label1\")\n        yield Label(\"I'm rgb(0, 255, 0)!\", id=\"label2\")\n        yield Label(\"I'm hsl(240, 100%, 50%)!\", id=\"label3\")\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    height: 1fr;\n    content-align: center middle;\n    width: 100%;\n}\n\n#label1 {\n    color: red;\n}\n\n#label2 {\n    color: rgb(0, 255, 0);\n}\n\n#label3 {\n    color: hsl(240, 100%, 50%);\n}\n</code></pre>"},{"location":"styles/color/#auto","title":"Auto","text":"<p>The next example shows how <code>auto</code> chooses between a lighter or a darker text color to increase the contrast and improve readability.</p> Outputcolor_auto.pycolor_auto.tcss <p> ColorApp The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass ColorApp(App):\n    CSS_PATH = \"color_auto.tcss\"\n\n    def compose(self):\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl1\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl2\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl3\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl4\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl5\")\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    color: auto 80%;\n    content-align: center middle;\n    height: 1fr;\n    width: 100%;\n}\n\n#lbl1 {\n    background: red 80%;\n}\n\n#lbl2 {\n    background: yellow 80%;\n}\n\n#lbl3 {\n    background: blue 80%;\n}\n\n#lbl4 {\n    background: pink 80%;\n}\n\n#lbl5 {\n    background: green 80%;\n}\n</code></pre>"},{"location":"styles/color/#css","title":"CSS","text":"<pre><code>/* Blue text */\ncolor: blue;\n\n/* 20% red text */\ncolor: red 20%;\n\n/* RGB color */\ncolor: rgb(100, 120, 200);\n\n/* Automatically choose color with suitable contrast for readability */\ncolor: auto;\n</code></pre>"},{"location":"styles/color/#python","title":"Python","text":"<p>You can use the same syntax as CSS, or explicitly set a <code>Color</code> object.</p> <pre><code># Set blue text\nwidget.styles.color = \"blue\"\n\nfrom textual.color import Color\n# Set with a color object\nwidget.styles.color = Color.parse(\"pink\")\n</code></pre>"},{"location":"styles/color/#see-also","title":"See also","text":"<ul> <li><code>background</code> to set the background color in a widget.</li> </ul>"},{"location":"styles/content_align/","title":"Content-align","text":"<p>The <code>content-align</code> style aligns content inside a widget.</p>"},{"location":"styles/content_align/#syntax","title":"Syntax","text":"<pre>\ncontent-align: &lt;horizontal&gt; &lt;vertical&gt;;\n\ncontent-align-horizontal: &lt;horizontal&gt;;\ncontent-align-vertical: &lt;vertical&gt;;\n</pre> <p>The <code>content-align</code> style takes a <code>&lt;horizontal&gt;</code> followed by a <code>&lt;vertical&gt;</code>.</p> <p>You can specify the alignment of content on both the horizontal and vertical axes at the same time, or on each of the axis separately. To specify content alignment on a single axis, use the respective style and type:</p> <ul> <li><code>content-align-horizontal</code> takes a <code>&lt;horizontal&gt;</code> and does alignment along the horizontal axis; and</li> <li><code>content-align-vertical</code> takes a <code>&lt;vertical&gt;</code> and does alignment along the vertical axis.</li> </ul>"},{"location":"styles/content_align/#examples","title":"Examples","text":""},{"location":"styles/content_align/#basic-usage","title":"Basic usage","text":"<p>This first example shows three labels stacked vertically, each with different content alignments.</p> Outputcontent_align.pycontent_align.tcss <p> ContentAlignApp With\u00a0content-align\u00a0you\u00a0can... ...Easily\u00a0align\u00a0content... ...Horizontally\u00a0and\u00a0vertically! </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass ContentAlignApp(App):\n    CSS_PATH = \"content_align.tcss\"\n\n    def compose(self):\n        yield Label(\"With [i]content-align[/] you can...\", id=\"box1\")\n        yield Label(\"...[b]Easily align content[/]...\", id=\"box2\")\n        yield Label(\"...Horizontally [i]and[/] vertically!\", id=\"box3\")\n\n\nif __name__ == \"__main__\":\n    app = ContentAlignApp()\n    app.run()\n</code></pre> <pre><code>#box1 {\n    content-align: left top;\n    background: red;\n}\n\n#box2 {\n    content-align-horizontal: center;\n    content-align-vertical: middle;\n    background: green;\n}\n\n#box3 {\n    content-align: right bottom;\n    background: blue;\n}\n\nLabel {\n    width: 100%;\n    height: 1fr;\n    padding: 1;\n    color: white;\n}\n</code></pre>"},{"location":"styles/content_align/#all-content-alignments","title":"All content alignments","text":"<p>The next example shows a 3 by 3 grid of labels. Each label has its text aligned differently.</p> Outputcontent_align_all.pycontent_align_all.tcss <p> AllContentAlignApp left\u00a0topcenter\u00a0topright\u00a0top left\u00a0middlecenter\u00a0middleright\u00a0middle left\u00a0bottomcenter\u00a0bottomright\u00a0bottom </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass AllContentAlignApp(App):\n    CSS_PATH = \"content_align_all.tcss\"\n\n    def compose(self):\n        yield Label(\"left top\", id=\"left-top\")\n        yield Label(\"center top\", id=\"center-top\")\n        yield Label(\"right top\", id=\"right-top\")\n        yield Label(\"left middle\", id=\"left-middle\")\n        yield Label(\"center middle\", id=\"center-middle\")\n        yield Label(\"right middle\", id=\"right-middle\")\n        yield Label(\"left bottom\", id=\"left-bottom\")\n        yield Label(\"center bottom\", id=\"center-bottom\")\n        yield Label(\"right bottom\", id=\"right-bottom\")\n\n\nif __name__ == \"__main__\":\n    app = AllContentAlignApp()\n    app.run()\n</code></pre> <pre><code>#left-top {\n    /* content-align: left top; this is the default implied value. */\n}\n#center-top {\n    content-align: center top;\n}\n#right-top {\n    content-align: right top;\n}\n#left-middle {\n    content-align: left middle;\n}\n#center-middle {\n    content-align: center middle;\n}\n#right-middle {\n    content-align: right middle;\n}\n#left-bottom {\n    content-align: left bottom;\n}\n#center-bottom {\n    content-align: center bottom;\n}\n#right-bottom {\n    content-align: right bottom;\n}\n\nScreen {\n    layout: grid;\n    grid-size: 3 3;\n    grid-gutter: 1;\n}\n\nLabel {\n    width: 100%;\n    height: 100%;\n    background: $primary;\n}\n</code></pre>"},{"location":"styles/content_align/#css","title":"CSS","text":"<pre><code>/* Align content in the very center of a widget */\ncontent-align: center middle;\n/* Align content at the top right of a widget */\ncontent-align: right top;\n\n/* Change the horizontal alignment of the content of a widget */\ncontent-align-horizontal: right;\n/* Change the vertical alignment of the content of a widget */\ncontent-align-vertical: middle;\n</code></pre>"},{"location":"styles/content_align/#python","title":"Python","text":"<pre><code># Align content in the very center of a widget\nwidget.styles.content_align = (\"center\", \"middle\")\n# Align content at the top right of a widget\nwidget.styles.content_align = (\"right\", \"top\")\n\n# Change the horizontal alignment of the content of a widget\nwidget.styles.content_align_horizontal = \"right\"\n# Change the vertical alignment of the content of a widget\nwidget.styles.content_align_vertical = \"middle\"\n</code></pre>"},{"location":"styles/content_align/#see-also","title":"See also","text":"<ul> <li><code>align</code> to set the alignment of children widgets inside a container.</li> <li><code>text-align</code> to set the alignment of text in a widget.</li> </ul>"},{"location":"styles/display/","title":"Display","text":"<p>The <code>display</code> style defines whether a widget is displayed or not.</p>"},{"location":"styles/display/#syntax","title":"Syntax","text":"<pre><code>display: block | none;\n</code></pre>"},{"location":"styles/display/#values","title":"Values","text":"Value Description <code>block</code> (default) Display the widget as normal. <code>none</code> The widget is not displayed and space will no longer be reserved for it."},{"location":"styles/display/#example","title":"Example","text":"<p>Note that the second widget is hidden by adding the <code>\"remove\"</code> class which sets the display style to <code>none</code>.</p> Outputdisplay.pydisplay.tcss <p> DisplayApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a01\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a03\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\n\nclass DisplayApp(App):\n    CSS_PATH = \"display.tcss\"\n\n    def compose(self):\n        yield Static(\"Widget 1\")\n        yield Static(\"Widget 2\", classes=\"remove\")\n        yield Static(\"Widget 3\")\n\n\nif __name__ == \"__main__\":\n    app = DisplayApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: green;\n}\n\nStatic {\n    height: 5;\n    background: white;\n    color: blue;\n    border: heavy blue;\n}\n\nStatic.remove {\n    display: none;\n}\n</code></pre>"},{"location":"styles/display/#css","title":"CSS","text":"<pre><code>/* Widget is shown */\ndisplay: block;\n\n/* Widget is not shown */\ndisplay: none;\n</code></pre>"},{"location":"styles/display/#python","title":"Python","text":"<pre><code># Hide the widget\nself.styles.display = \"none\"\n\n# Show the widget again\nself.styles.display = \"block\"\n</code></pre> <p>There is also a shortcut to show / hide a widget. The <code>display</code> property on <code>Widget</code> may be set to <code>True</code> or <code>False</code> to show or hide the widget.</p> <pre><code># Hide the widget\nwidget.display = False\n\n# Show the widget\nwidget.display = True\n</code></pre>"},{"location":"styles/display/#see-also","title":"See also","text":"<ul> <li><code>visibility</code> to specify whether a widget is visible or not.</li> </ul>"},{"location":"styles/dock/","title":"Dock","text":"<p>The <code>dock</code> style is used to fix a widget to the edge of a container (which may be the entire terminal window).</p>"},{"location":"styles/dock/#syntax","title":"Syntax","text":"<pre><code>dock: bottom | left | right | top;\n</code></pre> <p>The option chosen determines the edge to which the widget is docked.</p>"},{"location":"styles/dock/#examples","title":"Examples","text":""},{"location":"styles/dock/#basic-usage","title":"Basic usage","text":"<p>The example below shows a <code>left</code> docked sidebar. Notice that even though the content is scrolled, the sidebar remains fixed.</p> Outputdock_layout1_sidebar.pydock_layout1_sidebar.tcss <p> DockLayoutExample SidebarDocking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0\u2587\u2587 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout1_sidebar.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Sidebar\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\nif __name__ == \"__main__\":\n    app = DockLayoutExample()\n    app.run()\n</code></pre> <pre><code>#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre>"},{"location":"styles/dock/#advanced-usage","title":"Advanced usage","text":"<p>The second example shows how one can use full-width or full-height containers to dock labels to the edges of a larger container. The labels will remain in that position (docked) even if the container they are in scrolls horizontally and/or vertically.</p> Outputdock_all.pydock_all.tcss <p> DockAllApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0top\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502left\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0right\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bottom\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Container\nfrom textual.widgets import Label\n\n\nclass DockAllApp(App):\n    CSS_PATH = \"dock_all.tcss\"\n\n    def compose(self):\n        yield Container(\n            Container(Label(\"left\"), id=\"left\"),\n            Container(Label(\"top\"), id=\"top\"),\n            Container(Label(\"right\"), id=\"right\"),\n            Container(Label(\"bottom\"), id=\"bottom\"),\n            id=\"big_container\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = DockAllApp()\n    app.run()\n</code></pre> <pre><code>#left {\n    dock: left;\n    height: 100%;\n    width: auto;\n    align-vertical: middle;\n}\n#top {\n    dock: top;\n    height: auto;\n    width: 100%;\n    align-horizontal: center;\n}\n#right {\n    dock: right;\n    height: 100%;\n    width: auto;\n    align-vertical: middle;\n}\n#bottom {\n    dock: bottom;\n    height: auto;\n    width: 100%;\n    align-horizontal: center;\n}\n\nScreen {\n    align: center middle;\n}\n\n#big_container {\n    width: 75%;\n    height: 75%;\n    border: round white;\n}\n</code></pre>"},{"location":"styles/dock/#css","title":"CSS","text":"<pre><code>dock: bottom;  /* Docks on the bottom edge of the parent container. */\ndock: left;    /* Docks on the   left edge of the parent container. */\ndock: right;   /* Docks on the  right edge of the parent container. */\ndock: top;     /* Docks on the    top edge of the parent container. */\n</code></pre>"},{"location":"styles/dock/#python","title":"Python","text":"<pre><code>widget.styles.dock = \"bottom\"  # Dock bottom.\nwidget.styles.dock = \"left\"    # Dock   left.\nwidget.styles.dock = \"right\"   # Dock  right.\nwidget.styles.dock = \"top\"     # Dock    top.\n</code></pre>"},{"location":"styles/dock/#see-also","title":"See also","text":"<ul> <li>The layout guide section on docking.</li> </ul>"},{"location":"styles/hatch/","title":"Hatch","text":"<p>The <code>hatch</code> style fills a widget's background with a repeating character for a pleasing textured effect.</p>"},{"location":"styles/hatch/#syntax","title":"Syntax","text":"<pre>\nhatch: (&lt;hatch&gt; | CHARACTER) &lt;color&gt; [&lt;percentage&gt;]\n</pre> <p>The hatch type can be specified with a constant, or a string. For example, <code>cross</code> for cross hatch, or <code>\"T\"</code> for a custom character.</p> <p>The color can be any Textual color value.</p> <p>An optional percentage can be used to set the opacity.</p>"},{"location":"styles/hatch/#examples","title":"Examples","text":"<p>An app to show a few hatch effects.</p> Outputhatch.pyhatch.tcss <p> HatchApp \u250c\u2500\u00a0cross\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u00a0horizontal\u00a0\u2500\u2510\u250c\u2500\u00a0custom\u00a0\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u00a0left\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u00a0right\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\nHATCHES = (\"cross\", \"horizontal\", \"custom\", \"left\", \"right\")\n\n\nclass HatchApp(App):\n    CSS_PATH = \"hatch.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            for hatch in HATCHES:\n                static = Static(classes=f\"hatch {hatch}\")\n                static.border_title = hatch\n                with Vertical():\n                    yield static\n\n\nif __name__ == \"__main__\":\n    app = HatchApp()\n    app.run()\n</code></pre> <pre><code>.hatch {\n    height: 1fr;\n    border: solid $secondary;\n\n    &amp;.cross {\n        hatch: cross $success;\n    }\n    &amp;.horizontal {\n        hatch: horizontal $success 80%;\n    }\n    &amp;.custom {\n        hatch: \"T\" $success 60%;\n    }\n    &amp;.left {\n        hatch: left $success 40%;\n    }\n    &amp;.right {\n        hatch: right $success 20%;\n    }\n}\n</code></pre>"},{"location":"styles/hatch/#css","title":"CSS","text":"<pre><code>/* Red cross hatch */\nhatch: cross red;\n/* Right diagonals, 50% transparent green. */\nhatch: right green 50%;\n/* T custom character in 80% blue. **/\nhatch: \"T\" blue 80%;\n</code></pre>"},{"location":"styles/hatch/#python","title":"Python","text":"<pre><code>widget.styles.hatch = (\"cross\", \"red\")\nwidget.styles.hatch = (\"right\", \"rgba(0,255,0,128)\")\nwidget.styles.hatch = (\"T\", \"blue\")\n</code></pre>"},{"location":"styles/height/","title":"Height","text":"<p>The <code>height</code> style sets a widget's height.</p>"},{"location":"styles/height/#syntax","title":"Syntax","text":"<pre>\nheight: &lt;scalar&gt;;\n</pre> <p>The <code>height</code> style needs a <code>&lt;scalar&gt;</code> to determine the vertical length of the widget. By default, it sets the height of the content area, but if <code>box-sizing</code> is set to <code>border-box</code> it sets the height of the border area.</p>"},{"location":"styles/height/#examples","title":"Examples","text":""},{"location":"styles/height/#basic-usage","title":"Basic usage","text":"<p>This examples creates a widget with a height of 50% of the screen.</p> Outputheight.pyheight.tcss <p> HeightApp Widget </p> <pre><code>from textual.app import App\nfrom textual.widget import Widget\n\n\nclass HeightApp(App):\n    CSS_PATH = \"height.tcss\"\n\n    def compose(self):\n        yield Widget()\n\n\nif __name__ == \"__main__\":\n    app = HeightApp()\n    app.run()\n</code></pre> <pre><code>Screen &gt; Widget {\n    background: green;\n    height: 50%;\n    color: white;\n}\n</code></pre>"},{"location":"styles/height/#all-height-formats","title":"All height formats","text":"<p>The next example creates a series of wide widgets with heights set with different units. Open the CSS file tab to see the comments that explain how each height is computed. (The output includes a vertical ruler on the right to make it easier to check the height of each widget.)</p> Outputheight_comparison.pyheight_comparison.tcss <p> HeightComparisonApp #cells\u00b7 \u00b7 \u00b7 #percent\u00b7 \u2022 \u00b7 #w\u00b7 \u00b7 \u00b7 \u2022 #h\u00b7 \u00b7 \u00b7 \u00b7 #vw\u2022 \u00b7 \u00b7 \u00b7 #vh\u00b7 \u2022 #auto\u00b7 #fr1\u00b7 #fr2\u00b7 \u00b7 </p> <pre><code>from textual.app import App\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Label, Placeholder, Static\n\n\nclass Ruler(Static):\n    def compose(self):\n        ruler_text = \"\u00b7\\n\u00b7\\n\u00b7\\n\u00b7\\n\u2022\\n\" * 100\n        yield Label(ruler_text)\n\n\nclass HeightComparisonApp(App):\n    CSS_PATH = \"height_comparison.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Placeholder(id=\"cells\"),  # (1)!\n            Placeholder(id=\"percent\"),\n            Placeholder(id=\"w\"),\n            Placeholder(id=\"h\"),\n            Placeholder(id=\"vw\"),\n            Placeholder(id=\"vh\"),\n            Placeholder(id=\"auto\"),\n            Placeholder(id=\"fr1\"),\n            Placeholder(id=\"fr2\"),\n        )\n        yield Ruler()\n\n\nif __name__ == \"__main__\":\n    app = HeightComparisonApp()\n    app.run()\n</code></pre> <ol> <li>The id of the placeholder identifies which unit will be used to set the height of the widget.</li> </ol> <pre><code>#cells {\n    height: 2;       /* (1)! */\n}\n#percent {\n    height: 12.5%;   /* (2)! */\n}\n#w {\n    height: 5w;      /* (3)! */\n}\n#h {\n    height: 12.5h;   /* (4)! */\n}\n#vw {\n    height: 6.25vw;  /* (5)! */\n}\n#vh {\n    height: 12.5vh;  /* (6)! */\n}\n#auto {\n    height: auto;    /* (7)! */\n}\n#fr1 {\n    height: 1fr;     /* (8)! */\n}\n#fr2 {\n    height: 2fr;     /* (9)! */\n}\n\nScreen {\n    layers: ruler;\n    overflow: hidden;\n}\n\nRuler {\n    layer: ruler;\n    dock: right;\n    width: 1;\n    background: $accent;\n}\n</code></pre> <ol> <li>This sets the height to 2 lines.</li> <li>This sets the height to 12.5% of the space made available by the container. The container is 24 lines tall, so 12.5% of 24 is 3.</li> <li>This sets the height to 5% of the width of the direct container, which is the <code>VerticalScroll</code> container. Because it expands to fit all of the terminal, the width of the <code>VerticalScroll</code> is 80 and 5% of 80 is 4.</li> <li>This sets the height to 12.5% of the height of the direct container, which is the <code>VerticalScroll</code> container. Because it expands to fit all of the terminal, the height of the <code>VerticalScroll</code> is 24 and 12.5% of 24 is 3.</li> <li>This sets the height to 6.25% of the viewport width, which is 80. 6.25% of 80 is 5.</li> <li>This sets the height to 12.5% of the viewport height, which is 24. 12.5% of 24 is 3.</li> <li>This sets the height of the placeholder to be the optimal size that fits the content without scrolling. Because the content only spans one line, the placeholder has its height set to 1.</li> <li>This sets the height to <code>1fr</code>, which means this placeholder will have half the height of a placeholder with <code>2fr</code>.</li> <li>This sets the height to <code>2fr</code>, which means this placeholder will have twice the height of a placeholder with <code>1fr</code>.</li> </ol>"},{"location":"styles/height/#css","title":"CSS","text":"<pre><code>/* Explicit cell height */\nheight: 10;\n\n/* Percentage height */\nheight: 50%;\n\n/* Automatic height */\nheight: auto\n</code></pre>"},{"location":"styles/height/#python","title":"Python","text":"<pre><code>self.styles.height = 10  # Explicit cell height can be an int\nself.styles.height = \"50%\"\nself.styles.height = \"auto\"\n</code></pre>"},{"location":"styles/height/#see-also","title":"See also","text":"<ul> <li><code>max-height</code> and <code>min-height</code> to limit the height of a widget.</li> <li><code>width</code> to set the width of a widget.</li> </ul>"},{"location":"styles/keyline/","title":"Keyline","text":"<p>The <code>keyline</code> style is applied to a container and will draw lines around child widgets.</p> <p>A keyline is superficially like the border rule, but rather than draw inside the widget, a keyline is drawn outside of the widget's border. Additionally, unlike <code>border</code>, keylines can overlap and cross to create dividing lines between widgets.</p> <p>Because keylines are drawn in the widget's margin, you will need to apply the margin or grid-gutter rule to see the effect.</p>"},{"location":"styles/keyline/#syntax","title":"Syntax","text":"<pre>\nkeyline: [&lt;keyline&gt;] [&lt;color&gt;];\n</pre>"},{"location":"styles/keyline/#examples","title":"Examples","text":""},{"location":"styles/keyline/#horizontal-keyline","title":"Horizontal Keyline","text":"<p>The following examples shows a simple horizontal layout with a thin keyline.</p> Outputkeyline.pykeyline.tcss <p> KeylineApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Placeholder\u2502Placeholder\u2502Placeholder\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Placeholder\n\n\nclass KeylineApp(App):\n    CSS_PATH = \"keyline_horizontal.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            yield Placeholder()\n            yield Placeholder()\n            yield Placeholder()\n\n\nif __name__ == \"__main__\":\n    app = KeylineApp()\n    app.run()\n</code></pre> <pre><code>Placeholder {\n    margin: 1;\n    width: 1fr;\n}\n\nHorizontal {\n    keyline: thin $secondary;\n}\n</code></pre>"},{"location":"styles/keyline/#grid-keyline","title":"Grid keyline","text":"<p>The following examples shows a grid layout with a heavy keyline.</p> Outputkeyline.pykeyline.tcss <p> KeylineApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503\u2503 \u2503\u2503\u2503 \u2503#foo\u2503\u2503 \u2503\u2503\u2503 \u2503\u2503\u2503 \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252b#bar\u2503 \u2503\u2503\u2503\u2503 \u2503\u2503\u2503\u2503 \u2503Placeholder\u2503\u2503\u2503 \u2503\u2503\u2503\u2503 \u2503\u2503\u2503\u2503 \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u253b\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u253b\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252b \u2503\u2503 \u2503\u2503 \u2503#baz\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass KeylineApp(App):\n    CSS_PATH = \"keyline.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Grid():\n            yield Placeholder(id=\"foo\")\n            yield Placeholder(id=\"bar\")\n            yield Placeholder()\n            yield Placeholder(classes=\"hidden\")\n            yield Placeholder(id=\"baz\")\n\n\nif __name__ == \"__main__\":\n    KeylineApp().run()\n</code></pre> <pre><code>Grid {\n    grid-size: 3 3;\n    grid-gutter: 1;\n    padding: 2 3;\n    keyline: heavy green;\n}\nPlaceholder {\n    height: 1fr;\n}\n.hidden {\n    visibility: hidden;\n}\n#foo {\n    column-span: 2;\n}\n#bar {\n    row-span: 2;\n}\n#baz {\n    column-span:3;\n}\n</code></pre>"},{"location":"styles/keyline/#css","title":"CSS","text":"<pre><code>/* Set a thin green keyline */\n/* Note: Must be set on a container or a widget with a layout. */\nkeyline: thin green;\n</code></pre>"},{"location":"styles/keyline/#python","title":"Python","text":"<p>You can set a keyline in Python with a tuple of type and color:</p> <pre><code>widget.styles.keyline = (\"thin\", \"green\")\n</code></pre>"},{"location":"styles/keyline/#see-also","title":"See also","text":"<ul> <li><code>border</code> to add a border around a widget.</li> </ul>"},{"location":"styles/layer/","title":"Layer","text":"<p>The <code>layer</code> style defines the layer a widget belongs to.</p>"},{"location":"styles/layer/#syntax","title":"Syntax","text":"<pre>\nlayer: &lt;name&gt;;\n</pre> <p>The <code>layer</code> style accepts a <code>&lt;name&gt;</code> that defines the layer this widget belongs to. This <code>&lt;name&gt;</code> must correspond to a <code>&lt;name&gt;</code> that has been defined in a <code>layers</code> style by an ancestor of this widget.</p> <p>More information on layers can be found in the guide.</p> <p>Warning</p> <p>Using a <code>&lt;name&gt;</code> that hasn't been defined in a <code>layers</code> declaration of an ancestor of this widget has no effect.</p>"},{"location":"styles/layer/#example","title":"Example","text":"<p>In the example below, <code>#box1</code> is yielded before <code>#box2</code>. However, since <code>#box1</code> is on the higher layer, it is drawn on top of <code>#box2</code>.</p> Outputlayers.pylayers.tcss <p> LayersExample box1\u00a0(layer\u00a0=\u00a0above) box2\u00a0(layer\u00a0=\u00a0below) </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass LayersExample(App):\n    CSS_PATH = \"layers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"box1 (layer = above)\", id=\"box1\")\n        yield Static(\"box2 (layer = below)\", id=\"box2\")\n\n\nif __name__ == \"__main__\":\n    app = LayersExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n    layers: below above;\n}\n\nStatic {\n    width: 28;\n    height: 8;\n    color: auto;\n    content-align: center middle;\n}\n\n#box1 {\n    layer: above;\n    background: darkcyan;\n}\n\n#box2 {\n    layer: below;\n    background: orange;\n    offset: 12 6;\n}\n</code></pre>"},{"location":"styles/layer/#css","title":"CSS","text":"<pre><code>/* Draw the widget on the layer called 'below' */\nlayer: below;\n</code></pre>"},{"location":"styles/layer/#python","title":"Python","text":"<pre><code># Draw the widget on the layer called 'below'\nwidget.styles.layer = \"below\"\n</code></pre>"},{"location":"styles/layer/#see-also","title":"See also","text":"<ul> <li>The layout guide section on layers.</li> <li><code>layers</code> to define an ordered set of layers.</li> </ul>"},{"location":"styles/layers/","title":"Layers","text":"<p>The <code>layers</code> style allows you to define an ordered set of layers.</p>"},{"location":"styles/layers/#syntax","title":"Syntax","text":"<pre>\nlayers: &lt;name&gt;+;\n</pre> <p>The <code>layers</code> style accepts one or more <code>&lt;name&gt;</code> that define the layers that the widget is aware of, and the order in which they will be painted on the screen.</p> <p>The values used here can later be referenced using the <code>layer</code> property. The layers defined first in the list are drawn under the layers that are defined later in the list.</p> <p>More information on layers can be found in the guide.</p>"},{"location":"styles/layers/#example","title":"Example","text":"<p>In the example below, <code>#box1</code> is yielded before <code>#box2</code>. However, since <code>#box1</code> is on the higher layer, it is drawn on top of <code>#box2</code>.</p> Outputlayers.pylayers.tcss <p> LayersExample box1\u00a0(layer\u00a0=\u00a0above) box2\u00a0(layer\u00a0=\u00a0below) </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass LayersExample(App):\n    CSS_PATH = \"layers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"box1 (layer = above)\", id=\"box1\")\n        yield Static(\"box2 (layer = below)\", id=\"box2\")\n\n\nif __name__ == \"__main__\":\n    app = LayersExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n    layers: below above;\n}\n\nStatic {\n    width: 28;\n    height: 8;\n    color: auto;\n    content-align: center middle;\n}\n\n#box1 {\n    layer: above;\n    background: darkcyan;\n}\n\n#box2 {\n    layer: below;\n    background: orange;\n    offset: 12 6;\n}\n</code></pre>"},{"location":"styles/layers/#css","title":"CSS","text":"<pre><code>/* Bottom layer is called 'below', layer above it is called 'above' */\nlayers: below above;\n</code></pre>"},{"location":"styles/layers/#python","title":"Python","text":"<pre><code># Bottom layer is called 'below', layer above it is called 'above'\nwidget.style.layers = (\"below\", \"above\")\n</code></pre>"},{"location":"styles/layers/#see-also","title":"See also","text":"<ul> <li>The layout guide section on layers.</li> <li><code>layer</code> to set the layer a widget belongs to.</li> </ul>"},{"location":"styles/layout/","title":"Layout","text":"<p>The <code>layout</code> style defines how a widget arranges its children.</p>"},{"location":"styles/layout/#syntax","title":"Syntax","text":"<pre>\nlayout: grid | horizontal | vertical;\n</pre> <p>The <code>layout</code> style takes an option that defines how child widgets will be arranged, as per the table shown below.</p>"},{"location":"styles/layout/#values","title":"Values","text":"Value Description <code>grid</code> Child widgets will be arranged in a grid. <code>horizontal</code> Child widgets will be arranged along the horizontal axis, from left to right. <code>vertical</code> (default) Child widgets will be arranged along the vertical axis, from top to bottom. <p>See the layout guide for more information.</p>"},{"location":"styles/layout/#example","title":"Example","text":"<p>Note how the <code>layout</code> style affects the arrangement of widgets in the example below. To learn more about the grid layout, you can see the layout guide or the grid reference.</p> Outputlayout.pylayout.tcss <p> LayoutApp Layout Is Vertical LayoutIsHorizontal </p> <pre><code>from textual.app import App\nfrom textual.containers import Container\nfrom textual.widgets import Label\n\n\nclass LayoutApp(App):\n    CSS_PATH = \"layout.tcss\"\n\n    def compose(self):\n        yield Container(\n            Label(\"Layout\"),\n            Label(\"Is\"),\n            Label(\"Vertical\"),\n            id=\"vertical-layout\",\n        )\n        yield Container(\n            Label(\"Layout\"),\n            Label(\"Is\"),\n            Label(\"Horizontal\"),\n            id=\"horizontal-layout\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <pre><code>#vertical-layout {\n    layout: vertical;\n    background: darkmagenta;\n    height: auto;\n}\n\n#horizontal-layout {\n    layout: horizontal;\n    background: darkcyan;\n    height: auto;\n}\n\nLabel {\n    margin: 1;\n    width: 12;\n    color: black;\n    background: yellowgreen;\n}\n</code></pre>"},{"location":"styles/layout/#css","title":"CSS","text":"<pre><code>layout: horizontal;\n</code></pre>"},{"location":"styles/layout/#python","title":"Python","text":"<pre><code>widget.styles.layout = \"horizontal\"\n</code></pre>"},{"location":"styles/layout/#see-also","title":"See also","text":"<ul> <li>Layout guide.</li> <li>Grid reference.</li> </ul>"},{"location":"styles/margin/","title":"Margin","text":"<p>The <code>margin</code> style specifies spacing around a widget.</p>"},{"location":"styles/margin/#syntax","title":"Syntax","text":"<pre>\nmargin: &lt;integer&gt;\n      # one value for all edges\n      | &lt;integer&gt; &lt;integer&gt;\n      # top/bot   left/right\n      | &lt;integer&gt; &lt;integer&gt; &lt;integer&gt; &lt;integer&gt;;\n      # top       right     bot       left\n\nmargin-top: &lt;integer&gt;;\nmargin-right: &lt;integer&gt;;\nmargin-bottom: &lt;integer&gt;;\nmargin-left: &lt;integer&gt;;\n</pre> <p>The <code>margin</code> specifies spacing around the four edges of the widget equal to the <code>&lt;integer&gt;</code> specified. The number of values given defines what edges get what margin:</p> <ul> <li>1 <code>&lt;integer&gt;</code> sets the same margin for the four edges of the widget;</li> <li>2 <code>&lt;integer&gt;</code> set margin for top/bottom and left/right edges, respectively.</li> <li>4 <code>&lt;integer&gt;</code> set margin for the top, right, bottom, and left edges, respectively.</li> </ul> <p>Tip</p> <p>To remember the order of the edges affected by the rule <code>margin</code> when it has 4 values, think of a clock. Its hand starts at the top and the goes clockwise: top, right, bottom, left.</p> <p>Alternatively, margin can be set for each edge individually through the styles <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code>, respectively.</p>"},{"location":"styles/margin/#examples","title":"Examples","text":""},{"location":"styles/margin/#basic-usage","title":"Basic usage","text":"<p>In the example below we add a large margin to a label, which makes it move away from the top-left corner of the screen.</p> Outputmargin.pymargin.tcss <p> MarginApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eI\u00a0must\u00a0not\u00a0fear.\u258a \u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u258a \u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u258a \u258eAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0\u258a \u258eits\u00a0path.\u258a \u258eWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u258a \u258eremain.\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass MarginApp(App):\n    CSS_PATH = \"margin.tcss\"\n\n    def compose(self):\n        yield Label(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = MarginApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: black;\n}\n\nLabel {\n    margin: 4 8;\n    background: blue 20%;\n    border: blue wide;\n    width: 100%;\n}\n</code></pre>"},{"location":"styles/margin/#all-margin-settings","title":"All margin settings","text":"<p>The next example shows a grid. In each cell, we have a placeholder that has its margins set in different ways.</p> Outputmargin_all.pymargin_all.tcss <p> MarginAllApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502margin\u2502\u2502margin:\u00a01\u00a0\u2502 \u2502no\u00a0margin\u2502\u2502margin:\u00a01\u2502\u2502:\u00a01\u00a05\u2502\u25021\u00a02\u00a06\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502margin-bottom:\u00a04\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502margin-right:\u00a0\u2502\u2502\u2502\u2502margin-left:\u00a03\u2502 \u2502\u2502\u25023\u2502\u2502\u2502\u2502\u2502 \u2502margin-top:\u00a04\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Container, Grid\nfrom textual.widgets import Placeholder\n\n\nclass MarginAllApp(App):\n    CSS_PATH = \"margin_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Container(Placeholder(\"no margin\", id=\"p1\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin: 1\", id=\"p2\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin: 1 5\", id=\"p3\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin: 1 1 2 6\", id=\"p4\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-top: 4\", id=\"p5\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-right: 3\", id=\"p6\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-bottom: 4\", id=\"p7\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-left: 3\", id=\"p8\"), classes=\"bordered\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MarginAllApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: $background;\n}\n\nGrid {\n    grid-size: 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    width: 100%;\n    height: 100%;\n}\n\nContainer {\n    width: 100%;\n    height: 100%;\n}\n\n.bordered {\n    border: white round;\n}\n\n#p1 {\n    /* default is no margin */\n}\n\n#p2 {\n    margin: 1;\n}\n\n#p3 {\n    margin: 1 5;\n}\n\n#p4 {\n    margin: 1 1 2 6;\n}\n\n#p5 {\n    margin-top: 4;\n}\n\n#p6 {\n    margin-right: 3;\n}\n\n#p7 {\n    margin-bottom: 4;\n}\n\n#p8 {\n    margin-left: 3;\n}\n</code></pre>"},{"location":"styles/margin/#css","title":"CSS","text":"<pre><code>/* Set margin of 1 around all edges */\nmargin: 1;\n/* Set margin of 2 on the top and bottom edges, and 4 on the left and right */\nmargin: 2 4;\n/* Set margin of 1 on the top, 2 on the right,\n                 3 on the bottom, and 4 on the left */\nmargin: 1 2 3 4;\n\nmargin-top: 1;\nmargin-right: 2;\nmargin-bottom: 3;\nmargin-left: 4;\n</code></pre>"},{"location":"styles/margin/#python","title":"Python","text":"<p>Python does not provide the properties <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code>. However, you can set the margin to a single integer, a tuple of 2 integers, or a tuple of 4 integers:</p> <pre><code># Set margin of 1 around all edges\nwidget.styles.margin = 1\n# Set margin of 2 on the top and bottom edges, and 4 on the left and right\nwidget.styles.margin = (2, 4)\n# Set margin of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left\nwidget.styles.margin = (1, 2, 3, 4)\n</code></pre>"},{"location":"styles/margin/#see-also","title":"See also","text":"<ul> <li><code>padding</code> to add spacing around the content of a widget.</li> </ul>"},{"location":"styles/max_height/","title":"Max-height","text":"<p>The <code>max-height</code> style sets a maximum height for a widget.</p>"},{"location":"styles/max_height/#syntax","title":"Syntax","text":"<pre>\nmax-height: &lt;scalar&gt;;\n</pre> <p>The <code>max-height</code> style accepts a <code>&lt;scalar&gt;</code> that defines an upper bound for the <code>height</code> of a widget. That is, the height of a widget is never allowed to exceed <code>max-height</code>.</p>"},{"location":"styles/max_height/#example","title":"Example","text":"<p>The example below shows some placeholders that were defined to span vertically from the top edge of the terminal to the bottom edge. Then, we set <code>max-height</code> individually on each placeholder.</p> Outputmax_height.pymax_height.tcss <p> MaxHeightApp max-height:\u00a010w max-height:\u00a010 max-height:\u00a050% max-height:\u00a0999 </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal\nfrom textual.widgets import Placeholder\n\n\nclass MaxHeightApp(App):\n    CSS_PATH = \"max_height.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            Placeholder(\"max-height: 10w\", id=\"p1\"),\n            Placeholder(\"max-height: 999\", id=\"p2\"),\n            Placeholder(\"max-height: 50%\", id=\"p3\"),\n            Placeholder(\"max-height: 10\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MaxHeightApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    height: 100%;\n    width: 100%;\n}\n\nPlaceholder {\n    height: 100%;\n    width: 1fr;\n}\n\n#p1 {\n    max-height: 10w;\n}\n\n#p2 {\n    max-height: 999;  /* (1)! */\n}\n\n#p3 {\n    max-height: 50%;\n}\n\n#p4 {\n    max-height: 10;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its height is less than the maximum height.</li> </ol>"},{"location":"styles/max_height/#css","title":"CSS","text":"<pre><code>/* Set the maximum height to 10 rows */\nmax-height: 10;\n\n/* Set the maximum height to 25% of the viewport height */\nmax-height: 25vh;\n</code></pre>"},{"location":"styles/max_height/#python","title":"Python","text":"<pre><code># Set the maximum height to 10 rows\nwidget.styles.max_height = 10\n\n# Set the maximum height to 25% of the viewport height\nwidget.styles.max_height = \"25vh\"\n</code></pre>"},{"location":"styles/max_height/#see-also","title":"See also","text":"<ul> <li><code>min-height</code> to set a lower bound on the height of a widget.</li> <li><code>height</code> to set the height of a widget.</li> </ul>"},{"location":"styles/max_width/","title":"Max-width","text":"<p>The <code>max-width</code> style sets a maximum width for a widget.</p>"},{"location":"styles/max_width/#syntax","title":"Syntax","text":"<pre>\nmax-width: &lt;scalar&gt;;\n</pre> <p>The <code>max-width</code> style accepts a <code>&lt;scalar&gt;</code> that defines an upper bound for the <code>width</code> of a widget. That is, the width of a widget is never allowed to exceed <code>max-width</code>.</p>"},{"location":"styles/max_width/#example","title":"Example","text":"<p>The example below shows some placeholders that were defined to span horizontally from the left edge of the terminal to the right edge. Then, we set <code>max-width</code> individually on each placeholder.</p> Outputmax_width.pymax_width.tcss <p> MaxWidthApp max-width:\u00a0 50h max-width:\u00a0999 max-width:\u00a050% max-width:\u00a030 </p> <pre><code>from textual.app import App\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass MaxWidthApp(App):\n    CSS_PATH = \"max_width.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Placeholder(\"max-width: 50h\", id=\"p1\"),\n            Placeholder(\"max-width: 999\", id=\"p2\"),\n            Placeholder(\"max-width: 50%\", id=\"p3\"),\n            Placeholder(\"max-width: 30\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MaxWidthApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    height: 100%;\n    width: 100%;\n}\n\nPlaceholder {\n    width: 100%;\n    height: 1fr;\n}\n\n#p1 {\n    max-width: 50h;\n}\n\n#p2 {\n    max-width: 999;  /* (1)! */\n}\n\n#p3 {\n    max-width: 50%;\n}\n\n#p4 {\n    max-width: 30;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its width is less than the maximum width.</li> </ol>"},{"location":"styles/max_width/#css","title":"CSS","text":"<pre><code>/* Set the maximum width to 10 rows */\nmax-width: 10;\n\n/* Set the maximum width to 25% of the viewport width */\nmax-width: 25vw;\n</code></pre>"},{"location":"styles/max_width/#python","title":"Python","text":"<pre><code># Set the maximum width to 10 rows\nwidget.styles.max_width = 10\n\n# Set the maximum width to 25% of the viewport width\nwidget.styles.max_width = \"25vw\"\n</code></pre>"},{"location":"styles/max_width/#see-also","title":"See also","text":"<ul> <li><code>min-width</code> to set a lower bound on the width of a widget.</li> <li><code>width</code> to set the width of a widget.</li> </ul>"},{"location":"styles/min_height/","title":"Min-height","text":"<p>The <code>min-height</code> style sets a minimum height for a widget.</p>"},{"location":"styles/min_height/#syntax","title":"Syntax","text":"<pre>\nmin-height: &lt;scalar&gt;;\n</pre> <p>The <code>min-height</code> style accepts a <code>&lt;scalar&gt;</code> that defines a lower bound for the <code>height</code> of a widget. That is, the height of a widget is never allowed to be under <code>min-height</code>.</p>"},{"location":"styles/min_height/#example","title":"Example","text":"<p>The example below shows some placeholders with their height set to <code>50%</code>. Then, we set <code>min-height</code> individually on each placeholder.</p> Outputmin_height.pymin_height.tcss <p> MinHeightApp min-height:\u00a025% min-height:\u00a075% min-height:\u00a030 min-height:\u00a040w \u2583\u2583 </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal\nfrom textual.widgets import Placeholder\n\n\nclass MinHeightApp(App):\n    CSS_PATH = \"min_height.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            Placeholder(\"min-height: 25%\", id=\"p1\"),\n            Placeholder(\"min-height: 75%\", id=\"p2\"),\n            Placeholder(\"min-height: 30\", id=\"p3\"),\n            Placeholder(\"min-height: 40w\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MinHeightApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n}\n\nPlaceholder {\n    width: 1fr;\n    height: 50%;\n}\n\n#p1 {\n    min-height: 25%;  /* (1)! */\n}\n\n#p2 {\n    min-height: 75%;\n}\n\n#p3 {\n    min-height: 30;\n}\n\n#p4 {\n    min-height: 40w;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its height is larger than the minimum height.</li> </ol>"},{"location":"styles/min_height/#css","title":"CSS","text":"<pre><code>/* Set the minimum height to 10 rows */\nmin-height: 10;\n\n/* Set the minimum height to 25% of the viewport height */\nmin-height: 25vh;\n</code></pre>"},{"location":"styles/min_height/#python","title":"Python","text":"<pre><code># Set the minimum height to 10 rows\nwidget.styles.min_height = 10\n\n# Set the minimum height to 25% of the viewport height\nwidget.styles.min_height = \"25vh\"\n</code></pre>"},{"location":"styles/min_height/#see-also","title":"See also","text":"<ul> <li><code>max-height</code> to set an upper bound on the height of a widget.</li> <li><code>height</code> to set the height of a widget.</li> </ul>"},{"location":"styles/min_width/","title":"Min-width","text":"<p>The <code>min-width</code> style sets a minimum width for a widget.</p>"},{"location":"styles/min_width/#syntax","title":"Syntax","text":"<pre>\nmin-width: &lt;scalar&gt;;\n</pre> <p>The <code>min-width</code> style accepts a <code>&lt;scalar&gt;</code> that defines a lower bound for the <code>width</code> of a widget. That is, the width of a widget is never allowed to be under <code>min-width</code>.</p>"},{"location":"styles/min_width/#example","title":"Example","text":"<p>The example below shows some placeholders with their width set to <code>50%</code>. Then, we set <code>min-width</code> individually on each placeholder.</p> Outputmin_width.pymin_width.tcss <p> MinWidthApp min-width:\u00a025% min-width:\u00a075% min-width:\u00a0100 min-width:\u00a0400h </p> <pre><code>from textual.app import App\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass MinWidthApp(App):\n    CSS_PATH = \"min_width.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Placeholder(\"min-width: 25%\", id=\"p1\"),\n            Placeholder(\"min-width: 75%\", id=\"p2\"),\n            Placeholder(\"min-width: 100\", id=\"p3\"),\n            Placeholder(\"min-width: 400h\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MinWidthApp()\n    app.run()\n</code></pre> <pre><code>VerticalScroll {\n    height: 100%;\n    width: 100%;\n    overflow-x: auto;\n}\n\nPlaceholder {\n    height: 1fr;\n    width: 50%;\n}\n\n#p1 {\n    min-width: 25%;\n    /* (1)! */\n}\n\n#p2 {\n    min-width: 75%;\n}\n\n#p3 {\n    min-width: 100;\n}\n\n#p4 {\n    min-width: 400h;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its width is larger than the minimum width.</li> </ol>"},{"location":"styles/min_width/#css","title":"CSS","text":"<pre><code>/* Set the minimum width to 10 rows */\nmin-width: 10;\n\n/* Set the minimum width to 25% of the viewport width */\nmin-width: 25vw;\n</code></pre>"},{"location":"styles/min_width/#python","title":"Python","text":"<pre><code># Set the minimum width to 10 rows\nwidget.styles.min_width = 10\n\n# Set the minimum width to 25% of the viewport width\nwidget.styles.min_width = \"25vw\"\n</code></pre>"},{"location":"styles/min_width/#see-also","title":"See also","text":"<ul> <li><code>max-width</code> to set an upper bound on the width of a widget.</li> <li><code>width</code> to set the width of a widget.</li> </ul>"},{"location":"styles/offset/","title":"Offset","text":"<p>The <code>offset</code> style defines an offset for the position of the widget.</p>"},{"location":"styles/offset/#syntax","title":"Syntax","text":"<pre>\noffset: &lt;scalar&gt; &lt;scalar&gt;;\n\noffset-x: &lt;scalar&gt;;\noffset-y: &lt;scalar&gt;\n</pre> <p>The two <code>&lt;scalar&gt;</code> in the <code>offset</code> define, respectively, the offsets in the horizontal and vertical axes for the widget.</p> <p>To specify an offset along a single axis, you can use <code>offset-x</code> and <code>offset-y</code>.</p>"},{"location":"styles/offset/#example","title":"Example","text":"<p>In this example, we have 3 widgets with differing offsets.</p> Outputoffset.pyoffset.tcss <p> OffsetApp \u258c\u2590 \u258cChani\u00a0(offset\u00a00\u00a0\u2590 \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c\u258c-3)\u2590 \u258c\u2590\u258c\u2590 \u258c\u2590\u258c\u2590 \u258c\u2590\u258c\u2590 \u258cPaul\u00a0(offset\u00a08\u00a02)\u2590\u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u258c\u2590 \u258c\u2590 \u258c\u2590 \u258c\u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u258c\u2590 \u258c\u2590 \u258c\u2590 \u258cDuncan\u00a0(offset\u00a04\u00a0\u2590 \u258c10)\u2590 \u258c\u2590 \u258c\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass OffsetApp(App):\n    CSS_PATH = \"offset.tcss\"\n\n    def compose(self):\n        yield Label(\"Paul (offset 8 2)\", classes=\"paul\")\n        yield Label(\"Duncan (offset 4 10)\", classes=\"duncan\")\n        yield Label(\"Chani (offset 0 -3)\", classes=\"chani\")\n\n\nif __name__ == \"__main__\":\n    app = OffsetApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: black;\n    layout: horizontal;\n}\nLabel {\n    width: 20;\n    height: 10;\n    content-align: center middle;\n}\n\n.paul {\n    offset: 8 2;\n    background: red 20%;\n    border: outer red;\n    color: red;\n}\n\n.duncan {\n    offset: 4 10;\n    background: green 20%;\n    border: outer green;\n    color: green;\n}\n\n.chani {\n    offset: 0 -3;\n    background: blue 20%;\n    border: outer blue;\n    color: blue;\n}\n</code></pre>"},{"location":"styles/offset/#css","title":"CSS","text":"<pre><code>/* Move the widget 8 cells in the x direction and 2 in the y direction */\noffset: 8 2;\n\n/* Move the widget 4 cells in the x direction\noffset-x: 4;\n/* Move the widget -3 cells in the y direction\noffset-y: -3;\n</code></pre>"},{"location":"styles/offset/#python","title":"Python","text":"<p>You cannot change programmatically the offset for a single axis. You have to set the two axes at the same time.</p> <pre><code># Move the widget 2 cells in the x direction, and 4 in the y direction.\nwidget.styles.offset = (2, 4)\n</code></pre>"},{"location":"styles/offset/#see-also","title":"See also","text":"<ul> <li>The layout guide section on offsets.</li> </ul>"},{"location":"styles/opacity/","title":"Opacity","text":"<p>The <code>opacity</code> style sets the opacity of a widget.</p> <p>While terminals are not capable of true opacity, Textual can create an approximation by blending widgets with their background color.</p>"},{"location":"styles/opacity/#syntax","title":"Syntax","text":"<pre>\nopacity: &lt;number&gt; | &lt;percentage&gt;;\n</pre> <p>The opacity of a widget can be set as a <code>&lt;number&gt;</code> or a <code>&lt;percentage&gt;</code>. If given as a number, then <code>opacity</code> should be a value between 0 and 1, where 0 is the background color and 1 is fully opaque. If given as a percentage, 0% is the background color and 100% is fully opaque.</p> <p>Typically, if you set this value it would be somewhere between the two extremes. For instance, setting the opacity of a widget to <code>70%</code> will make it appear dimmer than surrounding widgets, which could be used to display a disabled state.</p>"},{"location":"styles/opacity/#example","title":"Example","text":"<p>This example shows, from top to bottom, increasing opacity values for a label with a border and some text. When the opacity is zero, all we see is the (black) background.</p> Outputopacity.pyopacity.tcss <p> OpacityApp \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258copacity:\u00a00%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a025%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a050%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a075%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a0100%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass OpacityApp(App):\n    CSS_PATH = \"opacity.tcss\"\n\n    def compose(self):\n        yield Label(\"opacity: 0%\", id=\"zero-opacity\")\n        yield Label(\"opacity: 25%\", id=\"quarter-opacity\")\n        yield Label(\"opacity: 50%\", id=\"half-opacity\")\n        yield Label(\"opacity: 75%\", id=\"three-quarter-opacity\")\n        yield Label(\"opacity: 100%\", id=\"full-opacity\")\n\n\nif __name__ == \"__main__\":\n    app = OpacityApp()\n    app.run()\n</code></pre> <pre><code>#zero-opacity {\n    opacity: 0%;\n}\n\n#quarter-opacity {\n    opacity: 25%;\n}\n\n#half-opacity {\n    opacity: 50%;\n}\n\n#three-quarter-opacity {\n    opacity: 75%;\n}\n\n#full-opacity {\n    opacity: 100%;\n}\n\nScreen {\n    background: black;\n}\n\nLabel {\n    width: 100%;\n    height: 1fr;\n    border: outer dodgerblue;\n    background: lightseagreen;\n    content-align: center middle;\n    text-style: bold;\n}\n</code></pre>"},{"location":"styles/opacity/#css","title":"CSS","text":"<pre><code>/* Fade the widget to 50% against its parent's background */\nopacity: 50%;\n</code></pre>"},{"location":"styles/opacity/#python","title":"Python","text":"<pre><code># Fade the widget to 50% against its parent's background\nwidget.styles.opacity = \"50%\"\n</code></pre>"},{"location":"styles/opacity/#see-also","title":"See also","text":"<ul> <li><code>text-opacity</code> to blend the color of a widget's content with its background color.</li> </ul>"},{"location":"styles/outline/","title":"Outline","text":"<p>The <code>outline</code> style enables the drawing of a box around the content of a widget, which means the outline is drawn over the content area.</p> <p>Note</p> <p><code>border</code> and <code>outline</code> cannot coexist in the same edge of a widget.</p>"},{"location":"styles/outline/#syntax","title":"Syntax","text":"<pre>\noutline: [&lt;border&gt;] [&lt;color&gt;];\n\noutline-top: [&lt;border&gt;] [&lt;color&gt;];\noutline-right: [&lt;border&gt;] [&lt;color&gt;];\noutline-bottom: [&lt;border&gt;] [&lt;color&gt;];\noutline-left: [&lt;border&gt;] [&lt;color&gt;];\n</pre> <p>The style <code>outline</code> accepts an optional <code>&lt;border&gt;</code> that sets the visual style of the widget outline and an optional <code>&lt;color&gt;</code> to set the color of the outline.</p> <p>Unlike the style <code>border</code>, the frame of the outline is drawn over the content area of the widget. This rule can be useful to add temporary emphasis on the content of a widget, if you want to draw the user's attention to it.</p>"},{"location":"styles/outline/#border-command","title":"Border command","text":"<p>The <code>textual</code> CLI has a subcommand which will let you explore the various border types interactively, when applied to the CSS rule <code>border</code>:</p> <pre><code>textual borders\n</code></pre>"},{"location":"styles/outline/#examples","title":"Examples","text":""},{"location":"styles/outline/#basic-usage","title":"Basic usage","text":"<p>This example shows a widget with an outline. Note how the outline occludes the text area.</p> Outputoutline.pyoutline.tcss <p> OutlineApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u258a \u258e\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258e\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u258a \u258end\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u258a \u258eath.\u258a \u258ehere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineApp(App):\n    CSS_PATH = \"outline.tcss\"\n\n    def compose(self):\n        yield Label(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = OutlineApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: black;\n}\n\nLabel {\n    margin: 4 8;\n    background: green 20%;\n    outline: wide green;\n    width: 100%;\n}\n</code></pre>"},{"location":"styles/outline/#all-outline-types","title":"All outline types","text":"<p>The next example shows a grid with all the available outline types.</p> Outputoutline_all.pyoutline_all.tcss <p> AllOutlinesApp +------------------+\u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 |ascii|blank\u254fdashed\u254f +------------------+\u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2551double\u2551\u2503heavy\u2503hidden/none \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2597\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2596 hkey\u2590inner\u258cnone \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u259d\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2598 \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u258couter\u2590\u2502round\u2502\u2502solid\u2502 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258atall\u258e\u258fvkey\u2595\u258ewide\u258a \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass AllOutlinesApp(App):\n    CSS_PATH = \"outline_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"ascii\", id=\"ascii\"),\n            Label(\"blank\", id=\"blank\"),\n            Label(\"dashed\", id=\"dashed\"),\n            Label(\"double\", id=\"double\"),\n            Label(\"heavy\", id=\"heavy\"),\n            Label(\"hidden/none\", id=\"hidden\"),\n            Label(\"hkey\", id=\"hkey\"),\n            Label(\"inner\", id=\"inner\"),\n            Label(\"none\", id=\"none\"),\n            Label(\"outer\", id=\"outer\"),\n            Label(\"round\", id=\"round\"),\n            Label(\"solid\", id=\"solid\"),\n            Label(\"tall\", id=\"tall\"),\n            Label(\"vkey\", id=\"vkey\"),\n            Label(\"wide\", id=\"wide\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = AllOutlinesApp()\n    app.run()\n</code></pre> <pre><code>#ascii {\n    outline: ascii $accent;\n}\n\n#blank {\n    outline: blank $accent;\n}\n\n#dashed {\n    outline: dashed $accent;\n}\n\n#double {\n    outline: double $accent;\n}\n\n#heavy {\n    outline: heavy $accent;\n}\n\n#hidden {\n    outline: hidden $accent;\n}\n\n#hkey {\n    outline: hkey $accent;\n}\n\n#inner {\n    outline: inner $accent;\n}\n\n#none {\n    outline: none $accent;\n}\n\n#outer {\n    outline: outer $accent;\n}\n\n#round {\n    outline: round $accent;\n}\n\n#solid {\n    outline: solid $accent;\n}\n\n#tall {\n    outline: tall $accent;\n}\n\n#vkey {\n    outline: vkey $accent;\n}\n\n#wide {\n    outline: wide $accent;\n}\n\nGrid {\n    grid-size: 3 5;\n    align: center middle;\n    grid-gutter: 1 2;\n}\n\nLabel {\n    width: 20;\n    height: 3;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/outline/#borders-and-outlines","title":"Borders and outlines","text":"<p>The next example makes the difference between <code>border</code> and <code>outline</code> clearer by having three labels side-by-side. They contain the same text, have the same width and height, and are styled exactly the same up to their <code>border</code> and <code>outline</code> styles.</p> <p>This example also shows that a widget cannot contain both a <code>border</code> and an <code>outline</code>:</p> Outputoutline_vs_border.pyoutline_vs_border.tcss <p> OutlineBorderApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502ear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502ear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502nd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path\u2502 \u2502here\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502I\u00a0must\u00a0not\u00a0fear.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineBorderApp(App):\n    CSS_PATH = \"outline_vs_border.tcss\"\n\n    def compose(self):\n        yield Label(TEXT, classes=\"outline\")\n        yield Label(TEXT, classes=\"border\")\n        yield Label(TEXT, classes=\"outline border\")\n\n\nif __name__ == \"__main__\":\n    app = OutlineBorderApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    height: 8;\n}\n\n.outline {\n    outline: $error round;\n}\n\n.border {\n    border: $success heavy;\n}\n</code></pre>"},{"location":"styles/outline/#css","title":"CSS","text":"<pre><code>/* Set a heavy white outline */\noutline:heavy white;\n\n/* set a red outline on the left */\noutline-left:outer red;\n</code></pre>"},{"location":"styles/outline/#python","title":"Python","text":"<pre><code># Set a heavy white outline\nwidget.outline = (\"heavy\", \"white\")\n\n# Set a red outline on the left\nwidget.outline_left = (\"outer\", \"red\")\n</code></pre>"},{"location":"styles/outline/#see-also","title":"See also","text":"<ul> <li><code>border</code> to add a border around a widget.</li> </ul>"},{"location":"styles/overflow/","title":"Overflow","text":"<p>The <code>overflow</code> style specifies if and when scrollbars should be displayed.</p>"},{"location":"styles/overflow/#syntax","title":"Syntax","text":"<pre>\noverflow: &lt;overflow&gt; &lt;overflow&gt;;\n\noverflow-x: &lt;overflow&gt;;\noverflow-y: &lt;overflow&gt;;\n</pre> <p>The style <code>overflow</code> accepts two values that determine when to display scrollbars in a container widget. The two values set the overflow for the horizontal and vertical axes, respectively.</p> <p>Overflow may also be set individually for each axis:</p> <ul> <li><code>overflow-x</code> sets the overflow for the horizontal axis; and</li> <li><code>overflow-y</code> sets the overflow for the vertical axis.</li> </ul>"},{"location":"styles/overflow/#defaults","title":"Defaults","text":"<p>The default setting for containers is <code>overflow: auto auto</code>.</p> <p>Warning</p> <p>Some built-in containers like <code>Horizontal</code> and <code>VerticalScroll</code> override these defaults.</p>"},{"location":"styles/overflow/#example","title":"Example","text":"<p>Here we split the screen into left and right sections, each with three vertically scrolling widgets that do not fit into the height of the terminal.</p> <p>The left side has <code>overflow-y: auto</code> (the default) and will automatically show a scrollbar. The right side has <code>overflow-y: hidden</code> which will prevent a scrollbar from being shown.</p> Outputoverflow.pyoverflow.tcss <p> OverflowApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eI\u00a0must\u00a0not\u00a0fear.\u258a\u258eI\u00a0must\u00a0not\u00a0fear.\u258a \u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a\u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a\u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a \u258ebrings\u00a0total\u00a0obliteration.\u258a\u258ebrings\u00a0total\u00a0obliteration.\u258a \u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a\u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u258a\u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0\u258a \u258eand\u00a0through\u00a0me.\u258a\u258eand\u00a0through\u00a0me.\u258a \u258eAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0\u258a\u258eAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0\u258a \u258ewill\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0\u258a\u258eturn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0\u258a \u258eits\u00a0path.\u258a\u2581\u2581\u258epath.\u258a \u258eWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0\u258a\u258eWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u258a \u258ewill\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u258a\u258ebe\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u258a \u258eremain.\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258eI\u00a0must\u00a0not\u00a0fear.\u258a \u258eI\u00a0must\u00a0not\u00a0fear.\u258a\u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a\u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a \u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a\u258ebrings\u00a0total\u00a0obliteration.\u258a \u258ebrings\u00a0total\u00a0obliteration.\u258a\u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a\u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0\u258a \u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u258a\u258eand\u00a0through\u00a0me.\u258a </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Static\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OverflowApp(App):\n    CSS_PATH = \"overflow.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            VerticalScroll(Static(TEXT), Static(TEXT), Static(TEXT), id=\"left\"),\n            VerticalScroll(Static(TEXT), Static(TEXT), Static(TEXT), id=\"right\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = OverflowApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: $background;\n    color: black;\n}\n\nVerticalScroll {\n    width: 1fr;\n}\n\nStatic {\n    margin: 1 2;\n    background: green 80%;\n    border: green wide;\n    color: white 90%;\n    height: auto;\n}\n\n#right {\n    overflow-y: hidden;\n}\n</code></pre>"},{"location":"styles/overflow/#css","title":"CSS","text":"<pre><code>/* Automatic scrollbars on both axes (the default) */\noverflow: auto auto;\n\n/* Hide the vertical scrollbar */\noverflow-y: hidden;\n\n/* Always show the horizontal scrollbar */\noverflow-x: scroll;\n</code></pre>"},{"location":"styles/overflow/#python","title":"Python","text":"<p>Overflow cannot be programmatically set for both axes at the same time.</p> <pre><code># Hide the vertical scrollbar\nwidget.styles.overflow_y = \"hidden\"\n\n# Always show the horizontal scrollbar\nwidget.styles.overflow_x = \"scroll\"\n</code></pre>"},{"location":"styles/padding/","title":"Padding","text":"<p>The <code>padding</code> style specifies spacing around the content of a widget.</p>"},{"location":"styles/padding/#syntax","title":"Syntax","text":"<pre>\npadding: &lt;integer&gt; # one value for all edges\n       | &lt;integer&gt; &lt;integer&gt;\n       # top/bot   left/right\n       | &lt;integer&gt; &lt;integer&gt; &lt;integer&gt; &lt;integer&gt;;\n       # top       right     bot       left\n\npadding-top: &lt;integer&gt;;\npadding-right: &lt;integer&gt;;\npadding-bottom: &lt;integer&gt;;\npadding-left: &lt;integer&gt;;\n</pre> <p>The <code>padding</code> specifies spacing around the content of a widget, thus this spacing is added inside the widget. The values of the <code>&lt;integer&gt;</code> determine how much spacing is added and the number of values define what edges get what padding:</p> <ul> <li>1 <code>&lt;integer&gt;</code> sets the same padding for the four edges of the widget;</li> <li>2 <code>&lt;integer&gt;</code> set padding for top/bottom and left/right edges, respectively.</li> <li>4 <code>&lt;integer&gt;</code> set padding for the top, right, bottom, and left edges, respectively.</li> </ul> <p>Tip</p> <p>To remember the order of the edges affected by the rule <code>padding</code> when it has 4 values, think of a clock. Its hand starts at the top and then goes clockwise: top, right, bottom, left.</p> <p>Alternatively, padding can be set for each edge individually through the rules <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>, respectively.</p>"},{"location":"styles/padding/#example","title":"Example","text":""},{"location":"styles/padding/#basic-usage","title":"Basic usage","text":"<p>This example adds padding around some text.</p> Outputpadding.pypadding.tcss <p> PaddingApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0 path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass PaddingApp(App):\n    CSS_PATH = \"padding.tcss\"\n\n    def compose(self):\n        yield Label(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = PaddingApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: blue;\n}\n\nLabel {\n    padding: 4 8;\n    background: blue 20%;\n    width: 100%;\n}\n</code></pre>"},{"location":"styles/padding/#all-padding-settings","title":"All padding settings","text":"<p>The next example shows a grid. In each cell, we have a placeholder that has its padding set in different ways. The effect of each padding setting is noticeable in the colored background around the text of each placeholder.</p> Outputpadding_all.pypadding_all.tcss <p> PaddingAllApp no\u00a0padding padding:\u00a01padding:padding:\u00a01\u00a01 1\u00a052\u00a06 padding-right:\u00a03padding-bottom:\u00a04padding-left:\u00a03 padding-top:\u00a04 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass PaddingAllApp(App):\n    CSS_PATH = \"padding_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Placeholder(\"no padding\", id=\"p1\"),\n            Placeholder(\"padding: 1\", id=\"p2\"),\n            Placeholder(\"padding: 1 5\", id=\"p3\"),\n            Placeholder(\"padding: 1 1 2 6\", id=\"p4\"),\n            Placeholder(\"padding-top: 4\", id=\"p5\"),\n            Placeholder(\"padding-right: 3\", id=\"p6\"),\n            Placeholder(\"padding-bottom: 4\", id=\"p7\"),\n            Placeholder(\"padding-left: 3\", id=\"p8\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = PaddingAllApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: $background;\n}\n\nGrid {\n    grid-size: 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    width: auto;\n    height: auto;\n}\n\n#p1 {\n    /* default is no padding */\n}\n\n#p2 {\n    padding: 1;\n}\n\n#p3 {\n    padding: 1 5;\n}\n\n#p4 {\n    padding: 1 1 2 6;\n}\n\n#p5 {\n    padding-top: 4;\n}\n\n#p6 {\n    padding-right: 3;\n}\n\n#p7 {\n    padding-bottom: 4;\n}\n\n#p8 {\n    padding-left: 3;\n}\n</code></pre>"},{"location":"styles/padding/#css","title":"CSS","text":"<pre><code>/* Set padding of 1 around all edges */\npadding: 1;\n/* Set padding of 2 on the top and bottom edges, and 4 on the left and right */\npadding: 2 4;\n/* Set padding of 1 on the top, 2 on the right,\n                 3 on the bottom, and 4 on the left */\npadding: 1 2 3 4;\n\npadding-top: 1;\npadding-right: 2;\npadding-bottom: 3;\npadding-left: 4;\n</code></pre>"},{"location":"styles/padding/#python","title":"Python","text":"<p>In Python, you cannot set any of the individual <code>padding</code> styles <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>.</p> <p>However, you can set padding to a single integer, a tuple of 2 integers, or a tuple of 4 integers:</p> <pre><code># Set padding of 1 around all edges\nwidget.styles.padding = 1\n# Set padding of 2 on the top and bottom edges, and 4 on the left and right\nwidget.styles.padding = (2, 4)\n# Set padding of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left\nwidget.styles.padding = (1, 2, 3, 4)\n</code></pre>"},{"location":"styles/padding/#see-also","title":"See also","text":"<ul> <li><code>box-sizing</code> to specify how to account for padding in a widget's dimensions.</li> <li><code>margin</code> to add spacing around a widget.</li> </ul>"},{"location":"styles/scrollbar_gutter/","title":"Scrollbar-gutter","text":"<p>The <code>scrollbar-gutter</code> style allows reserving space for a vertical scrollbar.</p>"},{"location":"styles/scrollbar_gutter/#syntax","title":"Syntax","text":"<pre>\nscrollbar-gutter: auto | stable;\n</pre>"},{"location":"styles/scrollbar_gutter/#values","title":"Values","text":"Value Description <code>auto</code> (default) No space is reserved for a vertical scrollbar. <code>stable</code> Space is reserved for a vertical scrollbar. <p>Setting the value to <code>stable</code> prevents unwanted layout changes when the scrollbar becomes visible, whereas the default value of <code>auto</code> means that the layout of your application is recomputed when a vertical scrollbar becomes needed.</p>"},{"location":"styles/scrollbar_gutter/#example","title":"Example","text":"<p>In the example below, notice the gap reserved for the scrollbar on the right side of the terminal window.</p> Outputscrollbar_gutter.pyscrollbar_gutter.tcss <p> ScrollbarGutterApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass ScrollbarGutterApp(App):\n    CSS_PATH = \"scrollbar_gutter.tcss\"\n\n    def compose(self):\n        yield Static(TEXT, id=\"text-box\")\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarGutterApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-gutter: stable;\n}\n\n#text-box {\n    color: floralwhite;\n    background: darkmagenta;\n}\n</code></pre>"},{"location":"styles/scrollbar_gutter/#css","title":"CSS","text":"<pre><code>scrollbar-gutter: auto;    /* Don't reserve space for a vertical scrollbar. */\nscrollbar-gutter: stable;  /* Reserve space for a vertical scrollbar. */\n</code></pre>"},{"location":"styles/scrollbar_gutter/#python","title":"Python","text":"<pre><code>self.styles.scrollbar_gutter = \"auto\"    # Don't reserve space for a vertical scrollbar.\nself.styles.scrollbar_gutter = \"stable\"  # Reserve space for a vertical scrollbar.\n</code></pre>"},{"location":"styles/scrollbar_size/","title":"Scrollbar-size","text":"<p>The <code>scrollbar-size</code> style defines the width of the scrollbars.</p>"},{"location":"styles/scrollbar_size/#syntax","title":"Syntax","text":"<pre>\nscrollbar-size: &lt;integer&gt; &lt;integer&gt;;\n              # horizontal vertical\n\nscrollbar-size-horizontal: &lt;integer&gt;;\nscrollbar-size-vertical: &lt;integer&gt;;\n</pre> <p>The <code>scrollbar-size</code> style takes two <code>&lt;integer&gt;</code> to set the horizontal and vertical scrollbar sizes, respectively. This customisable size is the width of the scrollbar, given that its length will always be 100% of the container.</p> <p>The scrollbar widths may also be set individually with <code>scrollbar-size-horizontal</code> and <code>scrollbar-size-vertical</code>.</p>"},{"location":"styles/scrollbar_size/#examples","title":"Examples","text":""},{"location":"styles/scrollbar_size/#basic-usage","title":"Basic usage","text":"<p>In this example we modify the size of the widget's scrollbar to be much larger than usual.</p> Outputscrollbar_size.pyscrollbar_size.tcss <p> ScrollbarApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2581\u2581\u2581\u2581 I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. </p> <pre><code>from textual.app import App\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarApp(App):\n    CSS_PATH = \"scrollbar_size.tcss\"\n\n    def compose(self):\n        yield ScrollableContainer(Label(TEXT * 5), classes=\"panel\")\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: blue 80%;\n    layout: horizontal;\n}\n\nLabel {\n    padding: 1 2;\n    width: 200;\n}\n\n.panel {\n    scrollbar-size: 10 4;\n    padding: 1 2;\n}\n</code></pre>"},{"location":"styles/scrollbar_size/#scrollbar-sizes-comparison","title":"Scrollbar sizes comparison","text":"<p>In the next example we show three containers with differently sized scrollbars.</p> <p>Tip</p> <p>If you want to hide the scrollbar but still allow the container to scroll using the mousewheel or keyboard, you can set the scrollbar size to <code>0</code>.</p> Outputscrollbar_size2.pyscrollbar_size2.tcss <p> ScrollbarApp I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0oI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pastAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0tWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0thWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0t I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2587I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2587\u2587 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0oI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pastAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0tWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0thWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0t I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.\u2582I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0oI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 \u258fAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u258f \u258fWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0th\u258f \u258fI\u00a0must\u00a0not\u00a0fear.\u258f \u258fFear\u00a0is\u00a0the\u00a0mind-killer.\u258f \u258f\u2589\u258f </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, ScrollableContainer\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarApp(App):\n    CSS_PATH = \"scrollbar_size2.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            ScrollableContainer(Label(TEXT * 5), id=\"v1\"),\n            ScrollableContainer(Label(TEXT * 5), id=\"v2\"),\n            ScrollableContainer(Label(TEXT * 5), id=\"v3\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarApp()\n    app.run()\n</code></pre> <pre><code>ScrollableContainer {\n    width: 1fr;\n}\n\n#v1 {\n    scrollbar-size: 5 1;\n    background: red 20%;\n}\n\n#v2 {\n    scrollbar-size-vertical: 1;\n    background: green 20%;\n}\n\n#v3 {\n    scrollbar-size-horizontal: 5;\n    background: blue 20%;\n}\n</code></pre>"},{"location":"styles/scrollbar_size/#css","title":"CSS","text":"<pre><code>/* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */\nscrollbar-size: 10 4;\n\n/* Set horizontal scrollbar to 10 */\nscrollbar-size-horizontal: 10;\n\n/* Set vertical scrollbar to 4 */\nscrollbar-size-vertical: 4;\n</code></pre>"},{"location":"styles/scrollbar_size/#python","title":"Python","text":"<p>The style <code>scrollbar-size</code> has no Python equivalent. The scrollbar sizes must be set independently:</p> <pre><code># Set horizontal scrollbar to 10:\nwidget.styles.scrollbar_size_horizontal = 10\n# Set vertical scrollbar to 4:\nwidget.styles.scrollbar_size_vertical = 4\n</code></pre>"},{"location":"styles/text_align/","title":"Text-align","text":"<p>The <code>text-align</code> style sets the text alignment in a widget.</p>"},{"location":"styles/text_align/#syntax","title":"Syntax","text":"<pre>\ntext-align: &lt;text-align&gt;;\n</pre> <p>The <code>text-align</code> style accepts a value of the type <code>&lt;text-align&gt;</code> that defines how text is aligned inside the widget.</p>"},{"location":"styles/text_align/#defaults","title":"Defaults","text":"<p>The default value is <code>start</code>.</p>"},{"location":"styles/text_align/#example","title":"Example","text":"<p>This example shows, from top to bottom: <code>left</code>, <code>center</code>, <code>right</code>, and <code>justify</code> text alignments.</p> Outputtext_align.pytext_align.tcss <p> TextAlign Left\u00a0alignedCenter\u00a0aligned I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0 mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0 obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0Iobliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u00a0\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0 through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Right\u00a0alignedJustified \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0theI\u00a0\u00a0must\u00a0\u00a0not\u00a0\u00a0fear.\u00a0\u00a0Fear\u00a0\u00a0\u00a0is\u00a0\u00a0\u00a0the \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0themind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0Fear\u00a0\u00a0\u00a0\u00a0\u00a0is\u00a0\u00a0\u00a0\u00a0\u00a0the \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0little-death\u00a0that\u00a0brings\u00a0totallittle-death\u00a0\u00a0\u00a0that\u00a0\u00a0\u00a0brings\u00a0\u00a0\u00a0total obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0Iobliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I \u00a0\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0andwill\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0\u00a0me\u00a0\u00a0and \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0through\u00a0me.through\u00a0me. </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\nTEXT = (\n    \"I must not fear. Fear is the mind-killer. Fear is the little-death that \"\n    \"brings total obliteration. I will face my fear. I will permit it to pass over \"\n    \"me and through me.\"\n)\n\n\nclass TextAlign(App):\n    CSS_PATH = \"text_align.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"[b]Left aligned[/]\\n\" + TEXT, id=\"one\"),\n            Label(\"[b]Center aligned[/]\\n\" + TEXT, id=\"two\"),\n            Label(\"[b]Right aligned[/]\\n\" + TEXT, id=\"three\"),\n            Label(\"[b]Justified[/]\\n\" + TEXT, id=\"four\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = TextAlign()\n    app.run()\n</code></pre> <pre><code>#one {\n    text-align: left;\n    background: lightblue;\n}\n\n#two {\n    text-align: center;\n    background: indianred;\n}\n\n#three {\n    text-align: right;\n    background: palegreen;\n}\n\n#four {\n    text-align: justify;\n    background: palevioletred;\n}\n\nLabel {\n    padding: 1 2;\n    height: 100%;\n    color: auto;\n}\n\nGrid {\n    grid-size: 2 2;\n}\n</code></pre>"},{"location":"styles/text_align/#css","title":"CSS","text":"<pre><code>/* Set text in the widget to be right aligned */\ntext-align: right;\n</code></pre>"},{"location":"styles/text_align/#python","title":"Python","text":"<pre><code># Set text in the widget to be right aligned\nwidget.styles.text_align = \"right\"\n</code></pre>"},{"location":"styles/text_align/#see-also","title":"See also","text":"<ul> <li><code>align</code> to set the alignment of children widgets inside a container.</li> <li><code>content-align</code> to set the alignment of content inside a widget.</li> </ul>"},{"location":"styles/text_opacity/","title":"Text-opacity","text":"<p>The <code>text-opacity</code> style blends the foreground color (i.e. text) with the background color.</p>"},{"location":"styles/text_opacity/#syntax","title":"Syntax","text":"<pre>\ntext-opacity: &lt;number&gt; | &lt;percentage&gt;;\n</pre> <p>The text opacity of a widget can be set as a <code>&lt;number&gt;</code> or a <code>&lt;percentage&gt;</code>. If given as a number, then <code>text-opacity</code> should be a value between 0 and 1, where 0 makes the foreground color match the background (effectively making text invisible) and 1 will display text as normal. If given as a percentage, 0% will result in invisible text, and 100% will display fully opaque text.</p> <p>Typically, if you set this value it would be somewhere between the two extremes. For instance, setting <code>text-opacity</code> to <code>70%</code> would result in slightly faded text. Setting it to <code>0.3</code> would result in very dim text.</p> <p>Warning</p> <p>Be careful not to set text opacity so low as to make it hard to read.</p>"},{"location":"styles/text_opacity/#example","title":"Example","text":"<p>This example shows, from top to bottom, increasing <code>text-opacity</code> values.</p> Outputtext_opacity.pytext_opacity.tcss <p> TextOpacityApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a025%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a050%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a075%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a0100%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass TextOpacityApp(App):\n    CSS_PATH = \"text_opacity.tcss\"\n\n    def compose(self):\n        yield Label(\"text-opacity: 0%\", id=\"zero-opacity\")\n        yield Label(\"text-opacity: 25%\", id=\"quarter-opacity\")\n        yield Label(\"text-opacity: 50%\", id=\"half-opacity\")\n        yield Label(\"text-opacity: 75%\", id=\"three-quarter-opacity\")\n        yield Label(\"text-opacity: 100%\", id=\"full-opacity\")\n\n\nif __name__ == \"__main__\":\n    app = TextOpacityApp()\n    app.run()\n</code></pre> <pre><code>#zero-opacity {\n    text-opacity: 0%;\n}\n\n#quarter-opacity {\n    text-opacity: 25%;\n}\n\n#half-opacity {\n    text-opacity: 50%;\n}\n\n#three-quarter-opacity {\n    text-opacity: 75%;\n}\n\n#full-opacity {\n    text-opacity: 100%;\n}\n\nLabel {\n    height: 1fr;\n    width: 100%;\n    text-align: center;\n    text-style: bold;\n}\n</code></pre>"},{"location":"styles/text_opacity/#css","title":"CSS","text":"<pre><code>/* Set the text to be \"half-faded\" against the background of the widget */\ntext-opacity: 50%;\n</code></pre>"},{"location":"styles/text_opacity/#python","title":"Python","text":"<pre><code># Set the text to be \"half-faded\" against the background of the widget\nwidget.styles.text_opacity = \"50%\"\n</code></pre>"},{"location":"styles/text_opacity/#see-also","title":"See also","text":"<ul> <li><code>opacity</code> to specify the opacity of a whole widget.</li> </ul>"},{"location":"styles/text_style/","title":"Text-style","text":"<p>The <code>text-style</code> style sets the style for the text in a widget.</p>"},{"location":"styles/text_style/#syntax","title":"Syntax","text":"<pre>\ntext-style: &lt;text-style&gt;;\n</pre> <p><code>text-style</code> will take all the values specified and will apply that styling combination to the text in the widget.</p>"},{"location":"styles/text_style/#examples","title":"Examples","text":""},{"location":"styles/text_style/#basic-usage","title":"Basic usage","text":"<p>Each of the three text panels has a different text style, respectively <code>bold</code>, <code>italic</code>, and <code>reverse</code>, from left to right.</p> Outputtext_style.pytext_style.tcss <p> TextStyleApp I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0 that\u00a0brings\u00a0total\u00a0that\u00a0brings\u00a0total\u00a0that\u00a0brings\u00a0total\u00a0 obliteration.obliteration.obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 over\u00a0me\u00a0and\u00a0through\u00a0me.over\u00a0me\u00a0and\u00a0through\u00a0me.over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0 I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0 to\u00a0see\u00a0its\u00a0path.to\u00a0see\u00a0its\u00a0path.to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0 there\u00a0will\u00a0be\u00a0nothing.\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Onlythere\u00a0will\u00a0be\u00a0nothing.\u00a0Only Only\u00a0I\u00a0will\u00a0remain.I\u00a0will\u00a0remain.I\u00a0will\u00a0remain. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass TextStyleApp(App):\n    CSS_PATH = \"text_style.tcss\"\n\n    def compose(self):\n        yield Label(TEXT, id=\"lbl1\")\n        yield Label(TEXT, id=\"lbl2\")\n        yield Label(TEXT, id=\"lbl3\")\n\n\nif __name__ == \"__main__\":\n    app = TextStyleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: horizontal;\n}\nLabel {\n    width: 1fr;\n}\n#lbl1 {\n    background: red 30%;\n    text-style: bold;\n}\n#lbl2 {\n    background: green 30%;\n    text-style: italic;\n}\n#lbl3 {\n    background: blue 30%;\n    text-style: reverse;\n}\n</code></pre>"},{"location":"styles/text_style/#all-text-styles","title":"All text styles","text":"<p>The next example shows all different text styles on their own, as well as some combinations of styles in a single widget.</p> Outputtext_style_all.pytext_style_all.tcss <p> AllTextStyleApp \u00a0\u00a0nonebolditalicreverse \u00a0\u00a0I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. \u00a0\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 \u00a0\u00a0mind-killer.mind-killer.mind-killer.mind-killer. \u00a0\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 \u00a0\u00a0little-death\u00a0that\u00a0\u00a0little-death\u00a0that\u00a0little-death\u00a0thatlittle-death\u00a0that\u00a0 \u00a0\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0 \u00a0\u00a0obliteration.obliteration.obliteration.obliteration. \u00a0\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0 \u00a0\u00a0fear.fear.fear.fear. strikeunderlinebold\u00a0italicreverse\u00a0strike I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 mind-killer.mind-killer.mind-killer.mind-killer. Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 little-death\u00a0thatlittle-death\u00a0that\u00a0little-death\u00a0thatlittle-death\u00a0that\u00a0 brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0 obliteration.obliteration.obliteration.obliteration. I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0 fear.fear.fear.fear. I\u00a0will\u00a0permit\u00a0it\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass AllTextStyleApp(App):\n    CSS_PATH = \"text_style_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"none\\n\" + TEXT, id=\"lbl1\"),\n            Label(\"bold\\n\" + TEXT, id=\"lbl2\"),\n            Label(\"italic\\n\" + TEXT, id=\"lbl3\"),\n            Label(\"reverse\\n\" + TEXT, id=\"lbl4\"),\n            Label(\"strike\\n\" + TEXT, id=\"lbl5\"),\n            Label(\"underline\\n\" + TEXT, id=\"lbl6\"),\n            Label(\"bold italic\\n\" + TEXT, id=\"lbl7\"),\n            Label(\"reverse strike\\n\" + TEXT, id=\"lbl8\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = AllTextStyleApp()\n    app.run()\n</code></pre> <pre><code>#lbl1 {\n    text-style: none;\n}\n\n#lbl2 {\n    text-style: bold;\n}\n\n#lbl3 {\n    text-style: italic;\n}\n\n#lbl4 {\n    text-style: reverse;\n}\n\n#lbl5 {\n    text-style: strike;\n}\n\n#lbl6 {\n    text-style: underline;\n}\n\n#lbl7 {\n    text-style: bold italic;\n}\n\n#lbl8 {\n    text-style: reverse strike;\n}\n\nGrid {\n    grid-size: 4;\n    grid-gutter: 1 2;\n    margin: 1 2;\n    height: 100%;\n}\n\nLabel {\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/text_style/#css","title":"CSS","text":"<pre><code>text-style: italic;\n</code></pre>"},{"location":"styles/text_style/#python","title":"Python","text":"<pre><code>widget.styles.text_style = \"italic\"\n</code></pre>"},{"location":"styles/tint/","title":"Tint","text":"<p>The <code>tint</code> style blends a color with the whole widget.</p>"},{"location":"styles/tint/#syntax","title":"Syntax","text":"<pre>\ntint: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p>The tint style blends a <code>&lt;color&gt;</code> with the widget. The color should likely have an alpha component (specified directly in the color used or by the optional <code>&lt;percentage&gt;</code>), otherwise the end result will obscure the widget content.</p>"},{"location":"styles/tint/#example","title":"Example","text":"<p>This examples shows a green tint with gradually increasing alpha.</p> Outputtint.pytint.tcss <p> TintApp tint:\u00a0green\u00a00%; tint:\u00a0green\u00a010%; tint:\u00a0green\u00a020%; tint:\u00a0green\u00a030%; tint:\u00a0green\u00a040%; tint:\u00a0green\u00a050%; \u2584\u2584 tint:\u00a0green\u00a060%; tint:\u00a0green\u00a070%; </p> <pre><code>from textual.app import App\nfrom textual.color import Color\nfrom textual.widgets import Label\n\n\nclass TintApp(App):\n    CSS_PATH = \"tint.tcss\"\n\n    def compose(self):\n        color = Color.parse(\"green\")\n        for tint_alpha in range(0, 101, 10):\n            widget = Label(f\"tint: green {tint_alpha}%;\")\n            widget.styles.tint = color.with_alpha(tint_alpha / 100)  # (1)!\n            yield widget\n\n\nif __name__ == \"__main__\":\n    app = TintApp()\n    app.run()\n</code></pre> <ol> <li>We set the tint to a <code>Color</code> instance with varying levels of opacity, set through the method with_alpha.</li> </ol> <pre><code>Label {\n    height: 3;\n    width: 100%;\n    text-style: bold;\n    background: white;\n    color: black;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/tint/#css","title":"CSS","text":"<pre><code>/* A red tint (could indicate an error) */\ntint: red 20%;\n\n/* A green tint */\ntint: rgba(0, 200, 0, 0.3);\n</code></pre>"},{"location":"styles/tint/#python","title":"Python","text":"<pre><code># A red tint\nfrom textual.color import Color\nwidget.styles.tint = Color.parse(\"red\").with_alpha(0.2);\n\n# A green tint\nwidget.styles.tint = \"rgba(0, 200, 0, 0.3)\"\n</code></pre>"},{"location":"styles/visibility/","title":"Visibility","text":"<p>The <code>visibility</code> style determines whether a widget is visible or not.</p>"},{"location":"styles/visibility/#syntax","title":"Syntax","text":"<pre>\nvisibility: hidden | visible;\n</pre> <p><code>visibility</code> takes one of two values to set the visibility of a widget.</p>"},{"location":"styles/visibility/#values","title":"Values","text":"Value Description <code>hidden</code> The widget will be invisible. <code>visible</code> (default) The widget will be displayed as normal."},{"location":"styles/visibility/#visibility-inheritance","title":"Visibility inheritance","text":"<p>Note</p> <p>Children of an invisible container can be visible.</p> <p>By default, children inherit the visibility of their parents. So, if a container is set to be invisible, its children widgets will also be invisible by default. However, those widgets can be made visible if their visibility is explicitly set to <code>visibility: visible</code>. This is shown in the second example below.</p>"},{"location":"styles/visibility/#examples","title":"Examples","text":""},{"location":"styles/visibility/#basic-usage","title":"Basic usage","text":"<p>Note that the second widget is hidden while leaving a space where it would have been rendered.</p> Outputvisibility.pyvisibility.tcss <p> VisibilityApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a01\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a03\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass VisibilityApp(App):\n    CSS_PATH = \"visibility.tcss\"\n\n    def compose(self):\n        yield Label(\"Widget 1\")\n        yield Label(\"Widget 2\", classes=\"invisible\")\n        yield Label(\"Widget 3\")\n\n\nif __name__ == \"__main__\":\n    app = VisibilityApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: green;\n}\n\nLabel {\n    height: 5;\n    width: 100%;\n    background: white;\n    color: blue;\n    border: heavy blue;\n}\n\nLabel.invisible {\n    visibility: hidden;\n}\n</code></pre>"},{"location":"styles/visibility/#overriding-container-visibility","title":"Overriding container visibility","text":"<p>The next example shows the interaction of the <code>visibility</code> style with invisible containers that have visible children. The app below has three rows with a <code>Horizontal</code> container per row and three placeholders per row. The containers all have a white background, and then:</p> <ul> <li>the top container is visible by default (we can see the white background around the placeholders);</li> <li>the middle container is invisible and the children placeholders inherited that setting;</li> <li>the bottom container is invisible but the children placeholders are visible because they were set to be visible.</li> </ul> Outputvisibility_containers.pyvisibility_containers.tcss <p> VisibilityContainersApp PlaceholderPlaceholderPlaceholder PlaceholderPlaceholderPlaceholder </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass VisibilityContainersApp(App):\n    CSS_PATH = \"visibility_containers.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Horizontal(\n                Placeholder(),\n                Placeholder(),\n                Placeholder(),\n                id=\"top\",\n            ),\n            Horizontal(\n                Placeholder(),\n                Placeholder(),\n                Placeholder(),\n                id=\"middle\",\n            ),\n            Horizontal(\n                Placeholder(),\n                Placeholder(),\n                Placeholder(),\n                id=\"bot\",\n            ),\n        )\n\n\nif __name__ == \"__main__\":\n    app = VisibilityContainersApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    padding: 1 2;     /* (1)! */\n    background: white;\n    height: 1fr;\n}\n\n#top {}               /* (2)! */\n\n#middle {             /* (3)! */\n    visibility: hidden;\n}\n\n#bot {                /* (4)! */\n    visibility: hidden;\n}\n\n#bot &gt; Placeholder {  /* (5)! */\n    visibility: visible;\n}\n\nPlaceholder {\n    width: 1fr;\n}\n</code></pre> <ol> <li>The padding and the white background let us know when the <code>Horizontal</code> is visible.</li> <li>The top <code>Horizontal</code> is visible by default, and so are its children.</li> <li>The middle <code>Horizontal</code> is made invisible and its children will inherit that setting.</li> <li>The bottom <code>Horizontal</code> is made invisible...</li> <li>... but its children override that setting and become visible.</li> </ol>"},{"location":"styles/visibility/#css","title":"CSS","text":"<pre><code>/* Widget is invisible */\nvisibility: hidden;\n\n/* Widget is visible */\nvisibility: visible;\n</code></pre>"},{"location":"styles/visibility/#python","title":"Python","text":"<pre><code># Widget is invisible\nself.styles.visibility = \"hidden\"\n\n# Widget is visible\nself.styles.visibility = \"visible\"\n</code></pre> <p>There is also a shortcut to set a Widget's visibility. The <code>visible</code> property on <code>Widget</code> may be set to <code>True</code> or <code>False</code>.</p> <pre><code># Make a widget invisible\nwidget.visible = False\n\n# Make the widget visible again\nwidget.visible = True\n</code></pre>"},{"location":"styles/visibility/#see-also","title":"See also","text":"<ul> <li><code>display</code> to specify whether a widget is displayed or not.</li> </ul>"},{"location":"styles/width/","title":"Width","text":"<p>The <code>width</code> style sets a widget's width.</p>"},{"location":"styles/width/#syntax","title":"Syntax","text":"<pre>\nwidth: &lt;scalar&gt;;\n</pre> <p>The style <code>width</code> needs a <code>&lt;scalar&gt;</code> to determine the horizontal length of the width. By default, it sets the width of the content area, but if <code>box-sizing</code> is set to <code>border-box</code> it sets the width of the border area.</p>"},{"location":"styles/width/#examples","title":"Examples","text":""},{"location":"styles/width/#basic-usage","title":"Basic usage","text":"<p>This example adds a widget with 50% width of the screen.</p> Outputwidth.pywidth.tcss <p> WidthApp Widget </p> <pre><code>from textual.app import App\nfrom textual.widget import Widget\n\n\nclass WidthApp(App):\n    CSS_PATH = \"width.tcss\"\n\n    def compose(self):\n        yield Widget()\n\n\nif __name__ == \"__main__\":\n    app = WidthApp()\n    app.run()\n</code></pre> <pre><code>Screen &gt; Widget {\n    background: green;\n    width: 50%;\n    color: white;\n}\n</code></pre>"},{"location":"styles/width/#all-width-formats","title":"All width formats","text":"Outputwidth_comparison.pywidth_comparison.tcss <p> WidthComparisonApp #cells#percent#w#h#vw#vh#auto#fr1#fr3 \u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022 </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal\nfrom textual.widgets import Label, Placeholder, Static\n\n\nclass Ruler(Static):\n    def compose(self):\n        ruler_text = \"\u00b7\u00b7\u00b7\u00b7\u2022\" * 100\n        yield Label(ruler_text)\n\n\nclass WidthComparisonApp(App):\n    CSS_PATH = \"width_comparison.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            Placeholder(id=\"cells\"),  # (1)!\n            Placeholder(id=\"percent\"),\n            Placeholder(id=\"w\"),\n            Placeholder(id=\"h\"),\n            Placeholder(id=\"vw\"),\n            Placeholder(id=\"vh\"),\n            Placeholder(id=\"auto\"),\n            Placeholder(id=\"fr1\"),\n            Placeholder(id=\"fr3\"),\n        )\n        yield Ruler()\n\n\nif __name__ == \"__main__\":\n    app = WidthComparisonApp()\n    app.run()\n</code></pre> <ol> <li>The id of the placeholder identifies which unit will be used to set the width of the widget.</li> </ol> <pre><code>#cells {\n    width: 9;      /* (1)! */\n}\n#percent {\n    width: 12.5%;  /* (2)! */\n}\n#w {\n    width: 10w;    /* (3)! */\n}\n#h {\n    width: 25h;    /* (4)! */\n}\n#vw {\n    width: 15vw;   /* (5)! */\n}\n#vh {\n    width: 25vh;   /* (6)! */\n}\n#auto {\n    width: auto;   /* (7)! */\n}\n#fr1 {\n    width: 1fr;    /* (8)! */\n}\n#fr3 {\n    width: 3fr;    /* (9)! */\n}\n\nScreen {\n    layers: ruler;\n}\n\nRuler {\n    layer: ruler;\n    dock: bottom;\n    overflow: hidden;\n    height: 1;\n    background: $accent;\n}\n</code></pre> <ol> <li>This sets the width to 9 columns.</li> <li>This sets the width to 12.5% of the space made available by the container. The container is 80 columns wide, so 12.5% of 80 is 10.</li> <li>This sets the width to 10% of the width of the direct container, which is the <code>Horizontal</code> container. Because it expands to fit all of the terminal, the width of the <code>Horizontal</code> is 80 and 10% of 80 is 8.</li> <li>This sets the width to 25% of the height of the direct container, which is the <code>Horizontal</code> container. Because it expands to fit all of the terminal, the height of the <code>Horizontal</code> is 24 and 25% of 24 is 6.</li> <li>This sets the width to 15% of the viewport width, which is 80. 15% of 80 is 12.</li> <li>This sets the width to 25% of the viewport height, which is 24. 25% of 24 is 6.</li> <li>This sets the width of the placeholder to be the optimal size that fits the content without scrolling. Because the content is the string <code>\"#auto\"</code>, the placeholder has its width set to 5.</li> <li>This sets the width to <code>1fr</code>, which means this placeholder will have a third of the width of a placeholder with <code>3fr</code>.</li> <li>This sets the width to <code>3fr</code>, which means this placeholder will have triple the width of a placeholder with <code>1fr</code>.</li> </ol>"},{"location":"styles/width/#css","title":"CSS","text":"<pre><code>/* Explicit cell width */\nwidth: 10;\n\n/* Percentage width */\nwidth: 50%;\n\n/* Automatic width */\nwidth: auto;\n</code></pre>"},{"location":"styles/width/#python","title":"Python","text":"<pre><code>widget.styles.width = 10\nwidget.styles.width = \"50%\nwidget.styles.width = \"auto\"\n</code></pre>"},{"location":"styles/width/#see-also","title":"See also","text":"<ul> <li><code>max-width</code> and <code>min-width</code> to limit the width of a widget.</li> <li><code>height</code> to set the height of a widget.</li> </ul>"},{"location":"styles/grid/","title":"Grid","text":"<p>There are a number of styles relating to the Textual <code>grid</code> layout.</p> <p>For an in-depth look at the grid layout, visit the grid guide.</p> Property Description <code>column-span</code> Number of columns a cell spans. <code>grid-columns</code> Width of grid columns. <code>grid-gutter</code> Spacing between grid cells. <code>grid-rows</code> Height of grid rows. <code>grid-size</code> Number of columns and rows in the grid layout. <code>row-span</code> Number of rows a cell spans."},{"location":"styles/grid/#syntax","title":"Syntax","text":"<pre>\ncolumn-span: &lt;integer&gt;;\n\ngrid-columns: &lt;scalar&gt;+;\n\ngrid-gutter: &lt;scalar&gt; [&lt;scalar&gt;];\n\ngrid-rows: &lt;scalar&gt;+;\n\ngrid-size: &lt;integer&gt; [&lt;integer&gt;];\n\nrow-span: &lt;integer&gt;;\n</pre> <p>Visit each style's reference page to learn more about how the values are used.</p>"},{"location":"styles/grid/#example","title":"Example","text":"<p>The example below shows all the styles above in action. The <code>grid-size: 3 4;</code> declaration sets the grid to 3 columns and 4 rows. The first cell of the grid, tinted magenta, shows a cell spanning multiple rows and columns. The spacing between grid cells is defined by the <code>grid-gutter</code> style.</p> Outputgrid.pygrid.tcss <p> GridApp Grid\u00a0cell\u00a01Grid\u00a0cell\u00a02 row-span:\u00a03; column-span:\u00a02; Grid\u00a0cell\u00a03 Grid\u00a0cell\u00a04 Grid\u00a0cell\u00a05Grid\u00a0cell\u00a06Grid\u00a0cell\u00a07 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\n\nclass GridApp(App):\n    CSS_PATH = \"grid.tcss\"\n\n    def compose(self):\n        yield Static(\"Grid cell 1\\n\\nrow-span: 3;\\ncolumn-span: 2;\", id=\"static1\")\n        yield Static(\"Grid cell 2\", id=\"static2\")\n        yield Static(\"Grid cell 3\", id=\"static3\")\n        yield Static(\"Grid cell 4\", id=\"static4\")\n        yield Static(\"Grid cell 5\", id=\"static5\")\n        yield Static(\"Grid cell 6\", id=\"static6\")\n        yield Static(\"Grid cell 7\", id=\"static7\")\n\n\nif __name__ == \"__main__\":\n    app = GridApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3 4;\n    grid-rows: 1fr;\n    grid-columns: 1fr;\n    grid-gutter: 1;\n}\n\nStatic {\n    color: auto;\n    background: lightblue;\n    height: 100%;\n    padding: 1 2;\n}\n\n#static1 {\n    tint: magenta 40%;\n    row-span: 3;\n    column-span: 2;\n}\n</code></pre> <p>Warning</p> <p>The styles listed on this page will only work when the layout is <code>grid</code>.</p>"},{"location":"styles/grid/#see-also","title":"See also","text":"<ul> <li>The grid layout guide.</li> </ul>"},{"location":"styles/grid/column_span/","title":"Column-span","text":"<p>The <code>column-span</code> style specifies how many columns a widget will span in a grid layout.</p> <p>Note</p> <p>This style only affects widgets that are direct children of a widget with <code>layout: grid</code>.</p>"},{"location":"styles/grid/column_span/#syntax","title":"Syntax","text":"<pre>\ncolumn-span: &lt;integer&gt;;\n</pre> <p>The <code>column-span</code> style accepts a single non-negative <code>&lt;integer&gt;</code> that quantifies how many columns the given widget spans.</p>"},{"location":"styles/grid/column_span/#example","title":"Example","text":"<p>The example below shows a 4 by 4 grid where many placeholders span over several columns.</p> Outputcolumn_span.pycolumn_span.tcss <p> MyApp #p1 #p2#p3 #p4#p5 #p6#p7 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass MyApp(App):\n    CSS_PATH = \"column_span.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Placeholder(id=\"p1\"),\n            Placeholder(id=\"p2\"),\n            Placeholder(id=\"p3\"),\n            Placeholder(id=\"p4\"),\n            Placeholder(id=\"p5\"),\n            Placeholder(id=\"p6\"),\n            Placeholder(id=\"p7\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>#p1 {\n    column-span: 4;\n}\n#p2 {\n    column-span: 3;\n}\n#p3 {\n    column-span: 1;  /* Didn't need to be set explicitly. */\n}\n#p4 {\n    column-span: 2;\n}\n#p5 {\n    column-span: 2;\n}\n#p6 {\n    /* Default value is 1. */\n}\n#p7 {\n    column-span: 3;\n}\n\nGrid {\n    grid-size: 4 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/column_span/#css","title":"CSS","text":"<pre><code>column-span: 3;\n</code></pre>"},{"location":"styles/grid/column_span/#python","title":"Python","text":"<pre><code>widget.styles.column_span = 3\n</code></pre>"},{"location":"styles/grid/column_span/#see-also","title":"See also","text":"<ul> <li><code>row-span</code> to specify how many rows a widget spans.</li> </ul>"},{"location":"styles/grid/grid_columns/","title":"Grid-columns","text":"<p>The <code>grid-columns</code> style allows to define the width of the columns of the grid.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_columns/#syntax","title":"Syntax","text":"<pre>\ngrid-columns: &lt;scalar&gt;+;\n</pre> <p>The <code>grid-columns</code> style takes one or more <code>&lt;scalar&gt;</code> that specify the length of the columns of the grid.</p> <p>If there are more columns in the grid than scalars specified in <code>grid-columns</code>, they are reused cyclically. If the number of <code>&lt;scalar&gt;</code> is in excess, the excess is ignored.</p>"},{"location":"styles/grid/grid_columns/#example","title":"Example","text":"<p>The example below shows a grid with 10 labels laid out in a grid with 2 rows and 5 columns.</p> <p>We set <code>grid-columns: 1fr 16 2fr</code>. Because there are more rows than scalars in the style definition, the scalars will be reused:</p> <ul> <li>columns 1 and 4 have width <code>1fr</code>;</li> <li>columns 2 and 5 have width <code>16</code>; and</li> <li>column 3 has width <code>2fr</code>.</li> </ul> Outputgrid_columns.pygrid_columns.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u2502width\u00a0=\u00a016\u2502\u25022fr\u2502\u25021fr\u2502\u2502width\u00a0=\u00a016\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u2502width\u00a0=\u00a016\u2502\u25022fr\u2502\u25021fr\u2502\u2502width\u00a0=\u00a016\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_columns.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n            Label(\"2fr\"),\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n            Label(\"2fr\"),\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 5 2;\n    grid-columns: 1fr 16 2fr;\n}\n\nLabel {\n    border: round white;\n    content-align-horizontal: center;\n    width: 100%;\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/grid_columns/#css","title":"CSS","text":"<pre><code>/* Set all columns to have 50% width */\ngrid-columns: 50%;\n\n/* Every other column is twice as wide as the first one */\ngrid-columns: 1fr 2fr;\n</code></pre>"},{"location":"styles/grid/grid_columns/#python","title":"Python","text":"<pre><code>grid.styles.grid_columns = \"50%\"\ngrid.styles.grid_columns = \"1fr 2fr\"\n</code></pre>"},{"location":"styles/grid/grid_columns/#see-also","title":"See also","text":"<ul> <li><code>grid-rows</code> to specify the height of the grid rows.</li> </ul>"},{"location":"styles/grid/grid_gutter/","title":"Grid-gutter","text":"<p>The <code>grid-gutter</code> style sets the size of the gutter in the grid layout. That is, it sets the space between adjacent cells in the grid.</p> <p>Gutter is only applied between the edges of cells. No spacing is added between the edges of the cells and the edges of the container.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_gutter/#syntax","title":"Syntax","text":"<pre>\ngrid-gutter: &lt;integer&gt; [&lt;integer&gt;];\n</pre> <p>The <code>grid-gutter</code> style takes one or two <code>&lt;integer&gt;</code> that set the length of the gutter along the vertical and horizontal axes. If only one <code>&lt;integer&gt;</code> is supplied, it sets the vertical and horizontal gutters. If two are supplied, they set the vertical and horizontal gutters, respectively.</p>"},{"location":"styles/grid/grid_gutter/#example","title":"Example","text":"<p>The example below employs a common trick to apply visually consistent spacing around all grid cells.</p> Outputgrid_gutter.pygrid_gutter.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25021\u2502\u25022\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25023\u2502\u25024\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25025\u2502\u25026\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25027\u2502\u25028\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_gutter.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1\"),\n            Label(\"2\"),\n            Label(\"3\"),\n            Label(\"4\"),\n            Label(\"5\"),\n            Label(\"6\"),\n            Label(\"7\"),\n            Label(\"8\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2 4;\n    grid-gutter: 1 2;  /* (1)! */\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre> <ol> <li>We set the horizontal gutter to be double the vertical gutter because terminal cells are typically two times taller than they are wide. Thus, the result shows visually consistent spacing around grid cells.</li> </ol>"},{"location":"styles/grid/grid_gutter/#css","title":"CSS","text":"<pre><code>/* Set vertical and horizontal gutters to be the same */\ngrid-gutter: 5;\n\n/* Set vertical and horizontal gutters separately */\ngrid-gutter: 1 2;\n</code></pre>"},{"location":"styles/grid/grid_gutter/#python","title":"Python","text":"<p>Vertical and horizontal gutters correspond to different Python properties, so they must be set separately:</p> <pre><code>widget.styles.grid_gutter_vertical = \"1\"\nwidget.styles.grid_gutter_horizontal = \"2\"\n</code></pre>"},{"location":"styles/grid/grid_rows/","title":"Grid-rows","text":"<p>The <code>grid-rows</code> style allows to define the height of the rows of the grid.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_rows/#syntax","title":"Syntax","text":"<pre>\ngrid-rows: &lt;scalar&gt;+;\n</pre> <p>The <code>grid-rows</code> style takes one or more <code>&lt;scalar&gt;</code> that specify the length of the rows of the grid.</p> <p>If there are more rows in the grid than scalars specified in <code>grid-rows</code>, they are reused cyclically. If the number of <code>&lt;scalar&gt;</code> is in excess, the excess is ignored.</p>"},{"location":"styles/grid/grid_rows/#example","title":"Example","text":"<p>The example below shows a grid with 10 labels laid out in a grid with 5 rows and 2 columns.</p> <p>We set <code>grid-rows: 1fr 6 25%</code>. Because there are more rows than scalars in the style definition, the scalars will be reused:</p> <ul> <li>rows 1 and 4 have height <code>1fr</code>;</li> <li>rows 2 and 5 have height <code>6</code>; and</li> <li>row 3 has height <code>25%</code>.</li> </ul> Outputgrid_rows.pygrid_rows.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u25021fr\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502height\u00a0=\u00a06\u2502\u2502height\u00a0=\u00a06\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u250225%\u2502\u250225%\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u25021fr\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502height\u00a0=\u00a06\u2502\u2502height\u00a0=\u00a06\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_rows.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1fr\"),\n            Label(\"1fr\"),\n            Label(\"height = 6\"),\n            Label(\"height = 6\"),\n            Label(\"25%\"),\n            Label(\"25%\"),\n            Label(\"1fr\"),\n            Label(\"1fr\"),\n            Label(\"height = 6\"),\n            Label(\"height = 6\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2 5;\n    grid-rows: 1fr 6 25%;\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/grid_rows/#css","title":"CSS","text":"<pre><code>/* Set all rows to have 50% height */\ngrid-rows: 50%;\n\n/* Every other row is twice as tall as the first one */\ngrid-rows: 1fr 2fr;\n</code></pre>"},{"location":"styles/grid/grid_rows/#python","title":"Python","text":"<pre><code>grid.styles.grid_rows = \"50%\"\ngrid.styles.grid_rows = \"1fr 2fr\"\n</code></pre>"},{"location":"styles/grid/grid_rows/#see-also","title":"See also","text":"<ul> <li><code>grid-columns</code> to specify the width of the grid columns.</li> </ul>"},{"location":"styles/grid/grid_size/","title":"Grid-size","text":"<p>The <code>grid-size</code> style sets the number of columns and rows in a grid layout.</p> <p>The number of rows can be left unspecified and it will be computed automatically.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_size/#syntax","title":"Syntax","text":"<pre>\ngrid-size: &lt;integer&gt; [&lt;integer&gt;];\n</pre> <p>The <code>grid-size</code> style takes one or two non-negative <code>&lt;integer&gt;</code>. The first defines how many columns there are in the grid. If present, the second one sets the number of rows \u2013 regardless of the number of children of the grid \u2013, otherwise the number of rows is computed automatically.</p>"},{"location":"styles/grid/grid_size/#examples","title":"Examples","text":""},{"location":"styles/grid/grid_size/#columns-and-rows","title":"Columns and rows","text":"<p>In the first example, we create a grid with 2 columns and 5 rows, although we do not have enough labels to fill in the whole grid:</p> Outputgrid_size_both.pygrid_size_both.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25021\u2502\u25022\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25023\u2502\u25024\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502 \u25025\u2502 \u2502\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_size_both.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1\"),\n            Label(\"2\"),\n            Label(\"3\"),\n            Label(\"4\"),\n            Label(\"5\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2 4;  /* (1)! */\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre> <ol> <li>Create a grid with 2 columns and 4 rows.</li> </ol>"},{"location":"styles/grid/grid_size/#columns-only","title":"Columns only","text":"<p>In the second example, we create a grid with 2 columns and however many rows are needed to display all of the grid children:</p> Outputgrid_size_columns.pygrid_size_columns.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u25021\u2502\u25022\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u25023\u2502\u25024\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502 \u2502\u2502 \u25025\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_size_columns.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1\"),\n            Label(\"2\"),\n            Label(\"3\"),\n            Label(\"4\"),\n            Label(\"5\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2;  /* (1)! */\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre> <ol> <li>Create a grid with 2 columns and however many rows.</li> </ol>"},{"location":"styles/grid/grid_size/#css","title":"CSS","text":"<pre><code>/* Grid with 3 columns and 5 rows */\ngrid-size: 3 5;\n\n/* Grid with 4 columns and as many rows as needed */\ngrid-size: 4;\n</code></pre>"},{"location":"styles/grid/grid_size/#python","title":"Python","text":"<p>To programmatically change the grid size, the number of rows and columns must be specified separately:</p> <pre><code>widget.styles.grid_size_rows = 3\nwidget.styles.grid_size_columns = 6\n</code></pre>"},{"location":"styles/grid/row_span/","title":"Row-span","text":"<p>The <code>row-span</code> style specifies how many rows a widget will span in a grid layout.</p> <p>Note</p> <p>This style only affects widgets that are direct children of a widget with <code>layout: grid</code>.</p>"},{"location":"styles/grid/row_span/#syntax","title":"Syntax","text":"<pre>\nrow-span: &lt;integer&gt;;\n</pre> <p>The <code>row-span</code> style accepts a single non-negative <code>&lt;integer&gt;</code> that quantifies how many rows the given widget spans.</p>"},{"location":"styles/grid/row_span/#example","title":"Example","text":"<p>The example below shows a 4 by 4 grid where many placeholders span over several rows.</p> <p>Notice that grid cells are filled from left to right, top to bottom. After placing the placeholders <code>#p1</code>, <code>#p2</code>, <code>#p3</code>, and <code>#p4</code>, the next available cell is in the second row, fourth column, which is where the top of <code>#p5</code> is.</p> Outputrow_span.pyrow_span.tcss <p> MyApp #p4 #p3 #p2 #p1 #p5 #p6 #p7 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass MyApp(App):\n    CSS_PATH = \"row_span.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Placeholder(id=\"p1\"),\n            Placeholder(id=\"p2\"),\n            Placeholder(id=\"p3\"),\n            Placeholder(id=\"p4\"),\n            Placeholder(id=\"p5\"),\n            Placeholder(id=\"p6\"),\n            Placeholder(id=\"p7\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>#p1 {\n    row-span: 4;\n}\n#p2 {\n    row-span: 3;\n}\n#p3 {\n    row-span: 2;\n}\n#p4 {\n    row-span: 1;  /* Didn't need to be set explicitly. */\n}\n#p5 {\n    row-span: 3;\n}\n#p6 {\n    row-span: 2;\n}\n#p7 {\n    /* Default value is 1. */\n}\n\nGrid {\n    grid-size: 4 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/row_span/#css","title":"CSS","text":"<pre><code>row-span: 3\n</code></pre>"},{"location":"styles/grid/row_span/#python","title":"Python","text":"<pre><code>widget.styles.row_span = 3\n</code></pre>"},{"location":"styles/grid/row_span/#see-also","title":"See also","text":"<ul> <li><code>column-span</code> to specify how many columns a widget spans.</li> </ul>"},{"location":"styles/links/","title":"Links","text":"<p>Textual supports the concept of inline \"links\" embedded in text which trigger an action when pressed. There are a number of styles which influence the appearance of these links within a widget.</p> <p>Note</p> <p>These CSS rules only target Textual action links. Internet hyperlinks are not affected by these styles.</p> Property Description <code>link-background</code> The background color of the link text. <code>link-background-hover</code> The background color of the link text when the cursor is over it. <code>link-color</code> The color of the link text. <code>link-color-hover</code> The color of the link text when the cursor is over it. <code>link-style</code> The style of the link text (e.g. underline). <code>link-style-hover</code> The style of the link text when the cursor is over it."},{"location":"styles/links/#syntax","title":"Syntax","text":"<pre>\nlink-background: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-color: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-style: &lt;text-style&gt;;\n\nlink-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-style-hover: &lt;text-style&gt;;\n</pre> <p>Visit each style's reference page to learn more about how the values are used.</p>"},{"location":"styles/links/#example","title":"Example","text":"<p>In the example below, the first label illustrates default link styling. The second label uses CSS to customize the link color, background, and style.</p> Outputlinks.pylinks.tcss <p> LinksApp Here\u00a0is\u00a0a\u00a0link\u00a0which\u00a0you\u00a0can\u00a0click! Here\u00a0is\u00a0a\u00a0link\u00a0which\u00a0you\u00a0can\u00a0click! </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nHere is a [@click='app.bell']link[/] which you can click!\n\"\"\"\n\n\nclass LinksApp(App):\n    CSS_PATH = \"links.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(TEXT)\n        yield Static(TEXT, id=\"custom\")\n\n\nif __name__ == \"__main__\":\n    app = LinksApp()\n    app.run()\n</code></pre> <pre><code>#custom {\n    link-color: black 90%;\n    link-background: dodgerblue;\n    link-style: bold italic underline;\n}\n</code></pre>"},{"location":"styles/links/#additional-notes","title":"Additional Notes","text":"<ul> <li>Inline links are not widgets, and thus cannot be focused.</li> </ul>"},{"location":"styles/links/#see-also","title":"See Also","text":"<ul> <li>An introduction to links in the Actions guide.</li> </ul>"},{"location":"styles/links/link_background/","title":"Link-background","text":"<p>The <code>link-background</code> style sets the background color of the link.</p> <p>Note</p> <p><code>link-background</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_background/#syntax","title":"Syntax","text":"<pre>\nlink-background: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-background</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of text enclosed in Textual action links.</p>"},{"location":"styles/links/link_background/#example","title":"Example","text":"<p>The example below shows some links with their background color changed. It also shows that <code>link-background</code> does not affect hyperlinks.</p> Outputlink_background.pylink_background.tcss <p> LinkBackgroundApp Visit\u00a0the\u00a0Textualize\u00a0website.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 You\u00a0can\u00a0also\u00a0click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Exit\u00a0this\u00a0application. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkBackgroundApp(App):\n    CSS_PATH = \"link_background.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkBackgroundApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-background</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-background</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-background: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-background: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    link-background: $accent;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_background/#css","title":"CSS","text":"<pre><code>link-background: red 70%;\nlink-background: $accent;\n</code></pre>"},{"location":"styles/links/link_background/#python","title":"Python","text":"<pre><code>widget.styles.link_background = \"red 70%\"\nwidget.styles.link_background = \"$accent\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_background = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_background/#see-also","title":"See also","text":"<ul> <li><code>link-color</code> to set the color of link text.</li> <li><code>link-background-hover</code> to set the background color of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_background_hover/","title":"Link-background-hover","text":"<p>The <code>link-background-hover</code> style sets the background color of the link when the mouse cursor is over the link.</p> <p>Note</p> <p><code>link-background-hover</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_background_hover/#syntax","title":"Syntax","text":"<pre>\nlink-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-background-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.</p>"},{"location":"styles/links/link_background_hover/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-background-hover</code> set to <code>$accent</code>.</p>"},{"location":"styles/links/link_background_hover/#example","title":"Example","text":"<p>The example below shows some links that have their background color changed when the mouse moves over it and it shows that there is a default color for <code>link-background-hover</code>.</p> <p>It also shows that <code>link-background-hover</code> does not affect hyperlinks.</p> Outputlink_background_hover.pylink_background_hover.tcss <p></p> <p>Note</p> <p>The GIF has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/link_background_hover.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkHoverBackgroundApp(App):\n    CSS_PATH = \"link_background_hover.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkHoverBackgroundApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-background-hover</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-background-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background-hover</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-background-hover: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-background-hover: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    /* Empty to show the default hover background */ /* (2)! */\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> <li>The default behavior for links on hover is to change to a different background color, so we don't need to change anything if all we want is to add emphasis to the link under the mouse.</li> </ol>"},{"location":"styles/links/link_background_hover/#css","title":"CSS","text":"<pre><code>link-background-hover: red 70%;\nlink-background-hover: $accent;\n</code></pre>"},{"location":"styles/links/link_background_hover/#python","title":"Python","text":"<pre><code>widget.styles.link_background_hover = \"red 70%\"\nwidget.styles.link_background_hover = \"$accent\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_background_hover = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_background_hover/#see-also","title":"See also","text":"<ul> <li><code>link-background</code> to set the background color of link text.</li> <li><code>link-color-hover</code> to set the color of link text when the mouse pointer is over it.</li> <li><code>link-style-hover</code> to set the style of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_color/","title":"Link-color","text":"<p>The <code>link-color</code> style sets the color of the link text.</p> <p>Note</p> <p><code>link-color</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_color/#syntax","title":"Syntax","text":"<pre>\nlink-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-color</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of text enclosed in Textual action links.</p>"},{"location":"styles/links/link_color/#example","title":"Example","text":"<p>The example below shows some links with their color changed. It also shows that <code>link-color</code> does not affect hyperlinks.</p> Outputlink_color.pylink_color.tcss <p> LinkColorApp Visit\u00a0the\u00a0Textualize\u00a0website.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 You\u00a0can\u00a0also\u00a0click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Exit\u00a0this\u00a0application. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkColorApp(App):\n    CSS_PATH = \"link_color.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkColorApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-color</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-color</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-color: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-color: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    link-color: $accent;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_color/#css","title":"CSS","text":"<pre><code>link-color: red 70%;\nlink-color: $accent;\n</code></pre>"},{"location":"styles/links/link_color/#python","title":"Python","text":"<pre><code>widget.styles.link_color = \"red 70%\"\nwidget.styles.link_color = \"$accent\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_color = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_color/#see-also","title":"See also","text":"<ul> <li><code>link-background</code> to set the background color of link text.</li> <li><code>link-color-hover</code> to set the color of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_color_hover/","title":"Link-color-hover","text":"<p>The <code>link-color-hover</code> style sets the color of the link text when the mouse cursor is over the link.</p> <p>Note</p> <p><code>link-color-hover</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_color_hover/#syntax","title":"Syntax","text":"<pre>\nlink-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-color-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.</p>"},{"location":"styles/links/link_color_hover/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-color-hover</code> set to <code>white</code>.</p>"},{"location":"styles/links/link_color_hover/#example","title":"Example","text":"<p>The example below shows some links that have their color changed when the mouse moves over it. It also shows that <code>link-color-hover</code> does not affect hyperlinks.</p> Outputlink_color_hover.pylink_color_hover.tcss <p></p> <p>Note</p> <p>The background color also changes when the mouse moves over the links because that is the default behavior. That can be customised by setting <code>link-background-hover</code> but we haven't done so in this example.</p> <p>Note</p> <p>The GIF has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/link_color_hover.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkHoverColorApp(App):\n    CSS_PATH = \"link_color_hover.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkHoverColorApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-color-hover</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-color-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color-hover</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-color-hover: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-color-hover: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    link-color-hover: black;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_color_hover/#css","title":"CSS","text":"<pre><code>link-color-hover: red 70%;\nlink-color-hover: black;\n</code></pre>"},{"location":"styles/links/link_color_hover/#python","title":"Python","text":"<pre><code>widget.styles.link_color_hover = \"red 70%\"\nwidget.styles.link_color_hover = \"black\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_color_hover = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_color_hover/#see-also","title":"See also","text":"<ul> <li><code>link-color</code> to set the color of link text.</li> <li><code>link-background-hover</code> to set the background color of link text when the mouse pointer is over it.</li> <li><code>link-style-hover</code> to set the style of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_style/","title":"Link-style","text":"<p>The <code>link-style</code> style sets the text style for the link text.</p> <p>Note</p> <p><code>link-style</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_style/#syntax","title":"Syntax","text":"<pre>\nlink-style: &lt;text-style&gt;;\n</pre> <p><code>link-style</code> will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.</p>"},{"location":"styles/links/link_style/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-style</code> set to <code>underline</code>.</p>"},{"location":"styles/links/link_style/#example","title":"Example","text":"<p>The example below shows some links with different styles applied to their text. It also shows that <code>link-style</code> does not affect hyperlinks.</p> Outputlink_style.pylink_style.tcss <p> LinkStyleApp Visit\u00a0the\u00a0Textualize\u00a0website.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 You\u00a0can\u00a0also\u00a0click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Exit\u00a0this\u00a0application. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkStyleApp(App):\n    CSS_PATH = \"link_style.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkStyleApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-style</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-style</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-style: bold italic;  /* (1)! */\n}\n\n#lbl3 {\n    link-style: reverse strike;\n}\n\n#lbl4 {\n    link-style: bold;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_style/#css","title":"CSS","text":"<pre><code>link-style: bold;\nlink-style: bold italic reverse;\n</code></pre>"},{"location":"styles/links/link_style/#python","title":"Python","text":"<pre><code>widget.styles.link_style = \"bold\"\nwidget.styles.link_style = \"bold italic reverse\"\n</code></pre>"},{"location":"styles/links/link_style/#see-also","title":"See also","text":"<ul> <li><code>link-style-hover</code> to set the style of link text when the mouse pointer is over it.</li> <li><code>text-style</code> to set the style of text in a widget.</li> </ul>"},{"location":"styles/links/link_style_hover/","title":"Link-style-hover","text":"<p>The <code>link-style-hover</code> style sets the text style for the link text when the mouse cursor is over the link.</p> <p>Note</p> <p><code>link-style-hover</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_style_hover/#syntax","title":"Syntax","text":"<pre>\nlink-style-hover: &lt;text-style&gt;;\n</pre> <p><code>link-style-hover</code> applies its <code>&lt;text-style&gt;</code> to the text of Textual action links when the mouse pointer is over them.</p>"},{"location":"styles/links/link_style_hover/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-style-hover</code> set to <code>bold</code>.</p>"},{"location":"styles/links/link_style_hover/#example","title":"Example","text":"<p>The example below shows some links that have their color changed when the mouse moves over it. It also shows that <code>link-style-hover</code> does not affect hyperlinks.</p> Outputlink_style_hover.pylink_style_hover.tcss <p></p> <p>Note</p> <p>The background color also changes when the mouse moves over the links because that is the default behavior. That can be customised by setting <code>link-background-hover</code> but we haven't done so in this example.</p> <p>Note</p> <p>The GIF has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/link_style_hover.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkHoverStyleApp(App):\n    CSS_PATH = \"link_style_hover.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkHoverStyleApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-style-hover</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-style-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style-hover</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-style-hover: bold italic;  /* (1)! */\n}\n\n#lbl3 {\n    link-style-hover: reverse strike;\n}\n\n#lbl4 {\n    link-style-hover: bold;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> <li>The default behavior for links on hover is to change to a different text style, so we don't need to change anything if all we want is to add emphasis to the link under the mouse.</li> </ol>"},{"location":"styles/links/link_style_hover/#css","title":"CSS","text":"<pre><code>link-style-hover: bold;\nlink-style-hover: bold italic reverse;\n</code></pre>"},{"location":"styles/links/link_style_hover/#python","title":"Python","text":"<pre><code>widget.styles.link_style_hover = \"bold\"\nwidget.styles.link_style_hover = \"bold italic reverse\"\n</code></pre>"},{"location":"styles/links/link_style_hover/#see-also","title":"See also","text":"<ul> <li><code>link-background-hover</code> to set the background color of link text when the mouse pointer is over it.</li> <li><code>link-color-hover</code> to set the color of link text when the mouse pointer is over it.</li> <li><code>link-style</code> to set the style of link text.</li> <li><code>text-style</code> to set the style of text in a widget.</li> </ul>"},{"location":"styles/scrollbar_colors/","title":"Scrollbar colors","text":"<p>There are a number of styles to set the colors used in Textual scrollbars. You won't typically need to do this, as the default themes have carefully chosen colors, but you can if you want to.</p> Style Applies to <code>scrollbar-background</code> Scrollbar background. <code>scrollbar-background-active</code> Scrollbar background when the thumb is being dragged. <code>scrollbar-background-hover</code> Scrollbar background when the mouse is hovering over it. <code>scrollbar-color</code> Scrollbar \"thumb\" (movable part). <code>scrollbar-color-active</code> Scrollbar thumb when it is active (being dragged). <code>scrollbar-color-hover</code> Scrollbar thumb when the mouse is hovering over it. <code>scrollbar-corner-color</code> The gap between the horizontal and vertical scrollbars."},{"location":"styles/scrollbar_colors/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-background-active: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-color: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-color-active: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-corner-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p>Visit each style's reference page to learn more about how the values are used.</p>"},{"location":"styles/scrollbar_colors/#example","title":"Example","text":"<p>This example shows two panels that contain oversized text. The right panel sets <code>scrollbar-background</code>, <code>scrollbar-color</code>, and <code>scrollbar-corner-color</code>, and the left panel shows the default colors for comparison.</p> Outputscrollbars.pyscrollbars.tcss <p> ScrollbarApp I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0t I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0tI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0t And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turnAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn see\u00a0its\u00a0path.see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0 will\u00a0remain.will\u00a0remain. I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0t I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0tI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0t And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turnAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn see\u00a0its\u00a0path.\u2583\u2583see\u00a0its\u00a0path.\u2583\u2583 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0 will\u00a0remain.will\u00a0remain. I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0t I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0tI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0t \u258d\u258d </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, ScrollableContainer\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarApp(App):\n    CSS_PATH = \"scrollbars.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            ScrollableContainer(Label(TEXT * 10)),\n            ScrollableContainer(Label(TEXT * 10), classes=\"right\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    width: 150%;\n    height: 150%;\n}\n\n.right {\n    scrollbar-background: red;\n    scrollbar-color: green;\n    scrollbar-corner-color: blue;\n}\n\nHorizontal &gt; ScrollableContainer {\n    width: 50%;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/","title":"Scrollbar-background","text":"<p>The <code>scrollbar-background</code> style sets the background color of the scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-background</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of a scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/#css","title":"CSS","text":"<pre><code>scrollbar-backround: blue;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_background = \"blue\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background-active</code> to set the scrollbar background color when the scrollbar is being dragged.</li> <li><code>scrollbar-background-hover</code> to set the scrollbar background color when the mouse pointer is over it.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> <li><code>scrollbar-corner-color</code> to set the color of the corner where horizontal and vertical scrollbars meet.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/","title":"Scrollbar-background-active","text":"<p>The <code>scrollbar-background-active</code> style sets the background color of the scrollbar when the thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background-active: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-background-active</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of a scrollbar when its thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#css","title":"CSS","text":"<pre><code>scrollbar-backround-active: red;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_background_active = \"red\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-background-hover</code> to set the scrollbar background color when the mouse pointer is over it.</li> <li><code>scrollbar-color-active</code> to set the scrollbar color when the scrollbar is being dragged.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/","title":"Scrollbar-background-hover","text":"<p>The <code>scrollbar-background-hover</code> style sets the background color of the scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-background-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of a scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#css","title":"CSS","text":"<pre><code>scrollbar-background-hover: purple;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_background_hover = \"purple\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#see-also","title":"See also","text":""},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#see-also_1","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-background-active</code> to set the scrollbar background color when the scrollbar is being dragged.</li> <li><code>scrollbar-color-hover</code> to set the scrollbar color when the mouse pointer is over it.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_color/","title":"Scrollbar-color","text":"<p>The <code>scrollbar-color</code> style sets the color of the scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color/#syntax","title":"Syntax","text":"<pre>\nscrollbar-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-color</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of a scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color/#css","title":"CSS","text":"<pre><code>scrollbar-color: cyan;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_color = \"cyan\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-color-active</code> to set the scrollbar color when the scrollbar is being dragged.</li> <li><code>scrollbar-color-hover</code> to set the scrollbar color when the mouse pointer is over it.</li> <li><code>scrollbar-corner-color</code> to set the color of the corner where horizontal and vertical scrollbars meet.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/","title":"Scrollbar-color-active","text":"<p>The <code>scrollbar-color-active</code> style sets the color of the scrollbar when the thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#syntax","title":"Syntax","text":"<pre>\nscrollbar-color-active: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-color-active</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of a scrollbar when its thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#css","title":"CSS","text":"<pre><code>scrollbar-color-active: yellow;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_color_active = \"yellow\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background-active</code> to set the scrollbar background color when the scrollbar is being dragged.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> <li><code>scrollbar-color-hover</code> to set the scrollbar color when the mouse pointer is over it.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/","title":"Scrollbar-color-hover","text":"<p>The <code>scrollbar-color-hover</code> style sets the color of the scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#syntax","title":"Syntax","text":"<pre>\nscrollbar-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-color-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of a scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#css","title":"CSS","text":"<pre><code>scrollbar-color-hover: pink;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_color_hover = \"pink\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background-hover</code> to set the scrollbar background color when the mouse pointer is over it.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> <li><code>scrollbar-color-active</code> to set the scrollbar color when the scrollbar is being dragged.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/","title":"Scrollbar-corner-color","text":"<p>The <code>scrollbar-corner-color</code> style sets the color of the gap between the horizontal and vertical scrollbars.</p>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#syntax","title":"Syntax","text":"<pre>\nscrollbar-corner-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-corner-color</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of the gap between the horizontal and vertical scrollbars of a widget.</p>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#example","title":"Example","text":"<p>The example below sets the scrollbar corner (bottom-right corner of the screen) to white.</p> Outputscrollbar_corner_color.pyscrollbar_corner_color.tcss <p> ScrollbarCornerColorApp I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarCornerColorApp(App):\n    CSS_PATH = \"scrollbar_corner_color.tcss\"\n\n    def compose(self):\n        yield Label(TEXT.replace(\"\\n\", \" \") + \"\\n\" + TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarCornerColorApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    overflow: auto auto;\n    scrollbar-corner-color: white;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#css","title":"CSS","text":"<pre><code>scrollbar-corner-color: white;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_corner_color = \"white\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> </ul>"},{"location":"widgets/","title":"Widgets","text":"<p>A reference to the builtin widgets.</p> <p>See the links to the left of the page, or in the hamburger menu (three horizontal bars, top left).</p>"},{"location":"widgets/button/","title":"Button","text":"<p>A simple button widget which can be pressed using a mouse click or by pressing Enter when it has focus.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/button/#example","title":"Example","text":"<p>The example below shows each button variant, and its disabled equivalent. Clicking any of the non-disabled buttons in the example app below will result in the app exiting and the details of the selected button being printed to the console.</p> Outputbutton.pybutton.tcss <p> ButtonsApp Standard\u00a0ButtonsDisabled\u00a0Buttons \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Default\u00a0\u00a0Default\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Primary!\u00a0\u00a0Primary!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Success!\u00a0\u00a0Success!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Warning!\u00a0\u00a0Warning!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Error!\u00a0\u00a0Error!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Button, Static\n\n\nclass ButtonsApp(App[str]):\n    CSS_PATH = \"button.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            VerticalScroll(\n                Static(\"Standard Buttons\", classes=\"header\"),\n                Button(\"Default\"),\n                Button(\"Primary!\", variant=\"primary\"),\n                Button.success(\"Success!\"),\n                Button.warning(\"Warning!\"),\n                Button.error(\"Error!\"),\n            ),\n            VerticalScroll(\n                Static(\"Disabled Buttons\", classes=\"header\"),\n                Button(\"Default\", disabled=True),\n                Button(\"Primary!\", variant=\"primary\", disabled=True),\n                Button.success(\"Success!\", disabled=True),\n                Button.warning(\"Warning!\", disabled=True),\n                Button.error(\"Error!\", disabled=True),\n            ),\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(str(event.button))\n\n\nif __name__ == \"__main__\":\n    app = ButtonsApp()\n    print(app.run())\n</code></pre> <pre><code>Button {\n    margin: 1 2;\n}\n\nHorizontal &gt; VerticalScroll {\n    width: 24;\n}\n\n.header {\n    margin: 1 0 0 2;\n    text-style: bold;\n}\n</code></pre>"},{"location":"widgets/button/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>label</code> <code>str</code> <code>\"\"</code> The text that appears inside the button. <code>variant</code> <code>ButtonVariant</code> <code>\"default\"</code> Semantic styling variant. One of <code>default</code>, <code>primary</code>, <code>success</code>, <code>warning</code>, <code>error</code>. <code>disabled</code> <code>bool</code> <code>False</code> Whether the button is disabled or not. Disabled buttons cannot be focused or clicked, and are styled in a way that suggests this."},{"location":"widgets/button/#messages","title":"Messages","text":"<ul> <li>Button.Pressed</li> </ul>"},{"location":"widgets/button/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/button/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/button/#additional-notes","title":"Additional Notes","text":"<ul> <li>The spacing between the text and the edges of a button are not due to padding. The default styling for a <code>Button</code> has the <code>height</code> set to 3 lines and a <code>min-width</code> of 16 columns. To create a button with zero visible padding, you will need to change these values and also remove the border with <code>border: none;</code>.</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A simple clickable button.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>ButtonVariant</code> <p>The variant of the button.</p> <code>'default'</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/button/#textual.widgets.Button(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(variant)","title":"<code>variant</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.active_effect_duration","title":"active_effect_duration  <code>instance-attribute</code>","text":"<pre><code>active_effect_duration = 0.2\n</code></pre> <p>Amount of time in seconds the button 'press' animation lasts.</p>"},{"location":"widgets/button/#textual.widgets.Button.label","title":"label  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>label = label\n</code></pre> <p>The text label that appears within the button.</p>"},{"location":"widgets/button/#textual.widgets.Button.variant","title":"variant  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>variant = variant\n</code></pre> <p>The variant name for the button.</p>"},{"location":"widgets/button/#textual.widgets.Button.Pressed","title":"Pressed","text":"<pre><code>Pressed(button)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Event sent when a <code>Button</code> is pressed.</p> <p>Can be handled using <code>on_button_pressed</code> in a subclass of <code>Button</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/button/#textual.widgets.Button.Pressed.button","title":"button  <code>instance-attribute</code>","text":"<pre><code>button = button\n</code></pre> <p>The button that was pressed.</p>"},{"location":"widgets/button/#textual.widgets.Button.Pressed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for Pressed.button.</p> <p>This will be the same value as Pressed.button.</p>"},{"location":"widgets/button/#textual.widgets.Button.action_press","title":"action_press","text":"<pre><code>action_press()\n</code></pre> <p>Activate a press of the button.</p>"},{"location":"widgets/button/#textual.widgets.Button.error","title":"error  <code>classmethod</code>","text":"<pre><code>error(\n    label=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Utility constructor for creating an error Button variant.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Button</code> <p>A <code>Button</code> widget of the 'error' variant.</p>"},{"location":"widgets/button/#textual.widgets.Button.error(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.press","title":"press","text":"<pre><code>press()\n</code></pre> <p>Animate the button and send the Pressed message.</p> <p>Can be used to simulate the button being pressed by a user.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The button instance.</p>"},{"location":"widgets/button/#textual.widgets.Button.success","title":"success  <code>classmethod</code>","text":"<pre><code>success(\n    label=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Utility constructor for creating a success Button variant.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Button</code> <p>A <code>Button</code> widget of the 'success' variant.</p>"},{"location":"widgets/button/#textual.widgets.Button.success(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.validate_label","title":"validate_label","text":"<pre><code>validate_label(label)\n</code></pre> <p>Parse markup for self.label</p>"},{"location":"widgets/button/#textual.widgets.Button.warning","title":"warning  <code>classmethod</code>","text":"<pre><code>warning(\n    label=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Utility constructor for creating a warning Button variant.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Button</code> <p>A <code>Button</code> widget of the 'warning' variant.</p>"},{"location":"widgets/button/#textual.widgets.Button.warning(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.button","title":"textual.widgets.button","text":""},{"location":"widgets/button/#textual.widgets.button.ButtonVariant","title":"ButtonVariant  <code>module-attribute</code>","text":"<pre><code>ButtonVariant = Literal[\n    \"default\", \"primary\", \"success\", \"warning\", \"error\"\n]\n</code></pre> <p>The names of the valid button variants.</p> <p>These are the variants that can be used with a <code>Button</code>.</p>"},{"location":"widgets/checkbox/","title":"Checkbox","text":"<p>Added in version 0.13.0</p> <p>A simple checkbox widget which stores a boolean value.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/checkbox/#example","title":"Example","text":"<p>The example below shows check boxes in various states.</p> Outputcheckbox.pycheckbox.tcss <p> CheckboxApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Arrakis\u00a0\ud83d\ude13\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Caladan\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Chusuk\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGiedi\u00a0Prime\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGinaz\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Grumman\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2583\u2583 \u258a\u2590X\u258cKaitain\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Checkbox\n\n\nclass CheckboxApp(App[None]):\n    CSS_PATH = \"checkbox.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with VerticalScroll():\n            yield Checkbox(\"Arrakis :sweat:\")\n            yield Checkbox(\"Caladan\")\n            yield Checkbox(\"Chusuk\")\n            yield Checkbox(\"[b]Giedi Prime[/b]\")\n            yield Checkbox(\"[magenta]Ginaz[/]\")\n            yield Checkbox(\"Grumman\", True)\n            yield Checkbox(\"Kaitain\", id=\"initial_focus\")\n            yield Checkbox(\"Novebruns\", True)\n\n    def on_mount(self):\n        self.query_one(\"#initial_focus\", Checkbox).focus()\n\n\nif __name__ == \"__main__\":\n    CheckboxApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nVerticalScroll {\n    width: auto;\n    height: auto;\n    background: $boost;\n    padding: 2;\n}\n</code></pre>"},{"location":"widgets/checkbox/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>value</code> <code>bool</code> <code>False</code> The value of the checkbox."},{"location":"widgets/checkbox/#messages","title":"Messages","text":"<ul> <li>Checkbox.Changed</li> </ul>"},{"location":"widgets/checkbox/#bindings","title":"Bindings","text":"<p>The checkbox widget defines the following bindings:</p> Key(s) Description enter, space Toggle the value."},{"location":"widgets/checkbox/#component-classes","title":"Component Classes","text":"<p>The checkbox widget inherits the following component classes:</p> Class Description <code>toggle--button</code> Targets the toggle button itself. <code>toggle--label</code> Targets the text label of the toggle button. <p>               Bases: <code>ToggleButton</code></p> <p>A check box widget that represents a boolean value.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label for the toggle.</p> <code>''</code> <code>bool</code> <p>The initial value of the toggle.</p> <code>False</code> <code>bool</code> <p>Should the button come before the label, or after?</p> <code>True</code> <code>str | None</code> <p>The name of the toggle.</p> <code>None</code> <code>str | None</code> <p>The ID of the toggle in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the toggle.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>RenderableType | None = None,</p> <code>None</code>"},{"location":"widgets/checkbox/#textual.widgets.Checkbox(label)","title":"<code>label</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(value)","title":"<code>value</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(button_first)","title":"<code>button_first</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(name)","title":"<code>name</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(id)","title":"<code>id</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed","title":"Changed","text":"<pre><code>Changed(toggle_button, value)\n</code></pre> <p>               Bases: <code>Changed</code></p> <p>Posted when the value of the checkbox changes.</p> <p>This message can be handled using an <code>on_checkbox_changed</code> method.</p> <p>Parameters:</p> Name Type Description Default <code>ToggleButton</code> <p>The toggle button sending the message.</p> required <code>bool</code> <p>The value of the toggle button.</p> required"},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed(toggle_button)","title":"<code>toggle_button</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed(value)","title":"<code>value</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed.checkbox","title":"checkbox  <code>property</code>","text":"<pre><code>checkbox\n</code></pre> <p>The checkbox that was changed.</p>"},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for Changed.checkbox.</p>"},{"location":"widgets/collapsible/","title":"Collapsible","text":"<p>Added in version 0.37</p> <p>A container with a title that can be used to show (expand) or hide (collapse) content, either by clicking or focusing and pressing Enter.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/collapsible/#composing","title":"Composing","text":"<p>You can add content to a Collapsible widget either by passing in children to the constructor, or with a context manager (<code>with</code> statement).</p> <p>Here is an example of using the constructor to add content:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Collapsible(Label(\"Hello, world.\"))\n</code></pre> <p>Here's how the to use it with the context manager:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible():\n        yield Label(\"Hello, world.\")\n</code></pre> <p>The second form is generally preferred, but the end result is the same.</p>"},{"location":"widgets/collapsible/#title","title":"Title","text":"<p>The default title \"Toggle\" can be customized by setting the <code>title</code> parameter of the constructor:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible(title=\"An interesting story.\"):\n        yield Label(\"Interesting but verbose story.\")\n</code></pre>"},{"location":"widgets/collapsible/#initial-state","title":"Initial State","text":"<p>The initial state of the <code>Collapsible</code> widget can be customized via the <code>collapsed</code> parameter of the constructor:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible(title=\"Contents 1\", collapsed=False):\n        yield Label(\"Hello, world.\")\n\n    with Collapsible(title=\"Contents 2\", collapsed=True):  # Default.\n        yield Label(\"Hello, world.\")\n</code></pre>"},{"location":"widgets/collapsible/#collapseexpand-symbols","title":"Collapse/Expand Symbols","text":"<p>The symbols used to show the collapsed / expanded state can be customized by setting the parameters <code>collapsed_symbol</code> and <code>expanded_symbol</code>:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible(collapsed_symbol=\"&gt;&gt;&gt;\", expanded_symbol=\"v\"):\n        yield Label(\"Hello, world.\")\n</code></pre>"},{"location":"widgets/collapsible/#examples","title":"Examples","text":"<p>The following example contains three <code>Collapsible</code>s in different states.</p> All expandedAll collapsedMixedcollapsible.py <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Leto #\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides Head\u00a0of\u00a0House\u00a0Atreides.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Jessica Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Paul\u2586\u2586 \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p> <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Leto \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Jessica \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Paul \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p> <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Leto #\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides Head\u00a0of\u00a0House\u00a0Atreides.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Jessica Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Paul \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Collapsible, Footer, Label, Markdown\n\nLETO = \"\"\"\\\n# Duke Leto I Atreides\n\nHead of House Atreides.\"\"\"\n\nJESSICA = \"\"\"\n# Lady Jessica\n\nBene Gesserit and concubine of Leto, and mother of Paul and Alia.\n\"\"\"\n\nPAUL = \"\"\"\n# Paul Atreides\n\nSon of Leto and Jessica.\n\"\"\"\n\n\nclass CollapsibleApp(App[None]):\n    \"\"\"An example of collapsible container.\"\"\"\n\n    BINDINGS = [\n        (\"c\", \"collapse_or_expand(True)\", \"Collapse All\"),\n        (\"e\", \"collapse_or_expand(False)\", \"Expand All\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Compose app with collapsible containers.\"\"\"\n        yield Footer()\n        with Collapsible(collapsed=False, title=\"Leto\"):\n            yield Label(LETO)\n        yield Collapsible(Markdown(JESSICA), collapsed=False, title=\"Jessica\")\n        with Collapsible(collapsed=True, title=\"Paul\"):\n            yield Markdown(PAUL)\n\n    def action_collapse_or_expand(self, collapse: bool) -&gt; None:\n        for child in self.walk_children(Collapsible):\n            child.collapsed = collapse\n\n\nif __name__ == \"__main__\":\n    app = CollapsibleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/collapsible/#setting-initial-state","title":"Setting Initial State","text":"<p>The example below shows nested <code>Collapsible</code> widgets and how to set their initial state.</p> Outputcollapsible_nested.py <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Toggle \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Toggle </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Collapsible, Label\n\n\nclass CollapsibleApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        with Collapsible(collapsed=False):\n            with Collapsible():\n                yield Label(\"Hello, world.\")\n\n\nif __name__ == \"__main__\":\n    app = CollapsibleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/collapsible/#custom-symbols","title":"Custom Symbols","text":"<p>The following example shows <code>Collapsible</code> widgets with custom expand/collapse symbols.</p> Outputcollapsible_custom_symbol.py <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 &gt;&gt;&gt;\u00a0Togglev\u00a0Toggle Hello,\u00a0world.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Collapsible, Label\n\n\nclass CollapsibleApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            with Collapsible(\n                collapsed_symbol=\"&gt;&gt;&gt;\",\n                expanded_symbol=\"v\",\n            ):\n                yield Label(\"Hello, world.\")\n\n            with Collapsible(\n                collapsed_symbol=\"&gt;&gt;&gt;\",\n                expanded_symbol=\"v\",\n                collapsed=False,\n            ):\n                yield Label(\"Hello, world.\")\n\n\nif __name__ == \"__main__\":\n    app = CollapsibleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/collapsible/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>collapsed</code> <code>bool</code> <code>True</code> Controls the collapsed/expanded state of the widget. <code>title</code> <code>str</code> <code>\"Toggle\"</code> Title of the collapsed/expanded contents."},{"location":"widgets/collapsible/#messages","title":"Messages","text":"<ul> <li>Collapsible.Toggled</li> </ul>"},{"location":"widgets/collapsible/#bindings","title":"Bindings","text":"<p>The collapsible widget defines the following binding on its title:</p> Key(s) Description enter Toggle the collapsible."},{"location":"widgets/collapsible/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A collapsible container.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Contents that will be collapsed/expanded.</p> <code>()</code> <code>str</code> <p>Title of the collapsed/expanded contents.</p> <code>'Toggle'</code> <code>bool</code> <p>Default status of the contents.</p> <code>True</code> <code>str</code> <p>Collapsed symbol before the title.</p> <code>'\u25b6'</code> <code>str</code> <p>Expanded symbol before the title.</p> <code>'\u25bc'</code> <code>str | None</code> <p>The name of the collapsible.</p> <code>None</code> <code>str | None</code> <p>The ID of the collapsible in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the collapsible.</p> <code>None</code> <code>bool</code> <p>Whether the collapsible is disabled or not.</p> <code>False</code>"},{"location":"widgets/collapsible/#textual.widgets.Collapsible(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(title)","title":"<code>title</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(collapsed)","title":"<code>collapsed</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(collapsed_symbol)","title":"<code>collapsed_symbol</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(expanded_symbol)","title":"<code>expanded_symbol</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(name)","title":"<code>name</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(id)","title":"<code>id</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Collapsed","title":"Collapsed","text":"<pre><code>Collapsed(collapsible)\n</code></pre> <p>               Bases: <code>Toggled</code></p> <p>Event sent when the <code>Collapsible</code> widget is collapsed.</p> <p>Can be handled using <code>on_collapsible_collapsed</code> in a subclass of <code>Collapsible</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>Collapsible</code> <p>The <code>Collapsible</code> widget that was toggled.</p> required"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Collapsed(collapsible)","title":"<code>collapsible</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Expanded","title":"Expanded","text":"<pre><code>Expanded(collapsible)\n</code></pre> <p>               Bases: <code>Toggled</code></p> <p>Event sent when the <code>Collapsible</code> widget is expanded.</p> <p>Can be handled using <code>on_collapsible_expanded</code> in a subclass of <code>Collapsible</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>Collapsible</code> <p>The <code>Collapsible</code> widget that was toggled.</p> required"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Expanded(collapsible)","title":"<code>collapsible</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled","title":"Toggled","text":"<pre><code>Toggled(collapsible)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Parent class subclassed by <code>Collapsible</code> messages.</p> <p>Can be handled with <code>on(Collapsible.Toggled)</code> if you want to handle expansions and collapsed in the same way, or you can handle the specific events individually.</p> <p>Parameters:</p> Name Type Description Default <code>Collapsible</code> <p>The <code>Collapsible</code> widget that was toggled.</p> required"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled(collapsible)","title":"<code>collapsible</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled.collapsible","title":"collapsible  <code>instance-attribute</code>","text":"<pre><code>collapsible = collapsible\n</code></pre> <p>The collapsible that was toggled.</p>"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for Toggled.collapsible.</p>"},{"location":"widgets/content_switcher/","title":"ContentSwitcher","text":"<p>Added in version 0.14.0</p> <p>A widget for containing and switching display between multiple child widgets.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/content_switcher/#example","title":"Example","text":"<p>The example below uses a <code>ContentSwitcher</code> in combination with two <code>Button</code>s to create a simple tabbed view. Note how each <code>Button</code> has an ID set, and how each child of the <code>ContentSwitcher</code> has a corresponding ID; then a <code>Button.Clicked</code> handler is used to set <code>ContentSwitcher.current</code> to switch between the different views.</p> Outputcontent_switcher.pycontent_switcher.tcss <p> ContentSwitcherApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0DataTable\u00a0\u00a0Markdown\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u00a0Book\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Year\u00a0\u2502 \u2502\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01965\u00a0\u2502 \u2502\u00a0Dune\u00a0Messiah\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01969\u00a0\u2502 \u2502\u00a0Children\u00a0of\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01976\u00a0\u2502 \u2502\u00a0God\u00a0Emperor\u00a0of\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01981\u00a0\u2502 \u2502\u00a0Heretics\u00a0of\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01984\u00a0\u2502 \u2502\u00a0Chapterhouse:\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01985\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Button, ContentSwitcher, DataTable, Markdown\n\nMARKDOWN_EXAMPLE = \"\"\"# Three Flavours Cornetto\n\nThe Three Flavours Cornetto trilogy is an anthology series of British\ncomedic genre films directed by Edgar Wright.\n\n## Shaun of the Dead\n\n| Flavour | UK Release Date | Director |\n| -- | -- | -- |\n| Strawberry | 2004-04-09 | Edgar Wright |\n\n## Hot Fuzz\n\n| Flavour | UK Release Date | Director |\n| -- | -- | -- |\n| Classico | 2007-02-17 | Edgar Wright |\n\n## The World's End\n\n| Flavour | UK Release Date | Director |\n| -- | -- | -- |\n| Mint | 2013-07-19 | Edgar Wright |\n\"\"\"\n\n\nclass ContentSwitcherApp(App[None]):\n    CSS_PATH = \"content_switcher.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal(id=\"buttons\"):  # (1)!\n            yield Button(\"DataTable\", id=\"data-table\")  # (2)!\n            yield Button(\"Markdown\", id=\"markdown\")  # (3)!\n\n        with ContentSwitcher(initial=\"data-table\"):  # (4)!\n            yield DataTable(id=\"data-table\")\n            with VerticalScroll(id=\"markdown\"):\n                yield Markdown(MARKDOWN_EXAMPLE)\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.query_one(ContentSwitcher).current = event.button.id  # (5)!\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(\"Book\", \"Year\")\n        table.add_rows(\n            [\n                (title.ljust(35), year)\n                for title, year in (\n                    (\"Dune\", 1965),\n                    (\"Dune Messiah\", 1969),\n                    (\"Children of Dune\", 1976),\n                    (\"God Emperor of Dune\", 1981),\n                    (\"Heretics of Dune\", 1984),\n                    (\"Chapterhouse: Dune\", 1985),\n                )\n            ]\n        )\n\n\nif __name__ == \"__main__\":\n    ContentSwitcherApp().run()\n</code></pre> <ol> <li>A <code>Horizontal</code> to hold the buttons, each with a unique ID.</li> <li>This button will select the <code>DataTable</code> in the <code>ContentSwitcher</code>.</li> <li>This button will select the <code>Markdown</code> in the <code>ContentSwitcher</code>.</li> <li>Note that the initial visible content is set by its ID, see below.</li> <li>When a button is pressed, its ID is used to switch to a different widget in the <code>ContentSwitcher</code>. Remember that IDs are unique within parent, so the buttons and the widgets in the <code>ContentSwitcher</code> can share IDs.</li> </ol> <pre><code>Screen {\n    align: center middle;\n    padding: 1;\n}\n\n#buttons {\n    height: 3;\n    width: auto;\n}\n\nContentSwitcher {\n    background: $panel;\n    border: round $primary;\n    width: 90%;\n    height: 1fr;\n}\n\nDataTable {\n    background: $panel;\n}\n\nMarkdownH2 {\n    background: $primary;\n    color: yellow;\n    border: none;\n    padding: 0;\n}\n</code></pre> <p>When the user presses the \"Markdown\" button the view is switched:</p> <p> ContentSwitcherApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0DataTable\u00a0\u00a0Markdown\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502 \u2502\u2502 \u2502Three\u00a0Flavours\u00a0Cornetto\u2502 \u2502\u2502 \u2502\u00a0\u00a0The\u00a0Three\u00a0Flavours\u00a0Cornetto\u00a0trilogy\u00a0is\u00a0an\u00a0anthology\u00a0series\u00a0of\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0British\u00a0comedic\u00a0genre\u00a0films\u00a0directed\u00a0by\u00a0Edgar\u00a0Wright.\u2502 \u2502\u2502 \u2502\u2502 \u2502Shaun\u00a0of\u00a0the\u00a0Dead\u2502 \u2502\u2502 \u2502\u2502 \u2502Flavour\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0UK\u00a0Release\u00a0Date\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Director\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0Strawberry\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02004-04-09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edgar\u00a0Wright\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502Hot\u00a0Fuzz\u2502 \u2502\u2502 \u2502\u2502 \u2502Flavour\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0UK\u00a0Release\u00a0Date\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Director\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0Classico\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02007-02-17\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edgar\u00a0Wright\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502The\u00a0World's\u00a0End\u2502 \u2502\u2502 \u2502\u2502 \u2502Flavour\u00a0\u00a0\u00a0\u00a0\u00a0UK\u00a0Release\u00a0Date\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Director\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0Mint\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02013-07-19\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edgar\u00a0Wright\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2587\u2587\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p>"},{"location":"widgets/content_switcher/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>current</code> <code>str</code> | <code>None</code> <code>None</code> The ID of the currently-visible child. <code>None</code> means nothing is visible."},{"location":"widgets/content_switcher/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/content_switcher/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/content_switcher/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Container</code></p> <p>A widget for switching between different children.</p> Note <p>All child widgets that are to be switched between need a unique ID. Children that have no ID will be hidden and ignored.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widgets to switch between.</p> <code>()</code> <code>str | None</code> <p>The name of the content switcher.</p> <code>None</code> <code>str | None</code> <p>The ID of the content switcher in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the content switcher.</p> <code>None</code> <code>bool</code> <p>Whether the content switcher is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The ID of the initial widget to show, <code>None</code> or empty string for the first tab.</p> <code>None</code> Note <p>If <code>initial</code> is not supplied no children will be shown to start with.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(name)","title":"<code>name</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(id)","title":"<code>id</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(initial)","title":"<code>initial</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.current","title":"current  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>current = reactive[Optional[str]](None, init=False)\n</code></pre> <p>The ID of the currently-displayed widget.</p> <p>If set to <code>None</code> then no widget is visible.</p> Note <p>If set to an unknown ID, this will result in <code>NoMatches</code> being raised.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.visible_content","title":"visible_content  <code>property</code>","text":"<pre><code>visible_content\n</code></pre> <p>A reference to the currently-visible widget.</p> <p><code>None</code> if nothing is visible.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content","title":"add_content","text":"<pre><code>add_content(widget, *, id=None, set_current=False)\n</code></pre> <p>Add new content to the <code>ContentSwitcher</code>.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A Widget to add.</p> required <code>str | None</code> <p>ID for the widget, or <code>None</code> if the widget already has an ID.</p> <code>None</code> <code>bool</code> <p>Set the new widget as current (which will cause it to display).</p> <code>False</code> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An awaitable to wait for the new content to be mounted.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content(widget)","title":"<code>widget</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content(id)","title":"<code>id</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content(set_current)","title":"<code>set_current</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.watch_current","title":"watch_current","text":"<pre><code>watch_current(old, new)\n</code></pre> <p>React to the current visible child choice being changed.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The old widget ID (or <code>None</code> if there was no widget).</p> required <code>str | None</code> <p>The new widget ID (or <code>None</code> if nothing should be shown).</p> required"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.watch_current(old)","title":"<code>old</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.watch_current(new)","title":"<code>new</code>","text":""},{"location":"widgets/data_table/","title":"DataTable","text":"<p>A widget to display text in a table.  This includes the ability to update data, use a cursor to navigate data, respond to mouse clicks, delete rows or columns, and individually render each cell as a Rich Text renderable.  DataTable provides an efficiently displayed and updated table capable for most applications.</p> <p>Applications may have custom rules for formatting, numbers, repopulating tables after searching or filtering, and responding to selections.  The widget emits events to interface with custom logic.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/data_table/#guide","title":"Guide","text":""},{"location":"widgets/data_table/#adding-data","title":"Adding data","text":"<p>The following example shows how to fill a table with data. First, we use add_columns to include the <code>lane</code>, <code>swimmer</code>, <code>country</code>, and <code>time</code> columns in the table. After that, we use the add_rows method to insert the rows into the table.</p> Outputdata_table.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(*ROWS[0])\n        table.add_rows(ROWS[1:])\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>To add a single row or column use add_row and add_column, respectively.</p>"},{"location":"widgets/data_table/#styling-and-justifying-cells","title":"Styling and justifying cells","text":"<p>Cells can contain more than just plain strings - Rich renderables such as <code>Text</code> are also supported. <code>Text</code> objects provide an easy way to style and justify cell content:</p> Outputdata_table_renderables.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0Singapore50.39 \u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0PhelpsUnited\u00a0States51.14 \u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0South\u00a0Africa51.14 \u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary51.14 \u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China51.26 \u00a0\u00a0\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France51.58 \u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0ShieldsUnited\u00a0States51.73 \u00a0\u00a0\u00a01Aleksandr\u00a0Sadovnikov\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Russia51.84 \u00a0\u00a010\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0Scotland51.84 </p> <pre><code>from rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(*ROWS[0])\n        for row in ROWS[1:]:\n            # Adding styled and justified `Text` objects instead of plain strings.\n            styled_row = [\n                Text(str(cell), style=\"italic #03AC13\", justify=\"right\") for cell in row\n            ]\n            table.add_row(*styled_row)\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#keys","title":"Keys","text":"<p>When adding a row to the table, you can supply a key to add_row. A key is a unique identifier for that row. If you don't supply a key, Textual will generate one for you and return it from <code>add_row</code>. This key can later be used to reference the row, regardless of its current position in the table.</p> <p>When working with data from a database, for example, you may wish to set the row <code>key</code> to the primary key of the data to ensure uniqueness. The method add_column also accepts a <code>key</code> argument and works similarly.</p> <p>Keys are important because cells in a data table can change location due to factors like row deletion and sorting. Thus, using keys instead of coordinates allows us to refer to data without worrying about its current location in the table.</p> <p>If you want to change the table based solely on coordinates, you may need to convert that coordinate to a cell key first using the coordinate_to_cell_key method.</p>"},{"location":"widgets/data_table/#cursors","title":"Cursors","text":"<p>A cursor allows navigating within a table with the keyboard or mouse. There are four cursor types: <code>\"cell\"</code> (the default), <code>\"row\"</code>, <code>\"column\"</code>, and <code>\"none\"</code>.</p> <p>Change the cursor type by assigning to  the <code>cursor_type</code> reactive attribute. The coordinate of the cursor is exposed via the <code>cursor_coordinate</code> reactive attribute.</p> <p>Using the keyboard, arrow keys,  Page Up, Page Down, Home and End move the cursor highlight, emitting a <code>CellHighlighted</code>  message, then enter selects the cell, emitting a <code>CellSelected</code> message.  If the  <code>cursor_type</code> is row, then <code>RowHighlighted</code> and <code>RowSelected</code> are emitted, similarly for  <code>ColumnHighlighted</code> and <code>ColumnSelected</code>.</p> <p>When moving the mouse over the table, a <code>MouseMove</code> event is emitted, the cell hovered over is styled, and the <code>hover_coordinate</code> reactive attribute is updated.  Clicking the mouse then emits the <code>CellHighlighted</code> and  <code>CellSelected</code> events. </p> <p>A new table starts with no cell highlighted, i.e., row and column are zero.  You can force the first item to highlight with <code>move_cursor(row=1, column=1)</code>.  All row and column indexes start at one.</p> Column CursorRow CursorCell CursorNo Cursordata_table_cursors.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\ncursors = cycle([\"column\", \"row\", \"cell\", \"none\"])\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.cursor_type = next(cursors)\n        table.zebra_stripes = True\n        table.add_columns(*ROWS[0])\n        table.add_rows(ROWS[1:])\n\n    def key_c(self):\n        table = self.query_one(DataTable)\n        table.cursor_type = next(cursors)\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#updating-data","title":"Updating data","text":"<p>Cells can be updated using the update_cell and update_cell_at methods.</p>"},{"location":"widgets/data_table/#removing-data","title":"Removing data","text":"<p>To remove all data in the table, use the clear method. To remove individual rows, use remove_row. The <code>remove_row</code> method accepts a <code>key</code> argument, which identifies the row to be removed.</p> <p>If you wish to remove the row below the cursor in the <code>DataTable</code>, use <code>coordinate_to_cell_key</code> to get the row key of the row under the current <code>cursor_coordinate</code>, then supply this key to <code>remove_row</code>:</p> <pre><code># Get the keys for the row and column under the cursor.\nrow_key, _ = table.coordinate_to_cell_key(table.cursor_coordinate)\n# Supply the row key to `remove_row` to delete the row.\ntable.remove_row(row_key)\n</code></pre>"},{"location":"widgets/data_table/#removing-columns","title":"Removing columns","text":"<p>To remove individual columns, use remove_column. The <code>remove_column</code> method accepts a <code>key</code> argument, which identifies the column to be removed.</p> <p>You can remove the column below the cursor using the same <code>coordinate_to_cell_key</code> method described above:</p> <pre><code># Get the keys for the row and column under the cursor.\n_, column_key = table.coordinate_to_cell_key(table.cursor_coordinate)\n# Supply the column key to `column_row` to delete the column.\ntable.remove_column(column_key)\n</code></pre>"},{"location":"widgets/data_table/#fixed-data","title":"Fixed data","text":"<p>You can fix a number of rows and columns in place, keeping them pinned to the top and left of the table respectively. To do this, assign an integer to the <code>fixed_rows</code> or <code>fixed_columns</code> reactive attributes of the <code>DataTable</code>.</p> Fixed datadata_table_fixed.py <p> TableApp \u00a0A\u00a0\u00a0\u00a0B\u00a0\u00a0\u00a0\u00a0C\u00a0\u00a0\u00a0 \u00a01\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0 \u00a02\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0 \u00a03\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a09\u00a0\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a08\u00a0\u00a0\u00a0\u00a012\u00a0\u00a0 \u00a05\u00a0\u00a0\u00a010\u00a0\u00a0\u00a015\u00a0\u00a0\u2581\u2581 \u00a06\u00a0\u00a0\u00a012\u00a0\u00a0\u00a018\u00a0\u00a0 \u00a07\u00a0\u00a0\u00a014\u00a0\u00a0\u00a021\u00a0\u00a0 \u00a08\u00a0\u00a0\u00a016\u00a0\u00a0\u00a024\u00a0\u00a0 \u00a09\u00a0\u00a0\u00a018\u00a0\u00a0\u00a027\u00a0\u00a0 \u00a010\u00a0\u00a020\u00a0\u00a0\u00a030\u00a0\u00a0 \u00a011\u00a0\u00a022\u00a0\u00a0\u00a033\u00a0\u00a0 \u00a012\u00a0\u00a024\u00a0\u00a0\u00a036\u00a0\u00a0 \u00a013\u00a0\u00a026\u00a0\u00a0\u00a039\u00a0\u00a0 \u00a014\u00a0\u00a028\u00a0\u00a0\u00a042\u00a0\u00a0 \u00a015\u00a0\u00a030\u00a0\u00a0\u00a045\u00a0\u00a0 \u00a016\u00a0\u00a032\u00a0\u00a0\u00a048\u00a0\u00a0 \u00a017\u00a0\u00a034\u00a0\u00a0\u00a051\u00a0\u00a0 \u00a018\u00a0\u00a036\u00a0\u00a0\u00a054\u00a0\u00a0 \u00a019\u00a0\u00a038\u00a0\u00a0\u00a057\u00a0\u00a0 \u00a020\u00a0\u00a040\u00a0\u00a0\u00a060\u00a0\u00a0 \u00a021\u00a0\u00a042\u00a0\u00a0\u00a063\u00a0\u00a0 \u00a022\u00a0\u00a044\u00a0\u00a0\u00a066\u00a0\u00a0 \u00a023\u00a0\u00a046\u00a0\u00a0\u00a069\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\n\nclass TableApp(App):\n    CSS = \"DataTable {height: 1fr}\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.focus()\n        table.add_columns(\"A\", \"B\", \"C\")\n        for number in range(1, 100):\n            table.add_row(str(number), str(number * 2), str(number * 3))\n        table.fixed_rows = 2\n        table.fixed_columns = 1\n        table.cursor_type = \"row\"\n        table.zebra_stripes = True\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>In the example above, we set <code>fixed_rows</code> to <code>2</code>, and <code>fixed_columns</code> to <code>1</code>, meaning the first two rows and the leftmost column do not scroll - they always remain visible as you scroll through the data table.</p>"},{"location":"widgets/data_table/#sorting","title":"Sorting","text":"<p>The DataTable rows can be sorted using the  <code>sort</code>  method.</p> <p>There are three methods of using <code>sort</code>:</p> <ul> <li>By Column.  Pass columns in as parameters to sort by the natural order of one or more columns.  Specify a column using either a <code>ColumnKey</code> instance or the <code>key</code> you supplied to <code>add_column</code>.  For example, <code>sort(\"country\", \"region\")</code> would sort by country, and, when the country values are equal, by region.</li> <li>By Key function.  Pass a function as the <code>key</code> parameter to sort, similar to the key function parameter  of Python's <code>sorted</code> built-in.   The function will be called once per row with a tuple of all row values.</li> <li>By both Column and Key function.   You can specify which columns to include as parameters to your key function.  For example, <code>sort(\"hours\", \"rate\", key=lambda h, r: h*r)</code> passes two values to the key function for each row.</li> </ul> <p>The <code>reverse</code> argument reverses the order of your sort.  Note that correct sorting may require your key function to undo your formatting.</p> Outputdata_table_sort.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a01\u00a0\u00a0time\u00a02\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a050.39\u00a0\u00a0\u00a051.84\u00a0\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a050.39\u00a0\u00a0\u00a051.84\u00a0\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a051.14\u00a0\u00a0\u00a051.73\u00a0\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a051.14\u00a0\u00a0\u00a051.58\u00a0\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a051.26\u00a0\u00a0\u00a051.26\u00a0\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a051.58\u00a0\u00a0\u00a052.15\u00a0\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a051.73\u00a0\u00a0\u00a051.12\u00a0\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0Russia\u00a051.84\u00a0\u00a0\u00a050.85\u00a0\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a051.84\u00a0\u00a0\u00a051.55\u00a0\u00a0 \u00a0a\u00a0Sort\u00a0By\u00a0Average\u00a0Time\u00a0\u00a0n\u00a0Sort\u00a0By\u00a0Last\u00a0Name\u00a0\u00a0c\u00a0Sort\u00a0By\u00a0Country\u00a0\u00a0d\u00a0S\u258f^p\u00a0palette </p> <pre><code>from rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable, Footer\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time 1\", \"time 2\"),\n    (4, \"Joseph Schooling\", Text(\"Singapore\", style=\"italic\"), 50.39, 51.84),\n    (2, \"Michael Phelps\", Text(\"United States\", style=\"italic\"), 50.39, 51.84),\n    (5, \"Chad le Clos\", Text(\"South Africa\", style=\"italic\"), 51.14, 51.73),\n    (6, \"L\u00e1szl\u00f3 Cseh\", Text(\"Hungary\", style=\"italic\"), 51.14, 51.58),\n    (3, \"Li Zhuhao\", Text(\"China\", style=\"italic\"), 51.26, 51.26),\n    (8, \"Mehdy Metella\", Text(\"France\", style=\"italic\"), 51.58, 52.15),\n    (7, \"Tom Shields\", Text(\"United States\", style=\"italic\"), 51.73, 51.12),\n    (1, \"Aleksandr Sadovnikov\", Text(\"Russia\", style=\"italic\"), 51.84, 50.85),\n    (10, \"Darren Burns\", Text(\"Scotland\", style=\"italic\"), 51.84, 51.55),\n]\n\n\nclass TableApp(App):\n    BINDINGS = [\n        (\"a\", \"sort_by_average_time\", \"Sort By Average Time\"),\n        (\"n\", \"sort_by_last_name\", \"Sort By Last Name\"),\n        (\"c\", \"sort_by_country\", \"Sort By Country\"),\n        (\"d\", \"sort_by_columns\", \"Sort By Columns (Only)\"),\n    ]\n\n    current_sorts: set = set()\n\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        for col in ROWS[0]:\n            table.add_column(col, key=col)\n        table.add_rows(ROWS[1:])\n\n    def sort_reverse(self, sort_type: str):\n        \"\"\"Determine if `sort_type` is ascending or descending.\"\"\"\n        reverse = sort_type in self.current_sorts\n        if reverse:\n            self.current_sorts.remove(sort_type)\n        else:\n            self.current_sorts.add(sort_type)\n        return reverse\n\n    def action_sort_by_average_time(self) -&gt; None:\n        \"\"\"Sort DataTable by average of times (via a function) and\n        passing of column data through positional arguments.\"\"\"\n\n        def sort_by_average_time_then_last_name(row_data):\n            name, *scores = row_data\n            return (sum(scores) / len(scores), name.split()[-1])\n\n        table = self.query_one(DataTable)\n        table.sort(\n            \"swimmer\",\n            \"time 1\",\n            \"time 2\",\n            key=sort_by_average_time_then_last_name,\n            reverse=self.sort_reverse(\"time\"),\n        )\n\n    def action_sort_by_last_name(self) -&gt; None:\n        \"\"\"Sort DataTable by last name of swimmer (via a lambda).\"\"\"\n        table = self.query_one(DataTable)\n        table.sort(\n            \"swimmer\",\n            key=lambda swimmer: swimmer.split()[-1],\n            reverse=self.sort_reverse(\"swimmer\"),\n        )\n\n    def action_sort_by_country(self) -&gt; None:\n        \"\"\"Sort DataTable by country which is a `Rich.Text` object.\"\"\"\n        table = self.query_one(DataTable)\n        table.sort(\n            \"country\",\n            key=lambda country: country.plain,\n            reverse=self.sort_reverse(\"country\"),\n        )\n\n    def action_sort_by_columns(self) -&gt; None:\n        \"\"\"Sort DataTable without a key.\"\"\"\n        table = self.query_one(DataTable)\n        table.sort(\"swimmer\", \"lane\", reverse=self.sort_reverse(\"columns\"))\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#labeled-rows","title":"Labeled rows","text":"<p>A \"label\" can be attached to a row using the add_row method. This will add an extra column to the left of the table which the cursor cannot interact with. This column is similar to the leftmost column in a spreadsheet containing the row numbers. The example below shows how to attach simple numbered labels to rows.</p> Labeled rowsdata_table_labels.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 1\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 2\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 3\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 4\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 5\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 6\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 7\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 8\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 9\u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <pre><code>from rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(*ROWS[0])\n        for number, row in enumerate(ROWS[1:], start=1):\n            label = Text(str(number), style=\"#B0FC38 italic\")\n            table.add_row(*row, label=label)\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_header</code> <code>bool</code> <code>True</code> Show the table header <code>show_row_labels</code> <code>bool</code> <code>True</code> Show the row labels (if applicable) <code>fixed_rows</code> <code>int</code> <code>0</code> Number of fixed rows (rows which do not scroll) <code>fixed_columns</code> <code>int</code> <code>0</code> Number of fixed columns (columns which do not scroll) <code>zebra_stripes</code> <code>bool</code> <code>False</code> Style with alternating colors on rows <code>header_height</code> <code>int</code> <code>1</code> Height of header row <code>show_cursor</code> <code>bool</code> <code>True</code> Show the cursor <code>cursor_type</code> <code>str</code> <code>\"cell\"</code> One of <code>\"cell\"</code>, <code>\"row\"</code>, <code>\"column\"</code>, or <code>\"none\"</code> <code>cursor_coordinate</code> Coordinate <code>Coordinate(0, 0)</code> The current coordinate of the cursor <code>hover_coordinate</code> Coordinate <code>Coordinate(0, 0)</code> The coordinate the mouse cursor is above"},{"location":"widgets/data_table/#messages","title":"Messages","text":"<ul> <li>DataTable.CellHighlighted</li> <li>DataTable.CellSelected</li> <li>DataTable.RowHighlighted</li> <li>DataTable.RowSelected</li> <li>DataTable.ColumnHighlighted</li> <li>DataTable.ColumnSelected</li> <li>DataTable.HeaderSelected</li> <li>DataTable.RowLabelSelected</li> </ul>"},{"location":"widgets/data_table/#bindings","title":"Bindings","text":"<p>The data table widget defines the following bindings:</p> Key(s) Description enter Select cells under the cursor. up Move the cursor up. down Move the cursor down. right Move the cursor right. left Move the cursor left. pageup Move one page up. pagedown Move one page down. ctrl+home Move to the top. ctrl+end Move to the bottom. home Move to the home position (leftmost column). end Move to the end position (rightmost column)."},{"location":"widgets/data_table/#component-classes","title":"Component Classes","text":"<p>The data table widget provides the following component classes:</p> Class Description <code>datatable--cursor</code> Target the cursor. <code>datatable--hover</code> Target the cells under the hover cursor. <code>datatable--fixed</code> Target fixed columns and fixed rows. <code>datatable--fixed-cursor</code> Target highlighted and fixed columns or header. <code>datatable--header</code> Target the header of the data table. <code>datatable--header-cursor</code> Target cells highlighted by the cursor. <code>datatable--header-hover</code> Target hovered header or row label cells. <code>datatable--even-row</code> Target even rows (row indices start at 0) if zebra_stripes. <code>datatable--odd-row</code> Target odd rows (row indices start at 0) if zebra_stripes. <p>               Bases: <code>ScrollView</code>, <code>Generic[CellType]</code></p> <p>A tabular widget that contains data.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether the table header should be visible or not.</p> <code>True</code> <code>bool</code> <p>Whether the row labels should be shown or not.</p> <code>True</code> <code>int</code> <p>The number of rows, counting from the top, that should be fixed and still visible when the user scrolls down.</p> <code>0</code> <code>int</code> <p>The number of columns, counting from the left, that should be fixed and still visible when the user scrolls right.</p> <code>0</code> <code>bool</code> <p>Enables or disables a zebra effect applied to the background color of the rows of the table, where alternate colors are styled differently to improve the readability of the table.</p> <code>False</code> <code>int</code> <p>The height, in number of cells, of the data table header.</p> <code>1</code> <code>bool</code> <p>Whether the cursor should be visible when navigating the data table or not.</p> <code>True</code> <code>Literal['renderable', 'css']</code> <p>If the data associated with a cell is an arbitrary renderable with a set foreground color, this determines whether that color is prioritized over the cursor component class or not.</p> <code>'css'</code> <code>Literal['renderable', 'css']</code> <p>If the data associated with a cell is an arbitrary renderable with a set background color, this determines whether that color is prioritized over the cursor component class or not.</p> <code>'renderable'</code> <code>CursorType</code> <p>The type of cursor to be used when navigating the data table with the keyboard.</p> <code>'cell'</code> <code>int</code> <p>The number of cells added on each side of each column. Setting this value to zero will likely make your table very hard to read.</p> <code>1</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/data_table/#textual.widgets.DataTable(show_header)","title":"<code>show_header</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(show_row_labels)","title":"<code>show_row_labels</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(fixed_rows)","title":"<code>fixed_rows</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(fixed_columns)","title":"<code>fixed_columns</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(zebra_stripes)","title":"<code>zebra_stripes</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(header_height)","title":"<code>header_height</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(show_cursor)","title":"<code>show_cursor</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cursor_foreground_priority)","title":"<code>cursor_foreground_priority</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cursor_background_priority)","title":"<code>cursor_background_priority</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cursor_type)","title":"<code>cursor_type</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cell_padding)","title":"<code>cell_padding</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(name)","title":"<code>name</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(id)","title":"<code>id</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"enter\", \"select_cursor\", \"Select\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Cursor Up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"Cursor Down\", show=False\n    ),\n    Binding(\n        \"right\", \"cursor_right\", \"Cursor Right\", show=False\n    ),\n    Binding(\n        \"left\", \"cursor_left\", \"Cursor Left\", show=False\n    ),\n    Binding(\"pageup\", \"page_up\", \"Page Up\", show=False),\n    Binding(\n        \"pagedown\", \"page_down\", \"Page Down\", show=False\n    ),\n    Binding(\"ctrl+home\", \"scroll_top\", \"Top\", show=False),\n    Binding(\n        \"ctrl+end\", \"scroll_bottom\", \"Bottom\", show=False\n    ),\n    Binding(\"home\", \"scroll_home\", \"Home\", show=False),\n    Binding(\"end\", \"scroll_end\", \"End\", show=False),\n]\n</code></pre> Key(s) Description enter Select cells under the cursor. up Move the cursor up. down Move the cursor down. right Move the cursor right. left Move the cursor left. pageup Move one page up. pagedown Move one page down. ctrl+home Move to the top. ctrl+end Move to the bottom. home Move to the home position (leftmost column). end Move to the end position (rightmost column)."},{"location":"widgets/data_table/#textual.widgets.DataTable.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"datatable--cursor\",\n    \"datatable--hover\",\n    \"datatable--fixed\",\n    \"datatable--fixed-cursor\",\n    \"datatable--header\",\n    \"datatable--header-cursor\",\n    \"datatable--header-hover\",\n    \"datatable--odd-row\",\n    \"datatable--even-row\",\n}\n</code></pre> Class Description <code>datatable--cursor</code> Target the cursor. <code>datatable--hover</code> Target the cells under the hover cursor. <code>datatable--fixed</code> Target fixed columns and fixed rows. <code>datatable--fixed-cursor</code> Target highlighted and fixed columns or header. <code>datatable--header</code> Target the header of the data table. <code>datatable--header-cursor</code> Target cells highlighted by the cursor. <code>datatable--header-hover</code> Target hovered header or row label cells. <code>datatable--even-row</code> Target even rows (row indices start at 0) if zebra_stripes. <code>datatable--odd-row</code> Target odd rows (row indices start at 0) if zebra_stripes."},{"location":"widgets/data_table/#textual.widgets.DataTable.cell_padding","title":"cell_padding  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cell_padding = cell_padding\n</code></pre> <p>Horizontal padding between cells, applied on each side of each cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.columns","title":"columns  <code>instance-attribute</code>","text":"<pre><code>columns = {}\n</code></pre> <p>Metadata about the columns of the table, indexed by their key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_background_priority","title":"cursor_background_priority  <code>instance-attribute</code>","text":"<pre><code>cursor_background_priority = cursor_background_priority\n</code></pre> <p>Should we prioritize the cursor component class CSS background or the renderable background in the event where a cell contains a renderable with a background color.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_column","title":"cursor_column  <code>property</code>","text":"<pre><code>cursor_column\n</code></pre> <p>The index of the column that the DataTable cursor is currently on.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_coordinate","title":"cursor_coordinate  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_coordinate = Reactive(\n    Coordinate(0, 0), repaint=False, always_update=True\n)\n</code></pre> <p>Current cursor <code>Coordinate</code>.</p> <p>This can be set programmatically or changed via the method <code>move_cursor</code>.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_foreground_priority","title":"cursor_foreground_priority  <code>instance-attribute</code>","text":"<pre><code>cursor_foreground_priority = cursor_foreground_priority\n</code></pre> <p>Should we prioritize the cursor component class CSS foreground or the renderable foreground in the event where a cell contains a renderable with a foreground color.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_row","title":"cursor_row  <code>property</code>","text":"<pre><code>cursor_row\n</code></pre> <p>The index of the row that the DataTable cursor is currently on.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_type","title":"cursor_type  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_type = cursor_type\n</code></pre> <p>The type of cursor of the <code>DataTable</code>.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.fixed_columns","title":"fixed_columns  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>fixed_columns = fixed_columns\n</code></pre> <p>The number of columns to fix (prevented from scrolling).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.fixed_rows","title":"fixed_rows  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>fixed_rows = fixed_rows\n</code></pre> <p>The number of rows to fix (prevented from scrolling).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.header_height","title":"header_height  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>header_height = header_height\n</code></pre> <p>The height of the header row (the row of column labels).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.hover_column","title":"hover_column  <code>property</code>","text":"<pre><code>hover_column\n</code></pre> <p>The index of the column that the mouse cursor is currently hovering above.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.hover_coordinate","title":"hover_coordinate  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>hover_coordinate = Reactive(\n    Coordinate(0, 0), repaint=False, always_update=True\n)\n</code></pre> <p>The coordinate of the <code>DataTable</code> that is being hovered.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.hover_row","title":"hover_row  <code>property</code>","text":"<pre><code>hover_row\n</code></pre> <p>The index of the row that the mouse cursor is currently hovering above.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ordered_columns","title":"ordered_columns  <code>property</code>","text":"<pre><code>ordered_columns\n</code></pre> <p>The list of Columns in the DataTable, ordered as they appear on screen.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ordered_rows","title":"ordered_rows  <code>property</code>","text":"<pre><code>ordered_rows\n</code></pre> <p>The list of Rows in the DataTable, ordered as they appear on screen.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.row_count","title":"row_count  <code>property</code>","text":"<pre><code>row_count\n</code></pre> <p>The number of rows currently present in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.rows","title":"rows  <code>instance-attribute</code>","text":"<pre><code>rows = {}\n</code></pre> <p>Metadata about the rows of the table, indexed by their key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.show_cursor","title":"show_cursor  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_cursor = show_cursor\n</code></pre> <p>Show/hide both the keyboard and hover cursor.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.show_header","title":"show_header  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_header = show_header\n</code></pre> <p>Show/hide the header row (the row of column labels).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.show_row_labels","title":"show_row_labels  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_row_labels = show_row_labels\n</code></pre> <p>Show/hide the column containing the labels of rows.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.zebra_stripes","title":"zebra_stripes  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>zebra_stripes = zebra_stripes\n</code></pre> <p>Apply alternating styles, datatable--even-row and datatable-odd-row, to create a zebra effect, e.g.,  alternating light and dark backgrounds.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted","title":"CellHighlighted","text":"<pre><code>CellHighlighted(data_table, value, coordinate, cell_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the cursor moves to highlight a new cell.</p> <p>This is only relevant when the <code>cursor_type</code> is <code>\"cell\"</code>. It's also posted when the cell cursor is re-enabled (by setting <code>show_cursor=True</code>), and when the cursor type is changed to <code>\"cell\"</code>. Can be handled using <code>on_data_table_cell_highlighted</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.cell_key","title":"cell_key  <code>instance-attribute</code>","text":"<pre><code>cell_key = cell_key\n</code></pre> <p>The key for the highlighted cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.coordinate","title":"coordinate  <code>instance-attribute</code>","text":"<pre><code>coordinate = coordinate\n</code></pre> <p>The coordinate of the highlighted cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value = value\n</code></pre> <p>The value in the highlighted cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected","title":"CellSelected","text":"<pre><code>CellSelected(data_table, value, coordinate, cell_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted by the <code>DataTable</code> widget when a cell is selected.</p> <p>This is only relevant when the <code>cursor_type</code> is <code>\"cell\"</code>. Can be handled using <code>on_data_table_cell_selected</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.cell_key","title":"cell_key  <code>instance-attribute</code>","text":"<pre><code>cell_key = cell_key\n</code></pre> <p>The key for the selected cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.coordinate","title":"coordinate  <code>instance-attribute</code>","text":"<pre><code>coordinate = coordinate\n</code></pre> <p>The coordinate of the cell that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value = value\n</code></pre> <p>The value in the cell that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted","title":"ColumnHighlighted","text":"<pre><code>ColumnHighlighted(data_table, cursor_column, column_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a column is highlighted.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"column\"</code>. Can be handled using <code>on_data_table_column_highlighted</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key = column_key\n</code></pre> <p>The key of the column that was highlighted.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.cursor_column","title":"cursor_column  <code>instance-attribute</code>","text":"<pre><code>cursor_column = cursor_column\n</code></pre> <p>The x-coordinate of the column that was highlighted.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected","title":"ColumnSelected","text":"<pre><code>ColumnSelected(data_table, cursor_column, column_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a column is selected.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"column\"</code>. Can be handled using <code>on_data_table_column_selected</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key = column_key\n</code></pre> <p>The key of the column that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.cursor_column","title":"cursor_column  <code>instance-attribute</code>","text":"<pre><code>cursor_column = cursor_column\n</code></pre> <p>The x-coordinate of the column that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected","title":"HeaderSelected","text":"<pre><code>HeaderSelected(data_table, column_key, column_index, label)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a column header/label is clicked.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.column_index","title":"column_index  <code>instance-attribute</code>","text":"<pre><code>column_index = column_index\n</code></pre> <p>The index for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key = column_key\n</code></pre> <p>The key for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.label","title":"label  <code>instance-attribute</code>","text":"<pre><code>label = label\n</code></pre> <p>The text of the label.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted","title":"RowHighlighted","text":"<pre><code>RowHighlighted(data_table, cursor_row, row_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a row is highlighted.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"row\"</code>. Can be handled using <code>on_data_table_row_highlighted</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.cursor_row","title":"cursor_row  <code>instance-attribute</code>","text":"<pre><code>cursor_row = cursor_row\n</code></pre> <p>The y-coordinate of the cursor that highlighted the row.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key = row_key\n</code></pre> <p>The key of the row that was highlighted.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected","title":"RowLabelSelected","text":"<pre><code>RowLabelSelected(data_table, row_key, row_index, label)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a row label is clicked.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.label","title":"label  <code>instance-attribute</code>","text":"<pre><code>label = label\n</code></pre> <p>The text of the label.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.row_index","title":"row_index  <code>instance-attribute</code>","text":"<pre><code>row_index = row_index\n</code></pre> <p>The index for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key = row_key\n</code></pre> <p>The key for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected","title":"RowSelected","text":"<pre><code>RowSelected(data_table, cursor_row, row_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a row is selected.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"row\"</code>. Can be handled using <code>on_data_table_row_selected</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.cursor_row","title":"cursor_row  <code>instance-attribute</code>","text":"<pre><code>cursor_row = cursor_row\n</code></pre> <p>The y-coordinate of the cursor that made the selection.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key = row_key\n</code></pre> <p>The key of the row that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_down","title":"action_page_down","text":"<pre><code>action_page_down()\n</code></pre> <p>Move the cursor one page down.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_left","title":"action_page_left","text":"<pre><code>action_page_left()\n</code></pre> <p>Move the cursor one page left.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_right","title":"action_page_right","text":"<pre><code>action_page_right()\n</code></pre> <p>Move the cursor one page right.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_up","title":"action_page_up","text":"<pre><code>action_page_up()\n</code></pre> <p>Move the cursor one page up.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_bottom","title":"action_scroll_bottom","text":"<pre><code>action_scroll_bottom()\n</code></pre> <p>Move the cursor and scroll to the bottom.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_end","title":"action_scroll_end","text":"<pre><code>action_scroll_end()\n</code></pre> <p>Move the cursor and scroll to the rightmost column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_home","title":"action_scroll_home","text":"<pre><code>action_scroll_home()\n</code></pre> <p>Move the cursor and scroll to the leftmost column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_top","title":"action_scroll_top","text":"<pre><code>action_scroll_top()\n</code></pre> <p>Move the cursor and scroll to the top.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column","title":"add_column","text":"<pre><code>add_column(label, *, width=None, key=None, default=None)\n</code></pre> <p>Add a column to the table.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>A str or Text object containing the label (shown top of column).</p> required <code>int | None</code> <p>Width of the column in cells or None to fit content.</p> <code>None</code> <code>str | None</code> <p>A key which uniquely identifies this column. If None, it will be generated for you.</p> <code>None</code> <code>CellType | None</code> <p>The  value to insert into pre-existing rows.</p> <code>None</code> <p>Returns:</p> Type Description <code>ColumnKey</code> <p>Uniquely identifies this column. Can be used to retrieve this column regardless of its current location in the DataTable (it could have moved after being added due to sorting/insertion/deletion of other columns).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(label)","title":"<code>label</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(width)","title":"<code>width</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(key)","title":"<code>key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(default)","title":"<code>default</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_columns","title":"add_columns","text":"<pre><code>add_columns(*labels)\n</code></pre> <p>Add a number of columns.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Column headers.</p> <code>()</code> <p>Returns:</p> Type Description <code>list[ColumnKey]</code> <p>A list of the keys for the columns that were added. See the <code>add_column</code> method docstring for more information on how these keys are used.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_columns(*labels)","title":"<code>*labels</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row","title":"add_row","text":"<pre><code>add_row(*cells, height=1, key=None, label=None)\n</code></pre> <p>Add a row at the bottom of the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>CellType</code> <p>Positional arguments should contain cell data.</p> <code>()</code> <code>int | None</code> <p>The height of a row (in lines). Use <code>None</code> to auto-detect the optimal height.</p> <code>1</code> <code>str | None</code> <p>A key which uniquely identifies this row. If None, it will be generated for you and returned.</p> <code>None</code> <code>TextType | None</code> <p>The label for the row. Will be displayed to the left if supplied.</p> <code>None</code> <p>Returns:</p> Type Description <code>RowKey</code> <p>Unique identifier for this row. Can be used to retrieve this row regardless of its current location in the DataTable (it could have moved after being added due to sorting or insertion/deletion of other rows).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(*cells)","title":"<code>*cells</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(height)","title":"<code>height</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(key)","title":"<code>key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(label)","title":"<code>label</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_rows","title":"add_rows","text":"<pre><code>add_rows(rows)\n</code></pre> <p>Add a number of rows at the bottom of the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Iterable[CellType]]</code> <p>Iterable of rows. A row is an iterable of cells.</p> required <p>Returns:</p> Type Description <code>list[RowKey]</code> <p>A list of the keys for the rows that were added. See the <code>add_row</code> method docstring for more information on how these keys are used.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_rows(rows)","title":"<code>rows</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.clear","title":"clear","text":"<pre><code>clear(columns=False)\n</code></pre> <p>Clear the table.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Also clear the columns.</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.clear(columns)","title":"<code>columns</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.coordinate_to_cell_key","title":"coordinate_to_cell_key","text":"<pre><code>coordinate_to_cell_key(coordinate)\n</code></pre> <p>Return the key for the cell currently occupying this coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to exam the current cell key of.</p> required <p>Returns:</p> Type Description <code>CellKey</code> <p>The key of the cell currently occupying this coordinate.</p> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>If the coordinate is not valid.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.coordinate_to_cell_key(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell","title":"get_cell","text":"<pre><code>get_cell(row_key, column_key)\n</code></pre> <p>Given a row key and column key, return the value of the corresponding cell.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The row key of the cell.</p> required <code>ColumnKey | str</code> <p>The column key of the cell.</p> required <p>Returns:</p> Type Description <code>CellType</code> <p>The value of the cell identified by the row and column keys.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_at","title":"get_cell_at","text":"<pre><code>get_cell_at(coordinate)\n</code></pre> <p>Get the value from the cell occupying the given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to retrieve the value from.</p> required <p>Returns:</p> Type Description <code>CellType</code> <p>The value of the cell at the coordinate.</p> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>If there is no cell with the given coordinate.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_at(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_coordinate","title":"get_cell_coordinate","text":"<pre><code>get_cell_coordinate(row_key, column_key)\n</code></pre> <p>Given a row key and column key, return the corresponding cell coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The row key of the cell.</p> required <code>ColumnKey | str</code> <p>The column key of the cell.</p> required <p>Returns:</p> Type Description <code>Coordinate</code> <p>The current coordinate of the cell identified by the row and column keys.</p> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>If the specified cell does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_coordinate(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_coordinate(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column","title":"get_column","text":"<pre><code>get_column(column_key)\n</code></pre> <p>Get the values from the column identified by the given column key.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>The key of the column.</p> required <p>Returns:</p> Type Description <code>Iterable[CellType]</code> <p>A generator which yields the cells in the column.</p> <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If there is no column corresponding to the key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_at","title":"get_column_at","text":"<pre><code>get_column_at(column_index)\n</code></pre> <p>Get the values from the column at a given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the column.</p> required <p>Returns:</p> Type Description <code>Iterable[CellType]</code> <p>A generator which yields the cells in the column.</p> <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If there is no column with the given index.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_at(column_index)","title":"<code>column_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_index","title":"get_column_index","text":"<pre><code>get_column_index(column_key)\n</code></pre> <p>Return the current index for the column identified by column_key.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>The column key to find the current index of.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The current index of the specified column key.</p> <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If the column key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_index(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row","title":"get_row","text":"<pre><code>get_row(row_key)\n</code></pre> <p>Get the values from the row identified by the given row key.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The key of the row.</p> required <p>Returns:</p> Type Description <code>list[CellType]</code> <p>A list of the values contained within the row.</p> <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>When there is no row corresponding to the key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_at","title":"get_row_at","text":"<pre><code>get_row_at(row_index)\n</code></pre> <p>Get the values from the cells in a row at a given index. This will return the values from a row based on the rows current position in the table.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the row.</p> required <p>Returns:</p> Type Description <code>list[CellType]</code> <p>A list of the values contained in the row.</p> <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>If there is no row with the given index.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_at(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_height","title":"get_row_height","text":"<pre><code>get_row_height(row_key)\n</code></pre> <p>Given a row key, return the height of that row in terminal cells.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey</code> <p>The key of the row.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The height of the row, measured in terminal character cells.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_height(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_index","title":"get_row_index","text":"<pre><code>get_row_index(row_key)\n</code></pre> <p>Return the current index for the row identified by row_key.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The row key to find the current index of.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The current index of the specified row key.</p> <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>If the row key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_index(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_column_index","title":"is_valid_column_index","text":"<pre><code>is_valid_column_index(column_index)\n</code></pre> <p>Return a boolean indicating whether the column_index is within table bounds.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The column index to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the column index is within the bounds of the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_column_index(column_index)","title":"<code>column_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_coordinate","title":"is_valid_coordinate","text":"<pre><code>is_valid_coordinate(coordinate)\n</code></pre> <p>Return a boolean indicating whether the given coordinate is valid.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to validate.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the coordinate is within the bounds of the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_coordinate(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_row_index","title":"is_valid_row_index","text":"<pre><code>is_valid_row_index(row_index)\n</code></pre> <p>Return a boolean indicating whether the row_index is within table bounds.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The row index to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the row index is within the bounds of the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_row_index(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor","title":"move_cursor","text":"<pre><code>move_cursor(\n    *, row=None, column=None, animate=False, scroll=True\n)\n</code></pre> <p>Move the cursor to the given position.</p> Example <pre><code>datatable = app.query_one(DataTable)\ndatatable.move_cursor(row=4, column=6)\n# datatable.cursor_coordinate == Coordinate(4, 6)\ndatatable.move_cursor(row=3)\n# datatable.cursor_coordinate == Coordinate(3, 6)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>The new row to move the cursor to.</p> <code>None</code> <code>int | None</code> <p>The new column to move the cursor to.</p> <code>None</code> <code>bool</code> <p>Whether to animate the change of coordinates.</p> <code>False</code> <code>bool</code> <p>Scroll the cursor into view after moving.</p> <code>True</code>"},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(row)","title":"<code>row</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(column)","title":"<code>column</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(scroll)","title":"<code>scroll</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_column","title":"refresh_column","text":"<pre><code>refresh_column(column_index)\n</code></pre> <p>Refresh the column at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the column to refresh.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_column(column_index)","title":"<code>column_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_coordinate","title":"refresh_coordinate","text":"<pre><code>refresh_coordinate(coordinate)\n</code></pre> <p>Refresh the cell at a coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to refresh.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_coordinate(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_row","title":"refresh_row","text":"<pre><code>refresh_row(row_index)\n</code></pre> <p>Refresh the row at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the row to refresh.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_row(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_column","title":"remove_column","text":"<pre><code>remove_column(column_key)\n</code></pre> <p>Remove a column (identified by a key) from the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>The key identifying the column to remove.</p> required <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If the column key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_column(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_row","title":"remove_row","text":"<pre><code>remove_row(row_key)\n</code></pre> <p>Remove a row (identified by a key) from the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The key identifying the row to remove.</p> required <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>If the row key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_row(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.sort","title":"sort","text":"<pre><code>sort(*columns, key=None, reverse=False)\n</code></pre> <p>Sort the rows in the <code>DataTable</code> by one or more column keys or a key function (or other callable). If both columns and a key function are specified, only data from those columns will sent to the key function.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>One or more columns to sort by the values in.</p> <code>()</code> <code>Callable[[Any], Any] | None</code> <p>A function (or other callable) that returns a key to use for sorting purposes.</p> <code>None</code> <code>bool</code> <p>If True, the sort order will be reversed.</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.sort(columns)","title":"<code>columns</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.sort(key)","title":"<code>key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.sort(reverse)","title":"<code>reverse</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell","title":"update_cell","text":"<pre><code>update_cell(\n    row_key, column_key, value, *, update_width=False\n)\n</code></pre> <p>Update the cell identified by the specified row key and column key.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The key identifying the row.</p> required <code>ColumnKey | str</code> <p>The key identifying the column.</p> required <code>CellType</code> <p>The new value to put inside the cell.</p> required <code>bool</code> <p>Whether to resize the column width to accommodate for the new cell content.</p> <code>False</code> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>When the supplied <code>row_key</code> and <code>column_key</code> cannot be found in the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(value)","title":"<code>value</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(update_width)","title":"<code>update_width</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at","title":"update_cell_at","text":"<pre><code>update_cell_at(coordinate, value, *, update_width=False)\n</code></pre> <p>Update the content inside the cell currently occupying the given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to update the cell at.</p> required <code>CellType</code> <p>The new value to place inside the cell.</p> required <code>bool</code> <p>Whether to resize the column width to accommodate for the new cell content.</p> <code>False</code>"},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at(value)","title":"<code>value</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at(update_width)","title":"<code>update_width</code>","text":""},{"location":"widgets/data_table/#textual.widgets.data_table","title":"textual.widgets.data_table","text":""},{"location":"widgets/data_table/#textual.widgets.data_table.CellType","title":"CellType  <code>module-attribute</code>","text":"<pre><code>CellType = TypeVar('CellType')\n</code></pre> <p>Type used for cells in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CursorType","title":"CursorType  <code>module-attribute</code>","text":"<pre><code>CursorType = Literal['cell', 'row', 'column', 'none']\n</code></pre> <p>The valid types of cursors for <code>DataTable.cursor_type</code>.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellDoesNotExist","title":"CellDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>The cell key/index was invalid.</p> <p>Raised when the coordinates or cell key provided does not exist in the DataTable (e.g. out of bounds index, invalid key)</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellKey","title":"CellKey","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A unique identifier for a cell in the DataTable.</p> <p>A cell key is a <code>(row_key, column_key)</code> tuple.</p> <p>Even if the cell changes visual location (i.e. moves to a different coordinate in the table), this key can still be used to retrieve it, regardless of where it currently is.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellKey.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key\n</code></pre> <p>The key of this cell's column.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellKey.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key\n</code></pre> <p>The key of this cell's row.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Column","title":"Column  <code>dataclass</code>","text":"<pre><code>Column(\n    key, label, width=0, content_width=0, auto_width=False\n)\n</code></pre> <p>Metadata for a column in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Column.get_render_width","title":"get_render_width","text":"<pre><code>get_render_width(data_table)\n</code></pre> <p>Width, in cells, required to render the column with padding included.</p> <p>Parameters:</p> Name Type Description Default <code>DataTable[Any]</code> <p>The data table where the column will be rendered.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The width, in cells, required to render the column with padding included.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Column.get_render_width(data_table)","title":"<code>data_table</code>","text":""},{"location":"widgets/data_table/#textual.widgets.data_table.ColumnDoesNotExist","title":"ColumnDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the column index or column key provided does not exist in the DataTable (e.g. out of bounds index, invalid key)</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.ColumnKey","title":"ColumnKey","text":"<pre><code>ColumnKey(value=None)\n</code></pre> <p>               Bases: <code>StringKey</code></p> <p>Uniquely identifies a column in the DataTable.</p> <p>Even if the visual location of the column changes due to sorting or other modifications, a key will always refer to the same column.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.DuplicateKey","title":"DuplicateKey","text":"<p>               Bases: <code>Exception</code></p> <p>The key supplied already exists.</p> <p>Raised when the RowKey or ColumnKey provided already refers to an existing row or column in the DataTable. Keys must be unique.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Row","title":"Row  <code>dataclass</code>","text":"<pre><code>Row(key, height, label=None, auto_height=False)\n</code></pre> <p>Metadata for a row in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.RowDoesNotExist","title":"RowDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the row index or row key provided does not exist in the DataTable (e.g. out of bounds index, invalid key)</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.RowKey","title":"RowKey","text":"<pre><code>RowKey(value=None)\n</code></pre> <p>               Bases: <code>StringKey</code></p> <p>Uniquely identifies a row in the DataTable.</p> <p>Even if the visual location of the row changes due to sorting or other modifications, a key will always refer to the same row.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.StringKey","title":"StringKey","text":"<pre><code>StringKey(value=None)\n</code></pre> <p>An object used as a key in a mapping.</p> <p>It can optionally wrap a string, and lookups into a map using the object behave the same as lookups using the string itself.</p>"},{"location":"widgets/digits/","title":"Digits","text":"<p>Added in version 0.33.0</p> <p>A widget to display numerical values in tall multi-line characters.</p> <p>The digits 0-9 are supported, in addition to the following characters <code>+</code>, <code>-</code>, <code>^</code>, <code>:</code>, and <code>\u00d7</code>. Other characters will be displayed in a regular size font.</p> <p>You can set the text to be displayed in the constructor, or call <code>update()</code> to change the text after the widget has been mounted.</p> <p>This widget will respect the text-align rule.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/digits/#example","title":"Example","text":"<p>The following example displays a few digits of Pi:</p> Outputdigits.py <p> DigitApp \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 \u2551\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u00a0\u2513\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u250f\u2501\u2513\u257a\u2501\u2513\u2551 \u2551\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0\u2503\u00a0\u00a0\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b\u00a0\u2523\u2501\u2513\u2517\u2501\u2513\u00a0\u2501\u252b\u00a0\u2517\u2501\u2513\u2523\u2501\u252b\u2517\u2501\u252b\u00a0\u00a0\u2503\u2551 \u2551\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u253b\u2578,\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578,\u2517\u2501\u251b\u257a\u2501\u251b\u257a\u2501\u251b,\u257a\u2501\u251b\u2517\u2501\u251b\u257a\u2501\u251b\u00a0\u00a0\u2579\u2551 \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass DigitApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    #pi {\n        border: double green;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"3.141,592,653,5897\", id=\"pi\")\n\n\nif __name__ == \"__main__\":\n    app = DigitApp()\n    app.run()\n</code></pre> <p>Here's another example which uses <code>Digits</code> to display the current time:</p> Outputclock.py <p> ClockApp \u00a0\u2513\u00a0\u250f\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u2513\u250f\u2501\u2513\u00a0\u00a0\u00a0\u257a\u2501\u2513\u257a\u2501\u2513 \u00a0\u2503\u00a0\u2523\u2501\u2513\u00a0:\u00a0\u250f\u2501\u251b\u2517\u2501\u252b\u00a0:\u00a0\u250f\u2501\u251b\u00a0\u2501\u252b \u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u257a\u2501\u251b\u00a0\u00a0\u00a0\u2517\u2501\u2578\u257a\u2501\u251b </p> <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass ClockApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    #clock {\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"\", id=\"clock\")\n\n    def on_ready(self) -&gt; None:\n        self.update_clock()\n        self.set_interval(1, self.update_clock)\n\n    def update_clock(self) -&gt; None:\n        clock = datetime.now().time()\n        self.query_one(Digits).update(f\"{clock:%T}\")\n\n\nif __name__ == \"__main__\":\n    app = ClockApp()\n    app.run(inline=True)\n</code></pre>"},{"location":"widgets/digits/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/digits/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/digits/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/digits/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A widget to display numerical values using a 3x3 grid of unicode characters.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Value to display in widget.</p> <code>''</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/digits/#textual.widgets.Digits(value)","title":"<code>value</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(name)","title":"<code>name</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(id)","title":"<code>id</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits.value","title":"value  <code>property</code>","text":"<pre><code>value\n</code></pre> <p>The current value displayed in the Digits.</p>"},{"location":"widgets/digits/#textual.widgets.Digits.update","title":"update","text":"<pre><code>update(value)\n</code></pre> <p>Update the Digits with a new value.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>New value to display.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>If the value isn't a <code>str</code>.</p>"},{"location":"widgets/digits/#textual.widgets.Digits.update(value)","title":"<code>value</code>","text":""},{"location":"widgets/directory_tree/","title":"DirectoryTree","text":"<p>A tree control to navigate the contents of your filesystem.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/directory_tree/#example","title":"Example","text":"<p>The example below creates a simple tree to navigate the current working directory.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import DirectoryTree\n\n\nclass DirectoryTreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DirectoryTree(\"./\")\n\n\nif __name__ == \"__main__\":\n    app = DirectoryTreeApp()\n    app.run()\n</code></pre>"},{"location":"widgets/directory_tree/#filtering","title":"Filtering","text":"<p>There may be times where you want to filter what appears in the <code>DirectoryTree</code>. To do this inherit from <code>DirectoryTree</code> and implement your own version of the <code>filter_paths</code> method. It should take an iterable of Python <code>Path</code> objects, and return those that pass the filter. For example, if you wanted to take the above code an filter out all of the \"hidden\" files and directories:</p> Outputdirectory_tree_filtered.py <p> DirectoryTreeApp \ud83d\udcc2\u00a0 \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0__pycache__ \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0dist \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0docs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0examples \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0imgs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0notes \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0questions \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0reference \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0sandbox \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0site \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0src \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tests \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tools \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0CHANGELOG.md \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0CODE_OF_CONDUCT.md \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0CONTRIBUTING.md\u2584\u2584 \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0docs.md \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0faq.yml \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0keys.log \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0LICENSE \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0Makefile \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0mkdocs-common.yml \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0mkdocs-nav-offline.yml </p> <pre><code>from pathlib import Path\nfrom typing import Iterable\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DirectoryTree\n\n\nclass FilteredDirectoryTree(DirectoryTree):\n    def filter_paths(self, paths: Iterable[Path]) -&gt; Iterable[Path]:\n        return [path for path in paths if not path.name.startswith(\".\")]\n\n\nclass DirectoryTreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield FilteredDirectoryTree(\"./\")\n\n\nif __name__ == \"__main__\":\n    app = DirectoryTreeApp()\n    app.run()\n</code></pre>"},{"location":"widgets/directory_tree/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_root</code> <code>bool</code> <code>True</code> Show the root node. <code>show_guides</code> <code>bool</code> <code>True</code> Show guide lines between levels. <code>guide_depth</code> <code>int</code> <code>4</code> Amount of indentation between parent and child."},{"location":"widgets/directory_tree/#messages","title":"Messages","text":"<ul> <li>DirectoryTree.FileSelected</li> </ul>"},{"location":"widgets/directory_tree/#bindings","title":"Bindings","text":"<p>The directory tree widget inherits the bindings from the tree widget.</p>"},{"location":"widgets/directory_tree/#component-classes","title":"Component Classes","text":"<p>The directory tree widget provides the following component classes:</p> Class Description <code>directory-tree--extension</code> Target the extension of a file name. <code>directory-tree--file</code> Target files in the directory structure. <code>directory-tree--folder</code> Target folders in the directory structure. <code>directory-tree--hidden</code> Target hidden items in the directory structure. <p>See also the component classes for <code>Tree</code>.</p>"},{"location":"widgets/directory_tree/#see-also","title":"See Also","text":"<ul> <li>Tree code reference</li> </ul> <p>               Bases: <code>Tree[DirEntry]</code></p> <p>A Tree widget that presents files and directories.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path</code> <p>Path to directory.</p> required <code>str | None</code> <p>The name of the widget, or None for no name.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM, or None for no ID.</p> <code>None</code> <code>str | None</code> <p>A space-separated list of classes, or None for no classes.</p> <code>None</code> <code>bool</code> <p>Whether the directory tree is disabled or not.</p> <code>False</code>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(name)","title":"<code>name</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(id)","title":"<code>id</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"directory-tree--extension\",\n    \"directory-tree--file\",\n    \"directory-tree--folder\",\n    \"directory-tree--hidden\",\n}\n</code></pre> Class Description <code>directory-tree--extension</code> Target the extension of a file name. <code>directory-tree--file</code> Target files in the directory structure. <code>directory-tree--folder</code> Target folders in the directory structure. <code>directory-tree--hidden</code> Target hidden items in the directory structure. <p>See also the component classes for <code>Tree</code>.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.PATH","title":"PATH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>PATH = Path\n</code></pre> <p>Callable that returns a fresh path object.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.path","title":"path  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>path = path\n</code></pre> <p>The path that is the root of the directory tree.</p> Note <p>This can be set to either a <code>str</code> or a <code>pathlib.Path</code> object, but the value will always be a <code>pathlib.Path</code> object.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected","title":"DirectorySelected","text":"<pre><code>DirectorySelected(node, path)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a directory is selected.</p> <p>Can be handled using <code>on_directory_tree_directory_selected</code> in a subclass of <code>DirectoryTree</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The tree node for the directory that was selected.</p> required <code>Path</code> <p>The path of the directory that was selected.</p> required"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Tree</code> that had a directory selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The tree node of the directory that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected.path","title":"path  <code>instance-attribute</code>","text":"<pre><code>path = path\n</code></pre> <p>The path of the directory that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected","title":"FileSelected","text":"<pre><code>FileSelected(node, path)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a file is selected.</p> <p>Can be handled using <code>on_directory_tree_file_selected</code> in a subclass of <code>DirectoryTree</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The tree node for the file that was selected.</p> required <code>Path</code> <p>The path of the file that was selected.</p> required"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Tree</code> that had a file selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The tree node of the file that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected.path","title":"path  <code>instance-attribute</code>","text":"<pre><code>path = path\n</code></pre> <p>The path of the file that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.clear_node","title":"clear_node","text":"<pre><code>clear_node(node)\n</code></pre> <p>Clear all nodes under the given node.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.filter_paths","title":"filter_paths","text":"<pre><code>filter_paths(paths)\n</code></pre> <p>Filter the paths before adding them to the tree.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Path]</code> <p>The paths to be filtered.</p> required <p>Returns:</p> Type Description <code>Iterable[Path]</code> <p>The filtered paths.</p> <p>By default this method returns all of the paths provided. To create a filtered <code>DirectoryTree</code> inherit from it and implement your own version of this method.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.filter_paths(paths)","title":"<code>paths</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.process_label","title":"process_label","text":"<pre><code>process_label(label)\n</code></pre> <p>Process a str or Text into a label. May be overridden in a subclass to modify how labels are rendered.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.process_label(label)","title":"<code>label</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reload","title":"reload","text":"<pre><code>reload()\n</code></pre> <p>Reload the <code>DirectoryTree</code> contents.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable that ensures the tree has finished reloading.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reload_node","title":"reload_node","text":"<pre><code>reload_node(node)\n</code></pre> <p>Reload the given node's contents.</p> <p>The return value may be awaited to ensure the DirectoryTree has reached a stable state and is no longer performing any node reloading (of this node or any other nodes).</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The root of the subtree to reload.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable that ensures the subtree has finished reloading.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reload_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label","title":"render_label","text":"<pre><code>render_label(node, base_style, style)\n</code></pre> <p>Render a label for the given node.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>A tree node.</p> required <code>Style</code> <p>The base style of the widget.</p> required <code>Style</code> <p>The additional style for the label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object containing the label.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label(base_style)","title":"<code>base_style</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label(style)","title":"<code>style</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node","title":"reset_node","text":"<pre><code>reset_node(node, label, data=None)\n</code></pre> <p>Clear the subtree and reset the given node.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The node to reset.</p> required <code>TextType</code> <p>The label for the node.</p> required <code>DirEntry | None</code> <p>Optional data for the node.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node(label)","title":"<code>label</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node(data)","title":"<code>data</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.validate_path","title":"validate_path","text":"<pre><code>validate_path(path)\n</code></pre> <p>Ensure that the path is of the <code>Path</code> type.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path</code> <p>The path to validate.</p> required <p>Returns:</p> Type Description <code>Path</code> <p>The validated Path value.</p> Note <p>The result will always be a Python <code>Path</code> object, regardless of the value given.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.validate_path(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.watch_path","title":"watch_path  <code>async</code>","text":"<pre><code>watch_path()\n</code></pre> <p>Watch for changes to the <code>path</code> of the directory tree.</p> <p>If the path is changed the directory tree will be repopulated using the new value as the root.</p>"},{"location":"widgets/footer/","title":"Footer","text":"<p>Added in version 0.63.0</p> <p>A simple footer widget which is docked to the bottom of its parent container. Displays available keybindings for the currently focused widget.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/footer/#example","title":"Example","text":"<p>The example below shows an app with a single keybinding that contains only a <code>Footer</code> widget. Notice how the <code>Footer</code> automatically displays the keybinding.</p> Outputfooter.py <p> FooterApp \u00a0q\u00a0Quit\u00a0the\u00a0app\u00a0\u00a0?\u00a0Show\u00a0help\u00a0screen\u00a0\u00a0del\u00a0Delete\u00a0the\u00a0thing\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.binding import Binding\nfrom textual.widgets import Footer\n\n\nclass FooterApp(App):\n    BINDINGS = [\n        Binding(key=\"q\", action=\"quit\", description=\"Quit the app\"),\n        Binding(\n            key=\"question_mark\",\n            action=\"help\",\n            description=\"Show help screen\",\n            key_display=\"?\",\n        ),\n        Binding(key=\"delete\", action=\"delete\", description=\"Delete the thing\"),\n        Binding(key=\"j\", action=\"down\", description=\"Scroll down\", show=False),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = FooterApp()\n    app.run()\n</code></pre>"},{"location":"widgets/footer/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>compact</code> <code>bool</code> <code>False</code> Display a more compact footer. <code>show_command_palette</code> <code>bool</code> <code>True</code> Display the key to invoke the command palette (show on the right hand side of the footer)."},{"location":"widgets/footer/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/footer/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/footer/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/footer/#additional-notes","title":"Additional Notes","text":"<ul> <li>You can prevent keybindings from appearing in the footer by setting the <code>show</code> argument of the <code>Binding</code> to <code>False</code>.</li> <li>You can customize the text that appears for the key itself in the footer using the <code>key_display</code> argument of <code>Binding</code>.</li> </ul> <p>               Bases: <code>ScrollableContainer</code></p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <code>bool</code> <p>Show key binding to command palette, on the right of the footer.</p> <code>True</code>"},{"location":"widgets/footer/#textual.widgets.Footer(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(name)","title":"<code>name</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(id)","title":"<code>id</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(show_command_palette)","title":"<code>show_command_palette</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer.compact","title":"compact  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>compact = reactive(False)\n</code></pre> <p>Display in compact style.</p>"},{"location":"widgets/footer/#textual.widgets.Footer.show_command_palette","title":"show_command_palette  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_command_palette = reactive(True)\n</code></pre> <p>Show the key to invoke the command palette.</p>"},{"location":"widgets/header/","title":"Header","text":"<p>A simple header widget which docks itself to the top of the parent container.</p> <p>Note</p> <p>The application title which is shown in the header is taken from the <code>title</code> and <code>sub_title</code> of the application.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/header/#example","title":"Example","text":"<p>The example below shows an app with a <code>Header</code>.</p> Outputheader.py <p> HeaderApp \u2b58HeaderApp </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header\n\n\nclass HeaderApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n\n\nif __name__ == \"__main__\":\n    app = HeaderApp()\n    app.run()\n</code></pre> <p>This example shows how to set the text in the <code>Header</code> using <code>App.title</code> and <code>App.sub_title</code>:</p> Outputheader_app_title.py <p> HeaderApp \u2b58Header\u00a0Application\u00a0\u2014\u00a0With\u00a0title\u00a0and\u00a0sub-title </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header\n\n\nclass HeaderApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n\n    def on_mount(self) -&gt; None:\n        self.title = \"Header Application\"\n        self.sub_title = \"With title and sub-title\"\n\n\nif __name__ == \"__main__\":\n    app = HeaderApp()\n    app.run()\n</code></pre>"},{"location":"widgets/header/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>tall</code> <code>bool</code> <code>True</code> Whether the <code>Header</code> widget is displayed as tall or not. The tall variant is 3 cells tall by default. The non-tall variant is a single cell tall. This can be toggled by clicking on the header."},{"location":"widgets/header/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/header/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/header/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A header widget with icon and clock.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p><code>True</code> if the clock should be shown on the right of the header.</p> <code>False</code> <code>str | None</code> <p>The name of the header widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the header widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the header widget.</p> <code>None</code> <code>str | None</code> <p>Single character to use as an icon, or <code>None</code> for default.</p> <code>None</code> <code>str | None</code> <p>Time format (used by strftime) for clock, or <code>None</code> for default.</p> <code>None</code>"},{"location":"widgets/header/#textual.widgets.Header(show_clock)","title":"<code>show_clock</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(name)","title":"<code>name</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(id)","title":"<code>id</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(icon)","title":"<code>icon</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(time_format)","title":"<code>time_format</code>","text":""},{"location":"widgets/header/#textual.widgets.Header.icon","title":"icon  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>icon = Reactive('\u2b58')\n</code></pre> <p>A character for the icon at the top left.</p>"},{"location":"widgets/header/#textual.widgets.Header.screen_sub_title","title":"screen_sub_title  <code>property</code>","text":"<pre><code>screen_sub_title\n</code></pre> <p>The sub-title that this header will display.</p> <p>This depends on <code>Screen.sub_title</code> and <code>App.sub_title</code>.</p>"},{"location":"widgets/header/#textual.widgets.Header.screen_title","title":"screen_title  <code>property</code>","text":"<pre><code>screen_title\n</code></pre> <p>The title that this header will display.</p> <p>This depends on <code>Screen.title</code> and <code>App.title</code>.</p>"},{"location":"widgets/header/#textual.widgets.Header.tall","title":"tall  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>tall = Reactive(False)\n</code></pre> <p>Set to <code>True</code> for a taller header or <code>False</code> for a single line header.</p>"},{"location":"widgets/header/#textual.widgets.Header.time_format","title":"time_format  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>time_format = Reactive('%X')\n</code></pre> <p>Time format of the clock.</p>"},{"location":"widgets/input/","title":"Input","text":"<p>A single-line text input widget.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/input/#examples","title":"Examples","text":""},{"location":"widgets/input/#a-simple-example","title":"A Simple Example","text":"<p>The example below shows how you might create a simple form using two <code>Input</code> widgets.</p> Outputinput.py <p> InputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aDarren\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aLast\u00a0Name\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Input\n\n\nclass InputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"First Name\")\n        yield Input(placeholder=\"Last Name\")\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre>"},{"location":"widgets/input/#input-types","title":"Input Types","text":"<p>The <code>Input</code> widget supports a <code>type</code> parameter which will prevent the user from typing invalid characters. You can set <code>type</code> to any of the following values:</p> input.type Description <code>\"integer\"</code> Restricts input to integers. <code>\"number\"</code> Restricts input to a floating point number. <code>\"text\"</code> Allow all text (no restrictions). Outputinput_types.py <p> InputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAn\u00a0integer\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aA\u00a0number\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Input\n\n\nclass InputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"An integer\", type=\"integer\")\n        yield Input(placeholder=\"A number\", type=\"number\")\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> <p>If you set <code>type</code> to something other than <code>\"text\"</code>, then the <code>Input</code> will apply the appropriate validator.</p>"},{"location":"widgets/input/#restricting-input","title":"Restricting Input","text":"<p>You can limit input to particular characters by supplying the <code>restrict</code> parameter, which should be a regular expression. The <code>Input</code> widget will prevent the addition of any characters that would cause the regex to no longer match. For instance, if you wanted to limit characters to binary you could set <code>restrict=r\"[01]*\"</code>.</p> <p>Note</p> <p>The <code>restrict</code> regular expression is applied to the full value and not just to the new character.</p>"},{"location":"widgets/input/#maximum-length","title":"Maximum Length","text":"<p>You can limit the length of the input by setting <code>max_length</code> to a value greater than zero. This will prevent the user from typing any more characters when the maximum has been reached.</p>"},{"location":"widgets/input/#validating-input","title":"Validating Input","text":"<p>You can supply one or more validators to the <code>Input</code> widget to validate the value.</p> <p>All the supplied validators will run when the value changes, the <code>Input</code> is submitted, or focus moves out of the <code>Input</code>. The values <code>\"changed\"</code>, <code>\"submitted\"</code>, and <code>\"blur\"</code>, can be passed as an iterable to the <code>Input</code> parameter <code>validate_on</code> to request that validation occur only on the respective mesages. (See <code>InputValidationOn</code> and <code>Input.validate_on</code>.) For example, the code below creates an <code>Input</code> widget that only gets validated when the value is submitted explicitly:</p> <pre><code>input = Input(validate_on=[\"submitted\"])\n</code></pre> <p>Validation is considered to have failed if any of the validators fail.</p> <p>You can check whether the validation succeeded or failed inside an Input.Changed or Input.Submitted handler by looking at the <code>validation_result</code> attribute on these events.</p> <p>In the example below, we show how to combine multiple validators and update the UI to tell the user why validation failed. Click the tabs to see the output for validation failures and successes.</p> input_validation.pyValidation FailureValidation Success <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.validation import Function, Number, ValidationResult, Validator\nfrom textual.widgets import Input, Label, Pretty\n\n\nclass InputApp(App):\n    # (6)!\n    CSS = \"\"\"\n    Input.-valid {\n        border: tall $success 60%;\n    }\n    Input.-valid:focus {\n        border: tall $success;\n    }\n    Input {\n        margin: 1 1;\n    }\n    Label {\n        margin: 1 2;\n    }\n    Pretty {\n        margin: 1 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Enter an even number between 1 and 100 that is also a palindrome.\")\n        yield Input(\n            placeholder=\"Enter a number...\",\n            validators=[\n                Number(minimum=1, maximum=100),  # (1)!\n                Function(is_even, \"Value is not even.\"),  # (2)!\n                Palindrome(),  # (3)!\n            ],\n        )\n        yield Pretty([])\n\n    @on(Input.Changed)\n    def show_invalid_reasons(self, event: Input.Changed) -&gt; None:\n        # Updating the UI to show the reasons why validation failed\n        if not event.validation_result.is_valid:  # (4)!\n            self.query_one(Pretty).update(event.validation_result.failure_descriptions)\n        else:\n            self.query_one(Pretty).update([])\n\n\ndef is_even(value: str) -&gt; bool:\n    try:\n        return int(value) % 2 == 0\n    except ValueError:\n        return False\n\n\n# A custom validator\nclass Palindrome(Validator):  # (5)!\n    def validate(self, value: str) -&gt; ValidationResult:\n        \"\"\"Check a string is equal to its reverse.\"\"\"\n        if self.is_palindrome(value):\n            return self.success()\n        else:\n            return self.failure(\"That's not a palindrome :/\")\n\n    @staticmethod\n    def is_palindrome(value: str) -&gt; bool:\n        return value == value[::-1]\n\n\napp = InputApp()\n\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li><code>Number</code> is a built-in <code>Validator</code>. It checks that the value in the <code>Input</code> is a valid number, and optionally can check that it falls within a range.</li> <li><code>Function</code> lets you quickly define custom validation constraints. In this case, we check the value in the <code>Input</code> is even.</li> <li><code>Palindrome</code> is a custom <code>Validator</code> defined below.</li> <li>The <code>Input.Changed</code> event has a <code>validation_result</code> attribute which contains information about the validation that occurred when the value changed.</li> <li>Here's how we can implement a custom validator which checks if a string is a palindrome. Note how the description passed into <code>self.failure</code> corresponds to the message seen on UI.</li> <li>Textual offers default styling for the <code>-invalid</code> CSS class (a red border), which is automatically applied to <code>Input</code> when validation fails. We can also provide custom styling for the <code>-valid</code> class, as seen here. In this case, we add a green border around the <code>Input</code> to indicate successful validation.</li> </ol> <p> InputApp \u00a0\u00a0Enter\u00a0an\u00a0even\u00a0number\u00a0between\u00a01\u00a0and\u00a0100\u00a0that\u00a0is\u00a0also\u00a0a\u00a0palindrome.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a-23\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e [ 'Must\u00a0be\u00a0between\u00a01\u00a0and\u00a0100.', 'Value\u00a0is\u00a0not\u00a0even.', \"That's\u00a0not\u00a0a\u00a0palindrome\u00a0:/\" ] </p> <p> InputApp \u00a0\u00a0Enter\u00a0an\u00a0even\u00a0number\u00a0between\u00a01\u00a0and\u00a0100\u00a0that\u00a0is\u00a0also\u00a0a\u00a0palindrome.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a44\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e [] </p> <p>Textual offers several built-in validators for common requirements, but you can easily roll your own by extending Validator, as seen for <code>Palindrome</code> in the example above.</p>"},{"location":"widgets/input/#validate-empty","title":"Validate Empty","text":"<p>If you set <code>valid_empty=True</code> then empty values will bypass any validators, and empty values will be considered valid.</p>"},{"location":"widgets/input/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>cursor_blink</code> <code>bool</code> <code>True</code> True if cursor blinking is enabled. <code>value</code> <code>str</code> <code>\"\"</code> The value currently in the text input. <code>cursor_position</code> <code>int</code> <code>0</code> The index of the cursor in the value string. <code>placeholder</code> <code>str</code> <code>\"\"</code> The dimmed placeholder text to display when the input is empty. <code>password</code> <code>bool</code> <code>False</code> True if the input should be masked. <code>restrict</code> <code>str</code> <code>None</code> Optional regular expression to restrict input. <code>type</code> <code>str</code> <code>\"text\"</code> The type of the input. <code>max_length</code> <code>int</code> <code>None</code> Maximum length of the input value. <code>valid_empty</code> <code>bool</code> <code>False</code> Allow empty values to bypass validation."},{"location":"widgets/input/#messages","title":"Messages","text":"<ul> <li>Input.Changed</li> <li>Input.Submitted</li> </ul>"},{"location":"widgets/input/#bindings","title":"Bindings","text":"<p>The input widget defines the following bindings:</p> Key(s) Description left Move the cursor left. ctrl+left Move the cursor one word to the left. right Move the cursor right or accept the completion suggestion. ctrl+right Move the cursor one word to the right. backspace Delete the character to the left of the cursor. home,ctrl+a Go to the beginning of the input. end,ctrl+e Go to the end of the input. delete,ctrl+d Delete the character to the right of the cursor. enter Submit the current value of the input. ctrl+w Delete the word to the left of the cursor. ctrl+u Delete everything to the left of the cursor. ctrl+f Delete the word to the right of the cursor. ctrl+k Delete everything to the right of the cursor."},{"location":"widgets/input/#component-classes","title":"Component Classes","text":"<p>The input widget provides the following component classes:</p> Class Description <code>input--cursor</code> Target the cursor. <code>input--placeholder</code> Target the placeholder text (when it exists). <code>input--suggestion</code> Target the auto-completion suggestion (when it exists)."},{"location":"widgets/input/#additional-notes","title":"Additional Notes","text":"<ul> <li>The spacing around the text content is due to border. To remove it, set <code>border: none;</code> in your CSS.</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A text input widget.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>An optional default value for the input.</p> <code>None</code> <code>str</code> <p>Optional placeholder text for the input.</p> <code>''</code> <code>Highlighter | None</code> <p>An optional highlighter for the input.</p> <code>None</code> <code>bool</code> <p>Flag to say if the field should obfuscate its content.</p> <code>False</code> <code>str | None</code> <p>A regex to restrict character inputs.</p> <code>None</code> <code>InputType</code> <p>The type of the input.</p> <code>'text'</code> <code>int</code> <p>The maximum length of the input, or 0 for no maximum length.</p> <code>0</code> <code>Suggester | None</code> <p><code>Suggester</code> associated with this input instance.</p> <code>None</code> <code>Validator | Iterable[Validator] | None</code> <p>An iterable of validators that the Input value will be checked against.</p> <code>None</code> <code>Iterable[InputValidationOn] | None</code> <p>Zero or more of the values \"blur\", \"changed\", and \"submitted\", which determine when to do input validation. The default is to do validation for all messages.</p> <code>None</code> <code>bool</code> <p>Empty values are valid.</p> <code>False</code> <code>str | None</code> <p>Optional name for the input widget.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the input is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/input/#textual.widgets.Input(value)","title":"<code>value</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(placeholder)","title":"<code>placeholder</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(highlighter)","title":"<code>highlighter</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(password)","title":"<code>password</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(restrict)","title":"<code>restrict</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(type)","title":"<code>type</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(max_length)","title":"<code>max_length</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(suggester)","title":"<code>suggester</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(validators)","title":"<code>validators</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(validate_on)","title":"<code>validate_on</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(valid_empty)","title":"<code>valid_empty</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(name)","title":"<code>name</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(id)","title":"<code>id</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"left\", \"cursor_left\", \"cursor left\", show=False\n    ),\n    Binding(\n        \"ctrl+left\",\n        \"cursor_left_word\",\n        \"cursor left word\",\n        show=False,\n    ),\n    Binding(\n        \"right\", \"cursor_right\", \"cursor right\", show=False\n    ),\n    Binding(\n        \"ctrl+right\",\n        \"cursor_right_word\",\n        \"cursor right word\",\n        show=False,\n    ),\n    Binding(\n        \"backspace\",\n        \"delete_left\",\n        \"delete left\",\n        show=False,\n    ),\n    Binding(\"home,ctrl+a\", \"home\", \"home\", show=False),\n    Binding(\"end,ctrl+e\", \"end\", \"end\", show=False),\n    Binding(\n        \"delete,ctrl+d\",\n        \"delete_right\",\n        \"delete right\",\n        show=False,\n    ),\n    Binding(\"enter\", \"submit\", \"submit\", show=False),\n    Binding(\n        \"ctrl+w\",\n        \"delete_left_word\",\n        \"delete left to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+u\",\n        \"delete_left_all\",\n        \"delete all to the left\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+f\",\n        \"delete_right_word\",\n        \"delete right to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+k\",\n        \"delete_right_all\",\n        \"delete all to the right\",\n        show=False,\n    ),\n]\n</code></pre> Key(s) Description left Move the cursor left. ctrl+left Move the cursor one word to the left. right Move the cursor right or accept the completion suggestion. ctrl+right Move the cursor one word to the right. backspace Delete the character to the left of the cursor. home,ctrl+a Go to the beginning of the input. end,ctrl+e Go to the end of the input. delete,ctrl+d Delete the character to the right of the cursor. enter Submit the current value of the input. ctrl+w Delete the word to the left of the cursor. ctrl+u Delete everything to the left of the cursor. ctrl+f Delete the word to the right of the cursor. ctrl+k Delete everything to the right of the cursor."},{"location":"widgets/input/#textual.widgets.Input.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"input--cursor\",\n    \"input--placeholder\",\n    \"input--suggestion\",\n}\n</code></pre> Class Description <code>input--cursor</code> Target the cursor. <code>input--placeholder</code> Target the placeholder text (when it exists). <code>input--suggestion</code> Target the auto-completion suggestion (when it exists)."},{"location":"widgets/input/#textual.widgets.Input.cursor_screen_offset","title":"cursor_screen_offset  <code>property</code>","text":"<pre><code>cursor_screen_offset\n</code></pre> <p>The offset of the cursor of this input in screen-space. (x, y)/(column, row)</p>"},{"location":"widgets/input/#textual.widgets.Input.cursor_width","title":"cursor_width  <code>property</code>","text":"<pre><code>cursor_width\n</code></pre> <p>The width of the input (with extra space for cursor at the end).</p>"},{"location":"widgets/input/#textual.widgets.Input.is_valid","title":"is_valid  <code>property</code>","text":"<pre><code>is_valid\n</code></pre> <p>Check if the value has passed validation.</p>"},{"location":"widgets/input/#textual.widgets.Input.max_length","title":"max_length  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>max_length = max_length\n</code></pre> <p>The maximum length of the input, in characters.</p>"},{"location":"widgets/input/#textual.widgets.Input.restrict","title":"restrict  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>restrict = restrict\n</code></pre> <p>A regular expression to limit changes in value.</p>"},{"location":"widgets/input/#textual.widgets.Input.suggester","title":"suggester  <code>instance-attribute</code>","text":"<pre><code>suggester = suggester\n</code></pre> <p>The suggester used to provide completions as the user types.</p>"},{"location":"widgets/input/#textual.widgets.Input.type","title":"type  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>type = type\n</code></pre> <p>The type of the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.valid_empty","title":"valid_empty  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>valid_empty = var(False)\n</code></pre> <p>Empty values should pass validation.</p>"},{"location":"widgets/input/#textual.widgets.Input.validate_on","title":"validate_on  <code>instance-attribute</code>","text":"<pre><code>validate_on = (\n    _POSSIBLE_VALIDATE_ON_VALUES &amp; set(validate_on)\n    if validate_on is not None\n    else _POSSIBLE_VALIDATE_ON_VALUES\n)\n</code></pre> <p>Set with event names to do input validation on.</p> <p>Validation can only be performed on blur, on input changes and on input submission.</p> Example <p>This creates an <code>Input</code> widget that only gets validated when the value is submitted explicitly:</p> <pre><code>input = Input(validate_on=[\"submitted\"])\n</code></pre>"},{"location":"widgets/input/#textual.widgets.Input.Changed","title":"Changed  <code>dataclass</code>","text":"<pre><code>Changed(input, value, validation_result=None)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the value changes.</p> <p>Can be handled using <code>on_input_changed</code> in a subclass of <code>Input</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for self.input.</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.input","title":"input  <code>instance-attribute</code>","text":"<pre><code>input\n</code></pre> <p>The <code>Input</code> widget that was changed.</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.validation_result","title":"validation_result  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>validation_result = None\n</code></pre> <p>The result of validating the value (formed by combining the results from each validator), or None if validation was not performed (for example when no validators are specified in the <code>Input</code>s init)</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value\n</code></pre> <p>The value that the input was changed to.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted","title":"Submitted  <code>dataclass</code>","text":"<pre><code>Submitted(input, value, validation_result=None)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the enter key is pressed within an <code>Input</code>.</p> <p>Can be handled using <code>on_input_submitted</code> in a subclass of <code>Input</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for self.input.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.input","title":"input  <code>instance-attribute</code>","text":"<pre><code>input\n</code></pre> <p>The <code>Input</code> widget that is being submitted.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.validation_result","title":"validation_result  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>validation_result = None\n</code></pre> <p>The result of validating the value on submission, formed by combining the results for each validator. This value will be None if no validation was performed, which will be the case if no validators are supplied to the corresponding <code>Input</code> widget.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value\n</code></pre> <p>The value of the <code>Input</code> being submitted.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_left","title":"action_cursor_left","text":"<pre><code>action_cursor_left()\n</code></pre> <p>Move the cursor one position to the left.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_left_word","title":"action_cursor_left_word","text":"<pre><code>action_cursor_left_word()\n</code></pre> <p>Move the cursor left to the start of a word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_right","title":"action_cursor_right","text":"<pre><code>action_cursor_right()\n</code></pre> <p>Accept an auto-completion or move the cursor one position to the right.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_right_word","title":"action_cursor_right_word","text":"<pre><code>action_cursor_right_word()\n</code></pre> <p>Move the cursor right to the start of a word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_left","title":"action_delete_left","text":"<pre><code>action_delete_left()\n</code></pre> <p>Delete one character to the left of the current cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_left_all","title":"action_delete_left_all","text":"<pre><code>action_delete_left_all()\n</code></pre> <p>Delete all characters to the left of the cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_left_word","title":"action_delete_left_word","text":"<pre><code>action_delete_left_word()\n</code></pre> <p>Delete leftward of the cursor position to the start of a word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_right","title":"action_delete_right","text":"<pre><code>action_delete_right()\n</code></pre> <p>Delete one character at the current cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_right_all","title":"action_delete_right_all","text":"<pre><code>action_delete_right_all()\n</code></pre> <p>Delete the current character and all characters to the right of the cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_right_word","title":"action_delete_right_word","text":"<pre><code>action_delete_right_word()\n</code></pre> <p>Delete the current character and all rightward to the start of the next word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_end","title":"action_end","text":"<pre><code>action_end()\n</code></pre> <p>Move the cursor to the end of the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_home","title":"action_home","text":"<pre><code>action_home()\n</code></pre> <p>Move the cursor to the start of the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_submit","title":"action_submit  <code>async</code>","text":"<pre><code>action_submit()\n</code></pre> <p>Handle a submit action.</p> <p>Normally triggered by the user pressing Enter. This may also run any validators.</p>"},{"location":"widgets/input/#textual.widgets.Input.check_consume_key","title":"check_consume_key","text":"<pre><code>check_consume_key(key, character)\n</code></pre> <p>Check if the widget may consume the given key.</p> <p>As an input we are expecting to capture printable keys.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A key identifier.</p> required <code>str | None</code> <p>A character associated with the key, or <code>None</code> if there isn't one.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may capture the key in it's <code>Key</code> message, or <code>False</code> if it won't.</p>"},{"location":"widgets/input/#textual.widgets.Input.check_consume_key(key)","title":"<code>key</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.check_consume_key(character)","title":"<code>character</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.insert_text_at_cursor","title":"insert_text_at_cursor","text":"<pre><code>insert_text_at_cursor(text)\n</code></pre> <p>Insert new text at the cursor, move the cursor to the end of the new text.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>New text to insert.</p> required"},{"location":"widgets/input/#textual.widgets.Input.insert_text_at_cursor(text)","title":"<code>text</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.restricted","title":"restricted","text":"<pre><code>restricted()\n</code></pre> <p>Called when a character has been restricted.</p> <p>The default behavior is to play the system bell. You may want to override this method if you want to disable the bell or do something else entirely.</p>"},{"location":"widgets/input/#textual.widgets.Input.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Run all the validators associated with this Input on the supplied value.</p> <p>Runs all validators, combines the result into one. If any of the validators failed, the combined result will be a failure. If no validators are present, None will be returned. This also sets the <code>-invalid</code> CSS class on the Input if the validation fails, and sets the <code>-valid</code> CSS class on the Input if the validation succeeds.</p> <p>Returns:</p> Type Description <code>ValidationResult | None</code> <p>A ValidationResult indicating whether all validators succeeded or not. That is, if any validator fails, the result will be an unsuccessful validation.</p>"},{"location":"widgets/label/","title":"Label","text":"<p>Added in version 0.5.0</p> <p>A widget which displays static text, but which can also contain more complex Rich renderables.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/label/#example","title":"Example","text":"<p>The example below shows how you can use a <code>Label</code> widget to display some text.</p> Outputlabel.py <p> LabelApp Hello,\u00a0world!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass LabelApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, world!\")\n\n\nif __name__ == \"__main__\":\n    app = LabelApp()\n    app.run()\n</code></pre>"},{"location":"widgets/label/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/label/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/label/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/label/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Static</code></p> <p>A simple label widget for displaying text-oriented renderables.</p>"},{"location":"widgets/list_item/","title":"ListItem","text":"<p>Added in version 0.6.0</p> <p><code>ListItem</code> is the type of the elements in a <code>ListView</code>.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/list_item/#example","title":"Example","text":"<p>The example below shows an app with a simple <code>ListView</code>, consisting of multiple <code>ListItem</code>s. The arrow keys can be used to navigate the list.</p> Outputlist_view.py <p> ListViewExample One Two Three \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, ListItem, ListView\n\n\nclass ListViewExample(App):\n    CSS_PATH = \"list_view.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ListViewExample()\n    app.run()\n</code></pre>"},{"location":"widgets/list_item/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlighted</code> <code>bool</code> <code>False</code> True if this ListItem is highlighted"},{"location":"widgets/list_item/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/list_item/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/list_item/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A widget that is an item within a <code>ListView</code>.</p> <p>A <code>ListItem</code> is designed for use within a ListView, please see <code>ListView</code>'s documentation for more details on use.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/list_item/#textual.widgets.ListItem(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(name)","title":"<code>name</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(id)","title":"<code>id</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem.highlighted","title":"highlighted  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlighted = reactive(False)\n</code></pre> <p>Is this item highlighted?</p>"},{"location":"widgets/list_view/","title":"ListView","text":"<p>Added in version 0.6.0</p> <p>Displays a vertical list of <code>ListItem</code>s which can be highlighted and selected. Supports keyboard navigation.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/list_view/#example","title":"Example","text":"<p>The example below shows an app with a simple <code>ListView</code>.</p> Outputlist_view.pylist_view.tcss <p> ListViewExample One Two Three \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, ListItem, ListView\n\n\nclass ListViewExample(App):\n    CSS_PATH = \"list_view.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ListViewExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nListView {\n    width: 30;\n    height: auto;\n    margin: 2 2;\n}\n\nLabel {\n    padding: 1 2;\n}\n</code></pre>"},{"location":"widgets/list_view/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>index</code> <code>int</code> <code>0</code> The currently highlighted index."},{"location":"widgets/list_view/#messages","title":"Messages","text":"<ul> <li>ListView.Highlighted</li> <li>ListView.Selected</li> </ul>"},{"location":"widgets/list_view/#bindings","title":"Bindings","text":"<p>The list view widget defines the following bindings:</p> Key(s) Description enter Select the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/list_view/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>VerticalScroll</code></p> <p>A vertical list view widget.</p> <p>Displays a vertical list of <code>ListItem</code>s which can be highlighted and selected using the mouse or keyboard.</p> <p>Attributes:</p> Name Type Description <code>index</code> <p>The index in the list that's currently highlighted.</p> <p>Parameters:</p> Name Type Description Default <code>ListItem</code> <p>The ListItems to display in the list.</p> <code>()</code> <code>int | None</code> <p>The index that should be highlighted when the list is first mounted.</p> <code>0</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The unique ID of the widget used in CSS/query selection.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the ListView is disabled or not.</p> <code>False</code>"},{"location":"widgets/list_view/#textual.widgets.ListView(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(initial_index)","title":"<code>initial_index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(name)","title":"<code>name</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(id)","title":"<code>id</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"enter\", \"select_cursor\", \"Select\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Cursor Up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"Cursor Down\", show=False\n    ),\n]\n</code></pre> Key(s) Description enter Select the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/list_view/#textual.widgets.ListView.highlighted_child","title":"highlighted_child  <code>property</code>","text":"<pre><code>highlighted_child\n</code></pre> <p>The currently highlighted ListItem, or None if nothing is highlighted.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.index","title":"index  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>index = reactive[Optional[int]](\n    0, always_update=True, init=False\n)\n</code></pre> <p>The index of the currently highlighted item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted","title":"Highlighted","text":"<pre><code>Highlighted(list_view, item)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the highlighted item changes.</p> <p>Highlighted item is controlled using up/down keys. Can be handled using <code>on_list_view_highlighted</code> in a subclass of <code>ListView</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'item'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The view that contains the item highlighted.</p> <p>This is an alias for <code>Highlighted.list_view</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.item","title":"item  <code>instance-attribute</code>","text":"<pre><code>item = item\n</code></pre> <p>The highlighted item, if there is one highlighted.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.list_view","title":"list_view  <code>instance-attribute</code>","text":"<pre><code>list_view = list_view\n</code></pre> <p>The view that contains the item highlighted.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected","title":"Selected","text":"<pre><code>Selected(list_view, item)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a list item is selected, e.g. when you press the enter key on it.</p> <p>Can be handled using <code>on_list_view_selected</code> in a subclass of <code>ListView</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'item'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The view that contains the item selected.</p> <p>This is an alias for <code>Selected.list_view</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.item","title":"item  <code>instance-attribute</code>","text":"<pre><code>item = item\n</code></pre> <p>The selected item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.list_view","title":"list_view  <code>instance-attribute</code>","text":"<pre><code>list_view = list_view\n</code></pre> <p>The view that contains the item selected.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down()\n</code></pre> <p>Highlight the next item in the list.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up()\n</code></pre> <p>Highlight the previous item in the list.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.action_select_cursor","title":"action_select_cursor","text":"<pre><code>action_select_cursor()\n</code></pre> <p>Select the current item in the list.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.append","title":"append","text":"<pre><code>append(item)\n</code></pre> <p>Append a new ListItem to the end of the ListView.</p> <p>Parameters:</p> Name Type Description Default <code>ListItem</code> <p>The ListItem to append.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable that yields control to the event loop until the DOM has been updated with the new child item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.append(item)","title":"<code>item</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear all items from the ListView.</p> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable that yields control to the event loop until the DOM has been updated to reflect all children being removed.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.extend","title":"extend","text":"<pre><code>extend(items)\n</code></pre> <p>Append multiple new ListItems to the end of the ListView.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[ListItem]</code> <p>The ListItems to append.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable that yields control to the event loop until the DOM has been updated with the new child items.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.extend(items)","title":"<code>items</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.insert","title":"insert","text":"<pre><code>insert(index, items)\n</code></pre> <p>Insert new ListItem(s) to specified index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>index to insert new ListItem.</p> required <code>Iterable[ListItem]</code> <p>The ListItems to insert.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable that yields control to the event loop until the DOM has been updated with the new child item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.insert(index)","title":"<code>index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.insert(items)","title":"<code>items</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.pop","title":"pop","text":"<pre><code>pop(index=None)\n</code></pre> <p>Remove last ListItem from ListView or    Remove ListItem from ListView by index</p> <p>Parameters:</p> Name Type Description Default <code>Optional[int]</code> <p>index of ListItem to remove from ListView</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable that yields control to the event loop until the DOM has been updated to reflect item being removed.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.pop(index)","title":"<code>index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.remove_items","title":"remove_items","text":"<pre><code>remove_items(indices)\n</code></pre> <p>Remove ListItems from ListView by indices</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[int]</code> <p>index(s) of ListItems to remove from ListView</p> required <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the direct children to be removed.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.remove_items(indices)","title":"<code>indices</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.validate_index","title":"validate_index","text":"<pre><code>validate_index(index)\n</code></pre> <p>Clamp the index to the valid range, or set to None if there's nothing to highlight.</p> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>The index to clamp.</p> required <p>Returns:</p> Type Description <code>int | None</code> <p>The clamped index.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.validate_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.watch_index","title":"watch_index","text":"<pre><code>watch_index(old_index, new_index)\n</code></pre> <p>Updates the highlighting when the index changes.</p>"},{"location":"widgets/loading_indicator/","title":"LoadingIndicator","text":"<p>Added in version 0.15.0</p> <p>Displays pulsating dots to indicate when data is being loaded.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Tip</p> <p>Widgets have a <code>loading</code> reactive which you can use to temporarily replace your widget with a <code>LoadingIndicator</code>. See the Loading Indicator section in the Widgets guide for details.</p>"},{"location":"widgets/loading_indicator/#example","title":"Example","text":"<p>Simple usage example:</p> Outputloading_indicator.py <p> LoadingApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import LoadingIndicator\n\n\nclass LoadingApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield LoadingIndicator()\n\n\nif __name__ == \"__main__\":\n    app = LoadingApp()\n    app.run()\n</code></pre>"},{"location":"widgets/loading_indicator/#changing-indicator-color","title":"Changing Indicator Color","text":"<p>You can set the color of the loading indicator by setting its <code>color</code> style.</p> <p>Here's how you would do that with CSS:</p> <pre><code>LoadingIndicator {\n    color: red;\n}\n</code></pre>"},{"location":"widgets/loading_indicator/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/loading_indicator/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/loading_indicator/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/loading_indicator/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>Display an animated loading indicator.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(name)","title":"<code>name</code>","text":""},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(id)","title":"<code>id</code>","text":""},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/log/","title":"Log","text":"<p>Added in version 0.32.0</p> <p>A Log widget displays lines of text which may be appended to in realtime.</p> <p>Call Log.write_line to write a line at a time, or Log.write_lines to write multiple lines at once. Call Log.clear to clear the Log widget.</p> <p>Tip</p> <p>See also RichLog which can write more than just text, and supports a number of advanced features.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/log/#example","title":"Example","text":"<p>The example below shows how to write text to a <code>Log</code> widget:</p> Outputlog.py <p> LogApp And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2584\u2584 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Log\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass LogApp(App):\n    \"\"\"An app with a simple log.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Log()\n\n    def on_ready(self) -&gt; None:\n        log = self.query_one(Log)\n        log.write_line(\"Hello, World!\")\n        for _ in range(10):\n            log.write_line(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = LogApp()\n    app.run()\n</code></pre>"},{"location":"widgets/log/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>max_lines</code> <code>int</code> <code>None</code> Maximum number of lines in the log or <code>None</code> for no maximum. <code>auto_scroll</code> <code>bool</code> <code>False</code> Scroll to end of log when new lines are added."},{"location":"widgets/log/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/log/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/log/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>ScrollView</code></p> <p>A widget to log text.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Enable highlighting.</p> <code>False</code> <code>int | None</code> <p>Maximum number of lines to display.</p> <code>None</code> <code>bool</code> <p>Scroll to end on new lines.</p> <code>True</code> <code>str | None</code> <p>The name of the text log.</p> <code>None</code> <code>str | None</code> <p>The ID of the text log in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the text log.</p> <code>None</code> <code>bool</code> <p>Whether the text log is disabled or not.</p> <code>False</code>"},{"location":"widgets/log/#textual.widgets.Log(highlight)","title":"<code>highlight</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(max_lines)","title":"<code>max_lines</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(auto_scroll)","title":"<code>auto_scroll</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(name)","title":"<code>name</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(id)","title":"<code>id</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.auto_scroll","title":"auto_scroll  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_scroll = auto_scroll\n</code></pre> <p>Automatically scroll to new lines.</p>"},{"location":"widgets/log/#textual.widgets.Log.highlight","title":"highlight  <code>instance-attribute</code>","text":"<pre><code>highlight = highlight\n</code></pre> <p>Enable highlighting.</p>"},{"location":"widgets/log/#textual.widgets.Log.highlighter","title":"highlighter  <code>instance-attribute</code>","text":"<pre><code>highlighter = ReprHighlighter()\n</code></pre> <p>The Rich Highlighter object to use, if <code>highlight=True</code></p>"},{"location":"widgets/log/#textual.widgets.Log.line_count","title":"line_count  <code>property</code>","text":"<pre><code>line_count\n</code></pre> <p>Number of lines of content.</p>"},{"location":"widgets/log/#textual.widgets.Log.lines","title":"lines  <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>The raw lines in the Log.</p> <p>Note that this attribute is read only. Changing the lines will not update the Log's contents.</p>"},{"location":"widgets/log/#textual.widgets.Log.max_lines","title":"max_lines  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>max_lines = max_lines\n</code></pre> <p>Maximum number of lines to show</p>"},{"location":"widgets/log/#textual.widgets.Log.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the Log.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.notify_style_update","title":"notify_style_update","text":"<pre><code>notify_style_update()\n</code></pre> <p>Called by Textual when styles update.</p>"},{"location":"widgets/log/#textual.widgets.Log.refresh_lines","title":"refresh_lines","text":"<pre><code>refresh_lines(y_start, line_count=1)\n</code></pre> <p>Refresh one or more lines.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>First line to refresh.</p> required <code>int</code> <p>Total number of lines to refresh.</p> <code>1</code>"},{"location":"widgets/log/#textual.widgets.Log.refresh_lines(y_start)","title":"<code>y_start</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.refresh_lines(line_count)","title":"<code>line_count</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write","title":"write","text":"<pre><code>write(data, scroll_end=None)\n</code></pre> <p>Write to the log.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Data to write.</p> required <code>bool | None</code> <p>Scroll to the end after writing, or <code>None</code> to use <code>self.auto_scroll</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.write(data)","title":"<code>data</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write(scroll_end)","title":"<code>scroll_end</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write_line","title":"write_line","text":"<pre><code>write_line(line)\n</code></pre> <p>Write content on a new line.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>String to write to the log.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.write_line(line)","title":"<code>line</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write_lines","title":"write_lines","text":"<pre><code>write_lines(lines, scroll_end=None)\n</code></pre> <p>Write an iterable of lines.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[str]</code> <p>An iterable of strings to write.</p> required <code>bool | None</code> <p>Scroll to the end after writing, or <code>None</code> to use <code>self.auto_scroll</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.write_lines(lines)","title":"<code>lines</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write_lines(scroll_end)","title":"<code>scroll_end</code>","text":""},{"location":"widgets/markdown/","title":"Markdown","text":"<p>Added in version 0.11.0</p> <p>A widget to display a Markdown document.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Tip</p> <p>See MarkdownViewer for a widget that adds additional features such as a Table of Contents.</p>"},{"location":"widgets/markdown/#example","title":"Example","text":"<p>The following example displays Markdown from a string.</p> Outputmarkdown.py <p> MarkdownExampleApp Markdown\u00a0Document \u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0Markdown\u00a0widget. Features \u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u25cf\u00a0Headers \u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u25cf\u00a0Tables! </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Markdown\n\nEXAMPLE_MARKDOWN = \"\"\"\\\n# Markdown Document\n\nThis is an example of Textual's `Markdown` widget.\n\n## Features\n\nMarkdown syntax and extensions are supported.\n\n- Typography *emphasis*, **strong**, `inline code` etc.\n- Headers\n- Lists (bullet and ordered)\n- Syntax highlighted code blocks\n- Tables!\n\"\"\"\n\n\nclass MarkdownExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Markdown(EXAMPLE_MARKDOWN)\n\n\nif __name__ == \"__main__\":\n    app = MarkdownExampleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/markdown/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/markdown/#messages","title":"Messages","text":"<ul> <li>Markdown.TableOfContentsUpdated</li> <li>Markdown.TableOfContentsSelected</li> <li>Markdown.LinkClicked</li> </ul>"},{"location":"widgets/markdown/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/markdown/#component-classes","title":"Component Classes","text":"<p>The markdown widget provides the following component classes:</p> <p>These component classes target standard inline markdown styles. Changing these will potentially break the standard markdown formatting.</p> Class Description <code>code_inline</code> Target text that is styled as inline code. <code>em</code> Target text that is emphasized inline. <code>s</code> Target text that is styled inline with strykethrough. <code>strong</code> Target text that is styled inline with strong."},{"location":"widgets/markdown/#see-also","title":"See Also","text":"<ul> <li>MarkdownViewer code reference</li> </ul> <p>               Bases: <code>Widget</code></p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>String containing Markdown or None to leave blank for now.</p> <code>None</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>Callable[[], MarkdownIt] | None</code> <p>A factory function to return a configured MarkdownIt instance. If <code>None</code>, a \"gfm-like\" parser is used.</p> <code>None</code>"},{"location":"widgets/markdown/#textual.widgets.Markdown(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(parser_factory)","title":"<code>parser_factory</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'em', 'strong', 's', 'code_inline'}\n</code></pre> <p>These component classes target standard inline markdown styles. Changing these will potentially break the standard markdown formatting.</p> Class Description <code>code_inline</code> Target text that is styled as inline code. <code>em</code> Target text that is emphasized inline. <code>s</code> Target text that is styled inline with strykethrough. <code>strong</code> Target text that is styled inline with strong."},{"location":"widgets/markdown/#textual.widgets.Markdown.code_dark_theme","title":"code_dark_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_dark_theme = reactive('material')\n</code></pre> <p>The theme to use for code blocks when in dark mode.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.code_light_theme","title":"code_light_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_light_theme = reactive('material-light')\n</code></pre> <p>The theme to use for code blocks when in light mode.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked","title":"LinkClicked","text":"<pre><code>LinkClicked(markdown, href)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>A link in the document was clicked.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p> <p>This is an alias for <code>LinkClicked.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked.href","title":"href  <code>instance-attribute</code>","text":"<pre><code>href = unquote(href)\n</code></pre> <p>The link that was selected.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected","title":"TableOfContentsSelected","text":"<pre><code>TableOfContentsSelected(markdown, block_id)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>An item in the TOC was selected.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected.block_id","title":"block_id  <code>instance-attribute</code>","text":"<pre><code>block_id = block_id\n</code></pre> <p>ID of the block that was selected.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p> <p>This is an alias for <code>TableOfContentsSelected.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated","title":"TableOfContentsUpdated","text":"<pre><code>TableOfContentsUpdated(markdown, table_of_contents)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The table of contents was updated.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p> <p>This is an alias for <code>TableOfContentsUpdated.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated.table_of_contents","title":"table_of_contents  <code>instance-attribute</code>","text":"<pre><code>table_of_contents = table_of_contents\n</code></pre> <p>Table of contents.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.goto_anchor","title":"goto_anchor","text":"<pre><code>goto_anchor(anchor)\n</code></pre> <p>Try and find the given anchor in the current document.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The anchor to try and find.</p> required Note <p>The anchor is found by looking at all of the headings in the document and finding the first one whose slug matches the anchor.</p> <p>Note that the slugging method used is similar to that found on GitHub.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True when the anchor was found in the current document, False otherwise.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.goto_anchor(anchor)","title":"<code>anchor</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.load","title":"load  <code>async</code>","text":"<pre><code>load(path)\n</code></pre> <p>Load a new Markdown document.</p> <p>Parameters:</p> Name Type Description Default <code>Path</code> <p>Path to the document.</p> required <p>Raises:</p> Type Description <code>OSError</code> <p>If there was some form of error loading the document.</p> Note <p>The exceptions that can be raised by this method are all of those that can be raised by calling <code>Path.read_text</code>.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.load(path)","title":"<code>path</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.sanitize_location","title":"sanitize_location  <code>staticmethod</code>","text":"<pre><code>sanitize_location(location)\n</code></pre> <p>Given a location, break out the path and any anchor.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The location to sanitize.</p> required <p>Returns:</p> Type Description <code>Path</code> <p>A tuple of the path to the location cleaned of any anchor, plus</p> <code>str</code> <p>the anchor (or an empty string if none was found).</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.sanitize_location(location)","title":"<code>location</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.unhandled_token","title":"unhandled_token","text":"<pre><code>unhandled_token(token)\n</code></pre> <p>Process an unhandled token.</p> <p>Parameters:</p> Name Type Description Default <code>Token</code> <p>The MarkdownIt token to handle.</p> required <p>Returns:</p> Type Description <code>MarkdownBlock | None</code> <p>Either a widget to be added to the output, or <code>None</code>.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.unhandled_token(token)","title":"<code>token</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.update","title":"update","text":"<pre><code>update(markdown)\n</code></pre> <p>Update the document with new Markdown.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A string containing Markdown.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object. Await this to ensure that all children have been mounted.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.update(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/","title":"MarkdownViewer","text":"<p>Added in version 0.11.0</p> <p>A Widget to display Markdown content with an optional Table of Contents.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Note</p> <p>This Widget adds browser-like functionality on top of the Markdown widget.</p>"},{"location":"widgets/markdown_viewer/#example","title":"Example","text":"<p>The following example displays Markdown from a string and a Table of Contents.</p> Outputmarkdown.py <p> MarkdownExampleApp \u258a \u25bc\u00a0\u2160\u00a0Markdown\u00a0Viewer\u258a \u251c\u2500\u2500\u00a0\u2161\u00a0Features\u258aMarkdown\u00a0Viewer \u251c\u2500\u2500\u00a0\u2161\u00a0Tables\u258a \u2514\u2500\u2500\u00a0\u2161\u00a0Code\u00a0Blocks\u258a\u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0MarkdownViewer\u00a0widget. \u258a \u258a \u258aFeatures \u258a \u258a\u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u258a \u258a\u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u258a\u25cf\u00a0Headers \u258a\u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u258a\u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u258a\u25cf\u00a0Tables! \u258a \u258a \u258aTables \u258a \u258a\u00a0\u00a0Tables\u00a0are\u00a0displayed\u00a0in\u00a0a\u00a0DataTable\u00a0widget. \u258a \u258a \u258aName\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Type\u00a0Default\u00a0Description\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0 \u258ashow_headerboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0the\u00a0table\u00a0header\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_rowsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_columnsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0columns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258azebra_stripesboolFalse\u00a0\u00a0\u00a0\u00a0Display\u00a0alternating\u00a0colors\u00a0on\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0 \u258aheader_heightint1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Height\u00a0of\u00a0header\u00a0row\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258ashow_cursorboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0a\u00a0cell\u00a0cursor\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a \u258a \u258a \u258aCode\u00a0Blocks \u258a\u2585\u2585 \u258a\u00a0\u00a0Code\u00a0blocks\u00a0are\u00a0syntax\u00a0highlighted,\u00a0with\u00a0guidelines. \u258a \u258a \u258aclassListViewExample(App): \u258a\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;\u00a0ComposeResult: \u258a\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0ListView( </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import MarkdownViewer\n\nEXAMPLE_MARKDOWN = \"\"\"\\\n# Markdown Viewer\n\nThis is an example of Textual's `MarkdownViewer` widget.\n\n\n## Features\n\nMarkdown syntax and extensions are supported.\n\n- Typography *emphasis*, **strong**, `inline code` etc.\n- Headers\n- Lists (bullet and ordered)\n- Syntax highlighted code blocks\n- Tables!\n\n## Tables\n\nTables are displayed in a DataTable widget.\n\n| Name            | Type   | Default | Description                        |\n| --------------- | ------ | ------- | ---------------------------------- |\n| `show_header`   | `bool` | `True`  | Show the table header              |\n| `fixed_rows`    | `int`  | `0`     | Number of fixed rows               |\n| `fixed_columns` | `int`  | `0`     | Number of fixed columns            |\n| `zebra_stripes` | `bool` | `False` | Display alternating colors on rows |\n| `header_height` | `int`  | `1`     | Height of header row               |\n| `show_cursor`   | `bool` | `True`  | Show a cell cursor                 |\n\n\n## Code Blocks\n\nCode blocks are syntax highlighted, with guidelines.\n\n```python\nclass ListViewExample(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n```\n\"\"\"\n\n\nclass MarkdownExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield MarkdownViewer(EXAMPLE_MARKDOWN, show_table_of_contents=True)\n\n\nif __name__ == \"__main__\":\n    app = MarkdownExampleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/markdown_viewer/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_table_of_contents</code> bool True Wether a Table of Contents should be displayed with the Markdown."},{"location":"widgets/markdown_viewer/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/markdown_viewer/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/markdown_viewer/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/markdown_viewer/#see-also","title":"See Also","text":"<ul> <li>Markdown code reference</li> </ul> <p>               Bases: <code>VerticalScroll</code></p> <p>A Markdown viewer widget.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>String containing Markdown, or None to leave blank.</p> <code>None</code> <code>bool</code> <p>Show a table of contents in a sidebar.</p> <code>True</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>Callable[[], MarkdownIt] | None</code> <p>A factory function to return a configured MarkdownIt instance. If <code>None</code>, a \"gfm-like\" parser is used.</p> <code>None</code>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(show_table_of_contents)","title":"<code>show_table_of_contents</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(parser_factory)","title":"<code>parser_factory</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.document","title":"document  <code>property</code>","text":"<pre><code>document\n</code></pre> <p>The <code>Markdown</code> document widget.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.table_of_contents","title":"table_of_contents  <code>property</code>","text":"<pre><code>table_of_contents\n</code></pre> <p>The table of contents widget.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.NavigatorUpdated","title":"NavigatorUpdated","text":"<pre><code>NavigatorUpdated()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Navigator has been changed (clicked link etc).</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.back","title":"back  <code>async</code>","text":"<pre><code>back()\n</code></pre> <p>Go back one level in the history.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.forward","title":"forward  <code>async</code>","text":"<pre><code>forward()\n</code></pre> <p>Go forward one level in the history.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.go","title":"go  <code>async</code>","text":"<pre><code>go(location)\n</code></pre> <p>Navigate to a new document path.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown","title":"textual.widgets.markdown","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.TableOfContentsType","title":"TableOfContentsType  <code>module-attribute</code>","text":"<pre><code>TableOfContentsType = 'list[tuple[int, str, str | None]]'\n</code></pre> <p>Information about the table of contents of a markdown document.</p> <p>The triples encode the level, the label, and the optional block id of each heading.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown","title":"Markdown","text":"<pre><code>Markdown(\n    markdown=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    parser_factory=None\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>String containing Markdown or None to leave blank for now.</p> <code>None</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>Callable[[], MarkdownIt] | None</code> <p>A factory function to return a configured MarkdownIt instance. If <code>None</code>, a \"gfm-like\" parser is used.</p> <code>None</code>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(parser_factory)","title":"<code>parser_factory</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'em', 'strong', 's', 'code_inline'}\n</code></pre> <p>These component classes target standard inline markdown styles. Changing these will potentially break the standard markdown formatting.</p> Class Description <code>code_inline</code> Target text that is styled as inline code. <code>em</code> Target text that is emphasized inline. <code>s</code> Target text that is styled inline with strykethrough. <code>strong</code> Target text that is styled inline with strong."},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.code_dark_theme","title":"code_dark_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_dark_theme = reactive('material')\n</code></pre> <p>The theme to use for code blocks when in dark mode.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.code_light_theme","title":"code_light_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_light_theme = reactive('material-light')\n</code></pre> <p>The theme to use for code blocks when in light mode.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked","title":"LinkClicked","text":"<pre><code>LinkClicked(markdown, href)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>A link in the document was clicked.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p> <p>This is an alias for <code>LinkClicked.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked.href","title":"href  <code>instance-attribute</code>","text":"<pre><code>href = unquote(href)\n</code></pre> <p>The link that was selected.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected","title":"TableOfContentsSelected","text":"<pre><code>TableOfContentsSelected(markdown, block_id)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>An item in the TOC was selected.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected.block_id","title":"block_id  <code>instance-attribute</code>","text":"<pre><code>block_id = block_id\n</code></pre> <p>ID of the block that was selected.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p> <p>This is an alias for <code>TableOfContentsSelected.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated","title":"TableOfContentsUpdated","text":"<pre><code>TableOfContentsUpdated(markdown, table_of_contents)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The table of contents was updated.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p> <p>This is an alias for <code>TableOfContentsUpdated.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated.table_of_contents","title":"table_of_contents  <code>instance-attribute</code>","text":"<pre><code>table_of_contents = table_of_contents\n</code></pre> <p>Table of contents.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.goto_anchor","title":"goto_anchor","text":"<pre><code>goto_anchor(anchor)\n</code></pre> <p>Try and find the given anchor in the current document.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The anchor to try and find.</p> required Note <p>The anchor is found by looking at all of the headings in the document and finding the first one whose slug matches the anchor.</p> <p>Note that the slugging method used is similar to that found on GitHub.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True when the anchor was found in the current document, False otherwise.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.goto_anchor(anchor)","title":"<code>anchor</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.load","title":"load  <code>async</code>","text":"<pre><code>load(path)\n</code></pre> <p>Load a new Markdown document.</p> <p>Parameters:</p> Name Type Description Default <code>Path</code> <p>Path to the document.</p> required <p>Raises:</p> Type Description <code>OSError</code> <p>If there was some form of error loading the document.</p> Note <p>The exceptions that can be raised by this method are all of those that can be raised by calling <code>Path.read_text</code>.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.load(path)","title":"<code>path</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.sanitize_location","title":"sanitize_location  <code>staticmethod</code>","text":"<pre><code>sanitize_location(location)\n</code></pre> <p>Given a location, break out the path and any anchor.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The location to sanitize.</p> required <p>Returns:</p> Type Description <code>Path</code> <p>A tuple of the path to the location cleaned of any anchor, plus</p> <code>str</code> <p>the anchor (or an empty string if none was found).</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.sanitize_location(location)","title":"<code>location</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.unhandled_token","title":"unhandled_token","text":"<pre><code>unhandled_token(token)\n</code></pre> <p>Process an unhandled token.</p> <p>Parameters:</p> Name Type Description Default <code>Token</code> <p>The MarkdownIt token to handle.</p> required <p>Returns:</p> Type Description <code>MarkdownBlock | None</code> <p>Either a widget to be added to the output, or <code>None</code>.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.unhandled_token(token)","title":"<code>token</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.update","title":"update","text":"<pre><code>update(markdown)\n</code></pre> <p>Update the document with new Markdown.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A string containing Markdown.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object. Await this to ensure that all children have been mounted.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.update(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock","title":"MarkdownBlock","text":"<pre><code>MarkdownBlock(markdown, *args, **kwargs)\n</code></pre> <p>               Bases: <code>Static</code></p> <p>The base class for a Markdown Element.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.action_link","title":"action_link  <code>async</code>","text":"<pre><code>action_link(href)\n</code></pre> <p>Called on link click.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.build_from_token","title":"build_from_token","text":"<pre><code>build_from_token(token)\n</code></pre> <p>Build the block content from its source token.</p> <p>This method allows the block to be rebuilt on demand, which is useful when the styles assigned to the Markdown.COMPONENT_CLASSES change.</p> <p>See https://github.com/Textualize/textual/issues/3464 for more information.</p> <p>Parameters:</p> Name Type Description Default <code>Token</code> <p>The token from which this block is built.</p> required"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.build_from_token(token)","title":"<code>token</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.notify_style_update","title":"notify_style_update","text":"<pre><code>notify_style_update()\n</code></pre> <p>If CSS was reloaded, try to rebuild this block from its token.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.rebuild","title":"rebuild","text":"<pre><code>rebuild()\n</code></pre> <p>Rebuild the content of the block if we have a source token.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents","title":"MarkdownTableOfContents","text":"<pre><code>MarkdownTableOfContents(\n    markdown,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Displays a table of contents for a markdown document.</p> <p>Parameters:</p> Name Type Description Default <code>Markdown</code> <p>The Markdown document associated with this table of contents.</p> required <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The Markdown document associated with this table of contents.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.table_of_contents","title":"table_of_contents  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>table_of_contents = reactive[Optional[TableOfContentsType]](\n    None, init=False\n)\n</code></pre> <p>Underlying data to populate the table of contents widget.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.rebuild_table_of_contents","title":"rebuild_table_of_contents","text":"<pre><code>rebuild_table_of_contents(table_of_contents)\n</code></pre> <p>Rebuilds the tree representation of the table of contents data.</p> <p>Parameters:</p> Name Type Description Default <code>TableOfContentsType</code> <p>Table of contents.</p> required"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.rebuild_table_of_contents(table_of_contents)","title":"<code>table_of_contents</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.watch_table_of_contents","title":"watch_table_of_contents","text":"<pre><code>watch_table_of_contents(table_of_contents)\n</code></pre> <p>Triggered when the table of contents changes.</p>"},{"location":"widgets/option_list/","title":"OptionList","text":"<p>Added in version 0.17.0</p> <p>A widget for showing a vertical list of Rich renderable options.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/option_list/#examples","title":"Examples","text":""},{"location":"widgets/option_list/#options-as-simple-strings","title":"Options as simple strings","text":"<p>An <code>OptionList</code> can be constructed with a simple collection of string options:</p> Outputoption_list_strings.pyoption_list.tcss <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aTauron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aVirgon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, OptionList\n\n\nclass OptionListApp(App[None]):\n    CSS_PATH = \"option_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield OptionList(\n            \"Aerilon\",\n            \"Aquaria\",\n            \"Canceron\",\n            \"Caprica\",\n            \"Gemenon\",\n            \"Leonis\",\n            \"Libran\",\n            \"Picon\",\n            \"Sagittaron\",\n            \"Scorpia\",\n            \"Tauron\",\n            \"Virgon\",\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    OptionListApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nOptionList {\n    width: 70%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/option_list/#options-as-option-instances","title":"Options as <code>Option</code> instances","text":"<p>For finer control over the options, the <code>Option</code> class can be used; this allows for setting IDs, setting initial disabled state, etc. The <code>Separator</code> class can be used to add separator lines between options.</p> Outputoption_list_options.pyoption_list.tcss <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2581\u2581\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, OptionList\nfrom textual.widgets.option_list import Option, Separator\n\n\nclass OptionListApp(App[None]):\n    CSS_PATH = \"option_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield OptionList(\n            Option(\"Aerilon\", id=\"aer\"),\n            Option(\"Aquaria\", id=\"aqu\"),\n            Separator(),\n            Option(\"Canceron\", id=\"can\"),\n            Option(\"Caprica\", id=\"cap\", disabled=True),\n            Separator(),\n            Option(\"Gemenon\", id=\"gem\"),\n            Separator(),\n            Option(\"Leonis\", id=\"leo\"),\n            Option(\"Libran\", id=\"lib\"),\n            Separator(),\n            Option(\"Picon\", id=\"pic\"),\n            Separator(),\n            Option(\"Sagittaron\", id=\"sag\"),\n            Option(\"Scorpia\", id=\"sco\"),\n            Separator(),\n            Option(\"Tauron\", id=\"tau\"),\n            Separator(),\n            Option(\"Virgon\", id=\"vir\"),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    OptionListApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nOptionList {\n    width: 70%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/option_list/#options-as-rich-renderables","title":"Options as Rich renderables","text":"<p>Because the prompts for the options can be Rich renderables, this means they can be any height you wish. As an example, here is an option list comprised of Rich tables:</p> Outputoption_list_tables.pyoption_list.tcss <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u2587\u2587\u258e \u258a\u2502\u00a0Demeter\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a01.2\u00a0Billion\u00a0\u00a0\u00a0\u2502\u00a0Gaoth\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Hermes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a075,000\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0None\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Canceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <pre><code>from __future__ import annotations\n\nfrom rich.table import Table\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, OptionList\n\nCOLONIES: tuple[tuple[str, str, str, str], ...] = (\n    (\"Aerilon\", \"Demeter\", \"1.2 Billion\", \"Gaoth\"),\n    (\"Aquaria\", \"Hermes\", \"75,000\", \"None\"),\n    (\"Canceron\", \"Hephaestus\", \"6.7 Billion\", \"Hades\"),\n    (\"Caprica\", \"Apollo\", \"4.9 Billion\", \"Caprica City\"),\n    (\"Gemenon\", \"Hera\", \"2.8 Billion\", \"Oranu\"),\n    (\"Leonis\", \"Artemis\", \"2.6 Billion\", \"Luminere\"),\n    (\"Libran\", \"Athena\", \"2.1 Billion\", \"None\"),\n    (\"Picon\", \"Poseidon\", \"1.4 Billion\", \"Queenstown\"),\n    (\"Sagittaron\", \"Zeus\", \"1.7 Billion\", \"Tawa\"),\n    (\"Scorpia\", \"Dionysus\", \"450 Million\", \"Celeste\"),\n    (\"Tauron\", \"Ares\", \"2.5 Billion\", \"Hypatia\"),\n    (\"Virgon\", \"Hestia\", \"4.3 Billion\", \"Boskirk\"),\n)\n\n\nclass OptionListApp(App[None]):\n    CSS_PATH = \"option_list.tcss\"\n\n    @staticmethod\n    def colony(name: str, god: str, population: str, capital: str) -&gt; Table:\n        table = Table(title=f\"Data for {name}\", expand=True)\n        table.add_column(\"Patron God\")\n        table.add_column(\"Population\")\n        table.add_column(\"Capital City\")\n        table.add_row(god, population, capital)\n        return table\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield OptionList(*[self.colony(*row) for row in COLONIES])\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    OptionListApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nOptionList {\n    width: 70%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/option_list/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlighted</code> <code>int</code> | <code>None</code> <code>None</code> The index of the highlighted option. <code>None</code> means nothing is highlighted."},{"location":"widgets/option_list/#messages","title":"Messages","text":"<ul> <li>OptionList.OptionHighlighted</li> <li>OptionList.OptionSelected</li> </ul> <p>Both of the messages above inherit from the common base <code>OptionList.OptionMessage</code>, so refer to its documentation to see what attributes are available.</p>"},{"location":"widgets/option_list/#bindings","title":"Bindings","text":"<p>The option list widget defines the following bindings:</p> Key(s) Description down Move the highlight down. end Move the highlight to the last option. enter Select the current option. home Move the highlight to the first option. pagedown Move the highlight down a page of options. pageup Move the highlight up a page of options. up Move the highlight up."},{"location":"widgets/option_list/#component-classes","title":"Component Classes","text":"<p>The option list provides the following component classes:</p> Class Description <code>option-list--option-disabled</code> Target disabled options. <code>option-list--option-highlighted</code> Target the highlighted option. <code>option-list--option-hover</code> Target an option that has the mouse over it. <code>option-list--option-hover-highlighted</code> Target a highlighted option that has the mouse over it. <code>option-list--separator</code> Target the separators. <p>               Bases: <code>ScrollView</code></p> <p>A vertical option list with bounce-bar highlighting.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"down\", \"cursor_down\", \"Down\", show=False),\n    Binding(\"end\", \"last\", \"Last\", show=False),\n    Binding(\"enter\", \"select\", \"Select\", show=False),\n    Binding(\"home\", \"first\", \"First\", show=False),\n    Binding(\n        \"pagedown\", \"page_down\", \"Page Down\", show=False\n    ),\n    Binding(\"pageup\", \"page_up\", \"Page Up\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Up\", show=False),\n]\n</code></pre> Key(s) Description down Move the highlight down. end Move the highlight to the last option. enter Select the current option. home Move the highlight to the first option. pagedown Move the highlight down a page of options. pageup Move the highlight up a page of options. up Move the highlight up."},{"location":"widgets/option_list/#textual.widgets.OptionList.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"option-list--option\",\n    \"option-list--option-disabled\",\n    \"option-list--option-highlighted\",\n    \"option-list--option-hover\",\n    \"option-list--option-hover-highlighted\",\n    \"option-list--separator\",\n}\n</code></pre> Class Description <code>option-list--option-disabled</code> Target disabled options. <code>option-list--option-highlighted</code> Target the highlighted option. <code>option-list--option-hover</code> Target an option that has the mouse over it. <code>option-list--option-hover-highlighted</code> Target a highlighted option that has the mouse over it. <code>option-list--separator</code> Target the separators."},{"location":"widgets/option_list/#textual.widgets.OptionList.highlighted","title":"highlighted  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlighted = reactive['int | None'](None)\n</code></pre> <p>The index of the currently-highlighted option, or <code>None</code> if no option is highlighted.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.option_count","title":"option_count  <code>property</code>","text":"<pre><code>option_count\n</code></pre> <p>The count of options.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionHighlighted","title":"OptionHighlighted","text":"<pre><code>OptionHighlighted(option_list, index)\n</code></pre> <p>               Bases: <code>OptionMessage</code></p> <p>Message sent when an option is highlighted.</p> <p>Can be handled using <code>on_option_list_option_highlighted</code> in a subclass of <code>OptionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>OptionList</code> <p>The option list that owns the option.</p> required <code>int</code> <p>The index of the option that the message relates to.</p> required"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionHighlighted(option_list)","title":"<code>option_list</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionHighlighted(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage","title":"OptionMessage","text":"<pre><code>OptionMessage(option_list, index)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Base class for all option messages.</p> <p>Parameters:</p> Name Type Description Default <code>OptionList</code> <p>The option list that owns the option.</p> required <code>int</code> <p>The index of the option that the message relates to.</p> required"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage(option_list)","title":"<code>option_list</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The option list that sent the message.</p> <p>This is an alias for <code>OptionMessage.option_list</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option","title":"option  <code>instance-attribute</code>","text":"<pre><code>option = get_option_at_index(index)\n</code></pre> <p>The highlighted option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option_id","title":"option_id  <code>instance-attribute</code>","text":"<pre><code>option_id = id\n</code></pre> <p>The ID of the option that the message relates to.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option_index","title":"option_index  <code>instance-attribute</code>","text":"<pre><code>option_index = index\n</code></pre> <p>The index of the option that the message relates to.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option_list","title":"option_list  <code>instance-attribute</code>","text":"<pre><code>option_list = option_list\n</code></pre> <p>The option list that sent the message.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionSelected","title":"OptionSelected","text":"<pre><code>OptionSelected(option_list, index)\n</code></pre> <p>               Bases: <code>OptionMessage</code></p> <p>Message sent when an option is selected.</p> <p>Can be handled using <code>on_option_list_option_selected</code> in a subclass of <code>OptionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>OptionList</code> <p>The option list that owns the option.</p> required <code>int</code> <p>The index of the option that the message relates to.</p> required"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionSelected(option_list)","title":"<code>option_list</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionSelected(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down()\n</code></pre> <p>Move the highlight down to the next enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up()\n</code></pre> <p>Move the highlight up to the previous enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_first","title":"action_first","text":"<pre><code>action_first()\n</code></pre> <p>Move the highlight to the first enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_last","title":"action_last","text":"<pre><code>action_last()\n</code></pre> <p>Move the highlight to the last enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_page_down","title":"action_page_down","text":"<pre><code>action_page_down()\n</code></pre> <p>Move the highlight down roughly by one page.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_page_up","title":"action_page_up","text":"<pre><code>action_page_up()\n</code></pre> <p>Move the highlight up roughly by one page.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_select","title":"action_select","text":"<pre><code>action_select()\n</code></pre> <p>Select the currently-highlighted option.</p> <p>If no option is selected, then nothing happens. If an option is selected, a OptionList.OptionSelected message will be posted.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.add_option","title":"add_option","text":"<pre><code>add_option(item=None)\n</code></pre> <p>Add a new option to the end of the option list.</p> <p>Parameters:</p> Name Type Description Default <code>NewOptionListContent</code> <p>The new item to add.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.add_option(item)","title":"<code>item</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.add_options","title":"add_options","text":"<pre><code>add_options(items)\n</code></pre> <p>Add new options to the end of the option list.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[NewOptionListContent]</code> <p>The new items to add.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p> Note <p>All options are checked for duplicate IDs before any option is added. A duplicate ID will cause none of the passed items to be added to the option list.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.add_options(items)","title":"<code>items</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.clear_options","title":"clear_options","text":"<pre><code>clear_options()\n</code></pre> <p>Clear the content of the option list.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.disable_option","title":"disable_option","text":"<pre><code>disable_option(option_id)\n</code></pre> <p>Disable the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to disable.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.disable_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.disable_option_at_index","title":"disable_option_at_index","text":"<pre><code>disable_option_at_index(index)\n</code></pre> <p>Disable the option at the given index.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.enable_option","title":"enable_option","text":"<pre><code>enable_option(option_id)\n</code></pre> <p>Enable the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to enable.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.enable_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.enable_option_at_index","title":"enable_option_at_index","text":"<pre><code>enable_option_at_index(index)\n</code></pre> <p>Enable the option at the given index.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option","title":"get_option","text":"<pre><code>get_option(option_id)\n</code></pre> <p>Get the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to get.</p> required <p>Returns:</p> Type Description <code>Option</code> <p>The option with the ID.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_at_index","title":"get_option_at_index","text":"<pre><code>get_option_at_index(index)\n</code></pre> <p>Get the option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the option to get.</p> required <p>Returns:</p> Type Description <code>Option</code> <p>The option at that index.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_index","title":"get_option_index","text":"<pre><code>get_option_index(option_id)\n</code></pre> <p>Get the index of the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to get the index of.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The index of the item with the given ID.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_index(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option","title":"remove_option","text":"<pre><code>remove_option(option_id)\n</code></pre> <p>Remove the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to remove.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option_at_index","title":"remove_option_at_index","text":"<pre><code>remove_option_at_index(index)\n</code></pre> <p>Remove the option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the option to remove.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt","title":"replace_option_prompt","text":"<pre><code>replace_option_prompt(option_id, prompt)\n</code></pre> <p>Replace the prompt of the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to replace the prompt of.</p> required <code>RenderableType</code> <p>The new prompt for the option.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt_at_index","title":"replace_option_prompt_at_index","text":"<pre><code>replace_option_prompt_at_index(index, prompt)\n</code></pre> <p>Replace the prompt of the option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the option to replace the prompt of.</p> required <code>RenderableType</code> <p>The new prompt for the option.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt_at_index(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.scroll_to_highlight","title":"scroll_to_highlight","text":"<pre><code>scroll_to_highlight(top=False)\n</code></pre> <p>Ensure that the highlighted option is in view.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Scroll highlight to top of the list.</p> <code>False</code>"},{"location":"widgets/option_list/#textual.widgets.OptionList.scroll_to_highlight(top)","title":"<code>top</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.validate_highlighted","title":"validate_highlighted","text":"<pre><code>validate_highlighted(highlighted)\n</code></pre> <p>Validate the <code>highlighted</code> property value on access.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.watch_highlighted","title":"watch_highlighted","text":"<pre><code>watch_highlighted(highlighted)\n</code></pre> <p>React to the highlighted option having changed.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.DuplicateID","title":"DuplicateID","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if a duplicate ID is used when adding options to an option list.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option","title":"Option","text":"<pre><code>Option(prompt, id=None, disabled=False)\n</code></pre> <p>Class that holds the details of an individual option.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>The prompt for the option.</p> required <code>str | None</code> <p>The optional ID for the option.</p> <code>None</code> <code>bool</code> <p>The initial enabled/disabled state. Enabled by default.</p> <code>False</code>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.Option(id)","title":"<code>id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.Option(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.Option.id","title":"id  <code>property</code>","text":"<pre><code>id\n</code></pre> <p>The optional ID for the option.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option.prompt","title":"prompt  <code>property</code>","text":"<pre><code>prompt\n</code></pre> <p>The prompt for the option.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option.set_prompt","title":"set_prompt","text":"<pre><code>set_prompt(prompt)\n</code></pre> <p>Set the prompt for the option.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>The new prompt for the option.</p> required"},{"location":"widgets/option_list/#textual.widgets.option_list.Option.set_prompt(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.OptionDoesNotExist","title":"OptionDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when a request has been made for an option that doesn't exist.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Separator","title":"Separator","text":"<p>Class used to add a separator to an OptionList.</p>"},{"location":"widgets/placeholder/","title":"Placeholder","text":"<p>Added in version 0.6.0</p> <p>A widget that is meant to have no complex functionality. Use the placeholder widget when studying the layout of your app before having to develop your custom widgets.</p> <p>The placeholder widget has variants that display different bits of useful information. Clicking a placeholder will cycle through its variants.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/placeholder/#example","title":"Example","text":"<p>The example below shows each placeholder variant.</p> Outputplaceholder.pyplaceholder.tcss <p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula. Nullam\u00a0imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0 vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.\u00a0Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sedconsectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0 lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 sapien\u00a0sapien\u00a0congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal, VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass PlaceholderApp(App):\n    CSS_PATH = \"placeholder.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield VerticalScroll(\n            Container(\n                Placeholder(\"This is a custom label for p1.\", id=\"p1\"),\n                Placeholder(\"Placeholder p2 here!\", id=\"p2\"),\n                Placeholder(id=\"p3\"),\n                Placeholder(id=\"p4\"),\n                Placeholder(id=\"p5\"),\n                Placeholder(),\n                Horizontal(\n                    Placeholder(variant=\"size\", id=\"col1\"),\n                    Placeholder(variant=\"text\", id=\"col2\"),\n                    Placeholder(variant=\"size\", id=\"col3\"),\n                    id=\"c1\",\n                ),\n                id=\"bot\",\n            ),\n            Container(\n                Placeholder(variant=\"text\", id=\"left\"),\n                Placeholder(variant=\"size\", id=\"topright\"),\n                Placeholder(variant=\"text\", id=\"botright\"),\n                id=\"top\",\n            ),\n            id=\"content\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = PlaceholderApp()\n    app.run()\n</code></pre> <pre><code>Placeholder {\n    height: 100%;\n}\n\n#top {\n    height: 50%;\n    width: 100%;\n    layout: grid;\n    grid-size: 2 2;\n}\n\n#left {\n    row-span: 2;\n}\n\n#bot {\n    height: 50%;\n    width: 100%;\n    layout: grid;\n    grid-size: 8 8;\n}\n\n#c1 {\n    row-span: 4;\n    column-span: 8;\n    height: 100%;\n}\n\n#col1, #col2, #col3 {\n    width: 1fr;\n}\n\n#p1 {\n    row-span: 4;\n    column-span: 4;\n}\n\n#p2 {\n    row-span: 2;\n    column-span: 4;\n}\n\n#p3 {\n    row-span: 2;\n    column-span: 2;\n}\n\n#p4 {\n    row-span: 1;\n    column-span: 2;\n}\n</code></pre>"},{"location":"widgets/placeholder/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>variant</code> <code>str</code> <code>\"default\"</code> Styling variant. One of <code>default</code>, <code>size</code>, <code>text</code>."},{"location":"widgets/placeholder/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/placeholder/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/placeholder/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A simple placeholder widget to use before you build your custom widgets.</p> <p>This placeholder has a couple of variants that show different data. Clicking the placeholder cycles through the available variants, but a placeholder can also be initialised in a specific variant.</p> <p>The variants available are:</p> Variant Placeholder shows default Identifier label or the ID of the placeholder. size Size of the placeholder. text Lorem Ipsum text. <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The label to identify the placeholder. If no label is present, uses the placeholder ID instead.</p> <code>None</code> <code>PlaceholderVariant</code> <p>The variant of the placeholder.</p> <code>'default'</code> <code>str | None</code> <p>The name of the placeholder.</p> <code>None</code> <code>str | None</code> <p>The ID of the placeholder in the DOM.</p> <code>None</code> <code>str | None</code> <p>A space separated string with the CSS classes of the placeholder, if any.</p> <code>None</code> <code>bool</code> <p>Whether the placeholder is disabled or not.</p> <code>False</code>"},{"location":"widgets/placeholder/#textual.widgets.Placeholder(label)","title":"<code>label</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(variant)","title":"<code>variant</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(name)","title":"<code>name</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(id)","title":"<code>id</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder.variant","title":"variant  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>variant = validate_variant(variant)\n</code></pre> <p>The current variant of the placeholder.</p>"},{"location":"widgets/placeholder/#textual.widgets.Placeholder.cycle_variant","title":"cycle_variant","text":"<pre><code>cycle_variant()\n</code></pre> <p>Get the next variant in the cycle.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Placeholder</code> instance.</p>"},{"location":"widgets/placeholder/#textual.widgets.Placeholder.validate_variant","title":"validate_variant","text":"<pre><code>validate_variant(variant)\n</code></pre> <p>Validate the variant to which the placeholder was set.</p>"},{"location":"widgets/pretty/","title":"Pretty","text":"<p>Display a pretty-formatted object.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/pretty/#example","title":"Example","text":"<p>The example below shows a pretty-formatted <code>dict</code>, but <code>Pretty</code> can display any Python object.</p> Outputpretty.py <p> PrettyExample { 'title':\u00a0'Back\u00a0to\u00a0the\u00a0Future', 'releaseYear':\u00a01985, 'director':\u00a0'Robert\u00a0Zemeckis', 'genre':\u00a0'Adventure,\u00a0Comedy,\u00a0Sci-Fi', 'cast':\u00a0[ {'actor':\u00a0'Michael\u00a0J.\u00a0Fox',\u00a0'character':\u00a0'Marty\u00a0McFly'}, {'actor':\u00a0'Christopher\u00a0Lloyd',\u00a0'character':\u00a0'Dr.\u00a0Emmett\u00a0Brown'} ] } </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Pretty\n\nDATA = {\n    \"title\": \"Back to the Future\",\n    \"releaseYear\": 1985,\n    \"director\": \"Robert Zemeckis\",\n    \"genre\": \"Adventure, Comedy, Sci-Fi\",\n    \"cast\": [\n        {\"actor\": \"Michael J. Fox\", \"character\": \"Marty McFly\"},\n        {\"actor\": \"Christopher Lloyd\", \"character\": \"Dr. Emmett Brown\"},\n    ],\n}\n\n\nclass PrettyExample(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Pretty(DATA)\n\n\napp = PrettyExample()\n\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/pretty/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/pretty/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/pretty/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/pretty/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A pretty-printing widget.</p> <p>Used to pretty-print any object.</p> <p>Parameters:</p> Name Type Description Default <code>Any</code> <p>The object to pretty-print.</p> required <code>str | None</code> <p>The name of the pretty widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the pretty in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the pretty.</p> <code>None</code>"},{"location":"widgets/pretty/#textual.widgets.Pretty(object)","title":"<code>object</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty(name)","title":"<code>name</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty(id)","title":"<code>id</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty.update","title":"update","text":"<pre><code>update(object)\n</code></pre> <p>Update the content of the pretty widget.</p> <p>Parameters:</p> Name Type Description Default <code>Any</code> <p>The object to pretty-print.</p> required"},{"location":"widgets/pretty/#textual.widgets.Pretty.update(object)","title":"<code>object</code>","text":""},{"location":"widgets/progress_bar/","title":"ProgressBar","text":"<p>A widget that displays progress on a time-consuming task.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/progress_bar/#examples","title":"Examples","text":""},{"location":"widgets/progress_bar/#progress-bar-in-isolation","title":"Progress Bar in Isolation","text":"<p>The example below shows a progress bar in isolation. It shows the progress bar in:</p> <ul> <li>its indeterminate state, when the <code>total</code> progress hasn't been set yet;</li> <li>the middle of the progress; and</li> <li>the completed state.</li> </ul> Indeterminate state39% doneCompletedprogress_bar_isolated.py <p> IndeterminateProgressBar \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501--%--:--:--\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> IndeterminateProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250139%00:00:07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> IndeterminateProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501100%--:--:--\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center, Middle\nfrom textual.timer import Timer\nfrom textual.widgets import Footer, ProgressBar\n\n\nclass IndeterminateProgressBar(App[None]):\n    BINDINGS = [(\"s\", \"start\", \"Start\")]\n\n    progress_timer: Timer\n    \"\"\"Timer to simulate progress happening.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Center():\n            with Middle():\n                yield ProgressBar()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Set up a timer to simulate progess happening.\"\"\"\n        self.progress_timer = self.set_interval(1 / 10, self.make_progress, pause=True)\n\n    def make_progress(self) -&gt; None:\n        \"\"\"Called automatically to advance the progress bar.\"\"\"\n        self.query_one(ProgressBar).advance(1)\n\n    def action_start(self) -&gt; None:\n        \"\"\"Start the progress tracking.\"\"\"\n        self.query_one(ProgressBar).update(total=100)\n        self.progress_timer.resume()\n\n\nif __name__ == \"__main__\":\n    IndeterminateProgressBar().run()\n</code></pre>"},{"location":"widgets/progress_bar/#complete-app-example","title":"Complete App Example","text":"<p>The example below shows a simple app with a progress bar that is keeping track of a fictitious funding level for an organisation.</p> OutputOutput (partial funding)Output (full funding)progress_bar.pyprogress_bar.tcss <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u25010%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250135%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Donation\u00a0for\u00a0$15\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Donation\u00a0for\u00a0$20\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501100%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Donation\u00a0for\u00a0$15\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Donation\u00a0for\u00a0$20\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Donation\u00a0for\u00a0$65\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center, VerticalScroll\nfrom textual.widgets import Button, Header, Input, Label, ProgressBar\n\n\nclass FundingProgressApp(App[None]):\n    CSS_PATH = \"progress_bar.tcss\"\n\n    TITLE = \"Funding tracking\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        with Center():\n            yield Label(\"Funding: \")\n            yield ProgressBar(total=100, show_eta=False)  # (1)!\n        with Center():\n            yield Input(placeholder=\"$$$\")\n            yield Button(\"Donate\")\n\n        yield VerticalScroll(id=\"history\")\n\n    def on_button_pressed(self) -&gt; None:\n        self.add_donation()\n\n    def on_input_submitted(self) -&gt; None:\n        self.add_donation()\n\n    def add_donation(self) -&gt; None:\n        text_value = self.query_one(Input).value\n        try:\n            value = int(text_value)\n        except ValueError:\n            return\n        self.query_one(ProgressBar).advance(value)\n        self.query_one(VerticalScroll).mount(Label(f\"Donation for ${value} received!\"))\n        self.query_one(Input).value = \"\"\n\n\nif __name__ == \"__main__\":\n    FundingProgressApp().run()\n</code></pre> <ol> <li>We create a progress bar with a total of <code>100</code> steps and we hide the ETA countdown because we are not keeping track of a continuous, uninterrupted task.</li> </ol> <pre><code>Container {\n    overflow: hidden hidden;\n    height: auto;\n}\n\nCenter {\n    margin-top: 1;\n    margin-bottom: 1;\n    layout: horizontal;\n}\n\nProgressBar {\n    padding-left: 3;\n}\n\nInput {\n    width: 16;\n}\n\nVerticalScroll {\n    height: auto;\n}\n</code></pre>"},{"location":"widgets/progress_bar/#gradient-bars","title":"Gradient Bars","text":"<p>Progress bars support an optional <code>gradient</code> parameter, which renders a smooth gradient rather than a solid bar. To use a gradient, create and set a Gradient object on the ProgressBar widget.</p> <p>Note</p> <p>Setting a gradient will override styles set in CSS.</p> <p>Here's an example:</p> Outputprogress_bar_gradient.py <p> ProgressApp \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250170%--:--:--\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Gradient\nfrom textual.containers import Center, Middle\nfrom textual.widgets import ProgressBar\n\n\nclass ProgressApp(App[None]):\n    \"\"\"Progress bar with a rainbow gradient.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        gradient = Gradient.from_colors(\n            \"#881177\",\n            \"#aa3355\",\n            \"#cc6666\",\n            \"#ee9944\",\n            \"#eedd00\",\n            \"#99dd55\",\n            \"#44dd88\",\n            \"#22ccbb\",\n            \"#00bbcc\",\n            \"#0099cc\",\n            \"#3366bb\",\n            \"#663399\",\n        )\n        with Center():\n            with Middle():\n                yield ProgressBar(total=100, gradient=gradient)\n\n    def on_mount(self) -&gt; None:\n        self.query_one(ProgressBar).update(progress=70)\n\n\nif __name__ == \"__main__\":\n    ProgressApp().run()\n</code></pre>"},{"location":"widgets/progress_bar/#custom-styling","title":"Custom Styling","text":"<p>This shows a progress bar with custom styling. Refer to the section below for more information.</p> Indeterminate state39% doneCompletedprogress_bar_styled.pyprogress_bar_styled.tcss <p> StyledProgressBar \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501--%--:--:-- \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> StyledProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250139%00:00:07 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> StyledProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501100%--:--:-- \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center, Middle\nfrom textual.timer import Timer\nfrom textual.widgets import Footer, ProgressBar\n\n\nclass StyledProgressBar(App[None]):\n    BINDINGS = [(\"s\", \"start\", \"Start\")]\n    CSS_PATH = \"progress_bar_styled.tcss\"\n\n    progress_timer: Timer\n    \"\"\"Timer to simulate progress happening.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Center():\n            with Middle():\n                yield ProgressBar()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Set up a timer to simulate progress happening.\"\"\"\n        self.progress_timer = self.set_interval(1 / 10, self.make_progress, pause=True)\n\n    def make_progress(self) -&gt; None:\n        \"\"\"Called automatically to advance the progress bar.\"\"\"\n        self.query_one(ProgressBar).advance(1)\n\n    def action_start(self) -&gt; None:\n        \"\"\"Start the progress tracking.\"\"\"\n        self.query_one(ProgressBar).update(total=100)\n        self.progress_timer.resume()\n\n\nif __name__ == \"__main__\":\n    StyledProgressBar().run()\n</code></pre> <pre><code>Bar &gt; .bar--indeterminate {\n    color: $primary;\n    background: $secondary;\n}\n\nBar &gt; .bar--bar {\n    color: $primary;\n    background: $primary 30%;\n}\n\nBar &gt; .bar--complete {\n    color: $error;\n}\n\nPercentageStatus {\n    text-style: reverse;\n    color: $secondary;\n}\n\nETAStatus {\n    text-style: underline;\n}\n</code></pre>"},{"location":"widgets/progress_bar/#styling-the-progress-bar","title":"Styling the Progress Bar","text":"<p>The progress bar is composed of three sub-widgets that can be styled independently:</p> Widget name ID Description <code>Bar</code> <code>#bar</code> The bar that visually represents the progress made. <code>PercentageStatus</code> <code>#percentage</code> Label that shows the percentage of completion. <code>ETAStatus</code> <code>#eta</code> Label that shows the estimated time to completion."},{"location":"widgets/progress_bar/#bar-component-classes","title":"Bar Component Classes","text":"<p>The bar sub-widget provides the component classes that follow.</p> <p>These component classes let you modify the foreground and background color of the bar in its different states.</p> Class Description <code>bar--bar</code> Style of the bar (may be used to change the color). <code>bar--complete</code> Style of the bar when it's complete. <code>bar--indeterminate</code> Style of the bar when it's in an indeterminate state."},{"location":"widgets/progress_bar/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>percentage</code> <code>float  | None</code> The read-only percentage of progress that has been made. This is <code>None</code> if the <code>total</code> hasn't been set. <code>progress</code> <code>float</code> <code>0</code> The number of steps of progress already made. <code>total</code> <code>float  | None</code> The total number of steps that we are keeping track of."},{"location":"widgets/progress_bar/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/progress_bar/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/progress_bar/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A progress bar widget.</p> <p>The progress bar uses \"steps\" as the measurement unit.</p> Example <pre><code>class MyApp(App):\n    def compose(self):\n        yield ProgressBar(total=100)\n\n    def key_space(self):\n        self.query_one(ProgressBar).advance(5)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>The total number of steps in the progress if known.</p> <code>None</code> <code>bool</code> <p>Whether to show the bar portion of the progress bar.</p> <code>True</code> <code>bool</code> <p>Whether to show the percentage status of the bar.</p> <code>True</code> <code>bool</code> <p>Whether to show the ETA countdown of the progress bar.</p> <code>True</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <code>Clock | None</code> <p>An optional clock object (leave as default unless testing).</p> <code>None</code> <code>Gradient | None</code> <p>An optional Gradient object (will replace CSS styles in the bar).</p> <code>None</code>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(total)","title":"<code>total</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(show_bar)","title":"<code>show_bar</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(show_percentage)","title":"<code>show_percentage</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(show_eta)","title":"<code>show_eta</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(name)","title":"<code>name</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(id)","title":"<code>id</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(clock)","title":"<code>clock</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(gradient)","title":"<code>gradient</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.gradient","title":"gradient  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>gradient = reactive(None)\n</code></pre> <p>Optional gradient object (will replace CSS styling in bar).</p>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.percentage","title":"percentage  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>percentage = reactive[Optional[float]](None)\n</code></pre> <p>The percentage of progress that has been completed.</p> <p>The percentage is a value between 0 and 1 and the returned value is only <code>None</code> if the total progress of the bar hasn't been set yet.</p> Example <pre><code>progress_bar = ProgressBar()\nprint(progress_bar.percentage)  # None\nprogress_bar.update(total=100)\nprogress_bar.advance(50)\nprint(progress_bar.percentage)  # 0.5\n</code></pre>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.progress","title":"progress  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>progress = reactive(0.0)\n</code></pre> <p>The progress so far, in number of steps.</p>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.total","title":"total  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>total = total\n</code></pre> <p>The total number of steps associated with this progress bar, when known.</p> <p>The value <code>None</code> will render an indeterminate progress bar.</p>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.advance","title":"advance","text":"<pre><code>advance(advance=1)\n</code></pre> <p>Advance the progress of the progress bar by the given amount.</p> Example <pre><code>progress_bar.advance(10)  # Advance 10 steps.\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Number of steps to advance progress by.</p> <code>1</code>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.advance(advance)","title":"<code>advance</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update","title":"update","text":"<pre><code>update(*, total=UNUSED, progress=UNUSED, advance=UNUSED)\n</code></pre> <p>Update the progress bar with the given options.</p> Example <pre><code>progress_bar.update(\n    total=200,  # Set new total to 200 steps.\n    progress=50,  # Set the progress to 50 (out of 200).\n)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>None | float | UnusedParameter</code> <p>New total number of steps.</p> <code>UNUSED</code> <code>float | UnusedParameter</code> <p>Set the progress to the given number of steps.</p> <code>UNUSED</code> <code>float | UnusedParameter</code> <p>Advance the progress by this number of steps.</p> <code>UNUSED</code>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update(total)","title":"<code>total</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update(progress)","title":"<code>progress</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update(advance)","title":"<code>advance</code>","text":""},{"location":"widgets/radiobutton/","title":"RadioButton","text":"<p>Added in version 0.13.0</p> <p>A simple radio button which stores a boolean value.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>A radio button is best used with others inside a <code>RadioSet</code>.</p>"},{"location":"widgets/radiobutton/#example","title":"Example","text":"<p>The example below shows radio buttons, used within a <code>RadioSet</code>.</p> Outputradio_button.pyradio_button.tcss <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Picture\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import RadioButton, RadioSet\n\n\nclass RadioChoicesApp(App[None]):\n    CSS_PATH = \"radio_button.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with RadioSet():\n            yield RadioButton(\"Battlestar Galactica\")\n            yield RadioButton(\"Dune 1984\")\n            yield RadioButton(\"Dune 2021\", id=\"focus_me\")\n            yield RadioButton(\"Serenity\", value=True)\n            yield RadioButton(\"Star Trek: The Motion Picture\")\n            yield RadioButton(\"Star Wars: A New Hope\")\n            yield RadioButton(\"The Last Starfighter\")\n            yield RadioButton(\n                \"Total Recall :backhand_index_pointing_right: :red_circle:\"\n            )\n            yield RadioButton(\"Wing Commander\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(RadioSet).focus()\n\n\nif __name__ == \"__main__\":\n    RadioChoicesApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nRadioSet {\n    width: 50%;\n}\n</code></pre>"},{"location":"widgets/radiobutton/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>value</code> <code>bool</code> <code>False</code> The value of the radio button."},{"location":"widgets/radiobutton/#messages","title":"Messages","text":"<ul> <li>RadioButton.Changed</li> </ul>"},{"location":"widgets/radiobutton/#bindings","title":"Bindings","text":"<p>The radio button widget defines the following bindings:</p> Key(s) Description enter, space Toggle the value."},{"location":"widgets/radiobutton/#component-classes","title":"Component Classes","text":"<p>The checkbox widget inherits the following component classes:</p> Class Description <code>toggle--button</code> Targets the toggle button itself. <code>toggle--label</code> Targets the text label of the toggle button."},{"location":"widgets/radiobutton/#see-also","title":"See Also","text":"<ul> <li>RadioSet</li> </ul> <p>               Bases: <code>ToggleButton</code></p> <p>A radio button widget that represents a boolean value.</p> Note <p>A <code>RadioButton</code> is best used within a RadioSet.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label for the toggle.</p> <code>''</code> <code>bool</code> <p>The initial value of the toggle.</p> <code>False</code> <code>bool</code> <p>Should the button come before the label, or after?</p> <code>True</code> <code>str | None</code> <p>The name of the toggle.</p> <code>None</code> <code>str | None</code> <p>The ID of the toggle in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the toggle.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>RenderableType | None = None,</p> <code>None</code>"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(label)","title":"<code>label</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(value)","title":"<code>value</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(button_first)","title":"<code>button_first</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(name)","title":"<code>name</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(id)","title":"<code>id</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.BUTTON_INNER","title":"BUTTON_INNER  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BUTTON_INNER = '\u25cf'\n</code></pre> <p>The character used for the inside of the button.</p>"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed","title":"Changed","text":"<pre><code>Changed(toggle_button, value)\n</code></pre> <p>               Bases: <code>Changed</code></p> <p>Posted when the value of the radio button changes.</p> <p>This message can be handled using an <code>on_radio_button_changed</code> method.</p> <p>Parameters:</p> Name Type Description Default <code>ToggleButton</code> <p>The toggle button sending the message.</p> required <code>bool</code> <p>The value of the toggle button.</p> required"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed(toggle_button)","title":"<code>toggle_button</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed(value)","title":"<code>value</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for Changed.radio_button.</p>"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed.radio_button","title":"radio_button  <code>property</code>","text":"<pre><code>radio_button\n</code></pre> <p>The radio button that was changed.</p>"},{"location":"widgets/radioset/","title":"RadioSet","text":"<p>Added in version 0.13.0</p> <p>A container widget that groups <code>RadioButton</code>s together.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/radioset/#example","title":"Example","text":""},{"location":"widgets/radioset/#simple-example","title":"Simple example","text":"<p>The example below shows two radio sets, one built using a collection of radio buttons, the other a collection of simple strings.</p> Outputradio_set.pyradio_set.tcss <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e\u258a\u2590\u25cf\u258c\u00a0Amanda\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e\u258a\u2590\u25cf\u258c\u00a0Connor\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e\u258a\u2590\u25cf\u258c\u00a0Duncan\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e\u258a\u2590\u25cf\u258c\u00a0Heather\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Pictur\u258e\u258a\u2590\u25cf\u258c\u00a0Joe\u00a0Dawson\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e\u258a\u2590\u25cf\u258c\u00a0Kurgan,\u00a0The\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e\u258a\u2590\u25cf\u258c\u00a0Methos\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e\u258a\u2590\u25cf\u258c\u00a0Rachel\u00a0Ellenstein\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e\u258a\u2590\u25cf\u258c\u00a0Ram\u00edrez\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import RadioButton, RadioSet\n\n\nclass RadioChoicesApp(App[None]):\n    CSS_PATH = \"radio_set.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            # A RadioSet built up from RadioButtons.\n            with RadioSet(id=\"focus_me\"):\n                yield RadioButton(\"Battlestar Galactica\")\n                yield RadioButton(\"Dune 1984\")\n                yield RadioButton(\"Dune 2021\")\n                yield RadioButton(\"Serenity\", value=True)\n                yield RadioButton(\"Star Trek: The Motion Picture\")\n                yield RadioButton(\"Star Wars: A New Hope\")\n                yield RadioButton(\"The Last Starfighter\")\n                yield RadioButton(\n                    \"Total Recall :backhand_index_pointing_right: :red_circle:\"\n                )\n                yield RadioButton(\"Wing Commander\")\n            # A RadioSet built up from a collection of strings.\n            yield RadioSet(\n                \"Amanda\",\n                \"Connor MacLeod\",\n                \"Duncan MacLeod\",\n                \"Heather MacLeod\",\n                \"Joe Dawson\",\n                \"Kurgan, [bold italic red]The[/]\",\n                \"Methos\",\n                \"Rachel Ellenstein\",\n                \"Ram\u00edrez\",\n            )\n\n    def on_mount(self) -&gt; None:\n        self.query_one(\"#focus_me\").focus()\n\n\nif __name__ == \"__main__\":\n    RadioChoicesApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    align: center middle;\n    height: auto;\n}\n\nRadioSet {\n    width: 45%;\n}\n</code></pre>"},{"location":"widgets/radioset/#reacting-to-changes-in-a-radio-set","title":"Reacting to Changes in a Radio Set","text":"<p>Here is an example of using the message to react to changes in a <code>RadioSet</code>:</p> Outputradio_set_changed.pyradio_set_changed.tcss <p> RadioSetChangedApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Pictu\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u2587\u2587 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Pressed\u00a0button\u00a0label:\u00a0Battlestar\u00a0Galactica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Label, RadioButton, RadioSet\n\n\nclass RadioSetChangedApp(App[None]):\n    CSS_PATH = \"radio_set_changed.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with VerticalScroll():\n            with Horizontal():\n                with RadioSet(id=\"focus_me\"):\n                    yield RadioButton(\"Battlestar Galactica\")\n                    yield RadioButton(\"Dune 1984\")\n                    yield RadioButton(\"Dune 2021\")\n                    yield RadioButton(\"Serenity\", value=True)\n                    yield RadioButton(\"Star Trek: The Motion Picture\")\n                    yield RadioButton(\"Star Wars: A New Hope\")\n                    yield RadioButton(\"The Last Starfighter\")\n                    yield RadioButton(\n                        \"Total Recall :backhand_index_pointing_right: :red_circle:\"\n                    )\n                    yield RadioButton(\"Wing Commander\")\n            with Horizontal():\n                yield Label(id=\"pressed\")\n            with Horizontal():\n                yield Label(id=\"index\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(RadioSet).focus()\n\n    def on_radio_set_changed(self, event: RadioSet.Changed) -&gt; None:\n        self.query_one(\"#pressed\", Label).update(\n            f\"Pressed button label: {event.pressed.label}\"\n        )\n        self.query_one(\"#index\", Label).update(\n            f\"Pressed button index: {event.radio_set.pressed_index}\"\n        )\n\n\nif __name__ == \"__main__\":\n    RadioSetChangedApp().run()\n</code></pre> <pre><code>VerticalScroll {\n    align: center middle;\n}\n\nHorizontal {\n    align: center middle;\n    height: auto;\n}\n\nRadioSet {\n    width: 45%;\n}\n</code></pre>"},{"location":"widgets/radioset/#messages","title":"Messages","text":"<ul> <li>RadioSet.Changed</li> </ul>"},{"location":"widgets/radioset/#bindings","title":"Bindings","text":"<p>The <code>RadioSet</code> widget defines the following bindings:</p> Key(s) Description enter, space Toggle the currently-selected button. left, up Select the previous radio button in the set. right, down Select the next radio button in the set."},{"location":"widgets/radioset/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/radioset/#see-also","title":"See Also","text":"<ul> <li>RadioButton</li> </ul> <p>               Bases: <code>Container</code></p> <p>Widget for grouping a collection of radio buttons into a set.</p> <p>When a collection of <code>RadioButton</code>s are grouped with this widget, they will be treated as a mutually-exclusive grouping. If one button is turned on, the previously-on button will be turned off.</p> <p>Parameters:</p> Name Type Description Default <code>str | RadioButton</code> <p>The labels or <code>RadioButton</code>s to group together.</p> <code>()</code> <code>str | None</code> <p>The name of the radio set.</p> <code>None</code> <code>str | None</code> <p>The ID of the radio set in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the radio set.</p> <code>None</code> <code>bool</code> <p>Whether the radio set is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code> Note <p>When a <code>str</code> label is provided, a RadioButton will be created from it.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet(buttons)","title":"<code>buttons</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(name)","title":"<code>name</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(id)","title":"<code>id</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"down,right\", \"next_button\", \"\", show=False),\n    Binding(\n        \"enter,space\", \"toggle_button\", \"Toggle\", show=False\n    ),\n    Binding(\"up,left\", \"previous_button\", \"\", show=False),\n]\n</code></pre> Key(s) Description enter, space Toggle the currently-selected button. left, up Select the previous radio button in the set. right, down Select the next radio button in the set."},{"location":"widgets/radioset/#textual.widgets.RadioSet.pressed_button","title":"pressed_button  <code>property</code>","text":"<pre><code>pressed_button\n</code></pre> <p>The currently-pressed <code>RadioButton</code>, or <code>None</code> if none are pressed.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.pressed_index","title":"pressed_index  <code>property</code>","text":"<pre><code>pressed_index\n</code></pre> <p>The index of the currently-pressed <code>RadioButton</code>, or -1 if none are pressed.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed","title":"Changed","text":"<pre><code>Changed(radio_set, pressed)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the pressed button in the set changes.</p> <p>This message can be handled using an <code>on_radio_set_changed</code> method.</p> <p>Parameters:</p> Name Type Description Default <code>RadioButton</code> <p>The radio button that was pressed.</p> required"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed(pressed)","title":"<code>pressed</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'pressed'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>A reference to the <code>RadioSet</code> that was changed.</p> <p>This is an alias for <code>Changed.radio_set</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.index","title":"index  <code>instance-attribute</code>","text":"<pre><code>index = pressed_index\n</code></pre> <p>The index of the <code>RadioButton</code> that was pressed to make the change.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.pressed","title":"pressed  <code>instance-attribute</code>","text":"<pre><code>pressed = pressed\n</code></pre> <p>The <code>RadioButton</code> that was pressed to make the change.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.radio_set","title":"radio_set  <code>instance-attribute</code>","text":"<pre><code>radio_set = radio_set\n</code></pre> <p>A reference to the <code>RadioSet</code> that was changed.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.action_next_button","title":"action_next_button","text":"<pre><code>action_next_button()\n</code></pre> <p>Navigate to the next button in the set.</p> <p>Note that this will wrap around to the start if at the end.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.action_previous_button","title":"action_previous_button","text":"<pre><code>action_previous_button()\n</code></pre> <p>Navigate to the previous button in the set.</p> <p>Note that this will wrap around to the end if at the start.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.action_toggle_button","title":"action_toggle_button","text":"<pre><code>action_toggle_button()\n</code></pre> <p>Toggle the state of the currently-selected button.</p>"},{"location":"widgets/rich_log/","title":"RichLog","text":"<p>A RichLog is a widget which displays scrollable content that may be appended to in realtime.</p> <p>Call RichLog.write with a string or Rich Renderable to write content to the end of the RichLog. Call RichLog.clear to clear the content.</p> <p>Tip</p> <p>See also Log which is an alternative to <code>RichLog</code> but specialized for simple text.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/rich_log/#example","title":"Example","text":"<p>The example below shows an application showing a <code>RichLog</code> with different kinds of data logged.</p> Outputrich_log.py <p> RichLogApp \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0next(iter_values) \u2502\u00a0\u00a0\u00a0exceptStopIteration: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0return \u2502\u00a0\u00a0\u00a0first\u00a0=True\u2585\u2585 \u2502\u00a0\u00a0\u00a0for\u00a0value\u00a0in\u00a0iter_values: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0False,\u00a0previous_value \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0first\u00a0=False \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0value \u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0True,\u00a0previous_value \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2503\u00a0lane\u00a0\u2503\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0time\u00a0\u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a050.39\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0South\u00a0Africa\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u2502\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.26\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.58\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.73\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u2502\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.84\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Write\u00a0text\u00a0or\u00a0any\u00a0Rich\u00a0renderable! Key(key='H',\u00a0character='H',\u00a0name='upper_h',\u00a0is_printable=True) Key(key='i',\u00a0character='i',\u00a0name='i',\u00a0is_printable=True) </p> <pre><code>import csv\nimport io\n\nfrom rich.syntax import Syntax\nfrom rich.table import Table\n\nfrom textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\nCSV = \"\"\"lane,swimmer,country,time\n4,Joseph Schooling,Singapore,50.39\n2,Michael Phelps,United States,51.14\n5,Chad le Clos,South Africa,51.14\n6,L\u00e1szl\u00f3 Cseh,Hungary,51.14\n3,Li Zhuhao,China,51.26\n8,Mehdy Metella,France,51.58\n7,Tom Shields,United States,51.73\n1,Aleksandr Sadovnikov,Russia,51.84\"\"\"\n\n\nCODE = '''\\\ndef loop_first_last(values: Iterable[T]) -&gt; Iterable[tuple[bool, bool, T]]:\n    \"\"\"Iterate and generate a tuple with a flag for first and last value.\"\"\"\n    iter_values = iter(values)\n    try:\n        previous_value = next(iter_values)\n    except StopIteration:\n        return\n    first = True\n    for value in iter_values:\n        yield first, False, previous_value\n        first = False\n        previous_value = value\n    yield first, True, previous_value\\\n'''\n\n\nclass RichLogApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog(highlight=True, markup=True)\n\n    def on_ready(self) -&gt; None:\n        \"\"\"Called  when the DOM is ready.\"\"\"\n        text_log = self.query_one(RichLog)\n\n        text_log.write(Syntax(CODE, \"python\", indent_guides=True))\n\n        rows = iter(csv.reader(io.StringIO(CSV)))\n        table = Table(*next(rows))\n        for row in rows:\n            table.add_row(*row)\n\n        text_log.write(table)\n        text_log.write(\"[bold magenta]Write text or any Rich renderable!\")\n\n    def on_key(self, event: events.Key) -&gt; None:\n        \"\"\"Write Key events to log.\"\"\"\n        text_log = self.query_one(RichLog)\n        text_log.write(event)\n\n\nif __name__ == \"__main__\":\n    app = RichLogApp()\n    app.run()\n</code></pre>"},{"location":"widgets/rich_log/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlight</code> <code>bool</code> <code>False</code> Automatically highlight content. <code>markup</code> <code>bool</code> <code>False</code> Apply Rich console markup. <code>max_lines</code> <code>int</code> <code>None</code> Maximum number of lines in the log or <code>None</code> for no maximum. <code>min_width</code> <code>int</code> 78 Minimum width of renderables. <code>wrap</code> <code>bool</code> <code>False</code> Enable word wrapping."},{"location":"widgets/rich_log/#messages","title":"Messages","text":"<p>This widget sends no messages.</p>"},{"location":"widgets/rich_log/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/rich_log/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>ScrollView</code></p> <p>A widget for logging text.</p> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>Maximum number of lines in the log or <code>None</code> for no maximum.</p> <code>None</code> <code>int</code> <p>Minimum width of renderables.</p> <code>78</code> <code>bool</code> <p>Enable word wrapping (default is off).</p> <code>False</code> <code>bool</code> <p>Automatically highlight content.</p> <code>False</code> <code>bool</code> <p>Apply Rich console markup.</p> <code>False</code> <code>bool</code> <p>Enable automatic scrolling to end.</p> <code>True</code> <code>str | None</code> <p>The name of the text log.</p> <code>None</code> <code>str | None</code> <p>The ID of the text log in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the text log.</p> <code>None</code> <code>bool</code> <p>Whether the text log is disabled or not.</p> <code>False</code>"},{"location":"widgets/rich_log/#textual.widgets.RichLog(max_lines)","title":"<code>max_lines</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(min_width)","title":"<code>min_width</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(wrap)","title":"<code>wrap</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(highlight)","title":"<code>highlight</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(markup)","title":"<code>markup</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(auto_scroll)","title":"<code>auto_scroll</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(name)","title":"<code>name</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(id)","title":"<code>id</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.auto_scroll","title":"auto_scroll  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_scroll = auto_scroll\n</code></pre> <p>Automatically scroll to the end on write.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.highlight","title":"highlight  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlight = highlight\n</code></pre> <p>Automatically highlight content.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.highlighter","title":"highlighter  <code>instance-attribute</code>","text":"<pre><code>highlighter = ReprHighlighter()\n</code></pre> <p>Rich Highlighter used to highlight content when highlight is True</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.markup","title":"markup  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>markup = markup\n</code></pre> <p>Apply Rich console markup.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.max_lines","title":"max_lines  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>max_lines = max_lines\n</code></pre> <p>Maximum number of lines in the log or <code>None</code> for no maximum.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.min_width","title":"min_width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>min_width = min_width\n</code></pre> <p>Minimum width of renderables.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.wrap","title":"wrap  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>wrap = wrap\n</code></pre> <p>Enable word wrapping.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the text log.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>RichLog</code> instance.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.write","title":"write","text":"<pre><code>write(\n    content,\n    width=None,\n    expand=False,\n    shrink=True,\n    scroll_end=None,\n)\n</code></pre> <p>Write text or a rich renderable.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType | object</code> <p>Rich renderable (or text).</p> required <code>int | None</code> <p>Width to render or <code>None</code> to use optimal width.</p> <code>None</code> <code>bool</code> <p>Enable expand to widget width, or <code>False</code> to use <code>width</code>.</p> <code>False</code> <code>bool</code> <p>Enable shrinking of content to fit width.</p> <code>True</code> <code>bool | None</code> <p>Enable automatic scroll to end, or <code>None</code> to use <code>self.auto_scroll</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>RichLog</code> instance.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(content)","title":"<code>content</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(width)","title":"<code>width</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(expand)","title":"<code>expand</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(shrink)","title":"<code>shrink</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(scroll_end)","title":"<code>scroll_end</code>","text":""},{"location":"widgets/rule/","title":"Rule","text":"<p>A rule widget to separate content, similar to a <code>&lt;hr&gt;</code> HTML tag.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/rule/#examples","title":"Examples","text":""},{"location":"widgets/rule/#horizontal-rule","title":"Horizontal Rule","text":"<p>The default orientation of a rule is horizontal.</p> <p>The example below shows horizontal rules with all the available line styles.</p> Outputhorizontal_rules.pyhorizontal_rules.tcss <p> HorizontalRulesApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0solid\u00a0(default)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0heavy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0thick\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dashed\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0double\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ascii\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ---------------------------------------------------------------- </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Vertical\nfrom textual.widgets import Label, Rule\n\n\nclass HorizontalRulesApp(App):\n    CSS_PATH = \"horizontal_rules.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Vertical():\n            yield Label(\"solid (default)\")\n            yield Rule()\n            yield Label(\"heavy\")\n            yield Rule(line_style=\"heavy\")\n            yield Label(\"thick\")\n            yield Rule(line_style=\"thick\")\n            yield Label(\"dashed\")\n            yield Rule(line_style=\"dashed\")\n            yield Label(\"double\")\n            yield Rule(line_style=\"double\")\n            yield Label(\"ascii\")\n            yield Rule(line_style=\"ascii\")\n\n\nif __name__ == \"__main__\":\n    app = HorizontalRulesApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nVertical {\n    height: auto;\n    width: 80%;\n}\n\nLabel {\n    width: 100%;\n    text-align: center;\n}\n</code></pre>"},{"location":"widgets/rule/#vertical-rule","title":"Vertical Rule","text":"<p>The example below shows vertical rules with all the available line styles.</p> Outputvertical_rules.pyvertical_rules.tcss <p> VerticalRulesApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0solid\u00a0\u00a0\u00a0\u2502\u00a0\u00a0heavy\u00a0\u00a0\u00a0\u2503\u00a0\u00a0thick\u00a0\u00a0\u00a0\u2588\u00a0\u00a0dashed\u00a0\u00a0\u254f\u00a0\u00a0double\u00a0\u00a0\u2551\u00a0\u00a0ascii\u00a0\u00a0\u00a0| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Label, Rule\n\n\nclass VerticalRulesApp(App):\n    CSS_PATH = \"vertical_rules.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            yield Label(\"solid\")\n            yield Rule(orientation=\"vertical\")\n            yield Label(\"heavy\")\n            yield Rule(orientation=\"vertical\", line_style=\"heavy\")\n            yield Label(\"thick\")\n            yield Rule(orientation=\"vertical\", line_style=\"thick\")\n            yield Label(\"dashed\")\n            yield Rule(orientation=\"vertical\", line_style=\"dashed\")\n            yield Label(\"double\")\n            yield Rule(orientation=\"vertical\", line_style=\"double\")\n            yield Label(\"ascii\")\n            yield Rule(orientation=\"vertical\", line_style=\"ascii\")\n\n\nif __name__ == \"__main__\":\n    app = VerticalRulesApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    width: auto;\n    height: 80%;\n}\n\nLabel {\n    width: 6;\n    height: 100%;\n    text-align: center;\n}\n</code></pre>"},{"location":"widgets/rule/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>orientation</code> <code>RuleOrientation</code> <code>\"horizontal\"</code> The orientation of the rule. <code>line_style</code> <code>LineStyle</code> <code>\"solid\"</code> The line style of the rule."},{"location":"widgets/rule/#messages","title":"Messages","text":"<p>This widget sends no messages.</p>"},{"location":"widgets/rule/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/rule/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A rule widget to separate content, similar to a <code>&lt;hr&gt;</code> HTML tag.</p> <p>Parameters:</p> Name Type Description Default <code>RuleOrientation</code> <p>The orientation of the rule.</p> <code>'horizontal'</code> <code>LineStyle</code> <p>The line style of the rule.</p> <code>'solid'</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/rule/#textual.widgets.Rule(orientation)","title":"<code>orientation</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(line_style)","title":"<code>line_style</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(name)","title":"<code>name</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(id)","title":"<code>id</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.line_style","title":"line_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>line_style = line_style\n</code></pre> <p>The line style of the rule.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.orientation","title":"orientation  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>orientation = orientation\n</code></pre> <p>The orientation of the rule.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.horizontal","title":"horizontal  <code>classmethod</code>","text":"<pre><code>horizontal(\n    line_style=\"solid\",\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>Utility constructor for creating a horizontal rule.</p> <p>Parameters:</p> Name Type Description Default <code>LineStyle</code> <p>The line style of the rule.</p> <code>'solid'</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Rule</code> <p>A rule widget with horizontal orientation.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(line_style)","title":"<code>line_style</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(name)","title":"<code>name</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(id)","title":"<code>id</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical","title":"vertical  <code>classmethod</code>","text":"<pre><code>vertical(\n    line_style=\"solid\",\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>Utility constructor for creating a vertical rule.</p> <p>Parameters:</p> Name Type Description Default <code>LineStyle</code> <p>The line style of the rule.</p> <code>'solid'</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Rule</code> <p>A rule widget with vertical orientation.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.vertical(line_style)","title":"<code>line_style</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(name)","title":"<code>name</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(id)","title":"<code>id</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rule/#textual.widgets.rule","title":"textual.widgets.rule","text":""},{"location":"widgets/rule/#textual.widgets.rule.LineStyle","title":"LineStyle  <code>module-attribute</code>","text":"<pre><code>LineStyle = Literal[\n    \"ascii\",\n    \"blank\",\n    \"dashed\",\n    \"double\",\n    \"heavy\",\n    \"hidden\",\n    \"none\",\n    \"solid\",\n    \"thick\",\n]\n</code></pre> <p>The valid line styles of the rule widget.</p>"},{"location":"widgets/rule/#textual.widgets.rule.RuleOrientation","title":"RuleOrientation  <code>module-attribute</code>","text":"<pre><code>RuleOrientation = Literal['horizontal', 'vertical']\n</code></pre> <p>The valid orientations of the rule widget.</p>"},{"location":"widgets/rule/#textual.widgets.rule.InvalidLineStyle","title":"InvalidLineStyle","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised for an invalid rule line style.</p>"},{"location":"widgets/rule/#textual.widgets.rule.InvalidRuleOrientation","title":"InvalidRuleOrientation","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised for an invalid rule orientation.</p>"},{"location":"widgets/select/","title":"Select","text":"<p>Added in version 0.24.0</p> <p>A Select widget is a compact control to allow the user to select between a number of possible options.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>The options in a select control may be passed in to the constructor or set later with set_options. Options should be given as a sequence of tuples consisting of two values: the first is the string (or Rich Renderable) to display in the control and list of options, the second is the value of option.</p> <p>The value of the currently selected option is stored in the <code>value</code> attribute of the widget, and the <code>value</code> attribute of the Changed message.</p>"},{"location":"widgets/select/#typing","title":"Typing","text":"<p>The <code>Select</code> control is a typing Generic which allows you to set the type of the option values. For instance, if the data type for your values is an integer, you would type the widget as follows:</p> <pre><code>options = [(\"First\", 1), (\"Second\", 2)]\nmy_select: Select[int] =  Select(options)\n</code></pre> <p>Note</p> <p>Typing is entirely optional.</p> <p>If you aren't familiar with typing or don't want to worry about it right now, feel free to ignore it.</p>"},{"location":"widgets/select/#examples","title":"Examples","text":""},{"location":"widgets/select/#basic-example","title":"Basic Example","text":"<p>The following example presents a <code>Select</code> with a number of options.</p> OutputOutput (expanded)select_widget.pyselect.tcss <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25bc\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Header, Select\n\nLINES = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\"\"\".splitlines()\n\n\nclass SelectApp(App):\n    CSS_PATH = \"select.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Select((line, line) for line in LINES)\n\n    @on(Select.Changed)\n    def select_changed(self, event: Select.Changed) -&gt; None:\n        self.title = str(event.value)\n\n\nif __name__ == \"__main__\":\n    app = SelectApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center top;\n}\n\nSelect {\n    width: 60;\n    margin: 2;\n}\n</code></pre>"},{"location":"widgets/select/#example-using-class-method","title":"Example using Class Method","text":"<p>The following example presents a <code>Select</code> created using the <code>from_values</code> class method.</p> OutputOutput (expanded)select_from_values_widget.pyselect.tcss <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25bc\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Header, Select\n\nLINES = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\"\"\".splitlines()\n\n\nclass SelectApp(App):\n    CSS_PATH = \"select.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Select.from_values(LINES)\n\n    @on(Select.Changed)\n    def select_changed(self, event: Select.Changed) -&gt; None:\n        self.title = str(event.value)\n\n\nif __name__ == \"__main__\":\n    app = SelectApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center top;\n}\n\nSelect {\n    width: 60;\n    margin: 2;\n}\n</code></pre>"},{"location":"widgets/select/#blank-state","title":"Blank state","text":"<p>The widget <code>Select</code> has an option <code>allow_blank</code> for its constructor. If set to <code>True</code>, the widget may be in a state where there is no selection, in which case its value will be the special constant <code>Select.BLANK</code>. The auxiliary methods <code>Select.is_blank</code> and <code>Select.clear</code> provide a convenient way to check if the widget is in this state and to set this state, respectively.</p>"},{"location":"widgets/select/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>expanded</code> <code>bool</code> <code>False</code> True to expand the options overlay. <code>value</code> <code>SelectType</code> | <code>_NoSelection</code> <code>Select.BLANK</code> Current value of the Select."},{"location":"widgets/select/#messages","title":"Messages","text":"<ul> <li>Select.Changed</li> </ul>"},{"location":"widgets/select/#bindings","title":"Bindings","text":"<p>The Select widget defines the following bindings:</p> Key(s) Description enter,down,space,up Activate the overlay"},{"location":"widgets/select/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Generic[SelectType]</code>, <code>Vertical</code></p> <p>Widget to select from a list of possible options.</p> <p>A Select displays the current selection. When activated with Enter the widget displays an overlay with a list of all possible options.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[tuple[RenderableType, SelectType]]</code> <p>Options to select from. If no options are provided then <code>allow_blank</code> must be set to <code>True</code>.</p> required <code>str</code> <p>Text to show in the control when no option is selected.</p> <code>'Select'</code> <code>bool</code> <p>Enables or disables the ability to have the widget in a state with no selection made, in which case its value is set to the constant <code>Select.BLANK</code>.</p> <code>True</code> <code>SelectType | NoSelection</code> <p>Initial value selected. Should be one of the values in <code>options</code>. If no initial value is set and <code>allow_blank</code> is <code>False</code>, the widget will auto-select the first available option.</p> <code>BLANK</code> <code>str | None</code> <p>The name of the select control.</p> <code>None</code> <code>str | None</code> <p>The ID of the control in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the control.</p> <code>None</code> <code>bool</code> <p>Whether the control is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code> <p>Raises:</p> Type Description <code>EmptySelectError</code> <p>If no options are provided and <code>allow_blank</code> is <code>False</code>.</p>"},{"location":"widgets/select/#textual.widgets.Select(options)","title":"<code>options</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(allow_blank)","title":"<code>allow_blank</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(value)","title":"<code>value</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(name)","title":"<code>name</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(id)","title":"<code>id</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.BINDINGS","title":"BINDINGS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDINGS = [('enter,down,space,up', 'show_overlay')]\n</code></pre> Key(s) Description enter,down,space,up Activate the overlay"},{"location":"widgets/select/#textual.widgets.Select.BLANK","title":"BLANK  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BLANK = BLANK\n</code></pre> <p>Constant to flag that the widget has no selection.</p>"},{"location":"widgets/select/#textual.widgets.Select.expanded","title":"expanded  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>expanded = var(False, init=False)\n</code></pre> <p>True to show the overlay, otherwise False.</p>"},{"location":"widgets/select/#textual.widgets.Select.prompt","title":"prompt  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>prompt = prompt\n</code></pre> <p>The prompt to show when no value is selected.</p>"},{"location":"widgets/select/#textual.widgets.Select.value","title":"value  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>value = var[Union[SelectType, NoSelection]](\n    BLANK, init=False\n)\n</code></pre> <p>The value of the selection.</p> <p>If the widget has no selection, its value will be <code>Select.BLANK</code>. Setting this to an illegal value will raise a <code>InvalidSelectValueError</code> exception.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed","title":"Changed","text":"<pre><code>Changed(select, value)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the select value was changed.</p> <p>This message can be handled using a <code>on_select_changed</code> method.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The Select that sent the message.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed.select","title":"select  <code>instance-attribute</code>","text":"<pre><code>select = select\n</code></pre> <p>The select widget.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value = value\n</code></pre> <p>The value of the Select when it changed.</p>"},{"location":"widgets/select/#textual.widgets.Select.action_show_overlay","title":"action_show_overlay","text":"<pre><code>action_show_overlay()\n</code></pre> <p>Show the overlay.</p>"},{"location":"widgets/select/#textual.widgets.Select.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the selection if <code>allow_blank</code> is <code>True</code>.</p> <p>Raises:</p> Type Description <code>InvalidSelectValueError</code> <p>If <code>allow_blank</code> is set to <code>False</code>.</p>"},{"location":"widgets/select/#textual.widgets.Select.from_values","title":"from_values  <code>classmethod</code>","text":"<pre><code>from_values(\n    values,\n    *,\n    prompt=\"Select\",\n    allow_blank=True,\n    value=BLANK,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Initialize the Select control with values specified by an arbitrary iterable</p> <p>The options shown in the control are computed by calling the built-in <code>str</code> on each value.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[SelectType]</code> <p>Values used to generate options to select from.</p> required <code>str</code> <p>Text to show in the control when no option is selected.</p> <code>'Select'</code> <code>bool</code> <p>Enables or disables the ability to have the widget in a state with no selection made, in which case its value is set to the constant <code>Select.BLANK</code>.</p> <code>True</code> <code>SelectType | NoSelection</code> <p>Initial value selected. Should be one of the values in <code>values</code>. If no initial value is set and <code>allow_blank</code> is <code>False</code>, the widget will auto-select the first available value.</p> <code>BLANK</code> <code>str | None</code> <p>The name of the select control.</p> <code>None</code> <code>str | None</code> <p>The ID of the control in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the control.</p> <code>None</code> <code>bool</code> <p>Whether the control is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Select[SelectType]</code> <p>A new Select widget with the provided values as options.</p>"},{"location":"widgets/select/#textual.widgets.Select.from_values(values)","title":"<code>values</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(allow_blank)","title":"<code>allow_blank</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(value)","title":"<code>value</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(name)","title":"<code>name</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(id)","title":"<code>id</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.is_blank","title":"is_blank","text":"<pre><code>is_blank()\n</code></pre> <p>Indicates whether this <code>Select</code> is blank or not.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if the selection is blank, False otherwise.</p>"},{"location":"widgets/select/#textual.widgets.Select.set_options","title":"set_options","text":"<pre><code>set_options(options)\n</code></pre> <p>Set the options for the Select.</p> <p>This will reset the selection. The selection will be empty, if allowed, otherwise the first valid option is picked.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[tuple[RenderableType, SelectType]]</code> <p>An iterable of tuples containing the renderable to display for each option and the corresponding internal value.</p> required <p>Raises:</p> Type Description <code>EmptySelectError</code> <p>If the options iterable is empty and <code>allow_blank</code> is <code>False</code>.</p>"},{"location":"widgets/select/#textual.widgets.Select.set_options(options)","title":"<code>options</code>","text":""},{"location":"widgets/select/#textual.widgets.select.EmptySelectError","title":"EmptySelectError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when a <code>Select</code> has no options and <code>allow_blank=False</code>.</p>"},{"location":"widgets/select/#textual.widgets.select.InvalidSelectValueError","title":"InvalidSelectValueError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when setting a <code>Select</code> to an unknown option.</p>"},{"location":"widgets/selection_list/","title":"SelectionList","text":"<p>Added in version 0.27.0</p> <p>A widget for showing a vertical list of selectable options.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/selection_list/#typing","title":"Typing","text":"<p>The <code>SelectionList</code> control is a <code>Generic</code>, which allows you to set the type of the selection values. For instance, if the data type for your values is an integer, you would type the widget as follows:</p> <pre><code>selections = [(\"First\", 1), (\"Second\", 2)]\nmy_selection_list: SelectionList[int] =  SelectionList(*selections)\n</code></pre> <p>Note</p> <p>Typing is entirely optional.</p> <p>If you aren't familiar with typing or don't want to worry about it right now, feel free to ignore it.</p>"},{"location":"widgets/selection_list/#examples","title":"Examples","text":"<p>A selection list is designed to be built up of single-line prompts (which can be Rich <code>Text</code>) and an associated unique value.</p>"},{"location":"widgets/selection_list/#selections-as-tuples","title":"Selections as tuples","text":"<p>A selection list can be built with tuples, either of two or three values in length. Each tuple must contain a prompt and a value, and it can also optionally contain a flag for the initial selected state of the option.</p> Outputselection_list_tuples.pyselection_list.tcss <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, SelectionList\n\n\nclass SelectionListApp(App[None]):\n    CSS_PATH = \"selection_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield SelectionList[int](  # (1)!\n            (\"Falken's Maze\", 0, True),\n            (\"Black Jack\", 1),\n            (\"Gin Rummy\", 2),\n            (\"Hearts\", 3),\n            (\"Bridge\", 4),\n            (\"Checkers\", 5),\n            (\"Chess\", 6, True),\n            (\"Poker\", 7),\n            (\"Fighter Combat\", 8, True),\n        )\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        self.query_one(SelectionList).border_title = \"Shall we play some games?\"\n\n\nif __name__ == \"__main__\":\n    SelectionListApp().run()\n</code></pre> <ol> <li>Note that the <code>SelectionList</code> is typed as <code>int</code>, for the type of the values.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nSelectionList {\n    padding: 1;\n    border: solid $accent;\n    width: 80%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/selection_list/#selections-as-selection-objects","title":"Selections as Selection objects","text":"<p>Alternatively, selections can be passed in as <code>Selection</code>s:</p> Outputselection_list_selections.pyselection_list.tcss <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, SelectionList\nfrom textual.widgets.selection_list import Selection\n\n\nclass SelectionListApp(App[None]):\n    CSS_PATH = \"selection_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield SelectionList[int](  # (1)!\n            Selection(\"Falken's Maze\", 0, True),\n            Selection(\"Black Jack\", 1),\n            Selection(\"Gin Rummy\", 2),\n            Selection(\"Hearts\", 3),\n            Selection(\"Bridge\", 4),\n            Selection(\"Checkers\", 5),\n            Selection(\"Chess\", 6, True),\n            Selection(\"Poker\", 7),\n            Selection(\"Fighter Combat\", 8, True),\n        )\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        self.query_one(SelectionList).border_title = \"Shall we play some games?\"\n\n\nif __name__ == \"__main__\":\n    SelectionListApp().run()\n</code></pre> <ol> <li>Note that the <code>SelectionList</code> is typed as <code>int</code>, for the type of the values.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nSelectionList {\n    padding: 1;\n    border: solid $accent;\n    width: 80%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/selection_list/#handling-changes-to-the-selections","title":"Handling changes to the selections","text":"<p>Most of the time, when using the <code>SelectionList</code>, you will want to know when the collection of selected items has changed; this is ideally done using the <code>SelectedChanged</code> message. Here is an example of using that message to update a <code>Pretty</code> with the collection of selected values:</p> Outputselection_list_selections.pyselection_list.tcss <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2510\u250c\u2500\u00a0Selected\u00a0games\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502[\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502'secret_back_door',\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502'a_nice_game_of_chess',\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502'fighter_combat'\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502]\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.events import Mount\nfrom textual.widgets import Footer, Header, Pretty, SelectionList\nfrom textual.widgets.selection_list import Selection\n\n\nclass SelectionListApp(App[None]):\n    CSS_PATH = \"selection_list_selected.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        with Horizontal():\n            yield SelectionList[str](  # (1)!\n                Selection(\"Falken's Maze\", \"secret_back_door\", True),\n                Selection(\"Black Jack\", \"black_jack\"),\n                Selection(\"Gin Rummy\", \"gin_rummy\"),\n                Selection(\"Hearts\", \"hearts\"),\n                Selection(\"Bridge\", \"bridge\"),\n                Selection(\"Checkers\", \"checkers\"),\n                Selection(\"Chess\", \"a_nice_game_of_chess\", True),\n                Selection(\"Poker\", \"poker\"),\n                Selection(\"Fighter Combat\", \"fighter_combat\", True),\n            )\n            yield Pretty([])\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        self.query_one(SelectionList).border_title = \"Shall we play some games?\"\n        self.query_one(Pretty).border_title = \"Selected games\"\n\n    @on(Mount)\n    @on(SelectionList.SelectedChanged)\n    def update_selected_view(self) -&gt; None:\n        self.query_one(Pretty).update(self.query_one(SelectionList).selected)\n\n\nif __name__ == \"__main__\":\n    SelectionListApp().run()\n</code></pre> <ol> <li>Note that the <code>SelectionList</code> is typed as <code>str</code>, for the type of the values.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    width: 80%;\n    height: 80%;\n}\n\nSelectionList {\n    padding: 1;\n    border: solid $accent;\n    width: 1fr;\n}\n\nPretty {\n    width: 1fr;\n    border: solid $accent;\n}\n</code></pre>"},{"location":"widgets/selection_list/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlighted</code> <code>int</code> | <code>None</code> <code>None</code> The index of the highlighted selection. <code>None</code> means nothing is highlighted."},{"location":"widgets/selection_list/#messages","title":"Messages","text":"<ul> <li>SelectionList.SelectionHighlighted</li> <li>SelectionList.SelectionToggled</li> <li>SelectionList.SelectedChanged</li> </ul>"},{"location":"widgets/selection_list/#bindings","title":"Bindings","text":"<p>The selection list widget defines the following bindings:</p> Key(s) Description space Toggle the state of the highlighted selection. <p>It inherits from <code>OptionList</code> and so also inherits the following bindings:</p> Key(s) Description down Move the highlight down. end Move the highlight to the last option. enter Select the current option. home Move the highlight to the first option. pagedown Move the highlight down a page of options. pageup Move the highlight up a page of options. up Move the highlight up."},{"location":"widgets/selection_list/#component-classes","title":"Component Classes","text":"<p>The selection list provides the following component classes:</p> Class Description <code>selection-list--button</code> Target the default button style. <code>selection-list--button-selected</code> Target a selected button style. <code>selection-list--button-highlighted</code> Target a highlighted button style. <code>selection-list--button-selected-highlighted</code> Target a highlighted selected button style. <p>It inherits from <code>OptionList</code> and so also makes use of the following component classes:</p> Class Description <code>option-list--option-disabled</code> Target disabled options. <code>option-list--option-highlighted</code> Target the highlighted option. <code>option-list--option-hover</code> Target an option that has the mouse over it. <code>option-list--option-hover-highlighted</code> Target a highlighted option that has the mouse over it. <code>option-list--separator</code> Target the separators. <p>               Bases: <code>Generic[SelectionType]</code>, <code>OptionList</code></p> <p>A vertical selection list that allows making multiple selections.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | tuple[TextType, SelectionType] | tuple[TextType, SelectionType, bool]</code> <p>The content for the selection list.</p> <code>()</code> <code>str | None</code> <p>The name of the selection list.</p> <code>None</code> <code>str | None</code> <p>The ID of the selection list in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the selection list.</p> <code>None</code> <code>bool</code> <p>Whether the selection list is disabled or not.</p> <code>False</code>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList(*selections)","title":"<code>*selections</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(name)","title":"<code>name</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(id)","title":"<code>id</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.BINDINGS","title":"BINDINGS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDINGS = [Binding('space', 'select')]\n</code></pre> Key(s) Description space Toggle the state of the highlighted selection."},{"location":"widgets/selection_list/#textual.widgets.SelectionList.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"selection-list--button\",\n    \"selection-list--button-selected\",\n    \"selection-list--button-highlighted\",\n    \"selection-list--button-selected-highlighted\",\n}\n</code></pre> Class Description <code>selection-list--button</code> Target the default button style. <code>selection-list--button-selected</code> Target a selected button style. <code>selection-list--button-highlighted</code> Target a highlighted button style. <code>selection-list--button-selected-highlighted</code> Target a highlighted selected button style."},{"location":"widgets/selection_list/#textual.widgets.SelectionList.selected","title":"selected  <code>property</code>","text":"<pre><code>selected\n</code></pre> <p>The selected values.</p> <p>This is a list of all of the values associated with selections in the list that are currently in the selected state.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectedChanged","title":"SelectedChanged  <code>dataclass</code>","text":"<pre><code>SelectedChanged(selection_list)\n</code></pre> <p>               Bases: <code>Generic[MessageSelectionType]</code>, <code>Message</code></p> <p>Message sent when the collection of selected values changes.</p> <p>This is sent regardless of whether the change occurred via user interaction or programmatically the the <code>SelectionList</code> API.</p> <p>When a bulk change occurs, such as through <code>select_all</code> or <code>deselect_all</code>, only a single <code>SelectedChanged</code> message will be sent (rather than one per option).</p> <p>Can be handled using <code>on_selection_list_selected_changed</code> in a subclass of <code>SelectionList</code> or in a parent node in the DOM.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectedChanged.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for <code>selection_list</code>.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectedChanged.selection_list","title":"selection_list  <code>instance-attribute</code>","text":"<pre><code>selection_list\n</code></pre> <p>The <code>SelectionList</code> that sent the message.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionHighlighted","title":"SelectionHighlighted","text":"<pre><code>SelectionHighlighted(selection_list, index)\n</code></pre> <p>               Bases: <code>SelectionMessage[MessageSelectionType]</code></p> <p>Message sent when a selection is highlighted.</p> <p>Can be handled using <code>on_selection_list_selection_highlighted</code> in a subclass of <code>SelectionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>SelectionList[MessageSelectionType]</code> <p>The selection list that owns the selection.</p> required <code>int</code> <p>The index of the selection that the message relates to.</p> required"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionHighlighted(selection_list)","title":"<code>selection_list</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionHighlighted(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage","title":"SelectionMessage","text":"<pre><code>SelectionMessage(selection_list, index)\n</code></pre> <p>               Bases: <code>Generic[MessageSelectionType]</code>, <code>Message</code></p> <p>Base class for all selection messages.</p> <p>Parameters:</p> Name Type Description Default <code>SelectionList[MessageSelectionType]</code> <p>The selection list that owns the selection.</p> required <code>int</code> <p>The index of the selection that the message relates to.</p> required"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage(selection_list)","title":"<code>selection_list</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The selection list that sent the message.</p> <p>This is an alias for <code>SelectionMessage.selection_list</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.selection","title":"selection  <code>instance-attribute</code>","text":"<pre><code>selection = get_option_at_index(index)\n</code></pre> <p>The highlighted selection.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.selection_index","title":"selection_index  <code>instance-attribute</code>","text":"<pre><code>selection_index = index\n</code></pre> <p>The index of the selection that the message relates to.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.selection_list","title":"selection_list  <code>instance-attribute</code>","text":"<pre><code>selection_list = selection_list\n</code></pre> <p>The selection list that sent the message.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionToggled","title":"SelectionToggled","text":"<pre><code>SelectionToggled(selection_list, index)\n</code></pre> <p>               Bases: <code>SelectionMessage[MessageSelectionType]</code></p> <p>Message sent when a selection is toggled.</p> <p>This is only sent when the value is explicitly toggled e.g. via <code>toggle</code> or <code>toggle_all</code>, or via user interaction. If you programmatically set a value to be selected, this message will not be sent, even if it happens to be the opposite of what was originally selected (i.e. setting a True to a False or vice-versa).</p> <p>Since this message indicates a toggle occurring at a per-option level, a message will be sent for each option that is toggled, even when a bulk action is performed (e.g. via <code>toggle_all</code>).</p> <p>Can be handled using <code>on_selection_list_selection_toggled</code> in a subclass of <code>SelectionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>SelectionList[MessageSelectionType]</code> <p>The selection list that owns the selection.</p> required <code>int</code> <p>The index of the selection that the message relates to.</p> required"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionToggled(selection_list)","title":"<code>selection_list</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionToggled(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_option","title":"add_option","text":"<pre><code>add_option(item=None)\n</code></pre> <p>Add a new selection option to the end of the list.</p> <p>Parameters:</p> Name Type Description Default <code>NewOptionListContent | Selection | tuple[TextType, SelectionType] | tuple[TextType, SelectionType, bool]</code> <p>The new item to add.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p> <code>SelectionError</code> <p>If the selection option is of the wrong form.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_option(item)","title":"<code>item</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_options","title":"add_options","text":"<pre><code>add_options(items)\n</code></pre> <p>Add new selection options to the end of the list.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[NewOptionListContent | Selection[SelectionType] | tuple[TextType, SelectionType] | tuple[TextType, SelectionType, bool]]</code> <p>The new items to add.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p> <code>SelectionError</code> <p>If one of the selection options is of the wrong form.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_options(items)","title":"<code>items</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.clear_options","title":"clear_options","text":"<pre><code>clear_options()\n</code></pre> <p>Clear the content of the selection list.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.deselect","title":"deselect","text":"<pre><code>deselect(selection)\n</code></pre> <p>Mark the given selection as not selected.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | SelectionType</code> <p>The selection to mark as not selected.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.deselect(selection)","title":"<code>selection</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.deselect_all","title":"deselect_all","text":"<pre><code>deselect_all()\n</code></pre> <p>Deselect all items.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option","title":"get_option","text":"<pre><code>get_option(option_id)\n</code></pre> <p>Get the selection option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the selection option to get.</p> required <p>Returns:</p> Type Description <code>Selection[SelectionType]</code> <p>The selection option with the ID.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no selection option has the given ID.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option_at_index","title":"get_option_at_index","text":"<pre><code>get_option_at_index(index)\n</code></pre> <p>Get the selection option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the selection option to get.</p> required <p>Returns:</p> Type Description <code>Selection[SelectionType]</code> <p>The selection option at that index.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no selection option with the index.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.select","title":"select","text":"<pre><code>select(selection)\n</code></pre> <p>Mark the given selection as selected.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | SelectionType</code> <p>The selection to mark as selected.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.select(selection)","title":"<code>selection</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.select_all","title":"select_all","text":"<pre><code>select_all()\n</code></pre> <p>Select all items.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.toggle","title":"toggle","text":"<pre><code>toggle(selection)\n</code></pre> <p>Toggle the selected state of the given selection.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | SelectionType</code> <p>The selection to toggle.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.toggle(selection)","title":"<code>selection</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.toggle_all","title":"toggle_all","text":"<pre><code>toggle_all()\n</code></pre> <p>Toggle all items.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.MessageSelectionType","title":"MessageSelectionType  <code>module-attribute</code>","text":"<pre><code>MessageSelectionType = TypeVar('MessageSelectionType')\n</code></pre> <p>The type for the value of a <code>Selection</code> in a <code>SelectionList</code> message.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.SelectionType","title":"SelectionType  <code>module-attribute</code>","text":"<pre><code>SelectionType = TypeVar('SelectionType')\n</code></pre> <p>The type for the value of a <code>Selection</code> in a <code>SelectionList</code></p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection","title":"Selection","text":"<pre><code>Selection(\n    prompt,\n    value,\n    initial_state=False,\n    id=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Generic[SelectionType]</code>, <code>Option</code></p> <p>A selection for a <code>SelectionList</code>.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The prompt for the selection.</p> required <code>SelectionType</code> <p>The value for the selection.</p> required <code>bool</code> <p>The initial selected state of the selection.</p> <code>False</code> <code>str | None</code> <p>The optional ID for the selection.</p> <code>None</code> <code>bool</code> <p>The initial enabled/disabled state. Enabled by default.</p> <code>False</code>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(value)","title":"<code>value</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(initial_state)","title":"<code>initial_state</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(id)","title":"<code>id</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection.initial_state","title":"initial_state  <code>property</code>","text":"<pre><code>initial_state\n</code></pre> <p>The initial selected state for the selection.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection.value","title":"value  <code>property</code>","text":"<pre><code>value\n</code></pre> <p>The value for this selection.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.SelectionError","title":"SelectionError","text":"<p>               Bases: <code>TypeError</code></p> <p>Type of an error raised if a selection is badly-formed.</p>"},{"location":"widgets/sparkline/","title":"Sparkline","text":"<p>Added in version 0.27.0</p> <p>A widget that is used to visually represent numerical data.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/sparkline/#examples","title":"Examples","text":""},{"location":"widgets/sparkline/#basic-example","title":"Basic example","text":"<p>The example below illustrates the relationship between the data, its length, the width of the sparkline, and the number of bars displayed.</p> <p>Tip</p> <p>The sparkline data is split into equally-sized chunks. Each chunk is represented by a bar and the width of the sparkline dictates how many bars there are.</p> Outputsparkline_basic.pysparkline_basic.tcss <p> SparklineBasicApp \u2582\u2584\u2588 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Sparkline\n\ndata = [1, 2, 2, 1, 1, 4, 3, 1, 1, 8, 8, 2]  # (1)!\n\n\nclass SparklineBasicApp(App[None]):\n    CSS_PATH = \"sparkline_basic.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Sparkline(  # (2)!\n            data,  # (3)!\n            summary_function=max,  # (4)!\n        )\n\n\napp = SparklineBasicApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li>We have 12 data points.</li> <li>This sparkline will have its width set to 3 via CSS.</li> <li>The data (12 numbers) will be split across 3 bars, so 4 data points are associated with each bar.</li> <li>Each bar will represent its largest value. The largest value of each chunk is 2, 4, and 8, respectively. That explains why the first bar is half the height of the second and the second bar is half the height of the third.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nSparkline {\n    width: 3;  /* (1)! */\n    margin: 2;\n}\n</code></pre> <ol> <li>By setting the width to 3 we get three buckets.</li> </ol>"},{"location":"widgets/sparkline/#different-summary-functions","title":"Different summary functions","text":"<p>The example below shows a sparkline widget with different summary functions. The summary function is what determines the height of each bar.</p> Outputsparkline.pysparkline.tcss <p> SparklineSummaryFunctionApp \u2582\u2584\u2582\u2584\u2583\u2583\u2586\u2585\u2583\u2582\u2583\u2582\u2583\u2582\u2584\u2587\u2583\u2583\u2587\u2585\u2584\u2583\u2584\u2584\u2583\u2582\u2583\u2582\u2583\u2584\u2584\u2588\u2586\u2582\u2583\u2583\u2585\u2583\u2583\u2584\u2583\u2587\u2583\u2583\u2583\u2584\u2584\u2586\u2583\u2583\u2585\u2582\u2585\u2583\u2584\u2583\u2583\u2584\u2583\u2585\u2586\u2582\u2582\u2583\u2586\u2582\u2583\u2584\u2585\u2584\u2583\u2584\u2584\u2581\u2583\u2582 \u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2582\u2582\u2582\u2582\u2582\u2582\u2581\u2581\u2581\u2581\u2581\u2582\u2581\u2582\u2582\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2581\u2581\u2581\u2581\u2582\u2582\u2582\u2581\u2582\u2581\u2581\u2581\u2581 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <pre><code>import random\nfrom statistics import mean\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Sparkline\n\nrandom.seed(73)\ndata = [random.expovariate(1 / 3) for _ in range(1000)]\n\n\nclass SparklineSummaryFunctionApp(App[None]):\n    CSS_PATH = \"sparkline.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Sparkline(data, summary_function=max)  # (1)!\n        yield Sparkline(data, summary_function=mean)  # (2)!\n        yield Sparkline(data, summary_function=min)  # (3)!\n\n\napp = SparklineSummaryFunctionApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li>Each bar will show the largest value of that bucket.</li> <li>Each bar will show the mean value of that bucket.</li> <li>Each bar will show the smaller value of that bucket.</li> </ol> <pre><code>Sparkline {\n    width: 100%;\n    margin: 2;\n}\n</code></pre>"},{"location":"widgets/sparkline/#changing-the-colors","title":"Changing the colors","text":"<p>The example below shows how to use component classes to change the colors of the sparkline.</p> Outputsparkline_colors.pysparkline_colors.tcss <p> SparklineColorsApp \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 </p> <pre><code>from math import sin\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Sparkline\n\n\nclass SparklineColorsApp(App[None]):\n    CSS_PATH = \"sparkline_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        nums = [abs(sin(x / 3.14)) for x in range(0, 360 * 6, 20)]\n        yield Sparkline(nums, summary_function=max, id=\"fst\")\n        yield Sparkline(nums, summary_function=max, id=\"snd\")\n        yield Sparkline(nums, summary_function=max, id=\"trd\")\n        yield Sparkline(nums, summary_function=max, id=\"frt\")\n        yield Sparkline(nums, summary_function=max, id=\"fft\")\n        yield Sparkline(nums, summary_function=max, id=\"sxt\")\n        yield Sparkline(nums, summary_function=max, id=\"svt\")\n        yield Sparkline(nums, summary_function=max, id=\"egt\")\n        yield Sparkline(nums, summary_function=max, id=\"nnt\")\n        yield Sparkline(nums, summary_function=max, id=\"tnt\")\n\n\napp = SparklineColorsApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>Sparkline {\n    width: 100%;\n    margin: 1;\n}\n\n#fst &gt; .sparkline--max-color {\n    color: $success;\n}\n#fst &gt; .sparkline--min-color {\n    color: $warning;\n}\n\n#snd &gt; .sparkline--max-color {\n    color: $warning;\n}\n#snd &gt; .sparkline--min-color {\n    color: $success;\n}\n\n#trd &gt; .sparkline--max-color {\n    color: $error;\n}\n#trd &gt; .sparkline--min-color {\n    color: $warning;\n}\n\n#frt &gt; .sparkline--max-color {\n    color: $warning;\n}\n#frt &gt; .sparkline--min-color {\n    color: $error;\n}\n\n#fft &gt; .sparkline--max-color {\n    color: $accent;\n}\n#fft &gt; .sparkline--min-color {\n    color: $accent 30%;\n}\n\n#sxt &gt; .sparkline--max-color {\n    color: $accent 30%;\n}\n#sxt &gt; .sparkline--min-color {\n    color: $accent;\n}\n\n#svt &gt; .sparkline--max-color {\n    color: $error;\n}\n#svt &gt; .sparkline--min-color {\n    color: $error 30%;\n}\n\n#egt &gt; .sparkline--max-color {\n    color: $error 30%;\n}\n#egt &gt; .sparkline--min-color {\n    color: $error;\n}\n\n#nnt &gt; .sparkline--max-color {\n    color: $success;\n}\n#nnt &gt; .sparkline--min-color {\n    color: $success 30%;\n}\n\n#tnt &gt; .sparkline--max-color {\n    color: $success 30%;\n}\n#tnt &gt; .sparkline--min-color {\n    color: $success;\n}\n</code></pre>"},{"location":"widgets/sparkline/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>data</code> <code>Sequence[float] | None</code> <code>None</code> The data represented by the sparkline. <code>summary_function</code> <code>Callable[[Sequence[float]], float]</code> <code>max</code> The function that computes the height of each bar."},{"location":"widgets/sparkline/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/sparkline/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/sparkline/#component-classes","title":"Component Classes","text":"<p>The sparkline widget provides the following component classes:</p> <p>Use these component classes to define the two colors that the sparkline interpolates to represent its numerical data.</p> Note <p>These two component classes are used exclusively for the color of the sparkline widget. Setting any style other than <code>color</code> will have no effect.</p> Class Description <code>sparkline--max-color</code> The color used for the larger values in the data. <code>sparkline--min-color</code> The color used for the smaller values in the data. <p>               Bases: <code>Widget</code></p> <p>A sparkline widget to display numerical data.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence[float] | None</code> <p>The initial data to populate the sparkline with.</p> <code>None</code> <code>Callable[[Sequence[float]], float] | None</code> <p>Summarizes bar values into a single value used to represent each bar.</p> <code>None</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/sparkline/#textual.widgets.Sparkline(data)","title":"<code>data</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(summary_function)","title":"<code>summary_function</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(name)","title":"<code>name</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(id)","title":"<code>id</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"sparkline--max-color\",\n    \"sparkline--min-color\",\n}\n</code></pre> <p>Use these component classes to define the two colors that the sparkline interpolates to represent its numerical data.</p> Note <p>These two component classes are used exclusively for the color of the sparkline widget. Setting any style other than <code>color</code> will have no effect.</p> Class Description <code>sparkline--max-color</code> The color used for the larger values in the data. <code>sparkline--min-color</code> The color used for the smaller values in the data."},{"location":"widgets/sparkline/#textual.widgets.Sparkline.data","title":"data  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>data = data\n</code></pre> <p>The data that populates the sparkline.</p>"},{"location":"widgets/sparkline/#textual.widgets.Sparkline.summary_function","title":"summary_function  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>summary_function = reactive[\n    Callable[[Sequence[float]], float]\n](_max_factory)\n</code></pre> <p>The function that computes the value that represents each bar.</p>"},{"location":"widgets/static/","title":"Static","text":"<p>A widget which displays static content. Can be used for Rich renderables and can also be the base for other types of widgets.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/static/#example","title":"Example","text":"<p>The example below shows how you can use a <code>Static</code> widget as a simple text label (but see Label as a way of displaying text).</p> Outputstatic.py <p> StaticApp Hello,\u00a0world! </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass StaticApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, world!\")\n\n\nif __name__ == \"__main__\":\n    app = StaticApp()\n    app.run()\n</code></pre>"},{"location":"widgets/static/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/static/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/static/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/static/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/static/#see-also","title":"See Also","text":"<ul> <li>Label</li> <li>Pretty</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A widget to display simple static content, or use as a base class for more complex widgets.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>A Rich renderable, or string containing console markup.</p> <code>''</code> <code>bool</code> <p>Expand content if required to fill container.</p> <code>False</code> <code>bool</code> <p>Shrink content if required to fill container.</p> <code>False</code> <code>bool</code> <p>True if markup should be parsed and rendered.</p> <code>True</code> <code>str | None</code> <p>Name of widget.</p> <code>None</code> <code>str | None</code> <p>ID of Widget.</p> <code>None</code> <code>str | None</code> <p>Space separated list of class names.</p> <code>None</code> <code>bool</code> <p>Whether the static is disabled or not.</p> <code>False</code>"},{"location":"widgets/static/#textual.widgets.Static(renderable)","title":"<code>renderable</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(expand)","title":"<code>expand</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(shrink)","title":"<code>shrink</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(markup)","title":"<code>markup</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(name)","title":"<code>name</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(id)","title":"<code>id</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/static/#textual.widgets.Static.update","title":"update","text":"<pre><code>update(renderable='')\n</code></pre> <p>Update the widget's content area with new text or Rich renderable.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>A new rich renderable. Defaults to empty renderable;</p> <code>''</code>"},{"location":"widgets/static/#textual.widgets.Static.update(renderable)","title":"<code>renderable</code>","text":""},{"location":"widgets/switch/","title":"Switch","text":"<p>A simple switch widget which stores a boolean value.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/switch/#example","title":"Example","text":"<p>The example below shows switches in various states.</p> Outputswitch.pyswitch.tcss <p> SwitchApp Example\u00a0switches \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0off:\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0on:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0focused:\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0custom:\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Static, Switch\n\n\nclass SwitchApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"[b]Example switches\\n\", classes=\"label\")\n        yield Horizontal(\n            Static(\"off:     \", classes=\"label\"),\n            Switch(animate=False),\n            classes=\"container\",\n        )\n        yield Horizontal(\n            Static(\"on:      \", classes=\"label\"),\n            Switch(value=True),\n            classes=\"container\",\n        )\n\n        focused_switch = Switch()\n        focused_switch.focus()\n        yield Horizontal(\n            Static(\"focused: \", classes=\"label\"), focused_switch, classes=\"container\"\n        )\n\n        yield Horizontal(\n            Static(\"custom:  \", classes=\"label\"),\n            Switch(id=\"custom-design\"),\n            classes=\"container\",\n        )\n\n\napp = SwitchApp(css_path=\"switch.tcss\")\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\n.container {\n    height: auto;\n    width: auto;\n}\n\nSwitch {\n    height: auto;\n    width: auto;\n}\n\n.label {\n    height: 3;\n    content-align: center middle;\n    width: auto;\n}\n\n#custom-design {\n    background: darkslategrey;\n}\n\n#custom-design &gt; .switch--slider {\n    color: dodgerblue;\n    background: darkslateblue;\n}\n</code></pre>"},{"location":"widgets/switch/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>value</code> <code>bool</code> <code>False</code> The value of the switch."},{"location":"widgets/switch/#messages","title":"Messages","text":"<ul> <li>Switch.Changed</li> </ul>"},{"location":"widgets/switch/#bindings","title":"Bindings","text":"<p>The switch widget defines the following bindings:</p> Key(s) Description enter,space Toggle the switch state."},{"location":"widgets/switch/#component-classes","title":"Component Classes","text":"<p>The switch widget provides the following component classes:</p> Class Description <code>switch--slider</code> Targets the slider of the switch."},{"location":"widgets/switch/#additional-notes","title":"Additional Notes","text":"<ul> <li>To remove the spacing around a <code>Switch</code>, set <code>border: none;</code> and <code>padding: 0;</code>.</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A switch widget that represents a boolean value.</p> <p>Can be toggled by clicking on it or through its bindings.</p> <p>The switch widget also contains component classes that enable more customization.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>The initial value of the switch.</p> <code>False</code> <code>bool</code> <p>True if the switch should animate when toggled.</p> <code>True</code> <code>str | None</code> <p>The name of the switch.</p> <code>None</code> <code>str | None</code> <p>The ID of the switch in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the switch.</p> <code>None</code> <code>bool</code> <p>Whether the switch is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/switch/#textual.widgets.Switch(value)","title":"<code>value</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(name)","title":"<code>name</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(id)","title":"<code>id</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"enter,space\", \"toggle_switch\", \"Toggle\", show=False\n    )\n]\n</code></pre> Key(s) Description enter,space Toggle the switch state."},{"location":"widgets/switch/#textual.widgets.Switch.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'switch--slider'}\n</code></pre> Class Description <code>switch--slider</code> Targets the slider of the switch."},{"location":"widgets/switch/#textual.widgets.Switch.value","title":"value  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>value = reactive(False, init=False)\n</code></pre> <p>The value of the switch; <code>True</code> for on and <code>False</code> for off.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.Changed","title":"Changed","text":"<pre><code>Changed(switch, value)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the status of the switch changes.</p> <p>Can be handled using <code>on_switch_changed</code> in a subclass of <code>Switch</code> or in a parent widget in the DOM.</p> <p>Attributes:</p> Name Type Description <code>value</code> <code>bool</code> <p>The value that the switch was changed to.</p> <code>switch</code> <code>Switch</code> <p>The <code>Switch</code> widget that was changed.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for self.switch.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.action_toggle_switch","title":"action_toggle_switch","text":"<pre><code>action_toggle_switch()\n</code></pre> <p>Toggle the state of the switch.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.toggle","title":"toggle","text":"<pre><code>toggle()\n</code></pre> <p>Toggle the switch value.</p> <p>As a result of the value changing, a <code>Switch.Changed</code> message will be posted.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Switch</code> instance.</p>"},{"location":"widgets/tabbed_content/","title":"TabbedContent","text":"<p>Added in version 0.16.0</p> <p>Switch between mutually exclusive content panes via a row of tabs.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>This widget combines the Tabs and ContentSwitcher widgets to create a convenient way of navigating content.</p> <p>Only a single child of TabbedContent is visible at once. Each child has an associated tab which will make it visible and hide the others.</p>"},{"location":"widgets/tabbed_content/#composing","title":"Composing","text":"<p>There are two ways to provide the titles for the tab. You can pass them as positional arguments to the TabbedContent constructor:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent(\"Leto\", \"Jessica\", \"Paul\"):\n        yield Markdown(LETO)\n        yield Markdown(JESSICA)\n        yield Markdown(PAUL)\n</code></pre> <p>Alternatively you can wrap the content in a TabPane widget, which takes the tab title as the first parameter:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent():\n        with TabPane(\"Leto\"):\n            yield Markdown(LETO)\n        with TabPane(\"Jessica\"):\n            yield Markdown(JESSICA)\n        with TabPane(\"Paul\"):\n            yield Markdown(PAUL)\n</code></pre>"},{"location":"widgets/tabbed_content/#switching-tabs","title":"Switching tabs","text":"<p>If you need to programmatically switch tabs, you should provide an <code>id</code> attribute to the <code>TabPane</code>s.</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent():\n        with TabPane(\"Leto\", id=\"leto\"):\n            yield Markdown(LETO)\n        with TabPane(\"Jessica\", id=\"jessica\"):\n            yield Markdown(JESSICA)\n        with TabPane(\"Paul\", id=\"paul\"):\n            yield Markdown(PAUL)\n</code></pre> <p>You can then switch tabs by setting the <code>active</code> reactive attribute:</p> <pre><code># Switch to Jessica tab\nself.query_one(TabbedContent).active = \"jessica\"\n</code></pre> <p>Note</p> <p>If you don't provide <code>id</code> attributes to the tab panes, they will be assigned sequentially starting at <code>tab-1</code> (then <code>tab-2</code> etc).</p>"},{"location":"widgets/tabbed_content/#initial-tab","title":"Initial tab","text":"<p>The first child of <code>TabbedContent</code> will be the initial active tab by default. You can pick a different initial tab by setting the <code>initial</code> argument to the <code>id</code> of the tab:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent(initial=\"jessica\"):\n        with TabPane(\"Leto\", id=\"leto\"):\n            yield Markdown(LETO)\n        with TabPane(\"Jessica\", id=\"jessica\"):\n            yield Markdown(JESSICA)\n        with TabPane(\"Paul\", id=\"paul\"):\n            yield Markdown(PAUL)\n</code></pre>"},{"location":"widgets/tabbed_content/#example","title":"Example","text":"<p>The following example contains a <code>TabbedContent</code> with three tabs.</p> Outputtabbed_content.py <p> TabbedApp LetoJessicaPaul \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. PaulAlia \u2501\u2578\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 First\u00a0child\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0l\u00a0Leto\u00a0\u00a0j\u00a0Jessica\u00a0\u00a0p\u00a0Paul\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, Markdown, TabbedContent, TabPane\n\nLETO = \"\"\"\n# Duke Leto I Atreides\n\nHead of House Atreides.\n\"\"\"\n\nJESSICA = \"\"\"\n# Lady Jessica\n\nBene Gesserit and concubine of Leto, and mother of Paul and Alia.\n\"\"\"\n\nPAUL = \"\"\"\n# Paul Atreides\n\nSon of Leto and Jessica.\n\"\"\"\n\n\nclass TabbedApp(App):\n    \"\"\"An example of tabbed content.\"\"\"\n\n    BINDINGS = [\n        (\"l\", \"show_tab('leto')\", \"Leto\"),\n        (\"j\", \"show_tab('jessica')\", \"Jessica\"),\n        (\"p\", \"show_tab('paul')\", \"Paul\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Compose app with tabbed content.\"\"\"\n        # Footer to show keys\n        yield Footer()\n\n        # Add the TabbedContent widget\n        with TabbedContent(initial=\"jessica\"):\n            with TabPane(\"Leto\", id=\"leto\"):  # First tab\n                yield Markdown(LETO)  # Tab content\n            with TabPane(\"Jessica\", id=\"jessica\"):\n                yield Markdown(JESSICA)\n                with TabbedContent(\"Paul\", \"Alia\"):\n                    yield TabPane(\"Paul\", Label(\"First child\"))\n                    yield TabPane(\"Alia\", Label(\"Second child\"))\n\n            with TabPane(\"Paul\", id=\"paul\"):\n                yield Markdown(PAUL)\n\n    def action_show_tab(self, tab: str) -&gt; None:\n        \"\"\"Switch to a new tab.\"\"\"\n        self.get_child_by_type(TabbedContent).active = tab\n\n\nif __name__ == \"__main__\":\n    app = TabbedApp()\n    app.run()\n</code></pre>"},{"location":"widgets/tabbed_content/#styling","title":"Styling","text":"<p>The <code>TabbedContent</code> widget is composed of two main sub-widgets: a <code>Tabs</code> and a <code>ContentSwitcher</code>; you can style them accordingly.</p> <p>The tabs within the <code>Tabs</code> widget will have prefixed IDs; each ID being the ID of the <code>TabPane</code> the <code>Tab</code> is for, prefixed with <code>--content-tab-</code>. If you wish to style individual tabs within the <code>TabbedContent</code> widget you will need to use that prefix for the <code>Tab</code> IDs.</p> <p>For example, to create a <code>TabbedContent</code> that has red and green labels:</p> Outputtabbed_content.py <p> ColorTabsApp RedGreen \u2501\u2578\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Red!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, TabbedContent, TabPane\n\n\nclass ColorTabsApp(App):\n    CSS = \"\"\"\n    TabbedContent #--content-tab-green {\n        color: green;\n    }\n\n    TabbedContent #--content-tab-red {\n        color: red;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with TabbedContent():\n            with TabPane(\"Red\", id=\"red\"):\n                yield Label(\"Red!\")\n            with TabPane(\"Green\", id=\"green\"):\n                yield Label(\"Green!\")\n\n\nif __name__ == \"__main__\":\n    ColorTabsApp().run()\n</code></pre>"},{"location":"widgets/tabbed_content/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>active</code> <code>str</code> <code>\"\"</code> The <code>id</code> attribute of the active tab. Set this to switch tabs."},{"location":"widgets/tabbed_content/#messages","title":"Messages","text":"<ul> <li>TabbedContent.Cleared</li> <li>TabbedContent.TabActivated</li> </ul>"},{"location":"widgets/tabbed_content/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/tabbed_content/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/tabbed_content/#see-also","title":"See also","text":"<ul> <li>Tabs</li> <li>ContentSwitcher</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A container with associated tabs to toggle content visibility.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Positional argument will be used as title.</p> <code>()</code> <code>str</code> <p>The id of the initial tab, or empty string to select the first tab.</p> <code>''</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>               Bases: <code>Widget</code></p> <p>A container for switchable content, with additional title.</p> <p>This widget is intended to be used with TabbedContent.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Title of the TabPane (will be displayed in a tab label).</p> required <code>Widget</code> <p>Widget to go inside the TabPane.</p> <code>()</code> <code>str | None</code> <p>Optional name for the TabPane.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the TabPane.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the TabPane is disabled or not.</p> <code>False</code>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(*titles)","title":"<code>*titles</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(initial)","title":"<code>initial</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(name)","title":"<code>name</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.active","title":"active  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>active = reactive('', init=False)\n</code></pre> <p>The ID of the active tab, or empty string if none are active.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.active_pane","title":"active_pane  <code>property</code>","text":"<pre><code>active_pane\n</code></pre> <p>The currently active pane, or <code>None</code> if no pane is active.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.tab_count","title":"tab_count  <code>property</code>","text":"<pre><code>tab_count\n</code></pre> <p>Total number of tabs.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared","title":"Cleared","text":"<pre><code>Cleared(tabbed_content)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when no tab pane is active.</p> <p>This can happen if all tab panes are removed or if the currently active tab pane is unset.</p> <p>Parameters:</p> Name Type Description Default <code>TabbedContent</code> <p>The TabbedContent widget.</p> required"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared(tabbed_content)","title":"<code>tabbed_content</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>TabbedContent</code> widget that was cleared of all tab panes.</p> <p>This is an alias for <code>Cleared.tabbed_content</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared.tabbed_content","title":"tabbed_content  <code>instance-attribute</code>","text":"<pre><code>tabbed_content = tabbed_content\n</code></pre> <p>The <code>TabbedContent</code> widget that contains the tab activated.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated","title":"TabActivated","text":"<pre><code>TabActivated(tabbed_content, tab)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the active tab changes.</p> <p>Parameters:</p> Name Type Description Default <code>TabbedContent</code> <p>The TabbedContent widget.</p> required <code>ContentTab</code> <p>The Tab widget that was selected (contains the tab label).</p> required"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated(tabbed_content)","title":"<code>tabbed_content</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'pane'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>TabbedContent</code> widget that contains the tab activated.</p> <p>This is an alias for <code>TabActivated.tabbed_content</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.pane","title":"pane  <code>instance-attribute</code>","text":"<pre><code>pane = get_pane(tab)\n</code></pre> <p>The <code>TabPane</code> widget that was activated by selecting the tab.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.tab","title":"tab  <code>instance-attribute</code>","text":"<pre><code>tab = tab\n</code></pre> <p>The <code>Tab</code> widget that was selected (contains the tab label).</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.tabbed_content","title":"tabbed_content  <code>instance-attribute</code>","text":"<pre><code>tabbed_content = tabbed_content\n</code></pre> <p>The <code>TabbedContent</code> widget that contains the tab activated.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane","title":"add_pane","text":"<pre><code>add_pane(pane, *, before=None, after=None)\n</code></pre> <p>Add a new pane to the tabbed content.</p> <p>Parameters:</p> Name Type Description Default <code>TabPane</code> <p>The pane to add.</p> required <code>TabPane | str | None</code> <p>Optional pane or pane ID to add the pane before.</p> <code>None</code> <code>TabPane | str | None</code> <p>Optional pane or pane ID to add the pane after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the pane to be added.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided an exception is raised.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane(pane)","title":"<code>pane</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane(before)","title":"<code>before</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane(after)","title":"<code>after</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.clear_panes","title":"clear_panes","text":"<pre><code>clear_panes()\n</code></pre> <p>Remove all the panes in the tabbed content.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object which waits for all panes to be removed and the Cleared message to be posted.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.disable_tab","title":"disable_tab","text":"<pre><code>disable_tab(tab_id)\n</code></pre> <p>Disables the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to disable.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.disable_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.enable_tab","title":"enable_tab","text":"<pre><code>enable_tab(tab_id)\n</code></pre> <p>Enables the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to enable.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.enable_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_pane","title":"get_pane","text":"<pre><code>get_pane(pane_id)\n</code></pre> <p>Get the <code>TabPane</code> associated with the given ID or tab.</p> <p>Parameters:</p> Name Type Description Default <code>str | ContentTab</code> <p>The ID of the pane to get, or the Tab it is associated with.</p> required <p>Returns:</p> Type Description <code>TabPane</code> <p>The <code>TabPane</code> associated with the ID or the given tab.</p> <p>Raises:</p> Type Description <code>ValueError</code> <p>Raised if no ID was available.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_pane(pane_id)","title":"<code>pane_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_tab","title":"get_tab","text":"<pre><code>get_tab(pane_id)\n</code></pre> <p>Get the <code>Tab</code> associated with the given ID or <code>TabPane</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | TabPane</code> <p>The ID of the pane, or the pane itself.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The Tab associated with the ID.</p> <p>Raises:</p> Type Description <code>ValueError</code> <p>Raised if no ID was available.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_tab(pane_id)","title":"<code>pane_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.hide_tab","title":"hide_tab","text":"<pre><code>hide_tab(tab_id)\n</code></pre> <p>Hides the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to hide.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.hide_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.remove_pane","title":"remove_pane","text":"<pre><code>remove_pane(pane_id)\n</code></pre> <p>Remove a given pane from the tabbed content.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the pane to remove.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the pane to be removed and the Cleared message to be posted.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.remove_pane(pane_id)","title":"<code>pane_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.show_tab","title":"show_tab","text":"<pre><code>show_tab(tab_id)\n</code></pre> <p>Shows the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to show.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.show_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(title)","title":"<code>title</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(name)","title":"<code>name</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.Disabled","title":"Disabled  <code>dataclass</code>","text":"<pre><code>Disabled(tab_pane)\n</code></pre> <p>               Bases: <code>TabPaneMessage</code></p> <p>Sent when a tab pane is disabled via its reactive <code>disabled</code>.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.Enabled","title":"Enabled  <code>dataclass</code>","text":"<pre><code>Enabled(tab_pane)\n</code></pre> <p>               Bases: <code>TabPaneMessage</code></p> <p>Sent when a tab pane is enabled via its reactive <code>disabled</code>.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.Focused","title":"Focused  <code>dataclass</code>","text":"<pre><code>Focused(tab_pane)\n</code></pre> <p>               Bases: <code>TabPaneMessage</code></p> <p>Sent when a child widget is focused.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.TabPaneMessage","title":"TabPaneMessage  <code>dataclass</code>","text":"<pre><code>TabPaneMessage(tab_pane)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Base class for <code>TabPane</code> messages.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.TabPaneMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tab pane that is the object of this message.</p> <p>This is an alias for the attribute <code>tab_pane</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.TabPaneMessage.tab_pane","title":"tab_pane  <code>instance-attribute</code>","text":"<pre><code>tab_pane\n</code></pre> <p>The <code>TabPane</code> that is he object of this message.</p>"},{"location":"widgets/tabs/","title":"Tabs","text":"<p>Added in version 0.15.0</p> <p>Displays a number of tab headers which may be activated with a click or navigated with cursor keys.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Construct a <code>Tabs</code> widget with strings or Text objects as positional arguments, which will set the labels in the tabs. Here's an example with three tabs:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Tabs(\"First tab\", \"Second tab\", Text.from_markup(\"[u]Third[/u] tab\"))\n</code></pre> <p>This will create Tab widgets internally, with auto-incrementing <code>id</code> attributes (<code>\"tab-1\"</code>, <code>\"tab-2\"</code> etc). You can also supply <code>Tab</code> objects directly in the constructor, which will allow you to explicitly set an <code>id</code>. Here's an example:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Tabs(\n        Tab(\"First tab\", id=\"one\"),\n        Tab(\"Second tab\", id=\"two\"),\n    )\n</code></pre> <p>When the user switches to a tab by clicking or pressing keys, then <code>Tabs</code> will send a Tabs.TabActivated message which contains the <code>tab</code> that was activated. You can then use <code>event.tab.id</code> attribute to perform any related actions.</p>"},{"location":"widgets/tabs/#clearing-tabs","title":"Clearing tabs","text":"<p>Clear tabs by calling the clear method. Clearing the tabs will send a Tabs.TabActivated message with the <code>tab</code> attribute set to <code>None</code>.</p>"},{"location":"widgets/tabs/#adding-tabs","title":"Adding tabs","text":"<p>Tabs may be added dynamically with the add_tab method, which accepts strings, Text, or Tab objects.</p>"},{"location":"widgets/tabs/#example","title":"Example","text":"<p>The following example adds a <code>Tabs</code> widget above a text label. Press A to add a tab, C to clear the tabs.</p> Outputtabs.py <p> TabsApp \u00a0AtreidiesDuke\u00a0Leto\u00a0AtreidesLady\u00a0JessicaGurney\u00a0HalleckBaron\u00a0Vladimir \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aLady\u00a0Jessica\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0a\u00a0Add\u00a0tab\u00a0\u00a0r\u00a0Remove\u00a0active\u00a0tab\u00a0\u00a0c\u00a0Clear\u00a0tabs\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, Tabs\n\nNAMES = [\n    \"Paul Atreidies\",\n    \"Duke Leto Atreides\",\n    \"Lady Jessica\",\n    \"Gurney Halleck\",\n    \"Baron Vladimir Harkonnen\",\n    \"Glossu Rabban\",\n    \"Chani\",\n    \"Silgar\",\n]\n\n\nclass TabsApp(App):\n    \"\"\"Demonstrates the Tabs widget.\"\"\"\n\n    CSS = \"\"\"\n    Tabs {\n        dock: top;\n    }\n    Screen {\n        align: center middle;\n    }\n    Label {\n        margin:1 1;\n        width: 100%;\n        height: 100%;\n        background: $panel;\n        border: tall $primary;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    BINDINGS = [\n        (\"a\", \"add\", \"Add tab\"),\n        (\"r\", \"remove\", \"Remove active tab\"),\n        (\"c\", \"clear\", \"Clear tabs\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Tabs(NAMES[0])\n        yield Label()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Focus the tabs when the app starts.\"\"\"\n        self.query_one(Tabs).focus()\n\n    def on_tabs_tab_activated(self, event: Tabs.TabActivated) -&gt; None:\n        \"\"\"Handle TabActivated message sent by Tabs.\"\"\"\n        label = self.query_one(Label)\n        if event.tab is None:\n            # When the tabs are cleared, event.tab will be None\n            label.visible = False\n        else:\n            label.visible = True\n            label.update(event.tab.label)\n\n    def action_add(self) -&gt; None:\n        \"\"\"Add a new tab.\"\"\"\n        tabs = self.query_one(Tabs)\n        # Cycle the names\n        NAMES[:] = [*NAMES[1:], NAMES[0]]\n        tabs.add_tab(NAMES[0])\n\n    def action_remove(self) -&gt; None:\n        \"\"\"Remove active tab.\"\"\"\n        tabs = self.query_one(Tabs)\n        active_tab = tabs.active_tab\n        if active_tab is not None:\n            tabs.remove_tab(active_tab.id)\n\n    def action_clear(self) -&gt; None:\n        \"\"\"Clear the tabs.\"\"\"\n        self.query_one(Tabs).clear()\n\n\nif __name__ == \"__main__\":\n    app = TabsApp()\n    app.run()\n</code></pre>"},{"location":"widgets/tabs/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>active</code> <code>str</code> <code>\"\"</code> The ID of the active tab. Set this attribute to a tab ID to change the active tab."},{"location":"widgets/tabs/#messages","title":"Messages","text":"<ul> <li>Tabs.TabActivated</li> <li>Tabs.Cleared</li> </ul>"},{"location":"widgets/tabs/#bindings","title":"Bindings","text":"<p>The Tabs widget defines the following bindings:</p> Key(s) Description left Move to the previous tab. right Move to the next tab."},{"location":"widgets/tabs/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A row of tabs.</p> <p>Parameters:</p> Name Type Description Default <code>Tab | TextType</code> <p>Positional argument should be explicit Tab objects, or a str or Text.</p> <code>()</code> <code>str | None</code> <p>ID of the tab which should be active on start.</p> <code>None</code> <code>str | None</code> <p>Optional name for the input widget.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the input is disabled or not.</p> <code>False</code> <p>               Bases: <code>Static</code></p> <p>A Widget to manage a single tab within a Tabs widget.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label to use in the tab.</p> required <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Space separated list of class names.</p> <code>None</code> <code>bool</code> <p>Whether the tab is disabled or not.</p> <code>False</code>"},{"location":"widgets/tabs/#textual.widgets.Tabs(*tabs)","title":"<code>*tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(active)","title":"<code>active</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(name)","title":"<code>name</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"left\", \"previous_tab\", \"Previous tab\", show=False\n    ),\n    Binding(\"right\", \"next_tab\", \"Next tab\", show=False),\n]\n</code></pre> Key(s) Description left Move to the previous tab. right Move to the next tab."},{"location":"widgets/tabs/#textual.widgets.Tabs.active","title":"active  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>active = reactive('', init=False)\n</code></pre> <p>The ID of the active tab, or empty string if none are active.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.active_tab","title":"active_tab  <code>property</code>","text":"<pre><code>active_tab\n</code></pre> <p>The currently active tab, or None if there are no active tabs.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.tab_count","title":"tab_count  <code>property</code>","text":"<pre><code>tab_count\n</code></pre> <p>Total number of tabs.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared","title":"Cleared","text":"<pre><code>Cleared(tabs)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Sent when there are no active tabs.</p> <p>This can occur when Tabs are cleared, if all tabs are hidden, or if the currently active tab is unset.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The tabs widget.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tabs widget which was cleared.</p> <p>This is an alias for <code>Cleared.tabs</code> which is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared.tabs","title":"tabs  <code>instance-attribute</code>","text":"<pre><code>tabs = tabs\n</code></pre> <p>The tabs widget which was cleared.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabActivated","title":"TabActivated","text":"<pre><code>TabActivated(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a new tab is activated.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabActivated(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabActivated(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabDisabled","title":"TabDisabled","text":"<pre><code>TabDisabled(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is disabled.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabDisabled(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabDisabled(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabEnabled","title":"TabEnabled","text":"<pre><code>TabEnabled(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is enabled.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabEnabled(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabEnabled(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabError","title":"TabError","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when there is an error relating to tabs.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabHidden","title":"TabHidden","text":"<pre><code>TabHidden(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is hidden.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabHidden(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabHidden(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage","title":"TabMessage","text":"<pre><code>TabMessage(tabs, tab)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Parent class for all messages that have to do with a specific tab.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'tab'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tabs widget containing the tab that is the object of this message.</p> <p>This is an alias for the attribute <code>tabs</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.tab","title":"tab  <code>instance-attribute</code>","text":"<pre><code>tab = tab\n</code></pre> <p>The tab that is the object of this message.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.tabs","title":"tabs  <code>instance-attribute</code>","text":"<pre><code>tabs = tabs\n</code></pre> <p>The tabs widget containing the tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabShown","title":"TabShown","text":"<pre><code>TabShown(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is shown.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabShown(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabShown(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.action_next_tab","title":"action_next_tab","text":"<pre><code>action_next_tab()\n</code></pre> <p>Make the next tab active.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.action_previous_tab","title":"action_previous_tab","text":"<pre><code>action_previous_tab()\n</code></pre> <p>Make the previous tab active.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab","title":"add_tab","text":"<pre><code>add_tab(tab, *, before=None, after=None)\n</code></pre> <p>Add a new tab to the end of the tab list.</p> <p>Parameters:</p> Name Type Description Default <code>Tab | str | Text</code> <p>A new tab object, or a label (str or Text).</p> required <code>Tab | str | None</code> <p>Optional tab or tab ID to add the tab before.</p> <code>None</code> <code>Tab | str | None</code> <p>Optional tab or tab ID to add the tab after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the tab to be mounted and internal state to be fully updated to reflect the new tab.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>Tabs.TabError</code> will be raised.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab(before)","title":"<code>before</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab(after)","title":"<code>after</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear all the tabs.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An awaitable object that waits for the tabs to be removed.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.disable","title":"disable","text":"<pre><code>disable(tab_id)\n</code></pre> <p>Disable the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to disable.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.disable(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.enable","title":"enable","text":"<pre><code>enable(tab_id)\n</code></pre> <p>Enable the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to enable.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.enable(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.hide","title":"hide","text":"<pre><code>hide(tab_id)\n</code></pre> <p>Hide the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to hide.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.hide(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.remove_tab","title":"remove_tab","text":"<pre><code>remove_tab(tab_or_id)\n</code></pre> <p>Remove a tab.</p> <p>Parameters:</p> Name Type Description Default <code>Tab | str | None</code> <p>The Tab to remove or its id.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the tab to be removed.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.remove_tab(tab_or_id)","title":"<code>tab_or_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.show","title":"show","text":"<pre><code>show(tab_id)\n</code></pre> <p>Show the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to show.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.show(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.validate_active","title":"validate_active","text":"<pre><code>validate_active(active)\n</code></pre> <p>Check id assigned to active attribute is a valid tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.watch_active","title":"watch_active","text":"<pre><code>watch_active(previously_active, active)\n</code></pre> <p>Handle a change to the active tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab(label)","title":"<code>label</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab.label","title":"label  <code>property</code> <code>writable</code>","text":"<pre><code>label\n</code></pre> <p>The label for the tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.label_text","title":"label_text  <code>property</code>","text":"<pre><code>label_text\n</code></pre> <p>Undecorated text of the label.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Clicked","title":"Clicked  <code>dataclass</code>","text":"<pre><code>Clicked(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was clicked.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Disabled","title":"Disabled  <code>dataclass</code>","text":"<pre><code>Disabled(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was disabled.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Enabled","title":"Enabled  <code>dataclass</code>","text":"<pre><code>Enabled(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was enabled.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Relabelled","title":"Relabelled  <code>dataclass</code>","text":"<pre><code>Relabelled(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was relabelled.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.TabMessage","title":"TabMessage  <code>dataclass</code>","text":"<pre><code>TabMessage(tab)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Tab-related messages.</p> <p>These are mostly intended for internal use when interacting with <code>Tabs</code>.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.TabMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tab that is the object of this message.</p> <p>This is an alias for the attribute <code>tab</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.TabMessage.tab","title":"tab  <code>instance-attribute</code>","text":"<pre><code>tab\n</code></pre> <p>The tab that is the object of this message.</p>"},{"location":"widgets/text_area/","title":"TextArea","text":"<p>Tip</p> <p>Added in version 0.38.0. Soft wrapping added in version 0.48.0.</p> <p>A widget for editing text which may span multiple lines. Supports text selection, soft wrapping, optional syntax highlighting with tree-sitter and a variety of keybindings.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/text_area/#guide","title":"Guide","text":""},{"location":"widgets/text_area/#code-editing-vs-plain-text-editing","title":"Code editing vs plain text editing","text":"<p>By default, the <code>TextArea</code> widget is a standard multi-line input box with soft-wrapping enabled.</p> <p>If you're interested in editing code, you may wish to use the <code>TextArea.code_editor</code> convenience constructor. This is a method which, by default, returns a new <code>TextArea</code> with soft-wrapping disabled, line numbers enabled, and the tab key behavior configured to insert <code>\\t</code>.</p>"},{"location":"widgets/text_area/#syntax-highlighting-dependencies","title":"Syntax highlighting dependencies","text":"<p>To enable syntax highlighting, you'll need to install the <code>syntax</code> extra dependencies:</p> pippoetry <pre><code>pip install \"textual[syntax]\"\n</code></pre> <pre><code>poetry add \"textual[syntax]\"\n</code></pre> <p>This will install <code>tree-sitter</code> and <code>tree-sitter-languages</code>. These packages are distributed as binary wheels, so it may limit your applications ability to run in environments where these wheels are not available. After installing, you can set the <code>language</code> reactive attribute on the <code>TextArea</code> to enable highlighting.</p>"},{"location":"widgets/text_area/#loading-text","title":"Loading text","text":"<p>In this example we load some initial text into the <code>TextArea</code>, and set the language to <code>\"python\"</code> to enable syntax highlighting.</p> Outputtext_area_example.py <p> TextAreaExample \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0defhello(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a2\u00a0\u00a0print(\"hello\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a3\u00a0\u00a0\u258e \u258a4\u00a0\u00a0defgoodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0print(\"goodbye\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\nTEXT = \"\"\"\\\ndef hello(name):\n    print(\"hello\" + name)\n\ndef goodbye(name):\n    print(\"goodbye\" + name)\n\"\"\"\n\n\nclass TextAreaExample(App):\n    def compose(self) -&gt; ComposeResult:\n        yield TextArea.code_editor(TEXT, language=\"python\")\n\n\napp = TextAreaExample()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>To update the content programmatically, set the <code>text</code> property to a string value.</p> <p>To update the parser used for syntax highlighting, set the <code>language</code> reactive attribute:</p> <pre><code># Set the language to Markdown\ntext_area.language = \"markdown\"\n</code></pre> <p>Note</p> <p>More built-in languages will be added in the future. For now, you can add your own.</p>"},{"location":"widgets/text_area/#reading-content-from-textarea","title":"Reading content from <code>TextArea</code>","text":"<p>There are a number of ways to retrieve content from the <code>TextArea</code>:</p> <ul> <li>The <code>TextArea.text</code> property returns all content in the text area as a string.</li> <li>The <code>TextArea.selected_text</code> property returns the text corresponding to the current selection.</li> <li>The <code>TextArea.get_text_range</code> method returns the text between two locations.</li> </ul> <p>In all cases, when multiple lines of text are retrieved, the document line separator will be used.</p>"},{"location":"widgets/text_area/#editing-content-inside-textarea","title":"Editing content inside <code>TextArea</code>","text":"<p>The content of the <code>TextArea</code> can be updated using the <code>replace</code> method. This method is the programmatic equivalent of selecting some text and then pasting.</p> <p>Some other convenient methods are available, such as <code>insert</code>, <code>delete</code>, and <code>clear</code>.</p> <p>Tip</p> <p>The <code>TextArea.document.end</code> property returns the location at the end of the document, which might be convenient when editing programmatically.</p>"},{"location":"widgets/text_area/#working-with-the-cursor","title":"Working with the cursor","text":""},{"location":"widgets/text_area/#moving-the-cursor","title":"Moving the cursor","text":"<p>The cursor location is available via the <code>cursor_location</code> property, which represents the location of the cursor as a tuple <code>(row_index, column_index)</code>. These indices are zero-based and represent the position of the cursor in the content. Writing a new value to <code>cursor_location</code> will immediately update the location of the cursor.</p> <pre><code>&gt;&gt;&gt; text_area = TextArea()\n&gt;&gt;&gt; text_area.cursor_location\n(0, 0)\n&gt;&gt;&gt; text_area.cursor_location = (0, 4)\n&gt;&gt;&gt; text_area.cursor_location\n(0, 4)\n</code></pre> <p><code>cursor_location</code> is a simple way to move the cursor programmatically, but it doesn't let us select text.</p>"},{"location":"widgets/text_area/#selecting-text","title":"Selecting text","text":"<p>To select text, we can use the <code>selection</code> reactive attribute. Let's select the first two lines of text in a document by adding <code>text_area.selection = Selection(start=(0, 0), end=(2, 0))</code> to our code:</p> Outputtext_area_selection.py <p> TextAreaSelection \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0defhello(name):\u258e \u258a2\u00a0\u00a0print(\"hello\"+\u00a0name)\u258e \u258a3\u00a0\u00a0\u258e \u258a4\u00a0\u00a0defgoodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0print(\"goodbye\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\nfrom textual.widgets.text_area import Selection\n\nTEXT = \"\"\"\\\ndef hello(name):\n    print(\"hello\" + name)\n\ndef goodbye(name):\n    print(\"goodbye\" + name)\n\"\"\"\n\n\nclass TextAreaSelection(App):\n    def compose(self) -&gt; ComposeResult:\n        text_area = TextArea.code_editor(TEXT, language=\"python\")\n        text_area.selection = Selection(start=(0, 0), end=(2, 0))  # (1)!\n        yield text_area\n\n\napp = TextAreaSelection()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li>Selects the first two lines of text.</li> </ol> <p>Note that selections can happen in both directions, so <code>Selection((2, 0), (0, 0))</code> is also valid.</p> <p>Tip</p> <p>The <code>end</code> attribute of the <code>selection</code> is always equal to <code>TextArea.cursor_location</code>. In other words, the <code>cursor_location</code> attribute is simply a convenience for accessing <code>text_area.selection.end</code>.</p>"},{"location":"widgets/text_area/#more-cursor-utilities","title":"More cursor utilities","text":"<p>There are a number of additional utility methods available for interacting with the cursor.</p>"},{"location":"widgets/text_area/#location-information","title":"Location information","text":"<p>Many properties exist on <code>TextArea</code> which give information about the current cursor location. These properties begin with <code>cursor_at_</code>, and return booleans. For example, <code>cursor_at_start_of_line</code> tells us if the cursor is at a start of line.</p> <p>We can also check the location the cursor would arrive at if we were to move it. For example, <code>get_cursor_right_location</code> returns the location the cursor would move to if it were to move right. A number of similar methods exist, with names like <code>get_cursor_*_location</code>.</p>"},{"location":"widgets/text_area/#cursor-movement-methods","title":"Cursor movement methods","text":"<p>The <code>move_cursor</code> method allows you to move the cursor to a new location while selecting text, or move the cursor and scroll to keep it centered.</p> <pre><code># Move the cursor from its current location to row index 4,\n# column index 8, while selecting all the text between.\ntext_area.move_cursor((4, 8), select=True)\n</code></pre> <p>The <code>move_cursor_relative</code> method offers a very similar interface, but moves the cursor relative to its current location.</p>"},{"location":"widgets/text_area/#common-selections","title":"Common selections","text":"<p>There are some methods available which make common selections easier:</p> <ul> <li><code>select_line</code> selects a line by index. Bound to F6 by default.</li> <li><code>select_all</code> selects all text. Bound to F7 by default.</li> </ul>"},{"location":"widgets/text_area/#themes","title":"Themes","text":"<p><code>TextArea</code> ships with some builtin themes, and you can easily add your own.</p> <p>Themes give you control over the look and feel, including syntax highlighting, the cursor, selection, gutter, and more.</p>"},{"location":"widgets/text_area/#default-theme","title":"Default theme","text":"<p>The default <code>TextArea</code> theme is called <code>css</code>, which takes its values entirely from CSS. This means that the default appearance of the widget fits nicely into a standard Textual application, and looks right on both dark and light mode.</p> <p>When using the <code>css</code> theme, you can make use of component classes to style elements of the <code>TextArea</code>. For example, the CSS code <code>TextArea .text-area--cursor { background: green; }</code> will make the cursor <code>green</code>.</p> <p>More complex applications such as code editors may want to use pre-defined themes such as <code>monokai</code>. This involves using a <code>TextAreaTheme</code> object, which we cover in detail below. This allows full customization of the <code>TextArea</code>, including syntax highlighting, at the code level.</p>"},{"location":"widgets/text_area/#using-builtin-themes","title":"Using builtin themes","text":"<p>The initial theme of the <code>TextArea</code> is determined by the <code>theme</code> parameter.</p> <pre><code># Create a TextArea with the 'dracula' theme.\nyield TextArea.code_editor(\"print(123)\", language=\"python\", theme=\"dracula\")\n</code></pre> <p>You can check which themes are available using the <code>available_themes</code> property.</p> <pre><code>&gt;&gt;&gt; text_area = TextArea()\n&gt;&gt;&gt; print(text_area.available_themes)\n{'css', 'dracula', 'github_light', 'monokai', 'vscode_dark'}\n</code></pre> <p>After creating a <code>TextArea</code>, you can change the theme by setting the <code>theme</code> attribute to one of the available themes.</p> <pre><code>text_area.theme = \"vscode_dark\"\n</code></pre> <p>On setting this attribute the <code>TextArea</code> will immediately refresh to display the updated theme.</p>"},{"location":"widgets/text_area/#custom-themes","title":"Custom themes","text":"<p>Note</p> <p>Custom themes are only relevant for people who are looking to customize syntax highlighting. If you're only editing plain text, and wish to recolor aspects of the <code>TextArea</code>, you should use the provided component classes.</p> <p>Using custom (non-builtin) themes is a two-step process:</p> <ol> <li>Create an instance of <code>TextAreaTheme</code>.</li> <li>Register it using <code>TextArea.register_theme</code>.</li> </ol>"},{"location":"widgets/text_area/#1-creating-a-theme","title":"1. Creating a theme","text":"<p>Let's create a simple theme, <code>\"my_cool_theme\"</code>, which colors the cursor blue, and the cursor line yellow. Our theme will also syntax highlight strings as red, and comments as magenta.</p> <pre><code>from rich.style import Style\nfrom textual.widgets.text_area import TextAreaTheme\n# ...\nmy_theme = TextAreaTheme(\n    # This name will be used to refer to the theme...\n    name=\"my_cool_theme\",\n    # Basic styles such as background, cursor, selection, gutter, etc...\n    cursor_style=Style(color=\"white\", bgcolor=\"blue\"),\n    cursor_line_style=Style(bgcolor=\"yellow\"),\n    # `syntax_styles` is for syntax highlighting.\n    # It maps tokens parsed from the document to Rich styles.\n    syntax_styles={\n        \"string\": Style(color=\"red\"),\n        \"comment\": Style(color=\"magenta\"),\n    }\n)\n</code></pre> <p>Attributes like <code>cursor_style</code> and <code>cursor_line_style</code> apply general language-agnostic styling to the widget. If you choose not to supply a value for one of these attributes, it will be taken from the CSS component styles.</p> <p>The <code>syntax_styles</code> attribute of <code>TextAreaTheme</code> is used for syntax highlighting and depends on the <code>language</code> currently in use. For more details, see syntax highlighting.</p> <p>If you wish to build on an existing theme, you can obtain a reference to it using the <code>TextAreaTheme.get_builtin_theme</code> classmethod:</p> <pre><code>from textual.widgets.text_area import TextAreaTheme\n\nmonokai = TextAreaTheme.get_builtin_theme(\"monokai\")\n</code></pre>"},{"location":"widgets/text_area/#2-registering-a-theme","title":"2. Registering a theme","text":"<p>Our theme can now be registered with the <code>TextArea</code> instance.</p> <pre><code>text_area.register_theme(my_theme)\n</code></pre> <p>After registering a theme, it'll appear in the <code>available_themes</code>:</p> <pre><code>&gt;&gt;&gt; print(text_area.available_themes)\n{'dracula', 'github_light', 'monokai', 'vscode_dark', 'my_cool_theme'}\n</code></pre> <p>We can now switch to it:</p> <pre><code>text_area.theme = \"my_cool_theme\"\n</code></pre> <p>This immediately updates the appearance of the <code>TextArea</code>:</p> <p> TextAreaCustomThemes \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a#\u00a0says\u00a0hello\u258e \u258adef\u00a0hello(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0\u00a0\u00a0\u00a0print(\"hello\"\u00a0+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u258e \u258a#\u00a0says\u00a0goodbye\u2584\u2584\u258e \u258adef\u00a0goodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widgets/text_area/#tab-and-escape-behavior","title":"Tab and Escape behavior","text":"<p>Pressing the Tab key will shift focus to the next widget in your application by default. This matches how other widgets work in Textual.</p> <p>To have Tab insert a <code>\\t</code> character, set the <code>tab_behavior</code> attribute to the string value <code>\"indent\"</code>. While in this mode, you can shift focus by pressing the Esc key.</p>"},{"location":"widgets/text_area/#indentation","title":"Indentation","text":"<p>The character(s) inserted when you press tab is controlled by setting the <code>indent_type</code> attribute to either <code>tabs</code> or <code>spaces</code>.</p> <p>If <code>indent_type == \"spaces\"</code>, pressing Tab will insert up to <code>indent_width</code> spaces in order to align with the next tab stop.</p>"},{"location":"widgets/text_area/#undo-and-redo","title":"Undo and redo","text":"<p><code>TextArea</code> offers <code>undo</code> and <code>redo</code> methods. By default, <code>undo</code> is bound to Ctrl+Z and <code>redo</code> to Ctrl+Y.</p> <p>The <code>TextArea</code> uses a heuristic to place checkpoints after certain types of edit. When you call <code>undo</code>, all of the edits between now and the most recent checkpoint are reverted. You can manually add a checkpoint by calling the <code>TextArea.history.checkpoint()</code> instance method.</p> <p>The undo and redo history uses a stack-based system, where a single item on the stack represents a single checkpoint. In memory-constrained environments, you may wish to reduce the maximum number of checkpoints that can exist. You can do this by passing the <code>max_checkpoints</code> argument to the <code>TextArea</code> constructor.</p>"},{"location":"widgets/text_area/#read-only-mode","title":"Read-only mode","text":"<p><code>TextArea.read_only</code> is a boolean reactive attribute which, if <code>True</code>, will prevent users from modifying content in the <code>TextArea</code>.</p> <p>While <code>read_only=True</code>, you can still modify the content programmatically.</p> <p>While this mode is active, the <code>TextArea</code> receives the <code>-read-only</code> CSS class, which you can use to supply custom styles for read-only mode.</p>"},{"location":"widgets/text_area/#line-separators","title":"Line separators","text":"<p>When content is loaded into <code>TextArea</code>, the content is scanned from beginning to end and the first occurrence of a line separator is recorded.</p> <p>This separator will then be used when content is later read from the <code>TextArea</code> via the <code>text</code> property. The <code>TextArea</code> widget does not support exporting text which contains mixed line endings.</p> <p>Similarly, newline characters pasted into the <code>TextArea</code> will be converted.</p> <p>You can check the line separator of the current document by inspecting <code>TextArea.document.newline</code>:</p> <pre><code>&gt;&gt;&gt; text_area = TextArea()\n&gt;&gt;&gt; text_area.document.newline\n'\\n'\n</code></pre>"},{"location":"widgets/text_area/#line-numbers","title":"Line numbers","text":"<p>The gutter (column on the left containing line numbers) can be toggled by setting the <code>show_line_numbers</code> attribute to <code>True</code> or <code>False</code>.</p> <p>Setting this attribute will immediately repaint the <code>TextArea</code> to reflect the new value.</p> <p>You can also change the start line number (the topmost line number in the gutter) by setting the <code>line_number_start</code> reactive attribute.</p>"},{"location":"widgets/text_area/#extending-textarea","title":"Extending <code>TextArea</code>","text":"<p>Sometimes, you may wish to subclass <code>TextArea</code> to add some extra functionality. In this section, we'll briefly explore how we can extend the widget to achieve common goals.</p>"},{"location":"widgets/text_area/#hooking-into-key-presses","title":"Hooking into key presses","text":"<p>You may wish to hook into certain key presses to inject some functionality. This can be done by over-riding <code>_on_key</code> and adding the required functionality.</p>"},{"location":"widgets/text_area/#example-closing-parentheses-automatically","title":"Example - closing parentheses automatically","text":"<p>Let's extend <code>TextArea</code> to add a feature which automatically closes parentheses and moves the cursor to a sensible location.</p> <pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\n\nclass ExtendedTextArea(TextArea):\n    \"\"\"A subclass of TextArea with parenthesis-closing functionality.\"\"\"\n\n    def _on_key(self, event: events.Key) -&gt; None:\n        if event.character == \"(\":\n            self.insert(\"()\")\n            self.move_cursor_relative(columns=-1)\n            event.prevent_default()\n\n\nclass TextAreaKeyPressHook(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ExtendedTextArea.code_editor(language=\"python\")\n\n\napp = TextAreaKeyPressHook()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>This intercepts the key handler when <code>\"(\"</code> is pressed, and inserts <code>\"()\"</code> instead. It then moves the cursor so that it lands between the open and closing parentheses.</p> <p>Typing \"<code>def hello(</code>\" into the <code>TextArea</code> now results in the bracket automatically being closed:</p> <p> TextAreaKeyPressHook \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0def\u00a0hello()\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widgets/text_area/#advanced-concepts","title":"Advanced concepts","text":""},{"location":"widgets/text_area/#syntax-highlighting","title":"Syntax highlighting","text":"<p>Syntax highlighting inside the <code>TextArea</code> is powered by a library called <code>tree-sitter</code>.</p> <p>Each time you update the document in a <code>TextArea</code>, an internal syntax tree is updated. This tree is frequently queried to find location ranges relevant to syntax highlighting. We give these ranges names, and ultimately map them to Rich styles inside <code>TextAreaTheme.syntax_styles</code>.</p> <p>To illustrate how this works, lets look at how the \"Monokai\" <code>TextAreaTheme</code> highlights Markdown files.</p> <p>When the <code>language</code> attribute is set to <code>\"markdown\"</code>, a highlight query similar to the one below is used (trimmed for brevity).</p> <pre><code>(heading_content) @heading\n(link) @link\n</code></pre> <p>This highlight query maps <code>heading_content</code> nodes returned by the Markdown parser to the name <code>@heading</code>, and <code>link</code> nodes to the name <code>@link</code>.</p> <p>Inside our <code>TextAreaTheme.syntax_styles</code> dict, we can map the name <code>@heading</code> to a Rich style. Here's a snippet from the \"Monokai\" theme which does just that:</p> <pre><code>TextAreaTheme(\n    name=\"monokai\",\n    base_style=Style(color=\"#f8f8f2\", bgcolor=\"#272822\"),\n    gutter_style=Style(color=\"#90908a\", bgcolor=\"#272822\"),\n    # ...\n    syntax_styles={\n        # Colorise @heading and make them bold\n        \"heading\": Style(color=\"#F92672\", bold=True),\n        # Colorise and underline @link\n        \"link\": Style(color=\"#66D9EF\", underline=True),\n        # ...\n    },\n)\n</code></pre> <p>To understand which names can be mapped inside <code>syntax_styles</code>, we recommend looking at the existing themes and highlighting queries (<code>.scm</code> files) in the Textual repository.</p> <p>Tip</p> <p>You may also wish to take a look at the contents of <code>TextArea._highlights</code> on an active <code>TextArea</code> instance to see which highlights have been generated for the open document.</p>"},{"location":"widgets/text_area/#adding-support-for-custom-languages","title":"Adding support for custom languages","text":"<p>To add support for a language to a <code>TextArea</code>, use the <code>register_language</code> method.</p> <p>To register a language, we require two things:</p> <ol> <li>A tree-sitter <code>Language</code> object which contains the grammar for the language.</li> <li>A highlight query which is used for syntax highlighting.</li> </ol>"},{"location":"widgets/text_area/#example-adding-java-support","title":"Example - adding Java support","text":"<p>The easiest way to obtain a <code>Language</code> object is using the <code>py-tree-sitter-languages</code> package. Here's how we can use this package to obtain a reference to a <code>Language</code> object representing Java:</p> <pre><code>from tree_sitter_languages import get_language\njava_language = get_language(\"java\")\n</code></pre> <p>The exact version of the parser used when you call <code>get_language</code> can be checked via the <code>repos.txt</code> file in the version of <code>py-tree-sitter-languages</code> you're using. This file contains links to the GitHub repos and commit hashes of the tree-sitter parsers. In these repos you can often find pre-made highlight queries at <code>queries/highlights.scm</code>, and a file showing all the available node types which can be used in highlight queries at <code>src/node-types.json</code>.</p> <p>Since we're adding support for Java, lets grab the Java highlight query from the repo by following these steps:</p> <ol> <li>Open <code>repos.txt</code> file from the <code>py-tree-sitter-languages</code> repo.</li> <li>Find the link corresponding to <code>tree-sitter-java</code> and go to the repo on GitHub (you may also need to go to the specific commit referenced in <code>repos.txt</code>).</li> <li>Go to <code>queries/highlights.scm</code> to see the example highlight query for Java.</li> </ol> <p>Be sure to check the license in the repo to ensure it can be freely copied.</p> <p>Warning</p> <p>It's important to use a highlight query which is compatible with the parser in use, so pay attention to the commit hash when visiting the repo via <code>repos.txt</code>.</p> <p>We now have our <code>Language</code> and our highlight query, so we can register Java as a language.</p> <pre><code>from pathlib import Path\n\nfrom tree_sitter_languages import get_language\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\njava_language = get_language(\"java\")\njava_highlight_query = (Path(__file__).parent / \"java_highlights.scm\").read_text()\njava_code = \"\"\"\\\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n\"\"\"\n\n\nclass TextAreaCustomLanguage(App):\n    def compose(self) -&gt; ComposeResult:\n        text_area = TextArea.code_editor(text=java_code)\n        text_area.cursor_blink = False\n\n        # Register the Java language and highlight query\n        text_area.register_language(java_language, java_highlight_query)\n\n        # Switch to Java\n        text_area.language = \"java\"\n        yield text_area\n\n\napp = TextAreaCustomLanguage()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>Running our app, we can see that the Java code is highlighted. We can freely edit the text, and the syntax highlighting will update immediately.</p> <p> TextAreaCustomLanguage \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0class\u00a0HelloWorld\u00a0{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a2\u00a0\u00a0publicstatic\u00a0void\u00a0main(String[]\u00a0args)\u00a0{\u00a0\u258e \u258a3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0System.out.println(\"Hello,\u00a0World!\");\u00a0\u258e \u258a4\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Recall that we map names (like <code>@heading</code>) from the tree-sitter highlight query to Rich style objects inside the <code>TextAreaTheme.syntax_styles</code> dictionary. If you notice some highlights are missing after registering a language, the issue may be:</p> <ol> <li>The current <code>TextAreaTheme</code> doesn't contain a mapping for the name in the highlight query. Adding a new key-value pair to <code>syntax_styles</code> should resolve the issue.</li> <li>The highlight query doesn't assign a name to the pattern you expect to be highlighted. In this case you'll need to update the highlight query to assign to the name.</li> </ol> <p>Tip</p> <p>The names assigned in tree-sitter highlight queries are often reused across multiple languages. For example, <code>@string</code> is used in many languages to highlight strings.</p>"},{"location":"widgets/text_area/#navigation-and-wrapping-information","title":"Navigation and wrapping information","text":"<p>If you're building functionality on top of <code>TextArea</code>, it may be useful to inspect the <code>navigator</code> and <code>wrapped_document</code> attributes.</p> <ul> <li><code>navigator</code> is a <code>DocumentNavigator</code> instance which can give us general information about the cursor's location within a document, as well as where the cursor will move to when certain actions are performed.</li> <li><code>wrapped_document</code> is a <code>WrappedDocument</code> instance which can be used to convert document locations to visual locations, taking wrapping into account. It also offers a variety of other convenience methods and properties.</li> </ul> <p>A detailed view of these classes is out of scope, but do note that a lot of the functionality of <code>TextArea</code> exists within them, so inspecting them could be worthwhile.</p>"},{"location":"widgets/text_area/#reactive-attributes","title":"Reactive attributes","text":"Name Type Default Description <code>language</code> <code>str | None</code> <code>None</code> The language to use for syntax highlighting. <code>theme</code> <code>str</code> <code>\"css\"</code> The theme to use. <code>selection</code> <code>Selection</code> <code>Selection()</code> The current selection. <code>show_line_numbers</code> <code>bool</code> <code>False</code> Show or hide line numbers. <code>line_number_start</code> <code>int</code> <code>1</code> The start line number in the gutter. <code>indent_width</code> <code>int</code> <code>4</code> The number of spaces to indent and width of tabs. <code>match_cursor_bracket</code> <code>bool</code> <code>True</code> Enable/disable highlighting matching brackets under cursor. <code>cursor_blink</code> <code>bool</code> <code>True</code> Enable/disable blinking of the cursor when the widget has focus. <code>soft_wrap</code> <code>bool</code> <code>True</code> Enable/disable soft wrapping. <code>read_only</code> <code>bool</code> <code>False</code> Enable/disable read-only mode."},{"location":"widgets/text_area/#messages","title":"Messages","text":"<ul> <li>TextArea.Changed</li> <li>TextArea.SelectionChanged</li> </ul>"},{"location":"widgets/text_area/#bindings","title":"Bindings","text":"<p>The <code>TextArea</code> widget defines the following bindings:</p> Key(s) Description up Move the cursor up. down Move the cursor down. left Move the cursor left. ctrl+left Move the cursor to the start of the word. ctrl+shift+left Move the cursor to the start of the word and select. right Move the cursor right. ctrl+right Move the cursor to the end of the word. ctrl+shift+right Move the cursor to the end of the word and select. home,ctrl+a Move the cursor to the start of the line. end,ctrl+e Move the cursor to the end of the line. shift+home Move the cursor to the start of the line and select. shift+end Move the cursor to the end of the line and select. pageup Move the cursor one page up. pagedown Move the cursor one page down. shift+up Select while moving the cursor up. shift+down Select while moving the cursor down. shift+left Select while moving the cursor left. shift+right Select while moving the cursor right. backspace Delete character to the left of cursor. ctrl+w Delete from cursor to start of the word. delete,ctrl+d Delete character to the right of cursor. ctrl+f Delete from cursor to end of the word. ctrl+x Delete the current line. ctrl+u Delete from cursor to the start of the line. ctrl+k Delete from cursor to the end of the line. f6 Select the current line. f7 Select all text in the document. ctrl+z Undo. ctrl+y Redo."},{"location":"widgets/text_area/#component-classes","title":"Component classes","text":"<p>The <code>TextArea</code> defines component classes that can style various aspects of the widget. Styles from the <code>theme</code> attribute take priority.</p> <p><code>TextArea</code> offers some component classes which can be used to style aspects of the widget.</p> <p>Note that any attributes provided in the chosen <code>TextAreaTheme</code> will take priority here.</p> Class Description <code>text-area--cursor</code> Target the cursor. <code>text-area--gutter</code> Target the gutter (line number column). <code>text-area--cursor-gutter</code> Target the gutter area of the line the cursor is on. <code>text-area--cursor-line</code> Target the line the cursor is on. <code>text-area--selection</code> Target the current selection. <code>text-area--matching-bracket</code> Target matching brackets."},{"location":"widgets/text_area/#see-also","title":"See also","text":"<ul> <li><code>Input</code> - single-line text input widget</li> <li><code>TextAreaTheme</code> - theming the <code>TextArea</code></li> <li><code>DocumentNavigator</code> - guides cursor movement </li> <li><code>WrappedDocument</code> - manages wrapping the document </li> <li><code>EditHistory</code> - manages the undo stack</li> <li>The tree-sitter documentation website.</li> <li>The tree-sitter Python bindings repository.</li> <li><code>py-tree-sitter-languages</code> repository (provides binary wheels for a large variety of tree-sitter languages).</li> </ul>"},{"location":"widgets/text_area/#additional-notes","title":"Additional notes","text":"<ul> <li>To remove the outline effect when the <code>TextArea</code> is focused, you can set <code>border: none; padding: 0;</code> in your CSS.</li> </ul> <p>               Bases: <code>ScrollView</code></p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The initial text to load into the TextArea.</p> <code>''</code> <code>str | None</code> <p>The language to use.</p> <code>None</code> <code>str</code> <p>The theme to use.</p> <code>'css'</code> <code>bool</code> <p>Enable soft wrapping.</p> <code>True</code> <code>Literal['focus', 'indent']</code> <p>If 'focus', pressing tab will switch focus. If 'indent', pressing tab will insert a tab.</p> <code>'focus'</code> <code>bool</code> <p>Enable read-only mode. This prevents edits using the keyboard.</p> <code>False</code> <code>bool</code> <p>Show line numbers on the left edge.</p> <code>False</code> <code>int</code> <p>What line number to start on.</p> <code>1</code> <code>int</code> <p>The maximum number of undo history checkpoints to retain.</p> <code>50</code> <code>str | None</code> <p>The name of the <code>TextArea</code> widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget, used to refer to it from Textual CSS.</p> <code>None</code> <code>str | None</code> <p>One or more Textual CSS compatible class names separated by spaces.</p> <code>None</code> <code>bool</code> <p>True if the widget is disabled.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(theme)","title":"<code>theme</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(soft_wrap)","title":"<code>soft_wrap</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(tab_behavior)","title":"<code>tab_behavior</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(read_only)","title":"<code>read_only</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(show_line_numbers)","title":"<code>show_line_numbers</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(line_number_start)","title":"<code>line_number_start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(max_checkpoints)","title":"<code>max_checkpoints</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(name)","title":"<code>name</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(id)","title":"<code>id</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.BINDINGS","title":"BINDINGS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"up\", \"cursor_up\", \"cursor up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"cursor down\", show=False\n    ),\n    Binding(\n        \"left\", \"cursor_left\", \"cursor left\", show=False\n    ),\n    Binding(\n        \"right\", \"cursor_right\", \"cursor right\", show=False\n    ),\n    Binding(\n        \"ctrl+left\",\n        \"cursor_word_left\",\n        \"cursor word left\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+right\",\n        \"cursor_word_right\",\n        \"cursor word right\",\n        show=False,\n    ),\n    Binding(\n        \"home,ctrl+a\",\n        \"cursor_line_start\",\n        \"cursor line start\",\n        show=False,\n    ),\n    Binding(\n        \"end,ctrl+e\",\n        \"cursor_line_end\",\n        \"cursor line end\",\n        show=False,\n    ),\n    Binding(\n        \"pageup\",\n        \"cursor_page_up\",\n        \"cursor page up\",\n        show=False,\n    ),\n    Binding(\n        \"pagedown\",\n        \"cursor_page_down\",\n        \"cursor page down\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+shift+left\",\n        \"cursor_word_left(True)\",\n        \"cursor left word select\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+shift+right\",\n        \"cursor_word_right(True)\",\n        \"cursor right word select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+home\",\n        \"cursor_line_start(True)\",\n        \"cursor line start select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+end\",\n        \"cursor_line_end(True)\",\n        \"cursor line end select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+up\",\n        \"cursor_up(True)\",\n        \"cursor up select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+down\",\n        \"cursor_down(True)\",\n        \"cursor down select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+left\",\n        \"cursor_left(True)\",\n        \"cursor left select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+right\",\n        \"cursor_right(True)\",\n        \"cursor right select\",\n        show=False,\n    ),\n    Binding(\"f6\", \"select_line\", \"select line\", show=False),\n    Binding(\"f7\", \"select_all\", \"select all\", show=False),\n    Binding(\n        \"backspace\",\n        \"delete_left\",\n        \"delete left\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+w\",\n        \"delete_word_left\",\n        \"delete left to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"delete,ctrl+d\",\n        \"delete_right\",\n        \"delete right\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+f\",\n        \"delete_word_right\",\n        \"delete right to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+x\", \"delete_line\", \"delete line\", show=False\n    ),\n    Binding(\n        \"ctrl+u\",\n        \"delete_to_start_of_line\",\n        \"delete to line start\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+k\",\n        \"delete_to_end_of_line_or_delete_line\",\n        \"delete to line end\",\n        show=False,\n    ),\n    Binding(\"ctrl+z\", \"undo\", \"Undo\", show=False),\n    Binding(\"ctrl+y\", \"redo\", \"Redo\", show=False),\n]\n</code></pre> Key(s) Description up Move the cursor up. down Move the cursor down. left Move the cursor left. ctrl+left Move the cursor to the start of the word. ctrl+shift+left Move the cursor to the start of the word and select. right Move the cursor right. ctrl+right Move the cursor to the end of the word. ctrl+shift+right Move the cursor to the end of the word and select. home,ctrl+a Move the cursor to the start of the line. end,ctrl+e Move the cursor to the end of the line. shift+home Move the cursor to the start of the line and select. shift+end Move the cursor to the end of the line and select. pageup Move the cursor one page up. pagedown Move the cursor one page down. shift+up Select while moving the cursor up. shift+down Select while moving the cursor down. shift+left Select while moving the cursor left. shift+right Select while moving the cursor right. backspace Delete character to the left of cursor. ctrl+w Delete from cursor to start of the word. delete,ctrl+d Delete character to the right of cursor. ctrl+f Delete from cursor to end of the word. ctrl+x Delete the current line. ctrl+u Delete from cursor to the start of the line. ctrl+k Delete from cursor to the end of the line. f6 Select the current line. f7 Select all text in the document. ctrl+z Undo. ctrl+y Redo."},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"text-area--cursor\",\n    \"text-area--gutter\",\n    \"text-area--cursor-gutter\",\n    \"text-area--cursor-line\",\n    \"text-area--selection\",\n    \"text-area--matching-bracket\",\n}\n</code></pre> <p><code>TextArea</code> offers some component classes which can be used to style aspects of the widget.</p> <p>Note that any attributes provided in the chosen <code>TextAreaTheme</code> will take priority here.</p> Class Description <code>text-area--cursor</code> Target the cursor. <code>text-area--gutter</code> Target the gutter (line number column). <code>text-area--cursor-gutter</code> Target the gutter area of the line the cursor is on. <code>text-area--cursor-line</code> Target the line the cursor is on. <code>text-area--selection</code> Target the current selection. <code>text-area--matching-bracket</code> Target matching brackets."},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.available_languages","title":"available_languages  <code>property</code>","text":"<pre><code>available_languages\n</code></pre> <p>A list of the names of languages available to the <code>TextArea</code>.</p> <p>The values in this list can be assigned to the <code>language</code> reactive attribute of <code>TextArea</code>.</p> <p>The returned list contains the builtin languages plus those registered via the <code>register_language</code> method. Builtin languages will be listed before user-registered languages, but there are no other ordering guarantees.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.available_themes","title":"available_themes  <code>property</code>","text":"<pre><code>available_themes\n</code></pre> <p>A list of the names of the themes available to the <code>TextArea</code>.</p> <p>The values in this list can be assigned <code>theme</code> reactive attribute of <code>TextArea</code>.</p> <p>You can retrieve the full specification for a theme by passing one of the strings from this list into <code>TextAreaTheme.get_by_name(theme_name: str)</code>.</p> <p>Alternatively, you can directly retrieve a list of <code>TextAreaTheme</code> objects (which contain the full theme specification) by calling <code>TextAreaTheme.builtin_themes()</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_end_of_line","title":"cursor_at_end_of_line  <code>property</code>","text":"<pre><code>cursor_at_end_of_line\n</code></pre> <p>True if and only if the cursor is at the end of a row.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_end_of_text","title":"cursor_at_end_of_text  <code>property</code>","text":"<pre><code>cursor_at_end_of_text\n</code></pre> <p>True if and only if the cursor is at the very end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_first_line","title":"cursor_at_first_line  <code>property</code>","text":"<pre><code>cursor_at_first_line\n</code></pre> <p>True if and only if the cursor is on the first line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_last_line","title":"cursor_at_last_line  <code>property</code>","text":"<pre><code>cursor_at_last_line\n</code></pre> <p>True if and only if the cursor is on the last line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_start_of_line","title":"cursor_at_start_of_line  <code>property</code>","text":"<pre><code>cursor_at_start_of_line\n</code></pre> <p>True if and only if the cursor is at column 0.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_start_of_text","title":"cursor_at_start_of_text  <code>property</code>","text":"<pre><code>cursor_at_start_of_text\n</code></pre> <p>True if and only if the cursor is at location (0, 0)</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_blink","title":"cursor_blink  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_blink = reactive(True, init=False)\n</code></pre> <p>True if the cursor should blink.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_location","title":"cursor_location  <code>property</code> <code>writable</code>","text":"<pre><code>cursor_location\n</code></pre> <p>The current location of the cursor in the document.</p> <p>This is a utility for accessing the <code>end</code> of <code>TextArea.selection</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_screen_offset","title":"cursor_screen_offset  <code>property</code>","text":"<pre><code>cursor_screen_offset\n</code></pre> <p>The offset of the cursor relative to the screen.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.document","title":"document  <code>instance-attribute</code>","text":"<pre><code>document = Document(text)\n</code></pre> <p>The document this widget is currently editing.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.gutter_width","title":"gutter_width  <code>property</code>","text":"<pre><code>gutter_width\n</code></pre> <p>The width of the gutter (the left column containing line numbers).</p> <p>Returns:</p> Type Description <code>int</code> <p>The cell-width of the line number column. If <code>show_line_numbers</code> is <code>False</code> returns 0.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.history","title":"history  <code>instance-attribute</code>","text":"<pre><code>history = EditHistory(\n    max_checkpoints=max_checkpoints,\n    checkpoint_timer=2.0,\n    checkpoint_max_characters=100,\n)\n</code></pre> <p>A stack (the end of the list is the top of the stack) for tracking edits.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.indent_type","title":"indent_type  <code>instance-attribute</code>","text":"<pre><code>indent_type = 'spaces'\n</code></pre> <p>Whether to indent using tabs or spaces.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.indent_width","title":"indent_width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>indent_width = reactive(4, init=False)\n</code></pre> <p>The width of tabs or the multiple of spaces to align to on pressing the <code>tab</code> key.</p> <p>If the document currently open contains tabs that are currently visible on screen, altering this value will immediately change the display width of the visible tabs.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.is_syntax_aware","title":"is_syntax_aware  <code>property</code>","text":"<pre><code>is_syntax_aware\n</code></pre> <p>True if the TextArea is currently syntax aware - i.e. it's parsing document content.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.language","title":"language  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>language = language\n</code></pre> <p>The language to use.</p> <p>This must be set to a valid, non-None value for syntax highlighting to work.</p> <p>If the value is a string, a built-in language parser will be used if available.</p> <p>If you wish to use an unsupported language, you'll have to register it first using  <code>TextArea.register_language</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.line_number_start","title":"line_number_start  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>line_number_start = reactive(1, init=False)\n</code></pre> <p>The line number the first line should be.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.match_cursor_bracket","title":"match_cursor_bracket  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>match_cursor_bracket = reactive(True, init=False)\n</code></pre> <p>If the cursor is at a bracket, highlight the matching bracket (if found).</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.matching_bracket_location","title":"matching_bracket_location  <code>property</code>","text":"<pre><code>matching_bracket_location\n</code></pre> <p>The location of the matching bracket, if there is one.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.navigator","title":"navigator  <code>instance-attribute</code>","text":"<pre><code>navigator = DocumentNavigator(wrapped_document)\n</code></pre> <p>Queried to determine where the cursor should move given a navigation action, accounting for wrapping etc.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.read_only","title":"read_only  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>read_only = reactive(False)\n</code></pre> <p>True if the content is read-only.</p> <p>Read-only means end users cannot insert, delete or replace content.</p> <p>The document can still be edited programmatically via the API.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.selected_text","title":"selected_text  <code>property</code>","text":"<pre><code>selected_text\n</code></pre> <p>The text between the start and end points of the current selection.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.selection","title":"selection  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>selection = reactive(\n    Selection(), init=False, always_update=True\n)\n</code></pre> <p>The selection start and end locations (zero-based line_index, offset).</p> <p>This represents the cursor location and the current selection.</p> <p>The <code>Selection.end</code> always refers to the cursor location.</p> <p>If no text is selected, then <code>Selection.end == Selection.start</code> is True.</p> <p>The text selected in the document is available via the <code>TextArea.selected_text</code> property.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.show_line_numbers","title":"show_line_numbers  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_line_numbers = reactive(False, init=False)\n</code></pre> <p>True to show the line number column on the left edge, otherwise False.</p> <p>Changing this value will immediately re-render the <code>TextArea</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.soft_wrap","title":"soft_wrap  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>soft_wrap = reactive(True, init=False)\n</code></pre> <p>True if text should soft wrap.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.text","title":"text  <code>property</code> <code>writable</code>","text":"<pre><code>text\n</code></pre> <p>The entire text content of the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.theme","title":"theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>theme = theme\n</code></pre> <p>The name of the theme to use.</p> <p>Themes must be registered using  <code>TextArea.register_theme</code> before they can be used.</p> <p>Syntax highlighting is only possible when the <code>language</code> attribute is set.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.wrap_width","title":"wrap_width  <code>property</code>","text":"<pre><code>wrap_width\n</code></pre> <p>The width which gets used when the document wraps.</p> <p>Accounts for gutter, scrollbars, etc.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.wrapped_document","title":"wrapped_document  <code>instance-attribute</code>","text":"<pre><code>wrapped_document = WrappedDocument(document)\n</code></pre> <p>The wrapped view of the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.Changed","title":"Changed  <code>dataclass</code>","text":"<pre><code>Changed(text_area)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the content inside the TextArea changes.</p> <p>Handle this message using the <code>on</code> decorator - <code>@on(TextArea.Changed)</code> or a method named <code>on_text_area_changed</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>TextArea</code> that sent this message.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.Changed.text_area","title":"text_area  <code>instance-attribute</code>","text":"<pre><code>text_area\n</code></pre> <p>The <code>text_area</code> that sent this message.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.SelectionChanged","title":"SelectionChanged  <code>dataclass</code>","text":"<pre><code>SelectionChanged(selection, text_area)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the selection changes.</p> <p>This includes when the cursor moves or when text is selected.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.SelectionChanged.selection","title":"selection  <code>instance-attribute</code>","text":"<pre><code>selection\n</code></pre> <p>The new selection.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.SelectionChanged.text_area","title":"text_area  <code>instance-attribute</code>","text":"<pre><code>text_area\n</code></pre> <p>The <code>text_area</code> that sent this message.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down(select=False)\n</code></pre> <p>Move the cursor down one cell.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_down(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_left","title":"action_cursor_left","text":"<pre><code>action_cursor_left(select=False)\n</code></pre> <p>Move the cursor one location to the left.</p> <p>If the cursor is at the left edge of the document, try to move it to the end of the previous line.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_left(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_line_end","title":"action_cursor_line_end","text":"<pre><code>action_cursor_line_end(select=False)\n</code></pre> <p>Move the cursor to the end of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_line_start","title":"action_cursor_line_start","text":"<pre><code>action_cursor_line_start(select=False)\n</code></pre> <p>Move the cursor to the start of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_page_down","title":"action_cursor_page_down","text":"<pre><code>action_cursor_page_down()\n</code></pre> <p>Move the cursor and scroll down one page.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_page_up","title":"action_cursor_page_up","text":"<pre><code>action_cursor_page_up()\n</code></pre> <p>Move the cursor and scroll up one page.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_right","title":"action_cursor_right","text":"<pre><code>action_cursor_right(select=False)\n</code></pre> <p>Move the cursor one location to the right.</p> <p>If the cursor is at the end of a line, attempt to go to the start of the next line.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_right(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up(select=False)\n</code></pre> <p>Move the cursor up one cell.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_up(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_word_left","title":"action_cursor_word_left","text":"<pre><code>action_cursor_word_left(select=False)\n</code></pre> <p>Move the cursor left by a single word, skipping trailing whitespace.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether to select while moving the cursor.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_word_left(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_word_right","title":"action_cursor_word_right","text":"<pre><code>action_cursor_word_right(select=False)\n</code></pre> <p>Move the cursor right by a single word, skipping leading whitespace.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_left","title":"action_delete_left","text":"<pre><code>action_delete_left()\n</code></pre> <p>Deletes the character to the left of the cursor and updates the cursor location.</p> <p>If there's a selection, then the selected range is deleted.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_line","title":"action_delete_line","text":"<pre><code>action_delete_line()\n</code></pre> <p>Deletes the lines which intersect with the selection.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_right","title":"action_delete_right","text":"<pre><code>action_delete_right()\n</code></pre> <p>Deletes the character to the right of the cursor and keeps the cursor at the same location.</p> <p>If there's a selection, then the selected range is deleted.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_to_end_of_line","title":"action_delete_to_end_of_line","text":"<pre><code>action_delete_to_end_of_line()\n</code></pre> <p>Deletes from the cursor location to the end of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_to_end_of_line_or_delete_line","title":"action_delete_to_end_of_line_or_delete_line  <code>async</code>","text":"<pre><code>action_delete_to_end_of_line_or_delete_line()\n</code></pre> <p>Deletes from the cursor location to the end of the line, or deletes the line.</p> <p>The line will be deleted if the line is empty.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_to_start_of_line","title":"action_delete_to_start_of_line","text":"<pre><code>action_delete_to_start_of_line()\n</code></pre> <p>Deletes from the cursor location to the start of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_word_left","title":"action_delete_word_left","text":"<pre><code>action_delete_word_left()\n</code></pre> <p>Deletes the word to the left of the cursor and updates the cursor location.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_word_right","title":"action_delete_word_right","text":"<pre><code>action_delete_word_right()\n</code></pre> <p>Deletes the word to the right of the cursor and keeps the cursor at the same location.</p> <p>Note that the location that we delete to using this action is not the same as the location we move to when we move the cursor one word to the right. This action does not skip leading whitespace, whereas cursor movement does.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_redo","title":"action_redo","text":"<pre><code>action_redo()\n</code></pre> <p>Redo the most recently undone batch of edits.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_select_all","title":"action_select_all","text":"<pre><code>action_select_all()\n</code></pre> <p>Select all the text in the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_select_line","title":"action_select_line","text":"<pre><code>action_select_line()\n</code></pre> <p>Select all the text on the current line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_undo","title":"action_undo","text":"<pre><code>action_undo()\n</code></pre> <p>Undo the edits since the last checkpoint (the most recent batch of edits).</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cell_width_to_column_index","title":"cell_width_to_column_index","text":"<pre><code>cell_width_to_column_index(cell_width, row_index)\n</code></pre> <p>Return the column that the cell width corresponds to on the given row.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The cell width to convert.</p> required <code>int</code> <p>The index of the row to examine.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The column corresponding to the cell width on that row.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cell_width_to_column_index(cell_width)","title":"<code>cell_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cell_width_to_column_index(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.check_consume_key","title":"check_consume_key","text":"<pre><code>check_consume_key(key, character=None)\n</code></pre> <p>Check if the widget may consume the given key.</p> <p>As a textarea we are expecting to capture printable keys.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A key identifier.</p> required <code>str | None</code> <p>A character associated with the key, or <code>None</code> if there isn't one.</p> <code>None</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may capture the key in it's <code>Key</code> message, or <code>False</code> if it won't.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.check_consume_key(key)","title":"<code>key</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.check_consume_key(character)","title":"<code>character</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.clamp_visitable","title":"clamp_visitable","text":"<pre><code>clamp_visitable(location)\n</code></pre> <p>Clamp the given location to the nearest visitable location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to clamp.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The nearest location that we could conceivably navigate to using the cursor.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.clamp_visitable(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Delete all text from the document.</p> <p>Returns:</p> Type Description <code>EditResult</code> <p>An EditResult relating to the deletion of all content.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor","title":"code_editor  <code>classmethod</code>","text":"<pre><code>code_editor(\n    text=\"\",\n    *,\n    language=None,\n    theme=\"monokai\",\n    soft_wrap=False,\n    tab_behavior=\"indent\",\n    read_only=False,\n    show_line_numbers=True,\n    line_number_start=1,\n    max_checkpoints=50,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n    tooltip=None\n)\n</code></pre> <p>Construct a new <code>TextArea</code> with sensible defaults for editing code.</p> <p>This instantiates a <code>TextArea</code> with line numbers enabled, soft wrapping disabled, \"indent\" tab behavior, and the \"monokai\" theme.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The initial text to load into the TextArea.</p> <code>''</code> <code>str | None</code> <p>The language to use.</p> <code>None</code> <code>str</code> <p>The theme to use.</p> <code>'monokai'</code> <code>bool</code> <p>Enable soft wrapping.</p> <code>False</code> <code>Literal['focus', 'indent']</code> <p>If 'focus', pressing tab will switch focus. If 'indent', pressing tab will insert a tab.</p> <code>'indent'</code> <code>bool</code> <p>Show line numbers on the left edge.</p> <code>True</code> <code>int</code> <p>What line number to start on.</p> <code>1</code> <code>str | None</code> <p>The name of the <code>TextArea</code> widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget, used to refer to it from Textual CSS.</p> <code>None</code> <code>str | None</code> <p>One or more Textual CSS compatible class names separated by spaces.</p> <code>None</code> <code>bool</code> <p>True if the widget is disabled.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip</p> <code>None</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(theme)","title":"<code>theme</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(soft_wrap)","title":"<code>soft_wrap</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(tab_behavior)","title":"<code>tab_behavior</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(show_line_numbers)","title":"<code>show_line_numbers</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(line_number_start)","title":"<code>line_number_start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(name)","title":"<code>name</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(id)","title":"<code>id</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete","title":"delete","text":"<pre><code>delete(start, end, *, maintain_selection_offset=True)\n</code></pre> <p>Delete the text between two locations in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location.</p> required <code>Location</code> <p>The end location.</p> required <code>bool</code> <p>If True, the active Selection will be updated such that the same text is selected before and after the selection, if possible. Otherwise, the cursor will jump to the end point of the edit.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the edit.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete(maintain_selection_offset)","title":"<code>maintain_selection_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.edit","title":"edit","text":"<pre><code>edit(edit)\n</code></pre> <p>Perform an Edit.</p> <p>Parameters:</p> Name Type Description Default <code>Edit</code> <p>The Edit to perform.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>Data relating to the edit that may be useful. The data returned</p> <code>EditResult</code> <p>may be different depending on the edit performed.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.edit(edit)","title":"<code>edit</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.find_matching_bracket","title":"find_matching_bracket","text":"<pre><code>find_matching_bracket(bracket, search_from)\n</code></pre> <p>If the character is a bracket, find the matching bracket.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The character we're searching for the matching bracket of.</p> required <code>Location</code> <p>The location to start the search.</p> required <p>Returns:</p> Type Description <code>Location | None</code> <p>The <code>Location</code> of the matching bracket, or <code>None</code> if it's not found.</p> <code>Location | None</code> <p>If the character is not available for bracket matching, <code>None</code> is returned.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.find_matching_bracket(bracket)","title":"<code>bracket</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.find_matching_bracket(search_from)","title":"<code>search_from</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_column_width","title":"get_column_width","text":"<pre><code>get_column_width(row, column)\n</code></pre> <p>Get the cell offset of the column from the start of the row.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The row index.</p> required <code>int</code> <p>The column index (codepoint offset from start of row).</p> required <p>Returns:</p> Type Description <code>int</code> <p>The cell width of the column relative to the start of the row.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_column_width(row)","title":"<code>row</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_column_width(column)","title":"<code>column</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_down_location","title":"get_cursor_down_location","text":"<pre><code>get_cursor_down_location()\n</code></pre> <p>Get the location the cursor will move to if it moves down.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will move to if it moves down.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_left_location","title":"get_cursor_left_location","text":"<pre><code>get_cursor_left_location()\n</code></pre> <p>Get the location the cursor will move to if it moves left.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location of the cursor if it moves left.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_line_end_location","title":"get_cursor_line_end_location","text":"<pre><code>get_cursor_line_end_location()\n</code></pre> <p>Get the location of the end of the current line.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The (row, column) location of the end of the cursors current line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_line_start_location","title":"get_cursor_line_start_location","text":"<pre><code>get_cursor_line_start_location(smart_home=False)\n</code></pre> <p>Get the location of the start of the current line.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, use \"smart home key\" behavior - go to the first non-whitespace character on the line, and if already there, go to offset 0. Smart home only works when wrapping is disabled.</p> <code>False</code> <p>Returns:</p> Type Description <code>Location</code> <p>The (row, column) location of the start of the cursors current line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_line_start_location(smart_home)","title":"<code>smart_home</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_right_location","title":"get_cursor_right_location","text":"<pre><code>get_cursor_right_location()\n</code></pre> <p>Get the location the cursor will move to if it moves right.</p> <p>Returns:</p> Type Description <code>Location</code> <p>the location the cursor will move to if it moves right.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_up_location","title":"get_cursor_up_location","text":"<pre><code>get_cursor_up_location()\n</code></pre> <p>Get the location the cursor will move to if it moves up.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will move to if it moves up.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_word_left_location","title":"get_cursor_word_left_location","text":"<pre><code>get_cursor_word_left_location()\n</code></pre> <p>Get the location the cursor will jump to if it goes 1 word left.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will jump on \"jump word left\".</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_word_right_location","title":"get_cursor_word_right_location","text":"<pre><code>get_cursor_word_right_location()\n</code></pre> <p>Get the location the cursor will jump to if it goes 1 word right.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will jump on \"jump word right\".</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_line","title":"get_line","text":"<pre><code>get_line(line_index)\n</code></pre> <p>Retrieve the line at the given line index.</p> <p>You can stylize the Text object returned here to apply additional styling to TextArea content.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A <code>rich.Text</code> object containing the requested line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_line(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_target_document_location","title":"get_target_document_location","text":"<pre><code>get_target_document_location(event)\n</code></pre> <p>Given a MouseEvent, return the row and column offset of the event in document-space.</p> <p>Parameters:</p> Name Type Description Default <code>MouseEvent</code> <p>The MouseEvent.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location of the mouse event within the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_target_document_location(event)","title":"<code>event</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_text_range","title":"get_text_range","text":"<pre><code>get_text_range(start, end)\n</code></pre> <p>Get the text between a start and end location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location.</p> required <code>Location</code> <p>The end location.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The text between start and end.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_text_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_text_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert","title":"insert","text":"<pre><code>insert(\n    text, location=None, *, maintain_selection_offset=True\n)\n</code></pre> <p>Insert text into the document.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text to insert.</p> required <code>Location | None</code> <p>The location to insert text, or None to use the cursor location.</p> <code>None</code> <code>bool</code> <p>If True, the active Selection will be updated such that the same text is selected before and after the selection, if possible. Otherwise, the cursor will jump to the end point of the edit.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the edit.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert(maintain_selection_offset)","title":"<code>maintain_selection_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.load_text","title":"load_text","text":"<pre><code>load_text(text)\n</code></pre> <p>Load text into the TextArea.</p> <p>This will replace the text currently in the TextArea and clear the edit history.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text to load into the TextArea.</p> required"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.load_text(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor","title":"move_cursor","text":"<pre><code>move_cursor(\n    location, select=False, center=False, record_width=True\n)\n</code></pre> <p>Move the cursor to a location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to move the cursor to.</p> required <code>bool</code> <p>If True, select text between the old and new location.</p> <code>False</code> <code>bool</code> <p>If True, scroll such that the cursor is centered.</p> <code>False</code> <code>bool</code> <p>If True, record the cursor column cell width after navigating so that we jump back to the same width the next time we move to a row that is wide enough.</p> <code>True</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(center)","title":"<code>center</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(record_width)","title":"<code>record_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative","title":"move_cursor_relative","text":"<pre><code>move_cursor_relative(\n    rows=0,\n    columns=0,\n    select=False,\n    center=False,\n    record_width=True,\n)\n</code></pre> <p>Move the cursor relative to its current location in document-space.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The number of rows to move down by (negative to move up)</p> <code>0</code> <code>int</code> <p>The number of columns to move right by (negative to move left)</p> <code>0</code> <code>bool</code> <p>If True, select text between the old and new location.</p> <code>False</code> <code>bool</code> <p>If True, scroll such that the cursor is centered.</p> <code>False</code> <code>bool</code> <p>If True, record the cursor column cell width after navigating so that we jump back to the same width the next time we move to a row that is wide enough.</p> <code>True</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(rows)","title":"<code>rows</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(columns)","title":"<code>columns</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(center)","title":"<code>center</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(record_width)","title":"<code>record_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.record_cursor_width","title":"record_cursor_width","text":"<pre><code>record_cursor_width()\n</code></pre> <p>Record the current cell width of the cursor.</p> <p>This is used where we navigate up and down through rows. If we're in the middle of a row, and go down to a row with no content, then we go down to another row, we want our cursor to jump back to the same offset that we were originally at.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.redo","title":"redo","text":"<pre><code>redo()\n</code></pre> <p>Redo the most recently undone batch of edits.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_language","title":"register_language","text":"<pre><code>register_language(language, highlight_query)\n</code></pre> <p>Register a language and corresponding highlight query.</p> <p>Calling this method does not change the language of the <code>TextArea</code>. On switching to this language (via the <code>language</code> reactive attribute), syntax highlighting will be performed using the given highlight query.</p> <p>If a string <code>name</code> is supplied for a builtin supported language, then this method will update the default highlight query for that language.</p> <p>Registering a language only registers it to this instance of <code>TextArea</code>.</p> <p>Parameters:</p> Name Type Description Default <code>'str | Language'</code> <p>A string referring to a builtin language or a tree-sitter <code>Language</code> object.</p> required <code>str</code> <p>The highlight query to use for syntax highlighting this language.</p> required"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_language(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_language(highlight_query)","title":"<code>highlight_query</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_theme","title":"register_theme","text":"<pre><code>register_theme(theme)\n</code></pre> <p>Register a theme for use by the <code>TextArea</code>.</p> <p>After registering a theme, you can set themes by assigning the theme name to the <code>TextArea.theme</code> reactive attribute. For example <code>text_area.theme = \"my_custom_theme\"</code> where <code>\"my_custom_theme\"</code> is the name of the theme you registered.</p> <p>If you supply a theme with a name that already exists that theme will be overwritten.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace","title":"replace","text":"<pre><code>replace(\n    insert, start, end, *, maintain_selection_offset=True\n)\n</code></pre> <p>Replace text in the document with new text.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text to insert.</p> required <code>Location</code> <p>The start location</p> required <code>Location</code> <p>The end location.</p> required <code>bool</code> <p>If True, the active Selection will be updated such that the same text is selected before and after the selection, if possible. Otherwise, the cursor will jump to the end point of the edit.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the edit.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(insert)","title":"<code>insert</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(maintain_selection_offset)","title":"<code>maintain_selection_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.scroll_cursor_visible","title":"scroll_cursor_visible","text":"<pre><code>scroll_cursor_visible(center=False, animate=False)\n</code></pre> <p>Scroll the <code>TextArea</code> such that the cursor is visible on screen.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True if the cursor should be scrolled to the center.</p> <code>False</code> <code>bool</code> <p>True if we should animate while scrolling.</p> <code>False</code> <p>Returns:</p> Type Description <code>Offset</code> <p>The offset that was scrolled to bring the cursor into view.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.scroll_cursor_visible(center)","title":"<code>center</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.scroll_cursor_visible(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.select_all","title":"select_all","text":"<pre><code>select_all()\n</code></pre> <p>Select all of the text in the <code>TextArea</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.select_line","title":"select_line","text":"<pre><code>select_line(index)\n</code></pre> <p>Select all the text in the specified line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line to select (starting from 0).</p> required"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.select_line(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.undo","title":"undo","text":"<pre><code>undo()\n</code></pre> <p>Undo the edits since the last checkpoint (the most recent batch of edits).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Highlight","title":"Highlight  <code>module-attribute</code>","text":"<pre><code>Highlight = Tuple[StartColumn, EndColumn, HighlightName]\n</code></pre> <p>A tuple representing a syntax highlight within one line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Location","title":"Location  <code>module-attribute</code>","text":"<pre><code>Location = Tuple[int, int]\n</code></pre> <p>A location (row, column) within the document. Indexing starts at 0.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document","title":"Document","text":"<pre><code>Document(text)\n</code></pre> <p>               Bases: <code>DocumentBase</code></p> <p>A document which can be opened in a TextArea.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.end","title":"end  <code>property</code>","text":"<pre><code>end\n</code></pre> <p>Returns the location of the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.line_count","title":"line_count  <code>property</code>","text":"<pre><code>line_count\n</code></pre> <p>Returns the number of lines in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.lines","title":"lines  <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>Get the document as a list of strings, where each string represents a line.</p> <p>Newline characters are not included in at the end of the strings.</p> <p>The newline character used in this document can be found via the <code>Document.newline</code> property.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.newline","title":"newline  <code>property</code>","text":"<pre><code>newline\n</code></pre> <p>Get the Newline used in this document (e.g. ' ', ' '. etc.)</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.start","title":"start  <code>property</code>","text":"<pre><code>start\n</code></pre> <p>Returns the location of the start of the document (0, 0).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.text","title":"text  <code>property</code>","text":"<pre><code>text\n</code></pre> <p>Get the text from the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_index_from_location","title":"get_index_from_location","text":"<pre><code>get_index_from_location(location)\n</code></pre> <p>Given a location, returns the index from the document's text.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location in the document.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The index in the document's text.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_index_from_location(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_line","title":"get_line","text":"<pre><code>get_line(index)\n</code></pre> <p>Returns the line with the given index from the document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The string representing the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_line(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_location_from_index","title":"get_location_from_index","text":"<pre><code>get_location_from_index(index)\n</code></pre> <p>Given an index in the document's text, returns the corresponding location.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index in the document's text.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The corresponding location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_location_from_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_size","title":"get_size","text":"<pre><code>get_size(tab_width)\n</code></pre> <p>The Size of the document, taking into account the tab rendering width.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The width to use for tab indents.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>The size (width, height) of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_size(tab_width)","title":"<code>tab_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_text_range","title":"get_text_range","text":"<pre><code>get_text_range(start, end)\n</code></pre> <p>Get the text that falls between the start and end locations.</p> <p>Returns the text between <code>start</code> and <code>end</code>, including the appropriate line separator character as specified by <code>Document._newline</code>. Note that <code>_newline</code> is set automatically to the first line separator character found in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location of the selection.</p> required <code>Location</code> <p>The end location of the selection.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The text between start (inclusive) and end (exclusive).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_text_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_text_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range","title":"replace_range","text":"<pre><code>replace_range(start, end, text)\n</code></pre> <p>Replace text at the given range.</p> <p>This is the only method by which a document may be updated.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A tuple (row, column) where the edit starts.</p> required <code>Location</code> <p>A tuple (row, column) where the edit ends.</p> required <code>str</code> <p>The text to insert between start and end.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>The EditResult containing information about the completed replace operation.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase","title":"DocumentBase","text":"<p>               Bases: <code>ABC</code></p> <p>Describes the minimum functionality a Document implementation must provide in order to be used by the TextArea widget.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.end","title":"end  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>end\n</code></pre> <p>Returns the location of the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.line_count","title":"line_count  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>line_count\n</code></pre> <p>Returns the number of lines in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.lines","title":"lines  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>Get the lines of the document as a list of strings.</p> <p>The strings should not include newline characters. The newline character used for the document can be retrieved via the newline property.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.newline","title":"newline  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>newline\n</code></pre> <p>Return the line separator used in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.start","title":"start  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>start\n</code></pre> <p>Returns the location of the start of the document (0, 0).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.text","title":"text  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>text\n</code></pre> <p>The text from the document as a string.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_line","title":"get_line  <code>abstractmethod</code>","text":"<pre><code>get_line(index)\n</code></pre> <p>Returns the line with the given index from the document.</p> <p>This is used in rendering lines, and will be called by the TextArea for each line that is rendered.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The str instance representing the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_line(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_size","title":"get_size  <code>abstractmethod</code>","text":"<pre><code>get_size(indent_width)\n</code></pre> <p>Get the size of the document.</p> <p>The height is generally the number of lines, and the width is generally the maximum cell length of all the lines.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The width to use for tab characters.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>The Size of the document bounding box.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_size(indent_width)","title":"<code>indent_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_text_range","title":"get_text_range  <code>abstractmethod</code>","text":"<pre><code>get_text_range(start, end)\n</code></pre> <p>Get the text that falls between the start and end locations.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location of the selection.</p> required <code>Location</code> <p>The end location of the selection.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The text between start (inclusive) and end (exclusive).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_text_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_text_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree","title":"query_syntax_tree","text":"<pre><code>query_syntax_tree(query, start_point=None, end_point=None)\n</code></pre> <p>Query the tree-sitter syntax tree.</p> <p>The default implementation always returns an empty list.</p> <p>To support querying in a subclass, this must be implemented.</p> <p>Parameters:</p> Name Type Description Default <code>Query</code> <p>The tree-sitter Query to perform.</p> required <code>tuple[int, int] | None</code> <p>The (row, column byte) to start the query at.</p> <code>None</code> <code>tuple[int, int] | None</code> <p>The (row, column byte) to end the query at.</p> <code>None</code> <p>Returns:</p> Type Description <code>list[tuple[Node, str]]</code> <p>A tuple containing the nodes and text captured by the query.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree(query)","title":"<code>query</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree(start_point)","title":"<code>start_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree(end_point)","title":"<code>end_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range","title":"replace_range  <code>abstractmethod</code>","text":"<pre><code>replace_range(start, end, text)\n</code></pre> <p>Replace the text at the given range.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A tuple (row, column) where the edit starts.</p> required <code>Location</code> <p>A tuple (row, column) where the edit ends.</p> required <code>str</code> <p>The text to insert between start and end.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>The new end location after the edit is complete.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator","title":"DocumentNavigator","text":"<pre><code>DocumentNavigator(wrapped_document)\n</code></pre> <p>Cursor navigation in the TextArea is \"wrapping-aware\".</p> <p>Although the cursor location (the selection) is represented as a location in the raw document, when you actually move the cursor, it must take wrapping into account (otherwise things start to look really confusing to the user where wrapping is involved).</p> <p>Your cursor visually moves through the wrapped version of the document, rather than the raw document. So, for example, pressing down on the keyboard may move your cursor to a position further along the current raw document line, rather than on to the next line in the raw document.</p> <p>The DocumentNavigator class manages that behavior.</p> <p>Given a cursor location in the unwrapped document, and a cursor movement action, this class can inform us of the destination the cursor will move to considering the current wrapping width and document content. It can also translate between document-space (a location/(row,col) in the raw document), and visual-space (x and y offsets) as the user will see them on screen after the document has been wrapped.</p> <p>For this to work correctly, the wrapped_document and document must be synchronised. This means that if you make an edit to the document, you must then update the wrapped document, and then you may query the document navigator.</p> <p>Naming conventions:</p> <p>A \"location\" refers to a location, in document-space (in the raw document). It is entirely unrelated to visually positioning. A location in a document can appear in any visual position, as it is influenced by scrolling, wrapping, gutter settings, and the cell width of characters to its left.</p> <p>A \"wrapped section\" refers to a portion of the line accounting for wrapping. For example the line \"ABCDEF\" when wrapped at width 3 will result in 2 sections: \"ABC\" and \"DEF\". In this case, we call \"ABC\" is the first section/wrapped section.</p> <p>A \"wrap offset\" is an integer representing the index at which wrapping occurs in a document-space line. This is a codepoint index, rather than a visual offset. In \"ABCDEF\" with wrapping at width 3, there is a single wrap offset of 3.</p> <p>\"Smart home\" refers to a modification of the \"home\" key behavior. If smart home is enabled, the first non-whitespace character is considered to be the home location. If the cursor is currently at this position, then the normal home behavior applies. This is designed to make cursor movement more useful to end users.</p> <p>Parameters:</p> Name Type Description Default <code>WrappedDocument</code> <p>The WrappedDocument to be used when making navigation decisions.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator(wrapped_document)","title":"<code>wrapped_document</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.last_x_offset","title":"last_x_offset  <code>instance-attribute</code>","text":"<pre><code>last_x_offset = 0\n</code></pre> <p>Remembers the last x offset (cell width) the cursor was moved horizontally to, so that it can be restored on vertical movement where possible.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.clamp_reachable","title":"clamp_reachable","text":"<pre><code>clamp_reachable(location)\n</code></pre> <p>Given a location, return the nearest location that corresponds to a reachable location in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A location.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The nearest reachable location in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.clamp_reachable(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_above","title":"get_location_above","text":"<pre><code>get_location_above(location)\n</code></pre> <p>Get the location visually aligned with the cell above the given location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The cell above the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_above(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_at_y_offset","title":"get_location_at_y_offset","text":"<pre><code>get_location_at_y_offset(location, vertical_offset)\n</code></pre> <p>Apply a visual vertical offset to a location and check the resulting location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <code>int</code> <p>The vertical offset to move (negative=up, positive=down).</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location after the offset has been applied.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_at_y_offset(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_at_y_offset(vertical_offset)","title":"<code>vertical_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_below","title":"get_location_below","text":"<pre><code>get_location_below(location)\n</code></pre> <p>Given a location in the raw document, return the raw document location corresponding to moving down in the wrapped representation of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location in the raw document.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location which is visually below the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_below(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_end","title":"get_location_end","text":"<pre><code>get_location_end(location)\n</code></pre> <p>Get the location corresponding to the end of the current section.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The current location.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location corresponding to the end of the wrapped line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_end(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_home","title":"get_location_home","text":"<pre><code>get_location_home(location, smart_home=False)\n</code></pre> <p>Get the \"home location\" corresponding to the given location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to consider.</p> required <code>bool</code> <p>Enable/disable 'smart home' behavior.</p> <code>False</code> <p>Returns:</p> Type Description <code>Location</code> <p>The home location, relative to the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_home(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_home(smart_home)","title":"<code>smart_home</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_left","title":"get_location_left","text":"<pre><code>get_location_left(location)\n</code></pre> <p>Get the location to the left of the given location.</p> <p>Note that if the given location is at the start of the line, then this will return the end of the preceding line, since that's where you would expect the cursor to move.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location to the right.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_left(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_right","title":"get_location_right","text":"<pre><code>get_location_right(location)\n</code></pre> <p>Get the location to the right of the given location.</p> <p>Note that if the given location is at the end of the line, then this will return the start of the following line, since that's where you would expect the cursor to move.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location to the right.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_right(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document","title":"is_end_of_document","text":"<pre><code>is_end_of_document(location)\n</code></pre> <p>Check if a location is at the end of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is at the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document_line","title":"is_end_of_document_line","text":"<pre><code>is_end_of_document_line(location)\n</code></pre> <p>True if the location is at the end of a line in the document.</p> <p>Note that the \"end\" of a line is equal to its length (one greater than the final index), since there is a space at the end of the line for the cursor to rest.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the document is at the end of a line in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_wrapped_line","title":"is_end_of_wrapped_line","text":"<pre><code>is_end_of_wrapped_line(location)\n</code></pre> <p>True if the location is at the end of a wrapped line.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the last wrapped section of any line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_document_line","title":"is_first_document_line","text":"<pre><code>is_first_document_line(location)\n</code></pre> <p>Check if the given location is on the first line in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the first line of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_wrapped_line","title":"is_first_wrapped_line","text":"<pre><code>is_first_wrapped_line(location)\n</code></pre> <p>Check if the given location is on the first wrapped section of the first line in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the first wrapped section of the first line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_document_line","title":"is_last_document_line","text":"<pre><code>is_last_document_line(location)\n</code></pre> <p>Check if the given location is on the last line of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True when the location is on the last line of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_wrapped_line","title":"is_last_wrapped_line","text":"<pre><code>is_last_wrapped_line(location)\n</code></pre> <p>Check if the given location is on the last wrapped section of the last line.</p> <p>That is, the cursor is visually on the last rendered row.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the last section of the last line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document","title":"is_start_of_document","text":"<pre><code>is_start_of_document(location)\n</code></pre> <p>Check if a location is at the start of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is at document location (0, 0)</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document_line","title":"is_start_of_document_line","text":"<pre><code>is_start_of_document_line(location)\n</code></pre> <p>True when the location is at the start of the first document line.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the location is at column index 0.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_wrapped_line","title":"is_start_of_wrapped_line","text":"<pre><code>is_start_of_wrapped_line(location)\n</code></pre> <p>True when the location is at the start of the first wrapped line.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the location is at column index 0.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit","title":"Edit  <code>dataclass</code>","text":"<pre><code>Edit(\n    text,\n    from_location,\n    to_location,\n    maintain_selection_offset,\n)\n</code></pre> <p>Implements the Undoable protocol to replace text at some range within a document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.bottom","title":"bottom  <code>property</code>","text":"<pre><code>bottom\n</code></pre> <p>The Location impacted by this edit that is nearest the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.from_location","title":"from_location  <code>instance-attribute</code>","text":"<pre><code>from_location\n</code></pre> <p>The start location of the insert.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.maintain_selection_offset","title":"maintain_selection_offset  <code>instance-attribute</code>","text":"<pre><code>maintain_selection_offset\n</code></pre> <p>If True, the selection will maintain its offset to the replacement range.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text\n</code></pre> <p>The text to insert. An empty string is equivalent to deletion.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.to_location","title":"to_location  <code>instance-attribute</code>","text":"<pre><code>to_location\n</code></pre> <p>The end location of the insert</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.top","title":"top  <code>property</code>","text":"<pre><code>top\n</code></pre> <p>The Location impacted by this edit that is nearest the start of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.after","title":"after","text":"<pre><code>after(text_area)\n</code></pre> <p>Hook for running code after an Edit has been performed via <code>Edit.do</code> and side effects such as re-wrapping the document and refreshing the display have completed.</p> <p>For example, we can't record cursor visual offset until we know where the cursor will land after wrapping has been performed, so we must wait until here to do it.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The <code>TextArea</code> this operation was performed on.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.after(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.do","title":"do","text":"<pre><code>do(text_area, record_selection=True)\n</code></pre> <p>Perform the edit operation.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The <code>TextArea</code> to perform the edit on.</p> required <code>bool</code> <p>If True, record the current selection in the TextArea so that it may be restored if this Edit is undone in the future.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the replace operation.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.do(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.do(record_selection)","title":"<code>record_selection</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.undo","title":"undo","text":"<pre><code>undo(text_area)\n</code></pre> <p>Undo the edit operation.</p> <p>Looks at the data stored in the edit, and performs the inverse operation of <code>Edit.do</code>.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The <code>TextArea</code> to undo the insert operation on.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the replace operation.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.undo(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory","title":"EditHistory  <code>dataclass</code>","text":"<pre><code>EditHistory(\n    max_checkpoints,\n    checkpoint_timer,\n    checkpoint_max_characters,\n)\n</code></pre> <p>Manages batching/checkpointing of Edits into groups that can be undone/redone in the TextArea.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.checkpoint_max_characters","title":"checkpoint_max_characters  <code>instance-attribute</code>","text":"<pre><code>checkpoint_max_characters\n</code></pre> <p>Maximum number of characters that can appear in a batch before a new batch is formed.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.checkpoint_timer","title":"checkpoint_timer  <code>instance-attribute</code>","text":"<pre><code>checkpoint_timer\n</code></pre> <p>Maximum number of seconds since last edit until a new batch is created.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.redo_stack","title":"redo_stack  <code>property</code>","text":"<pre><code>redo_stack\n</code></pre> <p>A copy of the redo stack, with references to the original Edits.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.undo_stack","title":"undo_stack  <code>property</code>","text":"<pre><code>undo_stack\n</code></pre> <p>A copy of the undo stack, with references to the original Edits.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.checkpoint","title":"checkpoint","text":"<pre><code>checkpoint()\n</code></pre> <p>Ensure the next recorded edit starts a new batch.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Completely clear the history.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.record","title":"record","text":"<pre><code>record(edit)\n</code></pre> <p>Record an Edit so that it may be undone and redone.</p> <p>Determines whether to batch the Edit with previous Edits, or create a new batch/checkpoint.</p> <p>This method must be called exactly once per edit, in chronological order.</p> <p>A new batch/checkpoint is created when:</p> <ul> <li>The undo stack is empty.</li> <li>The checkpoint timer expires.</li> <li>The maximum number of characters permitted in a checkpoint is reached.</li> <li>A redo is performed (we should not add new edits to a batch that has been redone).</li> <li>The programmer has requested a new batch via a call to <code>force_new_batch</code>.<ul> <li>e.g. the TextArea widget may call this method in some circumstances.</li> <li>Clicking to move the cursor elsewhere in the document should create a new batch.</li> <li>Movement of the cursor via a keyboard action that is NOT an edit.</li> <li>Blurring the TextArea creates a new checkpoint.</li> </ul> </li> <li>The current edit involves a deletion/replacement and the previous edit did not.</li> <li>The current edit is a pure insertion and the previous edit was not.</li> <li>The edit involves insertion or deletion of one or more newline characters.</li> <li>An edit which inserts more than a single character (a paste) gets an isolated batch.</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Edit</code> <p>The edit to record.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.record(edit)","title":"<code>edit</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.EditResult","title":"EditResult  <code>dataclass</code>","text":"<pre><code>EditResult(end_location, replaced_text)\n</code></pre> <p>Contains information about an edit that has occurred.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditResult.end_location","title":"end_location  <code>instance-attribute</code>","text":"<pre><code>end_location\n</code></pre> <p>The new end Location after the edit is complete.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditResult.replaced_text","title":"replaced_text  <code>instance-attribute</code>","text":"<pre><code>replaced_text\n</code></pre> <p>The text that was replaced.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.LanguageDoesNotExist","title":"LanguageDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the user tries to use a language which does not exist. This means a language which is not builtin, or has not been registered.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection","title":"Selection","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A range of characters within a document from a start point to the end point. The location of the cursor is always considered to be the <code>end</code> point of the selection. The selection is inclusive of the minimum point and exclusive of the maximum point.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.end","title":"end  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>end = (0, 0)\n</code></pre> <p>The end location of the selection.</p> <p>If you were to click and drag a selection inside a text-editor, this is where you finished dragging.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.is_empty","title":"is_empty  <code>property</code>","text":"<pre><code>is_empty\n</code></pre> <p>Return True if the selection has 0 width, i.e. it's just a cursor.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.start","title":"start  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>start = (0, 0)\n</code></pre> <p>The start location of the selection.</p> <p>If you were to click and drag a selection inside a text-editor, this is where you started dragging.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.cursor","title":"cursor  <code>classmethod</code>","text":"<pre><code>cursor(location)\n</code></pre> <p>Create a Selection with the same start and end point - a \"cursor\".</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to create the zero-width Selection.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.cursor(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument","title":"SyntaxAwareDocument","text":"<pre><code>SyntaxAwareDocument(text, language)\n</code></pre> <p>               Bases: <code>Document</code></p> <p>A wrapper around a Document which also maintains a tree-sitter syntax tree when the document is edited.</p> <p>The primary reason for this split is actually to keep tree-sitter stuff separate, since it isn't supported in Python 3.7. By having the tree-sitter code isolated in this subclass, it makes it easier to conditionally import. However, it does come with other design flaws (e.g. Document is required to have methods which only really make sense on SyntaxAwareDocument).</p> <p>If you're reading this and Python 3.7 is no longer supported by Textual, consider merging this subclass into the <code>Document</code> superclass.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The initial text contained in the document.</p> required <code>str | Language</code> <p>The language to use. You can pass a string to use a supported language, or pass in your own tree-sitter <code>Language</code> object.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.language","title":"language  <code>instance-attribute</code>","text":"<pre><code>language = get_language(language)\n</code></pre> <p>The tree-sitter Language or None if tree-sitter is unavailable.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.get_line","title":"get_line","text":"<pre><code>get_line(line_index)\n</code></pre> <p>Return the string representing the line, not including new line characters.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The string representing the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.get_line(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.prepare_query","title":"prepare_query","text":"<pre><code>prepare_query(query)\n</code></pre> <p>Prepare a tree-sitter tree query.</p> <p>Queries should be prepared once, then reused.</p> <p>To execute a query, call <code>query_syntax_tree</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The string query to prepare.</p> required <p>Returns:</p> Type Description <code>Query | None</code> <p>The prepared query.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.prepare_query(query)","title":"<code>query</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree","title":"query_syntax_tree","text":"<pre><code>query_syntax_tree(query, start_point=None, end_point=None)\n</code></pre> <p>Query the tree-sitter syntax tree.</p> <p>The default implementation always returns an empty list.</p> <p>To support querying in a subclass, this must be implemented.</p> <p>Parameters:</p> Name Type Description Default <code>Query</code> <p>The tree-sitter Query to perform.</p> required <code>tuple[int, int] | None</code> <p>The (row, column byte) to start the query at.</p> <code>None</code> <code>tuple[int, int] | None</code> <p>The (row, column byte) to end the query at.</p> <code>None</code> <p>Returns:</p> Type Description <code>list[tuple['Node', str]]</code> <p>A tuple containing the nodes and text captured by the query.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree(query)","title":"<code>query</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree(start_point)","title":"<code>start_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree(end_point)","title":"<code>end_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range","title":"replace_range","text":"<pre><code>replace_range(start, end, text)\n</code></pre> <p>Replace text at the given range.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A tuple (row, column) where the edit starts.</p> required <code>Location</code> <p>A tuple (row, column) where the edit ends.</p> required <code>str</code> <p>The text to insert between start and end.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>The new end location after the edit is complete.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme","title":"TextAreaTheme  <code>dataclass</code>","text":"<pre><code>TextAreaTheme(\n    name,\n    base_style=None,\n    gutter_style=None,\n    cursor_style=None,\n    cursor_line_style=None,\n    cursor_line_gutter_style=None,\n    bracket_matching_style=None,\n    selection_style=None,\n    syntax_styles=dict(),\n)\n</code></pre> <p>A theme for the <code>TextArea</code> widget.</p> <p>Allows theming the general widget (gutter, selections, cursor, and so on) and mapping of tree-sitter tokens to Rich styles.</p> <p>For example, consider the following snippet from the <code>markdown.scm</code> highlight query file. We've assigned the <code>heading_content</code> token type to the name <code>heading</code>.</p> <pre><code>(heading_content) @heading\n</code></pre> <p>Now, we can map this <code>heading</code> name to a Rich style, and it will be styled as such in the <code>TextArea</code>, assuming a parser which returns a <code>heading_content</code> node is used (as will be the case when language=\"markdown\").</p> <pre><code>TextAreaTheme('my_theme', syntax_styles={'heading': Style(color='cyan', bold=True)})\n</code></pre> <p>We can register this theme with our <code>TextArea</code> using the  <code>TextArea.register_theme</code> method, and headings in our markdown files will be styled bold cyan.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.base_style","title":"base_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>base_style = None\n</code></pre> <p>The background style of the text area. If <code>None</code> the parent style will be used.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.bracket_matching_style","title":"bracket_matching_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>bracket_matching_style = None\n</code></pre> <p>The style to apply to matching brackets. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.cursor_line_gutter_style","title":"cursor_line_gutter_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_line_gutter_style = None\n</code></pre> <p>The style to apply to the gutter of the line the cursor is on. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.cursor_line_style","title":"cursor_line_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_line_style = None\n</code></pre> <p>The style to apply to the line the cursor is on.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.cursor_style","title":"cursor_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_style = None\n</code></pre> <p>The style of the cursor. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.gutter_style","title":"gutter_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>gutter_style = None\n</code></pre> <p>The style of the gutter. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.name","title":"name  <code>instance-attribute</code>","text":"<pre><code>name\n</code></pre> <p>The name of the theme.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.selection_style","title":"selection_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>selection_style = None\n</code></pre> <p>The style of the selection. If <code>None</code> a default selection Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.syntax_styles","title":"syntax_styles  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>syntax_styles = field(default_factory=dict)\n</code></pre> <p>The mapping of tree-sitter names from the <code>highlight_query</code> to Rich styles.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.apply_css","title":"apply_css","text":"<pre><code>apply_css(text_area)\n</code></pre> <p>Apply CSS rules from a TextArea to be used for fallback styling.</p> <p>If any attributes in the theme aren't supplied, they'll be filled with the appropriate base CSS (e.g. color, background, etc.) and component CSS (e.g. text-area--cursor) from the supplied TextArea.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The TextArea instance to retrieve fallback styling from.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.apply_css(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.builtin_themes","title":"builtin_themes  <code>classmethod</code>","text":"<pre><code>builtin_themes()\n</code></pre> <p>Get a list of all builtin TextAreaThemes.</p> <p>Returns:</p> Type Description <code>list[TextAreaTheme]</code> <p>A list of all builtin TextAreaThemes.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_builtin_theme","title":"get_builtin_theme  <code>classmethod</code>","text":"<pre><code>get_builtin_theme(theme_name)\n</code></pre> <p>Get a <code>TextAreaTheme</code> by name.</p> <p>Given a <code>theme_name</code>, return the corresponding <code>TextAreaTheme</code> object.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The name of the theme.</p> required <p>Returns:</p> Type Description <code>TextAreaTheme | None</code> <p>The <code>TextAreaTheme</code> corresponding to the name or <code>None</code> if the theme isn't found.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_builtin_theme(theme_name)","title":"<code>theme_name</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_highlight","title":"get_highlight","text":"<pre><code>get_highlight(name)\n</code></pre> <p>Return the Rich style corresponding to the name defined in the tree-sitter highlight query for the current theme.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The name of the highlight.</p> required <p>Returns:</p> Type Description <code>Style | None</code> <p>The <code>Style</code> to use for this highlight, or <code>None</code> if no style.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_highlight(name)","title":"<code>name</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.ThemeDoesNotExist","title":"ThemeDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the user tries to use a theme which does not exist. This means a theme which is not builtin, or has not been registered.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument","title":"WrappedDocument","text":"<pre><code>WrappedDocument(document, width=0, tab_width=4)\n</code></pre> <p>A view into a Document which wraps the document at a certain width and can be queried to retrieve lines from the wrapped version of the document.</p> <p>Allows for incremental updates, ensuring that we only re-wrap ranges of the document that were influenced by edits.</p> <p>By default, a WrappedDocument is wrapped with width=0 (no wrapping). To wrap the document, use the wrap() method.</p> <p>Parameters:</p> Name Type Description Default <code>DocumentBase</code> <p>The document to wrap.</p> required <code>int</code> <p>The width to wrap at.</p> <code>0</code> <code>int</code> <p>The maximum width to consider for tab characters.</p> <code>4</code>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument(document)","title":"<code>document</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument(width)","title":"<code>width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument(tab_width)","title":"<code>tab_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.document","title":"document  <code>instance-attribute</code>","text":"<pre><code>document = document\n</code></pre> <p>The document wrapping is performed on.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.height","title":"height  <code>property</code>","text":"<pre><code>height\n</code></pre> <p>The height of the wrapped document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.lines","title":"lines  <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>The lines of the wrapped version of the Document.</p> <p>Each index in the returned list represents a line index in the raw document. The list[str] at each index is the content of the raw document line split into multiple lines via wrapping.</p> <p>Note that this is expensive to compute and is not cached.</p> <p>Returns:</p> Type Description <code>list[list[str]]</code> <p>A list of lines from the wrapped version of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrapped","title":"wrapped  <code>property</code>","text":"<pre><code>wrapped\n</code></pre> <p>True if the content is wrapped. This is not the same as wrapping being \"enabled\". For example, an empty document can have wrapping enabled, but no wrapping has actually occurred.</p> <p>In other words, this is True if the length of any line in the document is greater than the available width.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_offsets","title":"get_offsets","text":"<pre><code>get_offsets(line_index)\n</code></pre> <p>Given a line index, get the offsets within that line where wrapping should occur for the current document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line within the document.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>When <code>line_index</code> is out of bounds.</p> <p>Returns:</p> Type Description <code>list[int]</code> <p>The offsets within the line where wrapping should occur.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_offsets(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_sections","title":"get_sections","text":"<pre><code>get_sections(line_index)\n</code></pre> <p>Return the sections for the given line index.</p> <p>When wrapping is enabled, a single line in the document can visually span multiple lines. The list returned represents that visually (each string in the list represents a single section (y-offset) after wrapping happens).</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line to get sections for.</p> required <p>Returns:</p> Type Description <code>list[str]</code> <p>The wrapped line as a list of strings.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_sections(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_tab_widths","title":"get_tab_widths","text":"<pre><code>get_tab_widths(line_index)\n</code></pre> <p>Return a list of the tab widths for the given line index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <p>Returns:</p> Type Description <code>list[int]</code> <p>An ordered list of the expanded width of the tabs in the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_tab_widths(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column","title":"get_target_document_column","text":"<pre><code>get_target_document_column(line_index, x_offset, y_offset)\n</code></pre> <p>Given a line index and the offsets within the wrapped version of that line, return the corresponding column index in the raw document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <code>int</code> <p>The x-offset within the wrapped line.</p> required <code>int</code> <p>The y-offset within the wrapped line (supports negative indexing).</p> required <p>Returns:</p> Type Description <code>int</code> <p>The column index corresponding to the line index and y offset.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column(x_offset)","title":"<code>x_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column(y_offset)","title":"<code>y_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.location_to_offset","title":"location_to_offset","text":"<pre><code>location_to_offset(location)\n</code></pre> <p>Convert a location in the document to an offset within the wrapped/visual display of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location in the document.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>The Offset in the document's visual display corresponding to the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.location_to_offset(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.offset_to_location","title":"offset_to_location","text":"<pre><code>offset_to_location(offset)\n</code></pre> <p>Given an offset within the wrapped/visual display of the document, return the corresponding location in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The y-offset within the document.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>When the given offset does not correspond to a line in the document.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The Location in the document corresponding to the given offset.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.offset_to_location(offset)","title":"<code>offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap","title":"wrap","text":"<pre><code>wrap(width, tab_width=None)\n</code></pre> <p>Wrap and cache all lines in the document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The width to wrap at. 0 for no wrapping.</p> required <code>int | None</code> <p>The maximum width to consider for tab characters. If None, reuse the  tab width.</p> <code>None</code>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap(width)","title":"<code>width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap(tab_width)","title":"<code>tab_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range","title":"wrap_range","text":"<pre><code>wrap_range(start, old_end, new_end)\n</code></pre> <p>Incrementally recompute wrapping based on a performed edit.</p> <p>This must be called after the source document has been edited.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location of the edit that was performed in document-space.</p> required <code>Location</code> <p>The old end location of the edit in document-space.</p> required <code>Location</code> <p>The new end location of the edit in document-space.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range(old_end)","title":"<code>old_end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range(new_end)","title":"<code>new_end</code>","text":""},{"location":"widgets/toast/","title":"Toast","text":"<p>Added in version 0.30.0</p> <p>A widget which displays a notification message.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Note that <code>Toast</code> isn't designed to be used directly in your applications, but it is instead used by <code>notify</code> to display a message when using Textual's built-in notification system.</p>"},{"location":"widgets/toast/#styling","title":"Styling","text":"<p>You can customize the style of Toasts by targeting the <code>Toast</code> CSS type. For example:</p> <pre><code>Toast {\n    padding: 3;\n}\n</code></pre> <p>If you wish to change the location of Toasts, it is possible by targeting the <code>ToastRack</code> CSS type. For example:</p> <pre><code>ToastRack {\n        align: right top;\n}\n</code></pre> <p>The three severity levels also have corresponding classes, allowing you to target the different styles of notification. They are:</p> <ul> <li><code>-information</code></li> <li><code>-warning</code></li> <li><code>-error</code></li> </ul> <p>If you wish to tailor the notifications for your application you can add rules to your CSS like this:</p> <pre><code>Toast.-information {\n    /* Styling here. */\n}\n\nToast.-warning {\n    /* Styling here. */\n}\n\nToast.-error {\n    /* Styling here. */\n}\n</code></pre> <p>You can customize just the title wih the <code>toast--title</code> class. The following would make the title italic for an information toast:</p> <pre><code>Toast.-information .toast--title {\n    text-style: italic;\n}\n</code></pre>"},{"location":"widgets/toast/#example","title":"Example","text":"Outputtoast.py <p> ToastApp \u258c\u2590 \u258cIt's\u00a0an\u00a0older\u00a0code,\u00a0sir,\u00a0but\u00a0it\u00a0\u2590 \u258cchecks\u00a0out.\u2590 \u258c\u2590 \u258c\u2590 \u258cPossible\u00a0trap\u00a0detected\u2590 \u258cNow\u00a0witness\u00a0the\u00a0firepower\u00a0of\u00a0this\u00a0\u2590 \u258cfully\u00a0ARMED\u00a0and\u00a0OPERATIONAL\u00a0battle\u00a0\u2590 \u258cstation!\u2590 \u258c\u2590 \u258c\u2590 \u258cIt's\u00a0a\u00a0trap!\u2590 \u258c\u2590 \u258c\u2590 \u258cIt's\u00a0against\u00a0my\u00a0programming\u00a0to\u00a0\u2590 \u258cimpersonate\u00a0a\u00a0deity.\u2590 \u258c\u2590 </p> <pre><code>from textual.app import App\n\n\nclass ToastApp(App[None]):\n    def on_mount(self) -&gt; None:\n        # Show an information notification.\n        self.notify(\"It's an older code, sir, but it checks out.\")\n\n        # Show a warning. Note that Textual's notification system allows\n        # for the use of Rich console markup.\n        self.notify(\n            \"Now witness the firepower of this fully \"\n            \"[b]ARMED[/b] and [i][b]OPERATIONAL[/b][/i] battle station!\",\n            title=\"Possible trap detected\",\n            severity=\"warning\",\n        )\n\n        # Show an error. Set a longer timeout so it's noticed.\n        self.notify(\"It's a trap!\", severity=\"error\", timeout=10)\n\n        # Show an information notification, but without any sort of title.\n        self.notify(\"It's against my programming to impersonate a deity.\", title=\"\")\n\n\nif __name__ == \"__main__\":\n    ToastApp().run()\n</code></pre>"},{"location":"widgets/toast/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/toast/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/toast/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/toast/#component-classes","title":"Component Classes","text":"<p>The toast widget provides the following component classes:</p> Class Description <code>toast--title</code> Targets the title of the toast."},{"location":"widgets/toast/#textual.widgets._toast.Toast","title":"textual.widgets._toast.Toast","text":"<pre><code>Toast(notification)\n</code></pre> <p>               Bases: <code>Static</code></p> <p>A widget for displaying short-lived notifications.</p> <p>Parameters:</p> Name Type Description Default <code>Notification</code> <p>The notification to show in the toast.</p> required"},{"location":"widgets/toast/#textual.widgets._toast.Toast(notification)","title":"<code>notification</code>","text":""},{"location":"widgets/toast/#textual.widgets._toast.Toast.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'toast--title'}\n</code></pre> Class Description <code>toast--title</code> Targets the title of the toast."},{"location":"widgets/tree/","title":"Tree","text":"<p>Added in version 0.6.0</p> <p>A tree control widget.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/tree/#example","title":"Example","text":"<p>The example below creates a simple tree.</p> Outputtree.py <p> TreeApp \u25bc\u00a0Dune \u2517\u2501\u2501\u00a0\u25bc\u00a0Characters \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Paul \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Jessica \u00a0\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0Chani </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Tree\n\n\nclass TreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        tree: Tree[dict] = Tree(\"Dune\")\n        tree.root.expand()\n        characters = tree.root.add(\"Characters\", expand=True)\n        characters.add_leaf(\"Paul\")\n        characters.add_leaf(\"Jessica\")\n        characters.add_leaf(\"Chani\")\n        yield tree\n\n\nif __name__ == \"__main__\":\n    app = TreeApp()\n    app.run()\n</code></pre> <p>Tree widgets have a \"root\" attribute which is an instance of a TreeNode. Call add() or add_leaf() to add new nodes underneath the root. Both these methods return a TreeNode for the child which you can use to add additional levels.</p>"},{"location":"widgets/tree/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_root</code> <code>bool</code> <code>True</code> Show the root node. <code>show_guides</code> <code>bool</code> <code>True</code> Show guide lines between levels. <code>guide_depth</code> <code>int</code> <code>4</code> Amount of indentation between parent and child."},{"location":"widgets/tree/#messages","title":"Messages","text":"<ul> <li>Tree.NodeCollapsed</li> <li>Tree.NodeExpanded</li> <li>Tree.NodeHighlighted</li> <li>Tree.NodeSelected</li> </ul>"},{"location":"widgets/tree/#bindings","title":"Bindings","text":"<p>The tree widget defines the following bindings:</p> Key(s) Description enter Select the current item. space Toggle the expand/collapsed space of the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/tree/#component-classes","title":"Component Classes","text":"<p>The tree widget provides the following component classes:</p> Class Description <code>tree--cursor</code> Targets the cursor. <code>tree--guides</code> Targets the indentation guides. <code>tree--guides-hover</code> Targets the indentation guides under the cursor. <code>tree--guides-selected</code> Targets the indentation guides that are selected. <code>tree--highlight</code> Targets the highlighted items. <code>tree--highlight-line</code> Targets the lines under the cursor. <code>tree--label</code> Targets the (text) labels of the items. <p>               Bases: <code>Generic[TreeDataType]</code>, <code>ScrollView</code></p> <p>A widget for displaying and navigating data in a tree.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label of the root node of the tree.</p> required <code>TreeDataType | None</code> <p>The optional data to associate with the root node of the tree.</p> <code>None</code> <code>str | None</code> <p>The name of the Tree.</p> <code>None</code> <code>str | None</code> <p>The ID of the tree in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the tree.</p> <code>None</code> <code>bool</code> <p>Whether the tree is disabled or not.</p> <code>False</code> <p>Make non-widget Tree support classes available.</p>"},{"location":"widgets/tree/#textual.widgets.Tree(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(name)","title":"<code>name</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(id)","title":"<code>id</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"enter\", \"select_cursor\", \"Select\", show=False),\n    Binding(\"space\", \"toggle_node\", \"Toggle\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Cursor Up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"Cursor Down\", show=False\n    ),\n]\n</code></pre> Key(s) Description enter Select the current item. space Toggle the expand/collapsed space of the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/tree/#textual.widgets.Tree.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"tree--cursor\",\n    \"tree--guides\",\n    \"tree--guides-hover\",\n    \"tree--guides-selected\",\n    \"tree--highlight\",\n    \"tree--highlight-line\",\n    \"tree--label\",\n}\n</code></pre> Class Description <code>tree--cursor</code> Targets the cursor. <code>tree--guides</code> Targets the indentation guides. <code>tree--guides-hover</code> Targets the indentation guides under the cursor. <code>tree--guides-selected</code> Targets the indentation guides that are selected. <code>tree--highlight</code> Targets the highlighted items. <code>tree--highlight-line</code> Targets the lines under the cursor. <code>tree--label</code> Targets the (text) labels of the items."},{"location":"widgets/tree/#textual.widgets.Tree.auto_expand","title":"auto_expand  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_expand = var(True)\n</code></pre> <p>Auto expand tree nodes when they are selected.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.cursor_line","title":"cursor_line  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_line = var(-1, always_update=True)\n</code></pre> <p>The line with the cursor, or -1 if no cursor.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.cursor_node","title":"cursor_node  <code>property</code>","text":"<pre><code>cursor_node\n</code></pre> <p>The currently selected node, or <code>None</code> if no selection.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.guide_depth","title":"guide_depth  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>guide_depth = reactive(4, init=False)\n</code></pre> <p>The indent depth of tree nodes.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.hover_line","title":"hover_line  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>hover_line = var(-1)\n</code></pre> <p>The line number under the mouse pointer, or -1 if not under the mouse pointer.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.last_line","title":"last_line  <code>property</code>","text":"<pre><code>last_line\n</code></pre> <p>The index of the last line.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.root","title":"root  <code>instance-attribute</code>","text":"<pre><code>root = _add_node(None, text_label, data)\n</code></pre> <p>The root node of the tree.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.show_guides","title":"show_guides  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_guides = reactive(True)\n</code></pre> <p>Enable display of tree guide lines.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.show_root","title":"show_root  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_root = reactive(True)\n</code></pre> <p>Show the root of the tree.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeCollapsed","title":"NodeCollapsed","text":"<pre><code>NodeCollapsed(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is collapsed.</p> <p>Can be handled using <code>on_tree_node_collapsed</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeCollapsed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeCollapsed.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was collapsed.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeExpanded","title":"NodeExpanded","text":"<pre><code>NodeExpanded(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is expanded.</p> <p>Can be handled using <code>on_tree_node_expanded</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeExpanded.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeExpanded.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was expanded.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeHighlighted","title":"NodeHighlighted","text":"<pre><code>NodeHighlighted(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is highlighted.</p> <p>Can be handled using <code>on_tree_node_highlighted</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeHighlighted.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was highlighted.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeSelected","title":"NodeSelected","text":"<pre><code>NodeSelected(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is selected.</p> <p>Can be handled using <code>on_tree_node_selected</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeSelected.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was selected.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down()\n</code></pre> <p>Move the cursor down one node.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up()\n</code></pre> <p>Move the cursor up one node.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_page_down","title":"action_page_down","text":"<pre><code>action_page_down()\n</code></pre> <p>Move the cursor down a page's-worth of nodes.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_page_up","title":"action_page_up","text":"<pre><code>action_page_up()\n</code></pre> <p>Move the cursor up a page's-worth of nodes.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_scroll_end","title":"action_scroll_end","text":"<pre><code>action_scroll_end()\n</code></pre> <p>Move the cursor to the bottom of the tree.</p> Note <p>Here bottom means vertically, not branch depth.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_scroll_home","title":"action_scroll_home","text":"<pre><code>action_scroll_home()\n</code></pre> <p>Move the cursor to the top of the tree.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_select_cursor","title":"action_select_cursor","text":"<pre><code>action_select_cursor()\n</code></pre> <p>Cause a select event for the target node.</p> Note <p>If <code>auto_expand</code> is <code>True</code> use of this action on a non-leaf node will cause both an expand/collapse event to occur, as well as a selected event.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_toggle_node","title":"action_toggle_node","text":"<pre><code>action_toggle_node()\n</code></pre> <p>Toggle the expanded state of the target node.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear all nodes under root.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_label_width","title":"get_label_width","text":"<pre><code>get_label_width(node)\n</code></pre> <p>Get the width of the nodes label.</p> <p>The default behavior is to call <code>render_node</code> and return the cell length. This method may be overridden in a sub-class if it can be done more efficiently.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType]</code> <p>A node.</p> required <p>Returns:</p> Type Description <code>int</code> <p>Width in cells.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_label_width(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.get_node_at_line","title":"get_node_at_line","text":"<pre><code>get_node_at_line(line_no)\n</code></pre> <p>Get the node for a given line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>A line number.</p> required <p>Returns:</p> Type Description <code>TreeNode[TreeDataType] | None</code> <p>A tree node, or <code>None</code> if there is no node at that line.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_node_at_line(line_no)","title":"<code>line_no</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.get_node_by_id","title":"get_node_by_id","text":"<pre><code>get_node_by_id(node_id)\n</code></pre> <p>Get a tree node by its ID.</p> <p>Parameters:</p> Name Type Description Default <code>NodeID</code> <p>The ID of the node to get.</p> required <p>Returns:</p> Type Description <code>TreeNode[TreeDataType]</code> <p>The node associated with that ID.</p> <p>Raises:</p> Type Description <code>UnknownNodeID</code> <p>Raised if the <code>TreeNode</code> ID is unknown.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_node_by_id(node_id)","title":"<code>node_id</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.move_cursor","title":"move_cursor","text":"<pre><code>move_cursor(node)\n</code></pre> <p>Move the cursor to the given node, or reset cursor.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType] | None</code> <p>A tree node, or None to reset cursor.</p> required"},{"location":"widgets/tree/#textual.widgets.Tree.move_cursor(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.process_label","title":"process_label","text":"<pre><code>process_label(label)\n</code></pre> <p>Process a <code>str</code> or <code>Text</code> value into a label.</p> <p>May be overridden in a subclass to change how labels are rendered.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.process_label(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.render_label","title":"render_label","text":"<pre><code>render_label(node, base_style, style)\n</code></pre> <p>Render a label for the given node. Override this to modify how labels are rendered.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType]</code> <p>A tree node.</p> required <code>Style</code> <p>The base style of the widget.</p> required <code>Style</code> <p>The additional style for the label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object containing the label.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.render_label(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.render_label(base_style)","title":"<code>base_style</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.render_label(style)","title":"<code>style</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.reset","title":"reset","text":"<pre><code>reset(label, data=None)\n</code></pre> <p>Clear the tree and reset the root node.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label for the root node.</p> required <code>TreeDataType | None</code> <p>Optional data for the root node.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.reset(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.reset(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_line","title":"scroll_to_line","text":"<pre><code>scroll_to_line(line, animate=True)\n</code></pre> <p>Scroll to the given line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>A line number.</p> required <code>bool</code> <p>Enable animation.</p> <code>True</code>"},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_line(line)","title":"<code>line</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_line(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_node","title":"scroll_to_node","text":"<pre><code>scroll_to_node(node, animate=True)\n</code></pre> <p>Scroll to the given node.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType]</code> <p>Node to scroll in to view.</p> required <code>bool</code> <p>Animate scrolling.</p> <code>True</code>"},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_node(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.select_node","title":"select_node","text":"<pre><code>select_node(node)\n</code></pre> <p>Move the cursor to the given node and select it, or reset cursor.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType] | None</code> <p>A tree node to move the cursor to and select, or None to reset cursor.</p> required"},{"location":"widgets/tree/#textual.widgets.Tree.select_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.validate_cursor_line","title":"validate_cursor_line","text":"<pre><code>validate_cursor_line(value)\n</code></pre> <p>Prevent cursor line from going outside of range.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The value to test.</p> required Return <p>A valid version of the given value.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.validate_cursor_line(value)","title":"<code>value</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.validate_guide_depth","title":"validate_guide_depth","text":"<pre><code>validate_guide_depth(value)\n</code></pre> <p>Restrict guide depth to reasonable range.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The value to test.</p> required Return <p>A valid version of the given value.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.validate_guide_depth(value)","title":"<code>value</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.EventTreeDataType","title":"EventTreeDataType  <code>module-attribute</code>","text":"<pre><code>EventTreeDataType = TypeVar('EventTreeDataType')\n</code></pre> <p>The type of the data for a given instance of a Tree.</p> <p>Similar to TreeDataType but used for <code>Tree</code> messages.</p>"},{"location":"widgets/tree/#textual.widgets.tree.NodeID","title":"NodeID  <code>module-attribute</code>","text":"<pre><code>NodeID = NewType('NodeID', int)\n</code></pre> <p>The type of an ID applied to a TreeNode.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeDataType","title":"TreeDataType  <code>module-attribute</code>","text":"<pre><code>TreeDataType = TypeVar('TreeDataType')\n</code></pre> <p>The type of the data for a given instance of a Tree.</p>"},{"location":"widgets/tree/#textual.widgets.tree.AddNodeError","title":"AddNodeError","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when there is an error with a request to add a node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.RemoveRootError","title":"RemoveRootError","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when trying to remove the root of a <code>TreeNode</code>.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode","title":"TreeNode","text":"<pre><code>TreeNode(\n    tree,\n    parent,\n    id,\n    label,\n    data=None,\n    *,\n    expanded=True,\n    allow_expand=True\n)\n</code></pre> <p>               Bases: <code>Generic[TreeDataType]</code></p> <p>An object that represents a \"node\" in a tree control.</p> <p>Parameters:</p> Name Type Description Default <code>Tree[TreeDataType]</code> <p>The tree that the node is being attached to.</p> required <code>TreeNode[TreeDataType] | None</code> <p>The parent node that this node is being attached to.</p> required <code>NodeID</code> <p>The ID of the node.</p> required <code>Text</code> <p>The label for the node.</p> required <code>TreeDataType | None</code> <p>Optional data to associate with the node.</p> <code>None</code> <code>bool</code> <p>Should the node be attached in an expanded state?</p> <code>True</code> <code>bool</code> <p>Should the node allow being expanded by the user?</p> <code>True</code>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(tree)","title":"<code>tree</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(parent)","title":"<code>parent</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(id)","title":"<code>id</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(expanded)","title":"<code>expanded</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(allow_expand)","title":"<code>allow_expand</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.allow_expand","title":"allow_expand  <code>property</code> <code>writable</code>","text":"<pre><code>allow_expand\n</code></pre> <p>Is this node allowed to expand?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.children","title":"children  <code>property</code>","text":"<pre><code>children\n</code></pre> <p>The child nodes of a TreeNode.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.data","title":"data  <code>instance-attribute</code>","text":"<pre><code>data = data\n</code></pre> <p>Optional data associated with the tree node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.id","title":"id  <code>property</code>","text":"<pre><code>id\n</code></pre> <p>The ID of the  node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.is_expanded","title":"is_expanded  <code>property</code>","text":"<pre><code>is_expanded\n</code></pre> <p>Is the node expanded?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.is_last","title":"is_last  <code>property</code>","text":"<pre><code>is_last\n</code></pre> <p>Is this the last child node of its parent?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.is_root","title":"is_root  <code>property</code>","text":"<pre><code>is_root\n</code></pre> <p>Is this node the root of the tree?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.label","title":"label  <code>property</code> <code>writable</code>","text":"<pre><code>label\n</code></pre> <p>The label for the node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.line","title":"line  <code>property</code>","text":"<pre><code>line\n</code></pre> <p>The line number for this node, or -1 if it is not displayed.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.parent","title":"parent  <code>property</code>","text":"<pre><code>parent\n</code></pre> <p>The parent of the node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.tree","title":"tree  <code>property</code>","text":"<pre><code>tree\n</code></pre> <p>The tree that this node is attached to.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add","title":"add","text":"<pre><code>add(\n    label,\n    data=None,\n    *,\n    before=None,\n    after=None,\n    expand=False,\n    allow_expand=True\n)\n</code></pre> <p>Add a node to the sub-tree.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The new node's label.</p> required <code>TreeDataType | None</code> <p>Data associated with the new node.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node before.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node after.</p> <code>None</code> <code>bool</code> <p>Node should be expanded.</p> <code>False</code> <code>bool</code> <p>Allow use to expand the node via keyboard or mouse.</p> <code>True</code> <p>Returns:</p> Type Description <code>TreeNode[TreeDataType]</code> <p>A new Tree node</p> <p>Raises:</p> Type Description <code>AddNodeError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>AddNodeError</code> will be raised.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(before)","title":"<code>before</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(after)","title":"<code>after</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(expand)","title":"<code>expand</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(allow_expand)","title":"<code>allow_expand</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf","title":"add_leaf","text":"<pre><code>add_leaf(label, data=None, *, before=None, after=None)\n</code></pre> <p>Add a 'leaf' node (a node that can not expand).</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Label for the node.</p> required <code>TreeDataType | None</code> <p>Optional data.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node before.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node after.</p> <code>None</code> <p>Returns:</p> Type Description <code>TreeNode[TreeDataType]</code> <p>New node.</p> <p>Raises:</p> Type Description <code>AddNodeError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>AddNodeError</code> will be raised.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(before)","title":"<code>before</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(after)","title":"<code>after</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.collapse","title":"collapse","text":"<pre><code>collapse()\n</code></pre> <p>Collapse the node (hide its children).</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.collapse_all","title":"collapse_all","text":"<pre><code>collapse_all()\n</code></pre> <p>Collapse the node (hide its children) and all those below it.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.expand","title":"expand","text":"<pre><code>expand()\n</code></pre> <p>Expand the node (show its children).</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.expand_all","title":"expand_all","text":"<pre><code>expand_all()\n</code></pre> <p>Expand the node (show its children) and all those below it.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.refresh","title":"refresh","text":"<pre><code>refresh()\n</code></pre> <p>Initiate a refresh (repaint) of this node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.remove","title":"remove","text":"<pre><code>remove()\n</code></pre> <p>Remove this node from the tree.</p> <p>Raises:</p> Type Description <code>RemoveRootError</code> <p>If there is an attempt to remove the root.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.remove_children","title":"remove_children","text":"<pre><code>remove_children()\n</code></pre> <p>Remove any child nodes of this node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.set_label","title":"set_label","text":"<pre><code>set_label(label)\n</code></pre> <p>Set a new label for the node.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>A <code>str</code> or <code>Text</code> object with the new label.</p> required"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.set_label(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.toggle","title":"toggle","text":"<pre><code>toggle()\n</code></pre> <p>Toggle the node's expanded state.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.toggle_all","title":"toggle_all","text":"<pre><code>toggle_all()\n</code></pre> <p>Toggle the node's expanded state and make all those below it match.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.UnknownNodeID","title":"UnknownNodeID","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when referring to an unknown <code>TreeNode</code> ID.</p>"},{"location":"blog/archive/2024/","title":"2024","text":""},{"location":"blog/archive/2023/","title":"2023","text":""},{"location":"blog/archive/2022/","title":"2022","text":""},{"location":"blog/category/devlog/","title":"DevLog","text":""},{"location":"blog/category/release/","title":"Release","text":""},{"location":"blog/category/news/","title":"News","text":""},{"location":"blog/page/2/","title":"Textual Blog","text":""},{"location":"blog/page/3/","title":"Textual Blog","text":""},{"location":"blog/page/4/","title":"Textual Blog","text":""},{"location":"blog/archive/2023/page/2/","title":"2023","text":""},{"location":"blog/archive/2023/page/3/","title":"2023","text":""},{"location":"blog/archive/2022/page/2/","title":"2022","text":""},{"location":"blog/category/devlog/page/2/","title":"DevLog","text":""},{"location":"blog/category/release/page/2/","title":"Release","text":""}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Home","text":"<p>Tip</p> <p>See the navigation links in the header or side-bar.</p> <p>Click  (top left) on mobile.</p>"},{"location":"#welcome","title":"Welcome","text":"<p>Welcome to the Textual framework documentation.</p> <p>Get started or go straight to the Tutorial</p>"},{"location":"#what-is-textual","title":"What is Textual?","text":"<p>Textual is a Rapid Application Development framework for Python, built by Textualize.io.</p> <p>Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal or a web browser!</p> <ul> <li> <p> Rapid development</p> <p>Uses your existing Python skills to build beautiful user interfaces.</p> </li> <li> <p> Low requirements</p> <p>Run Textual on a single board computer if you want to.</p> </li> <li> <p> Cross platform</p> <p>Textual runs just about everywhere.</p> </li> <li> <p> Remote</p> <p>Textual apps can run over SSH.</p> </li> <li> <p> CLI Integration</p> <p>Textual apps can be launched and run from the command prompt.</p> </li> <li> <p> Open Source</p> <p>Textual is licensed under MIT.</p> </li> </ul> UI \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258afeeds\u258e\u258a\u2590X\u258c\u00a0Case\u00a0sensitive\u258e\u258a\u2590X\u258c\u00a0Regex\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503162.71.236.120\u00a0-\u00a0-\u00a0[29/Jan/2024:13:34:58\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Net\u2503 \u250352.70.240.171\u00a0-\u00a0-\u00a0[29/Jan/2024:13:35:33\u00a0+0000]\"GET\u00a0/2007/07/10/postmarkup-105/\u00a0HTTP/1.1\"3010\u2503 \u2503121.137.55.45\u00a0-\u00a0-\u00a0[29/Jan/2024:13:36:19\u00a0+0000]\"GET\u00a0/blog/rootblog/feeds/posts/\u00a0HTTP/1.1\"20010\u2503 \u250398.207.26.211\u00a0-\u00a0-\u00a0[29/Jan/2024:13:36:37\u00a0+0000]\"GET\u00a0/feeds/posts\u00a0HTTP/1.1\"3070\"-\"\"Mozilla/5.\u2503 \u250398.207.26.211\u00a0-\u00a0-\u00a0[29/Jan/2024:13:36:42\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"20098063\"-\"\"Mozil\u2503 \u250318.183.222.19\u00a0-\u00a0-\u00a0[29/Jan/2024:13:37:44\u00a0+0000]\"GET\u00a0/blog/rootblog/feeds/posts/\u00a0HTTP/1.1\"20010\u2503 \u250366.249.64.164\u00a0-\u00a0-\u00a0[29/Jan/2024:13:37:46\u00a0+0000]\"GET\u00a0/blog/tech/post/a-texture-mapped-spinning-3d\u2503 \u2503116.203.207.165\u00a0-\u00a0-\u00a0[29/Jan/2024:13:37:55\u00a0+0000]\"GET\u00a0/blog/tech/feeds/posts/\u00a0HTTP/1.1\"2001182\u2503 \u2503128.65.195.158\u00a0-\u00a0-\u00a0[29/Jan/2024:13:38:44\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"https:/\u2503 \u2503128.65.195.158\u00a0-\u00a0-\u00a0[29/Jan/2024:13:38:46\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"https:/\u2503 \u250351.222.253.12\u00a0-\u00a0-\u00a0[29/Jan/2024:13:41:17\u00a0+0000]\"GET\u00a0/blog/tech/post/css-in-the-terminal-with-pyt\u2503 \u2503154.159.237.77\u00a0-\u00a0-\u00a0[29/Jan/2024:13:42:28\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Moz\u2503 \u250392.247.181.10\u00a0-\u00a0-\u00a0[29/Jan/2024:13:43:23\u00a0+0000]\"GET\u00a0/feed/\u00a0HTTP/1.1\"200107059\"https://www.wil\u2503 \u2503134.209.40.52\u00a0-\u00a0-\u00a0[29/Jan/2024:13:43:41\u00a0+0000]\"GET\u00a0/blog/tech/feeds/posts/\u00a0HTTP/1.1\"200118238\u2503 \u2503192.3.134.205\u00a0-\u00a0-\u00a0[29/Jan/2024:13:43:55\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Mozi\u2503 \u2503174.136.108.22\u00a0-\u00a0-\u00a0[29/Jan/2024:13:44:42\u00a0+0000]\"GET\u00a0/feeds/posts/\u00a0HTTP/1.1\"200107059\"-\"\"Tin\u2503 \u250364.71.157.117\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:16\u00a0+0000]\"GET\u00a0/feed/\u00a0HTTP/1.1\"200107059\"-\"\"Feedbin\u00a0fee\u2503 \u2503121.137.55.45\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:19\u00a0+0000]\"GET\u00a0/blog/rootblog/feeds/posts/\u00a0HTTP/1.1\"20010\u2503 \u2503216.244.66.233\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:22\u00a0+0000]\"GET\u00a0/robots.txt\u00a0HTTP/1.1\"200132\"-\"\"Mozilla/\u2503 \u250378.82.5.250\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:29\u00a0+0000]\"GET\u00a0/blog/tech/post/real-working-hyperlinks-in-the\u2503 \u250378.82.5.250\u00a0-\u00a0-\u00a0[29/Jan/2024:13:45:30\u00a0+0000]\"GET\u00a0/favicon.ico\u00a0HTTP/1.1\"2005694\"https://www.w\u2581\u2581\u2503 \u250346.244.252.112\u00a0-\u00a0-\u00a0[29/Jan/2024:13:46:44\u00a0+0000]\"GET\u00a0/blog/tech/feeds/posts/\u00a0HTTP/1.1\"20011823\u2581\u2581\u2503 \u2503\u258c\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b f1\u00a0Help^t\u00a0Tail^l\u00a0Line\u00a0nos.^g\u00a0Go\u00a0to\u2193\u00a0Next\u2191\u00a0PreviousTAIL29/01/2024\u00a013:34:58\u00a0\u2022\u00a02540 Frogmouth https://raw.githubusercontent.com/textualize/frogmouth/main/README.md \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\ud83d\uddbc\u00a0\u00a0Discord\u2503ContentsLocalBookmarksHistory \u2503\u2503\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2503 \u2503\u258e\u258a\u2503\u25bc\u00a0\u2160\u00a0Frogmouth \u2503\u258eFrogmouth\u258a\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Screenshots \u2503\u258e\u258a\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Compatibility \u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Installing \u2503Frogmouth\u00a0is\u00a0a\u00a0Markdown\u00a0viewer\u00a0/\u00a0browser\u00a0for\u00a0your\u00a0terminal,\u00a0\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Running \u2503built\u00a0with\u00a0Textual.\u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Features \u2503\u2503\u2514\u2500\u2500\u00a0\u2161\u00a0Follow\u00a0this\u00a0project \u2503Frogmouth\u00a0can\u00a0open\u00a0*.md\u00a0files\u00a0locally\u00a0or\u00a0via\u00a0a\u00a0URL.\u00a0There\u00a0is\u00a0a\u00a0\u2503 \u2503familiar\u00a0browser-like\u00a0navigation\u00a0stack,\u00a0history,\u00a0bookmarks,\u00a0and\u2503 \u2503table\u00a0of\u00a0contents.\u2585\u2585\u2503 \u2503\u2503 \u2503A\u00a0quick\u00a0video\u00a0tour\u00a0of\u00a0Frogmouth.\u2503 \u2503\u2503 \u2503https://user-images.githubusercontent.com/554369/235305502-2699\u2503 \u2503a70e-c9a6-495e-990e-67606d84bbfa.mp4\u2503 \u2503\u2503 \u2503(thanks\u00a0Screen\u00a0Studio)\u2503 \u2503\u2503 \u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2503 \u2503\u258e\u258a\u2503 \u2503\u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Screenshots\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u2503 \u2503\u258e\u258a\u2503 \u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2503 \u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2503 \u2503\u258e\u258a\u2503 \u2503\u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Compatibility\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u2503 \u2503\u258e\u258a\u2503 \u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2503 \u2503Frogmouth\u00a0runs\u00a0on\u00a0Linux,\u00a0macOS,\u00a0and\u00a0Windows.\u00a0Frogmouth\u00a0requires\u2503 \u2503Python\u00a03.8\u00a0or\u00a0above.\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u00a0F1\u00a0\u00a0Help\u00a0\u00a0F2\u00a0\u00a0About\u00a0\u00a0CTRL+N\u00a0\u00a0Navigation\u00a0\u00a0CTRL+Q\u00a0\u00a0Quit\u00a0 TUIApp Memray\u00a0live\u00a0tracking\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Tue\u00a0Feb\u00a020\u00a013:53:11\u00a02024 \u00a0(\u2229\uff40-\u00b4)\u2283\u2501\u2606\uff9f.*\uff65\uff61\uff9f\u00a0\u256d\u2500\u00a0Heap\u00a0Usage\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e PID:\u00a077542CMD:\u00a0memray\u00a0run\u00a0--live\u00a0-m\u00a0http.server\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 TID:\u00a00x1Thread\u00a01\u00a0of\u00a01\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 Samples:\u00a06Duration:\u00a06.1\u00a0seconds\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 \u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2588\u2588\u2588\u2502 \u2570\u2500\u2500\u00a01.501MB\u00a0(100%\u00a0of\u00a01.501MB\u00a0max)\u00a0\u2500\u256f \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Location\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Total\u00a0Bytes%\u00a0TotalOwn\u00a0Bytes%\u00a0OwnAllocations \u00a0_run_tracker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.440MB\u00a095.94%\u00a0\u00a01.111KB0.07%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0440\u00a0memray.comman \u00a0_run_module_code\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.381MB\u00a091.99%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0388\u00a0&lt;frozen\u00a0runpy \u00a0_find_and_load\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.364MB\u00a090.86%\u00a0960.000B0.06%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0361\u00a0&lt;frozen\u00a0impor \u00a0_load_unlocked\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.360MB\u00a090.62%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0355\u00a0&lt;frozen\u00a0impor\u2584\u2584 \u00a0exec_module\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.355MB\u00a090.28%\u00a0\u00a01.225KB0.08%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0351\u00a0&lt;frozen\u00a0impor \u00a0run_module\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.351MB\u00a090.00%\u00a0\u00a01.273KB0.08%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0354\u00a0&lt;frozen\u00a0runpy \u00a0_run_code\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.334MB\u00a088.90%\u00a0890.000B0.06%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0341\u00a0&lt;frozen\u00a0runpy \u00a0_call_with_frames_removed\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.298MB\u00a086.49%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0283\u00a0&lt;frozen\u00a0impor \u00a0get_code\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.168MB\u00a077.80%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0185\u00a0&lt;frozen\u00a0impor \u00a0&lt;module&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01.095MB\u00a072.96%\u00a0\u00a01.688KB0.11%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a095\u00a0http.server\u00a0\u00a0 \u00a0_find_and_load_unlocked\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a059.031KB\u00a0\u00a03.84%\u00a0\u00a0\u00a01.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a040\u00a0&lt;frozen\u00a0impor \u00a0test\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a042.097KB\u00a0\u00a02.74%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a027\u00a0http.server\u00a0\u00a0 \u00a0__init__\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a041.565KB\u00a0\u00a02.70%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a020\u00a0socketserver\u00a0 \u00a0getfqdn\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a040.933KB\u00a0\u00a02.66%\u00a0\u00a02.135KB0.14%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a018\u00a0socket\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0server_bind\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a040.933KB\u00a0\u00a02.66%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a018\u00a0http.server\u00a0\u00a0 \u00a0search_function\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a038.798KB\u00a0\u00a02.52%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a016\u00a0encodings\u00a0\u00a0\u00a0\u00a0 \u00a0_handle_fromlist\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a029.723KB\u00a0\u00a01.93%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a033\u00a0&lt;frozen\u00a0impor \u00a0&lt;module&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a024.617KB\u00a0\u00a01.60%\u00a0\u00a01.688KB0.11%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0encodings.idn \u00a0_compile\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a023.629KB\u00a0\u00a01.54%\u00a0\u00a0\u00a00.000B0.00%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a011\u00a0re\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a \u00a0Q\u00a0\u00a0Quit\u00a0\u00a0&lt;\u00a0\u00a0Previous\u00a0Thread\u00a0\u00a0&gt;\u00a0\u00a0Next\u00a0Thread\u00a0\u00a0T\u00a0\u00a0Sort\u00a0by\u00a0Total\u00a0\u00a0O\u00a0\u00a0Sort\u00a0by\u00a0Own\u00a0\u00a0A\u00a0\u00a0Sort\u00a0by\u00a0Allocations\u00a0\u00a0SPACE\u00a0\u00a0Pause\u00a0 <p> <p></p> <p></p> Harlequin\u256d\u2500\u00a0Data\u00a0Catalog\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u00a0Query\u00a0Editor\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u25bc\u00a0f1\u00a0db\u2502\u2502\u00a01\u00a0\u00a0select\u2502 \u2502\u2514\u2500\u00a0\u25bc\u00a0main\u00a0sch\u2502\u2502\u00a02\u00a0\u00a0drivers.surname,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0circuits\u00a0t\u2502\u2502\u00a03\u00a0\u00a0drivers.forename,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0constructor_result\u2502\u2502\u00a04\u00a0\u00a0drivers.nationality,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0constructor_standi\u2502\u2502\u00a05\u00a0\u00a0avg(driver_standings.position)asavg_standing,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0constructors\u00a0t\u2502\u2502\u00a06\u00a0\u00a0avg(driver_standings.points)asavg_points\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0driver_standings\u00a0t\u2502\u2502\u00a07\u00a0\u00a0fromdriver_standings\u2502 \u2502\u251c\u2500\u00a0\u25bc\u00a0drivers\u00a0t\u2502\u2502\u00a08\u00a0\u00a0joindriversondriver_standings.driverid=drivers.driverid\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0code\u00a0s\u2502\u2502\u00a09\u00a0\u00a0joinracesondriver_standings.raceid=races.raceid\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0dob\u00a0d\u2502\u250210\u00a0\u00a0groupby1,\u00a02,\u00a03\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0driverId\u00a0##\u2502\u250211\u00a0\u00a0orderbyavg_standing\u00a0asc\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0driverRef\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0forename\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0nationality\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0number\u00a0s\u2502\u2502\u2502 \u2502\u2502\u00a0\u00a0\u251c\u2500\u00a0surname\u00a0s\u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u2502\u2502\u00a0\u00a0\u2514\u2500\u00a0url\u00a0s\u2502\u2590X\u258c\u00a0Limit\u00a0500Run\u00a0Query \u2502\u251c\u2500\u00a0\u25b6\u00a0lap_times\u00a0t\u2502\u256d\u2500\u00a0Query\u00a0Results\u00a0(850\u00a0Records)\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u251c\u2500\u00a0\u25b6\u00a0pit_stops\u00a0t\u2502\u2502\u00a0surname\u00a0s\u00a0forename\u00a0s\u00a0nationality\u00a0s\u00a0avg_standing\u00a0#.#\u00a0av\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0qualifying\u00a0t\u2502\u2502\u00a0Hamilton\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Lewis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0British\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02.66\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a014\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0races\u00a0t\u2502\u2502\u00a0Prost\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Alain\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0French\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03.51\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a033\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0results\u00a0t\u2502\u2502\u00a0Stewart\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Jackie\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0British\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03.78\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a024\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0seasons\u00a0t\u2502\u2502\u00a0Schumacher\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0German\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04.33\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a046\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0sprint_results\u00a0t\u2502\u2502\u00a0Verstappen\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Max\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Dutch\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a012\u2502 \u2502\u251c\u2500\u00a0\u25b6\u00a0status\u00a0t\u2502\u2502\u00a0Fangio\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Juan\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Argentine\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.22\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a016\u2502 \u2502\u2514\u2500\u00a0\u25b6\u00a0tbl1\u00a0t\u2502\u2502\u00a0Pablo\u00a0Montoya\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Juan\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Colombian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.25\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a027\u2502 \u2502\u2502\u2502\u00a0Farina\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Nino\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Italian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.27\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a011\u2502 \u2502\u2502\u2502\u00a0Hulme\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Denny\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0New\u00a0Zealander\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.34\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a014\u2502 \u2502\u2502\u2502\u00a0Fagioli\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Luigi\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Italian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.67\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a09.\u2502 \u2502\u2502\u2502\u00a0Clark\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Jim\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0British\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.81\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a017\u2502 \u2502\u2502\u2502\u00a0Vettel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Sebastian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0German\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.84\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a010\u2502 \u2502\u2502\u2502\u00a0Senna\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ayrton\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Brazilian\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05.92\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a031\u2502 \u2502\u258c\u2502\u2502\u258c\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u00a0CTRL+Q\u00a0\u00a0Quit\u00a0\u00a0F1\u00a0\u00a0Help\u00a0 Stopwatch tutorialstopwatch.pystopwatch.tcss <p></p> <pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n    def start(self) -&gt; None:\n        \"\"\"Method to start (or resume) time updating.\"\"\"\n        self.start_time = monotonic()\n        self.update_timer.resume()\n\n    def stop(self):\n        \"\"\"Method to stop the time display updating.\"\"\"\n        self.update_timer.pause()\n        self.total += monotonic() - self.start_time\n        self.time = self.total\n\n    def reset(self):\n        \"\"\"Method to reset the time display to zero.\"\"\"\n        self.total = 0\n        self.time = 0\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch.tcss\"\n\n    BINDINGS = [\n        (\"d\", \"toggle_dark\", \"Toggle dark mode\"),\n        (\"a\", \"add_stopwatch\", \"Add\"),\n        (\"r\", \"remove_stopwatch\", \"Remove\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Called to add widgets to the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch(), id=\"timers\")\n\n    def action_add_stopwatch(self) -&gt; None:\n        \"\"\"An action to add a timer.\"\"\"\n        new_stopwatch = Stopwatch()\n        self.query_one(\"#timers\").mount(new_stopwatch)\n        new_stopwatch.scroll_visible()\n\n    def action_remove_stopwatch(self) -&gt; None:\n        \"\"\"Called to remove a timer.\"\"\"\n        timers = self.query(\"Stopwatch\")\n        if timers:\n            timers.last().remove()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    overflow: auto;\n}\n\n#calculator {\n    layout: grid;\n    grid-size: 4;\n    grid-gutter: 1 2;\n    grid-columns: 1fr;\n    grid-rows: 2fr 1fr 1fr 1fr 1fr 1fr;\n    margin: 1 2;\n    min-height: 25;\n    min-width: 26;\n    height: 100%;\n\n    &amp;:inline {\n        margin: 0 2;\n    }\n}\n\nButton {\n    width: 100%;\n    height: 100%;\n}\n\n#numbers {\n    column-span: 4;\n    padding: 0 1;\n    height: 100%;\n    background: $primary-lighten-2;\n    color: $text;\n    content-align: center middle;\n    text-align: right;\n}\n\n#number-0 {\n    column-span: 2;\n}\n</code></pre> Pride examplepride.py <p> PrideApp </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass PrideApp(App):\n    \"\"\"Displays a pride flag.\"\"\"\n\n    COLORS = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\"]\n\n    def compose(self) -&gt; ComposeResult:\n        for color in self.COLORS:\n            stripe = Static()\n            stripe.styles.height = \"1fr\"\n            stripe.styles.background = color\n            yield stripe\n\n\nif __name__ == \"__main__\":\n    PrideApp().run()\n</code></pre> Calculator examplecalculator.pycalculator.tcss <p> CalculatorApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0C\u00a0\u00a0+/-\u00a0\u00a0%\u00a0\u00a0\u00f7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a07\u00a0\u00a08\u00a0\u00a09\u00a0\u00a0\u00d7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a04\u00a0\u00a05\u00a0\u00a06\u00a0\u00a0-\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a01\u00a0\u00a02\u00a0\u00a03\u00a0\u00a0+\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a00\u00a0\u00a0.\u00a0\u00a0=\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <pre><code>\"\"\"\nAn implementation of a classic calculator, with a layout inspired by macOS calculator.\n\nWorks like a real calculator. Click the buttons or press the equivalent keys.\n\"\"\"\n\nfrom decimal import Decimal\n\nfrom textual import events, on\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.css.query import NoMatches\nfrom textual.reactive import var\nfrom textual.widgets import Button, Digits\n\n\nclass CalculatorApp(App):\n    \"\"\"A working 'desktop' calculator.\"\"\"\n\n    CSS_PATH = \"calculator.tcss\"\n\n    numbers = var(\"0\")\n    show_ac = var(True)\n    left = var(Decimal(\"0\"))\n    right = var(Decimal(\"0\"))\n    value = var(\"\")\n    operator = var(\"plus\")\n\n    # Maps button IDs on to the corresponding key name\n    NAME_MAP = {\n        \"asterisk\": \"multiply\",\n        \"slash\": \"divide\",\n        \"underscore\": \"plus-minus\",\n        \"full_stop\": \"point\",\n        \"plus_minus_sign\": \"plus-minus\",\n        \"percent_sign\": \"percent\",\n        \"equals_sign\": \"equals\",\n        \"minus\": \"minus\",\n        \"plus\": \"plus\",\n    }\n\n    def watch_numbers(self, value: str) -&gt; None:\n        \"\"\"Called when numbers is updated.\"\"\"\n        self.query_one(\"#numbers\", Digits).update(value)\n\n    def compute_show_ac(self) -&gt; bool:\n        \"\"\"Compute switch to show AC or C button\"\"\"\n        return self.value in (\"\", \"0\") and self.numbers == \"0\"\n\n    def watch_show_ac(self, show_ac: bool) -&gt; None:\n        \"\"\"Called when show_ac changes.\"\"\"\n        self.query_one(\"#c\").display = not show_ac\n        self.query_one(\"#ac\").display = show_ac\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Add our buttons.\"\"\"\n        with Container(id=\"calculator\"):\n            yield Digits(id=\"numbers\")\n            yield Button(\"AC\", id=\"ac\", variant=\"primary\")\n            yield Button(\"C\", id=\"c\", variant=\"primary\")\n            yield Button(\"+/-\", id=\"plus-minus\", variant=\"primary\")\n            yield Button(\"%\", id=\"percent\", variant=\"primary\")\n            yield Button(\"\u00f7\", id=\"divide\", variant=\"warning\")\n            yield Button(\"7\", id=\"number-7\", classes=\"number\")\n            yield Button(\"8\", id=\"number-8\", classes=\"number\")\n            yield Button(\"9\", id=\"number-9\", classes=\"number\")\n            yield Button(\"\u00d7\", id=\"multiply\", variant=\"warning\")\n            yield Button(\"4\", id=\"number-4\", classes=\"number\")\n            yield Button(\"5\", id=\"number-5\", classes=\"number\")\n            yield Button(\"6\", id=\"number-6\", classes=\"number\")\n            yield Button(\"-\", id=\"minus\", variant=\"warning\")\n            yield Button(\"1\", id=\"number-1\", classes=\"number\")\n            yield Button(\"2\", id=\"number-2\", classes=\"number\")\n            yield Button(\"3\", id=\"number-3\", classes=\"number\")\n            yield Button(\"+\", id=\"plus\", variant=\"warning\")\n            yield Button(\"0\", id=\"number-0\", classes=\"number\")\n            yield Button(\".\", id=\"point\")\n            yield Button(\"=\", id=\"equals\", variant=\"warning\")\n\n    def on_key(self, event: events.Key) -&gt; None:\n        \"\"\"Called when the user presses a key.\"\"\"\n\n        def press(button_id: str) -&gt; None:\n            \"\"\"Press a button, should it exist.\"\"\"\n            try:\n                self.query_one(f\"#{button_id}\", Button).press()\n            except NoMatches:\n                pass\n\n        key = event.key\n        if key.isdecimal():\n            press(f\"number-{key}\")\n        elif key == \"c\":\n            press(\"c\")\n            press(\"ac\")\n        else:\n            button_id = self.NAME_MAP.get(key)\n            if button_id is not None:\n                press(self.NAME_MAP.get(key, key))\n\n    @on(Button.Pressed, \".number\")\n    def number_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Pressed a number.\"\"\"\n        assert event.button.id is not None\n        number = event.button.id.partition(\"-\")[-1]\n        self.numbers = self.value = self.value.lstrip(\"0\") + number\n\n    @on(Button.Pressed, \"#plus-minus\")\n    def plus_minus_pressed(self) -&gt; None:\n        \"\"\"Pressed + / -\"\"\"\n        self.numbers = self.value = str(Decimal(self.value or \"0\") * -1)\n\n    @on(Button.Pressed, \"#percent\")\n    def percent_pressed(self) -&gt; None:\n        \"\"\"Pressed %\"\"\"\n        self.numbers = self.value = str(Decimal(self.value or \"0\") / Decimal(100))\n\n    @on(Button.Pressed, \"#point\")\n    def pressed_point(self) -&gt; None:\n        \"\"\"Pressed .\"\"\"\n        if \".\" not in self.value:\n            self.numbers = self.value = (self.value or \"0\") + \".\"\n\n    @on(Button.Pressed, \"#ac\")\n    def pressed_ac(self) -&gt; None:\n        \"\"\"Pressed AC\"\"\"\n        self.value = \"\"\n        self.left = self.right = Decimal(0)\n        self.operator = \"plus\"\n        self.numbers = \"0\"\n\n    @on(Button.Pressed, \"#c\")\n    def pressed_c(self) -&gt; None:\n        \"\"\"Pressed C\"\"\"\n        self.value = \"\"\n        self.numbers = \"0\"\n\n    def _do_math(self) -&gt; None:\n        \"\"\"Does the math: LEFT OPERATOR RIGHT\"\"\"\n        try:\n            if self.operator == \"plus\":\n                self.left += self.right\n            elif self.operator == \"minus\":\n                self.left -= self.right\n            elif self.operator == \"divide\":\n                self.left /= self.right\n            elif self.operator == \"multiply\":\n                self.left *= self.right\n            self.numbers = str(self.left)\n            self.value = \"\"\n        except Exception:\n            self.numbers = \"Error\"\n\n    @on(Button.Pressed, \"#plus,#minus,#divide,#multiply\")\n    def pressed_op(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Pressed one of the arithmetic operations.\"\"\"\n        self.right = Decimal(self.value or \"0\")\n        self._do_math()\n        assert event.button.id is not None\n        self.operator = event.button.id\n\n    @on(Button.Pressed, \"#equals\")\n    def pressed_equals(self) -&gt; None:\n        \"\"\"Pressed =\"\"\"\n        if self.value:\n            self.right = Decimal(self.value)\n        self._do_math()\n\n\nif __name__ == \"__main__\":\n    CalculatorApp().run(inline=True)\n</code></pre> <pre><code>Screen {\n    overflow: auto;\n}\n\n#calculator {\n    layout: grid;\n    grid-size: 4;\n    grid-gutter: 1 2;\n    grid-columns: 1fr;\n    grid-rows: 2fr 1fr 1fr 1fr 1fr 1fr;\n    margin: 1 2;\n    min-height: 25;\n    min-width: 26;\n    height: 100%;\n\n    &amp;:inline {\n        margin: 0 2;\n    }\n}\n\nButton {\n    width: 100%;\n    height: 100%;\n}\n\n#numbers {\n    column-span: 4;\n    padding: 0 1;\n    height: 100%;\n    background: $primary-lighten-2;\n    color: $text;\n    content-align: center middle;\n    text-align: right;\n}\n\n#number-0 {\n    column-span: 2;\n}\n</code></pre>"},{"location":"FAQ/","title":"FAQ","text":""},{"location":"FAQ/#frequently-asked-questions","title":"Frequently Asked Questions","text":"<p>Welcome to the Textual FAQ. Here we try and answer any question that comes up frequently. If you can't find what you are looking for here, see our other help channels.</p> <p></p>"},{"location":"FAQ/#does-textual-support-images","title":"Does Textual support images?","text":"<p>Textual doesn't have built-in support for images yet, but it is on the Roadmap.</p> <p>See also the rich-pixels project for a Rich renderable for images that works with Textual.</p> <p></p>"},{"location":"FAQ/#how-can-i-fix-importerror-cannot-import-name-composeresult-from-textualapp","title":"How can I fix ImportError cannot import name ComposeResult from textual.app ?","text":"<p>You likely have an older version of Textual. You can install the latest version by adding the <code>-U</code> switch which will force pip to upgrade.</p> <p>The following should do it:</p> <pre><code>pip install textual-dev -U\n</code></pre> <p></p>"},{"location":"FAQ/#how-can-i-select-and-copy-text-in-a-textual-app","title":"How can I select and copy text in a Textual app?","text":"<p>Running a Textual app puts your terminal in to application mode which disables clicking and dragging to select text. Most terminal emulators offer a modifier key which you can hold while you click and drag to restore the behavior you may expect from the command line. The exact modifier key depends on the terminal and platform you are running on.</p> <ul> <li>iTerm Hold the OPTION key.</li> <li>Gnome Terminal Hold the SHIFT key.</li> <li>Windows Terminal Hold the SHIFT key.</li> </ul> <p>Refer to the documentation for your terminal emulator, if it is not listed above.</p> <p></p>"},{"location":"FAQ/#how-can-i-set-a-translucent-app-background","title":"How can I set a translucent app background?","text":"<p>Some terminal emulators have a translucent background feature which allows the desktop underneath to be partially visible.</p> <p>This feature is unlikely to work with Textual, as the translucency effect requires the use of ANSI background colors, which Textual doesn't use. Textual uses 16.7 million colors where available which enables consistent colors across all platforms and additional effects which aren't possible with ANSI colors.</p> <p>For more information on ANSI colors in Textual, see Why no Ansi Themes?.</p> <p></p>"},{"location":"FAQ/#how-do-i-center-a-widget-in-a-screen","title":"How do I center a widget in a screen?","text":"<p>Tip</p> <p>See How To Center Things in the Textual documentation for a more comprehensive answer to this question.</p> <p>To center a widget within a container use <code>align</code>. But remember that <code>align</code> works on the children of a container, it isn't something you use on the child you want centered.</p> <p>For example, here's an app that shows a <code>Button</code> in the middle of a <code>Screen</code>:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\nclass ButtonApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"PUSH ME!\")\n\nif __name__ == \"__main__\":\n    ButtonApp().run()\n</code></pre> <p>If you use the above on multiple widgets, you'll find they appear to \"left-align\" in the center of the screen, like this:</p> <pre><code>+-----+\n|     |\n+-----+\n\n+---------+\n|         |\n+---------+\n\n+---------------+\n|               |\n+---------------+\n</code></pre> <p>If you want them more like this:</p> <pre><code>     +-----+\n     |     |\n     +-----+\n\n   +---------+\n   |         |\n   +---------+\n\n+---------------+\n|               |\n+---------------+\n</code></pre> <p>the best approach is to wrap each widget in a <code>Center</code> container that individually centers it. For example:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center\nfrom textual.widgets import Button\n\nclass ButtonApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Center(Button(\"PUSH ME!\"))\n        yield Center(Button(\"AND ME!\"))\n        yield Center(Button(\"ALSO PLEASE PUSH ME!\"))\n        yield Center(Button(\"HEY ME ALSO!!\"))\n\nif __name__ == \"__main__\":\n    ButtonApp().run()\n</code></pre> <p></p>"},{"location":"FAQ/#how-do-i-fix-workerdeclarationerror","title":"How do I fix WorkerDeclarationError?","text":"<p>Textual version 0.31.0 requires that you set <code>thread=True</code> on the <code>@work</code> decorator if you want to run a threaded worker.</p> <p>If you want a threaded worker, you would declare it in the following way:</p> <pre><code>@work(thread=True)\ndef run_in_background():\n    ...\n</code></pre> <p>If you don't want a threaded worker, you should make your work function <code>async</code>:</p> <pre><code>@work()\nasync def run_in_background():\n    ...\n</code></pre> <p>This change was made because it was too easy to accidentally create a threaded worker, which may produce unexpected results.</p> <p></p>"},{"location":"FAQ/#how-do-i-pass-arguments-to-an-app","title":"How do I pass arguments to an app?","text":"<p>When creating your <code>App</code> class, override <code>__init__</code> as you would when inheriting normally. For example:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nclass Greetings(App[None]):\n\n    def __init__(self, greeting: str=\"Hello\", to_greet: str=\"World\") -&gt; None:\n        self.greeting = greeting\n        self.to_greet = to_greet\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(f\"{self.greeting}, {self.to_greet}\")\n</code></pre> <p>Then the app can be run, passing in various arguments; for example:</p> <pre><code># Running with default arguments.\nGreetings().run()\n\n# Running with a keyword argument.\nGreetings(to_greet=\"davep\").run()\n\n# Running with both positional arguments.\nGreetings(\"Well hello\", \"there\").run()\n</code></pre> <p></p>"},{"location":"FAQ/#no-widget-called-textlog","title":"No widget called TextLog","text":"<p>The <code>TextLog</code> widget was renamed to <code>RichLog</code> in Textual 0.32.0. You will need to replace all references to <code>TextLog</code> in your code, with <code>RichLog</code>. Most IDEs will have a search and replace function which will help you do this.</p> <p>Here's how you should import RichLog:</p> <pre><code>from textual.widgets import RichLog\n</code></pre> <p></p>"},{"location":"FAQ/#why-do-some-key-combinations-never-make-it-to-my-app","title":"Why do some key combinations never make it to my app?","text":"<p>Textual can only ever support key combinations that are passed on by your terminal application. Which keys get passed on can differ from terminal to terminal, and from operating system to operating system.</p> <p>Because of this it's best to stick to key combinations that are known to be universally-supported; these include the likes of:</p> <ul> <li>Letters</li> <li>Numbers</li> <li>Numbered function keys (especially F1 through F10)</li> <li>Space</li> <li>Return</li> <li>Arrow, home, end and page keys</li> <li>Control</li> <li>Shift</li> </ul> <p>When creating bindings for your application we recommend picking keys and key combinations from the above.</p> <p>Keys that aren't normally passed through by terminals include Cmd and Option on macOS, and the Windows key on Windows.</p> <p>If you need to test what key combinations work in different environments you can try them out with <code>textual keys</code>.</p> <p></p>"},{"location":"FAQ/#why-doesnt-textual-look-good-on-macos","title":"Why doesn't Textual look good on macOS?","text":"<p>You may find that the default macOS Terminal.app doesn't render Textual apps (and likely other TUIs) very well, particularly when it comes to box characters. For instance, you may find it displays misaligned blocks and lines like this:</p> <p></p> <p>You can (mostly) fix this by opening settings -&gt; profiles &gt; Text tab, and changing the font settings. We have found that Menlo Regular font, with a character spacing of 1 and line spacing of 0.805 produces reasonable results. If you want to use another font, you may have to tweak the line spacing until you get good results.</p> <p></p> <p>With these changes, Textual apps render more as intended:</p> <p></p> <p>Even with this fix, Terminal.app has a few limitations. It is limited to 256 colors, and can be a little slow compared to more modern alternatives. Fortunately there are a number of free terminal emulators for macOS which produces high quality results.</p> <p>We recommend any of the following terminals:</p> <ul> <li>iTerm2</li> <li>Kitty</li> <li>WezTerm</li> </ul>"},{"location":"FAQ/#terminalapp-colors","title":"Terminal.app colors","text":""},{"location":"FAQ/#iterm2-colors","title":"iTerm2 colors","text":""},{"location":"FAQ/#why-doesnt-textual-support-ansi-themes","title":"Why doesn't Textual support ANSI themes?","text":"<p>Textual will not generate escape sequences for the 16 themeable ANSI colors.</p> <p>This is an intentional design decision we took for for the following reasons:</p> <ul> <li>Not everyone has a carefully chosen ANSI color theme. Color combinations which may look fine on your system, may be unreadable on another machine. There is very little an app author or Textual can do to resolve this. Asking users to simply pick a better theme is not a good solution, since not all users will know how.</li> <li>ANSI colors can't be manipulated in the way Textual can do with other colors. Textual can blend colors and produce light and dark shades from an original color, which is used to create more readable text and user interfaces. Color blending will also be used to power future accessibility features.</li> </ul> <p>Textual has a design system which guarantees apps will be readable on all platforms and terminals, and produces better results than ANSI colors.</p> <p>There is currently a light and dark version of the design system, but more are planned. It will also be possible for users to customize the source colors on a per-app or per-system basis. This means that in the future you will be able to modify the core colors to blend in with your chosen terminal theme.</p> <p></p>"},{"location":"FAQ/#why-doesnt-the-datatable-scroll-programmatically","title":"Why doesn't the <code>DataTable</code> scroll programmatically?","text":"<p>If scrolling in your <code>DataTable</code> is apparently broken, it may be because your <code>DataTable</code> is using the default value of <code>height: auto</code>. This means that the table will be sized to fit its rows without scrolling, which may cause the container (typically the screen) to scroll. If you would like the table itself to scroll, set the height to something other than <code>auto</code>, like <code>100%</code>.</p> <p>NOTE: As of Textual v0.31.0 the <code>max-height</code> of a <code>DataTable</code> is set to <code>100%</code>, this will mean that the above is no longer the default experience.</p> <p>Generated by FAQtory</p>"},{"location":"getting_started/","title":"Getting started","text":"<p>All you need to get started building Textual apps.</p>"},{"location":"getting_started/#requirements","title":"Requirements","text":"<p>Textual requires Python 3.8 or later (if you have a choice, pick the most recent Python). Textual runs on Linux, macOS, Windows and probably any OS where Python also runs.</p> <p>Your platform</p>"},{"location":"getting_started/#linux-all-distros","title":"Linux (all distros)","text":"<p>All Linux distros come with a terminal emulator that can run Textual apps.</p>"},{"location":"getting_started/#macos","title":"macOS","text":"<p>The default terminal app is limited to 256 colors. We recommend installing a newer terminal such as iterm2, Kitty, or WezTerm.</p>"},{"location":"getting_started/#windows","title":"Windows","text":"<p>The new Windows Terminal runs Textual apps beautifully.</p>"},{"location":"getting_started/#installation","title":"Installation","text":"<p>Here's how to install Textual.</p>"},{"location":"getting_started/#from-pypi","title":"From PyPI","text":"<p>You can install Textual via PyPI, with the following command:</p> <pre><code>pip install textual\n</code></pre> <p>If you plan on developing Textual apps, you should also install textual developer tools:</p> <pre><code>pip install textual-dev\n</code></pre>"},{"location":"getting_started/#from-conda-forge","title":"From conda-forge","text":"<p>Textual is also available on conda-forge. The preferred package manager for conda-forge is currently micromamba:</p> <pre><code>micromamba install -c conda-forge textual\n</code></pre> <p>And for the textual developer tools:</p> <pre><code>micromamba install -c conda-forge textual-dev\n</code></pre>"},{"location":"getting_started/#textual-cli","title":"Textual CLI","text":"<p>If you installed the developer tools you should have access to the <code>textual</code> command. There are a number of sub-commands available which will aid you in building Textual apps. Run the following for a list of the available commands:</p> <pre><code>textual --help\n</code></pre> <p>See devtools for more about the <code>textual</code> command.</p>"},{"location":"getting_started/#demo","title":"Demo","text":"<p>Once you have Textual installed, run the following to get an impression of what it can do:</p> <pre><code>python -m textual\n</code></pre> <p>If Textual is installed you should see the following:</p> <p> Textual\u00a0Demo \u2b58Textual\u00a0Demo TOP\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Widgets\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0Textual\u00a0widgets\u00a0are\u00a0powerful\u00a0interactive\u00a0components.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Widgets \u00a0\u00a0Build\u00a0your\u00a0own\u00a0or\u00a0use\u00a0the\u00a0builtin\u00a0widgets.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0Input\u00a0Text\u00a0/\u00a0Password\u00a0input.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Rich\u00a0content\u00a0\u2022\u00a0Button\u00a0Clickable\u00a0button\u00a0with\u00a0a\u00a0number\u00a0of\u00a0styles.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0Switch\u00a0A\u00a0switch\u00a0to\u00a0toggle\u00a0between\u00a0states.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2583\u2583 \u00a0\u2022\u00a0DataTable\u00a0A\u00a0spreadsheet-like\u00a0widget\u00a0for\u00a0navigating\u00a0data.\u00a0Cells\u00a0may\u00a0contain\u00a0text\u00a0or\u00a0Rich\u00a0\u00a0\u00a0 renderables.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CSS\u00a0\u2022\u00a0Tree\u00a0An\u00a0generic\u00a0tree\u00a0with\u00a0expandable\u00a0nodes.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0DirectoryTree\u00a0A\u00a0tree\u00a0of\u00a0file\u00a0and\u00a0folders.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2022\u00a0...\u00a0many\u00a0more\u00a0planned\u00a0... \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a \u258eUsername\u258awill\u258e\u258a \u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a \u258e\u258a\u2585\u2585 \u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a \u258ePassword\u258aPassword\u258e\u258a \u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a \u258e\u258a \u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258a \u258e\u00a0Login\u00a0\u258a \u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Foo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Bar\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Baz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Foo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(0,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(0,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(0,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(0,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(1,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(1,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(1,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(1,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(2,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(2,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(2,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(2,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(3,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(3,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(3,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(3,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(4,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(4,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(4,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(4,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(5,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(5,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(5,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(5,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(6,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(6,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(6,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(6,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(7,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(7,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(7,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(7,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(8,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(8,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(8,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(8,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(9,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(9,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(9,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(9,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2582\u2582 \u00a0Cell\u00a0(10,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(10,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(10,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(10,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(11,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(11,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(11,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(11,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(12,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(12,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(12,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(12,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Cell\u00a0(13,\u00a00)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(13,\u00a01)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(13,\u00a02)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cell\u00a0(13,\u00a03)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258f \u00a0^b\u00a0Sidebar\u00a0\u00a0^t\u00a0Toggle\u00a0Dark\u00a0mode\u00a0\u00a0^s\u00a0Screenshot\u00a0\u00a0f1\u00a0Notes\u00a0\u00a0^q\u00a0Quit\u00a0\u258f^p\u00a0palette </p>"},{"location":"getting_started/#examples","title":"Examples","text":"<p>The Textual repository comes with a number of example apps. To try out the examples, first clone the Textual repository:</p> HTTPSSSHGitHub CLI <pre><code>git clone https://github.com/Textualize/textual.git\n</code></pre> <pre><code>git clone git@github.com:Textualize/textual.git\n</code></pre> <pre><code>gh repo clone Textualize/textual\n</code></pre> <p>With the repository cloned, navigate to the <code>/examples/</code> directory where you will find a number of Python files you can run from the command line:</p> <pre><code>cd textual/examples/\npython code_browser.py ../\n</code></pre>"},{"location":"getting_started/#widget-examples","title":"Widget examples","text":"<p>In addition to the example apps, you can also find the code listings used to generate the screenshots in these docs in the <code>docs/examples</code> directory.</p>"},{"location":"getting_started/#need-help","title":"Need help?","text":"<p>See the help page for how to get help with Textual, or to report bugs.</p>"},{"location":"help/","title":"Help","text":"<p>If you need help with any aspect of Textual, let us know! We would be happy to hear from you.</p>"},{"location":"help/#bugs-and-feature-requests","title":"Bugs and feature requests","text":"<p>Report bugs via GitHub on the Textual issues page. You can also post feature requests via GitHub issues, but see the roadmap first.</p>"},{"location":"help/#help-with-using-textual","title":"Help with using Textual","text":"<p>You can seek help with using Textual in the discussion area on GitHub.</p>"},{"location":"help/#discord-server","title":"Discord Server","text":"<p>For more realtime feedback or chat, join our discord server to connect with the Textual community.</p>"},{"location":"roadmap/","title":"Roadmap","text":"<p>We (textualize.io) are actively building and maintaining Textual.</p> <p>We have many new features in the pipeline. This page will keep track of that work.</p>"},{"location":"roadmap/#features","title":"Features","text":"<p>High-level features we plan on implementing.</p> <ul> <li> Accessibility<ul> <li> Integration with screen readers</li> <li> Monochrome mode</li> <li> High contrast theme</li> <li> Color-blind themes</li> </ul> </li> <li> Command palette<ul> <li> Fuzzy search</li> </ul> </li> <li> Configuration (.toml based extensible configuration format)</li> <li> Console</li> <li> Devtools<ul> <li> Integrated log</li> <li> DOM tree view</li> <li> REPL</li> </ul> </li> <li> Reactive state abstraction</li> <li> Themes<ul> <li> Customize via config</li> <li> Builtin theme editor</li> </ul> </li> </ul>"},{"location":"roadmap/#widgets","title":"Widgets","text":"<p>Widgets are key to making user-friendly interfaces. The builtin widgets should cover many common (and some uncommon) use-cases. The following is a list of the widgets we have built or are planning to build.</p> <ul> <li> Buttons<ul> <li> Error / warning variants</li> </ul> </li> <li> Color picker</li> <li> Checkbox</li> <li> Content switcher</li> <li> DataTable<ul> <li> Cell select</li> <li> Row / Column select</li> <li> API to update cells / rows</li> <li> Lazy loading API</li> </ul> </li> <li> Date picker</li> <li> Drop-down menus</li> <li> Form Widget<ul> <li> Serialization / Deserialization</li> <li> Export to <code>attrs</code> objects</li> <li> Export to <code>PyDantic</code> objects</li> </ul> </li> <li> Image support<ul> <li> Half block</li> <li> Braille</li> <li> Sixels, and other image extensions</li> </ul> </li> <li> Input<ul> <li> Validation</li> <li> Error / warning states</li> <li> Template types: IP address, physical units (weight, volume), currency, credit card etc</li> </ul> </li> <li> Select control (pull-down)</li> <li> Markdown viewer<ul> <li> Collapsible sections</li> <li> Custom widgets</li> </ul> </li> <li> Plots<ul> <li> bar chart</li> <li> line chart</li> <li> Candlestick chars</li> </ul> </li> <li> Progress bars<ul> <li> Style variants (solid, thin etc)</li> </ul> </li> <li> Radio boxes</li> <li> Spark-lines</li> <li> Switch</li> <li> Tabs</li> <li> TextArea (multi-line input)<ul> <li> Basic controls</li> <li> Indentation guides</li> <li> Smart features for various languages</li> <li> Syntax highlighting</li> </ul> </li> </ul>"},{"location":"tutorial/","title":"Tutorial","text":"<p>Welcome to the Textual Tutorial!</p> <p>By the end of this page you should have a solid understanding of app development with Textual.</p> <p>Quote</p> <p>If you want people to build things, make it fun.</p> <p>\u2014 Will McGugan (creator of Rich and Textual)</p>"},{"location":"tutorial/#video-series","title":"Video series","text":"<p>This tutorial has an accompanying video series which covers the same content.</p>"},{"location":"tutorial/#stopwatch-application","title":"Stopwatch Application","text":"<p>We're going to build a stopwatch application. This application should show a list of stopwatches with buttons to start, stop, and reset the stopwatches. We also want the user to be able to add and remove stopwatches as required.</p> <p>This will be a simple yet fully featured app \u2014 you could distribute this app if you wanted to!</p> <p>Here's what the finished app will look like:</p> <p> stopwatch.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:16.15 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:12.10 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:08.09 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u00a0a\u00a0Add\u00a0\u00a0r\u00a0Remove\u00a0\u258f^p\u00a0palette </p>"},{"location":"tutorial/#try-it-out","title":"Try it out!","text":"<p>The following is not a screenshot, but a fully interactive Textual app running in your browser.</p> <p>Try in Textual-web</p> <p></p> <p>Tip</p> <p>See textual-web if you are interested in publishing your Textual apps on the web.</p>"},{"location":"tutorial/#get-the-code","title":"Get the code","text":"<p>If you want to try the finished Stopwatch app and follow along with the code, first make sure you have Textual installed then check out the Textual repository:</p> HTTPSSSHGitHub CLI <pre><code>git clone https://github.com/Textualize/textual.git\n</code></pre> <pre><code>git clone git@github.com:Textualize/textual.git\n</code></pre> <pre><code>gh repo clone Textualize/textual\n</code></pre> <p>With the repository cloned, navigate to <code>docs/examples/tutorial</code> and run <code>stopwatch.py</code>.</p> <pre><code>cd textual/docs/examples/tutorial\npython stopwatch.py\n</code></pre>"},{"location":"tutorial/#type-hints-in-brief","title":"Type hints (in brief)","text":"<p>Tip</p> <p>Type hints are entirely optional in Textual. We've included them in the example code but it's up to you whether you add them to your own projects.</p> <p>We're a big fan of Python type hints at Textualize. If you haven't encountered type hinting, it's a way to express the types of your data, parameters, and return values. Type hinting allows tools like mypy to catch bugs before your code runs.</p> <p>The following function contains type hints:</p> <pre><code>def repeat(text: str, count: int) -&gt; str:\n    \"\"\"Repeat a string a given number of times.\"\"\"\n    return text * count\n</code></pre> <p>Parameter types follow a colon. So <code>text: str</code> indicates that <code>text</code> requires a string and <code>count: int</code> means that <code>count</code> requires an integer.</p> <p>Return types follow <code>-&gt;</code>. So <code>-&gt; str:</code> indicates this method returns a string.</p>"},{"location":"tutorial/#the-app-class","title":"The App class","text":"<p>The first step in building a Textual app is to import and extend the <code>App</code> class. Here's a basic app class we will use as a starting point for the stopwatch app.</p> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>If you run this code, you should see something like the following:</p> <p> stopwatch01.py \u2b58StopwatchApp \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>Hit the D key to toggle between light and dark mode.</p> <p> stopwatch01.py \u2b58StopwatchApp \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>Hit Ctrl+C to exit the app and return to the command prompt.</p>"},{"location":"tutorial/#a-closer-look-at-the-app-class","title":"A closer look at the App class","text":"<p>Let's examine <code>stopwatch01.py</code> in more detail.</p> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The first line imports the Textual <code>App</code> class, which we will use as the base class for our App. The second line imports two builtin widgets: <code>Footer</code> which shows a bar at the bottom of the screen with bound keys, and <code>Header</code> which shows a title at the top of the screen. Widgets are re-usable components responsible for managing a part of the screen. We will cover how to build widgets in this tutorial.</p> <p>The following lines define the app itself:</p> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The App class is where most of the logic of Textual apps is written. It is responsible for loading configuration, setting up widgets, handling keys, and more.</p> <p>Here's what the above app defines:</p> <ul> <li> <p><code>BINDINGS</code> is a list of tuples that maps (or binds) keys to actions in your app. The first value in the tuple is the key; the second value is the name of the action; the final value is a short description. We have a single binding which maps the D key on to the \"toggle_dark\" action. See key bindings in the guide for details.</p> </li> <li> <p><code>compose()</code> is where we construct a user interface with widgets. The <code>compose()</code> method may return a list of widgets, but it is generally easier to yield them (making this method a generator). In the example code we yield an instance of each of the widget classes we imported, i.e. <code>Header()</code> and <code>Footer()</code>.</p> </li> <li> <p><code>action_toggle_dark()</code> defines an action method. Actions are methods beginning with <code>action_</code> followed by the name of the action. The <code>BINDINGS</code> list above tells Textual to run this action when the user hits the D key. See actions in the guide for details.</p> </li> </ul> stopwatch01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The final three lines create an instance of the app and calls the run() method which puts your terminal in to application mode and runs the app until you exit with Ctrl+C. This happens within a <code>__name__ == \"__main__\"</code> block so we could run the app with <code>python stopwatch01.py</code> or import it as part of a larger project.</p>"},{"location":"tutorial/#designing-a-ui-with-widgets","title":"Designing a UI with widgets","text":"<p>Textual comes with a number of builtin widgets, like Header and Footer, which are versatile and re-usable. We will need to build some custom widgets for the stopwatch. Before we dive in to that, let's first sketch a design for the app \u2014 so we know what we're aiming for.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVcXGlP40pcdTAwMTb93r9cdTAwMDIxX2akxq/2paXRqFx1MDAwM4R9XHUwMDBiW8PMXHUwMDEzMrFDXGbxguNA4Kn/+5SddOwktuM4S/tFLVx1MDAxYVxcjuu66tx77lJVf33Z2NhcZj48c/PbxqbZb+pcdTAwMWTL8PX3za/h9TfT71quo5pQ9HfX7fnN6M52XHUwMDEweN1vf/xh6/6LXHUwMDE5eFx1MDAxZL1pam9Wt6d3ukHPsFxcrenaf1iBaXf/XHUwMDEz/jzVbfPfnmtcdTAwMWKBr8WdbJmGXHUwMDE1uP6gL7Nj2qZcdTAwMTN01dP/q/7e2Pgr+pmQzjebge48dczoXHUwMDBiUVMsIFx1MDAwNmzy6qnrRMJcbi5cdTAwMDWFXGaR0VxyVndHdVx1MDAxN5iGam0pkc24Jby0+aizxo/G/VPr6uX83Hu/ueqSPo97bVmdzmXw0Ymk6rrqZeK2buC7L+atZVx1MDAwNG3VXG4nrmd9y3d7T23H7HbHvuN6etNcbj7Ca1x1MDAwMIyuXHUwMDBlhuDbRnylXHUwMDFmTlx1MDAxMCdcdTAwMWFkXHUwMDAwUoboqCH8KpJcXCOEYpi4Plx1MDAxMGbb7ajBV8L8XHUwMDAzRJ9YnEe9+fKkZHKM+Fx1MDAxZVx1MDAwMpqAJlx1MDAwNuF9+IqqQ1xyy4lcdTAwMGXapvXUXHUwMDBlXHUwMDA2gmtcdTAwMWNcbp7o24yGXHUwMDFkXCLEOUFcYqNRS9ijd2BEXGL4c3Lg2rrvXHJcdTAwMDdos1x1MDAxYv6RkDZcdTAwMTR0d1x1MDAxMj5JXGIlpvag2/C2m5+HRzdcdTAwMTf1t7uL8114vnc4etZcdTAwMTjedN933zdHLT+Hv8Wi9TxDXHUwMDFmgFxiMlx1MDAwNiRcdTAwMTaSXHUwMDEwgmNcdTAwMWN2LOdFNTq9Tie+5jZfYtxFV39+LYF3gmBcdTAwMTbeJVx1MDAxNYJQSorj3XrEnty37P7JsSlcdTAwMWT97NV7/VGvON5cdTAwMDXRXHUwMDA0wXxcdTAwMWPsXHUwMDE4YlxyYyqT18uAvaVTRNE02JWGTWOcsSlwc8FcdTAwMDRUUCDrXHUwMDAy9y/MXHUwMDA0Zj9cdTAwMThH82CG67KPb+3+/bFcclx1MDAwZnZunFx1MDAwN3v/sL01XHUwMDE3tlx1MDAxOVx1MDAwNVxigWVhe0zOYmZcdTAwMWMqXHUwMDExXHUwMDE4R1x1MDAxY4nCuE5/63RcXLf1Zrvnm1VAtkxDNlZ4X1x1MDAxY9mBrztdT/dcdTAwMTWaUtBNU9CN8LTpJlAqky9WgO5lXHUwMDAyMJ5n11x0Lq3PcKhcdTAwMTNcdTAwMGZcYq/WddvqfIxNVYRMJell4CZcdTAwMDXVu6bqMcIhXHUwMDFmu/d7x3pcbpG72VTvYPpjoFx1MDAwZSzl6oxusC3DSFx1MDAxYfOmXHUwMDEyQFfP9Fx1MDAwZopcdTAwMThh17eeLEfvXFwl5SvPXHUwMDFmjMlM/lAug0SCo8J65lx1MDAxY2/3t06R6Fx1MDAxY8BG42brXHUwMDAzXFw1/I9q81x1MDAwN2NEXHUwMDAzWIJJd4lgpPRcZoGF/aWmaVx1MDAxMEMvSiFiSskgR8q1XHUwMDEyZG1cdTAwMTQymMpeXHUwMDFmn+zsideL9zuj9tK6sE9/bDfS/aNIU2Jcbvma/thZzJTeYXFmXHUwMDEyWPmXWMaTtVwiZqJcdOM4yUycXHUwMDAzyVxiT8zsLI3JXHUwMDFm5ooyk7JcdTAwMTnpOkOp8rpcdTAwMTbXmaWQXHUwMDEzXHUwMDA3XGIoXHUwMDFkS7jhqyenXHUwMDEyXHUwMDE4XFyMnFx1MDAxYWbXXGbWyk4zTPwkO1xyXHUwMDA0LE9PMGFcdTAwMTEntI1wXGKQXHUwMDE0rHh4c/zs9smja183ru5Ojp73jWtcdTAwMTI0q01PhCtVo2Lc34v8QMQ1oMhhPKYuXHUwMDEz4kSfND3DXHUwMDFhnExcdTAwMTiMXHUwMDE0XHUwMDBlU02OO6dDveMq5FRcdTAwMTaArkDtyvHKx0n/ljx8Xlx1MDAwN96xW/NZv+18st1cbkY8kmRcdTAwMDFcdTAwMWQyjpVZ4ax4wJP+0lx1MDAxNadcdTAwMTVcdTAwMTVIZGBd+WJ0knCWzitcdTAwMDRPwzyFV6hcdTAwMDQq5GGr8MeqXHUwMDEz9Fx1MDAwMPAt/Mc1XHUwMDA018ouMyz0JLskxSzPMVhmptCgQFxicVxuOSusende//LkZGf39uiqVoeg3Ttv+8e/k2RwkZQxXHUwMDA1krOpnDGBQmOccrGqIIgypnHO8Vx1MDAxOJOMJY1cdTAwMDVcdTAwMWRPZY/CXCJcdTAwMDRcdTAwMTX/XHUwMDEwsVYtXHUwMDE0XHUwMDEwYonm0MLyoKRcdTAwMTRngpJcdTAwMTPJkVx1MDAwNKQ4XHUwMDFmyGOhO/unXHKf1M97bbttXl1cdTAwMWZUvZAhqFx1MDAwNlx1MDAwNaWEXHQ+XHUwMDE5mlx1MDAxM00uI7ubVcoomt1ccrP8gvLEq6wlNP++3Xpr2O32XHUwMDE2Mz6fejY4erg74uOuz3JD8/RcdTAwMGWr50IpK5KlM0x5XHUwMDBmXHUwMDAwwDlcXKj8Ua6oXHUwMDBipaxCltJQppElKM1yYnMsXHUwMDAwXHUwMDEwfFx1MDAxNTW/6vhQl4Hurzc2n2HlpzPHoYBcdTAwMGL4TSiborCQiOE5XHUwMDEyYW7t5NW8QPzItnuNeqv/dnyB33+vuvFcIsE5XHUwMDAxqZkwXCKVT1xuVqxspVx1MDAwMnRKwuhFrrve/iDfL8+O/Ju9k7bVMPZcdTAwMGZcdTAwMDS+P2uvkrTSO6xcdTAwMWVpIZpZgFGBP8CcUFA8xZU/zFx1MDAxNVUjXHUwMDE192eoXHUwMDExpVx1MDAxYV9xOrlY2C9cdFx1MDAxMpJSuM5s8lx1MDAxMIFwXHUwMDBlXHUwMDA0LsZYw3BcdTAwMWFo41x1MDAwM7py3pph+zOi/kjM8uyFWKazKFx1MDAxOEZcdTAwMDBcdTAwMTFQ3Fl8RkivfaKzXHUwMDFh3vGI34JXd82b/d9cdTAwMTlfkdlBP9Mog1x1MDAxNOGpJVx1MDAwNsroaVx1MDAwYkf8Lf1cdTAwMTFcdTAwMDCaXHUwMDE28XNccipdXHUwMDFh0/WR4il9R1igsPeoXHUwMDBmOKmHXGJcdTAwMTBlXHUwMDEwMV1fOXRcdTAwMTbP6PpcdTAwMTXbu7o/OFx1MDAwMSe39nZw+eRcdTAwMWScXs63WkxIXHRji7NcIp6BIDvBLJByJOZYXHUwMDE3mf7O6XBv+m63u9XWg2b794NewEzQh1x1MDAwZVx1MDAxM4aMrDTJTCmfXHUwMDA2fUqAxCRcdTAwMDJUKcl6k8xzXHUwMDAzcTG62Td1I0lcdTAwMWJrYJpcdTAwMTl2epJphlx1MDAxMpYnXHUwMDE5XG4zSVx1MDAwNlwiyKOca2Gtc+y3k8tcdTAwMTf48Irk+71OwFx1MDAxYjx9LpVZRkvSNzpb34CGXGKcjIRcIq9cdTAwMTAqfWNkXCJEKUE0XGKJR5OlXHUwMDExXHKZVjWcsohcciNcdTAwMTLSUWVcYuU2QPrdzsOWj/pta5/dP+3hXHUwMDA3ez5CkYrd4/dZVeDCM0vzkGEogUCgePyf/ta/nVJcbkCcZkJcXPlRy4D4XGZGSYF5SvxcdTAwMTKuhyFcdTAwMDCtmVDmXHUwMDA14mKEUnfdYM2EMsMmT1x1MDAxMspQwkVcYiUn56ZAiOZSujP60NxvdY1cdTAwMWYt1Kyf39qn/aB5U/FaJdOYXHUwMDEwJKVYSTHXplLf1ShWXCLMJcOYraBamc4xw1x1MDAxMsZcdTAwMWU7O3uxrf7lNjk6291BXHUwMDFl+Vx1MDAxMOk5t1x1MDAxMntcXFx1MDAxMGF8PbVQxrM3XHUwMDAzIE64ilx1MDAwN+fINNvPp/a2d3x0dF4zOvt35lPt8sWpei2Ua5hcdTAwMTE0UYn/XHUwMDE42H9ccirVXzhgX7RcdTAwMTgqiFRTQcSai6E7XHI9eDyy2s9cdTAwMTdcdTAwMTf711x1MDAwZl3y2q5jP1x1MDAxZOPF8soreuwsry+9w3lcdTAwMTRS4DCHumqvj+akq7lcdTAwMDBcdTAwMTBcdFx1MDAwNouHNPnDXFzZXCIrytRGTjW2XHUwMDA0bVxcSpVcdTAwMTVcYkokoGtdXHUwMDAxXVx1MDAwMoaL+Xzrr7LO4I9lV1lcdMkmP4wogpTC4jt0asfXzkO7Z+yC163vV/XWNdjln5WvXHUwMDBmQY1yXHRTNjVTJrRVr1x1MDAwYi1XZoWIXHUwMDAxiClfRVxuL4+4LpqH6PFwz3Vfnlxm9/Ni79Opi93F+XDpj53Fh+lcdTAwMWRWj1x1MDAwZrHIXFw8ijBcdTAwMDVcXMGmeFx1MDAxOSl/lKuqnSxTOznRhFgxXHUwMDE5XHUwMDE2q98qXHUwMDE2RGqq1rxVdc1cXPi76rczSKV0/TYz84hpls5cdTAwMTGBJZtrb3jt7HnLe39/dPmLrd95dYs9YiND59aSVZ/tgEpGNSogSFnmR2G4LUjmXHUwMDFm84FcdNZJ2W2rXHUwMDAwpejbXHUwMDE0/SGiXGaCSM5D1TNcdTAwMWW59Cdr37dcdTAwMGbPXHUwMDFmxPfDmjh8faa017r/sbRMXG6lXHUwMDAwr6/sXHUwMDE2blx1MDAxOH9cdTAwMWbPnSdthFx1MDAxOPvCyFx1MDAwNHTMVpBjIcY2yY+bh7FcdTAwMTdJ270+XHUwMDEwJtdcdTAwMTJcZlx1MDAwNjWNfrOPP1FcdTAwMDAkmPB5zvvJn+Zq2lx1MDAwMlxuNFxmXHUwMDA1Y1x1MDAwMmMsMJw0XHUwMDA3QoOYhVx1MDAwYiZouFtyNTaBizBcdTAwMDWFZbhcdTAwMWSR8OSBXHUwMDAx8cJcdTAwMGWoQYSEomGGpVx1MDAwMvykvVAuNCfhSq/57UUkZNn6hGCiVH2iXHUwMDFiRnU1yzEs50k1xibj1/lVXHUwMDA3XHUwMDA1yCXS1WYvlHJcdTAwMGJoTKrRXHUwMDEzMFxc8IeT5yGFY6F7USSiodCLYThcdTAwMWNGQeTwhpHp2jRcdTAwMWQjlmn8NfRusO3atlx1MDAxNahcdTAwMDE4dy0nmLwjeqPvoZ61TX1Kb9WTk22TXG7phU9cdTAwMWO3zvFvXHUwMDFiMWSjP0a///k19e6tTDxFrZNQilx1MDAxZvcl+f/cplx1MDAwNKHszJZEUir9wsUzW/lMVFFTwjV1V9pcdTAwMGVMisP1zFxmQ45BaFNXYkaksmScyF9cdTAwMWaeslSGKFx0XHUwMDE5XHUwMDAyXHUwMDEw8TCyXHUwMDAyaOq4XGbVICVgskTOa1x1MDAxMTtCldqW8vOXbUeApiw9UapcdTAwMDEg41xckZ9I3DQwI0IjXHUwMDAyRJ5jvv3IkiW/aDgmXHUwMDBilzzccqIgxaREdFpcdTAwMTaENUSHO1x1MDAwZqek+VvZrEzwhp8p2M5pszKTXHUwMDBmXHS+nNzwhChnhOHiqcGjz7u911Zw8456jkktv9WA9duKWywsNJZusZQnpFx0wfLPR1gsXHUwMDEwimWO3ZxYvtFSPlx1MDAwZVx1MDAxMFwiZM1lsVx1MDAwNVx1MDAwMpbcQGhVXHUwMDAx1mqPY1x1MDAxNJSBeUrVS1xusP7n/DOyUKbxr9RYK5G6mi9cdTAwMWazcLSVlKyct4SzXHUwMDE3okjCwpNw5ti1kj/7XHUwMDE1NT1UxV2/llx1MDAxMidXqlx1MDAwZk6skJpiWIakcth5cqf2Mk1cdTAwMTBcdTAwMTOaXHUwMDE4nLhcdTAwMWFcdTAwMTGPiD2QODOjUVxuOFx1MDAwZuXkTFwiknagXHUwMDA1XHUwMDA2UGBaJlVT5dArn87G3Fx1MDAxNFxiiVQ2XHUwMDFhcCYoJ3FcYj1yU5SXMtixkO8x/X0jrkwkhZ9pXGbN6b7k1jd5zuJcdTAwMWWoaF1IJIpnc9+E3fQ+3G6999yRXHUwMDA3dv2cg+1SlmSdp6lRXHJcdTAwMDCkQszpbC5ccjclrGg5W9FcdTAwMDNcYjFV1mE1S0fzPILT21OvfaVcdTAwMDb70rm+wVcnwdbxoZ3uXHUwMDExzFPIXFz6Y2dcdTAwMTUy0zss7r4oJlxy/cd5dlx1MDAwMeYqY1YskdyJMJX+4FhKguY4ai1/mCu6sEe56pmayFXYXFyBo1x1MDAxM1x1MDAxMMRcZofnXHUwMDExrfPgm1x1MDAxMlx1MDAxMFxczINe/7GGM3gj71jDL0Pl3dQ97zJQ4zZyStTUWMbw5eOx2nyzzPda9kl8X4a6XHUwMDFiKolcdTAwMTlOzF8/v/z8P1xiXCJcdTAwMWT6In0= StopReset00:00:07.21Start00:00:00.00HeaderFooterStart00:00:00.00StopwatchStopwatch(started)Reset"},{"location":"tutorial/#custom-widgets","title":"Custom widgets","text":"<p>We need a <code>Stopwatch</code> widget composed of the following child widgets:</p> <ul> <li>A \"Start\" button</li> <li>A \"Stop\" button</li> <li>A \"Reset\" button</li> <li>A time display</li> </ul> <p>Textual has a builtin <code>Button</code> widget which takes care of the first three components. All we need to build is the time display widget which will show the elapsed time and the stopwatch widget itself.</p> <p>Let's add those to the app. Just a skeleton for now, we will add the rest of the features as we go.</p> stopwatch02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay(\"00:00:00.00\")\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>We've imported two new widgets in this code: <code>Button</code>, which creates a clickable button, and <code>Static</code> which is a base class for a simple control. We've also imported <code>ScrollableContainer</code> from <code>textual.containers</code> which (as the name suggests) is a <code>Widget</code> which contains other widgets.</p> <p>We've defined an empty <code>TimeDisplay</code> widget by extending <code>Static</code>. We will flesh this out later.</p> <p>The Stopwatch widget class also extends <code>Static</code>. This class has a <code>compose()</code> method which yields child widgets, consisting of three <code>Button</code> objects and a single <code>TimeDisplay</code> object. These widgets will form the stopwatch in our sketch.</p>"},{"location":"tutorial/#the-buttons","title":"The buttons","text":"<p>The Button constructor takes a label to be displayed in the button (<code>\"Start\"</code>, <code>\"Stop\"</code>, or <code>\"Reset\"</code>). Additionally, some of the buttons set the following parameters:</p> <ul> <li><code>id</code> is an identifier we can use to tell the buttons apart in code and apply styles. More on that later.</li> <li><code>variant</code> is a string which selects a default style. The \"success\" variant makes the button green, and the \"error\" variant makes it red.</li> </ul>"},{"location":"tutorial/#composing-the-widgets","title":"Composing the widgets","text":"<p>To add widgets to our application we first need to yield them from the app's <code>compose()</code> method:</p> <p>The new line in <code>StopwatchApp.compose()</code> yields a single <code>ScrollableContainer</code> object which will create a scrolling list of stopwatches. When classes contain other widgets (like <code>ScrollableContainer</code>) they will typically accept their child widgets as positional arguments. We want to start the app with three stopwatches, so we construct three <code>Stopwatch</code> instances and pass them to the container's constructor.</p>"},{"location":"tutorial/#the-unstyled-app","title":"The unstyled app","text":"<p>Let's see what happens when we run <code>stopwatch02.py</code>.</p> <p> stopwatch02.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 00:00:00.00 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2586\u2586 \u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 00:00:00.00 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a0 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>The elements of the stopwatch application are there. The buttons are clickable and you can scroll the container but it doesn't look like the sketch. This is because we have yet to apply any styles to our new widgets.</p>"},{"location":"tutorial/#writing-textual-css","title":"Writing Textual CSS","text":"<p>Every widget has a <code>styles</code> object with a number of attributes that impact how the widget will appear. Here's how you might set white text and a blue background for a widget:</p> <pre><code>self.styles.background = \"blue\"\nself.styles.color = \"white\"\n</code></pre> <p>While it's possible to set all styles for an app this way, it is rarely necessary. Textual has support for CSS (Cascading Style Sheets), a technology used by web browsers. CSS files are data files loaded by your app which contain information about styles to apply to your widgets.</p> <p>Info</p> <p>The dialect of CSS used in Textual is greatly simplified over web based CSS and much easier to learn.</p> <p>CSS makes it easy to iterate on the design of your app and enables live-editing \u2014 you can edit CSS and see the changes without restarting the app!</p> <p>Let's add a CSS file to our application.</p> stopwatch03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay(\"00:00:00.00\")\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch03.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>Adding the <code>CSS_PATH</code> class variable tells Textual to load the following file when the app starts:</p> stopwatch03.tcss<pre><code>Stopwatch {\n    layout: horizontal;\n    background: $boost;\n    height: 5;\n    margin: 1;\n    min-width: 50;\n    padding: 1;\n}\n\nTimeDisplay {\n    content-align: center middle;\n    text-opacity: 60%;\n    height: 3;\n}\n\nButton {\n    width: 16;\n}\n\n#start {\n    dock: left;\n}\n\n#stop {\n    dock: left;\n    display: none;\n}\n\n#reset {\n    dock: right;\n}\n</code></pre> <p>If we run the app now, it will look very different.</p> <p> stopwatch03.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>This app looks much more like our sketch. Let's look at how Textual uses <code>stopwatch03.tcss</code> to apply styles.</p>"},{"location":"tutorial/#css-basics","title":"CSS basics","text":"<p>CSS files contain a number of declaration blocks. Here's the first such block from <code>stopwatch03.tcss</code> again:</p> <pre><code>Stopwatch {\n    layout: horizontal;\n    background: $boost;\n    height: 5;\n    margin: 1;\n    min-width: 50;\n    padding: 1;\n}\n</code></pre> <p>The first line tells Textual that the styles should apply to the <code>Stopwatch</code> widget. The lines between the curly brackets contain the styles themselves.</p> <p>Here's how this CSS code changes how the <code>Stopwatch</code> widget is displayed.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGlT20pcdTAwMTb9nl/hYuZj3Ol9SdXUXHUwMDE0mLCEsIUlycx7lVx1MDAxMpKwXHUwMDE1ZMuxZFx1MDAxNr/Kf58rQazd2MZcdTAwMDYz9VRcdTAwMTRcdTAwMTi1lqu+5/Q993bLf71pNNaiu7679r6x5t7alu85XHUwMDAz62btbbz/2lx1MDAxZIRe0IMmmvxcdTAwMWZcdTAwMDbDgZ1cdTAwMWPZiaJ++P7du641uHKjvm/ZLrr2wqHlh9HQ8Vx1MDAwMmRcdTAwMDfdd17kdsN/x79cdTAwMGasrvuvftB1olx1MDAwMUpv0nRcdTAwMWQvXG5cdTAwMDb393J9t+v2olx1MDAxMK7+X/i/0fgr+Z2xbuDakdVr+25yQtKUXHUwMDFhKDUt7j1cYnqJsUxcdTAwMWLKJNVkfIBcdTAwMTduwu1cIteB1ksw2U1b4l1rp+fnV527b8cnrfbt94D7XHUwMDFi3uczkt710vP9k+jOT6xcblx1MDAwM3iYtC2MXHUwMDA2wZX7xXOiXHUwMDBltJLC/rqzXHUwMDA2wbDd6blhmDsn6Fu2XHUwMDE33cWPgMc773vgfSPdc1x1MDAxYvvHMIQ1M5ozJcYt8amUcyR1Zue9Ja3Ah55cdTAwMDdL/oGTLbXlwrKv2mBQz0mPsV2HO1Z6zM3D81x0KZFSiuXu2nG9dieKn1x1MDAwNGOkXHUwMDA1XHUwMDExkmbu7ia9ToRmUnKJ06eN79nfdVx1MDAxMlx1MDAwMPyZ7Zme89AzvaHvp2bGXHJcdTAwMWaKoMlcdTAwMDIn41Duj1pHN44z3Fx1MDAxMteYbOtmv+tvjVx1MDAxZieHMmswXGJu1sYtv1x1MDAxZT6lXHUwMDE2XHL7jnVcdTAwMGZcdTAwMWRcIiU2WmAhXHUwMDE11eN23+tdXHUwMDE1jfVcdTAwMDP7KkVbsvfX2zlQrjNAKKCcXHUwMDFiXGZcdTAwMDBQxkyN8rsvx1x1MDAxZlpmt7l7sVx1MDAxZH36XHUwMDFlXHUwMDA1m+vfv929JMpcdTAwMDEvj8CcYYaUMErmMJXAXFxiZLhghD5cculcdTAwMWPbWKgy0onEZYBLWcJ1XGZcYqYwXHUwMDExz4LrT+vOZcft2ups+1x1MDAwN93fOT883j2+rcZ15N5GL1xi6+T2XHUwMDE1iFaE1CFagT9h5FJ8akRP7o48ojuW3Vx1MDAxOVx1MDAwZdxcdTAwMTXAtOCIVmNaU8SfjuloYPXCvjVcdTAwMDBAVYzgplxma8pKsNaEY8IlN1x1MDAwYoN1NfI0JopzXHUwMDA2XHUwMDAxxcyAvNTDQS868UZxJ1Oc27tldT3/LuekXHUwMDA0ktA/J5E1iLI9XHUwMDE4unDL+Fx1MDAxYUTlXHUwMDBlXve9dozZNVx1MDAxYlx1MDAxZcJcdTAwMWTk4Fx1MDAxY3mgasZcdTAwMDd0PcfJjuA2WGDBNVx1MDAwN7vTjLzBwGt7Pcs/zVx1MDAxOTh/1JC4NmpcdTAwMDA8qVx1MDAxNJRjNTXJLs9bR82D/Vx1MDAxZnZcdTAwMTieXvMvrattdui9LMnUY1x1MDAxY+NGIaNAbpiSPFJcdTAwMDJRSvPkWzTJiGCIXHUwMDE0mTymXHUwMDFiXHUwMDEzqKDbXHUwMDFlWCdcdTAwMDWEXHUwMDEyLtXiSDcplvxs/Tw7bNODjf6BXGZcdTAwMGZYf32fd9ZfVSxcdTAwMTGM1eFcXCjCmOQzxJLJ3bGaMFx1MDAxN1x1MDAwNNfBXFxcdTAwMTOkXGIvwGzRMKeqjO6KYIKxXHUwMDExhDC6OO3/SDDheFx1MDAwNug9LZhg/D75QfmOXFx6SHlkVC6GlKyZ81x1MDAwN1x1MDAxNsNqxZvkXFxRo9X06VxiiUbHwaXeXHUwMDEyx9d476K5c9lum9FqpyNcdTAwMTJYVZlzS4qUNE/PRury7upsRJeYJsBcYmJohoPLjCBk3TlmXHUwMDAz22/rI4b90Z41+mzvT1x1MDAxNUHeTrrsK0re61wik8a6jijGKEO1Znp6okzs5lx1MDAxNc1yXHUwMDE0q6GKXHUwMDA2/bVcdTAwMDCqTFxmTFVsqYhLRIPWXHUwMDEykv8/xqXPbug+b5LzyHhejEj3XHUwMDA2zsUurmrDkCaKMqxcdJ6aXba5acqbj6PNnVx1MDAxZGNv9Jtfty82/VVnl2FcdTAwMDblKXTPLYPMMlx1MDAwNZ+syGbKtV5cbj4gYpFBaHVoJVx1MDAxYTGLwmpi6TmJXHUwMDE1XHUwMDA1/TpW5Vx1MDAxZaRIod/GTCTRfYisYpFcdTAwMTF1LDKGXG4lKZ9ezIU6tH7Y/fObs30pdLBcdTAwMWZcdTAwMWVccjtm5VlEXGZSxVpAQiRjXHUwMDEwgU4gT5xHmUgmjLjGPDdVMyZcdTAwMTU3SFx1MDAwYpFv/M0uzDCnRlxuNVx1MDAwM71SlfVcdTAwMWJcdTAwMTf0Yc+vWVk3n4rK9KI1iDa8nuP12sVT3J5T0+JbYdRcbrpdL1x1MDAwMjOOXHUwMDAyr1x1MDAxN1x1MDAxNY9IrrtcdTAwMWVjveNaJebAlbNtRVL04yvm5W76qZGiJvln/PnPt5VHN8uOTXZnfJpe4k3278xcdTAwMTRcdTAwMTZEXHUwMDE2945cdTAwMGJ9XHUwMDFjc1x1MDAwZVx1MDAxNJ9+XHUwMDEyNNjb/EG2etf+9o9j94BcdTAwMGbZXHUwMDA3vi9Xn8JcdTAwMTKp4pzj/VxmqkHw/MulMEFwXHUwMDAzrFx1MDAxNIa7S1xuv1N3pFTGSFx1MDAxMlx1MDAwM4iQ4H2IjCVcdTAwMTXKXHUwMDE4xEqhZyq1/83n5+NzvZPjrejeXHUwMDE5qZ1Ih1xuZoO2q2W2XHUwMDExJp5Mz1x1MDAxND9cdTAwMWaj9lx1MDAwNiNcdTAwMWJH+ESwy+1u6+Y/ncNR3/+48tRcdTAwMDZcdTAwMDZcdTAwMGLMXGYuRWcuXHUwMDExlpLjZZbwKYabK11ZwIemglnjSifXXHUwMDE0XHUwMDAw8vJcXJ5rNm0luJxrWyiRyy5NTvvtzFx1MDAwNTGXitpJXHSipJEwWkwvq+Uu3zsyh7fru4e7QeeL+DB0jtXqXHUwMDEzVyFVZEhcdTAwMTKTXHUwMDA1RphcdTAwMTZWXHUwMDBmLZy4ulxcX0qZW2IsXHUwMDAxLa20kS+upv9mbPnoXG5fXHUwMDE2zpuKqlx1MDAxM+c0uObFveNcdTAwMDUpkFx1MDAwNzKq9fRz5XpcdTAwMDN3j/btT9s3XHUwMDE3n4eR/rBtt1uXXHUwMDBi5qtjhVx1MDAxZHehhKVKIa6q8mAqXHUwMDEwK+Soi6/VUiSK0TxdUshcZsJJ0sRNsqW+eGCwwdhcdTAwMTBN8PMswFx1MDAxYfV1Z7RPvu58O1xuNvpdtqPWeVrkzKGuODfxdtJ1N7+FV2fOQXvnzmtcdTAwMWXuaOc6PO21XHUwMDE2Oucxy/gykU11VVmKa4lcdTAwMDTeoVxcSZmpOD3GpD1ztH973lx1MDAxYlx1MDAxZFx1MDAwN1tcdTAwMTY+3W3tnUaOs/pMMlx1MDAxYVx1MDAxOVMxXHUwMDFmXHUwMDBmXGJFy5asRFat7SqLVCmwoYw/05LFJzDmcWRcdTAwMTOuNGczIDtcdTAwMDXQPNXfTjDwRnF91m/41l0wrJlgqalcdTAwMDP77mWeOIupXHUwMDAyl42aSN/aYlx1MDAxMnRnXHUwMDFkf6VcdTAwMTJcdTAwMWNcdTAwMGJNplx1MDAwZoSTvb6iwpVcdTAwMWKGaHHRTHKqXHUwMDExyFx1MDAxMEKZXHUwMDAwclPOl8hhXCKRllx1MDAxNFBccsZcdTAwMDDCVVxu7kz6yVxihERcdTAwMDKySGtwSibbTFclXHUwMDBiaJJslpnNRata+EPFXFwzM1x1MDAwNVWbMezhpZHdKcRWwmZ7XHUwMDE4W9kkiEOPXHUwMDE4JrHmMZS1zlx1MDAxY9W2+snIjZhhXFxcdTAwMTCBwftClFx1MDAxZT0np59sXHUwMDEyQUxjqZigQihcdTAwMDXAqrZIYKyEhFxcimNOy+54VWW0WmTHW7NcZupcdTAwMTlFfq0sMfVcdTAwMGLOMSdEsVx1MDAxOfLxw+DO4k54ff1ldHeuw7NbbM72Vn1Yo0IjTngpXHUwMDFk58QgoYtLUVx1MDAxNz6gVa1cdTAwMTEsi1x1MDAxMiaJxmyRazFej9x+mighXHLb9f1G11x1MDAxYYAsWFx1MDAwNUGSN2g+MVwiMolegbWUKqownaH8PdnbK8paRlx1MDAxOeKCK+CEXHUwMDAxksr0ce+5S5ApTlx1MDAxZi/8XVx1MDAxMYyIVFxuXHUwMDEzXHUwMDA16TdE81xuLcI5wsVcdTAwMWH9mNLUyDjZmGVcdTAwMWTIypbW6lwi/uSIkFx1MDAxNSFcdTAwMThRKiBcdTAwMDVUgsVcdTAwMDE9M3c7XHUwMDBl+Vxu3aeOS1x1MDAxNlx1MDAxZnGsNYZwJjVcdTAwMDX8UJa+XHIyNoUhSVx1MDAxNNFcdTAwMTW2vCbRUYvgeGtmwLsgscFVffGfU1x1MDAxMtdcdTAwMTPN9Fx1MDAwYj+DT/3t06/d1sneh83RlzY3gm0uupq4+IWfXFwhSD1UbuI9XHUwMDE5skDQXHUwMDEyTJb84k06bTpcdTAwMWWjMmsgxiVcdTAwMTCl43l38zxqY1lcdTAwMGKa01x1MDAwNXDpczyT2uhbTjxcdTAwMWH90bOSLmpcXFxmoyjoVa+Ly1x1MDAxNGieZ13cIzbOp0iMqZ+Rh5QyjjczvFQ3XHUwMDE5XHUwMDEyK0ptjTWIXHUwMDBlI0g8y22yq3DvJYlGy13WTeM8XHUwMDFlayZULHziZVx1MDAxMGWySzBcdTAwMTGyXGKBQVx1MDAxOUllZEX5XHUwMDEz0ktqlHjR2lxi5UYuYr1NnVx1MDAxNphcdTAwMWM68rJcdTAwMDRzoaRkQlx1MDAwYkY1XHUwMDE1qVvHYoBgXHUwMDA0fVx1MDAxZft2PmUy+fs18taA3OVKa2ygg1x1MDAxNElfXHUwMDBiXHUwMDFlXHUwMDFiXHUwMDAzQZvGqVwieJFRzMTrLos060GdNJfwvCClQln9bI2iWlxiQXG6mu2x4cy/utz+aX8ynYNd7Xe3xGZw5lxmVn0441qh4mqEZCBjXHUwMDE0SUrwUpfSXHUwMDEzOZVS0VhcdTAwMTlccu5/nlx1MDAxN7q+hV/7srP58/bC73V+3uy3XHUwMDA33Y81Xy8xh1Dh0NnPJ1RShzTs2CN/9Lyw8c+LIFxiq2dtnl2lTDJwPolCSP1SXHUwMDA2oWFw4Wz696EnY2FFKS2kQFLG31x1MDAwYsMwXHUwMDAxzFx1MDAxNTNcdTAwMTCOlvviv0RExyNcdTAwMDcxXHUwMDFhXCKpIFx1MDAxNStcdTAwMWGMRIWv/lx1MDAxOL+8aSBlXHUwMDAyXHUwMDEx+ULC5IkknVKYTI5cdTAwMTRcdTAwMDVhXCJcdTAwMTTTWihKuMBgXHUwMDFlz1x1MDAxY/a7YFx1MDAwMsExKWBPXHUwMDE2Jq928XEtoOKtOcZSnSh483DhNavfP4nA1WPPXHUwMDAwtjznYVBNn27t2nNvNipeTL5MtnhcXEp6OKa/m+Dv15tf/1x1MDAwM1x1MDAxY9s3yyJ9 Start00:00:00.00Reset5 lineshorizontal layout1 cell margin1 cell paddingaround buttonsbackground coloris $boost <ul> <li><code>layout: horizontal</code> aligns child widgets horizontally from left to right.</li> <li><code>background: $boost</code> sets the background color to <code>$boost</code>. The <code>$</code> prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as <code>\"blue\"</code> or <code>rgb(20,46,210)</code>.</li> <li><code>height: 5</code> sets the height of our widget to 5 lines of text.</li> <li><code>margin: 1</code> sets a margin of 1 cell around the <code>Stopwatch</code> widget to create a little space between widgets in the list.</li> <li><code>min-width: 50</code> sets the minimum width of our widget to 50 cells.</li> <li><code>padding: 1</code> sets a padding of 1 cell around the child widgets.</li> </ul> <p>Here's the rest of <code>stopwatch03.tcss</code> which contains further declaration blocks:</p> <pre><code>TimeDisplay {\n    content-align: center middle;\n    opacity: 60%;\n    height: 3;\n}\n\nButton {\n    width: 16;\n}\n\n#start {\n    dock: left;\n}\n\n#stop {\n    dock: left;\n    display: none;\n}\n\n#reset {\n    dock: right;\n}\n</code></pre> <p>The <code>TimeDisplay</code> block aligns text to the center (<code>content-align</code>), fades it slightly (<code>opacity</code>), and sets its height (<code>height</code>) to 3 lines.</p> <p>The <code>Button</code> block sets the width (<code>width</code>) of buttons to 16 cells (character widths).</p> <p>The last 3 blocks have a slightly different format. When the declaration begins with a <code>#</code> then the styles will be applied to widgets with a matching \"id\" attribute. We've set an ID on the <code>Button</code> widgets we yielded in <code>compose</code>. For instance the first button has <code>id=\"start\"</code> which matches <code>#start</code> in the CSS.</p> <p>The buttons have a <code>dock</code> style which aligns the widget to a given edge. The start and stop buttons are docked to the left edge, while the reset button is docked to the right edge.</p> <p>You may have noticed that the stop button (<code>#stop</code> in the CSS) has <code>display: none;</code>. This tells Textual to not show the button. We do this because we don't want to display the stop button when the timer is not running. Similarly, we don't want to show the start button when the timer is running. We will cover how to manage such dynamic user interfaces in the next section.</p>"},{"location":"tutorial/#dynamic-css","title":"Dynamic CSS","text":"<p>We want our <code>Stopwatch</code> widget to have two states: a default state with a Start and Reset button; and a started state with a Stop button. When a stopwatch is started it should also have a green background and bold text.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaa1PiSFx1MDAxNP3ur7CYr5rp98OqrS1fOO4oXCLq6ri1ZYWkIZFAMFx0XHUwMDAzOOV/305wJYFEXHUwMDEwXHUwMDExXHUwMDE5Synp7vS96b6nz+nb/Wtjc7NcdTAwMTRccruqtLNZUlx1MDAwM8v0XFw7MPulrbj8p1xuQtfv6CqUfFx1MDAwZv1eYCUtnSjqhjtfv7bNoKWirmdayvjphj3TXHUwMDBio57t+oblt7+6kWqHf8afXHUwMDE1s63+6PptO1xujLGRbWW7kVx1MDAxZoxsKU+1VSdcbnXv/+jvm5u/ks+Ud4GyXCKz0/RU8kBSNXZcdTAwMTBTNlla8TuJs1x1MDAxMENcdTAwMDExxlx1MDAwMr20cMNcdTAwMDNtL1K2rm5on9W4Ji4qoW23o/reoSjzk6FPh+JQXHUwMDBl62OzXHLX8y6ioZe4XHUwMDE1+vptxnVhXHUwMDE0+C117dqRXHUwMDEz254oL3oq8HtNp6PCMPOM3zUtN1x1MDAxYcZlXHUwMDAwvJSOxmBnc1xcMohniFx1MDAwMlx1MDAwM0GJ9GtcbojoS138NELSoIhiXHRYqmbk0b7v6SnQXHUwMDFlfVx1MDAwMcnP2Ke6abWa2rGOPW5DgFx1MDAwNShcdTAwMWa36T+/J2XIwJJQnDbtKLfpRCPvXHJcdTAwMGVcdTAwMDVP2VbJ2ENcdTAwMDRcdTAwMDRHXHUwMDEwkfHUxFx1MDAxNrvHdlx1MDAxMlx1MDAwN/9Ojp5jXHUwMDA23edRKoXxl5S3saOHk0GUXHUwMDBlpNT87pFcdTAwMTCE/UFj96T5sCtxXHUwMDEz/+Wdf3/pK1x1MDAxM3VmXHUwMDEw+P3SS83T839j13pd21x1MDAxY0VcdTAwMTJkXGZxyKCk+u+l3nM7LV3Z6XneuMy3WuPgS0qftlx1MDAxNoh6wkFh1EtcdTAwMGUklZSLuaM+qNTR7vZcdL4/sitn1UrtR3hb21vzqGfAkFx1MDAwMFx0jFx1MDAwMJ6KekJcclx1MDAwMlx1MDAxOYD0vVHfMDV60HTU686ng52xqSiHUlxuXHUwMDAyQGqyVlx1MDAxMuWHu4d30VEzVJWWffvQOFx1MDAwNPBuu5dcdTAwMWblkVx1MDAxYUSpIN/K7zbTemteg5+HnYyfXHUwMDE5siBFsEFcYnKs10syN2peXHUwMDFm5SxqXHUwMDFj03J6gVpcdTAwMDfc0GLcMGbIZeAmXG7MTtg1XHUwMDAzXHUwMDFkqznYoTnYQXhcbjtSYqqdoWL52FlmXHUwMDFjjufb70RcdTAwMTfuY1x1MDAxMksgU1o22643zExZXHUwMDEyoNrTi8hPO2qGSltMVnGeabvruc04gEuWflx1MDAwN1x1MDAxNWRiO3K1rnpp0HZtO81cdTAwMTmWdsDUfVx1MDAwNsfzLPV+4Dbdjuldpv1bnKZQ6jUmaUpALUpcdTAwMDCZX5v1XHUwMDBlr1x1MDAwM+fS/SZJvyo6dXl601x1MDAxMt/Wm6VcYqVcdTAwMDaEnHHNxlNoo9JcdTAwMDBcdTAwMTJyyTL6aFx1MDAxMZZKfvKQhlxySIq0XHUwMDE51lx1MDAwYoEgOEebMY6JXlxiXHRbPvJeY63WXfPQbLdcdTAwMWQk78hjXHUwMDE5n4fSuyrQZsthrXyD68dakMhCXHUwMDE0SUxcdTAwMDSjLKUwZsHo9WFeU9pcIlruXHUwMDE1XHUwMDAySVNcdTAwMWFcdTAwMTV4MpiXTVtcdTAwMDRPY2iatqhcdTAwMDZcdTAwMWRcdTAwMTP4I7CzPqxcdTAwMDXATvJrZFx1MDAwN/TDyWtcdTAwMDZcdTAwMDNMklfazcU5jMvirVx1MDAxNlx1MDAxMZzogYfzi0bYP6uehFF9t7ZrXHUwMDFmPJRZ11xu67X1JjGGpcFFNoVcdTAwMTA/uc1cclx1MDAxZOlUvlx1MDAxM3VfLGVcdTAwMTPbnHeTJSZcdTAwMTHHXHUwMDA0xVxcolXvsS49//6x45fvavVqZ7/Svq5W9uvvYavfq9tZ3Jpv8Fxy3Eo5kzKlXHUwMDBlP4hbXHUwMDE5K1aoVCAuxVx1MDAxYsD9+iivKbUyQnLhXHKJISAj781cdTAwMWMuZy9IuVx1MDAxNrJcdTAwMWN/XHUwMDAwxpdcdTAwMTmB72PVmlxuVbRSPp1BRpN8OnJwcSalQFx1MDAxNGGNx0hcdTAwMTNcZr9cdTAwMDFrXHUwMDAz+O3+7j4kofqhRexpMPjR3f5MXCLFcyXqqeSMTjEpgsYyXHUwMDA0bCGVUsZcZs71ti5tIJOlXHUwMDE3dFwi6/N/nlx1MDAxZSMtcEBqXHUwMDExXFyJno1XXHUwMDFl+Fx1MDAwNuQtXHUwMDFllIyjoqDEXHUwMDE4MoTwXHUwMDFiUlx1MDAxNOft87NK1ynT/burRlx1MDAxN3lcdTAwMTXsW0frre6SRDqmlGTSXHUwMDEwSVTG26qJNOEyj47mTaJTXHUwMDBl9NKPwYrTXHUwMDExe41WebD7/Vie3J62L09cdTAwMDfgxqyU36/EfpduZ1x0vHyD6yfwaHHKX6+4klxuXCLnz528PsprKvCSlH8uwqGuWEJcdTAwMDJyXHUwMDE5XHUwMDEyXHUwMDBmaX2nXaFopYmTVUu8i8hcZlYr8WYw0nS+P3ZwcTYlpJBNIcNcdTAwMTJLXHUwMDFkb/NrvL9r29fSqdVOq4KU/dtcdTAwMDPn4LzZ/FxcuPG5Uv5cdTAwMTTg6VxylTCYpO9l01x1MDAxOVhbLOFPmdB2Kf6Ao7bXOOvCeri+8/f/dlx1MDAwNvXHq+F5w2pcdTAwMGWCo/dT4e/S7SyGzTe4flxmi3nhXHIsxiiIz3Hnh/zro7ymkI9cdTAwMGYnciGvXHRcdTAwMTZ+KLnOdyghpN5eM/BcdTAwMTH4Xlx1MDAxZm79rEOJXHUwMDE5JLXwoURcdTAwMTHcXGIovsNCMJGI0vlcdTAwMDXtzZk68Fx1MDAxYex+31x1MDAxOYKa1+Ku6Fx1MDAwNnTdXHUwMDA1LYlcdTAwMTMpOVlcdTAwMTQujUmVu3TAXHUwMDAxlFx1MDAwM7hpRiWAUckkXm3aXHUwMDA0QcRTm+pVXFxe6ZuR5eTjTeTjzVON6Fx1MDAxNbRlLsRkoZZ5kbybKiNnXHUwMDE2Qlx1MDAxNS1GXHUwMDE1RHqXKKVEb4BVs/5Ar1x1MDAxYSdcdTAwMDdu9fjspkrCI+ZcdTAwMDRrXHUwMDBmK6hcdTAwMTUqZtn7usmjnFx1MDAxOIxcIvyx5+tcdTAwMTLOhSwmXHUwMDEwkECI1e1cdTAwMTOJ5jLGqcSrRJbehil7czGEzWS0xTE26dZcYmtcdTAwMWLPKrRkdru6TVx1MDAxNDs3Qp6eXHUwMDFj135+/XHXpZ+u6u9cdTAwMTXfZNp4xm9cZlx1MDAxNFx1MDAxNU/Nr6eNp/9cdTAwMDDD6SGzIn0= Stop00:00:00.00ResetStart00:00:00.00StopwatchStarted Stopwatch <p>We can accomplish this with a CSS class. Not to be confused with a Python class, a CSS class is like a tag you can add to a widget to modify its styles.</p> <p>Here's the new CSS:</p> stopwatch04.tcss<pre><code>Stopwatch {\n    layout: horizontal;\n    background: $boost;\n    height: 5;\n    margin: 1;\n    min-width: 50;\n    padding: 1;\n}\n\nTimeDisplay {\n    content-align: center middle;\n    text-opacity: 60%;\n    height: 3;\n}\n\nButton {\n    width: 16;\n}\n\n#start {\n    dock: left;\n}\n\n#stop {\n    dock: left;\n    display: none;\n}\n\n#reset {\n    dock: right;\n}\n\n.started {\n    text-style: bold;\n    background: $success;\n    color: $text;\n}\n\n.started TimeDisplay {\n    text-opacity: 100%;\n}\n\n.started #start {\n    display: none\n}\n\n.started #stop {\n    display: block\n}\n\n.started #reset {\n    visibility: hidden\n}\n</code></pre> <p>These new rules are prefixed with <code>.started</code>. The <code>.</code> indicates that <code>.started</code> refers to a CSS class called \"started\". The new styles will be applied only to widgets that have this CSS class.</p> <p>Some of the new styles have more than one selector separated by a space. The space indicates that the rule should match the second selector if it is a child of the first. Let's look at one of these styles:</p> <pre><code>.started #start {\n    display: none\n}\n</code></pre> <p>The <code>.started</code> selector matches any widget with a <code>\"started\"</code> CSS class. While <code>#start</code> matches a child widget with an ID of <code>\"start\"</code>. So it matches the Start button only for Stopwatches in a started state.</p> <p>The rule is <code>\"display: none\"</code> which tells Textual to hide the button.</p>"},{"location":"tutorial/#manipulating-classes","title":"Manipulating classes","text":"<p>Modifying a widget's CSS classes is a convenient way to update visuals without introducing a lot of messy display related code.</p> <p>You can add and remove CSS classes with the add_class() and remove_class() methods. We will use these methods to connect the started state to the Start / Stop buttons.</p> <p>The following code will start or stop the stopwatches in response to clicking a button.</p> stopwatch04.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        if event.button.id == \"start\":\n            self.add_class(\"started\")\n        elif event.button.id == \"stop\":\n            self.remove_class(\"started\")\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay(\"00:00:00.00\")\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch04.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>The <code>on_button_pressed</code> method is an event handler. Event handlers are methods called by Textual in response to an event such as a key press, mouse click, etc. Event handlers begin with <code>on_</code> followed by the name of the event they will handle. Hence <code>on_button_pressed</code> will handle the button pressed event.</p> <p>If you run <code>stopwatch04.py</code> now you will be able to toggle between the two states by clicking the first button:</p> <p> stopwatch04.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:00.00 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p>"},{"location":"tutorial/#reactive-attributes","title":"Reactive attributes","text":"<p>A recurring theme in Textual is that you rarely need to explicitly update a widget. It is possible: you can call refresh() to display new data. However, Textual prefers to do this automatically via reactive attributes.</p> <p>You can declare a reactive attribute with reactive. Let's use this feature to create a timer that displays elapsed time and keeps it updated.</p> stopwatch05.py<pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.set_interval(1 / 60, self.update_time)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update the time to the current time.\"\"\"\n        self.time = monotonic() - self.start_time\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        if event.button.id == \"start\":\n            self.add_class(\"started\")\n        elif event.button.id == \"stop\":\n            self.remove_class(\"started\")\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch04.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets for the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>We have added two reactive attributes to the <code>TimeDisplay</code> widget: <code>start_time</code> will contain the time (in seconds) the stopwatch was started, and <code>time</code> will contain the time to be displayed on the <code>Stopwatch</code>.</p> <p>Both attributes will be available on <code>self</code> as if you had assigned them in <code>__init__</code>. If you write to either of these attributes the widget will update automatically.</p> <p>Info</p> <p>The <code>monotonic</code> function in this example is imported from the standard library <code>time</code> module. It is similar to <code>time.time</code> but won't go backwards if the system clock is changed.</p> <p>The first argument to <code>reactive</code> may be a default value for the attribute or a callable that returns a default value. We set the default for <code>start_time</code> to the <code>monotonic</code> function which will be called to initialize the attribute with the current time when the <code>TimeDisplay</code> is added to the app. The <code>time</code> attribute has a simple float as the default, so <code>self.time</code> will be initialized to <code>0</code>.</p> <p>The <code>on_mount</code> method is an event handler called when the widget is first added to the application (or mounted in Textual terminology). In this method we call set_interval() to create a timer which calls <code>self.update_time</code> sixty times a second. This <code>update_time</code> method calculates the time elapsed since the widget started and assigns it to <code>self.time</code> \u2014 which brings us to one of Reactive's super-powers.</p> <p>If you implement a method that begins with <code>watch_</code> followed by the name of a reactive attribute, then the method will be called when the attribute is modified. Such methods are known as watch methods.</p> <p>Because <code>watch_time</code> watches the <code>time</code> attribute, when we update <code>self.time</code> 60 times a second we also implicitly call <code>watch_time</code> which converts the elapsed time to a string and updates the widget with a call to <code>self.update</code>. Because this happens automatically, we don't need to pass in an initial argument to <code>TimeDisplay</code>.</p> <p>The end result is that the <code>Stopwatch</code> widgets show the time elapsed since the widget was created:</p> <p> stopwatch05.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:03.08\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:03.08\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:03.08\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>We've seen how we can update widgets with a timer, but we still need to wire up the buttons so we can operate stopwatches independently.</p>"},{"location":"tutorial/#wiring-buttons","title":"Wiring buttons","text":"<p>We need to be able to start, stop, and reset each stopwatch independently. We can do this by adding a few more methods to the <code>TimeDisplay</code> class.</p> stopwatch06.py<pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n    def start(self) -&gt; None:\n        \"\"\"Method to start (or resume) time updating.\"\"\"\n        self.start_time = monotonic()\n        self.update_timer.resume()\n\n    def stop(self) -&gt; None:\n        \"\"\"Method to stop the time display updating.\"\"\"\n        self.update_timer.pause()\n        self.total += monotonic() - self.start_time\n        self.time = self.total\n\n    def reset(self) -&gt; None:\n        \"\"\"Method to reset the time display to zero.\"\"\"\n        self.total = 0\n        self.time = 0\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch04.tcss\"\n    BINDINGS = [(\"d\", \"toggle_dark\", \"Toggle dark mode\")]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Called to add widgets to the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>Here's a summary of the changes made to <code>TimeDisplay</code>.</p> <ul> <li>We've added a <code>total</code> reactive attribute to store the total time elapsed between clicking the start and stop buttons.</li> <li>The call to <code>set_interval</code> has grown a <code>pause=True</code> argument which starts the timer in pause mode (when a timer is paused it won't run until resume() is called). This is because we don't want the time to update until the user hits the start button.</li> <li>The <code>update_time</code> method now adds <code>total</code> to the current time to account for the time between any previous clicks of the start and stop buttons.</li> <li>We've stored the result of <code>set_interval</code> which returns a Timer object. We will use this later to resume the timer when we start the Stopwatch.</li> <li>We've added <code>start()</code>, <code>stop()</code>, and <code>reset()</code> methods.</li> </ul> <p>In addition, the <code>on_button_pressed</code> method on <code>Stopwatch</code> has grown some code to manage the time display when the user clicks a button. Let's look at that in detail:</p> <pre><code>    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n</code></pre> <p>This code supplies missing features and makes our app useful. We've made the following changes.</p> <ul> <li>The first line retrieves <code>id</code> attribute of the button that was pressed. We can use this to decide what to do in response.</li> <li>The second line calls <code>query_one</code> to get a reference to the <code>TimeDisplay</code> widget.</li> <li>We call the method on <code>TimeDisplay</code> that matches the pressed button.</li> <li>We add the <code>\"started\"</code> class when the Stopwatch is started (<code>self.add_class(\"started\")</code>), and remove it (<code>self.remove_class(\"started\")</code>) when it is stopped. This will update the Stopwatch visuals via CSS.</li> </ul> <p>If you run <code>stopwatch06.py</code> you will be able to use the stopwatches independently.</p> <p> stopwatch06.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:10.12 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:06.06 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u258f^p\u00a0palette </p> <p>The only remaining feature of the Stopwatch app left to implement is the ability to add and remove stopwatches.</p>"},{"location":"tutorial/#dynamic-widgets","title":"Dynamic widgets","text":"<p>The Stopwatch app creates widgets when it starts via the <code>compose</code> method. We will also need to create new widgets while the app is running, and remove widgets we no longer need. We can do this by calling mount() to add a widget, and remove() to remove a widget.</p> <p>Let's use these methods to implement adding and removing stopwatches to our app.</p> stopwatch.py<pre><code>from time import monotonic\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import ScrollableContainer\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, Footer, Header, Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n\n    def start(self) -&gt; None:\n        \"\"\"Method to start (or resume) time updating.\"\"\"\n        self.start_time = monotonic()\n        self.update_timer.resume()\n\n    def stop(self):\n        \"\"\"Method to stop the time display updating.\"\"\"\n        self.update_timer.pause()\n        self.total += monotonic() - self.start_time\n        self.time = self.total\n\n    def reset(self):\n        \"\"\"Method to reset the time display to zero.\"\"\"\n        self.total = 0\n        self.time = 0\n\n\nclass Stopwatch(Static):\n    \"\"\"A stopwatch widget.\"\"\"\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Event handler called when a button is pressed.\"\"\"\n        button_id = event.button.id\n        time_display = self.query_one(TimeDisplay)\n        if button_id == \"start\":\n            time_display.start()\n            self.add_class(\"started\")\n        elif button_id == \"stop\":\n            time_display.stop()\n            self.remove_class(\"started\")\n        elif button_id == \"reset\":\n            time_display.reset()\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Create child widgets of a stopwatch.\"\"\"\n        yield Button(\"Start\", id=\"start\", variant=\"success\")\n        yield Button(\"Stop\", id=\"stop\", variant=\"error\")\n        yield Button(\"Reset\", id=\"reset\")\n        yield TimeDisplay()\n\n\nclass StopwatchApp(App):\n    \"\"\"A Textual app to manage stopwatches.\"\"\"\n\n    CSS_PATH = \"stopwatch.tcss\"\n\n    BINDINGS = [\n        (\"d\", \"toggle_dark\", \"Toggle dark mode\"),\n        (\"a\", \"add_stopwatch\", \"Add\"),\n        (\"r\", \"remove_stopwatch\", \"Remove\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Called to add widgets to the app.\"\"\"\n        yield Header()\n        yield Footer()\n        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch(), id=\"timers\")\n\n    def action_add_stopwatch(self) -&gt; None:\n        \"\"\"An action to add a timer.\"\"\"\n        new_stopwatch = Stopwatch()\n        self.query_one(\"#timers\").mount(new_stopwatch)\n        new_stopwatch.scroll_visible()\n\n    def action_remove_stopwatch(self) -&gt; None:\n        \"\"\"Called to remove a timer.\"\"\"\n        timers = self.query(\"Stopwatch\")\n        if timers:\n            timers.last().remove()\n\n    def action_toggle_dark(self) -&gt; None:\n        \"\"\"An action to toggle dark mode.\"\"\"\n        self.dark = not self.dark\n\n\nif __name__ == \"__main__\":\n    app = StopwatchApp()\n    app.run()\n</code></pre> <p>Here's a summary of the changes:</p> <ul> <li>The <code>ScrollableContainer</code> object in <code>StopWatchApp</code> grew a <code>\"timers\"</code> ID.</li> <li>Added <code>action_add_stopwatch</code> to add a new stopwatch.</li> <li>Added <code>action_remove_stopwatch</code> to remove a stopwatch.</li> <li>Added keybindings for the actions.</li> </ul> <p>The <code>action_add_stopwatch</code> method creates and mounts a new stopwatch. Note the call to query_one() with a CSS selector of <code>\"#timers\"</code> which gets the timer's container via its ID. Once mounted, the new Stopwatch will appear in the terminal. That last line in <code>action_add_stopwatch</code> calls scroll_visible() which will scroll the container to make the new <code>Stopwatch</code> visible (if required).</p> <p>The <code>action_remove_stopwatch</code> function calls query() with a CSS selector of <code>\"Stopwatch\"</code> which gets all the <code>Stopwatch</code> widgets. If there are stopwatches then the action calls last() to get the last stopwatch, and remove() to remove it.</p> <p>If you run <code>stopwatch.py</code> now you can add a new stopwatch with the A key and remove a stopwatch with R.</p> <p> stopwatch.py \u2b58StopwatchApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Stop\u00a000:00:06.15 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Start\u00a000:00:00.00\u00a0Reset\u00a0 \u00a0d\u00a0Toggle\u00a0dark\u00a0mode\u00a0\u00a0a\u00a0Add\u00a0\u00a0r\u00a0Remove\u00a0\u258f^p\u00a0palette </p>"},{"location":"tutorial/#what-next","title":"What next?","text":"<p>Congratulations on building your first Textual application! This tutorial has covered a lot of ground. If you are the type that prefers to learn a framework by coding, feel free. You could tweak <code>stopwatch.py</code> or look through the examples.</p> <p>Read the guide for the full details on how to build sophisticated TUI applications with Textual.</p>"},{"location":"widget_gallery/","title":"Widgets","text":"<p>Welcome to the Textual widget gallery.</p> <p>We have many more widgets planned, or you can build your own.</p> <p>Info</p> <p>Textual is a TUI framework. Everything below runs in the terminal.</p>"},{"location":"widget_gallery/#button","title":"Button","text":"<p>A simple button with a variety of semantic styles.</p> <p>Button reference</p> <p> ButtonsApp Standard\u00a0ButtonsDisabled\u00a0Buttons \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Default\u00a0\u00a0Default\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Primary!\u00a0\u00a0Primary!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Success!\u00a0\u00a0Success!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Warning!\u00a0\u00a0Warning!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Error!\u00a0\u00a0Error!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"widget_gallery/#checkbox","title":"Checkbox","text":"<p>A classic checkbox control.</p> <p>Checkbox reference</p> <p> CheckboxApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Arrakis\u00a0\ud83d\ude13\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Caladan\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Chusuk\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGiedi\u00a0Prime\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGinaz\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Grumman\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2583\u2583 \u258a\u2590X\u258cKaitain\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e </p>"},{"location":"widget_gallery/#collapsible","title":"Collapsible","text":"<p>Content that may be toggled on and off by clicking a title.</p> <p>Collapsible reference</p> <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Leto #\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides Head\u00a0of\u00a0House\u00a0Atreides.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Jessica Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Paul \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#contentswitcher","title":"ContentSwitcher","text":"<p>A widget for containing and switching display between multiple child widgets.</p> <p>ContentSwitcher reference</p>"},{"location":"widget_gallery/#datatable","title":"DataTable","text":"<p>A powerful data table, with configurable cursors.</p> <p>DataTable reference</p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p>"},{"location":"widget_gallery/#digits","title":"Digits","text":"<p>Display numbers in tall characters.</p> <p>Digits reference</p> <p> DigitApp \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 \u2551\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u00a0\u2513\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u250f\u2501\u2513\u257a\u2501\u2513\u2551 \u2551\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0\u2503\u00a0\u00a0\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b\u00a0\u2523\u2501\u2513\u2517\u2501\u2513\u00a0\u2501\u252b\u00a0\u2517\u2501\u2513\u2523\u2501\u252b\u2517\u2501\u252b\u00a0\u00a0\u2503\u2551 \u2551\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u253b\u2578,\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578,\u2517\u2501\u251b\u257a\u2501\u251b\u257a\u2501\u251b,\u257a\u2501\u251b\u2517\u2501\u251b\u257a\u2501\u251b\u00a0\u00a0\u2579\u2551 \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d </p>"},{"location":"widget_gallery/#directorytree","title":"DirectoryTree","text":"<p>A tree view of files and folders.</p> <p>DirectoryTree reference</p> <p> DirectoryTreeApp \ud83d\udcc2\u00a0 \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.faq \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.git \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.github \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.ipynb_checkpoints \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.mypy_cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.pytest_cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.screenshot_cache \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0.vscode \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0__pycache__ \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0dist\u2583\u2583 \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0docs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0examples \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0imgs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0notes \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0questions \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0reference \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0sandbox \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0site \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0src \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tests \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tools \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0.coverage </p>"},{"location":"widget_gallery/#footer","title":"Footer","text":"<p>A footer to display and interact with key bindings.</p> <p>Footer reference</p> <p> FooterApp \u00a0q\u00a0Quit\u00a0the\u00a0app\u00a0\u00a0?\u00a0Show\u00a0help\u00a0screen\u00a0\u00a0del\u00a0Delete\u00a0the\u00a0thing\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#header","title":"Header","text":"<p>A header to display the app's title and subtitle.</p> <p>Header reference</p> <p> HeaderApp \u2b58HeaderApp </p>"},{"location":"widget_gallery/#input","title":"Input","text":"<p>A control to enter text.</p> <p>Input reference</p> <p> InputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aDarren\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aLast\u00a0Name\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#label","title":"Label","text":"<p>A simple text label.</p> <p>Label reference</p>"},{"location":"widget_gallery/#listview","title":"ListView","text":"<p>Display a list of items (items may be other widgets).</p> <p>ListView reference</p> <p> ListViewExample One Two Three \u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#loadingindicator","title":"LoadingIndicator","text":"<p>Display an animation while data is loading.</p> <p>LoadingIndicator reference</p> <p> LoadingApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf </p>"},{"location":"widget_gallery/#log","title":"Log","text":"<p>Display and update lines of text (such as from a file).</p> <p>Log reference</p> <p> LogApp And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2584\u2584 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"widget_gallery/#markdownviewer","title":"MarkdownViewer","text":"<p>Display and interact with a Markdown document (adds a table of contents and browser-like navigation to Markdown).</p> <p>MarkdownViewer reference</p> <p> MarkdownExampleApp \u258a \u25bc\u00a0\u2160\u00a0Markdown\u00a0Viewer\u258a \u251c\u2500\u2500\u00a0\u2161\u00a0Features\u258aMarkdown\u00a0Viewer \u251c\u2500\u2500\u00a0\u2161\u00a0Tables\u258a \u2514\u2500\u2500\u00a0\u2161\u00a0Code\u00a0Blocks\u258a\u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0MarkdownViewer\u00a0widget. \u258a \u258a \u258aFeatures \u258a \u258a\u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u258a \u258a\u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u258a\u25cf\u00a0Headers \u258a\u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u258a\u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u258a\u25cf\u00a0Tables! \u258a \u258a \u258aTables \u258a \u258a\u00a0\u00a0Tables\u00a0are\u00a0displayed\u00a0in\u00a0a\u00a0DataTable\u00a0widget. \u258a \u258a \u258aName\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Type\u00a0Default\u00a0Description\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0 \u258ashow_headerboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0the\u00a0table\u00a0header\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_rowsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_columnsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0columns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258azebra_stripesboolFalse\u00a0\u00a0\u00a0\u00a0Display\u00a0alternating\u00a0colors\u00a0on\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0 \u258aheader_heightint1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Height\u00a0of\u00a0header\u00a0row\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258ashow_cursorboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0a\u00a0cell\u00a0cursor\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a \u258a \u258a \u258aCode\u00a0Blocks \u258a\u2585\u2585 \u258a\u00a0\u00a0Code\u00a0blocks\u00a0are\u00a0syntax\u00a0highlighted,\u00a0with\u00a0guidelines. \u258a \u258a \u258aclassListViewExample(App): \u258a\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;\u00a0ComposeResult: \u258a\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0ListView( </p>"},{"location":"widget_gallery/#markdown","title":"Markdown","text":"<p>Display a markdown document.</p> <p>Markdown reference</p> <p> MarkdownExampleApp Markdown\u00a0Document \u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0Markdown\u00a0widget. Features \u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u25cf\u00a0Headers \u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u25cf\u00a0Tables! </p>"},{"location":"widget_gallery/#optionlist","title":"OptionList","text":"<p>Display a vertical list of options (options may be Rich renderables).</p> <p>OptionList reference</p> <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2581\u2581\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#placeholder","title":"Placeholder","text":"<p>Display placeholder content while you are designing a UI.</p> <p>Placeholder reference</p> <p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula. Nullam\u00a0imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0 vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.\u00a0Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sedconsectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0 lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 sapien\u00a0sapien\u00a0congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 </p>"},{"location":"widget_gallery/#pretty","title":"Pretty","text":"<p>Display a pretty-formatted Rich renderable.</p> <p>Pretty reference</p> <p> PrettyExample { 'title':\u00a0'Back\u00a0to\u00a0the\u00a0Future', 'releaseYear':\u00a01985, 'director':\u00a0'Robert\u00a0Zemeckis', 'genre':\u00a0'Adventure,\u00a0Comedy,\u00a0Sci-Fi', 'cast':\u00a0[ {'actor':\u00a0'Michael\u00a0J.\u00a0Fox',\u00a0'character':\u00a0'Marty\u00a0McFly'}, {'actor':\u00a0'Christopher\u00a0Lloyd',\u00a0'character':\u00a0'Dr.\u00a0Emmett\u00a0Brown'} ] } </p>"},{"location":"widget_gallery/#progressbar","title":"ProgressBar","text":"<p>A configurable progress bar with ETA and percentage complete.</p> <p>ProgressBar reference</p> <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250150%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Donation\u00a0for\u00a0$50\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"widget_gallery/#radiobutton","title":"RadioButton","text":"<p>A simple radio button.</p> <p>RadioButton reference</p> <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Picture\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#radioset","title":"RadioSet","text":"<p>A collection of radio buttons, that enforces uniqueness.</p> <p>RadioSet reference</p> <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e\u258a\u2590\u25cf\u258c\u00a0Amanda\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e\u258a\u2590\u25cf\u258c\u00a0Connor\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e\u258a\u2590\u25cf\u258c\u00a0Duncan\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e\u258a\u2590\u25cf\u258c\u00a0Heather\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Pictur\u258e\u258a\u2590\u25cf\u258c\u00a0Joe\u00a0Dawson\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e\u258a\u2590\u25cf\u258c\u00a0Kurgan,\u00a0The\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e\u258a\u2590\u25cf\u258c\u00a0Methos\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e\u258a\u2590\u25cf\u258c\u00a0Rachel\u00a0Ellenstein\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e\u258a\u2590\u25cf\u258c\u00a0Ram\u00edrez\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#richlog","title":"RichLog","text":"<p>Display and update text in a scrolling panel.</p> <p>RichLog reference</p> <p> RichLogApp \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0next(iter_values) \u2502\u00a0\u00a0\u00a0exceptStopIteration: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0return \u2502\u00a0\u00a0\u00a0first\u00a0=True\u2585\u2585 \u2502\u00a0\u00a0\u00a0for\u00a0value\u00a0in\u00a0iter_values: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0False,\u00a0previous_value \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0first\u00a0=False \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0value \u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0True,\u00a0previous_value \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2503\u00a0lane\u00a0\u2503\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0time\u00a0\u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a050.39\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0South\u00a0Africa\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u2502\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.26\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.58\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.73\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u2502\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.84\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Write\u00a0text\u00a0or\u00a0any\u00a0Rich\u00a0renderable! Key(key='H',\u00a0character='H',\u00a0name='upper_h',\u00a0is_printable=True) Key(key='i',\u00a0character='i',\u00a0name='i',\u00a0is_printable=True) </p>"},{"location":"widget_gallery/#rule","title":"Rule","text":"<p>A rule widget to separate content, similar to a <code>&lt;hr&gt;</code> HTML tag.</p> <p>Rule reference</p> <p> HorizontalRulesApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0solid\u00a0(default)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0heavy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0thick\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dashed\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0double\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ascii\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ---------------------------------------------------------------- </p>"},{"location":"widget_gallery/#select","title":"Select","text":"<p>Select from a number of possible options.</p> <p>Select reference</p> <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#selectionlist","title":"SelectionList","text":"<p>Select multiple values from a list of options.</p> <p>SelectionList reference</p> <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#sparkline","title":"Sparkline","text":"<p>Display numerical data.</p> <p>Sparkline reference</p> <p> SparklineSummaryFunctionApp \u2582\u2584\u2582\u2584\u2583\u2583\u2586\u2585\u2583\u2582\u2583\u2582\u2583\u2582\u2584\u2587\u2583\u2583\u2587\u2585\u2584\u2583\u2584\u2584\u2583\u2582\u2583\u2582\u2583\u2584\u2584\u2588\u2586\u2582\u2583\u2583\u2585\u2583\u2583\u2584\u2583\u2587\u2583\u2583\u2583\u2584\u2584\u2586\u2583\u2583\u2585\u2582\u2585\u2583\u2584\u2583\u2583\u2584\u2583\u2585\u2586\u2582\u2582\u2583\u2586\u2582\u2583\u2584\u2585\u2584\u2583\u2584\u2584\u2581\u2583\u2582 \u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2582\u2582\u2582\u2582\u2582\u2582\u2581\u2581\u2581\u2581\u2581\u2582\u2581\u2582\u2582\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2581\u2581\u2581\u2581\u2582\u2582\u2582\u2581\u2582\u2581\u2581\u2581\u2581 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"widget_gallery/#static","title":"Static","text":"<p>Displays simple static content. Typically used as a base class.</p> <p>Static reference</p>"},{"location":"widget_gallery/#switch","title":"Switch","text":"<p>An on / off control, inspired by toggle buttons.</p> <p>Switch reference</p> <p> SwitchApp Example\u00a0switches \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0off:\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0on:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0focused:\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0custom:\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#tabs","title":"Tabs","text":"<p>A row of tabs you can select with the mouse or navigate with keys.</p> <p>Tabs reference</p> <p> TabsApp \u00a0AtreidiesDuke\u00a0Leto\u00a0AtreidesLady\u00a0JessicaGurney\u00a0HalleckBaron\u00a0Vladimir \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aLady\u00a0Jessica\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0a\u00a0Add\u00a0tab\u00a0\u00a0r\u00a0Remove\u00a0active\u00a0tab\u00a0\u00a0c\u00a0Clear\u00a0tabs\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#tabbedcontent","title":"TabbedContent","text":"<p>A Combination of Tabs and ContentSwitcher to navigate static content.</p> <p>TabbedContent reference</p> <p> TabbedApp LetoJessicaPaul \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. PaulAlia \u2501\u2578\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 First\u00a0child\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0l\u00a0Leto\u00a0\u00a0j\u00a0Jessica\u00a0\u00a0p\u00a0Paul\u00a0\u258f^p\u00a0palette </p>"},{"location":"widget_gallery/#textarea","title":"TextArea","text":"<p>A multi-line text area which supports syntax highlighting various languages.</p> <p>TextArea reference</p> <p> TextAreaExample \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0defhello(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a2\u00a0\u00a0print(\"hello\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a3\u00a0\u00a0\u258e \u258a4\u00a0\u00a0defgoodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0print(\"goodbye\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widget_gallery/#tree","title":"Tree","text":"<p>A tree control with expandable nodes.</p> <p>Tree reference</p> <p> TreeApp \u25bc\u00a0Dune \u2517\u2501\u2501\u00a0\u25bc\u00a0Characters \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Paul \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Jessica \u00a0\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0Chani </p>"},{"location":"api/","title":"API","text":"<p>This is a API-level reference to the Textual API. Click the links to your left (or in the burger menu) to open a reference for each module.</p> <p>If you are new to Textual, you may want to read the tutorial or guide first.</p>"},{"location":"api/app/","title":"textual.app","text":"<p>Here you will find the App class, which is the base class for Textual apps.</p> <p>See app basics for how to build Textual apps.</p>"},{"location":"api/app/#textual.app.AutopilotCallbackType","title":"AutopilotCallbackType  <code>module-attribute</code>","text":"<pre><code>AutopilotCallbackType = (\n    \"Callable[[Pilot[object]], Coroutine[Any, Any, None]]\"\n)\n</code></pre> <p>Signature for valid callbacks that can be used to control apps.</p>"},{"location":"api/app/#textual.app.CommandCallback","title":"CommandCallback  <code>module-attribute</code>","text":"<pre><code>CommandCallback = (\n    \"Callable[[], Awaitable[Any]] | Callable[[], Any]\"\n)\n</code></pre> <p>Signature for callbacks used in <code>get_system_commands</code></p>"},{"location":"api/app/#textual.app.ActionError","title":"ActionError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for exceptions relating to actions.</p>"},{"location":"api/app/#textual.app.ActiveModeError","title":"ActiveModeError","text":"<p>               Bases: <code>ModeError</code></p> <p>Raised when attempting to remove the currently active mode.</p>"},{"location":"api/app/#textual.app.App","title":"App","text":"<pre><code>App(driver_class=None, css_path=None, watch_css=False)\n</code></pre> <p>               Bases: <code>Generic[ReturnType]</code>, <code>DOMNode</code></p> <p>The base class for Textual Applications.</p> <p>Parameters:</p> Name Type Description Default <code>Type[Driver] | None</code> <p>Driver class or <code>None</code> to auto-detect. This will be used by some Textual tools.</p> <code>None</code> <code>CSSPathType | None</code> <p>Path to CSS or <code>None</code> to use the <code>CSS_PATH</code> class variable. To load multiple CSS files, pass a list of strings or paths which will be loaded in order.</p> <code>None</code> <code>bool</code> <p>Reload CSS if the files changed. This is set automatically if you are using <code>textual run</code> with the <code>dev</code> switch.</p> <code>False</code> <p>Raises:</p> Type Description <code>CssPathError</code> <p>When the supplied CSS path(s) are an unexpected type.</p>"},{"location":"api/app/#textual.app.App(driver_class)","title":"<code>driver_class</code>","text":""},{"location":"api/app/#textual.app.App(css_path)","title":"<code>css_path</code>","text":""},{"location":"api/app/#textual.app.App(watch_css)","title":"<code>watch_css</code>","text":""},{"location":"api/app/#textual.app.App.AUTO_FOCUS","title":"AUTO_FOCUS  <code>class-attribute</code>","text":"<pre><code>AUTO_FOCUS = '*'\n</code></pre> <p>A selector to determine what to focus automatically when a screen is activated.</p> <p>The widget focused is the first that matches the given CSS selector. Setting to <code>None</code> or <code>\"\"</code> disables auto focus.</p>"},{"location":"api/app/#textual.app.App.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"ctrl+c\", \"quit\", \"Quit\", show=False, priority=True\n    )\n]\n</code></pre> <p>The default key bindings.</p>"},{"location":"api/app/#textual.app.App.BINDING_GROUP_TITLE","title":"BINDING_GROUP_TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDING_GROUP_TITLE = 'App'\n</code></pre> <p>Shown in the key panel.</p>"},{"location":"api/app/#textual.app.App.CLOSE_TIMEOUT","title":"CLOSE_TIMEOUT  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>CLOSE_TIMEOUT = 5.0\n</code></pre> <p>Timeout waiting for widget's to close, or <code>None</code> for no timeout.</p>"},{"location":"api/app/#textual.app.App.COMMANDS","title":"COMMANDS  <code>class-attribute</code>","text":"<pre><code>COMMANDS = {get_system_commands_provider}\n</code></pre> <p>Command providers used by the command palette.</p> <p>Should be a set of command.Provider classes.</p>"},{"location":"api/app/#textual.app.App.COMMAND_PALETTE_BINDING","title":"COMMAND_PALETTE_BINDING  <code>class-attribute</code>","text":"<pre><code>COMMAND_PALETTE_BINDING = 'ctrl+p'\n</code></pre> <p>The key that launches the command palette (if enabled by <code>App.ENABLE_COMMAND_PALETTE</code>).</p>"},{"location":"api/app/#textual.app.App.COMMAND_PALETTE_DISPLAY","title":"COMMAND_PALETTE_DISPLAY  <code>class-attribute</code>","text":"<pre><code>COMMAND_PALETTE_DISPLAY = None\n</code></pre> <p>How the command palette key should be displayed in the footer (or <code>None</code> for default).</p>"},{"location":"api/app/#textual.app.App.CSS","title":"CSS  <code>class-attribute</code>","text":"<pre><code>CSS = ''\n</code></pre> <p>Inline CSS, useful for quick scripts. This is loaded after CSS_PATH, and therefore takes priority in the event of a specificity clash.</p>"},{"location":"api/app/#textual.app.App.CSS_PATH","title":"CSS_PATH  <code>class-attribute</code>","text":"<pre><code>CSS_PATH = None\n</code></pre> <p>File paths to load CSS from.</p>"},{"location":"api/app/#textual.app.App.ENABLE_COMMAND_PALETTE","title":"ENABLE_COMMAND_PALETTE  <code>class-attribute</code>","text":"<pre><code>ENABLE_COMMAND_PALETTE = True\n</code></pre> <p>Should the command palette be enabled for the application?</p>"},{"location":"api/app/#textual.app.App.ESCAPE_TO_MINIMIZE","title":"ESCAPE_TO_MINIMIZE  <code>class-attribute</code>","text":"<pre><code>ESCAPE_TO_MINIMIZE = True\n</code></pre> <p>Use escape key to minimize widgets (potentially overriding bindings).</p> <p>This is the default value, used if the active screen's <code>ESCAPE_TO_MINIMIZE</code> is not changed from <code>None</code>.</p>"},{"location":"api/app/#textual.app.App.MODES","title":"MODES  <code>class-attribute</code>","text":"<pre><code>MODES = {}\n</code></pre> <p>Modes associated with the app and their base screens.</p> <p>The base screen is the screen at the bottom of the mode stack. You can think of it as the default screen for that stack. The base screens can be names of screens listed in SCREENS, <code>Screen</code> instances, or callables that return screens.</p> Example <pre><code>class HelpScreen(Screen[None]):\n    ...\n\nclass MainAppScreen(Screen[None]):\n    ...\n\nclass MyApp(App[None]):\n    MODES = {\n        \"default\": \"main\",\n        \"help\": HelpScreen,\n    }\n\n    SCREENS = {\n        \"main\": MainAppScreen,\n    }\n\n    ...\n</code></pre>"},{"location":"api/app/#textual.app.App.NOTIFICATION_TIMEOUT","title":"NOTIFICATION_TIMEOUT  <code>class-attribute</code>","text":"<pre><code>NOTIFICATION_TIMEOUT = 5\n</code></pre> <p>Default number of seconds to show notifications before removing them.</p>"},{"location":"api/app/#textual.app.App.SCREENS","title":"SCREENS  <code>class-attribute</code>","text":"<pre><code>SCREENS = {}\n</code></pre> <p>Screens associated with the app for the lifetime of the app.</p>"},{"location":"api/app/#textual.app.App.SUB_TITLE","title":"SUB_TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>SUB_TITLE = None\n</code></pre> <p>A class variable to set the default sub-title for the application.</p> <p>To update the sub-title while the app is running, you can set the sub_title attribute. See also the <code>Screen.SUB_TITLE</code> attribute.</p>"},{"location":"api/app/#textual.app.App.TITLE","title":"TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>TITLE = None\n</code></pre> <p>A class variable to set the default title for the application.</p> <p>To update the title while the app is running, you can set the title attribute. See also the <code>Screen.TITLE</code> attribute.</p>"},{"location":"api/app/#textual.app.App.TOOLTIP_DELAY","title":"TOOLTIP_DELAY  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>TOOLTIP_DELAY = 0.5\n</code></pre> <p>The time in seconds after which a tooltip gets displayed.</p>"},{"location":"api/app/#textual.app.App.active_bindings","title":"active_bindings  <code>property</code>","text":"<pre><code>active_bindings\n</code></pre> <p>Get currently active bindings.</p> <p>If no widget is focused, then app-level bindings are returned. If a widget is focused, then any bindings present in the active screen and app are merged and returned.</p> <p>This property may be used to inspect current bindings.</p> <p>Returns:</p> Type Description <code>dict[str, ActiveBinding]</code> <p>A dict that maps keys on to binding information.</p>"},{"location":"api/app/#textual.app.App.animation_level","title":"animation_level  <code>instance-attribute</code>","text":"<pre><code>animation_level = TEXTUAL_ANIMATIONS\n</code></pre> <p>Determines what type of animations the app will display.</p> <p>See <code>textual.constants.TEXTUAL_ANIMATIONS</code>.</p>"},{"location":"api/app/#textual.app.App.animator","title":"animator  <code>property</code>","text":"<pre><code>animator\n</code></pre> <p>The animator object.</p>"},{"location":"api/app/#textual.app.App.ansi_theme","title":"ansi_theme  <code>property</code>","text":"<pre><code>ansi_theme\n</code></pre> <p>The ANSI TerminalTheme currently being used.</p> <p>Defines how colors defined as ANSI (e.g. <code>magenta</code>) inside Rich renderables are mapped to hex codes.</p>"},{"location":"api/app/#textual.app.App.ansi_theme_dark","title":"ansi_theme_dark  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ansi_theme_dark = Reactive(MONOKAI, init=False)\n</code></pre> <p>Maps ANSI colors to hex colors using a Rich TerminalTheme object while in dark mode.</p>"},{"location":"api/app/#textual.app.App.ansi_theme_light","title":"ansi_theme_light  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ansi_theme_light = Reactive(ALABASTER, init=False)\n</code></pre> <p>Maps ANSI colors to hex colors using a Rich TerminalTheme object while in light mode.</p>"},{"location":"api/app/#textual.app.App.app_focus","title":"app_focus  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>app_focus = Reactive(True, compute=False)\n</code></pre> <p>Indicates if the app has focus.</p> <p>When run in the terminal, the app always has focus. When run in the web, the app will get focus when the terminal widget has focus.</p>"},{"location":"api/app/#textual.app.App.app_resume_signal","title":"app_resume_signal  <code>instance-attribute</code>","text":"<pre><code>app_resume_signal = Signal(self, 'app-resume')\n</code></pre> <p>The signal that is published when the app is resumed after a suspend.</p> <p>When the app is resumed after a <code>App.suspend</code> call this signal will be published; subscribe to this signal to perform work after the app has resumed.</p>"},{"location":"api/app/#textual.app.App.app_suspend_signal","title":"app_suspend_signal  <code>instance-attribute</code>","text":"<pre><code>app_suspend_signal = Signal(self, 'app-suspend')\n</code></pre> <p>The signal that is published when the app is suspended.</p> <p>When <code>App.suspend</code> is called this signal will be published; subscribe to this signal to perform work before the suspension takes place.</p>"},{"location":"api/app/#textual.app.App.children","title":"children  <code>property</code>","text":"<pre><code>children\n</code></pre> <p>A view onto the app's immediate children.</p> <p>This attribute exists on all widgets. In the case of the App, it will only ever contain a single child, which will be the currently active screen.</p> <p>Returns:</p> Type Description <code>Sequence['Widget']</code> <p>A sequence of widgets.</p>"},{"location":"api/app/#textual.app.App.current_mode","title":"current_mode  <code>property</code>","text":"<pre><code>current_mode\n</code></pre> <p>The name of the currently active mode.</p>"},{"location":"api/app/#textual.app.App.cursor_position","title":"cursor_position  <code>instance-attribute</code>","text":"<pre><code>cursor_position = Offset(0, 0)\n</code></pre> <p>The position of the terminal cursor in screen-space.</p> <p>This can be set by widgets and is useful for controlling the positioning of OS IME and emoji popup menus.</p>"},{"location":"api/app/#textual.app.App.dark","title":"dark  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>dark = Reactive(True, compute=False)\n</code></pre> <p>Use a dark theme if <code>True</code>, otherwise use a light theme.</p> <p>Modify this attribute to switch between light and dark themes.</p> Example <pre><code>self.app.dark = not self.app.dark  # Toggle dark mode\n</code></pre>"},{"location":"api/app/#textual.app.App.debug","title":"debug  <code>property</code>","text":"<pre><code>debug\n</code></pre> <p>Is debug mode enabled?</p>"},{"location":"api/app/#textual.app.App.escape_to_minimize","title":"escape_to_minimize  <code>property</code>","text":"<pre><code>escape_to_minimize\n</code></pre> <p>Use the escape key to minimize?</p> <p>When a widget is maximized, this boolean determines if the <code>escape</code> key will minimize the widget (potentially overriding any bindings).</p> <p>The default logic is to use the screen's <code>ESCAPE_TO_MINIMIZE</code> classvar if it is set to <code>True</code> or <code>False</code>. If the classvar on the screen is not set (and left as <code>None</code>), then the app's <code>ESCAPE_TO_MINIMIZE</code> is used.</p>"},{"location":"api/app/#textual.app.App.focused","title":"focused  <code>property</code>","text":"<pre><code>focused\n</code></pre> <p>The widget that is focused on the currently active screen, or <code>None</code>.</p> <p>Focused widgets receive keyboard input.</p> <p>Returns:</p> Type Description <code>Widget | None</code> <p>The currently focused widget, or <code>None</code> if nothing is focused.</p>"},{"location":"api/app/#textual.app.App.is_attached","title":"is_attached  <code>property</code>","text":"<pre><code>is_attached\n</code></pre> <p>Is this node linked to the app through the DOM?</p>"},{"location":"api/app/#textual.app.App.is_dom_root","title":"is_dom_root  <code>property</code>","text":"<pre><code>is_dom_root\n</code></pre> <p>Is this a root node (i.e. the App)?</p>"},{"location":"api/app/#textual.app.App.is_headless","title":"is_headless  <code>property</code>","text":"<pre><code>is_headless\n</code></pre> <p>Is the app running in 'headless' mode?</p> <p>Headless mode is used when running tests with run_test.</p>"},{"location":"api/app/#textual.app.App.is_inline","title":"is_inline  <code>property</code>","text":"<pre><code>is_inline\n</code></pre> <p>Is the app running in 'inline' mode?</p>"},{"location":"api/app/#textual.app.App.log","title":"log  <code>property</code>","text":"<pre><code>log\n</code></pre> <p>The textual logger.</p> Example <pre><code>self.log(\"Hello, World!\")\nself.log(self.tree)\n</code></pre> <p>Returns:</p> Type Description <code>Logger</code> <p>A Textual logger.</p>"},{"location":"api/app/#textual.app.App.return_code","title":"return_code  <code>property</code>","text":"<pre><code>return_code\n</code></pre> <p>The return code with which the app exited.</p> <p>Non-zero codes indicate errors. A value of 1 means the app exited with a fatal error. If the app hasn't exited yet, this will be <code>None</code>.</p> Example <p>The return code can be used to exit the process via <code>sys.exit</code>. <pre><code>my_app.run()\nsys.exit(my_app.return_code)\n</code></pre></p>"},{"location":"api/app/#textual.app.App.return_value","title":"return_value  <code>property</code>","text":"<pre><code>return_value\n</code></pre> <p>The return value of the app, or <code>None</code> if it has not yet been set.</p> <p>The return value is set when calling exit.</p>"},{"location":"api/app/#textual.app.App.screen","title":"screen  <code>property</code>","text":"<pre><code>screen\n</code></pre> <p>The current active screen.</p> <p>Returns:</p> Type Description <code>Screen[object]</code> <p>The currently active (visible) screen.</p> <p>Raises:</p> Type Description <code>ScreenStackError</code> <p>If there are no screens on the stack.</p>"},{"location":"api/app/#textual.app.App.screen_stack","title":"screen_stack  <code>property</code>","text":"<pre><code>screen_stack\n</code></pre> <p>A snapshot of the current screen stack.</p> <p>Returns:</p> Type Description <code>list[Screen[Any]]</code> <p>A snapshot of the current state of the screen stack.</p>"},{"location":"api/app/#textual.app.App.scroll_sensitivity_x","title":"scroll_sensitivity_x  <code>instance-attribute</code>","text":"<pre><code>scroll_sensitivity_x = 4.0\n</code></pre> <p>Number of columns to scroll in the X direction with wheel or trackpad.</p>"},{"location":"api/app/#textual.app.App.scroll_sensitivity_y","title":"scroll_sensitivity_y  <code>instance-attribute</code>","text":"<pre><code>scroll_sensitivity_y = 2.0\n</code></pre> <p>Number of lines to scroll in the Y direction with wheel or trackpad.</p>"},{"location":"api/app/#textual.app.App.size","title":"size  <code>property</code>","text":"<pre><code>size\n</code></pre> <p>The size of the terminal.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Size of the terminal.</p>"},{"location":"api/app/#textual.app.App.sub_title","title":"sub_title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>sub_title = SUB_TITLE if SUB_TITLE is not None else ''\n</code></pre> <p>The sub-title for the application.</p> <p>The initial value for <code>sub_title</code> will be set to the <code>SUB_TITLE</code> class variable if it exists, or an empty string if it doesn't.</p> <p>Sub-titles are typically used to show the high-level state of the app, such as the current mode, or path to the file being worked on.</p> <p>Assign a new value to this attribute to change the sub-title. The new value is always converted to string.</p>"},{"location":"api/app/#textual.app.App.title","title":"title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>title = TITLE if TITLE is not None else f'{__name__}'\n</code></pre> <p>The title for the application.</p> <p>The initial value for <code>title</code> will be set to the <code>TITLE</code> class variable if it exists, or the name of the app if it doesn't.</p> <p>Assign a new value to this attribute to change the title. The new value is always converted to string.</p>"},{"location":"api/app/#textual.app.App.use_command_palette","title":"use_command_palette  <code>instance-attribute</code>","text":"<pre><code>use_command_palette = ENABLE_COMMAND_PALETTE\n</code></pre> <p>A flag to say if the application should use the command palette.</p> <p>If set to <code>False</code> any call to <code>action_command_palette</code> will be ignored.</p>"},{"location":"api/app/#textual.app.App.workers","title":"workers  <code>property</code>","text":"<pre><code>workers\n</code></pre> <p>The worker manager.</p> <p>Returns:</p> Type Description <code>WorkerManager</code> <p>An object to manage workers.</p>"},{"location":"api/app/#textual.app.App.action_add_class","title":"action_add_class  <code>async</code>","text":"<pre><code>action_add_class(selector, class_name)\n</code></pre> <p>An action to add a CSS class to the selected widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Selects the widget to add the class to.</p> required <code>str</code> <p>The class to add to the selected widget.</p> required"},{"location":"api/app/#textual.app.App.action_add_class(selector)","title":"<code>selector</code>","text":""},{"location":"api/app/#textual.app.App.action_add_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/app/#textual.app.App.action_back","title":"action_back  <code>async</code>","text":"<pre><code>action_back()\n</code></pre> <p>An action to go back to the previous screen (pop the current screen).</p> Note <p>If there is no screen to go back to, this is a non-operation (in other words it's safe to call even if there are no other screens on the stack.)</p>"},{"location":"api/app/#textual.app.App.action_bell","title":"action_bell  <code>async</code>","text":"<pre><code>action_bell()\n</code></pre> <p>An action to play the terminal 'bell'.</p>"},{"location":"api/app/#textual.app.App.action_command_palette","title":"action_command_palette","text":"<pre><code>action_command_palette()\n</code></pre> <p>Show the Textual command palette.</p>"},{"location":"api/app/#textual.app.App.action_focus","title":"action_focus  <code>async</code>","text":"<pre><code>action_focus(widget_id)\n</code></pre> <p>An action to focus the given widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>ID of widget to focus.</p> required"},{"location":"api/app/#textual.app.App.action_focus(widget_id)","title":"<code>widget_id</code>","text":""},{"location":"api/app/#textual.app.App.action_focus_next","title":"action_focus_next","text":"<pre><code>action_focus_next()\n</code></pre> <p>An action to focus the next widget.</p>"},{"location":"api/app/#textual.app.App.action_focus_previous","title":"action_focus_previous","text":"<pre><code>action_focus_previous()\n</code></pre> <p>An action to focus the previous widget.</p>"},{"location":"api/app/#textual.app.App.action_hide_help_panel","title":"action_hide_help_panel","text":"<pre><code>action_hide_help_panel()\n</code></pre> <p>Hide the keys panel (if present).</p>"},{"location":"api/app/#textual.app.App.action_pop_screen","title":"action_pop_screen  <code>async</code>","text":"<pre><code>action_pop_screen()\n</code></pre> <p>An action to remove the topmost screen and makes the new topmost screen active.</p>"},{"location":"api/app/#textual.app.App.action_push_screen","title":"action_push_screen  <code>async</code>","text":"<pre><code>action_push_screen(screen)\n</code></pre> <p>An action to push a new screen on to the stack and make it active.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the screen.</p> required"},{"location":"api/app/#textual.app.App.action_push_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.action_quit","title":"action_quit  <code>async</code>","text":"<pre><code>action_quit()\n</code></pre> <p>An action to quit the app as soon as possible.</p>"},{"location":"api/app/#textual.app.App.action_remove_class","title":"action_remove_class  <code>async</code>","text":"<pre><code>action_remove_class(selector, class_name)\n</code></pre> <p>An action to remove a CSS class from the selected widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Selects the widget to remove the class from.</p> required <code>str</code> <p>The class to remove from  the selected widget.</p> required"},{"location":"api/app/#textual.app.App.action_remove_class(selector)","title":"<code>selector</code>","text":""},{"location":"api/app/#textual.app.App.action_remove_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/app/#textual.app.App.action_screenshot","title":"action_screenshot","text":"<pre><code>action_screenshot(filename=None, path=None)\n</code></pre> <p>This action will save an SVG file containing the current contents of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Filename of screenshot, or None to auto-generate.</p> <code>None</code> <code>str | None</code> <p>Path to directory. Defaults to the user's Downloads directory.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.action_screenshot(filename)","title":"<code>filename</code>","text":""},{"location":"api/app/#textual.app.App.action_screenshot(path)","title":"<code>path</code>","text":""},{"location":"api/app/#textual.app.App.action_show_help_panel","title":"action_show_help_panel","text":"<pre><code>action_show_help_panel()\n</code></pre> <p>Show the keys panel.</p>"},{"location":"api/app/#textual.app.App.action_simulate_key","title":"action_simulate_key  <code>async</code>","text":"<pre><code>action_simulate_key(key)\n</code></pre> <p>An action to simulate a key press.</p> <p>This will invoke the same actions as if the user had pressed the key.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The key to process.</p> required"},{"location":"api/app/#textual.app.App.action_simulate_key(key)","title":"<code>key</code>","text":""},{"location":"api/app/#textual.app.App.action_suspend_process","title":"action_suspend_process","text":"<pre><code>action_suspend_process()\n</code></pre> <p>Suspend the process into the background.</p> Note <p>On Unix and Unix-like systems a <code>SIGTSTP</code> is sent to the application's process. Currently on Windows and when running under Textual Web this is a non-operation.</p>"},{"location":"api/app/#textual.app.App.action_switch_mode","title":"action_switch_mode  <code>async</code>","text":"<pre><code>action_switch_mode(mode)\n</code></pre> <p>An action that switches to the given mode..</p>"},{"location":"api/app/#textual.app.App.action_switch_screen","title":"action_switch_screen  <code>async</code>","text":"<pre><code>action_switch_screen(screen)\n</code></pre> <p>An action to switch screens.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the screen.</p> required"},{"location":"api/app/#textual.app.App.action_switch_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.action_toggle_class","title":"action_toggle_class  <code>async</code>","text":"<pre><code>action_toggle_class(selector, class_name)\n</code></pre> <p>An action to toggle a CSS class on the selected widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Selects the widget to toggle the class on.</p> required <code>str</code> <p>The class to toggle on the selected widget.</p> required"},{"location":"api/app/#textual.app.App.action_toggle_class(selector)","title":"<code>selector</code>","text":""},{"location":"api/app/#textual.app.App.action_toggle_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/app/#textual.app.App.action_toggle_dark","title":"action_toggle_dark","text":"<pre><code>action_toggle_dark()\n</code></pre> <p>An action to toggle dark mode.</p>"},{"location":"api/app/#textual.app.App.add_mode","title":"add_mode","text":"<pre><code>add_mode(mode, base_screen)\n</code></pre> <p>Adds a mode and its corresponding base screen to the app.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The new mode.</p> required <code>str | Callable[[], Screen]</code> <p>The base screen associated with the given mode.</p> required <p>Raises:</p> Type Description <code>InvalidModeError</code> <p>If the name of the mode is not valid/duplicated.</p>"},{"location":"api/app/#textual.app.App.add_mode(mode)","title":"<code>mode</code>","text":""},{"location":"api/app/#textual.app.App.add_mode(base_screen)","title":"<code>base_screen</code>","text":""},{"location":"api/app/#textual.app.App.animate","title":"animate","text":"<pre><code>animate(\n    attribute,\n    value,\n    *,\n    final_value=...,\n    duration=None,\n    speed=None,\n    delay=0.0,\n    easing=DEFAULT_EASING,\n    on_complete=None,\n    level=\"full\"\n)\n</code></pre> <p>Animate an attribute.</p> <p>See the guide for how to use the animation system.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute to animate.</p> required <code>float | Animatable</code> <p>The value to animate to.</p> required <code>object</code> <p>The final value of the animation.</p> <code>...</code> <code>float | None</code> <p>The duration (in seconds) of the animation.</p> <code>None</code> <code>float | None</code> <p>The speed of the animation.</p> <code>None</code> <code>float</code> <p>A delay (in seconds) before the animation starts.</p> <code>0.0</code> <code>EasingFunction | str</code> <p>An easing method.</p> <code>DEFAULT_EASING</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'full'</code>"},{"location":"api/app/#textual.app.App.animate(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/app/#textual.app.App.animate(value)","title":"<code>value</code>","text":""},{"location":"api/app/#textual.app.App.animate(final_value)","title":"<code>final_value</code>","text":""},{"location":"api/app/#textual.app.App.animate(duration)","title":"<code>duration</code>","text":""},{"location":"api/app/#textual.app.App.animate(speed)","title":"<code>speed</code>","text":""},{"location":"api/app/#textual.app.App.animate(delay)","title":"<code>delay</code>","text":""},{"location":"api/app/#textual.app.App.animate(easing)","title":"<code>easing</code>","text":""},{"location":"api/app/#textual.app.App.animate(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/app/#textual.app.App.animate(level)","title":"<code>level</code>","text":""},{"location":"api/app/#textual.app.App.batch_update","title":"batch_update","text":"<pre><code>batch_update()\n</code></pre> <p>A context manager to suspend all repaints until the end of the batch.</p>"},{"location":"api/app/#textual.app.App.begin_capture_print","title":"begin_capture_print","text":"<pre><code>begin_capture_print(target, stdout=True, stderr=True)\n</code></pre> <p>Capture content that is printed (or written to stdout / stderr).</p> <p>If printing is captured, the <code>target</code> will be sent an events.Print message.</p> <p>Parameters:</p> Name Type Description Default <code>MessageTarget</code> <p>The widget where print content will be sent.</p> required <code>bool</code> <p>Capture stdout.</p> <code>True</code> <code>bool</code> <p>Capture stderr.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.begin_capture_print(target)","title":"<code>target</code>","text":""},{"location":"api/app/#textual.app.App.begin_capture_print(stdout)","title":"<code>stdout</code>","text":""},{"location":"api/app/#textual.app.App.begin_capture_print(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/app/#textual.app.App.bell","title":"bell","text":"<pre><code>bell()\n</code></pre> <p>Play the console 'bell'.</p> <p>For terminals that support a bell, this typically makes a notification or error sound. Some terminals may make no sound or display a visual bell indicator, depending on configuration.</p>"},{"location":"api/app/#textual.app.App.bind","title":"bind","text":"<pre><code>bind(\n    keys,\n    action,\n    *,\n    description=\"\",\n    show=True,\n    key_display=None\n)\n</code></pre> <p>Bind a key to an action.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A comma separated list of keys, i.e.</p> required <code>str</code> <p>Action to bind to.</p> required <code>str</code> <p>Short description of action.</p> <code>''</code> <code>bool</code> <p>Show key in UI.</p> <code>True</code> <code>str | None</code> <p>Replacement text for key, or None to use default.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.bind(keys)","title":"<code>keys</code>","text":""},{"location":"api/app/#textual.app.App.bind(action)","title":"<code>action</code>","text":""},{"location":"api/app/#textual.app.App.bind(description)","title":"<code>description</code>","text":""},{"location":"api/app/#textual.app.App.bind(show)","title":"<code>show</code>","text":""},{"location":"api/app/#textual.app.App.bind(key_display)","title":"<code>key_display</code>","text":""},{"location":"api/app/#textual.app.App.call_from_thread","title":"call_from_thread","text":"<pre><code>call_from_thread(callback, *args, **kwargs)\n</code></pre> <p>Run a callable from another thread, and return the result.</p> <p>Like asyncio apps in general, Textual apps are not thread-safe. If you call methods or set attributes on Textual objects from a thread, you may get unpredictable results.</p> <p>This method will ensure that your code runs within the correct context.</p> <p>Tip</p> <p>Consider using post_message which is also thread-safe.</p> <p>Parameters:</p> Name Type Description Default <code>Callable[..., CallThreadReturnType | Awaitable[CallThreadReturnType]]</code> <p>A callable to run.</p> required <code>Any</code> <p>Arguments to the callback.</p> <code>()</code> <code>Any</code> <p>Keyword arguments for the callback.</p> <code>{}</code> <p>Raises:</p> Type Description <code>RuntimeError</code> <p>If the app isn't running or if this method is called from the same thread where the app is running.</p> <p>Returns:</p> Type Description <code>CallThreadReturnType</code> <p>The result of the callback.</p>"},{"location":"api/app/#textual.app.App.call_from_thread(callback)","title":"<code>callback</code>","text":""},{"location":"api/app/#textual.app.App.call_from_thread(*args)","title":"<code>*args</code>","text":""},{"location":"api/app/#textual.app.App.call_from_thread(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/app/#textual.app.App.capture_mouse","title":"capture_mouse","text":"<pre><code>capture_mouse(widget)\n</code></pre> <p>Send all mouse events to the given widget or disable mouse capture.</p> <p>Parameters:</p> Name Type Description Default <code>Widget | None</code> <p>If a widget, capture mouse event, or <code>None</code> to end mouse capture.</p> required"},{"location":"api/app/#textual.app.App.capture_mouse(widget)","title":"<code>widget</code>","text":""},{"location":"api/app/#textual.app.App.clear_notifications","title":"clear_notifications","text":"<pre><code>clear_notifications()\n</code></pre> <p>Clear all the current notifications.</p>"},{"location":"api/app/#textual.app.App.compose","title":"compose","text":"<pre><code>compose()\n</code></pre> <p>Yield child widgets for a container.</p> <p>This method should be implemented in a subclass.</p>"},{"location":"api/app/#textual.app.App.copy_to_clipboard","title":"copy_to_clipboard","text":"<pre><code>copy_to_clipboard(text)\n</code></pre> <p>Copy text to the clipboard.</p> <p>Note</p> <p>This does not work on macOS Terminal, but will work on most other terminals.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text you wish to copy to the clipboard.</p> required"},{"location":"api/app/#textual.app.App.copy_to_clipboard(text)","title":"<code>text</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary","title":"deliver_binary","text":"<pre><code>deliver_binary(\n    path_or_file,\n    *,\n    save_directory=None,\n    save_filename=None,\n    open_method=\"download\",\n    mime_type=None,\n    name=None\n)\n</code></pre> <p>Deliver a binary file to the end-user of the application.</p> <p>If an IO object is supplied, it will be closed by this method and must not be used after it is supplied to this method.</p> <p>If running in a terminal, this will save the file to the user's downloads directory.</p> <p>If running via a web browser, this will initiate a download via a single-use URL.</p> <p>This operation runs in a thread when running on web, so this method returning does not indicate that the file has been delivered.</p> <p>After the file has been delivered, a <code>DeliveryComplete</code> message will be posted to this <code>App</code>, which contains the <code>delivery_key</code> returned by this method. By handling this message, you can add custom logic to your application that fires only after the file has been delivered.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path | BinaryIO</code> <p>The path or file-like object to save.</p> required <code>str | Path | None</code> <p>The directory to save the file to. If None, the default \"downloads\" directory will be used. This argument is ignored when running via the web.</p> <code>None</code> <code>str | None</code> <p>The filename to save the file to. If None, the following logic applies to generate the filename: - If <code>path_or_file</code> is a file-like object, the filename will be taken from   the <code>name</code> attribute if available. - If <code>path_or_file</code> is a path, the filename will be taken from the path. - If a filename is not available, a filename will be generated using the   App's title and the current date and time.</p> <code>None</code> <code>Literal['browser', 'download']</code> <p>The method to use to open the file. \"browser\" will open the file in the web browser, \"download\" will initiate a download. Note that this can sometimes be impacted by the browser's settings.</p> <code>'download'</code> <code>str | None</code> <p>The MIME type of the file or None to guess based on file extension. If no MIME type is supplied and we cannot guess the MIME type, from the file extension, the MIME type will be set to \"application/octet-stream\".</p> <code>None</code> <code>str | None</code> <p>A user-defined named which will be returned in <code>DeliveryComplete</code> and <code>DeliveryComplete</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>str | None</code> <p>The delivery key that uniquely identifies the file delivery.</p>"},{"location":"api/app/#textual.app.App.deliver_binary(path_or_file)","title":"<code>path_or_file</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(save_directory)","title":"<code>save_directory</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(save_filename)","title":"<code>save_filename</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(open_method)","title":"<code>open_method</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(mime_type)","title":"<code>mime_type</code>","text":""},{"location":"api/app/#textual.app.App.deliver_binary(name)","title":"<code>name</code>","text":""},{"location":"api/app/#textual.app.App.deliver_screenshot","title":"deliver_screenshot","text":"<pre><code>deliver_screenshot(\n    filename=None, path=None, time_format=None\n)\n</code></pre> <p>Deliver a screenshot of the app.</p> <p>This with save the screenshot when running locally, or serve it when the app is running in a web browser.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Filename of SVG screenshot, or None to auto-generate a filename with the date and time.</p> <code>None</code> <code>str | None</code> <p>Path to directory for output when saving locally (not used when app is running in the browser). Defaults to current working directory.</p> <code>None</code> <code>str | None</code> <p>Date and time format to use if filename is None. Defaults to a format like ISO 8601 with some reserved characters replaced with underscores.</p> <code>None</code> <p>Returns:</p> Type Description <code>str | None</code> <p>The delivery key that uniquely identifies the file delivery.</p>"},{"location":"api/app/#textual.app.App.deliver_screenshot(filename)","title":"<code>filename</code>","text":""},{"location":"api/app/#textual.app.App.deliver_screenshot(path)","title":"<code>path</code>","text":""},{"location":"api/app/#textual.app.App.deliver_screenshot(time_format)","title":"<code>time_format</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text","title":"deliver_text","text":"<pre><code>deliver_text(\n    path_or_file,\n    *,\n    save_directory=None,\n    save_filename=None,\n    open_method=\"download\",\n    encoding=None,\n    mime_type=None,\n    name=None\n)\n</code></pre> <p>Deliver a text file to the end-user of the application.</p> <p>If a TextIO object is supplied, it will be closed by this method and must not be used after this method is called.</p> <p>If running in a terminal, this will save the file to the user's downloads directory.</p> <p>If running via a web browser, this will initiate a download via a single-use URL.</p> <p>After the file has been delivered, a <code>DeliveryComplete</code> message will be posted to this <code>App</code>, which contains the <code>delivery_key</code> returned by this method. By handling this message, you can add custom logic to your application that fires only after the file has been delivered.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path | TextIO</code> <p>The path or file-like object to save.</p> required <code>str | Path | None</code> <p>The directory to save the file to.</p> <code>None</code> <code>str | None</code> <p>The filename to save the file to.  If <code>path_or_file</code> is a file-like object, the filename will be generated from the <code>name</code> attribute if available. If <code>path_or_file</code> is a path the filename will be generated from the path.</p> <code>None</code> <code>str | None</code> <p>The encoding to use when saving the file. If <code>None</code>, the encoding will be determined by supplied file-like object (if possible). If this is not possible, 'utf-8' will be used.</p> <code>None</code> <code>str | None</code> <p>The MIME type of the file or None to guess based on file extension. If no MIME type is supplied and we cannot guess the MIME type, from the file extension, the MIME type will be set to \"text/plain\".</p> <code>None</code> <code>str | None</code> <p>A user-defined named which will be returned in <code>DeliveryComplete</code> and <code>DeliveryComplete</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>str | None</code> <p>The delivery key that uniquely identifies the file delivery.</p>"},{"location":"api/app/#textual.app.App.deliver_text(path_or_file)","title":"<code>path_or_file</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(save_directory)","title":"<code>save_directory</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(save_filename)","title":"<code>save_filename</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(encoding)","title":"<code>encoding</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(mime_type)","title":"<code>mime_type</code>","text":""},{"location":"api/app/#textual.app.App.deliver_text(name)","title":"<code>name</code>","text":""},{"location":"api/app/#textual.app.App.end_capture_print","title":"end_capture_print","text":"<pre><code>end_capture_print(target)\n</code></pre> <p>End capturing of prints.</p> <p>Parameters:</p> Name Type Description Default <code>MessageTarget</code> <p>The widget that was capturing prints.</p> required"},{"location":"api/app/#textual.app.App.end_capture_print(target)","title":"<code>target</code>","text":""},{"location":"api/app/#textual.app.App.exit","title":"exit","text":"<pre><code>exit(result=None, return_code=0, message=None)\n</code></pre> <p>Exit the app, and return the supplied result.</p> <p>Parameters:</p> Name Type Description Default <code>ReturnType | None</code> <p>Return value.</p> <code>None</code> <code>int</code> <p>The return code. Use non-zero values for error codes.</p> <code>0</code> <code>RenderableType | None</code> <p>Optional message to display on exit.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.exit(result)","title":"<code>result</code>","text":""},{"location":"api/app/#textual.app.App.exit(return_code)","title":"<code>return_code</code>","text":""},{"location":"api/app/#textual.app.App.exit(message)","title":"<code>message</code>","text":""},{"location":"api/app/#textual.app.App.export_screenshot","title":"export_screenshot","text":"<pre><code>export_screenshot(*, title=None)\n</code></pre> <p>Export an SVG screenshot of the current screen.</p> <p>See also save_screenshot which writes the screenshot to a file.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The title of the exported screenshot or None to use app title.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.export_screenshot(title)","title":"<code>title</code>","text":""},{"location":"api/app/#textual.app.App.get_child_by_id","title":"get_child_by_id","text":"<pre><code>get_child_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_child_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_child_by_id(id, expect_type=None)\n</code></pre> <p>Get the first child (immediate descendant) of this DOMNode with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the node to search for.</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or use <code>None</code> to apply no type restriction.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first child of this node with the specified ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>If no children could be found for this ID.</p> <code>WrongType</code> <p>If the wrong type was found.</p>"},{"location":"api/app/#textual.app.App.get_child_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/app/#textual.app.App.get_child_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/app/#textual.app.App.get_child_by_type","title":"get_child_by_type","text":"<pre><code>get_child_by_type(expect_type)\n</code></pre> <p>Get a child of a give type.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType]</code> <p>The type of the expected child.</p> required <p>Raises:</p> Type Description <code>NoMatches</code> <p>If no valid child is found.</p> <p>Returns:</p> Type Description <code>ExpectType</code> <p>A widget.</p>"},{"location":"api/app/#textual.app.App.get_child_by_type(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/app/#textual.app.App.get_css_variables","title":"get_css_variables","text":"<pre><code>get_css_variables()\n</code></pre> <p>Get a mapping of variables used to pre-populate CSS.</p> <p>May be implemented in a subclass to add new CSS variables.</p> <p>Returns:</p> Type Description <code>dict[str, str]</code> <p>A mapping of variable name to value.</p>"},{"location":"api/app/#textual.app.App.get_default_screen","title":"get_default_screen","text":"<pre><code>get_default_screen()\n</code></pre> <p>Get the default screen.</p> <p>This is called when the App is first composed. The returned screen instance will be the first screen on the stack.</p> <p>Implement this method if you would like to use a custom Screen as the default screen.</p> <p>Returns:</p> Type Description <code>Screen</code> <p>A screen instance.</p>"},{"location":"api/app/#textual.app.App.get_driver_class","title":"get_driver_class","text":"<pre><code>get_driver_class()\n</code></pre> <p>Get a driver class for this platform.</p> <p>This method is called by the constructor, and unlikely to be required when building a Textual app.</p> <p>Returns:</p> Type Description <code>Type[Driver]</code> <p>A Driver class which manages input and display.</p>"},{"location":"api/app/#textual.app.App.get_key_display","title":"get_key_display","text":"<pre><code>get_key_display(binding)\n</code></pre> <p>Format a bound key for display in footer / key panel etc.</p> <p>Note</p> <p>You can implement this in a subclass if you want to change how keys are displayed in your app.</p> <p>Parameters:</p> Name Type Description Default <code>Binding</code> <p>A Binding.</p> required <p>Returns:</p> Type Description <code>str</code> <p>A string used to represent the key.</p>"},{"location":"api/app/#textual.app.App.get_key_display(binding)","title":"<code>binding</code>","text":""},{"location":"api/app/#textual.app.App.get_loading_widget","title":"get_loading_widget","text":"<pre><code>get_loading_widget()\n</code></pre> <p>Get a widget to be used as a loading indicator.</p> <p>Extend this method if you want to display the loading state a little differently.</p> <p>Returns:</p> Type Description <code>Widget</code> <p>A widget to display a loading state.</p>"},{"location":"api/app/#textual.app.App.get_screen","title":"get_screen","text":"<pre><code>get_screen(screen)\n</code></pre> <p>Get an installed screen.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>Either a Screen object or screen name (the <code>name</code> argument when installed).</p> required <p>Raises:</p> Type Description <code>KeyError</code> <p>If the named screen doesn't exist.</p> <p>Returns:</p> Type Description <code>Screen</code> <p>A screen instance.</p>"},{"location":"api/app/#textual.app.App.get_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.get_system_commands","title":"get_system_commands","text":"<pre><code>get_system_commands(screen)\n</code></pre> <p>A generator of system commands used in the command palette.</p> <p>Parameters:</p> Name Type Description Default <code>Screen</code> <p>The screen where the command palette was invoked from.</p> required <p>Implement this method in your App subclass if you want to add custom commands. Here is an example:</p> <pre><code>def get_system_commands(self, screen: Screen) -&gt; Iterable[SystemCommand]:\n    yield from super().get_system_commands(screen)\n    yield SystemCommand(\"Bell\", \"Ring the bell\", self.bell)\n</code></pre> <p>Note</p> <p>Requires that <code>SystemCommandsProvider</code> is in <code>App.COMMANDS</code> class variable.</p> <p>Yields:</p> Type Description <code>Iterable[SystemCommand]</code> <p>SystemCommand instances.</p>"},{"location":"api/app/#textual.app.App.get_system_commands(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_at","title":"get_widget_at","text":"<pre><code>get_widget_at(x, y)\n</code></pre> <p>Get the widget under the given coordinates.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>tuple[Widget, Region]</code> <p>The widget and the widget's screen region.</p>"},{"location":"api/app/#textual.app.App.get_widget_at(x)","title":"<code>x</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_at(y)","title":"<code>y</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_by_id","title":"get_widget_by_id","text":"<pre><code>get_widget_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_widget_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_widget_by_id(id, expect_type=None)\n</code></pre> <p>Get the first descendant widget with the given ID.</p> <p>Performs a breadth-first search rooted at the current screen. It will not return the Screen if that matches the ID. To get the screen, use <code>self.screen</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID to search for in the subtree</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or None for any type. Defaults to None.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first descendant encountered with this ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>if no children could be found for this ID</p> <code>WrongType</code> <p>if the wrong type was found.</p>"},{"location":"api/app/#textual.app.App.get_widget_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/app/#textual.app.App.get_widget_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/app/#textual.app.App.install_screen","title":"install_screen","text":"<pre><code>install_screen(screen, name)\n</code></pre> <p>Install a screen.</p> <p>Installing a screen prevents Textual from destroying it when it is no longer on the screen stack. Note that you don't need to install a screen to use it. See push_screen or switch_screen to make a new screen current.</p> <p>Parameters:</p> Name Type Description Default <code>Screen</code> <p>Screen to install.</p> required <code>str</code> <p>Unique name to identify the screen.</p> required <p>Raises:</p> Type Description <code>ScreenError</code> <p>If the screen can't be installed.</p> <p>Returns:</p> Type Description <code>None</code> <p>An awaitable that awaits the mounting of the screen and its children.</p>"},{"location":"api/app/#textual.app.App.install_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.install_screen(name)","title":"<code>name</code>","text":""},{"location":"api/app/#textual.app.App.is_mounted","title":"is_mounted","text":"<pre><code>is_mounted(widget)\n</code></pre> <p>Check if a widget is mounted.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True of the widget is mounted.</p>"},{"location":"api/app/#textual.app.App.is_mounted(widget)","title":"<code>widget</code>","text":""},{"location":"api/app/#textual.app.App.is_screen_installed","title":"is_screen_installed","text":"<pre><code>is_screen_installed(screen)\n</code></pre> <p>Check if a given screen has been installed.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>Either a Screen object or screen name (the <code>name</code> argument when installed).</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the screen is currently installed,</p>"},{"location":"api/app/#textual.app.App.is_screen_installed(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.mount","title":"mount","text":"<pre><code>mount(*widgets, before=None, after=None)\n</code></pre> <p>Mount the given widgets relative to the app's screen.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widget(s) to mount.</p> <code>()</code> <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/app/#textual.app.App.mount(*widgets)","title":"<code>*widgets</code>","text":""},{"location":"api/app/#textual.app.App.mount(before)","title":"<code>before</code>","text":""},{"location":"api/app/#textual.app.App.mount(after)","title":"<code>after</code>","text":""},{"location":"api/app/#textual.app.App.mount_all","title":"mount_all","text":"<pre><code>mount_all(widgets, *, before=None, after=None)\n</code></pre> <p>Mount widgets from an iterable.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Widget]</code> <p>An iterable of widgets.</p> required <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/app/#textual.app.App.mount_all(widgets)","title":"<code>widgets</code>","text":""},{"location":"api/app/#textual.app.App.mount_all(before)","title":"<code>before</code>","text":""},{"location":"api/app/#textual.app.App.mount_all(after)","title":"<code>after</code>","text":""},{"location":"api/app/#textual.app.App.notify","title":"notify","text":"<pre><code>notify(\n    message,\n    *,\n    title=\"\",\n    severity=\"information\",\n    timeout=None\n)\n</code></pre> <p>Create a notification.</p> <p>Tip</p> <p>This method is thread-safe.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The message for the notification.</p> required <code>str</code> <p>The title for the notification.</p> <code>''</code> <code>SeverityLevel</code> <p>The severity of the notification.</p> <code>'information'</code> <code>float | None</code> <p>The timeout (in seconds) for the notification, or <code>None</code> for default.</p> <code>None</code> <p>The <code>notify</code> method is used to create an application-wide notification, shown in a <code>Toast</code>, normally originating in the bottom right corner of the display.</p> <p>Notifications can have the following severity levels:</p> <ul> <li><code>information</code></li> <li><code>warning</code></li> <li><code>error</code></li> </ul> <p>The default is <code>information</code>.</p> Example <pre><code># Show an information notification.\nself.notify(\"It's an older code, sir, but it checks out.\")\n\n# Show a warning. Note that Textual's notification system allows\n# for the use of Rich console markup.\nself.notify(\n    \"Now witness the firepower of this fully \"\n    \"[b]ARMED[/b] and [i][b]OPERATIONAL[/b][/i] battle station!\",\n    title=\"Possible trap detected\",\n    severity=\"warning\",\n)\n\n# Show an error. Set a longer timeout so it's noticed.\nself.notify(\"It's a trap!\", severity=\"error\", timeout=10)\n\n# Show an information notification, but without any sort of title.\nself.notify(\"It's against my programming to impersonate a deity.\", title=\"\")\n</code></pre>"},{"location":"api/app/#textual.app.App.notify(message)","title":"<code>message</code>","text":""},{"location":"api/app/#textual.app.App.notify(title)","title":"<code>title</code>","text":""},{"location":"api/app/#textual.app.App.notify(severity)","title":"<code>severity</code>","text":""},{"location":"api/app/#textual.app.App.notify(timeout)","title":"<code>timeout</code>","text":""},{"location":"api/app/#textual.app.App.open_url","title":"open_url","text":"<pre><code>open_url(url, *, new_tab=True)\n</code></pre> <p>Open a URL in the default web browser.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The URL to open.</p> required <code>bool</code> <p>Whether to open the URL in a new tab.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.open_url(url)","title":"<code>url</code>","text":""},{"location":"api/app/#textual.app.App.open_url(new_tab)","title":"<code>new_tab</code>","text":""},{"location":"api/app/#textual.app.App.panic","title":"panic","text":"<pre><code>panic(*renderables)\n</code></pre> <p>Exits the app and display error message(s).</p> <p>Used in response to unexpected errors. For a more graceful exit, see the exit method.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>Text or Rich renderable(s) to display on exit.</p> <code>()</code>"},{"location":"api/app/#textual.app.App.panic(*renderables)","title":"<code>*renderables</code>","text":""},{"location":"api/app/#textual.app.App.pop_screen","title":"pop_screen","text":"<pre><code>pop_screen()\n</code></pre> <p>Pop the current screen from the stack, and switch to the previous screen.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>The screen that was replaced.</p>"},{"location":"api/app/#textual.app.App.post_display_hook","title":"post_display_hook","text":"<pre><code>post_display_hook()\n</code></pre> <p>Called immediately after a display is done. Used in tests.</p>"},{"location":"api/app/#textual.app.App.push_screen","title":"push_screen","text":"<pre><code>push_screen(\n    screen: Screen[ScreenResultType] | str,\n    callback: (\n        ScreenResultCallbackType[ScreenResultType] | None\n    ) = None,\n    wait_for_dismiss: Literal[False] = False,\n) -&gt; AwaitMount\n</code></pre><pre><code>push_screen(\n    screen: Screen[ScreenResultType] | str,\n    callback: (\n        ScreenResultCallbackType[ScreenResultType] | None\n    ) = None,\n    wait_for_dismiss: Literal[True] = True,\n) -&gt; Future[ScreenResultType]\n</code></pre> <pre><code>push_screen(screen, callback=None, wait_for_dismiss=False)\n</code></pre> <p>Push a new screen on the screen stack, making it the current screen.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[ScreenResultType] | str</code> <p>A Screen instance or the name of an installed screen.</p> required <code>ScreenResultCallbackType[ScreenResultType] | None</code> <p>An optional callback function that will be called if the screen is dismissed with a result.</p> <code>None</code> <code>bool</code> <p>If <code>True</code>, awaiting this method will return the dismiss value from the screen. When set to <code>False</code>, awaiting this method will wait for the screen to be mounted. Note that <code>wait_for_dismiss</code> should only be set to <code>True</code> when running in a worker.</p> <code>False</code> <p>Raises:</p> Type Description <code>NoActiveWorker</code> <p>If using <code>wait_for_dismiss</code> outside of a worker.</p> <p>Returns:</p> Type Description <code>AwaitMount | Future[ScreenResultType]</code> <p>An optional awaitable that awaits the mounting of the screen and its children, or an asyncio Future to await the result of the screen.</p>"},{"location":"api/app/#textual.app.App.push_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.push_screen(callback)","title":"<code>callback</code>","text":""},{"location":"api/app/#textual.app.App.push_screen(wait_for_dismiss)","title":"<code>wait_for_dismiss</code>","text":""},{"location":"api/app/#textual.app.App.push_screen_wait","title":"push_screen_wait  <code>async</code>","text":"<pre><code>push_screen_wait(\n    screen: Screen[ScreenResultType],\n) -&gt; ScreenResultType\n</code></pre><pre><code>push_screen_wait(screen: str) -&gt; Any\n</code></pre> <pre><code>push_screen_wait(screen)\n</code></pre> <p>Push a screen and wait for the result (received from <code>Screen.dismiss</code>).</p> <p>Note that this method may only be called when running in a worker.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[ScreenResultType] | str</code> <p>A screen or the name of an installed screen.</p> required <p>Returns:</p> Type Description <code>ScreenResultType | Any</code> <p>The screen's result.</p>"},{"location":"api/app/#textual.app.App.push_screen_wait(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.recompose","title":"recompose  <code>async</code>","text":"<pre><code>recompose()\n</code></pre> <p>Recompose the widget.</p> <p>Recomposing will remove children and call <code>self.compose</code> again to remount.</p>"},{"location":"api/app/#textual.app.App.refresh","title":"refresh","text":"<pre><code>refresh(*, repaint=True, layout=False, recompose=False)\n</code></pre> <p>Refresh the entire screen.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Repaint the widget (will call render() again).</p> <code>True</code> <code>bool</code> <p>Also layout widgets in the view.</p> <code>False</code> <code>bool</code> <p>Re-compose the widget (will remove and re-mount children).</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>App</code> instance.</p>"},{"location":"api/app/#textual.app.App.refresh(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/app/#textual.app.App.refresh(layout)","title":"<code>layout</code>","text":""},{"location":"api/app/#textual.app.App.refresh(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/app/#textual.app.App.refresh_css","title":"refresh_css","text":"<pre><code>refresh_css(animate=True)\n</code></pre> <p>Refresh CSS.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Also execute CSS animations.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.refresh_css(animate)","title":"<code>animate</code>","text":""},{"location":"api/app/#textual.app.App.remove_mode","title":"remove_mode","text":"<pre><code>remove_mode(mode)\n</code></pre> <p>Removes a mode from the app.</p> <p>Screens that are running in the stack of that mode are scheduled for pruning.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The mode to remove. It can't be the active mode.</p> required <p>Raises:</p> Type Description <code>ActiveModeError</code> <p>If trying to remove the active mode.</p> <code>UnknownModeError</code> <p>If trying to remove an unknown mode.</p>"},{"location":"api/app/#textual.app.App.remove_mode(mode)","title":"<code>mode</code>","text":""},{"location":"api/app/#textual.app.App.render","title":"render","text":"<pre><code>render()\n</code></pre> <p>Render method, inherited from widget, to render the screen's background.</p> <p>May be overridden to customize background visuals.</p>"},{"location":"api/app/#textual.app.App.run","title":"run","text":"<pre><code>run(\n    *,\n    headless=False,\n    inline=False,\n    inline_no_clear=False,\n    mouse=True,\n    size=None,\n    auto_pilot=None\n)\n</code></pre> <p>Run the app.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Run in headless mode (no output).</p> <code>False</code> <code>bool</code> <p>Run the app inline (under the prompt).</p> <code>False</code> <code>bool</code> <p>Don't clear the app output when exiting an inline app.</p> <code>False</code> <code>bool</code> <p>Enable mouse support.</p> <code>True</code> <code>tuple[int, int] | None</code> <p>Force terminal size to <code>(WIDTH, HEIGHT)</code>, or None to auto-detect.</p> <code>None</code> <code>AutopilotCallbackType | None</code> <p>An auto pilot coroutine.</p> <code>None</code> <p>Returns:</p> Type Description <code>ReturnType | None</code> <p>App return value.</p>"},{"location":"api/app/#textual.app.App.run(headless)","title":"<code>headless</code>","text":""},{"location":"api/app/#textual.app.App.run(inline)","title":"<code>inline</code>","text":""},{"location":"api/app/#textual.app.App.run(inline_no_clear)","title":"<code>inline_no_clear</code>","text":""},{"location":"api/app/#textual.app.App.run(mouse)","title":"<code>mouse</code>","text":""},{"location":"api/app/#textual.app.App.run(size)","title":"<code>size</code>","text":""},{"location":"api/app/#textual.app.App.run(auto_pilot)","title":"<code>auto_pilot</code>","text":""},{"location":"api/app/#textual.app.App.run_action","title":"run_action  <code>async</code>","text":"<pre><code>run_action(action, default_namespace=None)\n</code></pre> <p>Perform an action.</p> <p>Actions are typically associated with key bindings, where you wouldn't need to call this method manually.</p> <p>Parameters:</p> Name Type Description Default <code>str | ActionParseResult</code> <p>Action encoded in a string.</p> required <code>DOMNode | None</code> <p>Namespace to use if not provided in the action, or None to use app.</p> <code>None</code> <p>Returns:</p> Type Description <code>bool</code> <p>True if the event has been handled.</p>"},{"location":"api/app/#textual.app.App.run_action(action)","title":"<code>action</code>","text":""},{"location":"api/app/#textual.app.App.run_action(default_namespace)","title":"<code>default_namespace</code>","text":""},{"location":"api/app/#textual.app.App.run_async","title":"run_async  <code>async</code>","text":"<pre><code>run_async(\n    *,\n    headless=False,\n    inline=False,\n    inline_no_clear=False,\n    mouse=True,\n    size=None,\n    auto_pilot=None\n)\n</code></pre> <p>Run the app asynchronously.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Run in headless mode (no output).</p> <code>False</code> <code>bool</code> <p>Run the app inline (under the prompt).</p> <code>False</code> <code>bool</code> <p>Don't clear the app output when exiting an inline app.</p> <code>False</code> <code>bool</code> <p>Enable mouse support.</p> <code>True</code> <code>tuple[int, int] | None</code> <p>Force terminal size to <code>(WIDTH, HEIGHT)</code>, or None to auto-detect.</p> <code>None</code> <code>AutopilotCallbackType | None</code> <p>An autopilot coroutine.</p> <code>None</code> <p>Returns:</p> Type Description <code>ReturnType | None</code> <p>App return value.</p>"},{"location":"api/app/#textual.app.App.run_async(headless)","title":"<code>headless</code>","text":""},{"location":"api/app/#textual.app.App.run_async(inline)","title":"<code>inline</code>","text":""},{"location":"api/app/#textual.app.App.run_async(inline_no_clear)","title":"<code>inline_no_clear</code>","text":""},{"location":"api/app/#textual.app.App.run_async(mouse)","title":"<code>mouse</code>","text":""},{"location":"api/app/#textual.app.App.run_async(size)","title":"<code>size</code>","text":""},{"location":"api/app/#textual.app.App.run_async(auto_pilot)","title":"<code>auto_pilot</code>","text":""},{"location":"api/app/#textual.app.App.run_test","title":"run_test  <code>async</code>","text":"<pre><code>run_test(\n    *,\n    headless=True,\n    size=(80, 24),\n    tooltips=False,\n    notifications=False,\n    message_hook=None\n)\n</code></pre> <p>An asynchronous context manager for testing apps.</p> <p>Tip</p> <p>See the guide for testing Textual apps.</p> <p>Use this to run your app in \"headless\" mode (no output) and drive the app via a Pilot object.</p> <p>Example:</p> <pre><code>```python\nasync with app.run_test() as pilot:\n    await pilot.click(\"#Button.ok\")\n    assert ...\n```\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Run in headless mode (no output or input).</p> <code>True</code> <code>tuple[int, int] | None</code> <p>Force terminal size to <code>(WIDTH, HEIGHT)</code>, or None to auto-detect.</p> <code>(80, 24)</code> <code>bool</code> <p>Enable tooltips when testing.</p> <code>False</code> <code>bool</code> <p>Enable notifications when testing.</p> <code>False</code> <code>Callable[[Message], None] | None</code> <p>An optional callback that will be called each time any message arrives at any message pump in the app.</p> <code>None</code>"},{"location":"api/app/#textual.app.App.run_test(headless)","title":"<code>headless</code>","text":""},{"location":"api/app/#textual.app.App.run_test(size)","title":"<code>size</code>","text":""},{"location":"api/app/#textual.app.App.run_test(tooltips)","title":"<code>tooltips</code>","text":""},{"location":"api/app/#textual.app.App.run_test(notifications)","title":"<code>notifications</code>","text":""},{"location":"api/app/#textual.app.App.run_test(message_hook)","title":"<code>message_hook</code>","text":""},{"location":"api/app/#textual.app.App.save_screenshot","title":"save_screenshot","text":"<pre><code>save_screenshot(filename=None, path=None, time_format=None)\n</code></pre> <p>Save an SVG screenshot of the current screen.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Filename of SVG screenshot, or None to auto-generate a filename with the date and time.</p> <code>None</code> <code>str | None</code> <p>Path to directory for output. Defaults to current working directory.</p> <code>None</code> <code>str | None</code> <p>Date and time format to use if filename is None. Defaults to a format like ISO 8601 with some reserved characters replaced with underscores.</p> <code>None</code> <p>Returns:</p> Type Description <code>str</code> <p>Filename of screenshot.</p>"},{"location":"api/app/#textual.app.App.save_screenshot(filename)","title":"<code>filename</code>","text":""},{"location":"api/app/#textual.app.App.save_screenshot(path)","title":"<code>path</code>","text":""},{"location":"api/app/#textual.app.App.save_screenshot(time_format)","title":"<code>time_format</code>","text":""},{"location":"api/app/#textual.app.App.set_focus","title":"set_focus","text":"<pre><code>set_focus(widget, scroll_visible=True)\n</code></pre> <p>Focus (or unfocus) a widget. A focused widget will receive key events first.</p> <p>Parameters:</p> Name Type Description Default <code>Widget | None</code> <p>Widget to focus.</p> required <code>bool</code> <p>Scroll widget in to view.</p> <code>True</code>"},{"location":"api/app/#textual.app.App.set_focus(widget)","title":"<code>widget</code>","text":""},{"location":"api/app/#textual.app.App.set_focus(scroll_visible)","title":"<code>scroll_visible</code>","text":""},{"location":"api/app/#textual.app.App.simulate_key","title":"simulate_key","text":"<pre><code>simulate_key(key)\n</code></pre> <p>Simulate a key press.</p> <p>This will perform the same action as if the user had pressed the key.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Key to simulate. May also be the name of a key, e.g. \"space\".</p> required"},{"location":"api/app/#textual.app.App.simulate_key(key)","title":"<code>key</code>","text":""},{"location":"api/app/#textual.app.App.stop_animation","title":"stop_animation  <code>async</code>","text":"<pre><code>stop_animation(attribute, complete=True)\n</code></pre> <p>Stop an animation on an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute whose animation should be stopped.</p> required <code>bool</code> <p>Should the animation be set to its final value?</p> <code>True</code> Note <p>If there is no animation scheduled or running, this is a no-op.</p>"},{"location":"api/app/#textual.app.App.stop_animation(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/app/#textual.app.App.stop_animation(complete)","title":"<code>complete</code>","text":""},{"location":"api/app/#textual.app.App.suspend","title":"suspend","text":"<pre><code>suspend()\n</code></pre> <p>A context manager that temporarily suspends the app.</p> <p>While inside the <code>with</code> block, the app will stop reading input and emitting output. Other applications will have full control of the terminal, configured as it was before the app started running. When the <code>with</code> block ends, the application will start reading input and emitting output again.</p> Example <pre><code>with self.suspend():\n    os.system(\"emacs -nw\")\n</code></pre> <p>Raises:</p> Type Description <code>SuspendNotSupported</code> <p>If the environment doesn't support suspending.</p> <p>Note</p> <p>Suspending the application is currently only supported on Unix-like operating systems and Microsoft Windows. Suspending is not supported in Textual Web.</p>"},{"location":"api/app/#textual.app.App.switch_mode","title":"switch_mode","text":"<pre><code>switch_mode(mode)\n</code></pre> <p>Switch to a given mode.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The mode to switch to.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An optionally awaitable object which waits for the screen associated with the mode to be mounted.</p> <p>Raises:</p> Type Description <code>UnknownModeError</code> <p>If trying to switch to an unknown mode.</p>"},{"location":"api/app/#textual.app.App.switch_mode(mode)","title":"<code>mode</code>","text":""},{"location":"api/app/#textual.app.App.switch_screen","title":"switch_screen","text":"<pre><code>switch_screen(screen)\n</code></pre> <p>Switch to another screen by replacing the top of the screen stack with a new screen.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>Either a Screen object or screen name (the <code>name</code> argument when installed).</p> required"},{"location":"api/app/#textual.app.App.switch_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.uninstall_screen","title":"uninstall_screen","text":"<pre><code>uninstall_screen(screen)\n</code></pre> <p>Uninstall a screen.</p> <p>If the screen was not previously installed, then this method is a null-op. Uninstalling a screen allows Textual to delete it when it is popped or switched. Note that uninstalling a screen is only required if you have previously installed it with install_screen. Textual will also uninstall screens automatically on exit.</p> <p>Parameters:</p> Name Type Description Default <code>Screen | str</code> <p>The screen to uninstall or the name of an installed screen.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>The name of the screen that was uninstalled, or None if no screen was uninstalled.</p>"},{"location":"api/app/#textual.app.App.uninstall_screen(screen)","title":"<code>screen</code>","text":""},{"location":"api/app/#textual.app.App.update_styles","title":"update_styles","text":"<pre><code>update_styles(node)\n</code></pre> <p>Immediately update the styles of this node and all descendant nodes.</p> <p>Should be called whenever CSS classes / pseudo classes change. For example, when you hover over a button, the :hover pseudo class will be added, and this method is called to apply the corresponding :hover styles.</p>"},{"location":"api/app/#textual.app.App.validate_sub_title","title":"validate_sub_title","text":"<pre><code>validate_sub_title(sub_title)\n</code></pre> <p>Make sure the subtitle is set to a string.</p>"},{"location":"api/app/#textual.app.App.validate_title","title":"validate_title","text":"<pre><code>validate_title(title)\n</code></pre> <p>Make sure the title is set to a string.</p>"},{"location":"api/app/#textual.app.App.watch_dark","title":"watch_dark","text":"<pre><code>watch_dark(dark)\n</code></pre> <p>Watches the dark bool.</p> <p>This method handles the transition between light and dark mode when you change the dark attribute.</p>"},{"location":"api/app/#textual.app.AppError","title":"AppError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for general App related exceptions.</p>"},{"location":"api/app/#textual.app.InvalidModeError","title":"InvalidModeError","text":"<p>               Bases: <code>ModeError</code></p> <p>Raised if there is an issue with a mode name.</p>"},{"location":"api/app/#textual.app.ModeError","title":"ModeError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for exceptions related to modes.</p>"},{"location":"api/app/#textual.app.ScreenError","title":"ScreenError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for exceptions that relate to screens.</p>"},{"location":"api/app/#textual.app.ScreenStackError","title":"ScreenStackError","text":"<p>               Bases: <code>ScreenError</code></p> <p>Raised when trying to manipulate the screen stack incorrectly.</p>"},{"location":"api/app/#textual.app.SuspendNotSupported","title":"SuspendNotSupported","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if suspending the application is not supported.</p> <p>This exception is raised if <code>App.suspend</code> is called while the application is running in an environment where this isn't supported.</p>"},{"location":"api/app/#textual.app.SystemCommand","title":"SystemCommand","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Defines a system command used in the command palette (yielded from <code>get_system_commands</code>).</p>"},{"location":"api/app/#textual.app.SystemCommand.callback","title":"callback  <code>instance-attribute</code>","text":"<pre><code>callback\n</code></pre> <p>A callback to invoke when the command is selected.</p>"},{"location":"api/app/#textual.app.SystemCommand.discover","title":"discover  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>discover = True\n</code></pre> <p>Should the command show when the search is empty?</p>"},{"location":"api/app/#textual.app.SystemCommand.help","title":"help  <code>instance-attribute</code>","text":"<pre><code>help\n</code></pre> <p>Additional help text, shown under the title.</p>"},{"location":"api/app/#textual.app.SystemCommand.title","title":"title  <code>instance-attribute</code>","text":"<pre><code>title\n</code></pre> <p>The title of the command (used in search).</p>"},{"location":"api/app/#textual.app.UnknownModeError","title":"UnknownModeError","text":"<p>               Bases: <code>ModeError</code></p> <p>Raised when attempting to use a mode that is not known.</p>"},{"location":"api/app/#textual.app.get_system_commands_provider","title":"get_system_commands_provider","text":"<pre><code>get_system_commands_provider()\n</code></pre> <p>Callable to lazy load the system commands.</p> <p>Returns:</p> Type Description <code>type[SystemCommandsProvider]</code> <p>System commands class.</p>"},{"location":"api/await_complete/","title":"textual.await_complete","text":"<p>This module contains the <code>AwaitComplete</code> class. An <code>AwaitComplete</code> object is returned by methods that do work in the background. You can await this object if you need to know when that work has completed. Or you can ignore it, and Textual will automatically await the work before handling the next message.</p> <p>Note</p> <p>You are unlikely to need to explicitly create these objects yourself.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete","title":"AwaitComplete","text":"<pre><code>AwaitComplete(*awaitables, pre_await=None)\n</code></pre> <p>An 'optionally-awaitable' object which runs one or more coroutines (or other awaitables) concurrently.</p> <p>Parameters:</p> Name Type Description Default <code>Awaitable</code> <p>One or more awaitables to run concurrently.</p> <code>()</code>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete(awaitables)","title":"<code>awaitables</code>","text":""},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.exception","title":"exception  <code>property</code>","text":"<pre><code>exception\n</code></pre> <p>An exception if the awaitables failed.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.is_done","title":"is_done  <code>property</code>","text":"<pre><code>is_done\n</code></pre> <p><code>True</code> if the task has completed.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.call_next","title":"call_next","text":"<pre><code>call_next(node)\n</code></pre> <p>Await after the next message.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>The node which created the object.</p> required"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.call_next(node)","title":"<code>node</code>","text":""},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.nothing","title":"nothing  <code>classmethod</code>","text":"<pre><code>nothing()\n</code></pre> <p>Returns an already completed instance of AwaitComplete.</p>"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.set_pre_await_callback","title":"set_pre_await_callback","text":"<pre><code>set_pre_await_callback(pre_await)\n</code></pre> <p>Set a callback to run prior to awaiting.</p> <p>This is used by Textual, mainly to check for possible deadlocks. You are unlikely to need to call this method in an app.</p> <p>Parameters:</p> Name Type Description Default <code>CallbackType | None</code> <p>A callback.</p> required"},{"location":"api/await_complete/#textual.await_complete.AwaitComplete.set_pre_await_callback(pre_await)","title":"<code>pre_await</code>","text":""},{"location":"api/await_remove/","title":"textual.await_remove","text":"<p>This module contains the <code>AwaitRemove</code> class. An <code>AwaitRemove</code> object is returned by <code>Widget.remove()</code> and other methods which remove widgets. You can await the return value if you need to know exactly when the widget(s) have been removed. Or you can ignore it and Textual will wait for the widgets to be removed before handling the next message.</p> <p>Note</p> <p>You are unlikely to need to explicitly create these objects yourself.</p> <p>An optionally awaitable object returned by methods that remove widgets.</p>"},{"location":"api/await_remove/#textual.await_remove.AwaitRemove","title":"AwaitRemove","text":"<pre><code>AwaitRemove(tasks, post_remove=None)\n</code></pre> <p>An awaitable that waits for nodes to be removed.</p>"},{"location":"api/binding/","title":"textual.binding","text":"<p>This module contains the <code>Binding</code> class and related objects.</p> <p>See bindings in the guide for details.</p>"},{"location":"api/binding/#textual.binding.ActiveBinding","title":"ActiveBinding","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Information about an active binding (returned from active_bindings).</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.binding","title":"binding  <code>instance-attribute</code>","text":"<pre><code>binding\n</code></pre> <p>The binding information.</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.enabled","title":"enabled  <code>instance-attribute</code>","text":"<pre><code>enabled\n</code></pre> <p>Is the binding enabled? (enabled bindings are typically rendered dim)</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node\n</code></pre> <p>The node where the binding is defined.</p>"},{"location":"api/binding/#textual.binding.ActiveBinding.tooltip","title":"tooltip  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>tooltip = ''\n</code></pre> <p>Optional tooltip shown in Footer.</p>"},{"location":"api/binding/#textual.binding.Binding","title":"Binding  <code>dataclass</code>","text":"<pre><code>Binding(\n    key,\n    action,\n    description=\"\",\n    show=True,\n    key_display=None,\n    priority=False,\n    tooltip=\"\",\n)\n</code></pre> <p>The configuration of a key binding.</p>"},{"location":"api/binding/#textual.binding.Binding.action","title":"action  <code>instance-attribute</code>","text":"<pre><code>action\n</code></pre> <p>Action to bind to.</p>"},{"location":"api/binding/#textual.binding.Binding.description","title":"description  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>description = ''\n</code></pre> <p>Description of action.</p>"},{"location":"api/binding/#textual.binding.Binding.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key\n</code></pre> <p>Key to bind. This can also be a comma-separated list of keys to map multiple keys to a single action.</p>"},{"location":"api/binding/#textual.binding.Binding.key_display","title":"key_display  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>key_display = None\n</code></pre> <p>How the key should be shown in footer.</p>"},{"location":"api/binding/#textual.binding.Binding.priority","title":"priority  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>priority = False\n</code></pre> <p>Enable priority binding for this key.</p>"},{"location":"api/binding/#textual.binding.Binding.show","title":"show  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show = True\n</code></pre> <p>Show the action in Footer, or False to hide.</p>"},{"location":"api/binding/#textual.binding.Binding.tooltip","title":"tooltip  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>tooltip = ''\n</code></pre> <p>Optional tooltip to show in footer.</p>"},{"location":"api/binding/#textual.binding.Binding.parse_key","title":"parse_key","text":"<pre><code>parse_key()\n</code></pre> <p>Parse a key in to a list of modifiers, and the actual key.</p> <p>Returns:</p> Type Description <code>tuple[list[str], str]</code> <p>A tuple of (MODIFIER LIST, KEY).</p>"},{"location":"api/binding/#textual.binding.BindingError","title":"BindingError","text":"<p>               Bases: <code>Exception</code></p> <p>A binding related error.</p>"},{"location":"api/binding/#textual.binding.BindingsMap","title":"BindingsMap","text":"<pre><code>BindingsMap(bindings=None)\n</code></pre> <p>Manage a set of bindings.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[BindingType] | None</code> <p>An optional set of initial bindings.</p> <code>None</code> Note <p>The iterable of bindings can contain either a <code>Binding</code> instance, or a tuple of 3 values mapping to the first three properties of a <code>Binding</code>.</p>"},{"location":"api/binding/#textual.binding.BindingsMap(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.shown_keys","title":"shown_keys  <code>property</code>","text":"<pre><code>shown_keys\n</code></pre> <p>A list of bindings for shown keys.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.bind","title":"bind","text":"<pre><code>bind(\n    keys,\n    action,\n    description=\"\",\n    show=True,\n    key_display=None,\n    priority=False,\n)\n</code></pre> <p>Bind keys to an action.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The keys to bind. Can be a comma-separated list of keys.</p> required <code>str</code> <p>The action to bind the keys to.</p> required <code>str</code> <p>An optional description for the binding.</p> <code>''</code> <code>bool</code> <p>A flag to say if the binding should appear in the footer.</p> <code>True</code> <code>str | None</code> <p>Optional string to display in the footer for the key.</p> <code>None</code> <code>bool</code> <p>Is this a priority binding, checked form app down to focused widget?</p> <code>False</code>"},{"location":"api/binding/#textual.binding.BindingsMap.bind(keys)","title":"<code>keys</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(action)","title":"<code>action</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(description)","title":"<code>description</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(show)","title":"<code>show</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(key_display)","title":"<code>key_display</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.bind(priority)","title":"<code>priority</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.copy","title":"copy","text":"<pre><code>copy()\n</code></pre> <p>Return a copy of this instance.</p> Return <p>New bindings object.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.from_keys","title":"from_keys  <code>classmethod</code>","text":"<pre><code>from_keys(keys)\n</code></pre> <p>Construct a BindingsMap from a dict of keys and bindings.</p> <p>Parameters:</p> Name Type Description Default <code>dict[str, list[Binding]]</code> <p>A dict that maps a key on to a list of <code>Binding</code> objects.</p> required <p>Returns:</p> Type Description <code>BindingsMap</code> <p>New <code>BindingsMap</code></p>"},{"location":"api/binding/#textual.binding.BindingsMap.from_keys(keys)","title":"<code>keys</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.get_bindings_for_key","title":"get_bindings_for_key","text":"<pre><code>get_bindings_for_key(key)\n</code></pre> <p>Get a list of bindings for a given key.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Key to look up.</p> required <p>Raises:</p> Type Description <code>NoBinding</code> <p>If the binding does not exist.</p> <p>Returns:</p> Type Description <code>list[Binding]</code> <p>A list of bindings associated with the key.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.get_bindings_for_key(key)","title":"<code>key</code>","text":""},{"location":"api/binding/#textual.binding.BindingsMap.merge","title":"merge  <code>classmethod</code>","text":"<pre><code>merge(bindings)\n</code></pre> <p>Merge a bindings.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[BindingsMap]</code> <p>A number of bindings.</p> required <p>Returns:</p> Type Description <code>BindingsMap</code> <p>New <code>BindingsMap</code>.</p>"},{"location":"api/binding/#textual.binding.BindingsMap.merge(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/binding/#textual.binding.InvalidBinding","title":"InvalidBinding","text":"<p>               Bases: <code>Exception</code></p> <p>Binding key is in an invalid format.</p>"},{"location":"api/binding/#textual.binding.NoBinding","title":"NoBinding","text":"<p>               Bases: <code>Exception</code></p> <p>A binding was not found.</p>"},{"location":"api/cache/","title":"textual.cache","text":"<p>Cache classes are dict-like containers used to avoid recalculating expensive operations such as rendering.</p> <p>You can also use them in your own apps for similar reasons.</p>"},{"location":"api/cache/#textual.cache.FIFOCache","title":"FIFOCache","text":"<pre><code>FIFOCache(maxsize)\n</code></pre> <p>               Bases: <code>Generic[CacheKey, CacheValue]</code></p> <p>A simple cache that discards the first added key when full (First In First Out).</p> <p>This has a lower overhead than LRUCache, but won't manage a working set as efficiently. It is most suitable for a cache with a relatively low maximum size that is not expected to do many lookups.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Maximum size of cache before discarding items.</p> required"},{"location":"api/cache/#textual.cache.FIFOCache(maxsize)","title":"<code>maxsize</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the cache.</p>"},{"location":"api/cache/#textual.cache.FIFOCache.get","title":"get","text":"<pre><code>get(key: CacheKey) -&gt; CacheValue | None\n</code></pre><pre><code>get(\n    key: CacheKey, default: DefaultValue\n) -&gt; CacheValue | DefaultValue\n</code></pre> <pre><code>get(key, default=None)\n</code></pre> <p>Get a value from the cache, or return a default if the key is not present.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key</p> required <code>DefaultValue | None</code> <p>Default to return if key is not present.</p> <code>None</code> <p>Returns:</p> Type Description <code>CacheValue | DefaultValue | None</code> <p>Either the value or a default.</p>"},{"location":"api/cache/#textual.cache.FIFOCache.get(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.get(default)","title":"<code>default</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.keys","title":"keys","text":"<pre><code>keys()\n</code></pre> <p>Get cache keys.</p>"},{"location":"api/cache/#textual.cache.FIFOCache.set","title":"set","text":"<pre><code>set(key, value)\n</code></pre> <p>Set a value.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key.</p> required <code>CacheValue</code> <p>Value.</p> required"},{"location":"api/cache/#textual.cache.FIFOCache.set(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.FIFOCache.set(value)","title":"<code>value</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache","title":"LRUCache","text":"<pre><code>LRUCache(maxsize)\n</code></pre> <p>               Bases: <code>Generic[CacheKey, CacheValue]</code></p> <p>A dictionary-like container with a maximum size.</p> <p>If an additional item is added when the LRUCache is full, the least recently used key is discarded to make room for the new item.</p> <p>The implementation is similar to functools.lru_cache, which uses a (doubly) linked list to keep track of the most recently used items.</p> <p>Each entry is stored as [PREV, NEXT, KEY, VALUE] where PREV is a reference to the previous entry, and NEXT is a reference to the next value.</p> <p>Note that stdlib's @lru_cache is implemented in C and faster! It's best to use @lru_cache where you are caching things that are fairly quick and called many times. Use LRUCache where you want increased flexibility and you are caching slow operations where the overhead of the cache is a small fraction of the total processing time.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Maximum size of the cache, before old items are discarded.</p> required"},{"location":"api/cache/#textual.cache.LRUCache(maxsize)","title":"<code>maxsize</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.maxsize","title":"maxsize  <code>property</code> <code>writable</code>","text":"<pre><code>maxsize\n</code></pre>"},{"location":"api/cache/#textual.cache.LRUCache.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the cache.</p>"},{"location":"api/cache/#textual.cache.LRUCache.discard","title":"discard","text":"<pre><code>discard(key)\n</code></pre> <p>Discard item in cache from key.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Cache key.</p> required"},{"location":"api/cache/#textual.cache.LRUCache.discard(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.get","title":"get","text":"<pre><code>get(key: CacheKey) -&gt; CacheValue | None\n</code></pre><pre><code>get(\n    key: CacheKey, default: DefaultValue\n) -&gt; CacheValue | DefaultValue\n</code></pre> <pre><code>get(key, default=None)\n</code></pre> <p>Get a value from the cache, or return a default if the key is not present.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key</p> required <code>DefaultValue | None</code> <p>Default to return if key is not present.</p> <code>None</code> <p>Returns:</p> Type Description <code>CacheValue | DefaultValue | None</code> <p>Either the value or a default.</p>"},{"location":"api/cache/#textual.cache.LRUCache.get(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.get(default)","title":"<code>default</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.grow","title":"grow","text":"<pre><code>grow(maxsize)\n</code></pre> <p>Grow the maximum size to at least <code>maxsize</code> elements.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New maximum size.</p> required"},{"location":"api/cache/#textual.cache.LRUCache.grow(maxsize)","title":"<code>maxsize</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.keys","title":"keys","text":"<pre><code>keys()\n</code></pre> <p>Get cache keys.</p>"},{"location":"api/cache/#textual.cache.LRUCache.set","title":"set","text":"<pre><code>set(key, value)\n</code></pre> <p>Set a value.</p> <p>Parameters:</p> Name Type Description Default <code>CacheKey</code> <p>Key.</p> required <code>CacheValue</code> <p>Value.</p> required"},{"location":"api/cache/#textual.cache.LRUCache.set(key)","title":"<code>key</code>","text":""},{"location":"api/cache/#textual.cache.LRUCache.set(value)","title":"<code>value</code>","text":""},{"location":"api/color/","title":"textual.color","text":"<p>This module contains a powerful Color class which Textual uses to manipulate colors.</p>"},{"location":"api/color/#textual.color--named-colors","title":"Named colors","text":"<p>The following named colors are used by the parse method.</p> <p> colors \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503hex\u00a0\u00a0\u00a0\u00a0\u2503RGB\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503Color\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\"aliceblue\"\u2502#F0F8FF\u2502rgb(240,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"ansi_black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_blue\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_black\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_green\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_bright_magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_bright_white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_cyan\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"ansi_magenta\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_red\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_white\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"ansi_yellow\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"antiquewhite\"\u2502#FAEBD7\u2502rgb(250,\u00a0235,\u00a0215)\u2502\u2502 \u2502\"aqua\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"aquamarine\"\u2502#7FFFD4\u2502rgb(127,\u00a0255,\u00a0212)\u2502\u2502 \u2502\"azure\"\u2502#F0FFFF\u2502rgb(240,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"beige\"\u2502#F5F5DC\u2502rgb(245,\u00a0245,\u00a0220)\u2502\u2502 \u2502\"bisque\"\u2502#FFE4C4\u2502rgb(255,\u00a0228,\u00a0196)\u2502\u2502 \u2502\"black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"blanchedalmond\"\u2502#FFEBCD\u2502rgb(255,\u00a0235,\u00a0205)\u2502\u2502 \u2502\"blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"blueviolet\"\u2502#8A2BE2\u2502rgb(138,\u00a043,\u00a0226)\u2502\u2502 \u2502\"brown\"\u2502#A52A2A\u2502rgb(165,\u00a042,\u00a042)\u2502\u2502 \u2502\"burlywood\"\u2502#DEB887\u2502rgb(222,\u00a0184,\u00a0135)\u2502\u2502 \u2502\"cadetblue\"\u2502#5F9EA0\u2502rgb(95,\u00a0158,\u00a0160)\u2502\u2502 \u2502\"chartreuse\"\u2502#7FFF00\u2502rgb(127,\u00a0255,\u00a00)\u2502\u2502 \u2502\"chocolate\"\u2502#D2691E\u2502rgb(210,\u00a0105,\u00a030)\u2502\u2502 \u2502\"coral\"\u2502#FF7F50\u2502rgb(255,\u00a0127,\u00a080)\u2502\u2502 \u2502\"cornflowerblue\"\u2502#6495ED\u2502rgb(100,\u00a0149,\u00a0237)\u2502\u2502 \u2502\"cornsilk\"\u2502#FFF8DC\u2502rgb(255,\u00a0248,\u00a0220)\u2502\u2502 \u2502\"crimson\"\u2502#DC143C\u2502rgb(220,\u00a020,\u00a060)\u2502\u2502 \u2502\"cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"darkblue\"\u2502#00008B\u2502rgb(0,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkcyan\"\u2502#008B8B\u2502rgb(0,\u00a0139,\u00a0139)\u2502\u2502 \u2502\"darkgoldenrod\"\u2502#B8860B\u2502rgb(184,\u00a0134,\u00a011)\u2502\u2502 \u2502\"darkgray\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkgreen\"\u2502#006400\u2502rgb(0,\u00a0100,\u00a00)\u2502\u2502 \u2502\"darkgrey\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkkhaki\"\u2502#BDB76B\u2502rgb(189,\u00a0183,\u00a0107)\u2502\u2502 \u2502\"darkmagenta\"\u2502#8B008B\u2502rgb(139,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkolivegreen\"\u2502#556B2F\u2502rgb(85,\u00a0107,\u00a047)\u2502\u2502 \u2502\"darkorange\"\u2502#FF8C00\u2502rgb(255,\u00a0140,\u00a00)\u2502\u2502 \u2502\"darkorchid\"\u2502#9932CC\u2502rgb(153,\u00a050,\u00a0204)\u2502\u2502 \u2502\"darkred\"\u2502#8B0000\u2502rgb(139,\u00a00,\u00a00)\u2502\u2502 \u2502\"darksalmon\"\u2502#E9967A\u2502rgb(233,\u00a0150,\u00a0122)\u2502\u2502 \u2502\"darkseagreen\"\u2502#8FBC8F\u2502rgb(143,\u00a0188,\u00a0143)\u2502\u2502 \u2502\"darkslateblue\"\u2502#483D8B\u2502rgb(72,\u00a061,\u00a0139)\u2502\u2502 \u2502\"darkslategray\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkslategrey\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkturquoise\"\u2502#00CED1\u2502rgb(0,\u00a0206,\u00a0209)\u2502\u2502 \u2502\"darkviolet\"\u2502#9400D3\u2502rgb(148,\u00a00,\u00a0211)\u2502\u2502 \u2502\"deeppink\"\u2502#FF1493\u2502rgb(255,\u00a020,\u00a0147)\u2502\u2502 \u2502\"deepskyblue\"\u2502#00BFFF\u2502rgb(0,\u00a0191,\u00a0255)\u2502\u2502 \u2502\"dimgray\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dimgrey\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dodgerblue\"\u2502#1E90FF\u2502rgb(30,\u00a0144,\u00a0255)\u2502\u2502 \u2502\"firebrick\"\u2502#B22222\u2502rgb(178,\u00a034,\u00a034)\u2502\u2502 \u2502\"floralwhite\"\u2502#FFFAF0\u2502rgb(255,\u00a0250,\u00a0240)\u2502\u2502 \u2502\"forestgreen\"\u2502#228B22\u2502rgb(34,\u00a0139,\u00a034)\u2502\u2502 \u2502\"fuchsia\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"gainsboro\"\u2502#DCDCDC\u2502rgb(220,\u00a0220,\u00a0220)\u2502\u2502 \u2502\"ghostwhite\"\u2502#F8F8FF\u2502rgb(248,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"gold\"\u2502#FFD700\u2502rgb(255,\u00a0215,\u00a00)\u2502\u2502 \u2502\"goldenrod\"\u2502#DAA520\u2502rgb(218,\u00a0165,\u00a032)\u2502\u2502 \u2502\"gray\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"greenyellow\"\u2502#ADFF2F\u2502rgb(173,\u00a0255,\u00a047)\u2502\u2502 \u2502\"grey\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"honeydew\"\u2502#F0FFF0\u2502rgb(240,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"hotpink\"\u2502#FF69B4\u2502rgb(255,\u00a0105,\u00a0180)\u2502\u2502 \u2502\"indianred\"\u2502#CD5C5C\u2502rgb(205,\u00a092,\u00a092)\u2502\u2502 \u2502\"indigo\"\u2502#4B0082\u2502rgb(75,\u00a00,\u00a0130)\u2502\u2502 \u2502\"ivory\"\u2502#FFFFF0\u2502rgb(255,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"khaki\"\u2502#F0E68C\u2502rgb(240,\u00a0230,\u00a0140)\u2502\u2502 \u2502\"lavender\"\u2502#E6E6FA\u2502rgb(230,\u00a0230,\u00a0250)\u2502\u2502 \u2502\"lavenderblush\"\u2502#FFF0F5\u2502rgb(255,\u00a0240,\u00a0245)\u2502\u2502 \u2502\"lawngreen\"\u2502#7CFC00\u2502rgb(124,\u00a0252,\u00a00)\u2502\u2502 \u2502\"lemonchiffon\"\u2502#FFFACD\u2502rgb(255,\u00a0250,\u00a0205)\u2502\u2502 \u2502\"lightblue\"\u2502#ADD8E6\u2502rgb(173,\u00a0216,\u00a0230)\u2502\u2502 \u2502\"lightcoral\"\u2502#F08080\u2502rgb(240,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"lightcyan\"\u2502#E0FFFF\u2502rgb(224,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"lightgoldenrodyellow\"\u2502#FAFAD2\u2502rgb(250,\u00a0250,\u00a0210)\u2502\u2502 \u2502\"lightgray\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightgreen\"\u2502#90EE90\u2502rgb(144,\u00a0238,\u00a0144)\u2502\u2502 \u2502\"lightgrey\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightpink\"\u2502#FFB6C1\u2502rgb(255,\u00a0182,\u00a0193)\u2502\u2502 \u2502\"lightsalmon\"\u2502#FFA07A\u2502rgb(255,\u00a0160,\u00a0122)\u2502\u2502 \u2502\"lightseagreen\"\u2502#20B2AA\u2502rgb(32,\u00a0178,\u00a0170)\u2502\u2502 \u2502\"lightskyblue\"\u2502#87CEFA\u2502rgb(135,\u00a0206,\u00a0250)\u2502\u2502 \u2502\"lightslategray\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightslategrey\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightsteelblue\"\u2502#B0C4DE\u2502rgb(176,\u00a0196,\u00a0222)\u2502\u2502 \u2502\"lightyellow\"\u2502#FFFFE0\u2502rgb(255,\u00a0255,\u00a0224)\u2502\u2502 \u2502\"lime\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"limegreen\"\u2502#32CD32\u2502rgb(50,\u00a0205,\u00a050)\u2502\u2502 \u2502\"linen\"\u2502#FAF0E6\u2502rgb(250,\u00a0240,\u00a0230)\u2502\u2502 \u2502\"magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"maroon\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"mediumaquamarine\"\u2502#66CDAA\u2502rgb(102,\u00a0205,\u00a0170)\u2502\u2502 \u2502\"mediumblue\"\u2502#0000CD\u2502rgb(0,\u00a00,\u00a0205)\u2502\u2502 \u2502\"mediumorchid\"\u2502#BA55D3\u2502rgb(186,\u00a085,\u00a0211)\u2502\u2502 \u2502\"mediumpurple\"\u2502#9370DB\u2502rgb(147,\u00a0112,\u00a0219)\u2502\u2502 \u2502\"mediumseagreen\"\u2502#3CB371\u2502rgb(60,\u00a0179,\u00a0113)\u2502\u2502 \u2502\"mediumslateblue\"\u2502#7B68EE\u2502rgb(123,\u00a0104,\u00a0238)\u2502\u2502 \u2502\"mediumspringgreen\"\u2502#00FA9A\u2502rgb(0,\u00a0250,\u00a0154)\u2502\u2502 \u2502\"mediumturquoise\"\u2502#48D1CC\u2502rgb(72,\u00a0209,\u00a0204)\u2502\u2502 \u2502\"mediumvioletred\"\u2502#C71585\u2502rgb(199,\u00a021,\u00a0133)\u2502\u2502 \u2502\"midnightblue\"\u2502#191970\u2502rgb(25,\u00a025,\u00a0112)\u2502\u2502 \u2502\"mintcream\"\u2502#F5FFFA\u2502rgb(245,\u00a0255,\u00a0250)\u2502\u2502 \u2502\"mistyrose\"\u2502#FFE4E1\u2502rgb(255,\u00a0228,\u00a0225)\u2502\u2502 \u2502\"moccasin\"\u2502#FFE4B5\u2502rgb(255,\u00a0228,\u00a0181)\u2502\u2502 \u2502\"navajowhite\"\u2502#FFDEAD\u2502rgb(255,\u00a0222,\u00a0173)\u2502\u2502 \u2502\"navy\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"oldlace\"\u2502#FDF5E6\u2502rgb(253,\u00a0245,\u00a0230)\u2502\u2502 \u2502\"olive\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"olivedrab\"\u2502#6B8E23\u2502rgb(107,\u00a0142,\u00a035)\u2502\u2502 \u2502\"orange\"\u2502#FFA500\u2502rgb(255,\u00a0165,\u00a00)\u2502\u2502 \u2502\"orangered\"\u2502#FF4500\u2502rgb(255,\u00a069,\u00a00)\u2502\u2502 \u2502\"orchid\"\u2502#DA70D6\u2502rgb(218,\u00a0112,\u00a0214)\u2502\u2502 \u2502\"palegoldenrod\"\u2502#EEE8AA\u2502rgb(238,\u00a0232,\u00a0170)\u2502\u2502 \u2502\"palegreen\"\u2502#98FB98\u2502rgb(152,\u00a0251,\u00a0152)\u2502\u2502 \u2502\"paleturquoise\"\u2502#AFEEEE\u2502rgb(175,\u00a0238,\u00a0238)\u2502\u2502 \u2502\"palevioletred\"\u2502#DB7093\u2502rgb(219,\u00a0112,\u00a0147)\u2502\u2502 \u2502\"papayawhip\"\u2502#FFEFD5\u2502rgb(255,\u00a0239,\u00a0213)\u2502\u2502 \u2502\"peachpuff\"\u2502#FFDAB9\u2502rgb(255,\u00a0218,\u00a0185)\u2502\u2502 \u2502\"peru\"\u2502#CD853F\u2502rgb(205,\u00a0133,\u00a063)\u2502\u2502 \u2502\"pink\"\u2502#FFC0CB\u2502rgb(255,\u00a0192,\u00a0203)\u2502\u2502 \u2502\"plum\"\u2502#DDA0DD\u2502rgb(221,\u00a0160,\u00a0221)\u2502\u2502 \u2502\"powderblue\"\u2502#B0E0E6\u2502rgb(176,\u00a0224,\u00a0230)\u2502\u2502 \u2502\"purple\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"rebeccapurple\"\u2502#663399\u2502rgb(102,\u00a051,\u00a0153)\u2502\u2502 \u2502\"red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"rosybrown\"\u2502#BC8F8F\u2502rgb(188,\u00a0143,\u00a0143)\u2502\u2502 \u2502\"royalblue\"\u2502#4169E1\u2502rgb(65,\u00a0105,\u00a0225)\u2502\u2502 \u2502\"saddlebrown\"\u2502#8B4513\u2502rgb(139,\u00a069,\u00a019)\u2502\u2502 \u2502\"salmon\"\u2502#FA8072\u2502rgb(250,\u00a0128,\u00a0114)\u2502\u2502 \u2502\"sandybrown\"\u2502#F4A460\u2502rgb(244,\u00a0164,\u00a096)\u2502\u2502 \u2502\"seagreen\"\u2502#2E8B57\u2502rgb(46,\u00a0139,\u00a087)\u2502\u2502 \u2502\"seashell\"\u2502#FFF5EE\u2502rgb(255,\u00a0245,\u00a0238)\u2502\u2502 \u2502\"sienna\"\u2502#A0522D\u2502rgb(160,\u00a082,\u00a045)\u2502\u2502 \u2502\"silver\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"skyblue\"\u2502#87CEEB\u2502rgb(135,\u00a0206,\u00a0235)\u2502\u2502 \u2502\"slateblue\"\u2502#6A5ACD\u2502rgb(106,\u00a090,\u00a0205)\u2502\u2502 \u2502\"slategray\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"slategrey\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"snow\"\u2502#FFFAFA\u2502rgb(255,\u00a0250,\u00a0250)\u2502\u2502 \u2502\"springgreen\"\u2502#00FF7F\u2502rgb(0,\u00a0255,\u00a0127)\u2502\u2502 \u2502\"steelblue\"\u2502#4682B4\u2502rgb(70,\u00a0130,\u00a0180)\u2502\u2502 \u2502\"tan\"\u2502#D2B48C\u2502rgb(210,\u00a0180,\u00a0140)\u2502\u2502 \u2502\"teal\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"thistle\"\u2502#D8BFD8\u2502rgb(216,\u00a0191,\u00a0216)\u2502\u2502 \u2502\"tomato\"\u2502#FF6347\u2502rgb(255,\u00a099,\u00a071)\u2502\u2502 \u2502\"turquoise\"\u2502#40E0D0\u2502rgb(64,\u00a0224,\u00a0208)\u2502\u2502 \u2502\"violet\"\u2502#EE82EE\u2502rgb(238,\u00a0130,\u00a0238)\u2502\u2502 \u2502\"wheat\"\u2502#F5DEB3\u2502rgb(245,\u00a0222,\u00a0179)\u2502\u2502 \u2502\"white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"whitesmoke\"\u2502#F5F5F5\u2502rgb(245,\u00a0245,\u00a0245)\u2502\u2502 \u2502\"yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"yellowgreen\"\u2502#9ACD32\u2502rgb(154,\u00a0205,\u00a050)\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p>"},{"location":"api/color/#textual.color.BLACK","title":"BLACK  <code>module-attribute</code>","text":"<pre><code>BLACK = Color(0, 0, 0)\n</code></pre> <p>A constant for pure black.</p>"},{"location":"api/color/#textual.color.TRANSPARENT","title":"TRANSPARENT  <code>module-attribute</code>","text":"<pre><code>TRANSPARENT = parse('transparent')\n</code></pre> <p>A constant for transparent.</p>"},{"location":"api/color/#textual.color.WHITE","title":"WHITE  <code>module-attribute</code>","text":"<pre><code>WHITE = Color(255, 255, 255)\n</code></pre> <p>A constant for pure white.</p>"},{"location":"api/color/#textual.color.Color","title":"Color","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A class to represent a color.</p> <p>Colors are stored as three values representing the degree of red, green, and blue in a color, and a fourth \"alpha\" value which defines where the color lies on a gradient of opaque to transparent.</p> Example <pre><code>&gt;&gt;&gt; from textual.color import Color\n&gt;&gt;&gt; color = Color.parse(\"red\")\n&gt;&gt;&gt; color\nColor(255, 0, 0)\n&gt;&gt;&gt; color.darken(0.5)\nColor(98, 0, 0)\n&gt;&gt;&gt; color + Color.parse(\"green\")\nColor(0, 128, 0)\n&gt;&gt;&gt; color_with_alpha = Color(100, 50, 25, 0.5)\n&gt;&gt;&gt; color_with_alpha\nColor(100, 50, 25, a=0.5)\n&gt;&gt;&gt; color + color_with_alpha\nColor(177, 25, 12)\n</code></pre>"},{"location":"api/color/#textual.color.Color.a","title":"a  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>a = 1.0\n</code></pre> <p>Alpha (opacity) component in range 0 to 1.</p>"},{"location":"api/color/#textual.color.Color.b","title":"b  <code>instance-attribute</code>","text":"<pre><code>b\n</code></pre> <p>Blue component in range 0 to 255.</p>"},{"location":"api/color/#textual.color.Color.brightness","title":"brightness  <code>property</code>","text":"<pre><code>brightness\n</code></pre> <p>The human perceptual brightness.</p> <p>A value of 1 is returned for pure white, and 0 for pure black. Other colors lie on a gradient between the two extremes.</p>"},{"location":"api/color/#textual.color.Color.clamped","title":"clamped  <code>property</code>","text":"<pre><code>clamped\n</code></pre> <p>A clamped color (this color with all values in expected range).</p>"},{"location":"api/color/#textual.color.Color.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>The color in CSS RGB or RGBA form.</p> <p>For example, <code>\"rgb(10,20,30)\"</code> for an RGB color, or <code>\"rgb(50,70,80,0.5)\"</code> for an RGBA color.</p>"},{"location":"api/color/#textual.color.Color.g","title":"g  <code>instance-attribute</code>","text":"<pre><code>g\n</code></pre> <p>Green component in range 0 to 255.</p>"},{"location":"api/color/#textual.color.Color.hex","title":"hex  <code>property</code>","text":"<pre><code>hex\n</code></pre> <p>The color in CSS hex form, with 6 digits for RGB, and 8 digits for RGBA.</p> <p>For example, <code>\"#46b3de\"</code> for an RGB color, or <code>\"#3342457f\"</code> for a color with alpha.</p>"},{"location":"api/color/#textual.color.Color.hex6","title":"hex6  <code>property</code>","text":"<pre><code>hex6\n</code></pre> <p>The color in CSS hex form, with 6 digits for RGB. Alpha is ignored.</p> <p>For example, <code>\"#46b3de\"</code>.</p>"},{"location":"api/color/#textual.color.Color.hsl","title":"hsl  <code>property</code>","text":"<pre><code>hsl\n</code></pre> <p>This color in HSL format.</p> <p>HSL color is an alternative way of representing a color, which can be used in certain color calculations.</p> <p>Returns:</p> Type Description <code>HSL</code> <p>Color encoded in HSL format.</p>"},{"location":"api/color/#textual.color.Color.inverse","title":"inverse  <code>property</code>","text":"<pre><code>inverse\n</code></pre> <p>The inverse of this color.</p> <p>Returns:</p> Type Description <code>Color</code> <p>Inverse color.</p>"},{"location":"api/color/#textual.color.Color.is_transparent","title":"is_transparent  <code>property</code>","text":"<pre><code>is_transparent\n</code></pre> <p>Is the color transparent (i.e. has 0 alpha)?</p>"},{"location":"api/color/#textual.color.Color.monochrome","title":"monochrome  <code>property</code>","text":"<pre><code>monochrome\n</code></pre> <p>A monochrome version of this color.</p> <p>Returns:</p> Type Description <code>Color</code> <p>The monochrome (black and white) version of this color.</p>"},{"location":"api/color/#textual.color.Color.normalized","title":"normalized  <code>property</code>","text":"<pre><code>normalized\n</code></pre> <p>A tuple of the color components normalized to between 0 and 1.</p> <p>Returns:</p> Type Description <code>tuple[float, float, float]</code> <p>Normalized components.</p>"},{"location":"api/color/#textual.color.Color.r","title":"r  <code>instance-attribute</code>","text":"<pre><code>r\n</code></pre> <p>Red component in range 0 to 255.</p>"},{"location":"api/color/#textual.color.Color.rgb","title":"rgb  <code>property</code>","text":"<pre><code>rgb\n</code></pre> <p>The red, green, and blue color components as a tuple of ints.</p>"},{"location":"api/color/#textual.color.Color.rich_color","title":"rich_color  <code>cached</code> <code>property</code>","text":"<pre><code>rich_color\n</code></pre> <p>This color encoded in Rich's Color class.</p> <p>Returns:</p> Type Description <code>Color</code> <p>A color object as used by Rich.</p>"},{"location":"api/color/#textual.color.Color.blend","title":"blend  <code>cached</code>","text":"<pre><code>blend(destination, factor, alpha=None)\n</code></pre> <p>Generate a new color between two colors.</p> <p>This method calculates a new color on a gradient. The position on the gradient is given by <code>factor</code>, which is a float between 0 and 1, where 0 is the original color, and 1 is the <code>destination</code> color. A value of <code>gradient</code> between the two extremes produces a color somewhere between the two end points.</p> <p>Parameters:</p> Name Type Description Default <code>Color</code> <p>Another color.</p> required <code>float</code> <p>A blend factor, 0 -&gt; 1.</p> required <code>float | None</code> <p>New alpha for result.</p> <code>None</code> <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.blend(destination)","title":"<code>destination</code>","text":""},{"location":"api/color/#textual.color.Color.blend(factor)","title":"<code>factor</code>","text":""},{"location":"api/color/#textual.color.Color.blend(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.darken","title":"darken  <code>cached</code>","text":"<pre><code>darken(amount, alpha=None)\n</code></pre> <p>Darken the color by a given amount.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Value between 0-1 to reduce luminance by.</p> required <code>float | None</code> <p>Alpha component for new color or None to copy alpha.</p> <code>None</code> <p>Returns:</p> Type Description <code>Color</code> <p>New color.</p>"},{"location":"api/color/#textual.color.Color.darken(amount)","title":"<code>amount</code>","text":""},{"location":"api/color/#textual.color.Color.darken(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.from_hsl","title":"from_hsl  <code>classmethod</code>","text":"<pre><code>from_hsl(h, s, l)\n</code></pre> <p>Create a color from HLS components.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Hue.</p> required <code>float</code> <p>Lightness.</p> required <code>float</code> <p>Saturation.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.from_hsl(h)","title":"<code>h</code>","text":""},{"location":"api/color/#textual.color.Color.from_hsl(l)","title":"<code>l</code>","text":""},{"location":"api/color/#textual.color.Color.from_hsl(s)","title":"<code>s</code>","text":""},{"location":"api/color/#textual.color.Color.from_rich_color","title":"from_rich_color  <code>classmethod</code>","text":"<pre><code>from_rich_color(rich_color)\n</code></pre> <p>Create a new color from Rich's Color class.</p> <p>Parameters:</p> Name Type Description Default <code>Color</code> <p>An instance of Rich color.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new Color instance.</p>"},{"location":"api/color/#textual.color.Color.from_rich_color(rich_color)","title":"<code>rich_color</code>","text":""},{"location":"api/color/#textual.color.Color.get_contrast_text","title":"get_contrast_text  <code>cached</code>","text":"<pre><code>get_contrast_text(alpha=0.95)\n</code></pre> <p>Get a light or dark color that best contrasts this color, for use with text.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>An alpha value to apply to the result.</p> <code>0.95</code> <p>Returns:</p> Type Description <code>Color</code> <p>A new color, either an off-white or off-black.</p>"},{"location":"api/color/#textual.color.Color.get_contrast_text(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.lighten","title":"lighten","text":"<pre><code>lighten(amount, alpha=None)\n</code></pre> <p>Lighten the color by a given amount.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Value between 0-1 to increase luminance by.</p> required <code>float | None</code> <p>Alpha component for new color or None to copy alpha.</p> <code>None</code> <p>Returns:</p> Type Description <code>Color</code> <p>New color.</p>"},{"location":"api/color/#textual.color.Color.lighten(amount)","title":"<code>amount</code>","text":""},{"location":"api/color/#textual.color.Color.lighten(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.multiply_alpha","title":"multiply_alpha","text":"<pre><code>multiply_alpha(alpha)\n</code></pre> <p>Create a new color, multiplying the alpha by a constant.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>A value to multiple the alpha by (expected to be in the range 0 to 1).</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.multiply_alpha(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.Color.parse","title":"parse  <code>cached</code> <code>classmethod</code>","text":"<pre><code>parse(color_text)\n</code></pre> <p>Parse a string containing a named color or CSS-style color.</p> <p>Colors may be parsed from the following formats:</p> <ul> <li> <p>Text beginning with a <code>#</code> is parsed as a hexadecimal color code,  where R, G, B, and A must be hexadecimal digits (0-9A-F):</p> <ul> <li><code>#RGB</code></li> <li><code>#RGBA</code></li> <li><code>#RRGGBB</code></li> <li><code>#RRGGBBAA</code></li> </ul> </li> <li> <p>Alternatively, RGB colors can also be specified in the format  that follows, where R, G, and B must be numbers between 0 and 255  and A must be a value between 0 and 1:</p> <ul> <li><code>rgb(R,G,B)</code></li> <li><code>rgb(R,G,B,A)</code></li> </ul> </li> <li> <p>The HSL model can also be used, with a syntax similar to the above,  if H is a value between 0 and 360, S and L are percentages, and A  is a value between 0 and 1:</p> <ul> <li><code>hsl(H,S,L)</code></li> <li><code>hsla(H,S,L,A)</code></li> </ul> </li> </ul> <p>Any other formats will raise a <code>ColorParseError</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | Color</code> <p>Text with a valid color format. Color objects will be returned unmodified.</p> required <p>Raises:</p> Type Description <code>ColorParseError</code> <p>If the color is not encoded correctly.</p> <p>Returns:</p> Type Description <code>Color</code> <p>Instance encoding the color specified by the argument.</p>"},{"location":"api/color/#textual.color.Color.parse(color_text)","title":"<code>color_text</code>","text":""},{"location":"api/color/#textual.color.Color.with_alpha","title":"with_alpha","text":"<pre><code>with_alpha(alpha)\n</code></pre> <p>Create a new color with the given alpha.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>New value for alpha.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A new color.</p>"},{"location":"api/color/#textual.color.Color.with_alpha(alpha)","title":"<code>alpha</code>","text":""},{"location":"api/color/#textual.color.ColorParseError","title":"ColorParseError","text":"<pre><code>ColorParseError(message, suggested_color=None)\n</code></pre> <p>               Bases: <code>Exception</code></p> <p>A color failed to parse.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The error message</p> required <code>str | None</code> <p>A close color we can suggest.</p> <code>None</code>"},{"location":"api/color/#textual.color.ColorParseError(message)","title":"<code>message</code>","text":""},{"location":"api/color/#textual.color.ColorParseError(suggested_color)","title":"<code>suggested_color</code>","text":""},{"location":"api/color/#textual.color.Gradient","title":"Gradient","text":"<pre><code>Gradient(*stops, quality=50)\n</code></pre> <p>Defines a color gradient.</p> <p>A gradient is defined by a sequence of \"stops\" consisting of a tuple containing a float and a color. The stop indicates the color at that point on a spectrum between 0 and 1. Colors may be given as a Color instance, or a string that can be parsed into a Color (with Color.parse).</p> <p>The <code>quality</code> argument defines the number of steps in the gradient. Intermediate colors are interpolated from the two nearest colors. Increasing <code>quality</code> can generate a smoother looking gradient, at the expense of a little extra work to pre-calculate the colors.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[float, Color | str]</code> <p>Color stops.</p> <code>()</code> <code>int</code> <p>The number of steps in the gradient.</p> <code>50</code> <p>Raises:</p> Type Description <code>ValueError</code> <p>If any stops are missing (must be at least a stop for 0 and 1).</p>"},{"location":"api/color/#textual.color.Gradient(stops)","title":"<code>stops</code>","text":""},{"location":"api/color/#textual.color.Gradient(quality)","title":"<code>quality</code>","text":""},{"location":"api/color/#textual.color.Gradient.colors","title":"colors  <code>property</code>","text":"<pre><code>colors\n</code></pre> <p>A list of colors in the gradient.</p>"},{"location":"api/color/#textual.color.Gradient.from_colors","title":"from_colors  <code>classmethod</code>","text":"<pre><code>from_colors(*colors, quality=50)\n</code></pre> <p>Construct a gradient form a sequence of colors, where the stops are evenly spaced.</p> <p>Parameters:</p> Name Type Description Default <code>Color | str</code> <p>Positional arguments may be Color instances or strings to parse into a color.</p> <code>()</code> <code>int</code> <p>The number of steps in the gradient.</p> <code>50</code> <p>Returns:</p> Type Description <code>Gradient</code> <p>A new Gradient instance.</p>"},{"location":"api/color/#textual.color.Gradient.from_colors(*colors)","title":"<code>*colors</code>","text":""},{"location":"api/color/#textual.color.Gradient.from_colors(quality)","title":"<code>quality</code>","text":""},{"location":"api/color/#textual.color.Gradient.get_color","title":"get_color","text":"<pre><code>get_color(position)\n</code></pre> <p>Get a color from the gradient at a position between 0 and 1.</p> <p>Positions that are between stops will return a blended color.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>A number between 0 and 1, where 0 is the first stop, and 1 is the last.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A Textual color.</p>"},{"location":"api/color/#textual.color.Gradient.get_color(position)","title":"<code>position</code>","text":""},{"location":"api/color/#textual.color.Gradient.get_rich_color","title":"get_rich_color","text":"<pre><code>get_rich_color(position)\n</code></pre> <p>Get a (Rich) color from the gradient at a position between 0 and 1.</p> <p>Positions that are between stops will return a blended color.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>A number between 0 and 1, where 0 is the first stop, and 1 is the last.</p> required <p>Returns:</p> Type Description <code>Color</code> <p>A (Rich) color.</p>"},{"location":"api/color/#textual.color.Gradient.get_rich_color(position)","title":"<code>position</code>","text":""},{"location":"api/color/#textual.color.HSL","title":"HSL","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A color in HLS (Hue, Saturation, Lightness) format.</p>"},{"location":"api/color/#textual.color.HSL.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>HSL in css format.</p>"},{"location":"api/color/#textual.color.HSL.h","title":"h  <code>instance-attribute</code>","text":"<pre><code>h\n</code></pre> <p>Hue in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSL.l","title":"l  <code>instance-attribute</code>","text":"<pre><code>l\n</code></pre> <p>Lightness in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSL.s","title":"s  <code>instance-attribute</code>","text":"<pre><code>s\n</code></pre> <p>Saturation in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSV","title":"HSV","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A color in HSV (Hue, Saturation, Value) format.</p>"},{"location":"api/color/#textual.color.HSV.h","title":"h  <code>instance-attribute</code>","text":"<pre><code>h\n</code></pre> <p>Hue in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSV.s","title":"s  <code>instance-attribute</code>","text":"<pre><code>s\n</code></pre> <p>Saturation in range 0 to 1.</p>"},{"location":"api/color/#textual.color.HSV.v","title":"v  <code>instance-attribute</code>","text":"<pre><code>v\n</code></pre> <p>Value un range 0 to 1.</p>"},{"location":"api/color/#textual.color.Lab","title":"Lab","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A color in CIE-L*ab format.</p>"},{"location":"api/color/#textual.color.Lab.L","title":"L  <code>instance-attribute</code>","text":"<pre><code>L\n</code></pre> <p>Lightness in range 0 to 100.</p>"},{"location":"api/color/#textual.color.Lab.a","title":"a  <code>instance-attribute</code>","text":"<pre><code>a\n</code></pre> <p>A axis in range -127 to 128.</p>"},{"location":"api/color/#textual.color.Lab.b","title":"b  <code>instance-attribute</code>","text":"<pre><code>b\n</code></pre> <p>B axis in range -127 to 128.</p>"},{"location":"api/color/#textual.color.lab_to_rgb","title":"lab_to_rgb","text":"<pre><code>lab_to_rgb(lab, alpha=1.0)\n</code></pre> <p>Convert a CIE-L*ab color to RGB.</p> <p>Uses the standard RGB color space with a D65/2\u2070 standard illuminant. Conversion passes through the XYZ color space. Cf. http://www.easyrgb.com/en/math.php.</p>"},{"location":"api/color/#textual.color.rgb_to_lab","title":"rgb_to_lab","text":"<pre><code>rgb_to_lab(rgb)\n</code></pre> <p>Convert an RGB color to the CIE-L*ab format.</p> <p>Uses the standard RGB color space with a D65/2\u2070 standard illuminant. Conversion passes through the XYZ color space. Cf. http://www.easyrgb.com/en/math.php.</p>"},{"location":"api/command/","title":"textual.command","text":"<p>This module contains classes for working with Textual's command palette.</p> <p>See the guide on the Command Palette for full details.</p>"},{"location":"api/command/#textual.command.Hits","title":"Hits  <code>module-attribute</code>","text":"<pre><code>Hits = AsyncIterator['DiscoveryHit | Hit']\n</code></pre> <p>Return type for the command provider's <code>search</code> method.</p>"},{"location":"api/command/#textual.command.Command","title":"Command","text":"<pre><code>Command(prompt, command, id=None, disabled=False)\n</code></pre> <p>               Bases: <code>Option</code></p> <p>Class that holds a command in the <code>CommandList</code>.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>The prompt for the option.</p> required <code>DiscoveryHit | Hit</code> <p>The details of the command associated with the option.</p> required <code>str | None</code> <p>The optional ID for the option.</p> <code>None</code> <code>bool</code> <p>The initial enabled/disabled state. Enabled by default.</p> <code>False</code>"},{"location":"api/command/#textual.command.Command(prompt)","title":"<code>prompt</code>","text":""},{"location":"api/command/#textual.command.Command(command)","title":"<code>command</code>","text":""},{"location":"api/command/#textual.command.Command(id)","title":"<code>id</code>","text":""},{"location":"api/command/#textual.command.Command(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/command/#textual.command.Command.command","title":"command  <code>instance-attribute</code>","text":"<pre><code>command = command\n</code></pre> <p>The details of the command associated with the option.</p>"},{"location":"api/command/#textual.command.CommandInput","title":"CommandInput","text":"<pre><code>CommandInput(\n    value=None,\n    placeholder=\"\",\n    highlighter=None,\n    password=False,\n    *,\n    restrict=None,\n    type=\"text\",\n    max_length=0,\n    suggester=None,\n    validators=None,\n    validate_on=None,\n    valid_empty=False,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n    tooltip=None\n)\n</code></pre> <p>               Bases: <code>Input</code></p> <p>The command palette input control.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>An optional default value for the input.</p> <code>None</code> <code>str</code> <p>Optional placeholder text for the input.</p> <code>''</code> <code>Highlighter | None</code> <p>An optional highlighter for the input.</p> <code>None</code> <code>bool</code> <p>Flag to say if the field should obfuscate its content.</p> <code>False</code> <code>str | None</code> <p>A regex to restrict character inputs.</p> <code>None</code> <code>InputType</code> <p>The type of the input.</p> <code>'text'</code> <code>int</code> <p>The maximum length of the input, or 0 for no maximum length.</p> <code>0</code> <code>Suggester | None</code> <p><code>Suggester</code> associated with this input instance.</p> <code>None</code> <code>Validator | Iterable[Validator] | None</code> <p>An iterable of validators that the Input value will be checked against.</p> <code>None</code> <code>Iterable[InputValidationOn] | None</code> <p>Zero or more of the values \"blur\", \"changed\", and \"submitted\", which determine when to do input validation. The default is to do validation for all messages.</p> <code>None</code> <code>bool</code> <p>Empty values are valid.</p> <code>False</code> <code>str | None</code> <p>Optional name for the input widget.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the input is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"api/command/#textual.command.CommandInput(value)","title":"<code>value</code>","text":""},{"location":"api/command/#textual.command.CommandInput(placeholder)","title":"<code>placeholder</code>","text":""},{"location":"api/command/#textual.command.CommandInput(highlighter)","title":"<code>highlighter</code>","text":""},{"location":"api/command/#textual.command.CommandInput(password)","title":"<code>password</code>","text":""},{"location":"api/command/#textual.command.CommandInput(restrict)","title":"<code>restrict</code>","text":""},{"location":"api/command/#textual.command.CommandInput(type)","title":"<code>type</code>","text":""},{"location":"api/command/#textual.command.CommandInput(max_length)","title":"<code>max_length</code>","text":""},{"location":"api/command/#textual.command.CommandInput(suggester)","title":"<code>suggester</code>","text":""},{"location":"api/command/#textual.command.CommandInput(validators)","title":"<code>validators</code>","text":""},{"location":"api/command/#textual.command.CommandInput(validate_on)","title":"<code>validate_on</code>","text":""},{"location":"api/command/#textual.command.CommandInput(valid_empty)","title":"<code>valid_empty</code>","text":""},{"location":"api/command/#textual.command.CommandInput(name)","title":"<code>name</code>","text":""},{"location":"api/command/#textual.command.CommandInput(id)","title":"<code>id</code>","text":""},{"location":"api/command/#textual.command.CommandInput(classes)","title":"<code>classes</code>","text":""},{"location":"api/command/#textual.command.CommandInput(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/command/#textual.command.CommandInput(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"api/command/#textual.command.CommandList","title":"CommandList","text":"<pre><code>CommandList(\n    *content,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n    wrap=True,\n    tooltip=None,\n)\n</code></pre> <p>               Bases: <code>OptionList</code></p> <p>The command palette command list.</p>"},{"location":"api/command/#textual.command.CommandPalette","title":"CommandPalette","text":"<pre><code>CommandPalette()\n</code></pre> <p>               Bases: <code>SystemModalScreen</code></p> <p>The Textual command palette.</p>"},{"location":"api/command/#textual.command.CommandPalette.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"ctrl+end, shift+end\",\n        \"command_list('last')\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+home, shift+home\",\n        \"command_list('first')\",\n        show=False,\n    ),\n    Binding(\"down\", \"cursor_down\", show=False),\n    Binding(\"escape\", \"escape\", \"Exit the command palette\"),\n    Binding(\n        \"pagedown\", \"command_list('page_down')\", show=False\n    ),\n    Binding(\n        \"pageup\", \"command_list('page_up')\", show=False\n    ),\n    Binding(\"up\", \"command_list('cursor_up')\", show=False),\n]\n</code></pre> Key(s) Description ctrl+end, shift+end Jump to the last available commands. ctrl+home, shift+home Jump to the first available commands. down Navigate down through the available commands. escape Exit the command palette. pagedown Navigate down a page through the available commands. pageup Navigate up a page through the available commands. up Navigate up through the available commands."},{"location":"api/command/#textual.command.CommandPalette.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"command-palette--help-text\",\n    \"command-palette--highlight\",\n}\n</code></pre> Class Description <code>command-palette--help-text</code> Targets the help text of a matched command. <code>command-palette--highlight</code> Targets the highlights of a matched command."},{"location":"api/command/#textual.command.CommandPalette.run_on_select","title":"run_on_select  <code>class-attribute</code>","text":"<pre><code>run_on_select = True\n</code></pre> <p>A flag to say if a command should be run when selected by the user.</p> <p>If <code>True</code> then when a user hits <code>Enter</code> on a command match in the result list, or if they click on one with the mouse, the command will be selected and run. If set to <code>False</code> the input will be filled with the command and then <code>Enter</code> should be pressed on the keyboard or the 'go' button should be pressed.</p>"},{"location":"api/command/#textual.command.CommandPalette.Closed","title":"Closed  <code>dataclass</code>","text":"<pre><code>Closed(option_selected)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted to App when the command palette is closed.</p>"},{"location":"api/command/#textual.command.CommandPalette.Closed.option_selected","title":"option_selected  <code>instance-attribute</code>","text":"<pre><code>option_selected\n</code></pre> <p>True if an option was selected, False if the palette was closed without selecting an option.</p>"},{"location":"api/command/#textual.command.CommandPalette.Opened","title":"Opened  <code>dataclass</code>","text":"<pre><code>Opened()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted to App when the command palette is opened.</p>"},{"location":"api/command/#textual.command.CommandPalette.OptionHighlighted","title":"OptionHighlighted  <code>dataclass</code>","text":"<pre><code>OptionHighlighted(highlighted_event)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted to App when an option is highlighted in the command palette.</p>"},{"location":"api/command/#textual.command.CommandPalette.OptionHighlighted.highlighted_event","title":"highlighted_event  <code>instance-attribute</code>","text":"<pre><code>highlighted_event\n</code></pre> <p>The option highlighted event from the OptionList within the command palette.</p>"},{"location":"api/command/#textual.command.CommandPalette.is_open","title":"is_open  <code>staticmethod</code>","text":"<pre><code>is_open(app)\n</code></pre> <p>Is the command palette current open?</p> <p>Parameters:</p> Name Type Description Default <code>App</code> <p>The app to test.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the command palette is currently open, <code>False</code> if not.</p>"},{"location":"api/command/#textual.command.CommandPalette.is_open(app)","title":"<code>app</code>","text":""},{"location":"api/command/#textual.command.DiscoveryHit","title":"DiscoveryHit  <code>dataclass</code>","text":"<pre><code>DiscoveryHit(display, command, text=None, help=None)\n</code></pre> <p>Holds the details of a single command search hit.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.command","title":"command  <code>instance-attribute</code>","text":"<pre><code>command\n</code></pre> <p>The function to call when the command is chosen.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.display","title":"display  <code>instance-attribute</code>","text":"<pre><code>display\n</code></pre> <p>A string or Rich renderable representation of the hit.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.help","title":"help  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>help = None\n</code></pre> <p>Optional help text for the command.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.prompt","title":"prompt  <code>property</code>","text":"<pre><code>prompt\n</code></pre> <p>The prompt to use when displaying the discovery hit in the command palette.</p>"},{"location":"api/command/#textual.command.DiscoveryHit.text","title":"text  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>text = None\n</code></pre> <p>The command text associated with the hit, as plain text.</p> <p>If <code>display</code> is not simple text, this attribute should be provided by the Provider object.</p>"},{"location":"api/command/#textual.command.Hit","title":"Hit  <code>dataclass</code>","text":"<pre><code>Hit(score, match_display, command, text=None, help=None)\n</code></pre> <p>Holds the details of a single command search hit.</p>"},{"location":"api/command/#textual.command.Hit.command","title":"command  <code>instance-attribute</code>","text":"<pre><code>command\n</code></pre> <p>The function to call when the command is chosen.</p>"},{"location":"api/command/#textual.command.Hit.help","title":"help  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>help = None\n</code></pre> <p>Optional help text for the command.</p>"},{"location":"api/command/#textual.command.Hit.match_display","title":"match_display  <code>instance-attribute</code>","text":"<pre><code>match_display\n</code></pre> <p>A string or Rich renderable representation of the hit.</p>"},{"location":"api/command/#textual.command.Hit.prompt","title":"prompt  <code>property</code>","text":"<pre><code>prompt\n</code></pre> <p>The prompt to use when displaying the hit in the command palette.</p>"},{"location":"api/command/#textual.command.Hit.score","title":"score  <code>instance-attribute</code>","text":"<pre><code>score\n</code></pre> <p>The score of the command hit.</p> <p>The value should be between 0 (no match) and 1 (complete match).</p>"},{"location":"api/command/#textual.command.Hit.text","title":"text  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>text = None\n</code></pre> <p>The command text associated with the hit, as plain text.</p> <p>If <code>match_display</code> is not simple text, this attribute should be provided by the Provider object.</p>"},{"location":"api/command/#textual.command.Matcher","title":"Matcher","text":"<pre><code>Matcher(query, *, match_style=None, case_sensitive=False)\n</code></pre> <p>A fuzzy matcher.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A query as typed in by the user.</p> required <code>Style | None</code> <p>The style to use to highlight matched portions of a string.</p> <code>None</code> <code>bool</code> <p>Should matching be case sensitive?</p> <code>False</code>"},{"location":"api/command/#textual.command.Matcher(query)","title":"<code>query</code>","text":""},{"location":"api/command/#textual.command.Matcher(match_style)","title":"<code>match_style</code>","text":""},{"location":"api/command/#textual.command.Matcher(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/command/#textual.command.Matcher.case_sensitive","title":"case_sensitive  <code>property</code>","text":"<pre><code>case_sensitive\n</code></pre> <p>Is this matcher case sensitive?</p>"},{"location":"api/command/#textual.command.Matcher.match_style","title":"match_style  <code>property</code>","text":"<pre><code>match_style\n</code></pre> <p>The style that will be used to highlight hits in the matched text.</p>"},{"location":"api/command/#textual.command.Matcher.query","title":"query  <code>property</code>","text":"<pre><code>query\n</code></pre> <p>The query string to look for.</p>"},{"location":"api/command/#textual.command.Matcher.query_pattern","title":"query_pattern  <code>property</code>","text":"<pre><code>query_pattern\n</code></pre> <p>The regular expression pattern built from the query.</p>"},{"location":"api/command/#textual.command.Matcher.highlight","title":"highlight","text":"<pre><code>highlight(candidate)\n</code></pre> <p>Highlight the candidate with the fuzzy match.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A [rich.text.Text][<code>Text</code>] object with highlighted matches.</p>"},{"location":"api/command/#textual.command.Matcher.highlight(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/command/#textual.command.Matcher.match","title":"match","text":"<pre><code>match(candidate)\n</code></pre> <p>Match the candidate against the query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>float</code> <p>Strength of the match from 0 to 1.</p>"},{"location":"api/command/#textual.command.Matcher.match(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/command/#textual.command.Provider","title":"Provider","text":"<pre><code>Provider(screen, match_style=None)\n</code></pre> <p>               Bases: <code>ABC</code></p> <p>Base class for command palette command providers.</p> <p>To create new command provider, inherit from this class and implement <code>search</code>.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[Any]</code> <p>A reference to the active screen.</p> required"},{"location":"api/command/#textual.command.Provider(screen)","title":"<code>screen</code>","text":""},{"location":"api/command/#textual.command.Provider.app","title":"app  <code>property</code>","text":"<pre><code>app\n</code></pre> <p>A reference to the application.</p>"},{"location":"api/command/#textual.command.Provider.focused","title":"focused  <code>property</code>","text":"<pre><code>focused\n</code></pre> <p>The currently-focused widget in the currently-active screen in the application.</p> <p>If no widget has focus this will be <code>None</code>.</p>"},{"location":"api/command/#textual.command.Provider.match_style","title":"match_style  <code>property</code>","text":"<pre><code>match_style\n</code></pre> <p>The preferred style to use when highlighting matching portions of the <code>match_display</code>.</p>"},{"location":"api/command/#textual.command.Provider.screen","title":"screen  <code>property</code>","text":"<pre><code>screen\n</code></pre> <p>The currently-active screen in the application.</p>"},{"location":"api/command/#textual.command.Provider.discover","title":"discover  <code>async</code>","text":"<pre><code>discover()\n</code></pre> <p>A default collection of hits for the provider.</p> <p>Yields:</p> Type Description <code>Hits</code> <p>Instances of <code>DiscoveryHit</code>.</p> Note <p>This is different from <code>search</code> in that it should yield <code>DiscoveryHit</code>s that should be shown by default (before user input).</p> <p>It is permitted to not implement this method.</p>"},{"location":"api/command/#textual.command.Provider.matcher","title":"matcher","text":"<pre><code>matcher(user_input, case_sensitive=False)\n</code></pre> <p>Create a fuzzy matcher for the given user input.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text that the user has input.</p> required <code>bool</code> <p>Should matching be case sensitive?</p> <code>False</code> <p>Returns:</p> Type Description <code>Matcher</code> <p>A fuzzy matcher object for matching against candidate hits.</p>"},{"location":"api/command/#textual.command.Provider.matcher(user_input)","title":"<code>user_input</code>","text":""},{"location":"api/command/#textual.command.Provider.matcher(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/command/#textual.command.Provider.search","title":"search  <code>abstractmethod</code> <code>async</code>","text":"<pre><code>search(query)\n</code></pre> <p>A request to search for commands relevant to the given query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The user input to be matched.</p> required <p>Yields:</p> Type Description <code>Hits</code> <p>Instances of <code>Hit</code>.</p>"},{"location":"api/command/#textual.command.Provider.search(query)","title":"<code>query</code>","text":""},{"location":"api/command/#textual.command.Provider.shutdown","title":"shutdown  <code>async</code>","text":"<pre><code>shutdown()\n</code></pre> <p>Called when the Provider is shutdown.</p> <p>Use this method to perform an cleanup, if required.</p>"},{"location":"api/command/#textual.command.Provider.startup","title":"startup  <code>async</code>","text":"<pre><code>startup()\n</code></pre> <p>Called after the Provider is initialized, but before any calls to <code>search</code>.</p>"},{"location":"api/command/#textual.command.SearchIcon","title":"SearchIcon","text":"<pre><code>SearchIcon(\n    renderable=\"\",\n    *,\n    expand=False,\n    shrink=False,\n    markup=True,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>               Bases: <code>Static</code></p> <p>Widget for displaying a search icon before the command input.</p>"},{"location":"api/command/#textual.command.SearchIcon.icon","title":"icon  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>icon = var('\ud83d\udd0e')\n</code></pre> <p>The icon to display.</p>"},{"location":"api/constants/","title":"textual.constants","text":"<p>This module contains constants, which may be set in environment variables.</p>"},{"location":"api/constants/#textual.constants.COLOR_SYSTEM","title":"COLOR_SYSTEM  <code>module-attribute</code>","text":"<pre><code>COLOR_SYSTEM = get_environ('TEXTUAL_COLOR_SYSTEM', 'auto')\n</code></pre> <p>Force color system override.</p>"},{"location":"api/constants/#textual.constants.DEBUG","title":"DEBUG  <code>module-attribute</code>","text":"<pre><code>DEBUG = _get_environ_bool('TEXTUAL_DEBUG')\n</code></pre> <p>Enable debug mode.</p>"},{"location":"api/constants/#textual.constants.DEVTOOLS_HOST","title":"DEVTOOLS_HOST  <code>module-attribute</code>","text":"<pre><code>DEVTOOLS_HOST = get_environ(\n    \"TEXTUAL_DEVTOOLS_HOST\", \"127.0.0.1\"\n)\n</code></pre> <p>The host where textual console is running.</p>"},{"location":"api/constants/#textual.constants.DEVTOOLS_PORT","title":"DEVTOOLS_PORT  <code>module-attribute</code>","text":"<pre><code>DEVTOOLS_PORT = _get_environ_int(\n    \"TEXTUAL_DEVTOOLS_PORT\", 8081\n)\n</code></pre> <p>Constant with the port that the devtools will connect to.</p>"},{"location":"api/constants/#textual.constants.DRIVER","title":"DRIVER  <code>module-attribute</code>","text":"<pre><code>DRIVER = get_environ('TEXTUAL_DRIVER', None)\n</code></pre> <p>Import for replacement driver.</p>"},{"location":"api/constants/#textual.constants.ESCAPE_DELAY","title":"ESCAPE_DELAY  <code>module-attribute</code>","text":"<pre><code>ESCAPE_DELAY = _get_environ_int('ESCDELAY', 100) / 1000.0\n</code></pre> <p>The delay (in seconds) before reporting an escape key (not used if the extend key protocol is available).</p>"},{"location":"api/constants/#textual.constants.FILTERS","title":"FILTERS  <code>module-attribute</code>","text":"<pre><code>FILTERS = get_environ('TEXTUAL_FILTERS', '')\n</code></pre> <p>A list of filters to apply to renderables.</p>"},{"location":"api/constants/#textual.constants.LOG_FILE","title":"LOG_FILE  <code>module-attribute</code>","text":"<pre><code>LOG_FILE = get_environ('TEXTUAL_LOG', None)\n</code></pre> <p>A last resort log file that appends all logs, when devtools isn't working.</p>"},{"location":"api/constants/#textual.constants.MAX_FPS","title":"MAX_FPS  <code>module-attribute</code>","text":"<pre><code>MAX_FPS = _get_environ_int('TEXTUAL_FPS', 60)\n</code></pre> <p>Maximum frames per second for updates.</p>"},{"location":"api/constants/#textual.constants.PRESS","title":"PRESS  <code>module-attribute</code>","text":"<pre><code>PRESS = get_environ('TEXTUAL_PRESS', '')\n</code></pre> <p>Keys to automatically press.</p>"},{"location":"api/constants/#textual.constants.SCREENSHOT_DELAY","title":"SCREENSHOT_DELAY  <code>module-attribute</code>","text":"<pre><code>SCREENSHOT_DELAY = _get_environ_int(\n    \"TEXTUAL_SCREENSHOT\", -1\n)\n</code></pre> <p>Seconds delay before taking screenshot.</p>"},{"location":"api/constants/#textual.constants.SCREENSHOT_FILENAME","title":"SCREENSHOT_FILENAME  <code>module-attribute</code>","text":"<pre><code>SCREENSHOT_FILENAME = get_environ(\n    \"TEXTUAL_SCREENSHOT_FILENAME\"\n)\n</code></pre> <p>The filename to use for the screenshot.</p>"},{"location":"api/constants/#textual.constants.SCREENSHOT_LOCATION","title":"SCREENSHOT_LOCATION  <code>module-attribute</code>","text":"<pre><code>SCREENSHOT_LOCATION = get_environ(\n    \"TEXTUAL_SCREENSHOT_LOCATION\"\n)\n</code></pre> <p>The location where screenshots should be written.</p>"},{"location":"api/constants/#textual.constants.SHOW_RETURN","title":"SHOW_RETURN  <code>module-attribute</code>","text":"<pre><code>SHOW_RETURN = _get_environ_bool('TEXTUAL_SHOW_RETURN')\n</code></pre> <p>Write the return value on exit.</p>"},{"location":"api/constants/#textual.constants.TEXTUAL_ANIMATIONS","title":"TEXTUAL_ANIMATIONS  <code>module-attribute</code>","text":"<pre><code>TEXTUAL_ANIMATIONS = _get_textual_animations()\n</code></pre> <p>Determines whether animations run or not.</p>"},{"location":"api/containers/","title":"textual.containers","text":"<p>Container widgets for quick styling.</p> <p>With the exception of <code>Center</code> and <code>Middle</code> containers will fill all of the space in the parent widget.</p>"},{"location":"api/containers/#textual.containers.Center","title":"Center","text":"<pre><code>Center(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container which aligns children on the X axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Center(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Center(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Center(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Center(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Center(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Container","title":"Container","text":"<pre><code>Container(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Simple container widget, with vertical layout.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Container(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Container(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Container(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Container(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Container(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Grid","title":"Grid","text":"<pre><code>Grid(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container with grid layout.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Grid(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Grid(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Grid(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Grid(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Grid(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal","title":"Horizontal","text":"<pre><code>Horizontal(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container with horizontal layout and no scrollbars.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Horizontal(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Horizontal(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll","title":"HorizontalScroll","text":"<pre><code>HorizontalScroll(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>ScrollableContainer</code></p> <p>A container with horizontal layout and an automatic scrollbar on the X axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.HorizontalScroll(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.HorizontalScroll(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.Middle","title":"Middle","text":"<pre><code>Middle(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container which aligns children on the Y axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Middle(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Middle(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Middle(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Middle(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Middle(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer","title":"ScrollableContainer","text":"<pre><code>ScrollableContainer(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A scrollable container with vertical layout, and auto scrollbars on both axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.ScrollableContainer(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.ScrollableContainer.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"up\", \"scroll_up\", \"Scroll Up\", show=False),\n    Binding(\n        \"down\", \"scroll_down\", \"Scroll Down\", show=False\n    ),\n    Binding(\"left\", \"scroll_left\", \"Scroll Up\", show=False),\n    Binding(\n        \"right\", \"scroll_right\", \"Scroll Right\", show=False\n    ),\n    Binding(\n        \"home\", \"scroll_home\", \"Scroll Home\", show=False\n    ),\n    Binding(\"end\", \"scroll_end\", \"Scroll End\", show=False),\n    Binding(\"pageup\", \"page_up\", \"Page Up\", show=False),\n    Binding(\n        \"pagedown\", \"page_down\", \"Page Down\", show=False\n    ),\n    Binding(\n        \"ctrl+pageup\", \"page_left\", \"Page Left\", show=False\n    ),\n    Binding(\n        \"ctrl+pagedown\",\n        \"page_right\",\n        \"Page Right\",\n        show=False,\n    ),\n]\n</code></pre> <p>Keyboard bindings for scrollable containers.</p> Key(s) Description up Scroll up, if vertical scrolling is available. down Scroll down, if vertical scrolling is available. left Scroll left, if horizontal scrolling is available. right Scroll right, if horizontal scrolling is available. home Scroll to the home position, if scrolling is available. end Scroll to the end position, if scrolling is available. pageup Scroll up one page, if vertical scrolling is available. pagedown Scroll down one page, if vertical scrolling is available. ctrl+pageup Scroll left one page, if horizontal scrolling is available. ctrl+pagedown Scroll right one page, if horizontal scrolling is available."},{"location":"api/containers/#textual.containers.Vertical","title":"Vertical","text":"<pre><code>Vertical(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>A container with vertical layout and no scrollbars.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.Vertical(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.Vertical(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll","title":"VerticalScroll","text":"<pre><code>VerticalScroll(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>ScrollableContainer</code></p> <p>A container with vertical layout and an automatic scrollbar on the Y axis.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/containers/#textual.containers.VerticalScroll(*children)","title":"<code>*children</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(name)","title":"<code>name</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(id)","title":"<code>id</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(classes)","title":"<code>classes</code>","text":""},{"location":"api/containers/#textual.containers.VerticalScroll(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/coordinate/","title":"textual.coordinate","text":"<p>A class to store a coordinate, used by the DataTable.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate","title":"Coordinate","text":"<p>               Bases: <code>NamedTuple</code></p> <p>An object representing a row/column coordinate within a grid.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.column","title":"column  <code>instance-attribute</code>","text":"<pre><code>column\n</code></pre> <p>The column of the coordinate within a grid.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.row","title":"row  <code>instance-attribute</code>","text":"<pre><code>row\n</code></pre> <p>The row of the coordinate within a grid.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.down","title":"down","text":"<pre><code>down()\n</code></pre> <p>Get the coordinate below.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate below.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.left","title":"left","text":"<pre><code>left()\n</code></pre> <p>Get the coordinate to the left.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate to the left.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.right","title":"right","text":"<pre><code>right()\n</code></pre> <p>Get the coordinate to the right.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate to the right.</p>"},{"location":"api/coordinate/#textual.coordinate.Coordinate.up","title":"up","text":"<pre><code>up()\n</code></pre> <p>Get the coordinate above.</p> <p>Returns:</p> Type Description <code>Coordinate</code> <p>The coordinate above.</p>"},{"location":"api/dom_node/","title":"textual.dom","text":"<p>The module contains <code>DOMNode</code>, the base class for any object within the Textual Document Object Model, which includes all Widgets, Screens, and Apps.</p>"},{"location":"api/dom_node/#textual.dom.QueryOneCacheKey","title":"QueryOneCacheKey  <code>module-attribute</code>","text":"<pre><code>QueryOneCacheKey = 'tuple[int, str, Type[Widget] | None]'\n</code></pre> <p>The key used to cache query_one results.</p>"},{"location":"api/dom_node/#textual.dom.WalkMethod","title":"WalkMethod  <code>module-attribute</code>","text":"<pre><code>WalkMethod = Literal['depth', 'breadth']\n</code></pre> <p>Valid walking methods for the <code>DOMNode.walk_children</code> method.</p>"},{"location":"api/dom_node/#textual.dom.BadIdentifier","title":"BadIdentifier","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised if you supply a <code>id</code> attribute or class name in the wrong format.</p>"},{"location":"api/dom_node/#textual.dom.DOMError","title":"DOMError","text":"<p>               Bases: <code>Exception</code></p> <p>Base exception class for errors relating to the DOM.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode","title":"DOMNode","text":"<pre><code>DOMNode(*, name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>MessagePump</code></p> <p>The base class for object that can be in the Textual DOM (App and Widget)</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.BINDING_GROUP_TITLE","title":"BINDING_GROUP_TITLE  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDING_GROUP_TITLE = None\n</code></pre> <p>Title of widget used where bindings are displayed (such as in the key panel).</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.HELP","title":"HELP  <code>class-attribute</code>","text":"<pre><code>HELP = None\n</code></pre> <p>Optional help text shown in help panel (Markdown format).</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.SCOPED_CSS","title":"SCOPED_CSS  <code>class-attribute</code>","text":"<pre><code>SCOPED_CSS = True\n</code></pre> <p>Should default css be limited to the widget type?</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.ancestors","title":"ancestors  <code>property</code>","text":"<pre><code>ancestors\n</code></pre> <p>A list of ancestor nodes found by tracing a path all the way back to App.</p> <p>Returns:</p> Type Description <code>list[DOMNode]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.ancestors_with_self","title":"ancestors_with_self  <code>property</code>","text":"<pre><code>ancestors_with_self\n</code></pre> <p>A list of ancestor nodes found by tracing a path all the way back to App.</p> Note <p>This is inclusive of <code>self</code>.</p> <p>Returns:</p> Type Description <code>list[DOMNode]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.auto_refresh","title":"auto_refresh  <code>property</code> <code>writable</code>","text":"<pre><code>auto_refresh\n</code></pre> <p>Number of seconds between automatic refresh, or <code>None</code> for no automatic refresh.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.background_colors","title":"background_colors  <code>property</code>","text":"<pre><code>background_colors\n</code></pre> <p>The background color and the color of the parent's background.</p> <p>Returns:</p> Type Description <code>tuple[Color, Color]</code> <p><code>(&lt;background color&gt;, &lt;color&gt;)</code></p>"},{"location":"api/dom_node/#textual.dom.DOMNode.children","title":"children  <code>property</code>","text":"<pre><code>children\n</code></pre> <p>A view on to the children.</p> <p>Returns:</p> Type Description <code>Sequence['Widget']</code> <p>The node's children.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.classes","title":"classes  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>classes = _ClassesDescriptor()\n</code></pre> <p>CSS class names for this node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.colors","title":"colors  <code>property</code>","text":"<pre><code>colors\n</code></pre> <p>The widget's background and foreground colors, and the parent's background and foreground colors.</p> <p>Returns:</p> Type Description <code>tuple[Color, Color, Color, Color]</code> <p><code>(&lt;parent background&gt;, &lt;parent color&gt;, &lt;background&gt;, &lt;color&gt;)</code></p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_identifier","title":"css_identifier  <code>property</code>","text":"<pre><code>css_identifier\n</code></pre> <p>A CSS selector that identifies this DOM node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_identifier_styled","title":"css_identifier_styled  <code>property</code>","text":"<pre><code>css_identifier_styled\n</code></pre> <p>A syntax highlighted CSS identifier.</p> <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_path_nodes","title":"css_path_nodes  <code>property</code>","text":"<pre><code>css_path_nodes\n</code></pre> <p>A list of nodes from the App to this node, forming a \"path\".</p> <p>Returns:</p> Type Description <code>list[DOMNode]</code> <p>A list of nodes, where the first item is the App, and the last is this node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.css_tree","title":"css_tree  <code>property</code>","text":"<pre><code>css_tree\n</code></pre> <p>A Rich tree to display the DOM, annotated with the node's CSS.</p> <p>Log this to visualize your app in the textual console.</p> Example <pre><code>self.log(self.css_tree)\n</code></pre> <p>Returns:</p> Type Description <code>Tree</code> <p>A Tree renderable.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.display","title":"display  <code>property</code> <code>writable</code>","text":"<pre><code>display\n</code></pre> <p>Should the DOM node be displayed?</p> <p>May be set to a boolean to show or hide the node, or to any valid value for the <code>display</code> rule.</p> Example <pre><code>my_widget.display = False  # Hide my_widget\n</code></pre>"},{"location":"api/dom_node/#textual.dom.DOMNode.displayed_children","title":"displayed_children  <code>property</code>","text":"<pre><code>displayed_children\n</code></pre> <p>The child nodes which will be displayed.</p> <p>Returns:</p> Type Description <code>list[Widget]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.id","title":"id  <code>property</code> <code>writable</code>","text":"<pre><code>id\n</code></pre> <p>The ID of this node, or None if the node has no ID.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.is_modal","title":"is_modal  <code>property</code>","text":"<pre><code>is_modal\n</code></pre> <p>Is the node a modal?</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.name","title":"name  <code>property</code>","text":"<pre><code>name\n</code></pre> <p>The name of the node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.parent","title":"parent  <code>property</code>","text":"<pre><code>parent\n</code></pre> <p>The parent node.</p> <p>All nodes have parent once added to the DOM, with the exception of the App which is the root node.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.pseudo_classes","title":"pseudo_classes  <code>property</code>","text":"<pre><code>pseudo_classes\n</code></pre> <p>A (frozen) set of all pseudo classes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.rich_style","title":"rich_style  <code>property</code>","text":"<pre><code>rich_style\n</code></pre> <p>Get a Rich Style object for this DOMNode.</p> <p>Returns:</p> Type Description <code>Style</code> <p>A Rich style.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.screen","title":"screen  <code>property</code>","text":"<pre><code>screen\n</code></pre> <p>The screen containing this node.</p> <p>Returns:</p> Type Description <code>'Screen[object]'</code> <p>A screen object.</p> <p>Raises:</p> Type Description <code>NoScreen</code> <p>If this node isn't mounted (and has no screen).</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.text_style","title":"text_style  <code>property</code>","text":"<pre><code>text_style\n</code></pre> <p>Get the text style object.</p> <p>A widget's style is influenced by its parent. for instance if a parent is bold, then the child will also be bold.</p> <p>Returns:</p> Type Description <code>Style</code> <p>A Rich Style.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.tree","title":"tree  <code>property</code>","text":"<pre><code>tree\n</code></pre> <p>A Rich tree to display the DOM.</p> <p>Log this to visualize your app in the textual console.</p> Example <pre><code>self.log(self.tree)\n</code></pre> <p>Returns:</p> Type Description <code>Tree</code> <p>A Tree renderable.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.visible","title":"visible  <code>property</code> <code>writable</code>","text":"<pre><code>visible\n</code></pre> <p>Is this widget visible in the DOM?</p> <p>If a widget hasn't had its visibility set explicitly, then it inherits it from its DOM ancestors.</p> <p>This may be set explicitly to override inherited values. The valid values include the valid values for the <code>visibility</code> rule and the booleans <code>True</code> or <code>False</code>, to set the widget to be visible or invisible, respectively.</p> <p>When a node is invisible, Textual will reserve space for it, but won't display anything.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.workers","title":"workers  <code>property</code>","text":"<pre><code>workers\n</code></pre> <p>The app's worker manager. Shortcut for <code>self.app.workers</code>.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.action_toggle","title":"action_toggle  <code>async</code>","text":"<pre><code>action_toggle(attribute_name)\n</code></pre> <p>Toggle an attribute on the node.</p> <p>Assumes the attribute is a bool.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute.</p> required"},{"location":"api/dom_node/#textual.dom.DOMNode.action_toggle(attribute_name)","title":"<code>attribute_name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.add_class","title":"add_class","text":"<pre><code>add_class(*class_names, update=True)\n</code></pre> <p>Add class names to this Node.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to add.</p> <code>()</code> <code>bool</code> <p>Also update styles.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.add_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.add_class(update)","title":"<code>update</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.automatic_refresh","title":"automatic_refresh","text":"<pre><code>automatic_refresh()\n</code></pre> <p>Perform an automatic refresh.</p> <p>This method is called when you set the <code>auto_refresh</code> attribute. You could implement this method if you want to perform additional work during an automatic refresh.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.check_action","title":"check_action","text":"<pre><code>check_action(action, parameters)\n</code></pre> <p>Check whether an action is enabled.</p> <p>Implement this method to add logic for dynamic actions / bindings.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The name of an action.</p> required <code>tuple[object, ...]</code> <p>A tuple of any action parameters.</p> required <p>Returns:</p> Type Description <code>bool | None</code> <p><code>True</code> if the action is enabled+visible, <code>False</code> if the action is disabled+hidden, <code>None</code> if the action is disabled+visible (grayed out in footer)</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.check_action(action)","title":"<code>action</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.check_action(parameters)","title":"<code>parameters</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.check_consume_key","title":"check_consume_key","text":"<pre><code>check_consume_key(key, character)\n</code></pre> <p>Check if the widget may consume the given key.</p> <p>This should be implemented in widgets that handle <code>Key</code> events and stop propagation (such as Input and TextArea).</p> <p>Implementing this method will hide key bindings from the footer and key panel that would be consumed by the focused widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A key identifier.</p> required <code>str | None</code> <p>A character associated with the key, or <code>None</code> if there isn't one.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may capture the key in its <code>Key</code> event handler, or <code>False</code> if it won't.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.check_consume_key(key)","title":"<code>key</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.check_consume_key(character)","title":"<code>character</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.data_bind","title":"data_bind","text":"<pre><code>data_bind(*reactives, **bind_vars)\n</code></pre> <p>Bind reactive data so that changes to a reactive automatically change the reactive on another widget.</p> <p>Reactives may be given as positional arguments or keyword arguments. See the guide on data binding.</p> Example <pre><code>def compose(self) -&gt; ComposeResult:\n    yield WorldClock(\"Europe/London\").data_bind(WorldClockApp.time)\n    yield WorldClock(\"Europe/Paris\").data_bind(WorldClockApp.time)\n    yield WorldClock(\"Asia/Tokyo\").data_bind(WorldClockApp.time)\n</code></pre> <p>Raises:</p> Type Description <code>ReactiveError</code> <p>If the data wasn't bound.</p> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.get_component_styles","title":"get_component_styles","text":"<pre><code>get_component_styles(*names)\n</code></pre> <p>Get a \"component\" styles object (must be defined in COMPONENT_CLASSES classvar).</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Names of the components.</p> <code>()</code> <p>Raises:</p> Type Description <code>KeyError</code> <p>If the component class doesn't exist.</p> <p>Returns:</p> Type Description <code>RenderStyles</code> <p>A Styles object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.get_component_styles(names)","title":"<code>names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.get_pseudo_classes","title":"get_pseudo_classes","text":"<pre><code>get_pseudo_classes()\n</code></pre> <p>Get any pseudo classes applicable to this Node, e.g. hover, focus.</p> <p>Returns:</p> Type Description <code>Iterable[str]</code> <p>Iterable of strings, such as a generator.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_class","title":"has_class","text":"<pre><code>has_class(*class_names)\n</code></pre> <p>Check if the Node has all the given class names.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to check.</p> <code>()</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the node has all the given class names, otherwise <code>False</code>.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_class","title":"has_pseudo_class","text":"<pre><code>has_pseudo_class(class_name)\n</code></pre> <p>Check the node has the given pseudo class.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The pseudo class to check for.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the DOM node has the pseudo class, <code>False</code> if not.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_class(class_name)","title":"<code>class_name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_classes","title":"has_pseudo_classes","text":"<pre><code>has_pseudo_classes(class_names)\n</code></pre> <p>Check the node has all the given pseudo classes.</p> <p>Parameters:</p> Name Type Description Default <code>set[str]</code> <p>Set of class names to check for.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if all pseudo class names are present.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.has_pseudo_classes(class_names)","title":"<code>class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.mutate_reactive","title":"mutate_reactive","text":"<pre><code>mutate_reactive(reactive)\n</code></pre> <p>Force an update to a mutable reactive.</p> Example <pre><code>self.reactive_name_list.append(\"Jessica\")\nself.mutate_reactive(MyClass.reactive_name_list)\n</code></pre> <p>Textual will automatically detect when a reactive is set to a new value, but it is unable to detect if a value is mutated (such as updating a list, dict, or attribute of an object). If you do wish to use a collection or other mutable object in a reactive, then you can call this method after your reactive is updated. This will ensure that all the reactive superpowers work.</p> <p>Note</p> <p>This method will cause watchers to be called, even if the value hasn't changed.</p> <p>Parameters:</p> Name Type Description Default <code>Reactive[ReactiveType]</code> <p>A reactive property (use the class scope syntax, i.e. <code>MyClass.my_reactive</code>).</p> required"},{"location":"api/dom_node/#textual.dom.DOMNode.mutate_reactive(reactive)","title":"<code>reactive</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.notify_style_update","title":"notify_style_update","text":"<pre><code>notify_style_update()\n</code></pre> <p>Called after styles are updated.</p> <p>Implement this in a subclass if you want to clear any cached data when the CSS is reloaded.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query","title":"query","text":"<pre><code>query(selector: str | None = None) -&gt; DOMQuery[Widget]\n</code></pre><pre><code>query(selector: type[QueryType]) -&gt; DOMQuery[QueryType]\n</code></pre> <pre><code>query(selector=None)\n</code></pre> <p>Query the DOM for children that match a selector or widget type.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType] | None</code> <p>A CSS selector, widget type, or <code>None</code> for all nodes.</p> <code>None</code> <p>Returns:</p> Type Description <code>DOMQuery[Widget] | DOMQuery[QueryType]</code> <p>A query object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_children","title":"query_children","text":"<pre><code>query_children(\n    selector: str | None = None,\n) -&gt; DOMQuery[Widget]\n</code></pre><pre><code>query_children(\n    selector: type[QueryType],\n) -&gt; DOMQuery[QueryType]\n</code></pre> <pre><code>query_children(selector=None)\n</code></pre> <p>Query the DOM for the immediate children that match a selector or widget type.</p> <p>Note that this will not return child widgets more than a single level deep. If you want to a query to potentially match all children in the widget tree, see query.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType] | None</code> <p>A CSS selector, widget type, or <code>None</code> for all nodes.</p> <code>None</code> <p>Returns:</p> Type Description <code>DOMQuery[Widget] | DOMQuery[QueryType]</code> <p>A query object.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query_children(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_exactly_one","title":"query_exactly_one","text":"<pre><code>query_exactly_one(selector: str) -&gt; Widget\n</code></pre><pre><code>query_exactly_one(selector: type[QueryType]) -&gt; QueryType\n</code></pre><pre><code>query_exactly_one(\n    selector: str, expect_type: type[QueryType]\n) -&gt; QueryType\n</code></pre> <pre><code>query_exactly_one(selector, expect_type=None)\n</code></pre> <p>Get a widget from this widget's children that matches a selector or widget type.</p> <p>Note</p> <p>This method is similar to query_one. The only difference is that it will raise <code>TooManyMatches</code> if there is more than a single match.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>A selector or widget type.</p> required <code>type[QueryType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If no node matches the query.</p> <code>TooManyMatches</code> <p>If there is more than one matching node in the query (and <code>exactly_one==True</code>).</p> <p>Returns:</p> Type Description <code>QueryType | Widget</code> <p>A widget matching the selector.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query_exactly_one(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_exactly_one(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_one","title":"query_one","text":"<pre><code>query_one(selector: str) -&gt; Widget\n</code></pre><pre><code>query_one(selector: type[QueryType]) -&gt; QueryType\n</code></pre><pre><code>query_one(\n    selector: str, expect_type: type[QueryType]\n) -&gt; QueryType\n</code></pre> <pre><code>query_one(selector, expect_type=None)\n</code></pre> <p>Get a widget from this widget's children that matches a selector or widget type.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>A selector or widget type.</p> required <code>type[QueryType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If no node matches the query.</p> <p>Returns:</p> Type Description <code>QueryType | Widget</code> <p>A widget matching the selector.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.query_one(selector)","title":"<code>selector</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.query_one(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.refresh_bindings","title":"refresh_bindings","text":"<pre><code>refresh_bindings()\n</code></pre> <p>Call to prompt widgets such as the Footer to update the display of key bindings.</p> <p>See actions for how to use this method.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.remove_class","title":"remove_class","text":"<pre><code>remove_class(*class_names, update=True)\n</code></pre> <p>Remove class names from this Node.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to remove.</p> <code>()</code> <code>bool</code> <p>Also update styles.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.remove_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.remove_class(update)","title":"<code>update</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.reset_styles","title":"reset_styles","text":"<pre><code>reset_styles()\n</code></pre> <p>Reset styles back to their initial state.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker","title":"run_worker","text":"<pre><code>run_worker(\n    work,\n    name=\"\",\n    group=\"default\",\n    description=\"\",\n    exit_on_error=True,\n    start=True,\n    exclusive=False,\n    thread=False,\n)\n</code></pre> <p>Run work in a worker.</p> <p>A worker runs a function, coroutine, or awaitable, in the background as an async task or as a thread.</p> <p>Parameters:</p> Name Type Description Default <code>WorkType[ResultType]</code> <p>A function, async function, or an awaitable object to run in a worker.</p> required <code>str | None</code> <p>A short string to identify the worker (in logs and debugging).</p> <code>''</code> <code>str</code> <p>A short string to identify a group of workers.</p> <code>'default'</code> <code>str</code> <p>A longer string to store longer information on the worker.</p> <code>''</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Start the worker immediately.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group.</p> <code>False</code> <code>bool</code> <p>Mark the worker as a thread worker.</p> <code>False</code> <p>Returns:</p> Type Description <code>Worker[ResultType]</code> <p>New Worker instance.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(work)","title":"<code>work</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(name)","title":"<code>name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(group)","title":"<code>group</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(description)","title":"<code>description</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(start)","title":"<code>start</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.run_worker(thread)","title":"<code>thread</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_class","title":"set_class","text":"<pre><code>set_class(add, *class_names, update=True)\n</code></pre> <p>Add or remove class(es) based on a condition.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Add the classes if True, otherwise remove them.</p> required <code>bool</code> <p>Also update styles.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_class(add)","title":"<code>add</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_class(update)","title":"<code>update</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_classes","title":"set_classes","text":"<pre><code>set_classes(classes)\n</code></pre> <p>Replace all classes.</p> <p>Parameters:</p> Name Type Description Default <code>str | Iterable[str]</code> <p>A string containing space separated classes, or an iterable of class names.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_classes(classes)","title":"<code>classes</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_reactive","title":"set_reactive","text":"<pre><code>set_reactive(reactive, value)\n</code></pre> <p>Sets a reactive value without invoking validators or watchers.</p> Example <pre><code>self.set_reactive(App.dark_mode, True)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Reactive[ReactiveType]</code> <p>A reactive property (use the class scope syntax, i.e. <code>MyClass.my_reactive</code>).</p> required <code>ReactiveType</code> <p>New value of reactive.</p> required <p>Raises:</p> Type Description <code>AttributeError</code> <p>If the first argument is not a reactive.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_reactive(reactive)","title":"<code>reactive</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_reactive(value)","title":"<code>value</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_styles","title":"set_styles","text":"<pre><code>set_styles(css=None, **update_styles)\n</code></pre> <p>Set custom styles on this object.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>Styles in CSS format.</p> <code>None</code> <code>Any</code> <p>Keyword arguments map style names onto style values.</p> <code>{}</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.set_styles(css)","title":"<code>css</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.set_styles(update_styles)","title":"<code>update_styles</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.sort_children","title":"sort_children","text":"<pre><code>sort_children(*, key=None, reverse=False)\n</code></pre> <p>Sort child widgets with an optional key function.</p> <p>If <code>key</code> is not provided then widgets will be sorted in the order they are constructed.</p> Example <pre><code># Sort widgets by name\nscreen.sort_children(key=lambda widget: widget.name or \"\")\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Callable[[Widget], SupportsRichComparison] | None</code> <p>A callable which accepts a widget and returns something that can be sorted, or <code>None</code> to sort without a key function.</p> <code>None</code> <code>bool</code> <p>Sort in descending order.</p> <code>False</code>"},{"location":"api/dom_node/#textual.dom.DOMNode.sort_children(key)","title":"<code>key</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.sort_children(reverse)","title":"<code>reverse</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.toggle_class","title":"toggle_class","text":"<pre><code>toggle_class(*class_names)\n</code></pre> <p>Toggle class names on this Node.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>CSS class names to toggle.</p> <code>()</code> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.toggle_class(*class_names)","title":"<code>*class_names</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children","title":"walk_children","text":"<pre><code>walk_children(\n    filter_type: type[WalkType],\n    *,\n    with_self: bool = False,\n    method: WalkMethod = \"depth\",\n    reverse: bool = False\n) -&gt; list[WalkType]\n</code></pre><pre><code>walk_children(\n    *,\n    with_self: bool = False,\n    method: WalkMethod = \"depth\",\n    reverse: bool = False\n) -&gt; list[DOMNode]\n</code></pre> <pre><code>walk_children(\n    filter_type=None,\n    *,\n    with_self=False,\n    method=\"depth\",\n    reverse=False\n)\n</code></pre> <p>Walk the subtree rooted at this node, and return every descendant encountered in a list.</p> <p>Parameters:</p> Name Type Description Default <code>type[WalkType] | None</code> <p>Filter only this type, or None for no filter.</p> <code>None</code> <code>bool</code> <p>Also yield self in addition to descendants.</p> <code>False</code> <code>WalkMethod</code> <p>One of \"depth\" or \"breadth\".</p> <code>'depth'</code> <code>bool</code> <p>Reverse the order (bottom up).</p> <code>False</code> <p>Returns:</p> Type Description <code>list[DOMNode] | list[WalkType]</code> <p>A list of nodes.</p>"},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(with_self)","title":"<code>with_self</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(method)","title":"<code>method</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.walk_children(reverse)","title":"<code>reverse</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch","title":"watch","text":"<pre><code>watch(obj, attribute_name, callback, init=True)\n</code></pre> <p>Watches for modifications to reactive attributes on another object.</p> Example <pre><code>def on_dark_change(old_value:bool, new_value:bool) -&gt; None:\n    # Called when app.dark changes.\n    print(\"App.dark went from {old_value} to {new_value}\")\n\nself.watch(self.app, \"dark\", self.on_dark_change, init=False)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>Object containing attribute to watch.</p> required <code>str</code> <p>Attribute to watch.</p> required <code>WatchCallbackType</code> <p>A callback to run when attribute changes.</p> required <code>bool</code> <p>Check watchers on first call.</p> <code>True</code>"},{"location":"api/dom_node/#textual.dom.DOMNode.watch(obj)","title":"<code>obj</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch(attribute_name)","title":"<code>attribute_name</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch(callback)","title":"<code>callback</code>","text":""},{"location":"api/dom_node/#textual.dom.DOMNode.watch(init)","title":"<code>init</code>","text":""},{"location":"api/dom_node/#textual.dom.NoScreen","title":"NoScreen","text":"<p>               Bases: <code>DOMError</code></p> <p>Raised when the node has no associated screen.</p>"},{"location":"api/dom_node/#textual.dom.check_identifiers","title":"check_identifiers","text":"<pre><code>check_identifiers(description, *names)\n</code></pre> <p>Validate identifier and raise an error if it fails.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Description of where identifier is used for error message.</p> required <code>str</code> <p>Identifiers to check.</p> <code>()</code>"},{"location":"api/dom_node/#textual.dom.check_identifiers(description)","title":"<code>description</code>","text":""},{"location":"api/dom_node/#textual.dom.check_identifiers(*names)","title":"<code>*names</code>","text":""},{"location":"api/errors/","title":"textual.errors","text":"<p>General exception classes.</p>"},{"location":"api/errors/#textual.errors.DuplicateKeyHandlers","title":"DuplicateKeyHandlers","text":"<p>               Bases: <code>TextualError</code></p> <p>More than one handler for a single key press.</p> <p>For example, if the handlers <code>key_ctrl_i</code> and <code>key_tab</code> were defined on the same widget, then this error would be raised.</p>"},{"location":"api/errors/#textual.errors.NoWidget","title":"NoWidget","text":"<p>               Bases: <code>TextualError</code></p> <p>Specified widget was not found.</p>"},{"location":"api/errors/#textual.errors.RenderError","title":"RenderError","text":"<p>               Bases: <code>TextualError</code></p> <p>An object could not be rendered.</p>"},{"location":"api/errors/#textual.errors.TextualError","title":"TextualError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for Textual errors.</p>"},{"location":"api/events/","title":"textual.events","text":"<p>Builtin events sent by Textual.</p> <p>Events may be marked as \"Bubbles\" and \"Verbose\". See the events guide for an explanation of bubbling. Verbose events are excluded from the textual console, unless you explicitly request them with the <code>-v</code> switch as follows:</p> <pre><code>textual console -v\n</code></pre>"},{"location":"api/events/#textual.events.AppBlur","title":"AppBlur","text":"<pre><code>AppBlur()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the app loses focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusOut</code>, or when running via textual-web.</p>"},{"location":"api/events/#textual.events.AppFocus","title":"AppFocus","text":"<pre><code>AppFocus()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the app has focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusIn</code>, or when running via textual-web.</p>"},{"location":"api/events/#textual.events.Blur","title":"Blur","text":"<pre><code>Blur()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is blurred (un-focussed).</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Callback","title":"Callback","text":"<pre><code>Callback(callback)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent by Textual to invoke a callback (see call_next and call_later).</p>"},{"location":"api/events/#textual.events.Click","title":"Click","text":"<pre><code>Click(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when a widget is clicked.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Compose","title":"Compose","text":"<pre><code>Compose()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to a widget to request it to compose and mount children.</p> <p>This event is used internally by Textual. You won't typically need to explicitly handle it,</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.CursorPosition","title":"CursorPosition  <code>dataclass</code>","text":"<pre><code>CursorPosition(x, y)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Internal event used to retrieve the terminal's cursor position.</p>"},{"location":"api/events/#textual.events.DeliveryComplete","title":"DeliveryComplete  <code>dataclass</code>","text":"<pre><code>DeliveryComplete(key, path=None, name=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to App when a file has been delivered.</p>"},{"location":"api/events/#textual.events.DeliveryComplete.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key\n</code></pre> <p>The delivery key associated with the delivery.</p> <p>This is the same key that was returned by <code>App.deliver_text</code>/<code>App.deliver_binary</code>.</p>"},{"location":"api/events/#textual.events.DeliveryComplete.name","title":"name  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>name = None\n</code></pre> <p>Optional name returned to the app to identify the download.</p>"},{"location":"api/events/#textual.events.DeliveryComplete.path","title":"path  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>path = None\n</code></pre> <p>The path where the file was saved, or <code>None</code> if the path is not available, for example if the file was delivered via web browser.</p>"},{"location":"api/events/#textual.events.DeliveryFailed","title":"DeliveryFailed  <code>dataclass</code>","text":"<pre><code>DeliveryFailed(key, exception, name=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to App when a file delivery fails.</p>"},{"location":"api/events/#textual.events.DeliveryFailed.exception","title":"exception  <code>instance-attribute</code>","text":"<pre><code>exception\n</code></pre> <p>The exception that was raised during the delivery.</p>"},{"location":"api/events/#textual.events.DeliveryFailed.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key\n</code></pre> <p>The delivery key associated with the delivery.</p>"},{"location":"api/events/#textual.events.DeliveryFailed.name","title":"name  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>name = None\n</code></pre> <p>Optional name returned to the app to identify the download.</p>"},{"location":"api/events/#textual.events.DescendantBlur","title":"DescendantBlur  <code>dataclass</code>","text":"<pre><code>DescendantBlur(widget)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a child widget is blurred.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.DescendantBlur.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was blurred (alias of <code>widget</code>).</p>"},{"location":"api/events/#textual.events.DescendantBlur.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was blurred.</p>"},{"location":"api/events/#textual.events.DescendantFocus","title":"DescendantFocus  <code>dataclass</code>","text":"<pre><code>DescendantFocus(widget)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a child widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.DescendantFocus.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was focused (alias of <code>widget</code>).</p>"},{"location":"api/events/#textual.events.DescendantFocus.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was focused.</p>"},{"location":"api/events/#textual.events.Enter","title":"Enter","text":"<pre><code>Enter(node)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved over a widget.</p> <p>Note that this event bubbles, so a widget may receive this event when the mouse moves over a child widget. Check the <code>node</code> attribute for the widget directly under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Enter.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node directly under the mouse.</p>"},{"location":"api/events/#textual.events.Event","title":"Event","text":"<pre><code>Event()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The base class for all events.</p>"},{"location":"api/events/#textual.events.Focus","title":"Focus","text":"<pre><code>Focus()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Hide","title":"Hide","text":"<pre><code>Hide()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget has been hidden.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Sent when any of the following conditions apply:</p> <ul> <li>The widget is removed from the DOM.</li> <li>The widget is no longer displayed because it has been scrolled or clipped from the terminal or its container.</li> <li>The widget has its <code>display</code> attribute set to <code>False</code>.</li> <li>The widget's <code>display</code> style is set to <code>\"none\"</code>.</li> </ul>"},{"location":"api/events/#textual.events.Idle","title":"Idle","text":"<pre><code>Idle()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when there are no more items in the message queue.</p> <p>This is a pseudo-event in that it is created by the Textual system and doesn't go through the usual message queue.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.InputEvent","title":"InputEvent","text":"<pre><code>InputEvent()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Base class for input events.</p>"},{"location":"api/events/#textual.events.Key","title":"Key","text":"<pre><code>Key(key, character)\n</code></pre> <p>               Bases: <code>InputEvent</code></p> <p>Sent when the user hits a key on the keyboard.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The key that was pressed.</p> required <code>str | None</code> <p>A printable character or <code>None</code> if it is not printable.</p> required"},{"location":"api/events/#textual.events.Key(key)","title":"<code>key</code>","text":""},{"location":"api/events/#textual.events.Key(character)","title":"<code>character</code>","text":""},{"location":"api/events/#textual.events.Key.aliases","title":"aliases  <code>instance-attribute</code>","text":"<pre><code>aliases = _get_key_aliases(key)\n</code></pre> <p>The aliases for the key, including the key itself.</p>"},{"location":"api/events/#textual.events.Key.character","title":"character  <code>instance-attribute</code>","text":"<pre><code>character = (\n    key\n    if len(key) == 1\n    else None if character is None else character\n)\n</code></pre> <p>A printable character or <code>None</code> if it is not printable.</p>"},{"location":"api/events/#textual.events.Key.is_printable","title":"is_printable  <code>property</code>","text":"<pre><code>is_printable\n</code></pre> <p>Check if the key is printable (produces a unicode character).</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the key is printable.</p>"},{"location":"api/events/#textual.events.Key.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key = key\n</code></pre> <p>The key that was pressed.</p>"},{"location":"api/events/#textual.events.Key.name","title":"name  <code>property</code>","text":"<pre><code>name\n</code></pre> <p>Name of a key suitable for use as a Python identifier.</p>"},{"location":"api/events/#textual.events.Key.name_aliases","title":"name_aliases  <code>property</code>","text":"<pre><code>name_aliases\n</code></pre> <p>The corresponding name for every alias in <code>aliases</code> list.</p>"},{"location":"api/events/#textual.events.Leave","title":"Leave","text":"<pre><code>Leave(node)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved away from a widget, or if a widget is programmatically disabled while hovered.</p> <p>Note that this widget bubbles, so a widget may receive Leave events for any child widgets. Check the <code>node</code> parameter for the original widget that was previously under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Leave.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was previously directly under the mouse.</p>"},{"location":"api/events/#textual.events.Load","title":"Load","text":"<pre><code>Load()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the App is running but before the terminal is in application mode.</p> <p>Use this event to run any setup that doesn't require any visuals such as loading configuration and binding keys.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Mount","title":"Mount","text":"<pre><code>Mount()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is mounted and may receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseCapture","title":"MouseCapture","text":"<pre><code>MouseCapture(mouse_position)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the mouse has been captured.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>When a mouse has been captured, all further mouse events will be sent to the capturing widget.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when captured.</p> required"},{"location":"api/events/#textual.events.MouseCapture(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"api/events/#textual.events.MouseCapture.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when captured.</p>"},{"location":"api/events/#textual.events.MouseDown","title":"MouseDown","text":"<pre><code>MouseDown(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is pressed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseEvent","title":"MouseEvent","text":"<pre><code>MouseEvent(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>InputEvent</code></p> <p>Sent in response to a mouse event.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The relative x coordinate.</p> required <code>int</code> <p>The relative y coordinate.</p> required <code>int</code> <p>Change in x since the last message.</p> required <code>int</code> <p>Change in y since the last message.</p> required <code>int</code> <p>Indexed of the pressed button.</p> required <code>bool</code> <p>True if the shift key is pressed.</p> required <code>bool</code> <p>True if the meta key is pressed.</p> required <code>bool</code> <p>True if the ctrl key is pressed.</p> required <code>int | None</code> <p>The absolute x coordinate.</p> <code>None</code> <code>int | None</code> <p>The absolute y coordinate.</p> <code>None</code> <code>Style | None</code> <p>The Rich Style under the mouse cursor.</p> <code>None</code>"},{"location":"api/events/#textual.events.MouseEvent(x)","title":"<code>x</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(y)","title":"<code>y</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(delta_x)","title":"<code>delta_x</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(delta_y)","title":"<code>delta_y</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(button)","title":"<code>button</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(shift)","title":"<code>shift</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(meta)","title":"<code>meta</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(ctrl)","title":"<code>ctrl</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(screen_x)","title":"<code>screen_x</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(screen_y)","title":"<code>screen_y</code>","text":""},{"location":"api/events/#textual.events.MouseEvent(style)","title":"<code>style</code>","text":""},{"location":"api/events/#textual.events.MouseEvent.button","title":"button  <code>instance-attribute</code>","text":"<pre><code>button = button\n</code></pre> <p>Indexed of the pressed button.</p>"},{"location":"api/events/#textual.events.MouseEvent.ctrl","title":"ctrl  <code>instance-attribute</code>","text":"<pre><code>ctrl = ctrl\n</code></pre> <p><code>True</code> if the ctrl key is pressed.</p>"},{"location":"api/events/#textual.events.MouseEvent.delta","title":"delta  <code>property</code>","text":"<pre><code>delta\n</code></pre> <p>Mouse coordinate delta (change since last event).</p>"},{"location":"api/events/#textual.events.MouseEvent.delta_x","title":"delta_x  <code>instance-attribute</code>","text":"<pre><code>delta_x = delta_x\n</code></pre> <p>Change in x since the last message.</p>"},{"location":"api/events/#textual.events.MouseEvent.delta_y","title":"delta_y  <code>instance-attribute</code>","text":"<pre><code>delta_y = delta_y\n</code></pre> <p>Change in y since the last message.</p>"},{"location":"api/events/#textual.events.MouseEvent.meta","title":"meta  <code>instance-attribute</code>","text":"<pre><code>meta = meta\n</code></pre> <p><code>True</code> if the meta key is pressed.</p>"},{"location":"api/events/#textual.events.MouseEvent.offset","title":"offset  <code>property</code>","text":"<pre><code>offset\n</code></pre> <p>The mouse coordinate as an offset.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Mouse coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.screen_offset","title":"screen_offset  <code>property</code>","text":"<pre><code>screen_offset\n</code></pre> <p>Mouse coordinate relative to the screen.</p>"},{"location":"api/events/#textual.events.MouseEvent.screen_x","title":"screen_x  <code>instance-attribute</code>","text":"<pre><code>screen_x = x if screen_x is None else screen_x\n</code></pre> <p>The absolute x coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.screen_y","title":"screen_y  <code>instance-attribute</code>","text":"<pre><code>screen_y = y if screen_y is None else screen_y\n</code></pre> <p>The absolute y coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.shift","title":"shift  <code>instance-attribute</code>","text":"<pre><code>shift = shift\n</code></pre> <p><code>True</code> if the shift key is pressed.</p>"},{"location":"api/events/#textual.events.MouseEvent.style","title":"style  <code>property</code> <code>writable</code>","text":"<pre><code>style\n</code></pre> <p>The (Rich) Style under the cursor.</p>"},{"location":"api/events/#textual.events.MouseEvent.x","title":"x  <code>instance-attribute</code>","text":"<pre><code>x = x\n</code></pre> <p>The relative x coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.y","title":"y  <code>instance-attribute</code>","text":"<pre><code>y = y\n</code></pre> <p>The relative y coordinate.</p>"},{"location":"api/events/#textual.events.MouseEvent.get_content_offset","title":"get_content_offset","text":"<pre><code>get_content_offset(widget)\n</code></pre> <p>Get offset within a widget's content area, or None if offset is not in content (i.e. padding or border).</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Widget receiving the event.</p> required <p>Returns:</p> Type Description <code>Offset | None</code> <p>An offset where the origin is at the top left of the content area.</p>"},{"location":"api/events/#textual.events.MouseEvent.get_content_offset(widget)","title":"<code>widget</code>","text":""},{"location":"api/events/#textual.events.MouseEvent.get_content_offset_capture","title":"get_content_offset_capture","text":"<pre><code>get_content_offset_capture(widget)\n</code></pre> <p>Get offset from a widget's content area.</p> <p>This method works even if the offset is outside the widget content region.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Widget receiving the event.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>An offset where the origin is at the top left of the content area.</p>"},{"location":"api/events/#textual.events.MouseEvent.get_content_offset_capture(widget)","title":"<code>widget</code>","text":""},{"location":"api/events/#textual.events.MouseMove","title":"MouseMove","text":"<pre><code>MouseMove(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse cursor moves.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseRelease","title":"MouseRelease","text":"<pre><code>MouseRelease(mouse_position)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Mouse has been released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when released.</p> required"},{"location":"api/events/#textual.events.MouseRelease(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"api/events/#textual.events.MouseRelease.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when released.</p>"},{"location":"api/events/#textual.events.MouseScrollDown","title":"MouseScrollDown","text":"<pre><code>MouseScrollDown(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseScrollUp","title":"MouseScrollUp","text":"<pre><code>MouseScrollUp(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled up.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.MouseUp","title":"MouseUp","text":"<pre><code>MouseUp(\n    x,\n    y,\n    delta_x,\n    delta_y,\n    button,\n    shift,\n    meta,\n    ctrl,\n    screen_x=None,\n    screen_y=None,\n    style=None,\n)\n</code></pre> <p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Paste","title":"Paste","text":"<pre><code>Paste(text)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Event containing text that was pasted into the Textual application. This event will only appear when running in a terminal emulator that supports bracketed paste mode. Textual will enable bracketed pastes when an app starts, and disable it when the app shuts down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text that has been pasted.</p> required"},{"location":"api/events/#textual.events.Paste(text)","title":"<code>text</code>","text":""},{"location":"api/events/#textual.events.Paste.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was pasted.</p>"},{"location":"api/events/#textual.events.Print","title":"Print","text":"<pre><code>Print(text, stderr=False)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to a widget that is capturing <code>print</code>.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text that was printed.</p> required <code>bool</code> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p> <code>False</code> Note <p>Python's <code>print</code> output can be captured with <code>App.begin_capture_print</code>.</p>"},{"location":"api/events/#textual.events.Print(text)","title":"<code>text</code>","text":""},{"location":"api/events/#textual.events.Print(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/events/#textual.events.Print.stderr","title":"stderr  <code>instance-attribute</code>","text":"<pre><code>stderr = stderr\n</code></pre> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p>"},{"location":"api/events/#textual.events.Print.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was printed.</p>"},{"location":"api/events/#textual.events.Ready","title":"Ready","text":"<pre><code>Ready()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to the <code>App</code> when the DOM is ready and the first frame has been displayed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Resize","title":"Resize","text":"<pre><code>Resize(size, virtual_size, container_size=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when the app or widget has been resized.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>The new size of the Widget.</p> required <code>Size</code> <p>The virtual size (scrollable size) of the Widget.</p> required <code>Size | None</code> <p>The size of the Widget's container widget.</p> <code>None</code>"},{"location":"api/events/#textual.events.Resize(size)","title":"<code>size</code>","text":""},{"location":"api/events/#textual.events.Resize(virtual_size)","title":"<code>virtual_size</code>","text":""},{"location":"api/events/#textual.events.Resize(container_size)","title":"<code>container_size</code>","text":""},{"location":"api/events/#textual.events.Resize.container_size","title":"container_size  <code>instance-attribute</code>","text":"<pre><code>container_size = (\n    size if container_size is None else container_size\n)\n</code></pre> <p>The size of the Widget's container widget.</p>"},{"location":"api/events/#textual.events.Resize.size","title":"size  <code>instance-attribute</code>","text":"<pre><code>size = size\n</code></pre> <p>The new size of the Widget.</p>"},{"location":"api/events/#textual.events.Resize.virtual_size","title":"virtual_size  <code>instance-attribute</code>","text":"<pre><code>virtual_size = virtual_size\n</code></pre> <p>The virtual size (scrollable size) of the Widget.</p>"},{"location":"api/events/#textual.events.ScreenResume","title":"ScreenResume","text":"<pre><code>ScreenResume()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to screen that has been made active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.ScreenSuspend","title":"ScreenSuspend","text":"<pre><code>ScreenSuspend()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent to screen when it is no longer active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Show","title":"Show","text":"<pre><code>Show()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is first displayed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Timer","title":"Timer","text":"<pre><code>Timer(timer, time, count=0, callback=None)\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent in response to a timer.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/events/#textual.events.Unmount","title":"Unmount","text":"<pre><code>Unmount()\n</code></pre> <p>               Bases: <code>Event</code></p> <p>Sent when a widget is unmounted and may no longer receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"api/filter/","title":"textual.filter","text":"<p>Filter classes.</p> <p>Note</p> <p>Filters are used internally, and not recommended for use by Textual app developers.</p> <p>Filters are used internally to process terminal output after it has been rendered. Currently this is used internally to convert the application to monochrome, when the NO_COLOR env var is set.</p> <p>In the future, this system will be used to implement accessibility features.</p>"},{"location":"api/filter/#textual.filter.NO_DIM","title":"NO_DIM  <code>module-attribute</code>","text":"<pre><code>NO_DIM = Style(dim=False)\n</code></pre> <p>A Style to set dim to False.</p>"},{"location":"api/filter/#textual.filter.ANSIToTruecolor","title":"ANSIToTruecolor","text":"<pre><code>ANSIToTruecolor(terminal_theme)\n</code></pre> <p>               Bases: <code>LineFilter</code></p> <p>Convert ANSI colors to their truecolor equivalents.</p> <p>Parameters:</p> Name Type Description Default <code>TerminalTheme</code> <p>A rich terminal theme.</p> required"},{"location":"api/filter/#textual.filter.ANSIToTruecolor(terminal_theme)","title":"<code>terminal_theme</code>","text":""},{"location":"api/filter/#textual.filter.ANSIToTruecolor.apply","title":"apply","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.ANSIToTruecolor.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.ANSIToTruecolor.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.ANSIToTruecolor.truecolor_style","title":"truecolor_style  <code>cached</code>","text":"<pre><code>truecolor_style(style)\n</code></pre> <p>Replace system colors with truecolor equivalent.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>Style to apply truecolor filter to.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>New style.</p>"},{"location":"api/filter/#textual.filter.ANSIToTruecolor.truecolor_style(style)","title":"<code>style</code>","text":""},{"location":"api/filter/#textual.filter.DimFilter","title":"DimFilter","text":"<pre><code>DimFilter(dim_factor=0.5)\n</code></pre> <p>               Bases: <code>LineFilter</code></p> <p>Replace dim attributes with modified colors.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>The factor to dim by; 0 is 100% background (i.e. invisible), 1.0 is no change.</p> <code>0.5</code>"},{"location":"api/filter/#textual.filter.DimFilter(dim_factor)","title":"<code>dim_factor</code>","text":""},{"location":"api/filter/#textual.filter.DimFilter.apply","title":"apply","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.DimFilter.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.DimFilter.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.LineFilter","title":"LineFilter","text":"<p>               Bases: <code>ABC</code></p> <p>Base class for a line filter.</p>"},{"location":"api/filter/#textual.filter.LineFilter.apply","title":"apply  <code>abstractmethod</code>","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.LineFilter.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.LineFilter.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.Monochrome","title":"Monochrome","text":"<p>               Bases: <code>LineFilter</code></p> <p>Convert all colors to monochrome.</p>"},{"location":"api/filter/#textual.filter.Monochrome.apply","title":"apply","text":"<pre><code>apply(segments, background)\n</code></pre> <p>Transform a list of segments.</p> <p>Parameters:</p> Name Type Description Default <code>list[Segment]</code> <p>A list of segments.</p> required <code>Color</code> <p>The background color.</p> required <p>Returns:</p> Type Description <code>list[Segment]</code> <p>A new list of segments.</p>"},{"location":"api/filter/#textual.filter.Monochrome.apply(segments)","title":"<code>segments</code>","text":""},{"location":"api/filter/#textual.filter.Monochrome.apply(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.dim_color","title":"dim_color  <code>cached</code>","text":"<pre><code>dim_color(background, color, factor)\n</code></pre> <p>Dim a color by blending towards the background</p> <p>Parameters:</p> Name Type Description Default <code>Color</code> <p>background color.</p> required <code>Color</code> <p>Foreground color.</p> required <code>float</code> <p>Blend factor</p> required <p>Returns:</p> Type Description <code>Color</code> <p>New dimmer color.</p>"},{"location":"api/filter/#textual.filter.dim_color(background)","title":"<code>background</code>","text":""},{"location":"api/filter/#textual.filter.dim_color(color)","title":"<code>color</code>","text":""},{"location":"api/filter/#textual.filter.dim_color(factor)","title":"<code>factor</code>","text":""},{"location":"api/filter/#textual.filter.dim_style","title":"dim_style  <code>cached</code>","text":"<pre><code>dim_style(style, background, factor)\n</code></pre> <p>Replace dim attribute with a dim color.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>Style to dim.</p> required <code>float</code> <p>Blend factor.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>New dimmed style.</p>"},{"location":"api/filter/#textual.filter.dim_style(style)","title":"<code>style</code>","text":""},{"location":"api/filter/#textual.filter.dim_style(factor)","title":"<code>factor</code>","text":""},{"location":"api/filter/#textual.filter.monochrome_style","title":"monochrome_style  <code>cached</code>","text":"<pre><code>monochrome_style(style)\n</code></pre> <p>Convert colors in a style to monochrome.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>A Rich Style.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>A new Rich style.</p>"},{"location":"api/filter/#textual.filter.monochrome_style(style)","title":"<code>style</code>","text":""},{"location":"api/fuzzy_matcher/","title":"textual.fuzzy","text":"<p>Fuzzy matcher.</p> <p>This class is used by the command palette to match search terms.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher","title":"Matcher","text":"<pre><code>Matcher(query, *, match_style=None, case_sensitive=False)\n</code></pre> <p>A fuzzy matcher.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A query as typed in by the user.</p> required <code>Style | None</code> <p>The style to use to highlight matched portions of a string.</p> <code>None</code> <code>bool</code> <p>Should matching be case sensitive?</p> <code>False</code>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher(query)","title":"<code>query</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher(match_style)","title":"<code>match_style</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.case_sensitive","title":"case_sensitive  <code>property</code>","text":"<pre><code>case_sensitive\n</code></pre> <p>Is this matcher case sensitive?</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.match_style","title":"match_style  <code>property</code>","text":"<pre><code>match_style\n</code></pre> <p>The style that will be used to highlight hits in the matched text.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.query","title":"query  <code>property</code>","text":"<pre><code>query\n</code></pre> <p>The query string to look for.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.query_pattern","title":"query_pattern  <code>property</code>","text":"<pre><code>query_pattern\n</code></pre> <p>The regular expression pattern built from the query.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.highlight","title":"highlight","text":"<pre><code>highlight(candidate)\n</code></pre> <p>Highlight the candidate with the fuzzy match.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A [rich.text.Text][<code>Text</code>] object with highlighted matches.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.highlight(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.match","title":"match","text":"<pre><code>match(candidate)\n</code></pre> <p>Match the candidate against the query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Candidate string to match against the query.</p> required <p>Returns:</p> Type Description <code>float</code> <p>Strength of the match from 0 to 1.</p>"},{"location":"api/fuzzy_matcher/#textual.fuzzy.Matcher.match(candidate)","title":"<code>candidate</code>","text":""},{"location":"api/geometry/","title":"textual.geometry","text":"<p>Functions and classes to manage terminal geometry (anything involving coordinates or dimensions).</p>"},{"location":"api/geometry/#textual.geometry.NULL_OFFSET","title":"NULL_OFFSET  <code>module-attribute</code>","text":"<pre><code>NULL_OFFSET = Offset(0, 0)\n</code></pre> <p>An offset constant for (0, 0).</p>"},{"location":"api/geometry/#textual.geometry.NULL_REGION","title":"NULL_REGION  <code>module-attribute</code>","text":"<pre><code>NULL_REGION = Region(0, 0, 0, 0)\n</code></pre> <p>A Region constant for a null region (at the origin, with both width and height set to zero).</p>"},{"location":"api/geometry/#textual.geometry.NULL_SIZE","title":"NULL_SIZE  <code>module-attribute</code>","text":"<pre><code>NULL_SIZE = Size(0, 0)\n</code></pre> <p>A Size constant for a null size (with zero area).</p>"},{"location":"api/geometry/#textual.geometry.NULL_SPACING","title":"NULL_SPACING  <code>module-attribute</code>","text":"<pre><code>NULL_SPACING = Spacing(0, 0, 0, 0)\n</code></pre> <p>A Spacing constant for no space.</p>"},{"location":"api/geometry/#textual.geometry.SpacingDimensions","title":"SpacingDimensions  <code>module-attribute</code>","text":"<pre><code>SpacingDimensions = Union[\n    int,\n    Tuple[int],\n    Tuple[int, int],\n    Tuple[int, int, int, int],\n]\n</code></pre> <p>The valid ways in which you can specify spacing.</p>"},{"location":"api/geometry/#textual.geometry.Offset","title":"Offset","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A cell offset defined by x and y coordinates.</p> <p>Offsets are typically relative to the top left of the terminal or other container.</p> <p>Textual prefers the names <code>x</code> and <code>y</code>, but you could consider <code>x</code> to be the column and <code>y</code> to be the row.</p> <p>Offsets support addition, subtraction, multiplication, and negation.</p> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Offset\n&gt;&gt;&gt; offset = Offset(3, 2)\n&gt;&gt;&gt; offset\nOffset(x=3, y=2)\n&gt;&gt;&gt; offset += Offset(10, 0)\n&gt;&gt;&gt; offset\nOffset(x=13, y=2)\n&gt;&gt;&gt; -offset\nOffset(x=-13, y=-2)\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Offset.clamped","title":"clamped  <code>property</code>","text":"<pre><code>clamped\n</code></pre> <p>This offset with <code>x</code> and <code>y</code> restricted to values above zero.</p>"},{"location":"api/geometry/#textual.geometry.Offset.is_origin","title":"is_origin  <code>property</code>","text":"<pre><code>is_origin\n</code></pre> <p>Is the offset at (0, 0)?</p>"},{"location":"api/geometry/#textual.geometry.Offset.x","title":"x  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>x = 0\n</code></pre> <p>Offset in the x-axis (horizontal)</p>"},{"location":"api/geometry/#textual.geometry.Offset.y","title":"y  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>y = 0\n</code></pre> <p>Offset in the y-axis (vertical)</p>"},{"location":"api/geometry/#textual.geometry.Offset.blend","title":"blend","text":"<pre><code>blend(destination, factor)\n</code></pre> <p>Calculate a new offset on a line between this offset and a destination offset.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>Point where factor would be 1.0.</p> required <code>float</code> <p>A value between 0 and 1.0.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>A new point on a line between self and destination.</p>"},{"location":"api/geometry/#textual.geometry.Offset.blend(destination)","title":"<code>destination</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.blend(factor)","title":"<code>factor</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.clamp","title":"clamp","text":"<pre><code>clamp(width, height)\n</code></pre> <p>Clamp the offset to fit within a rectangle of width x height.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Width to clamp.</p> required <code>int</code> <p>Height to clamp.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>A new offset.</p>"},{"location":"api/geometry/#textual.geometry.Offset.clamp(width)","title":"<code>width</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.clamp(height)","title":"<code>height</code>","text":""},{"location":"api/geometry/#textual.geometry.Offset.get_distance_to","title":"get_distance_to","text":"<pre><code>get_distance_to(other)\n</code></pre> <p>Get the distance to another offset.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>An offset.</p> required <p>Returns:</p> Type Description <code>float</code> <p>Distance to other offset.</p>"},{"location":"api/geometry/#textual.geometry.Offset.get_distance_to(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Region","title":"Region","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Defines a rectangular region.</p> <p>A Region consists of a coordinate (x and y) and dimensions (width and height).</p> <pre><code>  (x, y)\n    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u25b2\n    \u2502                    \u2502 \u2502\n    \u2502                    \u2502 \u2502\n    \u2502                    \u2502 height\n    \u2502                    \u2502 \u2502\n    \u2502                    \u2502 \u2502\n    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u25bc\n    \u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2500 width \u2500\u2500\u2500\u2500\u2500\u2500\u25b6\n</code></pre> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Region\n&gt;&gt;&gt; region = Region(4, 5, 20, 10)\n&gt;&gt;&gt; region\nRegion(x=4, y=5, width=20, height=10)\n&gt;&gt;&gt; region.area\n200\n&gt;&gt;&gt; region.size\nSize(width=20, height=10)\n&gt;&gt;&gt; region.offset\nOffset(x=4, y=5)\n&gt;&gt;&gt; region.contains(1, 2)\nFalse\n&gt;&gt;&gt; region.contains(10, 8)\nTrue\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Region.area","title":"area  <code>property</code>","text":"<pre><code>area\n</code></pre> <p>The area under the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.bottom","title":"bottom  <code>property</code>","text":"<pre><code>bottom\n</code></pre> <p>Maximum Y value (non inclusive).</p>"},{"location":"api/geometry/#textual.geometry.Region.bottom_left","title":"bottom_left  <code>property</code>","text":"<pre><code>bottom_left\n</code></pre> <p>Bottom left offset of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.bottom_right","title":"bottom_right  <code>property</code>","text":"<pre><code>bottom_right\n</code></pre> <p>Bottom right offset of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.center","title":"center  <code>property</code>","text":"<pre><code>center\n</code></pre> <p>The center of the region.</p> <p>Note, that this does not return an <code>Offset</code>, because the center may not be an integer coordinate.</p> <p>Returns:</p> Type Description <code>tuple[float, float]</code> <p>Tuple of floats.</p>"},{"location":"api/geometry/#textual.geometry.Region.column_range","title":"column_range  <code>property</code>","text":"<pre><code>column_range\n</code></pre> <p>A range object for X coordinates.</p>"},{"location":"api/geometry/#textual.geometry.Region.column_span","title":"column_span  <code>property</code>","text":"<pre><code>column_span\n</code></pre> <p>A pair of integers for the start and end columns (x coordinates) in this region.</p> <p>The end value is exclusive.</p>"},{"location":"api/geometry/#textual.geometry.Region.corners","title":"corners  <code>property</code>","text":"<pre><code>corners\n</code></pre> <p>The top left and bottom right coordinates as a tuple of four integers.</p>"},{"location":"api/geometry/#textual.geometry.Region.height","title":"height  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>height = 0\n</code></pre> <p>The height of the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.line_range","title":"line_range  <code>property</code>","text":"<pre><code>line_range\n</code></pre> <p>A range object for Y coordinates.</p>"},{"location":"api/geometry/#textual.geometry.Region.line_span","title":"line_span  <code>property</code>","text":"<pre><code>line_span\n</code></pre> <p>A pair of integers for the start and end lines (y coordinates) in this region.</p> <p>The end value is exclusive.</p>"},{"location":"api/geometry/#textual.geometry.Region.offset","title":"offset  <code>property</code>","text":"<pre><code>offset\n</code></pre> <p>The top left corner of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.reset_offset","title":"reset_offset  <code>property</code>","text":"<pre><code>reset_offset\n</code></pre> <p>An region of the same size at (0, 0).</p> <p>Returns:</p> Type Description <code>Region</code> <p>A region at the origin.</p>"},{"location":"api/geometry/#textual.geometry.Region.right","title":"right  <code>property</code>","text":"<pre><code>right\n</code></pre> <p>Maximum X value (non inclusive).</p>"},{"location":"api/geometry/#textual.geometry.Region.size","title":"size  <code>property</code>","text":"<pre><code>size\n</code></pre> <p>Get the size of the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.top_right","title":"top_right  <code>property</code>","text":"<pre><code>top_right\n</code></pre> <p>Top right offset of the region.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.width","title":"width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>width = 0\n</code></pre> <p>The width of the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.x","title":"x  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>x = 0\n</code></pre> <p>Offset in the x-axis (horizontal).</p>"},{"location":"api/geometry/#textual.geometry.Region.y","title":"y  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>y = 0\n</code></pre> <p>Offset in the y-axis (vertical).</p>"},{"location":"api/geometry/#textual.geometry.Region.at_offset","title":"at_offset","text":"<pre><code>at_offset(offset)\n</code></pre> <p>Get a new Region with the same size at a given offset.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>An offset.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>New Region with adjusted offset.</p>"},{"location":"api/geometry/#textual.geometry.Region.at_offset(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.clip","title":"clip","text":"<pre><code>clip(width, height)\n</code></pre> <p>Clip this region to fit within width, height.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Width of bounds.</p> required <code>int</code> <p>Height of bounds.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>Clipped region.</p>"},{"location":"api/geometry/#textual.geometry.Region.clip(width)","title":"<code>width</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.clip(height)","title":"<code>height</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains","title":"contains","text":"<pre><code>contains(x, y)\n</code></pre> <p>Check if a point is in the region.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.contains(x)","title":"<code>x</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains(y)","title":"<code>y</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains_point","title":"contains_point","text":"<pre><code>contains_point(point)\n</code></pre> <p>Check if a point is in the region.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>A tuple of x and y coordinates.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Region.contains_point(point)","title":"<code>point</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.contains_region","title":"contains_region  <code>cached</code>","text":"<pre><code>contains_region(other)\n</code></pre> <p>Check if a region is entirely contained within this region.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A region.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the other region fits perfectly within this region.</p>"},{"location":"api/geometry/#textual.geometry.Region.contains_region(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.crop_size","title":"crop_size","text":"<pre><code>crop_size(size)\n</code></pre> <p>Get a region with the same offset, with a size no larger than <code>size</code>.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Maximum width and height (WIDTH, HEIGHT).</p> required <p>Returns:</p> Type Description <code>Region</code> <p>New region that could fit within <code>size</code>.</p>"},{"location":"api/geometry/#textual.geometry.Region.crop_size(size)","title":"<code>size</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.expand","title":"expand","text":"<pre><code>expand(size)\n</code></pre> <p>Increase the size of the region by adding a border.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Additional width and height.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region.</p>"},{"location":"api/geometry/#textual.geometry.Region.expand(size)","title":"<code>size</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners","title":"from_corners  <code>classmethod</code>","text":"<pre><code>from_corners(x1, y1, x2, y2)\n</code></pre> <p>Construct a Region form the top left and bottom right corners.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Top left x.</p> required <code>int</code> <p>Top left y.</p> required <code>int</code> <p>Bottom right x.</p> required <code>int</code> <p>Bottom right y.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region.</p>"},{"location":"api/geometry/#textual.geometry.Region.from_corners(x1)","title":"<code>x1</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners(y1)","title":"<code>y1</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners(x2)","title":"<code>x2</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_corners(y2)","title":"<code>y2</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_offset","title":"from_offset  <code>classmethod</code>","text":"<pre><code>from_offset(offset, size)\n</code></pre> <p>Create a region from offset and size.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Offset (top left point).</p> required <code>tuple[int, int]</code> <p>Dimensions of region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A region instance.</p>"},{"location":"api/geometry/#textual.geometry.Region.from_offset(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_offset(size)","title":"<code>size</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.from_union","title":"from_union  <code>classmethod</code>","text":"<pre><code>from_union(regions)\n</code></pre> <p>Create a Region from the union of other regions.</p> <p>Parameters:</p> Name Type Description Default <code>Collection[Region]</code> <p>One or more regions.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A Region that encloses all other regions.</p>"},{"location":"api/geometry/#textual.geometry.Region.from_union(regions)","title":"<code>regions</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible","title":"get_scroll_to_visible  <code>classmethod</code>","text":"<pre><code>get_scroll_to_visible(window_region, region, *, top=False)\n</code></pre> <p>Calculate the smallest offset required to translate a window so that it contains another region.</p> <p>This method is used to calculate the required offset to scroll something in to view.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>The window region.</p> required <code>Region</code> <p>The region to move inside the window.</p> required <code>bool</code> <p>Get offset to top of window.</p> <code>False</code> <p>Returns:</p> Type Description <code>Offset</code> <p>An offset required to add to region to move it inside window_region.</p>"},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible(window_region)","title":"<code>window_region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_scroll_to_visible(top)","title":"<code>top</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.get_spacing_between","title":"get_spacing_between","text":"<pre><code>get_spacing_between(region)\n</code></pre> <p>Get spacing between two regions.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Another region.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p>Spacing that if subtracted from <code>self</code> produces <code>region</code>.</p>"},{"location":"api/geometry/#textual.geometry.Region.get_spacing_between(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.grow","title":"grow  <code>cached</code>","text":"<pre><code>grow(margin)\n</code></pre> <p>Grow a region by adding spacing.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int, int, int]</code> <p>Grow space by <code>(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code>.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>New region.</p>"},{"location":"api/geometry/#textual.geometry.Region.grow(margin)","title":"<code>margin</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.inflect","title":"inflect","text":"<pre><code>inflect(x_axis=+1, y_axis=+1, margin=None)\n</code></pre> <p>Inflect a region around one or both axis.</p> <p>The <code>x_axis</code> and <code>y_axis</code> parameters define which direction to move the region. A positive value will move the region right or down, a negative value will move the region left or up. A value of <code>0</code> will leave that axis unmodified.</p> <pre><code>\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557    \u2502\n\u2551          \u2551\n\u2551   Self   \u2551    \u2502\n\u2551          \u2551\n\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d    \u2502\n\n\u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u253c \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500\n\n                \u2502    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n                     \u2502          \u2502\n                \u2502    \u2502  Result  \u2502\n                     \u2502          \u2502\n                \u2502    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>+1 to inflect in the positive direction, -1 to inflect in the negative direction.</p> <code>+1</code> <code>int</code> <p>+1 to inflect in the positive direction, -1 to inflect in the negative direction.</p> <code>+1</code> <code>Spacing | None</code> <p>Additional margin.</p> <code>None</code> <p>Returns:</p> Type Description <code>Region</code> <p>A new region.</p>"},{"location":"api/geometry/#textual.geometry.Region.inflect(x_axis)","title":"<code>x_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.inflect(y_axis)","title":"<code>y_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.inflect(margin)","title":"<code>margin</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.intersection","title":"intersection  <code>cached</code>","text":"<pre><code>intersection(region)\n</code></pre> <p>Get the overlapping portion of the two regions.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A region that overlaps this region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region that covers when the two regions overlap.</p>"},{"location":"api/geometry/#textual.geometry.Region.intersection(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.overlaps","title":"overlaps  <code>cached</code>","text":"<pre><code>overlaps(other)\n</code></pre> <p>Check if another region overlaps this region.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A Region.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if other region shares any cells with this region.</p>"},{"location":"api/geometry/#textual.geometry.Region.overlaps(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.shrink","title":"shrink  <code>cached</code>","text":"<pre><code>shrink(margin)\n</code></pre> <p>Shrink a region by subtracting spacing.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int, int, int]</code> <p>Shrink space by <code>(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code>.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>The new, smaller region.</p>"},{"location":"api/geometry/#textual.geometry.Region.shrink(margin)","title":"<code>margin</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split","title":"split  <code>cached</code>","text":"<pre><code>split(cut_x, cut_y)\n</code></pre> <p>Split a region in to 4 from given x and y offsets (cuts).</p> <pre><code>           cut_x \u2193\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n        \u2502        \u2502 \u2502   \u2502\n        \u2502    0   \u2502 \u2502 1 \u2502\n        \u2502        \u2502 \u2502   \u2502\ncut_y \u2192 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n        \u2502    2   \u2502 \u2502 3 \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Offset from self.x where the cut should be made. If negative, the cut is taken from the right edge.</p> required <code>int</code> <p>Offset from self.y where the cut should be made. If negative, the cut is taken from the lower edge.</p> required <p>Returns:</p> Type Description <code>tuple[Region, Region, Region, Region]</code> <p>Four new regions which add up to the original (self).</p>"},{"location":"api/geometry/#textual.geometry.Region.split(cut_x)","title":"<code>cut_x</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split(cut_y)","title":"<code>cut_y</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split_horizontal","title":"split_horizontal  <code>cached</code>","text":"<pre><code>split_horizontal(cut)\n</code></pre> <p>Split a region in to two, from a given y offset.</p> <pre><code>            \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n            \u2502    0    \u2502\n            \u2502         \u2502\n    cut \u2192   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n            \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n            \u2502    1    \u2502\n            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>An offset from self.y where the cut should be made. May be negative, for the offset to start from the lower edge.</p> required <p>Returns:</p> Type Description <code>tuple[Region, Region]</code> <p>Two regions, which add up to the original (self).</p>"},{"location":"api/geometry/#textual.geometry.Region.split_horizontal(cut)","title":"<code>cut</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.split_vertical","title":"split_vertical  <code>cached</code>","text":"<pre><code>split_vertical(cut)\n</code></pre> <p>Split a region in to two, from a given x offset.</p> <pre><code>         cut \u2193\n    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2510\n    \u2502    0   \u2502\u2502 1 \u2502\n    \u2502        \u2502\u2502   \u2502\n    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>An offset from self.x where the cut should be made. If cut is negative, it is taken from the right edge.</p> required <p>Returns:</p> Type Description <code>tuple[Region, Region]</code> <p>Two regions, which add up to the original (self).</p>"},{"location":"api/geometry/#textual.geometry.Region.split_vertical(cut)","title":"<code>cut</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate","title":"translate  <code>cached</code>","text":"<pre><code>translate(offset)\n</code></pre> <p>Move the offset of the Region.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>Offset to add to region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>A new region shifted by (x, y).</p>"},{"location":"api/geometry/#textual.geometry.Region.translate(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate_inside","title":"translate_inside","text":"<pre><code>translate_inside(container, x_axis=True, y_axis=True)\n</code></pre> <p>Translate this region, so it fits within a container.</p> <p>This will ensure that there is as little overlap as possible. The top left of the returned region is guaranteed to be within the container.</p> <pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510         \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502    container     \u2502         \u2502    container     \u2502\n\u2502                  \u2502         \u2502    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                  \u2502   \u2500\u2500\u25b6   \u2502    \u2502    return   \u2502\n\u2502       \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2510      \u2502    \u2502             \u2502\n\u2502       \u2502    self     \u2502      \u2502    \u2502             \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524             \u2502      \u2514\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n        \u2502             \u2502\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A container region.</p> required <code>bool</code> <p>Allow translation of X axis.</p> <code>True</code> <code>bool</code> <p>Allow translation of Y axis.</p> <code>True</code> <p>Returns:</p> Type Description <code>Region</code> <p>A new region with same dimensions that fits with inside container.</p>"},{"location":"api/geometry/#textual.geometry.Region.translate_inside(container)","title":"<code>container</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate_inside(x_axis)","title":"<code>x_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.translate_inside(y_axis)","title":"<code>y_axis</code>","text":""},{"location":"api/geometry/#textual.geometry.Region.union","title":"union  <code>cached</code>","text":"<pre><code>union(region)\n</code></pre> <p>Get the smallest region that contains both regions.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Another region.</p> required <p>Returns:</p> Type Description <code>Region</code> <p>An optimally sized region to cover both regions.</p>"},{"location":"api/geometry/#textual.geometry.Region.union(region)","title":"<code>region</code>","text":""},{"location":"api/geometry/#textual.geometry.Size","title":"Size","text":"<p>               Bases: <code>NamedTuple</code></p> <p>The dimensions (width and height) of a rectangular region.</p> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Size\n&gt;&gt;&gt; size = Size(2, 3)\n&gt;&gt;&gt; size\nSize(width=2, height=3)\n&gt;&gt;&gt; size.area\n6\n&gt;&gt;&gt; size + Size(10, 20)\nSize(width=12, height=23)\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Size.area","title":"area  <code>property</code>","text":"<pre><code>area\n</code></pre> <p>The area occupied by a region of this size.</p>"},{"location":"api/geometry/#textual.geometry.Size.height","title":"height  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>height = 0\n</code></pre> <p>The height in cells.</p>"},{"location":"api/geometry/#textual.geometry.Size.line_range","title":"line_range  <code>property</code>","text":"<pre><code>line_range\n</code></pre> <p>A range object that covers values between 0 and <code>height</code>.</p>"},{"location":"api/geometry/#textual.geometry.Size.region","title":"region  <code>property</code>","text":"<pre><code>region\n</code></pre> <p>A region of the same size, at the origin.</p>"},{"location":"api/geometry/#textual.geometry.Size.width","title":"width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>width = 0\n</code></pre> <p>The width in cells.</p>"},{"location":"api/geometry/#textual.geometry.Size.clamp_offset","title":"clamp_offset","text":"<pre><code>clamp_offset(offset)\n</code></pre> <p>Clamp an offset to fit within the width x height.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>An offset.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>A new offset that will fit inside the dimensions defined in the Size.</p>"},{"location":"api/geometry/#textual.geometry.Size.clamp_offset(offset)","title":"<code>offset</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.contains","title":"contains","text":"<pre><code>contains(x, y)\n</code></pre> <p>Check if a point is in area defined by the size.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Size.contains(x)","title":"<code>x</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.contains(y)","title":"<code>y</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.contains_point","title":"contains_point","text":"<pre><code>contains_point(point)\n</code></pre> <p>Check if a point is in the area defined by the size.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[int, int]</code> <p>A tuple of x and y coordinates.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the point is within the region.</p>"},{"location":"api/geometry/#textual.geometry.Size.contains_point(point)","title":"<code>point</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.with_height","title":"with_height","text":"<pre><code>with_height(height)\n</code></pre> <p>Get a new Size with just the height changed.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New height.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>New Size instance.</p>"},{"location":"api/geometry/#textual.geometry.Size.with_height(height)","title":"<code>height</code>","text":""},{"location":"api/geometry/#textual.geometry.Size.with_width","title":"with_width","text":"<pre><code>with_width(width)\n</code></pre> <p>Get a new Size with just the width changed.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New width.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>New Size instance.</p>"},{"location":"api/geometry/#textual.geometry.Size.with_width(width)","title":"<code>width</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing","title":"Spacing","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Stores spacing around a widget, such as padding and border.</p> <p>Spacing is defined by four integers for the space at the top, right, bottom, and left of a region.</p> <pre><code>\u250c \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500\u25b2\u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2510\n               \u2502 top\n\u2502        \u250f\u2501\u2501\u2501\u2501\u2501\u25bc\u2501\u2501\u2501\u2501\u2501\u2501\u2513         \u2502\n \u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\u2503            \u2503\u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\n\u2502  left  \u2503            \u2503 right   \u2502\n         \u2503            \u2503\n\u2502        \u2517\u2501\u2501\u2501\u2501\u2501\u25b2\u2501\u2501\u2501\u2501\u2501\u2501\u251b         \u2502\n               \u2502 bottom\n\u2514 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500\u25bc\u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2500 \u2518\n</code></pre> Example <pre><code>&gt;&gt;&gt; from textual.geometry import Region, Spacing\n&gt;&gt;&gt; region = Region(2, 3, 20, 10)\n&gt;&gt;&gt; spacing = Spacing(1, 2, 3, 4)\n&gt;&gt;&gt; region.grow(spacing)\nRegion(x=-2, y=2, width=26, height=14)\n&gt;&gt;&gt; region.shrink(spacing)\nRegion(x=6, y=4, width=14, height=6)\n&gt;&gt;&gt; spacing.css\n'1 2 3 4'\n</code></pre>"},{"location":"api/geometry/#textual.geometry.Spacing.bottom","title":"bottom  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>bottom = 0\n</code></pre> <p>Space from the bottom of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.bottom_right","title":"bottom_right  <code>property</code>","text":"<pre><code>bottom_right\n</code></pre> <p>A pair of integers for the right, and bottom space.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>A string containing the spacing in CSS format.</p> <p>For example: \"1\" or \"2 4\" or \"4 2 8 2\".</p>"},{"location":"api/geometry/#textual.geometry.Spacing.height","title":"height  <code>property</code>","text":"<pre><code>height\n</code></pre> <p>Total space in the y axis.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.left","title":"left  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>left = 0\n</code></pre> <p>Space from the left of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.right","title":"right  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>right = 0\n</code></pre> <p>Space from the right of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.top","title":"top  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>top = 0\n</code></pre> <p>Space from the top of a region.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.top_left","title":"top_left  <code>property</code>","text":"<pre><code>top_left\n</code></pre> <p>A pair of integers for the left, and top space.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.totals","title":"totals  <code>property</code>","text":"<pre><code>totals\n</code></pre> <p>A pair of integers for the total horizontal and vertical space.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.width","title":"width  <code>property</code>","text":"<pre><code>width\n</code></pre> <p>Total space in the x axis.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.all","title":"all  <code>classmethod</code>","text":"<pre><code>all(amount)\n</code></pre> <p>Construct a Spacing with a given amount of spacing on all edges.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The magnitude of spacing to apply to all edges.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p><code>Spacing(amount, amount, amount, amount)</code></p>"},{"location":"api/geometry/#textual.geometry.Spacing.all(amount)","title":"<code>amount</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.grow_maximum","title":"grow_maximum","text":"<pre><code>grow_maximum(other)\n</code></pre> <p>Grow spacing with a maximum.</p> <p>Parameters:</p> Name Type Description Default <code>Spacing</code> <p>Spacing object.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p>New spacing where the values are maximum of the two values.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.grow_maximum(other)","title":"<code>other</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.horizontal","title":"horizontal  <code>classmethod</code>","text":"<pre><code>horizontal(amount)\n</code></pre> <p>Construct a Spacing with a given amount of spacing on horizontal edges, and no vertical spacing.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The magnitude of spacing to apply to horizontal edges.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p><code>Spacing(0, amount, 0, amount)</code></p>"},{"location":"api/geometry/#textual.geometry.Spacing.horizontal(amount)","title":"<code>amount</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.unpack","title":"unpack  <code>classmethod</code>","text":"<pre><code>unpack(pad)\n</code></pre> <p>Unpack padding specified in CSS style.</p> <p>Parameters:</p> Name Type Description Default <code>SpacingDimensions</code> <p>An integer, or tuple of 1, 2, or 4 integers.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>If <code>pad</code> is an invalid value.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>New Spacing object.</p>"},{"location":"api/geometry/#textual.geometry.Spacing.unpack(pad)","title":"<code>pad</code>","text":""},{"location":"api/geometry/#textual.geometry.Spacing.vertical","title":"vertical  <code>classmethod</code>","text":"<pre><code>vertical(amount)\n</code></pre> <p>Construct a Spacing with a given amount of spacing on vertical edges, and no horizontal spacing.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The magnitude of spacing to apply to vertical edges.</p> required <p>Returns:</p> Type Description <code>Spacing</code> <p><code>Spacing(amount, 0, amount, 0)</code></p>"},{"location":"api/geometry/#textual.geometry.Spacing.vertical(amount)","title":"<code>amount</code>","text":""},{"location":"api/geometry/#textual.geometry.clamp","title":"clamp","text":"<pre><code>clamp(value, minimum, maximum)\n</code></pre> <p>Restrict a value to a given range.</p> <p>If <code>value</code> is less than the minimum, return the minimum. If <code>value</code> is greater than the maximum, return the maximum. Otherwise, return <code>value</code>.</p> <p>The <code>minimum</code> and <code>maximum</code> arguments values may be given in reverse order.</p> <p>Parameters:</p> Name Type Description Default <code>T</code> <p>A value.</p> required <code>T</code> <p>Minimum value.</p> required <code>T</code> <p>Maximum value.</p> required <p>Returns:</p> Type Description <code>T</code> <p>New value that is not less than the minimum or greater than the maximum.</p>"},{"location":"api/geometry/#textual.geometry.clamp(value)","title":"<code>value</code>","text":""},{"location":"api/geometry/#textual.geometry.clamp(minimum)","title":"<code>minimum</code>","text":""},{"location":"api/geometry/#textual.geometry.clamp(maximum)","title":"<code>maximum</code>","text":""},{"location":"api/lazy/","title":"textual.lazy","text":"<p>Tools for lazy loading widgets.</p>"},{"location":"api/lazy/#textual.lazy.Lazy","title":"Lazy","text":"<pre><code>Lazy(widget)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Wraps a widget so that it is mounted lazily.</p> <p>Lazy widgets are mounted after the first refresh. This can be used to display some parts of the UI very quickly, followed by the lazy widgets. Technically, this won't make anything faster, but it reduces the time the user sees a blank screen and will make apps feel more responsive.</p> <p>Making a widget lazy is beneficial for widgets which start out invisible, such as tab panes.</p> <p>Note that since lazy widgets aren't mounted immediately (by definition), they will not appear in queries for a brief interval until they are mounted. Your code should take this in to account.</p> Example <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Footer()\n    with ColorTabs(\"Theme Colors\", \"Named Colors\"):\n        yield Content(ThemeColorButtons(), ThemeColorsView(), id=\"theme\")\n        yield Lazy(NamedColorsView())\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget that should be mounted after a refresh.</p> required"},{"location":"api/lazy/#textual.lazy.Lazy(widget)","title":"<code>widget</code>","text":""},{"location":"api/logger/","title":"textual","text":"<p>The root Textual module.</p> <p>Exposes some commonly used symbols.</p>"},{"location":"api/logger/#textual.log","title":"log  <code>module-attribute</code>","text":"<pre><code>log = Logger(None)\n</code></pre> <p>Global logger that logs to the currently active app.</p> Example <pre><code>from textual import log\nlog(locals())\n</code></pre>"},{"location":"api/logger/#textual.Logger","title":"Logger","text":"<pre><code>Logger(log_callable, group=INFO, verbosity=NORMAL)\n</code></pre> <p>A logger class that logs to the Textual console.</p>"},{"location":"api/logger/#textual.Logger.debug","title":"debug  <code>property</code>","text":"<pre><code>debug\n</code></pre> <p>Logs debug messages.</p>"},{"location":"api/logger/#textual.Logger.error","title":"error  <code>property</code>","text":"<pre><code>error\n</code></pre> <p>Logs errors.</p>"},{"location":"api/logger/#textual.Logger.event","title":"event  <code>property</code>","text":"<pre><code>event\n</code></pre> <p>Logs events.</p>"},{"location":"api/logger/#textual.Logger.info","title":"info  <code>property</code>","text":"<pre><code>info\n</code></pre> <p>Logs information.</p>"},{"location":"api/logger/#textual.Logger.logging","title":"logging  <code>property</code>","text":"<pre><code>logging\n</code></pre> <p>Logs from stdlib logging module.</p>"},{"location":"api/logger/#textual.Logger.system","title":"system  <code>property</code>","text":"<pre><code>system\n</code></pre> <p>Logs system information.</p>"},{"location":"api/logger/#textual.Logger.verbose","title":"verbose  <code>property</code>","text":"<pre><code>verbose\n</code></pre> <p>A verbose logger.</p>"},{"location":"api/logger/#textual.Logger.warning","title":"warning  <code>property</code>","text":"<pre><code>warning\n</code></pre> <p>Logs warnings.</p>"},{"location":"api/logger/#textual.Logger.worker","title":"worker  <code>property</code>","text":"<pre><code>worker\n</code></pre> <p>Logs worker information.</p>"},{"location":"api/logger/#textual.Logger.verbosity","title":"verbosity","text":"<pre><code>verbosity(verbose)\n</code></pre> <p>Get a new logger with selective verbosity.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True to use HIGH verbosity, otherwise NORMAL.</p> required <p>Returns:</p> Type Description <code>Logger</code> <p>New logger.</p>"},{"location":"api/logger/#textual.Logger.verbosity(verbose)","title":"<code>verbose</code>","text":""},{"location":"api/logger/#textual.LoggerError","title":"LoggerError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the logger failed.</p>"},{"location":"api/logger/#textual.on","title":"on","text":"<pre><code>on(message_type, selector=None, **kwargs)\n</code></pre> <p>Decorator to declare that the method is a message handler.</p> <p>The decorator accepts an optional CSS selector that will be matched against a widget exposed by a <code>control</code> property on the message.</p> Example <pre><code># Handle the press of buttons with ID \"#quit\".\n@on(Button.Pressed, \"#quit\")\ndef quit_button(self) -&gt; None:\n    self.app.quit()\n</code></pre> <p>Keyword arguments can be used to match additional selectors for attributes listed in <code>ALLOW_SELECTOR_MATCH</code>.</p> Example <pre><code># Handle the activation of the tab \"#home\" within the `TabbedContent` \"#tabs\".\n@on(TabbedContent.TabActivated, \"#tabs\", pane=\"#home\")\ndef switch_to_home(self) -&gt; None:\n    self.log(\"Switching back to the home tab.\")\n    ...\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>type[Message]</code> <p>The message type (i.e. the class).</p> required <code>str | None</code> <p>An optional selector. If supplied, the handler will only be called if <code>selector</code> matches the widget from the <code>control</code> attribute of the message.</p> <code>None</code> <code>str</code> <p>Additional selectors for other attributes of the message.</p> <code>{}</code>"},{"location":"api/logger/#textual.on(message_type)","title":"<code>message_type</code>","text":""},{"location":"api/logger/#textual.on(selector)","title":"<code>selector</code>","text":""},{"location":"api/logger/#textual.on(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/logger/#textual.work","title":"work","text":"<pre><code>work(\n    method: Callable[\n        FactoryParamSpec, Coroutine[None, None, ReturnType]\n    ],\n    *,\n    name: str = \"\",\n    group: str = \"default\",\n    exit_on_error: bool = True,\n    exclusive: bool = False,\n    description: str | None = None,\n    thread: bool = False\n) -&gt; Callable[FactoryParamSpec, \"Worker[ReturnType]\"]\n</code></pre><pre><code>work(\n    method: Callable[FactoryParamSpec, ReturnType],\n    *,\n    name: str = \"\",\n    group: str = \"default\",\n    exit_on_error: bool = True,\n    exclusive: bool = False,\n    description: str | None = None,\n    thread: bool = False\n) -&gt; Callable[FactoryParamSpec, \"Worker[ReturnType]\"]\n</code></pre><pre><code>work(\n    *,\n    name: str = \"\",\n    group: str = \"default\",\n    exit_on_error: bool = True,\n    exclusive: bool = False,\n    description: str | None = None,\n    thread: bool = False\n) -&gt; Decorator[..., ReturnType]\n</code></pre> <pre><code>work(\n    method=None,\n    *,\n    name=\"\",\n    group=\"default\",\n    exit_on_error=True,\n    exclusive=False,\n    description=None,\n    thread=False\n)\n</code></pre> <p>A decorator used to create workers.</p> <p>Parameters:</p> Name Type Description Default <code>Callable[FactoryParamSpec, ReturnType] | Callable[FactoryParamSpec, Coroutine[None, None, ReturnType]] | None</code> <p>A function or coroutine.</p> <code>None</code> <code>str</code> <p>A short string to identify the worker (in logs and debugging).</p> <code>''</code> <code>str</code> <p>A short string to identify a group of workers.</p> <code>'default'</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group.</p> <code>False</code> <code>str | None</code> <p>Readable description of the worker for debugging purposes. By default, it uses a string representation of the decorated method and its arguments.</p> <code>None</code> <code>bool</code> <p>Mark the method as a thread worker.</p> <code>False</code>"},{"location":"api/logger/#textual.work(method)","title":"<code>method</code>","text":""},{"location":"api/logger/#textual.work(name)","title":"<code>name</code>","text":""},{"location":"api/logger/#textual.work(group)","title":"<code>group</code>","text":""},{"location":"api/logger/#textual.work(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/logger/#textual.work(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/logger/#textual.work(description)","title":"<code>description</code>","text":""},{"location":"api/logger/#textual.work(thread)","title":"<code>thread</code>","text":""},{"location":"api/logging/","title":"textual.logging","text":"<p>A Textual Logging handler.</p> <p>If there is an active Textual app, then log messages will go via the app (and logged via textual console).</p> <p>If there is no active app, then log messages will go to stderr or stdout, depending on configuration.</p>"},{"location":"api/logging/#textual.logging.TextualHandler","title":"TextualHandler","text":"<pre><code>TextualHandler(stderr=True, stdout=False)\n</code></pre> <p>               Bases: <code>Handler</code></p> <p>A Logging handler for Textual apps.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Log to stderr when there is no active app.</p> <code>True</code> <code>bool</code> <p>Log to stdout when there is no active app.</p> <code>False</code>"},{"location":"api/logging/#textual.logging.TextualHandler(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/logging/#textual.logging.TextualHandler(stdout)","title":"<code>stdout</code>","text":""},{"location":"api/logging/#textual.logging.TextualHandler.emit","title":"emit","text":"<pre><code>emit(record)\n</code></pre> <p>Invoked by logging.</p>"},{"location":"api/map_geometry/","title":"textual.map_geometry","text":"<p>A data structure returned by screen.find_widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry","title":"MapGeometry","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Defines the absolute location of a Widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.clip","title":"clip  <code>instance-attribute</code>","text":"<pre><code>clip\n</code></pre> <p>A region to clip the widget by (if a Widget is within a container).</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.container_size","title":"container_size  <code>instance-attribute</code>","text":"<pre><code>container_size\n</code></pre> <p>The container size (area not occupied by scrollbars).</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.dock_gutter","title":"dock_gutter  <code>instance-attribute</code>","text":"<pre><code>dock_gutter\n</code></pre> <p>Space from the container reserved by docked widgets.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.order","title":"order  <code>instance-attribute</code>","text":"<pre><code>order\n</code></pre> <p>Tuple of tuples defining the painting order of the widget.</p> <p>Each successive triple represents painting order information with regards to ancestors in the DOM hierarchy and the last triple provides painting order information for this specific widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.region","title":"region  <code>instance-attribute</code>","text":"<pre><code>region\n</code></pre> <p>The (screen) region occupied by the widget.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.virtual_region","title":"virtual_region  <code>instance-attribute</code>","text":"<pre><code>virtual_region\n</code></pre> <p>The region relative to the container (but not necessarily visible).</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.virtual_size","title":"virtual_size  <code>instance-attribute</code>","text":"<pre><code>virtual_size\n</code></pre> <p>The virtual size (scrollable area) of a widget if it is a container.</p>"},{"location":"api/map_geometry/#textual.map_geometry.MapGeometry.visible_region","title":"visible_region  <code>property</code>","text":"<pre><code>visible_region\n</code></pre> <p>The Widget region after clipping.</p>"},{"location":"api/message/","title":"textual.message","text":"<p>The base class for all messages (including events).</p>"},{"location":"api/message/#textual.message.Message","title":"Message","text":"<pre><code>Message()\n</code></pre> <p>Base class for a message.</p>"},{"location":"api/message/#textual.message.Message.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = set()\n</code></pre> <p>Additional attributes that can be used with the <code>on</code> decorator.</p> <p>These attributes must be widgets.</p>"},{"location":"api/message/#textual.message.Message.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget associated with this message, or None by default.</p>"},{"location":"api/message/#textual.message.Message.handler_name","title":"handler_name  <code>class-attribute</code>","text":"<pre><code>handler_name\n</code></pre> <p>Name of the default message handler.</p>"},{"location":"api/message/#textual.message.Message.is_forwarded","title":"is_forwarded  <code>property</code>","text":"<pre><code>is_forwarded\n</code></pre> <p>Has the message been forwarded?</p>"},{"location":"api/message/#textual.message.Message.prevent_default","title":"prevent_default","text":"<pre><code>prevent_default(prevent=True)\n</code></pre> <p>Suppress the default action(s). This will prevent handlers in any base classes from being called.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True if the default action should be suppressed, or False if the default actions should be performed.</p> <code>True</code>"},{"location":"api/message/#textual.message.Message.prevent_default(prevent)","title":"<code>prevent</code>","text":""},{"location":"api/message/#textual.message.Message.set_sender","title":"set_sender","text":"<pre><code>set_sender(sender)\n</code></pre> <p>Set the sender of the message.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>The sender.</p> required Note <p>When creating a message the sender is automatically set. Normally there will be no need for this method to be called. This method will be used when strict control is required over the sender of a message.</p> <p>Returns:</p> Type Description <code>Self</code> <p>Self.</p>"},{"location":"api/message/#textual.message.Message.set_sender(sender)","title":"<code>sender</code>","text":""},{"location":"api/message/#textual.message.Message.stop","title":"stop","text":"<pre><code>stop(stop=True)\n</code></pre> <p>Stop propagation of the message to parent.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>The stop flag.</p> <code>True</code>"},{"location":"api/message/#textual.message.Message.stop(stop)","title":"<code>stop</code>","text":""},{"location":"api/message_pump/","title":"textual.message_pump","text":"<p>A <code>MessagePump</code> is a base class for any object which processes messages, which includes Widget, Screen, and App.</p> <p>Tip</p> <p>Most of the method here are useful in general app development.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump","title":"MessagePump","text":"<pre><code>MessagePump(parent=None)\n</code></pre> <p>Base class which supplies a message pump.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.app","title":"app  <code>property</code>","text":"<pre><code>app\n</code></pre> <p>Get the current app.</p> <p>Returns:</p> Type Description <code>'App[object]'</code> <p>The current app.</p> <p>Raises:</p> Type Description <code>NoActiveAppError</code> <p>if no active app could be found for the current asyncio context</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.has_parent","title":"has_parent  <code>property</code>","text":"<pre><code>has_parent\n</code></pre> <p>Does this object have a parent?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_attached","title":"is_attached  <code>property</code>","text":"<pre><code>is_attached\n</code></pre> <p>Is this node linked to the app through the DOM?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_dom_root","title":"is_dom_root  <code>property</code>","text":"<pre><code>is_dom_root\n</code></pre> <p>Is this a root node (i.e. the App)?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_parent_active","title":"is_parent_active  <code>property</code>","text":"<pre><code>is_parent_active\n</code></pre> <p>Is the parent active?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.is_running","title":"is_running  <code>property</code>","text":"<pre><code>is_running\n</code></pre> <p>Is the message pump running (potentially processing messages)?</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.log","title":"log  <code>property</code>","text":"<pre><code>log\n</code></pre> <p>Get a logger for this object.</p> <p>Returns:</p> Type Description <code>Logger</code> <p>A logger.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.message_queue_size","title":"message_queue_size  <code>property</code>","text":"<pre><code>message_queue_size\n</code></pre> <p>The current size of the message queue.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.message_signal","title":"message_signal  <code>instance-attribute</code>","text":"<pre><code>message_signal = Signal(self, 'messages')\n</code></pre> <p>Subscribe to this signal to be notified of all messages sent to this widget.</p> <p>This is a fairly low-level mechanism, and shouldn't replace regular message handling.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_after_refresh","title":"call_after_refresh","text":"<pre><code>call_after_refresh(callback, *args, **kwargs)\n</code></pre> <p>Schedule a callback to run after all messages are processed and the screen has been refreshed. Positional and keyword arguments are passed to the callable.</p> <p>Parameters:</p> Name Type Description Default <code>Callback</code> <p>A callable.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the callback was scheduled, or <code>False</code> if the callback could not be scheduled (may occur if the message pump was closed or closing).</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_after_refresh(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later","title":"call_later","text":"<pre><code>call_later(callback, *args, **kwargs)\n</code></pre> <p>Schedule a callback to run after all messages are processed in this object. Positional and keywords arguments are passed to the callable.</p> <p>Parameters:</p> Name Type Description Default <code>Callback</code> <p>Callable to call next.</p> required <code>Any</code> <p>Positional arguments to pass to the callable.</p> <code>()</code> <code>Any</code> <p>Keyword arguments to pass to the callable.</p> <code>{}</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the callback was scheduled, or <code>False</code> if the callback could not be scheduled (may occur if the message pump was closed or closing).</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later(*args)","title":"<code>*args</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_later(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next","title":"call_next","text":"<pre><code>call_next(callback, *args, **kwargs)\n</code></pre> <p>Schedule a callback to run immediately after processing the current message.</p> <p>Parameters:</p> Name Type Description Default <code>Callback</code> <p>Callable to run after current event.</p> required <code>Any</code> <p>Positional arguments to pass to the callable.</p> <code>()</code> <code>Any</code> <p>Keyword arguments to pass to the callable.</p> <code>{}</code>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next(*args)","title":"<code>*args</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.call_next(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.check_idle","title":"check_idle","text":"<pre><code>check_idle()\n</code></pre> <p>Prompt the message pump to call idle if the queue is empty.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.check_message_enabled","title":"check_message_enabled","text":"<pre><code>check_message_enabled(message)\n</code></pre> <p>Check if a given message is enabled (allowed to be sent).</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>A message object.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the message will be sent, or <code>False</code> if it is disabled.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.check_message_enabled(message)","title":"<code>message</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.disable_messages","title":"disable_messages","text":"<pre><code>disable_messages(*messages)\n</code></pre> <p>Disable message types from being processed.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.enable_messages","title":"enable_messages","text":"<pre><code>enable_messages(*messages)\n</code></pre> <p>Enable processing of messages types.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.on_event","title":"on_event  <code>async</code>","text":"<pre><code>on_event(event)\n</code></pre> <p>Called to process an event.</p> <p>Parameters:</p> Name Type Description Default <code>Event</code> <p>An Event object.</p> required"},{"location":"api/message_pump/#textual.message_pump.MessagePump.on_event(event)","title":"<code>event</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.post_message","title":"post_message","text":"<pre><code>post_message(message)\n</code></pre> <p>Posts a message on to this widget's queue.</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>A message (including Event).</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the messages was processed, <code>False</code> if it wasn't.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.post_message(message)","title":"<code>message</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.prevent","title":"prevent","text":"<pre><code>prevent(*message_types)\n</code></pre> <p>A context manager to temporarily prevent the given message types from being posted.</p> Example <pre><code>input = self.query_one(Input)\nwith self.prevent(Input.Changed):\n    input.value = \"foo\"\n</code></pre>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval","title":"set_interval","text":"<pre><code>set_interval(\n    interval,\n    callback=None,\n    *,\n    name=None,\n    repeat=0,\n    pause=False\n)\n</code></pre> <p>Call a function at periodic intervals.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Time (in seconds) between calls.</p> required <code>TimerCallback | None</code> <p>Function to call.</p> <code>None</code> <code>str | None</code> <p>Name of the timer object.</p> <code>None</code> <code>int</code> <p>Number of times to repeat the call or 0 for continuous.</p> <code>0</code> <code>bool</code> <p>Start the timer paused.</p> <code>False</code> <p>Returns:</p> Type Description <code>Timer</code> <p>A timer object.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(interval)","title":"<code>interval</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(name)","title":"<code>name</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(repeat)","title":"<code>repeat</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_interval(pause)","title":"<code>pause</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer","title":"set_timer","text":"<pre><code>set_timer(delay, callback=None, *, name=None, pause=False)\n</code></pre> <p>call a function after a delay.</p> Example <pre><code>def ready():\n    self.notify(\"Your soft boiled egg is ready!\")\n# Call ready() after 3 minutes\nself.set_timer(3 * 60, ready)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Time (in seconds) to wait before invoking callback.</p> required <code>TimerCallback | None</code> <p>Callback to call after time has expired.</p> <code>None</code> <code>str | None</code> <p>Name of the timer (for debug).</p> <code>None</code> <code>bool</code> <p>Start timer paused.</p> <code>False</code> <p>Returns:</p> Type Description <code>Timer</code> <p>A timer object.</p>"},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(delay)","title":"<code>delay</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(callback)","title":"<code>callback</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(name)","title":"<code>name</code>","text":""},{"location":"api/message_pump/#textual.message_pump.MessagePump.set_timer(pause)","title":"<code>pause</code>","text":""},{"location":"api/on/","title":"On","text":"<p>Decorator to declare that the method is a message handler.</p> <p>The decorator accepts an optional CSS selector that will be matched against a widget exposed by a <code>control</code> property on the message.</p> Example <pre><code># Handle the press of buttons with ID \"#quit\".\n@on(Button.Pressed, \"#quit\")\ndef quit_button(self) -&gt; None:\n    self.app.quit()\n</code></pre> <p>Keyword arguments can be used to match additional selectors for attributes listed in <code>ALLOW_SELECTOR_MATCH</code>.</p> Example <pre><code># Handle the activation of the tab \"#home\" within the `TabbedContent` \"#tabs\".\n@on(TabbedContent.TabActivated, \"#tabs\", pane=\"#home\")\ndef switch_to_home(self) -&gt; None:\n    self.log(\"Switching back to the home tab.\")\n    ...\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>type[Message]</code> <p>The message type (i.e. the class).</p> required <code>str | None</code> <p>An optional selector. If supplied, the handler will only be called if <code>selector</code> matches the widget from the <code>control</code> attribute of the message.</p> <code>None</code> <code>str</code> <p>Additional selectors for other attributes of the message.</p> <code>{}</code>"},{"location":"api/on/#textual.on(message_type)","title":"<code>message_type</code>","text":""},{"location":"api/on/#textual.on(selector)","title":"<code>selector</code>","text":""},{"location":"api/on/#textual.on(**kwargs)","title":"<code>**kwargs</code>","text":""},{"location":"api/pilot/","title":"textual.pilot","text":"<p>This module contains the <code>Pilot</code> class used by App.run_test to programmatically operate an app.</p> <p>See the guide on how to test Textual apps.</p>"},{"location":"api/pilot/#textual.pilot.OutOfBounds","title":"OutOfBounds","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the pilot mouse target is outside of the (visible) screen.</p>"},{"location":"api/pilot/#textual.pilot.Pilot","title":"Pilot","text":"<pre><code>Pilot(app)\n</code></pre> <p>               Bases: <code>Generic[ReturnType]</code></p> <p>Pilot object to drive an app.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.app","title":"app  <code>property</code>","text":"<pre><code>app\n</code></pre>"},{"location":"api/pilot/#textual.pilot.Pilot.click","title":"click  <code>async</code>","text":"<pre><code>click(\n    selector=None,\n    offset=(0, 0),\n    shift=False,\n    meta=False,\n    control=False,\n)\n</code></pre> <p>Simulate clicking with the mouse at a specified position.</p> <p>The final position to be clicked is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> Example <p>The code below runs an app and clicks its only button right in the middle: <pre><code>async with SingleButtonApp().run_test() as pilot:\n    await pilot.click(Button, offset=(8, 1))\n</code></pre></p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None</code> <p>A selector to specify a widget that should be used as the reference for the click offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to click on a specific widget. However, if the widget is currently hidden or obscured by another widget, the click may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset to click. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <code>bool</code> <p>Click with the shift key held down.</p> <code>False</code> <code>bool</code> <p>Click with the meta key held down.</p> <code>False</code> <code>bool</code> <p>Click with the control key held down.</p> <code>False</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position to be clicked is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the click landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.click(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(shift)","title":"<code>shift</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(meta)","title":"<code>meta</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.click(control)","title":"<code>control</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.exit","title":"exit  <code>async</code>","text":"<pre><code>exit(result)\n</code></pre> <p>Exit the app with the given result.</p> <p>Parameters:</p> Name Type Description Default <code>ReturnType</code> <p>The app result returned by <code>run</code> or <code>run_async</code>.</p> required"},{"location":"api/pilot/#textual.pilot.Pilot.exit(result)","title":"<code>result</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.hover","title":"hover  <code>async</code>","text":"<pre><code>hover(selector=None, offset=(0, 0))\n</code></pre> <p>Simulate hovering with the mouse cursor at a specified position.</p> <p>The final position to be hovered is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None | None</code> <p>A selector to specify a widget that should be used as the reference for the hover offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to hover a specific widget. However, if the widget is currently hidden or obscured by another widget, the hover may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset to hover. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position to be hovered is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the hover landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.hover(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.hover(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down","title":"mouse_down  <code>async</code>","text":"<pre><code>mouse_down(\n    selector=None,\n    offset=(0, 0),\n    shift=False,\n    meta=False,\n    control=False,\n)\n</code></pre> <p>Simulate a <code>MouseDown</code> event at a specified position.</p> <p>The final position for the event is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None</code> <p>A selector to specify a widget that should be used as the reference for the event offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to target a specific widget. However, if the widget is currently hidden or obscured by another widget, the event may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset for the event. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <code>bool</code> <p>Simulate the event with the shift key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the meta key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the control key held down.</p> <code>False</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position for the event is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the event landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(shift)","title":"<code>shift</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(meta)","title":"<code>meta</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_down(control)","title":"<code>control</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up","title":"mouse_up  <code>async</code>","text":"<pre><code>mouse_up(\n    selector=None,\n    offset=(0, 0),\n    shift=False,\n    meta=False,\n    control=False,\n)\n</code></pre> <p>Simulate a <code>MouseUp</code> event at a specified position.</p> <p>The final position for the event is computed based on the selector provided and the offset specified and it must be within the visible area of the screen.</p> <p>Parameters:</p> Name Type Description Default <code>type[Widget] | str | None</code> <p>A selector to specify a widget that should be used as the reference for the event offset. If this is not specified, the offset is interpreted relative to the screen. You can use this parameter to try to target a specific widget. However, if the widget is currently hidden or obscured by another widget, the event may not land on the widget you specified.</p> <code>None</code> <code>tuple[int, int]</code> <p>The offset for the event. The offset is relative to the selector provided or to the screen, if no selector is provided.</p> <code>(0, 0)</code> <code>bool</code> <p>Simulate the event with the shift key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the meta key held down.</p> <code>False</code> <code>bool</code> <p>Simulate the event with the control key held down.</p> <code>False</code> <p>Raises:</p> Type Description <code>OutOfBounds</code> <p>If the position for the event is outside of the (visible) screen.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if no selector was specified or if the event landed on the selected widget, False otherwise.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(selector)","title":"<code>selector</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(offset)","title":"<code>offset</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(shift)","title":"<code>shift</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(meta)","title":"<code>meta</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.mouse_up(control)","title":"<code>control</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.pause","title":"pause  <code>async</code>","text":"<pre><code>pause(delay=None)\n</code></pre> <p>Insert a pause.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>Seconds to pause, or None to wait for cpu idle.</p> <code>None</code>"},{"location":"api/pilot/#textual.pilot.Pilot.pause(delay)","title":"<code>delay</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.press","title":"press  <code>async</code>","text":"<pre><code>press(*keys)\n</code></pre> <p>Simulate key-presses.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Keys to press.</p> <code>()</code>"},{"location":"api/pilot/#textual.pilot.Pilot.press(*keys)","title":"<code>*keys</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.resize_terminal","title":"resize_terminal  <code>async</code>","text":"<pre><code>resize_terminal(width, height)\n</code></pre> <p>Resize the terminal to the given dimensions.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The new width of the terminal.</p> required <code>int</code> <p>The new height of the terminal.</p> required"},{"location":"api/pilot/#textual.pilot.Pilot.resize_terminal(width)","title":"<code>width</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.resize_terminal(height)","title":"<code>height</code>","text":""},{"location":"api/pilot/#textual.pilot.Pilot.wait_for_animation","title":"wait_for_animation  <code>async</code>","text":"<pre><code>wait_for_animation()\n</code></pre> <p>Wait for any current animation to complete.</p>"},{"location":"api/pilot/#textual.pilot.Pilot.wait_for_scheduled_animations","title":"wait_for_scheduled_animations  <code>async</code>","text":"<pre><code>wait_for_scheduled_animations()\n</code></pre> <p>Wait for any current and scheduled animations to complete.</p>"},{"location":"api/pilot/#textual.pilot.WaitForScreenTimeout","title":"WaitForScreenTimeout","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised if messages aren't being processed quickly enough.</p> <p>If this occurs, the most likely explanation is some kind of deadlock in the app code.</p>"},{"location":"api/query/","title":"textual.css.query","text":"<p>This module contains the <code>DOMQuery</code> class and related objects.</p> <p>A DOMQuery is a set of DOM nodes returned by query.</p> <p>The set of nodes may be further refined with filter and exclude. Additional methods apply actions to all nodes in the query.</p> <p>Info</p> <p>If this sounds like JQuery, a (once) popular JS library, it is no coincidence.</p>"},{"location":"api/query/#textual.css.query.ExpectType","title":"ExpectType  <code>module-attribute</code>","text":"<pre><code>ExpectType = TypeVar('ExpectType')\n</code></pre> <p>Type variable used to further restrict queries.</p>"},{"location":"api/query/#textual.css.query.QueryType","title":"QueryType  <code>module-attribute</code>","text":"<pre><code>QueryType = TypeVar('QueryType', bound='Widget')\n</code></pre> <p>Type variable used to type generic queries.</p>"},{"location":"api/query/#textual.css.query.DOMQuery","title":"DOMQuery","text":"<pre><code>DOMQuery(\n    node,\n    *,\n    filter=None,\n    exclude=None,\n    deep=True,\n    parent=None\n)\n</code></pre> <p>               Bases: <code>Generic[QueryType]</code></p> <p>Warning</p> <p>You won't need to construct this manually, as <code>DOMQuery</code> objects are returned by query.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>A DOM node.</p> required <code>str | None</code> <p>Query to filter children in the node.</p> <code>None</code> <code>str | None</code> <p>Query to exclude children in the node.</p> <code>None</code> <code>bool</code> <p>Query should be deep, i.e. recursive.</p> <code>True</code> <code>DOMQuery | None</code> <p>The parent query, if this is the result of filtering another query.</p> <code>None</code> <p>Raises:</p> Type Description <code>InvalidQueryFormat</code> <p>If the format of the query is invalid.</p>"},{"location":"api/query/#textual.css.query.DOMQuery(node)","title":"<code>node</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(filter)","title":"<code>filter</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(exclude)","title":"<code>exclude</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(deep)","title":"<code>deep</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery(parent)","title":"<code>parent</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.node","title":"node  <code>property</code>","text":"<pre><code>node\n</code></pre> <p>The node being queried.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.nodes","title":"nodes  <code>property</code>","text":"<pre><code>nodes\n</code></pre> <p>Lazily evaluate nodes.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.add_class","title":"add_class","text":"<pre><code>add_class(*class_names)\n</code></pre> <p>Add the given class name(s) to nodes.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.blur","title":"blur","text":"<pre><code>blur()\n</code></pre> <p>Blur the first matching node that is focused.</p> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.exclude","title":"exclude","text":"<pre><code>exclude(selector)\n</code></pre> <p>Exclude nodes that match a given selector.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A CSS selector.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>New DOM query.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.exclude(selector)","title":"<code>selector</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.filter","title":"filter","text":"<pre><code>filter(selector)\n</code></pre> <p>Filter this set by the given CSS selector.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A CSS selector.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>New DOM Query.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.filter(selector)","title":"<code>selector</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.first","title":"first","text":"<pre><code>first() -&gt; QueryType\n</code></pre><pre><code>first(expect_type: type[ExpectType]) -&gt; ExpectType\n</code></pre> <pre><code>first(expect_type=None)\n</code></pre> <p>Get the first matching node.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>Require matched node is of this type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If there are no matching nodes in the query.</p> <p>Returns:</p> Type Description <code>QueryType | ExpectType</code> <p>The matching Widget.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.first(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.focus","title":"focus","text":"<pre><code>focus()\n</code></pre> <p>Focus the first matching node that permits focus.</p> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.last","title":"last","text":"<pre><code>last() -&gt; QueryType\n</code></pre><pre><code>last(expect_type: type[ExpectType]) -&gt; ExpectType\n</code></pre> <pre><code>last(expect_type=None)\n</code></pre> <p>Get the last matching node.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>Require matched node is of this type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If there are no matching nodes in the query.</p> <p>Returns:</p> Type Description <code>QueryType | ExpectType</code> <p>The matching Widget.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.last(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.only_one","title":"only_one","text":"<pre><code>only_one() -&gt; QueryType\n</code></pre><pre><code>only_one(expect_type: type[ExpectType]) -&gt; ExpectType\n</code></pre> <pre><code>only_one(expect_type=None)\n</code></pre> <p>Get the only matching node.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>Require matched node is of this type, or None for any type.</p> <code>None</code> <p>Raises:</p> Type Description <code>WrongType</code> <p>If the wrong type was found.</p> <code>NoMatches</code> <p>If no node matches the query.</p> <code>TooManyMatches</code> <p>If there is more than one matching node in the query.</p> <p>Returns:</p> Type Description <code>QueryType | ExpectType</code> <p>The matching Widget.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.only_one(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.refresh","title":"refresh","text":"<pre><code>refresh(*, repaint=True, layout=False, recompose=False)\n</code></pre> <p>Refresh matched nodes.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Repaint node(s).</p> <code>True</code> <code>bool</code> <p>Layout node(s).</p> <code>False</code> <code>bool</code> <p>Recompose node(s).</p> <code>False</code> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.refresh(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.refresh(layout)","title":"<code>layout</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.refresh(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.remove","title":"remove","text":"<pre><code>remove()\n</code></pre> <p>Remove matched nodes from the DOM.</p> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the widgets to be removed.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.remove_class","title":"remove_class","text":"<pre><code>remove_class(*class_names)\n</code></pre> <p>Remove the given class names from the nodes.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.results","title":"results","text":"<pre><code>results() -&gt; Iterator[QueryType]\n</code></pre><pre><code>results(\n    filter_type: type[ExpectType],\n) -&gt; Iterator[ExpectType]\n</code></pre> <pre><code>results(filter_type=None)\n</code></pre> <p>Get query results, optionally filtered by a given type.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType] | None</code> <p>A Widget class to filter results, or None for no filter.</p> <code>None</code> <p>Yields:</p> Type Description <code>QueryType | ExpectType</code> <p>Iterator[Widget | ExpectType]: An iterator of Widget instances.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.results(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set","title":"set","text":"<pre><code>set(\n    display=None, visible=None, disabled=None, loading=None\n)\n</code></pre> <p>Sets common attributes on matched nodes.</p> <p>Parameters:</p> Name Type Description Default <code>bool | None</code> <p>Set <code>display</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <code>bool | None</code> <p>Set <code>visible</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <code>bool | None</code> <p>Set <code>disabled</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <code>bool | None</code> <p>Set <code>loading</code> attribute on nodes, or <code>None</code> for no change.</p> <code>None</code> <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Query for chaining.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.set(display)","title":"<code>display</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set(visible)","title":"<code>visible</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set(loading)","title":"<code>loading</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set_class","title":"set_class","text":"<pre><code>set_class(add, *class_names)\n</code></pre> <p>Set the given class name(s) according to a condition.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Add the classes if True, otherwise remove them.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Self.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.set_class(add)","title":"<code>add</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set_classes","title":"set_classes","text":"<pre><code>set_classes(classes)\n</code></pre> <p>Set the classes on nodes to exactly the given set.</p> <p>Parameters:</p> Name Type Description Default <code>str | Iterable[str]</code> <p>A string of space separated classes, or an iterable of class names.</p> required <p>Returns:</p> Type Description <code>DOMQuery[QueryType]</code> <p>Self.</p>"},{"location":"api/query/#textual.css.query.DOMQuery.set_classes(classes)","title":"<code>classes</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.set_styles","title":"set_styles","text":"<pre><code>set_styles(css=None, **update_styles)\n</code></pre> <p>Set styles on matched nodes.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>CSS declarations to parser, or None.</p> <code>None</code>"},{"location":"api/query/#textual.css.query.DOMQuery.set_styles(css)","title":"<code>css</code>","text":""},{"location":"api/query/#textual.css.query.DOMQuery.toggle_class","title":"toggle_class","text":"<pre><code>toggle_class(*class_names)\n</code></pre> <p>Toggle the given class names from matched nodes.</p>"},{"location":"api/query/#textual.css.query.InvalidQueryFormat","title":"InvalidQueryFormat","text":"<p>               Bases: <code>QueryError</code></p> <p>Query did not parse correctly.</p>"},{"location":"api/query/#textual.css.query.NoMatches","title":"NoMatches","text":"<p>               Bases: <code>QueryError</code></p> <p>No nodes matched the query.</p>"},{"location":"api/query/#textual.css.query.QueryError","title":"QueryError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for a query related error.</p>"},{"location":"api/query/#textual.css.query.TooManyMatches","title":"TooManyMatches","text":"<p>               Bases: <code>QueryError</code></p> <p>Too many nodes matched the query.</p>"},{"location":"api/query/#textual.css.query.WrongType","title":"WrongType","text":"<p>               Bases: <code>QueryError</code></p> <p>Query result was not of the correct type.</p>"},{"location":"api/reactive/","title":"textual.reactive","text":"<p>This module contains the <code>Reactive</code> class which implements reactivity.</p>"},{"location":"api/reactive/#textual.reactive.Reactive","title":"Reactive","text":"<pre><code>Reactive(\n    default,\n    *,\n    layout=False,\n    repaint=True,\n    init=False,\n    always_update=False,\n    compute=True,\n    recompose=False,\n    bindings=False\n)\n</code></pre> <p>               Bases: <code>Generic[ReactiveType]</code></p> <p>Reactive descriptor.</p> <p>Parameters:</p> Name Type Description Default <code>ReactiveType | Callable[[], ReactiveType]</code> <p>A default value or callable that returns a default.</p> required <code>bool</code> <p>Perform a layout on change.</p> <code>False</code> <code>bool</code> <p>Perform a repaint on change.</p> <code>True</code> <code>bool</code> <p>Call watchers on initialize (post mount).</p> <code>False</code> <code>bool</code> <p>Call watchers even when the new value equals the old value.</p> <code>False</code> <code>bool</code> <p>Run compute methods when attribute is changed.</p> <code>True</code> <code>bool</code> <p>Compose the widget again when the attribute changes.</p> <code>False</code> <code>bool</code> <p>Refresh bindings when the reactive changes.</p> <code>False</code>"},{"location":"api/reactive/#textual.reactive.Reactive(default)","title":"<code>default</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(layout)","title":"<code>layout</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(init)","title":"<code>init</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(always_update)","title":"<code>always_update</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(compute)","title":"<code>compute</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/reactive/#textual.reactive.Reactive.owner","title":"owner  <code>property</code>","text":"<pre><code>owner\n</code></pre> <p>The owner (class) where the reactive was declared.</p>"},{"location":"api/reactive/#textual.reactive.ReactiveError","title":"ReactiveError","text":"<p>               Bases: <code>Exception</code></p> <p>Base class for reactive errors.</p>"},{"location":"api/reactive/#textual.reactive.TooManyComputesError","title":"TooManyComputesError","text":"<p>               Bases: <code>ReactiveError</code></p> <p>Raised when an attribute has public and private compute methods.</p>"},{"location":"api/reactive/#textual.reactive.reactive","title":"reactive","text":"<pre><code>reactive(\n    default,\n    *,\n    layout=False,\n    repaint=True,\n    init=True,\n    always_update=False,\n    recompose=False,\n    bindings=False\n)\n</code></pre> <p>               Bases: <code>Reactive[ReactiveType]</code></p> <p>Create a reactive attribute.</p> <p>Parameters:</p> Name Type Description Default <code>ReactiveType | Callable[[], ReactiveType]</code> <p>A default value or callable that returns a default.</p> required <code>bool</code> <p>Perform a layout on change.</p> <code>False</code> <code>bool</code> <p>Perform a repaint on change.</p> <code>True</code> <code>bool</code> <p>Call watchers on initialize (post mount).</p> <code>True</code> <code>bool</code> <p>Call watchers even when the new value equals the old value.</p> <code>False</code> <code>bool</code> <p>Refresh bindings when the reactive changes.</p> <code>False</code>"},{"location":"api/reactive/#textual.reactive.reactive(default)","title":"<code>default</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(layout)","title":"<code>layout</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(init)","title":"<code>init</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(always_update)","title":"<code>always_update</code>","text":""},{"location":"api/reactive/#textual.reactive.reactive(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/reactive/#textual.reactive.var","title":"var","text":"<pre><code>var(\n    default, init=True, always_update=False, bindings=False\n)\n</code></pre> <p>               Bases: <code>Reactive[ReactiveType]</code></p> <p>Create a reactive attribute (with no auto-refresh).</p> <p>Parameters:</p> Name Type Description Default <code>ReactiveType | Callable[[], ReactiveType]</code> <p>A default value or callable that returns a default.</p> required <code>bool</code> <p>Call watchers on initialize (post mount).</p> <code>True</code> <code>bool</code> <p>Call watchers even when the new value equals the old value.</p> <code>False</code> <code>bool</code> <p>Refresh bindings when the reactive changes.</p> <code>False</code>"},{"location":"api/reactive/#textual.reactive.var(default)","title":"<code>default</code>","text":""},{"location":"api/reactive/#textual.reactive.var(init)","title":"<code>init</code>","text":""},{"location":"api/reactive/#textual.reactive.var(always_update)","title":"<code>always_update</code>","text":""},{"location":"api/reactive/#textual.reactive.var(bindings)","title":"<code>bindings</code>","text":""},{"location":"api/reactive/#textual.reactive.await_watcher","title":"await_watcher  <code>async</code>","text":"<pre><code>await_watcher(obj, awaitable)\n</code></pre> <p>Coroutine to await an awaitable returned from a watcher</p>"},{"location":"api/reactive/#textual.reactive.invoke_watcher","title":"invoke_watcher","text":"<pre><code>invoke_watcher(\n    watcher_object, watch_function, old_value, value\n)\n</code></pre> <p>Invoke a watch function.</p> <p>Parameters:</p> Name Type Description Default <code>Reactable</code> <p>The object watching for the changes.</p> required <code>WatchCallbackType</code> <p>A watch function, which may be sync or async.</p> required <code>object</code> <p>The old value of the attribute.</p> required <code>object</code> <p>The new value of the attribute.</p> required"},{"location":"api/reactive/#textual.reactive.invoke_watcher(watcher_object)","title":"<code>watcher_object</code>","text":""},{"location":"api/reactive/#textual.reactive.invoke_watcher(watch_function)","title":"<code>watch_function</code>","text":""},{"location":"api/reactive/#textual.reactive.invoke_watcher(old_value)","title":"<code>old_value</code>","text":""},{"location":"api/reactive/#textual.reactive.invoke_watcher(value)","title":"<code>value</code>","text":""},{"location":"api/renderables/","title":"textual.renderables","text":"<p>A collection of Rich renderables which may be returned from a widget's <code>render()</code> method.</p>"},{"location":"api/renderables/#textual.renderables.bar.Bar","title":"Bar","text":"<pre><code>Bar(\n    highlight_range=(0, 0),\n    highlight_style=\"magenta\",\n    background_style=\"grey37\",\n    clickable_ranges=None,\n    width=None,\n    gradient=None,\n)\n</code></pre> <p>Thin horizontal bar with a portion highlighted.</p> <p>Parameters:</p> Name Type Description Default <code>tuple[float, float]</code> <p>The range to highlight.</p> <code>(0, 0)</code> <code>StyleType</code> <p>The style of the highlighted range of the bar.</p> <code>'magenta'</code> <code>StyleType</code> <p>The style of the non-highlighted range(s) of the bar.</p> <code>'grey37'</code> <code>int | None</code> <p>The width of the bar, or <code>None</code> to fill available width.</p> <code>None</code> <code>Gradient | None</code> <p>Optional gradient object.</p> <code>None</code>"},{"location":"api/renderables/#textual.renderables.bar.Bar(highlight_range)","title":"<code>highlight_range</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(highlight_style)","title":"<code>highlight_style</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(background_style)","title":"<code>background_style</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(width)","title":"<code>width</code>","text":""},{"location":"api/renderables/#textual.renderables.bar.Bar(gradient)","title":"<code>gradient</code>","text":""},{"location":"api/renderables/#textual.renderables.blank.Blank","title":"Blank","text":"<pre><code>Blank(color='transparent')\n</code></pre> <p>Draw solid background color.</p>"},{"location":"api/renderables/#textual.renderables.digits.Digits","title":"Digits","text":"<pre><code>Digits(text, style='')\n</code></pre> <p>Renders a 3X3 unicode 'font' for numerical values.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text to display.</p> required <code>StyleType</code> <p>Style to apply to the digits.</p> <code>''</code>"},{"location":"api/renderables/#textual.renderables.digits.Digits(text)","title":"<code>text</code>","text":""},{"location":"api/renderables/#textual.renderables.digits.Digits(style)","title":"<code>style</code>","text":""},{"location":"api/renderables/#textual.renderables.digits.Digits.get_width","title":"get_width  <code>classmethod</code>","text":"<pre><code>get_width(text)\n</code></pre> <p>Calculate the width without rendering.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text which may be displayed in the <code>Digits</code> widget.</p> required <p>Returns:</p> Type Description <code>int</code> <p>width of the text (in cells).</p>"},{"location":"api/renderables/#textual.renderables.digits.Digits.get_width(text)","title":"<code>text</code>","text":""},{"location":"api/renderables/#textual.renderables.gradient.LinearGradient","title":"LinearGradient","text":"<pre><code>LinearGradient(angle, stops)\n</code></pre> <p>Render a linear gradient with a rotation.</p> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Angle of rotation in degrees.</p> required <code>Sequence[tuple[float, Color | str]]</code> <p>List of stop consisting of pairs of offset (between 0 and 1) and color.</p> required"},{"location":"api/renderables/#textual.renderables.gradient.LinearGradient(angle)","title":"<code>angle</code>","text":""},{"location":"api/renderables/#textual.renderables.gradient.LinearGradient(stops)","title":"<code>stops</code>","text":""},{"location":"api/renderables/#textual.renderables.gradient.VerticalGradient","title":"VerticalGradient","text":"<pre><code>VerticalGradient(color1, color2)\n</code></pre> <p>Draw a vertical gradient.</p>"},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline","title":"Sparkline","text":"<pre><code>Sparkline(\n    data,\n    *,\n    width,\n    min_color=from_rgb(0, 255, 0),\n    max_color=from_rgb(255, 0, 0),\n    summary_function=max\n)\n</code></pre> <p>               Bases: <code>Generic[T]</code></p> <p>A sparkline representing a series of data.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence[T]</code> <p>The sequence of data to render.</p> required <code>int | None</code> <p>The width of the sparkline/the number of buckets to partition the data into.</p> required <code>Color</code> <p>The color of values equal to the min value in data.</p> <code>from_rgb(0, 255, 0)</code> <code>Color</code> <p>The color of values equal to the max value in data.</p> <code>from_rgb(255, 0, 0)</code> <code>SummaryFunction[T]</code> <p>Function that will be applied to each bucket.</p> <code>max</code>"},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(data)","title":"<code>data</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(width)","title":"<code>width</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(min_color)","title":"<code>min_color</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(max_color)","title":"<code>max_color</code>","text":""},{"location":"api/renderables/#textual.renderables.sparkline.Sparkline(summary_function)","title":"<code>summary_function</code>","text":""},{"location":"api/screen/","title":"textual.screen","text":"<p>This module contains the <code>Screen</code> class and related objects.</p> <p>The <code>Screen</code> class is a special widget which represents the content in the terminal. See Screens for details.</p>"},{"location":"api/screen/#textual.screen.ScreenResultCallbackType","title":"ScreenResultCallbackType  <code>module-attribute</code>","text":"<pre><code>ScreenResultCallbackType = Union[\n    Callable[[Optional[ScreenResultType]], None],\n    Callable[[Optional[ScreenResultType]], Awaitable[None]],\n]\n</code></pre> <p>Type of a screen result callback function.</p>"},{"location":"api/screen/#textual.screen.ScreenResultType","title":"ScreenResultType  <code>module-attribute</code>","text":"<pre><code>ScreenResultType = TypeVar('ScreenResultType')\n</code></pre> <p>The result type of a screen.</p>"},{"location":"api/screen/#textual.screen.ModalScreen","title":"ModalScreen","text":"<pre><code>ModalScreen(name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>Screen[ScreenResultType]</code></p> <p>A screen with bindings that take precedence over the App's key bindings.</p> <p>The default styling of a modal screen will dim the screen underneath.</p>"},{"location":"api/screen/#textual.screen.ResultCallback","title":"ResultCallback","text":"<pre><code>ResultCallback(requester, callback, future=None)\n</code></pre> <p>               Bases: <code>Generic[ScreenResultType]</code></p> <p>Holds the details of a callback.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>The object making a request for the callback.</p> required <code>ScreenResultCallbackType[ScreenResultType] | None</code> <p>The callback function.</p> required <code>Future[ScreenResultType] | None</code> <p>A Future to hold the result.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.ResultCallback(requester)","title":"<code>requester</code>","text":""},{"location":"api/screen/#textual.screen.ResultCallback(callback)","title":"<code>callback</code>","text":""},{"location":"api/screen/#textual.screen.ResultCallback(future)","title":"<code>future</code>","text":""},{"location":"api/screen/#textual.screen.ResultCallback.callback","title":"callback  <code>instance-attribute</code>","text":"<pre><code>callback = callback\n</code></pre> <p>The callback function.</p>"},{"location":"api/screen/#textual.screen.ResultCallback.future","title":"future  <code>instance-attribute</code>","text":"<pre><code>future = future\n</code></pre> <p>A future for the result</p>"},{"location":"api/screen/#textual.screen.ResultCallback.requester","title":"requester  <code>instance-attribute</code>","text":"<pre><code>requester = requester\n</code></pre> <p>The object in the DOM that requested the callback.</p>"},{"location":"api/screen/#textual.screen.Screen","title":"Screen","text":"<pre><code>Screen(name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>Generic[ScreenResultType]</code>, <code>Widget</code></p> <p>The base class for screens.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The name of the screen.</p> <code>None</code> <code>str | None</code> <p>The ID of the screen in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the screen.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.Screen(name)","title":"<code>name</code>","text":""},{"location":"api/screen/#textual.screen.Screen(id)","title":"<code>id</code>","text":""},{"location":"api/screen/#textual.screen.Screen(classes)","title":"<code>classes</code>","text":""},{"location":"api/screen/#textual.screen.Screen.ALLOW_IN_MAXIMIZED_VIEW","title":"ALLOW_IN_MAXIMIZED_VIEW  <code>class-attribute</code>","text":"<pre><code>ALLOW_IN_MAXIMIZED_VIEW = '.-textual-system,Footer'\n</code></pre> <p>A selector for the widgets (direct children of Screen) that are allowed in the maximized view (in addition to maximized widget).</p>"},{"location":"api/screen/#textual.screen.Screen.AUTO_FOCUS","title":"AUTO_FOCUS  <code>class-attribute</code>","text":"<pre><code>AUTO_FOCUS = None\n</code></pre> <p>A selector to determine what to focus automatically when the screen is activated.</p> <p>The widget focused is the first that matches the given CSS selector. Set to <code>None</code> to inherit the value from the screen's app. Set to <code>\"\"</code> to disable auto focus.</p>"},{"location":"api/screen/#textual.screen.Screen.COMMANDS","title":"COMMANDS  <code>class-attribute</code>","text":"<pre><code>COMMANDS = set()\n</code></pre> <p>Command providers used by the command palette, associated with the screen.</p> <p>Should be a set of <code>command.Provider</code> classes.</p>"},{"location":"api/screen/#textual.screen.Screen.CSS","title":"CSS  <code>class-attribute</code>","text":"<pre><code>CSS = ''\n</code></pre> <p>Inline CSS, useful for quick scripts. Rules here take priority over CSS_PATH.</p> Note <p>This CSS applies to the whole app.</p>"},{"location":"api/screen/#textual.screen.Screen.CSS_PATH","title":"CSS_PATH  <code>class-attribute</code>","text":"<pre><code>CSS_PATH = None\n</code></pre> <p>File paths to load CSS from.</p> Note <p>This CSS applies to the whole app.</p>"},{"location":"api/screen/#textual.screen.Screen.ESCAPE_TO_MINIMIZE","title":"ESCAPE_TO_MINIMIZE  <code>class-attribute</code>","text":"<pre><code>ESCAPE_TO_MINIMIZE = None\n</code></pre> <p>Use escape key to minimize (potentially overriding bindings) or <code>None</code> to defer to <code>App.ESCAPE_TO_MINIMIZE</code>.</p>"},{"location":"api/screen/#textual.screen.Screen.SUB_TITLE","title":"SUB_TITLE  <code>class-attribute</code>","text":"<pre><code>SUB_TITLE = None\n</code></pre> <p>A class variable to set the default sub-title for the screen.</p> <p>This overrides the app sub-title. To update the sub-title while the screen is running, you can set the sub_title attribute.</p>"},{"location":"api/screen/#textual.screen.Screen.TITLE","title":"TITLE  <code>class-attribute</code>","text":"<pre><code>TITLE = None\n</code></pre> <p>A class variable to set the default title for the screen.</p> <p>This overrides the app title. To update the title while the screen is running, you can set the title attribute.</p>"},{"location":"api/screen/#textual.screen.Screen.active_bindings","title":"active_bindings  <code>property</code>","text":"<pre><code>active_bindings\n</code></pre> <p>Get currently active bindings for this screen.</p> <p>If no widget is focused, then app-level bindings are returned. If a widget is focused, then any bindings present in the screen and app are merged and returned.</p> <p>This property may be used to inspect current bindings.</p> <p>Returns:</p> Type Description <code>dict[str, ActiveBinding]</code> <p>A map of keys to a tuple containing (NAMESPACE, BINDING, ENABLED).</p>"},{"location":"api/screen/#textual.screen.Screen.bindings_updated_signal","title":"bindings_updated_signal  <code>instance-attribute</code>","text":"<pre><code>bindings_updated_signal = Signal(self, 'bindings_updated')\n</code></pre> <p>A signal published when the bindings have been updated</p>"},{"location":"api/screen/#textual.screen.Screen.focus_chain","title":"focus_chain  <code>property</code>","text":"<pre><code>focus_chain\n</code></pre> <p>A list of widgets that may receive focus, in focus order.</p>"},{"location":"api/screen/#textual.screen.Screen.focused","title":"focused  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>focused = Reactive(None)\n</code></pre> <p>The focused widget or <code>None</code> for no focus. To set focus, do not update this value directly. Use set_focus instead.</p>"},{"location":"api/screen/#textual.screen.Screen.is_active","title":"is_active  <code>property</code>","text":"<pre><code>is_active\n</code></pre> <p>Is the screen active (i.e. visible and top of the stack)?</p>"},{"location":"api/screen/#textual.screen.Screen.is_current","title":"is_current  <code>property</code>","text":"<pre><code>is_current\n</code></pre> <p>Is the screen current (i.e. visible to user)?</p>"},{"location":"api/screen/#textual.screen.Screen.is_modal","title":"is_modal  <code>property</code>","text":"<pre><code>is_modal\n</code></pre> <p>Is the screen modal?</p>"},{"location":"api/screen/#textual.screen.Screen.layers","title":"layers  <code>property</code>","text":"<pre><code>layers\n</code></pre> <p>Layers from parent.</p> <p>Returns:</p> Type Description <code>tuple[str, ...]</code> <p>Tuple of layer names.</p>"},{"location":"api/screen/#textual.screen.Screen.maximized","title":"maximized  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>maximized = Reactive(None, layout=True)\n</code></pre> <p>The currently maximized widget, or <code>None</code> for no maximized widget.</p>"},{"location":"api/screen/#textual.screen.Screen.screen_layout_refresh_signal","title":"screen_layout_refresh_signal  <code>instance-attribute</code>","text":"<pre><code>screen_layout_refresh_signal = Signal(\n    self, \"layout-refresh\"\n)\n</code></pre> <p>The signal that is published when the screen's layout is refreshed.</p>"},{"location":"api/screen/#textual.screen.Screen.stack_updates","title":"stack_updates  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>stack_updates = Reactive(0, repaint=False)\n</code></pre> <p>An integer that updates when the screen is resumed.</p>"},{"location":"api/screen/#textual.screen.Screen.sub_title","title":"sub_title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>sub_title = SUB_TITLE\n</code></pre> <p>Screen sub-title to override the app sub-title.</p>"},{"location":"api/screen/#textual.screen.Screen.title","title":"title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>title = TITLE\n</code></pre> <p>Screen title to override the app title.</p>"},{"location":"api/screen/#textual.screen.Screen.action_dismiss","title":"action_dismiss  <code>async</code>","text":"<pre><code>action_dismiss(result=None)\n</code></pre> <p>A wrapper around <code>dismiss</code> that can be called as an action.</p> <p>Parameters:</p> Name Type Description Default <code>ScreenResultType | None</code> <p>The optional result to be passed to the result callback.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.Screen.action_dismiss(result)","title":"<code>result</code>","text":""},{"location":"api/screen/#textual.screen.Screen.action_maximize","title":"action_maximize","text":"<pre><code>action_maximize()\n</code></pre> <p>Action to maximize the currently focused widget.</p>"},{"location":"api/screen/#textual.screen.Screen.action_minimize","title":"action_minimize","text":"<pre><code>action_minimize()\n</code></pre> <p>Action to minimize the currently maximized widget.</p>"},{"location":"api/screen/#textual.screen.Screen.can_view","title":"can_view","text":"<pre><code>can_view(widget)\n</code></pre> <p>Check if a given widget is in the current view (scrollable area).</p> <p>Note: This doesn't necessarily equate to a widget being visible. There are other reasons why a widget may not be visible.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget that is a descendant of self.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the entire widget is in view, False if it is partially visible or not in view.</p>"},{"location":"api/screen/#textual.screen.Screen.can_view(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.dismiss","title":"dismiss","text":"<pre><code>dismiss(result=None)\n</code></pre> <p>Dismiss the screen, optionally with a result.</p> <p>Any callback provided in push_screen will be invoked with the supplied result.</p> <p>Only the active screen may be dismissed. This method will produce a warning in the logs if called on an inactive screen (but otherwise have no effect).</p> <p>Warning</p> <p>Textual will raise a <code>ScreenError</code> if you await the return value from a message handler on the Screen being dismissed. If you want to dismiss the current screen, you can call <code>self.dismiss()</code> without awaiting.</p> <p>Parameters:</p> Name Type Description Default <code>ScreenResultType | None</code> <p>The optional result to be passed to the result callback.</p> <code>None</code>"},{"location":"api/screen/#textual.screen.Screen.dismiss(result)","title":"<code>result</code>","text":""},{"location":"api/screen/#textual.screen.Screen.find_widget","title":"find_widget","text":"<pre><code>find_widget(widget)\n</code></pre> <p>Get the screen region of a Widget.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A Widget within the composition.</p> required <p>Returns:</p> Type Description <code>MapGeometry</code> <p>Region relative to screen.</p> <p>Raises:</p> Type Description <code>NoWidget</code> <p>If the widget could not be found in this screen.</p>"},{"location":"api/screen/#textual.screen.Screen.find_widget(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.focus_next","title":"focus_next","text":"<pre><code>focus_next(selector='*')\n</code></pre> <p>Focus the next widget, optionally filtered by a CSS selector.</p> <p>If no widget is currently focused, this will focus the first focusable widget. If no focusable widget matches the given CSS selector, focus is set to <code>None</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>CSS selector to filter what nodes can be focused.</p> <code>'*'</code> <p>Returns:</p> Type Description <code>Widget | None</code> <p>Newly focused widget, or None for no focus. If the return is not <code>None</code>, then it is guaranteed that the widget returned matches the CSS selectors given in the argument.</p>"},{"location":"api/screen/#textual.screen.Screen.focus_next(selector)","title":"<code>selector</code>","text":""},{"location":"api/screen/#textual.screen.Screen.focus_previous","title":"focus_previous","text":"<pre><code>focus_previous(selector='*')\n</code></pre> <p>Focus the previous widget, optionally filtered by a CSS selector.</p> <p>If no widget is currently focused, this will focus the first focusable widget. If no focusable widget matches the given CSS selector, focus is set to <code>None</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType]</code> <p>CSS selector to filter what nodes can be focused.</p> <code>'*'</code> <p>Returns:</p> Type Description <code>Widget | None</code> <p>Newly focused widget, or None for no focus. If the return is not <code>None</code>, then it is guaranteed that the widget returned matches the CSS selectors given in the argument.</p>"},{"location":"api/screen/#textual.screen.Screen.focus_previous(selector)","title":"<code>selector</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_focusable_widget_at","title":"get_focusable_widget_at","text":"<pre><code>get_focusable_widget_at(x, y)\n</code></pre> <p>Get the focusable widget under a given coordinate.</p> <p>If the widget directly under the given coordinate is not focusable, then this method will check if any of the ancestors are focusable. If no ancestors are focusable, then <code>None</code> will be returned.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>Widget | None</code> <p>A <code>Widget</code>, or <code>None</code> if there is no focusable widget underneath the coordinate.</p>"},{"location":"api/screen/#textual.screen.Screen.get_focusable_widget_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_focusable_widget_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_offset","title":"get_offset","text":"<pre><code>get_offset(widget)\n</code></pre> <p>Get the absolute offset of a given Widget.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>The widget's offset relative to the top left of the terminal.</p>"},{"location":"api/screen/#textual.screen.Screen.get_offset(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_style_at","title":"get_style_at","text":"<pre><code>get_style_at(x, y)\n</code></pre> <p>Get the style under a given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X Coordinate.</p> required <code>int</code> <p>Y Coordinate.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>Rich Style object.</p>"},{"location":"api/screen/#textual.screen.Screen.get_style_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_style_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widget_at","title":"get_widget_at","text":"<pre><code>get_widget_at(x, y)\n</code></pre> <p>Get the widget at a given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X Coordinate.</p> required <code>int</code> <p>Y Coordinate.</p> required <p>Returns:</p> Type Description <code>tuple[Widget, Region]</code> <p>Widget and screen region.</p> <p>Raises:</p> Type Description <code>NoWidget</code> <p>If there is no widget under the screen coordinate.</p>"},{"location":"api/screen/#textual.screen.Screen.get_widget_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widget_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widgets_at","title":"get_widgets_at","text":"<pre><code>get_widgets_at(x, y)\n</code></pre> <p>Get all widgets under a given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate.</p> required <code>int</code> <p>Y coordinate.</p> required <p>Returns:</p> Type Description <code>Iterable[tuple[Widget, Region]]</code> <p>Sequence of (WIDGET, REGION) tuples.</p>"},{"location":"api/screen/#textual.screen.Screen.get_widgets_at(x)","title":"<code>x</code>","text":""},{"location":"api/screen/#textual.screen.Screen.get_widgets_at(y)","title":"<code>y</code>","text":""},{"location":"api/screen/#textual.screen.Screen.maximize","title":"maximize","text":"<pre><code>maximize(widget, container=True)\n</code></pre> <p>Maximize a widget, so it fills the screen.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Widget to maximize.</p> required <code>bool</code> <p>If one of the widgets ancestors is a maximizeable widget, maximize that instead.</p> <code>True</code>"},{"location":"api/screen/#textual.screen.Screen.maximize(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.maximize(container)","title":"<code>container</code>","text":""},{"location":"api/screen/#textual.screen.Screen.minimize","title":"minimize","text":"<pre><code>minimize()\n</code></pre> <p>Restore any maximized widget to normal state.</p>"},{"location":"api/screen/#textual.screen.Screen.refresh_bindings","title":"refresh_bindings","text":"<pre><code>refresh_bindings()\n</code></pre> <p>Call to request a refresh of bindings.</p>"},{"location":"api/screen/#textual.screen.Screen.set_focus","title":"set_focus","text":"<pre><code>set_focus(widget, scroll_visible=True)\n</code></pre> <p>Focus (or un-focus) a widget. A focused widget will receive key events first.</p> <p>Parameters:</p> Name Type Description Default <code>Widget | None</code> <p>Widget to focus, or None to un-focus.</p> required <code>bool</code> <p>Scroll widget in to view.</p> <code>True</code>"},{"location":"api/screen/#textual.screen.Screen.set_focus(widget)","title":"<code>widget</code>","text":""},{"location":"api/screen/#textual.screen.Screen.set_focus(scroll_visible)","title":"<code>scroll_visible</code>","text":""},{"location":"api/screen/#textual.screen.Screen.validate_sub_title","title":"validate_sub_title","text":"<pre><code>validate_sub_title(sub_title)\n</code></pre> <p>Ensure the sub-title is a string or <code>None</code>.</p>"},{"location":"api/screen/#textual.screen.Screen.validate_title","title":"validate_title","text":"<pre><code>validate_title(title)\n</code></pre> <p>Ensure the title is a string or <code>None</code>.</p>"},{"location":"api/screen/#textual.screen.SystemModalScreen","title":"SystemModalScreen","text":"<pre><code>SystemModalScreen(name=None, id=None, classes=None)\n</code></pre> <p>               Bases: <code>ModalScreen[ScreenResultType]</code></p> <p>A variant of <code>ModalScreen</code> for internal use.</p> <p>This version of <code>ModalScreen</code> allows us to build system-level screens; the type being used to indicate that the screen should be isolated from the main application.</p> Note <p>This screen is set to not inherit CSS.</p>"},{"location":"api/scroll_view/","title":"textual.scroll_view","text":"<p><code>ScrollView</code> is a base class for line api widgets.</p>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView","title":"ScrollView","text":"<pre><code>ScrollView(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>ScrollableContainer</code></p> <p>A base class for a Widget that handles its own scrolling (i.e. doesn't rely on the compositor to render children).</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(*children)","title":"<code>*children</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(name)","title":"<code>name</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(id)","title":"<code>id</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(classes)","title":"<code>classes</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.is_scrollable","title":"is_scrollable  <code>property</code>","text":"<pre><code>is_scrollable\n</code></pre> <p>Always scrollable.</p>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_line","title":"refresh_line","text":"<pre><code>refresh_line(y)\n</code></pre> <p>Refresh a single line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Coordinate of line.</p> required"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_line(y)","title":"<code>y</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_lines","title":"refresh_lines","text":"<pre><code>refresh_lines(y_start, line_count=1)\n</code></pre> <p>Refresh one or more lines.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>First line to refresh.</p> required <code>int</code> <p>Total number of lines to refresh.</p> <code>1</code>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_lines(y_start)","title":"<code>y_start</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.refresh_lines(line_count)","title":"<code>line_count</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to","title":"scroll_to","text":"<pre><code>scroll_to(\n    x=None,\n    y=None,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to a given (absolute) coordinate, optionally animating.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>X coordinate (column) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>float | None</code> <p>Y coordinate (row) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>bool</code> <p>Animate to new scroll position.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(x)","title":"<code>x</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(y)","title":"<code>y</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(animate)","title":"<code>animate</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(speed)","title":"<code>speed</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(duration)","title":"<code>duration</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(easing)","title":"<code>easing</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(force)","title":"<code>force</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/scroll_view/#textual.scroll_view.ScrollView.scroll_to(level)","title":"<code>level</code>","text":""},{"location":"api/scrollbar/","title":"textual.scrollbar","text":"<p>Contains the widgets that manage Textual scrollbars.</p> <p>Note</p> <p>You will not typically need this for most apps.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar","title":"ScrollBar","text":"<pre><code>ScrollBar(vertical=True, name=None, *, thickness=1)\n</code></pre> <p>               Bases: <code>Widget</code></p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.renderer","title":"renderer  <code>class-attribute</code>","text":"<pre><code>renderer = ScrollBarRender\n</code></pre> <p>The class used for rendering scrollbars. This can be overridden and set to a ScrollBarRender-derived class in order to delegate all scrollbar rendering to that class. E.g.:</p> <pre><code>class MyScrollBarRender(ScrollBarRender): ...\n\napp = MyApp()\nScrollBar.renderer = MyScrollBarRender\napp.run()\n</code></pre> <p>Because this variable is accessed through specific instances (rather than through the class ScrollBar itself) it is also possible to set this on specific scrollbar instance to change only that instance:</p> <pre><code>my_widget.horizontal_scrollbar.renderer = MyScrollBarRender\n</code></pre>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.action_grab","title":"action_grab","text":"<pre><code>action_grab()\n</code></pre> <p>Begin capturing the mouse cursor.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.action_scroll_down","title":"action_scroll_down","text":"<pre><code>action_scroll_down()\n</code></pre> <p>Scroll vertical scrollbars down, horizontal scrollbars right.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBar.action_scroll_up","title":"action_scroll_up","text":"<pre><code>action_scroll_up()\n</code></pre> <p>Scroll vertical scrollbars up, horizontal scrollbars left.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarCorner","title":"ScrollBarCorner","text":"<pre><code>ScrollBarCorner(name=None)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Widget which fills the gap between horizontal and vertical scrollbars, should they both be present.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender","title":"ScrollBarRender","text":"<pre><code>ScrollBarRender(\n    virtual_size=100,\n    window_size=0,\n    position=0,\n    thickness=1,\n    vertical=True,\n    style=\"bright_magenta on #555555\",\n)\n</code></pre>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender.BLANK_GLYPH","title":"BLANK_GLYPH  <code>class-attribute</code>","text":"<pre><code>BLANK_GLYPH = ' '\n</code></pre> <p>Glyph used for the main body of the scrollbar</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender.HORIZONTAL_BARS","title":"HORIZONTAL_BARS  <code>class-attribute</code>","text":"<pre><code>HORIZONTAL_BARS = ['\u2589', '\u258a', '\u258b', '\u258c', '\u258d', '\u258e', '\u258f', ' ']\n</code></pre> <p>Glyphs used for horizontal scrollbar ends, for smoother display.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollBarRender.VERTICAL_BARS","title":"VERTICAL_BARS  <code>class-attribute</code>","text":"<pre><code>VERTICAL_BARS = ['\u2581', '\u2582', '\u2583', '\u2584', '\u2585', '\u2586', '\u2587', ' ']\n</code></pre> <p>Glyphs used for vertical scrollbar ends, for smoother display.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollDown","title":"ScrollDown","text":"<pre><code>ScrollDown()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking below handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollLeft","title":"ScrollLeft","text":"<pre><code>ScrollLeft()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking above handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollMessage","title":"ScrollMessage","text":"<pre><code>ScrollMessage()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Base class for all scrollbar messages.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollRight","title":"ScrollRight","text":"<pre><code>ScrollRight()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking below handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollTo","title":"ScrollTo","text":"<pre><code>ScrollTo(x=None, y=None, animate=True)\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when click and dragging handle.</p>"},{"location":"api/scrollbar/#textual.scrollbar.ScrollUp","title":"ScrollUp","text":"<pre><code>ScrollUp()\n</code></pre> <p>               Bases: <code>ScrollMessage</code></p> <p>Message sent when clicking above handle.</p>"},{"location":"api/signal/","title":"textual.signal","text":"<p>Signals are a simple pub-sub mechanism.</p> <p>DOMNodes can subscribe to a signal, which will invoke a callback when the signal is published.</p> <p>This is experimental for now, for internal use. It may be part of the public API in a future release.</p>"},{"location":"api/signal/#textual.signal.Signal","title":"Signal","text":"<pre><code>Signal(owner, name)\n</code></pre> <p>               Bases: <code>Generic[SignalT]</code></p> <p>A signal that a widget may subscribe to, in order to invoke callbacks when an associated event occurs.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The owner of this signal.</p> required <code>str</code> <p>An identifier for debugging purposes.</p> required"},{"location":"api/signal/#textual.signal.Signal(owner)","title":"<code>owner</code>","text":""},{"location":"api/signal/#textual.signal.Signal(name)","title":"<code>name</code>","text":""},{"location":"api/signal/#textual.signal.Signal.publish","title":"publish","text":"<pre><code>publish(data)\n</code></pre> <p>Publish the signal (invoke subscribed callbacks).</p> <p>Parameters:</p> Name Type Description Default <code>SignalT</code> <p>An argument to pass to the callbacks.</p> required"},{"location":"api/signal/#textual.signal.Signal.publish(data)","title":"<code>data</code>","text":""},{"location":"api/signal/#textual.signal.Signal.subscribe","title":"subscribe","text":"<pre><code>subscribe(node, callback, immediate=False)\n</code></pre> <p>Subscribe a node to this signal.</p> <p>When the signal is published, the callback will be invoked.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>Node to subscribe.</p> required <code>SignalCallbackType</code> <p>A callback function which takes a single argument and returns anything (return type ignored).</p> required <code>bool</code> <p>Invoke the callback immediately on publish if <code>True</code>, otherwise post it to the DOM node to be called once existing messages have been processed.</p> <code>False</code> <p>Raises:</p> Type Description <code>SignalError</code> <p>Raised when subscribing a non-mounted widget.</p>"},{"location":"api/signal/#textual.signal.Signal.subscribe(node)","title":"<code>node</code>","text":""},{"location":"api/signal/#textual.signal.Signal.subscribe(callback)","title":"<code>callback</code>","text":""},{"location":"api/signal/#textual.signal.Signal.subscribe(immediate)","title":"<code>immediate</code>","text":""},{"location":"api/signal/#textual.signal.Signal.unsubscribe","title":"unsubscribe","text":"<pre><code>unsubscribe(node)\n</code></pre> <p>Unsubscribe a node from this signal.</p> <p>Parameters:</p> Name Type Description Default <code>MessagePump</code> <p>Node to unsubscribe,</p> required"},{"location":"api/signal/#textual.signal.Signal.unsubscribe(node)","title":"<code>node</code>","text":""},{"location":"api/signal/#textual.signal.SignalError","title":"SignalError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised for Signal errors.</p>"},{"location":"api/strip/","title":"textual.strip","text":"<p>This module contains the <code>Strip</code> class and related objects.</p> <p>A <code>Strip</code> contains the result of rendering a widget. See line API for how to use Strips.</p>"},{"location":"api/strip/#textual.strip.Strip","title":"Strip","text":"<pre><code>Strip(segments, cell_length=None)\n</code></pre> <p>Represents a 'strip' (horizontal line) of a Textual Widget.</p> <p>A Strip is like an immutable list of Segments. The immutability allows for effective caching.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Segment]</code> <p>An iterable of segments.</p> required <code>int | None</code> <p>The cell length if known, or None to calculate on demand.</p> <code>None</code>"},{"location":"api/strip/#textual.strip.Strip(segments)","title":"<code>segments</code>","text":""},{"location":"api/strip/#textual.strip.Strip(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.cell_length","title":"cell_length  <code>property</code>","text":"<pre><code>cell_length\n</code></pre> <p>Get the number of cells required to render this object.</p>"},{"location":"api/strip/#textual.strip.Strip.link_ids","title":"link_ids  <code>property</code>","text":"<pre><code>link_ids\n</code></pre> <p>A set of the link ids in this Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.text","title":"text  <code>property</code>","text":"<pre><code>text\n</code></pre> <p>Segment text.</p>"},{"location":"api/strip/#textual.strip.Strip.adjust_cell_length","title":"adjust_cell_length","text":"<pre><code>adjust_cell_length(cell_length, style=None)\n</code></pre> <p>Adjust the cell length, possibly truncating or extending.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>New desired cell length.</p> required <code>Style | None</code> <p>Style when extending, or <code>None</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>A new strip with the supplied cell length.</p>"},{"location":"api/strip/#textual.strip.Strip.adjust_cell_length(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.adjust_cell_length(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.apply_filter","title":"apply_filter","text":"<pre><code>apply_filter(filter, background)\n</code></pre> <p>Apply a filter to all segments in the strip.</p> <p>Parameters:</p> Name Type Description Default <code>LineFilter</code> <p>A line filter object.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A new Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.apply_filter(filter)","title":"<code>filter</code>","text":""},{"location":"api/strip/#textual.strip.Strip.apply_style","title":"apply_style","text":"<pre><code>apply_style(style)\n</code></pre> <p>Apply a style to the Strip.</p> <p>Parameters:</p> Name Type Description Default <code>Style</code> <p>A Rich style.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A new strip.</p>"},{"location":"api/strip/#textual.strip.Strip.apply_style(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.blank","title":"blank  <code>classmethod</code>","text":"<pre><code>blank(cell_length, style=None)\n</code></pre> <p>Create a blank strip.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Desired cell length.</p> required <code>StyleType | None</code> <p>Style of blank.</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>New strip.</p>"},{"location":"api/strip/#textual.strip.Strip.blank(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.blank(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop","title":"crop","text":"<pre><code>crop(start, end=None)\n</code></pre> <p>Crop a strip between two cell positions.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The start cell position (inclusive).</p> required <code>int | None</code> <p>The end cell position (exclusive).</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>A new Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.crop(start)","title":"<code>start</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop(end)","title":"<code>end</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop_extend","title":"crop_extend","text":"<pre><code>crop_extend(start, end, style)\n</code></pre> <p>Crop between two points, extending the length if required.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Start offset of crop.</p> required <code>int</code> <p>End offset of crop.</p> required <code>Style | None</code> <p>Style of additional padding.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>New cropped Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.crop_extend(start)","title":"<code>start</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop_extend(end)","title":"<code>end</code>","text":""},{"location":"api/strip/#textual.strip.Strip.crop_extend(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.divide","title":"divide","text":"<pre><code>divide(cuts)\n</code></pre> <p>Divide the strip in to multiple smaller strips by cutting at given (cell) indices.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[int]</code> <p>An iterable of cell positions as ints.</p> required <p>Returns:</p> Type Description <code>Sequence[Strip]</code> <p>A new list of strips.</p>"},{"location":"api/strip/#textual.strip.Strip.divide(cuts)","title":"<code>cuts</code>","text":""},{"location":"api/strip/#textual.strip.Strip.extend_cell_length","title":"extend_cell_length","text":"<pre><code>extend_cell_length(cell_length, style=None)\n</code></pre> <p>Extend the cell length if it is less than the given value.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Required minimum cell length.</p> required <code>Style | None</code> <p>Style for padding if the cell length is extended.</p> <code>None</code> <p>Returns:</p> Type Description <code>Strip</code> <p>A new Strip.</p>"},{"location":"api/strip/#textual.strip.Strip.extend_cell_length(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.extend_cell_length(style)","title":"<code>style</code>","text":""},{"location":"api/strip/#textual.strip.Strip.from_lines","title":"from_lines  <code>classmethod</code>","text":"<pre><code>from_lines(lines, cell_length=None)\n</code></pre> <p>Convert lines (lists of segments) to a list of Strips.</p> <p>Parameters:</p> Name Type Description Default <code>list[list[Segment]]</code> <p>List of lines, where a line is a list of segments.</p> required <code>int | None</code> <p>Cell length of lines (must be same) or None if not known.</p> <code>None</code> <p>Returns:</p> Type Description <code>list[Strip]</code> <p>List of strips.</p>"},{"location":"api/strip/#textual.strip.Strip.from_lines(lines)","title":"<code>lines</code>","text":""},{"location":"api/strip/#textual.strip.Strip.from_lines(cell_length)","title":"<code>cell_length</code>","text":""},{"location":"api/strip/#textual.strip.Strip.index_to_cell_position","title":"index_to_cell_position","text":"<pre><code>index_to_cell_position(index)\n</code></pre> <p>Given a character index, return the cell position of that character. This is the sum of the cell lengths of all the characters before the character at <code>index</code>.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index to convert.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The cell position of the character at <code>index</code>.</p>"},{"location":"api/strip/#textual.strip.Strip.index_to_cell_position(index)","title":"<code>index</code>","text":""},{"location":"api/strip/#textual.strip.Strip.join","title":"join  <code>classmethod</code>","text":"<pre><code>join(strips)\n</code></pre> <p>Join a number of strips in to one.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Strip | None]</code> <p>An iterable of Strips.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A new combined strip.</p>"},{"location":"api/strip/#textual.strip.Strip.join(strips)","title":"<code>strips</code>","text":""},{"location":"api/strip/#textual.strip.Strip.simplify","title":"simplify","text":"<pre><code>simplify()\n</code></pre> <p>Simplify the segments (join segments with same style)</p> <p>Returns:</p> Type Description <code>Strip</code> <p>New strip.</p>"},{"location":"api/strip/#textual.strip.Strip.style_links","title":"style_links","text":"<pre><code>style_links(link_id, link_style)\n</code></pre> <p>Apply a style to Segments with the given link_id.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A link id.</p> required <code>Style</code> <p>Style to apply.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>New strip (or same Strip if no changes).</p>"},{"location":"api/strip/#textual.strip.Strip.style_links(link_id)","title":"<code>link_id</code>","text":""},{"location":"api/strip/#textual.strip.Strip.style_links(link_style)","title":"<code>link_style</code>","text":""},{"location":"api/strip/#textual.strip.StripRenderable","title":"StripRenderable","text":"<pre><code>StripRenderable(strips, width=None)\n</code></pre> <p>A renderable which renders a list of strips in to lines.</p>"},{"location":"api/strip/#textual.strip.get_line_length","title":"get_line_length","text":"<pre><code>get_line_length(segments)\n</code></pre> <p>Get the line length (total length of all segments).</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Segment]</code> <p>Iterable of segments.</p> required <p>Returns:</p> Type Description <code>int</code> <p>Length of line in cells.</p>"},{"location":"api/strip/#textual.strip.get_line_length(segments)","title":"<code>segments</code>","text":""},{"location":"api/suggester/","title":"textual.suggester","text":"<p>Contains the <code>Suggester</code> class, used by the Input widget.</p>"},{"location":"api/suggester/#textual.suggester.SuggestFromList","title":"SuggestFromList","text":"<pre><code>SuggestFromList(suggestions, *, case_sensitive=True)\n</code></pre> <p>               Bases: <code>Suggester</code></p> <p>Give completion suggestions based on a fixed list of options.</p> Example <pre><code>countries = [\"England\", \"Scotland\", \"Portugal\", \"Spain\", \"France\"]\n\nclass MyApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        yield Input(suggester=SuggestFromList(countries, case_sensitive=False))\n</code></pre> <p>If the user types P inside the input widget, a completion suggestion for <code>\"Portugal\"</code> appears.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[str]</code> <p>Valid suggestions sorted by decreasing priority.</p> required <code>bool</code> <p>Whether suggestions are computed in a case sensitive manner or not. The values provided in the argument <code>suggestions</code> represent the canonical representation of the completions and they will be suggested with that same casing.</p> <code>True</code>"},{"location":"api/suggester/#textual.suggester.SuggestFromList(suggestions)","title":"<code>suggestions</code>","text":""},{"location":"api/suggester/#textual.suggester.SuggestFromList(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/suggester/#textual.suggester.SuggestFromList.get_suggestion","title":"get_suggestion  <code>async</code>","text":"<pre><code>get_suggestion(value)\n</code></pre> <p>Gets a completion from the given possibilities.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The current value.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A valid completion suggestion or <code>None</code>.</p>"},{"location":"api/suggester/#textual.suggester.SuggestFromList.get_suggestion(value)","title":"<code>value</code>","text":""},{"location":"api/suggester/#textual.suggester.Suggester","title":"Suggester","text":"<pre><code>Suggester(*, use_cache=True, case_sensitive=False)\n</code></pre> <p>               Bases: <code>ABC</code></p> <p>Defines how widgets generate completion suggestions.</p> <p>To define a custom suggester, subclass <code>Suggester</code> and implement the async method <code>get_suggestion</code>. See <code>SuggestFromList</code> for an example.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether to cache suggestion results.</p> <code>True</code> <code>bool</code> <p>Whether suggestions are case sensitive or not. If they are not, incoming values are casefolded before generating the suggestion.</p> <code>False</code>"},{"location":"api/suggester/#textual.suggester.Suggester(use_cache)","title":"<code>use_cache</code>","text":""},{"location":"api/suggester/#textual.suggester.Suggester(case_sensitive)","title":"<code>case_sensitive</code>","text":""},{"location":"api/suggester/#textual.suggester.Suggester.cache","title":"cache  <code>instance-attribute</code>","text":"<pre><code>cache = LRUCache(1024) if use_cache else None\n</code></pre> <p>Suggestion cache, if used.</p>"},{"location":"api/suggester/#textual.suggester.Suggester.get_suggestion","title":"get_suggestion  <code>abstractmethod</code> <code>async</code>","text":"<pre><code>get_suggestion(value)\n</code></pre> <p>Try to get a completion suggestion for the given input value.</p> <p>Custom suggesters should implement this method.</p> Note <p>The value argument will be casefolded if <code>self.case_sensitive</code> is <code>False</code>.</p> Note <p>If your implementation is not deterministic, you may need to disable caching.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The current value of the requester widget.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A valid suggestion or <code>None</code>.</p>"},{"location":"api/suggester/#textual.suggester.Suggester.get_suggestion(value)","title":"<code>value</code>","text":""},{"location":"api/suggester/#textual.suggester.SuggestionReady","title":"SuggestionReady  <code>dataclass</code>","text":"<pre><code>SuggestionReady(value, suggestion)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Sent when a completion suggestion is ready.</p>"},{"location":"api/suggester/#textual.suggester.SuggestionReady.suggestion","title":"suggestion  <code>instance-attribute</code>","text":"<pre><code>suggestion\n</code></pre> <p>The string suggestion.</p>"},{"location":"api/suggester/#textual.suggester.SuggestionReady.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value\n</code></pre> <p>The value to which the suggestion is for.</p>"},{"location":"api/system_commands_source/","title":"textual.system_commands","text":"<p>This module contains <code>SystemCommands</code>, a command palette command provider for Textual system commands.</p> <p>This is a simple command provider that makes the most obvious application actions available via the command palette.</p> <p>Note</p> <p>The App base class installs this automatically.</p>"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider","title":"SystemCommandsProvider","text":"<pre><code>SystemCommandsProvider(screen, match_style=None)\n</code></pre> <p>               Bases: <code>Provider</code></p> <p>A source of command palette commands that run app-wide tasks.</p> <p>Used by default in <code>App.COMMANDS</code>.</p> <p>Parameters:</p> Name Type Description Default <code>Screen[Any]</code> <p>A reference to the active screen.</p> required"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider(screen)","title":"<code>screen</code>","text":""},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider.discover","title":"discover  <code>async</code>","text":"<pre><code>discover()\n</code></pre> <p>Handle a request for the discovery commands for this provider.</p> <p>Yields:</p> Type Description <code>Hits</code> <p>Commands that can be discovered.</p>"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider.search","title":"search  <code>async</code>","text":"<pre><code>search(query)\n</code></pre> <p>Handle a request to search for system commands that match the query.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The user input to be matched.</p> required <p>Yields:</p> Type Description <code>Hits</code> <p>Command hits for use in the command palette.</p>"},{"location":"api/system_commands_source/#textual.system_commands.SystemCommandsProvider.search(query)","title":"<code>query</code>","text":""},{"location":"api/timer/","title":"textual.timer","text":"<p>Contains the <code>Timer</code> class. Timer objects are created by set_interval or     set_timer.</p>"},{"location":"api/timer/#textual.timer.TimerCallback","title":"TimerCallback  <code>module-attribute</code>","text":"<pre><code>TimerCallback = Union[\n    Callable[[], Awaitable[Any]], Callable[[], Any]\n]\n</code></pre> <p>Type of valid callbacks to be used with timers.</p>"},{"location":"api/timer/#textual.timer.EventTargetGone","title":"EventTargetGone","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if the timer event target has been deleted prior to the timer event being sent.</p>"},{"location":"api/timer/#textual.timer.Timer","title":"Timer","text":"<pre><code>Timer(\n    event_target,\n    interval,\n    *,\n    name=None,\n    callback=None,\n    repeat=None,\n    skip=True,\n    pause=False\n)\n</code></pre> <p>A class to send timer-based events.</p> <p>Parameters:</p> Name Type Description Default <code>MessageTarget</code> <p>The object which will receive the timer events.</p> required <code>float</code> <p>The time between timer events, in seconds.</p> required <code>str | None</code> <p>A name to assign the event (for debugging).</p> <code>None</code> <code>TimerCallback | None</code> <p>A optional callback to invoke when the event is handled.</p> <code>None</code> <code>int | None</code> <p>The number of times to repeat the timer, or None to repeat forever.</p> <code>None</code> <code>bool</code> <p>Enable skipping of scheduled events that couldn't be sent in time.</p> <code>True</code> <code>bool</code> <p>Start the timer paused.</p> <code>False</code>"},{"location":"api/timer/#textual.timer.Timer(event_target)","title":"<code>event_target</code>","text":""},{"location":"api/timer/#textual.timer.Timer(interval)","title":"<code>interval</code>","text":""},{"location":"api/timer/#textual.timer.Timer(name)","title":"<code>name</code>","text":""},{"location":"api/timer/#textual.timer.Timer(callback)","title":"<code>callback</code>","text":""},{"location":"api/timer/#textual.timer.Timer(repeat)","title":"<code>repeat</code>","text":""},{"location":"api/timer/#textual.timer.Timer(skip)","title":"<code>skip</code>","text":""},{"location":"api/timer/#textual.timer.Timer(pause)","title":"<code>pause</code>","text":""},{"location":"api/timer/#textual.timer.Timer.pause","title":"pause","text":"<pre><code>pause()\n</code></pre> <p>Pause the timer.</p> <p>A paused timer will not send events until it is resumed.</p>"},{"location":"api/timer/#textual.timer.Timer.reset","title":"reset","text":"<pre><code>reset()\n</code></pre> <p>Reset the timer, so it starts from the beginning.</p>"},{"location":"api/timer/#textual.timer.Timer.resume","title":"resume","text":"<pre><code>resume()\n</code></pre> <p>Resume a paused timer.</p>"},{"location":"api/timer/#textual.timer.Timer.stop","title":"stop","text":"<pre><code>stop()\n</code></pre> <p>Stop the timer.</p> <p>Returns:</p> Type Description <code>Task</code> <p>A Task object. Await this to wait until the timer has completed.</p>"},{"location":"api/types/","title":"textual.types","text":"<p>Export some objects that are used by Textual and that help document other features.</p>"},{"location":"api/types/#textual.types.ActionParseResult","title":"ActionParseResult  <code>module-attribute</code>","text":"<pre><code>ActionParseResult = 'tuple[str, str, tuple[object, ...]]'\n</code></pre> <p>An action is its name and the arbitrary tuple of its arguments.</p>"},{"location":"api/types/#textual.types.AnimationLevel","title":"AnimationLevel  <code>module-attribute</code>","text":"<pre><code>AnimationLevel = Literal['none', 'basic', 'full']\n</code></pre> <p>The levels that the <code>TEXTUAL_ANIMATIONS</code> env var can be set to.</p>"},{"location":"api/types/#textual.types.CSSPathType","title":"CSSPathType  <code>module-attribute</code>","text":"<pre><code>CSSPathType = Union[\n    str, PurePath, List[Union[str, PurePath]]\n]\n</code></pre> <p>Valid ways of specifying paths to CSS files.</p>"},{"location":"api/types/#textual.types.CallbackType","title":"CallbackType  <code>module-attribute</code>","text":"<pre><code>CallbackType = Union[\n    Callable[[], Awaitable[None]], Callable[[], None]\n]\n</code></pre> <p>Type used for arbitrary callables used in callbacks.</p>"},{"location":"api/types/#textual.types.Direction","title":"Direction  <code>module-attribute</code>","text":"<pre><code>Direction = Literal[-1, 1]\n</code></pre> <p>Valid values to determine navigation direction.</p> <p>In a vertical setting, 1 points down and -1 points up. In a horizontal setting, 1 points right and -1 points left.</p>"},{"location":"api/types/#textual.types.EasingFunction","title":"EasingFunction  <code>module-attribute</code>","text":"<pre><code>EasingFunction = Callable[[float], float]\n</code></pre> <p>Signature for a function that parametrizes animation speed.</p> <p>An easing function must map the interval [0, 1] into the interval [0, 1].</p>"},{"location":"api/types/#textual.types.IgnoreReturnCallbackType","title":"IgnoreReturnCallbackType  <code>module-attribute</code>","text":"<pre><code>IgnoreReturnCallbackType = Union[\n    Callable[[], Awaitable[Any]], Callable[[], Any]\n]\n</code></pre> <p>A callback which ignores the return type.</p>"},{"location":"api/types/#textual.types.InputValidationOn","title":"InputValidationOn  <code>module-attribute</code>","text":"<pre><code>InputValidationOn = Literal['blur', 'changed', 'submitted']\n</code></pre> <p>Possible messages that trigger input validation.</p>"},{"location":"api/types/#textual.types.NewOptionListContent","title":"NewOptionListContent  <code>module-attribute</code>","text":"<pre><code>NewOptionListContent = (\n    \"OptionListContent | None | RenderableType\"\n)\n</code></pre> <p>The type of a new item of option list content to be added to an option list.</p> <p>This type represents all of the types that will be accepted when adding new content to the option list. This is a superset of <code>OptionListContent</code>.</p>"},{"location":"api/types/#textual.types.OptionListContent","title":"OptionListContent  <code>module-attribute</code>","text":"<pre><code>OptionListContent = 'Option | Separator'\n</code></pre> <p>The type of an item of content in the option list.</p> <p>This type represents all of the types that will be found in the list of content of the option list after it has been processed for addition.</p>"},{"location":"api/types/#textual.types.PlaceholderVariant","title":"PlaceholderVariant  <code>module-attribute</code>","text":"<pre><code>PlaceholderVariant = Literal['default', 'size', 'text']\n</code></pre> <p>The different variants of placeholder.</p>"},{"location":"api/types/#textual.types.SelectType","title":"SelectType  <code>module-attribute</code>","text":"<pre><code>SelectType = TypeVar('SelectType')\n</code></pre> <p>The type used for data in the Select.</p>"},{"location":"api/types/#textual.types.WatchCallbackType","title":"WatchCallbackType  <code>module-attribute</code>","text":"<pre><code>WatchCallbackType = Union[\n    WatchCallbackBothValuesType,\n    WatchCallbackNewValueType,\n    WatchCallbackNoArgsType,\n]\n</code></pre> <p>Type used for callbacks passed to the <code>watch</code> method of widgets.</p>"},{"location":"api/types/#textual.types.Animatable","title":"Animatable","text":"<p>               Bases: <code>Protocol</code></p> <p>Protocol for objects that can have their intrinsic values animated.</p> <p>For example, the transition between two colors can be animated because the class <code>Color</code> satisfies this protocol.</p>"},{"location":"api/types/#textual.types.CSSPathError","title":"CSSPathError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when supplied CSS path(s) are invalid.</p>"},{"location":"api/types/#textual.types.DirEntry","title":"DirEntry  <code>dataclass</code>","text":"<pre><code>DirEntry(path, loaded=False)\n</code></pre> <p>Attaches directory information to a <code>DirectoryTree</code> node.</p>"},{"location":"api/types/#textual.types.DirEntry.loaded","title":"loaded  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>loaded = False\n</code></pre> <p>Has this been loaded?</p>"},{"location":"api/types/#textual.types.DirEntry.path","title":"path  <code>instance-attribute</code>","text":"<pre><code>path\n</code></pre> <p>The path of the directory entry.</p>"},{"location":"api/types/#textual.types.DuplicateID","title":"DuplicateID","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if a duplicate ID is used when adding options to an option list.</p>"},{"location":"api/types/#textual.types.MessageTarget","title":"MessageTarget","text":"<p>               Bases: <code>Protocol</code></p> <p>Protocol that must be followed by objects that can receive messages.</p>"},{"location":"api/types/#textual.types.NoActiveAppError","title":"NoActiveAppError","text":"<p>               Bases: <code>RuntimeError</code></p> <p>Runtime error raised if we try to retrieve the active app when there is none.</p>"},{"location":"api/types/#textual.types.NoSelection","title":"NoSelection","text":"<p>Used by the <code>Select</code> widget to flag the unselected state. See <code>Select.BLANK</code>.</p>"},{"location":"api/types/#textual.types.OptionDoesNotExist","title":"OptionDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when a request has been made for an option that doesn't exist.</p>"},{"location":"api/types/#textual.types.RenderStyles","title":"RenderStyles","text":"<pre><code>RenderStyles(node, base, inline_styles)\n</code></pre> <p>               Bases: <code>StylesBase</code></p> <p>Presents a combined view of two Styles object: a base Styles and inline Styles.</p>"},{"location":"api/types/#textual.types.RenderStyles.base","title":"base  <code>property</code>","text":"<pre><code>base\n</code></pre> <p>Quick access to base (css) style.</p>"},{"location":"api/types/#textual.types.RenderStyles.css","title":"css  <code>property</code>","text":"<pre><code>css\n</code></pre> <p>Get the CSS for the combined styles.</p>"},{"location":"api/types/#textual.types.RenderStyles.gutter","title":"gutter  <code>property</code>","text":"<pre><code>gutter\n</code></pre> <p>Get space around widget.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Space around widget content.</p>"},{"location":"api/types/#textual.types.RenderStyles.inline","title":"inline  <code>property</code>","text":"<pre><code>inline\n</code></pre> <p>Quick access to the inline styles.</p>"},{"location":"api/types/#textual.types.RenderStyles.rich_style","title":"rich_style  <code>property</code>","text":"<pre><code>rich_style\n</code></pre> <p>Get a Rich style for this Styles object.</p>"},{"location":"api/types/#textual.types.RenderStyles.animate","title":"animate","text":"<pre><code>animate(\n    attribute,\n    value,\n    *,\n    final_value=...,\n    duration=None,\n    speed=None,\n    delay=0.0,\n    easing=DEFAULT_EASING,\n    on_complete=None,\n    level=\"full\"\n)\n</code></pre> <p>Animate an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute to animate.</p> required <code>str | float | Animatable</code> <p>The value to animate to.</p> required <code>object</code> <p>The final value of the animation. Defaults to <code>value</code> if not set.</p> <code>...</code> <code>float | None</code> <p>The duration (in seconds) of the animation.</p> <code>None</code> <code>float | None</code> <p>The speed of the animation.</p> <code>None</code> <code>float</code> <p>A delay (in seconds) before the animation starts.</p> <code>0.0</code> <code>EasingFunction | str</code> <p>An easing method.</p> <code>DEFAULT_EASING</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'full'</code>"},{"location":"api/types/#textual.types.RenderStyles.animate(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(value)","title":"<code>value</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(final_value)","title":"<code>final_value</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(duration)","title":"<code>duration</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(speed)","title":"<code>speed</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(delay)","title":"<code>delay</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(easing)","title":"<code>easing</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.animate(level)","title":"<code>level</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.clear_rule","title":"clear_rule","text":"<pre><code>clear_rule(rule_name)\n</code></pre> <p>Clear a rule (from inline).</p>"},{"location":"api/types/#textual.types.RenderStyles.get_rules","title":"get_rules","text":"<pre><code>get_rules()\n</code></pre> <p>Get rules as a dictionary</p>"},{"location":"api/types/#textual.types.RenderStyles.has_rule","title":"has_rule","text":"<pre><code>has_rule(rule)\n</code></pre> <p>Check if a rule has been set.</p>"},{"location":"api/types/#textual.types.RenderStyles.merge","title":"merge","text":"<pre><code>merge(other)\n</code></pre> <p>Merge values from another Styles.</p> <p>Parameters:</p> Name Type Description Default <code>StylesBase</code> <p>A Styles object.</p> required"},{"location":"api/types/#textual.types.RenderStyles.merge(other)","title":"<code>other</code>","text":""},{"location":"api/types/#textual.types.RenderStyles.reset","title":"reset","text":"<pre><code>reset()\n</code></pre> <p>Reset the rules to initial state.</p>"},{"location":"api/types/#textual.types.UnusedParameter","title":"UnusedParameter","text":"<p>Helper type for a parameter that isn't specified in a method call.</p>"},{"location":"api/validation/","title":"textual.validation","text":"<p>This module provides a number of classes for validating input.</p> <p>See Validating Input for details.</p>"},{"location":"api/validation/#textual.validation.Failure","title":"Failure  <code>dataclass</code>","text":"<pre><code>Failure(validator, value=None, description=None)\n</code></pre> <p>Information about a validation failure.</p>"},{"location":"api/validation/#textual.validation.Failure.description","title":"description  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>description = None\n</code></pre> <p>An optional override for describing this failure. Takes precedence over any messages set in the Validator.</p>"},{"location":"api/validation/#textual.validation.Failure.validator","title":"validator  <code>instance-attribute</code>","text":"<pre><code>validator\n</code></pre> <p>The Validator which produced the failure.</p>"},{"location":"api/validation/#textual.validation.Failure.value","title":"value  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>value = None\n</code></pre> <p>The value which resulted in validation failing.</p>"},{"location":"api/validation/#textual.validation.Function","title":"Function","text":"<pre><code>Function(function, failure_description=None)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>A flexible validator which allows you to provide custom validation logic.</p>"},{"location":"api/validation/#textual.validation.Function.function","title":"function  <code>instance-attribute</code>","text":"<pre><code>function = function\n</code></pre> <p>Function which takes the value to validate and returns True if valid, and False otherwise.</p>"},{"location":"api/validation/#textual.validation.Function.ReturnedFalse","title":"ReturnedFalse  <code>dataclass</code>","text":"<pre><code>ReturnedFalse(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates validation failed because the supplied function returned False.</p>"},{"location":"api/validation/#textual.validation.Function.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Function.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Function.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Validate that the supplied function returns True.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to pass into the supplied function.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A ValidationResult indicating success if the function returned True, and failure if the function return False.</p>"},{"location":"api/validation/#textual.validation.Function.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Integer","title":"Integer","text":"<pre><code>Integer(\n    minimum=None, maximum=None, failure_description=None\n)\n</code></pre> <p>               Bases: <code>Number</code></p> <p>Validator which ensures the value is an integer which falls within a range.</p>"},{"location":"api/validation/#textual.validation.Integer.NotAnInteger","title":"NotAnInteger  <code>dataclass</code>","text":"<pre><code>NotAnInteger(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the value not being a valid integer.</p>"},{"location":"api/validation/#textual.validation.Integer.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Integer.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Integer.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that <code>value</code> is an integer, optionally within a range.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Integer.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Length","title":"Length","text":"<pre><code>Length(\n    minimum=None, maximum=None, failure_description=None\n)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>Validate that a string is within a range (inclusive).</p>"},{"location":"api/validation/#textual.validation.Length.maximum","title":"maximum  <code>instance-attribute</code>","text":"<pre><code>maximum = maximum\n</code></pre> <p>The inclusive maximum length of the value, or None if unbounded.</p>"},{"location":"api/validation/#textual.validation.Length.minimum","title":"minimum  <code>instance-attribute</code>","text":"<pre><code>minimum = minimum\n</code></pre> <p>The inclusive minimum length of the value, or None if unbounded.</p>"},{"location":"api/validation/#textual.validation.Length.Incorrect","title":"Incorrect  <code>dataclass</code>","text":"<pre><code>Incorrect(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the length of the value being outside the range.</p>"},{"location":"api/validation/#textual.validation.Length.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Length.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Length.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that value falls within the maximum and minimum length constraints.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Length.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Number","title":"Number","text":"<pre><code>Number(\n    minimum=None, maximum=None, failure_description=None\n)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>Validator that ensures the value is a number, with an optional range check.</p>"},{"location":"api/validation/#textual.validation.Number.maximum","title":"maximum  <code>instance-attribute</code>","text":"<pre><code>maximum = maximum\n</code></pre> <p>The maximum value of the number, inclusive. If <code>None</code>, the maximum is unbounded.</p>"},{"location":"api/validation/#textual.validation.Number.minimum","title":"minimum  <code>instance-attribute</code>","text":"<pre><code>minimum = minimum\n</code></pre> <p>The minimum value of the number, inclusive. If <code>None</code>, the minimum is unbounded.</p>"},{"location":"api/validation/#textual.validation.Number.NotANumber","title":"NotANumber  <code>dataclass</code>","text":"<pre><code>NotANumber(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the value not being a valid number (decimal/integer, inc. scientific notation)</p>"},{"location":"api/validation/#textual.validation.Number.NotInRange","title":"NotInRange  <code>dataclass</code>","text":"<pre><code>NotInRange(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates a failure due to the number not being within the range [minimum, maximum].</p>"},{"location":"api/validation/#textual.validation.Number.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Number.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Number.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that <code>value</code> is a valid number, optionally within a range.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Number.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Regex","title":"Regex","text":"<pre><code>Regex(regex, flags=0, failure_description=None)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>A validator that checks the value matches a regex (via <code>re.fullmatch</code>).</p>"},{"location":"api/validation/#textual.validation.Regex.flags","title":"flags  <code>instance-attribute</code>","text":"<pre><code>flags = flags\n</code></pre> <p>The flags to pass to <code>re.fullmatch</code>.</p>"},{"location":"api/validation/#textual.validation.Regex.regex","title":"regex  <code>instance-attribute</code>","text":"<pre><code>regex = regex\n</code></pre> <p>The regex which we'll validate is matched by the value.</p>"},{"location":"api/validation/#textual.validation.Regex.NoResults","title":"NoResults  <code>dataclass</code>","text":"<pre><code>NoResults(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates validation failed because the regex could not be found within the value string.</p>"},{"location":"api/validation/#textual.validation.Regex.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Regex.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Regex.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Ensure that the value matches the regex.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value that should match the regex.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Regex.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.URL","title":"URL","text":"<pre><code>URL(failure_description=None)\n</code></pre> <p>               Bases: <code>Validator</code></p> <p>Validator that checks if a URL is valid (ensuring a scheme is present).</p>"},{"location":"api/validation/#textual.validation.URL.InvalidURL","title":"InvalidURL  <code>dataclass</code>","text":"<pre><code>InvalidURL(validator, value=None, description=None)\n</code></pre> <p>               Bases: <code>Failure</code></p> <p>Indicates that the URL is not valid.</p>"},{"location":"api/validation/#textual.validation.URL.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Describes why the validator failed.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.URL.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.URL.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Validates that <code>value</code> is a valid URL (contains a scheme).</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.URL.validate(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.ValidationResult","title":"ValidationResult  <code>dataclass</code>","text":"<pre><code>ValidationResult(failures=list())\n</code></pre> <p>The result of calling a <code>Validator.validate</code> method.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failure_descriptions","title":"failure_descriptions  <code>property</code>","text":"<pre><code>failure_descriptions\n</code></pre> <p>Utility for extracting failure descriptions as strings.</p> <p>Useful if you don't care about the additional metadata included in the <code>Failure</code> objects.</p> <p>Returns:</p> Type Description <code>list[str]</code> <p>A list of the string descriptions explaining the failing validations.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failures","title":"failures  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>failures = field(default_factory=list)\n</code></pre> <p>A list of reasons why the value was invalid. Empty if valid=True</p>"},{"location":"api/validation/#textual.validation.ValidationResult.is_valid","title":"is_valid  <code>property</code>","text":"<pre><code>is_valid\n</code></pre> <p>True if the validation was successful.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failure","title":"failure  <code>staticmethod</code>","text":"<pre><code>failure(failures)\n</code></pre> <p>Construct a failure ValidationResult.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence[Failure]</code> <p>The failures.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A failure ValidationResult.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.failure(failures)","title":"<code>failures</code>","text":""},{"location":"api/validation/#textual.validation.ValidationResult.merge","title":"merge  <code>staticmethod</code>","text":"<pre><code>merge(results)\n</code></pre> <p>Merge multiple ValidationResult objects into one.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence['ValidationResult']</code> <p>List of ValidationResult objects to merge.</p> required <p>Returns:</p> Type Description <code>'ValidationResult'</code> <p>Merged ValidationResult object.</p>"},{"location":"api/validation/#textual.validation.ValidationResult.merge(results)","title":"<code>results</code>","text":""},{"location":"api/validation/#textual.validation.ValidationResult.success","title":"success  <code>staticmethod</code>","text":"<pre><code>success()\n</code></pre> <p>Construct a successful ValidationResult.</p> <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A successful ValidationResult.</p>"},{"location":"api/validation/#textual.validation.Validator","title":"Validator","text":"<pre><code>Validator(failure_description=None)\n</code></pre> <p>               Bases: <code>ABC</code></p> <p>Base class for the validation of string values.</p> <p>Commonly used in conjunction with the <code>Input</code> widget, which accepts a list of validators via its constructor. This validation framework can also be used to validate any 'stringly-typed' values (for example raw command line input from <code>sys.args</code>).</p> <p>To implement your own <code>Validator</code>, subclass this class.</p> Example <pre><code>class Palindrome(Validator):\n    def validate(self, value: str) -&gt; ValidationResult:\n        def is_palindrome(value: str) -&gt; bool:\n            return value == value[::-1]\n        return self.success() if is_palindrome(value) else self.failure(\"Not palindrome!\")\n</code></pre>"},{"location":"api/validation/#textual.validation.Validator.failure_description","title":"failure_description  <code>instance-attribute</code>","text":"<pre><code>failure_description = failure_description\n</code></pre> <p>A description of why the validation failed.</p> <p>The description (intended to be user-facing) to attached to the Failure if the validation fails. This failure description is ultimately accessible at the time of validation failure  via the <code>Input.Changed</code> or <code>Input.Submitted</code> event, and you can access it on your message handler (a method called, for example, <code>on_input_changed</code> or a method decorated with <code>@on(Input.Changed)</code>.</p>"},{"location":"api/validation/#textual.validation.Validator.describe_failure","title":"describe_failure","text":"<pre><code>describe_failure(failure)\n</code></pre> <p>Return a string description of the Failure.</p> <p>Used to provide a more fine-grained description of the failure. A Validator could fail for multiple reasons, so this method could be used to provide a different reason for different types of failure.</p> <p>Warning</p> <p>This method is only called if no other description has been supplied. If you supply a description inside a call to <code>self.failure(description=\"...\")</code>, or pass a description into the constructor of the validator, those will take priority, and this method won't be called.</p> <p>Parameters:</p> Name Type Description Default <code>Failure</code> <p>Information about why the validation failed.</p> required <p>Returns:</p> Type Description <code>str | None</code> <p>A string description of the failure.</p>"},{"location":"api/validation/#textual.validation.Validator.describe_failure(failure)","title":"<code>failure</code>","text":""},{"location":"api/validation/#textual.validation.Validator.failure","title":"failure","text":"<pre><code>failure(description=None, value=None, failures=None)\n</code></pre> <p>Shorthand for signaling validation failure.</p> <p>You can return failure(...) from a <code>Validator.validate</code> implementation to signal validation succeeded.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The failure description that will be used. When used in conjunction with the Input widget, this is the description that will ultimately be available inside the handler for <code>Input.Changed</code>. If not supplied, the <code>failure_description</code> from the <code>Validator</code> will be used. If that is not supplied either, then the <code>describe_failure</code> method on <code>Validator</code> will be called.</p> <code>None</code> <code>str | None</code> <p>The value that was considered invalid. This is optional, and only needs to be supplied if required in your <code>Input.Changed</code> handler.</p> <code>None</code> <code>Failure | Sequence[Failure] | None</code> <p>The reasons the validator failed. If not supplied, a generic <code>Failure</code> will be included in the ValidationResult returned from this function.</p> <code>None</code> <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A ValidationResult representing failed validation, and containing the metadata supplied to this function.</p>"},{"location":"api/validation/#textual.validation.Validator.failure(description)","title":"<code>description</code>","text":""},{"location":"api/validation/#textual.validation.Validator.failure(value)","title":"<code>value</code>","text":""},{"location":"api/validation/#textual.validation.Validator.failure(failures)","title":"<code>failures</code>","text":""},{"location":"api/validation/#textual.validation.Validator.success","title":"success","text":"<pre><code>success()\n</code></pre> <p>Shorthand for <code>ValidationResult(True)</code>.</p> <p>You can return success() from a <code>Validator.validate</code> method implementation to signal that validation has succeeded.</p> <p>Returns:</p> Type Description <code>ValidationResult</code> <p>A ValidationResult indicating validation succeeded.</p>"},{"location":"api/validation/#textual.validation.Validator.validate","title":"validate  <code>abstractmethod</code>","text":"<pre><code>validate(value)\n</code></pre> <p>Validate the value and return a ValidationResult describing the outcome of the validation.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The value to validate.</p> required <p>Returns:</p> Type Description <code>ValidationResult</code> <p>The result of the validation.</p>"},{"location":"api/validation/#textual.validation.Validator.validate(value)","title":"<code>value</code>","text":""},{"location":"api/walk/","title":"textual.walk","text":"<p>Functions for walking the DOM.</p> <p>Note</p> <p>For most purposes you would be better off using query, which uses these functions internally.</p>"},{"location":"api/walk/#textual.walk.walk_breadth_first","title":"walk_breadth_first","text":"<pre><code>walk_breadth_first(\n    root: DOMNode, *, with_root: bool = True\n) -&gt; Iterable[DOMNode]\n</code></pre><pre><code>walk_breadth_first(\n    root: WalkType,\n    filter_type: type[WalkType],\n    *,\n    with_root: bool = True\n) -&gt; Iterable[WalkType]\n</code></pre> <pre><code>walk_breadth_first(\n    root, filter_type=None, *, with_root=True\n)\n</code></pre> <p>Walk the tree breadth first (children first).</p> <p>Note</p> <p>Avoid changing the DOM (mounting, removing etc.) while iterating with this function. Consider walk_children which doesn't have this limitation.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The root note (starting point).</p> required <code>type[WalkType] | None</code> <p>Optional DOMNode subclass to filter by, or <code>None</code> for no filter.</p> <code>None</code> <code>bool</code> <p>Include the root in the walk.</p> <code>True</code> <p>Returns:</p> Type Description <code>Iterable[DOMNode] | Iterable[WalkType]</code> <p>An iterable of DOMNodes, or the type specified in <code>filter_type</code>.</p>"},{"location":"api/walk/#textual.walk.walk_breadth_first(root)","title":"<code>root</code>","text":""},{"location":"api/walk/#textual.walk.walk_breadth_first(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/walk/#textual.walk.walk_breadth_first(with_root)","title":"<code>with_root</code>","text":""},{"location":"api/walk/#textual.walk.walk_depth_first","title":"walk_depth_first","text":"<pre><code>walk_depth_first(\n    root: DOMNode, *, with_root: bool = True\n) -&gt; Iterable[DOMNode]\n</code></pre><pre><code>walk_depth_first(\n    root: WalkType,\n    filter_type: type[WalkType],\n    *,\n    with_root: bool = True\n) -&gt; Iterable[WalkType]\n</code></pre> <pre><code>walk_depth_first(root, filter_type=None, *, with_root=True)\n</code></pre> <p>Walk the tree depth first (parents first).</p> <p>Note</p> <p>Avoid changing the DOM (mounting, removing etc.) while iterating with this function. Consider walk_children which doesn't have this limitation.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The root note (starting point).</p> required <code>type[WalkType] | None</code> <p>Optional DOMNode subclass to filter by, or <code>None</code> for no filter.</p> <code>None</code> <code>bool</code> <p>Include the root in the walk.</p> <code>True</code> <p>Returns:</p> Type Description <code>Iterable[DOMNode] | Iterable[WalkType]</code> <p>An iterable of DOMNodes, or the type specified in <code>filter_type</code>.</p>"},{"location":"api/walk/#textual.walk.walk_depth_first(root)","title":"<code>root</code>","text":""},{"location":"api/walk/#textual.walk.walk_depth_first(filter_type)","title":"<code>filter_type</code>","text":""},{"location":"api/walk/#textual.walk.walk_depth_first(with_root)","title":"<code>with_root</code>","text":""},{"location":"api/widget/","title":"textual.widget","text":"<p>This module contains the <code>Widget</code> class, the base class for all widgets.</p>"},{"location":"api/widget/#textual.widget.AwaitMount","title":"AwaitMount","text":"<pre><code>AwaitMount(parent, widgets)\n</code></pre> <p>An optional awaitable returned by mount and mount_all.</p> Example <pre><code>await self.mount(Static(\"foo\"))\n</code></pre>"},{"location":"api/widget/#textual.widget.BadWidgetName","title":"BadWidgetName","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when widget class names do not satisfy the required restrictions.</p>"},{"location":"api/widget/#textual.widget.MountError","title":"MountError","text":"<p>               Bases: <code>WidgetError</code></p> <p>Error raised when there was a problem with the mount request.</p>"},{"location":"api/widget/#textual.widget.PseudoClasses","title":"PseudoClasses","text":"<p>               Bases: <code>NamedTuple</code></p> <p>Used for render/render_line based widgets that use caching. This structure can be used as a cache-key.</p>"},{"location":"api/widget/#textual.widget.PseudoClasses.enabled","title":"enabled  <code>instance-attribute</code>","text":"<pre><code>enabled\n</code></pre> <p>Is 'enabled' applied?</p>"},{"location":"api/widget/#textual.widget.PseudoClasses.focus","title":"focus  <code>instance-attribute</code>","text":"<pre><code>focus\n</code></pre> <p>Is 'focus' applied?</p>"},{"location":"api/widget/#textual.widget.PseudoClasses.hover","title":"hover  <code>instance-attribute</code>","text":"<pre><code>hover\n</code></pre> <p>Is 'hover' applied?</p>"},{"location":"api/widget/#textual.widget.Widget","title":"Widget","text":"<pre><code>Widget(\n    *children,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>DOMNode</code></p> <p>A Widget is the base class for Textual widgets.</p> <p>See also static for starting point for your own widgets.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"api/widget/#textual.widget.Widget(*children)","title":"<code>*children</code>","text":""},{"location":"api/widget/#textual.widget.Widget(name)","title":"<code>name</code>","text":""},{"location":"api/widget/#textual.widget.Widget(id)","title":"<code>id</code>","text":""},{"location":"api/widget/#textual.widget.Widget(classes)","title":"<code>classes</code>","text":""},{"location":"api/widget/#textual.widget.Widget(disabled)","title":"<code>disabled</code>","text":""},{"location":"api/widget/#textual.widget.Widget.ALLOW_MAXIMIZE","title":"ALLOW_MAXIMIZE  <code>class-attribute</code>","text":"<pre><code>ALLOW_MAXIMIZE = None\n</code></pre> <p>Defines default logic to allow the widget to be maximized.</p> <ul> <li><code>None</code> Use default behavior (Focusable widgets may be maximized)</li> <li><code>False</code> Do not allow widget to be maximized</li> <li><code>True</code> Allow widget to be maximized</li> </ul>"},{"location":"api/widget/#textual.widget.Widget.BORDER_SUBTITLE","title":"BORDER_SUBTITLE  <code>class-attribute</code>","text":"<pre><code>BORDER_SUBTITLE = ''\n</code></pre> <p>Initial value for border_subtitle attribute.</p>"},{"location":"api/widget/#textual.widget.Widget.BORDER_TITLE","title":"BORDER_TITLE  <code>class-attribute</code>","text":"<pre><code>BORDER_TITLE = ''\n</code></pre> <p>Initial value for border_title attribute.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_horizontal_scroll","title":"allow_horizontal_scroll  <code>property</code>","text":"<pre><code>allow_horizontal_scroll\n</code></pre> <p>Check if horizontal scroll is permitted.</p> <p>May be overridden if you want different logic regarding allowing scrolling.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_maximize","title":"allow_maximize  <code>property</code>","text":"<pre><code>allow_maximize\n</code></pre> <p>Check if the widget may be maximized.</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may be maximized, or <code>False</code> if it should not be maximized.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_vertical_scroll","title":"allow_vertical_scroll  <code>property</code>","text":"<pre><code>allow_vertical_scroll\n</code></pre> <p>Check if vertical scroll is permitted.</p> <p>May be overridden if you want different logic regarding allowing scrolling.</p>"},{"location":"api/widget/#textual.widget.Widget.auto_links","title":"auto_links  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_links = Reactive(True)\n</code></pre> <p>Widget will highlight links automatically.</p>"},{"location":"api/widget/#textual.widget.Widget.border_subtitle","title":"border_subtitle  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>border_subtitle = _BorderTitle()\n</code></pre> <p>A title to show in the bottom border (if there is one).</p>"},{"location":"api/widget/#textual.widget.Widget.border_title","title":"border_title  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>border_title = _BorderTitle()\n</code></pre> <p>A title to show in the top border (if there is one).</p>"},{"location":"api/widget/#textual.widget.Widget.can_focus","title":"can_focus  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>can_focus = False\n</code></pre> <p>Widget may receive focus.</p>"},{"location":"api/widget/#textual.widget.Widget.can_focus_children","title":"can_focus_children  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>can_focus_children = True\n</code></pre> <p>Widget's children may receive focus.</p>"},{"location":"api/widget/#textual.widget.Widget.container_size","title":"container_size  <code>property</code>","text":"<pre><code>container_size\n</code></pre> <p>The size of the container (parent widget).</p> <p>Returns:</p> Type Description <code>Size</code> <p>Container size.</p>"},{"location":"api/widget/#textual.widget.Widget.container_viewport","title":"container_viewport  <code>property</code>","text":"<pre><code>container_viewport\n</code></pre> <p>The viewport region (parent window).</p> <p>Returns:</p> Type Description <code>Region</code> <p>The region that contains this widget.</p>"},{"location":"api/widget/#textual.widget.Widget.content_offset","title":"content_offset  <code>property</code>","text":"<pre><code>content_offset\n</code></pre> <p>An offset from the Widget origin where the content begins.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Offset from widget's origin.</p>"},{"location":"api/widget/#textual.widget.Widget.content_region","title":"content_region  <code>property</code>","text":"<pre><code>content_region\n</code></pre> <p>Gets an absolute region containing the content (minus padding and border).</p> <p>Returns:</p> Type Description <code>Region</code> <p>Screen region that contains a widget's content.</p>"},{"location":"api/widget/#textual.widget.Widget.content_size","title":"content_size  <code>property</code>","text":"<pre><code>content_size\n</code></pre> <p>The size of the content area.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Content area size.</p>"},{"location":"api/widget/#textual.widget.Widget.disabled","title":"disabled  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>disabled = disabled\n</code></pre> <p>Is the widget disabled? Disabled widgets can not be interacted with, and are typically styled to look dimmer.</p>"},{"location":"api/widget/#textual.widget.Widget.dock_gutter","title":"dock_gutter  <code>property</code>","text":"<pre><code>dock_gutter\n</code></pre> <p>Space allocated to docks in the parent.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Space to be subtracted from scrollable area.</p>"},{"location":"api/widget/#textual.widget.Widget.expand","title":"expand  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>expand = Reactive(False)\n</code></pre> <p>Rich renderable may expand beyond optimal size.</p>"},{"location":"api/widget/#textual.widget.Widget.focusable","title":"focusable  <code>property</code>","text":"<pre><code>focusable\n</code></pre> <p>Can this widget currently be focused?</p>"},{"location":"api/widget/#textual.widget.Widget.gutter","title":"gutter  <code>property</code>","text":"<pre><code>gutter\n</code></pre> <p>Spacing for padding / border / scrollbars.</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Additional spacing around content area.</p>"},{"location":"api/widget/#textual.widget.Widget.has_focus","title":"has_focus  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>has_focus = Reactive(False, repaint=False)\n</code></pre> <p>Does this widget have focus? Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.highlight_link_id","title":"highlight_link_id  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlight_link_id = Reactive('')\n</code></pre> <p>The currently highlighted link id. Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.horizontal_scrollbar","title":"horizontal_scrollbar  <code>property</code>","text":"<pre><code>horizontal_scrollbar\n</code></pre> <p>The horizontal scrollbar.</p> Note <p>This will create a scrollbar if one doesn't exist.</p> <p>Returns:</p> Type Description <code>ScrollBar</code> <p>ScrollBar Widget.</p>"},{"location":"api/widget/#textual.widget.Widget.hover_style","title":"hover_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>hover_style = Reactive(Style, repaint=False)\n</code></pre> <p>The current hover style (style under the mouse cursor). Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.is_anchored","title":"is_anchored  <code>property</code>","text":"<pre><code>is_anchored\n</code></pre> <p>Is this widget anchored?</p>"},{"location":"api/widget/#textual.widget.Widget.is_container","title":"is_container  <code>property</code>","text":"<pre><code>is_container\n</code></pre> <p>Is this widget a container (contains other widgets)?</p>"},{"location":"api/widget/#textual.widget.Widget.is_horizontal_scroll_end","title":"is_horizontal_scroll_end  <code>property</code>","text":"<pre><code>is_horizontal_scroll_end\n</code></pre> <p>Is the horizontal scroll position at the maximum?</p>"},{"location":"api/widget/#textual.widget.Widget.is_horizontal_scrollbar_grabbed","title":"is_horizontal_scrollbar_grabbed  <code>property</code>","text":"<pre><code>is_horizontal_scrollbar_grabbed\n</code></pre> <p>Is the user dragging the vertical scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.is_maximized","title":"is_maximized  <code>property</code>","text":"<pre><code>is_maximized\n</code></pre> <p>Is this widget maximized?</p>"},{"location":"api/widget/#textual.widget.Widget.is_mounted","title":"is_mounted  <code>property</code>","text":"<pre><code>is_mounted\n</code></pre> <p>Check if this widget is mounted.</p>"},{"location":"api/widget/#textual.widget.Widget.is_mouse_over","title":"is_mouse_over  <code>property</code>","text":"<pre><code>is_mouse_over\n</code></pre> <p>Is the mouse currently over this widget?</p> <p>Note this will be <code>True</code> if the mouse pointer is within the widget's region, even if the mouse pointer is not directly over the widget (there could be another widget between the mouse pointer and self).</p>"},{"location":"api/widget/#textual.widget.Widget.is_scrollable","title":"is_scrollable  <code>property</code>","text":"<pre><code>is_scrollable\n</code></pre> <p>Can this widget be scrolled?</p>"},{"location":"api/widget/#textual.widget.Widget.is_vertical_scroll_end","title":"is_vertical_scroll_end  <code>property</code>","text":"<pre><code>is_vertical_scroll_end\n</code></pre> <p>Is the vertical scroll position at the maximum?</p>"},{"location":"api/widget/#textual.widget.Widget.is_vertical_scrollbar_grabbed","title":"is_vertical_scrollbar_grabbed  <code>property</code>","text":"<pre><code>is_vertical_scrollbar_grabbed\n</code></pre> <p>Is the user dragging the vertical scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.layer","title":"layer  <code>property</code>","text":"<pre><code>layer\n</code></pre> <p>Get the name of this widgets layer.</p> <p>Returns:</p> Type Description <code>str</code> <p>Name of layer.</p>"},{"location":"api/widget/#textual.widget.Widget.layers","title":"layers  <code>property</code>","text":"<pre><code>layers\n</code></pre> <p>Layers of from parent.</p> <p>Returns:</p> Type Description <code>tuple[str, ...]</code> <p>Tuple of layer names.</p>"},{"location":"api/widget/#textual.widget.Widget.link_style","title":"link_style  <code>property</code>","text":"<pre><code>link_style\n</code></pre> <p>Style of links.</p> <p>Returns:</p> Type Description <code>Style</code> <p>Rich style.</p>"},{"location":"api/widget/#textual.widget.Widget.link_style_hover","title":"link_style_hover  <code>property</code>","text":"<pre><code>link_style_hover\n</code></pre> <p>Style of links underneath the mouse cursor.</p> <p>Returns:</p> Type Description <code>Style</code> <p>Rich Style.</p>"},{"location":"api/widget/#textual.widget.Widget.loading","title":"loading  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>loading = Reactive(False)\n</code></pre> <p>If set to <code>True</code> this widget will temporarily be replaced with a loading indicator.</p>"},{"location":"api/widget/#textual.widget.Widget.lock","title":"lock  <code>instance-attribute</code>","text":"<pre><code>lock = RLock()\n</code></pre> <p><code>asyncio</code> lock to be used to synchronize the state of the widget.</p> <p>Two different tasks might call methods on a widget at the same time, which might result in a race condition. This can be fixed by adding <code>async with widget.lock:</code> around the method calls.</p>"},{"location":"api/widget/#textual.widget.Widget.max_scroll_x","title":"max_scroll_x  <code>property</code>","text":"<pre><code>max_scroll_x\n</code></pre> <p>The maximum value of <code>scroll_x</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.max_scroll_y","title":"max_scroll_y  <code>property</code>","text":"<pre><code>max_scroll_y\n</code></pre> <p>The maximum value of <code>scroll_y</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.mouse_hover","title":"mouse_hover  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>mouse_hover = Reactive(False, repaint=False)\n</code></pre> <p>Is the mouse over this widget? Read only.</p>"},{"location":"api/widget/#textual.widget.Widget.offset","title":"offset  <code>property</code> <code>writable</code>","text":"<pre><code>offset\n</code></pre> <p>Widget offset from origin.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Relative offset.</p>"},{"location":"api/widget/#textual.widget.Widget.opacity","title":"opacity  <code>property</code>","text":"<pre><code>opacity\n</code></pre> <p>Total opacity of widget.</p>"},{"location":"api/widget/#textual.widget.Widget.outer_size","title":"outer_size  <code>property</code>","text":"<pre><code>outer_size\n</code></pre> <p>The size of the widget (including padding and border).</p> <p>Returns:</p> Type Description <code>Size</code> <p>Outer size.</p>"},{"location":"api/widget/#textual.widget.Widget.region","title":"region  <code>property</code>","text":"<pre><code>region\n</code></pre> <p>The region occupied by this widget, relative to the Screen.</p> <p>Raises:</p> Type Description <code>NoScreen</code> <p>If there is no screen.</p> <code>NoWidget</code> <p>If the widget is not on the screen.</p> <p>Returns:</p> Type Description <code>Region</code> <p>Region within screen occupied by widget.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_offset","title":"scroll_offset  <code>property</code>","text":"<pre><code>scroll_offset\n</code></pre> <p>Get the current scroll offset.</p> <p>Returns:</p> Type Description <code>Offset</code> <p>Offset a container has been scrolled by.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_x","title":"scroll_x  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>scroll_x = Reactive(0.0, repaint=False, layout=False)\n</code></pre> <p>The scroll position on the X axis.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_y","title":"scroll_y  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>scroll_y = Reactive(0.0, repaint=False, layout=False)\n</code></pre> <p>The scroll position on the Y axis.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollable_content_region","title":"scrollable_content_region  <code>property</code>","text":"<pre><code>scrollable_content_region\n</code></pre> <p>Gets an absolute region containing the scrollable content (minus padding, border, and scrollbars).</p> <p>Returns:</p> Type Description <code>Region</code> <p>Screen region that contains a widget's content.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollable_size","title":"scrollable_size  <code>property</code>","text":"<pre><code>scrollable_size\n</code></pre> <p>The size of the scrollable content.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Scrollable content size.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_corner","title":"scrollbar_corner  <code>property</code>","text":"<pre><code>scrollbar_corner\n</code></pre> <p>The scrollbar corner.</p> Note <p>This will create a scrollbar corner if one doesn't exist.</p> <p>Returns:</p> Type Description <code>ScrollBarCorner</code> <p>ScrollBarCorner Widget.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_gutter","title":"scrollbar_gutter  <code>property</code>","text":"<pre><code>scrollbar_gutter\n</code></pre> <p>Spacing required to fit scrollbar(s).</p> <p>Returns:</p> Type Description <code>Spacing</code> <p>Scrollbar gutter spacing.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_size_horizontal","title":"scrollbar_size_horizontal  <code>property</code>","text":"<pre><code>scrollbar_size_horizontal\n</code></pre> <p>Get the height used by the horizontal scrollbar.</p> <p>Returns:</p> Type Description <code>int</code> <p>Number of rows in the horizontal scrollbar.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbar_size_vertical","title":"scrollbar_size_vertical  <code>property</code>","text":"<pre><code>scrollbar_size_vertical\n</code></pre> <p>Get the width used by the vertical scrollbar.</p> <p>Returns:</p> Type Description <code>int</code> <p>Number of columns in the vertical scrollbar.</p>"},{"location":"api/widget/#textual.widget.Widget.scrollbars_enabled","title":"scrollbars_enabled  <code>property</code>","text":"<pre><code>scrollbars_enabled\n</code></pre> <p>A tuple of booleans that indicate if scrollbars are enabled.</p> <p>Returns:</p> Type Description <code>tuple[bool, bool]</code> <p>A tuple of (, )"},{"location":"api/widget/#textual.widget.Widget.scrollbars_space","title":"scrollbars_space  <code>property</code>","text":"<pre><code>scrollbars_space\n</code></pre> <p>The number of cells occupied by scrollbars for width and height</p>"},{"location":"api/widget/#textual.widget.Widget.show_horizontal_scrollbar","title":"show_horizontal_scrollbar  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_horizontal_scrollbar = Reactive(False, layout=True)\n</code></pre> <p>Show a horizontal scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.show_vertical_scrollbar","title":"show_vertical_scrollbar  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_vertical_scrollbar = Reactive(False, layout=True)\n</code></pre> <p>Show a vertical scrollbar?</p>"},{"location":"api/widget/#textual.widget.Widget.shrink","title":"shrink  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>shrink = Reactive(True)\n</code></pre> <p>Rich renderable may shrink below optimal size.</p>"},{"location":"api/widget/#textual.widget.Widget.siblings","title":"siblings  <code>property</code>","text":"<pre><code>siblings\n</code></pre> <p>Get the widget's siblings (self is removed from the return list).</p> <p>Returns:</p> Type Description <code>list[Widget]</code> <p>A list of siblings.</p>"},{"location":"api/widget/#textual.widget.Widget.size","title":"size  <code>property</code>","text":"<pre><code>size\n</code></pre> <p>The size of the content area.</p> <p>Returns:</p> Type Description <code>Size</code> <p>Content area size.</p>"},{"location":"api/widget/#textual.widget.Widget.tooltip","title":"tooltip  <code>property</code> <code>writable</code>","text":"<pre><code>tooltip\n</code></pre> <p>Tooltip for the widget, or <code>None</code> for no tooltip.</p>"},{"location":"api/widget/#textual.widget.Widget.vertical_scrollbar","title":"vertical_scrollbar  <code>property</code>","text":"<pre><code>vertical_scrollbar\n</code></pre> <p>The vertical scrollbar (create if necessary).</p> Note <p>This will create a scrollbar if one doesn't exist.</p> <p>Returns:</p> Type Description <code>ScrollBar</code> <p>ScrollBar Widget.</p>"},{"location":"api/widget/#textual.widget.Widget.virtual_region","title":"virtual_region  <code>property</code>","text":"<pre><code>virtual_region\n</code></pre> <p>The widget region relative to its container (which may not be visible, depending on scroll offset).</p> <p>Returns:</p> Type Description <code>Region</code> <p>The virtual region.</p>"},{"location":"api/widget/#textual.widget.Widget.virtual_region_with_margin","title":"virtual_region_with_margin  <code>property</code>","text":"<pre><code>virtual_region_with_margin\n</code></pre> <p>The widget region relative to its container (including margin), which may not be visible, depending on the scroll offset.</p> <p>Returns:</p> Type Description <code>Region</code> <p>The virtual region of the Widget, inclusive of its margin.</p>"},{"location":"api/widget/#textual.widget.Widget.virtual_size","title":"virtual_size  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>virtual_size = Reactive(Size(0, 0), layout=True)\n</code></pre> <p>The virtual (scrollable) size of the widget.</p>"},{"location":"api/widget/#textual.widget.Widget.visible_siblings","title":"visible_siblings  <code>property</code>","text":"<pre><code>visible_siblings\n</code></pre> <p>A list of siblings which will be shown.</p> <p>Returns:</p> Type Description <code>list[Widget]</code> <p>List of siblings.</p>"},{"location":"api/widget/#textual.widget.Widget.window_region","title":"window_region  <code>property</code>","text":"<pre><code>window_region\n</code></pre> <p>The region within the scrollable area that is currently visible.</p> <p>Returns:</p> Type Description <code>Region</code> <p>New region.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_focus","title":"allow_focus","text":"<pre><code>allow_focus()\n</code></pre> <p>Check if the widget is permitted to focus.</p> <p>The base class returns <code>can_focus</code>. This method may be overridden if additional logic is required.</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may be focused, or <code>False</code> if it may not be focused.</p>"},{"location":"api/widget/#textual.widget.Widget.allow_focus_children","title":"allow_focus_children","text":"<pre><code>allow_focus_children()\n</code></pre> <p>Check if a widget's children may be focused.</p> <p>The base class returns <code>can_focus_children</code>. This method may be overridden if additional logic is required.</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget's children may be focused, or <code>False</code> if the widget's children may not be focused.</p>"},{"location":"api/widget/#textual.widget.Widget.anchor","title":"anchor","text":"<pre><code>anchor(*, animate=False)\n</code></pre> <p>Anchor the widget, which scrolls it into view (like scroll_visible), but also keeps it in view if the widget's size changes, or the size of its container changes.</p> <p>Note</p> <p>Anchored widgets will be un-anchored if the users scrolls the container.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p><code>True</code> if the scroll should animate, or <code>False</code> if it shouldn't.</p> <code>False</code>"},{"location":"api/widget/#textual.widget.Widget.anchor(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate","title":"animate","text":"<pre><code>animate(\n    attribute,\n    value,\n    *,\n    final_value=...,\n    duration=None,\n    speed=None,\n    delay=0.0,\n    easing=DEFAULT_EASING,\n    on_complete=None,\n    level=\"full\"\n)\n</code></pre> <p>Animate an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute to animate.</p> required <code>float | Animatable</code> <p>The value to animate to.</p> required <code>object</code> <p>The final value of the animation. Defaults to <code>value</code> if not set.</p> <code>...</code> <code>float | None</code> <p>The duration (in seconds) of the animation.</p> <code>None</code> <code>float | None</code> <p>The speed of the animation.</p> <code>None</code> <code>float</code> <p>A delay (in seconds) before the animation starts.</p> <code>0.0</code> <code>EasingFunction | str</code> <p>An easing method.</p> <code>DEFAULT_EASING</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'full'</code>"},{"location":"api/widget/#textual.widget.Widget.animate(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(value)","title":"<code>value</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(final_value)","title":"<code>final_value</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(delay)","title":"<code>delay</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.animate(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.batch","title":"batch  <code>async</code>","text":"<pre><code>batch()\n</code></pre> <p>Async context manager that combines widget locking and update batching.</p> <p>Use this async context manager whenever you want to acquire the widget lock and batch app updates at the same time.</p> Example <pre><code>async with container.batch():\n    await container.remove_children(Button)\n    await container.mount(Label(\"All buttons are gone.\"))\n</code></pre>"},{"location":"api/widget/#textual.widget.Widget.begin_capture_print","title":"begin_capture_print","text":"<pre><code>begin_capture_print(stdout=True, stderr=True)\n</code></pre> <p>Capture text from print statements (or writes to stdout / stderr).</p> <p>If printing is captured, the widget will be sent an <code>events.Print</code> message.</p> <p>Call <code>end_capture_print</code> to disable print capture.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether to capture stdout.</p> <code>True</code> <code>bool</code> <p>Whether to capture stderr.</p> <code>True</code>"},{"location":"api/widget/#textual.widget.Widget.begin_capture_print(stdout)","title":"<code>stdout</code>","text":""},{"location":"api/widget/#textual.widget.Widget.begin_capture_print(stderr)","title":"<code>stderr</code>","text":""},{"location":"api/widget/#textual.widget.Widget.blur","title":"blur","text":"<pre><code>blur()\n</code></pre> <p>Blur (un-focus) the widget.</p> <p>Focus will be moved to the next available widget in the focus chain..</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Widget</code> instance.</p>"},{"location":"api/widget/#textual.widget.Widget.can_view","title":"can_view","text":"<pre><code>can_view(widget)\n</code></pre> <p>Check if a given widget is in the current view (scrollable area).</p> <p>Note: This doesn't necessarily equate to a widget being visible. There are other reasons why a widget may not be visible.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A widget that is a descendant of self.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the entire widget is in view, False if it is partially visible or not in view.</p>"},{"location":"api/widget/#textual.widget.Widget.can_view(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.capture_mouse","title":"capture_mouse","text":"<pre><code>capture_mouse(capture=True)\n</code></pre> <p>Capture (or release) the mouse.</p> <p>When captured, mouse events will go to this widget even when the pointer is not directly over the widget.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True to capture or False to release.</p> <code>True</code>"},{"location":"api/widget/#textual.widget.Widget.capture_mouse(capture)","title":"<code>capture</code>","text":""},{"location":"api/widget/#textual.widget.Widget.check_message_enabled","title":"check_message_enabled","text":"<pre><code>check_message_enabled(message)\n</code></pre> <p>Check if a given message is enabled (allowed to be sent).</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>A message object</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the message will be sent, or <code>False</code> if it is disabled.</p>"},{"location":"api/widget/#textual.widget.Widget.check_message_enabled(message)","title":"<code>message</code>","text":""},{"location":"api/widget/#textual.widget.Widget.clear_anchor","title":"clear_anchor","text":"<pre><code>clear_anchor()\n</code></pre> <p>Stop anchoring this widget (a no-op if this widget is not anchored).</p>"},{"location":"api/widget/#textual.widget.Widget.clear_cached_dimensions","title":"clear_cached_dimensions","text":"<pre><code>clear_cached_dimensions()\n</code></pre> <p>Clear cached results of <code>get_content_width</code> and <code>get_content_height</code>.</p> <p>Call if the widget's renderable changes size after the widget has been created.</p> <p>Note</p> <p>This is not required if you are extending <code>Static</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.compose","title":"compose","text":"<pre><code>compose()\n</code></pre> <p>Called by Textual to create child widgets.</p> <p>This method is called when a widget is mounted or by setting <code>recompose=True</code> when calling <code>refresh()</code>.</p> <p>Note that you don't typically need to explicitly call this method.</p> Example <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Header()\n    yield Label(\"Press the button below:\")\n    yield Button()\n    yield Footer()\n</code></pre>"},{"location":"api/widget/#textual.widget.Widget.compose_add_child","title":"compose_add_child","text":"<pre><code>compose_add_child(widget)\n</code></pre> <p>Add a node to children.</p> <p>This is used by the compose process when it adds children. There is no need to use it directly, but you may want to override it in a subclass if you want children to be attached to a different node.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A Widget to add.</p> required"},{"location":"api/widget/#textual.widget.Widget.compose_add_child(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.end_capture_print","title":"end_capture_print","text":"<pre><code>end_capture_print()\n</code></pre> <p>End print capture (set with <code>begin_capture_print</code>).</p>"},{"location":"api/widget/#textual.widget.Widget.focus","title":"focus","text":"<pre><code>focus(scroll_visible=True)\n</code></pre> <p>Give focus to this widget.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Scroll parent to make this widget visible.</p> <code>True</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Widget</code> instance.</p>"},{"location":"api/widget/#textual.widget.Widget.focus(scroll_visible)","title":"<code>scroll_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_child_by_id","title":"get_child_by_id","text":"<pre><code>get_child_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_child_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_child_by_id(id, expect_type=None)\n</code></pre> <p>Return the first child (immediate descendent) of this node with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the child.</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first child of this node with the ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>if no children could be found for this ID</p> <code>WrongType</code> <p>if the wrong type was found.</p>"},{"location":"api/widget/#textual.widget.Widget.get_child_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_child_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_child_by_type","title":"get_child_by_type","text":"<pre><code>get_child_by_type(expect_type)\n</code></pre> <p>Get the first immediate child of a given type.</p> <p>Only returns exact matches, and so will not match subclasses of the given type.</p> <p>Parameters:</p> Name Type Description Default <code>type[ExpectType]</code> <p>The type of the child to search for.</p> required <p>Raises:</p> Type Description <code>NoMatches</code> <p>If no matching child is found.</p> <p>Returns:</p> Type Description <code>ExpectType</code> <p>The first immediate child widget with the expected type.</p>"},{"location":"api/widget/#textual.widget.Widget.get_child_by_type(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_component_rich_style","title":"get_component_rich_style","text":"<pre><code>get_component_rich_style(*names, partial=False)\n</code></pre> <p>Get a Rich style for a component.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Names of components.</p> <code>()</code> <code>bool</code> <p>Return a partial style (not combined with parent).</p> <code>False</code> <p>Returns:</p> Type Description <code>Style</code> <p>A Rich style object.</p>"},{"location":"api/widget/#textual.widget.Widget.get_component_rich_style(names)","title":"<code>names</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_component_rich_style(partial)","title":"<code>partial</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_height","title":"get_content_height","text":"<pre><code>get_content_height(container, viewport, width)\n</code></pre> <p>Called by Textual to get the height of the content area. May be overridden in a subclass.</p> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>Size of the container (immediate parent) widget.</p> required <code>Size</code> <p>Size of the viewport.</p> required <code>int</code> <p>Width of renderable.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The height of the content.</p>"},{"location":"api/widget/#textual.widget.Widget.get_content_height(container)","title":"<code>container</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_height(viewport)","title":"<code>viewport</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_height(width)","title":"<code>width</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_width","title":"get_content_width","text":"<pre><code>get_content_width(container, viewport)\n</code></pre> <p>Called by textual to get the width of the content area. May be overridden in a subclass.</p> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>Size of the container (immediate parent) widget.</p> required <code>Size</code> <p>Size of the viewport.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The optimal width of the content.</p>"},{"location":"api/widget/#textual.widget.Widget.get_content_width(container)","title":"<code>container</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_content_width(viewport)","title":"<code>viewport</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_loading_widget","title":"get_loading_widget","text":"<pre><code>get_loading_widget()\n</code></pre> <p>Get a widget to display a loading indicator.</p> <p>The default implementation will defer to App.get_loading_widget.</p> <p>Returns:</p> Type Description <code>Widget</code> <p>A widget in place of this widget to indicate a loading.</p>"},{"location":"api/widget/#textual.widget.Widget.get_pseudo_class_state","title":"get_pseudo_class_state","text":"<pre><code>get_pseudo_class_state()\n</code></pre> <p>Get an object describing whether each pseudo class is present on this object or not.</p> <p>Returns:</p> Type Description <code>PseudoClasses</code> <p>A PseudoClasses object describing the pseudo classes that are present.</p>"},{"location":"api/widget/#textual.widget.Widget.get_pseudo_classes","title":"get_pseudo_classes","text":"<pre><code>get_pseudo_classes()\n</code></pre> <p>Pseudo classes for a widget.</p> <p>Returns:</p> Type Description <code>Iterable[str]</code> <p>Names of the pseudo classes.</p>"},{"location":"api/widget/#textual.widget.Widget.get_style_at","title":"get_style_at","text":"<pre><code>get_style_at(x, y)\n</code></pre> <p>Get the Rich style in a widget at a given relative offset.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>X coordinate relative to the widget.</p> required <code>int</code> <p>Y coordinate relative to the widget.</p> required <p>Returns:</p> Type Description <code>Style</code> <p>A rich Style object.</p>"},{"location":"api/widget/#textual.widget.Widget.get_style_at(x)","title":"<code>x</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_style_at(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_widget_by_id","title":"get_widget_by_id","text":"<pre><code>get_widget_by_id(id: str) -&gt; Widget\n</code></pre><pre><code>get_widget_by_id(\n    id: str, expect_type: type[ExpectType]\n) -&gt; ExpectType\n</code></pre> <pre><code>get_widget_by_id(id, expect_type=None)\n</code></pre> <p>Return the first descendant widget with the given ID.</p> <p>Performs a depth-first search rooted at this widget.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID to search for in the subtree.</p> required <code>type[ExpectType] | None</code> <p>Require the object be of the supplied type, or None for any type.</p> <code>None</code> <p>Returns:</p> Type Description <code>ExpectType | Widget</code> <p>The first descendant encountered with this ID.</p> <p>Raises:</p> Type Description <code>NoMatches</code> <p>if no children could be found for this ID.</p> <code>WrongType</code> <p>if the wrong type was found.</p>"},{"location":"api/widget/#textual.widget.Widget.get_widget_by_id(id)","title":"<code>id</code>","text":""},{"location":"api/widget/#textual.widget.Widget.get_widget_by_id(expect_type)","title":"<code>expect_type</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount","title":"mount","text":"<pre><code>mount(*widgets, before=None, after=None)\n</code></pre> <p>Mount widgets below this widget (making this widget a container).</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widget(s) to mount.</p> <code>()</code> <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/widget/#textual.widget.Widget.mount(*widgets)","title":"<code>*widgets</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount(before)","title":"<code>before</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount(after)","title":"<code>after</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_all","title":"mount_all","text":"<pre><code>mount_all(widgets, *, before=None, after=None)\n</code></pre> <p>Mount widgets from an iterable.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Widget]</code> <p>An iterable of widgets.</p> required <code>int | str | Widget | None</code> <p>Optional location to mount before. An <code>int</code> is the index of the child to mount before, a <code>str</code> is a <code>query_one</code> query to find the widget to mount before.</p> <code>None</code> <code>int | str | Widget | None</code> <p>Optional location to mount after. An <code>int</code> is the index of the child to mount after, a <code>str</code> is a <code>query_one</code> query to find the widget to mount after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable object that waits for widgets to be mounted.</p> <p>Raises:</p> Type Description <code>MountError</code> <p>If there is a problem with the mount request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>MountError</code> will be raised.</p>"},{"location":"api/widget/#textual.widget.Widget.mount_all(widgets)","title":"<code>widgets</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_all(before)","title":"<code>before</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_all(after)","title":"<code>after</code>","text":""},{"location":"api/widget/#textual.widget.Widget.mount_composed_widgets","title":"mount_composed_widgets  <code>async</code>","text":"<pre><code>mount_composed_widgets(widgets)\n</code></pre> <p>Called by Textual to mount widgets after compose.</p> <p>There is generally no need to implement this method in your application. See Lazy for a class which uses this method to implement lazy mounting.</p> <p>Parameters:</p> Name Type Description Default <code>list[Widget]</code> <p>A list of child widgets.</p> required"},{"location":"api/widget/#textual.widget.Widget.mount_composed_widgets(widgets)","title":"<code>widgets</code>","text":""},{"location":"api/widget/#textual.widget.Widget.move_child","title":"move_child","text":"<pre><code>move_child(\n    child: int | Widget,\n    *,\n    before: int | Widget,\n    after: None = None\n) -&gt; None\n</code></pre><pre><code>move_child(\n    child: int | Widget,\n    *,\n    after: int | Widget,\n    before: None = None\n) -&gt; None\n</code></pre> <pre><code>move_child(child, *, before=None, after=None)\n</code></pre> <p>Move a child widget within its parent's list of children.</p> <p>Parameters:</p> Name Type Description Default <code>int | Widget</code> <p>The child widget to move.</p> required <code>int | Widget | None</code> <p>Child widget or location index to move before.</p> <code>None</code> <code>int | Widget | None</code> <p>Child widget or location index to move after.</p> <code>None</code> <p>Raises:</p> Type Description <code>WidgetError</code> <p>If there is a problem with the child or target.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If neither or both are provided a <code>WidgetError</code> will be raised.</p>"},{"location":"api/widget/#textual.widget.Widget.move_child(child)","title":"<code>child</code>","text":""},{"location":"api/widget/#textual.widget.Widget.move_child(before)","title":"<code>before</code>","text":""},{"location":"api/widget/#textual.widget.Widget.move_child(after)","title":"<code>after</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify","title":"notify","text":"<pre><code>notify(\n    message,\n    *,\n    title=\"\",\n    severity=\"information\",\n    timeout=None\n)\n</code></pre> <p>Create a notification.</p> <p>Tip</p> <p>This method is thread-safe.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The message for the notification.</p> required <code>str</code> <p>The title for the notification.</p> <code>''</code> <code>SeverityLevel</code> <p>The severity of the notification.</p> <code>'information'</code> <code>float | None</code> <p>The timeout (in seconds) for the notification, or <code>None</code> for default.</p> <code>None</code> <p>See <code>App.notify</code> for the full documentation for this method.</p>"},{"location":"api/widget/#textual.widget.Widget.notify(message)","title":"<code>message</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify(title)","title":"<code>title</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify(severity)","title":"<code>severity</code>","text":""},{"location":"api/widget/#textual.widget.Widget.notify(timeout)","title":"<code>timeout</code>","text":""},{"location":"api/widget/#textual.widget.Widget.on_prune","title":"on_prune  <code>async</code>","text":"<pre><code>on_prune(event)\n</code></pre> <p>Close message loop when asked to prune.</p>"},{"location":"api/widget/#textual.widget.Widget.post_message","title":"post_message","text":"<pre><code>post_message(message)\n</code></pre> <p>Post a message to this widget.</p> <p>Parameters:</p> Name Type Description Default <code>Message</code> <p>Message to post.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the message was posted, False if this widget was closed / closing.</p>"},{"location":"api/widget/#textual.widget.Widget.post_message(message)","title":"<code>message</code>","text":""},{"location":"api/widget/#textual.widget.Widget.post_render","title":"post_render","text":"<pre><code>post_render(renderable)\n</code></pre> <p>Applies style attributes to the default renderable.</p> <p>This method is called by Textual itself. It is unlikely you will need to call or implement this method.</p> <p>Returns:</p> Type Description <code>ConsoleRenderable</code> <p>A new renderable.</p>"},{"location":"api/widget/#textual.widget.Widget.recompose","title":"recompose  <code>async</code>","text":"<pre><code>recompose()\n</code></pre> <p>Recompose the widget.</p> <p>Recomposing will remove children and call <code>self.compose</code> again to remount.</p>"},{"location":"api/widget/#textual.widget.Widget.refresh","title":"refresh","text":"<pre><code>refresh(\n    *regions, repaint=True, layout=False, recompose=False\n)\n</code></pre> <p>Initiate a refresh of the widget.</p> <p>This method sets an internal flag to perform a refresh, which will be done on the next idle event. Only one refresh will be done even if this method is called multiple times.</p> <p>By default this method will cause the content of the widget to refresh, but not change its size. You can also set <code>layout=True</code> to perform a layout.</p> <p>Warning</p> <p>It is rarely necessary to call this method explicitly. Updating styles or reactive attributes will do this automatically.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Additional screen regions to mark as dirty.</p> <code>()</code> <code>bool</code> <p>Repaint the widget (will call render() again).</p> <code>True</code> <code>bool</code> <p>Also layout widgets in the view.</p> <code>False</code> <code>bool</code> <p>Re-compose the widget (will remove and re-mount children).</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Widget</code> instance.</p>"},{"location":"api/widget/#textual.widget.Widget.refresh(*regions)","title":"<code>*regions</code>","text":""},{"location":"api/widget/#textual.widget.Widget.refresh(repaint)","title":"<code>repaint</code>","text":""},{"location":"api/widget/#textual.widget.Widget.refresh(layout)","title":"<code>layout</code>","text":""},{"location":"api/widget/#textual.widget.Widget.refresh(recompose)","title":"<code>recompose</code>","text":""},{"location":"api/widget/#textual.widget.Widget.release_mouse","title":"release_mouse","text":"<pre><code>release_mouse()\n</code></pre> <p>Release the mouse.</p> <p>Mouse events will only be sent when the mouse is over the widget.</p>"},{"location":"api/widget/#textual.widget.Widget.remove","title":"remove","text":"<pre><code>remove()\n</code></pre> <p>Remove the Widget from the DOM (effectively deleting it).</p> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the widget to be removed.</p>"},{"location":"api/widget/#textual.widget.Widget.remove_children","title":"remove_children","text":"<pre><code>remove_children(selector='*')\n</code></pre> <p>Remove the immediate children of this Widget from the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>str | type[QueryType] | Iterable[Widget]</code> <p>A CSS selector or iterable of widgets to remove.</p> <code>'*'</code> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the direct children to be removed.</p>"},{"location":"api/widget/#textual.widget.Widget.remove_children(selector)","title":"<code>selector</code>","text":""},{"location":"api/widget/#textual.widget.Widget.render","title":"render","text":"<pre><code>render()\n</code></pre> <p>Get text or Rich renderable for this widget.</p> <p>Implement this for custom widgets.</p> Example <pre><code>from textual.app import RenderableType\nfrom textual.widget import Widget\n\nclass CustomWidget(Widget):\n    def render(self) -&gt; RenderableType:\n        return \"Welcome to [bold red]Textual[/]!\"\n</code></pre> <p>Returns:</p> Type Description <code>RenderResult</code> <p>Any renderable.</p>"},{"location":"api/widget/#textual.widget.Widget.render_line","title":"render_line","text":"<pre><code>render_line(y)\n</code></pre> <p>Render a line of content.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Y Coordinate of line.</p> required <p>Returns:</p> Type Description <code>Strip</code> <p>A rendered line.</p>"},{"location":"api/widget/#textual.widget.Widget.render_line(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.render_lines","title":"render_lines","text":"<pre><code>render_lines(crop)\n</code></pre> <p>Render the widget in to lines.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>Region within visible area to render.</p> required <p>Returns:</p> Type Description <code>list[Strip]</code> <p>A list of list of segments.</p>"},{"location":"api/widget/#textual.widget.Widget.render_lines(crop)","title":"<code>crop</code>","text":""},{"location":"api/widget/#textual.widget.Widget.render_str","title":"render_str","text":"<pre><code>render_str(text_content)\n</code></pre> <p>Convert str in to a Text object.</p> <p>If you pass in an existing Text object it will be returned unaltered.</p> <p>Parameters:</p> Name Type Description Default <code>str | Text</code> <p>Text or str.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A text object.</p>"},{"location":"api/widget/#textual.widget.Widget.render_str(text_content)","title":"<code>text_content</code>","text":""},{"location":"api/widget/#textual.widget.Widget.run_action","title":"run_action  <code>async</code>","text":"<pre><code>run_action(action)\n</code></pre> <p>Perform a given action, with this widget as the default namespace.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Action encoded as a string.</p> required"},{"location":"api/widget/#textual.widget.Widget.run_action(action)","title":"<code>action</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down","title":"scroll_down","text":"<pre><code>scroll_down(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one line down.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_down(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_down(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end","title":"scroll_end","text":"<pre><code>scroll_end(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to the end of the container.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_end(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_end(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home","title":"scroll_home","text":"<pre><code>scroll_home(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to home position.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use duration.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_home(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_home(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left","title":"scroll_left","text":"<pre><code>scroll_left(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one cell left.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_left(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_left(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down","title":"scroll_page_down","text":"<pre><code>scroll_page_down(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page down.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_down(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left","title":"scroll_page_left","text":"<pre><code>scroll_page_left(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page left.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_left(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right","title":"scroll_page_right","text":"<pre><code>scroll_page_right(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page right.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_right(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up","title":"scroll_page_up","text":"<pre><code>scroll_page_up(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one page up.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_page_up(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative","title":"scroll_relative","text":"<pre><code>scroll_relative(\n    x=None,\n    y=None,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll relative to current position.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>X distance (columns) to scroll, or <code>None</code> for no change.</p> <code>None</code> <code>float | None</code> <p>Y distance (rows) to scroll, or <code>None</code> for no change.</p> <code>None</code> <code>bool</code> <p>Animate to new scroll position.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>. Or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if animate is <code>True</code> and speed is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_relative(x)","title":"<code>x</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_relative(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right","title":"scroll_right","text":"<pre><code>scroll_right(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one cell right.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_right(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_right(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to","title":"scroll_to","text":"<pre><code>scroll_to(\n    x=None,\n    y=None,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll to a given (absolute) coordinate, optionally animating.</p> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>X coordinate (column) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>float | None</code> <p>Y coordinate (row) to scroll to, or <code>None</code> for no change.</p> <code>None</code> <code>bool</code> <p>Animate to new scroll position.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code> Note <p>The call to scroll is made after the next refresh.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_to(x)","title":"<code>x</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(y)","title":"<code>y</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center","title":"scroll_to_center","text":"<pre><code>scroll_to_center(\n    widget,\n    animate=True,\n    *,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    origin_visible=True,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll this widget to the center of self.</p> <p>The center of the widget will be scrolled to the center of the container.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widget to scroll to the center of self.</p> required <code>bool</code> <p>Whether to animate the scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>bool</code> <p>Ensure that the top left corner of the widget remains visible after the scroll.</p> <code>True</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(origin_visible)","title":"<code>origin_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_center(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region","title":"scroll_to_region","text":"<pre><code>scroll_to_region(\n    region,\n    *,\n    spacing=None,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    center=False,\n    top=False,\n    origin_visible=True,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scrolls a given region in to view, if required.</p> <p>This method will scroll the least distance required to move <code>region</code> fully within the scrollable area.</p> <p>Parameters:</p> Name Type Description Default <code>Region</code> <p>A region that should be visible.</p> required <code>Spacing | None</code> <p>Optional spacing around the region.</p> <code>None</code> <code>bool</code> <p><code>True</code> to animate, or <code>False</code> to jump.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Scroll <code>region</code> to top of container.</p> <code>False</code> <code>bool</code> <p>Ensure that the top left of the widget is within the window.</p> <code>True</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code> <p>Returns:</p> Type Description <code>Offset</code> <p>The distance that was scrolled.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(region)","title":"<code>region</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(spacing)","title":"<code>spacing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(top)","title":"<code>top</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(origin_visible)","title":"<code>origin_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_region(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget","title":"scroll_to_widget","text":"<pre><code>scroll_to_widget(\n    widget,\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    center=False,\n    top=False,\n    origin_visible=True,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll scrolling to bring a widget in to view.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A descendant widget.</p> required <code>bool</code> <p><code>True</code> to animate, or <code>False</code> to jump.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Scroll widget to top of container.</p> <code>False</code> <code>bool</code> <p>Ensure that the top left of the widget is within the window.</p> <code>True</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if any scrolling has occurred in any descendant, otherwise <code>False</code>.</p>"},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(widget)","title":"<code>widget</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(top)","title":"<code>top</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(origin_visible)","title":"<code>origin_visible</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_to_widget(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up","title":"scroll_up","text":"<pre><code>scroll_up(\n    *,\n    animate=True,\n    speed=None,\n    duration=None,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll one line up.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if <code>animate</code> is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and speed is <code>None</code>.</p> <code>None</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_up(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_up(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible","title":"scroll_visible","text":"<pre><code>scroll_visible(\n    animate=True,\n    *,\n    speed=None,\n    duration=None,\n    top=False,\n    easing=None,\n    force=False,\n    on_complete=None,\n    level=\"basic\"\n)\n</code></pre> <p>Scroll the container to make this widget visible.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Animate scroll.</p> <code>True</code> <code>float | None</code> <p>Speed of scroll if animate is <code>True</code>; or <code>None</code> to use <code>duration</code>.</p> <code>None</code> <code>float | None</code> <p>Duration of animation, if <code>animate</code> is <code>True</code> and <code>speed</code> is <code>None</code>.</p> <code>None</code> <code>bool</code> <p>Scroll to top of container.</p> <code>False</code> <code>EasingFunction | str | None</code> <p>An easing method for the scrolling animation.</p> <code>None</code> <code>bool</code> <p>Force scrolling even when prohibited by overflow styling.</p> <code>False</code> <code>CallbackType | None</code> <p>A callable to invoke when the animation is finished.</p> <code>None</code> <code>AnimationLevel</code> <p>Minimum level required for the animation to take place (inclusive).</p> <code>'basic'</code>"},{"location":"api/widget/#textual.widget.Widget.scroll_visible(animate)","title":"<code>animate</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(speed)","title":"<code>speed</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(duration)","title":"<code>duration</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(top)","title":"<code>top</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(easing)","title":"<code>easing</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(force)","title":"<code>force</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(on_complete)","title":"<code>on_complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.scroll_visible(level)","title":"<code>level</code>","text":""},{"location":"api/widget/#textual.widget.Widget.set_loading","title":"set_loading","text":"<pre><code>set_loading(loading)\n</code></pre> <p>Set or reset the loading state of this widget.</p> <p>A widget in a loading state will display a LoadingIndicator that obscures the widget.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p><code>True</code> to put the widget into a loading state, or <code>False</code> to reset the loading state.</p> required <p>Returns:</p> Type Description <code>Awaitable</code> <p>An optional awaitable.</p>"},{"location":"api/widget/#textual.widget.Widget.set_loading(loading)","title":"<code>loading</code>","text":""},{"location":"api/widget/#textual.widget.Widget.stop_animation","title":"stop_animation  <code>async</code>","text":"<pre><code>stop_animation(attribute, complete=True)\n</code></pre> <p>Stop an animation on an attribute.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Name of the attribute whose animation should be stopped.</p> required <code>bool</code> <p>Should the animation be set to its final value?</p> <code>True</code> Note <p>If there is no animation scheduled or running, this is a no-op.</p>"},{"location":"api/widget/#textual.widget.Widget.stop_animation(attribute)","title":"<code>attribute</code>","text":""},{"location":"api/widget/#textual.widget.Widget.stop_animation(complete)","title":"<code>complete</code>","text":""},{"location":"api/widget/#textual.widget.Widget.suppress_click","title":"suppress_click","text":"<pre><code>suppress_click()\n</code></pre> <p>Suppress a click event.</p> <p>This will prevent a Click event being sent, if called after a mouse down event and before the click itself.</p>"},{"location":"api/widget/#textual.widget.Widget.watch_disabled","title":"watch_disabled","text":"<pre><code>watch_disabled(disabled)\n</code></pre> <p>Update the styles of the widget and its children when disabled is toggled.</p>"},{"location":"api/widget/#textual.widget.Widget.watch_has_focus","title":"watch_has_focus","text":"<pre><code>watch_has_focus(value)\n</code></pre> <p>Update from CSS if has focus state changes.</p>"},{"location":"api/widget/#textual.widget.Widget.watch_mouse_hover","title":"watch_mouse_hover","text":"<pre><code>watch_mouse_hover(value)\n</code></pre> <p>Update from CSS if mouse over state changes.</p>"},{"location":"api/widget/#textual.widget.WidgetError","title":"WidgetError","text":"<p>               Bases: <code>Exception</code></p> <p>Base widget error.</p>"},{"location":"api/work/","title":"textual.work","text":"<p>A decorator used to create workers.</p> <p>Parameters:</p> Name Type Description Default <code>Callable[FactoryParamSpec, ReturnType] | Callable[FactoryParamSpec, Coroutine[None, None, ReturnType]] | None</code> <p>A function or coroutine.</p> <code>None</code> <code>str</code> <p>A short string to identify the worker (in logs and debugging).</p> <code>''</code> <code>str</code> <p>A short string to identify a group of workers.</p> <code>'default'</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group.</p> <code>False</code> <code>str | None</code> <p>Readable description of the worker for debugging purposes. By default, it uses a string representation of the decorated method and its arguments.</p> <code>None</code> <code>bool</code> <p>Mark the method as a thread worker.</p> <code>False</code>"},{"location":"api/work/#textual.work(method)","title":"<code>method</code>","text":""},{"location":"api/work/#textual.work(name)","title":"<code>name</code>","text":""},{"location":"api/work/#textual.work(group)","title":"<code>group</code>","text":""},{"location":"api/work/#textual.work(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/work/#textual.work(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/work/#textual.work(description)","title":"<code>description</code>","text":""},{"location":"api/work/#textual.work(thread)","title":"<code>thread</code>","text":""},{"location":"api/worker/","title":"textual.worker","text":"<p>This module contains the <code>Worker</code> class and related objects.</p> <p>See the guide for how to use workers.</p>"},{"location":"api/worker/#textual.worker.WorkType","title":"WorkType  <code>module-attribute</code>","text":"<pre><code>WorkType = Union[\n    Callable[[], Coroutine[None, None, ResultType]],\n    Callable[[], ResultType],\n    Awaitable[ResultType],\n]\n</code></pre> <p>Type used for workers.</p>"},{"location":"api/worker/#textual.worker.active_worker","title":"active_worker  <code>module-attribute</code>","text":"<pre><code>active_worker = ContextVar('active_worker')\n</code></pre> <p>Currently active worker context var.</p>"},{"location":"api/worker/#textual.worker.DeadlockError","title":"DeadlockError","text":"<p>               Bases: <code>WorkerError</code></p> <p>The operation would result in a deadlock.</p>"},{"location":"api/worker/#textual.worker.NoActiveWorker","title":"NoActiveWorker","text":"<p>               Bases: <code>Exception</code></p> <p>There is no active worker.</p>"},{"location":"api/worker/#textual.worker.Worker","title":"Worker","text":"<pre><code>Worker(\n    node,\n    work,\n    *,\n    name=\"\",\n    group=\"default\",\n    description=\"\",\n    exit_on_error=True,\n    thread=False\n)\n</code></pre> <p>               Bases: <code>Generic[ResultType]</code></p> <p>A class to manage concurrent work (either a task or a thread).</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>The widget, screen, or App that initiated the work.</p> required <code>WorkType</code> <p>A callable, coroutine, or other awaitable object to run in the worker.</p> required <code>str</code> <p>Name of the worker (short string to help identify when debugging).</p> <code>''</code> <code>str</code> <p>The worker group.</p> <code>'default'</code> <code>str</code> <p>Description of the worker (longer string with more details).</p> <code>''</code> <code>bool</code> <p>Exit the app if the worker raises an error. Set to <code>False</code> to suppress exceptions.</p> <code>True</code> <code>bool</code> <p>Mark the worker as a thread worker.</p> <code>False</code>"},{"location":"api/worker/#textual.worker.Worker(node)","title":"<code>node</code>","text":""},{"location":"api/worker/#textual.worker.Worker(work)","title":"<code>work</code>","text":""},{"location":"api/worker/#textual.worker.Worker(name)","title":"<code>name</code>","text":""},{"location":"api/worker/#textual.worker.Worker(group)","title":"<code>group</code>","text":""},{"location":"api/worker/#textual.worker.Worker(description)","title":"<code>description</code>","text":""},{"location":"api/worker/#textual.worker.Worker(exit_on_error)","title":"<code>exit_on_error</code>","text":""},{"location":"api/worker/#textual.worker.Worker(thread)","title":"<code>thread</code>","text":""},{"location":"api/worker/#textual.worker.Worker.cancelled_event","title":"cancelled_event  <code>instance-attribute</code>","text":"<pre><code>cancelled_event = Event()\n</code></pre> <p>A threading event set when the worker is cancelled.</p>"},{"location":"api/worker/#textual.worker.Worker.completed_steps","title":"completed_steps  <code>property</code>","text":"<pre><code>completed_steps\n</code></pre> <p>The number of completed steps.</p>"},{"location":"api/worker/#textual.worker.Worker.error","title":"error  <code>property</code>","text":"<pre><code>error\n</code></pre> <p>The exception raised by the worker, or <code>None</code> if there was no error.</p>"},{"location":"api/worker/#textual.worker.Worker.is_cancelled","title":"is_cancelled  <code>property</code>","text":"<pre><code>is_cancelled\n</code></pre> <p>Has the work been cancelled?</p> <p>Note that cancelled work may still be running.</p>"},{"location":"api/worker/#textual.worker.Worker.is_finished","title":"is_finished  <code>property</code>","text":"<pre><code>is_finished\n</code></pre> <p>Has the task finished (cancelled, error, or success)?</p>"},{"location":"api/worker/#textual.worker.Worker.is_running","title":"is_running  <code>property</code>","text":"<pre><code>is_running\n</code></pre> <p>Is the task running?</p>"},{"location":"api/worker/#textual.worker.Worker.node","title":"node  <code>property</code>","text":"<pre><code>node\n</code></pre> <p>The node where this worker was run from.</p>"},{"location":"api/worker/#textual.worker.Worker.progress","title":"progress  <code>property</code>","text":"<pre><code>progress\n</code></pre> <p>Progress as a percentage.</p> <p>If the total steps is None, then this will return 0. The percentage will be clamped between 0 and 100.</p>"},{"location":"api/worker/#textual.worker.Worker.result","title":"result  <code>property</code>","text":"<pre><code>result\n</code></pre> <p>The result of the worker, or <code>None</code> if there is no result.</p>"},{"location":"api/worker/#textual.worker.Worker.state","title":"state  <code>property</code> <code>writable</code>","text":"<pre><code>state\n</code></pre> <p>The current state of the worker.</p>"},{"location":"api/worker/#textual.worker.Worker.total_steps","title":"total_steps  <code>property</code>","text":"<pre><code>total_steps\n</code></pre> <p>The number of total steps, or None if indeterminate.</p>"},{"location":"api/worker/#textual.worker.Worker.StateChanged","title":"StateChanged","text":"<pre><code>StateChanged(worker, state)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The worker state changed.</p> <p>Parameters:</p> Name Type Description Default <code>Worker</code> <p>The worker object.</p> required <code>WorkerState</code> <p>New state.</p> required"},{"location":"api/worker/#textual.worker.Worker.StateChanged(worker)","title":"<code>worker</code>","text":""},{"location":"api/worker/#textual.worker.Worker.StateChanged(state)","title":"<code>state</code>","text":""},{"location":"api/worker/#textual.worker.Worker.advance","title":"advance","text":"<pre><code>advance(steps=1)\n</code></pre> <p>Advance the number of completed steps.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>Number of steps to advance.</p> <code>1</code>"},{"location":"api/worker/#textual.worker.Worker.advance(steps)","title":"<code>steps</code>","text":""},{"location":"api/worker/#textual.worker.Worker.cancel","title":"cancel","text":"<pre><code>cancel()\n</code></pre> <p>Cancel the task.</p>"},{"location":"api/worker/#textual.worker.Worker.run","title":"run  <code>async</code>","text":"<pre><code>run()\n</code></pre> <p>Run the work.</p> <p>Implement this method in a subclass, or pass a callable to the constructor.</p> <p>Returns:</p> Type Description <code>ResultType</code> <p>Return value of the work.</p>"},{"location":"api/worker/#textual.worker.Worker.update","title":"update","text":"<pre><code>update(completed_steps=None, total_steps=-1)\n</code></pre> <p>Update the number of completed steps.</p> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>The number of completed seps, or <code>None</code> to not change.</p> <code>None</code> <code>int | None</code> <p>The total number of steps, <code>None</code> for indeterminate, or -1 to leave unchanged.</p> <code>-1</code>"},{"location":"api/worker/#textual.worker.Worker.update(completed_steps)","title":"<code>completed_steps</code>","text":""},{"location":"api/worker/#textual.worker.Worker.update(total_steps)","title":"<code>total_steps</code>","text":""},{"location":"api/worker/#textual.worker.Worker.wait","title":"wait  <code>async</code>","text":"<pre><code>wait()\n</code></pre> <p>Wait for the work to complete.</p> <p>Raises:</p> Type Description <code>WorkerFailed</code> <p>If the Worker raised an exception.</p> <code>WorkerCancelled</code> <p>If the Worker was cancelled before it completed.</p> <p>Returns:</p> Type Description <code>ResultType</code> <p>The return value of the work.</p>"},{"location":"api/worker/#textual.worker.WorkerCancelled","title":"WorkerCancelled","text":"<p>               Bases: <code>WorkerError</code></p> <p>The worker was cancelled and did not complete.</p>"},{"location":"api/worker/#textual.worker.WorkerError","title":"WorkerError","text":"<p>               Bases: <code>Exception</code></p> <p>A worker related error.</p>"},{"location":"api/worker/#textual.worker.WorkerFailed","title":"WorkerFailed","text":"<pre><code>WorkerFailed(error)\n</code></pre> <p>               Bases: <code>WorkerError</code></p> <p>The worker raised an exception and did not complete.</p>"},{"location":"api/worker/#textual.worker.WorkerState","title":"WorkerState","text":"<p>               Bases: <code>Enum</code></p> <p>A description of the worker's current state.</p>"},{"location":"api/worker/#textual.worker.WorkerState.CANCELLED","title":"CANCELLED  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>CANCELLED = 3\n</code></pre> <p>Worker is not running, and was cancelled.</p>"},{"location":"api/worker/#textual.worker.WorkerState.ERROR","title":"ERROR  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ERROR = 4\n</code></pre> <p>Worker is not running, and exited with an error.</p>"},{"location":"api/worker/#textual.worker.WorkerState.PENDING","title":"PENDING  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>PENDING = 1\n</code></pre> <p>Worker is initialized, but not running.</p>"},{"location":"api/worker/#textual.worker.WorkerState.RUNNING","title":"RUNNING  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>RUNNING = 2\n</code></pre> <p>Worker is running.</p>"},{"location":"api/worker/#textual.worker.WorkerState.SUCCESS","title":"SUCCESS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>SUCCESS = 5\n</code></pre> <p>Worker is not running, and completed successfully.</p>"},{"location":"api/worker/#textual.worker.get_current_worker","title":"get_current_worker","text":"<pre><code>get_current_worker()\n</code></pre> <p>Get the currently active worker.</p> <p>Raises:</p> Type Description <code>NoActiveWorker</code> <p>If there is no active worker.</p> <p>Returns:</p> Type Description <code>Worker</code> <p>A Worker instance.</p>"},{"location":"api/worker_manager/","title":"textual.worker_manager","text":"<p>Contains <code>WorkerManager</code>, a class to manage workers for an app.</p> <p>You access this object via App.workers or Widget.workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager","title":"WorkerManager","text":"<pre><code>WorkerManager(app)\n</code></pre> <p>An object to manager a number of workers.</p> <p>You will not have to construct this class manually, as widgets, screens, and apps have a worker manager accessibly via a <code>workers</code> attribute.</p> <p>Parameters:</p> Name Type Description Default <code>App</code> <p>An App instance.</p> required"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager(app)","title":"<code>app</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker","title":"add_worker","text":"<pre><code>add_worker(worker, start=True, exclusive=True)\n</code></pre> <p>Add a new worker.</p> <p>Parameters:</p> Name Type Description Default <code>Worker</code> <p>A Worker instance.</p> required <code>bool</code> <p>Start the worker if True, otherwise the worker must be started manually.</p> <code>True</code> <code>bool</code> <p>Cancel all workers in the same group as <code>worker</code>.</p> <code>True</code>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker(worker)","title":"<code>worker</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker(start)","title":"<code>start</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.add_worker(exclusive)","title":"<code>exclusive</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_all","title":"cancel_all","text":"<pre><code>cancel_all()\n</code></pre> <p>Cancel all workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_group","title":"cancel_group","text":"<pre><code>cancel_group(node, group)\n</code></pre> <p>Cancel a single group.</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>Worker DOM node.</p> required <code>str</code> <p>A group name.</p> required <p>Returns:</p> Type Description <code>list[Worker]</code> <p>A list of workers that were cancelled.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_group(node)","title":"<code>node</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_group(group)","title":"<code>group</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_node","title":"cancel_node","text":"<pre><code>cancel_node(node)\n</code></pre> <p>Cancel all workers associated with a given node</p> <p>Parameters:</p> Name Type Description Default <code>DOMNode</code> <p>A DOM node (widget, screen, or App).</p> required <p>Returns:</p> Type Description <code>list[Worker]</code> <p>List of cancelled workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.cancel_node(node)","title":"<code>node</code>","text":""},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.start_all","title":"start_all","text":"<pre><code>start_all()\n</code></pre> <p>Start all the workers.</p>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.wait_for_complete","title":"wait_for_complete  <code>async</code>","text":"<pre><code>wait_for_complete(workers=None)\n</code></pre> <p>Wait for workers to complete.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Worker] | None</code> <p>An iterable of workers or None to wait for all workers in the manager.</p> <code>None</code>"},{"location":"api/worker_manager/#textual.worker_manager.WorkerManager.wait_for_complete(workers)","title":"<code>workers</code>","text":""},{"location":"blog/","title":"Textual Blog","text":""},{"location":"blog/2023/03/15/no-async-async-with-python/","title":"No-async async with Python","text":"<p>A (reasonable) criticism of async is that it tends to proliferate in your code. In order to <code>await</code> something, your functions must be <code>async</code> all the way up the call-stack. This tends to result in you making things <code>async</code> just to support that one call that needs it or, worse, adding <code>async</code> just-in-case. Given that going from <code>def</code> to <code>async def</code> is a breaking change there is a strong incentive to go straight there.</p> <p>Before you know it, you have adopted a policy of \"async all the things\".</p> <p>Textual is an async framework, but doesn't require the app developer to use the <code>async</code> and <code>await</code> keywords (but you can if you need to). This post is about how Textual accomplishes this async-agnosticism.</p> <p>Info</p> <p>See this example from the docs for an async-less Textual app.</p>"},{"location":"blog/2023/03/15/no-async-async-with-python/#an-apology","title":"An apology","text":"<p>But first, an apology! In a previous post I said Textual \"doesn't do any IO of its own\". This is not accurate. Textual responds to keys and mouse events (Input) and writes content to the terminal (Output).</p> <p>Although Textual clearly does do IO, it uses <code>asyncio</code> mainly for concurrency. It allows each widget to update its part of the screen independently from the rest of the app.</p>"},{"location":"blog/2023/03/15/no-async-async-with-python/#await-me-maybe","title":"Await me (maybe)","text":"<p>The first no-async async technique is the \"Await me maybe\" pattern, a term first coined by Simon Willison. This is particularly applicable to callbacks (or in Textual terms, message handlers).</p> <p>The <code>await_me_maybe</code> function below can run a callback that is either a plain old function or a coroutine (<code>async def</code>). It does this by awaiting the result of the callback if it is awaitable, or simply returning the result if it is not.</p> <pre><code>import asyncio\nimport inspect\n\n\ndef plain_old_function():\n    return \"Plain old function\"\n\nasync def async_function():\n    return \"Async function\"\n\n\nasync def await_me_maybe(callback):\n    result = callback()\n    if inspect.isawaitable(result):\n        return await result\n    return result\n\n\nasync def run_framework():\n    print(\n        await await_me_maybe(plain_old_function)\n    )\n    print(\n        await await_me_maybe(async_function)\n    )\n\n\nif __name__ == \"__main__\":\n    asyncio.run(run_framework())\n</code></pre>"},{"location":"blog/2023/03/15/no-async-async-with-python/#optionally-awaitable","title":"Optionally awaitable","text":"<p>The \"await me maybe\" pattern is great when an async framework calls the app's code. The app developer can choose to write async code or not. Things get a little more complicated when the app wants to call the framework's API. If the API has asynced all the things, then it would force the app to do the same.</p> <p>Textual's API consists of regular methods for the most part, but there are a few methods which are optionally awaitable. These are not coroutines (which must be awaited to do anything).</p> <p>In practice, this means that those API calls initiate something which will complete a short time later. If you discard the return value then it won't prevent it from working. You only need to <code>await</code> if you want to know when it has finished.</p> <p>The <code>mount</code> method is one such method. Calling it will add a widget to the screen:</p> <pre><code>def on_key(self):\n    # Add MyWidget to the screen\n    self.mount(MyWidget(\"Hello, World!\"))\n</code></pre> <p>In this example we don't care that the widget hasn't been mounted immediately, only that it will be soon.</p> <p>Note</p> <p>Textual awaits the result of mount after the message handler, so even if you don't explicitly await it, it will have been completed by the time the next message handler runs.</p> <p>We might care if we want to mount a widget then make some changes to it. By making the handler <code>async</code> and awaiting the result of mount, we can be sure that the widget has been initialized before we update it:</p> <pre><code>async def on_key(self):\n    # Add MyWidget to the screen\n    await self.mount(MyWidget(\"Hello, World!\"))\n    # add a border\n    self.query_one(MyWidget).styles.border = (\"heavy\", \"red\")\n</code></pre> <p>Incidentally, I found there were very few examples of writing awaitable objects in Python. So here is the code for <code>AwaitMount</code> which is returned by the <code>mount</code> method:</p> <pre><code>class AwaitMount:\n    \"\"\"An awaitable returned by mount() and mount_all().\"\"\"\n\n    def __init__(self, parent: Widget, widgets: Sequence[Widget]) -&gt; None:\n        self._parent = parent\n        self._widgets = widgets\n\n    async def __call__(self) -&gt; None:\n        \"\"\"Allows awaiting via a call operation.\"\"\"\n        await self\n\n    def __await__(self) -&gt; Generator[None, None, None]:\n        async def await_mount() -&gt; None:\n            if self._widgets:\n                aws = [\n                    create_task(widget._mounted_event.wait(), name=\"await mount\")\n                    for widget in self._widgets\n                ]\n                if aws:\n                    await wait(aws)\n                    self._parent.refresh(layout=True)\n\n        return await_mount().__await__()\n</code></pre>"},{"location":"blog/2023/03/15/no-async-async-with-python/#summing-up","title":"Summing up","text":"<p>Textual did initially \"async all the things\", which you might see if you find some old Textual code. Now async is optional.</p> <p>This is not because I dislike async. I'm a fan! But it does place a small burden on the developer (more to type and think about). With the current API you generally don't need to write coroutines, or remember to await things. But async is there if you need it.</p> <p>We're finding that Textual is increasingly becoming a UI to things which are naturally concurrent, so async was a good move. Concurrency can be a tricky subject, so we're planning some API magic to take the pain out of running tasks, threads, and processes. Stay tuned!</p> <p>Join us on our Discord server if you want to talk about these things with the Textualize developers.</p>"},{"location":"blog/2022/12/08/be-the-keymaster/","title":"Be the Keymaster!","text":""},{"location":"blog/2022/12/08/be-the-keymaster/#that-didnt-go-to-plan","title":"That didn't go to plan","text":"<p>So... yeah... the blog. When I wrote my previous (and first) post I had wanted to try and do a post towards the end of each week, highlighting what I'd done on the \"dogfooding\" front. Life kinda had other plans. Not in a terrible way, but it turns out that getting both flu and Covid jabs (AKA \"jags\" as they tend to say in my adopted home) on the same day doesn't really agree with me too well.</p> <p>I have been working, but there's been some odd moments in the past week and a bit and, last week, once I got to the end, I was glad for it to end. So no blog post happened.</p> <p>Anyway...</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#what-have-i-been-up-to","title":"What have I been up to?","text":"<p>While mostly sat feeling sorry for myself on my sofa, I have been coding. Rather than list all the different things here in detail, I'll quickly mention them with links to where to find them and play with them if you want:</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#fivepyfive","title":"FivePyFive","text":"<p>While my Textual 5x5 puzzle is one of the examples in the Textual repo, I wanted to make it more widely available so people can download it with <code>pip</code> or <code>pipx</code>. See over on PyPi and see if you can solve it. ;-)</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#textual-qrcode","title":"textual-qrcode","text":"<p>I wanted to put together a very small example of how someone may put together a third party widget library, and in doing so selected what I thought was going to be a mostly-useless example: a wrapper around a text-based QR code generator website. Weirdly I've had a couple of people express a need for QR codes in the terminal since publishing that!</p> <p></p>"},{"location":"blog/2022/12/08/be-the-keymaster/#pispy","title":"PISpy","text":"<p>PISpy is a very simple terminal-based client for the PyPi API. Mostly it provides a hypertext interface to Python package details, letting you look up a package and then follow its dependency links. It's very simple at the moment, but I think more fun things can be done with this.</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#oidia","title":"OIDIA","text":"<p>I'm a big fan of the use of streak-tracking in one form or another. Personally I use a streak-tracking app for keeping tabs of all sorts of good (and bad) habits, and as a heavy user of all things Apple I make a lot of use of the Fitness rings, etc. So I got to thinking it might be fun to do a really simple, no shaming, no counting, just recording, steak app for the Terminal. OIDIA is the result.</p> <p>As of the time of writing I only finished the first version of this yesterday evening, so there are plenty of rough edges; but having got it to a point where it performed the basic tasks I wanted from it, that seemed like a good time to publish.</p> <p>Expect to see this getting more updates and polish.</p>"},{"location":"blog/2022/12/08/be-the-keymaster/#wait-what-about-this-keymaster-thing","title":"Wait, what about this Keymaster thing?","text":"<p>Ahh, yes, about that... So one of the handy things I'm finding about Textual is its key binding system. The more I build Textual apps, the more I appreciate the bindings, how they can be associated with specific widgets, the use of actions (which can be used from other places too), etc.</p> <p>But... (there's always a \"but\" right -- I mean, there'd be no blog post to be had here otherwise).</p> <p>The terminal doesn't have access to all the key combinations you may want to use, and also, because some keys can't necessarily be \"typed\", at least not easily (think about it: there's no F1 character, you have to type <code>F1</code>), many keys and key combinations need to be bound with specific names.</p> <p>So there's two problems here: how do I discover what keys even turn up in my application, and when they do, what should I call them when I pass them to <code>Binding</code>?</p> <p>That felt like a \"well Dave just build an app for it!\" problem. So I did:</p> <p>If you're building apps with Textual and you want to discover what keys turn up from your terminal and are available to your application, you can:</p> <pre><code>$ pipx install textual-keys\n</code></pre> <p>and then just run <code>textual-keys</code> and start mashing the keyboard to find out.</p> <p>There's a good chance that this app, or at least a version of it, will make it into Textual itself (very likely as one of the devtools). But for now it's just an easy install away.</p> <p>I think there's a call to be made here too: have you built anything to help speed up how you work with Textual, or just make the development experience \"just so\"? If so, do let us know, and come yell about it on the <code>#show-and-tell</code> channel in our Discord server.</p>"},{"location":"blog/2022/12/30/a-better-asyncio-sleep-for-windows-to-fix-animation/","title":"A better asyncio sleep for Windows to fix animation","text":"<p>I spent some time optimizing Textual on Windows recently, and discovered something which may be of interest to anyone working with async code on that platform.</p> <p>Animation, scrolling, and fading had always been unsatisfactory on Windows. Textual was usable, but the lag when scrolling made apps feel far less snappy that other platforms. On macOS and Linux, scrolling is fast enough that it feels close to a native app, not something running in a terminal. Yet the Windows experience never improved, even as Textual got faster with each release.</p> <p>I had chalked this up to Windows Terminal being slow to render updates. After all, the classic Windows terminal was (and still is) glacially slow. Perhaps Microsoft just weren't focusing on performance.</p> <p>In retrospect, that was highly improbable. Like all modern terminals, Windows Terminal uses the GPU to render updates. Even without focussing on performance, it should be fast.</p> <p>I figured I'd give it one last attempt to speed up Textual on Windows. If I failed, Windows would forever be a third-class platform for Textual apps.</p> <p>It turned out that it was nothing to do with performance, per se. The issue was with a single asyncio function: <code>asyncio.sleep</code>.</p> <p>Textual has a <code>Timer</code> class which creates events at regular intervals. It powers the JS-like <code>set_interval</code> and <code>set_timer</code> functions. It is also used internally to do animation (such as smooth scrolling). This Timer class calls <code>asyncio.sleep</code> to wait the time between one event and the next.</p> <p>On macOS and Linux, calling <code>asynco.sleep</code> is fairly accurate. If you call <code>sleep(3.14)</code>, it will return within 1% of 3.14 seconds. This is not the case for Windows, which for historical reasons uses a timer with a granularity of 15 milliseconds. The upshot is that sleep times will be rounded up to the nearest multiple of 15 milliseconds.</p> <p>This limit appears to hold true for all async primitives on Windows. If you wait for something with a timeout, it will return on a multiple of 15 milliseconds. Fortunately there is work in the CPython pipeline to make this more accurate. Thanks to Steve Dower for pointing this out.</p> <p>This lack of accuracy in the timer meant that timer events were created at a far slower rate than intended. Animation was slower because Textual was waiting too long between updates.</p> <p>Once I had figured that out, I needed an alternative to <code>asyncio.sleep</code> for Textual's Timer class. And I found one. The following version of <code>sleep</code> is accurate to well within 1%:</p> <pre><code>from time import sleep as time_sleep\nfrom asyncio import get_running_loop\n\nasync def sleep(sleep_for: float) -&gt; None:\n    \"\"\"An asyncio sleep.\n\n    On Windows this achieves a better granularity than asyncio.sleep\n\n    Args:\n        sleep_for (float): Seconds to sleep for.\n    \"\"\"    \n    await get_running_loop().run_in_executor(None, time_sleep, sleep_for)\n</code></pre> <p>That is a drop-in replacement for sleep on Windows. With it, Textual runs a lot smoother. Easily on par with macOS and Linux.</p> <p>It's not quite perfect. There is a little tearing during full \"screen\" updates, but performance is decent all round. I suspect when this bug is fixed (big thanks to Paul Moore for looking in to that), and Microsoft implements this protocol then Textual on Windows will be A+.</p> <p>This Windows improvement will be in v0.9.0 of Textual, which will be released in a few days.</p>"},{"location":"blog/2023/02/11/the-heisenbug-lurking-in-your-async-code/","title":"The Heisenbug lurking in your async code","text":"<p>I'm taking a brief break from blogging about Textual to bring you this brief PSA for Python developers who work with async code. I wanted to expand a little on this tweet.</p> <p>If you have ever used <code>asyncio.create_task</code> you may have created a bug for yourself that is challenging (read almost impossible) to reproduce. If it occurs, your code will likely fail in unpredictable ways.</p> <p>The root cause of this Heisenbug is that if you don't hold a reference to the task object returned by <code>create_task</code> then the task may disappear without warning when Python runs garbage collection. In other words, the code in your task will stop running with no obvious indication why.</p> <p>This behavior is well documented, as you can see from this excerpt (emphasis mine):</p> <p></p> <p>But who reads all the docs? And who has perfect recall if they do? A search on GitHub indicates that there are a lot of projects where this bug is waiting for just the right moment to ruin somebody's day.</p> <p>I suspect the reason this mistake is so common is that tasks are a lot like threads (conceptually at least). With threads you can just launch them and forget. Unless you mark them as \"daemon\" threads they will exist for the lifetime of your app. Not so with Tasks.</p> <p>The solution recommended in the docs is to keep a reference to the task for as long as you need it to live. On modern Python you could use TaskGroups which will keep references to your tasks. As long as all the tasks you spin up are in TaskGroups, you should be fine.</p>"},{"location":"blog/2023/03/08/overhead-of-python-asyncio-tasks/","title":"Overhead of Python Asyncio tasks","text":"<p>Every widget in Textual, be it a button, tree view, or a text input, runs an asyncio task. There is even a task for scrollbar corners (the little space formed when horizontal and vertical scrollbars meet).</p> <p>Info</p> <p>It may be IO that gives AsyncIO its name, but Textual doesn't do any IO of its own. Those tasks are used to power message queues, so that widgets (UI components) can do whatever they do at their own pace.</p> <p>Its fair to say that Textual apps launch a lot of tasks. Which is why when I was trying to optimize startup (for apps with 1000s of widgets) I suspected it was task related.</p> <p>I needed to know how much of an overhead it was to launch tasks. Tasks are lighter weight than threads, but how much lighter? The only way to know for certain was to profile.</p> <p>The following code launches a load of do nothing tasks, then waits for them to shut down. This would give me an idea of how performant <code>create_task</code> is, and also a baseline for optimizations. I would know the absolute limit of any optimizations I make.</p> <pre><code>from asyncio import create_task, wait, run\nfrom time import process_time as time\n\n\nasync def time_tasks(count=100) -&gt; float:\n    \"\"\"Time creating and destroying tasks.\"\"\"\n\n    async def nop_task() -&gt; None:\n        \"\"\"Do nothing task.\"\"\"\n        pass\n\n    start = time()\n    tasks = [create_task(nop_task()) for _ in range(count)]\n    await wait(tasks)\n    elapsed = time() - start\n    return elapsed\n\n\nfor count in range(100_000, 1000_000 + 1, 100_000):\n    create_time = run(time_tasks(count))\n    create_per_second = 1 / (create_time / count)\n    print(f\"{count:,} tasks \\t {create_per_second:0,.0f} tasks per/s\")\n</code></pre> <p>And here is the output:</p> <pre><code>100,000 tasks    280,003 tasks per/s\n200,000 tasks    255,275 tasks per/s\n300,000 tasks    248,713 tasks per/s\n400,000 tasks    248,383 tasks per/s\n500,000 tasks    241,624 tasks per/s\n600,000 tasks    260,660 tasks per/s\n700,000 tasks    244,510 tasks per/s\n800,000 tasks    247,455 tasks per/s\n900,000 tasks    242,744 tasks per/s\n1,000,000 tasks          259,715 tasks per/s\n</code></pre> <p>Info</p> <p>Running on an M1 MacBook Pro.</p> <p>This tells me I can create, run, and shutdown 260K tasks per second.</p> <p>That's fast.</p> <p>Clearly <code>create_task</code> is as close as you get to free in the Python world, and I would need to look elsewhere for optimizations. Turns out Textual spends far more time processing CSS rules than creating tasks (obvious in retrospect). I've noticed some big wins there, so the next version of Textual will be faster to start apps with a metric tonne of widgets.</p> <p>But I still need to know what to do with those scrollbar corners. A task for two characters. I don't even...</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/","title":"A year of building for the terminal","text":"<p>I joined Textualize back in January 2022, and since then have been hard at work with the team on both Rich and Textual. Over the course of the year, I\u2019ve been able to work on a lot of really cool things. In this post, I\u2019ll review a subset of the more interesting and visual stuff I\u2019ve built. If you\u2019re into terminals and command line tooling, you\u2019ll hopefully see at least one thing of interest!</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#a-file-manager-powered-by-textual","title":"A file manager powered by Textual","text":"<p>I\u2019ve been slowly developing a file manager as a \u201cdogfooding\u201d project for Textual. It takes inspiration from tools such as Ranger and Midnight Commander.</p> <p></p> <p>As of December 2022, it lets you browse your file system, filtering, multi-selection, creating and deleting files/directories, opening files in your <code>$EDITOR</code> and more.</p> <p>I\u2019m happy with how far this project has come \u2014 I think it\u2019s a good example of the type of powerful application that can be built with Textual with relatively little code. I\u2019ve been able to focus on features, instead of worrying about terminal emulator implementation details.</p> <p></p> <p>The project is available on GitHub.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#better-diffs-in-the-terminal","title":"Better diffs in the terminal","text":"<p>Diffs in the terminal are often difficult to read at a glance. I wanted to see how close I could get to achieving a diff display of a quality similar to that found in the GitHub UI.</p> <p>To attempt this, I built a tool called Dunk. It\u2019s a command line program which you can pipe your <code>git diff</code> output into, and it\u2019ll convert it into something which I find much more readable.</p> <p></p> <p>Although I\u2019m not particularly proud of the code - there are a lot of \u201chacks\u201d going on, but I\u2019m proud of the result. If anything, it shows what can be achieved for tools like this.</p> <p>For many diffs, the difference between running <code>git diff</code> and <code>git diff | dunk | less -R</code> is night and day.</p> <p></p> <p>It\u2019d be interesting to revisit this at some point. It has its issues, but I\u2019d love to see how it can be used alongside Textual to build a terminal-based diff/merge tool. Perhaps it could be combined with\u2026</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#code-editor-floating-gutter","title":"Code editor floating gutter","text":"<p>This is a common feature in text editors and IDEs: when you scroll to the right, you should still be able to see what line you\u2019re on. Out of interest, I tried to recreate the effect in the terminal using Textual.</p> <p></p> <p>Textual CSS offers a <code>dock</code> property which allows you to attach a widget to an edge of its parent. By creating a widget that contains a vertical list of numbers and setting the <code>dock</code> property to <code>left</code>, we can create a floating gutter effect. Then, we just need to keep the <code>scroll_y</code> in sync between the gutter and the content to ensure the line numbers stay aligned.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#dropdown-autocompletion-menu","title":"Dropdown autocompletion menu","text":"<p>While working on Shira (a proof-of-concept, terminal-based Python object explorer), I wrote some autocompleting dropdown functionality.</p> <p></p> <p>Textual forgoes the z-index concept from browser CSS and instead uses a \u201cnamed layer\u201d system. Using the <code>layers</code> property you can defined an ordered list of named layers, and using the <code>layer</code> property, you can assign a descendant widget to one of those layers.</p> <p>By creating a new layer above all others and assigning a widget to that layer, we can ensure that widget is painted above everything else.</p> <p>In order to determine where to place the dropdown, we can track the current value in the dropdown by <code>watch</code>ing the reactive input \u201cvalue\u201d inside the Input widget. This method will be called every time the <code>value</code> of the Input changes, and we can use this hook to amend the position of our dropdown position to accommodate for the length of the input value.</p> <p></p> <p>I\u2019ve now extracted this into a separate library called textual-autocomplete.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#tabs-with-animated-underline","title":"Tabs with animated underline","text":"<p>The aim here was to create a tab widget with underlines that animates smoothly as another tab is selected.</p> <p>The difficulty with implementing something like this is that we don\u2019t have pixel-perfect resolution when animating - a terminal window is just a big grid of fixed-width character cells.</p> <p> However, when animating things in a terminal, we can often achieve better granularity using Unicode related tricks. In this case, instead of shifting the bar along one whole cell, we adjust the endings of the bar to be a character which takes up half of a cell.</p> <p>The exact characters that form the bar are \"\u257a\", \"\u2501\" and \"\u2578\". When the bar sits perfectly within cell boundaries, every character is \u201c\u2501\u201d. As it travels over a cell boundary, the left and right ends of the bar are updated to \"\u257a\" and \"\u2578\" respectively.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#snapshot-testing-for-terminal-apps","title":"Snapshot testing for terminal apps","text":"<p>One of the great features we added to Rich this year was the ability to export console contents to an SVG. This feature was later exposed to Textual, allowing users to capture screenshots of their running Textual apps. Ultimately, I ended up creating a tool for snapshot testing in the Textual codebase.</p> <p>Snapshot testing is used to ensure that Textual output doesn\u2019t unexpectedly change. On disk, we store what we expect the output to look like. Then, when we run our unit tests, we get immediately alerted if the output has changed.</p> <p>This essentially automates the process of manually spinning up several apps and inspecting them for unexpected visual changes. It\u2019s great for catching subtle regressions!</p> <p>In Textual, each CSS property has its own canonical example and an associated snapshot test. If we accidentally break a property in a way that affects the visual output, the chances of it sneaking into a release are greatly reduced, because the corresponding snapshot test will fail.</p> <p>As part of this work, I built a web interface for comparing snapshots with test output. There\u2019s even a little toggle which highlights the differences, since they\u2019re sometimes rather subtle.</p> <p>Since the terminal output shown in the video above is just an SVG image, I was able to add the \"Show difference\" functionality by overlaying the two images and applying a single CSS property: <code>mix-blend-mode: difference;</code>.</p> <p>The snapshot testing functionality itself is implemented as a pytest plugin, and it builds on top of a snapshot testing framework called syrupy.</p> <p></p> <p>It's quite likely that this will eventually be exposed to end-users of Textual.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#demonstrating-animation","title":"Demonstrating animation","text":"<p>I built an example app to demonstrate how to animate in Textual and the available easing functions.</p> <p>The smoothness here is achieved using tricks similar to those used in the tabs I discussed earlier. In fact, the bar that animates in the video above is the same Rich renderable that is used by Textual's scrollbars.</p> <p>You can play with this app by running <code>textual easing</code>. Please use animation sparingly.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#developer-console","title":"Developer console","text":"<p>When developing terminal based applications, performing simple debugging using <code>print</code> can be difficult, since the terminal is in application mode.</p> <p>A project I worked on earlier in the year to improve the situation was the Textual developer console, which you can launch with <code>textual console</code>.</p> On the right, Dave's 5x5 Textual app. On the left, the Textual console. <p>Then, by running a Textual application with the <code>--dev</code> flag, all standard output will be redirected to it. This means you can use the builtin <code>print</code> function and still immediately see the output. Textual itself also writes information to this console, giving insight into the messages that are flowing through an application.</p>"},{"location":"blog/2022/12/20/a-year-of-building-for-the-terminal/#pixel-art","title":"Pixel art","text":"<p>Cells in the terminal are roughly two times taller than they are wide. This means, that two horizontally adjacent cells form an approximate square.</p> <p>Using this fact, I wrote a simple library based on Rich and PIL which can convert an image file into terminal output. You can find the library, <code>rich-pixels</code>, on GitHub.</p> <p>It\u2019s particularly good for displaying simple pixel art images. The SVG image below is also a good example of the SVG export functionality I touched on earlier.</p> Rich <p>Since the library generates an object which is renderable using Rich, these can easily be embedded inside Textual applications.</p> <p>Here's an example of that in a scrapped \"Pok\u00e9dex\" app I threw together:</p> <p>This is a rather naive approach to the problem... but I did it for fun!</p> <p>Other methods for displaying images in the terminal include:</p> <ul> <li>A more advanced library like chafa, which uses a range of Unicode characters to achieve a more accurate representation of the image.</li> <li>One of the available terminal image protocols, such as Sixel, Kitty\u2019s Terminal Graphics Protocol, and iTerm Inline Images Protocol.</li> </ul> <p>That was a whirlwind tour of just some of the projects I tackled in 2022. If you found it interesting, be sure to follow me on Twitter. I don't post often, but when I do, it's usually about things similar to those I've discussed here.</p>"},{"location":"blog/2022/11/06/new-blog/","title":"New Blog","text":"<p>Welcome to the first post on the Textual blog.</p> <p>I plan on using this as a place to make announcements regarding new releases of Textual, and any other relevant news.</p> <p>The first piece of news is that we've reorganized this site a little. The Events, Styles, and Widgets references are now under \"Reference\", and what used to be under \"Reference\" is now \"API\" which contains API-level documentation. I hope that's a little clearer than it used to be!</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/","title":"Behind the Curtain of Inline Terminal Applications","text":"<p>Textual recently added the ability to run inline terminal apps. You can see this in action if you run the calculator example:</p> <p></p> <p>The application appears directly under the prompt, rather than occupying the full height of the screen\u2014which is more typical of TUI applications. You can interact with this calculator using keys or the mouse. When you press Ctrl+C the calculator disappears and returns you to the prompt.</p> <p>Here's another app that creates an inline code editor:</p> Videoinline.py <p> </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\n\nclass InlineApp(App):\n    CSS = \"\"\"\n    TextArea {\n        height: auto;\n        max-height: 50vh;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield TextArea(language=\"python\")\n\n\nif __name__ == \"__main__\":\n    InlineApp().run(inline=True)\n</code></pre> <p>This post will cover some of what goes on under the hood to make such inline apps work.</p> <p>It's not going to go in to too much detail. I'm assuming most readers will be more interested in a birds-eye view rather than all the gory details.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#programming-the-terminal","title":"Programming the terminal","text":"<p>Firstly, let's recap how you program the terminal. Broadly speaking, the terminal is a device for displaying text. You write (or print) text to the terminal which typically appears at the end of a continually growing text buffer. In addition to text you can also send escape codes, which are short sequences of characters that instruct the terminal to do things such as change the text color, scroll, or other more exotic things.</p> <p>We only need a few of these escape codes to implement inline apps.</p> <p>Note</p> <p>I will gloss over the exact characters used for these escape codes. It's enough to know that they exist for now. If you implement any of this yourself, refer to the wikipedia article. </p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#rendering-frames","title":"Rendering frames","text":"<p>The first step is to display the app, which is simply text (possibly with escape sequences to change color and style). The lines are terminated with a newline character (<code>\"\\n\"</code>), except for the very last line (otherwise we get a blank line a the end which we don't need). Rather than a final newline, we write an escape code that moves the cursor back to it's prior position.</p> <p>The cursor is where text will be written. It's the same cursor you see as you type. Normally it will be at the end of the text in the terminal, but it can be moved around terminal with escape codes. It can be made invisible (as in Textual apps), but the terminal will keep track of the cursor, even if it can not be seen.</p> <p>Textual moves the cursor back to its original starting position so that subsequent frames will overwrite the previous frame.</p> <p>Here's a diagram that shows how the cursor is positioned:</p> <p>Note</p> <p>I've drawn the cursor in red, although it isn't typically visible.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2caW7bSFx1MDAxNoD/51x1MDAxNIIzP7qBuFL7XHUwMDEyYDCwZStyXHUwMDFj2+1VTmZcdTAwMWFcckqiLMZcdTAwMTQpkZRspVx1MDAxMWAwZ+hcdTAwMWNjljPlJPOKdkRKMlx1MDAxNcWb1EmUwLGruDxcdTAwMTa/t5fz+5NSaSVcdTAwMTl23ZVcdTAwMTelXHUwMDE197Lh+F4zci5WntnxgVx1MDAxYsVeXHUwMDE4wFx1MDAxNE1/jsN+1EiPbCdJN37x/HnHic7dpOs7XHJcdTAwMTdccry47/hx0m96IWqEnede4nbiv9mvu07H/Ws37DSTXGJlN1l1m15cdTAwMTJGV/dyfbfjXHUwMDA2SVxmV/87/FxcKv2efs1JXHUwMDE3uY3EXHTOfDc9IZ3KXHUwMDA0JJjxyeHdMEilpVJcdCOVXHUwMDE5zXvxXHUwMDA23C5xmzDZXHUwMDAykd1sxlx1MDAwZa3UX56u8lajfr6zj/VvXHUwMDAz1yHRRT+7a8vz/cNk6KdSNaIwjlfbTtJoZ0fESVx1MDAxNJ67Na+ZtD8vXm58dG5cdTAwMWPCQmRnRWH/rFx1MDAxZLixXVx1MDAwMzJcdTAwMWFccrtOw0uG6TPi0ejVQrwoZSOX9k6UIcxcZlWGXHUwMDFhZrRQajRtLyAl0lpcdTAwMWGuXHUwMDE55lRzbiZcdTAwMDQrhz68XHUwMDBlXHUwMDEw7ClOP5lodadxflx1MDAwNvJcdTAwMDXN0TFJ5Fx1MDAwNHHXieClZcddXFw/slx1MDAwMEGYMEJJw5RmLJOj7Xpn7Vx1MDAwNFx1MDAwZWFcdTAwMTIjTbDhXFwyJoimMpPGTV9cclx1MDAxMVxcK1xml8jOtjJ0t5opJb9mLyRcdTAwMDK+tuwpQd/38+tcdTAwMTk0r9dzbKJuJzZzwGWX6nebzlx1MDAxNVx1MDAxOERcdTAwMTEmKeZSgJSjed9cdTAwMGLOJy/nh43zjKV09MOzWzCsjChCmGCl4aVcbknmhtjpVVx1MDAwNqe7XHUwMDA3bqvSOKqel/1cdTAwMWHFXHUwMDFi61x1MDAwNVx1MDAxME+AuDh8OdJcdTAwMDLAoFx1MDAxNFOjXGah4/hqhGFcdTAwMWSoxFx1MDAwMpBRWj9cdTAwMWO+xCBDODVcXGqBQZBpfKlGQlx0hTU2RmEpmZ7GXHUwMDE3c0OtXHUwMDFhfjP4ur7vdeNcdTAwMWLhhftcdTAwMTTBK7li5Gvs78nxK+dQXGYvejtcdTAwMDde69xcdTAwMDSV+JeXRfZ3Jrrk8dBlXHUwMDFjXHSARVx1MDAwMppEXHUwMDEzg8ctr5JAXHUwMDBio5JcdTAwMDHZXHUwMDE4kOJ3Qfdpy1x1MDAxMVTQaWxcdENcdTAwMWN0XHUwMDA3nFx1MDAxZOhcdTAwMGblWvNpblx0XHUwMDA1OSU3YHIxZYxyNcktXHUwMDAwXHUwMDBilvtbsrozsFU5XHUwMDFiM4Gt4kRcdTAwMWH4Oze2g+5cdTAwMWXpuoPN9ZbgZ69cdTAwMTmpXVbLtSXHVlx1MDAxMsSNXHUwMDExlFBcclx1MDAxNlx1MDAxNYtxalx1MDAwNThxooQ2XHUwMDE4XFwx0fKO1NYxXHUwMDE2XHUwMDBmRS1cdTAwMDSANtigmHxcdTAwMTfYSlWELVx1MDAwM3NLhNBsbm533uDt/dPN3v4gpju7XXZcdTAwMTJcdTAwMGZcdTAwMWG/LTm32iCwgYJDLKshvuTj3EJcdTAwMTiBOVx1MDAwNJZcdTAwMWNsMeNE3IlbQutcdTAwMTA1P1x1MDAxOLdKQKzOXHQ131xmt4l7mdxcdTAwMThcIlx1MDAxNEZcYlxcW88oclB/idmzzsn62/CiXHUwMDE19Fx1MDAwZvc3TpOeXGLeXHUwMDBivdzRLVx1MDAxN1x1MDAxNCmIXHIwY0bAs04kZ1xuI8CDXHUwMDE5XGJcdTAwMWQ0VzznfiehJa79c/voXHUwMDE2zDpEKIaBJJgqxm/glopJTjlIXHUwMDA1XGbrXHUwMDA1Yio1hORUf1x1MDAwNaaZVGGQXHUwMDFjeu/Talx1MDAwMFx1MDAxZVx1MDAxYq04XHUwMDFkz1x1MDAxZo691JTflOOo41x1MDAwNY6/Mjaz5ntnluZcdTAwMTXfbY1jnnhccsdcdTAwMWZNJ2E3m23AnVx1MDAxYy9wo+mVXHQj78ze5ajwrvCcbnVkUVDu3dSd2LWzdlxc30oniTCTo6OckzCqXHUwMDE1pGPzR0CXeu2UvD5cdTAwMWGcvCtv1JPGsLKvPLLcWkmZLYpcdTAwMTBuuMBgwlxyXHUwMDFlzzmpxogxQVx1MDAxNbf+RIviksldtZJcdTAwMTKMXGZT2cvNlDGXLVxcKSPF0qQ2YoGp5ZU2mjyl96iNWfTyWVx1MDAxYv9S6lx1MDAwZZN2XHUwMDE4lLzAXCKPusPH1ctZ95/U0Fx1MDAxYlx1MDAxNdTcUkHJ5OhIQVx1MDAwNbYhXHUwMDA1o/O7TYdcZumx13ldebllZCu52KItvrPkXG5KJVx1MDAwMlx1MDAxZsVcdTAwMDSXRFKFc4FtXG5cbjZIQZpcdTAwMDYpNzdE6clcdTAwMTg0U1DaMi7ndylcblx0JOlccvpJclx1MDAxMF8rKCNcdTAwMTCFa/pcdTAwMWSp56eP//70xz9cdTAwMTf59+N//lx1MDAxMXz6418lr9NccqOklLS9uDTzXHUwMDAzXHUwMDA3X53RXG6jktXrXHUwMDEyvP4z9yeCf37xhTPsp1x1MDAxYnlB8lPw81x1MDAxY/f4+L9Fr81/XHUwMDFm11j+oOHPQsNcXK6LiJm+a3ZnjnA5OTzyYJA9U1tcdTAwMWKe24GpzfiClVtcdTAwMGX1anHjpFLeXHUwMDFjen7052jNXHTEId9cdTAwMTKUgF9cdTAwMThrV1x1MDAwZdP0ykBgr4WEIFx1MDAxM1x1MDAxNlx1MDAwNcs71SxcdTAwMWWhN6chMIHogyy8uUHyKD9Yby5f0J/qzVx0SNgxJ/NT3H7/+vByUD1+e+iL9XpMnMBcdTAwMWK2lz1cZlOIci6UwMZcdTAwMDae48VcdTAwMGJu0yRcdTAwMDW8QDjKJeeYPVx1MDAxY7730puDlFx1MDAwZkIkyG+/XHUwMDE5fGdVi1x1MDAxNS6C1+a98FLN/H3lkzZda1x1MDAxZZQjUj1uXHUwMDFlXHUwMDFjNdpq66R6seTVYsjxXHJYPKZcdTAwMDVcdTAwMDXDy+SE7dVcdTAwMWFcdTAwMDG6WsExmuW7zsvXnKPEdpRccv4+wNW0cFOPzfkgIzTztzmq+28q4dbh+erQK7d5r856tfLakoMrXHUwMDE50jaxXHUwMDA150JcdTAwMTlcdTAwMTZ40uoqXHUwMDA040yJtHt3p/1cdTAwMTBcdTAwMGbcnlx1MDAwM72TWkqyyIrVI3Kriquq1LZ7zNdY3Jc7nlx1MDAxYuNcdTAwMWVf9VuDau3dpnpVq95qJ88jgmtcYjhpKYhSVLHc1pDP2Fx1MDAxMiWxpFx1MDAxMGOSO8Zcblx1MDAwZtye00pcdI5cdTAwMDVZeFf53rAtLDTqwiCBMNugs3ZobmYvutH+5j7ZXHUwMDEwu1x1MDAxYvuy2Ze7ZH/TXe5cYpdcdTAwMGKBIOfBXG645Fx1MDAxOPLSySiBXCJbZSRcdTAwMTAvSVx1MDAwNS+keFx1MDAwZs9CXHUwMDFhdFx1MDAwNljHkK0tvEH3UDXH77NBR1Vx/Z/BmlOt8fyJ53FP7jjbtdO1zdW9gyZdq78/7peXWy0h3kVUUS5cdTAwMTUziimWlVwi0j2hhlwiSPFsRFxm5Fx1MDAxOVpcXP5/zP6cLVx0gFx1MDAwMqtcdTAwMWb9ueyYb7Q/XHUwMDA3IXqhfnJqgcFfUVx1MDAxOPLXvM6GqO329ereK1V/XelttypLrp9UI1xi8Vx1MDAxOIUn5ZBCT2zFolx1MDAxNFx1MDAxMckoXHUwMDEznCqueXGs96jtOaGxXmhQl2on+5otV3fTzlx1MDAxZlxymVx1MDAxOWcsVUPmR3vuXHUwMDA3XHKP2Z6jhWmfpmCoXHUwMDE4IfOX2EhvfbuqlcvLb99eXjr97kbz6HLJ3Vx1MDAxN+OIQV5cdTAwMDc+Styw/1x1MDAwYuJNJLFcdTAwMDT/JpWcVVx1MDAxYXYxI4zMdF9PW62GaZhcdTAwMWJKXHUwMDE1XHUwMDE0XHQsXHUwMDA1xpRzwvGNXowypLUxIIfdlkem8z/wK5xA1irvIVx1MDAwMfyMUFx1MDAwNlx1MDAxMbtcdTAwMWX5UOzsRudkZ4/AONi+PN9cdTAwMWVe+q3tpNojvai25Veyus5cdTAwMTitTlx1MDAxNIVcdTAwMTcro5lcdTAwMGbX381ypZLl+6VcdTAwMGbZXHUwMDA2pKSwIM1cdTAwMTTmkI3kXHUwMDA0+ZK2bPT97aNcck81XHUwMDBl+/XtNVapbe3t9e5VW5phYm9/j+pcdTAwMDKJXHUwMDE4YkZAslx1MDAwNeGTytec7flcdTAwMWFzZCRcdTAwMTd2+5PUbEa0t3h1XHUwMDExttZjf1liQeryaFx1MDAwNb8rhbpcdTAwMDFmZoo3Zlx1MDAxMG53vOr5XHUwMDBifrM1fFx1MDAwMaZffVx1MDAxMWWGXHUwMDExNlxubD9k6oTh8X2Fmk7sx79LYaFcdTAwMTBlrjRcdTAwMDKGpaKQjlxiIFlOo6xcdTAwMDRcYmJ/aVBcdTAwMThObJljXG5larRS1NxH6W9cdTAwMWFlelx1MDAxN5RT26xulebEiVx1MDAxMyXrXtD0grPJU9ygmc3kRL7+T1x1MDAwNLbmXGJG0pSp0bfyr2LEIVFnRHNJMDNgMXjusDOna99cdTAwMTSCjI1rMFx1MDAxOFQoa1CmlsV34qRcdTAwMWN2Op61ub+EXHUwMDEwb06KnT7SmlXHtutMvVx1MDAwNnio/Nyk3nbtXHUwMDE1x1x1MDAxZG32XSljO/1h9P2vz248epVyg6RUXHUwMDAwN4RccpCW6/zpq1xuKWNgkCtpofzi1YoxvrrcJMHZXHUwMDA1n+T/vZ1LxoVcdTAwMDVcdTAwMTj7aNpQOn9cdTAwMDB7vMferVV3XHUwMDFijvP2/M3uprOxeeRcdTAwMWQtd1x1MDAwMKvA1UlcYl+lxvC4dLw8XG4mXHUwMDFlaSo45pxSlf8ls6VzyFx1MDAwNixcdTAwMTiwI+6hZHrP/lhqXHUwMDEwLVx1MDAxNyfM64+fXFwrzIrT7Vx1MDAxZSZwyZFo8Ghe87qGk11mZeC5XHUwMDE36zeuu/3YmDiV32Lops/54cmH/1x1MDAwM7lI91xmIn0= terminal$ python inline.py\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 import this                              \u2502\u2502 for n in range(10):                      \u2502\u2502     print(n)                             \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256fterminal$ python inline.py\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 import this                              \u2502\u2502 for n in range(10):                      \u2502\u2502     print(n)                             \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>There is an additional consideration that comes in to play when the output has less lines than the previous frame. If we were to write a shorter frame, it wouldn't fully overwrite the previous frame. We would be left with a few lines of a previous frame that wouldn't update.</p> <p>The solution to this problem is to write an escape code that clears lines from the cursor downwards before we write a smaller frame. You can see this in action in the above video. The inline app can grow or shrink in size, and still be anchored to the bottom of the terminal.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#cursor-input","title":"Cursor input","text":"<p>The cursor tells the terminal where any text will be written by the app, but it also assumes this will be where the user enters text. If you enter CJK (Chinese Japanese Korean) text in to the terminal, you will typically see a floating control that points where new text will be written. If you are on a Mac, the emoji entry dialog (Ctrl+Cmd+Space) will also point at the current cursor position. To make this work in a sane way, we need to move the terminal's cursor to where any new text will appear.</p> <p>The following diagram shows the cursor moving to the point where new text is displayed.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2a627bRlx1MDAxNoD/5ylcdTAwMDRlf7RAzMzMmWuAxcJ27Nhx41xc3NSut0VAkyOJNUWyJGVbKVxmXHUwMDE0fYbmMbq7z5Qn2TO0I0qUZKuOb73Qhi3O9fDMd+acM9RPXHUwMDBmWq12Ocxs+0mrbU9cdTAwMDI/jsLcP24/cuVHNi+iNMEqVt1cdTAwMTfpIFx1MDAwZqqWvbLMiiePXHUwMDFm9/380JZZ7Fx1MDAwN9Y7ioqBXHUwMDFmXHUwMDE35SCMUi9I+4+j0vaLf7m/237f/jNL+2GZe/UkSzaMyjQ/m8vGtm+TssDR/433rdZP1d8x6XJcdTAwMWKUftKNbdWhqqpcdTAwMDWkjJlm8XaaVNJSobk2Wkkxalx1MDAxMVx1MDAxNU9xwtKGWN1BoW1d44rar9+Q7GiLraytL29mS/L5yTc/RLv1vJ0ojnfKYVxcyVx1MDAxNeRpUSz1/DLo1S2KMk9cdTAwMGbtblx1MDAxNJa9T+pcdTAwMWIrXHUwMDFm9S1SVEXdK09cdTAwMDfdXmJcdTAwMGKnXHUwMDA1OipNMz+IyqErI2RUeqaKJ6265Fx1MDAwNO+48oBcdTAwMTFGqVx1MDAwMEo0UC5H1WdcdTAwMDNIT3AlJZdMXHRcdTAwMDGsKdlqXHUwMDFh44qgZFx1MDAwZkl11bJcdTAwMWT4wWFcdTAwMTdcdTAwMDVMwlGbMveTXCLzc1xct7rd8fkzXHUwMDBiXHUwMDA2XHUwMDFlXGIjlDSgNIBcdTAwMWG16Nmo2yuxXHRI4mlKXGbnXHUwMDEyQFDNamFcdTAwMGJbrY0mRoBSXHUwMDEyRlx1MDAxNU6EbDOsOPm+XpBcdTAwMWNcdNt0PZJBXHUwMDFjj+szXHTP9TlRceAq1saQq4dcdTAwMWFkoX9cdTAwMDZcdTAwMDZVXHUwMDE0JJOaaSlquOIoOWxcdTAwMGVcdTAwMTenwWHNUlV6+uhcblx1MDAxNFx1MDAxYkPmQqy0MIpcdTAwMThtXHUwMDE2hvjHr7rrq2+Wj9f2uqTc3szWNlx1MDAwM39jXHUwMDBlxFxyXHUwMDEw71xmX+NR4Fx1MDAwMjjnhCjJTYNe5UmpXHUwMDA1Z6CMJOPV104vNZ6hnFx1MDAxOY7zXHUwMDExZeg0vUx7Qlx0RZBRXFxcdTAwMTgpQTfpXHUwMDE1XHUwMDFjgKEhij9ccr02jqOsmMmuXHUwMDE2MI9dzXEtJfDF0e2+j168XHUwMDEw2TqYcqhXzP7zb/rv315cdTAwMDVdemvoXG7taW64UVpqQyVcdTAwMTI8yS6VXHUwMDFlXHUwMDAzMMo4KnBTa0r2u9h92PFcdTAwMDVcdTAwMTNsmltcblx1MDAxZSeMXHQj0Vx1MDAwYjCuNZ9cdTAwMDaXMk+gXHUwMDA3MLjlXHUwMDEyXHUwMDE0iXHVXHUwMDA01/UlnCui/lxu5Jqxx2ySXHUwMDBiwJkyv4Pc7bWXXHUwMDFi5bF+2SGr79ZcdTAwMGZiXHUwMDE28/f7nftNrlx1MDAxNp7SXHUwMDA0d13BiFZKq1x1MDAwNrjCI1x1MDAxNCFcdTAwMTGMaSXImJlfXHLcXHUwMDAzQsRNgUu5llxcMKn+XHUwMDEyWy7qalx1MDAxZbhC4V4jcVFcdTAwMTdcdTAwMDZ36+nhXHUwMDBifTLs7m1nvb2NV1svI1x1MDAwMUf3XHUwMDFiXFyK0GhcZlx1MDAwM1x1MDAxNG5Uwlx1MDAwMLrpXHUwMDA2udzjUtAq1EVi9GdcdTAwMDW7XHUwMDBmKTvQWt5cdTAwMTi5Qlx1MDAxYuCamj9cdTAwMGa5pT0pZ2HL5NxIgUpCccVAwcLc/rD79sSHr0Gvvn6z+3SfLNFnavN+R7lMSc9grFx1MDAwZkJcdTAwMDKT+LyNUIFg7Ek0brycUMVByrncUut+rlx1MDAxZeYqgVx0mDGYK1x1MDAwMmFcbvhcZnSZmEJVXHUwMDAyZcDUWFxi81x1MDAwN0C1lipNyp3ova3inInSdb9cdTAwMWbFw4llrVx1MDAxOK5YzvtR4sftiZrlOOo6otux7UyiXkaBXHUwMDFmj6rLNKtrXHUwMDAznMmPXHUwMDEym09rJs2jrpvl67mz4nPajdGu4o0tzoFfWFfryvWV7Fx1MDAxMoRolo7sXHUwMDEyWUVcdTAwMWUx3VnYLjl59tan20d+9JzRaOdN9mpJsfttl5J66Cw4hlx1MDAwZlxcYOJcdTAwMDeT7lx1MDAwNFxcSmhcdTAwMDTarZIuir85q2SUeFx1MDAwNsZimNpcdTAwMThrXHUwMDAz/WSMXG4loZzDXHUwMDFk+1xyReg4pNdojLUr+GSM/2hlw7KXJq0occR72fB2zfKi+ZtcdTAwMDY60z7N1eyTz81ThDuA0Fx1MDAxNOo1uMw8i63lYfx8XHUwMDA11nskXGJ3XHUwMDBls414S2T32zxcdTAwMDXxJCa9mF9cdTAwMGJcdTAwMDBkrlx1MDAxZaXChFx1MDAxYlx1MDAwZkP/KrdmnEvdkKs2T9YxlvPPOVx1MDAxYlx1MDAxMk6QWVFeLfDIPCWG4VxmQ9C7Nk82juiNmufHXHUwMDBmv3389ee7/P3wn++Sj7/+0or6WZqXrbJcdTAwMTdcdTAwMTWtXHUwMDBiL2x81qOT5i1n1y1cdTAwMDSga7+g5Msnl/RwV5ZHSflF8uVcdTAwMDJzfPjfXevmv7e7Wf5Nw1x1MDAxZoWGhVxcXHUwMDE3XHUwMDE1XHUwMDE3+q5cdTAwMGJfb1x1MDAwMJ3rwDDrk1x1MDAxMjd1tXiA2Vx1MDAwYsPO9ru9XHUwMDFmXHUwMDA3sYSlwVx0W9/v7r+731x1MDAxZYxhXGJcdIxi2qdcdTAwMThRXHUwMDA006hcdFx1MDAxN8ZcdTAwMTnxmCGcXGKXi4HiXHLBalx1MDAxN2axL9BLTto6gVx0zIzzXG7mXHRcIlx1MDAwNSHoJSknMz1cdTAwMTlcdTAwMDNPa1xmdkFSYJrOyFx1MDAwMYlcdTAwMDDsj20+3699gqjGXGLOS07nu7tRn7r3iIxju9594dM1sqo3l5dcdTAwMDa7+1n323ykiFx0Xv08T4/bo5rT80/343Ugp3PfaVx1MDAwM/IhheKLXHUwMDA3fGHk2+Dbbnm4WiztvVx1MDAxYa7oZ6+D19dqLmFauumvM+IznsRcXEtzQrTShky+zMbVQGvSXFxcdTAwMTJpwL1qvsfmXCJcdTAwMTU+giHmXHUwMDFhjkyuZC63XHUwMDA29JlBzYDZSD5cdTAwMGZmyo3WinJYfPO/2MTvYPNXl1x1MDAxZS5cYkxP8Fx1MDAxMSWbtfWDwuyFUFx1MDAwNVx1MDAwMIg7tvqcw4X5LFx1MDAwYuqhsinRWktFZ1x1MDAxZVVjloXJXHUwMDAyo0BcYroppae+k0E1+ih5Uyyz22V5TM1+Xq5ESVx1MDAxOCXdZlx1MDAxN5uEdc2YyOffWdpcXCBcdTAwMWOpsqZg4OQnuFx1MDAwNFxmd1x01LJcdTAwMTRcdTAwMTRcdTAwMTVdXHUwMDFmqjlV+pnTgoerQ1D51X5CzbSFx35Rrqb9fuT23FcpRpxNqasnWnbm2LP+1CrgM43XNe02cyNOOtr6U6tGu7pcdTAwMTl9/v7RzNZKeSCldF9cdTAwMDKQXHUwMDA0o5/xzlxcee49s+S0qmLissHmM+yuKXrr4Vx1MDAxZYz/d46+mqDtZ9lOiVx1MDAxNI2WXHUwMDE2aY7C86S3Vln7KLLHKzNtzV0uhKhcdTAwMTbHbT22Qvv0wen/XHUwMDAxc82RiyJ9 terminal$ python inline.py\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 import this                              \u2502\u2502 for n in range(10):                      \u2502\u2502     print(n)                             \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>This only really impacts text entry (such as the Input and TextArea widgets).</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#mouse-control","title":"Mouse control","text":"<p>Inline apps in Textual support mouse input, which works the same as fullscreen apps.</p> <p>To use the mouse in the terminal you send an escape code which tells the terminal to write encoded mouse coordinates to standard input. The mouse coordinates can then be parsed in much the same was as reading keys.</p> <p>In inline mode this works in a similar way, with an added complication that the mouse origin is at the top left of the terminal. In other words if you move the mouse to the top left of the terminal you get coordinate (0, 0), but the app expects (0, 0) to be where it was displayed.</p> <p>In order for the app to know where the mouse is relative to it's origin, we need to ask the terminal where the cursor is. We do this with an escape code, which tells the terminal to write the current cursor coordinate to standard input. We can then subtract that coordinate from the physical mouse coordinates, so we can send the app mouse events relative to its on-screen origin.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#tldr","title":"tl;dr","text":"<p>Escapes codes.</p>"},{"location":"blog/2024/04/20/behind-the-curtain-of-inline-terminal-applications/#found-this-interesting","title":"Found this interesting?","text":"<p>If you are interested in Textual, join our Discord server.</p> <p>Or follow me for more terminal shenanigans.</p> <ul> <li>@willmcgugan</li> <li>mastodon.social/@willmcgugan</li> </ul>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/","title":"So you're looking for a wee bit of Textual help...","text":""},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#introduction","title":"Introduction","text":"<p>Quote</p> <p>Patience, Highlander. You have done well. But it'll take time. You are generations being born and dying. You are at one with all living things. Each man's thoughts and dreams are yours to know. You have power beyond imagination. Use it well, my friend. Don't lose your head.</p> <p>Juan S\u00e1nchez Villalobos Ram\u00edrez, Chief metallurgist to King Charles V of Spain</p> <p>As of the time of writing, I'm a couple or so days off having been with Textualize for 3 months. It's been fun, and educational, and every bit as engaging as I'd hoped, and more. One thing I hadn't quite prepared for though, but which I really love, is how so many other people are learning Textual along with me.</p> <p>Even in those three months the library has changed and expanded quite a lot, and it continues to do so. Meanwhile, more people are turning up and using the framework; you can see this online in social media, blogs and of course in the ever-growing list of projects on GitHub which depend on Textual.</p> <p>This inevitably means there's a lot of people getting to grips with a new tool, and one that is still a bit of a moving target. This in turn means lots of people are coming to us to get help.</p> <p>As I've watched this happen I've noticed a few patterns emerging. Some of these good or neutral, some... let's just say not really beneficial to those seeking the help, or to those trying to provide the help. So I wanted to write a little bit about the different ways you can get help with Textual and your Textual-based projects, and to also try and encourage people to take the most helpful and positive approach to getting that help.</p> <p>Now, before I go on, I want to make something very clear: I'm writing this as an individual. This is my own personal view, and my own advice from me to anyone who wishes to take it. It's not Textual (the project) or Textualize (the company) policy, rules or guidelines. This is just some ageing hacker's take on how best to go about asking for help, informed by years of asking for and also providing help in email, on Usenet, on forums, etc.</p> <p>Or, put another way: if what you read in here seems sensible to you, I figure we'll likely have already hit it off over on GitHub or in the Discord server. ;-)</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#where-to-go-for-help","title":"Where to go for help","text":"<p>At this point this is almost a bit of an FAQ itself, so I thought I'd address it here: where's the best place to ask for help about Textual, and what's the difference between GitHub Issues, Discussions and our Discord server?</p> <p>I'd suggest thinking of them like this:</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#discord","title":"Discord","text":"<p>You have a question, or need help with something, and perhaps you could do with a reply as soon as possible. But, and this is the really important part, it doesn't matter if you don't get a response. If you're in this situation then the Discord server is possibly a good place to start. If you're lucky someone will be hanging about who can help out.</p> <p>I can't speak for anyone else, but keep this in mind: when I look in on Discord I tend not to go scrolling back much to see if anything has been missed. If something catches my eye, I'll try and reply, but if it doesn't... well, it's mostly an instant chat thing so I don't dive too deeply back in time.</p> <p>Going from Discord to a GitHub issue</p> <p>As a slight aside here: sometimes people will pop up in Discord, ask a question about something that turns out looking like a bug, and that's the last we hear of it. Please, please, please, if this happens, the most helpful thing you can do is go raise an issue for us. It'll help us to keep track of problems, it'll help get your problem fixed, it'll mean everyone benefits.</p> <p>My own advice would be to treat Discord as an ephemeral resource. It happens in the moment but fades away pretty quickly. It's like knocking on a friend's door to see if they're in. If they're not in, you might leave them a note, which is sort of like going to...</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#github","title":"GitHub","text":"<p>On the other hand, if you have a question or need some help or something where you want to stand a good chance of the Textual developers (amongst others) seeing it and responding, I'd recommend that GitHub is the place to go. Dropping something into the discussions there, or leaving an issue, ensures it'll get seen. It won't get lost.</p> <p>As for which you should use -- a discussion or an issue -- I'd suggest this: if you need help with something, or you want to check your understanding of something, or you just want to be sure something is a problem before taking it further, a discussion might be the best thing. On the other hand, if you've got a clear bug or feature request on your hands, an issue makes a lot of sense.</p> <p>Don't worry if you're not sure which camp your question or whatever falls into though; go with what you think is right. There's no harm done either way (I may move an issue to a discussion first before replying, if it's really just a request for help -- but that's mostly so everyone can benefit from finding it in the right place later on down the line).</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#the-dos-and-donts-of-getting-help","title":"The dos and don'ts of getting help","text":"<p>Now on to the fun part. This is where I get a bit preachy. Ish. Kinda. A little bit. Again, please remember, this isn't a set of rules, this isn't a set of official guidelines, this is just a bunch of \"if you want my advice, and I know you didn't ask but you've read this far so you actually sort of did don't say I didn't warn you!\" waffle.</p> <p>This isn't going to be an exhaustive collection, far from it. But I feel these are some important highlights.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#do","title":"Do...","text":"<p>When looking for help, in any of the locations mentioned above, I'd totally encourage:</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#be-clear-and-detailed","title":"Be clear and detailed","text":"<p>Too much detail is almost always way better than not enough. \"My program didn't run\", often even with some of the code supplied, is so much harder to help than \"I ran this code I'm posting here, and I expected this particular outcome, and I expected it because I'd read this particular thing in the docs and had comprehended it to mean this, but instead the outcome was this exception here, and I'm a bit stuck -- can someone offer some pointers?\"</p> <p>The former approach means there often ends up having to be a back and forth which can last a long time, and which can sometimes be frustrating for the person asking. Manage frustration: be clear, tell us everything you can.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#say-what-resources-youve-used-already","title":"Say what resources you've used already","text":"<p>If you've read the potions of the documentation that relate to what you're trying to do, it's going to be really helpful if you say so. If you don't, it might be assumed you haven't and you may end up being pointed at them.</p> <p>So, please, if you've checked the documentation, looked in the FAQ, done a search of past issues or discussions or perhaps even done a search on the Discord server... please say so.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#be-polite","title":"Be polite","text":"<p>This one can go a long way when looking for help. Look, I get it, programming is bloody frustrating at times. We've all rage-quit some code at some point, I'm sure. It's likely going to be your moment of greatest frustration when you go looking for help. But if you turn up looking for help acting all grumpy and stuff it's not going to come over well. Folk are less likely to be motivated to lend a hand to someone who seems rather annoyed.</p> <p>If you throw in a please and thank-you here and there that makes it all the better.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#fully-consider-the-replies","title":"Fully consider the replies","text":"<p>You could find yourself getting a reply that you're sure won't help at all. That's fair. But be sure to fully consider it first. Perhaps you missed the obvious along the way and this is 100% the course correction you'd unknowingly come looking for in the first place. Sure, the person replying might have totally misunderstood what was being asked, or might be giving a wrong answer (it me! I've totally done that and will again!), but even then a reply along the lines of \"I'm not sure that's what I'm looking for, because...\" gets everyone to the solution faster than \"lol nah\".</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#entertain-what-might-seem-like-odd-questions","title":"Entertain what might seem like odd questions","text":"<p>Aye, I get it, being asked questions when you're looking for an answer can be a bit frustrating. But if you find yourself on the receiving end of a small series of questions about your question, keep this in mind: Textual is still rather new and still developing and it's possible that what you're trying to do isn't the correct way to do that thing. To the person looking to help you it may seem to them you have an XY problem.</p> <p>Entertaining those questions might just get you to the real solution to your problem.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#allow-for-language-differences","title":"Allow for language differences","text":"<p>You don't need me to tell you that a project such as Textual has a global audience. With that rather obvious fact comes the other fact that we don't all share the same first language. So, please, as much as possible, try and allow for that. If someone is trying to help you out, and they make it clear they're struggling to follow you, keep this in mind.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#acknowledge-the-answer","title":"Acknowledge the answer","text":"<p>I suppose this is a variation on \"be polite\" (really, a thanks can go a long way), but there's more to this than a friendly acknowledgement. If someone has gone to the trouble of offering some help, it's helpful to everyone who comes after you to acknowledge if it worked or not. That way a future help-seeker will know if the answer they're reading stands a chance of being the right one.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#accept-that-textual-is-zero-point-software-right-now","title":"Accept that Textual is zero-point software (right now)","text":"<p>Of course the aim is to have every release of Textual be stable and useful, but things will break. So, please, do keep in mind things like:</p> <ul> <li>Textual likely doesn't have your feature of choice just yet.</li> <li>We might accidentally break something (perhaps pinning Textual and testing   each release is a good plan here?).</li> <li>We might deliberately break something because we've decided to take a   particular feature or way of doing things in a better direction.</li> </ul> <p>Of course it can be a bit frustrating a times, but overall the aim is to have the best framework possible in the long run.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#dont","title":"Don't...","text":"<p>Okay, now for a bit of old-hacker finger-wagging. Here's a few things I'd personally discourage:</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#lack-patience","title":"Lack patience","text":"<p>Sure, it can be annoying. You're in your flow, you've got a neat idea for a thing you want to build, you're stuck on one particular thing and you really need help right now! Thing is, that's unlikely to happen. Badgering individuals, or a whole resource, to reply right now, or complaining that it's been <code>$TIME_PERIOD</code> since you asked and nobody has replied... that's just going to make people less likely to reply.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#unnecessarily-tag-individuals","title":"Unnecessarily tag individuals","text":"<p>This one often goes hand in hand with the \"lack patience\" thing: Be it asking on Discord, or in GitHub issues, discussions or even PRs, unnecessarily tagging individuals is a bit rude. Speaking for myself and only myself: I love helping folk with Textual. If I could help everyone all the time the moment they have a problem, I would. But it doesn't work like that. There's any number of reasons I might not be responding to a particular request, including but not limited to (here I'm talking personally because I don't want to speak for anyone else, but I'm sure I'm not alone here):</p> <ul> <li>I have a job. Sure, my job is (in part) Textual, but there's more to it   than that particular issue. I might be doing other stuff.</li> <li>I have my own projects to work on too. I like coding for fun as well (or   writing preaching old dude blog posts like this I guess, but you get the   idea).</li> <li>I actually have other interests outside of work hours so I might actually   be out doing a 10k in the local glen, or battling headcrabs in VR, or   something.</li> <li>Housework. :-/</li> </ul> <p>You get the idea though. So while I'm off having a well-rounded life, it's not good to get unnecessarily intrusive alerts to something that either a) doesn't actually directly involve me or b) could wait.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#seek-personal-support","title":"Seek personal support","text":"<p>Again, I'm going to speak totally for myself here, but I also feel the general case is polite for all: there's a lot of good support resources available already; sending DMs on Discord or Twitter or in the Fediverse, looking for direct personal support, isn't really the best way to get help. Using the public/collective resources is absolutely the best way to get that help. Why's it a bad idea to dive into DMs? Here's some reasons I think it's not a good idea:</p> <ul> <li>It's a variation on \"unnecessarily tagging individuals\".</li> <li>You're short-changing yourself when it comes to getting help. If you ask   somewhere more public you're asking a much bigger audience, who   collectively have more time, more knowledge and more experience than a   single individual.</li> <li>Following on from that, any answers can be (politely) fact-checked or   enhanced by that audience, resulting in a better chance of getting the   best help possible.</li> <li>The next seeker-of-help gets to miss out on your question and the answer.   If asked and answered in public, it's a record that can help someone else   in the future.</li> </ul>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#doubt-your-ability-or-skill-level","title":"Doubt your ability or skill level","text":"<p>I suppose this should really be phrased as a do rather than a don't, as here I want to encourage something positive. A few times I've helped people out who have been very apologetic about their questions being \"noob\" questions, or about how they're fairly new to Python, or programming in general. Really, please, don't feel the need to apologise and don't be ashamed of where you're at.</p> <p>If you've asked something that's obviously answered in the documentation, that's not a problem; you'll likely get pointed at the docs and it's what happens next that's the key bit. If the attitude is \"oh, cool, that's exactly what I needed to be reading, thanks!\" that's a really positive thing. The only time it's a problem is when there's a real reluctance to use the available resources. We've all seen that person somewhere at some point, right? ;-)</p> <p>Not knowing things is totally cool.</p>"},{"location":"blog/2023/01/09/so-youre-looking-for-a-wee-bit-of-textual-help/#conclusion","title":"Conclusion","text":"<p>So, that's my waffle over. As I said at the start: this is my own personal thoughts on how to get help with Textual, both as someone whose job it is to work on Textual and help people with Textual, and also as a FOSS advocate and supporter who can normally be found helping Textual users when he's not \"on the clock\" too.</p> <p>What I've written here isn't exhaustive. Neither is it novel. Plenty has been written on the general subject in the past, and I'm sure more will be written on the subject in the future. I do, however, feel that these are the most common things I notice. I'd say those dos and don'ts cover 90% of \"can I get some help?\" interactions; perhaps closer to 99%.</p> <p>Finally, and I think this is the most important thing to remember, the next time you are battling some issue while working with Textual: don't lose your head!</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/","title":"On dog food, the (original) Metaverse, and (not) being bored","text":""},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#introduction","title":"Introduction","text":"<p>Quote</p> <p>Cutler, armed with a schedule, was urging the team to \"eat its own dog food\". Part macho stunt and part common sense, the \"dog food diet\" was the cornerstone of Cutler\u2019s philosophy.</p> <p>G. Pascal Zachary \u2014 Show-Stopper!</p> <p>I can't remember exactly when it was -- it was likely late in 1994 or some time in 1995 -- when I first came across the concept of, or rather the name for the concept of, \"eating your own dog food\". The idea and the name played a huge part in the book Show-Stopper! by G. Pascal Zachary. The idea wasn't new to me of course; I'd been writing code for over a decade by then and plenty of times I'd built things and then used those things to do things, but it was fascinating to a mostly-self-taught 20-something me to be reading this (excellent -- go read it if you care about the history of your craft) book and to see the idea written down and named.</p> <p>While Textualize isn't (thankfully -- really, I do recommend reading the book) anything like working on the team building Windows NT, the idea of taking a little time out from working on Textual, and instead work with Textual, makes a lot of sense. It's far too easy to get focused on adding things and improving things and tweaking things while losing sight of the fact that people will want to build with your product.</p> <p>So you can imagine how pleased I was when Will announced that he wanted all of us to spend a couple or so weeks building something with Textual. I had, of course, already written one small application with the library, and had plans for another (in part it's how I ended up working here), but I'd yet to really dive in and try and build something more involved.</p> <p>Giving it some thought: I wasn't entirely sure what I wanted to build though. I do want to use Textual to build a brand new terminal-based Norton Guide reader (not my first, not by a long way) but I felt that was possibly a bit too niche, and actually could take a bit too long anyway. Maybe not, it remains to be seen.</p> <p>Eventually I decided on this approach: try and do a quick prototype of some daft idea each day or each couple of days, do that for a week or so, and then finally try and settle down on something less trivial. This approach should work well in that it'll help introduce me to more of Textual, help try out a few different parts of the library, and also hopefully discover some real pain-points with working with it and highlight a list of issues we should address -- as seen from the perspective of a developer working with the library.</p> <p>So, here I am, at the end of week one. What I want to try and do is briefly (yes yes, I know, this introduction is the antithesis of brief) talk about what I built and perhaps try and highlight some lessons learnt, highlight some patterns I think are useful, and generally do an end-of-week version of a TIL. TWIL?</p> <p>Yeah. I guess this is a TWIL.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#gridinfo","title":"gridinfo","text":"<p>I started the week by digging out a quick hack I'd done a couple of weeks earlier, with a view to cleaning it up. It started out as a fun attempt to do something with Rich Pixels while also making a terminal-based take on <code>slstats.el</code>. I'm actually pleased with the result and how quickly it came together.</p> <p>The point of the application itself is to show some general information about the current state of the Second Life grid (hello to any fellow residents of the original Metaverse!), and to also provide a simple region lookup screen that, using Rich Pixels, will display the object map (albeit in pretty low resolution -- but that's the fun of this!).</p> <p>So the opening screen looks like this:</p> <p></p> <p>and a lookup of a region looks like this:</p> <p></p> <p>Here's a wee video of the whole thing in action:</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#worth-a-highlight","title":"Worth a highlight","text":"<p>Here's a couple of things from the code that I think are worth a highlight, as things to consider when building Textual apps:</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#dont-use-the-default-screen","title":"Don't use the default screen","text":"<p>Use of the default <code>Screen</code> that's provided by the <code>App</code> is handy enough, but I feel any non-trivial application should really put as much code as possible in screens that relate to key \"work\". Here's the entirety of my application code:</p> <pre><code>class GridInfo( App[ None ] ):\n    \"\"\"TUI app for showing information about the Second Life grid.\"\"\"\n\n    CSS_PATH = \"gridinfo.css\"\n    \"\"\"The name of the CSS file for the app.\"\"\"\n\n    TITLE = \"Grid Information\"\n    \"\"\"str: The title of the application.\"\"\"\n\n    SCREENS = {\n        \"main\": Main,\n        \"region\": RegionInfo\n    }\n    \"\"\"The collection of application screens.\"\"\"\n\n    def on_mount( self ) -&gt; None:\n        \"\"\"Set up the application on startup.\"\"\"\n        self.push_screen( \"main\" )\n</code></pre> <p>You'll notice there's no work done in the app, other than to declare the screens, and to set the <code>main</code> screen running when the app is mounted.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#dont-work-hard-on_mount","title":"Don't work hard <code>on_mount</code>","text":"<p>My initial version of the application had it loading up the data from the Second Life and GridSurvey APIs in <code>Main.on_mount</code>. This obviously wasn't a great idea as it made the startup appear slow. That's when I realised just how handy <code>call_after_refresh</code> is. This meant I could show some placeholder information and then fire off the requests (3 of them: one to get the main grid information, one to get the grid concurrency data, and one to get the grid size data), keeping the application looking active and updating the display when the replies came in.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#pain-points","title":"Pain points","text":"<p>While building this app I think there was only really the one pain-point, and I suspect it's mostly more on me than on Textual itself: getting a good layout and playing whack-a-mole with CSS. I suspect this is going to be down to getting more and more familiar with CSS and the terminal (which is different from laying things out for the web), while also practising with various layout schemes -- which is where the revamped <code>Placeholder</code> class is going to be really useful.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#unbored","title":"unbored","text":"<p>The next application was initially going to be a very quick hack, but actually turned into a less-trivial build than I'd initially envisaged; not in a negative way though. The more I played with it the more I explored and I feel that this ended up being my first really good exploration of some useful (personal -- your kilometerage may vary) patterns and approaches when working with Textual.</p> <p>The application itself is a terminal client for the Bored-API. I had initially intended to roll my own code for working with the API, but I noticed that someone had done a nice library for it and it seemed silly to not build on that. Not needing to faff with that, I could concentrate on the application itself.</p> <p>At first I was just going to let the user click away at a button that showed a random activity, but this quickly morphed into a \"why don't I make this into a sort of TODO list builder app, where you can add things to do when you are bored, and delete things you don't care for or have done\" approach.</p> <p>Here's a view of the main screen:</p> <p></p> <p>and here's a view of the filter pop-over:</p> <p></p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#worth-a-highlight_1","title":"Worth a highlight","text":""},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#dont-put-all-your-bindings-in-one-place","title":"Don't put all your <code>BINDINGS</code> in one place","text":"<p>This came about from me overloading the use of the <code>escape</code> key. I wanted it to work more or less like this:</p> <ul> <li>If you're inside an activity, move focus up to the activity type selection   buttons.</li> <li>If the filter pop-over is visible, close that.</li> <li>Otherwise exit the application.</li> </ul> <p>It was easy enough to do, and I had an action in the <code>Main</code> screen that <code>escape</code> was bound to (again, in the <code>Main</code> screen) that did all this logic with some <code>if</code>/<code>elif</code> work but it didn't feel elegant. Moreover, it meant that the <code>Footer</code> always displayed the same description for the key.</p> <p>That's when I realised that it made way more sense to have a <code>Binding</code> for <code>escape</code> in every widget that was the actual context for escape's use. So I went from one top-level binding to...</p> <pre><code>...\n\nclass Activity( Widget ):\n    \"\"\"A widget that holds and displays a suggested activity.\"\"\"\n\n    BINDINGS = [\n        ...\n        Binding( \"escape\", \"deselect\", \"Switch to Types\" )\n    ]\n\n...\n\nclass Filters( Vertical ):\n    \"\"\"Filtering sidebar.\"\"\"\n\n    BINDINGS = [\n        Binding( \"escape\", \"close\", \"Close Filters\" )\n    ]\n\n...\n\nclass Main( Screen ):\n    \"\"\"The main application screen.\"\"\"\n\n    BINDINGS = [\n        Binding( \"escape\", \"quit\", \"Close\" )\n    ]\n    \"\"\"The bindings for the main screen.\"\"\"\n</code></pre> <p>This was so much cleaner and I got better <code>Footer</code> descriptions too. I'm going to be leaning hard on this approach from now on.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#messages-are-awesome","title":"Messages are awesome","text":"<p>Until I wrote this application I hadn't really had a need to define or use my own <code>Message</code>s. During work on this I realised how handy they really are. In the code I have an <code>Activity</code> widget which takes care of the job of moving itself amongst its siblings if the user asks to move an activity up or down. When this happens I also want the <code>Main</code> screen to save the activities to the filesystem as things have changed.</p> <p>Thing is: I don't want the screen to know what an <code>Activity</code> is capable of and I don't want an <code>Activity</code> to know what the screen is capable of; especially the latter as I really don't want a child of a screen to know what the screen can do (in this case \"save stuff\").</p> <p>This is where messages come in. Using a message I could just set things up so that the <code>Activity</code> could shout out \"HEY I JUST DID A THING THAT CHANGES ME\" and not care who is listening and not care what they do with that information.</p> <p>So, thanks to this bit of code in my <code>Activity</code> widget...</p> <pre><code>    class Moved( Message ):\n        \"\"\"A message to indicate that an activity has moved.\"\"\"\n\n    def action_move_up( self ) -&gt; None:\n        \"\"\"Move this activity up one place in the list.\"\"\"\n        if self.parent is not None and not self.is_first:\n            parent = cast( Widget, self.parent )\n            parent.move_child(\n                self, before=parent.children.index( self ) - 1\n            )\n            self.emit_no_wait( self.Moved( self ) )\n            self.scroll_visible( top=True )\n</code></pre> <p>...the <code>Main</code> screen can do this:</p> <pre><code>    def on_activity_moved( self, _: Activity.Moved ) -&gt; None:\n        \"\"\"React to an activity being moved.\"\"\"\n        self.save_activity_list()\n</code></pre> <p>Warning</p> <p>The code above used <code>emit_no_wait</code>. Since this blog post was first published that method has been removed from Textual. You should use <code>post_message_no_wait</code> or <code>post_message</code> instead now.</p>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#pain-points_1","title":"Pain points","text":"<p>On top of the issues of getting to know terminal-based-CSS that I mentioned earlier:</p> <ul> <li>Textual currently lacks any sort of selection list or radio-set widget.   This meant that I couldn't quite do the activity type picking how I would   have wanted. Of course I could have rolled my own widgets for this, but I   think I'd sooner wait until such things are in Textual   itself.</li> <li>Similar to that, I could have used some validating <code>Input</code> widgets. They   too are on the roadmap but I managed to cobble together fairly good   working versions for my purposes. In doing so though I did further   highlight that the reactive attribute   facility   needs a wee bit more attention as I ran into some   (already-known) bugs.   Thankfully in my case it was a very easy   workaround.</li> <li>Scrolling in general seems a wee bit off when it comes to widgets that are   more than one line tall. While there's nothing really obvious I can point   my finger at, I'm finding that scrolling containers sometimes get confused   about what should be in view. This becomes very obvious when forcing   things to scroll from code. I feel this deserves a dedicated test   application to explore this more.</li> </ul>"},{"location":"blog/2022/11/26/on-dog-food-the-original-metaverse-and-not-being-bored/#conclusion","title":"Conclusion","text":"<p>The first week of \"dogfooding\" has been fun and I'm more convinced than ever that it's an excellent exercise for Textualize to engage in. I didn't quite manage my plan of \"one silly trivial prototype per day\", which means I've ended up with two (well technically one and a half I guess given that <code>gridinfo</code> already existed as a prototype) applications rather than four. I'm okay with that. I got a lot of utility out of this.</p> <p>Now to look at the list of ideas I have going and think about what I'll kick next week off with...</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/","title":"What I learned from my first non-trivial PR","text":"PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0 ligula.\u00a0Nullam\u00a0imperdiet\u00a0sem\u00a0tellus, sed\u00a0vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0\u2586\u2586consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0\u2586\u2586 Sed\u00a0lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 lacinia,\u00a0sapien\u00a0sapien\u00a0congue\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis <p>It's 8:59 am and, by my Portuguese standards, it is freezing cold outside: 5 or 6 degrees Celsius. It is my second day at Textualize and I just got into the office. I undress my many layers of clothing to protect me from the Scottish cold and I sit down in my improvised corner of the Textualize office. As I sit down, I turn myself in my chair to face my boss and colleagues to ask \u201cSo, what should I do today?\u201d. I was not expecting Will's answer, but the challenge excited me:</p> <p>\u201cI thought I'll just throw you in the deep end and have you write some code.\u201d</p> <p>What happened next was that I spent two days working on PR #1229 to add a new widget to the Textual code base. At the time of writing, the pull request has not been merged yet. Well, to be honest with you, it hasn't even been reviewed by anyone... But that won't stop me from blogging about some of the things I learned while creating this PR.</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#the-placeholder-widget","title":"The placeholder widget","text":"<p>This PR adds a widget called <code>Placeholder</code> to Textual. As per the documentation, this widget \u201cis meant to have no complex functionality. Use the placeholder widget when studying the layout of your app before having to develop your custom widgets.\u201d</p> <p>The point of the placeholder widget is that you can focus on building the layout of your app without having to have all of your (custom) widgets ready. The placeholder widget also displays a couple of useful pieces of information to help you work out the layout of your app, namely the ID of the widget itself (or a custom label, if you provide one) and the width and height of the widget.</p> <p>As an example of usage of the placeholder widget, you can refer to the screenshot at the top of this blog post, which I included below so you don't have to scroll up:</p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0 ligula.\u00a0Nullam\u00a0imperdiet\u00a0sem\u00a0tellus, sed\u00a0vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0\u2586\u2586consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0\u2586\u2586 Sed\u00a0lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 lacinia,\u00a0sapien\u00a0sapien\u00a0congue\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis <p>The top left and top right widgets have custom labels. Immediately under the top right placeholder, you can see some placeholders identified as <code>#p3</code>, <code>#p4</code>, and <code>#p5</code>. Those are the IDs of the respective placeholders. Then, rows 2 and 3 contain some placeholders that show their respective size and some placeholders that just contain some text.</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#bootstrapping-the-code-for-the-widget","title":"Bootstrapping the code for the widget","text":"<p>So, how does a code monkey start working on a non-trivial PR within 24 hours of joining a company? The answer is simple: just copy and paste code! But instead of copying and pasting from Stack Overflow, I decided to copy and paste from the internal code base.</p> <p>My task was to create a new widget, so I thought it would be a good idea to take a look at the implementation of other Textual widgets. For some reason I cannot seem to recall, I decided to take a look at the implementation of the button widget that you can find in _button.py. By looking at how the button widget is implemented, I could immediately learn a few useful things about what I needed to do and some other things about how Textual works.</p> <p>For example, a widget can have a class attribute called <code>DEFAULT_CSS</code> that specifies the default CSS for that widget. I learned this just from staring at the code for the button widget.</p> <p>Studying the code base will also reveal the standards that are in place. For example, I learned that for a widget with variants (like the button with its \u201csuccess\u201d and \u201cerror\u201d variants), the widget gets a CSS class with the name of the variant prefixed by a dash. You can learn this by looking at the method <code>Button.watch_variant</code>:</p> <pre><code>class Button(Static, can_focus=True):\n    # ...\n\n    def watch_variant(self, old_variant: str, variant: str):\n        self.remove_class(f\"-{old_variant}\")\n        self.add_class(f\"-{variant}\")\n</code></pre> <p>In short, looking at code and files that are related to the things you need to do is a great way to get information about things you didn't even know you needed.</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#handling-the-placeholder-variant","title":"Handling the placeholder variant","text":"<p>A button widget can have a different variant, which is mostly used by Textual to determine the CSS that should apply to the given button. For the placeholder widget, we want the variant to determine what information the placeholder shows. The original GitHub issue mentions 5 variants for the placeholder:</p> <ul> <li>a variant that just shows a label or the placeholder ID;</li> <li>a variant that shows the size and location of the placeholder;</li> <li>a variant that shows the state of the placeholder (does it have focus? is the mouse over it?);</li> <li>a variant that shows the CSS that is applied to the placeholder itself; and</li> <li>a variant that shows some text inside the placeholder.</li> </ul> <p>The variant can be assigned when the placeholder is first instantiated, for example, <code>Placeholder(\"css\")</code> would create a placeholder that shows its own CSS. However, we also want to have an <code>on_click</code> handler that cycles through all the possible variants. I was getting ready to reinvent the wheel when I remembered that the standard module <code>itertools</code> has a lovely tool that does exactly what I needed! Thus, all I needed to do was create a new <code>cycle</code> through the variants each time a placeholder is created and then grab the next variant whenever the placeholder is clicked:</p> <pre><code>class Placeholder(Static):\n    def __init__(\n        self,\n        variant: PlaceholderVariant = \"default\",\n        *,\n        label: str | None = None,\n        name: str | None = None,\n        id: str | None = None,\n        classes: str | None = None,\n    ) -&gt; None:\n        # ...\n\n        self.variant = self.validate_variant(variant)\n        # Set a cycle through the variants with the correct starting point.\n        self._variants_cycle = cycle(_VALID_PLACEHOLDER_VARIANTS_ORDERED)\n        while next(self._variants_cycle) != self.variant:\n            pass\n\n    def on_click(self) -&gt; None:\n        \"\"\"Click handler to cycle through the placeholder variants.\"\"\"\n        self.cycle_variant()\n\n    def cycle_variant(self) -&gt; None:\n        \"\"\"Get the next variant in the cycle.\"\"\"\n        self.variant = next(self._variants_cycle)\n</code></pre> <p>I am just happy that I had the insight to add this little <code>while</code> loop when a placeholder is instantiated:</p> <pre><code>from itertools import cycle\n# ...\nclass Placeholder(Static):\n    # ...\n    def __init__(...):\n        # ...\n        self._variants_cycle = cycle(_VALID_PLACEHOLDER_VARIANTS_ORDERED)\n        while next(self._variants_cycle) != self.variant:\n            pass\n</code></pre> <p>Can you see what would be wrong if this loop wasn't there?</p>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#updating-the-render-of-the-placeholder-on-variant-change","title":"Updating the render of the placeholder on variant change","text":"<p>If the variant of the placeholder is supposed to determine what information the placeholder shows, then that information must be updated every time the variant of the placeholder changes. Thankfully, Textual has reactive attributes and watcher methods, so all I needed to do was... Defer the problem to another method:</p> <pre><code>class Placeholder(Static):\n    # ...\n    variant = reactive(\"default\")\n    # ...\n    def watch_variant(\n        self, old_variant: PlaceholderVariant, variant: PlaceholderVariant\n    ) -&gt; None:\n        self.validate_variant(variant)\n        self.remove_class(f\"-{old_variant}\")\n        self.add_class(f\"-{variant}\")\n        self.call_variant_update()  # &lt;-- let this method do the heavy lifting!\n</code></pre> <p>Doing this properly required some thinking. Not that the current proposed solution is the best possible, but I did think of worse alternatives while I was thinking how to tackle this. I wasn't entirely sure how I would manage the variant-dependant rendering because I am not a fan of huge conditional statements that look like switch statements:</p> <pre><code>if variant == \"default\":\n    # render the default placeholder\nelif variant == \"size\":\n    # render the placeholder with its size\nelif variant == \"state\":\n    # render the state of the placeholder\nelif variant == \"css\":\n    # render the placeholder with its CSS rules\nelif variant == \"text\":\n    # render the placeholder with some text inside\n</code></pre> <p>However, I am a fan of using the built-in <code>getattr</code> and I thought of creating a rendering method for each different variant. Then, all I needed to do was make sure the variant is part of the name of the method so that I can programmatically determine the name of the method that I need to call. This means that the method <code>Placeholder.call_variant_update</code> is just this:</p> <pre><code>class Placeholder(Static):\n    # ...\n    def call_variant_update(self) -&gt; None:\n        \"\"\"Calls the appropriate method to update the render of the placeholder.\"\"\"\n        update_variant_method = getattr(self, f\"_update_{self.variant}_variant\")\n        update_variant_method()\n</code></pre> <p>If <code>self.variant</code> is, say, <code>\"size\"</code>, then <code>update_variant_method</code> refers to <code>_update_size_variant</code>:</p> <pre><code>class Placeholder(Static):\n    # ...\n    def _update_size_variant(self) -&gt; None:\n        \"\"\"Update the placeholder with the size of the placeholder.\"\"\"\n        width, height = self.size\n        self._placeholder_label.update(f\"[b]{width} x {height}[/b]\")\n</code></pre> <p>This variant <code>\"size\"</code> also interacts with resizing events, so we have to watch out for those:</p> <pre><code>class Placeholder(Static):\n    # ...\n    def on_resize(self, event: events.Resize) -&gt; None:\n        \"\"\"Update the placeholder \"size\" variant with the new placeholder size.\"\"\"\n        if self.variant == \"size\":\n            self._update_size_variant()\n</code></pre>"},{"location":"blog/2022/11/22/what-i-learned-from-my-first-non-trivial-pr/#deleting-code-is-a-hurtful-blessing","title":"Deleting code is a (hurtful) blessing","text":"<p>To conclude this blog post, let me muse about the fact that the original issue mentioned five placeholder variants and that my PR only includes two and a half.</p> <p>After careful consideration and after coming up with the <code>getattr</code> mechanism to update the display of the placeholder according to the active variant, I started showing the \u201cfinal\u201d product to Will and my other colleagues. Eventually, we ended up getting rid of the variant for CSS and the variant that shows the placeholder state. This means that I had to delete part of my code even before it saw the light of day.</p> <p>On the one hand, deleting those chunks of code made me a bit sad. After all, I had spent quite some time thinking about how to best implement that functionality! But then, it was time to write documentation and tests, and I verified that the best code is the code that you don't even write! The code you don't write is guaranteed to have zero bugs and it also does not need any documentation whatsoever!</p> <p>So, it was a shame that some lines of code I poured my heart and keyboard into did not get merged into the Textual code base. On the other hand, I am quite grateful that I won't have to fix the bugs that will certainly reveal themselves in a couple of weeks or months from now. Heck, the code hasn't been merged yet and just by writing this blog post I noticed a couple of tweaks that were missing!</p>"},{"location":"blog/2023/07/29/pull-requests-are-cake-or-puppies/","title":"Pull Requests are cake or puppies","text":"<p>Broadly speaking, there are two types of contributions you can make to an Open Source project.</p> <p>The first type is typically a bug fix, but could also be a documentation update, linting fix, or other change which doesn't impact core functionality. Such a contribution is like cake. It's a simple, delicious, gift to the project.</p> <p>The second type of contribution often comes in the form of a new feature. This contribution likely represents a greater investment of time and effort than a bug fix. It is still a gift to the project, but this contribution is not cake.</p> <p>A feature PR has far more in common with a puppy. The maintainer(s) may really like the feature but hesitate to merge all the same. They may even reject the contribution entirely. This is because a feature PR requires an ongoing burden to maintain. In the same way that a puppy needs food and walkies, a new feature will require updates and fixes long after the original contribution. Even if it is an amazing feature, the maintainer may not want to commit to that ongoing work.</p> <p></p> <p>The chances of a feature being merged can depend on the maturity of the project. At the beginning of a project, a maintainer may be delighted with a new feature contribution. After all, having others join you to build something is the joy of Open Source. And yet when a project gets more mature there may be a growing resistance to adding new features, and a greater risk that a feature PR is rejected or sits unappreciated in the PR queue.</p> <p>So how should a contributor avoid this? If there is any doubt, it's best to propose the feature to the maintainers before undertaking the work. In all likelihood they will be happy for your contribution, just be prepared for them to say \"thanks but no thanks\". Don't take it as a rejection of your gift: it's just that the maintainer can't commit to taking on a puppy.</p> <p>There are other ways to contribute code to a project that don't require the code to be merged in to the core. You could publish your change as a third party library. Take it from me: maintainers love it when their project spawns an ecosystem. You could also blog about how you solved your problem without an update to the core project. Having a resource that can be googled for, or a maintainer can direct people to, can be a huge help.</p> <p>What prompted me to think about this is that my two main projects, Rich and Textual, are at quite different stages in their lifetime. Rich is relatively mature, and I'm unlikely to accept a puppy. If you can achieve what you need without adding to the core library, I am probably going to decline a new feature. Textual is younger and still accepting puppies \u2014 in addition to stick insects, gerbils, capybaras and giraffes.</p> <p>Tip</p> <p>If you are maintainer, and you do have to close a feature PR, feel free to link to this post.</p> <p>Join us on the Discord Server if you want to discuss puppies and other creatures.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/","title":"Textual 0.11.0 adds a beautiful Markdown widget","text":"<p>We released Textual 0.10.0 25 days ago, which is a little longer than our usual release cycle. What have we been up to?</p> <p>The headline feature of this release is the enhanced Markdown support. Here's a screenshot of an example:</p> MarkdownApp \u258bHeader\u00a0level\u00a06\u00a0content. \u25bc\u00a0\u2160\u00a0Textual\u00a0Markdown\u00a0Browser\u00a0-\u00a0Demo\u258b \u251c\u2500\u2500\u00a0\u25bc\u00a0\u2161\u00a0Headers\u258b\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u25bc\u00a0\u2162\u00a0This\u00a0is\u00a0H3\u258b\u258e\u258b \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u25bc\u00a0\u2163\u00a0This\u00a0is\u00a0H4\u258b\u258eTypography\u258b \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u25bc\u00a0\u2164\u00a0This\u00a0is\u00a0H5\u258b\u258e\u258b \u2502\u00a0\u00a0\u00a0\u2514\u2500\u2500\u00a0\u2165\u00a0This\u00a0is\u00a0H6\u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u251c\u2500\u2500\u00a0\u25bc\u00a0\u2161\u00a0Typography\u258bThe\u00a0usual\u00a0Markdown\u00a0typography\u00a0is\u00a0supported.\u00a0The\u00a0exact\u00a0output\u00a0depends\u00a0on\u00a0 \u2502\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0\u2162\u00a0Emphasis\u258byour\u00a0terminal,\u00a0although\u00a0most\u00a0are\u00a0fairly\u00a0consistent.\u2581\u2581 \u2502\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0\u2162\u00a0Strong\u258b \u2502\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0\u2162\u00a0Strikethrough\u258bEmphasis \u2502\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0\u2162\u00a0Inline\u00a0code\u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u251c\u2500\u2500\u00a0\u2161\u00a0Fences\u258bEmphasis\u00a0is\u00a0rendered\u00a0with\u00a0*asterisks*,\u00a0and\u00a0looks\u00a0like\u00a0this; \u251c\u2500\u2500\u00a0\u2161\u00a0Quote\u258b \u2514\u2500\u2500\u00a0\u2161\u00a0Tables\u258bStrong \u258b\u2594\u2594\u2594\u2594\u2594\u2594 \u258bUse\u00a0two\u00a0asterisks\u00a0to\u00a0indicate\u00a0strong\u00a0which\u00a0renders\u00a0in\u00a0bold,\u00a0e.g.\u00a0 \u258b**strong**\u00a0render\u00a0strong. \u258b \u258bStrikethrough \u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258bTwo\u00a0tildes\u00a0indicates\u00a0strikethrough,\u00a0e.g.\u00a0~~cross\u00a0out~~\u00a0render\u00a0cross\u00a0out. \u258b\u2582\u2582 \u258bInline\u00a0code \u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258bInline\u00a0code\u00a0is\u00a0indicated\u00a0by\u00a0backticks.\u00a0e.g.\u00a0import\u00a0this. \u258b \u258b\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258b\u258e\u258b \u258b\u258eFences\u258b \u258b\u258e\u258b \u258b\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258bFenced\u00a0code\u00a0blocks\u00a0are\u00a0introduced\u00a0with\u00a0three\u00a0back-ticks\u00a0and\u00a0the\u00a0optional\u00a0 \u258bparser.\u00a0Here\u00a0we\u00a0are\u00a0rendering\u00a0the\u00a0code\u00a0in\u00a0a\u00a0sub-widget\u00a0with\u00a0syntax\u00a0 \u258bhighlighting\u00a0and\u00a0indent\u00a0guides. \u258b \u258bIn\u00a0the\u00a0future\u00a0I\u00a0think\u00a0we\u00a0could\u00a0add\u00a0controls\u00a0to\u00a0export\u00a0the\u00a0code,\u00a0copy\u00a0to\u00a0 \u258bthe\u00a0clipboard.\u00a0Heck,\u00a0even\u00a0run\u00a0it\u00a0and\u00a0show\u00a0the\u00a0output? \u258b \u258b \u258b@lru_cache(maxsize=1024) \u258bdefsplit(self,cut_x:int,cut_y:int)-&gt;tuple[Region,Region,Regi \u258b\u2502\u00a0\u00a0\u00a0\"\"\"Split\u00a0a\u00a0region\u00a0in\u00a0to\u00a04\u00a0from\u00a0given\u00a0x\u00a0and\u00a0y\u00a0offsets\u00a0(cuts). \u00a0T\u00a0\u00a0TOC\u00a0\u00a0B\u00a0\u00a0Back\u00a0\u00a0F\u00a0\u00a0Forward\u00a0 <p>Tip</p> <p>You can generate these SVG screenshots for your app with <code>textual run my_app.py --screenshot 5</code> which will export a screenshot after 5 seconds.</p> <p>There are actually 2 new widgets: Markdown for a simple Markdown document, and MarkdownViewer which adds browser-like navigation and a table of contents.</p> <p>Textual has had support for Markdown since day one by embedding a Rich Markdown object -- which still gives decent results! This new widget adds dynamic controls such as scrollable code fences and tables, in addition to working links.</p> <p>In future releases we plan on adding more Markdown extensions, and the ability to easily embed custom widgets within the document. I'm sure there are plenty of interesting applications that could be powered by dynamically generated Markdown documents.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#datatable-improvements","title":"DataTable improvements","text":"<p>There has been a lot of work on the DataTable API. We've added the ability to sort the data, which required that we introduce the concept of row and column keys. You can now reference rows / columns / cells by their coordinate or by row / column key.</p> <p>Additionally there are new update_cell and update_cell_at methods to update cells after the data has been populated. Future releases will have more methods to manipulate table data, which will make it a very general purpose (and powerful) widget.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#tree-control","title":"Tree control","text":"<p>The Tree widget has grown a few methods to programmatically expand, collapse and toggle tree nodes.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#breaking-changes","title":"Breaking changes","text":"<p>There are a few breaking changes in this release. These are mostly naming and import related, which should be easy to fix if you are affected. Here's a few notable examples:</p> <ul> <li><code>Checkbox</code> has been renamed to <code>Switch</code>. This is because we plan to introduce complimentary <code>Checkbox</code> and <code>RadioButton</code> widgets in a future release, but we loved the look of Switches too much to drop them.</li> <li>We've dropped the <code>emit</code> and <code>emit_no_wait</code> methods. These methods posted message to the parent widget, but we found that made it problematic to subclass widgets. In almost all situations you want to replace these with <code>self.post_message</code> (or <code>self.post_message_no_wait</code>).</li> </ul> <p>Be sure to check the CHANGELOG for the full details on potential breaking changes.</p>"},{"location":"blog/2023/02/15/textual-0110-adds-a-beautiful-markdown-widget/#join-us","title":"Join us!","text":"<p>We're having fun on our Discord server. Join us there to talk to Textualize developers and share ideas.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/","title":"Textual 0.12.0 adds syntactical sugar and batch updates","text":"<p>It's been just 9 days since the previous release, but we have a few interesting enhancements to the Textual API to talk about.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#better-compose","title":"Better compose","text":"<p>We've added a little syntactical sugar to Textual's <code>compose</code> methods, which aids both readability and editability (that might not be a word).</p> <p>First, let's look at the old way of building compose methods. This snippet is taken from the <code>textual colors</code> command.</p> <pre><code>for color_name in ColorSystem.COLOR_NAMES:\n\n    items: list[Widget] = [ColorLabel(f'\"{color_name}\"')]\n    for level in LEVELS:\n        color = f\"{color_name}-{level}\" if level else color_name\n        item = ColorItem(\n            ColorBar(f\"${color}\", classes=\"text label\"),\n            ColorBar(\"$text-muted\", classes=\"muted\"),\n            ColorBar(\"$text-disabled\", classes=\"disabled\"),\n            classes=color,\n        )\n        items.append(item)\n\n    yield ColorGroup(*items, id=f\"group-{color_name}\")\n</code></pre> <p>This code composes the following color swatches:</p> ColorsApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 primary \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b\u2581\u2581 secondary\u258e\"primary\"\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b background\u258e$primary-darken-3$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b primary-background\u258e$primary-darken-2$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b secondary-background\u258e$primary-darken-1$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b surface\u258e$primary$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b panel\u258e$primary-lighten-1$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b boost\u258e$primary-lighten-2$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b warning\u258e$primary-lighten-3$text-muted$text-disabled\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b error\u258e\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 success \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258b accent\u258e\"secondary\"\u258b \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258b \u258e\u258b \u00a0D\u00a0\u00a0Toggle\u00a0dark\u00a0mode\u00a0 <p>Tip</p> <p>You can see this by running <code>textual colors</code> from the command line.</p> <p>The old way was not all that bad, but it did make it hard to see the structure of your app at-a-glance, and editing compose methods always felt a little laborious.</p> <p>Here's the new syntax, which uses context managers to add children to containers:</p> <pre><code>for color_name in ColorSystem.COLOR_NAMES:\n    with ColorGroup(id=f\"group-{color_name}\"):\n        yield Label(f'\"{color_name}\"')\n        for level in LEVELS:\n            color = f\"{color_name}-{level}\" if level else color_name\n            with ColorItem(classes=color):\n                yield ColorBar(f\"${color}\", classes=\"text label\")\n                yield ColorBar(\"$text-muted\", classes=\"muted\")\n                yield ColorBar(\"$text-disabled\", classes=\"disabled\")\n</code></pre> <p>The context manager approach generally results in fewer lines of code, and presents attributes on the same line as containers themselves. Additionally, adding widgets to a container can be as simple is indenting them.</p> <p>You can still construct widgets and containers with positional arguments, but this new syntax is preferred. It's not documented yet, but you can start using it now. We will be updating our examples in the next few weeks.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#batch-updates","title":"Batch updates","text":"<p>Textual is smart about performing updates to the screen. When you make a change that might repaint the screen, those changes don't happen immediately. Textual makes a note of them, and repaints the screen a short time later (around a 1/60th of a second). Multiple updates are combined so that Textual does less work overall, and there is none of the flicker you might get with multiple repaints.</p> <p>Although this works very well, it is possible to introduce a little flicker if you make changes across multiple widgets. And especially if you add or remove many widgets at once. To combat this we have added a batch_update context manager which tells Textual to disable screen updates until the end of the with block.</p> <p>The new Markdown widget uses this context manager when it updates its content. Here's the code:</p> <pre><code>with self.app.batch_update():\n    await self.query(\"MarkdownBlock\").remove()\n    await self.mount_all(output)\n</code></pre> <p>Without the batch update there are a few frames where the old markdown blocks are removed and the new blocks are added (which would be perceived as a brief flicker). With the update, the update appears instant.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#disabled-widgets","title":"Disabled widgets","text":"<p>A few widgets (such as Button) had a <code>disabled</code> attribute which would fade the widget a little and make it unselectable. We've extended this to all widgets. Although it is particularly applicable to input controls, anything may be disabled. Disabling a container makes its children disabled, so you could use this for disabling a form, for example.</p> <p>Tip</p> <p>Disabled widgets may be styled with the <code>:disabled</code> CSS pseudo-selector.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#preventing-messages","title":"Preventing messages","text":"<p>Also in this release is another context manager, which will disable specified Message types. This doesn't come up as a requirement very often, but it can be very useful when it does. This one is documented, see Preventing events for details.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#full-changelog","title":"Full changelog","text":"<p>As always see the release page for additional changes and bug fixes.</p>"},{"location":"blog/2023/02/24/textual-0120-adds-syntactical-sugar-and-batch-updates/#join-us","title":"Join us!","text":"<p>We're having fun on our Discord server. Join us there to talk to Textualize developers and share ideas.</p>"},{"location":"blog/2023/03/09/textual-0140-shakes-up-posting-messages/","title":"Textual 0.14.0 shakes up posting messages","text":"<p>Textual version 0.14.0 has landed just a week after 0.13.0.</p> <p>Note</p> <p>We like fast releases for Textual. Fast releases means quicker feedback, which means better code.</p> <p>What's new?</p> <p>We did a little shake-up of posting messages which will simplify building widgets. But this does mean a few breaking changes.</p> <p>There are two methods in Textual to post messages: <code>post_message</code> and <code>post_message_no_wait</code>. The former was asynchronous (you needed to <code>await</code> it), and the latter was a regular method call. These two methods have been replaced with a single <code>post_message</code> method.</p> <p>To upgrade your project to Textual 0.14.0, you will need to do the following:</p> <ul> <li>Remove <code>await</code> keywords from any calls to <code>post_message</code>.</li> <li>Replace any calls to <code>post_message_no_wait</code> with <code>post_message</code>.</li> </ul> <p>Additionally, we've simplified constructing messages classes. Previously all messages required a <code>sender</code> argument, which had to be manually set. This was a clear violation of our \"no boilerplate\" policy, and has been dropped. There is still a <code>sender</code> property on messages / events, but it is set automatically.</p> <p>So prior to 0.14.0 you might have posted messages like the following:</p> <pre><code>await self.post_message(self.Changed(self, item=self.item))\n</code></pre> <p>You can now replace it with this simpler function call:</p> <pre><code>self.post_message(self.Change(item=self.item))\n</code></pre> <p>This also means that you will need to drop the sender from any custom messages you have created.</p> <p>If this was code pre-0.14.0:</p> <pre><code>class MyWidget(Widget):\n\n    class Changed(Message):\n        \"\"\"My widget change event.\"\"\"\n        def __init__(self, sender:MessageTarget, item_index:int) -&gt; None:\n            self.item_index = item_index\n            super().__init__(sender)\n</code></pre> <p>You would need to make the following change (dropping <code>sender</code>).</p> <pre><code>class MyWidget(Widget):\n\n    class Changed(Message):\n        \"\"\"My widget change event.\"\"\"\n        def __init__(self, item_index:int) -&gt; None:\n            self.item_index = item_index\n            super().__init__()\n</code></pre> <p>If you have any problems upgrading, join our Discord server, we would be happy to help.</p> <p>See the release notes for the full details on this update.</p>"},{"location":"blog/2023/03/13/textual-0150-adds-a-tabs-widget/","title":"Textual 0.15.0 adds a tabs widget","text":"<p>We've just pushed Textual 0.15.0, only 4 days after the previous version. That's a little faster than our typical release cadence of 1 to 2 weeks.</p> <p>What's new in this release?</p> <p>The highlight of this release is a new Tabs widget to display tabs which can be navigated much like tabs in a browser. Here's a screenshot:</p> TabsApp Paul\u00a0AtreidiesDuke\u00a0Leto\u00a0AtreidesLady\u00a0JessicaGurney\u00a0Halleck \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aLady\u00a0Jessica\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0A\u00a0\u00a0Add\u00a0tab\u00a0\u00a0R\u00a0\u00a0Remove\u00a0active\u00a0tab\u00a0\u00a0C\u00a0\u00a0Clear\u00a0tabs\u00a0 <p>In a future release, this will be combined with the ContentSwitcher widget to create a traditional tabbed dialog. Although Tabs is still useful as a standalone widgets.</p> <p>Tip</p> <p>I like to tweet progress with widgets on Twitter. See the #textualtabs hashtag which documents progress on this widget.</p> <p>Also in this release is a new LoadingIndicator widget to display a simple animation while waiting for data. Here's a screenshot:</p> LoadingApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf <p>As always, see the release notes for the full details on this update.</p> <p>If you want to talk about these widgets, or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/","title":"Textual 0.16.0 adds TabbedContent and border titles","text":"<p>Textual 0.16.0 lands 9 days after the previous release. We have some new features to show you.</p> <p>There are two highlights in this release. In no particular order, the first is TabbedContent which uses a row of tabs to navigate content. You will have likely encountered this UI in the desktop and web. I think in Windows they are known as \"Tabbed Dialogs\".</p> <p>This widget combines existing Tabs and ContentSwitcher widgets and adds an expressive interface for composing. Here's a trivial example to use content tabs to navigate a set of three markdown documents:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent(\"Leto\", \"Jessica\", \"Paul\"):\n        yield Markdown(LETO)\n        yield Markdown(JESSICA)\n        yield Markdown(PAUL)\n</code></pre> <p>Here's an example of the UI you can create with this widget (note the nesting)!</p> <p> TabbedApp LetoJessicaPaul \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. PaulAlia \u2501\u2578\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 First\u00a0child\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0l\u00a0Leto\u00a0\u00a0j\u00a0Jessica\u00a0\u00a0p\u00a0Paul\u00a0\u258f^p\u00a0palette </p>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/#border-titles","title":"Border titles","text":"<p>The second highlight is a frequently requested feature (FRF?). Widgets now have the two new string properties, <code>border_title</code> and <code>border_subtitle</code>, which will be displayed within the widget's border.</p> <p>You can set the alignment of these titles via <code>border-title-align</code> and <code>border-subtitle-align</code>. Titles may contain Console Markup, so you can add additional color and style to the labels.</p> <p>Here's an example of a widget with a title:</p> BorderApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 ascii \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 none \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550double\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 hidden\u2551\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551I\u00a0must\u00a0not\u00a0fear.\u2551 blank\u2551Fear\u00a0is\u00a0the\u00a0mind-killer.\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2551 round\u2551I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551path.\u2551 solid\u2586\u2586\u2551Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2551remain.\u2551 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2551\u2551 double\u2551\u2551 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 dashed \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 heavy \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 <p>BTW the above is a command you can run to see the various border styles you can apply to widgets.</p> <pre><code>textual borders\n</code></pre>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/#container-changes","title":"Container changes","text":"<p>Breaking change</p> <p>If you have an app that uses any container classes, you should read this section.</p> <p>We've made a change to containers in this release. Previously all containers had auto scrollbars, which means that any container would scroll if its children didn't fit. With nested layouts, it could be tricky to understand exactly which containers were scrolling. In 0.16.0 we split containers in to scrolling and non-scrolling versions. So <code>Horizontal</code> will now not scroll by default, but <code>HorizontalScroll</code> will have automatic scrollbars.</p>"},{"location":"blog/2023/03/22/textual-0160-adds-tabbedcontent-and-border-titles/#what-else","title":"What else?","text":"<p>As always, see the release notes for the full details on this update.</p> <p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/","title":"Textual 0.17.0 adds translucent screens and Option List","text":"<p>This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).</p> <p>What's new in this release?</p> <p>There are two new notable features I want to cover. The first is a compositor effect.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#translucent-screens","title":"Translucent screens","text":"<p>Textual has a concept of \"screens\" which you can think of as independent UI modes, each with their own user interface and logic. The App class keeps a stack of these screens so you can switch to a new screen and later return to the previous screen.</p> <p>Screens</p> <p>See the guide to learn more about the screens API.</p> <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1cXOtT20hcdTAwMTL/nr+C4r7sVcWz0z3vrbq6XHUwMDAyXHUwMDEyXHUwMDEyQnhsyObB3VZK2MLW4ddaMsZs5X+/XHUwMDFlhSDJQorBxnHiXHUwMDBmXHUwMDE4a+RRa+bX3b9+yH8/2djYTKbDcPO3jc3wqlx1MDAxOXSj1iiYbD71xy/DUVx1MDAxY1xy+jSE6ed4MFx1MDAxZTXTMztJMox/+/XXXjC6XGKTYTdohuwyisdBN07GrWjAmoPer1FcdTAwMTL24n/7v4dBL/zXcNBrJSOWXaRcdTAwMTG2omQw+nKtsFx1MDAxYvbCflx1MDAxMtPs/6HPXHUwMDFiXHUwMDFif6d/c9K1oqA36LfS09OBnHhazFx1MDAxZT1cdTAwMWP0U1FBXHUwMDBiLZW28vaEKH5GXHUwMDE3S8JcdTAwMTaNnpPAYTbiXHUwMDBmbcrRNNFcdTAwMDae897Fx119cmhcdTAwMGZOxyfZVc+jbvckmXZTmeJcdTAwMDHdSjZcdTAwMTYno8FF+D5qJVx1MDAxZH/pmeNV31x1MDAxYVxyxu1OP4zjwndcdTAwMDbDoFx1MDAxOSVTOqb47cGg306nyI5cXNGnXHUwMDA2cs6M0Vx1MDAxNqTiXHUwMDEy6G7V7fiXXHRcdTAwMDQz1lx1MDAxOFx1MDAwNUJcdTAwMWEhXHUwMDA1qFx1MDAxOcl2XHUwMDA2XdpcdTAwMDeS7Fx1MDAxZjx9ZbKdXHUwMDA1zYs2XHTYb2XngFxugrPz7JzJzf1Kp5i0Uphs+k5cdTAwMTi1O4nfIauZNcBdfjRcdTAwMGXTTXCgpJNaZlvkrzjca6Vg+HN2XHUwMDE1O8FoeLNam7H/kJPWXHUwMDBi+nxcdTAwMTZJeTTl9lm8grPdXHUwMDEwYKe1v/3X85NcdTAwMDP5+2CrfztXXHUwMDAxesFoNJhs3o58vvkvXHUwMDEzbTxsXHUwMDA1X1x1MDAxMFx1MDAwNVpLa43TXHUwMDEyTVx1MDAwNspu1L+gwf64282OXHKaXHUwMDE3XHUwMDE5XGLTo5+f3lx1MDAxYvp0mSroo+OO0KD03NBcdTAwMGbHU3ux39vnfHz+ctLeiyb6hfue0Fx1MDAwN/5N7IPTTFx1MDAxOSNRc1x1MDAwZVx1MDAwMoyyXHUwMDA17EuBXGalQYKeddo4vlx1MDAxOPbPgzPO1Vx1MDAxMrGPQipwlq9cdTAwMTb7vd45n2zx5NlhNFxmwz9eXHUwMDFlbb86iJeEfVx1MDAwYlxccG6Whf0kvEruXHUwMDAyvkVdXHUwMDA1fFx1MDAxMNZx5NLh3Mh/d941l1fDy5fT3taHwfjj8PiF2F1v5CMqprRBXHUwMDA0dEZ6XHUwMDBiWlx1MDAwML7lwMhcdTAwMDRJclxi1iHkrMBDcG+c4udYxj1wW1x1MDAwNryBWZhrgdL7pp/IxDtcdTAwMGJK2PvAPEPToJ+cRNepjbaFo7tBL+pOXHUwMDBikEjxT1x1MDAwMp40R2HY34D/9n/pRK1W2P9nfsfikK7vJ9TFb251o7bXls1ueF5UoyRcIlx1MDAxZXY7nFxmcmvcJElcdTAwMDKabrTXmr2jwShqR/2g+7Zaqlpt/rLMd6gzUVx1MDAxM5w9nNNnIHojxPz6XFy/8/fQZ5zF5uPps3HMSFx1MDAwMGm4pXdbVGfjJFx1MDAwM81cdTAwMWRcdTAwMWGU6EjjXHUwMDFmRZ1cdTAwMWQyrogwS2MsR9TuXHUwMDBl5XZMIzk6KVFcdTAwMDHXOlx1MDAwM/BXlyaFv4VcdTAwMDeoeipkjao/ijLGSTBKtqN+K+q3aTCzXCJfQ5K9OVx1MDAxY0Sqvs2xl5IzhVxcS8FpI5UgL1x1MDAwNLmT2sHQLyFcdTAwMDMgTqLJZKNVTtibXHUwMDEzPt9cblx1MDAxNfZb31x1MDAxNqk+UMmJ1OBcZml5nPV7pjhqilx1MDAxM0pCSaZcdTAwMDVIXHUwMDA3nITiTlmnSlJ1gzjZXHUwMDE59HpRQmt/PIj6yexcdTAwMWGni7nldbxcdTAwMTNcdTAwMDYl40F3lVx1MDAxZps1XHUwMDA2Qz9j0aZn/21k2pJ+uP3/z6d3nt2ohHI6WkJxNt+T/PtcdTAwMDNcdTAwMTi5sJWGXGYtqVx1MDAwNlx1MDAxMZdM8b/JyM9G2NpcdTAwMGKuw/1nW1x1MDAwN89f9LWNIVhvXlwinGOOTFx1MDAxNVxiNN5y68xcdTAwMTJ8XHRGLeNcdTAwMDLAOeK+ZCaEmJHsIcGo1suj5ESVkKJcYs5cdTAwMWaBrNRYMECFuIqIkYLtSkeLZLhcdTAwMDVwNb+jPdzpXHUwMDFjXGZfXHUwMDFjvdtcdTAwMWRcdTAwMWNfj9xhcjQ+XHUwMDFmivVcdTAwMDao5IJcdJ9cdFGWdFWqYrJEXG7NuOPGXHUwMDEyQqVcdTAwMDZcXFxmnsuOXHUwMDE3SVx1MDAxZaE4mTS7fHDWMenXZ8rufYyvOsPx+MNWdPomuVx1MDAxOMllXHUwMDA1jIQ3yHG7x4O+XHUwMDE1qlxu+k6AUkS65jfN76eHb9o9t3+0r/76NH32abtzKI+WivxWXHUwMDEwd8IlQ98xolx1MDAxZYJcdTAwMTONXHUwMDA0YpGuXHUwMDAwfaGQXHUwMDExKZFcdTAwMDY5cDBcXC9GMi02XHUwMDFkhGqZ6CdcdTAwMTNpSTS+4nSJXHLDl+PX19fds1P96VxcJJGYnvL50P+0bt5Y7U+v4+3jyejgdO/Vofj0x9SeLWHe8+H7ydvG5Ni+v+7Fp1x1MDAxN83wI3ZcdTAwMGaWMC9cdTAwMWab//VO3mLyprl9XHUwMDE1NT/uvlx1MDAxMc1oWfE0J+S5pTnAqrSRrktcdTAwMWKRWjiKvOzcNuAsnuKOONpcdTAwMDXV3u6Mmq33h+r6dL3DTGlcdTAwMWSzSkvNOZleNZMuXHUwMDA1QaNOcrKERJ3JXHUwMDE3zlxudj9cdTAwMTNA6npcdTAwMTbewc1ErqZxq/myrO9CWqIrhj+Ct6tBolx1MDAwMan1fZCYbXiW2Vx1MDAxMVx1MDAxNOWlgYfnwDZcdTAwMTdJXHUwMDE38jzZVb7meYLhkFxyXHUwMDA3w09xmln55e4sj9CF7z12lqckU63qVeZ4dHVkROxXXHUwMDEz71Zyft2rN57L0L1H8L8gmERUXHUwMDE0ZiOZOzFTq7CGIVx1MDAxN9pcYqPJXHUwMDE3w2Ip2yrd40RvXHUwMDAxkVgwXHUwMDAx06E1QpZ1XHUwMDExuPGCmpRvXHUwMDAyXHUwMDE5XHUwMDA0V9ZNQjUpTC7JvopEXHUwMDBmcFqcx0z01NO6jUJWxVEsXHUwMDBmjmyoRE2rmUsx3CRVXHUwMDE0U1x1MDAxNFx1MDAwMyuOdFx1MDAwMtpvZnqKt/EjZVtqQJWOl/GUTfkk/35vo2JyRYVZo0JwXHUwMDAx8iD3yFx1MDAxYtczp/U0Ko5LZi1ZXGZDsaySZtaoXGJmXHUwMDA0V4pWnlxmXHUwMDBizEZcdTAwMWLLMipoOWghfSmfLpIrRuVsimWSglx1MDAwZetcdTAwMWNcdTAwMTiCXG6WykSgjZXOc5PV2lx1MDAxNKCYXCJbte9oU4DRXHUwMDBl0PIopykqJlx1MDAxZVJOXHUwMDFlXHUwMDAzZ8QmrNTkQoThXFyan9SmVEPKv1x1MDAxYWU0LcuiXHUwMDE08l+zXHUwMDE5XFyurZS+nDm3SalPnaynSdHKMCO55lx1MDAxMiVIk+tk8d/XXHUwMDAyXHUwMDE4+X3iMd6x4YItXHUwMDE1VSaFdMFcdTAwMTkjyWhJWnXSiez+b02KU1xmpXbKcsFccqrcrtxYXHUwMDE0dPRdhfpcdTAwMDFcdTAwMDHEQiSFK5fJ8nCDMqt8P4FaN6r3NVx1MDAxZC5t6T3Vuq5XSldTXHUwMDA1Tv5cdTAwMTM06vmpgn6m8FX0cnLZfvfhQrevT49+j79rn+C31ZrIMzBcbj6QTCatr5lpXHUwMDE5UUAkTSluXHUwMDFkUSaXL8ivR2VGeTOvVptcZlhdJ59cdTAwMTbVXlx1MDAwN4Rwvk1s/ui4cbU/tn+1wsvOycdLXHUwMDExTl87PNhZe3Rq5uNcdTAwMDdB2DMobLFwSG6XkS9cIuRcbq2EQbdcdTAwMTA6l16YcUIgUTfzgHB4kdR0I57s7CB2I9lcdTAwMTZcdTAwMWZa4z+O48nFslKyVlpuga9cdTAwMDD7NuegS1xy3IAkjJyfcMX93dFe7+L5azHF8L1otTvDg9Z6Q79cdTAwMDHWMrCKmKXTzmlcdTAwMGVcdTAwMDXoXHUwMDBiKYlcZiuL3KLv6l1cYvlfyjLLLElcdTAwMTJHXHUwMDA0XHUwMDEy7CcpypxtPT9/XHUwMDFmbPHD9rv9t1x1MDAwN83rQZDE46X1xqK0uDSNqlxmYWpcbp2gfHVbajN/W3h92Wd9I1x1MDAxOFxupYVcdTAwMDRSXHUwMDFiXHUwMDAxekafiOiQWfHxi6b9WKzOWVx1MDAxZMBcdTAwMThFXHUwMDExlKPolYiLJZ9VVizincxnZZRcIq/mfLmjpF5cdTAwMTTqy2Jss5pcdTAwMTCG1P1BNZBl50Q448AlxXBKXHUwMDE5jeA4N3d2r/neNk3RKsWlZJBuTvjZklwijWpQfVx1MDAxOS7hKZvxSf79vnVTqWD26C071cjR3ec5k6vXoVx1MDAxY530XHUwMDFiz/u6od1+6/CV6thcboPSXHSanfEoXFxcdTAwMDNcdTAwMWZN+GJcdTAwMDZ89yTB0T/jUEy0XHUwMDFhJ1x1MDAxOHF0X1x1MDAwZVx1MDAxMMpavlD1Jlx1MDAxOVx1MDAwNf14XHUwMDE4jEhd7jAsucxpTdO9XHUwMDE0qJw1YsWM9DGfLfHZXHUwMDAy41bedI9r2XSPizfdc1fdXHJBtsOSf7zHk5P1O38vtV5dP0SDXHUwMDAySlx1MDAwNspYIynYXHUwMDE3zuqZxnuLjLyhptPQmVxccWXpWlxyilx0XHUwMDAwKYiekW1x7q5cdTAwMTJcblx1MDAwMpM+XHLCLYVMoPJcdTAwMWRaN3TBu1x1MDAwN4fwkCzJXCJ0gTyzclx1MDAwZtHLOelCvcvYKDa7k+8z5CONTOvo5bIscEaLJITl3JdR9Ndi5D1cdTAwMWLw61x1MDAxZpcsUFx1MDAxOFx1MDAxMCCNpZ3zXHUwMDE5XHUwMDAyJY0uyWRcdTAwMTjSgCR648jGXHUwMDE5xJJMP1x1MDAxMk+pXHUwMDA2s381yjheXHUwMDE2TVx1MDAxMZWJXHUwMDA0XHUwMDA0n2+mUHV+nlwiPlxcyNa1fHn54tnhm9Z04sK+qirdrFx1MDAwZk9cdTAwMDHBmSFoI7FD32ePRYOGqH1cdTAwMDXRKCAuY6VSXHUwMDBipVx1MDAxM75BVO5o8ypcdTAwMTNcdTAwMTWyXHUwMDFjUlx0IdWPw1Se1s37mFx1MDAxOVx1MDAwNLK0Wq+eXHUwMDAxXHTiXHUwMDFhl1FcdTAwMWOddcN1okBcdTAwMDWxXHUwMDFlxoFcdTAwMTRWXHUwMDA2NuAsoZK4/vxN4fVbv65cdTAwMTTIP/IglFTeLKBRYqYtXHUwMDFjkFx0Ylx1MDAxNVx1MDAxNoUherTYXHUwMDAzO7X2XHUwMDAyXHUwMDFkOUokj01Ow3IpsyvdWlx1MDAwZu3du/TJXHUwMDAwXHS0MVjOl/jSXHUwMDAxRaSr7iF5sFrOSYDqfVGRXHUwMDAwgdCeXHUwMDA3Ulx1MDAxNFxuXHUwMDE2yeHlclx1MDAwNF9cdTAwMTmQZNJvJaBcdTAwMTJcdTAwMWOMeegziPW59qJUXFxcbmPJISljtNEu94NcdTAwMWa3YllmNHFcdTAwMDPaWue4MkKWpPqRSFAlnP2rXHUwMDA05CUxIFGdqCFhUEtcdTAwMGbXue3ZyfXlKzWNj6ZHL+LB5OPWZft479O6MyCK1ohcdTAwMDGh4MSCjK9ZXHUwMDE0XHUwMDEzNUJcdTAwMThGXHUwMDExgnRElFxibvlfUPlOmVx1MDAxYSBcdTAwMWHmIFx1MDAxN1x1MDAxNfzotUPHXHUwMDA1t8LlbmiFmZo15Cm4OE8xrlqvwVx1MDAxN1xyrTXzN6/Ub/2a8lx1MDAxNFxuKsH/mFx1MDAwZjk3w41cdTAwMTC5eCFtXHUwMDEwXHUwMDAwzdAnckxcdTAwMWHai8VcdTAwMWXdrNVr7dtotPDP9/tcdTAwMDdcdTAwMDfhXHUwMDBlLdeGOeu7XHUwMDE2NddWlVx1MDAxYdP8U2zKoV3l7yQspJVz0pR6h7FRKOs4RS9OXHUwMDFiXHUwMDA1WphcXGfyRpZcdTAwMTORXGLCao1cdTAwMWH8XHUwMDEzYuWfJJiLpNT3wszIRFxcSCvyyEJq8lx1MDAxZqIkXHUwMDEzkmfx7Wv+4XY0d7X0/0hcdTAwMTSlXHUwMDEyyOlgXHUwMDExwlVcdTAwMDTlyc3s/jGhk4TwdrtcdTAwMTVcdTAwMDTpqHVjyrNb3LyMwsn2XT056cvbx3QxvVx1MDAxNVxu/Y3+/fnJ5/9cdTAwMDPV4pXXIn0= Screen 1(hidden)app.pop_screen()Screen 2(hidden)Screen 3(visible)Screen 2(visible) </p> <p>Screens can be used to build modal dialogs by pushing a screen with controls / buttons, and popping the screen when the user has finished with it. The problem with this approach is that there was nothing to indicate to the user that the original screen was still there, and could be returned to.</p> <p>In this release we have added alpha support to the Screen's background color which allows the screen underneath to show through, typically blended with a little color. Applying this to a screen makes it clear than the user can return to the previous screen when they have finished interacting with the modal.</p> <p>Here's how you can enable this effect with CSS:</p> <pre><code>DialogScreen {\n    align: center middle;\n    background: $primary 30%;\n}\n</code></pre> <p>Setting the background to <code>$primary</code> will make the background blue (with the default theme). The addition of <code>30%</code> sets the alpha so that it will be blended with the background. Here's the kind of effect this creates:</p> DialogApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588Good\u00a0for\u00a0natural\u00a0breaks\u00a0in\u00a0the\u00a0content,\u00a0that\u00a0don't\u00a0require\u00a0another\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588header.\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u258e\u258b\u2588\u258b\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u258eLists\u258b\u2588\u258b\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588\u258e\u258b\u2582\u2582\u2588\u258b\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2582\u2582\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u00a01.\u00a0Lists\u00a0can\u00a0be\u00a0ordered\u2588down\u00a0widgets.\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u00a02.\u00a0Lists\u00a0can\u00a0be\u00a0unordered\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u25cf\u00a0I\u00a0must\u00a0not\u00a0fear.\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u25aa\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u2584\u2584\u2588\u258b\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588\u2023\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2588\u258b\u2588\u2580\u2580\u2580\u2580\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2022\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u258b\u2588\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588\u2b51\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u25aa\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0\u2588\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588see\u00a0its\u00a0path.\u2588\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u25cf\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u2588\u2588\u2582\u2582\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pa\u2588remain.\u2588\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u2588\u2588\u2588\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer\u2588Longer\u00a0list\u2588\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-deat\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u00a0\u00a01.\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides,\u00a0head\u00a0of\u00a0House\u00a0Atreides\u2588\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pas\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588\u00a0headings.\u2588\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u2588\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0O\u2588This\u00a0is\u00a0H5\u2588\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer.\u2588\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0oblit\u2588Header\u00a0level\u00a05\u00a0content.\u2588\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2588This\u00a0is\u00a0H6\u2588\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u2588This\u00a0is\u00a0H4\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer.\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliterati\u2588Header\u00a0level\u00a04\u00a0content.\u00a0Drilling\u00a0down\u00a0in\u00a0to\u00a0finer\u00a0headings.\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2588This\u00a0is\u00a0H5\u2588 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0\u2588\u2588 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u2588Header\u00a0level\u00a05\u00a0content.\u2588 Fear\u00a0is\u00a0the\u00a0mind-killer.\u2588\u2588 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliterati\u2588This\u00a0is\u00a0H6\u2588 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. <p>There are 4 screens in the above screenshot, one for the base screen and one for each of the three dialogs. Note how each screen modifies the color of the screen below, but leaves everything visible.</p> <p>See the docs on screen opacity if you want to add this to your apps.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#option-list","title":"Option list","text":"<p>Textual has had a ListView widget for a while, which is an excellent way of navigating a list of items (actually other widgets). In this release we've added an OptionList which is similar in appearance, but uses the line api under the hood. The Line API makes it more efficient when you approach thousands of items.</p> <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aTauron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aVirgon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <p>The Options List accepts Rich renderable, which means that anything Rich can render may be displayed in a list. Here's an Option List of tables:</p> <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Demeter\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a01.2\u00a0Billion\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Gaoth\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2582\u2582\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Hermes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a075,000\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0None\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Canceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Hephaestus\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a06.7\u00a0Billion\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Hades\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Caprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <p>We plan to build on the <code>OptionList</code> widget to implement drop-downs, menus, check lists, etc. But it is still very useful as it is, and you can add it to apps now.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#what-else","title":"What else?","text":"<p>There are a number of fixes regarding refreshing in this release. If you had issues with parts of the screen not updating, the new version should resolve it.</p> <p>There's also a new logging handler, and a \"thick\" border type.</p> <p>See release notes for the full details.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#next-week","title":"Next week","text":"<p>Next week we plan to take a break from building Textual to building apps with Textual. We do this now and again to give us an opportunity to step back and understand things from the perspective of a developer using Textual. We will hopefully have something interesting to show from the exercise, and new Open Source apps to share.</p>"},{"location":"blog/2023/03/29/textual-0170-adds-translucent-screens-and-option-list/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/","title":"Textual 0.18.0 adds API for managing concurrent workers","text":"<p>Less than a week since the last release, and we have a new API to show you.</p> <p>This release adds a new Worker API designed to manage concurrency, both asyncio tasks and threads.</p> <p>An API to manage concurrency may seem like a strange addition to a library for building user interfaces, but on reflection it makes a lot of sense. People are building Textual apps to interface with REST APIs, websockets, and processes; and they are running into predictable issues. These aren't specifically Textual problems, but rather general problems related to async tasks and threads. It's not enough for us to point users at the asyncio docs, we needed a better answer.</p> <p>The new <code>run_worker</code> method provides an easy way of launching \"Workers\" (a wrapper over async tasks and threads) which also manages their lifetime.</p> <p>One of the challenges I've found with tasks and threads is ensuring that they are shut down in an orderly manner. Interestingly enough, Textual already implemented an orderly shutdown procedure to close the tasks that power widgets: children are shut down before parents, all the way up to the App (the root node). The new API piggybacks on to that existing mechanism to ensure that worker tasks are also shut down in the same order.</p> <p>Tip</p> <p>You won't need to worry about this gnarly issue with the new Worker API.</p> <p>I'm particularly pleased with the new <code>@work</code> decorator which can turn a coroutine OR a regular function into a Textual Worker object, by scheduling it as either an asyncio task or a thread. I suspect this will solve 90% of the concurrency issues we see with Textual apps.</p> <p>See the Worker API for the details.</p>"},{"location":"blog/2023/04/04/textual-0180-adds-api-for-managing-concurrent-workers/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/","title":"Textual 0.23.0 improves message handling","text":"<p>It's been a busy couple of weeks at Textualize. We've been building apps with Textual, as part of our dog-fooding week. The first app, Frogmouth, was released at the weekend and already has 1K GitHub stars! Expect two more such apps this month.</p> Frogmouth /Users/willmcgugan/projects/textual/FAQ.md ContentsLocalBookmarksHistory\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u258e\u258a \u258eHow\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u258a \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e\u258a \u2503\u25bc\u00a0\u2160\u00a0Frequently\u00a0Asked\u00a0Questions\u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Does\u00a0Textual\u00a0support\u00a0images?\u2503When\u00a0creating\u00a0your\u00a0App\u00a0class,\u00a0override\u00a0__init__\u00a0as\u00a0you\u00a0would\u00a0wheninheriting\u00a0normally.\u00a0For\u00a0example: \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0fix\u00a0ImportError\u00a0cannot\u00a0i\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0select\u00a0and\u00a0copy\u00a0text\u00a0in\u00a0\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0set\u00a0a\u00a0translucent\u00a0app\u00a0ba\u2503fromtextual.appimportApp,ComposeResult \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0center\u00a0a\u00a0widget\u00a0in\u00a0a\u00a0scre\u2503fromtextual.widgetsimportStatic \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0do\u00a0some\u00a0key\u00a0combinations\u00a0never\u2503classGreetings(App[None]): \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0look\u00a0good\u00a0on\u00a0m\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2514\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0support\u00a0ANSI\u00a0t\u2503\u2502\u00a0\u00a0\u00a0def__init__(self,greeting:str=\"Hello\",to_greet:str=\"World\")-&gt;None: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.greeting=greeting \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.to_greet=to_greet \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0super().__init__() \u2503\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2503\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;ComposeResult: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yieldStatic(f\"{self.greeting},\u00a0{self.to_greet}\") \u2503\u2503 \u2503\u2503 \u2503\u2503Then\u00a0the\u00a0app\u00a0can\u00a0be\u00a0run,\u00a0passing\u00a0in\u00a0various\u00a0arguments;\u00a0for\u00a0example: \u2503\u2503\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0default\u00a0arguments. \u2503\u2503Greetings().run() \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0a\u00a0keyword\u00a0arguyment. \u2503\u2503Greetings(to_greet=\"davep\").run()\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0both\u00a0positional\u00a0arguments. \u2503\u2503Greetings(\"Well\u00a0hello\",\"there\").run() \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2503\u2589\u2503\u258e\u258a \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u00a0F1\u00a0\u00a0Help\u00a0\u00a0F2\u00a0\u00a0About\u00a0\u00a0CTRL+N\u00a0\u00a0Navigation\u00a0\u00a0CTRL+Q\u00a0\u00a0Quit\u00a0 <p>Tip</p> <p>Join our mailing list if you would like to be the first to hear about our apps.</p> <p>We haven't stopped developing Textual in that time. Today we released version 0.23.0 which has a really interesting API update I'd like to introduce.</p> <p>Textual widgets can send messages to each other. To respond to those messages, you implement a message handler with a naming convention. For instance, the Button widget sends a <code>Pressed</code> event. To handle that event, you implement a method called <code>on_button_pressed</code>.</p> <p>Simple enough, but handler methods are called to handle pressed events from all Buttons. To manage multiple buttons you typically had to write a large <code>if</code> statement to wire up each button to the code it should run. It didn't take many Buttons before the handler became hard to follow.</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/#on-decorator","title":"On decorator","text":"<p>Version 0.23.0 introduces the <code>@on</code> decorator which allows you to dispatch events based on the widget that initiated them.</p> <p>This is probably best explained in code. The following two listings respond to buttons being pressed. The first uses a single message handler, the second uses the decorator approach:</p> on_decorator01.pyon_decorator02.pyOutput on_decorator01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:  # (1)!\n        \"\"\"Handle all button pressed events.\"\"\"\n        if event.button.id == \"bell\":\n            self.bell()\n        elif event.button.has_class(\"toggle\", \"dark\"):\n            self.dark = not self.dark\n        elif event.button.id == \"quit\":\n            self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>The message handler is called when any button is pressed</li> </ol> on_decorator02.py<pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    @on(Button.Pressed, \"#bell\")  # (1)!\n    def play_bell(self):\n        \"\"\"Called when the bell button is pressed.\"\"\"\n        self.bell()\n\n    @on(Button.Pressed, \".toggle.dark\")  # (2)!\n    def toggle_dark(self):\n        \"\"\"Called when the 'toggle dark' button is pressed.\"\"\"\n        self.dark = not self.dark\n\n    @on(Button.Pressed, \"#quit\")  # (3)!\n    def quit(self):\n        \"\"\"Called when the quit button is pressed.\"\"\"\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>Matches the button with an id of \"bell\" (note the <code>#</code> to match the id)</li> <li>Matches the button with class names \"toggle\" and \"dark\"</li> <li>Matches the button with an id of \"quit\"</li> </ol> <p> OnDecoratorApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Bell\u00a0\u00a0Toggle\u00a0dark\u00a0\u00a0Quit\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>The decorator dispatches events based on a CSS selector. This means that you could have a handler per button, or a handler for buttons with a shared class, or parent.</p> <p>We think this is a very flexible mechanism that will help keep code readable and maintainable.</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/#why-didnt-we-do-this-earlier","title":"Why didn't we do this earlier?","text":"<p>It's a reasonable question to ask: why didn't we implement this in an earlier version? We were certainly aware there was a deficiency in the API.</p> <p>The truth is simply that we didn't have an elegant solution in mind until recently. The <code>@on</code> decorator is, I believe, an elegant and powerful mechanism for dispatching handlers. It might seem obvious in hindsight, but it took many iterations and brainstorming in the office to come up with it!</p>"},{"location":"blog/2023/05/03/textual-0230-improves-message-handling/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/","title":"Textual 0.24.0 adds a Select control","text":"<p>Coming just 5 days after the last release, we have version 0.24.0 which we are crowning the King of Textual releases. At least until it is deposed by version 0.25.0.</p> <p>The highlight of this release is the new Select widget: a very familiar control from the web and desktop worlds. Here's a screenshot and code:</p> Output (expanded)select_widget.pyselect.css <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Header, Select\n\nLINES = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\"\"\".splitlines()\n\n\nclass SelectApp(App):\n    CSS_PATH = \"select.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Select((line, line) for line in LINES)\n\n    @on(Select.Changed)\n    def select_changed(self, event: Select.Changed) -&gt; None:\n        self.title = str(event.value)\n\n\nif __name__ == \"__main__\":\n    app = SelectApp()\n    app.run()\n</code></pre> <pre><code>\n</code></pre>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#new-styles","title":"New styles","text":"<p>This one required new functionality in Textual itself. The \"pull-down\" overlay with options presented a difficulty with the previous API. The overlay needed to appear over any content below it. This is possible (using layers), but there was no simple way of positioning it directly under the parent widget.</p> <p>We solved this with a new \"overlay\" concept, which can considered a special layer for user interactions like this Select, but also pop-up menus, tooltips, etc. Widgets styled to use the overlay appear in their natural place in the \"document\", but on top of everything else.</p> <p>A second problem we tackled was ensuring that an overlay widget was never clipped. This was also solved with a new rule called \"constrain\". Applying <code>constrain</code> to a widget will keep the widget within the bounds of the screen. In the case of <code>Select</code>, if you expand the options while at the bottom of the screen, then the overlay will be moved up so that you can see all the options.</p> <p>These new rules are currently undocumented as they are still subject to change, but you can see them in the Select source if you are interested.</p> <p>In a future release these will be finalized and you can confidently use them in your own projects.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#fixes-for-the-on-decorator","title":"Fixes for the @on decorator","text":"<p>The new <code>@on</code> decorator is proving popular. To recap, it is a more declarative and finely grained way of dispatching messages. Here's a snippet from the calculator example which uses <code>@on</code>:</p> <pre><code>    @on(Button.Pressed, \"#plus,#minus,#divide,#multiply\")\n    def pressed_op(self, event: Button.Pressed) -&gt; None:\n        \"\"\"Pressed one of the arithmetic operations.\"\"\"\n        self.right = Decimal(self.value or \"0\")\n        self._do_math()\n        assert event.button.id is not None\n        self.operator = event.button.id\n</code></pre> <p>The decorator arranges for the method to be called when any of the four math operation buttons are pressed.</p> <p>In 0.24.0 we've fixed some missing attributes which prevented the decorator from working with some messages. We've also extended the decorator to use keywords arguments, so it will match attributes other than <code>control</code>.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#other-fixes","title":"Other fixes","text":"<p>There is a surprising number of fixes in this release for just 5 days. See CHANGELOG.md for details.</p>"},{"location":"blog/2023/05/08/textual-0240-adds-a-select-control/#join-us","title":"Join us","text":"<p>If you want to talk about this update or anything else Textual related, join us on our Discord server.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/","title":"Textual adds Sparklines, Selection list, Input validation, and tool tips","text":"<p>It's been 12 days since the last Textual release, which is longer than our usual release cycle of a week.</p> <p>We've been a little distracted with our \"dogfood\" projects: Frogmouth and Trogon. Both of which hit 1000 Github stars in 24 hours. We will be maintaining / updating those, but it is business as usual for this Textual release (and it's a big one). We have such sights to show you.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#sparkline-widget","title":"Sparkline widget","text":"<p>A Sparkline is essentially a mini-plot. Just detailed enough to keep an eye on time-series data.</p> SparklineColorsApp \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 \u2581\u2582\u2582\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2583\u2583\u2582\u2581\u2582\u2582\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2582 <p>Colors are configurable, and all it takes is a call to <code>set_interval</code> to make it animate.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#selection-list","title":"Selection list","text":"<p>Next up is the SelectionList widget. Essentially a scrolling list of checkboxes. Lots of use cases for this one.</p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258cFalken's\u00a0Maze\u2502 \u2502\u2590X\u258cBlack\u00a0Jack\u2502 \u2502\u2590X\u258cGin\u00a0Rummy\u2502 \u2502\u2590X\u258cHearts\u2502 \u2502\u2590X\u258cBridge\u2502 \u2502\u2590X\u258cCheckers\u2502 \u2502\u2590X\u258cChess\u2502 \u2502\u2590X\u258cPoker\u2502 \u2502\u2590X\u258cFighter\u00a0Combat\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#tooltips","title":"Tooltips","text":"<p>We've added tooltips to Textual widgets.</p> <p>The API couldn't be simpler: simply assign a string to the <code>tooltip</code> property on any widget. This string will be displayed after 300ms when you hover over the widget.</p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 Click\u00a0me \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. <p>As always, you can configure how the tooltips will be displayed with CSS.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#input-updates","title":"Input updates","text":"<p>We have some quality of life improvements for the Input widget.</p> <p>You can now use a simple declarative API to validating input.</p> InputApp Enter\u00a0an\u00a0even\u00a0number\u00a0between\u00a01\u00a0and\u00a0100\u00a0that\u00a0is\u00a0also\u00a0a\u00a0palindrome. \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258afoo\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e ['Must\u00a0be\u00a0a\u00a0valid\u00a0number.',\u00a0'Value\u00a0is\u00a0not\u00a0even.',\u00a0\"That's\u00a0not\u00a0a\u00a0palindrome\u00a0:/\"] <p>Also in this release is a suggestion API, which will suggest auto completions as you type. Hit right to accept the suggestion.</p> <p>Here's a screenshot:</p> FruitsApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258astrawberry\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e <p>You could use this API to offer suggestions from a fixed list, or even pull the data from a network request.</p>"},{"location":"blog/2023/06/01/textual-adds-sparklines-selection-list-input-validation-and-tool-tips/#join-us","title":"Join us","text":"<p>Development on Textual is fast. We're very responsive to issues and feature requests.</p> <p>If you have any suggestions, jump on our Discord server and you may see your feature in the next release!</p>"},{"location":"blog/2023/07/03/textual-0290-refactors-dev-tools/","title":"Textual 0.29.0 refactors dev tools","text":"<p>It's been a slow week or two at Textualize, with Textual devs taking well-earned annual leave, but we still managed to get a new version out.</p> <p>Version 0.29.0 has shipped with a number of fixes (see the release notes for details), but I'd like to use this post to explain a change we made to how Textual developer tools are distributed.</p> <p>Previously if you installed <code>textual[dev]</code> you would get the Textual dev tools plus the library itself. If you were distributing Textual apps and didn't need the developer tools you could drop the <code>[dev]</code>.</p> <p>We did this because the less dependencies a package has, the fewer installation issues you can expect to get in the future. And Textual is surprisingly lean if you only need to run apps, and not build them.</p> <p>Alas, this wasn't quite as elegant solution as we hoped. The dependencies defined in extras wouldn't install commands, so <code>textual</code> was bundled with the core library. This meant that if you installed the Textual package without the <code>[dev]</code> you would still get the <code>textual</code> command on your path but it wouldn't run.</p> <p>We solved this by creating two packages: <code>textual</code> contains the core library (with minimal dependencies) and <code>textual-dev</code> contains the developer tools. If you are building Textual apps, you should install both as follows:</p> <pre><code>pip install textual textual-dev\n</code></pre> <p>That's the only difference. If you run in to any issues feel free to ask on the Discord server!</p>"},{"location":"blog/2023/07/17/textual-0300-adds-desktop-style-notifications/","title":"Textual 0.30.0 adds desktop-style notifications","text":"<p>We have a new release of Textual to talk about, but before that I'd like to cover a little Textual news.</p> <p>By sheer coincidence we reached 20,000 stars on GitHub today. Now stars don't mean all that much (at least until we can spend them on coffee), but its nice to know that twenty thousand developers thought Textual was interesting enough to hit the \u2605 button. Thank you!</p> <p>In other news: we moved office. We are now a stone's throw away from Edinburgh Castle. The office is around three times as big as the old place, which means we have room for wide standup desks and dual monitors. But more importantly we have room for new employees. Don't send your CVs just yet, but we hope to grow the team before the end of the year.</p> <p>Exciting times.</p>"},{"location":"blog/2023/07/17/textual-0300-adds-desktop-style-notifications/#new-release","title":"New Release","text":"<p>And now, for the main feature. Version 0.30 adds a new notification system. Similar to desktop notifications, it displays a small window with a title and message (called a toast) for a pre-defined number of seconds.</p> <p>Notifications are great for short timely messages to add supplementary information for the user. Here it is in action:</p> <p>The API is super simple. To display a notification, call <code>notify()</code> with a message and an optional title.</p> <pre><code>def on_mount(self) -&gt; None:\n    self.notify(\"Hello, from Textual!\", title=\"Welcome\")\n</code></pre>"},{"location":"blog/2023/07/17/textual-0300-adds-desktop-style-notifications/#textualize-video-channel","title":"Textualize Video Channel","text":"<p>In case you missed it; Textualize now has a YouTube channel. Our very own Rodrigo has recorded a video tutorial series on how to build Textual apps. Check it out!</p> <p>We will be adding more videos in the near future, covering anything from beginner to advanced topics.</p> <p>Don't worry if you prefer reading to watching videos. We will be adding plenty more content to the Textual docs in the near future. Watch this space.</p> <p>As always, if you want to discuss anything with the Textual developers, join us on the Discord server.</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/","title":"Textual 0.38.0 adds a syntax aware TextArea","text":"<p>This is the second big feature release this month after last week's command palette.</p> <p>The TextArea has finally landed. I know a lot of folk have been waiting for this one. Textual's TextArea is a fully-featured widget for editing code, with syntax highlighting and line numbers. It is highly configurable, and looks great.</p> <p>Darren Burns (the author of this widget) has penned a terrific write-up on the TextArea. See Things I learned while building Textual's TextArea for some of the challenges he faced.</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#scoped-css","title":"Scoped CSS","text":"<p>Another notable feature added in 0.38.0 is scoped CSS. A common gotcha in building Textual widgets is that you could write CSS that impacted styles outside of that widget.</p> <p>Consider the following widget:</p> <pre><code>class MyWidget(Widget):\n    DEFAULT_CSS = \"\"\"\n    MyWidget {\n        height: auto;\n        border: magenta;\n    }\n    Label {\n        border: solid green;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"foo\")\n        yield Label(\"bar\")\n</code></pre> <p>The author has intended to style the labels in that widget by adding a green border. This does work for the widget in question, but (prior to 0.38.0) the <code>Label</code> rule would style all Labels (including any outside of the widget) \u2014 which was probably not intended.</p> <p>With version 0.38.0, the CSS is scoped so that only the widget's labels will be styled. This is almost always what you want, which is why it is enabled by default. If you do want to style something outside of the widget you can set <code>SCOPED_CSS=False</code> (as a classvar).</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#light-and-dark-pseudo-selectors","title":"Light and Dark pseudo selectors","text":"<p>We've also made a slight quality of life improvement to the CSS, by adding <code>:light</code> and <code>:dark</code> pseudo selectors. This allows you to change styles depending on whether you have dark mode enabled or not.</p> <p>This was possible before, just a little verbose. Here's how you would do it in 0.37.0:</p> <pre><code>App.-dark-mode MyWidget Label {\n    ...\n}\n</code></pre> <p>In 0.38.0 it's a little more concise and readable:</p> <pre><code>MyWidget:dark Label {\n    ...\n}\n</code></pre>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#testing-guide","title":"Testing guide","text":"<p>Not strictly part of the release, but we've added a guide on testing Textual apps.</p> <p>As you may know, we are on a mission to make TUIs a serious proposition for critical apps, which makes testing essential. We've extracted and documented our internal testing tools, including our snapshot tests pytest plugin pytest-textual-snapshot.</p> <p>This gives devs powerful tools to ensure the quality of their apps. Let us know your thoughts on that!</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#release-notes","title":"Release notes","text":"<p>See the release page for the full details on this release.</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#whats-next","title":"What's next?","text":"<p>There's lots of features planned over the next few months. One feature I am particularly excited by is a widget to generate plots by wrapping the awesome Plotext library. Check out some early work on this feature:</p>"},{"location":"blog/2023/09/21/textual-0380-adds-a-syntax-aware-textarea/#join-us","title":"Join us","text":"<p>Join our Discord server if you want to discuss Textual with the Textualize devs, or the community.</p>"},{"location":"blog/2022/11/08/version-040/","title":"Version 0.4.0","text":"<p>We've released version 0.4.0 of Textual.</p> <p>As this is the first post tagged with <code>release</code> let me first explain where the blog fits in with releases. We plan on doing a post for every note-worthy release. Which likely means all but the most trivial updates (typos just aren't that interesting). Blog posts will be supplementary to release notes which you will find on the Textual repository.</p> <p>Blog posts will give a little more background for the highlights in a release, and a rationale for changes and new additions. We embrace building in public, which means that we would like you to be as up-to-date with new developments as if you were sitting in our office. It's a small office, and you might not be a fan of the Scottish weather (it's dreich), but you can at least be here virtually.</p> <p>Release 0.4.0 follows 0.3.0, released on October 31st. Here are the highlights of the update.</p>"},{"location":"blog/2022/11/08/version-040/#updated-mount-method","title":"Updated Mount Method","text":"<p>The mount method has seen some work. We've dropped the ability to assign an <code>id</code> via keyword attributes, which wasn't terribly useful. Now, an <code>id</code> must be assigned via the constructor. </p> <p>The mount method has also grown <code>before</code> and <code>after</code> parameters which tell Textual where to add a new Widget (the default was to add it to the end). Here are a few examples:</p> <pre><code># Mount at the start\nself.mount(Button(id=\"Buy Coffee\"), before=0)\n\n# Mount after a selector\nself.mount(Static(\"Password is incorrect\"), after=\"Dialog Input.-error\")\n\n# Mount after a specific widget\ntweet = self.query_one(\"Tweet\")\nself.mount(Static(\"Consider switching to Mastodon\"), after=tweet)\n</code></pre> <p>Textual needs much of the same kind of operations as the JS API exposed by the browser. But we are determined to make this way more intuitive. The new mount method is a step towards that. </p>"},{"location":"blog/2022/11/08/version-040/#faster-updates","title":"Faster Updates","text":"<p>Textual now writes to stdout in a thread. The upshot of this is that Textual can work on the next update before the terminal has displayed the previous frame.</p> <p>This means smoother updates all round! You may notice this when scrolling and animating, but even if you don't, you will have more CPU cycles to play with in your Textual app.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2ca3Oa3Fx1MDAxNsff91NkPG8r3fdLZ86cybW5t401SXPmmVx1MDAwZUFUXCKK4WIunX73Z0FsXHUwMDAwI2pcdTAwMTKDTPLCKlx1MDAxYvZebNaP/1prQ39/WFurhXdDu/Z5rWbfWqbrtHzzpvYx3j6y/cDxXHUwMDA20ESS34FcdTAwMTf5VrJnN1xmh8HnT5/6pt+zw6FrWrYxcoLIdIMwajmeYXn9T05o94P/xZ/HZt/+79Drt0LfSFx1MDAwN6nbLSf0/IexbNfu24MwgN7/XHUwMDBmv9fWfiefXHUwMDE563zbXG7NQce1k1x1MDAwM5Km1ECK1eTWY2+QXHUwMDE4SzDDVFx1MDAxMk7Q41x1MDAxZU6wXHUwMDA144V2XHUwMDBimttgs522xJtq55fW8dVgOzo971xuWd857UaDzct02Lbjuo3wzn2YXG7T6kZ+xqgg9L2efea0wi6044ntj8dcdTAwMDVcdTAwMWXMQnqU70Wd7sBcdTAwMGWC3DHe0LSc8C7ehlLzXHUwMDFmZuHzWrrlXHUwMDE2filuKClcdTAwMTVcdTAwMTVCYc6kXHUwMDE0j63J8ZxcdTAwMWGEU41cdTAwMDThXGL+Ju3a9FxcuFx1MDAxNGDXf6hgbUumll2aVq9cdTAwMDPmXHJa6T6EqEtbKJXudfP3fJkyiJSUUclcdTAwMWZcdTAwMWK7ttPphtDKkKGlXCJgI5KYXHUwMDExRVMr7ORqxC2USMZcdTAwMWVcdTAwMWLioYd7rcQx/pmczK7pXHUwMDBmx5NWXHUwMDBi4lx1MDAxZlx1MDAxObNji7cnvSrrWZlcdTAwMGJ+2T5qXHUwMDFjOMdcciFcdTAwMWPinp9uXHUwMDFmXHUwMDA218HPx75yblx1MDAxONq3Ye2x4c/H6d3m9v646IBpt+Nv6Vx0R8OW+eCwWFxiqWGKJaY09Vx1MDAwMNdcdTAwMTn0oHFcdTAwMTC5brrNs3qpj3/I2PtMuDQthotKXHUwMDA03pa5YPPgut9ccr5aR0PyvVlf92+PLbp/9l1UXHUwMDFkrjp4q0GRXHUwMDE2XHUwMDA0cy01opzk8FwiXGJcdTAwMWKEUnBuJqTChFx1MDAxN+LF27Rlsdl42YJphabhRVxiM4RmkjMmgFx1MDAxZq5ewFx1MDAxONxcdTAwMGaVwHBcdTAwMDaqXFzIml/I/p55MrpAw9b1tT/sbl37J29cdNn0XHUwMDAxn1x1MDAwM1x1MDAxOUwkUrxcdTAwMTTIXHUwMDE4xkWQYSm4RIhxsTBkw1x1MDAxZt++7l1cdTAwMWW1aGRcdTAwMWTgId9wej/vulWHjFx0XHUwMDBljGFcdTAwMDJcdTAwMTOviKSgXCJcdTAwMTNcdTAwMTImXGbMlVx1MDAxNFx1MDAxOCeuzYohW6mGYaQg2lx1MDAxMFx1MDAxNJNy+dq17qXd22t2b2lvyLqX9uHoXHUwMDFifku+plx1MDAwZlhRXHUwMDExY1pcdTAwMTbxJZhcIkhgtLiG3e2qKPq1dVx1MDAxZlx1MDAxYzXNkfn91t05cdpVx4tQaVx1MDAwMFVcdTAwMTju/pJzzSfo0spA0FwiXHUwMDE555RLnLnZVE/CXGLinCnKsChcdTAwMTexg63v6Ng+6nxcdTAwMGbCbvO62d7mqH/2lohNXHUwMDFmcHWI5ezMJoikXGIuTFx1MDAxOIeQnujFxWt2oFBRuupCXHUwMDE4TIBzM1xuai2QyONFkDZcYokjyPiCKKqXXHUwMDExIT6FKyOZjzRlg9ExPlx1MDAwMJVcdTAwMTBYv4VCLTOaSi+5N1xiXHUwMDFizn2ScaDc1lx1MDAxZLPvuHe5q5b4aOxGyfjZeVxmbFx1MDAxODNxSpXbe911OrFcdTAwMTfXLDhcdTAwMGLbzzl46Fim+7hD32m1svpigVx0JvTp7y2S23i+03FcdTAwMDam+yNv4YuIK6x3MKmpQGRxMZud/FZcdTAwMTQ3TJmBsODgUFxcQFx1MDAwMqry+Vx1MDAxOFx1MDAxNpCPMVxu07BENXuKWyZcdTAwMGKcgVx1MDAxYqaEXHUwMDBirbF8XHUwMDAztVrmnf91uJ35Tsm0zSnTTdL2YOCLYCvOzTjHXHUwMDFhJluphXGbXHUwMDFkQ1RcdTAwMTQ3iqnBXHUwMDE1Y5prXHUwMDA0mZGarH5cYlx1MDAwM0muYFx1MDAxZYA1ls18ViFuXHUwMDEwNCrMdbniVjJtK1x1MDAxMLc5SU8p4iYgZ6BU4cWDydlZcUVx44BcdTAwMWKjWsPpclx1MDAxOVdCJsSNXHUwMDE5XHUwMDE4JE/qh1xmSqo3wW1BcVx1MDAwMyvB0pJDyXevbXNcbngv0LbZ1ZHMZE4gJ1x0QpqpZ1x1MDAwNJT7I3SAdjZa/kE/XHUwMDFhnUdHfp1wXXXkMKKGXHUwMDAy5WJcYkI1hjjOIcewNFx1MDAwNChcdTAwMWZCY5ErJG7FpUfQZ1x1MDAwMVx1MDAwMW/JdVx1MDAxMeF87TaO2DpB9+bJSe8wwvhm9Jq6yFx1MDAxYnU7r9wyfcC02/G3alQ0OS1cXJbjRGhCsmvAc2Wy8+XQPJDfnOZF65c2zZsrc++u6szWMUlcdTAwMTa9OTi8oFwiXHUwMDBlTfPUXG6QUak4pH/JqncxtasvaWKCQEhFdpGnXHUwMDE0dCN2u3s9ijbcXHUwMDAzT9zwweHVcc/uvVx1MDAxZd2ldztcdTAwMGbd6Vx1MDAwM1ZcdTAwMTVdrYvQJZpoXHIh7uJye9A7adCGa91ftK9+7Gy2T5v3vdOqo0spMTAnXHUwMDAwLlx1MDAxMVxmXCJZzfLkYmFcYlx1MDAxZcdcdTAwMWRcdTAwMGbAZG51lVx1MDAxMlxcolC85l82tPvWyW5k4u0uP6xcdTAwMWaMblx1MDAwNlx1MDAwM1Cr6PXQLr3bedBOXHUwMDFmsKLQSsSLoMVcdTAwMWHFSal+XHUwMDA2tdH2VXR4tyt/ycPG9lx1MDAxNW9IsnfxperUYsRcZsqFwpJSXHUwMDExL2boPLWgt5CfYyrwPGorILiSY1x1MDAxNa9Olczu1sXXy0NN7ky457Gj4O6871xmL1/P7tK7ncfu9Fx1MDAwMVfHbmHtVlx1MDAxND9YoyA4XHUwMDA0aJ+R286OayqKbZ0jXHUwMDAzUYRcdTAwMTVcdTAwMDI448WSiYdDmcRcdTAwMDZcdTAwMTNSUPqQ3L7Rasli9du4sqWIxO+7orSC+u2cXHUwMDE0b5n1W4xcdTAwMGLjWy21ZOCKiyM3u1xuUFHkMMeGjlx1MDAxN/0gxGVxOWmCOEhcXLlcdTAwMDYh1VgnXG62yvXJeMVcdTAwMDRcdKrouyau/Fx1MDAxYe6cOuhcdTAwMTLXJ8lcZt5cdTAwMTSDm756xuM3syOJqvKmkEFcdTAwMTDDXHUwMDFh4jnIx8hEOlx0XHUwMDAyJyghT+PF8vVNQ85cdTAwMGKRqX7XXHUwMDBmXHUwMDAzrEDe5iRUS5U3XZxcdFIpiFr8VaPZKXdFYaMxbCBtTGGqp1x1MDAxNG/i7IwhJMRY2+Sb4Lbg+iRcdTAwMDfkJc247jvErXxtm1N0XFyitlx1MDAxNT5cdTAwMGKAXHUwMDA1XCKCaJEpy8yj7eJLdK+Q02tcXHX3XHUwMDFhO1dnW0PvdLfqtGFFXGZcdTAwMTRnZVx1MDAwNCdcdTAwMGZcdTAwMDPofCippVx1MDAwMUmdYip+qlx1MDAxM9LZV7FWXFwoXHUwMDE1U2osT2mjXHUwMDA0bn/wUX4kSXRptG3Ybc9/XHUwMDFlbq7dXHUwMDBlZ8BcdTAwMTZ6w1wi0nJnMYnV2JJcdTAwMTdxVfg6XHUwMDA0ZkzHIUqmejePK9usb1x1MDAwNH3xrd+MzlG9j++3tjevK8+VIIZcdTAwMDBqXG64ojxeoVx1MDAxMFxuKVx1MDAxND9BOut1o9eRlcn9ZpAlKKVSKVa+jpVI1no7J0qrXHUwMDAz68GQmVxcmb7v3UxNxlDhujxcdTAwMDQjSHKK9OJoscb53k7n+HJ9py72/P3dU7y19cKHaSafynzDV424QWAvTjWjkIzhiXSMXCJlcFx1MDAwMOLvXHUwMDAzbK9Lx4rJgsFccqD872NymE5J0LChMFx1MDAwNKtiSuSIOFFcdTAwMWGJXHUwMDE3vIueWFg2cUFo+uGGM2g5g87kIfagVdDimkG46fX7TlxiZnzznEE4uUfS73rs7V3bfEJcdTAwMGX0nG2rhb4zsYI2jDvNL4uk39ZSz0l+PH7/5+PUvVx0llx1MDAwNlI4juhxPreI/+rI0EhcdTAwMDGAmPB5PVx1MDAxNTtH0lPqXHUwMDE3aUdcdTAwMWay/z5Xb0XxS/SIKU3gfNLLPrdGc/Szuf+r88VcdTAwMTXO6c9r+/asqe2rqt9cdTAwMTXqXFxcdTAwMTlcdTAwMTBcdTAwMWRcblx1MDAxZf+PXHUwMDFjQiOevytAKG9gzcZcdTAwMDXRV69CzLgtLCS4mFx0grR8529t/HD6lYhkXHUwMDEzO1x1MDAxZbj6MEa2Zlx1MDAwZYeNMC7SfFx1MDAxZVNcdTAwMDZcdTAwMTfAaY1PMe2tNnLsm40pXHUwMDFl0E7+4l5cdTAwMTNWYyrsePp///nw51+TJY25In0= UpdateWriteUpdateWriteUpdateWriteUpdateWriteBeforeAfterTime"},{"location":"blog/2022/11/08/version-040/#multiple-css-paths","title":"Multiple CSS Paths","text":"<p>Up to version 0.3.0, Textual would only read a single CSS file set in the <code>CSS_PATH</code> class variable. You can now supply a list of paths if you have more than one CSS file.</p> <p>This change was prompted by tuilwindcss which brings a TailwindCSS like approach to building Textual Widgets. Also check out calmcode.io by the same author, which is an amazing resource.</p>"},{"location":"blog/2022/12/11/version-060/","title":"Textual 0.6.0 adds a treemendous new widget","text":"<p>A new release of Textual lands 3 weeks after the previous release -- and it's a big one.</p> <p>Information</p> <p>If you're new here, Textual is TUI framework for Python.</p>"},{"location":"blog/2022/12/11/version-060/#tree-control","title":"Tree Control","text":"<p>The headline feature of version 0.6.0 is a new tree control built from the ground-up. The previous Tree control suffered from an overly complex API and wasn't scalable (scrolling slowed down with 1000s of nodes).</p> <p>This new version has a simpler API and is highly scalable (no slowdown with larger trees). There are also a number of visual enhancements in this version.</p> <p>Here's a very simple example:</p> Outputtree.py <p> TreeApp \u25bc\u00a0Dune \u2517\u2501\u2501\u00a0\u25bc\u00a0Characters \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Paul \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Jessica \u00a0\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0Chani </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Tree\n\n\nclass TreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        tree: Tree[dict] = Tree(\"Dune\")\n        tree.root.expand()\n        characters = tree.root.add(\"Characters\", expand=True)\n        characters.add_leaf(\"Paul\")\n        characters.add_leaf(\"Jessica\")\n        characters.add_leaf(\"Chani\")\n        yield tree\n\n\nif __name__ == \"__main__\":\n    app = TreeApp()\n    app.run()\n</code></pre> <p>Here's the tree control being used to navigate some JSON (json_tree.py in the examples directory).</p> <p>I'm biased of course, but I think this terminal based tree control is more usable (and even prettier) than just about anything I've seen on the web or desktop. So much of computing tends to organize itself in to a tree that I think this widget will find a lot of uses. </p> <p>The Tree control forms the foundation of the DirectoryTree widget, which has also been updated. Here it is used in the code_browser.py example:</p>"},{"location":"blog/2022/12/11/version-060/#list-view","title":"List View","text":"<p>We have a new ListView control to navigate and select items in a list. Items can be widgets themselves, which makes this a great platform for building more sophisticated controls.</p> Outputlist_view.pylist_view.css <p> ListViewExample One Two Three \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, ListItem, ListView\n\n\nclass ListViewExample(App):\n    CSS_PATH = \"list_view.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ListViewExample()\n    app.run()\n</code></pre> <pre><code>\n</code></pre>"},{"location":"blog/2022/12/11/version-060/#placeholder","title":"Placeholder","text":"<p>The Placeholder widget was broken since the big CSS update. We've brought it back and given it a bit of a polish.</p> <p>Use this widget in place of custom widgets you have yet to build when designing your UI. The colors are automatically cycled to differentiate one placeholder from the next. You can click a placeholder to cycle between its ID, size, and lorem ipsum text.</p> Outputplaceholder.pyplaceholder.css <p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3 #p5Placeholder Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0 Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0 33\u00a0x\u00a011nec\u00a0libero\u00a0quis\u00a0gravida.\u00a034\u00a0x\u00a011 Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0 Nullam\u00a0imperdiet\u00a0sem\u00a0tellus,\u00a0 sed\u00a0vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0 amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0consectetur\u00a0 adipiscing\u00a0elit.\u00a0Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0Nullam\u00a0 imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0vehicula\u00a0nisl\u00a0faucibus50\u00a0x\u00a011 sit\u00a0amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sed lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0sapien\u00a0sapien congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0pellentesque\u00a0quam\u00a0quam\u00a0 vel\u00a0nisl.\u00a0Curabitur\u00a0vulputate\u00a0erat\u00a0pellentesque\u00a0 mauris\u00a0posuere,\u00a0non\u00a0dictum\u00a0risus\u00a0mattis. Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0consectetur\u00a0Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0consectetur\u00a0 adipiscing\u00a0elit.\u00a0Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0accumsan.\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0Nullam\u00a0gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula.\u00a0Nullam\u00a0 imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0vehicula\u00a0nisl\u00a0faucibusimperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0vehicula\u00a0nisl\u00a0faucibus sit\u00a0amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sedsit\u00a0amet.\u00a0Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sed lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0sapien\u00a0sapienlacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0sapien\u00a0sapien congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0pellentesque\u00a0quam\u00a0quam\u00a0congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0pellentesque\u00a0quam\u00a0quam\u00a0 vel\u00a0nisl.\u00a0Curabitur\u00a0vulputate\u00a0erat\u00a0pellentesque\u00a0vel\u00a0nisl.\u00a0Curabitur\u00a0vulputate\u00a0erat\u00a0pellentesque\u00a0 mauris\u00a0posuere,\u00a0non\u00a0dictum\u00a0risus\u00a0mattis.mauris\u00a0posuere,\u00a0non\u00a0dictum\u00a0risus\u00a0mattis. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal, VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass PlaceholderApp(App):\n    CSS_PATH = \"placeholder.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield VerticalScroll(\n            Container(\n                Placeholder(\"This is a custom label for p1.\", id=\"p1\"),\n                Placeholder(\"Placeholder p2 here!\", id=\"p2\"),\n                Placeholder(id=\"p3\"),\n                Placeholder(id=\"p4\"),\n                Placeholder(id=\"p5\"),\n                Placeholder(),\n                Horizontal(\n                    Placeholder(variant=\"size\", id=\"col1\"),\n                    Placeholder(variant=\"text\", id=\"col2\"),\n                    Placeholder(variant=\"size\", id=\"col3\"),\n                    id=\"c1\",\n                ),\n                id=\"bot\",\n            ),\n            Container(\n                Placeholder(variant=\"text\", id=\"left\"),\n                Placeholder(variant=\"size\", id=\"topright\"),\n                Placeholder(variant=\"text\", id=\"botright\"),\n                id=\"top\",\n            ),\n            id=\"content\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = PlaceholderApp()\n    app.run()\n</code></pre> <pre><code>\n</code></pre>"},{"location":"blog/2022/12/11/version-060/#fixes","title":"Fixes","text":"<p>As always, there are a number of fixes in this release. Mostly related to layout. See CHANGELOG.md for the details.</p>"},{"location":"blog/2022/12/11/version-060/#whats-next","title":"What's next?","text":"<p>The next release will focus on pain points we discovered while in a dog-fooding phase (see the DevLog for details on what Textual devs have been building).</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/","title":"Textual 0.37.0 adds a command palette","text":"<p>Textual version 0.37.0 has landed! The highlight of this release is the new command palette.</p> <p>A command palette gives users quick access to features in your app. If you hit ctrl+backslash in a Textual app, it will bring up the command palette where you can start typing commands. The commands are matched with a fuzzy search, so you only need to type two or three characters to get to any command.</p> <p>Here's a video of it in action:</p> <p>Adding your own commands to the command palette is a piece of cake. Here's the (command) Provider class used in the example above:</p> <pre><code>class ColorCommands(Provider):\n    \"\"\"A command provider to select colors.\"\"\"\n\n    async def search(self, query: str) -&gt; Hits:\n        \"\"\"Called for each key.\"\"\"\n        matcher = self.matcher(query)\n        for color in COLOR_NAME_TO_RGB.keys():\n            score = matcher.match(color)\n            if score &gt; 0:\n                yield Hit(\n                    score,\n                    matcher.highlight(color),\n                    partial(self.app.post_message, SwitchColor(color)),\n                )\n</code></pre> <p>And here is how you add a provider to your app:</p> <pre><code>class ColorApp(App):\n    \"\"\"Experiment with the command palette.\"\"\"\n\n    COMMANDS = App.COMMANDS | {ColorCommands}\n</code></pre> <p>We're excited about this feature because it is a step towards bringing a common user interface to Textual apps.</p> <p>Quote</p> <p>It's a Textual app. I know this.</p> <p>\u2014 You, maybe.</p> <p>The goal is to be able to build apps that may look quite different, but take no time to learn, because once you learn how to use one Textual app, you can use them all.</p> <p>See the Guide for details on how to work with the command palette.</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/#what-else","title":"What else?","text":"<p>Also in 0.37.0 we have a new Collapsible widget, which is a great way of adding content while avoiding a cluttered screen.</p> <p>And of course, bug fixes and other updates. See the release page for the full details.</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/#whats-next","title":"What's next?","text":"<p>Coming very soon, is a new TextEditor widget. This is a super powerful widget to enter arbitrary text, with beautiful syntax highlighting for a number of languages. We're expecting that to land next week. Watch this space, or join the Discord server if you want to be the first to try it out.</p>"},{"location":"blog/2023/09/15/textual-0370-adds-a-command-palette/#join-us","title":"Join us","text":"<p>Join our Discord server if you want to discuss Textual with the Textualize devs, or the community.</p>"},{"location":"blog/2024/02/20/remote-memory-profiling-with-memray/","title":"Remote memory profiling with Memray","text":"<p>Memray is a memory profiler for Python, built by some very smart devs at Bloomberg. It is a fantastic tool to identify memory leaks in your code or other libraries (down to the C level)!</p> <p>They recently added a Textual interface which looks amazing, and lets you monitor your process right from the terminal:</p> <p></p> <p>You would typically run this locally, or over a ssh session, but it is also possible to serve the interface over the web with the help of textual-web. I'm not sure if even the Memray devs themselves are aware of this, but here's how.</p> <p>First install Textual web (ideally with pipx) alongside Memray:</p> <pre><code>pipx install textual-web\n</code></pre> <p>Now you can serve Memray with the following command (replace the text in quotes with your Memray options):</p> <pre><code>textual-web -r \"memray run --live -m http.server\"\n</code></pre> <p>This will return a URL you can use to access the Memray app from anywhere. Here's a quick video of that in action:</p>"},{"location":"blog/2024/02/20/remote-memory-profiling-with-memray/#found-this-interesting","title":"Found this interesting?","text":"<p>Join our Discord server if you want to discuss this post with the Textual devs or community.</p>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/","title":"Letting your cook multitask while bringing water to a boil","text":"<p>Whenever you are cooking a time-consuming meal, you want to multitask as much as possible. For example, you do not want to stand still while you wait for a pot of water to start boiling. Similarly, you want your applications to remain responsive (i.e., you want the cook to \u201cmultitask\u201d) while they do some time-consuming operations in the background (e.g., while the water heats up).</p> <p>The animation below shows an example of an application that remains responsive (colours on the left still change on click) even while doing a bunch of time-consuming operations (shown on the right).</p> <p></p> <p>In this blog post, I will teach you how to multitask like a good cook.</p>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/#wasting-time-staring-at-pots","title":"Wasting time staring at pots","text":"<p>There is no point in me presenting a solution to a problem if you don't understand the problem I am trying to solve. Suppose we have an application that needs to display a huge amount of data that needs to be read and parsed from a file. The first time I had to do something like this, I ended up writing an application that \u201cblocked\u201d. This means that while the application was reading and parsing the data, nothing else worked.</p> <p>To exemplify this type of scenario, I created a simple application that spends five seconds preparing some data. After the data is ready, we display a <code>Label</code> on the right that says that the data has been loaded. On the left, the app has a big rectangle (a custom widget called <code>ColourChanger</code>) that you can click and that changes background colours randomly.</p> <p>When you start the application, you can click the rectangle on the left to change the background colour of the <code>ColourChanger</code>, as the animation below shows:</p> <p></p> <p>However, as soon as you press <code>l</code> to trigger the data loading process, clicking the <code>ColourChanger</code> widget doesn't do anything. The app doesn't respond because it is busy working on the data. This is the code of the app so you can try it yourself:</p> <pre><code>import time\nfrom random import randint\n\nfrom textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Grid, VerticalScroll\nfrom textual.widget import Widget\nfrom textual.widgets import Footer, Label\n\n\nclass ColourChanger(Widget):  # (1)!\n    def on_click(self) -&gt; None:\n        self.styles.background = Color(\n            randint(1, 255),\n            randint(1, 255),\n            randint(1, 255),\n        )\n\n\nclass MyApp(App[None]):\n    BINDINGS = [(\"l\", \"load\", \"Load data\")]  # (2)!\n    CSS = \"\"\"\n    Grid {\n        grid-size: 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            ColourChanger(),\n            VerticalScroll(id=\"log\"),\n        )\n        yield Footer()\n\n    def action_load(self) -&gt; None:  # (3)!\n        time.sleep(5)  # (4)!\n        self.query_one(\"#log\").mount(Label(\"Data loaded \u2705\"))\n\n\nMyApp().run()\n</code></pre> <ol> <li>The widget <code>ColourChanger</code> changes colours, randomly, when clicked.</li> <li>We create a binding to the key <code>l</code> that runs an action that we know will take some time (for example, reading and parsing a huge file).</li> <li>The method <code>action_load</code> is responsible for starting our time-consuming task and then reporting back.</li> <li>To simplify things a bit, our \u201ctime-consuming task\u201d is just standing still for 5 seconds.</li> </ol> <p>I think it is easy to understand why the widget <code>ColourChanger</code> stops working when we hit the <code>time.sleep</code> call if we consider the cooking analogy I have written about before in my blog. In short, Python behaves like a lone cook in a kitchen:</p> <ul> <li>the cook can be clever and multitask. For example, while water is heating up and being brought to a boil, the cook can go ahead and chop some vegetables.</li> <li>however, there is only one cook in the kitchen, so if the cook is chopping up vegetables, they can't be seasoning a salad.</li> </ul> <p>Things like \u201cchopping up vegetables\u201d and \u201cseasoning a salad\u201d are blocking, i.e., they need the cook's time and attention. In the app that I showed above, the call to <code>time.sleep</code> is blocking, so the cook can't go and do anything else until the time interval elapses.</p>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/#how-can-a-cook-multitask","title":"How can a cook multitask?","text":"<p>It makes a lot of sense to think that a cook would multitask in their kitchen, but Python isn't like a smart cook. Python is like a very dumb cook who only ever does one thing at a time and waits until each thing is completely done before doing the next thing. So, by default, Python would act like a cook who fills up a pan with water, starts heating the water, and then stands there staring at the water until it starts boiling instead of doing something else. It is by using the module <code>asyncio</code> from the standard library that our cook learns to do other tasks while awaiting the completion of the things they already started doing.</p> <p>Textual is an async framework, which means it knows how to interoperate with the module <code>asyncio</code> and this will be the solution to our problem. By using <code>asyncio</code> with the tasks we want to run in the background, we will let the application remain responsive while we load and parse the data we need, or while we crunch the numbers we need to crunch, or while we connect to some slow API over the Internet, or whatever it is you want to do.</p> <p>The module <code>asyncio</code> uses the keyword <code>async</code> to know which functions can be run asynchronously. In other words, you use the keyword <code>async</code> to identify functions that contain tasks that would otherwise force the cook to waste time. (Functions with the keyword <code>async</code> are called coroutines.)</p> <p>The module <code>asyncio</code> also introduces a function <code>asyncio.create_task</code> that you can use to run coroutines concurrently. So, if we create a coroutine that is in charge of doing the time-consuming operation and then run it with <code>asyncio.create_task</code>, we are well on our way to fix our issues.</p> <p>However, the keyword <code>async</code> and <code>asyncio.create_task</code> alone aren't enough. Consider this modification of the previous app, where the method <code>action_load</code> now uses <code>asyncio.create_task</code> to run a coroutine who does the sleeping:</p> <pre><code>import asyncio\nimport time\nfrom random import randint\n\nfrom textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Grid, VerticalScroll\nfrom textual.widget import Widget\nfrom textual.widgets import Footer, Label\n\n\nclass ColourChanger(Widget):\n    def on_click(self) -&gt; None:\n        self.styles.background = Color(\n            randint(1, 255),\n            randint(1, 255),\n            randint(1, 255),\n        )\n\n\nclass MyApp(App[None]):\n    BINDINGS = [(\"l\", \"load\", \"Load data\")]\n    CSS = \"\"\"\n    Grid {\n        grid-size: 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            ColourChanger(),\n            VerticalScroll(id=\"log\"),\n        )\n        yield Footer()\n\n    def action_load(self) -&gt; None:  # (1)!\n        asyncio.create_task(self._do_long_operation())  # (2)!\n\n    async def _do_long_operation(self) -&gt; None:  # (3)!\n        time.sleep(5)\n        self.query_one(\"#log\").mount(Label(\"Data loaded \u2705\"))\n\n\nMyApp().run()\n</code></pre> <ol> <li>The action method <code>action_load</code> now defers the heavy lifting to another method we created.</li> <li>The time-consuming operation can be run concurrently with <code>asyncio.create_task</code> because it is a coroutine.</li> <li>The method <code>_do_long_operation</code> has the keyword <code>async</code>, so it is a coroutine.</li> </ol> <p>This modified app also works but it suffers from the same issue as the one before! The keyword <code>async</code> tells Python that there will be things inside that function that can be awaited by the cook. That is, the function will do some time-consuming operation that doesn't require the cook's attention. However, we need to tell Python which time-consuming operation doesn't require the cook's attention, i.e., which time-consuming operation can be awaited, with the keyword <code>await</code>.</p> <p>Whenever we want to use the keyword <code>await</code>, we need to do it with objects that are compatible with it. For many things, that means using specialised libraries:</p> <ul> <li>instead of <code>time.sleep</code>, one can use <code>await asyncio.sleep</code>;</li> <li>instead of the module <code>requests</code> to make Internet requests, use <code>aiohttp</code>; or</li> <li>instead of using the built-in tools to read files, use <code>aiofiles</code>.</li> </ul>"},{"location":"blog/2022/12/07/letting-your-cook-multitask-while-bringing-water-to-a-boil/#achieving-good-multitasking","title":"Achieving good multitasking","text":"<p>To fix the last example application, all we need to do is replace the call to <code>time.sleep</code> with a call to <code>asyncio.sleep</code> and then use the keyword <code>await</code> to signal Python that we can be doing something else while we sleep. The animation below shows that we can still change colours while the application is completing the time-consuming operation.</p> CodeAnimation <pre><code>import asyncio\nfrom random import randint\n\nfrom textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Grid, VerticalScroll\nfrom textual.widget import Widget\nfrom textual.widgets import Footer, Label\n\n\nclass ColourChanger(Widget):\n    def on_click(self) -&gt; None:\n        self.styles.background = Color(\n            randint(1, 255),\n            randint(1, 255),\n            randint(1, 255),\n        )\n\n\nclass MyApp(App[None]):\n    BINDINGS = [(\"l\", \"load\", \"Load data\")]\n    CSS = \"\"\"\n    Grid {\n        grid-size: 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            ColourChanger(),\n            VerticalScroll(id=\"log\"),\n        )\n        yield Footer()\n\n    def action_load(self) -&gt; None:\n        asyncio.create_task(self._do_long_operation())\n\n    async def _do_long_operation(self) -&gt; None:\n        self.query_one(\"#log\").mount(Label(\"Starting \u23f3\"))  # (1)!\n        await asyncio.sleep(5)  # (2)!\n        self.query_one(\"#log\").mount(Label(\"Data loaded \u2705\"))  # (3)!\n\n\nMyApp().run()\n</code></pre> <ol> <li>We create a label that tells the user that we are starting our time-consuming operation.</li> <li>We <code>await</code> the time-consuming operation so that the application remains responsive.</li> <li>We create a label that tells the user that the time-consuming operation has been concluded.</li> </ol> <p></p> <p>Because our time-consuming operation runs concurrently, everything else in the application still works while we await for the time-consuming operation to finish. In particular, we can keep changing colours (like the animation above showed) but we can also keep activating the binding with the key <code>l</code> to start multiple instances of the same time-consuming operation! The animation below shows just this:</p> <p></p> <p>Warning</p> <p>The animation GIFs in this blog post show low-quality colours in an attempt to reduce the size of the media files you have to download to be able to read this blog post. If you run Textual locally you will see beautiful colours \u2728</p>"},{"location":"blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/","title":"Using Rich Inspect to interrogate Python objects","text":"<p>The Rich library has a few functions that are admittedly a little out of scope for a terminal color library. One such function is <code>inspect</code> which is so useful you may want to <code>pip install rich</code> just for this feature.</p> <p>The easiest way to describe <code>inspect</code> is that it is Python's builtin <code>help()</code> but easier on the eye (and with a few more features). If you invoke it with any object, <code>inspect</code> will display a nicely formatted report on that object \u2014 which makes it great for interrogating objects from the REPL. Here's an example:</p> <pre><code>&gt;&gt;&gt; from rich import inspect\n&gt;&gt;&gt; text_file = open(\"foo.txt\", \"w\")\n&gt;&gt;&gt; inspect(text_file)\n</code></pre> <p>Here we're inspecting a file object, but it could be literally anything. You will see the following output in the terminal:</p> Rich \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500&lt;class'_io.TextIOWrapper'&gt;\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502Character\u00a0and\u00a0line\u00a0based\u00a0layer\u00a0over\u00a0a\u00a0BufferedIOBase\u00a0object,\u00a0buffer.\u2502 \u2502\u2502 \u2502\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2502\u2502&lt;_io.TextIOWrappername='foo.txt'mode='w'encoding='UTF-8'&gt;\u2502\u2502 \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2502\u2502 \u2502buffer\u00a0=&lt;_io.BufferedWritername='foo.txt'&gt;\u2502 \u2502closed\u00a0=False\u2502 \u2502encoding\u00a0='UTF-8'\u2502 \u2502errors\u00a0='strict'\u2502 \u2502line_buffering\u00a0=False\u2502 \u2502mode\u00a0='w'\u2502 \u2502name\u00a0='foo.txt'\u2502 \u2502newlines\u00a0=None\u2502 \u2502write_through\u00a0=False\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>By default, <code>inspect</code> will generate a data-oriented summary with a text representation of the object and its data attributes. You can also add <code>methods=True</code> to show all the methods in the public API. Here's an example:</p> <pre><code>&gt;&gt;&gt; inspect(text_file, methods=True)\n</code></pre> Rich \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500&lt;class'_io.TextIOWrapper'&gt;\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502Character\u00a0and\u00a0line\u00a0based\u00a0layer\u00a0over\u00a0a\u00a0BufferedIOBase\u00a0object,\u00a0buffer.\u2502 \u2502\u2502 \u2502\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2502\u2502&lt;_io.TextIOWrappername='foo.txt'mode='w'encoding='UTF-8'&gt;\u2502\u2502 \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2502\u2502 \u2502buffer\u00a0=&lt;_io.BufferedWritername='foo.txt'&gt;\u2502 \u2502closed\u00a0=False\u2502 \u2502encoding\u00a0='UTF-8'\u2502 \u2502errors\u00a0='strict'\u2502 \u2502line_buffering\u00a0=False\u2502 \u2502mode\u00a0='w'\u2502 \u2502name\u00a0='foo.txt'\u2502 \u2502newlines\u00a0=None\u2502 \u2502write_through\u00a0=False\u2502 \u2502close\u00a0=def\u00a0close():Flush\u00a0and\u00a0close\u00a0the\u00a0IO\u00a0object.\u2502 \u2502detach\u00a0=def\u00a0detach():Separate\u00a0the\u00a0underlying\u00a0buffer\u00a0from\u00a0the\u00a0TextIOBase\u00a0and\u00a0return\u00a0it.\u2502 \u2502fileno\u00a0=def\u00a0fileno():Returns\u00a0underlying\u00a0file\u00a0descriptor\u00a0if\u00a0one\u00a0exists.\u2502 \u2502flush\u00a0=def\u00a0flush():Flush\u00a0write\u00a0buffers,\u00a0if\u00a0applicable.\u2502 \u2502isatty\u00a0=def\u00a0isatty():Return\u00a0whether\u00a0this\u00a0is\u00a0an\u00a0'interactive'\u00a0stream.\u2502 \u2502read\u00a0=def\u00a0read(size=-1,\u00a0/):Read\u00a0at\u00a0most\u00a0n\u00a0characters\u00a0from\u00a0stream.\u2502 \u2502readable\u00a0=def\u00a0readable():Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0reading.\u2502 \u2502readline\u00a0=def\u00a0readline(size=-1,\u00a0/):Read\u00a0until\u00a0newline\u00a0or\u00a0EOF.\u2502 \u2502readlines\u00a0=def\u00a0readlines(hint=-1,\u00a0/):Return\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0from\u00a0the\u00a0stream.\u2502 \u2502reconfigure\u00a0=def\u00a0reconfigure(*,\u00a0encoding=None,\u00a0errors=None,\u00a0newline=None,\u00a0line_buffering=None,\u00a0\u2502 \u2502write_through=None):Reconfigure\u00a0the\u00a0text\u00a0stream\u00a0with\u00a0new\u00a0parameters.\u2502 \u2502seek\u00a0=def\u00a0seek(cookie,\u00a0whence=0,\u00a0/):Change\u00a0stream\u00a0position.\u2502 \u2502seekable\u00a0=def\u00a0seekable():Return\u00a0whether\u00a0object\u00a0supports\u00a0random\u00a0access.\u2502 \u2502tell\u00a0=def\u00a0tell():Return\u00a0current\u00a0stream\u00a0position.\u2502 \u2502truncate\u00a0=def\u00a0truncate(pos=None,\u00a0/):Truncate\u00a0file\u00a0to\u00a0size\u00a0bytes.\u2502 \u2502writable\u00a0=def\u00a0writable():Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0writing.\u2502 \u2502write\u00a0=def\u00a0write(text,\u00a0/):\u2502 \u2502Write\u00a0string\u00a0to\u00a0stream.\u2502 \u2502Returns\u00a0the\u00a0number\u00a0of\u00a0characters\u00a0written\u00a0(which\u00a0is\u00a0always\u00a0equal\u00a0to\u2502 \u2502the\u00a0length\u00a0of\u00a0the\u00a0string).\u2502 \u2502writelines\u00a0=def\u00a0writelines(lines,\u00a0/):Write\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0to\u00a0stream.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>The documentation is summarized by default to avoid generating verbose reports. If you want to see the full unabbreviated help you can add <code>help=True</code>:</p> <pre><code>&gt;&gt;&gt; inspect(text_file, methods=True, help=True)\n</code></pre> Rich \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500&lt;class'_io.TextIOWrapper'&gt;\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502Character\u00a0and\u00a0line\u00a0based\u00a0layer\u00a0over\u00a0a\u00a0BufferedIOBase\u00a0object,\u00a0buffer.\u2502 \u2502\u2502 \u2502encoding\u00a0gives\u00a0the\u00a0name\u00a0of\u00a0the\u00a0encoding\u00a0that\u00a0the\u00a0stream\u00a0will\u00a0be\u2502 \u2502decoded\u00a0or\u00a0encoded\u00a0with.\u00a0It\u00a0defaults\u00a0to\u00a0locale.getencoding().\u2502 \u2502\u2502 \u2502errors\u00a0determines\u00a0the\u00a0strictness\u00a0of\u00a0encoding\u00a0and\u00a0decoding\u00a0(see\u2502 \u2502help(codecs.Codec)\u00a0or\u00a0the\u00a0documentation\u00a0for\u00a0codecs.register)\u00a0and\u2502 \u2502defaults\u00a0to\u00a0\"strict\".\u2502 \u2502\u2502 \u2502newline\u00a0controls\u00a0how\u00a0line\u00a0endings\u00a0are\u00a0handled.\u00a0It\u00a0can\u00a0be\u00a0None,\u00a0'',\u2502 \u2502'\\n',\u00a0'\\r',\u00a0and\u00a0'\\r\\n'.\u00a0\u00a0It\u00a0works\u00a0as\u00a0follows:\u2502 \u2502\u2502 \u2502*\u00a0On\u00a0input,\u00a0if\u00a0newline\u00a0is\u00a0None,\u00a0universal\u00a0newlines\u00a0mode\u00a0is\u2502 \u2502\u00a0\u00a0enabled.\u00a0Lines\u00a0in\u00a0the\u00a0input\u00a0can\u00a0end\u00a0in\u00a0'\\n',\u00a0'\\r',\u00a0or\u00a0'\\r\\n',\u00a0and\u2502 \u2502\u00a0\u00a0these\u00a0are\u00a0translated\u00a0into\u00a0'\\n'\u00a0before\u00a0being\u00a0returned\u00a0to\u00a0the\u2502 \u2502\u00a0\u00a0caller.\u00a0If\u00a0it\u00a0is\u00a0'',\u00a0universal\u00a0newline\u00a0mode\u00a0is\u00a0enabled,\u00a0but\u00a0line\u2502 \u2502\u00a0\u00a0endings\u00a0are\u00a0returned\u00a0to\u00a0the\u00a0caller\u00a0untranslated.\u00a0If\u00a0it\u00a0has\u00a0any\u00a0of\u2502 \u2502\u00a0\u00a0the\u00a0other\u00a0legal\u00a0values,\u00a0input\u00a0lines\u00a0are\u00a0only\u00a0terminated\u00a0by\u00a0the\u00a0given\u2502 \u2502\u00a0\u00a0string,\u00a0and\u00a0the\u00a0line\u00a0ending\u00a0is\u00a0returned\u00a0to\u00a0the\u00a0caller\u00a0untranslated.\u2502 \u2502\u2502 \u2502*\u00a0On\u00a0output,\u00a0if\u00a0newline\u00a0is\u00a0None,\u00a0any\u00a0'\\n'\u00a0characters\u00a0written\u00a0are\u2502 \u2502\u00a0\u00a0translated\u00a0to\u00a0the\u00a0system\u00a0default\u00a0line\u00a0separator,\u00a0os.linesep.\u00a0If\u2502 \u2502\u00a0\u00a0newline\u00a0is\u00a0''\u00a0or\u00a0'\\n',\u00a0no\u00a0translation\u00a0takes\u00a0place.\u00a0If\u00a0newline\u00a0is\u00a0any\u2502 \u2502\u00a0\u00a0of\u00a0the\u00a0other\u00a0legal\u00a0values,\u00a0any\u00a0'\\n'\u00a0characters\u00a0written\u00a0are\u00a0translated\u2502 \u2502\u00a0\u00a0to\u00a0the\u00a0given\u00a0string.\u2502 \u2502\u2502 \u2502If\u00a0line_buffering\u00a0is\u00a0True,\u00a0a\u00a0call\u00a0to\u00a0flush\u00a0is\u00a0implied\u00a0when\u00a0a\u00a0call\u00a0to\u2502 \u2502write\u00a0contains\u00a0a\u00a0newline\u00a0character.\u2502 \u2502\u2502 \u2502\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2502\u2502&lt;_io.TextIOWrappername='foo.txt'mode='w'encoding='UTF-8'&gt;\u2502\u2502 \u2502\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2502\u2502 \u2502buffer\u00a0=&lt;_io.BufferedWritername='foo.txt'&gt;\u2502 \u2502closed\u00a0=False\u2502 \u2502encoding\u00a0='UTF-8'\u2502 \u2502errors\u00a0='strict'\u2502 \u2502line_buffering\u00a0=False\u2502 \u2502mode\u00a0='w'\u2502 \u2502name\u00a0='foo.txt'\u2502 \u2502newlines\u00a0=None\u2502 \u2502write_through\u00a0=False\u2502 \u2502close\u00a0=def\u00a0close():\u2502 \u2502Flush\u00a0and\u00a0close\u00a0the\u00a0IO\u00a0object.\u2502 \u2502\u2502 \u2502This\u00a0method\u00a0has\u00a0no\u00a0effect\u00a0if\u00a0the\u00a0file\u00a0is\u00a0already\u00a0closed.\u2502 \u2502detach\u00a0=def\u00a0detach():\u2502 \u2502Separate\u00a0the\u00a0underlying\u00a0buffer\u00a0from\u00a0the\u00a0TextIOBase\u00a0and\u00a0return\u00a0it.\u2502 \u2502\u2502 \u2502After\u00a0the\u00a0underlying\u00a0buffer\u00a0has\u00a0been\u00a0detached,\u00a0the\u00a0TextIO\u00a0is\u00a0in\u00a0an\u2502 \u2502unusable\u00a0state.\u2502 \u2502fileno\u00a0=def\u00a0fileno():\u2502 \u2502Returns\u00a0underlying\u00a0file\u00a0descriptor\u00a0if\u00a0one\u00a0exists.\u2502 \u2502\u2502 \u2502OSError\u00a0is\u00a0raised\u00a0if\u00a0the\u00a0IO\u00a0object\u00a0does\u00a0not\u00a0use\u00a0a\u00a0file\u00a0descriptor.\u2502 \u2502flush\u00a0=def\u00a0flush():\u2502 \u2502Flush\u00a0write\u00a0buffers,\u00a0if\u00a0applicable.\u2502 \u2502\u2502 \u2502This\u00a0is\u00a0not\u00a0implemented\u00a0for\u00a0read-only\u00a0and\u00a0non-blocking\u00a0streams.\u2502 \u2502isatty\u00a0=def\u00a0isatty():\u2502 \u2502Return\u00a0whether\u00a0this\u00a0is\u00a0an\u00a0'interactive'\u00a0stream.\u2502 \u2502\u2502 \u2502Return\u00a0False\u00a0if\u00a0it\u00a0can't\u00a0be\u00a0determined.\u2502 \u2502read\u00a0=def\u00a0read(size=-1,\u00a0/):\u2502 \u2502Read\u00a0at\u00a0most\u00a0n\u00a0characters\u00a0from\u00a0stream.\u2502 \u2502\u2502 \u2502Read\u00a0from\u00a0underlying\u00a0buffer\u00a0until\u00a0we\u00a0have\u00a0n\u00a0characters\u00a0or\u00a0we\u00a0hit\u00a0EOF.\u2502 \u2502If\u00a0n\u00a0is\u00a0negative\u00a0or\u00a0omitted,\u00a0read\u00a0until\u00a0EOF.\u2502 \u2502readable\u00a0=def\u00a0readable():\u2502 \u2502Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0reading.\u2502 \u2502\u2502 \u2502If\u00a0False,\u00a0read()\u00a0will\u00a0raise\u00a0OSError.\u2502 \u2502readline\u00a0=def\u00a0readline(size=-1,\u00a0/):\u2502 \u2502Read\u00a0until\u00a0newline\u00a0or\u00a0EOF.\u2502 \u2502\u2502 \u2502Returns\u00a0an\u00a0empty\u00a0string\u00a0if\u00a0EOF\u00a0is\u00a0hit\u00a0immediately.\u2502 \u2502readlines\u00a0=def\u00a0readlines(hint=-1,\u00a0/):\u2502 \u2502Return\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0from\u00a0the\u00a0stream.\u2502 \u2502\u2502 \u2502hint\u00a0can\u00a0be\u00a0specified\u00a0to\u00a0control\u00a0the\u00a0number\u00a0of\u00a0lines\u00a0read:\u00a0no\u00a0more\u2502 \u2502lines\u00a0will\u00a0be\u00a0read\u00a0if\u00a0the\u00a0total\u00a0size\u00a0(in\u00a0bytes/characters)\u00a0of\u00a0all\u2502 \u2502lines\u00a0so\u00a0far\u00a0exceeds\u00a0hint.\u2502 \u2502reconfigure\u00a0=def\u00a0reconfigure(*,\u00a0encoding=None,\u00a0errors=None,\u00a0newline=None,\u00a0line_buffering=None,\u00a0\u2502 \u2502write_through=None):\u2502 \u2502Reconfigure\u00a0the\u00a0text\u00a0stream\u00a0with\u00a0new\u00a0parameters.\u2502 \u2502\u2502 \u2502This\u00a0also\u00a0does\u00a0an\u00a0implicit\u00a0stream\u00a0flush.\u2502 \u2502seek\u00a0=def\u00a0seek(cookie,\u00a0whence=0,\u00a0/):\u2502 \u2502Change\u00a0stream\u00a0position.\u2502 \u2502\u2502 \u2502Change\u00a0the\u00a0stream\u00a0position\u00a0to\u00a0the\u00a0given\u00a0byte\u00a0offset.\u00a0The\u00a0offset\u00a0is\u2502 \u2502interpreted\u00a0relative\u00a0to\u00a0the\u00a0position\u00a0indicated\u00a0by\u00a0whence.\u00a0\u00a0Values\u2502 \u2502for\u00a0whence\u00a0are:\u2502 \u2502\u2502 \u2502*\u00a00\u00a0--\u00a0start\u00a0of\u00a0stream\u00a0(the\u00a0default);\u00a0offset\u00a0should\u00a0be\u00a0zero\u00a0or\u00a0positive\u2502 \u2502*\u00a01\u00a0--\u00a0current\u00a0stream\u00a0position;\u00a0offset\u00a0may\u00a0be\u00a0negative\u2502 \u2502*\u00a02\u00a0--\u00a0end\u00a0of\u00a0stream;\u00a0offset\u00a0is\u00a0usually\u00a0negative\u2502 \u2502\u2502 \u2502Return\u00a0the\u00a0new\u00a0absolute\u00a0position.\u2502 \u2502seekable\u00a0=def\u00a0seekable():\u2502 \u2502Return\u00a0whether\u00a0object\u00a0supports\u00a0random\u00a0access.\u2502 \u2502\u2502 \u2502If\u00a0False,\u00a0seek(),\u00a0tell()\u00a0and\u00a0truncate()\u00a0will\u00a0raise\u00a0OSError.\u2502 \u2502This\u00a0method\u00a0may\u00a0need\u00a0to\u00a0do\u00a0a\u00a0test\u00a0seek().\u2502 \u2502tell\u00a0=def\u00a0tell():Return\u00a0current\u00a0stream\u00a0position.\u2502 \u2502truncate\u00a0=def\u00a0truncate(pos=None,\u00a0/):\u2502 \u2502Truncate\u00a0file\u00a0to\u00a0size\u00a0bytes.\u2502 \u2502\u2502 \u2502File\u00a0pointer\u00a0is\u00a0left\u00a0unchanged.\u00a0\u00a0Size\u00a0defaults\u00a0to\u00a0the\u00a0current\u00a0IO\u2502 \u2502position\u00a0as\u00a0reported\u00a0by\u00a0tell().\u00a0\u00a0Returns\u00a0the\u00a0new\u00a0size.\u2502 \u2502writable\u00a0=def\u00a0writable():\u2502 \u2502Return\u00a0whether\u00a0object\u00a0was\u00a0opened\u00a0for\u00a0writing.\u2502 \u2502\u2502 \u2502If\u00a0False,\u00a0write()\u00a0will\u00a0raise\u00a0OSError.\u2502 \u2502write\u00a0=def\u00a0write(text,\u00a0/):\u2502 \u2502Write\u00a0string\u00a0to\u00a0stream.\u2502 \u2502Returns\u00a0the\u00a0number\u00a0of\u00a0characters\u00a0written\u00a0(which\u00a0is\u00a0always\u00a0equal\u00a0to\u2502 \u2502the\u00a0length\u00a0of\u00a0the\u00a0string).\u2502 \u2502writelines\u00a0=def\u00a0writelines(lines,\u00a0/):\u2502 \u2502Write\u00a0a\u00a0list\u00a0of\u00a0lines\u00a0to\u00a0stream.\u2502 \u2502\u2502 \u2502Line\u00a0separators\u00a0are\u00a0not\u00a0added,\u00a0so\u00a0it\u00a0is\u00a0usual\u00a0for\u00a0each\u00a0of\u00a0the\u2502 \u2502lines\u00a0provided\u00a0to\u00a0have\u00a0a\u00a0line\u00a0separator\u00a0at\u00a0the\u00a0end.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f <p>There are a few more arguments to refine the level of detail you need (private methods, dunder attributes etc). You can see the full range of options with this delightful little incantation:</p> <pre><code>&gt;&gt;&gt; inspect(inspect)\n</code></pre> <p>If you are interested in Rich or Textual, join our Discord server!</p>"},{"location":"blog/2023/07/27/using-rich-inspect-to-interrogate-python-objects/#addendum","title":"Addendum","text":"<p>Here's how to have <code>inspect</code> always available without an explicit import:</p> <p>Put this in your pythonrc file: pic.twitter.com/pXTi69ykZL</p>\u2014 Tushar Sadhwani (@sadhlife) July 27, 2023"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/","title":"Spinners and progress bars in Textual","text":"<p>One of the things I love about mathematics is that you can solve a problem just by guessing the correct answer. That is a perfectly valid strategy for solving a problem. The only thing you need to do after guessing the answer is to prove that your guess is correct.</p> <p>I used this strategy, to some success, to display spinners and indeterminate progress bars from Rich in Textual.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#display-an-indeterminate-progress-bar-in-textual","title":"Display an indeterminate progress bar in Textual","text":"<p>I have been playing around with Textual and recently I decided I needed an indeterminate progress bar to show that some data was loading. Textual is likely to get progress bars in the future, but I don't want to wait for the future! I want my progress bars now! Textual builds on top of Rich, so if Rich has progress bars, I reckoned I could use them in my Textual apps.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#progress-bars-in-rich","title":"Progress bars in Rich","text":"<p>Creating a progress bar in Rich is as easy as opening up the documentation for <code>Progress</code> and copying &amp; pasting the code.</p> CodeOutput <pre><code>import time\nfrom rich.progress import track\n\nfor _ in track(range(20), description=\"Processing...\"):\n    time.sleep(0.5)  # Simulate work being done\n</code></pre> <p></p> <p>The function <code>track</code> provides a very convenient interface for creating progress bars that keep track of a well-specified number of steps. In the example above, we were keeping track of some task that was going to take 20 steps to complete. (For example, if we had to process a list with 20 elements.) However, I am looking for indeterminate progress bars.</p> <p>Scrolling further down the documentation for <code>rich.progress</code> I found what I was looking for:</p> CodeOutput <pre><code>import time\nfrom rich.progress import Progress\n\nwith Progress() as progress:\n    _ = progress.add_task(\"Loading...\", total=None)  # (1)!\n    while True:\n        time.sleep(0.01)\n</code></pre> <ol> <li>Setting <code>total=None</code> is what makes it an indeterminate progress bar.</li> </ol> <p></p> <p>So, putting an indeterminate progress bar on the screen is easy. Now, I only needed to glue that together with the little I know about Textual to put an indeterminate progress bar in a Textual app.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#guessing-what-is-what-and-what-goes-where","title":"Guessing what is what and what goes where","text":"<p>What I want is to have an indeterminate progress bar inside my Textual app. Something that looks like this:</p> <p></p> <p>The GIF above shows just the progress bar. Obviously, the end goal is to have the progress bar be part of a Textual app that does something.</p> <p>So, when I set out to do this, my first thought went to the stopwatch app in the Textual tutorial because it has a widget that updates automatically, the <code>TimeDisplay</code>. Below you can find the essential part of the code for the <code>TimeDisplay</code> widget and a small animation of it updating when the stopwatch is started.</p> <code>TimeDisplay</code> widgetOutput <pre><code>from time import monotonic\n\nfrom textual.reactive import reactive\nfrom textual.widgets import Static\n\n\nclass TimeDisplay(Static):\n    \"\"\"A widget to display elapsed time.\"\"\"\n\n    start_time = reactive(monotonic)\n    time = reactive(0.0)\n    total = reactive(0.0)\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Event handler called when widget is added to the app.\"\"\"\n        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)\n\n    def update_time(self) -&gt; None:\n        \"\"\"Method to update time to current.\"\"\"\n        self.time = self.total + (monotonic() - self.start_time)\n\n    def watch_time(self, time: float) -&gt; None:\n        \"\"\"Called when the time attribute changes.\"\"\"\n        minutes, seconds = divmod(time, 60)\n        hours, minutes = divmod(minutes, 60)\n        self.update(f\"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}\")\n</code></pre> <p></p> <p>The reason the time display updates magically is due to the three methods that I highlighted in the code above:</p> <ol> <li>The method <code>on_mount</code> is called when the <code>TimeDisplay</code> widget is mounted on the app and, in it, we use the method <code>set_interval</code> to let Textual know that every <code>1 / 60</code> seconds we would like to call the method <code>update_time</code>. (In other words, we would like <code>update_time</code> to be called 60 times per second.)</li> <li>In turn, the method <code>update_time</code> (which is called automatically a bunch of times per second) will update the reactive attribute <code>time</code>. When this attribute update happens, the method <code>watch_time</code> kicks in.</li> <li>The method <code>watch_time</code> is a watcher method and gets called whenever the attribute <code>self.time</code> is assigned to.  So, if the method <code>update_time</code> is called a bunch of times per second, the watcher method <code>watch_time</code> is also called a bunch of times per second. In it, we create a nice representation of the time that has elapsed and we use the method <code>update</code> to update the time that is being displayed.</li> </ol> <p>I thought it would be reasonable if a similar mechanism needed to be in place for my progress bar, but then I realised that the progress bar seems to update itself... Looking at the indeterminate progress bar example from before, the only thing going on was that we used <code>time.sleep</code> to stop our program for a bit. We didn't do anything to update the progress bar... Look:</p> <pre><code>with Progress() as progress:\n    _ = progress.add_task(\"Loading...\", total=None)  # (1)!\n    while True:\n        time.sleep(0.01)\n</code></pre> <p>After pondering about this for a bit, I realised I would not need a watcher method for anything. The watcher method would only make sense if I needed to update an attribute related to some sort of artificial progress, but that clearly isn't needed to get the bar going...</p> <p>At some point, I realised that the object <code>progress</code> is the object of interest. At first, I thought <code>progress.add_task</code> would return the progress bar, but it actually returns the integer ID of the task added, so the object of interest is <code>progress</code>. Because I am doing nothing to update the bar explicitly, the object <code>progress</code> must be updating itself.</p> <p>The Textual documentation also says that we can build widgets from Rich renderables, so I concluded that if <code>Progress</code> were a renderable, then I could inherit from <code>Static</code> and use the method <code>update</code> to update the widget with my instance of <code>Progress</code> directly. I gave it a try and I put together this code:</p> <pre><code>from rich.progress import Progress, BarColumn\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass IndeterminateProgress(Static):\n    def __init__(self):\n        super().__init__(\"\")\n        self._bar = Progress(BarColumn())  # (1)!\n        self._bar.add_task(\"\", total=None)  # (2)!\n\n    def on_mount(self) -&gt; None:\n        # When the widget is mounted start updating the display regularly.\n        self.update_render = self.set_interval(\n            1 / 60, self.update_progress_bar\n        )  # (3)!\n\n    def update_progress_bar(self) -&gt; None:\n        self.update(self._bar)  # (4)!\n\n\nclass MyApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield IndeterminateProgress()\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <ol> <li>Create an instance of <code>Progress</code> that just cares about the bar itself (Rich progress bars can have a label, an indicator for the time left, etc).</li> <li>We add the indeterminate task with <code>total=None</code> for the indeterminate progress bar.</li> <li>When the widget is mounted on the app, we want to start calling <code>update_progress_bar</code> 60 times per second.</li> <li>To update the widget of the progress bar we just call the method <code>Static.update</code> with the <code>Progress</code> object because <code>self._bar</code> is a Rich renderable.</li> </ol> <p>And lo and behold, it worked:</p> <p></p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#proving-it-works","title":"Proving it works","text":"<p>I finished writing this piece of code and I was ecstatic because it was working! After all, my Textual app starts and renders the progress bar. And so, I shared this simple app with someone who wanted to do a similar thing, but I was left with a bad taste in my mouth because I couldn't really connect all the dots and explain exactly why it worked.</p> <p>Plot twist</p> <p>By the end of the blog post, I will be much closer to a full explanation!</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#display-a-rich-spinner-in-a-textual-app","title":"Display a Rich spinner in a Textual app","text":"<p>A day after creating my basic <code>IndeterminateProgress</code> widget, I found someone that was trying to display a Rich spinner in a Textual app. Actually, it was someone that had filed an issue against Rich. They didn't ask \u201chow can I display a Rich spinner in a Textual app?\u201d, but they filed an alleged bug that crept up on them when they tried displaying a spinner in a Textual app.</p> <p>When reading the issue I realised that displaying a Rich spinner looked very similar to displaying a Rich progress bar, so I made a tiny change to my code and tried to run it:</p> CodeSpinner running <pre><code>from rich.spinner import Spinner\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass SpinnerWidget(Static):\n    def __init__(self):\n        super().__init__(\"\")\n        self._spinner = Spinner(\"moon\")  # (1)!\n\n    def on_mount(self) -&gt; None:\n        self.update_render = self.set_interval(1 / 60, self.update_spinner)\n\n    def update_spinner(self) -&gt; None:\n        self.update(self._spinner)\n\n\nclass MyApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        yield SpinnerWidget()\n\n\nMyApp().run()\n</code></pre> <ol> <li>Instead of creating an instance of <code>Progress</code>, we create an instance of <code>Spinner</code> and save it so we can call <code>self.update(self._spinner)</code> later on.</li> </ol> <p></p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#losing-the-battle-against-pausing-the-animations","title":"Losing the battle against pausing the animations","text":"<p>After creating the progress bar and spinner widgets I thought of creating the little display that was shown at the beginning of the blog post:</p> <p></p> <p>When writing the code for this app, I realised both widgets had a lot of shared code and logic and I tried abstracting away their common functionality. That led to the code shown below (more or less) where I implemented the updating functionality in <code>IntervalUpdater</code> and then let the <code>IndeterminateProgressBar</code> and <code>SpinnerWidget</code> instantiate the correct Rich renderable.</p> <pre><code>from rich.progress import Progress, BarColumn\nfrom rich.spinner import Spinner\n\nfrom textual.app import RenderableType\nfrom textual.widgets import Button, Static\n\n\nclass IntervalUpdater(Static):\n    _renderable_object: RenderableType  # (1)!\n\n    def update_rendering(self) -&gt; None:  # (2)!\n        self.update(self._renderable_object)\n\n    def on_mount(self) -&gt; None:  # (3)!\n        self.interval_update = self.set_interval(1 / 60, self.update_rendering)\n\n\nclass IndeterminateProgressBar(IntervalUpdater):\n    \"\"\"Basic indeterminate progress bar widget based on rich.progress.Progress.\"\"\"\n    def __init__(self) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Progress(BarColumn())  # (4)!\n        self._renderable_object.add_task(\"\", total=None)\n\n\nclass SpinnerWidget(IntervalUpdater):\n    \"\"\"Basic spinner widget based on rich.spinner.Spinner.\"\"\"\n    def __init__(self, style: str) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Spinner(style)  # (5)!\n</code></pre> <ol> <li>Instances of <code>IntervalUpdate</code> should set the attribute <code>_renderable_object</code> to the instance of the Rich renderable that we want to animate.</li> <li>The methods <code>update_rendering</code> and <code>on_mount</code> are exactly the same as what we had before, both in the progress bar widget and in the spinner widget.</li> <li>The methods <code>update_rendering</code> and <code>on_mount</code> are exactly the same as what we had before, both in the progress bar widget and in the spinner widget.</li> <li>For an indeterminate progress bar we set the attribute <code>_renderable_object</code> to an instance of <code>Progress</code>.</li> <li>For a spinner we set the attribute <code>_renderable_object</code> to an instance of <code>Spinner</code>.</li> </ol> <p>But I wanted something more! I wanted to make my app similar to the stopwatch app from the terminal and thus wanted to add a \u201cPause\u201d and a \u201cResume\u201d button. These buttons should, respectively, stop the progress bar and the spinner animations and resume them.</p> <p>Below you can see the code I wrote and a short animation of the app working.</p> App codeCSSOutput <pre><code>from rich.progress import Progress, BarColumn\nfrom rich.spinner import Spinner\n\nfrom textual.app import App, ComposeResult, RenderableType\nfrom textual.containers import Grid, Horizontal, Vertical\nfrom textual.widgets import Button, Static\n\n\nclass IntervalUpdater(Static):\n    _renderable_object: RenderableType\n\n    def update_rendering(self) -&gt; None:\n        self.update(self._renderable_object)\n\n    def on_mount(self) -&gt; None:\n        self.interval_update = self.set_interval(1 / 60, self.update_rendering)\n\n    def pause(self) -&gt; None:  # (1)!\n        self.interval_update.pause()\n\n    def resume(self) -&gt; None:  # (2)!\n        self.interval_update.resume()\n\n\nclass IndeterminateProgressBar(IntervalUpdater):\n    \"\"\"Basic indeterminate progress bar widget based on rich.progress.Progress.\"\"\"\n    def __init__(self) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Progress(BarColumn())\n        self._renderable_object.add_task(\"\", total=None)\n\n\nclass SpinnerWidget(IntervalUpdater):\n    \"\"\"Basic spinner widget based on rich.spinner.Spinner.\"\"\"\n    def __init__(self, style: str) -&gt; None:\n        super().__init__(\"\")\n        self._renderable_object = Spinner(style)\n\n\nclass LiveDisplayApp(App[None]):\n    \"\"\"App showcasing some widgets that update regularly.\"\"\"\n    CSS_PATH = \"myapp.css\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Vertical(\n                Grid(\n                    SpinnerWidget(\"moon\"),\n                    IndeterminateProgressBar(),\n                    SpinnerWidget(\"aesthetic\"),\n                    SpinnerWidget(\"bouncingBar\"),\n                    SpinnerWidget(\"earth\"),\n                    SpinnerWidget(\"dots8Bit\"),\n                ),\n                Horizontal(\n                    Button(\"Pause\", id=\"pause\"),  # (3)!\n                    Button(\"Resume\", id=\"resume\", disabled=True),\n                ),\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:  # (4)!\n        pressed_id = event.button.id\n        assert pressed_id is not None\n        for widget in self.query(IntervalUpdater):\n            getattr(widget, pressed_id)()  # (5)!\n\n        for button in self.query(Button):  # (6)!\n            if button.id == pressed_id:\n                button.disabled = True\n            else:\n                button.disabled = False\n\n\nLiveDisplayApp().run()\n</code></pre> <ol> <li>The method <code>pause</code> looks at the attribute <code>interval_update</code> (returned by the method <code>set_interval</code>) and tells it to stop calling the method <code>update_rendering</code> 60 times per second.</li> <li>The method <code>resume</code> looks at the attribute <code>interval_update</code> (returned by the method <code>set_interval</code>) and tells it to resume calling the method <code>update_rendering</code> 60 times per second.</li> <li>We set two distinct IDs for the two buttons so we can easily tell which button was pressed and what the press of that button means.</li> <li>The event handler <code>on_button_pressed</code> will wait for button presses and will take care of pausing or resuming the animations.</li> <li>We look for all of the instances of <code>IntervalUpdater</code> in our app and use a little bit of introspection to call the correct method (<code>pause</code> or <code>resume</code>) in our widgets. Notice this was only possible because the buttons were assigned IDs that matched the names of the methods. (I love Python !)</li> <li>We go through our two buttons to disable the one that was just pressed and to enable the other one.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    height: 1fr;\n    align-horizontal: center;\n}\n\nButton {\n    margin: 0 3 0 3;\n}\n\nGrid {\n    height: 4fr;\n    align: center middle;\n    grid-size: 3 2;\n    grid-columns: 8;\n    grid-rows: 1;\n    grid-gutter: 1;\n    border: gray double;\n}\n\nIntervalUpdater {\n    content-align: center middle;\n}\n</code></pre> <p></p> <p>If you think this was a lot, take a couple of deep breaths before moving on.</p> <p>The only issue with my app is that... it does not work! If you press the button to pause the animations, it looks like the widgets are paused. However, you can see that if I move my mouse over the paused widgets, they update:</p> <p></p> <p>Obviously, that caught me by surprise, in the sense that I expected it work. On the other hand, this isn't surprising. After all, I thought I had guessed how I could solve the problem of displaying these Rich renderables that update live and I thought I knew how to pause and resume their animations, but I hadn't convinced myself I knew exactly why it worked.</p> <p>Warning</p> <p>This goes to show that sometimes it is not the best idea to commit code that you wrote and that works if you don't know why it works. The code might seem to work and yet have deficiencies that will hurt you further down the road.</p> <p>As it turns out, the reason why pausing is not working is that I did not grok why the rendering worked in the first place... So I had to go down that rabbit hole first.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#understanding-the-rich-rendering-magic","title":"Understanding the Rich rendering magic","text":""},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#how-staticupdate-works","title":"How <code>Static.update</code> works","text":"<p>The most basic way of creating a Textual widget is to inherit from <code>Widget</code> and implement the method <code>render</code> that just returns the thing that must be printed on the screen. Then, the widget <code>Static</code> provides some functionality on top of that: the method <code>update</code>.</p> <p>The method <code>Static.update(renderable)</code> is used to tell the widget in question that its method <code>render</code> (called when the widget needs to be drawn) should just return <code>renderable</code>. So, if the implementation of the method <code>IntervalUpdater.update_rendering</code> (the method that gets called 60 times per second) is this:</p> <pre><code>class IntervalUpdater(Static):\n    # ...\n    def update_rendering(self) -&gt; None:\n        self.update(self._renderable_object)\n</code></pre> <p>Then, we are essentially saying \u201chey, the thing in <code>self._renderable_object</code> is what must be returned whenever Textual asks you to render yourself. So, this really proves that both <code>Progress</code> and <code>Spinner</code> from Rich are renderables. But what is more, this shows that my implementation of <code>IntervalUpdater</code> can be simplified greatly! In fact, we can boil it down to just this:</p> <pre><code>class IntervalUpdater(Static):\n    _renderable_object: RenderableType\n\n    def __init__(self, renderable_object: RenderableType) -&gt; None:  # (1)!\n        super().__init__(renderable_object)  # (2)!\n\n    def on_mount(self) -&gt; None:\n        self.interval_update = self.set_interval(1 / 60, self.refresh)  # (3)!\n</code></pre> <ol> <li>To create an instance of <code>IntervalUpdater</code>, now we give it the Rich renderable that we want displayed. If this Rich renderable is something that updates over time, then those changes will be reflected in the rendering.</li> <li>We initialise <code>Static</code> with the renderable object itself, instead of initialising with the empty string <code>\"\"</code> and then updating repeatedly.</li> <li>We call <code>self.refresh</code> 60 times per second. We don't need the auxiliary method <code>update_rendering</code> because this widget (an instance of <code>Static</code>) already knows what its renderable is.</li> </ol> <p>Once you understand the code above you will realise that the previous implementation of <code>update_rendering</code> was actually doing superfluous work because the repeated calls to <code>self.update</code> always had the exact same object. Again, we see strong evidence that the Rich progress bars and the spinners have the inherent ability to display a different representation of themselves as time goes by.</p>"},{"location":"blog/2022/11/24/spinners-and-progress-bars-in-textual/#how-rich-spinners-get-updated","title":"How Rich spinners get updated","text":"<p>I kept seeing strong evidence that Rich spinners and Rich progress bars updated their own rendering but I still did not have actual proof. So, I went digging around to see how <code>Spinner</code> was implemented and I found this code (from the file <code>spinner.py</code> at the time of writing):</p> <pre><code>class Spinner:\n    # ...\n\n    def __rich_console__(\n        self, console: \"Console\", options: \"ConsoleOptions\"\n    ) -&gt; \"RenderResult\":\n        yield self.render(console.get_time())  # (1)!\n\n    # ...\n    def render(self, time: float) -&gt; \"RenderableType\":  # (2)!\n        # ...\n\n        frame_no = ((time - self.start_time) * self.speed) / (  # (3)!\n            self.interval / 1000.0\n        ) + self.frame_no_offset\n        # ...\n\n    # ...\n</code></pre> <ol> <li>The Rich spinner implements the function <code>__rich_console__</code> that is supposed to return the result of rendering the spinner. Instead, it defers its work to the method <code>render</code>... However, to call the method <code>render</code>, we need to pass the argument <code>console.get_time()</code>, which the spinner uses to know in which state it is!</li> <li>The method <code>render</code> takes a <code>time</code> and returns a renderable!</li> <li>To determine the frame number (the current look of the spinner) we do some calculations with the \u201ccurrent time\u201d, given by the parameter <code>time</code>, and the time when the spinner started!</li> </ol> <p>The snippet of code shown above, from the implementation of <code>Spinner</code>, explains why moving the mouse over a spinner (or a progress bar) that supposedly was paused makes it move. We no longer get repeated updates (60 times per second) because we told our app that we wanted to pause the result of <code>set_interval</code>, so we no longer get automatic updates. However, moving the mouse over the spinners and the progress bar makes Textual want to re-render them and, when it does, it figures out that time was not frozen (obviously!) and so the spinners and the progress bar have a different frame to show.</p> <p>To get a better feeling for this, do the following experiment:</p> <ol> <li>Run the command <code>textual console</code> in a terminal to open the Textual devtools console.</li> <li>Add a print statement like <code>print(\"Rendering from within spinner\")</code> to the beginning of the method <code>Spinner.render</code> (from Rich).</li> <li>Add a print statement like <code>print(\"Rendering static\")</code> to the beginning of the method <code>Static.render</code> (from Textual).</li> <li>Put a blank terminal and the devtools console side by side.</li> <li>Run the app: notice that you get a lot of both print statements.</li> <li>Hit the Pause button: the print statements stop.</li> <li>Move your mouse over a widget or two: you get a couple of print statements, one from the <code>Static.render</code> and another from the <code>Spinner.render</code>.</li> </ol> <p>The result of steps 6 and 7 are shown below. Notice that, in the beginning of the animation, the screen on the right shows some prints but is quiet because no more prints are coming in. When the mouse enters the screen and starts going over widgets, the screen on the right gets new prints in pairs, first from <code>Static.render</code> (which Textual calls to render the widget) and then from <code>Spinner.render</code> because ultimately we need to know how the Spinner looks.</p> <p></p> <p>Now, at this point, I made another educated guess and deduced that progress bars work in the same way! I still have to prove it, and I guess I will do so in another blog post, coming soon, where our spinner and progress bar widgets can be properly paused!</p> <p>I will see you soon </p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/","title":"Stealing Open Source code from Textual","text":"<p>I would like to talk about a serious issue in the Free and Open Source software world. Stealing code. You wouldn't steal a car would you?</p> <p>But you should steal code from Open Source projects. Respect the license (you may need to give attribution) but stealing code is not like stealing a car. If I steal your car, I have deprived you of a car. If you steal my open source code, I haven't lost anything.</p> <p>Warning</p> <p>I'm not advocating for piracy. Open source code gives you explicit permission to use it.</p> <p>From my point of view, I feel like code has greater value when it has been copied / modified in another project.</p> <p>There are a number of files and modules in Textual that could either be lifted as is, or wouldn't require much work to extract. I'd like to cover a few here. You might find them useful in your next project.</p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#loop-first-last","title":"Loop first / last","text":"<p>How often do you find yourself looping over an iterable and needing to know if an element is the first and/or last in the sequence? It's a simple thing, but I find myself needing this a lot, so I wrote some helpers in _loop.py.</p> <p>I'm sure there is an equivalent implementation on PyPI, but steal this if you need it.</p> <p>Here's an example of use:</p> <pre><code>for last, (y, line) in loop_last(enumerate(self.lines, self.region.y)):\n    yield move_to(x, y)\n    yield from line\n    if not last:\n        yield new_line\n</code></pre>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#lru-cache","title":"LRU Cache","text":"<p>Python's lru_cache can be the one-liner that makes your code orders of magnitude faster. But it has a few gotchas.</p> <p>The main issue is managing the lifetime of these caches. The decorator keeps a single global cache, which will keep a reference to every object in the function call. On an instance method that means you keep references to <code>self</code> for the lifetime of your app.</p> <p>For a more flexibility you can use the LRUCache implementation from Textual. This uses essentially the same algorithm as the stdlib decorator, but it is implemented as a container.</p> <p>Here's a quick example of its use. It works like a dictionary until you reach a maximum size. After that, new elements will kick out the element that was used least recently.</p> <pre><code>&gt;&gt;&gt; from textual._cache import LRUCache\n&gt;&gt;&gt; cache = LRUCache(maxsize=3)\n&gt;&gt;&gt; cache[\"foo\"] = 1\n&gt;&gt;&gt; cache[\"bar\"] = 2\n&gt;&gt;&gt; cache[\"baz\"] = 3\n&gt;&gt;&gt; dict(cache)\n{'foo': 1, 'bar': 2, 'baz': 3}\n&gt;&gt;&gt; cache[\"egg\"] = 4\n&gt;&gt;&gt; dict(cache)\n{'bar': 2, 'baz': 3, 'egg': 4}\n</code></pre> <p>In Textual, we use a LRUCache to store the results of rendering content to the terminal. For example, in a datatable it is too costly to render everything up front. So Textual renders only the lines that are currently visible on the \"screen\". The cache ensures that scrolling only needs to render the newly exposed lines, and lines that haven't been displayed in a while are discarded to save memory.</p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#color","title":"Color","text":"<p>Textual has a Color class which could be extracted in to a module of its own.</p> <p>The Color class can parse colors encoded in a variety of HTML and CSS formats. Color object support a variety of methods and operators you can use to manipulate colors, in a fairly natural way.</p> <p>Here's some examples in the REPL.</p> <pre><code>&gt;&gt;&gt; from textual.color import Color\n&gt;&gt;&gt; color = Color.parse(\"lime\")\n&gt;&gt;&gt; color\nColor(0, 255, 0, a=1.0)\n&gt;&gt;&gt; color.darken(0.8)\nColor(0, 45, 0, a=1.0)\n&gt;&gt;&gt; color + Color.parse(\"red\").with_alpha(0.1)\nColor(25, 229, 0, a=1.0)\n&gt;&gt;&gt; color = Color.parse(\"#12a30a\")\n&gt;&gt;&gt; color\nColor(18, 163, 10, a=1.0)\n&gt;&gt;&gt; color.css\n'rgb(18,163,10)'\n&gt;&gt;&gt; color.hex\n'#12A30A'\n&gt;&gt;&gt; color.monochrome\nColor(121, 121, 121, a=1.0)\n&gt;&gt;&gt; color.monochrome.hex\n'#797979'\n&gt;&gt;&gt; color.hsl\nHSL(h=0.3246187363834423, s=0.8843930635838151, l=0.33921568627450976)\n&gt;&gt;&gt;\n</code></pre> <p>There are some very good color libraries in PyPI, which you should also consider using. But Textual's Color class is lean and performant, with no C dependencies.</p>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#geometry","title":"Geometry","text":"<p>This may be my favorite module in Textual: geometry.py.</p> <p>The geometry module contains a number of classes responsible for storing and manipulating 2D geometry. There is an <code>Offset</code> class which is a two dimensional point. A <code>Region</code> class which is a rectangular region defined by a coordinate and dimensions. There is a <code>Spacing</code> class which defines additional space around a region. And there is a <code>Size</code> class which defines the dimensions of an area by its width and height.</p> <p>These objects are used by Textual's layout engine and compositor, which makes them the oldest and most thoroughly tested part of the project.</p> <p>There's a lot going on in this module, but the docstrings are quite detailed and have unicode art like this to help explain things.</p> <pre><code>              cut_x \u2193\n          \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n          \u2502        \u2502 \u2502   \u2502\n          \u2502    0   \u2502 \u2502 1 \u2502\n          \u2502        \u2502 \u2502   \u2502\n  cut_y \u2192 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n          \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2510\n          \u2502    2   \u2502 \u2502 3 \u2502\n          \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2518\n</code></pre>"},{"location":"blog/2022/11/20/stealing-open-source-code-from-textual/#you-should-steal-our-code","title":"You should steal our code","text":"<p>There is a lot going on in the Textual Repository. Including a CSS parser, renderer, layout and compositing engine. All written in pure Python. Steal it with my blessing.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/","title":"Things I learned building a text editor for the terminal","text":"<p><code>TextArea</code> is the latest widget to be added to Textual's growing collection. It provides a multi-line space to edit text, and features optional syntax highlighting for a selection of languages.</p> <p></p> <p>Adding a <code>TextArea</code> to your Textual app is as simple as adding this to your <code>compose</code> method:</p> <pre><code>yield TextArea()\n</code></pre> <p>Enabling syntax highlighting for a language is as simple as:</p> <pre><code>yield TextArea(language=\"python\")\n</code></pre> <p>Working on the <code>TextArea</code> widget for Textual taught me a lot about Python and my general approach to software engineering. It gave me an appreciation for the subtle functionality behind the editors we use on a daily basis \u2014 features we may not even notice, despite some engineer spending hours perfecting it to provide a small boost to our development experience.</p> <p>This post is a tour of some of these learnings.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#vertical-cursor-movement-is-more-than-just-cursor_row","title":"Vertical cursor movement is more than just <code>cursor_row++</code>","text":"<p>When you move the cursor vertically, you can't simply keep the same column index and clamp it within the line. Editors should maintain the visual column offset where possible, meaning they must account for double-width emoji (sigh \ud83d\ude14) and East-Asian characters.</p> <p></p> <p>Notice that although the cursor is on column 11 while on line 1, it lands on column 6 when it arrives at line 3. This is because the 6th character of line 3 visually aligns with the 11th character of line 1.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#edits-from-other-sources-may-move-my-cursor","title":"Edits from other sources may move my cursor","text":"<p>There are two ways to interact with the <code>TextArea</code>:</p> <ol> <li>You can type into it.</li> <li>You can make API calls to edit the content in it.</li> </ol> <p>In the example below, <code>Hello, world!\\n</code> is repeatedly inserted at the start of the document via the API. Notice that this updates the location of my cursor, ensuring that I don't lose my place.</p> <p></p> <p>This subtle feature should aid those implementing collaborative and multi-cursor editing.</p> <p>This turned out to be one of the more complex features of the whole project, and went through several iterations before I was happy with the result.</p> <p>Thankfully it resulted in some wonderful Tetris-esque whiteboards along the way!</p> <p> </p> A TetrisArea white-boarding session. <p>Sometimes stepping away from the screen and scribbling on a whiteboard with your colleagues (thanks Dave!) is what's needed to finally crack a tough problem.</p> <p>Many thanks to David Brochart for sending me down this rabbit hole!</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#spending-a-few-minutes-running-a-profiler-can-be-really-beneficial","title":"Spending a few minutes running a profiler can be really beneficial","text":"<p>While building the <code>TextArea</code> widget I avoided heavy optimisation work that may have affected readability or maintainability.</p> <p>However, I did run a profiler in an attempt to detect flawed assumptions or mistakes which were affecting the performance of my code.</p> <p>I spent around 30 minutes profiling <code>TextArea</code> using pyinstrument, and the result was a ~97% reduction in the time taken to handle a key press. What an amazing return on investment for such a minimal time commitment!</p> <p> </p> \"pyinstrument -r html\" produces this beautiful output. <p>pyinstrument unveiled two issues that were massively impacting performance.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#1-reparsing-highlighting-queries-on-each-key-press","title":"1. Reparsing highlighting queries on each key press","text":"<p>I was constructing a tree-sitter <code>Query</code> object on each key press, incorrectly assuming it was a low-overhead call. This query was completely static, so I moved it into the constructor ensuring the object was created only once. This reduced key processing time by around 94% - a substantial and very much noticeable improvement.</p> <p>This seems obvious in hindsight, but the code in question was written earlier in the project and had been relegated in my mind to \"code that works correctly and will receive less attention from here on out\". pyinstrument quickly brought this code back to my attention and highlighted it as a glaring performance bug.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#2-namedtuples-are-slower-than-i-expected","title":"2. NamedTuples are slower than I expected","text":"<p>In Python, <code>NamedTuple</code>s are slow to create relative to <code>tuple</code>s, and this cost was adding up inside an extremely hot loop which was instantiating a large number of them. pyinstrument revealed that a large portion of the time during syntax highlighting was spent inside <code>NamedTuple.__new__</code>.</p> <p>Here's a quick benchmark which constructs 10,000 <code>NamedTuple</code>s:</p> <pre><code>\u276f hyperfine -w 2 'python sandbox/darren/make_namedtuples.py'\nBenchmark 1: python sandbox/darren/make_namedtuples.py\n  Time (mean \u00b1 \u03c3):      15.9 ms \u00b1   0.5 ms    [User: 12.8 ms, System: 2.5 ms]\n  Range (min \u2026 max):    15.2 ms \u2026  18.4 ms    165 runs\n</code></pre> <p>Here's the same benchmark using <code>tuple</code> instead:</p> <pre><code>\u276f hyperfine -w 2 'python sandbox/darren/make_tuples.py'\nBenchmark 1: python sandbox/darren/make_tuples.py\n  Time (mean \u00b1 \u03c3):       9.3 ms \u00b1   0.5 ms    [User: 6.8 ms, System: 2.0 ms]\n  Range (min \u2026 max):     8.7 ms \u2026  12.3 ms    256 runs\n</code></pre> <p>Switching to <code>tuple</code> resulted in another noticeable increase in responsiveness. Key-press handling time dropped by almost 50%! Unfortunately, this change does impact readability. However, the scope in which these tuples were used was very small, and so I felt it was a worthy trade-off.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#syntax-highlighting-is-very-different-from-what-i-expected","title":"Syntax highlighting is very different from what I expected","text":"<p>In order to support syntax highlighting, we make use of the tree-sitter library, which maintains a syntax tree representing the structure of our document.</p> <p>To perform highlighting, we follow these steps:</p> <ol> <li>The user edits the document.</li> <li>We inform tree-sitter of the location of this edit.</li> <li>tree-sitter intelligently parses only the subset of the document impacted by the change, updating the tree.</li> <li>We run a query against the tree to retrieve ranges of text we wish to highlight.</li> <li>These ranges are mapped to styles (defined by the chosen \"theme\").</li> <li>These styles to the appropriate text ranges when rendering the widget.</li> </ol> <p> </p> Cycling through a few of the builtin themes. <p>Another benefit that I didn't consider before working on this project is that tree-sitter parsers can also be used to highlight syntax errors in a document. This can be useful in some situations - for example, highlighting mismatched HTML closing tags:</p> <p> </p> Highlighting mismatched closing HTML tags in red. <p>Before building this widget, I was oblivious as to how we might approach syntax highlighting. Without tree-sitter's incremental parsing approach, I'm not sure reasonable performance would have been feasible.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#edits-are-replacements","title":"Edits are replacements","text":"<p>All single-cursor edits can be distilled into a single behaviour: <code>replace_range</code>. This replaces a range of characters with some text. We can use this one method to easily implement deletion, insertion, and replacement of text.</p> <ul> <li>Inserting text is replacing a zero-width range with the text to insert.</li> <li>Pressing backspace (delete left) is just replacing the character behind the cursor with an empty   string.</li> <li>Selecting text and pressing delete is just replacing the selected text with an empty string.</li> <li>Selecting text and pasting is replacing the selected text with some other text.</li> </ul> <p>This greatly simplified my initial approach, which involved unique implementations for inserting and deleting.</p>"},{"location":"blog/2023/09/18/things-i-learned-while-building-textuals-textarea/#the-line-between-text-area-and-vscode-in-the-terminal","title":"The line between \"text area\" and \"VSCode in the terminal\"","text":"<p>A project like this has no clear finish line. There are always new features, optimisations, and refactors waiting to be made.</p> <p>So where do we draw the line?</p> <p>We want to provide a widget which can act as both a basic multiline text area that anyone can drop into their app, yet powerful and extensible enough to act as the foundation for a Textual-powered text editor.</p> <p>Yet, the more features we add, the more opinionated the widget becomes, and the less that users will feel like they can build it into their own thing. Finding the sweet spot between feature-rich and flexible is no easy task.</p> <p>I don't think the answer is clear, and I don't believe it's possible to please everyone.</p> <p>Regardless, I'm happy with where we've landed, and I'm really excited to see what people build using <code>TextArea</code> in the future!</p>"},{"location":"blog/2023/10/04/announcing-textual-plotext/","title":"Announcing textual-plotext","text":"<p>It's no surprise that a common question on the Textual Discord server is how to go about producing plots in the terminal. A popular solution that has been suggested is Plotext. While Plotext doesn't directly support Textual, it is easy to use with Rich and, because of this, we wanted to make it just as easy to use in your Textual applications.</p> <p>With this in mind we've created <code>textual-plotext</code>: a library that provides a widget for using Plotext plots in your app. In doing this we've tried our best to make it as similar as possible to using Plotext in a conventional Python script.</p> <p>Take this code from the Plotext README:</p> <pre><code>import plotext as plt\ny = plt.sin() # sinusoidal test signal\nplt.scatter(y)\nplt.title(\"Scatter Plot\") # to apply a title\nplt.show() # to finally plot\n</code></pre> <p>The Textual equivalent of this (including everything needed to make this a fully-working Textual application) is:</p> <pre><code>from textual.app import App, ComposeResult\n\nfrom textual_plotext import PlotextPlot\n\nclass ScatterApp(App[None]):\n\n    def compose(self) -&gt; ComposeResult:\n        yield PlotextPlot()\n\n    def on_mount(self) -&gt; None:\n        plt = self.query_one(PlotextPlot).plt\n        y = plt.sin() # sinusoidal test signal\n        plt.scatter(y)\n        plt.title(\"Scatter Plot\") # to apply a title\n\nif __name__ == \"__main__\":\n    ScatterApp().run()\n</code></pre> <p>When run the result will look like this:</p> <p></p> <p>Aside from a couple of the more far-out plot types<sup>1</sup> you should find that everything you can do with Plotext in a conventional script can also be done in a Textual application.</p> <p>Here's a small selection of screenshots from a demo built into the library, each of the plots taken from the Plotext README:</p> <p></p> <p></p> <p></p> <p></p> <p>A key design goal of this widget is that you can develop your plots so that the resulting code looks very similar to that in the Plotext documentation. The core difference is that, where you'd normally import the <code>plotext</code> module <code>as plt</code> and then call functions via <code>plt</code>, you instead use the <code>plt</code> property made available by the widget.</p> <p>You don't even need to call the <code>build</code> or <code>show</code> functions as <code>textual-plotext</code> takes care of this for you. You can see this in action in the scatter code shown earlier.</p> <p>Of course, moving any existing plotting code into your Textual app means you will need to think about how you get the data and when and where you build your plot. This might be where the Textual worker API becomes useful.</p> <p>We've included a longer-form example application that shows off the glorious Scottish weather we enjoy here at Textual Towers, with an application that uses workers to pull down weather data from a year ago and plot it.</p> <p></p> <p>If you are an existing Plotext user who wants to turn your plots into full terminal applications, we think this will be very familiar and accessible. If you're a Textual user who wants to add plots to your application, we think Plotext is a great library for this.</p> <p>If you have any questions about this, or anything else to do with Textual, feel free to come and join us on our Discord server or in our GitHub discussions.</p> <ol> <li> <p>Right now there's no animated gif or video support.\u00a0\u21a9</p> </li> </ol>"},{"location":"blog/2023/09/06/what-is-textual-web/","title":"What is Textual Web?","text":"<p>If you know us, you will know that we are the team behind Rich and Textual \u2014 two popular Python libraries that work magic in the terminal.</p> <p>Note</p> <p>Not to mention Rich-CLI, Trogon, and Frogmouth</p> <p>Today we are adding one project more to that lineup: textual-web.</p> <p>Textual Web takes a Textual-powered TUI and turns it in to a web application. Here's a video of that in action:</p> <p>With the <code>textual-web</code> command you can publish any Textual app on the web, making it available to anyone you send the URL to. This works without creating a socket server on your machine, so you won't have to configure firewalls and ports to share your applications.</p> <p>We're excited about the possibilities here. Textual web apps are fast to spin up and tear down, and they can run just about anywhere that has an outgoing internet connection. They can be built by a single developer without any experience with a traditional web stack. All you need is proficiency in Python and a little time to read our lovely docs.</p> <p>Future releases will expose more of the Web platform APIs to Textual apps, such as notifications and file system access. We plan to do this in a way that allows the same (Python) code to drive those features. For instance, a Textual app might save a file to disk in a terminal, but offer to download it in the browser.</p> <p>Also in the pipeline is PWA support, so you can build terminal apps, web apps, and desktop apps with a single codebase.</p> <p>Textual Web is currently in a public beta. Join our Discord server if you would like to help us test, or if you have any questions.</p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/","title":"To TUI or not to TUI","text":"<p>Tech moves pretty fast. If you don\u2019t stop and look around once in a while, you could miss it. And yet some technology feels like it has been around forever.</p> <p>Terminals are one of those forever-technologies.</p> <p>My interest is in Text User Interfaces:  interactive apps that run within a terminal. I spend lot of time thinking about where TUIs might fit within the tech ecosystem, and how much more they could be doing for developers. Hardly surprising, since that is what we do at Textualize.</p> <p>Recently I had the opportunity to test how new TUI projects would be received. You can consider these to be \"testing the water\", and hopefully representative of TUI apps in general.</p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/#the-projects","title":"The projects","text":"<p>In April we took a break from building Textual, to building apps with Textual. We had three ideas to work on, and three devs to do the work. One idea we parked for later. The other two were so promising we devoted more time to them. Both projects took around three developer-weeks to build, which also included work on Textual itself and standard duties for responding to issues / community requests. We released them in May.</p> <p>The first project was Frogmouth, a Markdown browser. I think this TUI does better than the equivalent web experience in many ways. The only notable missing feature is images, and that will happen before too long.</p> <p>Here's a screenshot:</p> Frogmouth /Users/willmcgugan/projects/textual/FAQ.md ContentsLocalBookmarksHistory\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u258e\u258a \u258eHow\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u258a \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e\u258a \u2503\u25bc\u00a0\u2160\u00a0Frequently\u00a0Asked\u00a0Questions\u2503\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Does\u00a0Textual\u00a0support\u00a0images?\u2503When\u00a0creating\u00a0your\u00a0App\u00a0class,\u00a0override\u00a0__init__\u00a0as\u00a0you\u00a0would\u00a0wheninheriting\u00a0normally.\u00a0For\u00a0example: \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0fix\u00a0ImportError\u00a0cannot\u00a0i\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0select\u00a0and\u00a0copy\u00a0text\u00a0in\u00a0\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0can\u00a0I\u00a0set\u00a0a\u00a0translucent\u00a0app\u00a0ba\u2503fromtextual.appimportApp,ComposeResult \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0center\u00a0a\u00a0widget\u00a0in\u00a0a\u00a0scre\u2503fromtextual.widgetsimportStatic \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0How\u00a0do\u00a0I\u00a0pass\u00a0arguments\u00a0to\u00a0an\u00a0app?\u2503 \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0do\u00a0some\u00a0key\u00a0combinations\u00a0never\u2503classGreetings(App[None]): \u2503\u251c\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0look\u00a0good\u00a0on\u00a0m\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2514\u2500\u2500\u00a0\u2161\u00a0Why\u00a0doesn't\u00a0Textual\u00a0support\u00a0ANSI\u00a0t\u2503\u2502\u00a0\u00a0\u00a0def__init__(self,greeting:str=\"Hello\",to_greet:str=\"World\")-&gt;None: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.greeting=greeting \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0self.to_greet=to_greet \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0super().__init__() \u2503\u2503\u2502\u00a0\u00a0\u00a0 \u2503\u2503\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;ComposeResult: \u2503\u2503\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yieldStatic(f\"{self.greeting},\u00a0{self.to_greet}\") \u2503\u2503 \u2503\u2503 \u2503\u2503Then\u00a0the\u00a0app\u00a0can\u00a0be\u00a0run,\u00a0passing\u00a0in\u00a0various\u00a0arguments;\u00a0for\u00a0example: \u2503\u2503\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0default\u00a0arguments. \u2503\u2503Greetings().run() \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0a\u00a0keyword\u00a0arguyment. \u2503\u2503Greetings(to_greet=\"davep\").run()\u2585\u2585 \u2503\u2503 \u2503\u2503#\u00a0Running\u00a0with\u00a0both\u00a0positional\u00a0arguments. \u2503\u2503Greetings(\"Well\u00a0hello\",\"there\").run() \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2503\u2589\u2503\u258e\u258a \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u00a0F1\u00a0\u00a0Help\u00a0\u00a0F2\u00a0\u00a0About\u00a0\u00a0CTRL+N\u00a0\u00a0Navigation\u00a0\u00a0CTRL+Q\u00a0\u00a0Quit\u00a0 <p>Info</p> <p>Quick aside about these \"screenshots\", because its a common ask. They aren't true screenshots, but rather SVGs exported by Textual.</p> <p>We posted Frogmouth on Hacker News and Reddit on a Sunday morning (US time). A day later, it had 1,000 stars and lots of positive feedback.</p> <p>The second project was Trogon, a library this time. Trogon automatically creates a TUI for command line apps. Same deal: we released it on a Sunday morning, and it reached 1K stars even quicker than Frogmouth.</p> Trogon sqlite-utilstransform v3.31Transform\u00a0a\u00a0table\u00a0beyond\u00a0the\u00a0capabilities\u00a0of\u00a0ALTER\u00a0TABLE \u258a\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258e disable-wal\u258a\u258a\u258e\u258e drop-table\u258a\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258e drop-view\u258a\u258e\u2587\u2587 dump\u258aOptions\u258e duplicate\u258a\u258e enable-counts\u258a--type\u00a0multiple\u00a0&lt;text\u00a0choice&gt;\u258e enable-fts\u258a\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u258e enable-wal\u258a\u2502\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2502\u258e extract\u258a\u2502\u258a\u258e\u2502\u258e\u2585\u2585 index-foreign-keys\u258a\u2502\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2502\u258e indexes\u258a\u2502\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2502\u258e insert\u258a\u2502\u258aSelect\u25b2\u258e\u2502\u258e insert-files\u258a\u2502\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2502\u258e install\u258a\u2514\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2518\u258e memory\u258a\u258aSelect\u258e\u258e optimize\u258a\u258aINTEGER\u258e\u258e populate-fts\u258a\u258aTEXT\u258e\u258e query\u258a\u258aFLOAT\u258e\u258e rebuild-fts\u258a\u258a\u258aBLOB\u258e\u258e\u258e reset-counts\u258a\u258a\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258e\u258e rows\u258a\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258e schema\u258a+\u00a0value\u258e search\u258aDrop\u00a0this\u00a0column\u258e tables\u258a\u258e transform\u258a--rename\u00a0multiple\u00a0&lt;text\u00a0text&gt;\u258e triggers\u258a\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u258e uninstall\u258a\u2502\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2502\u258e upsert\u258a\u2502\u258a\u258e\u2502\u258e vacuum views$\u00a0sqlite-utils\u00a0transform \u00a0CTRL+R\u00a0\u00a0Close\u00a0&amp;\u00a0Run\u00a0\u00a0CTRL+T\u00a0Focus\u00a0Command\u00a0Tree\u00a0\u00a0CTRL+O\u00a0\u00a0Command\u00a0Info\u00a0\u00a0CTRL+S\u00a0\u00a0Search\u00a0\u00a0F1\u00a0\u00a0About\u00a0 <p>Both of these projects are very young, but off to a great start. I'm looking forward to seeing how far we can taken them.</p> <p></p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/#wrapping-up","title":"Wrapping up","text":"<p>With previous generations of software, TUIs have required a high degree of motivation to build. That has changed with the work that we (and others) have been doing. A TUI can be a powerful and maintainable piece of software which works as a standalone project, or as a value-add to an existing project.</p> <p>As a forever-technology, a TUI is a safe bet.</p>"},{"location":"blog/2023/06/06/to-tui-or-not-to-tui/#discord","title":"Discord","text":"<p>Want to discuss this post with myself or other Textualize devs? Join our Discord server...</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/","title":"File magic with the Python standard library","text":"<p>I recently published Toolong, an app for viewing log files. There were some interesting technical challenges in building Toolong that I'd like to cover in this post.</p> <p>Python is awesome</p> <p>This isn't specifically Textual related. These techniques could be employed in any Python project.</p> <p>These techniques aren't difficult, and shouldn't be beyond anyone with an intermediate understanding of Python. They are the kind of \"if you know it you know it\" knowledge that you may not need often, but can make a massive difference when you do!</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#opening-large-files","title":"Opening large files","text":"<p>If you were to open a very large text file (multiple gigabyte in size) in an editor, you will almost certainly find that it takes a while. You may also find that it doesn't load at all because you don't have enough memory, or it disables features like syntax highlighting.</p> <p>This is because most app will do something analogous to this:</p> <pre><code>with open(\"access.log\", \"rb\") as log_file:\n    log_data = log_file.read()\n</code></pre> <p>All the data is read in to memory, where it can be easily processed. This is fine for most files of a reasonable size, but when you get in to the gigabyte territory the read and any additional processing will start to use a significant amount of time and memory.</p> <p>Yet Toolong can open a file of any size in a second or so, with syntax highlighting. It can do this because it doesn't need to read the entire log file in to memory. Toolong opens a file and reads only the portion of it required to display whatever is on screen at that moment. When you scroll around the log file, Toolong reads the data off disk as required -- fast enough that you may never even notice it.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#scanning-lines","title":"Scanning lines","text":"<p>There is an additional bit of work that Toolong has to do up front in order to show the file. If you open a large file you may see a progress bar and a message about \"scanning\".</p> <p>Toolong needs to know where every line starts and ends in a log file, so it can display a scrollbar bar and allow the user to navigate lines in the file. In other words it needs to know the offset of every new line (<code>\\n</code>) character within the file.</p> <p>This isn't a hard problem in itself. You might have imagined a loop that reads a chunk at a time and searches for new lines characters. And that would likely have worked just fine, but there is a bit of magic in the Python standard library that can speed that up.</p> <p>The mmap module is a real gem for this kind of thing. A memory mapped file is an OS-level construct that appears to load a file instantaneously. In Python you get an object which behaves like a <code>bytearray</code>, but loads data from disk when it is accessed. The beauty of this module is that you can work with files in much the same way as if you had read the entire file in to memory, while leaving the actual reading of the file to the OS.</p> <p>Here's the method that Toolong uses to scan for line breaks. Forgive the micro-optimizations, I was going for raw execution speed here.</p> <pre><code>    def scan_line_breaks(\n        self, batch_time: float = 0.25\n    ) -&gt; Iterable[tuple[int, list[int]]]:\n        \"\"\"Scan the file for line breaks.\n\n        Args:\n            batch_time: Time to group the batches.\n\n        Returns:\n            An iterable of tuples, containing the scan position and a list of offsets of new lines.\n        \"\"\"\n        fileno = self.fileno\n        size = self.size\n        if not size:\n            return\n        log_mmap = mmap.mmap(fileno, size, prot=mmap.PROT_READ)\n        rfind = log_mmap.rfind\n        position = size\n        batch: list[int] = []\n        append = batch.append\n        get_length = batch.__len__\n        monotonic = time.monotonic\n        break_time = monotonic()\n\n        while (position := rfind(b\"\\n\", 0, position)) != -1:\n            append(position)\n            if get_length() % 1000 == 0 and monotonic() - break_time &gt; batch_time:\n                break_time = monotonic()\n                yield (position, batch)\n                batch = []\n                append = batch.append\n        yield (0, batch)\n        log_mmap.close()\n</code></pre> <p>This code runs in a thread (actually a worker), and will generate line breaks in batches. Without batching, it risks slowing down the UI with millions of rapid events.</p> <p>It's fast because most of the work is done in <code>rfind</code>, which runs at C speed, while the OS reads from the disk.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#watching-a-file-for-changes","title":"Watching a file for changes","text":"<p>Toolong can tail files in realtime. When something appends to the file, it will be read and displayed virtually instantly. How is this done?</p> <p>You can easily poll a file for changes, by periodically querying the size or timestamp of a file until it changes. The downside of this is that you don't get notified immediately if a file changes between polls. You could poll at a very fast rate, but if you were to do that you would end up burning a lot of CPU for no good reason.</p> <p>There is a very good solution for this in the standard library. The selectors module is typically used for working with sockets (network data), but can also work with files (at least on macOS and Linux).</p> <p>Software developers are an unimaginative bunch when it comes to naming things</p> <p>Not to be confused with CSS selectors!    </p> <p>The selectors module can tell you precisely when a file can be read. It can do this very efficiently, because it relies on the OS to tell us when a file can be read, and doesn't need to poll.</p> <p>You register a file with a <code>Selector</code> object, then call <code>select()</code> which returns as soon as there is new data available for reading.</p> <p>See watcher.py in Toolong, which runs a thread to monitors files for changes with a selector.</p> <p>Addendum</p> <p>So it turns out that watching regular files for changes with selectors only works with <code>KqueueSelector</code> which is the default on macOS. Disappointingly, the Python docs aren't clear on this. Toolong will use a polling approach where this selector is unavailable.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#textual-learnings","title":"Textual learnings","text":"<p>This project was a chance for me to \"dogfood\" Textual. Other Textual devs have build some cool projects (Trogon and Frogmouth), but before Toolong I had only ever written example apps for docs.</p> <p>I paid particular attention to Textual error messages when working on Toolong, and improved many of them in Textual. Much of what I improved were general programming errors, and not Textual errors per se. For instance, if you forget to call <code>super()</code> on a widget constructor, Textual used to give a fairly cryptic error. It's a fairly common gotcha, even for experience devs, but now Textual will detect that and tell you how to fix it.</p> <p>There's a lot of other improvements which I thought about when working on this app. Mostly quality of life features that will make implementing some features more intuitive. Keep an eye out for those in the next few weeks.</p>"},{"location":"blog/2024/02/11/file-magic-with-the-python-standard-library/#found-this-interesting","title":"Found this interesting?","text":"<p>If you would like to talk about this post or anything Textual related, join us on the Discord server.</p>"},{"location":"css_types/","title":"CSS Types","text":"<p>CSS types define the values that Textual CSS styles accept.</p> <p>CSS types will be linked from within the styles reference in the \"Formal Syntax\" section of each style. The CSS types will be denoted by a keyword enclosed by angle brackets <code>&lt;</code> and <code>&gt;</code>.</p> <p>For example, the style <code>align-horizontal</code> references the CSS type <code>&lt;horizontal&gt;</code>:</p> <pre>\nalign-horizontal: &lt;horizontal&gt;;\n</pre>"},{"location":"css_types/border/","title":"&lt;border&gt;","text":"<p>The <code>&lt;border&gt;</code> CSS type represents a border style.</p>"},{"location":"css_types/border/#syntax","title":"Syntax","text":"<p>The <code>&lt;border&gt;</code> type can take any of the following values:</p> Border type Description <code>ascii</code> A border with plus, hyphen, and vertical bar characters. <code>blank</code> A blank border (reserves space for a border). <code>dashed</code> Dashed line border. <code>double</code> Double lined border. <code>heavy</code> Heavy border. <code>hidden</code> Alias for \"none\". <code>hkey</code> Horizontal key-line border. <code>inner</code> Thick solid border. <code>none</code> Disabled border. <code>outer</code> Solid border with additional space around content. <code>panel</code> Solid border with thick top. <code>round</code> Rounded corners. <code>solid</code> Solid border. <code>tall</code> Solid border with additional space top and bottom. <code>thick</code> Border style that is consistently thick across edges. <code>vkey</code> Vertical key-line border. <code>wide</code> Solid border with additional space left and right."},{"location":"css_types/border/#border-command","title":"Border command","text":"<p>The <code>textual</code> CLI has a subcommand which will let you explore the various border types interactively, when applied to the CSS rule <code>border</code>:</p> <pre><code>textual borders\n</code></pre>"},{"location":"css_types/border/#examples","title":"Examples","text":""},{"location":"css_types/border/#css","title":"CSS","text":"<pre><code>#container {\n    border: heavy red;\n}\n\n#heading {\n    border-bottom: solid blue;\n}\n</code></pre>"},{"location":"css_types/border/#python","title":"Python","text":"<pre><code>widget.styles.border = (\"heavy\", \"red\")\nwidget.styles.border_bottom = (\"solid\", \"blue\")\n</code></pre>"},{"location":"css_types/color/","title":"&lt;color&gt;","text":"<p>The <code>&lt;color&gt;</code> CSS type represents a color.</p> <p>Warning</p> <p>Not to be confused with the <code>color</code> CSS rule to set text color.</p>"},{"location":"css_types/color/#syntax","title":"Syntax","text":"<p>A <code>&lt;color&gt;</code> should be in one of the formats explained in this section. A bullet point summary of the formats available follows:</p> <ul> <li>a recognised named color (e.g., <code>red</code>);</li> <li>a 3 or 6 hexadecimal digit number representing the RGB values of the color (e.g., <code>#F35573</code>);</li> <li>a 4 or 8 hexadecimal digit number representing the RGBA values of the color (e.g., <code>#F35573A0</code>);</li> <li>a color description in the RGB system, with or without opacity (e.g., <code>rgb(23, 78, 200)</code>);</li> <li>a color description in the HSL system, with or without opacity (e.g., <code>hsl(290, 70%, 80%)</code>);</li> </ul> <p>Textual's default themes also provide many CSS variables with colors that can be used out of the box.</p>"},{"location":"css_types/color/#named-colors","title":"Named colors","text":"<p>A named color is a <code>&lt;name&gt;</code> that Textual recognises. Below, you can find a (collapsed) list of all of the named colors that Textual recognises, along with their hexadecimal values, their RGB values, and a visual sample.</p> All named colors available. colors \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503hex\u00a0\u00a0\u00a0\u00a0\u2503RGB\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503Color\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\"aliceblue\"\u2502#F0F8FF\u2502rgb(240,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"ansi_black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_blue\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_black\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_bright_blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_green\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_bright_magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_bright_white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"ansi_bright_yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"ansi_cyan\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"ansi_green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"ansi_magenta\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"ansi_red\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"ansi_white\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"ansi_yellow\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"antiquewhite\"\u2502#FAEBD7\u2502rgb(250,\u00a0235,\u00a0215)\u2502\u2502 \u2502\"aqua\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"aquamarine\"\u2502#7FFFD4\u2502rgb(127,\u00a0255,\u00a0212)\u2502\u2502 \u2502\"azure\"\u2502#F0FFFF\u2502rgb(240,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"beige\"\u2502#F5F5DC\u2502rgb(245,\u00a0245,\u00a0220)\u2502\u2502 \u2502\"bisque\"\u2502#FFE4C4\u2502rgb(255,\u00a0228,\u00a0196)\u2502\u2502 \u2502\"black\"\u2502#000000\u2502rgb(0,\u00a00,\u00a00)\u2502\u2502 \u2502\"blanchedalmond\"\u2502#FFEBCD\u2502rgb(255,\u00a0235,\u00a0205)\u2502\u2502 \u2502\"blue\"\u2502#0000FF\u2502rgb(0,\u00a00,\u00a0255)\u2502\u2502 \u2502\"blueviolet\"\u2502#8A2BE2\u2502rgb(138,\u00a043,\u00a0226)\u2502\u2502 \u2502\"brown\"\u2502#A52A2A\u2502rgb(165,\u00a042,\u00a042)\u2502\u2502 \u2502\"burlywood\"\u2502#DEB887\u2502rgb(222,\u00a0184,\u00a0135)\u2502\u2502 \u2502\"cadetblue\"\u2502#5F9EA0\u2502rgb(95,\u00a0158,\u00a0160)\u2502\u2502 \u2502\"chartreuse\"\u2502#7FFF00\u2502rgb(127,\u00a0255,\u00a00)\u2502\u2502 \u2502\"chocolate\"\u2502#D2691E\u2502rgb(210,\u00a0105,\u00a030)\u2502\u2502 \u2502\"coral\"\u2502#FF7F50\u2502rgb(255,\u00a0127,\u00a080)\u2502\u2502 \u2502\"cornflowerblue\"\u2502#6495ED\u2502rgb(100,\u00a0149,\u00a0237)\u2502\u2502 \u2502\"cornsilk\"\u2502#FFF8DC\u2502rgb(255,\u00a0248,\u00a0220)\u2502\u2502 \u2502\"crimson\"\u2502#DC143C\u2502rgb(220,\u00a020,\u00a060)\u2502\u2502 \u2502\"cyan\"\u2502#00FFFF\u2502rgb(0,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"darkblue\"\u2502#00008B\u2502rgb(0,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkcyan\"\u2502#008B8B\u2502rgb(0,\u00a0139,\u00a0139)\u2502\u2502 \u2502\"darkgoldenrod\"\u2502#B8860B\u2502rgb(184,\u00a0134,\u00a011)\u2502\u2502 \u2502\"darkgray\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkgreen\"\u2502#006400\u2502rgb(0,\u00a0100,\u00a00)\u2502\u2502 \u2502\"darkgrey\"\u2502#A9A9A9\u2502rgb(169,\u00a0169,\u00a0169)\u2502\u2502 \u2502\"darkkhaki\"\u2502#BDB76B\u2502rgb(189,\u00a0183,\u00a0107)\u2502\u2502 \u2502\"darkmagenta\"\u2502#8B008B\u2502rgb(139,\u00a00,\u00a0139)\u2502\u2502 \u2502\"darkolivegreen\"\u2502#556B2F\u2502rgb(85,\u00a0107,\u00a047)\u2502\u2502 \u2502\"darkorange\"\u2502#FF8C00\u2502rgb(255,\u00a0140,\u00a00)\u2502\u2502 \u2502\"darkorchid\"\u2502#9932CC\u2502rgb(153,\u00a050,\u00a0204)\u2502\u2502 \u2502\"darkred\"\u2502#8B0000\u2502rgb(139,\u00a00,\u00a00)\u2502\u2502 \u2502\"darksalmon\"\u2502#E9967A\u2502rgb(233,\u00a0150,\u00a0122)\u2502\u2502 \u2502\"darkseagreen\"\u2502#8FBC8F\u2502rgb(143,\u00a0188,\u00a0143)\u2502\u2502 \u2502\"darkslateblue\"\u2502#483D8B\u2502rgb(72,\u00a061,\u00a0139)\u2502\u2502 \u2502\"darkslategray\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkslategrey\"\u2502#2F4F4F\u2502rgb(47,\u00a079,\u00a079)\u2502\u2502 \u2502\"darkturquoise\"\u2502#00CED1\u2502rgb(0,\u00a0206,\u00a0209)\u2502\u2502 \u2502\"darkviolet\"\u2502#9400D3\u2502rgb(148,\u00a00,\u00a0211)\u2502\u2502 \u2502\"deeppink\"\u2502#FF1493\u2502rgb(255,\u00a020,\u00a0147)\u2502\u2502 \u2502\"deepskyblue\"\u2502#00BFFF\u2502rgb(0,\u00a0191,\u00a0255)\u2502\u2502 \u2502\"dimgray\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dimgrey\"\u2502#696969\u2502rgb(105,\u00a0105,\u00a0105)\u2502\u2502 \u2502\"dodgerblue\"\u2502#1E90FF\u2502rgb(30,\u00a0144,\u00a0255)\u2502\u2502 \u2502\"firebrick\"\u2502#B22222\u2502rgb(178,\u00a034,\u00a034)\u2502\u2502 \u2502\"floralwhite\"\u2502#FFFAF0\u2502rgb(255,\u00a0250,\u00a0240)\u2502\u2502 \u2502\"forestgreen\"\u2502#228B22\u2502rgb(34,\u00a0139,\u00a034)\u2502\u2502 \u2502\"fuchsia\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"gainsboro\"\u2502#DCDCDC\u2502rgb(220,\u00a0220,\u00a0220)\u2502\u2502 \u2502\"ghostwhite\"\u2502#F8F8FF\u2502rgb(248,\u00a0248,\u00a0255)\u2502\u2502 \u2502\"gold\"\u2502#FFD700\u2502rgb(255,\u00a0215,\u00a00)\u2502\u2502 \u2502\"goldenrod\"\u2502#DAA520\u2502rgb(218,\u00a0165,\u00a032)\u2502\u2502 \u2502\"gray\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"green\"\u2502#008000\u2502rgb(0,\u00a0128,\u00a00)\u2502\u2502 \u2502\"greenyellow\"\u2502#ADFF2F\u2502rgb(173,\u00a0255,\u00a047)\u2502\u2502 \u2502\"grey\"\u2502#808080\u2502rgb(128,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"honeydew\"\u2502#F0FFF0\u2502rgb(240,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"hotpink\"\u2502#FF69B4\u2502rgb(255,\u00a0105,\u00a0180)\u2502\u2502 \u2502\"indianred\"\u2502#CD5C5C\u2502rgb(205,\u00a092,\u00a092)\u2502\u2502 \u2502\"indigo\"\u2502#4B0082\u2502rgb(75,\u00a00,\u00a0130)\u2502\u2502 \u2502\"ivory\"\u2502#FFFFF0\u2502rgb(255,\u00a0255,\u00a0240)\u2502\u2502 \u2502\"khaki\"\u2502#F0E68C\u2502rgb(240,\u00a0230,\u00a0140)\u2502\u2502 \u2502\"lavender\"\u2502#E6E6FA\u2502rgb(230,\u00a0230,\u00a0250)\u2502\u2502 \u2502\"lavenderblush\"\u2502#FFF0F5\u2502rgb(255,\u00a0240,\u00a0245)\u2502\u2502 \u2502\"lawngreen\"\u2502#7CFC00\u2502rgb(124,\u00a0252,\u00a00)\u2502\u2502 \u2502\"lemonchiffon\"\u2502#FFFACD\u2502rgb(255,\u00a0250,\u00a0205)\u2502\u2502 \u2502\"lightblue\"\u2502#ADD8E6\u2502rgb(173,\u00a0216,\u00a0230)\u2502\u2502 \u2502\"lightcoral\"\u2502#F08080\u2502rgb(240,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"lightcyan\"\u2502#E0FFFF\u2502rgb(224,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"lightgoldenrodyellow\"\u2502#FAFAD2\u2502rgb(250,\u00a0250,\u00a0210)\u2502\u2502 \u2502\"lightgray\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightgreen\"\u2502#90EE90\u2502rgb(144,\u00a0238,\u00a0144)\u2502\u2502 \u2502\"lightgrey\"\u2502#D3D3D3\u2502rgb(211,\u00a0211,\u00a0211)\u2502\u2502 \u2502\"lightpink\"\u2502#FFB6C1\u2502rgb(255,\u00a0182,\u00a0193)\u2502\u2502 \u2502\"lightsalmon\"\u2502#FFA07A\u2502rgb(255,\u00a0160,\u00a0122)\u2502\u2502 \u2502\"lightseagreen\"\u2502#20B2AA\u2502rgb(32,\u00a0178,\u00a0170)\u2502\u2502 \u2502\"lightskyblue\"\u2502#87CEFA\u2502rgb(135,\u00a0206,\u00a0250)\u2502\u2502 \u2502\"lightslategray\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightslategrey\"\u2502#778899\u2502rgb(119,\u00a0136,\u00a0153)\u2502\u2502 \u2502\"lightsteelblue\"\u2502#B0C4DE\u2502rgb(176,\u00a0196,\u00a0222)\u2502\u2502 \u2502\"lightyellow\"\u2502#FFFFE0\u2502rgb(255,\u00a0255,\u00a0224)\u2502\u2502 \u2502\"lime\"\u2502#00FF00\u2502rgb(0,\u00a0255,\u00a00)\u2502\u2502 \u2502\"limegreen\"\u2502#32CD32\u2502rgb(50,\u00a0205,\u00a050)\u2502\u2502 \u2502\"linen\"\u2502#FAF0E6\u2502rgb(250,\u00a0240,\u00a0230)\u2502\u2502 \u2502\"magenta\"\u2502#FF00FF\u2502rgb(255,\u00a00,\u00a0255)\u2502\u2502 \u2502\"maroon\"\u2502#800000\u2502rgb(128,\u00a00,\u00a00)\u2502\u2502 \u2502\"mediumaquamarine\"\u2502#66CDAA\u2502rgb(102,\u00a0205,\u00a0170)\u2502\u2502 \u2502\"mediumblue\"\u2502#0000CD\u2502rgb(0,\u00a00,\u00a0205)\u2502\u2502 \u2502\"mediumorchid\"\u2502#BA55D3\u2502rgb(186,\u00a085,\u00a0211)\u2502\u2502 \u2502\"mediumpurple\"\u2502#9370DB\u2502rgb(147,\u00a0112,\u00a0219)\u2502\u2502 \u2502\"mediumseagreen\"\u2502#3CB371\u2502rgb(60,\u00a0179,\u00a0113)\u2502\u2502 \u2502\"mediumslateblue\"\u2502#7B68EE\u2502rgb(123,\u00a0104,\u00a0238)\u2502\u2502 \u2502\"mediumspringgreen\"\u2502#00FA9A\u2502rgb(0,\u00a0250,\u00a0154)\u2502\u2502 \u2502\"mediumturquoise\"\u2502#48D1CC\u2502rgb(72,\u00a0209,\u00a0204)\u2502\u2502 \u2502\"mediumvioletred\"\u2502#C71585\u2502rgb(199,\u00a021,\u00a0133)\u2502\u2502 \u2502\"midnightblue\"\u2502#191970\u2502rgb(25,\u00a025,\u00a0112)\u2502\u2502 \u2502\"mintcream\"\u2502#F5FFFA\u2502rgb(245,\u00a0255,\u00a0250)\u2502\u2502 \u2502\"mistyrose\"\u2502#FFE4E1\u2502rgb(255,\u00a0228,\u00a0225)\u2502\u2502 \u2502\"moccasin\"\u2502#FFE4B5\u2502rgb(255,\u00a0228,\u00a0181)\u2502\u2502 \u2502\"navajowhite\"\u2502#FFDEAD\u2502rgb(255,\u00a0222,\u00a0173)\u2502\u2502 \u2502\"navy\"\u2502#000080\u2502rgb(0,\u00a00,\u00a0128)\u2502\u2502 \u2502\"oldlace\"\u2502#FDF5E6\u2502rgb(253,\u00a0245,\u00a0230)\u2502\u2502 \u2502\"olive\"\u2502#808000\u2502rgb(128,\u00a0128,\u00a00)\u2502\u2502 \u2502\"olivedrab\"\u2502#6B8E23\u2502rgb(107,\u00a0142,\u00a035)\u2502\u2502 \u2502\"orange\"\u2502#FFA500\u2502rgb(255,\u00a0165,\u00a00)\u2502\u2502 \u2502\"orangered\"\u2502#FF4500\u2502rgb(255,\u00a069,\u00a00)\u2502\u2502 \u2502\"orchid\"\u2502#DA70D6\u2502rgb(218,\u00a0112,\u00a0214)\u2502\u2502 \u2502\"palegoldenrod\"\u2502#EEE8AA\u2502rgb(238,\u00a0232,\u00a0170)\u2502\u2502 \u2502\"palegreen\"\u2502#98FB98\u2502rgb(152,\u00a0251,\u00a0152)\u2502\u2502 \u2502\"paleturquoise\"\u2502#AFEEEE\u2502rgb(175,\u00a0238,\u00a0238)\u2502\u2502 \u2502\"palevioletred\"\u2502#DB7093\u2502rgb(219,\u00a0112,\u00a0147)\u2502\u2502 \u2502\"papayawhip\"\u2502#FFEFD5\u2502rgb(255,\u00a0239,\u00a0213)\u2502\u2502 \u2502\"peachpuff\"\u2502#FFDAB9\u2502rgb(255,\u00a0218,\u00a0185)\u2502\u2502 \u2502\"peru\"\u2502#CD853F\u2502rgb(205,\u00a0133,\u00a063)\u2502\u2502 \u2502\"pink\"\u2502#FFC0CB\u2502rgb(255,\u00a0192,\u00a0203)\u2502\u2502 \u2502\"plum\"\u2502#DDA0DD\u2502rgb(221,\u00a0160,\u00a0221)\u2502\u2502 \u2502\"powderblue\"\u2502#B0E0E6\u2502rgb(176,\u00a0224,\u00a0230)\u2502\u2502 \u2502\"purple\"\u2502#800080\u2502rgb(128,\u00a00,\u00a0128)\u2502\u2502 \u2502\"rebeccapurple\"\u2502#663399\u2502rgb(102,\u00a051,\u00a0153)\u2502\u2502 \u2502\"red\"\u2502#FF0000\u2502rgb(255,\u00a00,\u00a00)\u2502\u2502 \u2502\"rosybrown\"\u2502#BC8F8F\u2502rgb(188,\u00a0143,\u00a0143)\u2502\u2502 \u2502\"royalblue\"\u2502#4169E1\u2502rgb(65,\u00a0105,\u00a0225)\u2502\u2502 \u2502\"saddlebrown\"\u2502#8B4513\u2502rgb(139,\u00a069,\u00a019)\u2502\u2502 \u2502\"salmon\"\u2502#FA8072\u2502rgb(250,\u00a0128,\u00a0114)\u2502\u2502 \u2502\"sandybrown\"\u2502#F4A460\u2502rgb(244,\u00a0164,\u00a096)\u2502\u2502 \u2502\"seagreen\"\u2502#2E8B57\u2502rgb(46,\u00a0139,\u00a087)\u2502\u2502 \u2502\"seashell\"\u2502#FFF5EE\u2502rgb(255,\u00a0245,\u00a0238)\u2502\u2502 \u2502\"sienna\"\u2502#A0522D\u2502rgb(160,\u00a082,\u00a045)\u2502\u2502 \u2502\"silver\"\u2502#C0C0C0\u2502rgb(192,\u00a0192,\u00a0192)\u2502\u2502 \u2502\"skyblue\"\u2502#87CEEB\u2502rgb(135,\u00a0206,\u00a0235)\u2502\u2502 \u2502\"slateblue\"\u2502#6A5ACD\u2502rgb(106,\u00a090,\u00a0205)\u2502\u2502 \u2502\"slategray\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"slategrey\"\u2502#708090\u2502rgb(112,\u00a0128,\u00a0144)\u2502\u2502 \u2502\"snow\"\u2502#FFFAFA\u2502rgb(255,\u00a0250,\u00a0250)\u2502\u2502 \u2502\"springgreen\"\u2502#00FF7F\u2502rgb(0,\u00a0255,\u00a0127)\u2502\u2502 \u2502\"steelblue\"\u2502#4682B4\u2502rgb(70,\u00a0130,\u00a0180)\u2502\u2502 \u2502\"tan\"\u2502#D2B48C\u2502rgb(210,\u00a0180,\u00a0140)\u2502\u2502 \u2502\"teal\"\u2502#008080\u2502rgb(0,\u00a0128,\u00a0128)\u2502\u2502 \u2502\"thistle\"\u2502#D8BFD8\u2502rgb(216,\u00a0191,\u00a0216)\u2502\u2502 \u2502\"tomato\"\u2502#FF6347\u2502rgb(255,\u00a099,\u00a071)\u2502\u2502 \u2502\"turquoise\"\u2502#40E0D0\u2502rgb(64,\u00a0224,\u00a0208)\u2502\u2502 \u2502\"violet\"\u2502#EE82EE\u2502rgb(238,\u00a0130,\u00a0238)\u2502\u2502 \u2502\"wheat\"\u2502#F5DEB3\u2502rgb(245,\u00a0222,\u00a0179)\u2502\u2502 \u2502\"white\"\u2502#FFFFFF\u2502rgb(255,\u00a0255,\u00a0255)\u2502\u2502 \u2502\"whitesmoke\"\u2502#F5F5F5\u2502rgb(245,\u00a0245,\u00a0245)\u2502\u2502 \u2502\"yellow\"\u2502#FFFF00\u2502rgb(255,\u00a0255,\u00a00)\u2502\u2502 \u2502\"yellowgreen\"\u2502#9ACD32\u2502rgb(154,\u00a0205,\u00a050)\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"},{"location":"css_types/color/#hex-rgb-value","title":"Hex RGB value","text":"<p>The hexadecimal RGB format starts with an octothorpe <code>#</code> and is then followed by 3 or 6 hexadecimal digits: <code>0123456789ABCDEF</code>. Casing is ignored.</p> <ul> <li>If 6 digits are used, the format is <code>#RRGGBB</code>:</li> <li><code>RR</code> represents the red channel;</li> <li><code>GG</code> represents the green channel; and</li> <li><code>BB</code> represents the blue channel.</li> <li>If 3 digits are used, the format is <code>#RGB</code>.</li> </ul> <p>In a 3 digit color, each channel is represented by a single digit which is duplicated when converting to the 6 digit format. For example, the color <code>#A2F</code> is the same as <code>#AA22FF</code>.</p>"},{"location":"css_types/color/#hex-rgba-value","title":"Hex RGBA value","text":"<p>This is the same as the hex RGB value, but with an extra channel for the alpha component (that sets opacity).</p> <ul> <li>If 8 digits are used, the format is <code>#RRGGBBAA</code>, equivalent to the format <code>#RRGGBB</code> with two extra digits for opacity.</li> <li>If 4 digits are used, the format is <code>#RGBA</code>, equivalent to the format <code>#RGB</code> with an extra digit for opacity.</li> </ul>"},{"location":"css_types/color/#rgb-description","title":"<code>rgb</code> description","text":"<p>The <code>rgb</code> format description is a functional description of a color in the RGB color space. This description follows the format <code>rgb(red, green, blue)</code>, where <code>red</code>, <code>green</code>, and <code>blue</code> are decimal integers between 0 and 255. They represent the value of the channel with the same name.</p> <p>For example, <code>rgb(0, 255, 32)</code> is equivalent to <code>#00FF20</code>.</p>"},{"location":"css_types/color/#rgba-description","title":"<code>rgba</code> description","text":"<p>The <code>rgba</code> format description is the same as the <code>rgb</code> with an extra parameter for opacity, which should be a value between <code>0</code> and <code>1</code>.</p> <p>For example, <code>rgba(0, 255, 32, 0.5)</code> is the color <code>rgb(0, 255, 32)</code> with 50% opacity.</p>"},{"location":"css_types/color/#hsl-description","title":"<code>hsl</code> description","text":"<p>The <code>hsl</code> format description is a functional description of a color in the HSL color space. This description follows the format <code>hsl(hue, saturation, lightness)</code>, where</p> <ul> <li><code>hue</code> is a float between 0 and 360;</li> <li><code>saturation</code> is a percentage between <code>0%</code> and <code>100%</code>; and</li> <li><code>lightness</code> is a percentage between <code>0%</code> and <code>100%</code>.</li> </ul> <p>For example, the color <code>#00FF20</code> would be represented as <code>hsl(128, 100%, 50%)</code> in the HSL color space.</p>"},{"location":"css_types/color/#hsla-description","title":"<code>hsla</code> description","text":"<p>The <code>hsla</code> format description is the same as the <code>hsl</code> with an extra parameter for opacity, which should be a value between <code>0</code> and <code>1</code>.</p> <p>For example, <code>hsla(128, 100%, 50%, 0.5)</code> is the color <code>hsl(128, 100%, 50%)</code> with 50% opacity.</p>"},{"location":"css_types/color/#examples","title":"Examples","text":""},{"location":"css_types/color/#css","title":"CSS","text":"<pre><code>Header {\n    background: red;           /* Color name */\n}\n\n.accent {\n    color: $accent;            /* Textual variable */\n}\n\n#footer {\n    tint: hsl(300, 20%, 70%);  /* HSL description */\n}\n</code></pre>"},{"location":"css_types/color/#python","title":"Python","text":"<p>In Python, rules that expect a <code>&lt;color&gt;</code> can also accept an instance of the type <code>Color</code>.</p> <pre><code># Mimicking the CSS syntax\nwidget.styles.background = \"red\"           # Color name\nwidget.styles.color = \"$accent\"            # Textual variable\nwidget.styles.tint = \"hsl(300, 20%, 70%)\"  # HSL description\n\nfrom textual.color import Color\n# Using a Color object directly...\ncolor = Color(16, 200, 45)\n# ... which can also parse the CSS syntax\ncolor = Color.parse(\"#A8F\")\n</code></pre>"},{"location":"css_types/hatch/","title":"&lt;hatch&gt;","text":"<p>The <code>&lt;hatch&gt;</code> CSS type represents a character used in the hatch rule.</p>"},{"location":"css_types/hatch/#syntax","title":"Syntax","text":"Value Description <code>cross</code> A diagonal crossed line. <code>horizontal</code> A horizontal line. <code>left</code> A left leaning diagonal line. <code>right</code> A right leaning diagonal line. <code>vertical</code> A vertical line."},{"location":"css_types/hatch/#examples","title":"Examples","text":""},{"location":"css_types/hatch/#css","title":"CSS","text":"<pre><code>.some-class {\n    hatch: cross green;\n}\n</code></pre>"},{"location":"css_types/hatch/#python","title":"Python","text":"<pre><code>widget.styles.hatch = (\"cross\", \"red\")\n</code></pre>"},{"location":"css_types/horizontal/","title":"&lt;horizontal&gt;","text":"<p>The <code>&lt;horizontal&gt;</code> CSS type represents a position along the horizontal axis.</p>"},{"location":"css_types/horizontal/#syntax","title":"Syntax","text":"<p>The <code>&lt;horizontal&gt;</code> type can take any of the following values:</p> Value Description <code>center</code> Aligns in the center of the horizontal axis. <code>left</code> (default) Aligns on the left of the horizontal axis. <code>right</code> Aligns on the right of the horizontal axis."},{"location":"css_types/horizontal/#examples","title":"Examples","text":""},{"location":"css_types/horizontal/#css","title":"CSS","text":"<pre><code>.container {\n    align-horizontal: right;\n}\n</code></pre>"},{"location":"css_types/horizontal/#python","title":"Python","text":"<pre><code>widget.styles.align_horizontal = \"right\"\n</code></pre>"},{"location":"css_types/integer/","title":"&lt;integer&gt;","text":"<p>The <code>&lt;integer&gt;</code> CSS type represents an integer number.</p>"},{"location":"css_types/integer/#syntax","title":"Syntax","text":"<p>An <code>&lt;integer&gt;</code> is any valid integer number like <code>-10</code> or <code>42</code>.</p> <p>Note</p> <p>Some CSS rules may expect an <code>&lt;integer&gt;</code> within certain bounds. If that is the case, it will be noted in that rule.</p>"},{"location":"css_types/integer/#examples","title":"Examples","text":""},{"location":"css_types/integer/#css","title":"CSS","text":"<pre><code>.classname {\n    offset: 10 -20\n}\n</code></pre>"},{"location":"css_types/integer/#python","title":"Python","text":"<p>In Python, a rule that expects a CSS type <code>&lt;integer&gt;</code> will expect a value of the type <code>int</code>:</p> <pre><code>widget.styles.offset = (10, -20)\n</code></pre>"},{"location":"css_types/keyline/","title":"&lt;keyline&gt;","text":"<p>The <code>&lt;keyline&gt;</code> CSS type represents a line style used in the keyline rule.</p>"},{"location":"css_types/keyline/#syntax","title":"Syntax","text":"Value Description <code>none</code> No line (disable keyline). <code>thin</code> A thin line. <code>heavy</code> A heavy (thicker) line. <code>double</code> A double line."},{"location":"css_types/keyline/#examples","title":"Examples","text":""},{"location":"css_types/keyline/#css","title":"CSS","text":"<pre><code>Vertical {\n    keyline: thin green;\n}\n</code></pre>"},{"location":"css_types/keyline/#python","title":"Python","text":"<pre><code># A tuple of &lt;keyline&gt; and color\nwidget.styles.keyline = (\"thin\", \"green\")\n</code></pre>"},{"location":"css_types/name/","title":"&lt;name&gt;","text":"<p>The <code>&lt;name&gt;</code> type represents a sequence of characters that identifies something.</p>"},{"location":"css_types/name/#syntax","title":"Syntax","text":"<p>A <code>&lt;name&gt;</code> is any non-empty sequence of characters:</p> <ul> <li>starting with a letter <code>a-z</code>, <code>A-Z</code>, or underscore <code>_</code>; and</li> <li>followed by zero or more letters <code>a-zA-Z</code>, digits <code>0-9</code>, underscores <code>_</code>, and hiphens <code>-</code>.</li> </ul>"},{"location":"css_types/name/#examples","title":"Examples","text":""},{"location":"css_types/name/#css","title":"CSS","text":"<pre><code>Screen {\n    layers: onlyLetters Letters-and-hiphens _lead-under letters-1-digit;\n}\n</code></pre>"},{"location":"css_types/name/#python","title":"Python","text":"<pre><code>widget.styles.layers = \"onlyLetters Letters-and-hiphens _lead-under letters-1-digit\"\n</code></pre>"},{"location":"css_types/number/","title":"&lt;number&gt;","text":"<p>The <code>&lt;number&gt;</code> CSS type represents a real number, which can be an integer or a number with a decimal part (akin to a <code>float</code> in Python).</p>"},{"location":"css_types/number/#syntax","title":"Syntax","text":"<p>A <code>&lt;number&gt;</code> is an <code>&lt;integer&gt;</code>, optionally followed by the decimal point <code>.</code> and a decimal part composed of one or more digits.</p>"},{"location":"css_types/number/#examples","title":"Examples","text":""},{"location":"css_types/number/#css","title":"CSS","text":"<pre><code>Grid {\n    grid-size: 3 6  /* Integers are numbers */\n}\n\n.translucid {\n    opacity: 0.5    /* Numbers can have a decimal part */\n}\n</code></pre>"},{"location":"css_types/number/#python","title":"Python","text":"<p>In Python, a rule that expects a CSS type <code>&lt;number&gt;</code> will accept an <code>int</code> or a <code>float</code>:</p> <pre><code>widget.styles.grid_size = (3, 6)  # Integers are numbers\nwidget.styles.opacity = 0.5       # Numbers can have a decimal part\n</code></pre>"},{"location":"css_types/overflow/","title":"&lt;overflow&gt;","text":"<p>The <code>&lt;overflow&gt;</code> CSS type represents overflow modes.</p>"},{"location":"css_types/overflow/#syntax","title":"Syntax","text":"<p>The <code>&lt;overflow&gt;</code> type can take any of the following values:</p> Value Description <code>auto</code> Determine overflow mode automatically. <code>hidden</code> Don't overflow. <code>scroll</code> Allow overflowing."},{"location":"css_types/overflow/#examples","title":"Examples","text":""},{"location":"css_types/overflow/#css","title":"CSS","text":"<pre><code>#container {\n    overflow-y: hidden;  /* Don't overflow */\n}\n</code></pre>"},{"location":"css_types/overflow/#python","title":"Python","text":"<pre><code>widget.styles.overflow_y = \"hidden\"  # Don't overflow\n</code></pre>"},{"location":"css_types/percentage/","title":"&lt;percentage&gt;","text":"<p>The <code>&lt;percentage&gt;</code> CSS type represents a percentage value. It is often used to represent values that are relative to the parent's values.</p> <p>Warning</p> <p>Not to be confused with the <code>&lt;scalar&gt;</code> type.</p>"},{"location":"css_types/percentage/#syntax","title":"Syntax","text":"<p>A <code>&lt;percentage&gt;</code> is a <code>&lt;number&gt;</code> followed by the percent sign <code>%</code> (without spaces). Some rules may clamp the values between <code>0%</code> and <code>100%</code>.</p>"},{"location":"css_types/percentage/#examples","title":"Examples","text":""},{"location":"css_types/percentage/#css","title":"CSS","text":"<pre><code>#footer {\n    /* Integer followed by % */\n    color: red 70%;\n\n    /* The number can be negative/decimal, although that may not make sense */\n    offset: -30% 12.5%;\n}\n</code></pre>"},{"location":"css_types/percentage/#python","title":"Python","text":"<pre><code># Integer followed by %\nwidget.styles.color = \"red 70%\"\n\n# The number can be negative/decimal, although that may not make sense\nwidget.styles.offset = (\"-30%\", \"12.5%\")\n</code></pre>"},{"location":"css_types/scalar/","title":"&lt;scalar&gt;","text":"<p>The <code>&lt;scalar&gt;</code> CSS type represents a length. It can be a <code>&lt;number&gt;</code> and a unit, or the special value <code>auto</code>. It is used to represent lengths, for example in the <code>width</code> and <code>height</code> rules.</p> <p>Warning</p> <p>Not to be confused with the <code>&lt;number&gt;</code> or <code>&lt;percentage&gt;</code> types.</p>"},{"location":"css_types/scalar/#syntax","title":"Syntax","text":"<p>A <code>&lt;scalar&gt;</code> can be any of the following:</p> <ul> <li>a fixed number of cells (e.g., <code>10</code>);</li> <li>a fractional proportion relative to the sizes of the other widgets (e.g., <code>1fr</code>);</li> <li>a percentage relative to the container widget (e.g., <code>50%</code>);</li> <li>a percentage relative to the container width/height (e.g., <code>25w</code>/<code>75h</code>);</li> <li>a percentage relative to the viewport width/height (e.g., <code>25vw</code>/<code>75vh</code>); or</li> <li>the special value <code>auto</code> to compute the optimal size to fit without scrolling.</li> </ul> <p>A complete reference table and detailed explanations follow. You can skip to the examples.</p> Unit symbol Unit Example Description <code>\"\"</code> Cell <code>10</code> Number of cells (rows or columns). <code>\"fr\"</code> Fraction <code>1fr</code> Specifies the proportion of space the widget should occupy. <code>\"%\"</code> Percent <code>75%</code> Length relative to the container widget. <code>\"w\"</code> Width <code>25w</code> Percentage relative to the width of the container widget. <code>\"h\"</code> Height <code>75h</code> Percentage relative to the height of the container widget. <code>\"vw\"</code> Viewport width <code>25vw</code> Percentage relative to the viewport width. <code>\"vh\"</code> Viewport height <code>75vh</code> Percentage relative to the viewport height. - Auto <code>auto</code> Tries to compute the optimal size to fit without scrolling."},{"location":"css_types/scalar/#cell","title":"Cell","text":"<p>The number of cells is the only unit for a scalar that is absolute. This can be an integer or a float but floats are truncated to integers.</p> <p>If used to specify a horizontal length, it corresponds to the number of columns. For example, in <code>width: 15</code>, this sets the width of a widget to be equal to 15 cells, which translates to 15 columns.</p> <p>If used to specify a vertical length, it corresponds to the number of lines. For example, in <code>height: 10</code>, this sets the height of a widget to be equal to 10 cells, which translates to 10 lines.</p>"},{"location":"css_types/scalar/#fraction","title":"Fraction","text":"<p>The unit fraction is used to represent proportional sizes.</p> <p>For example, if two widgets are side by side and one has <code>width: 1fr</code> and the other has <code>width: 3fr</code>, the second one will be three times as wide as the first one.</p>"},{"location":"css_types/scalar/#percent","title":"Percent","text":"<p>The percent unit matches a <code>&lt;percentage&gt;</code> and is used to specify a total length relative to the space made available by the container widget.</p> <p>If used to specify a horizontal length, it will be relative to the width of the container. For example, <code>width: 50%</code> sets the width of a widget to 50% of the width of its container.</p> <p>If used to specify a vertical length, it will be relative to the height of the container. For example, <code>height: 50%</code> sets the height of a widget to 50% of the height of its container.</p>"},{"location":"css_types/scalar/#width","title":"Width","text":"<p>The width unit is similar to the percent unit, except it sets the percentage to be relative to the width of the container.</p> <p>For example, <code>width: 25w</code> sets the width of a widget to 25% of the width of its container and <code>height: 25w</code> sets the height of a widget to 25% of the width of its container. So, if the container has a width of 100 cells, the width and the height of the child widget will be of 25 cells.</p>"},{"location":"css_types/scalar/#height","title":"Height","text":"<p>The height unit is similar to the percent unit, except it sets the percentage to be relative to the height of the container.</p> <p>For example, <code>height: 75h</code> sets the height of a widget to 75% of the height of its container and <code>width: 75h</code> sets the width of a widget to 75% of the height of its container. So, if the container has a height of 100 cells, the width and the height of the child widget will be of 75 cells.</p>"},{"location":"css_types/scalar/#viewport-width","title":"Viewport width","text":"<p>This is the same as the width unit, except that it is relative to the width of the viewport instead of the width of the immediate container. The width of the viewport is the width of the terminal minus the widths of widgets that are docked left or right.</p> <p>For example, <code>width: 25vw</code> will try to set the width of a widget to be 25% of the viewport width, regardless of the widths of its containers.</p>"},{"location":"css_types/scalar/#viewport-height","title":"Viewport height","text":"<p>This is the same as the height unit, except that it is relative to the height of the viewport instead of the height of the immediate container. The height of the viewport is the height of the terminal minus the heights of widgets that are docked top or bottom.</p> <p>For example, <code>height: 75vh</code> will try to set the height of a widget to be 75% of the viewport height, regardless of the height of its containers.</p>"},{"location":"css_types/scalar/#auto","title":"Auto","text":"<p>This special value will try to calculate the optimal size to fit the contents of the widget without scrolling.</p> <p>For example, if its container is big enough, a label with <code>width: auto</code> will be just as wide as its text.</p>"},{"location":"css_types/scalar/#examples","title":"Examples","text":""},{"location":"css_types/scalar/#css","title":"CSS","text":"<pre><code>Horizontal {\n    width: 60;     /* 60 cells */\n    height: 1fr;   /* proportional size of 1 */\n}\n</code></pre>"},{"location":"css_types/scalar/#python","title":"Python","text":"<pre><code>widget.styles.width = 16       # Cell unit can be specified with an int/float\nwidget.styles.height = \"1fr\"   # proportional size of 1\n</code></pre>"},{"location":"css_types/text_align/","title":"&lt;text-align&gt;","text":"<p>The <code>&lt;text-align&gt;</code> CSS type represents alignments that can be applied to text.</p> <p>Warning</p> <p>Not to be confused with the <code>text-align</code> CSS rule that sets the alignment of text in a widget.</p>"},{"location":"css_types/text_align/#syntax","title":"Syntax","text":"<p>A <code>&lt;text-align&gt;</code> can be any of the following values:</p> Value Alignment type <code>center</code> Center alignment. <code>end</code> Alias for <code>right</code>. <code>justify</code> Text is justified inside the widget. <code>left</code> Left alignment. <code>right</code> Right alignment. <code>start</code> Alias for <code>left</code>. <p>Tip</p> <p>The meanings of <code>start</code> and <code>end</code> will likely change when RTL languages become supported by Textual.</p>"},{"location":"css_types/text_align/#examples","title":"Examples","text":""},{"location":"css_types/text_align/#css","title":"CSS","text":"<pre><code>Label {\n    text-align: justify;\n}\n</code></pre>"},{"location":"css_types/text_align/#python","title":"Python","text":"<pre><code>widget.styles.text_align = \"justify\"\n</code></pre>"},{"location":"css_types/text_style/","title":"&lt;text-style&gt;","text":"<p>The <code>&lt;text-style&gt;</code> CSS type represents styles that can be applied to text.</p> <p>Warning</p> <p>Not to be confused with the <code>text-style</code> CSS rule that sets the style of text in a widget.</p>"},{"location":"css_types/text_style/#syntax","title":"Syntax","text":"<p>A <code>&lt;text-style&gt;</code> can be the value <code>none</code> for plain text with no styling, or any space-separated combination of the following values:</p> Value Description <code>bold</code> Bold text. <code>italic</code> Italic text. <code>reverse</code> Reverse video text (foreground and background colors reversed). <code>strike</code> Strikethrough text. <code>underline</code> Underline text."},{"location":"css_types/text_style/#examples","title":"Examples","text":""},{"location":"css_types/text_style/#css","title":"CSS","text":"<pre><code>#label1 {\n    /* You can specify any value by itself. */\n    rule: strike;\n}\n\n#label2 {\n    /* You can also combine multiple values. */\n    rule: strike bold italic reverse;\n}\n</code></pre>"},{"location":"css_types/text_style/#python","title":"Python","text":"<pre><code># You can specify any value by itself\nwidget.styles.text_style = \"strike\"\n\n# You can also combine multiple values\nwidget.styles.text_style = \"strike bold italic reverse\n</code></pre>"},{"location":"css_types/vertical/","title":"&lt;vertical&gt;","text":"<p>The <code>&lt;vertical&gt;</code> CSS type represents a position along the vertical axis.</p>"},{"location":"css_types/vertical/#syntax","title":"Syntax","text":"<p>The <code>&lt;vertical&gt;</code> type can take any of the following values:</p> Value Description <code>bottom</code> Aligns at the bottom of the vertical axis. <code>middle</code> Aligns in the middle of the vertical axis. <code>top</code> (default) Aligns at the top of the vertical axis."},{"location":"css_types/vertical/#examples","title":"Examples","text":""},{"location":"css_types/vertical/#css","title":"CSS","text":"<pre><code>.container {\n    align-vertical: top;\n}\n</code></pre>"},{"location":"css_types/vertical/#python","title":"Python","text":"<pre><code>widget.styles.align_vertical = \"top\"\n</code></pre>"},{"location":"events/","title":"Events","text":"<p>A reference to Textual events.</p> <p>See the links to the left of the page, or in the hamburger menu (three horizontal bars, top left).</p>"},{"location":"events/app_blur/","title":"AppBlur","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the app loses focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusOut</code>, or when running via textual-web.</p>"},{"location":"events/app_blur/#see-also","title":"See also","text":"<ul> <li>AppFocus</li> </ul>"},{"location":"events/app_focus/","title":"AppFocus","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the app has focus.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> Note <p>Only available when running within a terminal that supports <code>FocusIn</code>, or when running via textual-web.</p>"},{"location":"events/app_focus/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> </ul>"},{"location":"events/blur/","title":"Blur","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is blurred (un-focussed).</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/blur/#see-also","title":"See also","text":"<ul> <li>DescendantBlur</li> <li>DescendantFocus</li> <li>Focus</li> </ul>"},{"location":"events/click/","title":"Click","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when a widget is clicked.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/click/#see-also","title":"See also","text":"<ul> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/descendant_blur/","title":"DescendantBlur","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a child widget is blurred.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/descendant_blur/#textual.events.DescendantBlur.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was blurred (alias of <code>widget</code>).</p>"},{"location":"events/descendant_blur/#textual.events.DescendantBlur.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was blurred.</p>"},{"location":"events/descendant_blur/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> <li>AppFocus</li> <li>Blur</li> <li>DescendantFocus</li> <li>Focus</li> </ul>"},{"location":"events/descendant_focus/","title":"DescendantFocus","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a child widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/descendant_focus/#textual.events.DescendantFocus.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The widget that was focused (alias of <code>widget</code>).</p>"},{"location":"events/descendant_focus/#textual.events.DescendantFocus.widget","title":"widget  <code>instance-attribute</code>","text":"<pre><code>widget\n</code></pre> <p>The widget that was focused.</p>"},{"location":"events/descendant_focus/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> <li>AppFocus</li> <li>Blur</li> <li>DescendantBlur</li> <li>Focus</li> </ul>"},{"location":"events/enter/","title":"Enter","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved over a widget.</p> <p>Note that this event bubbles, so a widget may receive this event when the mouse moves over a child widget. Check the <code>node</code> attribute for the widget directly under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/enter/#textual.events.Enter.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node directly under the mouse.</p>"},{"location":"events/enter/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Leave</li> <li>MouseDown</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/focus/","title":"Focus","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is focussed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/focus/#see-also","title":"See also","text":"<ul> <li>AppBlur</li> <li>AppFocus</li> <li>Blur</li> <li>DescendantBlur</li> <li>DescendantFocus</li> </ul>"},{"location":"events/hide/","title":"Hide","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget has been hidden.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Sent when any of the following conditions apply:</p> <ul> <li>The widget is removed from the DOM.</li> <li>The widget is no longer displayed because it has been scrolled or clipped from the terminal or its container.</li> <li>The widget has its <code>display</code> attribute set to <code>False</code>.</li> <li>The widget's <code>display</code> style is set to <code>\"none\"</code>.</li> </ul>"},{"location":"events/key/","title":"Key","text":"<p>               Bases: <code>InputEvent</code></p> <p>Sent when the user hits a key on the keyboard.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The key that was pressed.</p> required <code>str | None</code> <p>A printable character or <code>None</code> if it is not printable.</p> required"},{"location":"events/key/#textual.events.Key(key)","title":"<code>key</code>","text":""},{"location":"events/key/#textual.events.Key(character)","title":"<code>character</code>","text":""},{"location":"events/key/#textual.events.Key.aliases","title":"aliases  <code>instance-attribute</code>","text":"<pre><code>aliases = _get_key_aliases(key)\n</code></pre> <p>The aliases for the key, including the key itself.</p>"},{"location":"events/key/#textual.events.Key.character","title":"character  <code>instance-attribute</code>","text":"<pre><code>character = (\n    key\n    if len(key) == 1\n    else None if character is None else character\n)\n</code></pre> <p>A printable character or <code>None</code> if it is not printable.</p>"},{"location":"events/key/#textual.events.Key.is_printable","title":"is_printable  <code>property</code>","text":"<pre><code>is_printable\n</code></pre> <p>Check if the key is printable (produces a unicode character).</p> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the key is printable.</p>"},{"location":"events/key/#textual.events.Key.key","title":"key  <code>instance-attribute</code>","text":"<pre><code>key = key\n</code></pre> <p>The key that was pressed.</p>"},{"location":"events/key/#textual.events.Key.name","title":"name  <code>property</code>","text":"<pre><code>name\n</code></pre> <p>Name of a key suitable for use as a Python identifier.</p>"},{"location":"events/key/#textual.events.Key.name_aliases","title":"name_aliases  <code>property</code>","text":"<pre><code>name_aliases\n</code></pre> <p>The corresponding name for every alias in <code>aliases</code> list.</p>"},{"location":"events/leave/","title":"Leave","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the mouse is moved away from a widget, or if a widget is programmatically disabled while hovered.</p> <p>Note that this widget bubbles, so a widget may receive Leave events for any child widgets. Check the <code>node</code> parameter for the original widget that was previously under the mouse.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/leave/#textual.events.Leave.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was previously directly under the mouse.</p>"},{"location":"events/leave/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>MouseDown</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/load/","title":"Load","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the App is running but before the terminal is in application mode.</p> <p>Use this event to run any setup that doesn't require any visuals such as loading configuration and binding keys.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/load/#see-also","title":"See also","text":"<ul> <li>Mount</li> </ul>"},{"location":"events/mount/","title":"Mount","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is mounted and may receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/mount/#see-also","title":"See also","text":"<ul> <li>Load</li> <li>Unmount</li> </ul>"},{"location":"events/mouse_capture/","title":"MouseCapture","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the mouse has been captured.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>When a mouse has been captured, all further mouse events will be sent to the capturing widget.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when captured.</p> required"},{"location":"events/mouse_capture/#textual.events.MouseCapture(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"events/mouse_capture/#textual.events.MouseCapture.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when captured.</p>"},{"location":"events/mouse_capture/#see-also","title":"See also","text":"<ul> <li>capture_mouse</li> <li>release_mouse</li> <li>MouseRelease</li> </ul>"},{"location":"events/mouse_down/","title":"MouseDown","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is pressed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_down/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_move/","title":"MouseMove","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse cursor moves.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_move/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_release/","title":"MouseRelease","text":"<p>               Bases: <code>Event</code></p> <p>Mouse has been released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The position of the mouse when released.</p> required"},{"location":"events/mouse_release/#textual.events.MouseRelease(mouse_position)","title":"<code>mouse_position</code>","text":""},{"location":"events/mouse_release/#textual.events.MouseRelease.mouse_position","title":"mouse_position  <code>instance-attribute</code>","text":"<pre><code>mouse_position = mouse_position\n</code></pre> <p>The position of the mouse when released.</p>"},{"location":"events/mouse_release/#see-also","title":"See also","text":"<ul> <li>capture_mouse</li> <li>release_mouse</li> <li>MouseCapture</li> </ul>"},{"location":"events/mouse_scroll_down/","title":"MouseScrollDown","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_scroll_down/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollUp</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_scroll_up/","title":"MouseScrollUp","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when the mouse wheel is scrolled up.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_scroll_up/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseUp</li> </ul>"},{"location":"events/mouse_up/","title":"MouseUp","text":"<p>               Bases: <code>MouseEvent</code></p> <p>Sent when a mouse button is released.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>See MouseEvent for the full list of properties and methods.</p>"},{"location":"events/mouse_up/#see-also","title":"See also","text":"<ul> <li>Click</li> <li>Enter</li> <li>Leave</li> <li>MouseDown</li> <li>MouseEvent</li> <li>MouseMove</li> <li>MouseScrollDown</li> <li>MouseScrollUp</li> </ul>"},{"location":"events/paste/","title":"Paste","text":"<p>               Bases: <code>Event</code></p> <p>Event containing text that was pasted into the Textual application. This event will only appear when running in a terminal emulator that supports bracketed paste mode. Textual will enable bracketed pastes when an app starts, and disable it when the app shuts down.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text that has been pasted.</p> required"},{"location":"events/paste/#textual.events.Paste(text)","title":"<code>text</code>","text":""},{"location":"events/paste/#textual.events.Paste.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was pasted.</p>"},{"location":"events/print/","title":"Print","text":"<p>               Bases: <code>Event</code></p> <p>Sent to a widget that is capturing <code>print</code>.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Text that was printed.</p> required <code>bool</code> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p> <code>False</code> Note <p>Python's <code>print</code> output can be captured with <code>App.begin_capture_print</code>.</p>"},{"location":"events/print/#textual.events.Print(text)","title":"<code>text</code>","text":""},{"location":"events/print/#textual.events.Print(stderr)","title":"<code>stderr</code>","text":""},{"location":"events/print/#textual.events.Print.stderr","title":"stderr  <code>instance-attribute</code>","text":"<pre><code>stderr = stderr\n</code></pre> <p><code>True</code> if the print was to stderr, or <code>False</code> for stdout.</p>"},{"location":"events/print/#textual.events.Print.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text = text\n</code></pre> <p>The text that was printed.</p>"},{"location":"events/resize/","title":"Resize","text":"<p>               Bases: <code>Event</code></p> <p>Sent when the app or widget has been resized.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Size</code> <p>The new size of the Widget.</p> required <code>Size</code> <p>The virtual size (scrollable size) of the Widget.</p> required <code>Size | None</code> <p>The size of the Widget's container widget.</p> <code>None</code>"},{"location":"events/resize/#textual.events.Resize(size)","title":"<code>size</code>","text":""},{"location":"events/resize/#textual.events.Resize(virtual_size)","title":"<code>virtual_size</code>","text":""},{"location":"events/resize/#textual.events.Resize(container_size)","title":"<code>container_size</code>","text":""},{"location":"events/resize/#textual.events.Resize.container_size","title":"container_size  <code>instance-attribute</code>","text":"<pre><code>container_size = (\n    size if container_size is None else container_size\n)\n</code></pre> <p>The size of the Widget's container widget.</p>"},{"location":"events/resize/#textual.events.Resize.size","title":"size  <code>instance-attribute</code>","text":"<pre><code>size = size\n</code></pre> <p>The new size of the Widget.</p>"},{"location":"events/resize/#textual.events.Resize.virtual_size","title":"virtual_size  <code>instance-attribute</code>","text":"<pre><code>virtual_size = virtual_size\n</code></pre> <p>The virtual size (scrollable size) of the Widget.</p>"},{"location":"events/screen_resume/","title":"ScreenResume","text":"<p>               Bases: <code>Event</code></p> <p>Sent to screen that has been made active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/screen_resume/#see-also","title":"See also","text":"<ul> <li>ScreenSuspend</li> </ul>"},{"location":"events/screen_suspend/","title":"ScreenSuspend","text":"<p>               Bases: <code>Event</code></p> <p>Sent to screen when it is no longer active.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/screen_suspend/#see-also","title":"See also","text":"<ul> <li>ScreenResume</li> </ul>"},{"location":"events/show/","title":"Show","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is first displayed.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/unmount/","title":"Unmount","text":"<p>               Bases: <code>Event</code></p> <p>Sent when a widget is unmounted and may no longer receive messages.</p> <ul> <li> Bubbles</li> <li> Verbose</li> </ul>"},{"location":"events/unmount/#see-also","title":"See also","text":"<ul> <li>Mount</li> </ul>"},{"location":"examples/styles/","title":"Index","text":"<p>These are the examples from the documentation, used to generate screenshots.</p> <p>You can run them with the textual CLI.</p> <p>For example:</p> <pre><code>textual run text_style.py\n</code></pre>"},{"location":"guide/","title":"Guide","text":"<p>Welcome to the Textual Guide! An in-depth reference on how to build apps with Textual.</p>"},{"location":"guide/#example-code","title":"Example code","text":"<p>Most of the code in this guide is fully working\u2014you could cut and paste it if you wanted to.</p> <p>Although it is probably easier to check out the Textual repository and navigate to the <code>docs/examples/guide</code> directory and run the examples from there.</p>"},{"location":"guide/CSS/","title":"Textual CSS","text":"<p>Textual uses CSS to apply style to widgets. If you have any exposure to web development you will have encountered CSS, but don't worry if you haven't: this chapter will get you up to speed.</p> <p>VSCode User?</p> <p>The official Textual CSS extension adds syntax highlighting for both external files and inline CSS.</p>"},{"location":"guide/CSS/#stylesheets","title":"Stylesheets","text":"<p>CSS stands for Cascading Stylesheet. A stylesheet is a list of styles and rules about how those styles should be applied to a web page. In the case of Textual, the stylesheet applies styles to widgets, but otherwise it is the same idea.</p> <p>Let's look at some Textual CSS.</p> <pre><code>Header {\n  dock: top;\n  height: 3;\n  content-align: center middle;\n  background: blue;\n  color: white;\n}\n</code></pre> <p>This is an example of a CSS rule set. There may be many such sections in any given CSS file.</p> <p>Let's break this CSS code down a bit.</p> <pre><code>Header {\n  dock: top;\n  height: 3;\n  content-align: center middle;\n  background: blue;\n  color: white;\n}\n</code></pre> <p>The first line is a selector which tells Textual which widget(s) to modify. In the above example, the styles will be applied to a widget defined by the Python class <code>Header</code>.</p> <pre><code>Header {\n  dock: top;\n  height: 3;\n  content-align: center middle;\n  background: blue;\n  color: white;\n}\n</code></pre> <p>The lines inside the curly braces contains CSS rules, which consist of a rule name and rule value separated by a colon and ending in a semicolon. Such rules are typically written one per line, but you could add additional rules as long as they are separated by semicolons.</p> <p>The first rule in the above example reads <code>\"dock: top;\"</code>. The rule name is <code>dock</code> which tells Textual to place the widget on an edge of the screen. The text after the colon is <code>top</code> which tells Textual to dock to the top of the screen. Other valid values for <code>dock</code> are \"right\", \"bottom\", or \"left\"; but \"top\" is most appropriate for a header.</p>"},{"location":"guide/CSS/#the-dom","title":"The DOM","text":"<p>The DOM, or Document Object Model, is a term borrowed from the web world. Textual doesn't use documents but the term has stuck. In Textual CSS, the DOM is an arrangement of widgets you can visualize as a tree-like structure.</p> <p>Some widgets contain other widgets: for instance, a list control widget will likely also have item widgets, or a dialog widget may contain button widgets. These child widgets form the branches of the tree.</p> <p>Let's look at a trivial Textual app.</p> dom1.pyOutput <pre><code>from textual.app import App\n\n\nclass ExampleApp(App):\n    pass\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p> ExampleApp </p> <p>This example creates an instance of <code>ExampleApp</code>, which will implicitly create a <code>Screen</code> object. In DOM terms, the <code>Screen</code> is a child of <code>ExampleApp</code>.</p> <p>With the above example, the DOM will look like the following:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nM1Ya0/jOFx1MDAxNP3Or6i6X3YlXGKOY8fxSKtcdTAwMTXPpSywo1x1MDAwMVxyj9VcYrmJaT3Na1x1MDAxMpfHIP77XqdMXHUwMDFlbVxiZVx1MDAxN0ZEUZv4OtfX1+fc4+R+pdfr67tU9j/0+vLWXHUwMDE3oVxuMnHTXzXt1zLLVVx1MDAxMoNcdFx1MDAxN/d5Ms38oudY6zT/sL5cdTAwMWWJbFwidVx1MDAxYVxuX1rXKp+KMNfTQCWWn0TrSsso/8P8XHUwMDFliUj+niZRoDOrXHUwMDFhZE1cdTAwMDZKJ9lsLFx1MDAxOcpIxjpcdTAwMDfv/8B9r3df/NaiXHUwMDBilIiSOCi6XHUwMDE3hlp4njvfepTERaiUIVx1MDAwN3PqkbKDyrdhMC1cdTAwMDOwXkHAsrKYpn56sbN1pD45eiNcdTAwMWKyfNP5Nvy6d1WNeqXC8FjfhbM8XGJ/PM1kZc11lkzkqVxu9Fx1MDAxOOz2XFx7+VxcnkBcbqqnsmQ6XHUwMDFhxzLPXHUwMDFizySp8JW+M21cYpWtXCJcdTAwMWVcdTAwMTU+qpZbk1x1MDAwMeJamHmO5zpcdTAwMGV1XHUwMDEwqc23cECY5VLsXHUwMDEwh9G5mLaSXHUwMDEw1lx1MDAwMGL6XHUwMDA1XHUwMDE1R1x1MDAxNdVQ+JNcdTAwMTGEXHUwMDE2XHUwMDA3VVx1MDAxZlx1MDAwZvvcrs335sdMa1x1MDAwM46lXHUwMDFhjbVpxNjyXHUwMDEwcT1GZ75r+ZBF/m3P5pRcdTAwMTKMcWkxI6aDoFx1MDAwMMKX+fyNRZY+5qmfm5tatCbQnXlcdTAwMTTVkVRbY+dcIkv5vlx1MDAxYVxmvk7GfyX88CxcdTAwMWRcdTAwMGZcdTAwMGVLX1xy2Gl5q/ul4WG1y+2Ze1x1MDAxMm1cdTAwMGUv7evp9v6BPls7+8jRfrtbkWXJzfN+XHUwMDFiUawuO5HK7eNVlchpXHUwMDFhiFx1MDAxOfZt10XE5sjjXHUwMDBl4aU9VPFcdTAwMDSM8TRcZqu2xJ9UdFmpxbtA0kacdYba5CmG2thQXHUwMDE0XHUwMDEw4i1N0e7le69cdTAwMTSldidFObeAXG6GLP+HoTpcdTAwMTNxnopcZljQwlLWxlK+wErmeraDXFxcdTAwMWK9Piu7kMihOr1cdTAwMDSJ1YInsT5W31x1MDAwYjS5XHUwMDE2hWKEsIsw41x1MDAxY1HW6LUrXCJcdTAwMTXeNdawgCxEvnMrojSUXHUwMDFiafrrb/VcdTAwMTTnXHUwMDEyXCIpXFyTxjNcdTAwMWKhXHUwMDFhXHUwMDE5aPd9mJvMXHUwMDFhqNdcbkSu7Fx1MDAxMKkgXGJrXGL0IVx1MDAxMFx1MDAwMT6zwTKCk2RqpGJcdTAwMTGetMXZScZM+nqGxVx1MDAxNkZS+qRmYlx1MDAwNCDkUJXdpVx1MDAxOXn+PdGXXyfDk+PRwblzQsefkvPLd89IXHUwMDE3W8hlhHheXHUwMDFiI1x1MDAxZNuxXHUwMDEwI9h+U0pSukhJj0GlmFx1MDAxM+tHalx1MDAwMqRcdTAwMTHFXHUwMDFlcV+fml3KXHUwMDE27MfnQ0rOXHUwMDBmtlx1MDAwMrw33tldu9zDn9+jYM78nu5/vr45INuHXHUwMDA3XHUwMDE5XHL+vMNTTLbdV/CLT4PB3u7EP/Q2iH1cdTAwMTKFf+/EXHUwMDE3ozdcdTAwMTX49sS/QOCZkVZe7a/eSOBcdPXmW3+UXHUwMDEzwinUYUKX34J3o+3dVlx1MDAxM9ZZTVxisZhdaNzbXHUwMDE1XHUwMDEz0lJMsDNfREBcdTAwMWFhXHUwMDE3wp2fKu8vx2GbvGPUaO2Q82M/kzJ+SspZo/+rSfkzMjgv5WWMnZSbVZJcdTAwMTbOMfxcdTAwMTTlQCZAv+FcXF7Bu0vxO+Wc43BcdTAwMGJe7lx1MDAxMXNaOYdcdTAwMTm1XFzOjYJcdTAwMTNujjdjXHUwMDFlslxid5vkLlx06Fx1MDAxMIsz7FJcdTAwMTcvyLlcdTAwMDebXuDGf9loXHUwMDE3wf1sJuZaZHpTxYGKR2CslFxm2OhPzbhryEKO7VLCoVx1MDAxNlKOXHTyylmb6YnU7D0tXHUwMDAyckBcdTAwMWPYg1x1MDAxYYxWr5+98kNQ19b4sXMpqX1cdTAwMTlcdTAwMDfPXHUwMDA2hThUX8Tg1Vx1MDAwME7KmLdcdTAwMTBcdTAwMTW24LWh2HVcdTAwMTXfKmyHPVx1MDAxNVY7zVx1MDAxN8JcbkWut5IoUlx1MDAxYdL/MVGxnk9zkc9ccsPvsVx1MDAxNMG8XHUwMDE1plW3zVx1MDAxN4LUeGzu3KqrXsWU4qa8/rLa2nttXHUwMDExweaoYbfysFL/NzuQwmdfpOmxXHUwMDA2pJVrXHUwMDAwYFbBY+GuJta/VvJms+Xb0lVxmDRcdTAwMTYpNCVHmundP6w8/Fx1MDAwYlxiYlx1MDAxObwifQ== ExampleApp()Screen() <p>This doesn't look much like a tree yet. Let's add a header and a footer to this application, which will create more branches of the tree:</p> dom2.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Footer\n\n\nclass ExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p> ExampleApp \u2b58ExampleApp \u258f^p\u00a0palette </p> <p>With a header and a footer widget the DOM looks like this:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1aa0/bSFx1MDAxNP3Or0DZL7tS4877UWm1glx1MDAxNpZ3aWFcdTAwMDNlVVWuPSReP2s7QKj633dsgu28XHUwMDFjXHUwMDEzXHUwMDEyNpXWQiGZmdy5nrnnzLk3/r6xudlKXHUwMDA3kWq92WypO8v0XHUwMDFjOzZvW6+y9lx1MDAxYlx1MDAxNSdOXHUwMDE46C6Uf07CfmzlI3tpXHUwMDFhJW9ev/bN2FVp5JmWMm6cpG96Sdq3ndCwQv+1kyo/+SN7PTF99XtcdTAwMTT6dlx1MDAxYVx1MDAxYuUkbWU7aVx1MDAxOD/MpTzlqyBNtPW/9efNze/5a8U72zH9MLDz4XlHxT0hx1tPwiB3XHUwMDE1Ulx1MDAwNLEkklx1MDAxNFx1MDAwM5zknZ4sVbbuvdZcdTAwMGWrsidralxyTi//7Jn/qItLwY5Odq7hh17nvJz12vG8s3TgPayDafX6sSp7kzRcdTAwMGVddeHYaS+bfKy9+F5cdTAwMTLqJSi/XHUwMDE1h/1uL1BJMvKdMDItJ1x1MDAxZOg2XG6KRjPo5ibKlrtsXHUwMDAxIDVcdTAwMTBcdTAwMTdYMIwpXHUwMDA2RJS3m31fSINRhFx05nTMo7ehp3dAe/RcdTAwMGLIr9Knr6bldrVjgV2OXHUwMDExyJKwcre3j/dZma+nnG4vzVx1MDAxYVx1MDAxMTJcdTAwMDQgTHD6YLuyXHUwMDFhKl99yCDjknAhip5sxmjfzsPg8/jq9cw4XHUwMDFhrlIryT5UvM1cdTAwMWPdXHUwMDE5j6FqXHUwMDFjVXbY/bgtrlx1MDAwZTBoR9euc9x7f+6eqm+FrZGgS9Vd2io6fryqM1x1MDAwYjto76vf+3JLOsHX+Pro+vh+f3u6WTOOw9umdpfu7sjoV00nLM1cdTAwMGXflfvTj2wzXHUwMDFkbilcdTAwMDNcdTAwMDTpXHUwMDAwpITgot9zXHUwMDAyV3dcdTAwMDZ9zyvbQsstMbhR8XdcdTAwMDL5I35WYVx1MDAwZsFM2DMuJEKYoca4r1/mNcU9XHUwMDAydbiHXHUwMDA0XHUwMDFhlOZcdTAwMTB8XHUwMDBl7tPYXGaSyIw1tqZgn0/Dvlx1MDAxY8c6oYBwKjFaPtSXXHUwMDE5h+V2h0F65tw/xJJBNcNcdTAwMDHEXHUwMDAw4lJcdTAwMDLKR0btmr7jXHJGdjBcdTAwMGZY7fnOnelHntqKol9/q65worQnuWky8p0tz+lmgd2y9L2peCTmU0efm8VcdTAwMDDfsW2vXHUwMDEyf5Z2xNQ24/0mZ1hcdTAwMTg7XScwvfNpftZCMVZW+lx1MDAxMIpT8EhcdTAwMTmcjcd87Vx1MDAwNGON8eh9ROdcdTAwMDcn51dXXHUwMDFjfGA+3btcbkkvXXc8YmhcdTAwMDDGXHRcdTAwMTFiXHUwMDFhXHUwMDFlXHUwMDExpVx1MDAwNuBcdTAwMDTBlVx1MDAwMpLSSUBcbq55YkxcdTAwMDA8XHUwMDFlwlx1MDAxNHLOKV9cdTAwMDEy6061I6ftfzlcdTAwMWFcdTAwMWO+9c47g0/3XHUwMDFkeb69dbK+h/DFQefm9oi8Oz6Kqf3nXHUwMDAw9Vx1MDAxMXnHlmBcdTAwMTdd2Pt7u651LLZcYjz3vfc7wVV3XHR2l76880TD9Fx0XHUwMDFiekturtt+6rZcdTAwMDdcdTAwMWbIXHUwMDE3c0dYd+q47y9hXHUwMDE1tlx1MDAwZb+ddtPww5dTR4pcdTAwMDO307uEnzrN7DZcdTAwMTE5XHUwMDE4gVx1MDAxMjUrXHUwMDEyOYTNXHUwMDE2OZhcbkkolOWIeaRaXHUwMDFmXHUwMDE260qqrJZUXHUwMDA1MzhcdTAwMDTymclNPaeSKZyKSmHxyKVQICQpYCtIaJZcdTAwMTmI01RcdTAwMGVcdTAwMDIjrTWq5syKlVxuZilcdTAwMWE+Mn5pimaOXHUwMDFhXHUwMDE4VzSFj7WYe8D8XHUwMDE00HExXHUwMDEzc1x1MDAxMFx1MDAxMEq0lm1eUKg/ktZcdTAwMTNzXHUwMDE4XGJDUlx1MDAwMTiejjnIXHImZSZkiMyulSFcdTAwMGZcdTAwMThEslFwXHUwMDE3XHUwMDAwxMSQXHUwMDFjMcrQpKrRniGh4bhcdTAwMDBcdTAwMTJz71x1MDAxNkWiwIwvgsQkNeN021x0bCfo6s7yLNNotPrZvG1gXHUwMDAwrNVcdTAwMWGRmlxmqURcdTAwMDSI4raz2zOjbGNcckKylIdSJlx0YkRWRlxmS2x1XHUwMDE5wnBwcai2VGDPdVxuSE2/gOtcZkn/UV5ip/Bcblx1MDAxOTp7ytVnXlx1MDAwN4KYz3JrOswn3PLMJH1cdTAwMWL6vpPq5T9ccp0gXHUwMDFkX+Z8PbcyfPeUaY/36tuq9o1cdTAwMTNBlFlcdTAwMWNVsOW7zVx1MDAxMir5h+L951dTR7cnQzi7KsFbWtio/l8oXHUwMDA3g1x1MDAwMM1OwpD2g2KEmlx1MDAxN0VOXHUwMDBmXHUwMDA3b4OrvnQv/Y8n9uG9+5f7z81/y1061uaQXHUwMDE31OSFMIJcdTAwMDRcdMr1a4XNM1x1MDAwM4RcdTAwMTBDY4Q9dldy0v84XHUwMDE304QlKIa0dOhFUjHn6F03OtlNXHUwMDBmLv0t92T70N/12zPU9/+p2NPtrmh5l252XoY3fcKG3j4jw3skxdnHblx1MDAwNqfKT0ArysQkJuOtXHUwMDE1ZoX64GWoeXmrfvvWlVkhrmVWzlxmJiBmkIFVM2uzjFxmccZYRqsvmpA9OVx1MDAxZZ+XkO1pXHUwMDE1o+JcdTAwMTdOyOYog/GErPDxXHUwMDE50oaBurSMIy2NafNSiJfsXHUwMDFlmGfx9o06oJ3j+z3w7XhcdTAwMWKsO1x1MDAwMDFhXHUwMDA2gZzAXHUwMDFjX9mvXHUwMDFiY9KGXHUwMDFiWId8MWBdlI3kOkmQ1VrWiyib40+nZF/sWIdcdTAwMDNcdTAwMTd+ci/aN1F/XHUwMDAw/1c2y1I2K1ren8XsPME0fcKG3q60dI04rXLNilx1MDAwNFx1MDAxM6SYjTdcdTAwMTeEzTHQvoAnKKb6/VtXwqawlrC5NCjEWFx1MDAwZVx1MDAwNdVcblx0u2FcdDvLPzlcdTAwMDGlmy8jmJ5cdTAwMTiPz1x1MDAxM0y7YZi+uGCaozfGXHUwMDA1U+FjLfRmVrBcdTAwMTma/UicoEBcdTAwMTJcZnDzXHUwMDEydn32tq7QXHUwMDAzwFx1MDAxMFRcYplVQ1x1MDAwNVx1MDAxNmhcdTAwMDR5WEslwXV+wIfIw6uDXHUwMDFlXHUwMDAyhqSMS0klg1JCMYlEgVxyqZNIJFx1MDAxONY+M4nGgUmAhFx1MDAxNEm0XHUwMDAwMJ9R0F48k5ld0G5Q8C2PuWqlmVBcdTAwMDBcdTAwMDGlXHUwMDAy6pVgXGLDyqjH6jdFXHUwMDE0wmH2KTBcdTAwMWVcdTAwMGWYX89cdTAwMWXxqT61XHUwMDE59YkhoONcZnFJXHUwMDAw1uGEJnyCyOA6USZMZ8Ukq1x1MDAxM6BcdKd+qmr27GDOrokwLu1tVP8/mc8gwLNcdI3RXGbmXFw011x1MDAxMvXqal1cdFxyXHUwMDBiXHUwMDAzScFcdTAwMDVikmnJUFx1MDAxZVRcdTAwMGaEpqVcdTAwMDTCNPuVnFxiQenqXGJNYoNBiHQ8M4xw5cHeks6kgVx1MDAwNOeSUo6ZoHLy2V/B9Z2QhTLCZ/HZokJj2XxcdTAwMDZcZk1j2lx1MDAxYlx1MDAwMfR2MSRk+ZxiwVx1MDAxZNyA+TOTXHUwMDEwPGzognxWrzxGfKJASL1OTGtcdTAwMDRcbinhXHUwMDEzLlx0gzJ9XGZcdTAwMDGYXHUwMDFmm1iIn5rNZlx1MDAwNXJ2TYTwLCrbXHUwMDE4mm+ZUXSW6ngrtkKHtGNcdTAwMGbVaXmPrVx1MDAxYkfdbk95vP46vzLBl69mxkIqu9PvPzZ+/Fx1MDAwYlx0sVx1MDAwYuIifQ== ExampleApp()Screen()Header()Footer() <p>Note</p> <p>We've simplified the above example somewhat. Both the Header and Footer widgets contain children of their own. When building an app with pre-built widgets you rarely need to know how they are constructed unless you plan on changing the styles of individual components.</p> <p>Both Header and Footer are children of the Screen object.</p> <p>To further explore the DOM, we're going to build a simple dialog with a question and two buttons. To do this we're going to import and use a few more builtin widgets:</p> <ul> <li><code>textual.layout.Container</code> For our top-level dialog.</li> <li><code>textual.layout.Horizontal</code> To arrange widgets left to right.</li> <li><code>textual.widgets.Static</code> For simple content.</li> <li><code>textual.widgets.Button</code> For a clickable button.</li> </ul> dom3.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal\nfrom textual.widgets import Button, Footer, Header, Static\n\nQUESTION = \"Do you want to learn about Textual CSS?\"\n\n\nclass ExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Footer()\n        yield Container(\n            Static(QUESTION, classes=\"question\"),\n            Horizontal(\n                Button(\"Yes\", variant=\"success\"),\n                Button(\"No\", variant=\"error\"),\n                classes=\"buttons\",\n            ),\n            id=\"dialog\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p>We've added a Container to our DOM which (as the name suggests) is a container for other widgets. The container has a number of other widgets passed as positional arguments which will be added as the children of the container. Not all widgets accept child widgets in this way. A Button widget doesn't require any children, for example.</p> <p>Here's the DOM created by the above code:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1d+1PiyFx1MDAxNv59/oop95e9VWO2+/T7Vt265Vx1MDAwYnVcdTAwMWSfOFx1MDAwYnrnllx1MDAxNSFcdTAwMDIjLyGIurX/+z1cdTAwMWSVXHUwMDA0Qlx1MDAwMihB2DvU7qhJ6Jx0n/Od7+tX/vz0+fOa/9j21v75ec17KLn1Wrnj9te+2OP3XqdbazXxXHUwMDE0XHUwMDA0f3dbvU4puLLq++3uP3/7reF2bj2/XXdLnnNf6/bcetfvlWstp9Rq/FbzvUb33/bfI7fh/avdapT9jlx1MDAxM95k3SvX/Fbn+V5e3Wt4Tb+Lpf9cdTAwMDf//vz5z+DfiHXlmttoNcvB5cGJiHlGjlx1MDAxZT1qNVx1MDAwM1NccuGCXHUwMDAzIzC4oNbdxpv5Xlx1MDAxOc/eoMFeeMZcdTAwMWVa29y+K3b2XHUwMDFlL5t5wXP7f0C+d212w7ve1Or1vP9Yf65cdTAwMDe3VO11vPBs1++0br1CrexX8TxcdTAwMWQ5Pvhet4VVXHUwMDEwfqvT6lWqTa/bXHUwMDFk+k6r7ZZq/iNcdTAwMWVcdTAwMTNkcNBtVoJcIsIjXHUwMDBmwVx1MDAwNeBQJkBcdTAwMTCquDBE8cHp4PvUYYRqo1x1MDAxOFBcdTAwMGVajtq11apjO6Bdv5DgXHUwMDEzWnbtlm4raF6zXHUwMDFjXqOhZGjkmfuvT6uZwzlcdTAwMDPA21x1MDAxOGZcYojBJVWvVqn69lx1MDAxYVx1MDAwMEdcdTAwMTMutVx1MDAxMs+3ipjiXHUwMDA1TUJcdTAwMDVQ4FLqsEmtXHUwMDAx7f1y4Fx1MDAxYv9cdTAwMWSt0qrbab9U3VrX/lx1MDAxMTHe2r0z6lhR54o0u5bnXHUwMDFi5sdlsVrq7JOTk8vCuVuQg7KGPNH3XHUwMDFl/LXBib++pFx1MDAxNXt4uv90kXso+p1tb72a71x1MDAxNlx1MDAxNfCb8cW6nU6rP225XHUwMDE5mTv3Yoeu/jLtXHLDYl9+XHUwMDBim73XLrvPwUulJFxco1trqfXgfL3WvMWTzV69XHUwMDFlXHUwMDFla5Vuw3j/XHUwMDE0sTeGMkN2RiGG6NGjr1x1MDAxMCOAXHUwMDE50IqEXHUwMDBlO1x0YtJreVkhRqVBXGZFXHUwMDA0XHUwMDAywoFTot6PMX7HbXbbblx1MDAwN1x1MDAwM3dcZs6oyThcdTAwMDNxXFxB41xmXHUwMDEwakK754Yr8/TO0Fx1MDAwYlpNP1978oKyXHUwMDFjQTUnIFx0KGOIUENX5dxGrf441LCBXHUwMDFio+VcdTAwMWLt9q//iFZ110NcdTAwMTOCMsXQxVx1MDAxYvVaxfr5Wlx0XHUwMDFmyutcZoWAX8OUPbigUSuX61x1MDAxMX8soVx1MDAwNS6W2dmfJn22OrVKrenWz4dcZkxccsmOV/KffXJMXFxcbkWS4pIqIyhorvTUgVx0rdO9XHUwMDFi/fitcX2+sd+oXHUwMDFlVcVV/2TZXHUwMDAzkyrHXHUwMDAwZ1x1MDAxNORzYFx1MDAwZcUloO8oYFxu/3/O/dmFpVx1MDAxOFx1MDAxM4daOVx1MDAxOKacKVx1MDAxMYtHrlxyIZpcbj3/eEzLcGfyxtvtq1x1MDAxZtWzwl3ha+OSi527+vLm+cLvf9z3v/Ltw69cdTAwMWRR3n2EXHUwMDFl8O2EhDxTuVAo7+/lbkuHeoPT80b9eKd5WZlDuVx1MDAxOVVvRsWq+9pe7m6HNjo7V+Vt/1x1MDAxZe6P6/OoXHUwMDA1Tjpt2rwvXHUwMDFkXHUwMDE1clx1MDAwN0e6sF1oXHUwMDFk+lx1MDAwN+8qd1x1MDAxMo9cdTAwMWFfQVOae/2jsXFSv5dU+OubZVM5OGo9PE5n7rLwMy7V6NFBXHUwMDFlkIgykis2fVx1MDAxZUh3tyXNXHUwMDAzKK1S8lx1MDAwMNdcdTAwMGXD9jCv/Cy7PMDH8TFcdTAwMTbDf6VBWDKTgc7Lmo9cdTAwMDFcdTAwMTk6msK/8qWO5zWTKJhcdTAwMWG6fm5cdTAwMTRsXHUwMDAyi1x1MDAxOaVgXHUwMDAzXHUwMDFiU1x1MDAwM+858MdEnoakwFx1MDAwM+CCXHUwMDEzXHUwMDFkYdyT4i49i35I3FEyMfCMcDTlhqlxgYcs1GFcXFx1MDAwZlximMgs8IjDjSQmyrVcdTAwMDbxx7hjXHUwMDE0SCEhTsRcdTAwMDQzmnEuYfZAXGasW3Qgdn2342/WmuVas4Inw3yGwVjq2fuuXHUwMDEzhzAqXHUwMDA1R3RRXHUwMDAyQZGE1W5cdTAwMWbPbdtmQ1x1MDAxMSlQR1xuIVxyXHUwMDA3yU3kipfeyDRF83LxILGuec3yRKOIUehPXG6lXHUwMDFj/idUqExcdTAwMDZWgYMyLyDMQe9cdTAwMThlKsms8VFcdTAwMWUzq+52/a1Wo1HzsfpPWrWmP1rNQX1u2PCuem559Cw+VvTcKFx1MDAwZbRticOkO/ztc1x1MDAxOCnBXHUwMDFmg9//+2Xs1etxXHUwMDE3tp+I84YlfIr+fJN0pJSz0cOv0MUlw3yKXjo1dDVcdTAwMGVcbnDyXGJ721vffpQ2L2BcdTAwMDOKXHUwMDA172Ohi09CLkaZI1x1MDAxOJJcdTAwMDFuOOJTRIpcdTAwMDVfZ9rRRFx1MDAxM2OoXHUwMDA0TcjSSEfJXHUwMDA1YGTDgnuIycPW9UFLXlx1MDAxZJT13f3ZUfuGnlx1MDAxZPKfynFeyjGj6l2tYucvSCdcdMfxXHUwMDBmXHUwMDEyXHUwMDE2+4qzXHUwMDFmLfAoiYDEXGJaY1wipVxiUtN3wKe33rKCtU5cdTAwMDNrRVx1MDAxY8OxNZShXHUwMDAxWC+BwFx1MDAwM6Q7iohcdTAwMGbocDczeOP7XHUwMDA03lx1MDAxZdJcIq+zYIE3gWuMXG68gY3v4Epa0KTo41x1MDAxMt2NSja9zDvYOqnkjqhqyZvzvavTi2qp+vWDx78mhlx1MDAxZlx1MDAxMlBkQ1x1MDAwNFx1MDAwNZ4kmqlcYvlcYr7OiaMkRiVjWiFtJ9nJvFx1MDAxOclcdTAwMTJcYoPijrxB3L2HK12RnD686lx1MDAxNVx1MDAwZp425FaDbPbORK/4kyvNiytlVL0/i/2QvvvxXHUwMDBmMjNcdTAwMDWbJem9jYIpZUZcdTAwMGZcdTAwMGYmQVx1MDAxMKlcdTAwMTjRfHpcdTAwMGWW3nxLmlx1MDAwNFx1MDAxOE1LXHUwMDAyXG5cdTAwMWNtXGZRQFnWSWA6XHUwMDBlXHUwMDA2XHUwMDA0oVx1MDAxZqniR3SyL46D5Votf+FcdTAwMWNsXHUwMDAyh1x1MDAxOeVgXHUwMDAzXHUwMDFiUyMvuZNd8sTIk8LYvs7pIy9dZC7p6JamXHUwMDBlhlx1MDAxNuGGcEKJNEORx4hxJDOCaFx1MDAwM1ooynl2kWdQaFx1MDAxOabBSKBcXI2LQ2rn63BGXHUwMDE4wlx1MDAwMGgqqVx1MDAxOY1LKvCo5lGVtrA+9zfFZXKf+1x1MDAxNH3SYcqLdoZzQTUxQiCY2s68cETyc9hDLzmAeVx1MDAxZLJk7OWCyX3uQ0alq6Vho7CtXHUwMDEwuLlcdTAwMTRcdTAwMWFcdTAwMTRmu7hNXHUwMDE0XHUwMDFjXHRCXGKtJeVcdTAwMTRcZo/ZtFJcdTAwMWTuid5sP3E/XHUwMDBly/tcdTAwMTT9OTOcof8ndr1TJrF6XHKfYT5lOmVbTkCTTDvAqMK4tLOhR1x1MDAwMY1Sh1wi2+DUgLQ/Mlx1MDAwNDTJXHUwMDFkaWPMoFSkhof9SpFZ29QhdpYrXHUwMDA1jf9Hc81gNpfSXGZcdTAwMTBkVlx1MDAxZtBe0YA41FBlQYrhXHUwMDAzXHUwMDAzeiRcdTAwMGKD41x1MDAwNVxyXHUwMDE0Nlx1MDAxMuproGiMXHUwMDE2KP4jV7xlsG7SXHUwMDE4XCJxbIojXHUwMDFjMHtcYkFcdTAwMDVXMZO0g4RcdTAwMDBcdTAwMTDFlE2ETOskk8ZcdTAwMTOYlYazRFdcdTAwMGVOxpx4XmiGzZ9cdTAwMDRmKFx1MDAwNdArpJl+XHUwMDFjMX0u1pJOgUA1ZFeYIEkzXFxhK1xmz1xyt8OMhklCMckwxSC7rmnpXHUwMDE4XHUwMDE0XtyuMEF6xWSYZFwi5Fxmg1xiXHUwMDA1kUJYZaBRxsWwjGDcc6pM+IyrimVvJmdAQFAk2kZgXHUwMDE2UiQ+e8Jgi2rkb1x1MDAxYUOKMKNeqcGM3Kx0ly/+vv/Acr9fX5y6hzfXh+R4N8EmgsmQXCJhMVx1MDAwMVx1MDAxZFHAY0ZR7mhO0dHAXHUwMDAwIKc0sNJwtp7ozvZcdTAwMTN35Fx1MDAxOfEstcNcdTAwMWaISOzroUhJXHUwMDE4g1kmdqW385KiXHUwMDFh5n5cdTAwMDdcdTAwMTBcbjhcdTAwMTOgsFx1MDAxMUKkeJ5cdTAwMWVhXHUwMDFjhjrBKNQoQI1cdTAwMWGxa55cZi1EzLDHP0wpr7jFgGk0KFSkXHUwMDBi6ep/8vvC2z2R3fLvKt8/qNxvbVx1MDAxZW/+7OqfV1d/RtW7WsVmNU9/tWrhXHUwMDFk0/RcdTAwMTPKnTQyMf5BpjT3x7fqU1x1MDAxOfLFYt4tnpeqV4WN+lnCmo2ZXHUwMDFh7eBcXO+c9HKHXHUwMDA3Z113vXrQudl4qO9OV+5rXpwjXHUwMDBiS02xyatJVeJyXHUwMDA14NoopF7TS4Z0d1vW5FxuLC25XG6kcotJrmJMco0ssHxNrlx1MDAxMrOrnbKbQXbNeiSFyqGjKSMpW69jXHUwMDFjv35v2lx1MDAxM7Xyv77bjVx1MDAxN+qtyve1783xIyxcdTAwMDKGylx1MDAxOVxmoNS9m2Hnn2l8ZVx1MDAwMmNcdTAwMWNcdTAwMWRfmWj5O6gwJ4mDL+jAXHUwMDAwis6wvcTR3vXm7Teyv5477uzU1pv89NvjzrJcdTAwMDer5Kg17LwzrpRcclZcdTAwMThcblZhuGNQh2CsZlx1MDAxZKxcdTAwMTFNXHUwMDFlMuF4b6TQilx0XHUwMDEzXHUwMDFkgF1cYlx1MDAxNW7vNftcdTAwMTe3x9c7ZVLNre+vXHUwMDFmk3rx8CdcdTAwMTWeXHUwMDE3XHUwMDE1zqh6V6vYrKjwatXC/KlwRuZOYtjjb5g9XHUwMDEzTi13v3/WKPTFjr7eJFx1MDAxN/6RPKrRq4TJ7TOVu9voXHUwMDFll76dNd2LgtgvbNx5lav1/nTlLlxyc+cscVwirFCEK1x1MDAxMd1cdTAwMTllXHUwMDEyXHUwMDE5SHe3pSVcdTAwMDNcIoVcZkhiXHUwMDFjvlx1MDAxODKgx5CBMczdjklcdTAwMTi7XHUwMDA2/O/M3PeQXHUwMDEwP1lcdTAwMGVcXP/VXHUwMDFlfybBpbrb7XpdZMLXPd9vNbuLJvFcdTAwMTPIbmyi+lxmXHUwMDBm8Vx1MDAwZT4vk/eM4VRwXCJcdTAwMDUjU4dweX/f39l+2uHXrFuu7l+oRv/SXfZcdTAwMTBcdTAwMTZ2N1x1MDAwMCUkl1JcdTAwMDCG8PB4nZLS4YBS1273xIBnuJXTlHzeLmoxoFx1MDAxNzyJfbt597he8lxi9b8+Ulwi+24+d978SefnReczqt7VKjYrOr9atZBcdTAwMTWdX61aqJvNLX29u8W3pPTy51x1MDAwN1x1MDAwZpVcXG5KevxG9TH+Qf6P2Hx0ksdo11x1MDAxZWFMaVxyYno6n+5cdTAwMTfLylx1MDAwNVx1MDAwNEvjXHUwMDAyii6KXHUwMDBijKPzKsZcdTAwMDVcZppIuFAruKp0eja/XHUwMDE5MN1cYlx0/r524SHx/fL8173bqblNXHUwMDFmKXG3Vyrh0yXzejVcXPiceP1cdTAwMDTSO8rr3/Y472D4KD6TwtpQ6+UgZpiR97Tlnp6ap7PKZvGylds4h0b+dNmjWlx1MDAxOe1IXHUwMDAzxE5cdTAwMDWFmEhXUjh2wi5+1FIwfCCUMY46fcG7QbKvxW5+s974arbyxe5cdTAwMWb8x5Ms/tzTY25cdTAwMTQ/o+pdrWKzovirVVx1MDAwYllR/NWqhflT/IzMnaRcdTAwMWPG33BKa98xvvDy28crh2h/cmxcdTAwMDVcdTAwMTNcdTAwMDXgTNLplUN6+y0px9CEpXFcZkVcdTAwMTbFMaZTXHUwMDBlVFx1MDAxOY5qLjqz6v9DOlx1MDAxY7XGUG1cdTAwMGZcdTAwMDOrs2jdMIFKT6FcdTAwMWImPUtqMKeLXHUwMDA2XHUwMDAxyX1cdTAwMDFcdTAwMDJQz3NcdTAwMDPTr0ms9o+L9fouK/hf20y15GX+zr1e9ohmmjtcdTAwMTiqWmKYXHUwMDA0fVx1MDAwMWIopIWRjkBtpbnKXFw2jFm6M2ZgwFx1MDAxMIFBRt+yd+l7ZMN957Kfq2z+qKpK+3ZrY+Obq9tnP2XDvGRDRtW7WsVmJVx1MDAxYlarXHUwMDE2spJccqtSXHUwMDBik3j4+Fx1MDAxYi4hX1x1MDAxNjqRL2thqN1cdTAwMGV++uSaXs1Lm1xcTVpylYQuKrnqMcl1XGZfJswgX1ZvWFx1MDAwNrs6dDnvu8hgXyaNn37byZ/vXHUwMDFmXHUwMDFmfbF/jM4+uet5Xb+WOokmXHUwMDFi0jyBSca283/rXHUwMDEzpcZ14uJ3mVx1MDAxONacXHUwMDFhLYDNsJAlfcXQkoZ1sP0/U6hcdTAwMTCQjGL0XHUwMDBl78sqXHUwMDE4c4BJxlXmKlx1MDAxOIyDXHUwMDE1zijeXGLsmmFcdTAwMTVcdTAwMGZyyZ3xu0RyorRcdTAwMWHaROpvseR9luXlQjBit8IhWIfcaFx1MDAxYbnqdTtcIq00XHUwMDExxK7GJnY19stcdTAwMDVcdEveh1x1MDAxZmOVlp0ne5L9XGZ8KCznU/Tn7JtcdTAwMDFFXHUwMDEy/ygz0NpcbrxcdTAwMTmW16RPiV5SXGKRXHUwMDAwXHUwMDBlXHUwMDE3WNtCWM+iw3tcdTAwMDFcdCZcdTAwMWNcdEoxXHUwMDA1zDBcdTAwMDZmxK45QlxikY7dt9A6ONGM6DFcdTAwMTBcIrD57Yt77IxcdTAwMDBjKJD4XHUwMDBiRYDYxXJcdTAwMWM+4IVcIktcdTAwMDEmxOFKcFCSSqVcdTAwMTFRTPw1XHUwMDFm2lx1MDAwMWk4J4Tad3wgXHUwMDE3TMeSJJPS59eOmKSEXCJUMlwiqNAmvpdcdTAwMTF37I5mTHGBXHUwMDE2XHUwMDBiyVTMpFVcdTAwMDKxZFe2n7hcdTAwMTPPXHUwMDBizCRJ3jaDM/vuVD3DsED6QMmSoplcdTAwMTLSXHUwMDAxu1x1MDAxZj/XytjN3IZljlx1MDAwMcegrmBcdTAwMTK4nYmhR+ya42ZAxNFcdTAwMDKBk1x1MDAwMlD7hoKw2kM+JFx1MDAxY5RiRiq7ZT5nXHUwMDEw31ODW9/h5i1vjV1mLJtcdTAwMDE4wM7+4kiJhGG2VaPvSVx1MDAxYeyJSKyu5VxiL1x1MDAwNONN67ehWfrowDBbXHUwMDAzKkBSXHUwMDEwOliCQlh8IzTlIFx1MDAwMCuqXHUwMDA3RGU1gSzRi4OTo/47L1x1MDAxOItsZVx1MDAxN+NklGKiYDO8TTF9ouiyolx1MDAxOJNcdTAwMGV7fte1XHUwMDA0VFx1MDAwNsNbPVtcdTAwMTSzkk4pad/LrNiIXfNDMbxcdTAwMTFcYlRnRnOmkVSNQzHlgFx1MDAwNo2pXHUwMDA1qN2bKbZcdTAwMDSKoZnYZvxvRsimXHUwMDA2seC9YkhcdTAwMDFcdTAwMDBZqaaMKjlmL0dKXHUwMDFkgdyIXGIuUPNgXHUwMDEye+N2s+lzI0esYsq+XCJcdTAwMDVcdTAwMThcdTAwMTNKo9aKb2kmXHUwMDFkXGZuJIlcdTAwMDSI3Ss0btMqYdl6ojPbT8yNk8Ds08tcctbcdtv2dnmD1kC/rpVf+lx1MDAwMMOnXFy7r3n9zXjc/XJcdTAwMTN8bMdXUJ9cdTAwMTaJPPusf/716a//XHUwMDAxsk3fXHUwMDAxIn0= App()Screen()Header()Footer()Container(    id=\"dialog\")Horizontal(        classes=\"buttons\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")Static(    QUESTION,        classes=\"questions\") <p>Here's the output from this example:</p> <p> ExampleApp \u2b58ExampleApp Do\u00a0you\u00a0want\u00a0to\u00a0learn\u00a0about\u00a0Textual\u00a0CSS? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258f^p\u00a0palette </p> <p>You may recognize some elements in the above screenshot, but it doesn't quite look like a dialog. This is because we haven't added a stylesheet.</p>"},{"location":"guide/CSS/#css-files","title":"CSS files","text":"<p>To add a stylesheet set the <code>CSS_PATH</code> classvar to a relative path:</p> <p>Note</p> <p>Textual CSS files are typically given the extension <code>.tcss</code> to differentiate them from browser CSS (<code>.css</code>).</p> dom4.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal\nfrom textual.widgets import Button, Footer, Header, Static\n\nQUESTION = \"Do you want to learn about Textual CSS?\"\n\n\nclass ExampleApp(App):\n    CSS_PATH = \"dom4.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Footer()\n        yield Container(\n            Static(QUESTION, classes=\"question\"),\n            Horizontal(\n                Button(\"Yes\", variant=\"success\"),\n                Button(\"No\", variant=\"error\"),\n                classes=\"buttons\",\n            ),\n            id=\"dialog\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = ExampleApp()\n    app.run()\n</code></pre> <p>You may have noticed that some constructors have additional keyword arguments: <code>id</code> and <code>classes</code>. These are used by the CSS to identify parts of the DOM. We will cover these in the next section.</p> <p>Here's the CSS file we are applying:</p> dom4.tcss<pre><code>/* The top level dialog (a Container) */\n#dialog {\n    height: 100%;\n    margin: 4 8;\n    background: $panel;\n    color: $text;\n    border: tall $background;\n    padding: 1 2;\n}\n\n/* The button class */\nButton {\n    width: 1fr;\n}\n\n/* Matches the question text */\n.question {\n    text-style: bold;\n    height: 100%;\n    content-align: center middle;\n}\n\n/* Matches the button container */\n.buttons {\n    width: 100%;\n    height: auto;\n    dock: bottom;\n}\n</code></pre> <p>The CSS contains a number of rule sets with a selector and a list of rules. You can also add comments with text between <code>/*</code> and <code>*/</code> which will be ignored by Textual. Add comments to leave yourself reminders or to temporarily disable selectors.</p> <p>With the CSS in place, the output looks very different:</p> <p> ExampleApp \u2b58ExampleApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aDo\u00a0you\u00a0want\u00a0to\u00a0learn\u00a0about\u00a0Textual\u00a0CSS?\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u00a0Yes\u00a0\u00a0No\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p>"},{"location":"guide/CSS/#using-multiple-css-files","title":"Using multiple CSS files","text":"<p>You can also set the <code>CSS_PATH</code> class variable to a list of paths. Textual will combine the rules from all of the supplied paths.</p>"},{"location":"guide/CSS/#why-css","title":"Why CSS?","text":"<p>It is reasonable to ask why use CSS at all? Python is a powerful and expressive language. Wouldn't it be easier to set styles in your <code>.py</code> files?</p> <p>A major advantage of CSS is that it separates how your app looks from how it works. Setting styles in Python can generate a lot of spaghetti code which can make it hard to see the important logic in your application.</p> <p>A second advantage of CSS is that you can customize builtin and third-party widgets just as easily as you can your own app or widgets.</p> <p>Finally, Textual CSS allows you to live edit the styles in your app. If you run your application with the following command, any changes you make to the CSS file will be instantly updated in the terminal:</p> <pre><code>textual run my_app.py --dev\n</code></pre> <p>Being able to iterate on the design without restarting the application makes it easier and faster to design beautiful interfaces.</p>"},{"location":"guide/CSS/#selectors","title":"Selectors","text":"<p>A selector is the text which precedes the curly braces in a set of rules. It tells Textual which widgets it should apply the rules to.</p> <p>Selectors can target a kind of widget or a very specific widget. For instance, you could have a selector that modifies all buttons, or you could target an individual button used in one dialog. This gives you a lot of flexibility in customizing your user interface.</p> <p>Let's look at the selectors supported by Textual CSS.</p>"},{"location":"guide/CSS/#type-selector","title":"Type selector","text":"<p>The type selector matches the name of the (Python) class. Consider the following widget class:</p> <pre><code>from textual.widgets import Static\n\nclass Alert(Static):\n    pass\n</code></pre> <p>Alert widgets may be styled with the following CSS (to give them a red border):</p> <pre><code>Alert {\n  border: solid red;\n}\n</code></pre> <p>The type selector will also match a widget's base classes. Consequently, a <code>Static</code> selector will also style the button because the <code>Alert</code> (Python) class extends <code>Static</code>.</p> <pre><code>Static {\n  background: blue;\n  border: rounded green;\n}\n</code></pre> <p>Note</p> <p>The fact that the type selector matches base classes is a departure from browser CSS which doesn't have the same concept.</p> <p>You may have noticed that the <code>border</code> rule exists in both <code>Static</code> and <code>Alert</code>. When this happens, Textual will use the most recently defined sub-class. So <code>Alert</code> wins over <code>Static</code>, and <code>Static</code> wins over <code>Widget</code> (the base class of all widgets). Hence if both rules were in a stylesheet, <code>Alert</code> widgets would have a \"solid red\" border and not a \"rounded green\" border.</p>"},{"location":"guide/CSS/#id-selector","title":"ID selector","text":"<p>Every Widget can have a single <code>id</code> attribute, which is set via the constructor. The ID should be unique to its container.</p> <p>Here's an example of a widget with an ID:</p> <pre><code>yield Button(id=\"next\")\n</code></pre> <p>You can match an ID with a selector starting with a hash (<code>#</code>). Here is how you might draw a red outline around the above button:</p> <pre><code>#next {\n  outline: red;\n}\n</code></pre> <p>A Widget's <code>id</code> attribute can not be changed after the Widget has been constructed.</p>"},{"location":"guide/CSS/#class-name-selector","title":"Class-name selector","text":"<p>Every widget can have a number of class names applied. The term \"class\" here is borrowed from web CSS, and has a different meaning to a Python class. You can think of a CSS class as a tag of sorts. Widgets with the same tag will share styles.</p> <p>CSS classes are set via the widget's <code>classes</code> parameter in the constructor. Here's an example:</p> <pre><code>yield Button(classes=\"success\")\n</code></pre> <p>This button will have a single class called <code>\"success\"</code> which we could target via CSS to make the button a particular color.</p> <p>You may also set multiple classes separated by spaces. For instance, here is a button with both an <code>error</code> class and a <code>disabled</code> class:</p> <pre><code>yield Button(classes=\"error disabled\")\n</code></pre> <p>To match a Widget with a given class in CSS you can precede the class name with a dot (<code>.</code>). Here's a rule with a class selector to match the <code>\"success\"</code> class name:</p> <pre><code>.success {\n  background: green;\n  color: white;\n}\n</code></pre> <p>Note</p> <p>You can apply a class name to any widget, which means that widgets of different types could share classes.</p> <p>Class name selectors may be chained together by appending another full stop and class name. The selector will match a widget that has all of the class names set. For instance, the following sets a red background on widgets that have both <code>error</code> and <code>disabled</code> class names.</p> <pre><code>.error.disabled {\n  background: darkred;\n}\n</code></pre> <p>Unlike the <code>id</code> attribute, a widget's classes can be changed after the widget was created. Adding and removing CSS classes is the recommended way of changing the display while your app is running. There are a few methods you can use to manage CSS classes.</p> <ul> <li>add_class() Adds one or more classes to a widget.</li> <li>remove_class() Removes class name(s) from a widget.</li> <li>toggle_class() Removes a class name if it is present, or adds the name if it's not already present.</li> <li>has_class() Checks if one or more classes are set on a widget.</li> <li>classes Is a frozen set of the class(es) set on a widget.</li> </ul>"},{"location":"guide/CSS/#universal-selector","title":"Universal selector","text":"<p>The universal selector is denoted by an asterisk and will match all widgets.</p> <p>For example, the following will draw a red outline around all widgets:</p> <pre><code>* {\n  outline: solid red;\n}\n</code></pre>"},{"location":"guide/CSS/#pseudo-classes","title":"Pseudo classes","text":"<p>Pseudo classes can be used to match widgets in a particular state. Pseudo classes are set automatically by Textual. For instance, you might want a button to have a green background when the mouse cursor moves over it. We can do this with the <code>:hover</code> pseudo selector.</p> <pre><code>Button:hover {\n  background: green;\n}\n</code></pre> <p>The <code>background: green</code> is only applied to the Button underneath the mouse cursor. When you move the cursor away from the button it will return to its previous background color.</p> <p>Here are some other pseudo classes:</p> <ul> <li><code>:blur</code> Matches widgets which do not have input focus.</li> <li><code>:dark</code> Matches widgets in dark mode (where <code>App.dark == True</code>).</li> <li><code>:disabled</code> Matches widgets which are in a disabled state.</li> <li><code>:enabled</code> Matches widgets which are in an enabled state.</li> <li><code>:focus-within</code> Matches widgets with a focused child widget.</li> <li><code>:focus</code> Matches widgets which have input focus.</li> <li><code>:inline</code> Matches widgets when the app is running in inline mode.</li> <li><code>:light</code> Matches widgets in dark mode (where <code>App.dark == False</code>).</li> </ul>"},{"location":"guide/CSS/#combinators","title":"Combinators","text":"<p>More sophisticated selectors can be created by combining simple selectors. The logic used to combine selectors is know as a combinator.</p>"},{"location":"guide/CSS/#descendant-combinator","title":"Descendant combinator","text":"<p>If you separate two selectors with a space it will match widgets with the second selector that have an ancestor that matches the first selector.</p> <p>Here's a section of DOM to illustrate this combinator:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1dWXPiSFx1MDAxMn7vX+HwPOzsRKOp+5iIiVxyfODbbjdu293bXHUwMDEzXHUwMDBljGSQXHUwMDExXHUwMDEylmSwPTH/favARlx1MDAwMiRZXHUwMDFjYmCnefAhQSmVyuP7KiuLPz9sbGyGz1x1MDAxZGvzt41N66lec2zTr/U2P+rjXctcdTAwMGZsz1WnUP//wHv06/13NsOwXHUwMDEz/Pbrr+2a37LCjlOrW0bXXHUwMDBlXHUwMDFla05cdTAwMTA+mrZn1L32r3ZotYP/6J+ntbb1e8drm6FvRFx1MDAxNylZplx1MDAxZHr+4FqWY7UtN1xm1Oj/Vf9vbPzZ/1x1MDAxOZPOt+phzW04Vv9cdTAwMDP9UzFcdTAwMDFcdTAwMTEg44dPPbcvLVx1MDAxNFx1MDAxY1x1MDAwYimAkMN32MGOumBomer0nVx1MDAxMtqKzpj9a1x1MDAwNVx1MDAwN7x5b1Pil1x1MDAxOWx/2nX2v5Ur0XXvbMephs/OQFx1MDAxN7V689GPSVx1MDAxNYS+17KubDNs6quPXHUwMDFkXHUwMDFmfi7wlFx1MDAxYaJP+d5jo+laQTDyXHUwMDE5r1Or2+GzPlx1MDAwNsDw6EBccr9tREee1H+UY4MxTlx1MDAwNGFcdTAwMDBxQfDwrP48ZtJcdTAwMDBEQCoxoOokXHUwMDE5k2vbc9SzUHL9ZDHOXHUwMDAxiCS7rdVbXHIlnmtcdTAwMGXfXHUwMDEz+jU36NR89cSi9/Xe7pix4bGmZTeaoTooRHQ9q693iFx1MDAwMFaCMFx1MDAxYd2FvkrnwOxcdTAwMWLBXHUwMDFm43pr1vzOq342XHUwMDAz/U9MQi3c7rhcdTAwMDXFrSj2bKl7V7rCsve1aVx1MDAxZcKb26dcdTAwMTPGYDBcdTAwMWNrxORC6yncXHUwMDFjnvjrY9aw7W9fji727ra64ZfLw9557+Wk0blNXHUwMDFltub7Xi/vuFeHl93eMdk5OfapufeMXHUwMDFlXHUwMDEx2WFcdTAwMGJcdTAwMThcdTAwMTddmVx1MDAwN/uVVv1ElFx0vGg7Z7vut8ZcdTAwMDLGLUi96zXs8ePOPpDXXHUwMDA3L0934qhSMZ9uat3eXHUwMDBm5S5m2H1rXHUwMDBmXHUwMDA33bpdvtm+XHUwMDBi7ytcdTAwMDe75fOr47mUO1wixce8N5JT3Obxdlx1MDAwZmBcdTAwMGK07zudg6Pj7svN+U6YT9zXv6JQ+Ngxa4OspYIsJJBcIiZcdTAwMDSPwq1juy110n10nOiYV29Fie5DTOCJXHUwMDE0O3L/I9lcdTAwMTWK8cNv2ZVzKiHjMMpZ7yXXbLNY2eQqspKrIFx1MDAwNl1OcqVcdMmV8vHkilR2RVx1MDAxY9LosS0sty7SXHUwMDFho4fuuWHVfunDNTZytFJr287zyHPrm6mSdFudrtmu5f/83dUnbPP375umXXO8xvfN7+6/41pcdTAwMGUsJY1cdTAwMWWeopFxyo7d0Ca+6Vh3o7ZcdTAwMWbaXG6oXHUwMDBlT7dt04xDz/rbtVx1MDAwZvJcdTAwMDBGz7dcdTAwMWK2W3Mu8kqe6abZSJhClOarkCtcdTAwMTAsOVx1MDAxMjy3s55fPDjWS3nr8XHr5MA5Obt2ryv3f6+z0nd9lVx1MDAwMYNCXHRcYodcdL5KMTOkgJwqV9W+SlN9XHUwMDE19F9z+KpcdTAwMDSTvirYhK9cdTAwMDKAMYNAXHUwMDE24KxZiem+etjYvfDc7Va9xfyn1sG31kNKYvpcdTAwMDGEp1x1MDAxZrcg9a7XsEVcdTAwMDHh9dLChd/c6d12rYtcdTAwMTBcdTAwMWY6XHUwMDEwiZfWeWc+xLqOWlg8blx1MDAxZoyLn1x1MDAxZkpfkajUQ9JcdKrW887Z9lx1MDAwM1/AuGZcdTAwMWJcXG57h597leujbafb8XdvXHUwMDFiuFCekaz4aNjXvzJcdTAwMTFcdTAwMThmJMr/RfFcdTAwMDGKU/lcdTAwMDCkilx1MDAwYlxiRkGUV9/DXHUwMDE42fa2qlx1MDAxOINmYVxmXG5ccrJcdTAwMWOMIVx1MDAxMjDGJFx1MDAxZpCAXHUwMDEzIFxiL2CubZHWOFx1MDAxZlx1MDAxZthXMPtFI2vnZ318XHUwMDAwretOLVxirEDh69vHMPTcYNnU4Fx1MDAxZFx1MDAwND1OXHKmuYlM581mXHRcXKbOlzPMXHUwMDA1Izj/bPmX8PzCe3q+2eptnZ1+uXj5/PKpzFL8d8xcdTAwMGb/LjpPODGApFxiXG7JuXJfQkb8lyNqKCpcdTAwMGJcdFx1MDAxM8rJXHRcdTAwMTfz+O9PXHUwMDEw3VxuoajxzFxmXHUwMDAxXHUwMDEyrKRcdTAwMDScocW7b1ZcdTAwMDZkrOneyy77elolnYY8wkfHj5X5gcBcdTAwMGaGUKh612vYolx1MDAxOMJ6aaEohrBeWnDk1ra43dsm24xZ1Yujp0alssK2sHyCkHwjOcWtXHUwMDFmnV6QzrF/+tXfvjWt44483vuyuELEUoiHiNWWx4lcdTAwMDeTXHUwMDEwXCKJRX7ikW1cdTAwMTcrWokgXFxmQlx1MDAxNypccrwo6DI99YBcdTAwMTFsfJvepLpARPCyS1x1MDAxMUulXHUwMDFlW31Y/vP3za+WwubJ9Fx1MDAwMpKRj1xy+UNd3Y7lz04w3oHf41x1MDAwNGNcXNRMR8wmXHUwMDExXCK2pGbMXHUwMDFiXHUwMDExXHUwMDA0XGZDOUVZkMPKWYvsud3mXvUlaODnXHUwMDEz379ebVx1MDAxNsEkMqBSXHUwMDAye3XF0UlcdTAwMDBNXCKo1GW41SBcdTAwMTFAeyElYMkk4iGQlaP2WZVcdTAwMWOet2jFNe/RzqfLXHUwMDFmJGJRJKIg9a7XsEWRiPXSQlEkYr20UFx1MDAxNIlYLy0svijyXHUwMDFlN0m+kWjY17/+flx1MDAwZSFlOodAurTBXHUwMDEwyT/5mf38VpRDMMmzgFx1MDAwYtVcZmNBwGVcdTAwMTFcdTAwMTSCS0VcdTAwMWZcYohhmv9nXG5x6i2bQbxcdTAwMDO9U1x1MDAxOcRA0kwvXHUwMDFjXHUwMDA0l1x1MDAwNDdkIL2EXGIh1oYp83thdm15NUuITFx1MDAxN1x0XHRjXHUwMDE0YFwigEQjPkhcdTAwMThVJ1x1MDAxMZVcdTAwMTJDKinjhfkgMDBcdTAwMDZUcixcdTAwMTCmXGIozdNJn2TSgMopKIVCxVx1MDAwZS7wuItcIlx1MDAwMDliKFZVyu2ifVlndVHC4UxcdTAwMGJcdTAwMGWDsOaHW7Zr2m5DnYwy3VsnSp51fX2nrj9cdTAwMDZ9LVx1MDAwMkY5xVxcqVx1MDAxMFx0XHUwMDE5X1x1MDAwM6p1UetoTmZgSVxiXHUwMDAxQFExiFV4fX3DMONuWq75vkzZXHUwMDA1xZhMJSVcdTAwMTTmXHUwMDAwqStcIlxuoZIv8rmhUMjAnDMpKEVcdTAwMTLolDAhlFNcdTAwMGLCba/dtkOl+0+e7YbjOu4rs6w9vWnVzPGz6qbi58ZDQkePOMpcIqO/Nlwin+n/M/z7j4/J7043Zv2aMONovFx1MDAwZvHfU0czXGJcdTAwMDFcdTAwMWU/PKynXHUwMDAySFx1MDAwNIQyesN70SxcdTAwMWK8rSqmYMTgXHUwMDAyMimFJJLEVozrzzNMXGYqMUOIUPVcdTAwMDY2LtdcdTAwMDIxXHUwMDA1xFx1MDAwNkZQXHUwMDFiPEbKolGk92h2XHUwMDA0XHUwMDE4XGZzhFx0xFx1MDAwNKugXHUwMDE1W58xXGJnXHUwMDAyS6DcgswwVzJXOJtcdTAwMTVx5FxmZ7lDXHUwMDA3MFxiplx1MDAxOCCgMCDAkkNcdTAwMWPzo9fIXHUwMDAxocH0Ulx1MDAxZklcdTAwMDBcdTAwMDE6XHUwMDE0z1x1MDAxNs6ywceoTFxiS8l1L1x1MDAxZmBcdTAwMDKDJJlUXHUwMDAwoFKrknKOXHUwMDEw4utcdTAwMWTO0m1ZvyaseFHRLD5tO4HNJCfKmfNcdTAwMDez7CrZqlx1MDAwNjMsXGaKXHUwMDEwg0JiXHUwMDE1zMZjXHUwMDE5M1x1MDAwMMVcdTAwMWF8MJX1i1x1MDAwYmVSKmvGkimszFWWTmr9XHUwMDEwKuhcIqFbXFxcdTAwMTGEKn5MrPyCXG6VIKpS/z81lJU0JiCSqidJmYLZQrCYXHUwMDE3vcVccmyoUKf8jFx1MDAwM4XFlabfkMGUwSy7XHUwMDE2MyqVTodSuVx1MDAxM0QqpElcdTAwMDQnhKJcdTAwMDZcdTAwMDRUhVfOgZZrUqR1XG5lpVRj1q9cdDOeMpRl1qlcdTAwMTQySVxyZyq39d08f9HYadbA2XFnL7Shf0rK7Z3wyjxdcapJdEfMSFxmQ0hcdTAwMThQQlx1MDAwMlx1MDAxOCpwcSpNoJKCXHUwMDFiiKtcdTAwMDTCJ0BcdTAwMTfGkGDFhJfcXHUwMDEw7jlP1XLrwobynpZcdTAwMWN0ePxcdTAwMTLUq/PPwJ6cXHUwMDFmvHytPF2H/o5ValaDa47I3T+wQFWQelx1MDAwYlx1MDAxYZZ37f3Kwy5s+7s35k7YRd0zZ1x1MDAxMVogwO9At1s/vapcdTAwMWOdiqudK+8kPFpd7d7et8ufnC6DNCxtmbJxdKqyWqHlg+RcdTAwMWLJKe5cdTAwMWM91pnjfjmzzmXpwWqJ3a8v95/cs8vSXU5reEtb70CkXGJHXHUwMDE3VO6gNH2elWFFXHUwMDFmXHUwMDE0ssjfXHUwMDBlmm1uq5r86Hjyo9JcdTAwMTBcbm5cdTAwMTSZ+khC6kNcdTAwMTPTpopaKFx1MDAxNlFExluk4UXPNypsIDByNKOwUa37luX+nFLS4CPvX1hJ41x1MDAxZJQ2XtJcdTAwMTjKmOljqYSZp1ZcdTAwMTSFXHUwMDAy+EDPUud2sexYtpouRlx0MahmWFx1MDAxYzLEYUxcdTAwMWT93Vx1MDAxMaA0KKSFXCJNXGJcciggZlSRKSooTZj0IypcZqQgT6hcdTAwMWVRX+5cdTAwMTkqjPOWL/gsjpiTJGd7wUZ8bo1KrtNcdTAwMDElkjCMXHUwMDEyKDIxXHUwMDAwXHUwMDA1XFxcdTAwMDfN1zNTUuMpSilMPVx1MDAwZu04XHUwMDA0ci6jRqS4KEA339F+c1x1MDAxZJZyQqJ1YsbptqtfMauNXHUwMDA2+lx1MDAxMP8929pNlE6KXHTlXGIjPsVcdTAwMWPf+YV74MnHo93OTfPo7vzm0uJcdTAwMGbWiscsjJShgdGwNNgoTShwQFx1MDAxMFx1MDAxNJz2o1x1MDAxMlx1MDAxYpNogVEr305pSGFcdTAwMDTlnXyG2upcXFx1MDAxYqV99tF1q/n5oXlwWeru032zu3OfXGZ+fyzcnH7cgtS7XsNcdTAwMTa2UdpaaaGgYYvacKEgcVx1MDAxN0/i393XLfFGcor7cIvLVVRmdyc7XHUwMDE31WvvM7l7MlvrNTeAkEhdtVx1MDAwMLFUp5mg+SdcdTAwMDey7WJVUVx1MDAwME1GXHUwMDAxglx1MDAxOHhJKCDflm5QXGJcdTAwMDSgXHUwMDEyqID+jaInXHUwMDBi5tzTLbBN67bmL3/nhkxUm2tTt1x1MDAxMdHngOtZJXmqWFx1MDAxOVx1MDAwNGCKXd26veolsvDR4fVpq1x0fdn4dmydpHhq3feCoNSshfXm3++tXHUwMDEwXHUwMDE5irlob1x1MDAwNWNe2f88YobgXHUwMDA1zjJwPumpXHSdVlxiXCLMgIRL3tCtVVx1MDAwNtf7N4dP5llcdTAwMGaf7l1cdTAwMTDzmJXdXHUwMDFmgH1RgL0g9a7XsEVcdTAwMDH29dJCUZ1W66WFojqtXG5cdTAwMTJ38ds1XHUwMDE0JO57tCX5gjmlnYO2ZI5bpdVnSlx1MDAwZt2DXHUwMDFitoPuXHUwMDFliLtXPkwhhStLh6RM7WdXUiBAOEf5XHUwMDBiOdl2saJ0XGLyTIBFoIGLXHUwMDA0WCxcdTAwMDFgTVIhLplUkFx1MDAxN69h2XTqfjB9bMAnvm9cdTAwMWW4QVhznGXzoHfYQkp7WKrgmb6Z3i+W3rQpOVx1MDAwMphROMWOdZnrOlbTNSlcdTAwMTaGXHUwMDE4W7XwVl3tN1x1MDAxY1x1MDAxNemXRK/PXHUwMDFjxIVJXHUwMDA3JdKgjI0tJVx1MDAxY+5Dj1VUXHUwMDE1s1CheVdcdTAwMWbP5KqLLqyWgMGERIxJXHUwMDE1WpmEOKr3bkTlTIIxlVGFL6WyOir/XHUwMDFhVThLSfajXzHLicb4XHUwMDEw/z11nIgtZlx1MDAxYe/DYlxcb6RI85c1s7HSaoZcdFx1MDAwMqhBqMBcdTAwMTKqZIpZbHnBoK2UXHUwMDE4sexe5LQm0F83JaTuXHUwMDFml0xFZ0FcdTAwMTJyO4OGnmIl8vVcdTAwMTX74ozXuVx1MDAxNEgp5ZLPsjn+Klx1MDAwN5DsucXRXHUwMDAwotuwXHUwMDAwJZjplUSQxL4oYFx1MDAxOEK4IbBKglx1MDAxMFxyNJnQK5BrjUZ2pt9cdTAwMThpd1VcdTAwMDJJSlx0XHUwMDEyglx1MDAwYoZcdTAwMTPaXSfbW9cpZmWYr35NXHUwMDE47pTxK70kk1qRwSp5UEbzdypcdTAwMWP4n+Wlc/FcYus9XHUwMDFmXHUwMDA1l1x1MDAwN95J2fs8+ywvXHUwMDFh97VcdTAwMWMhLIpN03RfIVx1MDAwMlxmoWyLxSdz+ztTXGJmXGIwWIU0T+D66a5GXHUwMDExRYm7aaHoPqOFm5MrxpBe76ZcdTAwMDRZ8qKM4jdxXFzewtC2traNsGlcdTAwMDVWXCKbiYHGadhM6HXSqMzIrYzzlrg4s2FcdTAwMGYq0796R1LdcVx1MDAxZW98fs99s1x1MDAxZvVS3He25knMXHUwMDEzvLTvvlx1MDAxMlx1MDAxOFhcbiwwXHUwMDAzXHUwMDFjXHUwMDAzmr6pRY6vycrwYa5cdTAwMThcdTAwMTFcdTAwMWWjRNH2MsRQaVx1MDAxMlx1MDAwMVxyyrnKp5N7WWi6XCJcdTAwMTBe9lZcdTAwMTZcdTAwMDUjjuxsMJLbXHUwMDExXHUwMDAwXHUwMDEyXHUwMDEzhiBVhEVSjmLvXHUwMDFh9ktKQvHMi0Fz90lqYaR6XoLrfnxAJUlo3uRcbvFcdTAwMTJFoF43ROVcdTAwMTMyrVx1MDAxM/BIMF79Kk3a7YIgXHUwMDA3lOlcdTAwMWRcIpwjpU+FP3NHLeubXHUwMDBm7ZOtW8e8XHUwMDExqGe13Fx1MDAxNv+yv1x1MDAxNqBcdTAwMDNcdTAwMTNcdTAwMTW1JjGHOmAw2bf1oiCHiEJNXHUwMDA25GBSXHUwMDExOimW/SVcdTAwMDCrNbE/XHUwMDFm4vjF9Nx/hb9svKV6O1hcdTAwMDXgkSDVbPhcdTAwMDPFZsTH9+NcdTAwMDVUXHUwMDA1T8R5fk/OfvCrjD9cdTAwMTAxMMaC6u2zIIjvXHUwMDEw1XdoXHUwMDE1YYnsr+wqXGJ/MGlwyoWKXHUwMDE5XHUwMDEyYUXdo4npqKjBjMGU31x1MDAwNLFcdTAwMTCMU5XIwLJbUVxuhlx1MDAxZtl5YWNkwlx1MDAwMynlYaQ3RVx1MDAxMIIgNDndIYz+ZMeM4CP3LIdcdTAwMTJF51lcYlx1MDAwMVwiXGbr73lcdTAwMTJsQlx1MDAxNjiQN0madYJcdTAwMWSpNqtfpaG5pmGOXHUwMDBmr1x1MDAwM2/WOp1qqGxrqH9lvrb5XHUwMDFhqaO72+zaVm8ryav6L1x1MDAxZFx1MDAwMPt61GHG0vf4519cdTAwMWb++lx1MDAxZow/wb0ifQ== Container(    id=\"dialog\")Horizontal(        classes=\"buttons\")Button(\"Yes\")Button(\"No\")Screen()Container(    id=\"sidebar\")Button(        \"Install\")match these*don't* match this <p>Let's say we want to make the text of the buttons in the dialog bold, but we don't want to change the Button in the sidebar. We can do this with the following rule:</p> <pre><code>#dialog Button {\n  text-style: bold;\n}\n</code></pre> <p>The <code>#dialog Button</code> selector matches all buttons that are below the widget with an ID of \"dialog\". No other buttons will be matched.</p> <p>As with all selectors, you can combine as many as you wish. The following will match a <code>Button</code> that is under a <code>Horizontal</code> widget and under a widget with an id of <code>\"dialog\"</code>:</p> <pre><code>#dialog Horizontal Button {\n  text-style: bold;\n}\n</code></pre>"},{"location":"guide/CSS/#child-combinator","title":"Child combinator","text":"<p>The child combinator is similar to the descendant combinator but will only match an immediate child. To create a child combinator, separate two selectors with a greater than symbol (<code>&gt;</code>). Any whitespace around the <code>&gt;</code> will be ignored.</p> <p>Let's use this to match the Button in the sidebar given the following DOM:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPayFx1MDAxNv2eX+HyfMmrXHUwMDFhNL0vUzX1ylx1MDAxYl6It1x1MDAxOMdxXqamXHUwMDA0yFi2QFjIYDw1//3dxlx1MDAxOFx0kFx1MDAwNDiIQCaaqlx1MDAxOCTRurp9l3P6dvf8/W5jYzPstZzN3zc2naeq7bm1wO5u/mrOd5yg7fpNuET639v+Y1Dt33lcdTAwMWKGrfbvv/3WsIN7J2x5dtWxOm770fba4WPN9a2q3/jNXHKdRvu/5t9cdTAwMTO74fzR8lx1MDAxYrUwsKKHXHUwMDE0nJpcdTAwMWL6wcuzXHUwMDFjz2k4zbBccq3/XHUwMDBmvm9s/N3/NyZd4FRDu1n3nP5cdTAwMGb6l2JcdTAwMDJcdTAwMTLKx0+f+M2+tJgxxKhiWFx1MDAwZe9w27vwwNCpweVcdTAwMWJcdTAwMTDaia6YU5unT1x1MDAwZr3CcfehXFyq1iv+x6B81Ph4XHUwMDE1PffG9byLsOe96MKu3j5cdTAwMDYxqdph4N87V24tvDVPXHUwMDFmOz/8XdtcdTAwMDc1RL9cbvzH+m3TabdHfuO37KpcdTAwMWL24Fx1MDAxY0fDky9a+H0jOvNkblDIYkQxoZSgSpPhRfNrirhFJOiAIcSU0HxMqlx1MDAxZN+Dnlx1MDAwMKl+Qf0jkqtiV+/rIFxcsza8J1xm7Ga7ZVx1MDAwN9Bf0X3d1/dcdTAwMTVieO7Wceu3IZxUKnqe09e6VlJcdTAwMTKCWNQn5iGtw1rfXHUwMDAy/lx1MDAxY1farVx1MDAxZLRcdTAwMDbK2WybLzFcdTAwMDGNbHvj5lx1MDAxMzehWMdcdTAwMWU3gkcquttb+1x1MDAwNz1153/aqYf+zrCtXHUwMDExe1x1MDAwYp2ncHN44Z9fs5ptfLkslfdvtjvh5aej7nn3+bjeqiQ3a1x1MDAwN4HfnbXdq6NPne5cdTAwMDe2e/wh4LX9XHUwMDFleSRsVyygXXJVOzwo3leP1Vx1MDAxNsPlhne61/xSX0C7Oal3vZr98Lh7gPTnw+enXHUwMDFiVSpcdTAwMTZrT3/Zne5P5S6m2eYneVx1MDAxM1xcf9zzd0J9dl1raX5Fb1ZXucGjLu70xNlflza9Pqtf1vjV0dk3iTtcIsWvs75I1OzgU1x1MDAxNGFcdTAwMWZbNfslXHUwMDEzQuiG5KBcdTAwMDX8p/Twuuc27+Fi89HzonN+9T5Knu9i8k6k7Vx1MDAxMTlHMjZT46eHXHUwMDE5XHUwMDFicoMkSNCZXHUwMDEzdnb3rWrC5lx1MDAxOVx0myBLLidh84SEzaO8PEjYkKtcdTAwMDVcdTAwMTOYxSxjYVx1MDAxOXuRxlx1MDAxOPW531xmL9znvj2JkbNFu+F6vZFu61spSLpcdTAwMDOXbbfpXHUwMDA07782zVx1MDAwNbf2x9fNmmt7fv3r5tfmf+JqbjsgjWmek5F2tjy3bix803NuRk0/dFx1MDAwMftcdTAwMGUvN9xaLY5mq6/PPpxcdTAwMDWD+oFbd5u2V55V8kwvzVx1MDAwNtec41RX5eDHWjOGZ/bVx+1tzfZ6qHhyt9XcVzLsnlx1MDAwNEer7qtCWkQhRDGd9FUmqUVcdTAwMTlTXHUwMDA0XHUwMDEx3vfVXHUwMDFjnVWjSWdVYtxZmWZcdTAwMTBBOc7BV7Oy3e5D8S44Oz54OC/uljpN++7y41x1MDAxN/cnul5cdTAwMTS6zkm969VsXuh6vbRQXHUwMDBlbne7lY5TXHUwMDBl6ZGHiXq+P299+NdpIS8ycNCz5e1e62z3ktxXXHUwMDFmcIufXHUwMDFmXHUwMDFl11x1MDAxNtBuVVx1MDAxY5/xc9ooXHUwMDFl1IJS4aSwfVK8JavYa9NIRvJcdTAwMDOjZlx1MDAwN5++P8ngUoyfXHUwMDFlXCJcdTAwMTdcIjHVUszBMrL1vKLIRZJcZuSipKWWhFxcVFx1MDAwMnKZpFx1MDAxOVpSjaj6sVnGXHUwMDAxgPdng9e99+b8XHUwMDBiYK96drvttFx1MDAwMbVXXHUwMDFlw9BvtpdNOKbg8nHCMc9LZDpvNvdQKHVgXzGwXHUwMDEzhYme2YErXb3fKNRDXSn0XHUwMDBlnXapt394WllxXHUwMDA3ZmZcXJ9LKbg0fkFGPVhcYmJhLFx1MDAxOcKcI+M835t6SI6QknHGuFx1MDAxNOqx5fTY/vmhf1cv71x1MDAxNLYudz63y92Ugbaf1GP+dnNS73o1m1x1MDAxN/VYLy3kRT3WS1x1MDAwYp7e3lGV/Vx1MDAxZLYjhHNRLj3Vi8VcdTAwMTW2hbyYx8LFncY8klx1MDAxZlx1MDAxODU7+PT9mYfSLJV5IFwiIFczOfuYabaeV1x1MDAxNbjwLOCiuSWWXHUwMDAzXFySmEdsaPSVeSBcZlxmXGKxXHUwMDFjgMtcdTAwMTRrjFx1MDAwMau8mcd2XHUwMDFmlb//unntXHUwMDAwNE9mXHUwMDE3mI38bEhcdTAwMWaq8DpO8HZ+MVx1MDAwNXyP84txUTPdMJtDQNem+lwiVlxuXHUwMDBijsXsJOLx+aDTPH1+vmS03PN4VTS/PFx1MDAxN1fcXHUwMDE3wcgspFx1MDAxNXDrXHUwMDE3X1x1MDAxY+NcdTAwMTDYklpcIqXRanBcYkqxXHUwMDE2XFzFRiOWwiGuXHUwMDBlXHUwMDBmzz5cXD8/bFx1MDAxZlx1MDAxNC78QtdcdTAwMGWfPznHPznEojhETupdr2bz4lx1MDAxMOulhbw4xHppIS9cdTAwMGWxXlrIq9iycHGnUZPkXHUwMDA3Rs1cdTAwMGU+LVx1MDAxMlxmZmKiNGpCXHUwMDExkuOnI2pcIjlSfJ6iSLaeV1x1MDAxM1x1MDAwZUnEMuBcdTAwMTAwXHUwMDEzslx1MDAxYzg0XHUwMDFiM8GaKVx1MDAwMmLKXHUwMDFjJkuvIDU58ZfNTKYg+lRm8lwiaaZcdTAwMTO+hKxcdTAwMDQvlFx1MDAwNKU6IcdSKCb57E6YXVx0X00nXHUwMDA0hG9cdTAwMTFwQLAyjlx1MDAxMJd8xFx1MDAwYlx1MDAxOcKWkERx+MC0XCKxQu6i3Vx1MDAxMFlAOFx1MDAxMMZcXEumheI0NnQzdEuhISgwXCKgZ1x1MDAwNHiimvRSjLjCwHDo/F7aXHUwMDE3dtle2lx1MDAwZe0g3HabNbdZh4tRrntdjDPLPMS+X1dcdTAwMWbbfTVcIlx1MDAwMb1IJSeIKOgyLWN31e2W4XpcdTAwMTYolzGEjL4pkXhwwzDnbjrN2nSZskuVMZlcbiBcdTAwMTSViMBcdTAwMTNcdMdA9LlSfEIqYlEphVx1MDAwNsJJNIJAKyak8ux2uOM3XHUwMDFhblxiyj/z3WY4ruS+NreMt986dm38KrxV/Np4WGiZXHUwMDE2R/lp9Gkj8pv+l+HnP39NvjvdnM0xYchRe+/if+eOaJjg1MlcdTAwMTbgXHUwMDE1nDGsZ1x1MDAxZvHMhoUrXHUwMDFh0SS2OIGghSRYN4uiSP/XXHUwMDEyWVx1MDAxYZCVMkNcdTAwMWKaxIZDXHUwMDE3XHUwMDBlKzC1qFCKQWDlbGTSRzTogiymXHUwMDAwXHUwMDAyMZCTgj3EJn5cZuq4mijMwWt+rGg2c+RcdTAwMDD9UI6FMj5EXHUwMDA0pFx1MDAxZlx1MDAxNvOiQdzAkKKwXHUwMDE5NWaIIU5cdTAwMDR7YzTLhFx1MDAxZqMyXHUwMDExqjX4rEJIKFxuXHUwMDFkPSlcdTAwMTO4P9dcZnPCzVxuO1x1MDAxMHytg1m6LZtjwopcdTAwMTdcdTAwMTbLIGWkwjOALIRcbj7HvJPs8tuKXHUwMDA2M8aBIyHMTWKkMjZA/lx1MDAxMs2IxbAwI7VcXFx1MDAwYinHxVpcXDTTXHUwMDFh+phA0NRcdTAwMWNDOoutXHUwMDFhioJcdTAwMTmz4CqVcFx1MDAxZsZE0IlZZVx1MDAxOEJcdTAwMTlcdTAwMDNcdTAwMGbG/9ZoVjCggHFMXHUwMDAwalx1MDAxM1xiaYyihHBGLUhcXFx1MDAwMJOAXHUwMDFlQ1xu44K+LZ5lXHUwMDE3ekal4lx1MDAxYfA/1lx1MDAxMlx1MDAxM4hqmuBcdKG4XHUwMDA1uFx1MDAxYVwirJTIyDUp0jpFs0KqMZtjwoznjGaZRTBcdTAwMTnjJWNcdTAwMDGNaCyQmme1nfZKl6Wb+6fS9dVFrfaJ2Fx1MDAxN1x1MDAxZj6ueDhjZlx1MDAwNY8wuYJAzkYyXG4j/eFcYlx1MDAwMbpcdTAwMDeEKlx1MDAwMbVpXHUwMDA0d+RcdTAwMDfOYlWtKICBbPBoKidgXHUwMDE4QGZcdLQknmyWUlx1MDAwYrvrlu9cXO+ycdTuak4qXi0sep++fbD3+Pzw+br49DlcZnadwu1F+7MkbFx1MDAxMTP2161cdTAwMTaWk3pzalZ23IPiw1x1MDAxZW5cdTAwMDR7f9V2w1x1MDAwZemceovQXHUwMDAyQ0FcdTAwMGI3O9WTq2LpRF3tXvnHYWl1tVu5a2ydeVx1MDAxZIF5WNiu6XrpxH/qra64i197PlDD58NcdTAwMTLx2lx1MDAxN6p1etxmndZt6ZBfflO70yoryVxuipp9zY5cdTAwMGJEYpmJNq2yXHUwMDAySDiVNCDgYkQxOnuWzTaLXHUwMDE1zbJmtUl6ltXCgoSGXHUwMDAx5+mcsyxLyLIk0v1rdqVUamqw1uKza96VlVj9YEpl5aJcdTAwMWE4TvN9Sk1Fjty/sJrKXHUwMDE0jDheU1x1MDAxOcqY6XjpfF2lbyZBgD4gTdjs2z9lR87V9DzOsVx1MDAwNWRcdTAwMWNcXItcdTAwMTGqXGJcdTAwMWatpsB3S0klluB5XHUwMDE4XHUwMDAzi1SUaOCZSopYrXnoiIybMlx1MDAwMFx1MDAwN8ebwLtcdTAwMDQhRpjW4lxyeHeVmXq2O2zEx/i4llx1MDAwMuJcdTAwMTJcdTAwMDeWLijhMYo4oMTMQlx1MDAxY1RcZtpcdTAwMWJcXJmTn89R0Vx1MDAxMVx1MDAxOFx0XHUwMDA19JxhXHSBMqGgXHUwMDAzsiCgsohzbpKb1lx1MDAxM1wirVx1MDAxMz9PN15zxMw2auhd/O/bpqfSdGpcdTAwMGVsUYE7izm217huPV2497RyfcnK4fn+XHUwMDE26dyffl7x4EWJtKggXHUwMDFjSHpcdTAwMDJsMJvXYWVqwfqFnH/33eugQ1x1MDAxOFn+XCK34z1WPFdq9+amVun2yrf+VlhOISA/J6jO325O6l2vZnPbvW6ttJBTs7ntXpePuHmNIOQk7nn9oX7uXFw9XHUwMDEwLb94lyeNtt1yUsZRXHUwMDE2tdle4otEzb6Cg+89MEEoSV1cdTAwMDFDMCFCKI5nh1x1MDAxONn9t6JcdTAwMTCDkiyIQVx1MDAwMOsuXHRizLbfXHUwMDFlxpIjSlx1MDAwMX2v39DEN+6313ZrTsVcdTAwMGWWvf/FXHUwMDE04DzThnsjome66pRcdTAwMTVr6ZtjMsaAiDE++3DG9lHTx1xi6JdDjypP5Vx1MDAxMr7URSfFXcfcbtRZx6csvdVZMZrqrVhbXGZpRvCLt45OPmCCWIJcbo6Y+PbRjF8wqSgllEpwVZkweJGw5Vx1MDAwNSZcdTAwMTKx+Fx1MDAwNNalsIHzvaND9CRLN6dXLr66PdNfetf7P9nAothATupdr2bzYlx1MDAwM+ulhbyWq62XXHUwMDE28lqulpO4eW15sV6dtnxOlPxcIjOKe1rd3T65bqn60Ze7Y7vje0/bjM0m7uDTd+daXHUwMDE00dTldUT3t9mLIYVp2C3bLL5cdTAwMGLVmlx1MDAwMb1cdTAwMTGWhd6ktPCi0NuU0dxcdTAwMDT8lrC1uWRMXHUwMDAzXHUwMDA0zFx1MDAwMb+tXHUwMDBl01x1MDAxYSxaM+de+MrXzcNmO7Q9b9k8a1xuXHUwMDFkSVltlyp4ppOmXHUwMDE3jFx1MDAxOUl1Ulx1MDAwNCleUDVcdTAwMDfDyp5cdTAwMTKzmlx1MDAwM1winHFLMCp14oBcYuHCMsMgS3BSxixJiOCCJMzZYNriQjAkJkvFVCBwJPKWXUJ+iEpxwVxmWWlcIoSmXHUwMDEwZzWmOKk8yyjlmsoppeJR+deoYltIMlx1MDAxZnPEXGYnauNd/O/8MYOn1mk55cpUjGfP65m4bDUjXHUwMDA2w8Si4OuvQ6hcdCt2XHUwMDExNsaY91x1MDAxY1x1MDAxM2RcdTAwMTFuZvQogYmAXGJcdTAwMTCb2Fx1MDAxNa3XNZNcdTAwMTckVlx0U6qppGZcdTAwMDe2t+T7VVx1MDAwZVx1MDAxY9njl6OBXHUwMDAzXHUwMDExJFx1MDAxMWdUSCRcdTAwMTiOZlx1MDAxN1xmXHUwMDAzh7RcdTAwMTQliGIzXHUwMDE3XHUwMDA3joR1XHUwMDE3M001yc71XHUwMDFiI4uHQVx1MDAxY7PGiygzUYlINLlOd3K18DqFqnSrNUdkr3OGq3RcdTAwMWWSselcdTAwMTnHRFx1MDAxMqlm5yFS2yd35O7sYLdXrX/0xd72WUWkxKtcdTAwMTVcdTAwMTlDJlx1MDAxNFx1MDAwMI7Go9jhZb8z9mrd31TmyVx1MDAxODkmSdPeJiFcZlx1MDAwNtJcdTAwMDH2IN8y2+1bho5Xi2YnXHUwMDExm9lnt142a05gXGLLRnjrtjde9lx1MDAxZE+e6qpGfjz7VNfQb6WxmZHXXHUwMDFhpy7Jor1ccnxA0EhcdTAwMDVcdTAwMWbIJGQ5x+L67P5fSW+mWFlcdTAwMTC2zNbiXHUwMDE0Y6FGx1x1MDAxNFx1MDAwNMA9zNToXG6qMY92hJRv92hNLU0pXHUwMDE1ZjNcdTAwMWUmaGxCXnxcdTAwMTVX4lx1MDAxYS6zmo/QkZLdXHUwMDBmXHUwMDAxOLJzwijggNxcdTAwMGXAXHUwMDExXHUwMDExXGKMWkNATli4XHUwMDBl0VrNwlW+XHUwMDE5a1x1MDAxOHGkJmbSqlZcdTAwMDSeiVTiYliwMqzM/zvDbFx1MDAwMrXe2CPVes1ReDXcNOTxbtDupt1qXYRgZcNeXHUwMDAwQ3Zrg5BcdTAwMWS93GbHdbrbXHTuddM/TFx1MDAwNOyr0Vx1MDAwNFx1MDAxYce84t//vPvn/yxzRNUifQ== Container(    id=\"dialog\")Horizontal(        classes=\"buttons\")Button(\"Yes\")Button(\"No\")Screen()Container(    id=\"sidebar\")Button(        \"Install\")Underline this button <p>We can use the following CSS to style all buttons which have a parent with an ID of <code>sidebar</code>:</p> <pre><code>#sidebar &gt; Button {\n  text-style: underline;\n}\n</code></pre>"},{"location":"guide/CSS/#specificity","title":"Specificity","text":"<p>It is possible that several selectors match a given widget. If the same style is applied by more than one selector then Textual needs a way to decide which rule wins. It does this by following these rules:</p> <ul> <li> <p>The selector with the most IDs wins. For instance <code>#next</code> beats <code>.button</code> and <code>#dialog #next</code> beats <code>#next</code>. If the selectors have the same number of IDs then move to the next rule.</p> </li> <li> <p>The selector with the most class names wins. For instance <code>.button.success</code> beats <code>.success</code>. For the purposes of specificity, pseudo classes are treated the same as regular class names, so <code>.button:hover</code> counts as 2 class names. If the selectors have the same number of class names then move to the next rule.</p> </li> <li> <p>The selector with the most types wins. For instance <code>Container Button</code> beats <code>Button</code>.</p> </li> </ul>"},{"location":"guide/CSS/#important-rules","title":"Important rules","text":"<p>The specificity rules are usually enough to fix any conflicts in your stylesheets. There is one last way of resolving conflicting selectors which applies to individual rules. If you add the text <code>!important</code> to the end of a rule then it will \"win\" regardless of the specificity.</p> <p>Warning</p> <p>Use <code>!important</code> sparingly (if at all) as it can make it difficult to modify your CSS in the future.</p> <p>Here's an example that makes buttons blue when hovered over with the mouse, regardless of any other selectors that match Buttons:</p> <pre><code>Button:hover {\n  background: blue !important;\n}\n</code></pre>"},{"location":"guide/CSS/#css-variables","title":"CSS Variables","text":"<p>You can define variables to reduce repetition and encourage consistency in your CSS. Variables in Textual CSS are prefixed with <code>$</code>. Here's an example of how you might define a variable called <code>$border</code>:</p> <pre><code>$border: wide green;\n</code></pre> <p>With our variable assigned, we can write <code>$border</code> and it will be substituted with <code>wide green</code>. Consider the following snippet:</p> <pre><code>#foo {\n  border: $border;\n}\n</code></pre> <p>This will be translated into:</p> <pre><code>#foo {\n  border: wide green;\n}\n</code></pre> <p>Variables allow us to define reusable styling in a single place. If we decide we want to change some aspect of our design in the future, we only have to update a single variable.</p> <p>Note</p> <p>Variables can only be used in the values of a CSS declaration. You cannot, for example, refer to a variable inside a selector.</p> <p>Variables can refer to other variables. Let's say we define a variable <code>$success: lime;</code>. Our <code>$border</code> variable could then be updated to <code>$border: wide $success;</code>, which will be translated to <code>$border: wide lime;</code>.</p>"},{"location":"guide/CSS/#initial-value","title":"Initial value","text":"<p>All CSS rules support a special value called <code>initial</code>, which will reset a value back to its default.</p> <p>Let's look at an example. The following will set the background of a button to green:</p> <pre><code>Button {\n  background: green;\n}\n</code></pre> <p>If we want a specific button (or buttons) to use the default color, we can set the value to <code>initial</code>. For instance, if we have a widget with a (CSS) class called <code>dialog</code>, we could reset the background color of all buttons inside the dialog with the following CSS:</p> <pre><code>.dialog Button {\n  background: initial;\n}\n</code></pre> <p>Note that <code>initial</code> will set the value back to the value defined in any default css. If you use <code>initial</code> within default css, it will treat the rule as completely unstyled.</p>"},{"location":"guide/CSS/#nesting-css","title":"Nesting CSS","text":"<p>Added in version 0.47.0</p> <p>CSS rule sets may be nested, i.e. they can contain other rule sets. When a rule set occurs within an existing rule set, it inherits the selector from the enclosing rule set.</p> <p>Let's put this into practical terms. The following example will display two boxes containing the text \"Yes\" and \"No\" respectively. These could eventually form the basis for buttons, but for this demonstration we are only interested in the CSS.</p> nesting01.tcss (no nesting)nesting01.pyOutput <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n}\n\n/* Style all buttons */\n#questions .button {\n    width: 1fr;\n    padding: 1 2;\n    margin: 1 2;\n    text-align: center;\n    border: heavy $panel;\n}\n\n/* Style the Yes button */\n#questions .button.affirmative {\n    border: heavy $success;\n}\n\n/* Style the No button */\n#questions .button.negative {\n    border: heavy $error;\n}\n</code></pre> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Static\n\n\nclass NestingDemo(App):\n    \"\"\"App that doesn't have nested CSS.\"\"\"\n\n    CSS_PATH = \"nesting01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal(id=\"questions\"):\n            yield Static(\"Yes\", classes=\"button affirmative\")\n            yield Static(\"No\", classes=\"button negative\")\n\n\nif __name__ == \"__main__\":\n    app = NestingDemo()\n    app.run()\n</code></pre> <p> NestingDemo \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Yes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0No\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>The CSS is quite straightforward; there is one rule for the container, one for all buttons, and one rule for each of the buttons. However it is easy to imagine this stylesheet growing more rules as we add features.</p> <p>Nesting allows us to group rule sets which have common selectors. In the example above, the rules all start with <code>#questions</code>. When we see a common prefix on the selectors, this is a good indication that we can use nesting.</p> <p>The following produces identical results to the previous example, but adds nesting of the rules.</p> nesting02.tcss (with nesting)nesting02.pyOutput <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n\n    /* Style all buttons */\n    .button {\n        width: 1fr;\n        padding: 1 2;\n        margin: 1 2;\n        text-align: center;\n        border: heavy $panel;\n\n        /* Style the Yes button */\n        &amp;.affirmative {\n            border: heavy $success;\n        }\n\n        /* Style the No button */\n        &amp;.negative {\n            border: heavy $error;\n        }\n    }\n}\n</code></pre> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Static\n\n\nclass NestingDemo(App):\n    \"\"\"App with nested CSS.\"\"\"\n\n    CSS_PATH = \"nesting02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal(id=\"questions\"):\n            yield Static(\"Yes\", classes=\"button affirmative\")\n            yield Static(\"No\", classes=\"button negative\")\n\n\nif __name__ == \"__main__\":\n    app = NestingDemo()\n    app.run()\n</code></pre> <p> NestingDemo \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Yes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0No\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u2503 \u2503\u2503\u2503\u2503\u2503\u2503 \u2503\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Tip</p> <p>Indenting the rule sets is not strictly required, but it does make it easier to understand how the rule sets are related to each other.</p> <p>In the first example we had a rule set that began with the selector <code>#questions .button</code>, which would match any widget with a class called \"button\" that is inside a container with id <code>questions</code>.</p> <p>In the second example, the button rule selector is simply <code>.button</code>, but it is within the rule set with selector <code>#questions</code>. The nesting means that the button rule set will inherit the selector from the outer rule set, so it is equivalent to <code>#questions .button</code>.</p>"},{"location":"guide/CSS/#nesting-selector","title":"Nesting selector","text":"<p>The two remaining rules are nested within the button rule, which means they will inherit their selectors from the button rule set and the outer <code>#questions</code> rule set.</p> <p>You may have noticed that the rules for the button styles contain a syntax we haven't seen before. The rule for the Yes button is <code>&amp;.affirmative</code>. The ampersand (<code>&amp;</code>) is known as the nesting selector and it tells Textual that the selector should be combined with the selector from the outer rule set.</p> <p>So <code>&amp;.affirmative</code> in the example above, produces the equivalent of <code>#questions .button.affirmative</code> which selects a widget with both the <code>button</code> and <code>affirmative</code> classes. Without <code>&amp;</code> it would be equivalent to <code>#questions .button .affirmative</code> (note the additional space) which would only match a widget with class <code>affirmative</code> inside a container with class <code>button</code>.</p> <p>For reference, lets see those two CSS files side-by-side:</p> nesting01.tcssnesting02.tcss <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n}\n\n/* Style all buttons */\n#questions .button {\n    width: 1fr;\n    padding: 1 2;\n    margin: 1 2;\n    text-align: center;\n    border: heavy $panel;\n}\n\n/* Style the Yes button */\n#questions .button.affirmative {\n    border: heavy $success;\n}\n\n/* Style the No button */\n#questions .button.negative {\n    border: heavy $error;\n}\n</code></pre> <pre><code>/* Style the container */\n#questions {\n    border: heavy $primary;\n    align: center middle;\n\n    /* Style all buttons */\n    .button {\n        width: 1fr;\n        padding: 1 2;\n        margin: 1 2;\n        text-align: center;\n        border: heavy $panel;\n\n        /* Style the Yes button */\n        &amp;.affirmative {\n            border: heavy $success;\n        }\n\n        /* Style the No button */\n        &amp;.negative {\n            border: heavy $error;\n        }\n    }\n}\n</code></pre> <p>Note how nesting bundles related rules together. If we were to add other selectors for additional screens or widgets, it would be easier to find the rules which will be applied.</p>"},{"location":"guide/CSS/#why-use-nesting","title":"Why use nesting?","text":"<p>There is no requirement to use nested CSS, but it can help to group related rule sets together (which makes it easier to edit). Nested CSS can also help you avoid some repetition in your selectors, i.e. in the nested CSS we only need to type <code>#questions</code> once, rather than four times in the non-nested CSS.</p>"},{"location":"guide/actions/","title":"Actions","text":"<p>Actions are allow-listed functions with a string syntax you can embed in links and bind to keys. In this chapter we will discuss how to create actions and how to run them.</p>"},{"location":"guide/actions/#action-methods","title":"Action methods","text":"<p>Action methods are methods on your app or widgets prefixed with <code>action_</code>. Aside from the prefix these are regular methods which you could call directly if you wished.</p> <p>Information</p> <p>Action methods may be coroutines (defined with the <code>async</code> keyword).</p> <p>Let's write an app with a simple action method.</p> actions01.py<pre><code>from textual.app import App\nfrom textual import events\n\n\nclass ActionsApp(App):\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n    def on_key(self, event: events.Key) -&gt; None:\n        if event.key == \"r\":\n            self.action_set_background(\"red\")\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p>The <code>action_set_background</code> method is an action method which sets the background of the screen. The key handler above will call this action method if you press the R key.</p> <p>Although it is possible (and occasionally useful) to call action methods in this way, they are intended to be parsed from an action string. For instance, the string <code>\"set_background('red')\"</code> is an action string which would call <code>self.action_set_background('red')</code>.</p> <p>The following example replaces the immediate call with a call to run_action() which parses an action string and dispatches it to the appropriate method.</p> actions02.py<pre><code>from textual import events\nfrom textual.app import App\n\n\nclass ActionsApp(App):\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n    async def on_key(self, event: events.Key) -&gt; None:\n        if event.key == \"r\":\n            await self.run_action(\"set_background('red')\")\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p>Note that the <code>run_action()</code> method is a coroutine so <code>on_key</code> needs to be prefixed with the <code>async</code> keyword.</p> <p>You will not typically need this in a real app as Textual will run actions in links or key bindings. Before we discuss these, let's have a closer look at the syntax for action strings.</p>"},{"location":"guide/actions/#syntax","title":"Syntax","text":"<p>Action strings have a simple syntax, which for the most part replicates Python's function call syntax.</p> <p>Important</p> <p>As much as they look like Python code, Textual does not call Python's <code>eval</code> function to compile action strings.</p> <p>Action strings have the following format:</p> <ul> <li>The name of an action on its own will call the action method with no parameters. For example, an action string of <code>\"bell\"</code> will call <code>action_bell()</code>.</li> <li>Action strings may be followed by parenthesis containing Python objects. For example, the action string <code>set_background(\"red\")</code> will call <code>action_set_background(\"red\")</code>.</li> <li>Action strings may be prefixed with a namespace (see below) and a dot.</li> </ul> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaW2/bNlx1MDAxNH7vr1xivIduQK3y8M5cdTAwMDLDkNuKtFl6SdJ0XHUwMDFkhkGV6Fi1LGmScluR/75DJbFkxXZsx8kyIXAsklx1MDAxMlx1MDAwZlx1MDAwZs/3nVx1MDAwYv392dpap7zIbOfVWseeXHUwMDA3flx1MDAxY4W5f9Z54dpPbV5EaYJdtLov0pM8qEb2yzIrXr18OfTzgS2z2Fx1MDAwZqx3XHUwMDFhXHUwMDE1J35cXJQnYZR6QTp8XHUwMDE5lXZY/OI+9/yh/TlLh2GZe/UkXVx1MDAxYkZlml/NZWM7tElZ4Nv/wPu1te/VZ0O63Fx1MDAwNqWfXHUwMDFjx7Z6oOqqXHUwMDA1VES0W/fSpFx1MDAxMlx1MDAxNoQm1ChQajRcIiq2cL7ShtjdQ5lt3eOaOlx1MDAxZr6c9T92//HXeSo/fzvc3Oz725/qaXtRXHUwMDFj75dcdTAwMTdxJVaR4mrqvqLM04E9isKy7+ZutY+eXG79om9cdTAwMWKP5enJcT+xhVs/XHUwMDE5taaZXHUwMDFmROWFe1x1MDAxMalbr5TQXHUwMDFjd+62iHBPUy5cdTAwMDSVhlx1MDAxOcpGne5xajyptDJGa8XAXGLgLcE201x1MDAxOHdcdTAwMDJcdTAwMDX7gVRXLdlXP1x1MDAxOFx1MDAxY6N4SViP6fmC4jyyXHUwMDFldXa9YGk80CC4oVxcSqJlPU/fRsf9XHUwMDEyh3DuXHRmiKT1jlx1MDAxNbbaXG5DgSlupFx1MDAxOXW4ibOdsLKKP9u67Pt5dq2yTiVgQ2h3u902qaZZNXY7se+2j3bPw3LvaHt3a7d7MVx1MDAxNFx1MDAwN2b0rjFcdTAwMWL08zw964x6Lq+/1aKdZKF/ZVcgJeeodC6YqC0vjpJcdTAwMDF2JidxXFy3pcGgNsWq9fLFXHUwMDEyXHUwMDE4XHUwMDAwwshUXHUwMDEwXHUwMDE4YJQoQ+dcdTAwMDfBodj66O++zz92L96dXHL6XyCM5ZenXHUwMDBlXHUwMDAypT3FXHRcdTAwMTdcdTAwMWGhQCVt2FhcdTAwMDVcdTAwMDPtYVx1MDAxYpVMXHUwMDEypcBokPeCXHUwMDAx0K9ay0kwoFxiOM6N4kpcYqNcdTAwMTUsglx1MDAwMmCEK6VcdTAwMDU8Mlxm9lx1MDAwNjD4evr69MPml/M9+lv5XHUwMDFl5M5fK4OBxMU+XHUwMDEyXGaAT4dcdTAwMDE3XHUwMDA0jVx1MDAwMlx1MDAwMOaGXHUwMDAx/7xcdTAwMGXs8+DtRry1l4b7mdVvksMnXHUwMDBlXHUwMDAzXFygp5HrNdHGLVaNo0ChM+CK4ntcdTAwMTRChZt7gYBcdTAwMDfS9sQkXHUwMDEwXHUwMDAwUE9cdTAwMDNjaOSaKYq+aSFcdTAwMThcYsm4RCHF48KgSzdcdTAwMDb7hkT5/plMdXFA5MHu69XBQKNXXFxcdTAwMTVcZkp7Xk5EXHUwMDAwct9UXHUwMDA0XHUwMDEwyVx1MDAxOFx1MDAxN1x1MDAwNOZ3XHUwMDA04dveutjaevO7POSDzUMt4r9cdTAwMGbTlVwioPVUXHUwMDEzXHUwMDAwsFx1MDAxNFx1MDAwMFDdnpTCXHUwMDAwRdNcdTAwMTOKyjFcdTAwMDCAXHUwMDE2XHUwMDFlQ3rmoFxiekUj7+dcdTAwMDZmIMBMYP7bpq4lcIrRXHUwMDE5LG7phbt5knFcdTAwMGYzyixC+LU9pUm5XHUwMDFm/WOrmHas9Vd/XHUwMDE4xVx1MDAxN2NGUUFcdTAwMDBcdTAwMDV8l5Vo5H68lmCqUaCl2OaeXHUwMDE1XHUwMDE256+sX489uVx1MDAxZUfHXHUwMDBlMJ3Y9saRVEaYpYy6y7Sh41x1MDAwMCXx8XX5TtheUZpHx1x1MDAxMUpxMF2qpVx1MDAwMI1x+3Q8XHUwMDBizkBqMT+eTVx1MDAxMoP/Nt/RKflwXlx1MDAxY+yGcL71+mnjmVx04UmmXGIlwNBXqPHsXHUwMDA2uPKAMkFcZsewj90zqpvl0Golz4AzQ1JBbmH14EeB88PGb4rrhlN5aDivXHUwMDA3XHUwMDBlOFx1MDAxNWxcdTAwMTbCcYCKsvlcdTAwMDMguSnQUlx1MDAxMNbCtFtHXHUwMDEwXHUwMDA2iVlcdTAwMDJIPn9QSvzuMP37nLPy2+5OfiZcdTAwMDby8Nvm04Ywl8Zj2lx1MDAwNXVcdTAwMWHjTpef3fLJklx1MDAxOFx1MDAwNDFaXHUwMDFjqGZcdTAwMDSzWlx1MDAxMCOFzFx1MDAwM2JcdTAwMDOCXG7M3Fx1MDAxZdknP2z0+Vx1MDAxZvnkzM9cdTAwMTE3XGLM4mmAeZJgM0F9pepJkTafXHUwMDFlaWP2olx1MDAxNFVcctzfherZXHUwMDAx2Vx1MDAwMqhuY2dZVKs76y1cZlFcdTAwMGKMYqLJpFa6sZWVTSjmgeKCSiUx4aQzXHUwMDAy7Vx1MDAxMH036S1cdTAwMGJq5lx0TlxmwYlcYlx1MDAwN8x4xVx1MDAwNEetjUdccnZLKVx0XHUwMDEx0IghriFPMSXmmKku4bfvSjhXWSBsyOHn5UaUhFFyjJ01m9xcdTAwMTTTd+ZI39wq/axKXHUwMDFhcatQPdwwzbVq9PfS4MStoks86spdUlx1MDAxMalQlVxmdXk96nIklE3Cu0WaXV9cdTAwMWaJZDCHk5QrhZsloHaP4zJcdTAwMTFqXHUwMDE44J/AUNhVttktmWK/KDfT4TAqUfPv0ygp21x1MDAxYa5Uue5Q3rf+Lf7ANTX72nSQuTeOM3v9ba1GTHUz+v7ni4mjp1uyu7q3jLh+37Pm/8WZzGjWbr5hMlxumJ1yVPP8OcbsYPQpUlx1MDAxOTPGXHUwMDAzV1x1MDAxYmGaUIG23YpPmPKEQtunklx1MDAxM4lmJlqC1TQlXHUwMDAyw0m4dHziUUE4ZnWSMCMwXHUwMDAwmVA1XHUwMDEzzNNcdTAwMThHoaTKXGKuTENJV1SmMCNkgKB5XFwqWzpJmJPKZmeuXHLeQO05h8RBacxcdTAwMTh5Y0STzKRcdTAwMTGoYoJcdTAwMDRCXHUwMDE1Q+e0XHUwMDFjmc0+J6n5lXhCXHUwMDEzQVx1MDAxY98z9DL1vrboXGZcdTAwMDdhmFx1MDAwNoxJVCdy3/+azqZbs7u6t1xmeVV0hvQp280jOmNcZlWMucjcbDY7Kv9cdTAwMGbYTN95XHUwMDAy4Fx1MDAwZWJcdEZeLrdslz+V9ihSXHUwMDE51UZcdTAwMDOlzeJSm8qY5L1ALUtlxFx1MDAwM4NuTDrPjJmf1mzCcbBhXHUwMDFlikmFoe40gjeLN9dcdTAwMDdcdTAwMDGG4FuU4Fx1MDAwZnBcdTAwMTCwylL9omQ2O4dcdTAwMWbxhvJcdTAwMThzkSlobjjlnDVGNGmDaIyQjNCIMkOlXHUwMDA2s1x1MDAxY5vNPu5qRovS7arE0Fx1MDAxZThhdIpUKFx1MDAxMVx1MDAwM7fxXHUwMDFhjVFh9v+/ZrNcdTAwMTlcdTAwMDbtru4tW16QzqZcdTAwMTWP2PRcdTAwMTNNzShcdTAwMTdEwvxkZuS23GbBh4NPnzc+XHUwMDFkvTmKN/OMTCGzvlx1MDAxZvRPcjuNzlZVPTJ35pmAcbGghGFcdTAwMTiKITEh4+f6XGY8XHUwMDA21J1rOVx1MDAwZqu0udfPW8rcT4rMz1x1MDAxMVx1MDAxM7c5jcOE8lGD125Ii1OqMVA0S5DW0z3TXHUwMDExtFlcXF+yfqTHWkf1ozr7uKlcdTAwMWb5WeZcdTAwMTW2/Kveolx1MDAxZp/nNnz+08QqUuOXLY9xtDNduGc32qw06Vx1MDAwNu6XqMdcdTAwMTHnoiFE4bUy6ik6p5E925j0W6vqcm+tWMPh0zoz+H757PJfPFx1MDAxMrdyIn0= Optional namespaceAction nameOptional parametersapp.set_background('red')"},{"location":"guide/actions/#parameters","title":"Parameters","text":"<p>If the action string contains parameters, these must be valid Python literals, which means you can include numbers, strings, dicts, lists, etc., but you can't include variables or references to any other Python symbols.</p> <p>Consequently <code>\"set_background('blue')\"</code> is a valid action string, but <code>\"set_background(new_color)\"</code> is not \u2014 because <code>new_color</code> is a variable and not a literal.</p>"},{"location":"guide/actions/#links","title":"Links","text":"<p>Actions may be embedded as links within console markup. You can create such links with a <code>@click</code> tag.</p> <p>The following example mounts simple static text with embedded action links.</p> actions03.pyOutput actions03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\n[b]Set your background[/b]\n[@click=app.set_background('red')]Red[/]\n[@click=app.set_background('green')]Green[/]\n[@click=app.set_background('blue')]Blue[/]\n\"\"\"\n\n\nclass ActionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Static(TEXT)\n\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p> ActionsApp Set\u00a0your\u00a0background Red Green Blue </p> <p>When you click any of the links, Textual runs the <code>\"set_background\"</code> action to change the background to the given color.</p>"},{"location":"guide/actions/#bindings","title":"Bindings","text":"<p>Textual will run actions bound to keys. The following example adds key bindings for the R, G, and B keys which call the <code>\"set_background\"</code> action.</p> actions04.pyOutput actions04.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\n[b]Set your background[/b]\n[@click=app.set_background('red')]Red[/]\n[@click=app.set_background('green')]Green[/]\n[@click=app.set_background('blue')]Blue[/]\n\"\"\"\n\n\nclass ActionsApp(App):\n    BINDINGS = [\n        (\"r\", \"set_background('red')\", \"Red\"),\n        (\"g\", \"set_background('green')\", \"Green\"),\n        (\"b\", \"set_background('blue')\", \"Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(TEXT)\n\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> <p> ActionsApp Set\u00a0your\u00a0background Red Green Blue </p> <p>If you run this example, you can change the background by pressing keys in addition to clicking links.</p> <p>See the previous section on input for more information on bindings.</p>"},{"location":"guide/actions/#namespaces","title":"Namespaces","text":"<p>Textual will look for action methods in the class where they are defined (App, Screen, or Widget). If we were to create a custom widget it can have its own set of actions.</p> <p>The following example defines a custom widget with its own <code>set_background</code> action.</p> actions05.pyactions05.tcss actions05.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\n[b]Set your background[/b]\n[@click=app.set_background('cyan')]Cyan[/]\n[@click=app.set_background('magenta')]Magenta[/]\n[@click=app.set_background('yellow')]Yellow[/]\n\"\"\"\n\n\nclass ColorSwitcher(Static):\n    def action_set_background(self, color: str) -&gt; None:\n        self.styles.background = color\n\n\nclass ActionsApp(App):\n    CSS_PATH = \"actions05.tcss\"\n    BINDINGS = [\n        (\"r\", \"set_background('red')\", \"Red\"),\n        (\"g\", \"set_background('green')\", \"Green\"),\n        (\"b\", \"set_background('blue')\", \"Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield ColorSwitcher(TEXT)\n        yield ColorSwitcher(TEXT)\n\n    def action_set_background(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = ActionsApp()\n    app.run()\n</code></pre> actions05.tcss<pre><code>Screen {\n    layout: grid;\n    grid-size: 1;\n    grid-gutter: 2 4;\n    grid-rows: 1fr;\n}\n\nColorSwitcher {\n   height: 100%;\n   margin: 2 4;\n}\n</code></pre> <p>There are two instances of the custom widget mounted. If you click the links in either of them it will change the background for that widget only. The R, G, and B key bindings are set on the App so will set the background for the screen.</p> <p>You can optionally prefix an action with a namespace, which tells Textual to run actions for a different object.</p> <p>Textual supports the following action namespaces:</p> <ul> <li><code>app</code> invokes actions on the App.</li> <li><code>screen</code> invokes actions on the screen.</li> <li><code>focused</code> invokes actions on the currently focused widget (if there is one).</li> </ul> <p>In the previous example if you wanted a link to set the background on the app rather than the widget, we could set a link to <code>app.set_background('red')</code>.</p>"},{"location":"guide/actions/#dynamic-actions","title":"Dynamic actions","text":"<p>Added in version 0.61.0</p> <p>There may be situations where an action is temporarily unavailable due to some internal state within your app. For instance, consider an app with a fixed number of pages and actions to go to the next and previous page. It doesn't make sense to go to the previous page if we are on the first, or the next page when we are on the last page.</p> <p>We could easily add this logic to the action methods, but the footer would still display the keys even if they would have no effect. The user may wonder why the app is showing keys that don't appear to work.</p> <p>We can solve this issue by implementing the <code>check_action</code> on our app, screen, or widget. This method is called with the name of the action and any parameters, prior to running actions or refreshing the footer. It should return one of the following values:</p> <ul> <li><code>True</code> to show the key and run the action as normal.</li> <li><code>False</code> to hide the key and prevent the action running.</li> <li><code>None</code> to disable the key (show dimmed), and prevent the action running.</li> </ul> <p>Let's write an app to put this into practice:</p> actions06.pyactions06.tcssOutput actions06.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll\nfrom textual.reactive import reactive\nfrom textual.widgets import Footer, Placeholder\n\nPAGES_COUNT = 5\n\n\nclass PagesApp(App):\n    BINDINGS = [\n        (\"n\", \"next\", \"Next\"),\n        (\"p\", \"previous\", \"Previous\"),\n    ]\n\n    CSS_PATH = \"actions06.tcss\"\n\n    page_no = reactive(0)\n\n    def compose(self) -&gt; ComposeResult:\n        with HorizontalScroll(id=\"page-container\"):\n            for page_no in range(PAGES_COUNT):\n                yield Placeholder(f\"Page {page_no}\", id=f\"page-{page_no}\")\n        yield Footer()\n\n    def action_next(self) -&gt; None:\n        self.page_no += 1\n        self.refresh_bindings()  # (1)!\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def action_previous(self) -&gt; None:\n        self.page_no -= 1\n        self.refresh_bindings()  # (2)!\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def check_action(\n        self, action: str, parameters: tuple[object, ...]\n    ) -&gt; bool | None:  # (3)!\n        \"\"\"Check if an action may run.\"\"\"\n        if action == \"next\" and self.page_no == PAGES_COUNT - 1:\n            return False\n        if action == \"previous\" and self.page_no == 0:\n            return False\n        return True\n\n\nif __name__ == \"__main__\":\n    app = PagesApp()\n    app.run()\n</code></pre> <ol> <li>Prompts the footer to refresh, if bindings change.</li> <li>Prompts the footer to refresh, if bindings change.</li> <li>Guards the actions from running and also what keys are displayed in the footer.</li> </ol> actions06.tcss<pre><code>#page-container {\n    # This hides the scrollbar\n    scrollbar-size: 0 0;\n}\n</code></pre> <p> PagesApp Page\u00a00 \u00a0n\u00a0Next\u00a0\u258f^p\u00a0palette </p> <p>This app has key bindings for N and P to navigate the pages. Notice how the keys are hidden from the footer when they would have no effect.</p> <p>The actions above call <code>refresh_bindings</code> to prompt Textual to refresh the footer. An alternative to doing this manually is to set <code>bindings=True</code> on a reactive, which will refresh the bindings if the reactive changes.</p> <p>Let's make this change. We will also demonstrate what the footer will show if we return <code>None</code> from <code>check_action</code> (rather than <code>False</code>):</p> actions07.pyactions06.tcssOutput actions06.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll\nfrom textual.reactive import reactive\nfrom textual.widgets import Footer, Placeholder\n\nPAGES_COUNT = 5\n\n\nclass PagesApp(App):\n    BINDINGS = [\n        (\"n\", \"next\", \"Next\"),\n        (\"p\", \"previous\", \"Previous\"),\n    ]\n\n    CSS_PATH = \"actions06.tcss\"\n\n    page_no = reactive(0, bindings=True)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        with HorizontalScroll(id=\"page-container\"):\n            for page_no in range(PAGES_COUNT):\n                yield Placeholder(f\"Page {page_no}\", id=f\"page-{page_no}\")\n        yield Footer()\n\n    def action_next(self) -&gt; None:\n        self.page_no += 1\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def action_previous(self) -&gt; None:\n        self.page_no -= 1\n        self.query_one(f\"#page-{self.page_no}\").scroll_visible()\n\n    def check_action(self, action: str, parameters: tuple[object, ...]) -&gt; bool | None:\n        \"\"\"Check if an action may run.\"\"\"\n        if action == \"next\" and self.page_no == PAGES_COUNT - 1:\n            return None  # (2)!\n        if action == \"previous\" and self.page_no == 0:\n            return None  # (3)!\n        return True\n\n\nif __name__ == \"__main__\":\n    app = PagesApp()\n    app.run()\n</code></pre> <ol> <li>The <code>bindings=True</code> causes the footer to refresh when <code>page_no</code> changes.</li> <li>Returning <code>None</code> disables the key in the footer rather than hides it</li> <li>Returning <code>None</code> disables the key in the footer rather than hides it.</li> </ol> actions06.tcss<pre><code>#page-container {\n    # This hides the scrollbar\n    scrollbar-size: 0 0;\n}\n</code></pre> <p> PagesApp Page\u00a00 \u00a0n\u00a0Next\u00a0\u00a0p\u00a0Previous\u00a0\u258f^p\u00a0palette </p> <p>Note how the logic is the same but we don't need to explicitly call <code>refresh_bindings</code>. The change to <code>check_action</code> also causes the disabled footer keys to be grayed out, indicating they are temporarily unavailable.</p>"},{"location":"guide/actions/#builtin-actions","title":"Builtin actions","text":"<p>Textual supports the following builtin actions which are defined on the app.</p> <ul> <li>action_add_class</li> <li>action_back</li> <li>action_bell</li> <li>action_focus_next</li> <li>action_focus_previous</li> <li>action_focus</li> <li>action_pop_screen</li> <li>action_push_screen</li> <li>action_quit</li> <li>action_remove_class</li> <li>action_screenshot</li> <li>action_simulate_key</li> <li>action_suspend_process</li> <li>action_switch_screen</li> <li>action_toggle_class</li> <li>action_toggle_dark</li> </ul>"},{"location":"guide/animation/","title":"Animation","text":"<p>This chapter discusses how to use Textual's animation system to create visual effects such as movement, blending, and fading.</p>"},{"location":"guide/animation/#animating-styles","title":"Animating styles","text":"<p>Textual's animator can change an attribute from one value to another in fixed increments over a period of time. You can apply animations to styles such as <code>offset</code> to move widgets around the screen, and <code>opacity</code> to create fading effects.</p> <p>Apps and widgets both have an animate method which will animate properties on those objects. Additionally, <code>styles</code> objects have an identical <code>animate</code> method which will animate styles.</p> <p>Let's look at an example of how we can animate the opacity of a widget to make it fade out. The following example app contains a single <code>Static</code> widget which is immediately animated to an opacity of <code>0.0</code> (making it invisible) over a duration of two seconds.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass AnimationApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.box = Static(\"Hello, World!\")\n        self.box.styles.background = \"red\"\n        self.box.styles.color = \"black\"\n        self.box.styles.padding = (1, 2)\n        yield self.box\n\n    def on_mount(self):\n        self.box.styles.animate(\"opacity\", value=0.0, duration=2.0)\n\n\nif __name__ == \"__main__\":\n    app = AnimationApp()\n    app.run()\n</code></pre> <p>The animator updates the value of the <code>opacity</code> attribute on the <code>styles</code> object in small increments over two seconds. Here's how the widget will change as time progresses:</p> After 0sAfter 1sAfter 1.5sAfter 2s <p> AnimationApp Hello,\u00a0World! </p> <p> AnimationApp Hello,\u00a0World! </p> <p> AnimationApp Hello,\u00a0World! </p> <p> AnimationApp Hello,\u00a0World! </p>"},{"location":"guide/animation/#duration-and-speed","title":"Duration and Speed","text":"<p>When requesting an animation you can specify a duration or speed. The duration is how long the animation should take in seconds. The speed is how many units a value should change in one second. For instance, if you animate a value at 0 to 10 with a speed of 2, it will complete in 5 seconds.</p>"},{"location":"guide/animation/#easing-functions","title":"Easing functions","text":"<p>The easing function determines the journey a value takes on its way to the target value. It could move at a constant pace, or it might start off slow then accelerate towards its final value. Textual supports a number of easing functions.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1XWVPjRlx1MDAxMH7nV1DeVyzmPrYqlYJcdTAwMDVcdTAwMTJcdTAwMDJLXHUwMDBlczib2ofBXHUwMDFh21x1MDAxM8uSkMZcdTAwMDaW4r+nJVx1MDAxM48vwrnUblX0YGumZ3q+6e6vu3Wztr7e8Ne5bbxfb9irjklcXFxcmMvGRjU/tkXpslx1MDAxNESkXHUwMDFll9mo6NQr+97n5fvNzaEpXHUwMDA21ueJ6dho7MqRSUo/il1cdTAwMTZ1suGm83ZY/lj9XHUwMDFlmaH9Ic+GsS+icEjTxs5nxeQsm9ihTX1cdNr/gvH6+k39O4POXHUwMDE0RTZcdTAwMDFWT1x1MDAwN3BKL05cdTAwMWVlaY1cdTAwMTMjrjSjWuDpXG5X7sBR3sYg7lx1MDAwMlxcXHUwMDFiJNVU42Tvl7TZ/nX76rh1fDDO+4j+dNVcdKd2XZK0/HUysYLp9EeFXHLS0lx1MDAxN9nAnrnY9/812sz8dF9syj5cdTAwMDCYiots1OuntqwuXHUwMDFmkGa56Th/XV9cdTAwMDNNZ03aq5WEmStcdTAwMThRwSMqXHUwMDE0XHUwMDE3XGZRQZhUU2m1n2lcdTAwMWNxXHUwMDAxcsyRRIxcdTAwMTK5gOxDloBcdTAwMWZcdTAwMDDZO1Q/XHUwMDAx2rnpXGZ6gC+Np2t8YdIyN1x1MDAwNXgrrLu8uzOONGZIXHUwMDEwPpX0rev1fWVcdTAwMGXCXCIlg6C0tVx1MDAxM7DCmiuhUZBUXHUwMDA35vtxXHUwMDFkXHUwMDBin1x1MDAxN43YN0V+Z6tGXHJsXHUwMDA2bDXcnVx0pLB5lMdm4nQsXHUwMDA0x1xcXHUwMDEzWtlqKk9cXDpcdTAwMDBhOkqSMJd1XHUwMDA2K+Kk9Kbw2y6NXdpb3GLT+Fx1MDAxZUliSv8hXHUwMDFiXHUwMDBlnVx1MDAwN1x1MDAxOL9lLvWLK2q9W1WQ962JV2ielS2yIa80XHUwMDA28lRPeFtcdTAwMGbRUlx1MDAwZqbvnzdWrm4uebGevXNg2L02+3+78UTa4pkwXFzkraCaIaxkYPZDvKUnh1x1MDAwN7y9d/7n3uFheaJHgra3+t9cdTAwMDFvRUQgXHUwMDE2pdRaXHUwMDAwbdlcdTAwMTJvMaFIYES1XHUwMDE0mi9cdTAwMDB7PdpShFwiKSmjclx1MDAwNXFxJCFtUEyWuEs5Ykpr9sbUhdAgwY7/U3dmwVxuR1ZPM/jwifRcdTAwMDXr2pXsRfL+skuYpkpjXHUwMDFj8utD9G3r38nu2cfty7//6F1cZoa7R1x1MDAwM3aQvDJ9y1xm+o7Xr7pUXHUwMDAwNSWjeJagNX2VjJCQXFxTRojmSC9cdTAwMDBcdTAwMGL0VYJY3XlcdH1pJKSCUsqpRFqH8lx1MDAxZqovXHUwMDAyMFx1MDAwNHMhJWGKXHUwMDEyvURmgpnAXHUwMDAyIf6mbFZcbmCrXHUwMDAw+Htj85zsVamMMYso4lpqSoRcdTAwMTYqNLHV06QogsZcdTAwMTZxJjWD5lx0yVx1MDAwN/VpXHUwMDEyKVwiJHTDoJJzzOb0YYVcIkisWFIou1x1MDAxMlx1MDAwYvVwqrkn6Gp1y/H2xMTj7ZVflXjEfVmnSjpcdTAwMDRcbkPoKlx1MDAxZUo6O+3Wyadd0vz482D3tDX+1L44z/Hzklx1MDAwZV5kx1dLOuDsiDBcdTAwMDZdPuJcdTAwMDRcbvB8q89cdHiRay5cdTAwMTTl0PD/R855acvAXHUwMDAyrJBklrt7wYggirFw2UcnlbJcdTAwMWE8M6lQKlmIlCcklW6W+pb7Ulx1MDAwN1x1MDAxNJqb3TNDl1xcz/mtjtHKUG5oZy1Z2rpsVlx1MDAxZjdza7dcdTAwMTLXS+uqarvzwe1cdTAwMWR8XHUwMDE1T8U+m7l3XHUwMDA3zjagrthfyjdZ4XouNcnxLI5nsYrcW8zhq1x1MDAxMVPIXG6Pp9Vps9y/lGdcdTAwMTe90+ukvfOlO+52bfNbp1x1MDAxNYH0x1x1MDAxNaZcXCqFkObznTiQKVx1MDAxMlxcK2jEXHUwMDE5NFLQkn81XnHyKF5BktaKMvyMYv1cdTAwMTJesSrLvlx1MDAxOa/GJlx1MDAxOX1cdTAwMTPEmlx1MDAwMJkwa+2uXCI2TJ63PNhcdTAwMDdcdTAwMTZMeFx1MDAwNi5w8d0lg7rG2NnL7eUoeNetn0przdaKXHUwMDE4tnLAze3a7T8uXFzYXHUwMDFjIn0= timevalue <p>Run the following from the command prompt to preview them.</p> <pre><code>textual easing\n</code></pre> <p>You can specify which easing method to use via the <code>easing</code> parameter on the <code>animate</code> method. The default easing method is <code>\"in_out_cubic\"</code> which accelerates and then decelerates to produce a pleasing organic motion.</p> <p>Note</p> <p>The <code>textual easing</code> preview requires the <code>textual-dev</code> package to be installed (using <code>pip install textual-dev</code>).</p>"},{"location":"guide/animation/#completion-callbacks","title":"Completion callbacks","text":"<p>You can pass a callable to the animator via the <code>on_complete</code> parameter. Textual will run the callable when the animation has completed.</p>"},{"location":"guide/animation/#delaying-animations","title":"Delaying animations","text":"<p>You can delay the start of an animation with the <code>delay</code> parameter of the <code>animate</code> method. This parameter accepts a <code>float</code> value representing the number of seconds to delay the animation by. For example, <code>self.box.styles.animate(\"opacity\", value=0.0, duration=2.0, delay=5.0)</code> delays the start of the animation by five seconds, meaning the animation will start after 5 seconds and complete 2 seconds after that.</p>"},{"location":"guide/app/","title":"App Basics","text":"<p>In this chapter we will cover how to use Textual's App class to create an application. Just enough to get you up to speed. We will go in to more detail in the following chapters.</p>"},{"location":"guide/app/#the-app-class","title":"The App class","text":"<p>The first step in building a Textual app is to import the App class and create a subclass. Let's look at the simplest app class:</p> <pre><code>from textual.app import App\n\n\nclass MyApp(App):\n    pass\n</code></pre>"},{"location":"guide/app/#the-run-method","title":"The run method","text":"<p>To run an app we create an instance and call run().</p> simple02.py<pre><code>from textual.app import App\n\n\nclass MyApp(App):\n    pass\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <p>Apps don't get much simpler than this\u2014don't expect it to do much.</p> <p>Tip</p> <p>The <code>__name__ == \"__main__\":</code> condition is true only if you run the file with <code>python</code> command. This allows us to import <code>app</code> without running the app immediately. It also allows the devtools run command to run the app in development mode. See the Python docs for more information.</p> <p>If we run this app with <code>python simple02.py</code> you will see a blank terminal, something like the following:</p> <p> MyApp </p> <p>When you call App.run() Textual puts the terminal in to a special state called application mode. When in application mode the terminal will no longer echo what you type. Textual will take over responding to user input (keyboard and mouse) and will update the visible portion of the terminal (i.e. the screen).</p> <p>If you hit Ctrl+C Textual will exit application mode and return you to the command prompt. Any content you had in the terminal prior to application mode will be restored.</p> <p>Tip</p> <p>A side effect of application mode is that you may no longer be able to select and copy text in the usual way. Terminals typically offer a way to bypass this limit with a key modifier. On iTerm you can select text if you hold the Option key. See the documentation for your terminal software for how to select text in application mode.</p>"},{"location":"guide/app/#run-inline","title":"Run inline","text":"<p>Added in version 0.55.0</p> <p>You can also run apps in inline mode, which will cause the app to appear beneath the prompt (and won't go in to application mode). Inline apps are useful for tools that integrate closely with the typical workflow of a terminal.</p> <p>To run an app in inline mode set the <code>inline</code> parameter to <code>True</code> when you call App.run(). See Style Inline Apps for how to apply additional styles to inline apps.</p> <p>Note</p> <p>Inline mode is not currently supported on Windows.</p>"},{"location":"guide/app/#events","title":"Events","text":"<p>Textual has an event system you can use to respond to key presses, mouse actions, and internal state changes. Event handlers are methods prefixed with <code>on_</code> followed by the name of the event.</p> <p>One such event is the mount event which is sent to an application after it enters application mode. You can respond to this event by defining a method called <code>on_mount</code>.</p> <p>Info</p> <p>You may have noticed we use the term \"send\" and \"sent\" in relation to event handler methods in preference to \"calling\". This is because Textual uses a message passing system where events are passed (or sent) between components. See events for details.</p> <p>Another such event is the key event which is sent when the user presses a key. The following example contains handlers for both those events:</p> event01.py<pre><code>from textual.app import App\nfrom textual import events\n\n\nclass EventApp(App):\n\n    COLORS = [\n        \"white\",\n        \"maroon\",\n        \"red\",\n        \"purple\",\n        \"fuchsia\",\n        \"olive\",\n        \"yellow\",\n        \"navy\",\n        \"teal\",\n        \"aqua\",\n    ]\n\n    def on_mount(self) -&gt; None:\n        self.screen.styles.background = \"darkblue\"\n\n    def on_key(self, event: events.Key) -&gt; None:\n        if event.key.isdecimal():\n            self.screen.styles.background = self.COLORS[int(event.key)]\n\n\nif __name__ == \"__main__\":\n    app = EventApp()\n    app.run()\n</code></pre> <p>The <code>on_mount</code> handler sets the <code>self.screen.styles.background</code> attribute to <code>\"darkblue\"</code> which (as you can probably guess) turns the background blue. Since the mount event is sent immediately after entering application mode, you will see a blue screen when you run this code.</p> <p> EventApp </p> <p>The key event handler (<code>on_key</code>) has an <code>event</code> parameter which will receive a Key instance. Every event has an associated event object which will be passed to the handler method if it is present in the method's parameter list.</p> <p>Note</p> <p>It is unusual (but not unprecedented) for a method's parameters to affect how it is called. Textual accomplishes this by inspecting the method prior to calling it.</p> <p>Some events contain additional information you can inspect in the handler. The Key event has a <code>key</code> attribute which is the name of the key that was pressed. The <code>on_key</code> method above uses this attribute to change the background color if any of the keys from 0 to 9 are pressed.</p>"},{"location":"guide/app/#async-events","title":"Async events","text":"<p>Textual is powered by Python's asyncio framework which uses the <code>async</code> and <code>await</code> keywords.</p> <p>Textual knows to await your event handlers if they are coroutines (i.e. prefixed with the <code>async</code> keyword). Regular functions are generally fine unless you plan on integrating other async libraries (such as httpx for reading data from the internet).</p> <p>Tip</p> <p>For a friendly introduction to async programming in Python, see FastAPI's concurrent burgers article.</p>"},{"location":"guide/app/#widgets","title":"Widgets","text":"<p>Widgets are self-contained components responsible for generating the output for a portion of the screen. Widgets respond to events in much the same way as the App. Most apps that do anything interesting will contain at least one (and probably many) widgets which together form a User Interface.</p> <p>Widgets can be as simple as a piece of text, a button, or a fully-fledged component like a text editor or file browser (which may contain widgets of their own).</p>"},{"location":"guide/app/#composing","title":"Composing","text":"<p>To add widgets to your app implement a <code>compose()</code> method which should return an iterable of <code>Widget</code> instances. A list would work, but it is convenient to yield widgets, making the method a generator.</p> <p>The following example imports a builtin <code>Welcome</code> widget and yields it from <code>App.compose()</code>.</p> widgets01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Welcome\n\n\nclass WelcomeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Welcome()\n\n    def on_button_pressed(self) -&gt; None:\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <p>When you run this code, Textual will mount the <code>Welcome</code> widget which contains Markdown content and a button:</p> <p> WelcomeApp \u00a0\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0 \u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0 \u00a0\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u00a0 \u00a0Textual\u00a0is\u00a0a\u00a0TUI,\u00a0or\u00a0Text\u00a0User\u00a0Interface,\u00a0framework\u00a0for\u00a0Python\u00a0inspired\u00a0by\u00a0\u00a0\u00a0 \u00a0modern\u00a0web\u00a0development.\u00a0We\u00a0hope\u00a0you\u00a0enjoy\u00a0using\u00a0Textual! Dune\u00a0quote \u258c\u00a0\"I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that \u258c\u00a0brings\u00a0total\u00a0obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass \u258c\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner \u258c\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only \u258c\u00a0I\u00a0will\u00a0remain.\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0OK\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Notice the <code>on_button_pressed</code> method which handles the Button.Pressed event sent by a button contained in the <code>Welcome</code> widget. The handler calls App.exit() to exit the app.</p>"},{"location":"guide/app/#mounting","title":"Mounting","text":"<p>While composing is the preferred way of adding widgets when your app starts it is sometimes necessary to add new widget(s) in response to events. You can do this by calling mount() which will add a new widget to the UI.</p> <p>Here's an app which adds a welcome widget in response to any key press:</p> widgets02.py<pre><code>from textual.app import App\nfrom textual.widgets import Welcome\n\n\nclass WelcomeApp(App):\n    def on_key(self) -&gt; None:\n        self.mount(Welcome())\n\n    def on_button_pressed(self) -&gt; None:\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <p>When you first run this you will get a blank screen. Press any key to add the welcome widget. You can even press a key multiple times to add several widgets.</p> <p> WelcomeApp \u00a0\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0 \u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0\u2582\u2582 \u00a0\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u00a0 \u00a0Textual\u00a0is\u00a0a\u00a0TUI,\u00a0or\u00a0Text\u00a0User\u00a0Interface,\u00a0framework\u00a0for\u00a0Python\u00a0inspired\u00a0by\u00a0 \u00a0modern\u00a0web\u00a0development.\u00a0We\u00a0hope\u00a0you\u00a0enjoy\u00a0using\u00a0Textual! Dune\u00a0quote \u258c\u00a0\"I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0\u00a0\u00a0 \u258c\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0 \u258c\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn \u258c\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u00a0 \u258c\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0OK\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#awaiting-mount","title":"Awaiting mount","text":"<p>When you mount a widget, Textual will mount everything the widget composes. Textual guarantees that the mounting will be complete by the next message handler, but not immediately after the call to <code>mount()</code>. This may be a problem if you want to make any changes to the widget in the same message handler.</p> <p>Let's first illustrate the problem with an example. The following code will mount the Welcome widget in response to a key press. It will also attempt to modify the Button in the Welcome widget by changing its label from \"OK\" to \"YES!\".</p> <pre><code>from textual.app import App\nfrom textual.widgets import Button, Welcome\n\n\nclass WelcomeApp(App):\n    def on_key(self) -&gt; None:\n        self.mount(Welcome())\n        self.query_one(Button).label = \"YES!\" # (1)!\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <ol> <li>See queries for more information on the <code>query_one</code> method.</li> </ol> <p>If you run this example, you will find that Textual raises a NoMatches exception when you press a key. This is because the mount process has not yet completed when we attempt to change the button.</p> <p>To solve this we can optionally await the result of <code>mount()</code>, which requires we make the function <code>async</code>. This guarantees that by the following line, the Button has been mounted, and we can change its label.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Button, Welcome\n\n\nclass WelcomeApp(App):\n    async def on_key(self) -&gt; None:\n        await self.mount(Welcome())\n        self.query_one(Button).label = \"YES!\"\n\n\nif __name__ == \"__main__\":\n    app = WelcomeApp()\n    app.run()\n</code></pre> <p>Here's the output. Note the changed button text:</p> <p> WelcomeApp \u00a0\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0 \u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0 \u00a0\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u00a0 \u00a0Textual\u00a0is\u00a0a\u00a0TUI,\u00a0or\u00a0Text\u00a0User\u00a0Interface,\u00a0framework\u00a0for\u00a0Python\u00a0inspired\u00a0by\u00a0\u00a0\u00a0 \u00a0modern\u00a0web\u00a0development.\u00a0We\u00a0hope\u00a0you\u00a0enjoy\u00a0using\u00a0Textual! Dune\u00a0quote \u258c\u00a0\"I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that \u258c\u00a0brings\u00a0total\u00a0obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass \u258c\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner \u258c\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only \u258c\u00a0I\u00a0will\u00a0remain.\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0YES!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#exiting","title":"Exiting","text":"<p>An app will run until you call App.exit() which will exit application mode and the run method will return. If this is the last line in your code you will return to the command prompt.</p> <p>The exit method will also accept an optional positional value to be returned by <code>run()</code>. The following example uses this to return the <code>id</code> (identifier) of a clicked button.</p> question01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, Button\n\n\nclass QuestionApp(App[str]):\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>Running this app will give you the following:</p> <p> QuestionApp Do\u00a0you\u00a0love\u00a0Textual?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Clicking either of those buttons will exit the app, and the <code>run()</code> method will return either <code>\"yes\"</code> or <code>\"no\"</code> depending on button clicked.</p>"},{"location":"guide/app/#return-type","title":"Return type","text":"<p>You may have noticed that we subclassed <code>App[str]</code> rather than the usual <code>App</code>.</p> question01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, Button\n\n\nclass QuestionApp(App[str]):\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>The addition of <code>[str]</code> tells mypy that <code>run()</code> is expected to return a string. It may also return <code>None</code> if App.exit() is called without a return value, so the return type of <code>run</code> will be <code>str | None</code>. Replace the <code>str</code> in <code>[str]</code> with the type of the value you intend to call the exit method with.</p> <p>Note</p> <p>Type annotations are entirely optional (but recommended) with Textual.</p>"},{"location":"guide/app/#return-code","title":"Return code","text":"<p>When you exit a Textual app with <code>App.exit()</code>, you can optionally specify a return code with the <code>return_code</code> parameter.</p> <p>What are return codes?</p> <p>Returns codes are a standard feature provided by your operating system. When any application exits it can return an integer to indicate if it was successful or not. A return code of <code>0</code> indicates success, any other value indicates that an error occurred. The exact meaning of a non-zero return code is application-dependant.</p> <p>When a Textual app exits normally, the return code will be <code>0</code>. If there is an unhandled exception, Textual will set a return code of <code>1</code>. You may want to set a different value for the return code if there is error condition that you want to differentiate from an unhandled exception.</p> <p>Here's an example of setting a return code for an error condition:</p> <pre><code>if critical_error:\n    self.exit(return_code=4, message=\"Critical error occurred\")\n</code></pre> <p>The app's return code can be queried with <code>app.return_code</code>, which will be <code>None</code> if it hasn't been set, or an integer.</p> <p>Textual won't explicitly exit the process. To exit the app with a return code, you should call <code>sys.exit</code>. Here's how you might do that:</p> <pre><code>if __name__ == \"__main__\"\n    app = MyApp()\n    app.run()\n    import sys\n    sys.exit(app.return_code or 0)\n</code></pre>"},{"location":"guide/app/#suspending","title":"Suspending","text":"<p>A Textual app may be suspended so you can leave application mode for a period of time. This is often used to temporarily replace your app with another terminal application.</p> <p>You could use this to allow the user to edit content with their preferred text editor, for example.</p> <p>Info</p> <p>App suspension is unavailable with textual-web.</p>"},{"location":"guide/app/#suspend-context-manager","title":"Suspend context manager","text":"<p>You can use the App.suspend context manager to suspend your app. The following Textual app will launch vim (a text editor) when the user clicks a button:</p> suspend.pyOutput <pre><code>from os import system\n\nfrom textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass SuspendingApp(App[None]):\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"Open the editor\", id=\"edit\")\n\n    @on(Button.Pressed, \"#edit\")\n    def run_external_editor(self) -&gt; None:\n        with self.suspend():  # (1)!\n            system(\"vim\")\n\n\nif __name__ == \"__main__\":\n    SuspendingApp().run()\n</code></pre> <ol> <li>All code in the body of the <code>with</code> statement will be run while the app is suspended.</li> </ol> <p> SuspendingApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Open\u00a0the\u00a0editor\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#suspending-from-foreground","title":"Suspending from foreground","text":"<p>On Unix and Unix-like systems (GNU/Linux, macOS, etc) Textual has support for the user pressing a key combination to suspend the application as the foreground process. Ordinarily this key combination is Ctrl+Z; in a Textual application this is disabled by default, but an action is provided (<code>action_suspend_process</code>) that you can bind in the usual way. For example:</p> suspend_process.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.binding import Binding\nfrom textual.widgets import Label\n\n\nclass SuspendKeysApp(App[None]):\n\n    BINDINGS = [Binding(\"ctrl+z\", \"suspend_process\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Press Ctrl+Z to suspend!\")\n\n\nif __name__ == \"__main__\":\n    SuspendKeysApp().run()\n</code></pre> <p> SuspendKeysApp Press\u00a0Ctrl+Z\u00a0to\u00a0suspend!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p>Note</p> <p>If <code>suspend_process</code> is called on Windows, or when your application is being hosted under Textual Web, the call will be ignored.</p>"},{"location":"guide/app/#css","title":"CSS","text":"<p>Textual apps can reference CSS files which define how your app and widgets will look, while keeping your Python code free of display related code (which tends to be messy).</p> <p>Info</p> <p>Textual apps typically use the extension <code>.tcss</code> for external CSS files to differentiate them from browser (<code>.css</code>) files.</p> <p>The chapter on Textual CSS describes how to use CSS in detail. For now let's look at how your app references external CSS files.</p> <p>The following example enables loading of CSS by adding a <code>CSS_PATH</code> class variable:</p> question02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button, Label\n\n\nclass QuestionApp(App[str]):\n    CSS_PATH = \"question02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>Note</p> <p>We also added an <code>id</code> to the <code>Label</code>, because we want to style it in the CSS.</p> <p>If the path is relative (as it is above) then it is taken as relative to where the app is defined. Hence this example references <code>\"question01.tcss\"</code> in the same directory as the Python code. Here is that CSS file:</p> question02.tcss<pre><code>Screen {\n    layout: grid;\n    grid-size: 2;\n    grid-gutter: 2;\n    padding: 2;\n}\n#question {\n    width: 100%;\n    height: 100%;\n    column-span: 2;\n    content-align: center bottom;\n    text-style: bold;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>When <code>\"question02.py\"</code> runs it will load <code>\"question02.tcss\"</code> and update the app and widgets accordingly. Even though the code is almost identical to the previous sample, the app now looks quite different:</p> <p> QuestionApp Do\u00a0you\u00a0love\u00a0Textual? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/app/#classvar-css","title":"Classvar CSS","text":"<p>While external CSS files are recommended for most applications, and enable some cool features like live editing, you can also specify the CSS directly within the Python code.</p> <p>To do this set a <code>CSS</code> class variable on the app to a string containing your CSS.</p> <p>Here's the question app with classvar CSS:</p> question03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, Button\n\n\nclass QuestionApp(App[str]):\n    CSS = \"\"\"\n    Screen {\n        layout: grid;\n        grid-size: 2;\n        grid-gutter: 2;\n        padding: 2;\n    }\n    #question {\n        width: 100%;\n        height: 100%;\n        column-span: 2;\n        content-align: center bottom;\n        text-style: bold;\n    }\n\n    Button {\n        width: 100%;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = QuestionApp()\n    reply = app.run()\n    print(reply)\n</code></pre>"},{"location":"guide/app/#title-and-subtitle","title":"Title and subtitle","text":"<p>Textual apps have a <code>title</code> attribute which is typically the name of your application, and an optional <code>sub_title</code> attribute which adds additional context (such as the file your are working on). By default, <code>title</code> will be set to the name of your App class, and <code>sub_title</code> is empty. You can change these defaults by defining <code>TITLE</code> and <code>SUB_TITLE</code> class variables. Here's an example of that:</p> question_title01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button, Header, Label\n\n\nclass MyApp(App[str]):\n    CSS_PATH = \"question02.tcss\"\n    TITLE = \"A Question App\"\n    SUB_TITLE = \"The most important question\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>Note that the title and subtitle are displayed by the builtin Header widget at the top of the screen:</p> <p> A\u00a0Question\u00a0App \u2b58A\u00a0Question\u00a0App\u00a0\u2014\u00a0The\u00a0most\u00a0important\u00a0question Do\u00a0you\u00a0love\u00a0Textual? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>You can also set the title attributes dynamically within a method of your app. The following example sets the title and subtitle in response to a key press:</p> question_title02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.events import Key\nfrom textual.widgets import Button, Header, Label\n\n\nclass MyApp(App[str]):\n    CSS_PATH = \"question02.tcss\"\n    TITLE = \"A Question App\"\n    SUB_TITLE = \"The most important question\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(\"Do you love Textual?\", id=\"question\")\n        yield Button(\"Yes\", id=\"yes\", variant=\"primary\")\n        yield Button(\"No\", id=\"no\", variant=\"error\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(event.button.id)\n\n    def on_key(self, event: Key):\n        self.title = event.key\n        self.sub_title = f\"You just pressed {event.key}!\"\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    reply = app.run()\n    print(reply)\n</code></pre> <p>If you run this app and press the T key, you should see the header update accordingly:</p> <p> A\u00a0Question\u00a0App \u2b58t\u00a0\u2014\u00a0You\u00a0just\u00a0pressed\u00a0t! Do\u00a0you\u00a0love\u00a0Textual? \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Info</p> <p>Note that there is no need to explicitly refresh the screen when setting the title attributes. This is an example of reactivity, which we will cover later in the guide.</p>"},{"location":"guide/app/#whats-next","title":"What's next","text":"<p>In the following chapter we will learn more about how to apply styles to your widgets and app.</p>"},{"location":"guide/command_palette/","title":"Command Palette","text":"<p>Textual apps have a built-in command palette, which gives users a quick way to access certain functionality within your app.</p> <p>In this chapter we will explain what a command palette is, how to use it, and how you can add your own commands.</p>"},{"location":"guide/command_palette/#launching-the-command-palette","title":"Launching the command palette","text":"<p>Press Ctrl+P to invoke the command palette screen, which contains of a single input widget. Textual will suggest commands as you type in that input. Press Up or Down to select a command from the list, and Enter to invoke it.</p> <p>Commands are looked up via a fuzzy search, which means Textual will show commands that match the keys you type in the same order, but not necessarily at the start of the command. For instance the \"Toggle light/dark mode\" command will be shown if you type \"to\" (for toggle), but you could also type \"dm\" (to match dark mode). This scheme allows the user to quickly get to a particular command with a minimum of key-presses.</p> Command PaletteCommand Palette after 't'Command Palette after 'td' <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0eSearch\u00a0for\u00a0commands\u2026 \u00a0\u00a0Bell\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Ring\u00a0the\u00a0bell \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u00a0\u00a0Quit\u00a0the\u00a0application\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quit\u00a0the\u00a0application\u00a0as\u00a0soon\u00a0as\u00a0possible \u00a0\u00a0Save\u00a0screenshot\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Save\u00a0an\u00a0SVG\u00a0'screenshot'\u00a0of\u00a0the\u00a0current\u00a0screen \u00a0\u00a0Show\u00a0keys\u00a0and\u00a0help\u00a0panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Show\u00a0help\u00a0for\u00a0the\u00a0focused\u00a0widget\u00a0and\u00a0a\u00a0summary\u00a0of\u00a0available\u00a0keys \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0et \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u00a0\u00a0Quit\u00a0the\u00a0application\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quit\u00a0the\u00a0application\u00a0as\u00a0soon\u00a0as\u00a0possible \u00a0\u00a0Save\u00a0screenshot Save\u00a0an\u00a0SVG\u00a0'screenshot'\u00a0of\u00a0the\u00a0current\u00a0screen \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0etd \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/command_palette/#system-commands","title":"System commands","text":"<p>Textual apps have a number of system commands enabled by default. These are declared in the <code>App.get_system_commands</code> method. You can implement this method in your App class to add more commands.</p> <p>To declare a command, define a <code>get_system_commands</code> method on your App. Textual will call this method with the screen that was active when the user summoned the command palette. </p> <p>You can add a command by yielding a <code>SystemCommand</code> object which contains <code>title</code> and <code>help</code> text to be shown in the command palette, and <code>callback</code> which is a callable to run when the user selects the command. Additionally, there is a <code>discover</code> boolean which when <code>True</code> (the default) shows the command even if the search import is empty. When set to <code>False</code>, the command will show only when there is input.</p> <p>Here's how we would add a command to ring the terminal bell (a super useful piece of functionality):</p> command01.pyOutput command01.py<pre><code>from typing import Iterable\n\nfrom textual.app import App, SystemCommand\nfrom textual.screen import Screen\n\n\nclass BellCommandApp(App):\n    \"\"\"An app with a 'bell' command.\"\"\"\n\n    def get_system_commands(self, screen: Screen) -&gt; Iterable[SystemCommand]:\n        yield from super().get_system_commands(screen)  # (1)!\n        yield SystemCommand(\"Bell\", \"Ring the bell\", self.bell)  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = BellCommandApp()\n    app.run()\n</code></pre> <ol> <li>Adds the default commands from the base class.</li> <li>Adds a new command.</li> </ol> <p> BellCommandApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \ud83d\udd0eSearch\u00a0for\u00a0commands\u2026 \u00a0\u00a0Bell\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Ring\u00a0the\u00a0bell \u00a0\u00a0Light\u00a0mode\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Switch\u00a0to\u00a0a\u00a0light\u00a0background \u00a0\u00a0Quit\u00a0the\u00a0application\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quit\u00a0the\u00a0application\u00a0as\u00a0soon\u00a0as\u00a0possible \u00a0\u00a0Save\u00a0screenshot\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Save\u00a0an\u00a0SVG\u00a0'screenshot'\u00a0of\u00a0the\u00a0current\u00a0screen \u00a0\u00a0Show\u00a0keys\u00a0and\u00a0help\u00a0panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Show\u00a0help\u00a0for\u00a0the\u00a0focused\u00a0widget\u00a0and\u00a0a\u00a0summary\u00a0of\u00a0available\u00a0keys \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>This is a straightforward way of adding commands to your app. For more advanced integrations you can implement your own command providers.</p>"},{"location":"guide/command_palette/#command-providers","title":"Command providers","text":"<p>To add your own command(s) to the command palette, define a <code>command.Provider</code> class then add it to the <code>COMMANDS</code> class var on your <code>App</code> class.</p> <p>Let's look at a simple example which adds the ability to open Python files via the command palette.</p> <p>The following example will display a blank screen initially, but if you bring up the command palette and start typing the name of a Python file, it will show the command to open it.</p> <p>Tip</p> <p>If you are running that example from the repository, you may want to add some additional Python files to see how the examples works with multiple files.</p> command02.py<pre><code>from __future__ import annotations\n\nfrom functools import partial\nfrom pathlib import Path\n\nfrom textual.app import App, ComposeResult\nfrom textual.command import Hit, Hits, Provider\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Static\n\n\nclass PythonFileCommands(Provider):\n    \"\"\"A command provider to open a Python file in the current working directory.\"\"\"\n\n    def read_files(self) -&gt; list[Path]:\n        \"\"\"Get a list of Python files in the current working directory.\"\"\"\n        return list(Path(\"./\").glob(\"*.py\"))\n\n    async def startup(self) -&gt; None:  # (1)!\n        \"\"\"Called once when the command palette is opened, prior to searching.\"\"\"\n        worker = self.app.run_worker(self.read_files, thread=True)\n        self.python_paths = await worker.wait()\n\n    async def search(self, query: str) -&gt; Hits:  # (2)!\n        \"\"\"Search for Python files.\"\"\"\n        matcher = self.matcher(query)  # (3)!\n\n        app = self.app\n        assert isinstance(app, ViewerApp)\n\n        for path in self.python_paths:\n            command = f\"open {str(path)}\"\n            score = matcher.match(command)  # (4)!\n            if score &gt; 0:\n                yield Hit(\n                    score,\n                    matcher.highlight(command),  # (5)!\n                    partial(app.open_file, path),\n                    help=\"Open this file in the viewer\",\n                )\n\n\nclass ViewerApp(App):\n    \"\"\"Demonstrate a command source.\"\"\"\n\n    COMMANDS = App.COMMANDS | {PythonFileCommands}  # (6)!\n\n    def compose(self) -&gt; ComposeResult:\n        with VerticalScroll():\n            yield Static(id=\"code\", expand=True)\n\n    def open_file(self, path: Path) -&gt; None:\n        \"\"\"Open and display a file with syntax highlighting.\"\"\"\n        from rich.syntax import Syntax\n\n        syntax = Syntax.from_path(\n            str(path),\n            line_numbers=True,\n            word_wrap=False,\n            indent_guides=True,\n            theme=\"github-dark\",\n        )\n        self.query_one(\"#code\", Static).update(syntax)\n\n\nif __name__ == \"__main__\":\n    app = ViewerApp()\n    app.run()\n</code></pre> <ol> <li>This method is called when the command palette is first opened.</li> <li>Called on each key-press.</li> <li>Get a Matcher instance to compare against hits.</li> <li>Use the matcher to get a score.</li> <li>Highlights matching letters in the search.</li> <li>Adds our custom command provider and the default command provider.</li> </ol> <p>There are four methods you can override in a command provider: <code>startup</code>, <code>search</code>, <code>discover</code> and <code>shutdown</code>. All of these methods should be coroutines (<code>async def</code>). Only <code>search</code> is required, the other methods are optional. Let's explore those methods in detail.</p>"},{"location":"guide/command_palette/#startup-method","title":"startup method","text":"<p>The <code>startup</code> method is called when the command palette is opened. You can use this method as way of performing work that needs to be done prior to searching. In the example, we use this method to get the Python (.py) files in the current working directory.</p>"},{"location":"guide/command_palette/#search-method","title":"search method","text":"<p>The <code>search</code> method is responsible for finding results (or hits) that match the user's input. This method should yield <code>Hit</code> objects for any command that matches the <code>query</code> argument.</p> <p>Exactly how the matching is implemented is up to the author of the command provider, but we recommend using the builtin fuzzy matcher object, which you can get by calling <code>matcher</code>. This object has a <code>match()</code> method which compares the user's search term against the potential command and returns a score. A score of zero means no hit, and you can discard the potential command. A score of above zero indicates the confidence in the result, where 1 is an exact match, and anything lower indicates a less confident match.</p> <p>The <code>Hit</code> contains information about the score (used in ordering) and how the hit should be displayed, and an optional help string. It also contains a callback, which will be run if the user selects that command.</p> <p>In the example above, the callback is a lambda which calls the <code>open_file</code> method in the example app.</p> <p>Note</p> <p>Unlike most other places in Textual, errors in command provider will not exit the app. This is a deliberate design decision taken to prevent a single broken <code>Provider</code> class from making the command palette unusable. Errors in command providers will be logged to the console.</p>"},{"location":"guide/command_palette/#discover-method","title":"discover method","text":"<p>The <code>discover</code> method is responsible for providing results (or discovery hits) that should be shown to the user when the command palette input is empty; this is to aid in command discoverability.</p> <p>Note</p> <p>Because <code>discover</code> hits are shown the moment the command palette is opened, these should ideally be quick to generate; commands that might take time to generate are best left for <code>search</code> -- use <code>discover</code> to help the user easily find the most important commands.</p> <p><code>discover</code> is similar to <code>search</code> but with these differences:</p> <ul> <li><code>discover</code> accepts no parameters (instead of the search value)</li> <li><code>discover</code> yields instances of <code>DiscoveryHit</code> (instead of instances of <code>Hit</code>)</li> </ul> <p>Instances of <code>DiscoveryHit</code> contain information about how the hit should be displayed, an optional help string, and a callback which will be run if the user selects that command.</p>"},{"location":"guide/command_palette/#shutdown-method","title":"shutdown method","text":"<p>The <code>shutdown</code> method is called when the command palette is closed. You can use this as a hook to gracefully close any objects you created in <code>startup</code>.</p>"},{"location":"guide/command_palette/#screen-commands","title":"Screen commands","text":"<p>You can also associate commands with a screen by adding a <code>COMMANDS</code> class var to your Screen class.</p> <p>Commands defined on a screen are only considered when that screen is active. You can use this to implement commands that are specific to a particular screen, that wouldn't be applicable everywhere in the app.</p>"},{"location":"guide/command_palette/#disabling-the-command-palette","title":"Disabling the command palette","text":"<p>The command palette is enabled by default. If you would prefer not to have the command palette, you can set <code>ENABLE_COMMAND_PALETTE = False</code> on your app class.</p> <p>Here's an app class with no command palette:</p> <pre><code>class NoPaletteApp(App):\n    ENABLE_COMMAND_PALETTE = False\n</code></pre>"},{"location":"guide/command_palette/#changing-command-palette-key","title":"Changing command palette key","text":"<p>You can change the key that opens the command palette by setting the class variable <code>COMMAND_PALETTE_BINDING</code> on your app.</p> <p>Prior to version 0.77.0, Textual used the binding <code>ctrl+backslash</code> to launch the command palette. Here's how you would restore the older key binding:</p> <pre><code>class NewPaletteBindingApp(App):\n    COMMAND_PALETTE_BINDING = \"ctrl+backslash\"\n</code></pre>"},{"location":"guide/design/","title":"Design System","text":"<p>Textual's design system consists of a number of predefined colors and guidelines for how to use them in your app.</p> <p>You don't have to follow these guidelines, but if you do, you will be able to mix builtin widgets with third party widgets and your own creations, without worrying about clashing colors.</p> <p>Information</p> <p>Textual's color system is based on Google's Material design system, modified to suit the terminal.</p>"},{"location":"guide/design/#designing-with-colors","title":"Designing with Colors","text":"<p>Textual pre-defines a number of colors as CSS variables. For instance, the CSS variable <code>$primary</code> is set to <code>#004578</code> (the blue used in headers). You can use <code>$primary</code> in place of the color in the background and color rules, or other any other rule that accepts a color.</p> <p>Here's an example of CSS that uses color variables:</p> <pre><code>MyWidget {\n    background: $primary;\n    color: $text;\n}\n</code></pre> <p>Using variables rather than explicit colors allows Textual to apply color themes. Textual supplies a default light and dark theme, but in the future many more themes will be available.</p>"},{"location":"guide/design/#base-colors","title":"Base Colors","text":"<p>There are 12 base colors defined in the color scheme. The following table lists each of the color names (as used in CSS) and a description of where to use them.</p> Color Description <code>$primary</code> The primary color, can be considered the branding color. Typically used for titles, and backgrounds for strong emphasis. <code>$secondary</code> An alternative branding color, used for similar purposes as <code>$primary</code>, where an app needs to differentiate something from the primary color. <code>$primary-background</code> The primary color applied to a background. On light mode this is the same as <code>$primary</code>. In dark mode this is a dimmed version of <code>$primary</code>. <code>$secondary-background</code> The secondary color applied to a background. On light mode this is the same as <code>$secondary</code>. In dark mode this is a dimmed version of <code>$secondary</code>. <code>$background</code> A color used for the background, where there is no content. <code>$surface</code> The color underneath text. <code>$panel</code> A color used to differentiate a part of the UI form the main content. Typically used for dialogs or sidebars. <code>$boost</code> A color with alpha that can be used to create layers on a background. <code>$warning</code> Indicates a warning. Text or background. <code>$error</code> Indicates an error.  Text or background. <code>$success</code> Used to indicate success.  Text or background. <code>$accent</code> Used sparingly to draw attention to a part of the UI (typically borders around focused widgets)."},{"location":"guide/design/#shades","title":"Shades","text":"<p>For every color, Textual generates 3 dark shades and 3 light shades.</p> <ul> <li>Add <code>-lighten-1</code>, <code>-lighten-2</code>, or <code>-lighten-3</code> to the color's variable name to get lighter shades (3 is the lightest).</li> <li>Add <code>-darken-1</code>, <code>-darken-2</code>, and <code>-darken-3</code> to a color to get the darker shades (3 is the darkest).</li> </ul> <p>For example, <code>$secondary-darken-1</code> is a slightly darkened <code>$secondary</code>, and <code>$error-lighten-3</code> is a very light version of the <code>$error</code> color.</p>"},{"location":"guide/design/#dark-mode","title":"Dark mode","text":"<p>There are two color themes in Textual, a light mode and dark mode. You can switch between them by toggling the <code>dark</code> attribute on the App class.</p> <p>In dark mode <code>$background</code> and <code>$surface</code> are off-black. Dark mode also set <code>$primary-background</code> and <code>$secondary-background</code> to dark versions of <code>$primary</code> and <code>$secondary</code>.</p>"},{"location":"guide/design/#text-color","title":"Text color","text":"<p>The design system defines three CSS variables you should use for text color.</p> <ul> <li><code>$text</code> sets the color of text in your app. Most text in your app should have this color.</li> <li><code>$text-muted</code> sets a slightly faded text color. Use this for text which has lower importance. For instance a sub-title or supplementary information.</li> <li><code>$text-disabled</code> sets faded out text which indicates it has been disabled. For instance, menu items which are not applicable and can't be clicked.</li> </ul> <p>You can set these colors via the color property. The design system uses <code>auto</code> colors for text, which means that Textual will pick either white or black (whichever has better contrast).</p> <p>Information</p> <p>These text colors all have some alpha applied, so that even <code>$text</code> isn't pure white or pure black. This is done because blending in a little of the background color produces text that is not so harsh on the eyes.</p>"},{"location":"guide/design/#theming","title":"Theming","text":"<p>In a future version of Textual you will be able to modify theme colors directly, and allow users to configure preferred themes.</p>"},{"location":"guide/design/#color-preview","title":"Color Preview","text":"<p>Run the following from the command line to preview the colors defined in the color system:</p> <pre><code>textual colors\n</code></pre>"},{"location":"guide/design/#theme-reference","title":"Theme Reference","text":"<p>Here's a list of the colors defined in the default light and dark themes.</p> <p>Note</p> <p><code>$boost</code> will look different on different backgrounds because of its alpha channel.</p> <p> Textual\u00a0Theme\u00a0Colors \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Light\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Dark\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0$primary-background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-darken-3\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0$primary-background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-darken-2\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0$primary-background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-darken-1\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$primary-background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-lighten-1\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$primary-background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-lighten-2\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$primary-background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$primary-background-lighten-3\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$secondary-background-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-darken-3\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$secondary-background-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-darken-2\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0$secondary-background-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-darken-1\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0$secondary-background-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-lighten-1\u00a0\u00a0\u00a0 \u00a0\u00a0$secondary-background-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-lighten-2\u00a0\u00a0\u00a0 \u00a0\u00a0$secondary-background-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0$secondary-background-lighten-3\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$surface-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$panel-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$boost-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$warning-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$success-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-darken-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$accent-lighten-3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"guide/devtools/","title":"Devtools","text":"<p>Note</p> <p>If you don't have the <code>textual</code> command on your path, you may have forgotten to install the <code>textual-dev</code> package.</p> <p>See getting started for details.</p> <p>Textual comes with a command line application of the same name. The <code>textual</code> command is a super useful tool that will help you to build apps.</p> <p>Take a moment to look through the available subcommands. There will be even more helpful tools here in the future.</p> <pre><code>textual --help\n</code></pre>"},{"location":"guide/devtools/#run","title":"Run","text":"<p>The <code>run</code> sub-command runs Textual apps. If you supply a path to a Python file it will load and run the app.</p> <pre><code>textual run my_app.py\n</code></pre> <p>This is equivalent to running <code>python my_app.py</code> from the command prompt, but will allow you to set various switches which can help you debug, such as <code>--dev</code> which enable the Console.</p> <p>See the <code>run</code> subcommand's help for details:</p> <pre><code>textual run --help\n</code></pre> <p>You can also run Textual apps from a python import. The following command would import <code>music.play</code> and run a Textual app in that module:</p> <pre><code>textual run music.play\n</code></pre> <p>This assumes you have a Textual app instance called <code>app</code> in <code>music.play</code>. If your app has a different name, you can append it after a colon:</p> <pre><code>textual run music.play:MusicPlayerApp\n</code></pre> <p>Note</p> <p>This works for both Textual app instances and classes.</p>"},{"location":"guide/devtools/#running-from-commands","title":"Running from commands","text":"<p>If your app is installed as a command line script, you can use the <code>-c</code> switch to run it. For instance, the following will run the <code>textual colors</code> command:</p> <pre><code>textual run -c textual colors\n</code></pre>"},{"location":"guide/devtools/#serve","title":"Serve","text":"<p>The devtools can also serve your application in a browser. Effectively turning your terminal app in to a web application!</p> <p>The <code>serve</code> sub-command is similar to <code>run</code>. Here's how you can serve an app launched from a Python file:</p> <pre><code>textual serve my_app.py\n</code></pre> <p>You can also serve a Textual app launched via a command. Here's an example:</p> <pre><code>textual serve \"textual keys\"\n</code></pre> <p>The syntax for launching an app in a module is slightly different from <code>run</code>. You need to specify the full command, including <code>python</code>. Here's how you would run the Textual demo:</p> <pre><code>textual serve \"python -m textual\"\n</code></pre> <p>Textual's builtin web-server is quite powerful. You can serve multiple instances of your application at once!</p> <p>Tip</p> <p>Textual serve is also useful when developing your app. If you make changes to your code, simply refresh the browser to update.</p>"},{"location":"guide/devtools/#live-editing","title":"Live editing","text":"<p>If you combine the <code>run</code> command with the <code>--dev</code> switch your app will run in development mode.</p> <pre><code>textual run --dev my_app.py\n</code></pre> <p>One of the features of dev mode is live editing of CSS files: any changes to your CSS will be reflected in the terminal a few milliseconds later.</p> <p>This is a great feature for iterating on your app's look and feel. Open the CSS in your editor and have your app running in a terminal. Edits to your CSS will appear almost immediately after you save.</p>"},{"location":"guide/devtools/#console","title":"Console","text":"<p>When building a typical terminal application you are generally unable to use <code>print</code> when debugging (or log to the console). This is because anything you write to standard output will overwrite application content. Textual has a solution to this in the form of a debug console which restores <code>print</code> and adds a few additional features to help you debug.</p> <p>To use the console, open up two terminal emulators. Run the following in one of the terminals:</p> <pre><code>textual console\n</code></pre> <p>You should see the Textual devtools welcome message:</p> <p> textual\u00a0console \u258cTextual\u00a0Development\u00a0Console\u00a0v0.78.0 \u258cRun\u00a0a\u00a0Textual\u00a0app\u00a0with\u00a0textual\u00a0run\u00a0--dev\u00a0my_app.py\u00a0to\u00a0connect. \u258cPress\u00a0Ctrl+C\u00a0to\u00a0quit. </p> <p>In the other console, run your application with <code>textual run</code> and the <code>--dev</code> switch:</p> <pre><code>textual run --dev my_app.py\n</code></pre> <p>Anything you <code>print</code> from your application will be displayed in the console window. Textual will also write log messages to this window which may be helpful when debugging your application.</p>"},{"location":"guide/devtools/#increasing-verbosity","title":"Increasing verbosity","text":"<p>Textual writes log messages to inform you about certain events, such as when the user presses a key or clicks on the terminal. To avoid swamping you with too much information, some events are marked as \"verbose\" and will be excluded from the logs. If you want to see these log messages, you can add the <code>-v</code> switch.</p> <pre><code>textual console -v\n</code></pre>"},{"location":"guide/devtools/#decreasing-verbosity","title":"Decreasing verbosity","text":"<p>Log messages are classififed in to groups, and the <code>-x</code> flag can be used to exclude all message from a group. The groups are: <code>EVENT</code>, <code>DEBUG</code>, <code>INFO</code>, <code>WARNING</code>, <code>ERROR</code>, <code>PRINT</code>, <code>SYSTEM</code>, <code>LOGGING</code> and <code>WORKER</code>. The group a message belongs to is printed after its timestamp.</p> <p>Multiple groups may be excluded, for example to exclude everything except warning, errors, and <code>print</code> statements:</p> <pre><code>textual console -x SYSTEM -x EVENT -x DEBUG -x INFO\n</code></pre>"},{"location":"guide/devtools/#custom-port","title":"Custom port","text":"<p>You can use the option <code>--port</code> to specify a custom port to run the console on, which comes in handy if you have other software running on the port that Textual uses by default:</p> <pre><code>textual console --port 7342\n</code></pre> <p>Then, use the command <code>run</code> with the same <code>--port</code> option:</p> <pre><code>textual run --dev --port 7342 my_app.py\n</code></pre>"},{"location":"guide/devtools/#textual-log","title":"Textual log","text":"<p>Use the <code>log</code> function to pretty-print data structures and anything that Rich can display.</p> <p>You can import the log function as follows:</p> <pre><code>from textual import log\n</code></pre> <p>Here's a few examples of writing to the console, with <code>log</code>:</p> <pre><code>def on_mount(self) -&gt; None:\n    log(\"Hello, World\")  # simple string\n    log(locals())  # Log local variables\n    log(children=self.children, pi=3.141592)  # key/values\n    log(self.tree)  # Rich renderables\n</code></pre>"},{"location":"guide/devtools/#log-method","title":"Log method","text":"<p>There's a convenient shortcut to <code>log</code> on the <code>App</code> and <code>Widget</code> objects. This is useful in event handlers. Here's an example:</p> <pre><code>from textual.app import App\n\nclass LogApp(App):\n\n    def on_load(self):\n        self.log(\"In the log handler!\", pi=3.141529)\n\n    def on_mount(self):\n        self.log(self.tree)\n\nif __name__ == \"__main__\":\n    LogApp().run()\n</code></pre>"},{"location":"guide/devtools/#logging-handler","title":"Logging handler","text":"<p>Textual has a logging handler which will write anything logged via the builtin logging library to the devtools. This may be useful if you have a third-party library that uses the logging module, and you want to see those logs with Textual logs.</p> <p>Note</p> <p>The logging library works with strings only, so you won't be able to log Rich renderables such as <code>self.tree</code> with the logging handler.</p> <p>Here's an example of configuring logging to use the <code>TextualHandler</code>.</p> <pre><code>import logging\nfrom textual.app import App\nfrom textual.logging import TextualHandler\n\nlogging.basicConfig(\n    level=\"NOTSET\",\n    handlers=[TextualHandler()],\n)\n\n\nclass LogApp(App):\n    \"\"\"Using logging with Textual.\"\"\"\n\n    def on_mount(self) -&gt; None:\n        logging.debug(\"Logged via TextualHandler\")\n\n\nif __name__ == \"__main__\":\n    LogApp().run()\n</code></pre>"},{"location":"guide/events/","title":"Events and Messages","text":"<p>We've used event handler methods in many of the examples in this guide. This chapter explores events and messages (see below) in more detail.</p>"},{"location":"guide/events/#messages","title":"Messages","text":"<p>Events are a particular kind of message sent by Textual in response to input and other state changes. Events are reserved for use by Textual, but you can also create custom messages for the purpose of coordinating between widgets in your app.</p> <p>More on that later, but for now keep in mind that events are also messages, and anything that is true of messages is true of events.</p>"},{"location":"guide/events/#message-queue","title":"Message Queue","text":"<p>Every App and Widget object contains a message queue. You can think of a message queue as orders at a restaurant. The chef takes an order and makes the dish. Orders that arrive while the chef is cooking are placed in a line. When the chef has finished a dish they pick up the next order in the line.</p> <p>Textual processes messages in the same way. Messages are picked off a queue and processed (cooked) by a handler method. This guarantees messages and events are processed even if your code can not handle them right away.</p> <p>This processing of messages is done within an asyncio Task which is started when you mount the widget. The task monitors a queue for new messages and dispatches them to the appropriate handler when they arrive.</p> <p>Tip</p> <p>The FastAPI docs have an excellent introduction to Python async programming.</p> <p>By way of an example, let's consider what happens if you were to type \"Text\" in to a <code>Input</code> widget. When you hit the T key, Textual creates a key event and sends it to the widget's message queue. Ditto for E, X, and T.</p> <p>The widget's task will pick the first message from the queue (a key event for the T key) and call the <code>on_key</code> method with the event as the first argument. In other words it will call <code>Input.on_key(event)</code>, which updates the display to show the new letter.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9zq+g2C97q4Iyj57XVm3dXG6Eh8NcdTAwMWJCSPbuXHUwMDE2JWzZViw/sGRcZknlv99cdTAwMWVcdTAwMDGWLEu2McaYutdcdFx1MDAxOEujUVvTp/ucnpF+rqyurkV3XHUwMDFkb+2P1TXvtuxcdTAwMDZ+pev2197Z7TdeN/TbLdzF4s9hu9ctxy3rUdRcdP94/77pdlx1MDAxYl7UXHTcsufc+GHPXHLCqFfx20653XzvR14z/Lf9feg2vT877WYl6jrJSda9ilx1MDAxZrW79+fyXHUwMDAyr+m1olx1MDAxMHv/XHUwMDBmfl5d/Vx1MDAxOf9OWVx1MDAxN/gtL25cdTAwMWJvTWzjhGW3XHUwMDFltluxnYxpJYFcbjlo4IdcdTAwMWbxTJFXwb1VtNZL9thNa3ew7a9v1GuNw6P92uXn453d/r5Mzlr1g+Asulx1MDAwYu4vgluu97opm8Ko2254XHUwMDE3fiWqP16z1PbBcVx1MDAxNTeso1x1MDAwMYPd3XavVm95of3udLC13XHLfnRnt1x1MDAxMTLY6rZqcSfJllv8XHUwMDA0TDlcXFFiuFx1MDAxMoNcdTAwMWT2UC7AoZRRZncxo1x1MDAxNM9cdTAwMTi12Vx1MDAwZXBcdTAwMDTQqN9I/EqsunLLjVx1MDAxYZrWqlxm2kRdt1x1MDAxNXbcLo5T0q7/+HVcdTAwMWRJQSpcbmBwREApXHUwMDE4NKl7fq1cdTAwMWVZczRzXHUwMDE4lZRcbs2pXHUwMDAyloxL6MVDXCK0XHUwMDA2LiE51FrQKVVit/gne0HrbrfzcN3WYktT1tuPWymfSlx1MDAwZe51Ku69XHUwMDAzUCk5XHUwMDEzaCmXLLmg6GdcctzZ6lx1MDAwNUGyrV1u5PhMXHUwMDE4ud1ow29V/FYte4jXqlx1MDAxNOxcdNww2mw3m36EZlx1MDAxY7f9VpRtXHUwMDEx9/uh2233655byem5cF/HdpeAyL6Sv1ZcdTAwMTO3iT9cZv7+511u6+Ihta+RwUy6W0m//3r3RDxLkt36iGdcdTAwMDVUXHUwMDEyTVJccibhueyT7cMvnXWz8dm/8b5cdTAwMDU7p+ftT0uPZ0Ul4llcdTAwMWJcIllcdTAwMTbP3MGQxlx0XHUwMDA3/Mf0y8HZOIRxjfiQglBcbjRcdTAwMGbNyjhMMcE5XHUwMDA1wVjyVVx1MDAxZsBMNTWMS6lcdTAwMTKY/1x1MDAxZs6vXGLnwiG1r+xgPlx1MDAxMcxdr1x1MDAxY937clx1MDAwZaKFVEWIplxuXHUwMDA3jFx1MDAwYlx1MDAwNXpqSJ9/b1xis8v5XHUwMDA1bFx1MDAxZVx1MDAxZV1Hd5dHSjZngzTNuuDjcWFcdTAwMWIpylxcMzRwR2mBVCSDaClExognYfg3KEuvKlx1MDAwMHJcdTAwMTKyTK7pXHUwMDAwszpcdTAwMTXFXHUwMDFlUMqBMMFcdTAwMDQkXHUwMDA2z1xypVx1MDAwMyf6mfK0gc9E3m1cdTAwMTJ4Ulx1MDAwM1xcPWq4ncjb0Xe1T0dbknxcdTAwMDH6w19cdTAwMWK0+/Uuv9v7gzfV0Y3r9Xav3fN+dHHEXHUwMDBmw8Nob/gsj+d3LepS/T46+lx1MDAxY0PLWMxcZn3/NFxcaCFcXDDVcmGQ1k6NlvyLufRo0Vx1MDAwNWjR4DxcdTAwMGIv4ymsyEFcZuNZxFx1MDAwMKXKMMlnSGuh/bDotFZtt6Iz/0csiMjQ1m236Vx1MDAwNzGvXHUwMDE4bI6d0mrBXHUwMDFia5Oz59393vDu/vx77fPfa/9KX9rQi1x0XHUwMDFj2meGXHUwMDBl/lx1MDAxMPi1Vky9sFx1MDAwM6875OCRj9pv0KDpVyrphFFGi1xc7LNbmibOt7t+zW+5weexXHUwMDA2z560kPNcdTAwMTYmLcGUXCKYJNnUMCTVjdb2xkWTXHUwMDFk7PbPvm9dnVx1MDAxZJWbfPlhSFx1MDAxZKo5Q6bJjaaSXHUwMDBmYVFcYuEg61dcdTAwMDb5qFx1MDAwNinUc3A5hzymKCVcblxy0U+H5Wx57H5kw89cdTAwMDcnXHUwMDFmLjpy0z24U7J1XHUwMDFhfe3fVvNcdTAwMTNOjK2JeWxSesw/4fKlMfSeQlx1MDAwMCHTXHUwMDA0LZWeXsiNv8xLXHUwMDBiIDlcdTAwMGVAmMzMvFx1MDAwMDSPxEa1llx1MDAwNNW+nIFcbr7hzOYtOrNNSFx1MDAwNlx1MDAxMzObNzGz3VPbXHUwMDFjUFwiqSpcdTAwMDIlXHUwMDAwXHUwMDAzxSVMXHLJ8VR7SSEpNHU4IZwrKrVG2TNcdTAwMDRJhTnN4GZNWTHNxGtULavx6azqoqRiUo5iXHUwMDExUypcdTAwMDDmKq2I1Pa/XHUwMDE4hSaAY00kWnMlXHUwMDA1g5HSikBcdTAwMWLwXHUwMDFi0DdaWUny3WPdf1x1MDAxYcpcdTAwMTdDu9yzVq5cdTAwMTNcdTAwMDdcdTAwMDNcdTAwMTWOlK3uXHUwMDBiW1xiXHUwMDAzwVPtam4njmeDwXzYNci5w/WcXCJ7dvrkR61xcvDtU/PM6NBcdTAwMWNdnlx1MDAxZbM8e9BcdTAwMWPCLP1AUqRMbFx1MDAxNchcdTAwMTF7XHUwMDE4sVU9Jlx1MDAwNGZcdTAwMDKQXHUwMDFj4/6IWXMuJmVcdTAwMDPBXFzrScWebF8jPpx0t5J+n4mcayOzW1x1MDAxM26BmVRSdIqpXHUwMDAz2aHZuNBcdTAwMDY2TrpcdTAwMDem8uV6//r6Q+922Vx1MDAwM1x1MDAxOVx1MDAwMHFQgiB70KhGbVx1MDAxMW0okiFcdTAwMWVcdTAwMWNFiFx1MDAxMdxcdTAwMDBcdTAwMGVcdTAwMDFJz7W8XHUwMDBlPVx1MDAxN1x1MDAxOHpcdTAwMTFcdTAwMWJcdTAwMGIrM92Prdzp175931xc3708//bps/6q6mqDPYeev1C3k1h//lx0p7T2W2f/ekdvVIOvXHUwMDE3f7ntvV23tHnWfltFMVxyxTVkQe0sr2HTU5fxw7e0iFx1MDAxN2NcdTAwMTGvucPmhvh56Fx0rVx1MDAwNDpH+ov9L8iJ20XLiVx06WuinLidKCdcbivVKchlQGlcYqXUwPRcdTAwMDJfbrPaycc72DpcdTAwMTW9nql978nLzt2yQ1JcdTAwMTnioGRcdTAwMWWpU1x1MDAwYtxupFYvNbeD3DdcdTAwMDeAXCJcdTAwMGJANEzb4MhcdTAwMTZcXFx1MDAxM1uufPNcdTAwMTR80yGIWlx1MDAwM1x1MDAwZvB6uDVv9brn9bx8XFzroYNcdTAwMDawXHK8ajRcdTAwMDbVUbtTXHUwMDA06aEvk8XvsEFjcVtYXHUwMDA2oHRMOqXcIJtcdTAwMTdPwO748V5S7GqgXHUwMDBlXHUwMDAwXHUwMDE4SbmmXFyZXGaCNThcZlx1MDAxOH1BXGZT7lCFSoZcYsZcdTAwMDQjyYBcZlx1MDAxMG2UwzhcdTAwMDGJTYhSSo+sl1x1MDAwMkzzgmj2XHUwMDAypPo161x1MDAwMONzwWq2XHUwMDBlgNFXgWGUaaF5stZg9VF3S0ehKJSzVlx1MDAwMcbn12FrcDhccjNKcCEwL+SWXHUwMDAwXGJcdTAwMDAj2MagXHUwMDFlXHUwMDAypkdsekslgPVCJ473jvhv0t9K+r0oflV8t9lOe2lqdkFcdTAwMTSuXHUwMDEyY4Rb5snp9Ms+x1x1MDAxN3qWNIBh8HK0XHUwMDE0dnEnXHUwMDE1SpiMXHUwMDFlwKjgMGUwglx1MDAwMTJcdTAwMTHgJmPY0+LYfUEzt1x1MDAwMKByuFxiZcaRoCG9IPUhZiFOXHUwMDE5oF2zyILnkJJnrFxmeZff7yTNLi5PXCLYgNOrvd3u7dFx+aJeOjmeVrP/pc7Pt672zlx1MDAwZvC6d3+cd8PN2+rB/DiUVjzh7i+k2XnxQlx1MDAxNiaBaOtPU0M0/2IuPUTNWIgqjvKBXHUwMDAzkZZoPFx1MDAxN6LjanR5cmF0/lx1MDAwZrRWXHUwMDEyg/lbWX89k2Bvty5R9/5cdTAwMWXL4MVcbvVcdFkmS/SHXHKdXHSBjFx1MDAxNM/BI/9QWpjpk+TJlemTm6PNXHUwMDEyLdPti7vatquDcNlcdTAwMTGokIMgK2RcXFKquExcdTAwMTWm4/k+TVx1MDAxZGOsXG5cdTAwMDDQ3OiXypGU58zyjep1ZVxiVUy/XHUwMDAw/F4x0yxUrW9ZsKzW3Vx1MDAxNuKwm1x1MDAwZu7FqvVhg8aCuFCtKz6O6zKM2IRNL9bHXHUwMDBm97LCWHNcdTAwMDcpP1hcdTAwMWOPwlhcdTAwMTPqXGKhha1+XHUwMDEzolPMZr4wNlxmo1x1MDAwNWpNlN2a4agksXNcdTAwMDBqQVx1MDAxZFwiXHUwMDA0xWCj8Vx1MDAwN1LceLDIRtgpU/1cdTAwMDIludeU7OOTw2p6qlxcoTI2wOyEoFxyeCzV6GHeXHUwMDFlXHUwMDFjylx1MDAxNzNtz/GyKM5cdGpx1KlKiFFjhMM1XHUwMDAwupZUWinJzYhRb0qxXHUwMDE3+rB9jXhv0t1K+n2mSXtKivVcdTAwMDBcdTAwMDVcdTAwMTTtXHUwMDA0zZk+jqldz5elXm1cdTAwMDM2LkNZ+Ytz9/Ro2eNcdTAwMThyfMdII6XAK0+0XHUwMDFjjmNcXChcdTAwMDe4jitIhEry2ktqhTBcdTAwMDQlXHUwMDAxWfD0Qalx2bioXHUwMDA2/CvtnqhcdTAwMGa3lZ0621x1MDAwZZ4/Z/9Wup1UVsg/4YuSsrGgL1x1MDAxMlx1MDAxZkZcdTAwMTXSXHUwMDE2VJqc2rtKp7+RZfxlXla4XHUwMDAzjIO7lo6ZXHUwMDE33OcxYc+IXHUwMDE0KJhmwftcdTAwMWKesI9cdTAwMTY9YT8hc02csI+ed2eLLr6zhVx1MDAxOUzDVlx1MDAwZk9ccstcdTAwMDNSql5cdTAwMWNdRKWQ7ZQvvG+eOP9SKoBludtcdTAwMGXD9bpcdTAwMWKV669cdTAwMGZNpHNcdTAwMGUyPs24Xb+YWmJcdTAwMWJ7XHJoh1x1MDAxMW0pIVx1MDAxNUSl65TzhqZQXGbZruFcdTAwMDaZJSbr1PrsoVx1MDAxYq1cdMdcdTAwMTbI2URcXLdcdTAwMTlcdTAwMDUuoFx1MDAwZeTmXHUwMDE1bkmjT1x1MDAwMO7sPitk4UM+7O3wXHUwMDFhuez0qaTSb7tl3W5tXHUwMDA3VyGr1Fp998dOUSrJ+N2Uj1x1MDAwNHhcdTAwMTFvxcG3t0pcdTAwMWJOhcy6q33+XHUwMDA3XHUwMDExhkrQRKpcdTAwMTdcXPolXHUwMDE0cVx1MDAwMKhRQJhGRZ6TVzhx7FJoSbhBXHUwMDExh/pqhFcqXHUwMDAzXHUwMDAyMM+8wsKwubmrXHUwMDE3XHUwMDA0fifMd1ZerHNcYlx1MDAxN1ZdmelXJ1+VTndcci25n8pcdTAwMDErl1x1MDAwM6M/qkZvXHUwMDE2b11gbMWAhY5cbkQwpDU8VVa9VzlcdTAwMWElNXqytM8jXHUwMDAwMY9qTd5cdTAwMTIphyiD0TteXHUwMDFmQSCnVkPtgklbXHUwMDE2tus8XHUwMDE4KtBRXHUwMDA1JCVSXCLD2VxmJdk34ammcH5AKo5xRD1hXHUwMDEyvXlrbrauv3/8us+jq1x1MDAxYrfqXHUwMDFk7+1cdTAwMTXd47okjootlIP5X2AsI4qAyD5uRWEoI1xc2ck5JVKqeTZPvVwiRLyQp1x1MDAwMrpcdTAwMGXG2te4dW9cdTAwMTGOKkFcdTAwMTQ5KqPx04fQW6f21HOXlEo/tpplJk5O9XW9XFzz5e6yeyrHXHUwMDFjT1x1MDAxOUFMYlx1MDAwZeFcIsNcdTAwMDCEdOzDkYjUklx1MDAxMmDPm8ii7ErrvHvX5lx1MDAxMlNcdTAwMDHiqDpLXHUwMDA1fGlcXHX8o1x1MDAwM3Rx4UNrJGmM8enDqiq3dvfDm1x1MDAxZF1vymr3MvhQqvpmtsLH4vgqRUnlUKGZNMo+XHUwMDA3avg2S8GIozVFSYNcdTAwMTRcdTAwMDFkXHUwMDE2RfNjq9xcdTAwMTBHWSdcdTAwMTSA0VvTvFx0XHUwMDFi7iBcdTAwMTNcdTAwMDVqn+oh7TrQrL9yaiTmhtd43Fx1MDAwN1+Iu45Zxc9cdTAwMDE4t3Cd2lt31zuNnb1bV1x1MDAxZl/pfr9zXHUwMDFjnFx1MDAxZpr9ZVx1MDAwZq2KO0rZKVx1MDAxMeuvOlWHi52VY9RcdTAwMDP0JFx1MDAwZZpcdTAwMTIqnuWtXHUwMDBmRfmc0KpcdTAwMWNcdTAwMTR3qGONQHVl1ySPuirTjp2HQkuJoExcdTAwMTgyqqwk2FuDXHUwMDA0vEJsfbqzrjxcdTAwMTSp19xO5yzCLtdcdTAwMWXn9NBqv/JQ2Uu6Wbvxvf5GXHUwMDFls4pftiRcdTAwMTZcdTAwMDPAeplnbf75a+XXf1x1MDAwMfpa2G0ifQ== events.Key(key=\"T\")events.Key(key=\"e\")events.Key(key=\"x\")Message queueon_key(event)Event handlerevents.Key(key=\"t\") <p>When the <code>on_key</code> method returns, Textual will get the next event from the queue and repeat the process for the remaining keys. At some point the queue will be empty and the widget is said to be in an idle state.</p> <p>Note</p> <p>This example illustrates a point, but a typical app will be fast enough to have processed a key before the next event arrives. So it is unlikely you will have so many key events in the message queue.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPbOLb93r9cIpX+8l5Vi1xy3Fx1MDAwYlxcXHUwMDAwUzX1yrvlxI5cdTAwMTfF25splyxRiy1LskSvXf3f50JxLGohJVlL5ExUldgmaVx1MDAxMCbP3Vx1MDAwZi7++u3Dh4/RUzP8+I9cdTAwMGZcdTAwMWbDx0K+Vi228lx1MDAwZlx1MDAxZv/wx+/DVrvaqPMp6Pzcbty1XG6dKytR1Gz/488/b/Kt6zBq1vKFMLivtu/ytXZ0V6w2gkLj5s9qXHUwMDE03rT/z/+/l79cdP/ZbNxcdTAwMTSjVtC9SSYsVqNG69u9wlp4XHUwMDEz1qM2j/7//POHXHUwMDBmf3X+j82uVq2HnWs7R7tzU6D7j+416p15XCKR4tOye0G1vc53isJcIp8t8WzD7lx1MDAxOX/oY+FY1pu721x1MDAwN42709rGTqV1+bTXyHTvWqrWakfRU+3bQ8hcdTAwMTcqd63YnNpRq3FcdTAwMWSeVItR5fszi1x1MDAxZH/9vWK+XeFcdLyebjXuypV62PZ/u3w92mjmXHUwMDBi1ejJXHUwMDFmXHUwMDEz4vVovl7uXGbSPfLIP2VcdTAwMDBFYFx1MDAxZFx1MDAxOaW1QjSWXk/7XHUwMDAxMnxSKyc0WWONUYawb25rjVx1MDAxYb9cYp7b76Lz6U7uMl+4LvNcZuvF12uiVr7ebuZb/Lq61z18/6tcdTAwMDOSioxUyqFcdTAwMDDFd3u9pFx1MDAxMlbLlci/XHUwMDE2XHUwMDBiXHUwMDAxSJJSW5RGQXe27bDzZow2xlxup8zrXHQ/hWa22IHHv/tcdTAwMWZsJd9qvjy/j52pxqbvf9yIYav7y3fNYv5cdTAwMWJcdTAwMTAkXHUwMDExgjZcdTAwMWFcdTAwMTGlfT3PeLvmk/W7Wq17rFG4XHUwMDFlgp12lG9Fq9V6sVov9/9KWC8mnKnl29Fa4+amXHUwMDFh8TT2XHUwMDFi1XrUf0Vn3JVWq/FQXHTzxSEjJ55r+uG6wuQ/3e8+dOHT+eH1+3//MfTq5HfqP1x1MDAwM2+zO9xv8a9//zGZXFzHxbZPrqU1XHUwMDEy/VvrXHUwMDAyZJRgXHUwMDE3XHUwMDFmt+uHNbm/cqLXilLKp1P8urX0gk1cdTAwMTiAQaeVllx1MDAwNqxm+e5cdTAwMTVsXHUwMDE5KFx1MDAwM1JoaYGUk6J/arOTa1xmLFx0x4IpXHUwMDE0KiMsdoW2K9fGXHUwMDA1pNFJLdFcYsDYbL7LtZaSQHfVzy+5/oFynfxOO2f73+aEct1cblx1MDAwYtE3VFx1MDAwZlx1MDAxMW5cdTAwMGKq/+h34TYgyFkruiBcdTAwMTkl23pcdTAwMTez6vhuf0tcdTAwMWWXXHUwMDBln45WN6urXHUwMDBme2+TbdmPwe+/126w0zJbmy1VQGCsklpb/qe74uJHXHUwMDAwZ1x1MDAwMudcdTAwMDRcdTAwMTFYh85p0zeziUT7d1WgsKSVXHUwMDFhYrCpK1x1MDAxYa+SbFx1MDAwN0TXXHUwMDE5XCJWMNrNXnRfcfVXXGZ9L6/2+jS7cnZcdTAwMWGFZ1x1MDAwZW9Xwp2zbPSw1vxcdTAwMTiH6SveovAx+vh64u8/foZhe67+Y9xcdTAwMWJ2h/0uqDNUjqky3zPPmLhcdTAwMWIjksRdXHUwMDFhUsiuKcmx5T39MS+tvFx1MDAwYpcm71xiJlCzkvd0XHUwMDE3XVx1MDAwZpF4wH6JZ/3EXHUwMDEzVSrmc4wt8m3/w6KtdalRj46qz/7Rg+g5upm/qdY6XHUwMDBm+fVwXHUwMDA3qT7mvfdzXG4+hU//c1x1MDAxZD79819cdTAwMWbDf3383/izbYdcdTAwMWRcdTAwMDeV5+d6fnmlVi3XOyEjXHUwMDBmXHUwMDEwtnpQXHUwMDFmVTnGfb3gplosxq1ggWeU5zFb2XGsV6NVLVfr+VoudcJvt8RSOpckmyDY9+T34cZcdTAwMGagm0BQyX6y95VTKp5+NjuGtnaWXzalXHUwMDBljJLkUKFjV1x1MDAwN/pssVCBs8ZZJVxmsG+ippHN6W0xsVtG1mo5uWBOY4tLXHUwMDE2Tyh7sEVCXHUwMDFlZTZcdTAwMGLbUT17tT290fwvXHUwMDFmdpSJXHUwMDFmfsPlM/FSxtI1/TZeXHUwMDE44jBC4vg+ffpzXl49XCJS9VxiqkDNSo/MxMZrhWTi7+W/wcQ/LtrEjzCKI03845QmXHUwMDFlY2++XzSVcFx1MDAxY+lrM777fWLv7k5LVXyqf3Lbd+XqMUVN/Vx1MDAwZURTXHUwMDA11pJBpYXSZGLa6ttcYi4wXHUwMDE2vOdttXFcdTAwMTLtNLI5vY2X6KQlqWBcdTAwMGU58DT7tpYt3lZutrPQus3kSoXyVrNcdTAwMDJcdTAwMGbTm81fw85j2FG+w/BcdTAwMWIuoe9cdTAwMDAmMVx1MDAxZFxiXHUwMDAyyLDcqq5uXHUwMDFlpaDSn/PSKijWQGlcblxuXVx1MDAwMDNTULNwXHUwMDFlkDg45Hm8ISX4jp2HaNHOw1xiczvSeYimdFx1MDAxZYSEJNmUvqpsSajx81x1MDAwM6JcXCg+fd543nzOrZ6a1np0YrYuXHUwMDEzZLPQarTbmUo+KlQmrsXNXFw+Ob5cdKRcdTAwMDGSTrGEOid7xVNcdTAwMDdWXHUwMDBiw+60clx1MDAwNlx1MDAwNcr5pe/Yq1xiWFx1MDAxMtBnTaWMXHUwMDE1Sbt1OFx1MDAxMoFlh0YpQuzUXHUwMDA2+0WXWMU4K/Fcclx1MDAxOYRpRJescjSB6L5cdTAwMWS1XHUwMDA2XHUwMDEyXHUwMDEzzmA58lwimKB2/PDl7Ph+t+lobbN+vXffzl2VaDdcdTAwMDGzfbj7cWjFwFxuzViUgpW0xD6wXHUwMDAyaTYhPi5nXHUwMDE42XmCXHUwMDE1XHUwMDAzIUn74rU0zlxmMyw2IFx1MDAxMqhYj1x1MDAwMCFcdTAwMDNlXHUwMDAwrdJcIlnygcpyW5pUuIa1WrXZXHUwMDFlXG5W0olMXHUwMDA3p4W39+P7Puu3bq0sXHUwMDFh1fUoV6GV+pdqWTxfvVx1MDAwNauL83wk6MBcYumENlx1MDAwNlx1MDAxND952Vx1MDAwM1apXHUwMDAzjUaQY8xqXHUwMDA2K01Fcvi9lNegYVx1MDAxMKksMEpcdTAwMDBoR+xxgoonZ16hKiHQRMqxUlx1MDAxNYBcYjFcdTAwMTftO1RcdTAwMWRJY1x1MDAxNDtoPydUjUgsXHUwMDE2+EJcdTAwMDJpJeT4Sb6TxtZOY2vvYHf/5jh7lFx1MDAxN7lneX605GDV4K1vJzRX6ND2eekqQKk1Y4RcdTAwMDVcdTAwMTdcZsXM3dvAeimEnlx1MDAxYljRSkOCZe8nXHUwMDA1KyWnvdjYgEOYgGWSoULrRu+F1fPTs8v80VWrjodPS1x1MDAwZVYrXHUwMDAy0pbh4Yz3XHUwMDA2bS9WkVxyL1tV7SyHcYyT6VJeXHUwMDEyLtmvmlx1MDAxN1ZZliSHxPie9Wqqx0o6UbNqUFx1MDAxMlmnjFx1MDAxZmWd5MzVYSV/U9k938k837ab1y6iXHUwMDA0rL6V7ThztIKgXHUwMDAwpFJAXHUwMDA2vVbqJTFLclx1MDAwMTgvs6y1PMV5jlxcRyNcdTAwMDPHYZZX4GRUTD2+XHUwMDAyVstcdTAwMDDNNzWPXG6MjnHQvytX45xcdTAwMDWcS23l5cTQJOP9cVbVVm+fNr82M/fb59tfT7ZKZ/NMMlx1MDAwZb9hd9iX7354klx1MDAxMZO9bClYN1x1MDAxMlx1MDAxODF+TJj+mJc0x1xiUqZJmKFAWWG0L1xisveC81x1MDAwYlx1MDAwYpFGSlx1MDAxOFx1MDAwZZhcdTAwMDBcdTAwMDaLs07rd8hH8sszXHUwMDE4Y2jIXHUwMDAya1x1MDAwYqN7LkpJP+aGplx1MDAxYVH0XFz4mkmshaVe6E+WaEw3XHUwMDFh/YnG3Fx1MDAxNElFJWWSLJJcdTAwMDEhrFx1MDAxNuOHvMeZ6PK2urlXOz0pn12VVk4zN/nscjtmLFuBJasth6LaOWN7ef3SYoDs7CiUgFx1MDAxY/xOtVxc56VcdTAwMTY5xDEzgWGnT7BMKVx1MDAxZrfi8OSMXHUwMDEywnFIKzTH6U5cZjpmyidtOEpZbqlMxWryXHUwMDEylORo11x1MDAxYZRKqFx0XHUwMDAyiIddsV68P195PG89Xrebh1FUeWjN2Cmby9oy1tVWO4UgjZZcdTAwMWPi92BVkVx1MDAwZZBDXGb5Ld6FfiFasqVlUmhfTsS3xLy/1qB0zv1cdTAwMDRryyhZsI2w1lx1MDAxOFx1MDAwYuPzYS42L53UT7BfrFx1MDAxZcv1c7neLlx1MDAxZp4svVxcXHUwMDEz+Fx1MDAxNaPgWIU5xyFMb9LVSzU/dDZR5Dx+xfyoalx1MDAxOEjl2CfloE5rXHUwMDAwXHUwMDE4YoX8UiQgskpY9lx1MDAxNy1cckg1O1fOL2Waw+qUX0LtP5MuLEt4pZ2T/S9zQplcdTAwMWVBdVOJnqVcdTAwMTRoXHUwMDA1mHh9YZRor+7fXVx1MDAxY8r26flDTWy3rlx1MDAwZlx0sVx1MDAwMctcdTAwMWXlZVhjXHUwMDA2noPKVpmkYC+lN84z2lx1MDAwNb6K7UChXHUwMDE22s3Cu5yG6SZYs/ty5IKZboXWYeZi5XRtu1x1MDAwNNW7jWN+zc/H+9OTvH5ccjuPYUcloYbfsDvsd82yqIhcIpnpZm3/4S6bXHUwMDA2lNPG2lx02lWkPufl1U8yVT9ZXHUwMDFi0Kz00yyIbpI9VH415i39KH505uk90eRHWNu50+S1SF7B4pRcdTAwMTakXHUwMDEwx09LRe58y17WWpXN58+5q0+5i82tKImJsUyyyY4/kSSQVkiUvYkpPlx1MDAxMXSWt4DlmExN10dmetfBXGKNPnhcXLDnXHUwMDEwfn740l5dfb4o7aysRcdcdTAwMWKHub3bcHqj+WvYdzTsKIdk+Fxyl9AhUTpR6ZGViJMszE9/ysur8kSaynNcInCzUnkz8Ua01Vx1MDAwNMLJJc+4z9hcdTAwMWJZOO9+hP2eO+9cdTAwMWUokXfv0Fx1MDAxOHJajC+ZT1dP5d3jXG6gK2Tz+0dcctkw2fz7oN3rXHUwMDAwkP1cdTAwMDF2v1x1MDAxZItnf57SYEBWKOUkkmDJmF+eUmtcdTAwMTlcYoNgXHUwMDEwWVx1MDAxM0DM6YhcdTAwMTHvNV9iXHUwMDFjkTZcdTAwMWPokVx1MDAxOFJ+UKCs027BoYRcdTAwMDGn1Fx1MDAwNML7dty6WGewfthKUlx1MDAxYeI07pFd29a/NL9cdTAwMWWph3ZOZa5lTX6+XFy/uFh25r3HXHUwMDAwaWLAcrTvpO1cdTAwMDMsXHUwMDA0YKywXGZcdTAwMDGNen7VMq1cXKDQovJcdTAwMGLGKL6ONF7cdc5cdTAwMDFbXHUwMDEyy3hGUv1oRY7OeziSXHUwMDBiwapcdTAwMDJQM1slkkJcdTAwMGa1NpFcdTAwMWVcboJDPclcbmV8XHL7aaWZrZePi5vnj7uVtdrGp690t+QsXHUwMDA0NjGBdVx1MDAxNlx1MDAwMY10IJXp5TIri1x1MDAwMVx1MDAwZqJQa4NcdTAwMWNo4bRcXOZE4r0mzzpSgr84I4d0XHUwMDE2lFx1MDAxMFx1MDAxOKklq1/tXHUwMDFjuXjrk1dcdTAwMWFcdTAwMDKAdKhcdTAwMTesV1x1MDAxN4VVh8mpXHRcdTAwMTZRYmtcdTAwMDPjpybOro4q2Vx1MDAxM1co1Vx1MDAwYitcdTAwMDeZ3U27+1x1MDAxNZeed69cdTAwMDKPUCNAsONDivqwKlx1MDAwM9ZyymotSKrp8lx1MDAxMims+1x1MDAxOSCVpc5cdTAwMTH/XHUwMDE1uGD/fWFQdYlcdTAwMTU4VEJIXHUwMDAxMD7N8su5OVxcKa1cdTAwMWPU90pfi632Sq7cLN4tOVItXHUwMDA0WmhALaxfx1xyXHUwMDAzQFx1MDAwNb8kz1x1MDAxYlxcS1O2Yk4j3c9cdTAwMDCqRiqrLL2BKrM0QFx1MDAxZOGrJrZcdTAwMWSQmpBgolx1MDAxOOvgYCVcdTAwMTNlbr/uPt6b/U+nlXpNbL+xXHLpXCJJ9zbo8Pek0X49f1/HXCJCXHUwMDFikFGsblx1MDAxOcxg5Pz8VTRcdTAwMTSwl+GZhOBLwkNcdTAwMDCrPVx1MDAxMY1naDtsIVx1MDAxMFx1MDAwM/6qNJZxTKRcdTAwMTbMub+9P6jIkthcdTAwMTD7N7vV0+yXyu7Jp+5b6sHjJEnLmVx1MDAwZjsqaTn8ht1hX75cdTAwMWIlvHNPWpJJ5mVcdTAwMDJcdTAwMTkt0NnxbUz6Y17SrCWbj1S5VTogXCIgwYrMoJnjYlx1MDAxOVx1MDAxYSm38VYlL4LK8bFmV1xyXHUwMDE3767Hqkhv5PLLQFx1MDAxYcdxXHUwMDExsNUkNp+q56o0Mn9cdTAwMTh/zHNm84+wRlx1MDAwM2z+cIpcXKWRid1cdTAwMTaMXHUwMDA1/uBcdTAwMDTiWL86XHUwMDE3XHUwMDBlz8zuZeuomTvcKOWz0cZyu3ygfdHU8lx1MDAxN5IgXHUwMDA0qD5Z9JlcdTAwMThAJdnP8vHJVFx1MDAxZV9cbptcdTAwMWZcYtHPQrGDXHUwMDE505DxfI/hXHUwMDBiNMuqRf5ucNFcdTAwMWFcYt/01yyc6eCthptALlOhmsjmd4lcdTAwMGLAQLKDXHUwMDAziGp8mJrjzY2mOP1aKT2stHdcdTAwMTGuXHUwMDFmSup+6Vm/nZ1iiP/zvTbQ8S/0dlx1MDAwNnHCXHUwMDA1gFKC8ett3Vx1MDAxYzeUmFxym99cdTAwMGbgJP5cIv4uXHUwMDA38fdcdTAwMDex+V1ipYyjXG5jhJ2gJ8Xh5Vx1MDAxNT5cItjbp88n7UyYscfl+vrSyzVh4Fh/WVx1MDAwZehZtEH0eoNeqn3mRYBcdTAwMDZcdTAwMTNfXHUwMDA3O3suv7K+14+z7Fx1MDAxNzlcdTAwMTVPxCWS+c1ghVtpYJy8qS/FL6nunJsxnT/prXbOXHUwMDBlvM9cdMU6vVxmTsmdvKTfzcw5sFx1MDAxM3ScuXiWpcszudW42C192s/WcpWd99G7Vvt9kzjqY1x1MDAwZlxydN/CbemMX4PnwDdQ0qzyZuBhTkHLXHUwMDAz4djnXHUwMDA1WjAtb1/kLteal+p0o3L7eFx1MDAxODZcdTAwMGJPutTtstxcdTAwMDO5SbIwv4b9NeyoxNnwXHUwMDFidof9rlx1MDAwN2dofFJValwi209TYubMt4OUksZffJD+lJdWl7IvlKZLwVx1MDAxN8VnpUtnwvdcdTAwMTNcdTAwMWOzcyxml7xLV/fFv0++31xi12BcdTAwMDF8v+RilFG+i9dcdTAwMDR+XHUwMDBlbd5dXHUwMDE3zvbWqfglX4n29s/3dlx1MDAxM1uWLlx1MDAxN99cdTAwMGZE4FxmXGKjhe9MKmNdsTqRjPeE/Fx1MDAxZbdW+35mMD82rla+RYe0VnC8KmxM+mJ0P1xiXHUwMDFjz5M0XHREgYP1KIlcbv062Fx1MDAwNYuu8f06ZmVL0iuoyV3LJOtQ313WjV9B3dws2Mdy9sneX8rdtdXSefnpxC053Vx1MDAwZnyvZd+e1oKxMr4v6je8YmB8/zZcdTAwMGXBnW9cZjlHvFJcdTAwMDDI01CgXHUwMDFjuWHL6MFcdTAwMDZcdTAwMTZcdTAwMDU4w+FcdTAwMWNcdTAwMDdxclx1MDAxMK+ao1xiJFx0i6amWICZ4TWNmpKywMuT01x1MDAxY6hcdJrsrWx9Pmt8LbSL5nzncdvIjcuzXFz0XHUwMDE2tC6Qm4K+0Vwi61dcdTAwMDPot1x1MDAxMOjrXsp/f1x1MDAwMM5cbuf33o5b/1k32mV/XHUwMDA2pee/alx1MDAxYq9cdTAwMDHGqSmkpG88pFl76njm/rUntFwiYlxys3By6qKgSoksKraBrN7dXHUwMDA0u9qf4Vnt071dWa3uX1x1MDAxZdRcdTAwMWWbd4XjZpKnvixI1a7TXHUwMDE23PBLVtag6stoXHUwMDAyXHUwMDA2orPNXHUwMDE2P1x0RtN0O/KltdmdXHUwMDAxVFx02Vwiszgtmke1IKhKkbJTu2CsXHUwMDAyXHUwMDFim/FcdTAwMGJra7dnj2H2aKNw0FxcvTtcbqN2e+UmKVx1MDAwMb8sYLXsK7K2s8Yho9U521x1MDAwN1ZcYpRU7Eii9WCdikSV2md3XHUwMDA2YDVglVx1MDAxNvGC/ftcdTAwMDNrusuarFn5PVx1MDAwMitcdTAwMWRN41x1MDAwN1rR7v6FuSiXTu7yrvX5oZy5XFw3XHUwMDA3S0/665CHtGVb70j5/d178CqFsYHjqMY3aFx1MDAxMHK69oMjSH8qkMR4XHUwMDA08MyJYYtUtPRcdTAwMGK8wCm/XHUwMDE3sVSDi1RYu0jPXHUwMDFmgDm0hn45MTTJuHef39v7slx1MDAwZke3mYeHwu1D+2v1tjF97vK9XGY7KiU6/IbdYV++XHUwMDFipVx1MDAxM3BWOiFxa3KV2JBcdTAwMDVcdTAwMTjbXHUwMDFjSdP4XHUwMDBiK9Kf8pKmREHadG1gtd9Lxlx1MDAwN4ZcdTAwMWHQzrNcdTAwMTVcdTAwMWONVFx1MDAwN8O4hFx1MDAxY15r86adXHUwMDEyp7NYXHUwMDE4S5a/uS+wY1fW51x1MDAwZXhAXHUwMDE3V7UjuYSPXHUwMDBiJFx1MDAxM46wcoNkwsdp2IRp7F70q7xgXHUwMDAyPkflrPJ8eYqVK5cp5FpHn3dL9XJ5ud1JXHUwMDA2XHUwMDAzXHUwMDA3N563Yp3xLYJVv0D6XHUwMDEyhjWecKuJY/qp/MlcdTAwMTRCIYuWIa2VUsbK2HL0eEZJd1x1MDAxYTmBYdUh41x1MDAxYkl9zyhJQyB/SOwzs/XOibyj5Iy95qjUM9HHhmmzoj+3r0ru6GrroJJTh3hw/by29LSjXGaA8cuZlFx1MDAxM35xiO03XHUwMDFk6L03v+LL75dn58c7mlx0mZA63YTe5EdOyzqahPtcdTAwMWGbx0/NOvoxXFxCflx1MDAxZonuIN/MeUU3vlRHVysnbnPzZrN+9OX86Gz1dOP8aHXppdrIQHg2l187KGz/JvZcdTAwMWShdlxuXHRcdTAwMWRcdTAwMTA//DluxFwi/G5cdTAwMTVcdTAwMWOFalwi8LtFqGE2XGI5WGXH1SpU7Fx1MDAxYmhcdTAwMWOQa09qd7pni/Nfgv1cdTAwMDNcdTAwMDU7k/Ja/WfghU4o2iPK7GmbLfL9/Fx1MDAxMo2x5Xun0ag8rjdk5n5/7aZyer5xXHUwMDFh3W++jzK7XHRYvK1Fllx1MDAwZYfxXHUwMDFkKF9k3O/J6Jv+k1x1MDAxMobN99xk3PcpXHUwMDAxLYxfy2ZcdTAwMDTqYYxhwsDybKzwsZ52XHUwMDAzIaBf1sUgolx1MDAwNW9cdTAwMGVmJbpJXCLAt6PWqcSQXGL4Vfq93cavsl9X7E21JU736qtHxbtnVXu8v3xTgn2xcFx1MDAwNe3/Ut3pKY5cdTAwMDMmSTFcXK3SSrJTXHUwMDAwen6kLU9cdTAwMGLhgFx1MDAwNpTPXHUwMDEzW6GG0EJ8W1x1MDAxZOFcdTAwMTkqwneCwngg8lx1MDAxYVx1MDAxNfl9j1x1MDAwNIpcdTAwMDWnLCa1SKmATeus41x1MDAxMuvsfomCJ++MX1x1MDAwZrpoP118udtsVWBlz62V98rm4K603Fx1MDAwMTzrhYBcdTAwMTHg9SqrWCn7o1wi0lx1MDAwMVjR2fC4t0nYjNvqsL8qXHUwMDFjKE/NxyHrXHUwMDAxfTXIoNDaoensXHQ2WFxyQmfYu47npX4qoDqdXFxcdTAwMGLyPVx1MDAxNk18O4GRXHUwMDFkoGzt881u5ejE1Y+b+TD6VMmJJc808fNcdTAwMGV8Po3YzKPyPn0/Ulx1MDAxNYdcdTAwMDLWOWPQTFu4TGurMz1SwTdcdTAwMDNmQ/iTXCJVxnfY6ocqR8BW9qzaXHUwMDFkzbTbyVx1MDAxZEa3ollcXL9ccq9BrV/Jh+aSY9WpQGnyvo6RxJI7oFUx4JDUNyxjZ9HAdGo1rbHO1GBcdTAwMDVgpLr4XHUwMDFlQ+9cdTAwMGarI2ihKVxcZn5cIuArumOD9TjKStrP5chd01x1MDAxOYX526eVqkhcdTAwMDDrXHUwMDEy1dhd4DpcdTAwMTU1wSGnjL3rb5vag1xiUDFI+Jx05KZSrSNq7DqQ7GyA51OzN+KGRFhaXHUwMDA27KZ4rq5veyjt4EJr3+uCT8/DY305MbRsfV3BXHUwMDFjfcpcdTAwMWTa7fVjzK5uhZtccnszfTX8v3zYUbX74TfsXHUwMDBl+/LdwnRNYlx1MDAxZiCZzOf1IZiRQo+vZtJcdTAwMWbzslx1MDAxNu9BpatcdTAwMTlcdTAwMGWcXHUwMDE1XHUwMDA3rEJcdTAwMTjfXHUwMDFicY5qhkarmSHFe3ROk1Y/YvvQN+Vme1x1MDAxYlx1MDAwMVx0tvNGKfZcdTAwMDaI/1xi6rkqvXhcdTAwMWbFn/Scq/cj7OeQ6n00RfneQvJcdTAwMGVHXHUwMDE2pfKZj/EzrNnzfFttnn2l/f1wd0OYnZvPoV1uR1x1MDAxNYVcbsjvU+1cdTAwMTe/KG1s31xuQ41s+i1pY3zLrFx1MDAxZVx1MDAwZeaM+1x1MDAwMVx0XHUwMDAyo3zlnuLNe+OJKl+0l4o/woe6XHUwMDAzjqpB1Fx1MDAxNlx1MDAxMN5FUPXbi0X6mG82j1wiXHUwMDFlkk9/gy7Pulp8kdruMFx1MDAxZu+r4cPqsEC18/FcItBcdTAwMTFcdTAwMDBcdTAwMGay0M/5r79/+/s/t9XlXHUwMDAwIn0= events.Key(key=\"e\")events.Key(key=\"x\")events.Key(key=\"t\")Tevents.Key(key=\"x\")events.Key(key=\"t\")Teevents.Key(key=\"t\")TexText"},{"location":"guide/events/#default-behaviors","title":"Default behaviors","text":"<p>You may be familiar with Python's super function to call a function defined in a base class. You will not have to use this in event handlers as Textual will automatically call handler methods defined in a widget's base class(es).</p> <p>For instance, let's say we are building the classic game of Pong and we have written a <code>Paddle</code> widget which extends Static. When a Key event arrives, Textual calls <code>Paddle.on_key</code> (to respond to Up and Down keys), then <code>Static.on_key</code>, and finally <code>Widget.on_key</code>.</p>"},{"location":"guide/events/#preventing-default-behaviors","title":"Preventing default behaviors","text":"<p>If you don't want this behavior you can call prevent_default() on the event object. This tells Textual not to call any more handlers on base classes.</p> <p>Warning</p> <p>You won't need <code>prevent_default</code> very often. Be sure to know what your base classes do before calling it, or you risk disabling some core features builtin to Textual.</p>"},{"location":"guide/events/#bubbling","title":"Bubbling","text":"<p>Messages have a <code>bubble</code> attribute. If this is set to <code>True</code> then events will be sent to a widget's parent after processing. Input events typically bubble so that a widget will have the opportunity to respond to input events if they aren't handled by their children.</p> <p>The following diagram shows an (abbreviated) DOM for a UI with a container and two buttons. With the \"No\" button focused, it will receive the key event first.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1bbVPa2lx1MDAxNv7ur3C4X3pnarrfX85M54yioFSxVk+tPZ5xYlx1MDAxMiElJDRcdCDt9L/fXHUwMDE1UFx1MDAxMt5cdTAwMDIqcHBu80Eh2eysvfZ6nv2slZ2fW9vbhbjXclxuf2xcdTAwMTece8v0XFw7NLuFt8n5jlx1MDAxM0Zu4MMl0v9cdTAwMWVcdTAwMDXt0Oq3rMdxK/rj3bumXHUwMDE5Npy45ZmWY3TcqG16Udy23cCwguY7N3aa0Z/J36rZdN63gqZcdTAwMWSHRnqTXHUwMDFkx3bjIFx1MDAxY9zL8Zym48dcdTAwMTH0/jd8397+2f+bsc52zWbg2/3m/Vx1MDAwYql5nODxs9XA75uKOUKcMCT1sIVcdTAwMWLtw91ix4bLd2Cxk15JTlx1MDAxNXrRt6vuXHUwMDE34pu8yI/l/snt58reSXrbO9fzzuOeN3CEadXboZNejeIwaDiXrlx1MDAxZNeTu4+dXHUwMDFm/i5cbsBcdTAwMDfpr8KgXav7Tlx1MDAxNI38JmiZllx1MDAxYveSc1xiXHLPmn6t30d65j6ZIcVcciQ0JZprLDVVw6vJ77UhMeJcdTAwMTQrjSTmmo3bVVxmPJhcYrDrP6h/pJbdmlajXHUwMDA25vl22kZcdTAwMTFL48yYu4+jVdRgjFx1MDAxMlwiwVxmqlx1MDAxMeHDJnXHrdXjpFxyIYZCTCjJXHUwMDA3t8qY4vSnhGtFqVx1MDAxNul8JbdvXHUwMDFk2f3Q+GfcoXUzbD04rlx1MDAxMCVfMqYnVlx1MDAxZozHVTa2MpNOxFWl7Fx1MDAxZlQ+fyzvX1rfj3ul8/tw2NdIIMbOfVxcXHUwMDE4Xvj19ne3M7tcdTAwMWRp/XbRXHUwMDFiLmituL+6b1x1MDAxZvPDkPpnJdwrnXlfet3p1pphXHUwMDE4dDP9PnxKo6ndss1cdTAwMDEjYCEoSyiDS8SG1z3Xb8BFv+156bnAaqQkspUxeIK7RsafIS5G0fjZR+JcIohSXHUwMDA0WOApiOZcdTAwMTFX/vRtKnFplENcXFx1MDAwMlx1MDAxOVx1MDAwMlx1MDAxMyBcdTAwMGLBXHUwMDA2zPVcdTAwMTLiikPTj1pmXGJ8MIW85HzyXCJcdTAwMTNkRVx1MDAxMJFMJ3S2fLrKj05O5Vx1MDAxM6IzXHKCwI/P3Vx1MDAxZv2lUVx1MDAxOFx1MDAxYyuGiIBBaI24XHUwMDFjaVUym67XXHUwMDFimdd+XHUwMDE4g+W7rdab/2ZdXHUwMDFkOWDCYLlcdTAwMWRpvOu5tSTOXHUwMDBiXHUwMDE2XGbKXHRHIFx1MDAxMLsgXHUwMDA0hlxymq5te5lwtMBcdTAwMDJcdTAwMTP6XGaPXHUwMDE2WZOD0K25vuldjFx1MDAxOJhcdTAwMGLJXHUwMDAxJUzBpFwiszGJwfGYscyiNVx1MDAwZpP5JLWhmKRSXHUwMDFhhDIsZKJcdTAwMTVENjL6XHUwMDFkMGJwwCsgUilBJScrQyU1XHUwMDE0cCSTQlxugShXelxuKqk2XHUwMDE0xVopLjSGcJ5cdTAwMDAp5lxcwigofjpG+6Y+XHUwMDFio09bQTJ2mGG85/q269fgYrr0ParkRTDRR7HVTqzcXHUwMDAxhlx1MDAwNYBzjlxiU8BcdTAwMWNEZFx1MDAxYdXMVlx1MDAxMvRcdTAwMDZcdTAwMTeKSFx1MDAwNbHNlCZYPDRcdTAwMTiuwFx1MDAwNce355tUvPlcdTAwMDbS8NI8s8t2T/rt3a87++VZJjGsMdZIYyqJXHUwMDEyRLFcdKswg+mHmcNEXHUwMDEzglx1MDAwNPydMMszo7hcdTAwMTg0m25cZs7/XHUwMDE4uH487uS+N3dcdTAwMTO011x1MDAxZNNcdTAwMWW/XG7Dyl5cdTAwMWKnhVbS46h4TD9tp7Dpf1x1MDAxOX7+5+3U1juzozk5JuI47W8r+39cdTAwMTajhY5cdTAwMTVcdTAwMGbwPIXVXGK4eFx1MDAxNq1cdTAwMDGSXHRcdTAwMDaxsbjSyJ/nXHJlNaKUQSVcdTAwMTJIJ1x1MDAwYp5iZIzVNJBcdTAwMWWiSFx1MDAwM2q1TtbF1WlccpHOxZDGVKp8XHUwMDFleFx1MDAwYphVipHVZi2pkGp8iM5kpV5FOLBkLL+dWl9PXp5cXHjNXHUwMDFmn2/+wlx1MDAxZr2DYlxye3Xkur1ytJhcXM/t97LyudM9ZvsnxyG3yz3SJmxfLKFfcmlcdTAwMWZcdTAwMWSWXHUwMDFh1onaZfii6Z1cdTAwMWX4X2tL6HdF7n1d3TbE5VGn1PqEb9pRvdHhJXRXtf/vnPuCXGZ2vebOy+On33BBa0vlxoUon3+7u6yfdSp+3Tv+XHUwMDE27CzBXHUwMDBi91fki/zavjmpoHL5XHUwMDE2k2bN6Z0tqT7AJFx1MDAxMZCOrro+QIhW46dcdTAwMWZXbYq51ELRxXOR/LDY1FVb07xVXHUwMDFiUjJDrmnV5lNW7Uxq9LBqKyk4XHUwMDE4K+g6K1x1MDAwMkxohTR6QjxOr1xiLFpcdTAwMDEoPqbnb6795IJrv79OKvReULsuXFz704tcdTAwMDOZPHGkOOA5d6PR/6TSwFx1MDAxYy06Xlx1MDAxYZhr+fM1NkWKzkIrRlxcI0GzYTFcdTAwMGaunVx1MDAxYoJlLf7c2bPo0W3ZP2qflXv/Llxc+Ty0YkFcZqIxpDmSUsGoXHUwMDFhRSucMrhmSlx1MDAwMVx1MDAxMFx1MDAwNWFMrlx1MDAwZaxcdTAwMTkwpFx1MDAxMluMg5VgjDBkY5lq31o09sVheFOMnfaN3K1Wrq7qny5+XHUwMDFjfvitsZelsVfk3tfV7ao09uvywqo09uvygqf3iuq2XFxkRSGc84tcdTAwMGb3tVJpg72w/JRgXlx1MDAwNjN9IGm3XHUwMDBmn3JcdTAwMTSYwpqwpyiwXFyhMSsjoCSjcMc1XHUwMDA2wVRRgejiXHUwMDFhI3/+NlVjyHyNodelMdRcdTAwMTSNISc0htKYScroXG52NMxcdTAwMGJH/IRwfFlCsNeO48B/k5xcdTAwMWLo6uvClVx1MDAxM11cdTAwMTfeXHUwMDBlvnXM0DX9XHUwMDE4pHbUtixcdTAwMTjd7CxBjna+pCxhjphcdTAwMWXPXHUwMDEynjecXFxE56dcdTAwMGV49lNHjFx1MDAwNYQ8hPvimf7ljYjrxdZt1W+ffqrY9ztcdTAwMDeXZ/VNz/SpVlx1MDAwNoaoXHUwMDE1QkHSz4SczFx1MDAxZJCAbjjTjJOV7lx1MDAwNVgsecCISkQ5ZWtOXHUwMDFl0MfK4Un7qnL48axcdTAwMTL39lx1MDAwZXo8OPF/J1x1MDAwZstKXHUwMDFlVuTe19XtqpKH1+WFVSVcdTAwMGavy1x1MDAwYqtKXHUwMDFlXpdcdTAwMTde8DjhmTnJ9IGk3T58yntKwUEkp09cdTAwMTBWlpPgmTlcdFGCXHUwMDEzQcjie1x1MDAwYvKnb0O1XHUwMDBiQzRfu+i1aZdcdTAwMDWTXHUwMDEypSmiXHUwMDAyr0C6LDNcdTAwMWWXnpRUgylcIt5cdTAwMDG8huvOSOZo9Fx1MDAwNTKSeWPJXHUwMDA188z9j1jJmc9cdTAwMWMx0kJLxjPhPVx1MDAwZs75tLmhcKaKXHUwMDE5QiCtklx1MDAwMoLi2YpK/6Gjklx1MDAwNlx1MDAxNZJizYHeOFErrDFgXGaWXGJGXHUwMDE4p5RQwtkkulx1MDAwNTe45lopRGjyglx1MDAwN1x1MDAxZFx1MDAwNztnyXNi8ZyNRM/fXHUwMDAw+Vx1MDAwMrAvuFx1MDAwMXLh3YbIYJgqrFx1MDAwNeVIJvOVaTPYaUhcZlxmPoZlilxuLlx1MDAxNOTakztcclx1MDAxN9pcdTAwMDCZXHUwMDBm6lx1MDAxMZO4XHUwMDEwyVx1MDAwZUBcdTAwMDSrXHUwMDA1pJFcbk/YXHUwMDA0M4+0XHUwMDA0vIE9SMBcZuNcdJte0+7H2ZGcXHUwMDFjXHUwMDEzMZx2t5X9/1xmOpstTmBcdTAwMDKoktn8fVx1MDAxZZvlXHUwMDE3pjeVzSQxINDAXHUwMDEzXGYpxHXqj1x1MDAwMZkpQzCMOaeKXHUwMDBi/qJXw+ZQXHUwMDE5NVx1MDAxOMijxFx1MDAwNM4kKKUpVEZcZlx1MDAwMcJcdTAwMDR0iVJcdTAwMTIxltnv/Vh0oUpcYs1AvKyXzJgmXHUwMDE5sfQvktlcdTAwMGVQXHUwMDA3lVx1MDAwMCTMQEpKJsgkdYCjKbhZUVxuLCM0aM7n0Vl+1XTMqMQmXHUwMDA07UEkSEz0hFEw/UQgcCeiXHUwMDE45CdWr5rOdmaHc3JMXHUwMDA28lx1MDAxM1x0LbdcXCwzr7OOcVx1MDAxYeeYwaLCXHUwMDE3L1x1MDAxNvNcdTAwMWatfetL7XDvwlx1MDAxM7FC3S46vmttOqdcdEZcckWJgHDjXHUwMDEyKzZZK9ZUKFhQYGXNvlT2nPddmSWcO87YJKVcdTAwMTGR9pxcdTAwMTaKM1vQXHUwMDFlOEtCqqVhTp7xXGJoXHUwMDFlZ1xyw2pKyaLt69L9j6/V71cq+u53j3ixcVJ9eSWkKE87ptM+/G7+1Y0vT2k1qsYzXHUwMDFl+i6pXHUwMDEyMn0gabePiJrN36BcdTAwMDKUeMrjsFxccM6qhEiSkzrBIVx1MDAwNVx1MDAxNotcdTAwMDMzf/o2XHUwMDE2mCpcdTAwMGaYmsHStCRg5qpccsKnQJNMpEZcdTAwMThcdTAwMDNXcs7Uup/OPjFcdTAwMWPTWU9cdTAwMGIhmUeGI4WQdJCPhVx1MDAxMKeT2GR8cHpvXHUwMDFhTu/9deHiujDjXHUwMDA1Tj3y46W9wDlnkVx1MDAxOa92TDd4gMmtXHUwMDA3oFx1MDAxN8xW6zxcdTAwMDa/XHUwMDBlXHUwMDA1XGZMnWs/OCf1ZaHjOt29Kbx+1z+SXvs4T1x1MDAwMOUkXHUwMDEz9/PX1q//XHUwMDAxXHUwMDA3vCMgIn0= App()Container(    id=\"dialog\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")events.Key(key=\"T\") <p>After Textual calls <code>Button.on_key</code> the event bubbles to the button's parent and will call <code>Container.on_key</code> (if it exists).</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXG1T4spcdTAwMTL+7q+wOF/2Vq3ZeX85VVu3XHUwMDE01PXdVVddr6e2YohcdTAwMTBcdFx0Jlx1MDAwMcSt/e+ngyxJeFx0iODi3U1ZXHUwMDAymaHT09P9zNOdXHTfV1ZXXHUwMDBiUadhXHUwMDE3/l4t2Fx1MDAwZpbpOuXAbFx1MDAxN97H51t2XHUwMDEwOr5cdTAwMDdNpPs59JuB1e1ZjaJG+PeHXHUwMDBmdTOo2VHDNS3baDlh03TDqFl2fMPy61x1MDAxZpzIrof/jf9cdTAwMWaadftjw6+Xo8BILrJml53IXHUwMDBmnq5lu3bd9qJcdTAwMTCk/1x1MDAwZj6vrn7v/k9pV3bMuu+Vu927XHKJekKiwbOHvtdVVWpMJNOc9js4YVx0Llx1MDAxNtllaL1cdTAwMDWF7aQlPlVwS+dccr0vNre3qvdRdHrepHf1teSqt47rnkZcdTAwMWT3yVx1MDAwZaZVbVx1MDAwNnbSXHUwMDFhRoFfsy+cclSFdjxwvv+90Fx1MDAwN1x1MDAxMyTfXG78ZqXq2WGY+Y7fMC0n6sTnUDI+06t0ZSRnXHUwMDFl4lx1MDAxZVx1MDAxOFx1MDAxYlgozjiTQlLBkvF2es1cXCiKNSWSQC86oFnRd2EmQLO/UPdIdLsxrVpcdTAwMDVcdTAwMTT0yklcdTAwMWZFLI1To27/XHUwMDFjr6JcdTAwMDZjlFx1MDAxMEmJplx1MDAxYVx1MDAxMd7vUrWdSjWK+1x1MDAxMGIoxISS/OlSKSPZ3UlRQlDCiEh0jK/f2Cl3neOfQZtWzaDRs10hjD+kdI/V3lx1MDAxY/SstHel5t1sX3ok2tza31x1MDAxMZfhiSutVl3gvqyMK0b2Q1ToN/x4nyf24XBcdTAwMTe7Zpl9uSi192osujQv9uhosWZcdTAwMTD47WnlLkjd31xcbKb3+2kvmIjtvUuctNkom09Yg8GtXHUwMDE54kRwOPrtruPVoNFrum5yzrdqXHQ8raT0XHUwMDFkXHUwMDAyxYyeKUTkaixcIjKlkYbwTHSYhIj5Vl5aRFx1MDAxNLmIKIjBJII5QfLliFx1MDAxOFx1MDAwNaZcdTAwMTc2zFx1MDAwMHBmXHUwMDA0KsrJqEiGUJAqzVxilkLPXHUwMDFmXHUwMDA15+mdiVx1MDAxN/hedOo82l1ZXHUwMDA2x4ohXCJcdTAwMTCRWiMuM722zLrjdjJcdTAwMTPbdWPQfL3RePeftKVDXHUwMDFiVOjK5JnO665Tif28YMGg7CBcdTAwMTNcdTAwMDKRXHUwMDAzXGaj36HulMtuylx1MDAxZi3QwFx1MDAwNJnBzjSrvVx1MDAxZjhcdTAwMTXHM92zjIK5IfmE4iNiUlx1MDAwYjYuJqmG6eaYTc9S8peVJY1JgpBBXHUwMDE0xKRElFx0hjHLxCSh2kCEMM41XHUwMDA355dcXCwsJpGhpeSKgzaMyVx1MDAxMVx1MDAwMcm4QVx1MDAxNVx1MDAxMlxuaU0wk1SKwVx1MDAwMMVUUIlcdTAwMTVHM/CUrqazRiggXGKZJULDyFxmolxyxys7Xlx1MDAwNVx1MDAxYZN17yf5niZcIroxbDXDrlxyXHUwMDExo1xu0JMpXHUwMDAwUoKFZDzVrWI24oXIoFx1MDAxOMGUY1x1MDAwNeingIj3OvRcdTAwMTfggu2VJyvFOo9cdTAwMWN92l5v75OrWqd0XCK+XFw0ySil1kArXHJTg5HATFxizaRcdTAwMWVWXG5TQ1x1MDAxMVx1MDAwNViHOcFYa4yHtHLNMCr69bpcdTAwMTOB9Y99x4tcdTAwMDat3DXnelx1MDAxY+xV2yxcdTAwMGa2wqjSbYOo0IglZilp8m41XHSb7of++3/ej+492pnjY9iNXHUwMDEzYSvp13FoXHUwMDE22Fb0XHUwMDE0zCNcdTAwMTCNUDpcdTAwMTbSMIQvl1qpXHUwMDA0KiZhWv4kLymmQXppYIUhX0GUUKF1lmdcdTAwMTCtXGZCMSyGXHUwMDE4QStTfECzOfJcZpFgVFx1MDAxZseUXHUwMDFhwi2CtITVJoV6r5Jfbd7W6N3mbadxb53csk7rlG6ffVre/Opi97zV3melg/2Al7c7pElYScxBLrko73zaqllcdTAwMDdqneGzunu06V1V5iB3QeZ9W2Jr4mKntdU4wd+aYbXW4lvo9rD8x7hLLfaRblx1MDAxZu/fsiNyXiu5XHUwMDFi9p44q1x1MDAxZOzOo0Bycllj1YOz/a/0+HHnq/ulxYLSi+ROKlx1MDAwZYw2UFwi9ueCm0PuuEB44cVcdTAwMDFC2fhlWyhcdTAwMTmTXGKS5J2Tlu18v1jWZZuSvGWbXHUwMDAyRZSvtGzzXHUwMDExy3YqZe4v20RLyqRIxvtcblx1MDAwNVx1MDAwMaZcdTAwMTTCXHUwMDFhP8MjR1x1MDAxN1x1MDAwNKYtXHUwMDAwXHUwMDE0f2bn7669uMEpf7yOK/+uX7kuXFx7o2tcdTAwMDOcZOT0U3/Xvs36/7MqXHUwMDAzXHUwMDEz2OhgZWCi5rPTbHDG8fc3XGLTXGLy0OnD9ZN9ZNPHc+fh6/bxSXX7xrNcdTAwMWXto19cdTAwMWKufGK0XHUwMDFhXHUwMDE4XHUwMDExXHUwMDAx2CgohFx1MDAwMYCTyEQrXHUwMDEz3Fx1MDAxMMCyIVx1MDAxOedap1x1MDAwYlhzXHUwMDBmVo2Gg1VcctdcdTAwMDY0xZhS9dr3ME7XnMvS/tq3b0FJ31xir3VPXHUwMDAzbP3h2PPi2Fx1MDAwYjLv21x1MDAxMrsojv22rOBeXHUwMDE2vfXO1n2FXHUwMDE3afXIosXjqIh+PyvojaK62S6yolx1MDAxMPbp2d5DZWurvbxWWFSqMXd1J2VcdTAwMWGjL5iI7b2bJ6/LpS/jMlxySphcdTAwMWE8nTBcdTAwMTeluKY0YbqTmEu+mZeTuYgsc8lmXHUwMDE5TKLX4i1qXHUwMDA0b1x1MDAxOXFPQ1NcdTAwMWRXilOT8n+YZGw0o8j33sXnnrj6deGrXHUwMDFkXlx1MDAxN94/fWqZgWN6XHUwMDEx0PewaVkwuvGZh8xcbp9T5jGBoVx1MDAwZmZcdTAwMWWzXHInN54npCNCjlx1MDAwYmrOXHUwMDE44/g5NzLXLiufxVWntLPjXHUwMDFjuvbnzm7n7mHpq1x1MDAwN4RcbkNThFx1MDAxNCVcXGlAuYG4hnxcdTAwMDTBeYw4U9BXysVcdTAwMDX2dFx0XHSDMVx0qVx1MDAxN1A7yKWK+uiIq8+HzZ3L5teaf2Fe3W3JP+nIvNKRXHUwMDA1mfeNiV1QOvK2rLCodOSNWWFB6cjbssL8b3wsSN1JWc7oXHUwMDBiJmJ775Ygy+Fjs1x1MDAxY6KB4Ovn3E7JN/OyXHUwMDEyXCKGc1x0XHUwMDExJDqvRYimzHRcdTAwMDRcdTAwMTJUKM5cdTAwMTdQoV3qTOfQXHUwMDFmkVx1MDAxOdiAXHUwMDAzwWunOVx1MDAxM5j/XHUwMDE0ac6kseRG89h9mlx1MDAwNOHxt0fBwbHkWj5j93QuXHUwMDFjL2s8XHUwMDEzajBcdLFEhGSMZm+3UKVcZsA0QZiIN/nSXHUwMDA1XHUwMDA2M8aGXHUwMDEwglx1MDAxMcYpJYAtbDi2IdeK94tCZFx1MDAwMdBcIonpUKgrgCNGOZmhqDH7Rs1cdTAwMTeE+pRcdTAwMWI1p95cdTAwMTOJXGaGYfhgXHUwMDAyKjhHhKhUp6dcdTAwMWSRxMBgZULiXHUwMDFlQilGSa/HM/dp5sd0RicuXHUwMDA0LFx1MDAxNTzeXHRMJUpcdTAwMTC6r1x1MDAxM8w90lJoXHT6IFx1MDAwMXP8tndpjvfl+Fx1MDAxOPLiRNxK+vXZaIY104Onkz2aSkpYtNn0ezTzS+jLWYMlYHkpkFx1MDAwNk+iUjCW2lx1MDAxM/lcdTAwMDRn2oh3XG5cdTAwMGLEqKZcdTAwMDIrNqDYPPFcZmBVXHUwMDExrVx1MDAxMEw2k0IlO1x1MDAxN1x1MDAxMjwjhlx1MDAwMColMFdKXCLGdKoq3Fx1MDAwMzREXHUwMDAwk1x1MDAxNVEzlHNmXHUwMDA3NPjHuUx86Vx1MDAxN1x1MDAwMtpcdTAwMWGgXHUwMDA3zKRgmDGAdSZIqtNcdTAwMTN4gJ0pWFlRXG44I7RmM248z6/FXHUwMDBl6Fx1MDAxNKuEgFx1MDAxZmDALZxQ/tXUvnNcIrrPXHUwMDFjUayUxupNXHUwMDAz2tp4b46PYT9+JqTlXHUwMDE2oWFix6NcdTAwMWFnXHUwMDA0ol1PX4Qu31x1MDAxY1/c3947l6XPx7e6yuT5oW3+WlSjk1BccixvSLA6XHUwMDAx6ytcdTAwMDbeNLwnRlx1MDAwYlx1MDAwZcu6XHUwMDEyWCP2omdp/mKWsG85Y8OQRkSCpklcdTAwMDE6wbVcdTAwMWVmcZhcdTAwMTNccvrMsOl8XHUwMDEyZPXdakTNorTl7IR8XHUwMDE37Z5cdTAwMWNcdTAwMWY+3lhHlebGWvHlJZaiPGqZdvPTvfmlXHUwMDFkXVx1MDAxY9HD8DDam0OJZe7qTiqxjL7glNo6n3evLm4qdrBn1qnliK90s/FtOiv8XHUwMDA0gDz6XGZ/iWstqHQj5djKXHJGgoLLajZ9qpc/fctcbiMyXHUwMDE3RjQ3WFx1MDAxYUZcdTAwMTaX7KWraMmDscPpXHUwMDFjQLtcdTAwMDI6J39B5Wam5+5SlVx1MDAxYoIyZ/uVm2QoPys3divWydizO+9qdufjdeHsujDmyVid+fLcnoydsCZcdTAwMGWWZ0YrPPtcdTAwMDKvUyvWYE1cdTAwMTWmgrDnZC3ty9ZR5+BTZJ5vr31ztrfq7EBtLntcclx1MDAwNlJcdTAwMTFDQqIo4u0jXFxcdTAwMTA+UIVBkDJcbowhhWNAhNGLXHUwMDAy8+VcdTAwMGI8dIOo1LM8r/6SXHUwMDA13lx1MDAxNlx1MDAxYid3ev2uuVtad+W3dus4OKsv71x1MDAwMr8gdecudlx1MDAxMm9cdTAwMTh9wd+HNyg9dkc+iZ+Fxlx1MDAxMLfT3/LJn76lhSeRXHUwMDBiT5RcdTAwMWJoXvA0XHUwMDE33iBjXHUwMDEywyVdwHOvf3hDwlx1MDAxYiastXPgXHJja52pZ6NcdTAwMDb3pXFcdTAwMDSrXHUwMDEzXHUwMDE208dkPkg9KybJq8UkV8JAkGjHv66VpfFcdTAwMWNcdTAwMTkqrktROX6TqS3iavDsgSjhXHUwMDFhXHUwMDA0UTzqXHUwMDA3brgwQC/IXHUwMDFmXHUwMDA0RfG2XzlcXNVkQmtMkX7d2zRwSZz6XHUwMDE1g/lXNfN59Gr6llxiXHUwMDAxnGRIi/hX0SBcdTAwMTVcdTAwMWLxc1x1MDAxYVx1MDAxOEBVXHUwMDAzmGI4YmuyXodnVjXzY3RAJ+B1Or6nT1x1MDAwNJNsSCNhXHUwMDAwwnVnlOk4W6ZDXHUwMDFhvama5rBcdTAwMGZ3T1x1MDAwZrtvXCJpJf36bFwiMb6MyblShKR/X2ZcdTAwMTJmSeteXHUwMDFkXFzV/eKRf3/X1vqiendcdTAwMTUuP2ZJXHUwMDAz+Fx1MDAwM9aKgWdjNlx1MDAwMFxcSFx1MDAxYZpJQYVWWDGxuC3yPFlcdTAwMWJcdTAwMTJcdTAwMTYxjFI0vlx1MDAxZFx0gfeqv8slXHUwMDA00UrNhFJTsIjhfSM3zZub9Fx1MDAxMp+mXHIq03vavSCR31x1MDAxOMdcdTAwMTgyo1x1MDAxOKRcdTAwMDc9TZ5ia6VcdTAwMTe3XHUwMDA1s9E4jcBCfYiDSXDKvWEm8lxuLcdub4zIdm+7Ryy1XHUwMDFir3Fk2PFcdTAwMTR8/7Hy419iJnwqIn0= App()Container(    id=\"dialog\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")events.Key(key=\"T\")events.Key(key=\"T\")bubble <p>As before, the event bubbles to its parent (the App class).</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT4lhcdTAwMTP+7q+w2C/zVlxy2XO/bNXWW4p3XHUwMDFkXHUwMDFkXHUwMDA1dZzXLStAhFxmgWBcdTAwMTK8zNb+97dcdTAwMGYqXHS3XHUwMDEwlTgwO1QpkFx1MDAxYzqdPt1Pnu7Tyd8rq6uF6KHrXHUwMDE0/lgtOPc123PrgX1X+Gi23zpB6PpcdTAwMWTYRfrfQ79cdTAwMTfU+iObUdRccv/4/fe2XHUwMDFktJyo69k1x7p1w57thVGv7vpWzW//7kZOO/yv+X9ot50/u367XHUwMDFlXHUwMDA1VnyQolN3Iz94PJbjOW2nXHUwMDEzhSD9f/B9dfXv/v+EdnXXbvuden94f0esXHUwMDFl13p066Hf6auKmWBMak3jXHUwMDExbrhcdTAwMDFHi5w67L5cdTAwMDaNnXiP2VRAZVxc/LZ3vr7+5UpUrtTa3XkobuPDXrueV45cdTAwMWW8R0PYtWYvcOK9YVx1MDAxNPgt59ytR01z9JHtg9+FPtgg/lXg91x1MDAxYc2OXHUwMDEzhkO/8bt2zY1cdTAwMWXMNoRcdTAwMDZb7U6jLyPeclx1MDAwZt+KmEhLIaQ5ZZxJitRgd19cdTAwMDDllmJKI0a1YFxu61x1MDAxMcVKvlx1MDAwNzNcdTAwMDGK/Yb6r1i1ql1rNUC/Tj1cdTAwMWWjSE3jxEnfPZ+uolx1MDAxNmOUXHUwMDEwSVx0WFx1MDAxY1x1MDAxMT5cdTAwMTjSdNxGMzJjXGJcdTAwMDE9mVCSP1x1MDAxZSphI6c/J1hJolx05yreY1x1MDAxNOju1vve8deoTZt20H2yXSE0X1x1MDAxMspcdTAwMWK9N0ddK+leiXnvKSEu9q/0fveb+vL15vtR8M0hXHUwMDAzWUO+XHUwMDE4OfdRYbDjn4+/xP4kYodGf8x6wKzaXHUwMDFlRrf35Vx1MDAwYreoP92cVnfOTlx1MDAxZZwvXHUwMDA3k7W1g8C/S8h9+lx1MDAxNPt+r1u3XHUwMDFmIVxmXHUwMDBiQVx1MDAxOeJEUarkYL/ndlqws9PzvHibX2vFqLeSUHhcZmyHzj+JtEhMRVrEXHUwMDE4w0igOOhnIW369C0u0pI0pFXCklx1MDAxY1x1MDAxM1x1MDAwMFn2ZqSNXHUwMDAyu1x1MDAxM3btXHUwMDAw4GtcdTAwMDLaytloS8bRXHUwMDE1SSFcYvxcIlZsbug6T/eMvcDvRGX3e9/FhMWxYohcYkTgmo64XHUwMDFjXHUwMDFhtWW3Xe9haGL7flxmmq91u1x1MDAxZv6TNHXogFxufZl8aPCa5zaMo1x1MDAxN2pwUk4wXHUwMDE0XHUwMDAzkVx1MDAwYtRlMKDt1utewlx1MDAxZmuggVxyMoPdLCzCXHUwMDBm3Ibbsb3KkIKpMfmIXHRcdTAwMTOCXHUwMDEyI6KmRaVcIkozJjDOXHUwMDFllKkotahBSYVFXGJFhHCFNNA9OVx1MDAxNJREUPBcdTAwMWNcdTAwMDAnJoFYYIJZflFpSawxVlxcXHRkXFyejFx1MDAwNyUjXHUwMDE2XHUwMDE1lFJcYlxcRVx1MDAxNUpQ0+dcdTAwMTiVmFx1MDAxMcpwwjczx2hf1dfG6Fx1MDAxMJq9IEbDyFx1MDAwZaJ1t1N3O1xy2Fx1MDAxOV/7nnl9lpjoR3GtZ7QsXCJcdTAwMGJcIlxcMiVcdTAwMTUgLONcdTAwMWMmViXGNeyusaOFsWCYXHUwMDFhsFVgcfI0YHBcdTAwMTUuOJ36bK22909Pd13S+7z9cNw624nOTsrlL5O0XHUwMDAypVx1MDAwMDypQDA/iiNcdTAwMDPwMeZcdTAwMGW00lx1MDAxNlKUXHUwMDBiialWiFA5ppRnh1HJb7fdXGKs/9l3O9GolfvmXFwz4d507ProXjip5L5RXFzoXHUwMDFhicNkN/60XHUwMDFhx03/y+DzX1x1MDAxZieOLk51Z/NcdTAwMWFz5FjcSvJ9XHUwMDFholx1MDAwNU4teoznXHSoRijlo5ufUY0gpYngmtLMsJY+y4tcbmuYUEsyXG54QJnJ31hsXHUwMDEyI4FiZmkuIaWD2Vx1MDAxMZrlSDZETPxcdTAwMDZApmKweEIuXHKhylx1MDAxMCM5kIs0Zu2fXHUwMDE3T2+6p9WOOjhu3n1cdTAwMGbsi1wiZ29PL7pF50SSXHLt7jKt9nuHLba9s5eNsKfKPd87u707YFx1MDAxYp9cdTAwMGVcdTAwMDJe334gPcI2xFx1MDAxY+SS8/ruzlar9kmtMVxcaXtHm52vjTnIzcm8yyW2Jc53b7e6J/iqXHUwMDE3Nlu3fFx1MDAwYl1cdTAwMWbW/3XGfUNcdTAwMGX7XHUwMDEzWSHqXu00Nq+0s1x1MDAxOVRxsX5cdTAwMWKG3l4wXHUwMDA3KyCnsvnJ82XjqHm/s394sulT725cdTAwMTGtO6tOMvmAsdhnejCVjDLNgcfH5Dmnelx1MDAwNrDsqSRcdTAwMDNcdTAwMGItXHT8yewkI93OXHUwMDBiSzKwSiVcdTAwMTlcdTAwMTRZ7H1IXHUwMDA2n0AyXHUwMDEySf5cdTAwMTPJgFx1MDAxY85cdTAwMTQxWDwv71DBeHRI/Fx1MDAwMoecXFzByFqxKD2XXHUwMDEzPlxcdsxcdTAwMGW3/uelWVx1MDAwM/H8xmXhsjO5mMHJkJxBrcJzrofd/0WljFx1MDAxOdR5tJQxU/PUSE3NXHQopmRauCpIXyVjQmaO1kP3XHUwMDA2bzU66/dcdTAwMDeoev39SFKvVKr/2GjlM4OVMG0pXHUwMDAyXHUwMDE5L1wiWFxuotVwsDJcdTAwMDU5XHUwMDE505JJzjWwcZFfsGo0XHUwMDFlrEqMXHUwMDA2K1NcdTAwMDIyYczeOSNwTnmVVuAlO8Xt1s3DWsA3rn5lXHUwMDA088pcYnIy73KJzSsjWC4r5JVcdTAwMTEsl1x1MDAxNTy9XlLV7Vx1MDAxMitcdOGUK/v3ja2teTD3nNTNK4FZlkmblb9MPmAs9unTXHUwMDBmz18oYdNbXySmlFx1MDAwYqqzM6J0Oy8sI2LpjEi+XHUwMDE3I1JcdTAwMTNcdTAwMTiRXHUwMDFjY0RKaES1UD91+rLei1wiv/PBbHvMXHUwMDAyLlx1MDAwYlx1MDAxN054Wfj4+O3WXHUwMDBlXFy7XHUwMDEzQWJcdTAwMTD2ajU4u+k5jVx1MDAxY1x1MDAxNj6nnGZcdTAwMDb3XHUwMDFmzWledzqpIT0j0Vx1MDAxMVPjmmjNMKTj2fss1Oej3fXjXHUwMDBi965q22F5u/LlU/PsfvHLXHUwMDEy1IJ4RVxcYoI1XHUwMDExmqmRuMaWwtysWULSQ4XKL64zZjpCaa6QeOe2tWtSo7h3Ujyon8pcdTAwMTLueC1ug9Bfmc6cMp2czLtcXGLzynSWy1xueWU6y2WFvDKd5bJCXis1y2KFWVx01ORcdTAwMDPGYp8+LUBcdTAwMDLFU1x1MDAxMijJJWGSZb93IN3Oi8q01FxmoiXei2hlS6BcdTAwMTjTjCgt/m1cdNShPyHhcFx1MDAwMF2C986eZiRcdTAwMTRcdTAwMTmyp1nnklx1MDAxYcxTO2FcdMJpy7mYMcp59rwpXHUwMDFk5Fx1MDAxNzWaibRcdTAwMTinlEqJXHUwMDA0I5QmXG5ccv1wRtzChGAlsemkppLnXHUwMDE3z1x1MDAxOFtCgFx1MDAxMkZcdTAwMWZcdTAwMDJQy8bDW3CLa66V6ZXUSGI6XHUwMDFh7Vx1MDAwMExCICXly6P99b2wL7/6JPSY1lx1MDAwYlx1MDAxYveRMkw5XHUwMDAxX6RiSmsrsTCYjVx1MDAxMDNCKMVoou8yS/fq0+DZnbCxTmBlXHUwMDBlXHQsolxmfFx1MDAwMsWoO9BcdCZcdTAwMTNpKbRcdTAwMDR9kIBJw9N0mlxmXHUwMDBmYzotUyPsdFc2rzEnjsWtJN9f3tqvp9d3KTiQubsxO56lV/1cdTAwMTdcdTAwMTXPqDbBgFx1MDAxOdicXHUwMDEygHBcdTAwMWRfQ1x1MDAxZvFMWFRcdTAwMGJcYiNNNVx1MDAxNXnecIOpXHUwMDA1XGZIK1x1MDAwNJPNpFBcdTAwMTN6+1x1MDAwNbGEpkhcdTAwMDBfUlx1MDAxMoGyXHR0fWIvXFxcIlx1MDAwZVx1MDAwMPOKXHUwMDA18Vx1MDAwNcWzXCKAXHUwMDA3NVxyOTA5nEgmkmD1iFx1MDAxZGA4XG5mU2ZBQlxinWgxylx0z4xORiWzJoBcdTAwMDG2cNySXHUwMDFjXHUwMDAzXHUwMDFhtYhAYFx1MDAxZkSxUlx1MDAxYatpOk0uXHUwMDE2LzWeXHUwMDE1pzuzeY278Vx1MDAwYlx1MDAxMS21uq3o9LtcYvshTjDJjmqVXHUwMDA3t1k+uHPuSifOt/Jaw1x0i9/2fyyq0VmgRihcdTAwMWVes1x1MDAxYcm4jPmxJNLgXHUwMDE5SvY0veZ2bVZcdTAwMTPONWdsXHUwMDFj0UhcIpmLK9sxTDzfj4SVuWmKklx1MDAxY+5HXHUwMDFh+NWEqkXt+vz4QNb3mq1cdTAwMWLvXHUwMDBivjj8fmJvbb29XHUwMDE4UpJHt7bT27mxT++i8yN6XHUwMDE4XHUwMDFlRvuTxb6odpOTunNcdTAwMTc7q3Yz+YCx2GdcdTAwMDBIudpcdTAwMDDyJlx1MDAxNk1yqt1IOb10g1x1MDAwMdZcdTAwMTBcdTAwMDeyllx1MDAxOUbSzbyoMFwiUmBcdTAwMDRi1sJcdFx1MDAxOHlcdTAwMTOKpDIjwifgXGJcdTAwMTlL5bBkXFzBgX5A4eZV1CdRuCFoaOugcFx1MDAxM5/Kc+HGuTU6WfvOw4eW8/DnZaFyWZhy67FcdTAwMWX68dxuPZ5xQVx1MDAxY63OTFb49Vd3nUjzx8KSYE2xTjzaY1ZYejdl9nnz/qHZ3tpu672d43DXX1/wsFx1MDAwNPSxuGKacHPNXHUwMDE0hI801Fx1MDAxM2KZZmVI/Vx1MDAxOXBmJN90N/LbL+8ms9LoVVx1MDAwYtdvubpfXHR0UdtZP946p3vVs/2Tln/8eWNxr+45qbssYmeRhslcdTAwMDfMqG2vWj/fYdXKzV6RrYn2UbVabspsc5aBjEhNaO5PRlE65W5lSLA4ZSp7TpM+fYuKejxcdTAwMTX1OLbk3FBvXHUwMDFldISYslx1MDAwMEf8XZ+EXHUwMDAy7kg5euuTUJaJjsy4gudNR8wjiaZGJqZKcYNcdTAwMGaZI3N9jbZcdTAwMTTfaWzfn5XOfMlC7yxoLXpcclx1MDAxNZtcdTAwMWGpXHUwMDEwXHUwMDFjklx1MDAwMY20XHUwMDEymlxyhSbm3JJcXHJwTZO64eRcIsyPICRcXDNO2KtcdTAwMTZ430JIPt/qYD3c6V03v29ffN3arGzc3PdcdTAwMTaXkOSk7nKJ3f3aq5xViN495Vx1MDAxN2frd07P35XeXCJcdTAwMWF3XHUwMDE2f5p8wFx1MDAxZs+fKFVEXHUwMDEynHsxXHUwMDA3J59cdTAwMDQ5XG7TXHUwMDE0XHUwMDAwQSRJ3CyUTp++RUVpjFNRWnGLzFxypedSz4G0kSMk87i5c55cdTAwMGW57Fxmalx1MDAwNueYXHUwMDAzg0p5ttz09WdJXHRcdTAwMTOcveDRcqkw9aKoJO9cdTAwMTaV5vZcItPywKnCiGAx0lx1MDAxZEeRtFx1MDAwNMdSIVxykavV9NuLXHUwMDFjIeVbgtI8fkxRhDnlXGaSK8YxmfC4XHUwMDA0XHUwMDAxWVx1MDAxNoP9XHUwMDE0eC2nVNCx9jmTnUlcdTAwMDRcdTAwMTDznlx1MDAxZDVPUfuq/rmMT5dLzzNWh5/jXHUwMDA2zF9rJMCI2DzCLNHN8bw4zCxBuVx1MDAxNppIhVx1MDAxOWj+3NPxwqfLpcfu6tCKNaJEKTgq4qbpR3MxrpayXHUwMDAwdDVkrlxcKUSVYGNaLdUqdJpP91x1MDAwN4y7cyxzJfn+Yr6RuJyNXHUwMDAwXHUwMDFiU5pcIk1Zdrpx4GyfXpVON4vnVcq/ke1cdTAwMTLZrp0sPLBJYVx1MDAxMbP2jzhcdTAwMDZGQYZxjUjz5DlOzJ2KXG6ihOXXJpgowMRkY6xvxviAIFi9a7VcdTAwMDbYXHUwMDE45TSvxaPxrt9qr1pNXHUwMDEygSS5UEOjs3byRn53XHUwMDFhr1x1MDAxODqLUVx1MDAxMvGkyWNsrTxFcMHudstcdTAwMTFYaFx1MDAwMHgwXHRu/ek0Y3mFW9e5W59QXHUwMDFhuO6/jNR+vJrIcMxcdTAwMTT8/c/KP/9cdTAwMDeoXHUwMDAzMlx1MDAwNiJ9 App()Container(    id=\"dialog\")Button(        \"Yes\",    variant=\"success\")Button(        \"No\",    variant=\"error\")events.Key(key=\"T\")events.Key(key=\"T\")events.Key(key=\"T\")bubble <p>The App class is always the root of the DOM, so there is nowhere for the event to bubble to.</p>"},{"location":"guide/events/#stopping-bubbling","title":"Stopping bubbling","text":"<p>Event handlers may stop this bubble behavior by calling the stop() method on the event or message. You might want to do this if a widget has responded to the event in an authoritative way. For instance when a text input widget responds to a key event it stops the bubbling so that the key doesn't also invoke a key binding.</p>"},{"location":"guide/events/#custom-messages","title":"Custom messages","text":"<p>You can create custom messages for your application that may be used in the same way as events (recall that events are simply messages reserved for use by Textual).</p> <p>The most common reason to do this is if you are building a custom widget and you need to inform a parent widget about a state change.</p> <p>Let's look at an example which defines a custom message. The following example creates color buttons which\u2014when clicked\u2014send a custom message.</p> custom01.pyOutput custom01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.message import Message\nfrom textual.widgets import Static\n\n\nclass ColorButton(Static):\n    \"\"\"A color button.\"\"\"\n\n    class Selected(Message):\n        \"\"\"Color selected message.\"\"\"\n\n        def __init__(self, color: Color) -&gt; None:\n            self.color = color\n            super().__init__()\n\n    def __init__(self, color: Color) -&gt; None:\n        self.color = color\n        super().__init__()\n\n    def on_mount(self) -&gt; None:\n        self.styles.margin = (1, 2)\n        self.styles.content_align = (\"center\", \"middle\")\n        self.styles.background = Color.parse(\"#ffffff33\")\n        self.styles.border = (\"tall\", self.color)\n\n    def on_click(self) -&gt; None:\n        # The post_message method sends an event to be handled in the DOM\n        self.post_message(self.Selected(self.color))\n\n    def render(self) -&gt; str:\n        return str(self.color)\n\n\nclass ColorApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ColorButton(Color.parse(\"#008080\"))\n        yield ColorButton(Color.parse(\"#808000\"))\n        yield ColorButton(Color.parse(\"#E9967A\"))\n        yield ColorButton(Color.parse(\"#121212\"))\n\n    def on_color_button_selected(self, message: ColorButton.Selected) -&gt; None:\n        self.screen.styles.animate(\"background\", message.color, duration=0.5)\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <p> ColorApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(0,\u00a0128,\u00a0128)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(128,\u00a0128,\u00a00)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(233,\u00a0150,\u00a0122)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aColor(18,\u00a018,\u00a018)\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the custom message class which extends Message. The constructor stores a color object which handler methods will be able to inspect.</p> <p>The message class is defined within the widget class itself. This is not strictly required but recommended, for these reasons:</p> <ul> <li>It reduces the amount of imports. If you import <code>ColorButton</code>, you have access to the message class via <code>ColorButton.Selected</code>.</li> <li>It creates a namespace for the handler. So rather than <code>on_selected</code>, the handler name becomes <code>on_color_button_selected</code>. This makes it less likely that your chosen name will clash with another message.</li> </ul>"},{"location":"guide/events/#sending-messages","title":"Sending messages","text":"<p>To send a message call the post_message() method. This will place a message on the widget's message queue and run any message handlers.</p> <p>It is common for widgets to send messages to themselves, and allow them to bubble. This is so a base class has an opportunity to handle the message. We do this in the example above, which means a subclass could add a <code>on_color_button_selected</code> if it wanted to handle the message itself.</p>"},{"location":"guide/events/#preventing-messages","title":"Preventing messages","text":"<p>You can temporarily disable posting of messages of a particular type by calling prevent, which returns a context manager (used with Python's <code>with</code> keyword). This is typically used when updating data in a child widget and you don't want to receive notifications that something has changed.</p> <p>The following example will play the terminal bell as you type. It does this by handling Input.Changed and calling bell(). There is a Clear button which sets the input's value to an empty string. This would normally also result in a <code>Input.Changed</code> event being sent (and the bell playing). Since we don't want the button to make a sound, the assignment to <code>value</code> is wrapped within a prevent context manager.</p> <p>Tip</p> <p>In reality, playing the terminal bell as you type would be very irritating -- we don't recommend it!</p> prevent.pyOutput prevent.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button, Input\n\n\nclass PreventApp(App):\n    \"\"\"Demonstrates `prevent` context manager.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input()\n        yield Button(\"Clear\", id=\"clear\")\n\n    def on_button_pressed(self) -&gt; None:\n        \"\"\"Clear the text input.\"\"\"\n        input = self.query_one(Input)\n        with input.prevent(Input.Changed):  # (1)!\n            input.value = \"\"\n\n    def on_input_changed(self) -&gt; None:\n        \"\"\"Called as the user types.\"\"\"\n        self.bell()  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = PreventApp()\n    app.run()\n</code></pre> <ol> <li>Clear the input without sending an Input.Changed event.</li> <li>Plays the terminal sound when typing.</li> </ol> <p> PreventApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Clear\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p>"},{"location":"guide/events/#message-handlers","title":"Message handlers","text":"<p>Most of the logic in a Textual app will be written in message handlers. Let's explore handlers in more detail.</p>"},{"location":"guide/events/#handler-naming","title":"Handler naming","text":"<p>Textual uses the following scheme to map messages classes on to a Python method.</p> <ul> <li>Start with <code>\"on_\"</code>.</li> <li>Add the message's namespace (if any) converted from CamelCase to snake_case plus an underscore <code>\"_\"</code>.</li> <li>Add the name of the class converted from CamelCase to snake_case.</li> </ul> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaa0/byFx1MDAxYf7eX1x1MDAxMeV8OStcdTAwMTV37pdKq1x1MDAxNbC0hZSKXHUwMDE2SludripjT1x1MDAxMlx1MDAxN8c29oTLVvz3845cdLGdXHUwMDFiJFx1MDAwNJaNXHUwMDA0iWcm9ut3nud5L86vXHUwMDE3rVbbXmWm/brVNpeBXHUwMDFmR2HuX7RfuvFzk1x1MDAxN1GawFx1MDAxNCmPi3SYXHUwMDA35cq+tVnx+tWrgZ+fXHUwMDFhm8V+YLzzqFx1MDAxOPpxYYdhlHpBOnhcdTAwMTVZMyj+cP8/+Fx1MDAwM/N7llx1MDAwZUKbe9VFNkxcdTAwMTjZNL+5lonNwCS2gLP/XHUwMDBmjlutX+X/mnW5XHSsn/RiU36hnKpcZqSMT45+SJPSWEyEIEghQcYrouJPuJ41IUx3wWZTzbih9uHRWXbGf36Sxu/wY3HOWYfH1WW7UVx1MDAxY1x1MDAxZtqruDSrSOFuqrnC5ump+Vx1MDAxMoW27649MT7+VuhcdTAwMTd9U/tanlx1MDAwZXv9xFx1MDAxNO7+0Xg0zfwgslfuRKhcdTAwMWG9cUJ93WXpXHUwMDAx5mkqJEOSY0mVqlx1MDAxY+JOQFx1MDAxNfVcdTAwMTRiWlx1MDAxMy2xkpLwXHTTttNcdTAwMTj2XHUwMDAyTPtcdTAwMGYqX5VtJ35w2lx1MDAwM1x1MDAwM5OwWtP1OeHg2GrVxeiWufaI1FIqxqjQRHAxXtI3Ua9vYVxymMqphlx1MDAxZKlcdTAwMTlhyt2QREmMqVx1MDAxYY+7XHUwMDBiZ7thiYu/Jr3Z9/Ns5LR2aWDNaHe4U1x1MDAwM1X15WFcdTAwMTb6N3uPhaCMYiYwl3Q8XHUwMDFmR8kpTCbDOK7G0uC0gks5ev1yXHUwMDA1nHIh5uGUaoKpVETcXHUwMDFiprvKbH3K2LtT8/VL9mZjiFx1MDAwZnW8/8xhypDwsFx1MDAwMjcgXHUwMDAxb0hKOVx1MDAwMVPmwYZIqplmgmPxIJRicqKUmIVSgpCHXHUwMDA1lkpywrRAWC2DUsw1sEgyjNaP09FEXHUwMDA1rNqGZ2pPXHUwMDA1vv3z8it786M3/FZcdTAwMWO9XHUwMDFkRuNzNVDo53l60Vx1MDAxZc9cXI8+zWdcdTAwMDHilMHNPlx0XHUwMDBiXHUwMDE0V/NYoCRBVFx1MDAwYszuzYKtg86eke92XHUwMDBlXHUwMDA2W+Kk0z00XHUwMDE355vZM2eBQMqTXHUwMDFjIaEoXHUwMDA1KFwiPEVcdTAwMDLFXGIjXHUwMDFhlNyJwsNYwFx1MDAwMmG6fFx1MDAxNlx1MDAwYjDhXHUwMDFlgFx1MDAxOPM6xu+Bf65cdTAwMTQhgj6GTC+C//bnz2FHXuxcdTAwMDdcdTAwMWb3tnl+2T/svDtGa4M/k6qGulx1MDAwN8Lfmks7XHUwMDBi+Vx1MDAxOOm5XHUwMDAxXHUwMDAwXHUwMDEyXHUwMDE1XGKcXGYtgX1fXHUwMDFl51x1MDAwN/tZxFx1MDAwZtOf4uJIbnx7n+C1Yn/iW3Xo45WgT1x1MDAxMfVcdTAwMTjSWiHIWIRqyj+XIMtcdTAwMWMxqTlnXHUwMDFhXHUwMDA06bGAr+g03jmaxLnETElIY8TyOC/cwYo4XHUwMDE3Nk63szOqTj7GfPPqfNOc7H5dXHUwMDEzzlx0oYIqslx1MDAwNM4rNKWJPYz+NmX4bIy+8Vx1MDAwN1F81YBESVx1MDAwMDBw3z81Rcv2TWtgbD9ccr8nPnwqXG6/Z1p9P1x0Y5PXN7EwYJC7XHUwMDAyo41TbcZRz/GnXHUwMDFkm26TWDaCemI8bdOa01x1MDAwMzDNh9Plu+HkLaZ51ItcdTAwMTI/PlrCzJVcYi/lXFy+Q6AjIFx1MDAwN7yWRdzF9zefd97KLOb9y1x1MDAxZPb+7eCg8377p37efGeMe1x1MDAwNFx1MDAwM6khmDHBVDPUQcrhQSjhXHUwMDA0SSYg4j1apNOVqC4gPKFgiUtcdTAwMGKflvCPmddcdTAwMTFcdTAwMDI7oKpcdTAwMWJ6dMKPWJNAzV9cdTAwMDBOzPfkv+nQmrxcdTAwMTXEflH8tlx1MDAxNNtcdTAwMDPwXl0g1sf3u6xcXInsXHUwMDAyycnRMdlcdTAwMTXVUNjo+3M97n56XHUwMDFmn3X2985+fOufpztcdTAwMWaO9o7X24RYO9dcdTAwMDUlnlx1MDAwMFx1MDAxYbuyTihBmlxc54J6RFx1MDAxMq2g2Fx1MDAwNtFTXHUwMDBm60As4DqrrruA61hLXHJ/XHUwMDFjVcHwScj+mFksRHdcdTAwMDVC+2Rkd429Vtr9ntzGypI9z4Pic2xbSOxcdTAwMWKHz6pYiZ5cdTAwMWO9ZTaTpKyH7t9eXFyc3y3BbDKJ0Vx1MDAxNZkt70zahfa05sQ1ypieiOGcS09Csq6ohDBcdTAwMGbEnsvrUDOFuqtXq641XHUwMDA0nlaUKC2FnNFZxIR6XHUwMDFhMSpcdTAwMTVcdTAwMThcdTAwMDJcdTAwMDU0q1x1MDAwNPm2duVQ5nGxXHUwMDAy6VfvMN4k3ct0XHUwMDE4a3b4ud2KkjBKejBZ6cltx3z3XHUwMDFlhWBJ5GDorNxAXHUwMDFlRYxzjClcdTAwMTJQ84Jtsras52cjT3NcdTAwMDFcdTAwMWJcdTAwMGVBS1x1MDAxM4bxaMH12CyThHdcdTAwMWLV/Vx1MDAxNvTzqyP68biTXHUwMDExxTa2gy8mnmVcdTAwMTTyXHUwMDE0XHUwMDE4xFx1MDAxMFx1MDAxNH1cdTAwMTIkWVA9bVx1MDAxMvdcdTAwMTBsLFx1MDAxM6497HrYesomoLfdTlx1MDAwN4PIgu9cdTAwMGbSKLGTPi6duek43jf+lIDAPdXnJsUgc2dsqnv1qVVcdTAwMTGmPFx1MDAxOH/+6+XM1fOx7F5cdTAwMWLTMK5O+KL+vrSQQVx1MDAxMEeTw5WSXHTYdCnv339YnLg+RyXjWHuuv4ggzVx1MDAwN6+z6sJlOaKQx6FcIlx1MDAwM4oghvWChyQ80FxmhatKXHUwMDE5XHUwMDA1XHUwMDFiXHUwMDE4p5hcbsY10bXYUXXfqMcoXHUwMDE0RIpgxFx1MDAxMVx1MDAxMzVVXHUwMDFk5S+YKIFcdTAwMTnI8dNKXHUwMDE5g1x1MDAwZlUwXFy/lC2ucZtS5kpoTDjDXG70SkheY9FINzQkpJhqXHUwMDA0rlx1MDAwNDditpqSLX7S0rRcdEmCXHUwMDA1lLRKYoqRXHUwMDE0fMomXHUwMDA1abBEXHUwMDAyYVxydkGWPG3Uv0nKNuaCuZydwvHalIyrudVcdTAwMTZWIJ5Y1blxl5QtTsv/XHUwMDAxKVN3VltaeKrsW0OgRnDHXHUwMDEzWZlcdTAwMDAoUijFXHUwMDFj7sX8xlxubFs3kKsqXHUwMDE5cTVcdTAwMWRkN1x1MDAxYVx1MDAwNFWDINVcdTAwMTKuKinDwnNSi7iCilx1MDAwYik5lZRp95iB1DvfT5OVrVos3VPKXHUwMDE2l/CNXHUwMDA0XGLCsqZcXFNcbuVcdTAwMDSkZOCQXHUwMDFhjUa6IT1QXGbwn1x1MDAwMGAzwlx1MDAxOF1NzFx1MDAxNj8wa1olmGBaXHUwMDBipIWSkFxyztJXXHL7XHUwMDBmlTSDRIVCMf3v1rL5cC6np5G8pJrN61x1MDAxY1x1MDAxMTz3iSiBbFx1MDAwNMKJXFyidbQ48W5qWd9cdTAwMGb6w9zMU7N1NY/0nSUmV56mXHUwMDAwJii1QdpcdTAwMTVrylx1MDAxOVXSQ1gypLSm5IE/XGawuZ9cdTAwMTSZn1x1MDAwMyVm5GZcdTAwMTJcIlx1MDAxNilcdTAwMDFfnmlGbkaxJ1x1MDAxNSbAjNGrZs2oyoRbgJJ4lVx1MDAxZlxiPNcnR5hJcEu1tyv2loTHXHUwMDE0XHUwMDE0Nje+hZdsrFx1MDAxYfeamt1cImdwmvxcYtxcdTAwMDb+OFx1MDAxOVpcdTAwMGJcdTAwMDdcdTAwMDVQILCmkYOPu02Ez92hp3icNNfWXHUwMDE3t74u/dz2s+zQgpfHalxyMInCkauqK7TPI3OxNetnWOXLnbVcdTAwMTRcdTAwMWPHbONA8uv6xfX/XHUwMDAx2ibQXHUwMDAzIn0= Makes the methoda message handlerMessage namespace(outer class)Name ofmessage classon_color_button_selected <p>Messages have a namespace if they are defined as a child class of a Widget. The namespace is the name of the parent class. For instance, the builtin <code>Input</code> class defines its <code>Changed</code> message as follows:</p> <pre><code>class Input(Widget):\n    ...\n    class Changed(Message):\n        \"\"\"Posted when the value changes.\"\"\"\n        ...\n</code></pre> <p>Because <code>Changed</code> is a child class of <code>Input</code>, its namespace will be \"input\" (and the handler name will be <code>on_input_changed</code>). This allows you to have similarly named events, without clashing event handler names.</p> <p>Tip</p> <p>If you are ever in doubt about what the handler name should be for a given event, print the <code>handler_name</code> class variable for your event class.</p> <p>Here's how you would check the handler name for the <code>Input.Changed</code> event:</p> <pre><code>&gt;&gt;&gt; from textual.widgets import Input\n&gt;&gt;&gt; Input.Changed.handler_name\n'on_input_changed'\n</code></pre>"},{"location":"guide/events/#on-decorator","title":"On decorator","text":"<p>In addition to the naming convention, message handlers may be created with the <code>on</code> decorator, which turns a method into a handler for the given message or event.</p> <p>For instance, the two methods declared below are equivalent:</p> <pre><code>@on(Button.Pressed)\ndef handle_button_pressed(self):\n    ...\n\ndef on_button_pressed(self):\n    ...\n</code></pre> <p>While this allows you to name your method handlers anything you want, the main advantage of the decorator approach over the naming convention is that you can specify which widget(s) you want to handle messages for.</p> <p>Let's first explore where this can be useful. In the following example we have three buttons, each of which does something different; one plays the bell, one toggles dark mode, and the other quits the app.</p> on_decorator01.pyon_decorator.tcssOutput on_decorator01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:  # (1)!\n        \"\"\"Handle all button pressed events.\"\"\"\n        if event.button.id == \"bell\":\n            self.bell()\n        elif event.button.has_class(\"toggle\", \"dark\"):\n            self.dark = not self.dark\n        elif event.button.id == \"quit\":\n            self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>The message handler is called when any button is pressed</li> </ol> on_decorator.tcss<pre><code>Screen {\n    align: center middle;\n    layout: horizontal;\n}\n\nButton {\n    margin: 2 4;\n}\n</code></pre> <p> OnDecoratorApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Bell\u00a0\u00a0Toggle\u00a0dark\u00a0\u00a0Quit\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>Note how the message handler has a chained <code>if</code> statement to match the action to the button. While this works just fine, it can be a little hard to follow when the number of buttons grows.</p> <p>The <code>on</code> decorator takes a CSS selector in addition to the event type which will be used to select which controls the handler should work with. We can use this to write a handler per control rather than manage them all in a single handler.</p> <p>The following example uses the decorator approach to write individual message handlers for each of the three buttons:</p> on_decorator02.pyon_decorator.tcssOutput on_decorator02.py<pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\n\nclass OnDecoratorApp(App):\n    CSS_PATH = \"on_decorator.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Three buttons.\"\"\"\n        yield Button(\"Bell\", id=\"bell\")\n        yield Button(\"Toggle dark\", classes=\"toggle dark\")\n        yield Button(\"Quit\", id=\"quit\")\n\n    @on(Button.Pressed, \"#bell\")  # (1)!\n    def play_bell(self):\n        \"\"\"Called when the bell button is pressed.\"\"\"\n        self.bell()\n\n    @on(Button.Pressed, \".toggle.dark\")  # (2)!\n    def toggle_dark(self):\n        \"\"\"Called when the 'toggle dark' button is pressed.\"\"\"\n        self.dark = not self.dark\n\n    @on(Button.Pressed, \"#quit\")  # (3)!\n    def quit(self):\n        \"\"\"Called when the quit button is pressed.\"\"\"\n        self.exit()\n\n\nif __name__ == \"__main__\":\n    app = OnDecoratorApp()\n    app.run()\n</code></pre> <ol> <li>Matches the button with an id of \"bell\" (note the <code>#</code> to match the id)</li> <li>Matches the button with class names \"toggle\" and \"dark\"</li> <li>Matches the button with an id of \"quit\"</li> </ol> on_decorator.tcss<pre><code>Screen {\n    align: center middle;\n    layout: horizontal;\n}\n\nButton {\n    margin: 2 4;\n}\n</code></pre> <p> OnDecoratorApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Bell\u00a0\u00a0Toggle\u00a0dark\u00a0\u00a0Quit\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>While there are a few more lines of code, it is clearer what will happen when you click any given button.</p> <p>Note that the decorator requires that the message class has a <code>control</code> property which should return the widget associated with the message. Messages from builtin controls will have this attribute, but you may need to add a <code>control</code> property to any custom messages you write.</p> <p>Note</p> <p>If multiple decorated handlers match the message, then they will all be called in the order they are defined.</p> <p>The naming convention handler will be called after any decorated handlers.</p>"},{"location":"guide/events/#applying-css-selectors-to-arbitrary-attributes","title":"Applying CSS selectors to arbitrary attributes","text":"<p>The <code>on</code> decorator also accepts selectors as keyword arguments that may be used to match other attributes in a Message, provided those attributes are in <code>Message.ALLOW_SELECTOR_MATCH</code>.</p> <p>The snippet below shows how to match the message <code>TabbedContent.TabActivated</code> only when the tab with id <code>home</code> was activated:</p> <pre><code>@on(TabbedContent.TabActivated, pane=\"#home\")\ndef home_tab(self) -&gt; None:\n    self.log(\"Switched back to home tab.\")\n    ...\n</code></pre>"},{"location":"guide/events/#handler-arguments","title":"Handler arguments","text":"<p>Message handler methods can be written with or without a positional argument. If you add a positional argument, Textual will call the handler with the event object. The following handler (taken from <code>custom01.py</code> above) contains a <code>message</code> parameter. The body of the code makes use of the message to set a preset color.</p> <pre><code>    def on_color_button_selected(self, message: ColorButton.Selected) -&gt; None:\n        self.screen.styles.animate(\"background\", message.color, duration=0.5)\n</code></pre> <p>A similar handler can be written using the decorator <code>on</code>:</p> <pre><code>    @on(ColorButton.Selected)\n    def animate_background_color(self, message: ColorButton.Selected) -&gt; None:\n        self.screen.styles.animate(\"background\", message.color, duration=0.5)\n</code></pre> <p>If the body of your handler doesn't require any information in the message you can omit it from the method signature. If we just want to play a bell noise when the button is clicked, we could write our handler like this:</p> <pre><code>    def on_color_button_selected(self) -&gt; None:\n        self.app.bell()\n</code></pre> <p>This pattern is a convenience that saves writing out a parameter that may not be used.</p>"},{"location":"guide/events/#async-handlers","title":"Async handlers","text":"<p>Message handlers may be coroutines. If you prefix your handlers with the <code>async</code> keyword, Textual will <code>await</code> them. This lets your handler use the <code>await</code> keyword for asynchronous APIs.</p> <p>If your event handlers are coroutines it will allow multiple events to be processed concurrently, but bear in mind an individual widget (or app) will not be able to pick up a new message from its message queue until the handler has returned. This is rarely a problem in practice; as long as handlers return within a few milliseconds the UI will remain responsive. But slow handlers might make your app hard to use.</p> <p>Info</p> <p>To re-use the chef analogy, if an order comes in for beef wellington (which takes a while to cook), orders may start to pile up and customers may have to wait for their meal. The solution would be to have another chef work on the wellington while the first chef picks up new orders.</p> <p>Network access is a common cause of slow handlers. If you try to retrieve a file from the internet, the message handler may take anything up to a few seconds to return, which would prevent the widget or app from updating during that time. The solution is to launch a new asyncio task to do the network task in the background.</p> <p>Let's look at an example which looks up word definitions from an api as you type.</p> <p>Note</p> <p>You will need to install httpx with <code>pip install httpx</code> to run this example.</p> dictionary.pydictionary.tcssOutput dictionary.py<pre><code>import asyncio\n\ntry:\n    import httpx\nexcept ImportError:\n    raise ImportError(\"Please install httpx with 'pip install httpx' \")\n\nfrom rich.json import JSON\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass DictionaryApp(App):\n    \"\"\"Searches a dictionary API as-you-type.\"\"\"\n\n    CSS_PATH = \"dictionary.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Search for a word\")\n        yield VerticalScroll(Static(id=\"results\"), id=\"results-container\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"A coroutine to handle a text changed message.\"\"\"\n        if message.value:\n            # Look up the word in the background\n            asyncio.create_task(self.lookup_word(message.value))\n        else:\n            # Clear the results\n            self.query_one(\"#results\", Static).update()\n\n    async def lookup_word(self, word: str) -&gt; None:\n        \"\"\"Looks up a word.\"\"\"\n        url = f\"https://api.dictionaryapi.dev/api/v2/entries/en/{word}\"\n        async with httpx.AsyncClient() as client:\n            results = (await client.get(url)).text\n\n        if word == self.query_one(Input).value:\n            self.query_one(\"#results\", Static).update(JSON(results))\n\n\nif __name__ == \"__main__\":\n    app = DictionaryApp()\n    app.run()\n</code></pre> dictionary.tcss<pre><code>Screen {\n    background: $panel;\n}\n\nInput {\n    dock: top;\n    width: 100%;\n    height: 1;\n    padding: 0 1;\n    margin: 1 1 0 1;\n}\n\n#results {\n    width: auto;\n    min-height: 100%;\n}\n\n#results-container {\n    background: $background 50%;\n    overflow: auto;\n    margin: 1 2;\n    height: 100%;\n}\n</code></pre> <p> DictionaryApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the highlighted line in the above code which calls <code>asyncio.create_task</code> to run a coroutine in the background. Without this you would find typing in to the text box to be unresponsive.</p>"},{"location":"guide/input/","title":"Input","text":"<p>This chapter will discuss how to make your app respond to input in the form of key presses and mouse actions.</p> <p>Quote</p> <p>More Input!</p> <p>\u2014 Johnny Five</p>"},{"location":"guide/input/#keyboard-input","title":"Keyboard input","text":"<p>The most fundamental way to receive input is via Key events which are sent to your app when the user presses a key. Let's write an app to show key events as you type.</p> key01.pyOutput key01.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\n\nclass InputApp(App):\n    \"\"\"App to display key events.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog()\n\n    def on_key(self, event: events.Key) -&gt; None:\n        self.query_one(RichLog).write(event)\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> <p> InputApp Key(key='T',\u00a0character='T',\u00a0name='upper_t',\u00a0is_printable=True) Key(key='e',\u00a0character='e',\u00a0name='e',\u00a0is_printable=True) Key(key='x',\u00a0character='x',\u00a0name='x',\u00a0is_printable=True) Key(key='t',\u00a0character='t',\u00a0name='t',\u00a0is_printable=True) Key(key='u',\u00a0character='u',\u00a0name='u',\u00a0is_printable=True) Key(key='a',\u00a0character='a',\u00a0name='a',\u00a0is_printable=True) Key(key='l',\u00a0character='l',\u00a0name='l',\u00a0is_printable=True) Key( key='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 character='!',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 is_printable=True ) </p> <p>When you press a key, the app will receive the event and write it to a RichLog widget. Try pressing a few keys to see what happens.</p> <p>Tip</p> <p>For a more feature rich version of this example, run <code>textual keys</code> from the command line.</p>"},{"location":"guide/input/#key-event","title":"Key Event","text":"<p>The key event contains the following attributes which your app can use to know how to respond.</p>"},{"location":"guide/input/#key","title":"key","text":"<p>The <code>key</code> attribute is a string which identifies the key that was pressed. The value of <code>key</code> will be a single character for letters and numbers, or a longer identifier for other keys.</p> <p>Some keys may be combined with the Shift key. In the case of letters, this will result in a capital letter as you might expect. For non-printable keys, the <code>key</code> attribute will be prefixed with <code>shift+</code>. For example, Shift+Home will produce an event with <code>key=\"shift+home\"</code>.</p> <p>Many keys can also be combined with Ctrl which will prefix the key with <code>ctrl+</code>. For instance, Ctrl+P will produce an event with <code>key=\"ctrl+p\"</code>.</p> <p>Warning</p> <p>Not all keys combinations are supported in terminals and some keys may be intercepted by your OS. If in doubt, run <code>textual keys</code> from the command line.</p>"},{"location":"guide/input/#character","title":"character","text":"<p>If the key has an associated printable character, then <code>character</code> will contain a string with a single Unicode character. If there is no printable character for the key (such as for function keys) then <code>character</code> will be <code>None</code>.</p> <p>For example the P key will produce <code>character=\"p\"</code> but F2 will produce <code>character=None</code>.</p>"},{"location":"guide/input/#name","title":"name","text":"<p>The <code>name</code> attribute is similar to <code>key</code> but, unlike <code>key</code>, is guaranteed to be valid within a Python function name. Textual derives <code>name</code> from the <code>key</code> attribute by lower casing it and replacing <code>+</code> with <code>_</code>. Upper case letters are prefixed with <code>upper_</code> to distinguish them from lower case names.</p> <p>For example, Ctrl+P produces <code>name=\"ctrl_p\"</code> and Shift+P produces <code>name=\"upper_p\"</code>.</p>"},{"location":"guide/input/#is_printable","title":"is_printable","text":"<p>The <code>is_printable</code> attribute is a boolean which indicates if the key would typically result in something that could be used in an input widget. If <code>is_printable</code> is <code>False</code> then the key is a control code or function key that you wouldn't expect to produce anything in an input.</p>"},{"location":"guide/input/#aliases","title":"aliases","text":"<p>Some keys or combinations of keys can produce the same event. For instance, the Tab key is indistinguishable from Ctrl+I in the terminal. For such keys, Textual events will contain a list of the possible keys that may have produced this event. In the case of Tab, the <code>aliases</code> attribute will contain <code>[\"tab\", \"ctrl+i\"]</code></p>"},{"location":"guide/input/#key-methods","title":"Key methods","text":"<p>Textual offers a convenient way of handling specific keys. If you create a method beginning with <code>key_</code> followed by the key name (the event's <code>name</code> attribute), then that method will be called in response to the key press.</p> <p>Let's add a key method to the example code.</p> key02.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\n\nclass InputApp(App):\n    \"\"\"App to display key events.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog()\n\n    def on_key(self, event: events.Key) -&gt; None:\n        self.query_one(RichLog).write(event)\n\n    def key_space(self) -&gt; None:\n        self.bell()\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> <p>Note the addition of a <code>key_space</code> method which is called in response to the space key, and plays the terminal bell noise.</p> <p>Note</p> <p>Consider key methods to be a convenience for experimenting with Textual features. In nearly all cases, key bindings and actions are preferable.</p>"},{"location":"guide/input/#input-focus","title":"Input focus","text":"<p>Only a single widget may receive key events at a time. The widget which is actively receiving key events is said to have input focus.</p> <p>The following example shows how focus works in practice.</p> key03.pykey03.tcssOutput key03.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\n\nclass KeyLogger(RichLog):\n    def on_key(self, event: events.Key) -&gt; None:\n        self.write(event)\n\n\nclass InputApp(App):\n    \"\"\"App to display key events.\"\"\"\n\n    CSS_PATH = \"key03.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield KeyLogger()\n        yield KeyLogger()\n        yield KeyLogger()\n        yield KeyLogger()\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> key03.tcss<pre><code>Screen {\n    layout: grid;\n    grid-size: 2 2;\n    grid-columns: 1fr;\n}\n\nKeyLogger {\n    border: blank;\n}\n\nKeyLogger:hover {\n    border: wide $secondary;\n}\n\nKeyLogger:focus {\n    border: wide $accent;\n}\n</code></pre> <p> InputApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Key(key='l',\u00a0character='l',\u00a0name='l'\u258eKey(key='r',\u00a0character='r',\u00a0name='r'\u258a Key(key='o',\u00a0character='o',\u00a0name='o'\u258eKey(key='l',\u00a0character='l',\u00a0name='l'\u2583\u2583\u258a Key(\u2586\u2586\u258eKey(key='d',\u00a0character='d',\u00a0name='d'\u258a key='tab',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258eKey(\u258a character='\\t',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258ekey='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a name='tab',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258echaracter='!',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a is_printable=False,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258ename='exclamation_mark',\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a aliases=['tab',\u00a0'ctrl+i']\u258eis_printable=True\u258a )\u258e)\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>The app splits the screen in to quarters, with a <code>RichLog</code> widget in each quarter. If you click any of the text logs, you should see that it is highlighted to show that the widget has focus. Key events will be sent to the focused widget only.</p> <p>Tip</p> <p>the <code>:focus</code> CSS pseudo-selector can be used to apply a style to the focused widget.</p> <p>You can move focus by pressing the Tab key to focus the next widget. Pressing Shift+Tab moves the focus in the opposite direction.</p>"},{"location":"guide/input/#controlling-focus","title":"Controlling focus","text":"<p>Textual will handle keyboard focus automatically, but you can tell Textual to focus a widget by calling the widget's focus() method.</p>"},{"location":"guide/input/#focus-events","title":"Focus events","text":"<p>When a widget receives focus, it is sent a Focus event. When a widget loses focus it is sent a Blur event.</p>"},{"location":"guide/input/#bindings","title":"Bindings","text":"<p>Keys may be associated with actions for a given widget. This association is known as a key binding.</p> <p>To create bindings, add a <code>BINDINGS</code> class variable to your app or widget. This should be a list of tuples of three strings. The first value is the key, the second is the action, the third value is a short human readable description.</p> <p>The following example binds the keys R, G, and B to an action which adds a bar widget to the screen.</p> binding01.pybinding01.tcssOutput binding01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.widgets import Footer, Static\n\n\nclass Bar(Static):\n    pass\n\n\nclass BindingApp(App):\n    CSS_PATH = \"binding01.tcss\"\n    BINDINGS = [\n        (\"r\", \"add_bar('red')\", \"Add Red\"),\n        (\"g\", \"add_bar('green')\", \"Add Green\"),\n        (\"b\", \"add_bar('blue')\", \"Add Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Footer()\n\n    def action_add_bar(self, color: str) -&gt; None:\n        bar = Bar(color)\n        bar.styles.background = Color.parse(color).with_alpha(0.5)\n        self.mount(bar)\n        self.call_after_refresh(self.screen.scroll_end, animate=False)\n\n\nif __name__ == \"__main__\":\n    app = BindingApp()\n    app.run()\n</code></pre> binding01.tcss<pre><code>Bar {\n    height: 5;\n    content-align: center middle;\n    text-style: bold;\n    margin: 1 2;\n    color: $text;\n}\n</code></pre> <p> BindingApp red\u2582\u2582 green blue blue \u00a0r\u00a0Add\u00a0Red\u00a0\u00a0g\u00a0Add\u00a0Green\u00a0\u00a0b\u00a0Add\u00a0Blue\u00a0\u258f^p\u00a0palette </p> <p>Note how the footer displays bindings and makes them clickable.</p> <p>Tip</p> <p>Multiple keys can be bound to a single action by comma-separating them. For example, <code>(\"r,t\", \"add_bar('red')\", \"Add Red\")</code> means both R and T are bound to <code>add_bar('red')</code>.</p>"},{"location":"guide/input/#binding-class","title":"Binding class","text":"<p>The tuple of three strings may be enough for simple bindings, but you can also replace the tuple with a Binding instance which exposes a few more options.</p>"},{"location":"guide/input/#priority-bindings","title":"Priority bindings","text":"<p>Individual bindings may be marked as a priority, which means they will be checked prior to the bindings of the focused widget. This feature is often used to create hot-keys on the app or screen. Such bindings can not be disabled by binding the same key on a widget.</p> <p>You can create priority key bindings by setting <code>priority=True</code> on the Binding object. Textual uses this feature to add a default binding for Ctrl+C so there is always a way to exit the app. Here's the bindings from the App base class. Note the first binding is set as a priority:</p> <pre><code>    BINDINGS = [\n        Binding(\"ctrl+c\", \"quit\", \"Quit\", show=False, priority=True),\n        Binding(\"tab\", \"focus_next\", \"Focus Next\", show=False),\n        Binding(\"shift+tab\", \"focus_previous\", \"Focus Previous\", show=False),\n    ]\n</code></pre>"},{"location":"guide/input/#show-bindings","title":"Show bindings","text":"<p>The footer widget can inspect bindings to display available keys. If you don't want a binding to display in the footer you can set <code>show=False</code>. The default bindings on App do this so that the standard Ctrl+C, Tab and Shift+Tab bindings don't typically appear in the footer.</p>"},{"location":"guide/input/#mouse-input","title":"Mouse Input","text":"<p>Textual will send events in response to mouse movement and mouse clicks. These events contain the coordinates of the mouse cursor relative to the terminal or widget.</p> <p>Information</p> <p>The trackpad (and possibly other pointer devices) are treated the same as the mouse in terminals.</p> <p>Terminal coordinates are given by a pair values named <code>x</code> and <code>y</code>. The X coordinate is an offset in characters, extending from the left to the right of the screen. The Y coordinate is an offset in lines, extending from the top of the screen to the bottom.</p> <p>Coordinates may be relative to the screen, so <code>(0, 0)</code> would be the top left of the screen. Coordinates may also be relative to a widget, where <code>(0, 0)</code> would be the top left of the widget itself.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1ba0/bSFx1MDAxNP3eX1x1MDAxMaVfdqUynfej0mpcdTAwMDVcdTAwMDGaQHktXHUwMDAxXG6rVeUmTmxw7GA7XHUwMDA0qPjve+1A7DxcdKHJhlXzXHUwMDAxyIxcdTAwMWbXM+ecOfeO+fGuUCjGd227+KlQtG9rlufWQ6tb/JC039hh5Fx1MDAwNj500fR7XHUwMDE0dMJaeqRcdTAwMTPH7ejTx48tK7yy47Zn1Wx040ZcdTAwMWTLi+JO3VxyUC1ofXRju1x1MDAxNf2Z/Ny3WvZcdTAwMWbtoFWPQ5TdZM2uu3FcdTAwMTD27mV7dsv241xirv43fC9cdTAwMTR+pD9z0YV2Lbb8pmenJ6RdWYBcdTAwMDRcdTAwMTM63LxcdTAwMWb4abREcIO1xFxc9I9wo024YWzXobtcdTAwMDFB21lP0lRcXN/ddcqh3GlFe7dcdTAwMDd1p4nXP5Nqdt+G63nH8Z2XxlVcdTAwMGKDKFpzrLjmZEdEcVx1MDAxOFxc2WduPXaehi/X3j83XG5gKLKzwqDTdHw7SkaB9FuDtlVz47v0KXG/tTdcdTAwMTSfXG5Zyy18Y1xcIS1cdTAwMTVcdTAwMTFEsuShs0dOzqdKIK2l4ZphTnVuQHpxlVx1MDAwMlx1MDAwZuZcdTAwMDPieo/TT1x1MDAxNtl3q3bVhPD8ev+YOLT8qG2FMGvZcd3HJ1x1MDAxNpwjySjjXGZcdTAwMGJCSHYjx3abTpxEKjHSXHUwMDA0XHUwMDFiziVjgmgqs2DsdGKMVIJjzni/I4mgXamnIPlneExcdTAwMWQrbD+OXTFKvuSiT1x1MDAwMt/KISw7udOuWz1cdTAwMWNcdTAwMTApOVFKJSGpfr/n+lfQ6Xc8L2tcdTAwMGJqV1x1MDAxOXTS1odcdTAwMGZzgFZRPFx0s1RcdTAwMWKYKMrUzJC9pXW+tS3Pr02zVbnc2zrnNz6ZXHUwMDAw2SHY/ZdgXHUwMDE1XHUwMDE4XHUwMDBiLFx1MDAxODbKaDlcdTAwMDJWhinBXG5LSoyii0QrQ5hIQbVQRFx1MDAxOaVH4Uo1klx1MDAxMjNcdTAwMGU6QiVcdTAwMDNoj8BVSmNcYjVcdTAwMDS/Ybjanue2o7FglUJMXHUwMDAyq1x1MDAxMdhcYi3MzFg9XzPfhFPdPmp2tXdcdTAwMTFEe/5e4/M8WCXLw6owiFx1MDAxOclcdTAwMTnAQ1x1MDAxYWL0IFa1QEJcdTAwMDEoXHUwMDE4pVx1MDAxOGuB+Wuw+r5hXHQq6ChOXHRDXHUwMDFjUyqMpPCLa81HgUooXHUwMDEyXHUwMDAwXHJcdTAwMDOaiiljNFx1MDAwN45HoFxuiFx1MDAxNEiVQ/D/XG6ocKOJToBcdTAwMTgjYU0hbGaofnXx93XiXHUwMDFj8Z3908PWXHUwMDA2/evM7norXHUwMDBlVS1cdTAwMTGjilx1MDAxOSap1ppcdTAwMTA1hFWOXHUwMDAwXHUwMDFjSmiDXHUwMDA11yQnu/Nh9TtI+KKwSlx1MDAxOSxcZkyI/6moKskmYlx1MDAxNVx1MDAxNlx1MDAxYWpcdTAwMTjFs2M12rwpy3W3s3dcdTAwMWWas9qFiNbL5Hi1scpJXHUwMDAyRlx1MDAwNoNONFx1MDAwMJaTIagypDBcdTAwMDYzZFx1MDAxOKgue5VcdTAwMDN4T+h38FSLQiphXHSjXHUwMDE4e8tItcIw6I5Nr9jExZ8rpjCTuVx1MDAwNfE5mKqD+0atpiW/3qVhyexcdTAwMTFIXHUwMDAzK1x1MDAxM2DqWDWnXHUwMDEz2v89UJlUSEkh6WBGxVx1MDAxOEFcdTAwMTgyLblAd4pcdTAwMTFVXG4yKTUmi5JitPNcdJDwUMJoMUf6lFx1MDAwNjcnILlcdTAwMDBcdTAwMWL9XHUwMDAyQObisMJ4w/Xrrt9cdTAwMWM+xfbrWc9cdTAwMTNsXHUwMDBi/apBpecqO9s7+5ub3Vx1MDAxM6dy24lOon1cdTAwMTmfZrhKkFx1MDAxNdQ6UTqghFx1MDAxOUHBrFx1MDAwM+UlOFx1MDAwMpI7qGm1XHUwMDEzVCNB01F97HjIoreiuFx1MDAxNLRablxmz31cdTAwMTi4fjxcdTAwMWNs+iDrXHSVXHUwMDFj26qPeZR83zDn2slcdTAwMTWzKkjyyf4qZKBMv/T//ufD2KPXRqGTfHKgya7wLv/7xVx1MDAwMqHkcGM/k4XEXG6QSNTsXHUwMDAyXHUwMDEx3G59bVxcnljd06tSuXFz0vWv/7pYfYGAXGZcdTAwMTFWMTUkXHUwMDEw1CDJsVx1MDAwNpVkXHUwMDFhw2rOhlwi+olZrEGQepixOkFcdTAwMTDBZEC9nlRCc2a4WrZMXHUwMDE4pvNcdP0yZeLwRl+FR+t39dYhO7mp4jiu7tTHy1x1MDAwNCZcdTAwMTTUjIO6q0RLiaa5w3pCQTCSvZF900oxip3ks9aHzVx1MDAwYnVcIrZv43EykUPZkExcYkGYJHmj/5xKTJ/HXHUwMDE1VVx0zjT43Vx1MDAwMY6mKkFcdTAwMDTSSi/WR+Sy3qysNSpcYlx1MDAwMGdcIlx1MDAxOPD051x1MDAxYtk+in7kQDaT6Fx1MDAwZqCrR4R+z8NcdTAwMTMkp7lcdTAwMTLKSTZjL5CbRuDHx+59byVcdTAwMWJo3bZarnc3gIRcdTAwMTT2SdEgP0mRXHK3SzM6PXDguuc2XHUwMDEzTlx1MDAxND27MUiW2K1ZXr87XHUwMDBlckNag1x1MDAxYltwubAyXCJcdTAwMTdB6DZd3/Kq/SDmoqiavI+iXHLVIIM4O+LZQt9US7aiXHUwMDFjXHUwMDA1XHUwMDFkQorgXHUwMDExknKMXHUwMDExJKl60Gz/bJJmsUwjqUnqO1xc5EzVUkg6PXVcdTAwMWLA1zwknTd1mIukd6tA0rvpJJ26fcTYRNMtlZGJY8mW2+eYKr/qzeq5+ra5xaPTXHUwMDFhoSdl91x1MDAxMs/H1OVtIFx0IdBwRs45RYxyOuDE5yps1pVNOOejXHUwMDFjZYlcdTAwMTCMddnSoLEuW1HCtFFkuVuZWsFgyFx1MDAxN1x1MDAxMGoqXHUwMDE2J+Z+Uk0sXHUwMDBlJU5CQs7D5cxA1MI76HSFdqtB6aLEq3LvXHUwMDFiu1xc9SVcdTAwMDOEXHUwMDE4XHQ96uu4ZFxic2rkK8G4iPpQsrPKwOjllvNlZH5cdTAwMWFzpfBcdTAwMGJA+fMyv/tNZ9uznS1TvdhVpVp5o0qP4tzq9atA9PhZQIFIYjXc2lx1MDAxN1x0WMhcYoXRnl0kqvbpl8P7vc+4XHUwMDFhhpVyffdr4/42Wn2RMIhcdTAwMWI6Ulwi4onfZJpqsshXXHUwMDFj5ilcdTAwMGVRXGYzwzWZx2a+TYnoVlx1MDAwZU7Lbjlyb732l42Se3h3fXw1oTiEXHUwMDA12Fx1MDAwM5gzpmBhXHUwMDE3ODd7hV/VodzDzpx6MjptN5Qkb4O9IPecPpUrqlx1MDAxMZKDg1SDfqHnalx1MDAxNdJcdTAwMGKWiNnqQzrZc9RCLcDK9mE0JvOcrvhcdTAwMDPwennmXHSCkzexv8pDUzia26JcdTAwMWbmqOGgXHUwMDExlJDZs87pjmxFOSpcdTAwMTRF4JuH8k7BKFqF0pDSsCwl3nS5/JyetlxyQGvl+flcdTAwMTYqQ5P4SfFEfjLNXHUwMDA1y7+g8lx1MDAxYztcdTAwMWT7vGxFYSm4a1xcXHUwMDFjXHUwMDFkXHUwMDE4vGNcImfl92HpSFxyJt1gwVx1MDAwNqnXloSeMdizsFx1MDAxM1wiXHUwMDEz4PfZkl++1FxmgzYtjUC/4Vx1MDAwZlx1MDAwNfz7KrDoMZK5qKRy7zRcctdXXHUwMDE5JpqJXHUwMDE3uNHKmXW4WflyXHUwMDE4XHUwMDFknYlcbrlukMvd49aqc4lrgyC/XHUwMDE53JZM7SjTi99cbpmRUZxcdTAwMWLMtDHLffFOU54vr/9iVGFcdTAwMTbzOHFt4jR5I1x1MDAwNM9eXHUwMDAxKlx1MDAxMa5cdTAwMGVD3N611i/3jsXJie9/2171/VxuqSmSckx6J4hChL9293/KloVcdTAwMWPzTutcdTAwMTguKYqTfzpcdTAwMTJcdTAwMGLYVpzGJVx1MDAwM7dd3upcdTAwMDTz3rTjVeDSYyQ9Lr17tMBFq90+jmGEik9lKphcdTAwMDS3/viY2fWKN67d3Vx1MDAxOIeC9JNcXDXlZ8JcdTAwMDU7mYJcdTAwMWZcdTAwMGbvXHUwMDFl/lx1MDAwNeEmVVx1MDAxOCJ9 XyXy(0, 0)(0, 0)Widget"},{"location":"guide/input/#mouse-movements","title":"Mouse movements","text":"<p>When you move the mouse cursor over a widget it will receive MouseMove events which contain the coordinate of the mouse and information about what modifier keys (Ctrl, Shift etc) are held down.</p> <p>The following example shows mouse movements being used to attach a widget to the mouse cursor.</p> mouse01.pymouse01.tcss mouse01.py<pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog, Static\n\n\nclass Ball(Static):\n    pass\n\n\nclass MouseApp(App):\n    CSS_PATH = \"mouse01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog()\n        yield Ball(\"Textual\")\n\n    def on_mouse_move(self, event: events.MouseMove) -&gt; None:\n        self.screen.query_one(RichLog).write(event)\n        self.query_one(Ball).offset = event.screen_offset - (8, 2)\n\n\nif __name__ == \"__main__\":\n    app = MouseApp()\n    app.run()\n</code></pre> mouse01.tcss<pre><code>Screen {\n    layers: log ball;\n}\n\nRichLog {\n    layer: log;\n}\n\nBall {\n    layer: ball;\n    width: auto;\n    height: 1;\n    background: $secondary;\n    border: tall $secondary;\n    color: $background;\n    box-sizing: content-box;\n    text-style: bold;\n    padding: 0 4;\n}\n</code></pre> <p>If you run <code>mouse01.py</code> you should find that it logs the mouse move event, and keeps a widget pinned directly under the cursor.</p> <p>The <code>on_mouse_move</code> handler sets the offset style of the ball (a rectangular one) to match the mouse coordinates.</p>"},{"location":"guide/input/#mouse-capture","title":"Mouse capture","text":"<p>In the <code>mouse01.py</code> example there was a call to <code>capture_mouse()</code> in the mount handler. Textual will send mouse move events to the widget directly under the cursor. You can tell Textual to send all mouse events to a widget regardless of the position of the mouse cursor by calling capture_mouse.</p> <p>Call release_mouse to restore the default behavior.</p> <p>Warning</p> <p>If you capture the mouse, be aware you might get negative mouse coordinates if the cursor is to the left of the widget.</p> <p>Textual will send a MouseCapture event when the mouse is captured, and a MouseRelease event when it is released.</p>"},{"location":"guide/input/#enter-and-leave-events","title":"Enter and Leave events","text":"<p>Textual will send a Enter event to a widget when the mouse cursor first moves over it, and a Leave event when the cursor moves off a widget.</p> <p>Both <code>Enter</code> and <code>Leave</code> bubble, so a widget may receive these events from a child widget. You can check the initial widget these events were sent to by comparing the <code>node</code> attribute against <code>self</code> in the message handler.</p>"},{"location":"guide/input/#click-events","title":"Click events","text":"<p>There are three events associated with clicking a button on your mouse. When the button is initially pressed, Textual sends a MouseDown event, followed by MouseUp when the button is released. Textual then sends a final Click event.</p> <p>If you want your app to respond to a mouse click you should prefer the Click event (and not MouseDown or MouseUp). This is because a future version of Textual may support other pointing devices which don't have up and down states.</p>"},{"location":"guide/input/#scroll-events","title":"Scroll events","text":"<p>Most mice have a scroll wheel which you can use to scroll the window underneath the cursor. Scrollable containers in Textual will handle these automatically, but you can handle MouseScrollDown and MouseScrollUp if you want build your own scrolling functionality.</p> <p>Information</p> <p>Terminal emulators will typically convert trackpad gestures in to scroll events.</p>"},{"location":"guide/layout/","title":"Layout","text":"<p>In Textual, the layout defines how widgets will be arranged (or laid out) inside a container. Textual supports a number of layouts which can be set either via a widget's <code>styles</code> object or via CSS. Layouts can be used for both high-level positioning of widgets on screen, and for positioning of nested widgets.</p>"},{"location":"guide/layout/#vertical","title":"Vertical","text":"<p>The <code>vertical</code> layout arranges child widgets vertically, from top to bottom.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2ZW2/aSFx1MDAxNIDf8ytcIvrauHO/VFqtXHUwMDAyTdrck9KkTVdVNLFcdTAwMDdwMLbXXHUwMDFlXHUwMDEyoOp/37FJMVx1MDAxOFx1MDAxY1FcdTAwMWFRtrt+MPjM7XjmO2fOXHUwMDE5f93a3q6ZYaxrr7dreuCqwPdcdTAwMTL1UHuZye91kvpRaItQ/pxG/cTNa3aMidPXr171VNLVJlx1MDAwZZSrnXs/7asgNX3Pj1x1MDAxYzfqvfKN7qV/ZvdT1dN/xFHPM4lTXGayoz3fRMl4LFx1MDAxZOieXHUwMDBlTWp7/8s+b29/ze9T2iXaNSpsXHUwMDA3Om+QXHUwMDE3XHUwMDE1XG5CLsrS0yjMlYVcdTAwMDJRxFx1MDAxMGZsUsNP39jxjPZsccvqrIuSTFS7rNdcdTAwMGbj+/6RSNBdfFF/84lcdTAwMGZIUlxm2/KDoGmGQa6Wm0RputNRxu1cdTAwMTQ1UpNEXf3R90wn06Akn7RNIztcdTAwMTNFqyTqtzuhTtOZNlGsXFzfXGYzXHUwMDE5XHUwMDAwXHUwMDEz6XgmXm9cdTAwMTeSQbZOQjqSUFxmXHUwMDExncjzloI6XHUwMDE4gVx1MDAxOflYl0ZcdTAwMTTYJbC6vFx1MDAwMPlVaHOr3G7bqlx1MDAxNHqTOiZRYVx1MDAxYavELlRR7+HxLYlkXHUwMDBl5kJcdTAwMDI2NUhH++2OsaVcdTAwMThcdEdcdTAwMTDMp8bX+fxD24ZcdTAwMGLBWVGSjVx1MDAxYVx1MDAxZng5XHUwMDBiX8pz11FJ/DhHtTR7mNI4U3ZvXG6konE/9tR4vSFjXGJJiVx1MDAwMVx1MDAxN6yYvMBcdTAwMGa7tjDsXHUwMDA3QSGL3G6BSC799nJcdTAwMTU2KapiU2AkhSRkeTRcdTAwMTk4XCJcdTAwMThGh+qm8/Gi07jY8y/gTVx1MDAwNZolvGahROuDUlx1MDAwModIXHUwMDA0XHUwMDA1L0NJXHUwMDFjgGd5eX4oiVNBJGJcdTAwMGVEXHUwMDEwyFx1MDAwNUxcIkgpwFx1MDAxOK5cdTAwMTFJXGZcdTAwMDCUjHD0XFxI6iDw43QxkKjSWVxujJl1XHUwMDE0kixccuS+PLl517x6f/k+uvp09Fx1MDAwZXXdYd1bXHUwMDA1yPV5SVxmoFx1MDAwMyBlZSdpWSmJV8DxRUtRu+HMo1xikYMgmfWBXHUwMDEzXHUwMDE4IXRKbvu7e+SIQYq5/Fx1MDAxN3vHp1BcdTAwMTSVvpFbs4VcdTAwMThRsDSKny/SgTm6eXu81/Aurlx1MDAxM91NSXC04ShcIupQXHUwMDA2KGFz3lFcIuu5XHUwMDEwnt0zV+LxXHUwMDE2XHUwMDAw+lxcPFwiwFx0XHUwMDAzkEn8e1x1MDAwMmnjxCogXHQj2DpqKZZcdTAwMDbyslx1MDAxZTY/XHUwMDFm3lx1MDAwNVx1MDAwZnz0rn/gN+7vXFx8sOFAUuhAYO9cdTAwMGLcI3IwXHUwMDEwVP4skFx1MDAxMN1cbsGeXHUwMDBiSMKJpIKJ3zZ8xE+kNvaShEO8PJLnXHUwMDFmklH3nDY8vvu3fHOTXHUwMDA0QI3OKpDsKLfTT/RcdTAwMDZAXHSBXHUwMDAz5YJcdTAwMTDSukeHlZBZfc+mXHUwMDBivCQhwsk8nlxcSCW1Sc04r1wiMrtcdTAwMDQr44lcdTAwMTBEmGNcdTAwMDLXiifN7Eg8XHUwMDE3nkZcdTAwMGbMQl9Z6SohQ4xhgsDyiVxybV2NTsO3g+udYDS63mVR86ZcdTAwMTFvOpg2S5jlkZKf4fDJVIaRef5cdTAwMTbEi1x1MDAxNkKbSeBcco9cdTAwMTeLdY1C0/RHOlx1MDAwZi1mpPuq51x1MDAwN8OZpclBtJrahW5rMz2VqbZjjk97ZmrvXHUwMDA2fjtDtVx1MDAxNujWLMPGd1UwKTbR1Ju7dnRlu0tcdTAwMGW88ltEid/2Q1x1MDAxNXyY1WR1705cdTAwMTCv9u6SXHUwMDAwIaRcXD5cdTAwMDKW51x1MDAxMFx1MDAxY1x1MDAwZY7htZa3rZM9fkz76d6mXHUwMDFiXHUwMDExXHUwMDA20mFcdTAwMDLPXHUwMDA2XHUwMDE2w9ztXHUwMDEzR1xiJH7y1OpcdTAwMDVcdTAwMDEuoJwtXGI5XGIlXHUwMDBlp7jihFx1MDAwMELqXGLISFaaXHUwMDBmXHUwMDAz56yNXCJJKON0vdFcdTAwMDdcdTAwMDXUboZriT4oJlV8YmRcdTAwMTM0xvnyeKrPO83hzd6nncuTw+O6XHUwMDFj+Gr/Q3Pj8bTBXHUwMDA3gVxczmVoWWhApSzFXHUwMDA2K1x1MDAwMeoy3aKLXHUwMDAxtUFxJaCEOyjXazzIPJ9cYoBcZm+I15utUWhDtWfjUyVJ9LD4XHUwMDFjqzpX43ZcdTAwMGKU8Fx1MDAwN+KP+5OUjc5cdTAwMGUur0x8XHUwMDE2JOfDs1x1MDAwN4YvVmNzfUerwsa/slx1MDAxY1x1MDAwMH8/yypHrWUybVx1MDAxYaawfprMqlxcXHI4nHO8OFXDXGI5XHUwMDA0US5cdTAwMTZcdTAwMWZnXHRcblxiWyFcdTAwMWPONVt3eJJcdTAwMWGVmLpcdTAwMWZ6ftguN9GhV1FcdTAwMTKo1DSiXs83Vo3zyFx1MDAwZk25Rt7vblx1MDAwNnZHq7kow/Y8XVa2gDjrsfhSll3Fv+1cdTAwMDKR/GHy/8vLxbXnVjK7ptew6GFr+vdHs1x1MDAwNVwiy8JJoGMxlVhQtLy1plx1MDAwN/qwvdc+xfuXcrA/knetNiSbvpNYN+0ghNjc0Vxutnnk/LeIX5M/XHUwMDAwTG3ehjb9POW/lEBUWZR84ps3QcKGrj/wzftYJo2O2b3bXHUwMDFk6uOr3TPVc+/ev918i+JcdTAwMGVcdTAwMTFg/vScWIviXGbymVx1MDAxM6NfZFFYXHUwMDEwXHS53aP/t6i1W9TW475XU3HcNHaGbI2xfdlF8L3H1yz6q937+qG+6IQwv7JecyvN7EFnS/D129a3f1x1MDAwMLFE1Vx1MDAwMCJ9 WidgetWidgetWidget <p>The example below demonstrates how children are arranged inside a container with the <code>vertical</code> layout.</p> Outputvertical_layout.pyvertical_layout.tcss <p> VerticalLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Two\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Three\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass VerticalLayoutExample(App):\n    CSS_PATH = \"vertical_layout.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = VerticalLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: vertical;\n}\n\n.box {\n    height: 1fr;\n    border: solid green;\n}\n</code></pre> <p>Notice that the first widget yielded from the <code>compose</code> method appears at the top of the display, the second widget appears below it, and so on. Inside <code>vertical_layout.tcss</code>, we've assigned <code>layout: vertical</code> to <code>Screen</code>. <code>Screen</code> is the parent container of the widgets yielded from the <code>App.compose</code> method, and can be thought of as the terminal window itself.</p> <p>Note</p> <p>The <code>layout: vertical</code> CSS isn't strictly necessary in this case, since Screens use a <code>vertical</code> layout by default.</p> <p>We've assigned each child <code>.box</code> a height of <code>1fr</code>, which ensures they're each allocated an equal portion of the available height.</p> <p>You might also have noticed that the child widgets are the same width as the screen, despite nothing in our CSS file suggesting this. This is because widgets expand to the width of their parent container (in this case, the <code>Screen</code>).</p> <p>Just like other styles, <code>layout</code> can be adjusted at runtime by modifying the <code>styles</code> of a <code>Widget</code> instance:</p> <pre><code>widget.styles.layout = \"vertical\"\n</code></pre> <p>Using <code>fr</code> units guarantees that the children fill the available height of the parent. However, if the total height of the children exceeds the available space, then Textual will automatically add a scrollbar to the parent <code>Screen</code>.</p> <p>Note</p> <p>A scrollbar is added automatically because <code>Screen</code> contains the declaration <code>overflow-y: auto;</code>.</p> <p>For example, if we swap out <code>height: 1fr;</code> for <code>height: 10;</code> in the example above, the child widgets become a fixed height of 10, and a scrollbar appears (assuming our terminal window is sufficiently small):</p> <p> VerticalLayoutScrolledExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2582\u2582 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Two\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 </p> <p>With the parent container in focus, we can use our mouse wheel, trackpad, or keyboard to scroll it.</p>"},{"location":"guide/layout/#horizontal","title":"Horizontal","text":"<p>The <code>horizontal</code> layout arranges child widgets horizontally, from left to right.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2aa0/bSFx1MDAxNIa/8ytQ+rVM536ptFpcdTAwMTEuLTQtlNAtdFVVjj1JZnFsYztcdGnFf9+xQ+PE2GxcYlHKatdCSTzX45nnXHUwMDFjvzPDj63t7UY6iXTj9XZD37iOb7zYXHUwMDE5N15m6SNcdTAwMWQnJlxmbFx1MDAxNs7vk3BcdTAwMTi7ecl+mkbJ61evXHUwMDA2Tnyl08h3XFxcckYmXHUwMDE5On6SXHUwMDBlPVx1MDAxM1x1MDAwMjdcdTAwMWO8MqlcdTAwMWUkv2efXHUwMDFmnIH+LVxuXHUwMDA3Xlx1MDAxYYOik1x1MDAxZO2ZNIynfWlfXHUwMDBmdJAmtvU/7f329o/8c866WLupXHUwMDEz9HydV8izXG5cdTAwMDNcdTAwMTFH5dRcdTAwMGZhkFx1MDAxYitcdTAwMDRnTFBOZ1x1MDAwNUyyb7tLtWdzu9ZkXeRkSY1wrHY6o1x1MDAxMbuiTv8vfja8uWw3o6LXrvH9djrxc6vcOEySnb6Tuv2iRJLG4ZX+bLy0n9lWSp/VTUI7XHUwMDEwRa04XHUwMDFj9vqBTpKFOmHkuCadZGlcdTAwMTDOUqdcdTAwMDPxertIubF3XHUwMDFjXHUwMDAxXHUwMDA0XHUwMDEx45jNkvOKXHUwMDA0XHUwMDAyXHUwMDBlXHUwMDA1xUhcblYyZi/07Vx1MDAxNFhjXsD8KszpOO5Vz9pcdTAwMTR4szJp7Fx1MDAwNEnkxHaiinLju8ekilx1MDAwM1wipILz3fe16fVTm0uwXHUwMDA0kpL5/nU+XHUwMDAxXGJhXHUwMDAyle2ZzHKyXqMjL2fha3nw+k5cdTAwMWPdXHJSI8lu5izOjD2YXHUwMDAzqag8jDxnOuGIc4yVXCJcbjNajJ5vgiubXHUwMDE5XGZ9v0hcdTAwMGLdq4KRPPX25SpsXHUwMDEyXsemopxcdTAwMGKO4fJs9odB29//LryTZvzHXHUwMDA1jpLjT+ZdXHKbJb5cdTAwMTapxJukktPFuc8rYlx1MDAwNVx1MDAwNJSqRMXaqaSgXHUwMDA2ScxcdTAwMDHCXGKqKii55Vx1MDAxMVNcdTAwMDHR5qAkXHUwMDEwYiigQOuCUvu+iZJqJFx1MDAxMalDkiNCqP1cdTAwMTNLI/lpsPd2ctChqOd8eXt4zVvHcFx1MDAxZq2C5OZcdTAwMDKlwFx1MDAwMImFaDiNk1xuMIZcdTAwMDV5KpEvulx1MDAwZcNcZt+nXHUwMDExYYBRyVx1MDAxN2Y8XCJcdTAwMDQoI1xi36NcdTAwMTFbw1xiUYJvNERaKyGkXHUwMDFioZGLOlx1MDAxYe1gXHREkIBqaVx1MDAxY9E5vWmpTtg62lx1MDAxOUYnh63v3eB493njaN+cwlx1MDAwZYLi94mUgFx1MDAxMlXGYiVcIjtcdTAwMTCytVx1MDAxMVx0MWFIWiY3TyTeXHUwMDAwkVx1MDAxONfKSeuLUmJCKVmayPeuuL5pXlx1MDAxY6TiYHzcla0v+/1o/3lcdTAwMTOJsOWC2ZBTISaFXHUwMDE1ckzAJyOJcEdKvi4kXHUwMDExQlx1MDAxMCumXHUwMDE4+1x1MDAxNyP5oI7k9WtcdTAwMWOroZVgXG7hpZmM3r9PzpvDvdZxcn74RSr+5qzztobJvuP2h7H+9VRcblx1MDAwMaxywVx1MDAxMpWZXHUwMDE0XGYwWKZ19Vx1MDAxNzevopJZuShcdFOVWGIuXHUwMDAxrMKSWIVPIedqk1QqSlx1MDAxMCNiXVSm+iatVpGyXHUwMDE2SIVskGRKLS8jj1x1MDAwZttJ2mpCdlx1MDAxMnjJ8FrH74KLi+dO5DROksVcdTAwMTVGVlx1MDAxNUtcYlxixvjJSD64upnb1ChQrFjNWFxirYhcIlx1MDAxYlxczWShUVwiwsgjICzmOlxm0rb5rnOlsZB66FxmjD9ZmK6cTmupnfyeTufHMtG2z5xGuVB61ze9jN+Gr7uLYKfGdfxZdlx1MDAxYc49uWt7d2xz8ZFXfoowNj1cdTAwMTM4/vmiJatHeilonWNcdFx1MDAxYuelJIIv7Ve4NWiN+67eXHUwMDFm6dbHyWRMh2ejo+fuV5gxUN5cdTAwMWGYRnr7XG6AVns+OdJP1UdlpIdcdTAwMWPYt7pYeM3MRXpcdTAwMDZ4aZPtp59Jqz6gIHijXHUwMDEyRFFcdTAwMWJq4WP8bHUwXHUwMDE1YnVgXCJMoWBYLs3ldde9hEcn15+Cvve5N1x1MDAxYZs2Pfz23Lkkklx1MDAwMJS90O8pXHUwMDEwXHUwMDA0eFmarIIlxrKjq7HkXHUwMDE4SJ53QVV2iSo4XHUwMDE1kFx1MDAwNFcqXHUwMDExpCRWVJBccitcdTAwMTEsXHUwMDA15OuCs1aJqHouKYNcdTAwMWOJR+xnnYs3x6NT7/SjY051e6/3wfF26/aznlxymFhIIGBpVTZcdTAwMTVcIlx1MDAxMqh1bCGsQYhQqlxis4vHTetcdTAwMTAqXHUwMDFmJYb/Szqk1qPkXHUwMDAzXHUwMDEyhNs4w+dm8Vx1MDAxZlx1MDAwZtQ+XHUwMDFmOJff6NklvDa9sVaBOPlr8tw9imJcdTAwMDHKbvPToaDgpf3jX6TsieJ2sUfxpj0qO7T636Oyr3tcdTAwMWXlxHE4rnQpWOtSdrVoXHUwMDAzOH/EnuK3uHnK946uXHUwMDA35uDj8I1vlHmz667mUlx1MDAxYjxcdJSA4vu73FxmXCLwkCtJ0WWdp1x1MDAxY1x1MDAwMTJA+KK7XHUwMDE2+4mAK1U6XHUwMDE4v/MtaHOs4EUr7HHn1q3mW1xmMkVcdTAwMWVz6jJnh1x1MDAxM6dNXHUwMDEzeCbolavowKvJ8Z0k3Vx1MDAwYlx1MDAwN1x1MDAwM5NaM05DXHUwMDEzpOVcdTAwMTJ5u7tcdTAwMTnVfe3cc1x1MDAxMdvyfF5cdTAwMTn/KGux+K+O7Cp+bVx1MDAxN3zkN7PfX19Wlq6Yyewq5rBoYGv++3brrsmGXHUwMDEzRe3UXHUwMDBluDVo6rh2To13XHUwMDE3kYrnaoyMXHUwMDFlN6v2XHUwMDA38ytcdTAwMGJcdTAwMDC5+2d+prOn+3G7dfs38GbaXHUwMDA3In0= WidgetWidgetWidget <p>The example below shows how we can arrange widgets horizontally, with minimal changes to the vertical layout example above.</p> Outputhorizontal_layout.pyhorizontal_layout.tcss <p> HorizontalLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass HorizontalLayoutExample(App):\n    CSS_PATH = \"horizontal_layout.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = HorizontalLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: horizontal;\n}\n\n.box {\n    height: 100%;\n    width: 1fr;\n    border: solid green;\n}\n</code></pre> <p>We've changed the <code>layout</code> to <code>horizontal</code> inside our CSS file. As a result, the widgets are now arranged from left to right instead of top to bottom.</p> <p>We also adjusted the height of the child <code>.box</code> widgets to <code>100%</code>. As mentioned earlier, widgets expand to fill the width of their parent container. They do not, however, expand to fill the container's height. Thus, we need explicitly assign <code>height: 100%</code> to achieve this.</p> <p>A consequence of this \"horizontal growth\" behavior is that if we remove the width restriction from the above example (by deleting <code>width: 1fr;</code>), each child widget will grow to fit the width of the screen, and only the first widget will be visible. The other two widgets in our layout are offscreen, to the right-hand side of the screen. In the case of <code>horizontal</code> layout, Textual will not automatically add a scrollbar.</p> <p>To enable horizontal scrolling, we can use the <code>overflow-x: auto;</code> declaration:</p> Outputhorizontal_layout_overflow.pyhorizontal_layout_overflow.tcss <p> HorizontalLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258a </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass HorizontalLayoutExample(App):\n    CSS_PATH = \"horizontal_layout_overflow.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = HorizontalLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: horizontal;\n    overflow-x: auto;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>With <code>overflow-x: auto;</code>, Textual automatically adds a horizontal scrollbar since the width of the children exceeds the available horizontal space in the parent container.</p>"},{"location":"guide/layout/#utility-containers","title":"Utility containers","text":"<p>Textual comes with several \"container\" widgets. Among them, we have Vertical, Horizontal, and Grid which have the corresponding layout.</p> <p>The example below shows how we can combine these containers to create a simple 2x2 grid. Inside a single <code>Horizontal</code> container, we place two <code>Vertical</code> containers. In other words, we have a single row containing two columns.</p> Outpututility_containers.pyutility_containers.tcss <p> UtilityContainersExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502One\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Two\u2502\u2502Four\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\n\nclass UtilityContainersExample(App):\n    CSS_PATH = \"utility_containers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Vertical(\n                Static(\"One\"),\n                Static(\"Two\"),\n                classes=\"column\",\n            ),\n            Vertical(\n                Static(\"Three\"),\n                Static(\"Four\"),\n                classes=\"column\",\n            ),\n        )\n\n\nif __name__ == \"__main__\":\n    app = UtilityContainersExample()\n    app.run()\n</code></pre> <pre><code>Static {\n    content-align: center middle;\n    background: crimson;\n    border: solid darkred;\n    height: 1fr;\n}\n\n.column {\n    width: 1fr;\n}\n</code></pre> <p>You may be tempted to use many levels of nested utility containers in order to build advanced, grid-like layouts. However, Textual comes with a more powerful mechanism for achieving this known as grid layout, which we'll discuss below.</p>"},{"location":"guide/layout/#composing-with-context-managers","title":"Composing with context managers","text":"<p>In the previous section, we've shown how you add children to a container (such as <code>Horizontal</code> and <code>Vertical</code>) using positional arguments. It's fine to do it this way, but Textual offers a simplified syntax using context managers, which is generally easier to write and edit.</p> <p>When composing a widget, you can introduce a container using Python's <code>with</code> statement. Any widgets yielded within that block are added as a child of the container.</p> <p>Let's update the utility containers example to use the context manager approach.</p> utility_containers_using_with.pyutility_containers.pyutility_containers.tcssOutput <p>Note</p> <p>This code uses context managers to compose widgets.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\n\nclass UtilityContainersExample(App):\n    CSS_PATH = \"utility_containers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            with Vertical(classes=\"column\"):\n                yield Static(\"One\")\n                yield Static(\"Two\")\n            with Vertical(classes=\"column\"):\n                yield Static(\"Three\")\n                yield Static(\"Four\")\n\n\nif __name__ == \"__main__\":\n    app = UtilityContainersExample()\n    app.run()\n</code></pre> <p>Note</p> <p>This is the original code using positional arguments.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\n\nclass UtilityContainersExample(App):\n    CSS_PATH = \"utility_containers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Vertical(\n                Static(\"One\"),\n                Static(\"Two\"),\n                classes=\"column\",\n            ),\n            Vertical(\n                Static(\"Three\"),\n                Static(\"Four\"),\n                classes=\"column\",\n            ),\n        )\n\n\nif __name__ == \"__main__\":\n    app = UtilityContainersExample()\n    app.run()\n</code></pre> <pre><code>Static {\n    content-align: center middle;\n    background: crimson;\n    border: solid darkred;\n    height: 1fr;\n}\n\n.column {\n    width: 1fr;\n}\n</code></pre> <p> UtilityContainersExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502One\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Two\u2502\u2502Four\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <p>Note how the end result is the same, but the code with context managers is a little easier to read. It is up to you which method you want to use, and you can mix context managers with positional arguments if you like!</p>"},{"location":"guide/layout/#grid","title":"Grid","text":"<p>The <code>grid</code> layout arranges widgets within a grid. Widgets can span multiple rows and columns to create complex layouts. The diagram below hints at what can be achieved using <code>layout: grid</code>.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2ZW3PaRlx1MDAxNMff8yk85DVsds/eM9PpONimwZc40NZ2O52MkFx1MDAxNiQjkCxcdOM4k+/elUhcdTAwMTFcYpNQyrhcdTAwMDQ9aEZnb8e7P875n/XnXHUwMDE3XHUwMDA3XHUwMDA3texTbGpvXHUwMDBlaubBdcLAS5xJ7VVuvzdJXHUwMDFhRCPbXHUwMDA0xXdcdTAwMWGNXHUwMDEzt+jpZ1mcvnn9eugkXHUwMDAzk8Wh41x1MDAxYXRcdTAwMWakYydMs7FcdTAwMTdEyI2Gr4PMXGbTn/P3hTM0P8XR0MtcdTAwMTJULlI3XpBFyXQtXHUwMDEzmqFcdTAwMTllqZ39T/t9cPC5eM95l1x1MDAxODdzRv3QXHUwMDE0XHUwMDAziqbSQVx1MDAwZbRqvYhGhbNSYYEpV3rWIUiP7HKZ8Wxrz7psypbcVLtpnVx1MDAxZl596NavLlx1MDAxZlx1MDAxZVx1MDAxYVx1MDAxZlx1MDAwNmN8d/rQKlftXHUwMDA1YdjJPoWFV25cdTAwMTKlad13Mtcve6RZXHUwMDEyXHLMVeBlvu1DKvbZ2DSyXHUwMDFiUY5KonHfXHUwMDFmmTRdXHUwMDE4XHUwMDEzxY5cdTAwMWJkn3JcdTAwMWLGM+t0I95cdTAwMWOUloeiXHUwMDA3Q1RSzISSfNZSjFx1MDAxNVxuXHUwMDExxjglwCvuNKLQXHUwMDFlgnXnJS6e0qGu41x1MDAwZfrWq5E365MlziiNncRcdTAwMWVV2W/y9Vx1MDAwZmVa2OWVxmJuXHUwMDEx31x1MDAwNH0/s61cdTAwMTRcdTAwMTRSjM45lpriXGKIXHUwMDEyUlGQsjzCfNX4nVfQ8Fd1+3wnib9uUy3NP+Y8zp09nkOpXHUwMDFjPI49Z3rkRFxioFhcYo0xLfcvXGZGXHUwMDAz2zhcdTAwMWGHYWmL3EFJSWH98mpcdTAwMDM6iYaVdFxuKblQhKxN51x1MDAxOVHtWH7sezeP/lHnulx1MDAwMVx1MDAwZbm+XUFnhbBFLuFZuVx1MDAwNFxuXGbIMpdcdTAwMTIxXCL1XHUwMDAysNvnkqFcdTAwMTVQgkBcdTAwMDRcYtZPYSmVXHUwMDEyhCtJfmAsTVx1MDAxOFx1MDAwNnH6NJRCroKSgKCSYGB8bSpvvZPTNlx1MDAxN73r5nEr6pCscXtydrZcdJXPXHUwMDE4LVx0Q0phxVx1MDAxN06/XHUwMDE4K1x1MDAwNdJcdTAwMTJcdTAwMDRcdTAwMTf/LVq+7DlcdTAwMWM4LFx1MDAxM0lcdTAwMDBcdTAwMDFhi9FwxiQhqFx1MDAxYainRCrGXGLYUfr5gSTPXHUwMDAwJFx1MDAwMFlccqSywYNpvj6QN2MxOUs8t3nphONcdTAwMTNcdTAwMTI770izu+NAUo1cdTAwMThwqebPfsojR1x1MDAxNUw3o7GLMd9cdTAwMTaNVHPFlFx1MDAwNrmnNM5tRpVGLG101DZGrk2j4dK9ad+178bvo7fHl0o49cbJjtMobNZcXFx1MDAxNpJcdTAwMTbFLVx1MDAwNEZcdTAwMDJdm123hVwiyVx1MDAxMzVVWvxcdTAwMGapemssfltBXHUwMDEyvlJCMlxuQtn6Zv1cdTAwMDKn58i02ei/u3J9OrlodY/Os4+rkrXvuP44MTvAI1x1MDAxMMujkMtMgqVmSV1unq7FU1xcaoxA0pzL6UR0XHUwMDE5T1x0/0hZpotnXHRTomxxROeF195hOldmV6OmxsDtr1x1MDAxNNbnNFx1MDAxOep2M2xcdTAwMWReXHUwMDBl07f3LGh15MVxvOucUmo5kFhiWk3jgDXKz2KxXHUwMDE22S6oXG4jOc8p2YRT4FQrofT+ckphdfGDqS3KQdP1Of2j0W1cdTAwMDa3V4T83nPdX25cdTAwMWb751x1MDAxN0fOrnNq01x1MDAwNlJSaL7MqY2nXFxhvChEt1x1MDAxY1CZLb6YzJXElEK5XGZqrkB4cZc1XVx1MDAwYosqqfZcdTAwMTclOFx1MDAwNjJcdTAwMTf3941UXHUwMDAyeCWpXHUwMDAyXHUwMDEzRYGT9XXo+aVw621y18x4NOanp93eIVx1MDAxOe06qXnmZ5zj5cKIYkBWjW8h9U9cdTAwMDXp06mfXCLNXGLLg/bmqZ8qZXOCwPurUC2H30j9Np3k97xrg0rYUVx1MDAwMHU2oYG+gUFrXHUwMDEyTn5cdTAwMTk+7DqolDKElV4sX6ac2lpKq8rF/HY53U7mXHUwMDE33Go0YPub+blcdTAwMTIrMZVC2OPjZP1bps71yfk5jDJcdTAwMGbjTP7620X9LIuPdlx1MDAxZNOikpJM4KWLT6ol4lpXWjbhXHUwMDE0QHXNk5yCJohcbrlcdTAwMTCx/1xyofm9PFx1MDAxMXR/XHUwMDAzKdPf0Ka5XHUwMDFlgLl7ju9cdTAwMDH6cVx1MDAxON++T4Pe44fw0L+Pzvw2ucG7XHUwMDBlKLNxlC39X2ZcdTAwMDboVqTpakBcdFx1MDAxM0hPr2FXStPvclxuWFx1MDAxMK2A/Vx1MDAxOJf19l1MWnPiuJPZKW3zlFrrdeB1gkezME3tPjCTt09cdP7iqb34yn7Ol8l9/vzlxZe/XHUwMDAxUO5ccsMifQ== <p>Note</p> <p>Grid layouts in Textual have little in common with browser-based CSS Grid.</p> <p>To get started with grid layout, define the number of columns and rows in your grid with the <code>grid-size</code> CSS property and set <code>layout: grid</code>. Widgets are inserted into the \"cells\" of the grid from left-to-right and top-to-bottom order.</p> <p>The following example creates a 3 x 2 grid and adds six widgets to it</p> Outputgrid_layout1.pygrid_layout1.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout1.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3 2;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>If we were to yield a seventh widget from our <code>compose</code> method, it would not be visible as the grid does not contain enough cells to accommodate it. We can tell Textual to add new rows on demand to fit the number of widgets, by omitting the number of rows from <code>grid-size</code>. The following example creates a grid with three columns, with rows created on demand:</p> Outputgrid_layout2.pygrid_layout2.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Seven\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout2.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n        yield Static(\"Seven\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Since we specified that our grid has three columns (<code>grid-size: 3</code>), and we've yielded seven widgets in total, a third row has been created to accommodate the seventh widget.</p> <p>Now that we know how to define a simple uniform grid, let's look at how we can customize it to create more complex layouts.</p>"},{"location":"guide/layout/#row-and-column-sizes","title":"Row and column sizes","text":"<p>You can adjust the width of columns and the height of rows in your grid using the <code>grid-columns</code> and <code>grid-rows</code> properties. These properties can take multiple values, letting you specify dimensions on a column-by-column or row-by-row basis.</p> <p>Continuing on from our earlier 3x2 example grid, let's adjust the width of the columns using <code>grid-columns</code>. We'll make the first column take up half of the screen width, with the other two columns sharing the remaining space equally.</p> Outputgrid_layout3_row_col_adjust.pygrid_layout3_row_col_adjust.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout3_row_col_adjust.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-columns: 2fr 1fr 1fr;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Since our <code>grid-size</code> is 3 (meaning it has three columns), our <code>grid-columns</code> declaration has three space-separated values. Each of these values sets the width of a column. The first value refers to the left-most column, the second value refers to the next column, and so on. In the example above, we've given the left-most column a width of <code>2fr</code> and the other columns widths of <code>1fr</code>. As a result, the first column is allocated twice the width of the other columns.</p> <p>Similarly, we can adjust the height of a row using <code>grid-rows</code>. In the following example, we use <code>%</code> units to adjust the first row of our grid to <code>25%</code> height, and the second row to <code>75%</code> height (while retaining the <code>grid-columns</code> change from above).</p> Outputgrid_layout4_row_col_adjust.pygrid_layout4_row_col_adjust.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout4_row_col_adjust.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-columns: 2fr 1fr 1fr;\n    grid-rows: 25% 75%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>If you don't specify enough values in a <code>grid-columns</code> or <code>grid-rows</code> declaration, the values you have provided will be \"repeated\". For example, if your grid has four columns (i.e. <code>grid-size: 4;</code>), then <code>grid-columns: 2 4;</code> is equivalent to <code>grid-columns: 2 4 2 4;</code>. If it instead had three columns, then <code>grid-columns: 2 4;</code> would be equivalent to <code>grid-columns: 2 4 2;</code>.</p>"},{"location":"guide/layout/#auto-rows-columns","title":"Auto rows / columns","text":"<p>The <code>grid-columns</code> and <code>grid-rows</code> rules can both accept a value of \"auto\" in place of any of the dimensions, which tells Textual to calculate an optimal size based on the content.</p> <p>Let's modify the previous example to make the first column an <code>auto</code> column.</p> Outputgrid_layout_auto.pygrid_layout_auto.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502First\u00a0column\u2502\u2502Two\u2502\u2502Three\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout_auto.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"First column\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-columns: auto 1fr 1fr;\n    grid-rows: 25% 75%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Notice how the first column is just wide enough to fit the content of each cell. The layout will adjust accordingly if you update the content for any widget in that column.</p>"},{"location":"guide/layout/#cell-spans","title":"Cell spans","text":"<p>Cells may span multiple rows or columns, to create more interesting grid arrangements.</p> <p>To make a single cell span multiple rows or columns in the grid, we need to be able to select it using CSS. To do this, we'll add an ID to the widget inside our <code>compose</code> method so we can set the <code>row-span</code> and <code>column-span</code> properties using CSS.</p> <p>Let's add an ID of <code>#two</code> to the second widget yielded from <code>compose</code>, and give it a <code>column-span</code> of 2 to make that widget span two columns. We'll also add a slight tint using <code>tint: magenta 40%;</code> to draw attention to it.</p> Outputgrid_layout5_col_span.pygrid_layout5_col_span.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u00a0(column-span:\u00a02)\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Three\u2502\u2502Four\u2502\u2502Five\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Six\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout5_col_span.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two [b](column-span: 2)\", classes=\"box\", id=\"two\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n}\n\n#two {\n    column-span: 2;\n    tint: magenta 40%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Notice that the widget expands to fill columns to the right of its original position. Since <code>#two</code> now spans two cells instead of one, all widgets that follow it are shifted along one cell in the grid to accommodate. As a result, the final widget wraps on to a new row at the bottom of the grid.</p> <p>Note</p> <p>In the example above, setting the <code>column-span</code> of <code>#two</code> to be 3 (instead of 2) would have the same effect, since there are only 2 columns available (including <code>#two</code>'s original column).</p> <p>We can similarly adjust the <code>row-span</code> of a cell to have it span multiple rows. This can be used in conjunction with <code>column-span</code>, meaning one cell may span multiple rows and columns. The example below shows <code>row-span</code> in action. We again target widget <code>#two</code> in our CSS, and add a <code>row-span: 2;</code> declaration to it.</p> Outputgrid_layout6_row_span.pygrid_layout6_row_span.tcss <p> GridLayoutExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502One\u2502\u2502Two\u00a0(column-span:\u00a02\u00a0and\u00a0row-span:\u00a02)\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2502\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502\u2502 \u2502Three\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502Four\u2502\u2502Five\u2502\u2502Six\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout6_row_span.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two [b](column-span: 2 and row-span: 2)\", classes=\"box\", id=\"two\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\napp = GridLayoutExample()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n}\n\n#two {\n    column-span: 2;\n    row-span: 2;\n    tint: magenta 40%;\n}\n\n.box {\n    height: 100%;\n    border: solid green;\n}\n</code></pre> <p>Widget <code>#two</code> now spans two columns and two rows, covering a total of four cells. Notice how the other cells are moved to accommodate this change. The widget that previously occupied a single cell now occupies four cells, thus displacing three cells to a new row.</p>"},{"location":"guide/layout/#gutter","title":"Gutter","text":"<p>The spacing between cells in the grid can be adjusted using the <code>grid-gutter</code> CSS property. By default, cells have no gutter, meaning their edges touch each other. Gutter is applied across every cell in the grid, so <code>grid-gutter</code> must be used on a widget with <code>layout: grid</code> (not on a child/cell widget).</p> <p>To illustrate gutter let's set our <code>Screen</code> background color to <code>lightgreen</code>, and the background color of the widgets we yield to <code>darkmagenta</code>. Now if we add <code>grid-gutter: 1;</code> to our grid, one cell of spacing appears between the cells and reveals the light green background of the <code>Screen</code>.</p> Outputgrid_layout7_gutter.pygrid_layout7_gutter.tcss <p> GridLayoutExample OneTwoThree FourFiveSix </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass GridLayoutExample(App):\n    CSS_PATH = \"grid_layout7_gutter.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"One\", classes=\"box\")\n        yield Static(\"Two\", classes=\"box\")\n        yield Static(\"Three\", classes=\"box\")\n        yield Static(\"Four\", classes=\"box\")\n        yield Static(\"Five\", classes=\"box\")\n        yield Static(\"Six\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = GridLayoutExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3;\n    grid-gutter: 1;\n    background: lightgreen;\n}\n\n.box {\n    background: darkmagenta;\n    height: 100%;\n}\n</code></pre> <p>Notice that gutter only applies between the cells in a grid, pushing them away from each other. It doesn't add any spacing between cells and the edges of the parent container.</p> <p>Tip</p> <p>You can also supply two values to the <code>grid-gutter</code> property to set vertical and horizontal gutters respectively. Since terminal cells are typically two times taller than they are wide, it's common to set the horizontal gutter equal to double the vertical gutter (e.g. <code>grid-gutter: 1 2;</code>) in order to achieve visually consistent spacing around grid cells.</p>"},{"location":"guide/layout/#docking","title":"Docking","text":"<p>Widgets may be docked. Docking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container. Docked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2aWXPbNlx1MDAxMIDf8ys0ymvM4D4y0+nItpKocWwnjuOj0+nQJCTSokiWpCxLXHUwMDE5//cuaVXURVx1MDAxZrKqqtGDLWFcdGBcdHy72Fx1MDAwNfDjVa1Wz4axqb+r1c2tY1x1MDAwN76b2IP6m7z8xiSpXHUwMDFmhSBcIsXvNOonTvGkl2Vx+u7t256ddE1cdTAwMTZcdTAwMDe2Y6xcdTAwMWI/7dtBmvVdP7KcqPfWz0wv/TX/e2j3zC9x1HOzxCo72TGun0XJfV8mMD1cdTAwMTNmKbT+O/yu1X5cdTAwMTR/p7RLjJPZYScwRYVCVCrIXHSbLz2MwkJZzDXHTCuMJk/46T70l1x1MDAxOVx1MDAxN8Rt0NmUkryovk9cdTAwMWKNLDiPm7vvveD4YtQ6b3mdstu2XHUwMDFmXHUwMDA0J9kwKNRykihNdzw7c7zyiTRLoq45893MyzWYK5/UTSNcdTAwMTiJslZcdTAwMTL1O15o0nSmTlx1MDAxNNuOn1xy8zJUvsL9SLyrlSW3+TBcYksppLimkk9cdTAwMDR5VVwiLc0wQ4LwOWX2olx1MDAwMOZcdTAwMDCUeY2KT6nOle10O6BT6E6eyVx1MDAxMjtMYzuBmSqfXHUwMDFijF+TaWFRqfRMJ57xO15cdTAwMDZSSpSl2LReqSkmQFLMXHUwMDE4RVxcTVx1MDAwNHmnccstWPhjfuw8O4nHY1RP81x1MDAxZlNcbue6NqdAKiv3Y9e+n28sXHUwMDA0YVx1MDAxYyOtJKJcdTAwMTN54IddXHUwMDEwhv0gKMtcIqdbXCJSlN69WYFNrGklm4wjXCI1k09nM+yfXHUwMDFj73qX3/rdXHUwMDEz3jvY/Vx1MDAxNCFf7lWwOcfXLJVkk1RKhlxiZUuoJJjNUbF2KplVgSRcdTAwMTFcdTAwMTYmQMIyKJHGXHUwMDFhXHUwMDFjXHUwMDA3+lx1MDAxZkNpgsCP0+VIXG5VhaQg4D84werJRLZUvG9uj6L9a9p2/mzEPlx1MDAxYuhwXHUwMDE1XCI35yeFtKhSQmI1RyRcdTAwMDVUheZcdTAwMTS/zE++btuccLJIIyaLxE94xNhic13f08hcdTAwMDVSQlx1MDAwYkV+Tlx1MDAxYVx0IVU0YiykJuA7no6jz0dnXel+uP14ddL63CW94Pw82G5cdTAwMWM1tjSli6s25ZbgL1xcslx1MDAwMcUrhPi6UCyCXGLNlPhJUZSiXG5FmFx1MDAxZKQwsPhkXHUwMDEym8R8O/R6XzzxvXf05f1+s5mNXHUwMDBltptEjKXF5Cx0Y1x1MDAxMl9cdTAwMWE7vsbkXG587rpA1FgqJqT8P6/QXHUwMDBmh41cdTAwMTC5VLpFSlx1MDAxOVx1MDAxM1x1MDAxMOc/PW68uTj8XHUwMDFj68ug2T/5yptcdTAwMTk7v4pdv1x1MDAwMkbPdrx+Yv57XHUwMDFjuVx1MDAwNjTIXFxKkVfldJ3rtFhGJdWWXHUwMDEwRcZ031x1MDAxMF2Ek1wiYtFZ5cZ0XG4miCZywys2jFx1MDAwNkViM3TKXHUwMDA3Mm4qXGJoJJ+R1Vx1MDAxY1x1MDAxZYlcdTAwMTZpXFz3XHUwMDAzX35cdTAwMTmq9vfWzaCRbjudXHUwMDA0c0stYJjXXHUwMDE11FKQ2NGXZjZjn7mMT8iYLYZcdTAwMTHmS1NcdTAwMWJJQCghZJRMXHUwMDE3n3lAMVx1MDAwNF2SK0o2SygkXHUwMDE3SMrNXHUwMDEwqpSsXCKU5IqoZ1x1MDAxMbpz9MGcfo/OzcDP1M7p8V+O23K2n1BlgUdcdTAwMTBswYFiziyBJCMzKdB6XHUwMDExJVpZfFVAXHUwMDA1olQwyjaLJ5jFxvBElVmPRlhTNZ1cdTAwMTY9Rif969PnVn/onO3tfrn0mmfNTvL5z+2nXHUwMDEzsu2lyzthzFKU6lx1MDAxN29ccj1Cp0RcdTAwMTDN4dVcdTAwMWMoQ+A/MaGbXHJAYc2hXHUwMDAyb4RQgmTlLlx1MDAxMURHVEJcdTAwMWH4jGyo8enyMOy6UUz6R3vu7c23bD+Mt1x1MDAxZFFOmSU5X7KjLoWl+Dr8JyHqyiwlXHUwMDE0wotcIrZcdTAwMThcdTAwMTOotVjkXHUwMDE0XHUwMDBibTGxdFx1MDAwZlx1MDAxM1x1MDAxMiRcblx1MDAxM1x1MDAwNPRveIlcdTAwMTeYboZQrFHl1rpSmmBKpnKox1x1MDAwMFx1MDAxNa33e8e/XHRcdTAwMTnstM2+STJFXHUwMDBm+61tXHUwMDA3NF/hXHRcdTAwMTWUqPlcdTAwMTiUQs4uOV5DkvSQXHUwMDBmXHUwMDA1K1x1MDAxOJ83XHUwMDE1XHItI1RbsJapXHUwMDEyYzpcdTAwMGYqpVx1MDAxNFDlerMnQDBykESvi1M7SaLBUi/KKlx1MDAxMWWUS4LwM1x1MDAwZSbbl1xyXHUwMDE571x1MDAwN5/E6FwiuKTy4243XHUwMDFjXHUwMDBlVkN0c8c/WECaRDBmRFx1MDAxMIWEwnKGU5afTT5cZil3NEPuqpDmm1xiXHUwMDEwXHUwMDAyc5jyonu2yChB2lr0n1x1MDAwMoPqXG6vcjJZKLdcdTAwMWGXlMKQPsd/TulhJ9muXHUwMDFmun7YXHUwMDAx4T+M1ian661cdTAwMDKig49fvUBcdTAwMGVcdGmedk4v5ECnX9HpRNdcdTAwMWOjyOnnWu4gXHUwMDBiwlxywlx1MDAxNbhcdTAwMTdCNSyDik891rHjYv4teZ/ojiV3XHUwMDEzfUzoltrMvoCdZntRr+dn8OrHkVx1MDAxZmbzT1x1MDAxNO/SyI3KM7Y7L4WWp2Xz1lx1MDAxN+ctlldcdPJP+a1W4ln8mHz/483Sp3cq+SmkXHUwMDA1OmVcdTAwMWKvpv9XOYvM3GZLfVx1MDAwNa5cZrgkg0BcdTAwMTRcdTAwMDLO0sE+5itcdTAwMWWe5i1dznCxnC1cdTAwMWNcdTAwMTQzXG6xOnn5WUi1k4BwfolbWPBcdFx1MDAxME9cdIhcdP+N449cdEM/pvB6kt+fYeveXHUwMDE0JpK7f4D8N1x1MDAxY047XG6zXHUwMDEzf1TsqKCZ0vd2z1x1MDAwZoYzXHUwMDE4XHUwMDE00OeXa4q2ajDwXHUwMDFkk01PV2qg61wiuVAzlVx1MDAxYYHfya2jXHUwMDFlmPas2WS+Y1x1MDAwN1x1MDAxM3FcdTAwMTZNXHKvXHUwMDAzStjQXFzSWnBcdTAwMWVR4nf80Fx1MDAwZb4tVWglw8XVW02QIVxuSVx1MDAxOFJPz5RcdTAwMGVcdTAwMDJzdINij35cdTAwMThdOFe/XVx1MDAwZkbBaMWt+s2t8lRLaz6NXHUwMDA3O7aUnj+/WfNcdTAwMDVcdTAwMGbMS4VcdTAwMWawXFyMXHUwMDE01lx1MDAxMHuwXHKb7uHxdYNeKXamlZdcXCeDXHUwMDBmo1x1MDAwMTtYm+lyjMRz9qteZrpcdTAwMDf2MOpnY0tJt8F25zRaMUTn1Vx1MDAxN7RcdTAwMTCh+DnXs1x1MDAxZZ7uLbVdxoVFXHUwMDE5yq/hIaXx1GWL+1x1MDAwMJ1Z+rG7g0q2+dXqRqykhbjGeqzA1MZTadJcdTAwMTBcdTAwMWFUXdeCcsGJ5qusyy9cdNVz81OrmN9TQ/VcdTAwMDdXgtlQXHUwMDFkVpj8SFxcUYihJFXlJJahOrG0QkyonzdWr+SokE4jVFx1MDAxNbK/XHUwMDFhN1634/gkg/meTFx1MDAwZiDlu2OfWb5h/cY3g91lR8vFJ3dJxSjnpm/y9/xx9+rub5B4Q/4ifQ== Docked widgetLayout widgets <p>To dock a widget to an edge, add a <code>dock: &lt;EDGE&gt;;</code> declaration to it, where <code>&lt;EDGE&gt;</code> is one of <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code>. For example, a sidebar similar to that shown in the diagram above can be achieved using <code>dock: left;</code>. The code below shows a simple sidebar implementation.</p> Outputdock_layout1_sidebar.pydock_layout1_sidebar.tcss <p> DockLayoutExample SidebarDocking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0\u2587\u2587 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout1_sidebar.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Sidebar\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\nif __name__ == \"__main__\":\n    app = DockLayoutExample()\n    app.run()\n</code></pre> <pre><code>#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre> <p>If we run the app above and scroll down, the body text will scroll but the sidebar does not (note the position of the scrollbar in the output shown above).</p> <p>Docking multiple widgets to the same edge will result in overlap. The first widget yielded from <code>compose</code> will appear below widgets yielded after it. Let's dock a second sidebar, <code>#another-sidebar</code>, to the left of the screen. This new sidebar is double the width of the one previous one, and has a <code>deeppink</code> background.</p> Outputdock_layout2_sidebar.pydock_layout2_sidebar.tcss <p> DockLayoutExample Sidebar1Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0 fixes\u00a0its\u00a0position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0 right,\u00a0bottom,\u00a0or\u00a0left\u00a0edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0 making\u00a0them\u00a0ideal\u00a0for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0 and\u00a0sidebars. \u2587\u2587 Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0 fixes\u00a0its\u00a0position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0 right,\u00a0bottom,\u00a0or\u00a0left\u00a0edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0 making\u00a0them\u00a0ideal\u00a0for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0 and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0 fixes\u00a0its\u00a0position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0 right,\u00a0bottom,\u00a0or\u00a0left\u00a0edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0 making\u00a0them\u00a0ideal\u00a0for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0 and\u00a0sidebars. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout2_sidebar.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Sidebar2\", id=\"another-sidebar\")\n        yield Static(\"Sidebar1\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\napp = DockLayoutExample()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>#another-sidebar {\n    dock: left;\n    width: 30;\n    height: 100%;\n    background: deeppink;\n}\n\n#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre> <p>Notice that the original sidebar (<code>#sidebar</code>) appears on top of the newly docked widget. This is because <code>#sidebar</code> was yielded after <code>#another-sidebar</code> inside the <code>compose</code> method.</p> <p>Of course, we can also dock widgets to multiple edges within the same container. The built-in <code>Header</code> widget contains some internal CSS which docks it to the top. We can yield it inside <code>compose</code>, and without any additional CSS, we get a header fixed to the top of the screen.</p> Outputdock_layout3_sidebar_header.pydock_layout3_sidebar_header.tcss <p> DockLayoutExample Sidebar1DockLayoutExample Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header, Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout3_sidebar_header.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"header\")\n        yield Static(\"Sidebar1\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\nif __name__ == \"__main__\":\n    app = DockLayoutExample()\n    app.run()\n</code></pre> <pre><code>#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre> <p>If we wished for the sidebar to appear below the header, it'd simply be a case of yielding the sidebar before we yield the header.</p>"},{"location":"guide/layout/#layers","title":"Layers","text":"<p>Textual has a concept of layers which gives you finely grained control over the order widgets are placed.</p> <p>When drawing widgets, Textual will first draw on lower layers, working its way up to higher layers. As such, widgets on higher layers will be drawn on top of those on lower layers.</p> <p>Layer names are defined with a <code>layers</code> style on a container (parent) widget. Descendants of this widget can then be assigned to one of these layers using a <code>layer</code> style.</p> <p>The <code>layers</code> style takes a space-separated list of layer names. The leftmost name is the lowest layer, and the rightmost is the highest layer. Therefore, if you assign a descendant to the rightmost layer name, it'll be drawn on the top layer and will be visible above all other descendants.</p> <p>An example <code>layers</code> declaration looks like: <code>layers: one two three;</code>. To add a widget to the topmost layer in this case, you'd add a declaration of <code>layer: three;</code> to it.</p> <p>In the example below, <code>#box1</code> is yielded before <code>#box2</code>. Given our earlier discussion on yield order, you'd expect <code>#box2</code> to appear on top. However, in this case, both <code>#box1</code> and <code>#box2</code> are assigned to layers which define the reverse order, so <code>#box1</code> is on top of <code>#box2</code></p> Outputlayers.pylayers.tcss <p> LayersExample box1\u00a0(layer\u00a0=\u00a0above) box2\u00a0(layer\u00a0=\u00a0below) </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass LayersExample(App):\n    CSS_PATH = \"layers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"box1 (layer = above)\", id=\"box1\")\n        yield Static(\"box2 (layer = below)\", id=\"box2\")\n\n\nif __name__ == \"__main__\":\n    app = LayersExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n    layers: below above;\n}\n\nStatic {\n    width: 28;\n    height: 8;\n    color: auto;\n    content-align: center middle;\n}\n\n#box1 {\n    layer: above;\n    background: darkcyan;\n}\n\n#box2 {\n    layer: below;\n    background: orange;\n    offset: 12 6;\n}\n</code></pre>"},{"location":"guide/layout/#offsets","title":"Offsets","text":"<p>Widgets have a relative offset which is added to the widget's location, after its location has been determined via its parent's layout. This means that if a widget hasn't had its offset modified using CSS or Python code, it will have an offset of <code>(0, 0)</code>.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2ZWVPbSFx1MDAxMIDf+Vx1MDAxNZTzXHUwMDFhK3NcdTAwMWap2triXlxiS8JcdTAwMTVcYlspSkhjWWtZUqQx2Enx37clXHUwMDFjS744XGZhXHR6sK3p0Uxr5utr/GNpeblhXHUwMDA3qWm8X26YvudGoZ+5V423RfulyfIwiUFEyvs86WVe2bNtbZq/f/eu62ZcdTAwMWRj08j1jHNcdTAwMTnmPTfKbc9cdTAwMGZcdTAwMTPHS7rvQmu6+Z/F557bNX+kSde3mVNN0jR+aJPsZi5cdTAwMTOZroltXHUwMDBlo/9cdTAwMDP3y8s/ys+adpnxrFx1MDAxYlx1MDAwN5EpXHUwMDFmKEWVgpywyda9JC6VJVxcaM1cdTAwMDRBo1x1MDAwZWG+XHUwMDBl01njg7RcdTAwMDUqm0pSNDU2/L/pRvvbv70g+1x1MDAxNlxmVulgTZ82q1lbYVx1MDAxNFx1MDAxZNpBVGrlZUmeN9uu9dpVj9xmScechL5tQ1x1MDAxZjzRPno2T2AhqqeypFx1MDAxN7Rjk+djzySp64V2ULSh6lx1MDAxNW5cdTAwMTbi/XLV0i96UO4ohVx1MDAxNNdU8pGkeJYw7miGXHUwMDE5XHUwMDEyhE+os5ZEsFx0oM5cdTAwMWJUXpVCXHUwMDE3rtdcdECr2Fx1MDAxZvWxmVx1MDAxYuepm8FWVf2uhi/KtHCoVHpskrZcdIO2XHUwMDA1KSXKUayuWG7KLSCIYKWkpnokKWZNt/2Shq+Ty9d2s3S4TI28uKlpXFwou1FDqXq4l/ruzZZjIWA5XGJcdTAwMTDBdbV+UVx1MDAxOHdAXHUwMDE496Koaku8TkVJ2Xr9dlx1MDAwMTqxpvPoxJxgyTGW5N54XHUwMDFl2Y39081wV7ubXHUwMDFiJjv1z9OrvXl4TiA2XHUwMDBlJnlWMCVDhLJZYFx1MDAxMswmwHhyMJkzh0pcIlx1MDAxY0ww0jO4xEpQyonC9Dfm0kRRmOazqVx1MDAxNGoulVJcdTAwMTJcdTAwMDFb8lx1MDAwMCqT1Ytm/7CXx53Vg72TY4hcdTAwMDWfcGdcdTAwMTEqn9FdMvBXSlx0idUklZw5UmhO8ePc5ZuWy1x0J9NEYjJN/YhJjFx1MDAxZDYx9VxykUIrXHUwMDBlNqTx61x1MDAwNJKQuW5SIcxcdTAwMDVcdTAwMTX8/jz2XHUwMDBljoONwzPvUH6x4V/euWKnweZcdTAwMGLnUVwiR4PLmY7enDqTcXUxXHUwMDFhL1x1MDAxMOJPRaNUQkjxat0jkWKue0RCYK5FrcedOaV111vrQaY656q/x21rv1x1MDAxYixcdTAwMTS0n1x1MDAxMUdI55hcdTAwMTS8Tt1PXHUwMDFhXHUwMDFmjVwiJlx1MDAxN+B5n1xuRXDgiEtBlfyNWbw9hYQ0cS6OTCHN1Vx1MDAwM2hcXNvaOuqibbZ1XHUwMDE2fVx1MDAxOFxmdnbyj0r259DYdr12LzP/P49Eclx1MDAwN3EhxouYkkilXHUwMDFjOonq4uFazOJSI4fIMn+9XHUwMDE5iE7jKYnDsNRCSabLa1xuU1akXHUwMDE0XHUwMDE0iV9Q6VxmXHUwMDA1XHUwMDE1V7Xt3jnZXHUwMDBm6cpcdTAwMGU/kGebO1v+Jv34feXbaKwxXGLdLEuuXHUwMDFhI8n18NdcdTAwMGIxXHUwMDAyRvlcXCNcdTAwMTBcdTAwMTLyOMJqSe1dVtBstdbTXcp2dz+fb1xyzk74v51IvXQroFx1MDAxYUNcdTAwMTlccu+JucRIsYlUgVx1MDAxMeJcYqxcdTAwMWZf6Vx1MDAwZj30bFugo8OEhW2BgsdiYFxmr8pcdTAwMTRcbv+An8dcdTAwMTSEnpueXHUwMDEwpLDWhUO8tylE6+GXo1x1MDAwM2mClt7vtN0zkXhb+Us3hVwiICguXHUwMDE5marfXHUwMDE4l1x1MDAwZSNS0sdcdTAwMWUr3Fx1MDAxNlx1MDAxMVx1MDAxNHNcdTAwMTRReGhcdTAwMDNcYolcdTAwMDWsXHUwMDAwXHUwMDA24Fx1MDAwNKL373z0dWMnM931/FxmmjHQXHUwMDAxq/s769tccvdBhD7fuVx1MDAxN9RcdTAwMTDFiShDgKnCUvFxTGmR0eC7jlx1MDAxOZRs8YvFXHUwMDBmv6BYccCPa4Uxhe3neFx1MDAxYdPicJgzpYnSklx1MDAwYkbVJKZQknIsXHUwMDE5W6DUKzVdXHUwMDEw08J8yVx1MDAwMzCt6eFmdjWM/TBcdTAwMGVAWMWBn/8zbN8jXHIuqEq8Xrn7XHUwMDBllpD4gVx1MDAxOeNcItxcdTAwMDG8tU6Bm5ZEO1BcdTAwMTiVNfpQdD1Sx8T+3crcno3UlGlcIlx1MDAwN4FLwVx1MDAwNPJdpTVcdTAwMDRRxKbUUY7kRCvGOIJccuVCTilcdTAwMTW5uV1Lut3QwqJ/SsLYTi5uuYorhXW3jetPSuGl6rJJN5BcdTAwMTYjjofj6tdyZSflzej317cze89luLim6K1GW6p/z/Nf1vTtLPfF0S3uiyNYf0iB7u2/Lq8+dE6PV7+vN9m2/Cy7l3ZggpdcdTAwMWVhsdLgv1x1MDAwNNNMICaAqGpFSv8llFx1MDAwM9ZQxC+tMUTbx4TaW51YLauvju6nj1x1MDAwMSTkpFJcdTAwMTDyzMdcdTAwMDBcdTAwMTTXI9lcdTAwMDP8VCuJ7WH4/SZpXHUwMDFia910u2E0XHUwMDE427iSU9D0Y6uVXHUwMDFiW1/L3MCcJZdqrPdKXHUwMDE0XHUwMDA2cZnemdY44jb03GgktkntzT2Y3YXhsu0pk0+yMFxiYzc6XHUwMDFh1+RcdTAwMTFZLNdkro1xjFx1MDAwNUVS3d/G9pvHXHUwMDFl2ewrlVE//JCGe8dcdTAwMWLu2Vx1MDAxM9uYn1x1MDAxNP7yaZNcdTAwMDTmcKRnnLRRSVx1MDAxZHDv4tf+bfsk5Vx1MDAxYyZcZnKEwlx1MDAxYV5TPVfkyVx1MDAwZq/nloaDNtw0PbQw5Cjqw5qE/tDgq2FcdTAwMWGXoblanVV8lFehcmldXHUwMDA1wKZYkVx1MDAxZtdL1/9cdTAwMDE0elVbIn0= Offset <p>The offset of a widget can be set using the <code>offset</code> CSS property. <code>offset</code> takes two values.</p> <ul> <li>The first value defines the <code>x</code> (horizontal) offset. Positive values will shift the widget to the right. Negative values will shift the widget to the left.</li> <li>The second value defines the <code>y</code> (vertical) offset. Positive values will shift the widget down. Negative values will shift the widget up.</li> </ul>"},{"location":"guide/layout/#putting-it-all-together","title":"Putting it all together","text":"<p>The sections above show how the various layouts in Textual can be used to position widgets on screen. In a real application, you'll make use of several layouts.</p> <p>The example below shows how an advanced layout can be built by combining the various techniques described on this page.</p> Outputcombining_layouts.pycombining_layouts.tcss <p> CombiningLayoutsExample \u2b58CombiningLayoutsExample \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502HorizontallyPositionedChildrenHere\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a00\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a01\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2585\u2585\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a02\u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2502\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502Thispanelis\u2502 \u2502\u2502\u2502\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a03\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502usinggrid\u00a0layout!\u2502 \u2502Vertical\u00a0layout,\u00a0child\u00a04\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal, VerticalScroll\nfrom textual.widgets import Header, Static\n\n\nclass CombiningLayoutsExample(App):\n    CSS_PATH = \"combining_layouts.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        with Container(id=\"app-grid\"):\n            with VerticalScroll(id=\"left-pane\"):\n                for number in range(15):\n                    yield Static(f\"Vertical layout, child {number}\")\n            with Horizontal(id=\"top-right\"):\n                yield Static(\"Horizontally\")\n                yield Static(\"Positioned\")\n                yield Static(\"Children\")\n                yield Static(\"Here\")\n            with Container(id=\"bottom-right\"):\n                yield Static(\"This\")\n                yield Static(\"panel\")\n                yield Static(\"is\")\n                yield Static(\"using\")\n                yield Static(\"grid layout!\", id=\"bottom-right-final\")\n\n\nif __name__ == \"__main__\":\n    app = CombiningLayoutsExample()\n    app.run()\n</code></pre> <pre><code>#app-grid {\n    layout: grid;\n    grid-size: 2;  /* two columns */\n    grid-columns: 1fr;\n    grid-rows: 1fr;\n}\n\n#left-pane &gt; Static {\n    background: $boost;\n    color: auto;\n    margin-bottom: 1;\n    padding: 1;\n}\n\n#left-pane {\n    width: 100%;\n    height: 100%;\n    row-span: 2;\n    background: $panel;\n    border: dodgerblue;\n}\n\n#top-right {\n    height: 100%;\n    background: $panel;\n    border: mediumvioletred;\n}\n\n#top-right &gt; Static {\n    width: auto;\n    height: 100%;\n    margin-right: 1;\n    background: $boost;\n}\n\n#bottom-right {\n    height: 100%;\n    layout: grid;\n    grid-size: 3;\n    grid-columns: 1fr;\n    grid-rows: 1fr;\n    grid-gutter: 1;\n    background: $panel;\n    border: greenyellow;\n}\n\n#bottom-right-final {\n    column-span: 2;\n}\n\n#bottom-right &gt; Static {\n    height: 100%;\n    background: $boost;\n}\n</code></pre> <p>Textual layouts make it easy to design and build real-life applications with relatively little code.</p>"},{"location":"guide/queries/","title":"DOM Queries","text":"<p>In the previous chapter we introduced the DOM which is how Textual apps keep track of widgets. We saw how you can apply styles to the DOM with CSS selectors.</p> <p>Selectors are a very useful idea and can do more than apply styles. We can also find widgets in Python code with selectors, and make updates to widgets in a simple expressive way. Let's look at how!</p> <p>Tip</p> <p>See the Textual Query Sandbox project for an interactive way of experimenting with DOM queries.</p>"},{"location":"guide/queries/#query-one","title":"Query one","text":"<p>The query_one method is used to retrieve a single widget that matches a selector or a type.</p> <p>Let's say we have a widget with an ID of <code>send</code> and we want to get a reference to it in our app. We could do this with the following line of code:</p> <pre><code>send_button = self.query_one(\"#send\")\n</code></pre> <p>This will retrieve a widget with an ID of <code>send</code>, if there is exactly one. If there are no matching widgets, Textual will raise a NoMatches exception.</p> <p>You can also add a second parameter for the expected type, which will ensure that you get the type you are expecting.</p> <pre><code>send_button = self.query_one(\"#send\", Button)\n</code></pre> <p>If the matched widget is not a button (i.e. if <code>isinstance(widget, Button)</code> equals <code>False</code>), Textual will raise a WrongType exception.</p> <p>Tip</p> <p>The second parameter allows type-checkers like MyPy to know the exact return type. Without it, MyPy would only know the result of <code>query_one</code> is a Widget (the base class).</p> <p>You can also specify a widget type in place of a selector, which will return a widget of that type. For instance, the following would return a <code>Button</code> instance (assuming there is a single Button).</p> <pre><code>my_button = self.query_one(Button)\n</code></pre>"},{"location":"guide/queries/#making-queries","title":"Making queries","text":"<p>Apps and widgets also have a query method which finds (or queries) widgets. This method returns a DOMQuery object which is a list-like container of widgets.</p> <p>If you call <code>query</code> with no arguments, you will get back a <code>DOMQuery</code> containing all widgets. This method is recursive, meaning it will also return child widgets (as many levels as required).</p> <p>Here's how you might iterate over all the widgets in your app:</p> <pre><code>for widget in self.query():\n    print(widget)\n</code></pre> <p>Called on the <code>app</code>, this will retrieve all widgets in the app. If you call the same method on a widget, it will return the children of that widget.</p> <p>Note</p> <p>All the query and related methods work on both App and Widget sub-classes.</p>"},{"location":"guide/queries/#query-selectors","title":"Query selectors","text":"<p>You can call <code>query</code> with a CSS selector. Let's look a few examples:</p> <p>If we want to find all the button widgets, we could do something like the following:</p> <pre><code>for button in self.query(\"Button\"):\n    print(button)\n</code></pre> <p>Any selector that works in CSS will work with the <code>query</code> method. For instance, if we want to find all the disabled buttons in a Dialog widget, we could do this:</p> <pre><code>for button in self.query(\"Dialog Button.disabled\"):\n    print(button)\n</code></pre> <p>Info</p> <p>The selector <code>Dialog Button.disabled</code> says find all the <code>Button</code> with a CSS class of <code>disabled</code> that are a child of a <code>Dialog</code> widget.</p>"},{"location":"guide/queries/#results","title":"Results","text":"<p>Query objects have a results method which is an alternative way of iterating over widgets. If you supply a type (i.e. a Widget class) then this method will generate only objects of that type.</p> <p>The following example queries for widgets with the <code>disabled</code> CSS class and iterates over just the Button objects.</p> <pre><code>for button in self.query(\".disabled\").results(Button):\n    print(button)\n</code></pre> <p>Tip</p> <p>This method allows type-checkers like MyPy to know the exact type of the object in the loop. Without it, MyPy would only know that <code>button</code> is a <code>Widget</code> (the base class).</p>"},{"location":"guide/queries/#query-objects","title":"Query objects","text":"<p>We've seen that the query method returns a DOMQuery object you can iterate over in a for loop. Query objects behave like Python lists and support all of the same operations (such as <code>query[0]</code>, <code>len(query)</code> ,<code>reverse(query)</code> etc). They also have a number of other methods to simplify retrieving and modifying widgets.</p>"},{"location":"guide/queries/#first-and-last","title":"First and last","text":"<p>The first and last methods return the first or last matching widget from the selector, respectively.</p> <p>Here's how we might find the last button in an app:</p> <pre><code>last_button = self.query(\"Button\").last()\n</code></pre> <p>If there are no buttons, Textual will raise a NoMatches exception. Otherwise it will return a button widget.</p> <p>Both <code>first()</code> and <code>last()</code> accept an <code>expect_type</code> argument that should be the class of the widget you are expecting. Let's say we want to get the last widget with class <code>.disabled</code>, and we want to check it really is a button. We could do this:</p> <pre><code>disabled_button = self.query(\".disabled\").last(Button)\n</code></pre> <p>The query selects all widgets with a <code>disabled</code> CSS class. The <code>last</code> method gets the last disabled widget and checks it is a <code>Button</code> and not any other kind of widget.</p> <p>If the last widget is not a button, Textual will raise a WrongType exception.</p> <p>Tip</p> <p>Specifying the expected type allows type-checkers like MyPy to know the exact return type.</p>"},{"location":"guide/queries/#filter","title":"Filter","text":"<p>Query objects have a filter method which further refines a query. This method will return a new query object with widgets that match both the original query and the new selector.</p> <p>Let's say we have a query which gets all the buttons in an app, and we want a new query object with just the disabled buttons. We could write something like this:</p> <pre><code># Get all the Buttons\nbuttons_query = self.query(\"Button\")\n# Buttons with 'disabled' CSS class\ndisabled_buttons = buttons_query.filter(\".disabled\")\n</code></pre> <p>Iterating over <code>disabled_buttons</code> will give us all the disabled buttons.</p>"},{"location":"guide/queries/#exclude","title":"Exclude","text":"<p>Query objects have an exclude method which is the logical opposite of filter. The <code>exclude</code> method removes any widgets from the query object which match a selector.</p> <p>Here's how we could get all the buttons which don't have the <code>disabled</code> class set.</p> <pre><code># Get all the Buttons\nbuttons_query = self.query(\"Button\")\n# Remove all the Buttons with the 'disabled' CSS class\nenabled_buttons = buttons_query.exclude(\".disabled\")\n</code></pre>"},{"location":"guide/queries/#loop-free-operations","title":"Loop-free operations","text":"<p>Once you have a query object, you can loop over it to call methods on the matched widgets. Query objects also support a number of methods which make an update to every matched widget without an explicit loop.</p> <p>For instance, let's say we want to disable all buttons in an app. We could do this by calling add_class() on a query object.</p> <pre><code>self.query(\"Button\").add_class(\"disabled\")\n</code></pre> <p>This single line is equivalent to the following:</p> <pre><code>for widget in self.query(\"Button\"):\n    widget.add_class(\"disabled\")\n</code></pre> <p>Here are the other loop-free methods on query objects:</p> <ul> <li>add_class Adds a CSS class (or classes) to matched widgets.</li> <li>blur Blurs (removes focus) from matching widgets.</li> <li>focus Focuses the first matching widgets.</li> <li>refresh Refreshes matched widgets.</li> <li>remove_class Removes a CSS class (or classes) from matched widgets.</li> <li>remove Removes matched widgets from the DOM.</li> <li>set_class Sets a CSS class (or classes) on matched widgets.</li> <li>set Sets common attributes on a widget.</li> <li>toggle_class Sets a CSS class (or classes) if it is not set, or removes the class (or classes) if they are set on the matched widgets.</li> </ul>"},{"location":"guide/reactivity/","title":"Reactivity","text":"<p>Textual's reactive attributes are attributes with superpowers. In this chapter we will look at how reactive attributes can simplify your apps.</p> <p>Quote</p> <p>With great power comes great responsibility.</p> <p>\u2014 Uncle Ben</p>"},{"location":"guide/reactivity/#reactive-attributes","title":"Reactive attributes","text":"<p>Textual provides an alternative way of adding attributes to your widget or App, which doesn't require adding them to your class constructor (<code>__init__</code>). To create these attributes import reactive from <code>textual.reactive</code>, and assign them in the class scope.</p> <p>The following code illustrates how to create reactive attributes:</p> <pre><code>from textual.reactive import reactive\nfrom textual.widget import Widget\n\nclass Reactive(Widget):\n\n    name = reactive(\"Paul\")  # (1)!\n    count = reactive(0) # (2)!\n    is_cool = reactive(True)  # (3)!\n</code></pre> <ol> <li>Create a string attribute with a default of <code>\"Paul\"</code></li> <li>Creates an integer attribute with a default of <code>0</code>.</li> <li>Creates a boolean attribute with a default of <code>True</code>.</li> </ol> <p>The <code>reactive</code> constructor accepts a default value as the first positional argument.</p> <p>Information</p> <p>Textual uses Python's descriptor protocol to create reactive attributes, which is the same protocol used by the builtin <code>property</code> decorator.</p> <p>You can get and set these attributes in the same way as if you had assigned them in an <code>__init__</code> method. For instance <code>self.name = \"Jessica\"</code>, <code>self.count += 1</code>, or <code>print(self.is_cool)</code>.</p>"},{"location":"guide/reactivity/#dynamic-defaults","title":"Dynamic defaults","text":"<p>You can also set the default to a function (or other callable). Textual will call this function to get the default value. The following code illustrates a reactive value which will be automatically assigned the current time when the widget is created:</p> <pre><code>from time import time\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\n\nclass Timer(Widget):\n\n    start_time = reactive(time)  # (1)!\n</code></pre> <ol> <li>The <code>time</code> function returns the current time in seconds.</li> </ol>"},{"location":"guide/reactivity/#typing-reactive-attributes","title":"Typing reactive attributes","text":"<p>There is no need to specify a type hint if a reactive attribute has a default value, as type checkers will assume the attribute is the same type as the default.</p> <p>You may want to add explicit type hints if the attribute type is a superset of the default type. For instance if you want to make an attribute optional. Here's how you would create a reactive string attribute which may be <code>None</code>:</p> <pre><code>    name: reactive[str | None] = reactive(\"Paul\")\n</code></pre>"},{"location":"guide/reactivity/#smart-refresh","title":"Smart refresh","text":"<p>The first superpower we will look at is \"smart refresh\". When you modify a reactive attribute, Textual will make note of the fact that it has changed and refresh automatically.</p> <p>Information</p> <p>If you modify multiple reactive attributes, Textual will only do a single refresh to minimize updates.</p> <p>Let's look at an example which illustrates this. In the following app, the value of an input is used to update a \"Hello, World!\" type greeting.</p> refresh01.pyrefresh01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input\n\n\nclass Name(Widget):\n    \"\"\"Generates a greeting.\"\"\"\n\n    who = reactive(\"name\")\n\n    def render(self) -&gt; str:\n        return f\"Hello, {self.who}!\"\n\n\nclass WatchApp(App):\n    CSS_PATH = \"refresh01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter your name\")\n        yield Name()\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        self.query_one(Name).who = event.value\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\nName {\n    height: 100%;\n    content-align: center middle;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aTextual\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e Hello,\u00a0Textual! </p> <p>The <code>Name</code> widget has a reactive <code>who</code> attribute. When the app modifies that attribute, a refresh happens automatically.</p> <p>Information</p> <p>Textual will check if a value has really changed, so assigning the same value wont prompt an unnecessary refresh.</p>"},{"location":"guide/reactivity/#disabling-refresh","title":"Disabling refresh","text":"<p>If you don't want an attribute to prompt a refresh or layout but you still want other reactive superpowers, you can use var to create an attribute. You can import <code>var</code> from <code>textual.reactive</code>.</p> <p>The following code illustrates how you create non-refreshing reactive attributes.</p> <pre><code>class MyWidget(Widget):\n    count = var(0)  # (1)!\n</code></pre> <ol> <li>Changing <code>self.count</code> wont cause a refresh or layout.</li> </ol>"},{"location":"guide/reactivity/#layout","title":"Layout","text":"<p>The smart refresh feature will update the content area of a widget, but will not change its size. If modifying an attribute should change the size of the widget, you can set <code>layout=True</code> on the reactive attribute. This ensures that your CSS layout will update accordingly.</p> <p>The following example modifies \"refresh01.py\" so that the greeting has an automatic width.</p> refresh02.pyrefresh02.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input\n\n\nclass Name(Widget):\n    \"\"\"Generates a greeting.\"\"\"\n\n    who = reactive(\"name\", layout=True)  # (1)!\n\n    def render(self) -&gt; str:\n        return f\"Hello, {self.who}!\"\n\n\nclass WatchApp(App):\n    CSS_PATH = \"refresh02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter your name\")\n        yield Name()\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        self.query_one(Name).who = event.value\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <ol> <li>This attribute will update the layout when changed.</li> </ol> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\nName {\n    width: auto;\n    height: auto;\n    border: heavy $secondary;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aname\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Hello,\u00a0name!\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>If you type in to the input now, the greeting will expand to fit the content. If you were to set <code>layout=False</code> on the reactive attribute, you should see that the box remains the same size when you type.</p>"},{"location":"guide/reactivity/#validation","title":"Validation","text":"<p>The next superpower we will look at is validation, which can check and potentially modify a value you assign to a reactive attribute.</p> <p>If you add a method that begins with <code>validate_</code> followed by the name of your attribute, it will be called when you assign a value to that attribute. This method should accept the incoming value as a positional argument, and return the value to set (which may be the same or a different value).</p> <p>A common use for this is to restrict numbers to a given range. The following example keeps a count. There is a button to increase the count, and a button to decrease it. The validation ensures that the count will never go above 10 or below zero.</p> validate01.pyvalidate01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive\nfrom textual.widgets import Button, RichLog\n\n\nclass ValidateApp(App):\n    CSS_PATH = \"validate01.tcss\"\n\n    count = reactive(0)\n\n    def validate_count(self, count: int) -&gt; int:\n        \"\"\"Validate value.\"\"\"\n        if count &lt; 0:\n            count = 0\n        elif count &gt; 10:\n            count = 10\n        return count\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Button(\"+1\", id=\"plus\", variant=\"success\"),\n            Button(\"-1\", id=\"minus\", variant=\"error\"),\n            id=\"buttons\",\n        )\n        yield RichLog(highlight=True)\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"plus\":\n            self.count += 1\n        else:\n            self.count -= 1\n        self.query_one(RichLog).write(f\"count = {self.count}\")\n\n\nif __name__ == \"__main__\":\n    app = ValidateApp()\n    app.run()\n</code></pre> <pre><code>#buttons {\n    dock: top;\n    height: auto;\n}\n</code></pre> <p> ValidateApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0+1\u00a0\u00a0-1\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>If you click the buttons in the above example it will show the current count. When <code>self.count</code> is modified in the button handler, Textual runs <code>validate_count</code> which performs the validation to limit the value of count.</p>"},{"location":"guide/reactivity/#watch-methods","title":"Watch methods","text":"<p>Watch methods are another superpower. Textual will call watch methods when reactive attributes are modified. Watch method names begin with <code>watch_</code> followed by the name of the attribute, and should accept one or two arguments. If the method accepts a single argument, it will be called with the new assigned value. If the method accepts two positional arguments, it will be called with both the old value and the new value.</p> <p>The following app will display any color you type in to the input. Try it with a valid color in Textual CSS. For example <code>\"darkorchid\"</code> or <code>\"#52de44\"</code>.</p> watch01.pywatch01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color, ColorParseError\nfrom textual.containers import Grid\nfrom textual.reactive import reactive\nfrom textual.widgets import Input, Static\n\n\nclass WatchApp(App):\n    CSS_PATH = \"watch01.tcss\"\n\n    color = reactive(Color.parse(\"transparent\"))  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a color\")\n        yield Grid(Static(id=\"old\"), Static(id=\"new\"), id=\"colors\")\n\n    def watch_color(self, old_color: Color, new_color: Color) -&gt; None:  # (2)!\n        self.query_one(\"#old\").styles.background = old_color\n        self.query_one(\"#new\").styles.background = new_color\n\n    def on_input_submitted(self, event: Input.Submitted) -&gt; None:\n        try:\n            input_color = Color.parse(event.value)\n        except ColorParseError:\n            pass\n        else:\n            self.query_one(Input).value = \"\"\n            self.color = input_color  # (3)!\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <ol> <li>Creates a reactive color attribute.</li> <li>Called when <code>self.color</code> is changed.</li> <li>New color is assigned here.</li> </ol> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\n#colors {\n    grid-size: 2 1;\n    grid-gutter: 2 4;\n    grid-columns: 1fr;\n    margin: 0 1;\n}\n\n#old {\n    height: 100%;\n    border: wide $secondary;\n}\n\n#new {\n    height: 100%;\n    border: wide $secondary;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258adarkorchid\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u258e\u258a\u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>The color is parsed in <code>on_input_submitted</code> and assigned to <code>self.color</code>. Because <code>color</code> is reactive, Textual also calls <code>watch_color</code> with the old and new values.</p>"},{"location":"guide/reactivity/#when-are-watch-methods-called","title":"When are watch methods called?","text":"<p>Textual only calls watch methods if the value of a reactive attribute changes. If the newly assigned value is the same as the previous value, the watch method is not called. You can override this behavior by passing <code>always_update=True</code> to <code>reactive</code>.</p>"},{"location":"guide/reactivity/#dynamically-watching-reactive-attributes","title":"Dynamically watching reactive attributes","text":"<p>You can programmatically add watchers to reactive attributes with the method <code>watch</code>. This is useful when you want to react to changes to reactive attributes for which you can't edit the watch methods.</p> <p>The example below shows a widget <code>Counter</code> that defines a reactive attribute <code>counter</code>. The app that uses <code>Counter</code> uses the method <code>watch</code> to keep its progress bar synced with the reactive attribute:</p> dynamic_watch.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Button, Label, ProgressBar\n\n\nclass Counter(Widget):\n    DEFAULT_CSS = \"Counter { height: auto; }\"\n    counter = reactive(0)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label()\n        yield Button(\"+10\")\n\n    def on_button_pressed(self) -&gt; None:\n        self.counter += 10\n\n    def watch_counter(self, counter_value: int):\n        self.query_one(Label).update(str(counter_value))\n\n\nclass WatchApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        yield Counter()\n        yield ProgressBar(total=100, show_eta=False)\n\n    def on_mount(self):\n        def update_progress(counter_value: int):  # (2)!\n            self.query_one(ProgressBar).update(progress=counter_value)\n\n        self.watch(self.query_one(Counter), \"counter\", update_progress)  # (3)!\n\n\nif __name__ == \"__main__\":\n    WatchApp().run()\n</code></pre> <ol> <li><code>counter</code> is a reactive attribute defined inside <code>Counter</code>.</li> <li><code>update_progress</code> is a custom callback that will update the progress bar when <code>counter</code> changes.</li> <li>We use the method <code>watch</code> to set <code>update_progress</code> as an additional watcher for the reactive attribute <code>counter</code>.</li> </ol> <p> WatchApp 10\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0+10\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250110%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p>"},{"location":"guide/reactivity/#recompose","title":"Recompose","text":"<p>An alternative to a refresh is recompose. If you set <code>recompose=True</code> on a reactive, then Textual will remove all the child widgets and call <code>compose()</code> again, when the reactive attribute changes. The process of removing and mounting new widgets occurs in a single update, so it will appear as though the content has simply updated.</p> <p>The following example uses recompose:</p> refresh03.pyrefresh03.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label\n\n\nclass Name(Widget):\n    \"\"\"Generates a greeting.\"\"\"\n\n    who = reactive(\"name\", recompose=True)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:  # (2)!\n        yield Label(f\"Hello, {self.who}!\")\n\n\nclass WatchApp(App):\n    CSS_PATH = \"refresh02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter your name\")\n        yield Name()\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        self.query_one(Name).who = event.value\n\n\nif __name__ == \"__main__\":\n    app = WatchApp()\n    app.run()\n</code></pre> <ol> <li>Setting <code>recompose=True</code> will cause all child widgets to be removed and <code>compose</code> called again to add new widgets.</li> <li>This <code>compose()</code> method will be called when <code>who</code> is changed.</li> </ol> <pre><code>Input {\n    dock: top;\n    margin-top: 1;\n}\n\nName {\n    width: auto;\n    height: auto;\n    border: heavy $secondary;\n}\n</code></pre> <p> WatchApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aPaul\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Hello,\u00a0Paul!\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>While the end-result is identical to <code>refresh02.py</code>, this code works quite differently. The main difference is that recomposing creates an entirely new set of child widgets rather than updating existing widgets. So when the <code>who</code> attribute changes, the <code>Name</code> widget will replace its <code>Label</code> with a new instance (containing updated content).</p> <p>Warning</p> <p>You should avoid storing a reference to child widgets when using recompose. Better to query for a child widget when you need them.</p> <p>It is important to note that any child widgets will have their state reset after a recompose. For simple content, that doesn't matter much. But widgets with an internal state (such as <code>DataTable</code>, <code>Input</code>, or <code>TextArea</code>) would not be particularly useful if recomposed.</p> <p>Recomposing is slightly less efficient than a simple refresh, and best avoided if you need to update rapidly or you have many child widgets. That said, it can often simplify your code. Let's look at a practical example. First a version without recompose:</p> recompose01.pyOutput <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widgets import Digits\n\n\nclass Clock(App):\n\n    CSS = \"\"\"\n    Screen {align: center middle}\n    Digits {width: auto}\n    \"\"\"\n\n    time: reactive[datetime] = reactive(datetime.now, init=False)\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(f\"{self.time:%X}\")\n\n    def watch_time(self) -&gt; None:  # (1)!\n        self.query_one(Digits).update(f\"{self.time:%X}\")\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.set_interval(1, self.update_time)  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = Clock()\n    app.run()\n</code></pre> <ol> <li>Called when the <code>time</code> attribute changes.</li> <li>Update the time once a second.</li> </ol> <p> Clock \u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u257b\u00a0\u257b\u250f\u2501\u2513 \u00a0\u2503\u00a0\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u252b\u2517\u2501\u252b \u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u00a0\u00a0\u2579\u257a\u2501\u251b </p> <p>This displays a clock which updates once a second. The code is straightforward, but note how we format the time in two places: <code>compose()</code> and <code>watch_time()</code>. We can simplify this by recomposing rather than refreshing:</p> recompose02.pyOutput <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widgets import Digits\n\n\nclass Clock(App):\n\n    CSS = \"\"\"\n    Screen {align: center middle}\n    Digits {width: auto}\n    \"\"\"\n\n    time: reactive[datetime] = reactive(datetime.now, recompose=True)\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(f\"{self.time:%X}\")\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    app = Clock()\n    app.run()\n</code></pre> <p> Clock \u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u257b\u00a0\u257b\u250f\u2501\u2513 \u00a0\u2503\u00a0\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u252b\u2517\u2501\u252b \u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u00a0\u00a0\u2579\u257a\u2501\u251b </p> <p>In this version, the app is recomposed when the <code>time</code> attribute changes, which replaces the <code>Digits</code> widget with a new instance and updated time. There's no need for the <code>watch_time</code> method, because the new <code>Digits</code> instance will already show the current time.</p>"},{"location":"guide/reactivity/#compute-methods","title":"Compute methods","text":"<p>Compute methods are the final superpower offered by the <code>reactive</code> descriptor. Textual runs compute methods to calculate the value of a reactive attribute. Compute methods begin with <code>compute_</code> followed by the name of the reactive value.</p> <p>You could be forgiven in thinking this sounds a lot like Python's property decorator. The difference is that Textual will cache the value of compute methods, and update them when any other reactive attribute changes.</p> <p>The following example uses a computed attribute. It displays three inputs for each color component (red, green, and blue). If you enter numbers in to these inputs, the background color of another widget changes.</p> computed01.pycomputed01.tcssOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive\nfrom textual.widgets import Input, Static\n\n\nclass ComputedApp(App):\n    CSS_PATH = \"computed01.tcss\"\n\n    red = reactive(0)\n    green = reactive(0)\n    blue = reactive(0)\n    color = reactive(Color.parse(\"transparent\"))\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            Input(\"0\", placeholder=\"Enter red 0-255\", id=\"red\"),\n            Input(\"0\", placeholder=\"Enter green 0-255\", id=\"green\"),\n            Input(\"0\", placeholder=\"Enter blue 0-255\", id=\"blue\"),\n            id=\"color-inputs\",\n        )\n        yield Static(id=\"color\")\n\n    def compute_color(self) -&gt; Color:  # (1)!\n        return Color(self.red, self.green, self.blue).clamped\n\n    def watch_color(self, color: Color) -&gt; None:  # (2)\n        self.query_one(\"#color\").styles.background = color\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:\n        try:\n            component = int(event.value)\n        except ValueError:\n            self.bell()\n        else:\n            if event.input.id == \"red\":\n                self.red = component\n            elif event.input.id == \"green\":\n                self.green = component\n            else:\n                self.blue = component\n\n\nif __name__ == \"__main__\":\n    app = ComputedApp()\n    app.run()\n</code></pre> <ol> <li>Combines color components in to a Color object.</li> <li>The watch method is called when the result of <code>compute_color</code> changes.</li> </ol> <pre><code>#color-inputs {\n    dock: top;\n    height: auto;\n}\n\nInput {\n    width: 1fr;\n}\n\n#color {\n    height: 100%;\n    border: tall $secondary;\n}\n</code></pre> <p> ComputedApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a0\u258e\u258a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e\u258a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the <code>compute_color</code> method which combines the color components into a Color object. It will be recalculated when any of the <code>red</code> , <code>green</code>, or <code>blue</code> attributes are modified.</p> <p>When the result of <code>compute_color</code> changes, Textual will also call <code>watch_color</code> since <code>color</code> still has the watch method superpower.</p> <p>Note</p> <p>Textual will first attempt to call the compute method for a reactive attribute, followed by the validate method, and finally the watch method.</p> <p>Note</p> <p>It is best to avoid doing anything slow or CPU-intensive in a compute method. Textual calls compute methods on an object when any reactive attribute changes.</p>"},{"location":"guide/reactivity/#setting-reactives-without-superpowers","title":"Setting reactives without superpowers","text":"<p>You may find yourself in a situation where you want to set a reactive value, but you don't want to invoke watchers or the other super powers. This is fairly common in constructors which run prior to mounting; any watcher which queries the DOM may break if the widget has not yet been mounted.</p> <p>To work around this issue, you can call set_reactive as an alternative to setting the attribute. The <code>set_reactive</code> method accepts the reactive attribute (as a class variable) and the new value.</p> <p>Let's look at an example. The following app is intended to cycle through various greeting when you press Space, however it contains a bug.</p> set_reactive01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive, var\nfrom textual.widgets import Label\n\nGREETINGS = [\n    \"Bonjour\",\n    \"Hola\",\n    \"\u3053\u3093\u306b\u3061\u306f\",\n    \"\u4f60\u597d\",\n    \"\uc548\ub155\ud558\uc138\uc694\",\n    \"Hello\",\n]\n\n\nclass Greeter(Horizontal):\n    \"\"\"Display a greeting and a name.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Greeter {\n        width: auto;\n        height: 1;\n        &amp; Label {\n            margin: 0 1;\n        }\n    }\n    \"\"\"\n    greeting: reactive[str] = reactive(\"\")\n    who: reactive[str] = reactive(\"\")\n\n    def __init__(self, greeting: str = \"Hello\", who: str = \"World!\") -&gt; None:\n        super().__init__()\n        self.greeting = greeting  # (1)!\n        self.who = who\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.greeting, id=\"greeting\")\n        yield Label(self.who, id=\"name\")\n\n    def watch_greeting(self, greeting: str) -&gt; None:\n        self.query_one(\"#greeting\", Label).update(greeting)  # (2)!\n\n    def watch_who(self, who: str) -&gt; None:\n        self.query_one(\"#who\", Label).update(who)\n\n\nclass NameApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n    greeting_no: var[int] = var(0)\n    BINDINGS = [(\"space\", \"greeting\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Greeter(who=\"Textual\")\n\n    def action_greeting(self) -&gt; None:\n        self.greeting_no = (self.greeting_no + 1) % len(GREETINGS)\n        self.query_one(Greeter).greeting = GREETINGS[self.greeting_no]\n\n\nif __name__ == \"__main__\":\n    app = NameApp()\n    app.run()\n</code></pre> <ol> <li>Setting this reactive attribute invokes a watcher.</li> <li>The watcher attempts to update a label before it is mounted.</li> </ol> <p>If you run this app, you will find Textual raises a <code>NoMatches</code> error in <code>watch_greeting</code>.  This is because the constructor has assigned the reactive before the widget has fully mounted.</p> <p>The following app contains a fix for this issue:</p> set_reactive02.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.reactive import reactive, var\nfrom textual.widgets import Label\n\nGREETINGS = [\n    \"Bonjour\",\n    \"Hola\",\n    \"\u3053\u3093\u306b\u3061\u306f\",\n    \"\u4f60\u597d\",\n    \"\uc548\ub155\ud558\uc138\uc694\",\n    \"Hello\",\n]\n\n\nclass Greeter(Horizontal):\n    \"\"\"Display a greeting and a name.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Greeter {\n        width: auto;\n        height: 1;\n        &amp; Label {\n            margin: 0 1;\n        }\n    }\n    \"\"\"\n    greeting: reactive[str] = reactive(\"\")\n    who: reactive[str] = reactive(\"\")\n\n    def __init__(self, greeting: str = \"Hello\", who: str = \"World!\") -&gt; None:\n        super().__init__()\n        self.set_reactive(Greeter.greeting, greeting)  # (1)!\n        self.set_reactive(Greeter.who, who)\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.greeting, id=\"greeting\")\n        yield Label(self.who, id=\"name\")\n\n    def watch_greeting(self, greeting: str) -&gt; None:\n        self.query_one(\"#greeting\", Label).update(greeting)\n\n    def watch_who(self, who: str) -&gt; None:\n        self.query_one(\"#who\", Label).update(who)\n\n\nclass NameApp(App):\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n    greeting_no: var[int] = var(0)\n    BINDINGS = [(\"space\", \"greeting\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Greeter(who=\"Textual\")\n\n    def action_greeting(self) -&gt; None:\n        self.greeting_no = (self.greeting_no + 1) % len(GREETINGS)\n        self.query_one(Greeter).greeting = GREETINGS[self.greeting_no]\n\n\nif __name__ == \"__main__\":\n    app = NameApp()\n    app.run()\n</code></pre> <ol> <li>The attribute is set via <code>set_reactive</code>, which avoids calling the watcher.</li> </ol> <p> NameApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hello\u00a0Textual\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p>The line <code>self.set_reactive(Greeter.greeting, greeting)</code> sets the <code>greeting</code> attribute but doesn't immediately invoke the watcher.</p>"},{"location":"guide/reactivity/#mutable-reactives","title":"Mutable reactives","text":"<p>Textual can detect when you set a reactive to a new value, but it can't detect when you mutate a value. In practice, this means that Textual can detect changes to basic types (int, float, str, etc.), but not if you update a collection, such as a list or dict. </p> <p>You can still use collections and other mutable objects in reactives, but you will need to call <code>mutate_reactive</code> after making changes for the reactive superpowers to work.</p> <p>Here's an example, that uses a reactive list:</p> set_reactive03.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widgets import Input, Label\n\n\nclass MultiGreet(App):\n    names: reactive[list[str]] = reactive(list, recompose=True)  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Give me a name\")\n        for name in self.names:\n            yield Label(f\"Hello, {name}\")\n\n    def on_input_submitted(self, event: Input.Changed) -&gt; None:\n        self.names.append(event.value)\n        self.mutate_reactive(MultiGreet.names)  # (2)!\n\n\nif __name__ == \"__main__\":\n    app = MultiGreet()\n    app.run()\n</code></pre> <ol> <li>Creates a reactive list of strings.</li> <li>Explicitly mutate the reactive list.</li> </ol> <p> MultiGreet \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aGive\u00a0me\u00a0a\u00a0name\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e Hello,\u00a0Will\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p>Note the call to <code>mutate_reactive</code>. Without it, the display would not update when a new name is appended to the list.</p>"},{"location":"guide/reactivity/#data-binding","title":"Data binding","text":"<p>Reactive attributes may be bound (connected) to attributes on child widgets, so that changes to the parent are automatically reflected in the children. This can simplify working with compound widgets where the value of an attribute might be used in multiple places.</p> <p>To bind reactive attributes, call data_bind on a widget. This method accepts reactives (as class attributes) in positional arguments or keyword arguments.</p> <p>Let's look at an app that could benefit from data binding. In the following code we have a <code>WorldClock</code> widget which displays the time in any given timezone.</p> <p>Note</p> <p>This example uses the pytz library for working with timezones. You can install pytz with <code>pip install pytz</code>.</p> world_clock01.pyworld_clock01.tcssOutput <pre><code>from datetime import datetime\n\nfrom pytz import timezone\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Digits, Label\n\n\nclass WorldClock(Widget):\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def __init__(self, timezone: str) -&gt; None:\n        self.timezone = timezone\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.timezone)\n        yield Digits()\n\n    def watch_time(self, time: datetime) -&gt; None:\n        localized_time = time.astimezone(timezone(self.timezone))\n        self.query_one(Digits).update(localized_time.strftime(\"%H:%M:%S\"))\n\n\nclass WorldClockApp(App):\n    CSS_PATH = \"world_clock01.tcss\"\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def compose(self) -&gt; ComposeResult:\n        yield WorldClock(\"Europe/London\")\n        yield WorldClock(\"Europe/Paris\")\n        yield WorldClock(\"Asia/Tokyo\")\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def watch_time(self, time: datetime) -&gt; None:\n        for world_clock in self.query(WorldClock):  # (1)!\n            world_clock.time = time\n\n    def on_mount(self) -&gt; None:\n        self.update_time()\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    app = WorldClockApp()\n    app.run()\n</code></pre> <ol> <li>Update the <code>time</code> reactive attribute of every <code>WorldClock</code>.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nWorldClock {\n    width: auto;\n    height: auto;\n    padding: 1 2;\n    background: $panel;\n    border: wide $background;\n\n    &amp; Digits {\n        width: auto;\n        color: $secondary;\n    }\n}\n</code></pre> <p> WorldClockApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/London\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u00a0\u2503\u00a0\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/Paris\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u257a\u253b\u2578\u257a\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eAsia/Tokyo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u2503\u00a0\u2503\u250f\u2501\u251b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u2517\u2501\u251b\u2517\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>We've added three world clocks for London, Paris, and Tokyo. The clocks are kept up-to-date by watching the app's <code>time</code> reactive, and updating the clocks in a loop.</p> <p>While this approach works fine, it does require we take care to update every <code>WorldClock</code> we mount. Let's see how data binding can simplify this.</p> <p>The following app calls <code>data_bind</code> on the world clock widgets to connect the app's <code>time</code> with the widget's <code>time</code> attribute:</p> world_clock02.pyworld_clock01.tcssOutput <pre><code>from datetime import datetime\n\nfrom pytz import timezone\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Digits, Label\n\n\nclass WorldClock(Widget):\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def __init__(self, timezone: str) -&gt; None:\n        self.timezone = timezone\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.timezone)\n        yield Digits()\n\n    def watch_time(self, time: datetime) -&gt; None:\n        localized_time = time.astimezone(timezone(self.timezone))\n        self.query_one(Digits).update(localized_time.strftime(\"%H:%M:%S\"))\n\n\nclass WorldClockApp(App):\n    CSS_PATH = \"world_clock01.tcss\"\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def compose(self) -&gt; ComposeResult:\n        yield WorldClock(\"Europe/London\").data_bind(WorldClockApp.time)  # (1)!\n        yield WorldClock(\"Europe/Paris\").data_bind(WorldClockApp.time)\n        yield WorldClock(\"Asia/Tokyo\").data_bind(WorldClockApp.time)\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.update_time()\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    WorldClockApp().run()\n</code></pre> <ol> <li>Bind the <code>time</code> attribute, so that changes to <code>time</code> will also change the <code>time</code> attribute on the <code>WorldClock</code> widgets. The <code>data_bind</code> method also returns the widget, so we can yield its return value.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nWorldClock {\n    width: auto;\n    height: auto;\n    padding: 1 2;\n    background: $panel;\n    border: wide $background;\n\n    &amp; Digits {\n        width: auto;\n        color: $secondary;\n    }\n}\n</code></pre> <p> WorldClockApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/London\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u00a0\u2503\u00a0\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/Paris\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u257a\u253b\u2578\u257a\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eAsia/Tokyo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u2503\u00a0\u2503\u250f\u2501\u251b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u2517\u2501\u251b\u2517\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note how the addition of the <code>data_bind</code> methods negates the need for the watcher in <code>world_clock01.py</code>.</p> <p>Note</p> <p>Data binding works in a single direction. Setting <code>time</code> on the app updates the clocks. But setting <code>time</code> on the clocks will not update <code>time</code> on the app.</p> <p>In the previous example app, the call to <code>data_bind(WorldClockApp.time)</code> worked because both reactive attributes were named <code>time</code>. If you want to bind a reactive attribute which has a different name, you can use keyword arguments.</p> <p>In the following app we have changed the attribute name on <code>WorldClock</code> from <code>time</code> to <code>clock_time</code>. We can make the app continue to work by changing the <code>data_bind</code> call to <code>data_bind(clock_time=WorldClockApp.time)</code>:</p> world_clock03.pyworld_clock01.tcssOutput <pre><code>from datetime import datetime\n\nfrom pytz import timezone\n\nfrom textual.app import App, ComposeResult\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Digits, Label\n\n\nclass WorldClock(Widget):\n\n    clock_time: reactive[datetime] = reactive(datetime.now)\n\n    def __init__(self, timezone: str) -&gt; None:\n        self.timezone = timezone\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.timezone)\n        yield Digits()\n\n    def watch_clock_time(self, time: datetime) -&gt; None:\n        localized_time = time.astimezone(timezone(self.timezone))\n        self.query_one(Digits).update(localized_time.strftime(\"%H:%M:%S\"))\n\n\nclass WorldClockApp(App):\n    CSS_PATH = \"world_clock01.tcss\"\n\n    time: reactive[datetime] = reactive(datetime.now)\n\n    def compose(self) -&gt; ComposeResult:\n        yield WorldClock(\"Europe/London\").data_bind(\n            clock_time=WorldClockApp.time  # (1)!\n        )\n        yield WorldClock(\"Europe/Paris\").data_bind(clock_time=WorldClockApp.time)\n        yield WorldClock(\"Asia/Tokyo\").data_bind(clock_time=WorldClockApp.time)\n\n    def update_time(self) -&gt; None:\n        self.time = datetime.now()\n\n    def on_mount(self) -&gt; None:\n        self.update_time()\n        self.set_interval(1, self.update_time)\n\n\nif __name__ == \"__main__\":\n    WorldClockApp().run()\n</code></pre> <ol> <li>Uses keyword arguments to bind the <code>time</code> attribute of <code>WorldClockApp</code> to <code>clock_time</code> on <code>WorldClock</code>.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nWorldClock {\n    width: auto;\n    height: auto;\n    padding: 1 2;\n    background: $panel;\n    border: wide $background;\n\n    &amp; Digits {\n        width: auto;\n        color: $secondary;\n    }\n}\n</code></pre> <p> WorldClockApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/London\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u00a0\u2503\u00a0\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eEurope/Paris\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u257a\u253b\u2578\u257a\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258eAsia/Tokyo\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u258a \u258e\u2503\u00a0\u2503\u250f\u2501\u251b\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u00a0:\u00a0\u2517\u2501\u2513\u2503\u00a0\u2503\u258a \u258e\u2517\u2501\u251b\u2517\u2501\u2578\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u2517\u2501\u251b\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"guide/screens/","title":"Screens","text":"<p>This chapter covers Textual's screen API. We will discuss how to create screens and switch between them.</p>"},{"location":"guide/screens/#what-is-a-screen","title":"What is a screen?","text":"<p>Screens are containers for widgets that occupy the dimensions of your terminal. There can be many screens in a given app, but only one screen is active at a time.</p> <p>Textual requires that there be at least one screen object and will create one implicitly in the App class. If you don't change the screen, any widgets you mount or compose will be added to this default screen.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nM1Ya0/jOFx1MDAxNP3Or6i6X3YlXGKOY8fxSKtcdTAwMTXPpSywo1x1MDAwMVxyj9VcYrmJaT3Na1x1MDAxMpfHIP77XqdMXHUwMDFlbVxiZVx1MDAxN0ZEUZv4OtfX1+fc4+R+pdfr67tU9j/0+vLWXHUwMDE3oVxuMnHTXzXt1zLLVVx1MDAxMoNcdFx1MDAxN/d5Ms38oudY6zT/sL5cdTAwMWWJbFwidVx1MDAxYVxuX1rXKp+KMNfTQCWWn0TrSsso/8P8XHUwMDFliUj+niZRoDOrXHUwMDFhZE1cdTAwMDZKJ9lsLFx1MDAxOcpIxjpcdTAwMDfv/8B9r3df/NaiXHUwMDBilIiSOCi6XHUwMDE3hlp4njvfepTERaiUIVx1MDAwN3PqkbKDyrdhMC1cdTAwMDOwXkHAsrKYpn56sbN1pD45eiNcdTAwMWKyfNP5Nvy6d1WNeqXC8FjfhbM8XGJ/PM1kZc11lkzkqVxu9Fx1MDAxOOz2XFx7+VxcnkBcbqqnsmQ6XHUwMDFhxzLPXHUwMDFizySp8JW+M21cYpWtXCJcdTAwMWVcdTAwMTU+qpZbk1x1MDAwMeJamHmO5zpcdTAwMGV1XHUwMDEwqc23cECY5VLsXHUwMDEwh9G5mLaSXHUwMDEw1lx1MDAwMGL6XHUwMDA1XHUwMDE1R1x1MDAxNdVQ+JNcdTAwMTGEXHUwMDE2XHUwMDA3VVx1MDAxZlx1MDAwZvvcrs335sdMa1x1MDAwM46lXHUwMDFhjbVpxNjyXHUwMDEwcT1GZ75r+ZBF/m3P5pRcdTAwMTKMcWkxI6aDoFx1MDAwMMKX+fyNRZY+5qmfm5tatCbQnXlcdTAwMTTVkVRbY+dcIkv5vlx1MDAxYVxmvk7GfyX88CxcdTAwMWRcdTAwMGZcdTAwMGVLX1xy2Gl5q/ul4WG1y+2Ze1x1MDAxMm1cdTAwMGUv7evp9v6BPls7+8jRfrtbkWXJzfN+XHUwMDFiUawuO5HK7eNVlchpXHUwMDFhiFx1MDAxOfZt10XE5sjjXHUwMDBl4aU9VPFcdTAwMDSM8TRcZqu2xJ9UdFmpxbtA0kacdYba5CmG2thQXHUwMDE0XHUwMDEw4i1N0e7le69cdTAwMTSldidFObeAXG6GLP+HoTpcdTAwMTNxnopcZljQwlLWxlK+wErmeraDXFxcdTAwMWK9Piu7kMihOr1cdTAwMDSJ1YInsT5W31x1MDAwYjS5XHUwMDE2hWKEsIsw41x1MDAxY1HW6LUrXCJcdTAwMTXeNdawgCxEvnMrojSUXHUwMDFiafrrb/VcdTAwMTTnXHUwMDEyXCIpXFyTxjNcdTAwMWKhXHUwMDFhXHUwMDE5aPd9mJvMXHUwMDFhqNdcbkSu7Fx1MDAxMKkgXGJrXGL0IVx1MDAxMFx1MDAwMT6zwTKCk2RqpGJcdTAwMTGetMXZScZM+nqGxVx1MDAxNkZS+qRmYlx1MDAwNCDkUJXdpVx1MDAxOXn+PdGXXyfDk+PRwblzQsefkvPLd89IXHUwMDE3W8hlhHheXHUwMDFiI1x1MDAxZNuxXHUwMDEwI9h+U0pSukhJj0GlmFx1MDAxM+tHalx1MDAwMqRcdTAwMTHFXHUwMDFlcV+fml3KXHUwMDE27MfnQ0rOXHUwMDBmtlx1MDAwMrw33tldu9zDn9+jYM78nu5/vr45INuHXHUwMDA3XHUwMDE5XHL+vMNTTLbdV/CLT4PB3u7EP/Q2iH1cdTAwMTKFf+/EXHUwMDE3ozdcdTAwMTX49sS/QOCZkVZe7a/eSOBcdPXmW3+UXHUwMDEzwinUYUKX34J3o+3dVlx1MDAxM9ZZTVxisZhdaNzbXHUwMDE1XHUwMDEz0lJMsDNfREBcdTAwMWFhXHUwMDE3wp2fKu8vx2GbvGPUaO2Q82M/kzJ+SspZo/+rSfkzMjgv5WWMnZSbVZJcdTAwMTbOMfxcdTAwMTTlQCZAv+FcXF7Bu0vxO+Wc43BcdTAwMGJe7lx1MDAxMXNaOYdcdTAwMTm1XFzOjYJcdTAwMTNujjdjXHUwMDFlslxid5vkLlx06Fx1MDAxMIsz7FJcdTAwMTcvyLlcdTAwMDebXuDGf9loXHUwMDE3wf1sJuZaZHpTxYGKR2CslFxm2OhPzbhryEKO7VLCoVx1MDAxNlKOXHTyylmb6YnU7D0tXHUwMDAyckBcdTAwMWPYg1x1MDAxYYxWr5+98kNQ19b4sXMpqX1cdTAwMTlcdTAwMDfPXHUwMDA2hThUX8Tg1Vx1MDAwME7KmLdcdTAwMTBcdTAwMTW24LWh2HVcdTAwMTXfKmyHPVx1MDAxNVY7zVx1MDAxN8JcbkWut5IoUlx1MDAxYdL/MVGxnk9zkc9ccsPvsVx1MDAxNMG8XHUwMDE1plW3zVx1MDAxN4LUeGzu3KqrXsWU4qa8/rLa2nttXHUwMDExweaoYbfysFL/NzuQwmdfpOmxXHUwMDA2pJVrXHUwMDAwYFbBY+GuJta/VvJms+Xb0lVxmDRcdTAwMTYpNCVHmundP6w8/Fx1MDAwYlxiYlx1MDAxObwifQ== ExampleApp()Screen()"},{"location":"guide/screens/#creating-a-screen","title":"Creating a screen","text":"<p>You can create a screen by extending the Screen class which you can import from <code>textual.screen</code>. The screen may be styled in the same way as other widgets, with the exception that you can't modify the screen's dimensions (as these will always be the size of your terminal).</p> <p>Let's look at a simple example of writing a screen class to simulate Window's blue screen of death.</p> screen01.pyscreen01.tcssOutput screen01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Static\n\nERROR_TEXT = \"\"\"\nAn error has occurred. To continue:\n\nPress Enter to return to Windows, or\n\nPress CTRL+ALT+DEL to restart your computer. If you do this,\nyou will lose any unsaved information in all open applications.\n\nError: 0E : 016F : BFF9B3D4\n\"\"\"\n\n\nclass BSOD(Screen):\n    BINDINGS = [(\"escape\", \"app.pop_screen\", \"Pop screen\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\" Windows \", id=\"title\")\n        yield Static(ERROR_TEXT)\n        yield Static(\"Press any key to continue [blink]_[/]\", id=\"any-key\")\n\n\nclass BSODApp(App):\n    CSS_PATH = \"screen01.tcss\"\n    SCREENS = {\"bsod\": BSOD}\n    BINDINGS = [(\"b\", \"push_screen('bsod')\", \"BSOD\")]\n\n\nif __name__ == \"__main__\":\n    app = BSODApp()\n    app.run()\n</code></pre> screen01.tcss<pre><code>BSOD {\n    align: center middle;\n    background: blue;\n    color: white;\n}\n\nBSOD&gt;Static {\n    width: 70;\n}\n\n#title {\n    content-align-horizontal: center;\n    text-style: reverse;\n}\n\n#any-key {\n    content-align-horizontal: center;\n}\n</code></pre> <p> BSODApp \u00a0Windows\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0An\u00a0error\u00a0has\u00a0occurred.\u00a0To\u00a0continue: \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0Enter\u00a0to\u00a0return\u00a0to\u00a0Windows,\u00a0or \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0CTRL+ALT+DEL\u00a0to\u00a0restart\u00a0your\u00a0computer.\u00a0If\u00a0you\u00a0do\u00a0this, \u00a0\u00a0\u00a0\u00a0\u00a0you\u00a0will\u00a0lose\u00a0any\u00a0unsaved\u00a0information\u00a0in\u00a0all\u00a0open\u00a0applications. \u00a0\u00a0\u00a0\u00a0\u00a0Error:\u00a00E\u00a0:\u00a0016F\u00a0:\u00a0BFF9B3D4 Press\u00a0any\u00a0key\u00a0to\u00a0continue\u00a0_ </p> <p>If you run this you will see an empty screen. Hit the B key to show a blue screen of death. Hit Esc to return to the default screen.</p> <p>The <code>BSOD</code> class above defines a screen with a key binding and compose method. These should be familiar as they work in the same way as apps.</p> <p>The app class has a new <code>SCREENS</code> class variable. Textual uses this class variable to associate a name with screen object (the name is used to reference screens in the screen API). Also in the app is a key binding associated with the action <code>\"push_screen('bsod')\"</code>. The screen class has a similar action <code>\"pop_screen\"</code> bound to the Esc key. We will cover these actions below.</p>"},{"location":"guide/screens/#named-screens","title":"Named screens","text":"<p>You can associate a screen with a name by defining a <code>SCREENS</code> class variable in your app, which should be a <code>dict</code> that maps names on to <code>Screen</code> objects. The name of the screen may be used interchangeably with screen objects in much of the screen API.</p> <p>You can also install new named screens dynamically with the install_screen method. The following example installs the <code>BSOD</code> screen in a mount handler rather than from the <code>SCREENS</code> variable.</p> screen02.pyscreen02.tcssOutput screen02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Static\n\nERROR_TEXT = \"\"\"\nAn error has occurred. To continue:\n\nPress Enter to return to Windows, or\n\nPress CTRL+ALT+DEL to restart your computer. If you do this,\nyou will lose any unsaved information in all open applications.\n\nError: 0E : 016F : BFF9B3D4\n\"\"\"\n\n\nclass BSOD(Screen):\n    BINDINGS = [(\"escape\", \"app.pop_screen\", \"Pop screen\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\" Windows \", id=\"title\")\n        yield Static(ERROR_TEXT)\n        yield Static(\"Press any key to continue [blink]_[/]\", id=\"any-key\")\n\n\nclass BSODApp(App):\n    CSS_PATH = \"screen02.tcss\"\n    BINDINGS = [(\"b\", \"push_screen('bsod')\", \"BSOD\")]\n\n    def on_mount(self) -&gt; None:\n        self.install_screen(BSOD(), name=\"bsod\")\n\n\nif __name__ == \"__main__\":\n    app = BSODApp()\n    app.run()\n</code></pre> screen02.tcss<pre><code>BSOD {\n    align: center middle;\n    background: blue;\n    color: white;\n}\n\nBSOD&gt;Static {\n    width: 70;\n}\n\n#title {\n    content-align-horizontal: center;\n    text-style: reverse;\n}\n\n#any-key {\n    content-align-horizontal: center;\n}\n</code></pre> <p> BSODApp \u00a0Windows\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0An\u00a0error\u00a0has\u00a0occurred.\u00a0To\u00a0continue: \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0Enter\u00a0to\u00a0return\u00a0to\u00a0Windows,\u00a0or \u00a0\u00a0\u00a0\u00a0\u00a0Press\u00a0CTRL+ALT+DEL\u00a0to\u00a0restart\u00a0your\u00a0computer.\u00a0If\u00a0you\u00a0do\u00a0this, \u00a0\u00a0\u00a0\u00a0\u00a0you\u00a0will\u00a0lose\u00a0any\u00a0unsaved\u00a0information\u00a0in\u00a0all\u00a0open\u00a0applications. \u00a0\u00a0\u00a0\u00a0\u00a0Error:\u00a00E\u00a0:\u00a0016F\u00a0:\u00a0BFF9B3D4 Press\u00a0any\u00a0key\u00a0to\u00a0continue\u00a0_ </p> <p>Although both do the same thing, we recommend <code>SCREENS</code> for screens that exist for the lifetime of your app.</p>"},{"location":"guide/screens/#uninstalling-screens","title":"Uninstalling screens","text":"<p>Screens defined in <code>SCREENS</code> or added with install_screen are installed screens. Textual will keep these screens in memory for the lifetime of your app.</p> <p>If you have installed a screen, but you later want it to be removed and cleaned up, you can call uninstall_screen.</p>"},{"location":"guide/screens/#screen-stack","title":"Screen stack","text":"<p>Textual apps keep a stack of screens. You can think of this screen stack as a stack of paper, where only the very top sheet is visible. If you remove the top sheet, the paper underneath becomes visible. Screens work in a similar way.</p> <p>Note</p> <p>You can also make parts of the top screen translucent, so that deeper screens show through. See Screen opacity.</p> <p>The active screen (top of the stack) will render the screen and receive input events. The following API methods on the App class can manipulate this stack, and let you decide which screen the user can interact with.</p>"},{"location":"guide/screens/#push-screen","title":"Push screen","text":"<p>The push_screen method puts a screen on top of the stack and makes that screen active. You can call this method with the name of an installed screen, or a screen object.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVcXG1z2khcdTAwMTL+nl/h8n3Zq1xu2nnr6Zmturpcbk5cdTAwMWN7XHUwMDEzx/Fb/HK35ZJBgNaAMFx1MDAxMrbxVv779chcdTAwMGVcdTAwMTIvXCJgMEtyVGyMRkitmaeffrpnJn+92tjYTPqdYPO3jc3gvuI3w2rXv9t87Y7fXHUwMDA23TiM2tQk0s9x1OtW0jNcdTAwMWJJ0ol/+/XXlt+9XHUwMDBlkk7Tr1x1MDAwNN5tXHUwMDE49/xmnPSqYeRVotavYVx1MDAxMrTif7vfn/xW8K9O1KomXS+7SSmohknUfbxX0FxmWkE7ienq/6HPXHUwMDFiXHUwMDFif6W/c9ZVQ79cdTAwMTW1q+npaUPOPLSjRz9F7dRUY5hgWqFcdTAwMWGcXHUwMDEwxm/pZklQpdZcdTAwMWFcdTAwMTlcdTAwMWNkLe7QJjQv9MPZWalafuj/WTqqmebJXHUwMDE3nt21XHUwMDE2NptHSb+Z2lx1MDAxNEf0KFlbnHSj6+A0rCZccmrlI8eLvtWNevVGO4jjoe9EXHUwMDFkv1x1MDAxMiZ9d4yxwVG/XU+vkVx1MDAxZLmnT4prjzFccmgtN1x1MDAwMCx7WPd9oYzHuFVWgFx1MDAxMlpxgSOGbUVNXHUwMDFhXHUwMDA2MuxcdTAwMWYsfWWmXfmV6zrZ165m53Dw/aua1tlZd09cdTAwMGasLHjKKIkwaGpcdTAwMDRhvZE4I4z2XGZyZvOtcZCOXHUwMDAyV1ZbhsCzXHUwMDE2d9PObjWFw1x1MDAxZqP92PC7naf+2ozdh5zBztZ3o1jK4yk30sFu9fz86Fg97Fx1MDAxZVx1MDAxZX5IToKqvdy6XHUwMDFmXFxrXGJ8frdcdTAwMWLdbVx1MDAwZVq+Pv2VmdbrVP1HTHGtlWVcdTAwMTJcZkeW9XQzbF9TY7vXbGbHosp1XHUwMDA2w/To19dzg19cdFVcdTAwMDR+Qo7Qmis5O/rvoHFwvV+PXHUwMDBmPnROXHK7XHUwMDEwd1dvP/TWXHUwMDFj/YJ5wjKu6FGNNiiH4c9Re1xujVx1MDAwNcGNsoh8MfjX/CvGYIng18BcdTAwMDRYo/lqwVx1MDAxZuvz8Kh8X98qb5v7crdzqe3t4VLAb1xmXHUwMDFhLkGwZYE/XHTuk0nIXHUwMDA3XHKFyDdGXHUwMDEx+Fx0XHUwMDBmMyNfto9iXHUwMDFktMzno3q3vHuO8mRfrDnvXHUwMDFiXHSe0VJoXHUwMDAzipxcdTAwMWPsXHUwMDEw8ClcdTAwMTB4TCgujaBcdTAwMWZccrBcdTAwMTDu0Vx1MDAwMquJcdxzZsZcdTAwMDGPfFxm5lx1MDAxNH6YlIrJn4fjhbZKSJhcdTAwMDPmXHUwMDE5mqJ2clx1MDAxND5cdTAwMDQpOVxmXHUwMDFk3fZbYbM/XHUwMDA0iVx1MDAxNP9k4FGlXHUwMDFiXHUwMDA07Vxy/t/2L42wWlxy2v/MXHUwMDBmWVx1MDAxY9D93Vx1MDAwNfXwN980w7rzls1mUFx1MDAxYnajJCQpNmhOolxcXHUwMDFmV8hcdTAwMTKfLtfdrY4+UdRccuth229cdTAwMWVcdTAwMTdb9Sxv1kZcdTAwMTR7M1xigUTgXHUwMDE5/L/nzVx1MDAxNyfbd35n//D+Zlx1MDAwN45bV+clXHUwMDE5Xa+5Nyu0XHUwMDFlSoZWUawg+squ4r5P4cVcdTAwMTDgkFx0ozSSWHpcdTAwMTFvXHUwMDE2MiPMgTfnjj15s2aS5FxymiyU/uAxy1x0Nupblj3pipxZbPxCiVN41VxmJjuzgKFvrsiZ81ZNdebHbp7gzVxc5eLCqDtTTFKkj0Xm8N9z5+kjP4c7i1Fsvpg7g9RcdTAwMWVcdTAwMThtKTZLhZSaXHKrUqU8y8iVXHUwMDA1Q2lAczli2HL8XHUwMDE50JOcXiR/XHUwMDE13Vx1MDAwYsxcdTAwMDT3RuY5cVxmkqhF0082bt9it6A2inXyXHUwMDE5+Vlq51x1MDAxNHf/nkPOk0Hl7PC7STlsV8N2nVx1MDAxYTMm+VZm2J0hRqQuXFzpOSuZp4FzSYNI6Vx1MDAwNVx09ixRdV3hd5zN0mOGRFx1MDAwZadMg34o6Xo64+vAqqBd/b5N0/OvIZtcdTAwMTgpXFxOXHRccpL2s1xcXHQ7Zlx1MDAxNNmkZZrzcCYkmT5mU9OPk62o1VxuXHUwMDEz6vrPUdhORrs47cs3zs1cdTAwMWKBP8ZcdTAwMWb0TPm2UT7ouCtcdTAwMGXTevbXRuYw6YfB33+8nnh2MZbda1xmxdnlXuXf52Yyul0hkZGsZsRcdTAwMDSQucz3iGy6XHUwMDFlXUtcIjPUtYpcdTAwMGLrKkdEMyp72DTLkOhRzoeugEN5iFUjdi2HxzR6hmv6p4GowfKMTFx1MDAwNzRmXGJcdTAwMDCaXHUwMDEyaVdH4qBzicZcdTAwMTONSUtcdTAwMDJcdTAwMTJgxSSGXCLPqMsnselp61x1MDAxMGFI5ViCXHUwMDEzYl1HWZM76YnEhCdcdTAwMTEoWilwWog/l8Sml1BzNpXIKGlpXFy4pZtcdTAwMDGiVuNGecagdIqBMkgk++GHZrFSIZTT1jFcdTAwMTTPSWNTXG6F0rDRo1x1MDAwM1wi05K7bFx1MDAxNmZPsPzfXHUwMDBm3vfffLx4+yG86PcvL9tcdTAwMGbNXHUwMDAztt5cdFx1MDAxNiFcdTAwMWY8XHUwMDA1oDSjIE3cnYmhtE5cdTAwMGXCQ8s1UlJPRJZcdTAwMTNsa1ImJ7BokCBeoExeXFzLI6fjdq5cIsdz8Vx0qjBjUOT3zpjZq3kx6NPLclx1MDAxZuO9m/2y6uzU7vq4t/bwtJ6SXHUwMDAyXFzh0lx1MDAwMojhQMuN8Fx1MDAxOKN2XHUwMDEyQYyyXG47qlx1MDAwMP7eOjblXGJcdTAwMDBMw1x1MDAwYpSxp1TgrFwiPWJXXHUwMDAwTi1kXHUwMDExOEFKrTnD2UXgVrVcdTAwMWQlW5c7+zbeerhcdTAwMGXOeVJcdTAwMGab61x1MDAwZU4hPFLXRlJ4XHUwMDAyru1wdaqktYdcdTAwMTTTSGExJPDgYjLQiIrlwVx1MDAxMqkzzcCZYSueYTRBsNP7+PDQvLrQlzWZhLJ/wXJCaCz/XHUwMDE4tHx9Pe26+/H+obi77iad29Ln2t71l/v34tNcdTAwMTKuW8Wbm+B3/Vx0opCfRNt7N3uldydLuO5N+fN+VZ2etu7Ptt9WoFx1MDAwYu/fXHUwMDA0/WVV4Y1GsHJZXHUwMDFjUFSelpJcdTAwMTdcdTAwMTFcdTAwMDBSVkHaWsqZXHTg0n93/mf/rnZcdTAwMTi/3T/dub1Oro72dtY7XHUwMDBipDOMR1x1MDAxOZ5kLolcdTAwMTJsZJa1RKmFJ4hcYkmju0lYu2BcIkhZ01UwQTxBbrZ74PpqzOGVm/cmmbdSqYRcYozPXHUwMDE1jbJcdTAwMTHPSsiUT3NDbKtJoXKj7dA5g4JyhrVvXHUwMDA1Zb/T8Tq9uHFcdTAwMTmnNdxfXHUwMDFl3+TksnKupL+KsnKhbVNdsbAkI6coRZe1XHUwMDAym10oTqe8Zbhi1Y9cdTAwMWLBsoOx9ijUSlxutIYh48PB2IBcdTAwMDecXHUwMDE5amTkhsYsNvFb5IncXHUwMDEzzsW04kZxd5dcdI7JuSRSsKBpRCwl72JsJom7iVx1MDAwMiZI187vqc8vy5BuJLvnWaCQs2Omssx0ibeRL8tYo5hQSlCqRfwhclXNp1xuXGJ4Wlxu5UaUXHUwMDEz/VEnPp1QUJVcdTAwMTl+ilx1MDAxZqg0UoyotHVcZkvZ9V7l3+emXHUwMDEzZVxuQztHkETtYlx1MDAwZXE/XeusKaFcdTAwMDBcdTAwMDePUkpcdEaCXCKVn027pISiSFkjXG5cdTAwMDDNgVx1MDAxOGexuapcIkJcdTAwMTFcdTAwMWVQnm+UIHfgUptcdFx1MDAxYZ9z7qFby6WsK7vz3ErHgdJHXHUwMDFhM3jWcqpF+IS6jWfG/I18UlwiQrGCuVVBjjGktpg765FQKHhcYkB3krbaMGV/UkIpRJR7jWNpWXxC2UAhnyhcdTAwMDZMXG4+R6F1eq63pnxcIjR6qJTRmlx1MDAxMiPQw3RcIoT1pFx1MDAxNVppXHUwMDFhXHUwMDE4o5larJJVLFAsY5xuT9lcbpOcTZj6pifxSEXRXHUwMDE1LKUsbv52lE9QXHUwMDExMii1y1x1MDAxYVZCJ0ipy0vOXHUwMDFhzSFPSJxJKy2iXHUwMDA2olxuXHUwMDFh1DE6sVx1MDAxZadcdTAwMGUkkyl40Kjit6nXn41OXG5cdTAwMDGVNo5BaU46mbbEu3ihK7FcdTAwMWKSaJqjMv7pTInTqFxcOjg9tlx1MDAwZqdYPWbnX2prXnwkXHTmKTBGK0U9j7lcdTAwMTn5lE8096hcdTAwMDeMJFVohFx1MDAxNHKx0sNLbHBAXHUwMDEy+EOZ2ErKj0dcdTAwMTf7b5p7R8FJr1x1MDAwM+XD6qfT3avP0bLKbujkRcbcL1h6l4XhVEmwXHUwMDFhQc++kKxxU2p3XHUwMDBmto7fn15Hl5dxq9xTbz+sO/qBMlx1MDAxZlx1MDAwNsg5PaxQo/tcdTAwMWIs86RbdUSpXHUwMDEx0zQq6zUvxLlgXHUwMDE0RC0+I4IuMDGElph4XHUwMDFlQf5cXHSiLlxctmyF0qTF5+Dmz7+fd9iX3bPem/P6Wb9S7d10+s8qRq1cdTAwMTSdgjRcdTAwMDJ1ttRcdTAwMWElz3XH41x1MDAwNZRcdTAwMDdcXKBcdTAwMTKkXHUwMDExXHUwMDAw0C6WOy59Yki4WXVjV7wrYYF5oe9cdTAwMTKzJI3CzNKIuWg+RPDiJMcyRVx1MDAwMlxi7ezbzirJznZ8dVx1MDAxYpr7sniItpvxzVFcdTAwMTfWPckxaDw3XHUwMDExQsLEas1gWJWUXHUwMDA0+Vx1MDAwNaBUaaqthF5s31lcdTAwMTHy81x1MDAxYlCmrNjnXGYkokSxYqSrOHp7v7d3wpPjg6D8caeCeLK/XHUwMDE0pFPmzjVH8ayqy1wiS/blWi7Zl1x1MDAwYi/ZXHUwMDA3LC6DOpaXgs1cdTAwMTHKplx1MDAwZvx6TnFazTyBXHUwMDAyJMFcbpRcdTAwMWTZRq09bi0pXHUwMDE5Zlx1MDAwNXk7vkwgk5LuopVA6TJcdTAwMWGYtFx1MDAxZMcqz1xiSomsUW5cdTAwMTNcdTAwMGVcdTAwMWL3dVx1MDAwMaBcZua3XHUwMDFmr2Kp69xxJ2fHTEWL6UFiI1+0oFx1MDAwNF1cdTAwMGLLSSy7moTiuZNcdTAwMDZLXVx1MDAwNWjDnO3I3L7EpzN+tqJFqVx1MDAxMFHuNYal7HKv8u9zq1x1MDAwM1moio3klKHjXHUwMDFje/mOXHUwMDBm3vdKeHi6/eXjx/pd/fL0T41FS01cdTAwMWJ+pdHrXHUwMDA266CL0Vx1MDAxNYRAWMNcdTAwMTQoPZK1XHUwMDAxqWYrgCSElJbU68uIg9zE1jRtXHUwMDAwlMhz58Gr1Vx1MDAwNrUusWjnXGaO3zW2XHUwMDBmv1x1MDAxY4ja4bugM5s2eD3tui9a9rDWTZCtTHM8bqldXHUwMDA3nfFkyfO0XHUwMDA1isL/ocWme+D4XHUwMDFjM6zTcTNcdTAwMTdcdTAwMWasUFxcaItcdTAwMWVBR9Cjulx1MDAxZPt2ZFx1MDAxYo1cdTAwMTJcdTAwMWVoXHUwMDA13M2aUFx1MDAxZbtYXHUwMDExpzBZXHUwMDAwj9PFXHLnkrJxJifJXHUwMDBiro1cdTAwMDeIRksrXHUwMDA1XHUwMDEy6Mc20qCbu2GYXHUwMDFisZXMiTzb8WaUXHUwMDE308PMxvCuXHUwMDE1t0NDS+pAt0JcdTAwMDAmLNrgdJLmMt1qwMBcdTAwMDD8rFx1MDAwMqNcdTAwMThT7lVcdTAwMWGH05xcdTAwMTKjkFM0K+RcdTAwMTTQbjGylLNrjOkxY105XHUwMDA1085329qY0E5VjXCKJVx1MDAwNWKYNcYoXHUwMDE0L7Qm2yjPpYaoLaOsg7p9nFLIXHUwMDBlt1KNJCjRXHUwMDFiSW4xXoejhEpxQlHWef9/nFwiaFx1MDAxOK2rXHUwMDE4XHUwMDE56lx1MDAwYs3HOUW6rXCIlIQq1EaQfpzOKUVWTZ9cdTAwMDJcdTAwMWOxijFlJLOKI1GZlVx1MDAxM5jOc5UwTckxxVx1MDAwNUvZxI+9Qa9cdTAwMTDP7lVcdTAwMWGHclx1MDAxMZ29erqDW/x6lFx1MDAxMO5cdTAwMDZcdTAwMDNC0Fx1MDAwZatPSjB7zM3bMLgrT5qRSV9OeKVcdTAwMWTquChwXHUwMDBm+9fXV1//XHUwMDA3mNhRliJ9 Screen 1(hidden)Screen 2 (visible)app.push_screen(screen3)Screen 3 (visible)hidden"},{"location":"guide/screens/#action","title":"Action","text":"<p>You can also push screens with the <code>\"app.push_screen\"</code> action, which requires the name of an installed screen.</p>"},{"location":"guide/screens/#pop-screen","title":"Pop screen","text":"<p>The pop_screen method removes the top-most screen from the stack, and makes the new top screen active.</p> <p>Note</p> <p>The screen stack must always have at least one screen. If you attempt to remove the last screen, Textual will raise a ScreenStackError exception.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1cXOtT20hcdTAwMTL/nr+C4r7sVcWz0z3vrbq6XHUwMDAyXHUwMDEyXHUwMDEyQnhsyObB3VZK2MLW4ddaMsZs5X+/XHUwMDFlhSDJQorBxnHiXHUwMDBmXHUwMDE4a+RRa+bX3b9+yH8/2djYTKbDcPO3jc3wqlx1MDAxOXSj1iiYbD71xy/DUVx1MDAxY1xy+jSE6ed4MFx1MDAxZTXTMztJMox/+/XXXjC6XGKTYTdohuwyisdBN07GrWjAmoPer1FcdTAwMTL24n/7v4dBL/zXcNBrJSOWXaRcdTAwMTG2omQw+nKtsFx1MDAxYvbCflx1MDAxMtPs/6HPXHUwMDFiXHUwMDFif6d/c9K1oqA36LfS09OBnHhazFx1MDAxZT1cdTAwMWP0U1FBXHUwMDBiLZW28vaEKH5GXHUwMDE3S8JcdTAwMTaNnpPAYTbiXHUwMDBmbcrRNNFcdTAwMDae897Fx119cmhcdTAwMGZOxyfZVc+jbvckmXZTmeJcdTAwMDHdSjZcdTAwMTYno8FF+D5qJVx1MDAxZH/pmeNV31x1MDAxYVxyxu1OP4zjwndcdTAwMDbDoFx1MDAxOSVTOqb47cGg306nyI5cXNGnXHUwMDA2cs6M0Vx1MDAxNqTiXHUwMDEy6G7V7fiXXHRcdTAwMDQz1lx1MDAxOFx1MDAwNUJcdTAwMWEhXHUwMDA1qFx1MDAxOcl2XHUwMDA2XdpcdTAwMDeS7Fx1MDAxZjx9ZbKdXHUwMDA1zYs2XHTYb2XngFxugrPz7JzJzf1Kp5i0Uphs+k5cdTAwMTi1O4nfIauZNcBdfjRcdTAwMGXTTXCgpJNaZlvkrzjca6Vg+HN2XHUwMDE1O8FoeLNam7H/kJPWXHUwMDBi+nxcdTAwMTZJeTTl9lm8grPdXHUwMDEwYKe1v/3X85NcdTAwMDP5+2CrfztXXHUwMDAxesFoNJhs3o58vvkvXHUwMDEzbTxsXHUwMDA1X1x1MDAxMFx1MDAwNVpLa43TXHUwMDEyTVx1MDAwNspu1L+gwf64282OXHKaXHUwMDE3XHUwMDE5XGLTo5+f3lx1MDAxYvp0mSroo+OO0KD03NBcdTAwMGbHU3ux39vnfHz+ctLeiyb6hfue0Fx1MDAwN/5N7IPTTFx1MDAxOSNRc1x1MDAwZVx1MDAwMoyyXHUwMDA17EuBXGalQYKeddo4vlx1MDAxOPbPgzPO1Vx1MDAxMrGPQipwlq9cdTAwMTb7vd45n2zx5NlhNFxmwz9eXHUwMDFlbb86iJeEfVx1MDAwYlxccG6Whf0kvEruXHUwMDAyvkVdXHUwMDA1fFx1MDAxMNZx5NLh3Mh/d941l1fDy5fT3taHwfjj8PiF2F1v5CMqprRBXHUwMDA0dEZ6XHUwMDBiWlx1MDAwML7lwMhcdTAwMDRJclxi1iHkrMBDcG+c4udYxj1wW1x1MDAwNryBWZhrgdL7pp/IxDtcdTAwMGJK2PvAPEPToJ+cRNepjbaFo7tBL+pOXHUwMDBikEjxT1x1MDAwMp40R2HY34D/9n/pRK1W2P9nfsfikK7vJ9TFb251o7bXls1ueF5UoyRcIlx1MDAxZXY7nFxmcmvcJElcdTAwMDKabrTXmr2jwShqR/2g+7Zaqlpt/rLMd6gzUVx1MDAxM5w9nNNnIHojxPz6XFy/8/fQZ5zF5uPps3HMSFx1MDAwMGm4pXdbVGfjJFx1MDAwM81cdTAwMWRcdTAwMWGU6EjjXHUwMDFmRZ1cdTAwMWQyrogwS2MsR9TuXHUwMDBl5XZMIzk6KVFcdTAwMDHXOlx1MDAwM/BXlyaFv4VcdTAwMDeoeipkjao/ijLGSTBKtqN+K+q3aTCzXCJfQ5K9OVx1MDAxY0Sqvs2xl5IzhVxcS8FpI5UgL1x1MDAwNLmT2sHQLyFcdTAwMDMgTqLJZKNVTtibXHUwMDEzPt9cblx1MDAxNfZb31x1MDAxNqk+UMmJ1OBcZml5nPV7pjhqilx1MDAxM0pCSaZcdTAwMDVIXHUwMDA3nITiTlmnSlJ1gzjZXHUwMDE59HpRQmt/PIj6yexcdTAwMWGni7nldbxcdTAwMTNcdTAwMDYl40F3lVx1MDAxZps1XHUwMDA2Qz9j0aZn/21k2pJ+uP3/z6d3nt2ohHI6WkJxNt+T/PtcdTAwMDNcdTAwMTi5sJWGXGYtqVx1MDAwNlx1MDAxMZdM8b/JyM9G2NpcdTAwMGKuw/1nW1x1MDAwN89f9LWNIVhvXlwinGOOTFx1MDAxNVxiNN5y68xcdTAwMTJ8XHRGLeNcdTAwMDLAOeK+ZCaEmJHsIcGo1suj5ESVkKJcYs5cdTAwMWaBrNRYMECFuIqIkYLtSkeLZLhcdTAwMDVwNb+jPdzpXHUwMDFjXGZfXHUwMDFjvdtcdTAwMWRcdTAwMWNfj9xhcjQ+XHUwMDFmivVcdTAwMDao5IJcdJ9cdFGWdFWqYrJEXG7NuOPGXHUwMDEyQqVcdTAwMDZcXFxmnsuOXHUwMDE3SVx1MDAxZaE4mTS7fHDWMenXZ8rufYyvOsPx+MNWdPomuVx1MDAxOMllXHUwMDA1jIQ3yHG7x4O+XHUwMDE1qlxu+k6AUkS65jfN76eHb9o9t3+0r/76NH32abtzKI+WivxWXHUwMDEwd8IlQ98xolx1MDAxZYJcdTAwMTONXHUwMDA0YpGuXHUwMDAwfaGQXHUwMDExKZFcdTAwMDY5cDBcXC9GMi02XHUwMDFkhGqZ6CdcdTAwMTNpSTS+4nSJXHLDl+PX19fds1P96VxcJJGYnvL50P+0bt5Y7U+v4+3jyejgdO/Vofj0x9SeLWHe8+H7ydvG5Ni+v+7Fp1x1MDAxN83wI3ZcdTAwMGaWMC9cdTAwMWab//VO3mLyprl9XHUwMDE1NT/uvlx1MDAxMc1oWfE0J+S5pTnAqrSRrktcdTAwMWKRWjiKvOzcNuAsnuKOONpcdTAwMDXV3u6Mmq33h+r6dL3DTGlcdTAwMWSzSkvNOZleNZMuXHUwMDA1QaNOcrKERJ3JXHUwMDE3zlxudj9cdTAwMTNA6npcdTAwMTbewc1ErqZxq/myrO9CWqIrhj+Ct6tBolx1MDAwMan1fZCYbXiW2Vx1MDAxMVx1MDAxNOWlgYfnwDZcdTAwMTdJXHUwMDE38jzZVb7meYLhkFxyXHUwMDA3w09xmln55e4sj9CF7z12lqckU63qVeZ4dHVkROxXXHUwMDEz71Zyft2rN57L0L1H8L8gmERUXHUwMDE0ZiOZOzFTq7CGIVx1MDAxN9pcYqPJXHUwMDE3w2Ip2yrd40RvXHUwMDAxkVgwXHUwMDAx06E1QpZ1XHUwMDExuPGCmpRvXHUwMDAyXHUwMDE5XHUwMDA0V9ZNQjUpTC7JvopEXHUwMDBmcFqcx0z01NO6jUJWxVEsXHUwMDBmjmyoRE2rmUsx3CRVXHUwMDE0U1x1MDAxNFx1MDAwMyuOdFx1MDAwMtpvZnqKt/EjZVtqQJWOl/GUTfkk/35vo2JyRYVZo0JwXHUwMDAx8iD3yFx1MDAxYtczp/U0Ko5LZi1ZXGZDsaySZtaoXGJmXHUwMDA0V4pWnlxmXHUwMDBizEZcdTAwMWLLMipoOWghfSmfLpIrRuVsimWSglx1MDAwZetcdTAwMWNcdTAwMTiCXG6WykSgjZXOc5PV2lx1MDAxNKCYXCJbte9oU4DRXHUwMDBl0PIopykqJlx1MDAxZVJOXHUwMDFlXHUwMDAzZ8QmrNTkQoThXFyan9SmVEPKv1x1MDAxYWU0LcuiXHUwMDE08l+zXHUwMDE5XFyurZS+nDm3SalPnaynSdHKMCO55lx1MDAxMiVIk+tk8d/XXHUwMDAyXHUwMDE4+X3iMd6x4YItXHUwMDE1VSaFdMFcdTAwMTkjyWhJWnXSiez+b02KU1xmpXbKcsFccqrcrtxYXHUwMDE0dPRdhfpcdTAwMDFcdTAwMDHEQiSFK5fJ8nCDMqt8P4FaN6r3NVx1MDAxZC5t6T3Vuq5XSldTXHUwMDA1Tv5cdTAwMTM06vmpgn6m8FX0cnLZfvfhQrevT49+j79rn+C31ZrIMzBcbj6QTCatr5lpXHUwMDE5UUAkTSluXHUwMDFkUSaXL8ivR2VGeTOvVptcZlhdJ59cdTAwMTbVXlx1MDAwN4Rwvk1s/ui4cbU/tn+1wsvOycdLXHUwMDExTl87PNhZe3Rq5uNcdTAwMDdB2DMobLFwSG6XkS9cIuRcbq2EQbdcdTAwMTA6l16YcUIgUTfzgHB4kdR0I57s7CB2I9lcdTAwMTZcdTAwMWZa4z+O48nFslKyVlpuga9cdTAwMDD7NuegS1xy3IAkjJyfcMX93dFe7+L5azHF8L1otTvDg9Z6Q79cdTAwMDHWMrCKmKXTzmlcdTAwMGVcdTAwMDXoXHUwMDBiKYlcZiuL3KLv6l1cYvlfyjLLLElcdTAwMTJHXHUwMDA0XHUwMDEy7CcpypxtPT9/XHUwMDFmbPHD9rv9t1x1MDAwN83rQZDE46X1xqK0uDSNqlxmYWpcbp2gfHVbajN/W3h92Wd9I1x1MDAxOFxupYVcdTAwMDRSXHUwMDFiXHUwMDAxekafiOiQWfHxi6b9WKzOWVx1MDAxZMBcdTAwMThFXHUwMDExlKPolYiLJZ9VVizincxnZZRcIq/mfLmjpF5cdTAwMTTqy2Jss5pcdTAwMTCG1P1BNZBl50Q448AlxXBKXHUwMDE5jeA4N3d2r/neNk3RKsWlZJBuTvjZklwijWpQfVx1MDAxOS7hKZvxSf79vnVTqWD26C071cjR3ec5k6vXoVx1MDAxY530XHUwMDFiz/u6od1+6/CV6thcboPSXHSanfEoXFxcdTAwMDNcdTAwMWZN+GJcdTAwMDZ89yTB0T/jUEy0XHUwMDFhJ1x1MDAxOHF0X1x1MDAwZVx1MDAxMMpavlD1Jlx1MDAxOVx1MDAwNf14XHUwMDE4jEhd7jAsucxpTdO9XHUwMDE0qJw1YsWM9DGfLfHZXHUwMDAy41bedI9r2XSPizfdc1fdXHJBtsOSf7zHk5P1O38vtV5dP0SDXHUwMDAySlx1MDAwNspYIynYXHUwMDE3zuqZxnuLjLyhptPQmVxccWXpWlxyilx0XHUwMDAwKYiekW1x7q5cdTAwMTJcblx1MDAwMpM+XHLCLYVMoPJcdTAwMWRaN3TBu1x1MDAwN4fwkCzJXCJ0gTyzclx1MDAwZtHLOelCvcvYKDa7k+8z5CONTOvo5bIscEaLJITl3JdR9Ndi5D1cdTAwMWLw61x1MDAxZpcsUFx1MDAxOFx1MDAxMCCNpZ3zXHUwMDE5XHUwMDAyJY0uyWRcdTAwMTjSgCR648jGXHUwMDE5xJJMP1x1MDAxMk+pXHUwMDA2s381yjheXHUwMDE2TVx1MDAxMZWJXHUwMDA0XHUwMDA0n2+mUHV+nlwiPlxcyNa1fHn54tnhm9Z04sK+qirdrFx1MDAwZk9cdTAwMDHBmSFoI7FD32ePRYOGqH1cdTAwMDXRKCAuY6VSXHUwMDBipVx1MDAxM75BVO5o8ypcdTAwMTNcdTAwMTWyXHUwMDFjUlx0IdWPw1Se1s37mFx1MDAxOVx1MDAwNLK0Wq+eXHUwMDAxXHTiXHUwMDFhl1FcdTAwMWOddcN1okBcdTAwMDWxXHUwMDFlxoFcdTAwMTRWXHUwMDA2NuAsoZK4/vxN4fVbv65cdTAwMTTIP/IglFTeLKBRYqYtXHUwMDFjkFx0Ylx1MDAxNVx1MDAxNoUherTYXHUwMDAzO7X2XHUwMDAyXHUwMDFkOUokj01Ow3IpsyvdWlx1MDAwZu3du/TJXHUwMDAwXHS0MVjOl/jSXHUwMDAxRaSr7iF5sFrOSYDqfVGRXHUwMDAwgdCeXHUwMDA3Ulx1MDAxNFxuXHUwMDE2yeHlclx1MDAwNF9cdTAwMTmQZNJvJaBcdTAwMTJcdTAwMWOMeegziPW59qJUXFxcbmPJISljtNEu94NcdTAwMWa3YllmNHFcdTAwMDPaWue4MkKWpPqRSFAlnP2rXHUwMDA05CUxIFGdqCFhUEtcdTAwMGbXue3ZyfXlKzWNj6ZHL+LB5OPWZft479O6MyCK1ohcdTAwMDGh4MSCjK9ZXHUwMDE0XHUwMDEzNUJcdTAwMThGXHUwMDExgnRElFxibvlfUPlOmVx1MDAxYSBcdTAwMWHmIFx1MDAxN1x1MDAxNfzotUPHXHUwMDA1t8LlbmiFmZo15Cm4OE8xrlqvwVx1MDAxN1xyrTXzN6/Ub/2a8lx1MDAxNFxuKsH/mFx1MDAwZjk3w41cdTAwMTC5eCFtXHUwMDEwXHUwMDAwzdAnckxcdTAwMWHai8VcdTAwMWXdrNVr7dtotPDP9/tcdTAwMDdcdTAwMDfhXHUwMDBlLdeGOeu7XHUwMDE2NddWlVx1MDAxYdP8U2zKoV3l7yQspJVz0pR6h7FRKOs4RS9OXHUwMDFiXHUwMDA1WphcXGfyRpZcdTAwMTORXGLCao1cdTAwMWH8XHUwMDEzYuWfJJiLpNT3wszIRFxcSCvyyEJq8lx1MDAxZqIkXHUwMDEzkmfx7Wv+4XY0d7X0/0hcdTAwMTSlXHUwMDEyyOlgXHUwMDExwlVcdTAwMDTlyc3s/jGhk4TwdrtcdTAwMTVcdTAwMDTpqHVjyrNb3LyMwsn2XT056cvbx3QxvVx1MDAxNVxu/Y3+/fnJ5/9cdTAwMDPV4pXXIn0= Screen 1(hidden)app.pop_screen()Screen 2(hidden)Screen 3(visible)Screen 2(visible) <p>When you pop a screen it will be removed and deleted unless it has been installed or there is another copy of the screen on the stack.</p>"},{"location":"guide/screens/#action_1","title":"Action","text":"<p>You can also pop screens with the <code>\"app.pop_screen\"</code> action.</p>"},{"location":"guide/screens/#switch-screen","title":"Switch screen","text":"<p>The switch_screen method replaces the top of the stack with a new screen.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1cXG1T20hcdTAwMTL+nl9BcV/2qsLsTPe8btXVXHUwMDE1XHUwMDAxNlx1MDAwMVx1MDAxMpNccuH17opcdTAwMTK2bGsxsrFlXGZs5b9fjyCWLL9gg3DIKlXY1sjj1szTTz/dM8pfb1ZWVpPbTrj628pqeFNcclpRrVx1MDAxYlxmVt/689dht1x1MDAxN7VjaoL0c6/d71bTK5tJ0un99uuvl0H3XCJMOq2gXHUwMDFhsuuo11x1MDAwZlq9pF+L2qzavvw1SsLL3r/930pwXHUwMDE5/qvTvqwlXZb9yFpYi5J29/63wlZ4XHUwMDE5xkmPev9cdTAwMGZ9Xln5K/2bs65cdTAwMTZcdTAwMDWX7biWXp425MwzUDxbacepqWiElFxiKrsg6m3SjyVhjVrrZHCYtfhTq7fHrZPex6uT643+2ra4qrq7KKlmv1qPWq395LaV2tRr061kbb2k275cYo+iWtKkVlE4P+1b3Xa/0YzDXm/kO+1OUI2SWzqn+PBkXHUwMDEwN9IusjM39GlccpVgxmgrpOJSKG3VsN13IDUyY41RXHUwMDAypUGJQlx1MDAxNSzbaLdoXHUwMDFlyLJ/8PTIbDtcdTAwMGaqXHUwMDE3XHIyMK5l11xiXHUwMDE1XHUwMDA05/XsmsHD/UqnmLRcdTAwMTJN1n0zjFx1MDAxYc3Ez5DVzFx1MDAxYcFdvrVcdTAwMTemk1x1MDAwMCA5OpR22OB/sbNdS8Hwv+IoNoNu52G0Vnv+Q85ab+hWXHUwMDExSXk05eY5TCpR2N89QLt7uub0detcZuKPw75GoFx1MDAxN3S77cHqsOXbw7vMtH6nXHUwMDE23CNKaC2tdU5cIupsMltRfEGNcb/Vys61q1x1MDAxN1x1MDAxOVxi07Pf3i5cZn2Jalx1MDAxYfSFXHUwMDExllx1MDAxYm5cdTAwMTTOjf0/wi+wKW/OKp9cdTAwMGU+XHUwMDFjXHLuTreCne0vP1x1MDAxMvuCP1x1MDAwZX5pmDJGguZcXKAwelx1MDAwNPvogKHlXHUwMDFjXGJfTlx1MDAxYsefh/16cM65Klx1MDAxMftkmHBOw5LB/2Vf7Z00vsRna/31w62d/atccn5cdTAwMTmUXHUwMDAyfsdRcO2kKVx1MDAwYvxJeJNMQr6yelx1MDAxYfKNdMid4PNcdTAwMDM/6H95t3n2Z3vzc3x4dHP8YaNcIlx1MDAwZVx1MDAwZl478J1hloNBXHUwMDAx3FhrR4FvhGJIzi+ERUW+XHUwMDAxz8K9cYrXYVx1MDAxY/eC23HAXHUwMDFiUYS5UVxuLU1cdCxcdTAwMTflL0fxXHUwMDFl5dKAxlx1MDAwNVCeoalcdTAwMWQn+9FdmHLDyNnfg8uodTtcdTAwMDKJXHUwMDE0/mTgfrVcdTAwMWKG8Yr4b/xLM6rVwvif+Vx1MDAxOeuF9Pu+Qz36zfVW1PDOstpcbuujXpREpMOGzUk7N8ZVsiSg7rrbteJcdTAwMWS1u1EjioPW1+lWPc2ZXHUwMDAxi2eHYVxmOEVUoXF+bz4wx1f609ZBv9M53ZKbXHUwMDFmq+8/71x1MDAxZL52b7aOkXJDq1BobnKKNlxyYyiYoJNaodNKKlMwrFx1MDAxY29cdTAwMDbMOGTozblzXHUwMDBm3uxcZqCRSmZ38DeIWUpQzFi2N8PKL5Q2ReetcLI3g1x1MDAxYfnmkrw5b9VMb75cdTAwMWbmXHTuLCjgTPVnXHJcdTAwMTSXtMuJocf8efbML+DPxSD4gv5cZsYxdEpLZVx1MDAwNXJNideoQ2vrm41cdTAwMTDg6FJcdTAwMTC6YFo5XHUwMDFlrYk2hFBcdTAwMTKApsQ6nvHG0L9cdTAwMWRnXHUwMDE20GpDjsCdmaRRSVxccKKdJ0Tv1MxcdTAwMTn+PsMjlbJOLKJcInN2XHUwMDA03eRdXHUwMDE016K4QY1cdTAwMTmVfK8ybM9cdTAwMTElUlx1MDAxZq72vZWcXHTllPSJsybcWpVcdEs/XHUwMDE2QcdcdTAwMWLNQFhJk01aXmr/7+GKb0Ozwrj2uFGzM7CcUWucgeHcijTrp+R/kk2KQqexUjjpaO6tXHUwMDE5s6lcdTAwMTX0ko325WWU0Nh/bkdxUlx1MDAxY+N0MNe9ozfDYIxB6J7ybUVG6PhcdTAwMWVHiT17t5K5TPph+P5/bydePVx1MDAxNcv+XHUwMDE4Q3HW25v868JUZkFOT7BcdTAwMTUnW3CBPGO2XCJ9pUxmgUnUymjDSX7wQnXJSMtIXHUwMDBmWFx1MDAxNFx1MDAwMlx1MDAxMVxi/C9DZI5ZckJjuOFWTiQy5Vx1MDAxOGiN5H9cdTAwMDLISclZx5iMfIE6cFnDMojs6YnCnEQ2O3lcdTAwMWQhMs0taUhKXHRBccvR5i6651xmw1BrcjJCtsy50YIsNruGOmJcdTAwMTGXxPIkJo1cdTAwMTREU1x1MDAxM0js5+asabD1x9o4Ylx1MDAxN2StXHUwMDE5hUG0tnj2O29cdTAwMDHXXHUwMDE0yEDLjNlcdTAwMWXjrePT885e5Th+31x1MDAxZlxcRWu1TrR+dNF83Vx1MDAxOVx1MDAxNfi6oPWFXHUwMDExMFx1MDAwMimBzO72vihuXHUwMDE5+aZwzlx1MDAxMYNbmUsvn15cdTAwMTTXurzSoCNgSJJemdmlZVmPXHUwMDE1rrPg8nKFa6LGafjUToLBXFx6+Vx1MDAxODrXb+tcdTAwMDfBzqf1+LyyTTnCIN6CratS0VlcdTAwMGJ6zbBcXHgqYL5cXG2c4Vx1MDAwZYBcdTAwMTdcdTAwMTN+R0GXlI5cdTAwMDalwaJ2ZdStVYmVayFcdTAwMDWCUy+CzyFcdTAwMGJOqFx1MDAwMtTtYSVuXHUwMDFjbFx1MDAxY21tXZ9WKlx1MDAxZiuN3km/nCqAplx1MDAxMETiQC1cdTAwMDH9gtT4dFnprFEqP+WP0vOHs697h5+PzuqdXHUwMDAzPKq15Hn7Knnl9KzSlFx0lNdcdTAwMWFcblRu+S/twCGzaDSBTNNYQK75Kfi3UHVcIixz3caBXCI5vOxFS1x1MDAxYoZcdTAwMWb6XHUwMDFm7+5a56f6rI5JhLenfD70v53V77vbzul54/Bi1+3dbVx1MDAwZrqbUbR7Wi+h3+NrXHUwMDFi697B7mDQaZze1bu1qLr+R1x0/fbE+sGOXHUwMDFl3Fx1MDAwZWrrXCLYUdHazWkvLIdcdTAwMDW8KJDKubJYYFrJXHUwMDFi3dRcdTAwMDDo9Tl3Ml9Ee4xcdTAwMDFcdTAwMGX1p+jaXHUwMDFkh1eV3ubmn1j5uvm+rZ7CXHUwMDAwy0ssXHUwMDAxNVOCXCJcdTAwMWNcdTAwMTjKLa1Uo1x1MDAwYliCI6OMUyNpOGVcdTAwMTQ+s+ZccmDPw1x08kzpXHSppJxcdTAwMTDuaEpcdTAwMTRlTi9Q9J4lx5RxsFxiXHUwMDE0s1x1MDAxOc/K0mhcdTAwMTjZXHKgvVxmttqNXFwzLFJn+vd7kTrodFhvQJlb86yXVoZ/uX/BycXq3ELBMorVM6yb6Y/Ti9ZcdTAwMWPMNI90vvRHOkzM7ZCzma9cZod8XHRNqli6sMNcdH7kl06MeCRKzVxmSLBcXFhDI1JcdTAwMTRcdTAwMGLlOCQw37lUoFxyWIE4qdRjXHUwMDA1Q4da+1VlXHUwMDE0+dTtwVvRSikt8ieE5+dUeoBTQvlcdTAwMTRvnbPSM1vnreTrKs761X+Lylx1MDAxOcmlyVx1MDAxNVx1MDAxZVx1MDAxZVxuK4o5wf1FSFOluJFcdTAwMGZcdTAwMTdMKfWM3sVPVIKZjid/XHUwMDE0kZT19ib/+oRcdTAwMTWwnHuMhXdcdTAwMGUkLFx1MDAwNZ9f4M/WO6+TTYw0zO+70ki3i4iFXHUwMDA1MFx0TKVcdTAwMDOhTH7TVplUwpklia5IO5BzgsZcdFwi3zpcdTAwMDagUFJYXHUwMDE0xlx1MDAxYZlcdTAwMWKfXHUwMDA3Klx1MDAxMZo0XGKiWm7R2C836SetR5dNJWuCUTwgMVwiOWViXG5cdTAwMTByXHUwMDE33VOJZKTPNEpBI619reJvSiVrU1x1MDAwMeWPMSiVxiXcTS9cdTAwMTZcdTAwMTC1SePdaG4umZ3rvU4ukY5cdTAwMDaXK2JVXHUwMDFmzLRcdTAwMWRcdTAwMTUmNOSMa1x1MDAwZVx1MDAwNECjKVuXXHUwMDA1w8piXHUwMDEzpL7RXGItXHUwMDE1IV2bSUVcdTAwMDPHmfa0RmlcdTAwMDVcdTAwMDClNFx1MDAxM6SJcSgo21nyajrkPffHSlx1MDAxM6JcdTAwMTMgceaXRSjqar9vfTKlOO5cZo20X71cdTAwMWVfuv57UMpcZlD5Y1xmTlx1MDAwYnLKrJ3jZvqWO0cj75TUXHUwMDE57TxKKr/38fxz/Wj75FCfSLu373ai3dddgbSWM+VcdTAwMDR4tuZo5Gj5gSQzI6bn1ilcdTAwMDSH8nn7Z8tfXHUwMDFlks44Q1x1MDAxZbLkesSyloesnFx1MDAxZfJoSEg1gpj/mZ6dXHJcdTAwMGW7h4Ov8CFpVFx1MDAwNvWrvT+7W+9fOzolo2nXVlx1MDAwYidcdTAwMDGwXHUwMDEw8biXXCJCXHUwMDFiR6qMW8WfXHUwMDE38souj5NmJlx1MDAwNlEvUSxcdTAwMWJcdTAwMTLgXHUwMDEyq+NcdTAwMWLHXHUwMDFmZaRO63+Yg9v1rb3Eid8/XZRSbS7dpaZusJ7+iJyg8FwiXHSQXHUwMDBiXHUwMDE0t1x1MDAwME+qX9Q+bm13XHUwMDE0XHUwMDFjvW+a5ufaa5eQVvpcctbKbzJBa/Lrb2k6KvzOXHUwMDE3J8ibKFx1MDAxZlXuZfxcdCaloONcdTAwMWKshd/jrVx1MDAxNVx1MDAxN0t+XuLlcO6LY2ilWPrzXHUwMDEy+Cp3WOPzd1hLmPr4k/D79Ei32Pn3Jc6e+Ve5fOS0ZqBImVHex7WDwv5cdK2Ypmb/JIWw+efryvRnbVx1MDAxOGl30ipSS+B20sNQ1jFOXHUwMDEzXHUwMDAyXHUwMDAwXHUwMDBl1Eih68HXwVxuxV1+rW8ppeone+Oc+eDsXHUwMDEwMZJcdTAwMGZcbktJMeU3KFx1MDAxZFx0WpywXHUwMDA3XHUwMDEwaKa11ztaXHUwMDFhTjP+PVxyWnBb4mxcdTAwMTm4MrK5WlC+ZZVcdTAwMTbaot+GkD1dN7Rcblx1MDAxOKWupHGs81dKbse3fP9MmehULPujiOKsszf510VVicht8iqSXHUwMDE4aVx1MDAxMrA0vvPnoFti33aSRudT+6ZDaDpcYmrx2bspJNZcZqrNfjf88TpfkPDgQlxiIDCholxmf1ToXHUwMDFigcwh+ke+QPuc7zk8lnSDuNdcdLrkXHUwMDEwXHUwMDEztEkuxc20ybi058I/s/xcIlx1MDAwYuGztMmL7vuS4DRmkm9pT391w8v2dV7m/nBlktn0NF2SX+YperT0iSwp7Pk9evakL+TRS9zXXCItU9zHdK7AXHUwMDA3hsLzXHUwMDEyfl+LzzMoeZbGuGetos/0aFx1MDAwMaSB/Fx1MDAxNlNOXHUwMDFhSXOZ+48gsno1MFx1MDAwNc5vMjHoXHUwMDFmRCu6u0/wpXJmmdXq5/jjnOpkdqgoKFx1MDAwMUupo6LwbqSQOlx1MDAxYqJMnnCGXHUwMDE0XHUwMDE40Vx1MDAxMI+npamnqZPZu5hHXHUwMDE0XHUwMDEzd1xuaL6Ms1r6xYRxmyhqkDiRaK2jTFx1MDAwMIT6uZ/9mlx1MDAwZWV/rFx1MDAxNVE8TZ68efhcdTAwMDG/eWg/IcxccqeDYFx1MDAxZNVcdTAwMWWIPLvL1esoXHUwMDFjvJu0nzo9PEem4+mZKPT3+te3N9/+XHUwMDBmJe3LnyJ9 Screen 1(hidden)Screen 2 (visible)app.switch_screen(screen3)Screen 3 (visible)Screen 2 removed <p>Like pop_screen, if the screen being replaced is not installed it will be removed and deleted.</p>"},{"location":"guide/screens/#action_2","title":"Action","text":"<p>You can also switch screens with the <code>\"app.switch_screen\"</code> action which accepts the name of the screen to switch to.</p>"},{"location":"guide/screens/#screen-opacity","title":"Screen opacity","text":"<p>If a screen has a background color with an alpha component, then the background color will be blended with the screen beneath it. For example, if the top-most screen has a background set to <code>rgba(0,0,255,0.5)</code> then anywhere in the screen not occupied with a widget will display the second screen from the top, tinted with 50% blue.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVZ2VLjRlx1MDAxNH3nK1x1MDAxY+dlUlx1MDAwNZrel0mlUixhwizMXHUwMDAyXHUwMDE0Q5KplLDatsay5EhtMDPFv+dKXHUwMDE4tySvgJmFXHUwMDA3Y/dtt666zzn3XFz5y0aj0bRXXHUwMDAz03zWaJpRy4/CIPUvm5v5+IVJszCJIUSKz1kyTFvFzK61g+zZ06d9P+1cdTAwMTk7iPyW8S7CbOhHmVx1MDAxZFx1MDAwNmHitZL+09CafvZ7/nro981vg6RcdTAwMWbY1HNcdTAwMTfZMkFok/TmWiYyfVx1MDAxM9tcZlb/XHUwMDFiPjdcdTAwMWFfitdSdkHo95M4KKZcdTAwMTeBUnqK1kdcdTAwMGaTuEiVIEJcdTAwMTTmXHUwMDEyqcmMMNuDq1lcdTAwMTNAuFxyXHUwMDE5XHUwMDFiXHUwMDE3yYeaXHUwMDA3e6fPj7blaKsjRm/7r+WLbo+G7rLtMIqO7FVUJJUlcC8ultk06ZnTMLBdiOLa+Lxvpcmw041NllW+k1xm/FZor2CMo8mgXHUwMDFmd4ol3MhcYj5RwT2EhMKaXG4tKGVuO/LvXHUwMDBirDzKidKEUU0x4bW8dpNcYo5cdTAwMDHy+lx1MDAxOVx1MDAxNX8us3O/1etAenHg5mByrpRwcy7Hd8s095hiVLrluybsdG1xQMJTXHUwMDEyI12OZqY4XHUwMDAyrFx1MDAwNOFcYiniTii/5OAgKMDwsbxNcTDepnhcdTAwMThFLss88EdcdTAwMWRAZVx1MDAxMJVO99S+XHUwMDFh7n/OaHv44cxcdTAwMGbRXHQjvc7u5G4qiPPTNLlsTlwi1+N3LqPhIPBvcISF1Eoohlx1MDAxNEVu86Mw7tWTjZJWz0GvXHUwMDE4vd6cjXhrRnZcdTAwMTbctVx1MDAxNvPgzpXmikuyMti3tzvmg1x1MDAxY52/39k7XGbOXrB9/+jlm29cdHa1XGbskjOPYlx1MDAwZZCRhGvEZVx1MDAwNetKY48qXHUwMDA0jGBYYYJcdTAwMWaGdak5apNprONcdTAwMTIlJyDnuFx1MDAwZW2CqdSSUcF+cGhrJCnnWsg7QNthKIntUfj5Ro0ro/t+P4yuKkAoMFx1MDAwZlx07viZaWSt1Jj4n/jJwE9t6Edccqgx4XlkfimfWmYgl3zxkurlq2xHYSdnSzMy7SqNbFxiJWhcdTAwMTK2ycBFW5CVXHUwMDBmy6VcdTAwMDdB/e6SNOyEsVx1MDAxZlx1MDAxZK+W4UJm32z/XGZqY4llffiW21hJhDSidHV2L0bEXHUwMDFk2E1q4/dlN0ZL6S2FR6FqM62k4sLxt2C3VFDoXHUwMDE051goweRcdTAwMDMr2Vxcdlx1MDAwYk8rXHUwMDAypUpxRFx1MDAxMSup6YTrjIDKQFx1MDAwZZAoQpxxR/Ax9TlVipOy7VjOfEfpW6CQ8cj1fEFYUI1cdTAwMDT8x+w+lM0swHknjIMw7lRcdTAwMTNcdTAwMWL7tINcdTAwMTWKR0Hy1jDPclx1MDAwYnmMXHUwMDExTjCWXHUwMDFja02k5LQ0reNcdTAwMGbyrKlHJYg2lVx1MDAxNFx1MDAwYqZcdTAwMTGmU3dv4mB5Vov9Wy0rSYhcdTAwMDY0gUeUXHUwMDA03rNZWYGMc5goXHUwMDE54pzK6TOJ/MzuJv1+aGH73yZhbOvbXFzs53ZO+q7xp5RcdTAwMDXuqlx1MDAxY6urwyBfsSr+7l3D0af4MHn/cXPm7K254C6iU7h2622U/89cdTAwMTO2XHUwMDA1Jl2XqmDdpGMmKNdwXGYrK9v5q+10p3+xS+K93f1Pg97OSetcXH/nJl16YFx1MDAwZlx1MDAxNVx1MDAxMYJcdTAwMDFcdTAwMTFwzaRzykDaKEVcdTAwMWPioHO0ltfdpC2f0W6vz6QrTYG1uFR6XHUwMDFl08hkx1x1MDAwN0efgyx5d3T4qtc+XHUwMDE57tn/9vl6jFxmQUJAidGP7dFcdTAwMDWei3aMXHUwMDE1dDtSs9XR3rvAXHUwMDA3Q7/bZfzy9fut5+jw5cuT/lx1MDAxY7R3/VZ3mJrHxrtehnfCpKdcdTAwMTDCQlMmudBYVfDOoJTDXHUwMDE0qMFaXHUwMDAx9Vx1MDAxMWNcdTAwMGZcdTAwMDG8Tf04XHUwMDAzXHUwMDBmXHUwMDA26JpcdTAwMDY90WpcdTAwMWHt025cdTAwMWS6XHUwMDA1XHKtk6Lix1x1MDAwNzlXuX5/Nbd+nFxmtvpJZid+2Fx1MDAxZNGzRto595+gTbRJON9EXHUwMDFl/+XX78G+3zXl+/l5XVLMulxmXHUwMDEwiolAtESkZTKwXHUwMDE4MneSga9n6Fx1MDAxOZdcdTAwMWU4p7yJXHUwMDE0WKmyaS/qXHUwMDFlo56kXGaD+6JKXHUwMDEzVU9sfTJQ6Fx1MDAxMaRcdTAwMDCSxEB+S1x1MDAwZlx1MDAwZZytp55ASjFcZonkRdopwa1GIIrh4PSdXG7hWn19QW7KXHUwMDFm1dcvLjdVXHUwMDA3jYnWmGHwiphLrkt28tZAM3BcdTAwMWOC5s9cdTAwMWQpwlJSdT9bv9jxVZNC4HBcdTAwMTTO5VxcXG4o9nQ6K+VJXHUwMDAxglx1MDAwZolcdTAwMDMuOViCXHUwMDFm2tXPhXZcdTAwMTGsg/qOnr7Q51nahuY+hsR5h1x1MDAwMVxyk1hd20YjLsy74+fxv+/SreNR/81W/Fx1MDAxN/qWhn65slx0rj2Ru3VcZrZcdTAwMWSUy1GyeOqOmCeIgK6RsvyZ7MNcZn17lpsnTHlcdTAwMWFLaNhcdTAwMDDo4M/pXGafXHUwMDAzzPTAYyEmQHkxNFx1MDAxN072bjVccu6UcSRLT15cdTAwMWbqe5Y9XCJfh3jVyTYnsmZcdTAwMWFXYuvuzFn+qIFyUYNT/lx1MDAwN4XHQ0RcdTAwMTM4KyrhMMXS5SSUXZDbvJ/UnGJV0YRpVCxbTzFcdTAwMGauyzFcdTAwMDHTLlx1MDAxONOV5Th4JFx1MDAwNEJKsZZMwuJs2XLz9mYlRZrbdPFcdTAwMDVuXHUwMDBieMpcdTAwMDCBqyuSPbeH5oCEn9jhi1x1MDAxM3N0XHUwMDE2nqG389zWN1Mk7oHOglx1MDAwMHFcIjlUV+S+lytcdTAwMTRcdTAwMTfYg6BWgFx1MDAxYlx1MDAwNWfmXHUwMDA0u1AoXHUwMDAxVVx1MDAxMLxcZlVcdTAwMWO8XHUwMDE3zF2/QuGST3GS5LrvsVx1MDAwNFx0XHUwMDAyXaBcdTAwMDJ3+OhcbpT/kiFcdFbuXu/XXHUwMDFilaxhpTeqNjH5xvxpoihpnCZpXHUwMDE0/DSz8Sn9RvU1XHUwMDFhn0o+NzTbXHUwMDE407TpXHUwMDBmXHUwMDA2R1x1MDAxNnZrYsPgXHUwMDFjwmB8y27V5kVoLndmYyCHwcaYujlHTOGArzeu/1x1MDAwN0PH3J0ifQ== Base screen(partial visible)Top-most screenbackground: rgba(0,0,255,0.5);Hello World! <p>Note</p> <p>Although parts of other screens may be made visible with background alpha, only the top-most is active (can respond to mouse and keyboard).</p> <p>One use of background alpha is to style modal dialogs (see below).</p>"},{"location":"guide/screens/#modal-screens","title":"Modal screens","text":"<p>Screens may be used to create modal dialogs, where the main interface is temporarily disabled (but still visible) while the user is entering information.</p> <p>The following example pushes a screen when you hit the Q key to ask you if you really want to quit. From the quit screen you can click either Quit to exit the app immediately, or Cancel to dismiss the screen and return to the main screen.</p> OutputOutput (after pressing Q)modal01.pymodal01.tcss <p> ModalApp \u2b58ModalApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2585\u2585 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. \u00a0q\u00a0Quit\u00a0\u258f^p\u00a0palette </p> <p> ModalApp \u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588 \u2588\u2588 \u2588Are\u00a0you\u00a0sure\u00a0you\u00a0want\u00a0to\u00a0quit?\u2588 \u2588\u2588 \u2588\u2588 \u2588\u2588 \u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588 \u2588\u00a0Quit\u00a0\u00a0Cancel\u00a0\u2588 \u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 \u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588 </p> modal01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.screen import Screen\nfrom textual.widgets import Button, Footer, Header, Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass QuitScreen(Screen):\n    \"\"\"Screen with a dialog to quit.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            Label(\"Are you sure you want to quit?\", id=\"question\"),\n            Button(\"Quit\", variant=\"error\", id=\"quit\"),\n            Button(\"Cancel\", variant=\"primary\", id=\"cancel\"),\n            id=\"dialog\",\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"quit\":\n            self.app.exit()\n        else:\n            self.app.pop_screen()\n\n\nclass ModalApp(App):\n    \"\"\"An app with a modal dialog.\"\"\"\n\n    CSS_PATH = \"modal01.tcss\"\n    BINDINGS = [(\"q\", \"request_quit\", \"Quit\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(TEXT * 8)\n        yield Footer()\n\n    def action_request_quit(self) -&gt; None:\n        self.push_screen(QuitScreen())\n\n\nif __name__ == \"__main__\":\n    app = ModalApp()\n    app.run()\n</code></pre> modal01.tcss<pre><code>QuitScreen {\n    align: center middle;\n}\n\n#dialog {\n    grid-size: 2;\n    grid-gutter: 1 2;\n    grid-rows: 1fr 3;\n    padding: 0 1;\n    width: 60;\n    height: 11;\n    border: thick $background 80%;\n    background: $surface;\n}\n\n#question {\n    column-span: 2;\n    height: 1fr;\n    width: 1fr;\n    content-align: center middle;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>Note the <code>request_quit</code> action in the app which pushes a new instance of <code>QuitScreen</code>. This makes the quit screen active. If you click Cancel, the quit screen calls pop_screen to return the default screen. This also removes and deletes the <code>QuitScreen</code> object.</p> <p>There are two flaws with this modal screen, which we can fix in the same way.</p> <p>The first flaw is that the app adds a new quit screen every time you press Q, even when the quit screen is still visible. Consequently if you press Q three times, you will have to click Cancel three times to get back to the main screen. This is because bindings defined on App are always checked, and we call <code>push_screen</code> for every press of Q.</p> <p>The second flaw is that the modal dialog doesn't look modal. There is no indication that the main interface is still there, waiting to become active again.</p> <p>We can solve both those issues by replacing our use of Screen with ModalScreen. This screen sub-class will prevent key bindings on the app from being processed. It also sets a background with a little alpha to allow the previous screen to show through.</p> <p>Let's see what happens when we use <code>ModalScreen</code>.</p> OutputOutput (after pressing Q)modal02.pymodal01.tcss <p> ModalApp \u2b58ModalApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2585\u2585 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. \u00a0q\u00a0Quit\u00a0\u258f^p\u00a0palette </p> <p> ModalApp \u2b58ModalApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0i\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588 Where\u00a0the\u00a0\u2588\u2588st\u00a0not\u00a0f Fear\u00a0is\u00a0th\u2588\u2588 Fear\u00a0is\u00a0th\u2588Are\u00a0you\u00a0sure\u00a0you\u00a0want\u00a0to\u00a0quit?\u2588 I\u00a0will\u00a0fac\u2588\u2588 I\u00a0will\u00a0per\u2588\u2588\u2585\u2585 And\u00a0when\u00a0i\u2588\u2588 Where\u00a0the\u00a0\u2588\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2588st\u00a0not\u00a0f Fear\u00a0is\u00a0th\u2588\u00a0Quit\u00a0\u00a0Cancel\u00a0\u2588 Fear\u00a0is\u00a0th\u2588\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2588 I\u00a0will\u00a0fac\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.I\u00a0must\u00a0not\u00a0f Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. \u00a0q\u00a0Quit\u00a0\u258f^p\u00a0palette </p> modal02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.screen import ModalScreen\nfrom textual.widgets import Button, Footer, Header, Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass QuitScreen(ModalScreen):\n    \"\"\"Screen with a dialog to quit.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            Label(\"Are you sure you want to quit?\", id=\"question\"),\n            Button(\"Quit\", variant=\"error\", id=\"quit\"),\n            Button(\"Cancel\", variant=\"primary\", id=\"cancel\"),\n            id=\"dialog\",\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"quit\":\n            self.app.exit()\n        else:\n            self.app.pop_screen()\n\n\nclass ModalApp(App):\n    \"\"\"An app with a modal dialog.\"\"\"\n\n    CSS_PATH = \"modal01.tcss\"\n    BINDINGS = [(\"q\", \"request_quit\", \"Quit\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(TEXT * 8)\n        yield Footer()\n\n    def action_request_quit(self) -&gt; None:\n        \"\"\"Action to display the quit dialog.\"\"\"\n        self.push_screen(QuitScreen())\n\n\nif __name__ == \"__main__\":\n    app = ModalApp()\n    app.run()\n</code></pre> modal01.tcss<pre><code>QuitScreen {\n    align: center middle;\n}\n\n#dialog {\n    grid-size: 2;\n    grid-gutter: 1 2;\n    grid-rows: 1fr 3;\n    padding: 0 1;\n    width: 60;\n    height: 11;\n    border: thick $background 80%;\n    background: $surface;\n}\n\n#question {\n    column-span: 2;\n    height: 1fr;\n    width: 1fr;\n    content-align: center middle;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>Now when we press Q, the dialog is displayed over the main screen. The main screen is darkened to indicate to the user that it is not active, and only the dialog will respond to input.</p>"},{"location":"guide/screens/#returning-data-from-screens","title":"Returning data from screens","text":"<p>It is a common requirement for screens to be able to return data. For instance, you may want a screen to show a dialog and have the result of that dialog processed after the screen has been popped.</p> <p>To return data from a screen, call <code>dismiss()</code> on the screen with the data you wish to return. This will pop the screen and invoke a callback set when the screen was pushed (with <code>push_screen</code>).</p> <p>Let's modify the previous example to use <code>dismiss</code> rather than an explicit <code>pop_screen</code>.</p> modal03.pymodal01.tcss modal03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.screen import ModalScreen\nfrom textual.widgets import Button, Footer, Header, Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass QuitScreen(ModalScreen[bool]):  # (1)!\n    \"\"\"Screen with a dialog to quit.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Grid(\n            Label(\"Are you sure you want to quit?\", id=\"question\"),\n            Button(\"Quit\", variant=\"error\", id=\"quit\"),\n            Button(\"Cancel\", variant=\"primary\", id=\"cancel\"),\n            id=\"dialog\",\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        if event.button.id == \"quit\":\n            self.dismiss(True)\n        else:\n            self.dismiss(False)\n\n\nclass ModalApp(App):\n    \"\"\"An app with a modal dialog.\"\"\"\n\n    CSS_PATH = \"modal01.tcss\"\n    BINDINGS = [(\"q\", \"request_quit\", \"Quit\")]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Label(TEXT * 8)\n        yield Footer()\n\n    def action_request_quit(self) -&gt; None:\n        \"\"\"Action to display the quit dialog.\"\"\"\n\n        def check_quit(quit: bool | None) -&gt; None:\n            \"\"\"Called when QuitScreen is dismissed.\"\"\"\n            if quit:\n                self.exit()\n\n        self.push_screen(QuitScreen(), check_quit)\n\n\nif __name__ == \"__main__\":\n    app = ModalApp()\n    app.run()\n</code></pre> <ol> <li>See below for an explanation of the <code>[bool]</code></li> </ol> modal01.tcss<pre><code>QuitScreen {\n    align: center middle;\n}\n\n#dialog {\n    grid-size: 2;\n    grid-gutter: 1 2;\n    grid-rows: 1fr 3;\n    padding: 0 1;\n    width: 60;\n    height: 11;\n    border: thick $background 80%;\n    background: $surface;\n}\n\n#question {\n    column-span: 2;\n    height: 1fr;\n    width: 1fr;\n    content-align: center middle;\n}\n\nButton {\n    width: 100%;\n}\n</code></pre> <p>In the <code>on_button_pressed</code> message handler we call <code>dismiss</code> with a boolean that indicates if the user has chosen to quit the app. This boolean is passed to the <code>check_quit</code> function we provided when <code>QuitScreen</code> was pushed.</p> <p>Although this example behaves the same as the previous code, it is more flexible because it has removed responsibility for exiting from the modal screen to the caller. This makes it easier for the app to perform any cleanup actions prior to exiting, for example.</p> <p>Returning data in this way can help keep your code manageable by making it easy to re-use your <code>Screen</code> classes in other contexts.</p>"},{"location":"guide/screens/#typing-screen-results","title":"Typing screen results","text":"<p>You may have noticed in the previous example that we changed the base class to <code>ModalScreen[bool]</code>. The addition of <code>[bool]</code> adds typing information that tells the type checker to expect a boolean in the call to <code>dismiss</code>, and that any callback set in <code>push_screen</code> should also expect the same type. As always, typing is optional in Textual, but this may help you catch bugs.</p>"},{"location":"guide/screens/#waiting-for-screens","title":"Waiting for screens","text":"<p>It is also possible to wait on a screen to be dismissed, which can feel like a more natural way of expressing logic than a callback. The <code>push_screen_wait()</code> method will push a screen and wait for its result (the value from <code>Screen.dismiss()</code>).</p> <p>This can only be done from a worker, so that waiting for the screen doesn't prevent your app from updating.</p> <p>Let's look at an example that uses <code>push_screen_wait</code> to ask a question and waits for the user to reply by clicking a button.</p> questions01.pyquestions01.tcssOutput questions01.py<pre><code>from textual import on, work\nfrom textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Button, Label\n\n\nclass QuestionScreen(Screen[bool]):\n    \"\"\"Screen with a parameter.\"\"\"\n\n    def __init__(self, question: str) -&gt; None:\n        self.question = question\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(self.question)\n        yield Button(\"Yes\", id=\"yes\", variant=\"success\")\n        yield Button(\"No\", id=\"no\")\n\n    @on(Button.Pressed, \"#yes\")\n    def handle_yes(self) -&gt; None:\n        self.dismiss(True)  # (1)!\n\n    @on(Button.Pressed, \"#no\")\n    def handle_no(self) -&gt; None:\n        self.dismiss(False)  # (2)!\n\n\nclass QuestionsApp(App):\n    \"\"\"Demonstrates wait_for_dismiss\"\"\"\n\n    CSS_PATH = \"questions01.tcss\"\n\n    @work  # (3)!\n    async def on_mount(self) -&gt; None:\n        if await self.push_screen_wait(  # (4)!\n            QuestionScreen(\"Do you like Textual?\"),\n        ):\n            self.notify(\"Good answer!\")\n        else:\n            self.notify(\":-(\", severity=\"error\")\n\n\nif __name__ == \"__main__\":\n    app = QuestionsApp()\n    app.run()\n</code></pre> <ol> <li>Dismiss with <code>True</code> when pressing the Yes button.</li> <li>Dismiss with <code>False</code> when pressing the No button.</li> <li>The <code>work</code> decorator will make this method run in a worker (background task).</li> <li>Will return a result when the user clicks one of the buttons.</li> </ol> questions01.tcss<pre><code>QuestionScreen {\n    layout: grid;\n    grid-size: 2 2;\n    align: center bottom;\n}\n\nQuestionScreen &gt; Label {\n    margin: 1;\n    text-align: center;\n    column-span: 2;\n    width: 1fr;\n}\n\nQuestionScreen Button {\n    margin: 2;\n    width: 1fr;\n}\n</code></pre> <p> QuestionsApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Do\u00a0you\u00a0like\u00a0Textual?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Yes\u00a0\u00a0No\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>The mount handler on the app is decorated with <code>@work</code>, which makes the code run in a worker (background task). In the mount handler we push the screen with the <code>push_screen_wait</code>. When the user presses one of the buttons, the screen calls <code>dismiss()</code> with either <code>True</code> or <code>False</code>. This value is then returned from the <code>push_screen_wait</code> method in the mount handler.</p>"},{"location":"guide/screens/#modes","title":"Modes","text":"<p>Some apps may benefit from having multiple screen stacks, rather than just one. Consider an app with a dashboard screen, a settings screen, and a help screen. These are independent in the sense that we don't want to prevent the user from switching between them, even if there are one or more modal screens on the screen stack. But we may still want each individual screen to have a navigation stack where we can push and pop screens.</p> <p>In Textual we can manage this with modes. A mode is simply a named screen stack, which we can switch between as required. When we switch modes, the topmost screen in the new mode becomes the active visible screen.</p> <p>The following diagram illustrates such an app with modes. On startup the app switches to the \"dashboard\" mode which makes the top of the stack visible.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO2aW0/bSFx1MDAxNMff+ylQ9mVXKu7cL5VWK6ClXHUwMDA1UmhJuZRtVTn2JPHGsY3tJEDFd99jw8ZcdTAwMTdcYiSkXHUwMDA0Km1cdTAwMWWCPWfsOTPz+885M+HHi5WVRnpcdTAwMWWZxuuVhjlzbN9zY3vceJmVj0yceGFcdTAwMDAmkt8n4TB28pq9NI2S169eXHLsuG/SyLdcdTAwMWRjjbxkaPtJOnS90HLCwSsvNYPkr+x711x1MDAxZZg/o3DgprFVNLJqXFwvXHLjq7aMb1x1MDAwNiZIXHUwMDEzePvfcL+y8iP/LnnnevYgXGbcvHpuKLmnab10N1xmclcx5YpcdTAwMTOJNZrU8JI30FpqXFwwd8BjU1iyosaRjYZ7zeh78+JTW9uO2t48+/ChaLbj+X4rPfdzp5JcdTAwMTD6UtiSNFx1MDAwZfvmyHPTXtZ2rXzaU3E47PZcdTAwMDKTJJVnwsh2vPRcdTAwMWPKeOG7XHUwMDFkdPNXXHUwMDE0JWdwtyotjVx00pxcdTAwMTFOlGKMTMxXz1OLXHUwMDEwwlx1MDAwNYyT0lxuXHUwMDA2pObYRujDPIBjv6H8U7jWtp1+XHUwMDE3/Fx1MDAwYtyiXHUwMDBl5rbd7lx1MDAxNHXG190lQlpMM1x1MDAwMe1ThbVWk1x1MDAxYT3jdXtp1jvOLCWxkFxiXHUwMDBiTqUo/DD5dGioXHUwMDAwb2BsYshcdTAwMWGPttyci2/lXHUwMDExXHUwMDBi3OtcdTAwMTFcdTAwMGKGvl/4m1x1MDAxOd6WWCqeXHUwMDE5Rq59NelYwDhQxbGkolx1MDAxOCnfXHUwMDBi+vXX+aHTLzjJSy9fzo0n43wqnoogISijbGY8t9+hQ9U8+dTc2Wz7zY3Drffn0f5T4onRvXxyXHUwMDBi5lRrwpiQmFAlK3zChFtcdTAwMDIhSiSlSmjJXHUwMDE2wrNjt1x1MDAxMeKPgyehjGOt0Fx1MDAxMvBkQiMk+Vx1MDAxMvBUpaGo4amFXCLgzVx1MDAxY3SK3ogo01x1MDAxMu6J8665ftzdx1x1MDAwM3fzmdOJLYyBTC44V1xmRlx1MDAxZtEqnlhCXHUwMDA1ilx1MDAxOPArXHUwMDA1XHUwMDExdLHlU1x1MDAxMUdj8yh8YkJcdTAwMTiGJYUsXHUwMDAxUIZcdTAwMTFF0NxcdTAwMTJcdTAwMDClkkxcdTAwMDM0XHUwMDBiaowjiWdcdTAwMDd0dEC3u1EoRu/eXHUwMDFlOKnauaCO/5SA0vv4lDhcdTAwMDOUQ1dcdTAwMDVDWlx1MDAxMF6hkyNkMWCTaSGZYrTu1nxwtlxya7vtXz22g4gxXHUwMDEzVC6DzVIwuFx1MDAxMduZZJrCnM1cZufnL/2NcNPZ+4L39b67ZtZcdTAwMDej95+fNZxUUEtcbqmk1Fx1MDAwMsM3rcGpLSWIJCBhzLhaiM2OK1xyZv+zOTObnN3BJkJKc0g8Z2bT/b56vLcrm+GgXHUwMDFk+73xXHUwMDA2e+tvnjw3Ni3IXCJplkUykucuvFx1MDAwNiu3lIZcdTAwMDSTMYlcdTAwMTFcdTAwMTdcdTAwMTVWmURgXHUwMDE08Fx1MDAxNIxccqRcdTAwMDJ0IViZI0znl89CfzasqTlLbyNcdTAwMTWXwlaNVMVhaYG1Q85cZqp/SFtvdk9OTtaJcS76slx1MDAxZnL1aVxuqD3b6VxyY/P0SShcdTAwMTOWXHUwMDEwkFxcMlx1MDAwNmkoIZKzXG6cXHUwMDEySVx1MDAwYlZRyHUgxSOYL5aCTovymCuLaq6xlkAmYvImnOXk91xuR4Ipw1x1MDAxY5V20o+II+TmisyTc1x1MDAxNtNcdTAwMWVcdTAwMDZpy7vIk0ZVKd20XHUwMDA3nn9embmcU1x1MDAxOKmvXHLXTnrt0I7dr41Gxbzme90gx810qkynnmP7XHUwMDEzc1x1MDAxYUaF1YHmbC8w8ZZbdzuMva5cdTAwMTfY/ue7m4ZcdTAwMWWb95OVwiolg207MZk1z4pcdTAwMWakQqBrarzAXGa2o4ry2eOFQVx0+uLt75zzXvfirFx1MDAxZq7udFx1MDAwZbaeVobsPlx1MDAxNSpMsr0ggTVcdTAwMDfyadiD10SoLYIo5lx1MDAxYWFcYjNqsXOKaVwiXHUwMDE0ylx1MDAxMopqXGJRXGJyJlXKSZ6NXGKh92iek4lFRdgzfrR8/dVbfVTpTVx1MDAwZoDZgVx1MDAxOFwipdbuXHUwMDEz3sH2If9cdTAwMThcdTAwMWSGp7J1vrHzXHUwMDBmYmunb5vPXFx4jHKLYlx1MDAwNblcdTAwMWJHnGOlqvuIXFx5XHUwMDA0Q1qnRCa/R1xuf0RZsIvWRCDCqS6r6dlIXHUwMDBmKTlXOrao9Fx1MDAxMpOmXtBNli+/21p+TFx0lnO0mzt5yLnpPLsl0Vx1MDAxMuHx+MBcdTAwMWZ8XGLGXFydXlx1MDAxY1x1MDAwZtvjvYeJkNTKXHUwMDFmL1x0JcRCXHUwMDAy4p5cdTAwMDagQVx1MDAwNJRU41x1MDAxZtHEXHUwMDAyocLOKtNcdTAwMDfEpukqVLLD21x1MDAwZlShVlkrXHUwMDEwZJDimpaOwO9cdTAwMTChUOAz4z9vS3RtKPgpze1ol1x1MDAxY21/POqf4vFWa20zSnbtuNjqVWCz4zhcdTAwMWM3JpbL66s7XHUwMDE0rjQofJ5fpVx1MDAxNlP4mpN6I7Py+8hLvLZv/liuyqe3/jOUfjX4t0mdsHrpROqwXHUwMDA3k0rL2bebd9PwJEqX91x0PYt0QnPKXHUwMDE51Vx1MDAxNFx1MDAxM1ngklx1MDAxZqxAMOZIXHSuXGLnTEl2x1HIXHUwMDAyQkdcdTAwMTZWXHUwMDFjgStMZb9OXHUwMDEzSW45XGZhzJKIXHUwMDExgYXQWGB9U/lCQFx1MDAwZlx1MDAxOCqWqvulX2j6P1bIdcnlg6LywzWbpHacrnuBXHUwMDBika7q2PU/RGzNXHUwMDEwTXKVO8PMy1VkIcmFJJpjXGJZTFx1MDAxNucm2cjYUbbJgSqUXG5CKMKSiJtdN4FbuFTthZ2kXHUwMDFi4WDgpdD/j6FcdTAwMTek9Vx1MDAxYXmH1jLh9Yx9Q//w5rKtrtAoe2N1+S2uVlxuhvObyfW3l7fWXr2Dr+xzg6zihS/Kf7M1O2+iYUdRK4WZn0xcdTAwMTSg5rnXS27Rz8bIM+P121x1MDAwZbDzT1x1MDAxNlxy8rHOllx1MDAwNpPjePni8l9cdTAwMDSHyVx1MDAxMCJ9 \"dashboard\"\"help\"\"settings\"Active (visible) <p>If we later change the mode to \"settings\", the top of that mode's screen stack becomes visible.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN2a2VLbSFx1MDAxNIbv81x1MDAxNJTnNii9L6mammJfMmxcdTAwMDFcdTAwMDJkkkrJUttWLEtCkrFJinef01xuYy1gNrNlfGHsPrL6tPr7z1wi8fPN3FxcKz9PTOv9XFzLjD03XGb81Fx1MDAxZLXe2vEzk2ZBXHUwMDFjgYlcdTAwMTTfs3iYesWRvTxPsvfv3lxy3LRv8iR0PeOcXHUwMDA12dBccrN86Fx1MDAwN7HjxYN3QW5cdTAwMDbZX/Z921x1MDAxZJg/k3jg56lTTjJv/CCP019zmdBcZkyUZ3D2f+D73NzP4r3inVx1MDAxZriDOPKLw1x1MDAwYkPpXHUwMDFlJbw5ulx1MDAxZEeFq5xcdIlcdTAwMTlcIlx1MDAxM3uQLcNcXLnxwdhcdTAwMDF/TWmxQ62j3Z01s7iXu9m8TpLTlW/JsEPLSTtBXHUwMDE47ufnYeFSXHUwMDE2w0pKW5ancd9cdTAwMWNcdTAwMDV+3lx1MDAwMytujE/7VVx1MDAxYVx1MDAwZru9yGRZ7Tdx4npBfm5cdTAwMTeHJoNu1C1OUY6M7Y80dbDWmGtcIpggQtOJ2f6eKe4wXCK1XHUwMDA2XHUwMDEzZVxcNdxaikPYXHUwMDAzcOtcdTAwMGZUvErH2q7X74J3kV9cdTAwMWWDueu2O+Uxo8vFXHUwMDEyIVx1MDAxZKaZUIxRXHUwMDA1zpSz9EzQ7eXWTc5cdTAwMWMlsZBcYlx1MDAwYk6lKP0wxWbAXHUwMDAy7Fx1MDAxOVx1MDAxOJtcdTAwMTjs5MmGXzDxtXq9XCL/8npFwzAs/bWGlSZHVZYq27y/sX7a3/Hzle1w72Rk0sWTxW97k3XVwHPTNFx1MDAxZbUmlovLT6VHw8R3f1x1MDAwMYXh4iuGXHUwMDA1oVKWSIZB1G86XHUwMDFixl6/ZLBcdTAwMTi9eHtv8JlcdTAwMTLTwFx1MDAwNyooJVx1MDAwMle24jb0+3LpQ1x1MDAxYeJvx6j9PTzoxt3R9+HWK0dcdTAwMWbYXHUwMDE2XHUwMDAwNiGMXHUwMDEy1Fx1MDAwMJ9cdEchLlx1MDAwNVx1MDAxMoLCzrCZyO+4bYT405BPQJewUejRyH9ccmxqoqexSTVBmHBy96jMR8nR1tjfpOM12U+Xu0ujT/HglaOpXHUwMDFkiLlSaURcdTAwMTmSVNbYpGClWDFFuCRIK8ZnglNcdTAwMTFPY/MkcGKQXHUwMDE2xoqQ/1x1MDAxN520kiWbJYOWmFx1MDAxM87Znek88Vx1MDAwZdaOt7zOp7PNY7W1tDFYWF7cfkk62W10akxcdTAwMWNCXHUwMDA0x5hSpKSqwVx0VDpcdTAwMWHUXHTVhKRcdTAwMTji60xstlxya/vt36RkuFx1MDAxMU0hlHpcdTAwMTY01TQ0MVKwYCwqaf82NlPlkf7ybrhcdTAwMWLujE829lx1MDAwZvn6SftF61mMboOTXHUwMDBiu+1cdTAwMWFTXHUwMDBiqNSkXHUwMDFlOpkmXHUwMDBlXHUwMDEyXG5ziVx1MDAxONdcdTAwMTQ1/bpnWvelwez3p1x1MDAxM1xuXHUwMDFjhckz0Mn59F6LXG6GIKKgO8OZeWp1NzvrbVxmP6ydjr6vXHUwMDA0KplfeXVwOohcdTAwMTIoppVgRFx1MDAwYlx1MDAwNVA2aJVcdTAwMGXCSENcdTAwMDcmXHUwMDEwpFx1MDAwZVanlUNzhlxixlx1MDAwMlxuXHUwMDFlTORsRSjzhOn8XHUwMDBmitDHpTU34/w6VGGSqYGUI4FcdTAwMTnn8u7dUZet7+xcdTAwMWRcdTAwMWStRHtYXHUwMDFk8uHpeEzaXHUwMDBiU1jtuV5vmJpcdTAwMTdP84QpXHUwMDA3NpxcdMKVRErX2Vx1MDAxNLZcYoXuiCPIKZg+UZ7HXFw5VHONtVx1MDAwNDBcdTAwMTGTV9mkvEkjwZTZPVwiz0GjJlCG03vQWG56XHUwMDFj5fvBXHUwMDBme+GJqo2uuoMgPK/tW4EpXFypLy3fzXrt2E39L61WzbxcdTAwMTBcdTAwMDZdS24rNJ060nngueHEnMdJafVgOjeITLrhN92O06BcdTAwMWJEbnhw89SwYrM+XHRcdTAwMTRO5W5a282MtdpcdTAwMDXyXHUwMDA3ibBcdTAwMWHymlwiXHUwMDE0UHpcIoird+9cdTAwMDPnPZxcdTAwMWZcdTAwMWZ8Xo/ib5tcdTAwMWZHW6uHy8qLXrlcYjFEXFyHKi6FgFpcdTAwMDZcdTAwMTFdr2ckkkWG4IgwTrSa7Vx1MDAwNt00XHUwMDE1XG7lXGJFNWPgXHUwMDAwZqpSlLxcdTAwMWFcdTAwMTVCI4Lv0/rNqsKeXHST51x1MDAxN2Bz1ifVnsDN0Yn2JKOSQ69992Ltx+r4cIVcdTAwMDdq6cTdPmDR2s5cdTAwMGZ/8PFltXd7LyEocygniDJbc6Ayxf2SXHUwMDFlNLpSI6lcdTAwMTDngqjZWompXHSQKEdcdTAwMGLoY1x1MDAwNII0o6tyejXaI5yx+9Rjs2ovM3lcdTAwMWVE3ez59XfdzE+pQYxlc7TMf1RqXHUwMDAxjcHd85//cXfps4/mN8+S4OPSh8V2XHUwMDEwz88/TIOkMf6EXHUwMDFhZNpB0MkjibWwbVJNhERxh2PMidJQqaLqfbcrKlSyw9tcdTAwMGZToYI4QDn0b1xiQ9yrdlx1MDAxZjeIUEDJXGZtwuP1RJeGa1x1MDAxZknhwd/n/vKmiFx1MDAwZldcdTAwMGU6cZxiubpQ3pmowXb/R1Ka2j/PpvBcdTAwMDUvXHUwMDBmzszzars552Oo+teFvk7WeuqTN4K0JETf48HbzTv/XCKqlreK2lxuXG60LyhcdTAwMTSuiuD6LWRcbjlPSlvTaY5cdTAwMTWYb3i+MYOoqVx1MDAwMz08gTDKtOQgVVROM1G11I5iXHUwMDFjXHUwMDBlXHUwMDAxzdubhldFblx1MDAxZlx1MDAwZlx1MDAxMlapXHJuV3kp3/9QIZcjXHUwMDE3XHUwMDBmLH5cdTAwMWYqzyx303wxiHxIanXHLv+lYuNcdTAwMGWJo1x1MDAxMLQ3tF5cIlx1MDAwNyvrk6BcblOoQVx1MDAxMKGVo7puYmOpXHUwMDAztVxmWFx1MDAxMId2XHUwMDFlXHUwMDEyXHUwMDE4u7J2XHUwMDEz+aVP9WW4Wb5cdTAwMTRcdTAwMGZcdTAwMDZBXHUwMDBlXHUwMDE3YDdcdTAwMGWivHlEsaJcdTAwMDUrvJ5xr6hcdTAwMWXOXFy1NVx1MDAxNZrYM9ZDbflprmS4+DL5/PXttUdPx8u+roBVnu5N9a+NzsVcdTAwMDQtN0n2c9j4yT5cdTAwMDFpgX9cdTAwMTlcXMtVts5cdTAwMDIzWrzuZnXxsnG/uNI2MJiCxos3XHUwMDE3/1x1MDAwMiHc1HkifQ== \"dashboard\"\"help\"\"settings\"Active <p>To add modes to your app, define a <code>MODES</code> class variable in your App class which should be a <code>dict</code> that maps the name of the mode on to either a screen object, a callable that returns a screen, or the name of an installed screen. However you specify it, the values in <code>MODES</code> set the base screen for each mode's screen stack.</p> <p>You can switch between these screens at any time by calling <code>App.switch_mode</code>. When you switch to a new mode, the topmost screen in the new stack becomes visible. Any calls to <code>App.push_screen</code> or <code>App.pop_screen</code> will affect only the active mode.</p> <p>Let's look at an example with modes:</p> modes01.pyOutputOutput (after pressing S) <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Footer, Placeholder\n\n\nclass DashboardScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Placeholder(\"Dashboard Screen\")\n        yield Footer()\n\n\nclass SettingsScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Placeholder(\"Settings Screen\")\n        yield Footer()\n\n\nclass HelpScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Placeholder(\"Help Screen\")\n        yield Footer()\n\n\nclass ModesApp(App):\n    BINDINGS = [\n        (\"d\", \"switch_mode('dashboard')\", \"Dashboard\"),  # (1)!\n        (\"s\", \"switch_mode('settings')\", \"Settings\"),\n        (\"h\", \"switch_mode('help')\", \"Help\"),\n    ]\n    MODES = {\n        \"dashboard\": DashboardScreen,  # (2)!\n        \"settings\": SettingsScreen,\n        \"help\": HelpScreen,\n    }\n\n    def on_mount(self) -&gt; None:\n        self.switch_mode(\"dashboard\")  # (3)!\n\n\nif __name__ == \"__main__\":\n    app = ModesApp()\n    app.run()\n</code></pre> <ol> <li><code>switch_mode</code> is a builtin action to switch modes.</li> <li>Associates <code>DashboardScreen</code> with the name \"dashboard\".</li> <li>Switches to the dashboard mode.</li> </ol> <p> ModesApp Dashboard\u00a0Screen \u00a0d\u00a0Dashboard\u00a0\u00a0s\u00a0Settings\u00a0\u00a0h\u00a0Help\u00a0\u258f^p\u00a0palette </p> <p> ModesApp Settings\u00a0Screen \u00a0d\u00a0Dashboard\u00a0\u00a0s\u00a0Settings\u00a0\u00a0h\u00a0Help\u00a0\u258f^p\u00a0palette </p> <p>Here we have defined three screens. One for a dashboard, one for settings, and one for help. We've bound keys to each of these screens, so the user can switch between the screens.</p> <p>Pressing D, S, or H switches between these modes.</p>"},{"location":"guide/screens/#screen-events","title":"Screen events","text":"<p>Textual will send a ScreenSuspend event to screens that have become inactive due to another screen being pushed, or switching via a mode.</p> <p>When a screen becomes active, Textual will send a ScreenResume event to the newly active screen.</p> <p>These events can be useful if you want to disable processing for a screen that is no longer visible, for example.</p>"},{"location":"guide/styles/","title":"Styles","text":"<p>In this chapter we will explore how you can apply styles to your application to create beautiful user interfaces.</p>"},{"location":"guide/styles/#styles-object","title":"Styles object","text":"<p>Every Textual widget class provides a <code>styles</code> object which contains a number of attributes. These attributes tell Textual how the widget should be displayed. Setting any of these attributes will update the screen accordingly.</p> <p>Note</p> <p>These docs use the term screen to describe the contents of the terminal, which will typically be a window on your desktop.</p> <p>Let's look at a simple example which sets styles on <code>screen</code> (a special widget that represents the screen).</p> screen.py<pre><code>from textual.app import App\n\n\nclass ScreenApp(App):\n    def on_mount(self) -&gt; None:\n        self.screen.styles.background = \"darkblue\"\n        self.screen.styles.border = (\"heavy\", \"white\")\n\n\nif __name__ == \"__main__\":\n    app = ScreenApp()\n    app.run()\n</code></pre> <p>The first line sets the background style to <code>\"darkblue\"</code> which will change the background color to dark blue. There are a few other ways of setting color which we will explore later.</p> <p>The second line sets border to a tuple of <code>(\"heavy\", \"white\")</code> which tells Textual to draw a white border with a style of <code>\"heavy\"</code>. Running this code will show the following:</p> <p> ScreenApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p>"},{"location":"guide/styles/#styling-widgets","title":"Styling widgets","text":"<p>Setting styles on screen is useful, but to create most user interfaces we will also need to apply styles to other widgets.</p> <p>The following example adds a static widget which we will apply some styles to:</p> widget.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass WidgetApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(\"Textual\")\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.border = (\"heavy\", \"white\")\n\n\nif __name__ == \"__main__\":\n    app = WidgetApp()\n    app.run()\n</code></pre> <p>The compose method stores a reference to the widget before yielding it. In the mount handler we use that reference to set the same styles on the widget as we did for the screen example. Here is the result:</p> <p> WidgetApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Textual\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Widgets will occupy the full width of their container and as many lines as required to fit in the vertical direction.</p> <p>Note how the combined height of the widget is three rows in the terminal. This is because a border adds two rows (and two columns). If you were to remove the line that sets the border style, the widget would occupy a single row.</p> <p>Information</p> <p>Widgets will wrap text by default. If you were to replace <code>\"Textual\"</code> with a long paragraph of text, the widget will expand downwards to fit.</p>"},{"location":"guide/styles/#colors","title":"Colors","text":"<p>There are a number of style attributes which accept colors. The most commonly used are color which sets the default color of text on a widget, and background which sets the background color (beneath the text).</p> <p>You can set a color value to one of a number of pre-defined color constants, such as <code>\"crimson\"</code>, <code>\"lime\"</code>, and <code>\"palegreen\"</code>. You can find a full list in the Color API.</p> <p>Here's how you would set the screen background to lime:</p> <pre><code>self.screen.styles.background = \"lime\"\n</code></pre> <p>In addition to color names, you can also use any of the following ways of expressing a color:</p> <ul> <li>RGB hex colors starts with a <code>#</code> followed by three pairs of one or two hex digits; one for the red, green, and blue color components. For example, <code>#f00</code> is an intense red color, and <code>#9932CC</code> is dark orchid.</li> <li>RGB decimal color start with <code>rgb</code> followed by a tuple of three numbers in the range 0 to 255. For example <code>rgb(255,0,0)</code> is intense red, and <code>rgb(153,50,204)</code> is dark orchid.</li> <li>HSL colors start with <code>hsl</code> followed by a angle between 0 and 360 and two percentage values, representing Hue, Saturation and Lightness. For example <code>hsl(0,100%,50%)</code> is intense red and <code>hsl(280,60%,49%)</code> is dark orchid.</li> </ul> <p>The background and color styles also accept a Color object which can be used to create colors dynamically.</p> <p>The following example adds three widgets and sets their color styles.</p> colors01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.widgets import Static\n\n\nclass ColorApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(\"Textual One\")\n        yield self.widget1\n        self.widget2 = Static(\"Textual Two\")\n        yield self.widget2\n        self.widget3 = Static(\"Textual Three\")\n        yield self.widget3\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"#9932CC\"\n        self.widget2.styles.background = \"hsl(150,42.9%,49.4%)\"\n        self.widget2.styles.color = \"blue\"\n        self.widget3.styles.background = Color(191, 78, 96)\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <p>Here is the output:</p> <p> ColorApp Textual\u00a0One Textual\u00a0Two Textual\u00a0Three </p>"},{"location":"guide/styles/#alpha","title":"Alpha","text":"<p>Textual represents color internally as a tuple of three values for the red, green, and blue components.</p> <p>Textual supports a common fourth value called alpha which can make a color translucent. If you set alpha on a background color, Textual will blend the background with the color beneath it. If you set alpha on the text color, then Textual will blend the text with the background color.</p> <p>There are a few ways you can set alpha on a color in Textual.</p> <ul> <li>You can set the alpha value of a color by adding a fourth digit or pair of digits to a hex color. The extra digits form an alpha component which ranges from 0 for completely transparent to 255 (completely opaque). Any value between 0 and 255 will be translucent. For example <code>\"#9932CC7f\"</code> is a dark orchid which is roughly 50% translucent.</li> <li>You can also set alpha with the <code>rgba</code> format, which is identical to <code>rgb</code> with the additional of a fourth value that should be between 0 and 1, where 0 is invisible and 1 is opaque. For example <code>\"rgba(192,78,96,0.5)\"</code>.</li> <li>You can add the <code>a</code> parameter on a Color object. For example <code>Color(192, 78, 96, a=0.5)</code> creates a translucent dark orchid.</li> </ul> <p>The following example shows what happens when you set alpha on background colors:</p> colors01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Color\nfrom textual.widgets import Static\n\n\nclass ColorApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widgets = [Static(\"\") for n in range(10)]\n        yield from self.widgets\n\n    def on_mount(self) -&gt; None:\n        for index, widget in enumerate(self.widgets, 1):\n            alpha = index * 0.1\n            widget.update(f\"alpha={alpha:.1f}\")\n            widget.styles.background = Color(191, 78, 96, a=alpha)\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <p>Notice that at an alpha of 0.1 the background almost matches the screen, but at 1.0 it is a solid color.</p> <p> ColorApp alpha=0.1 alpha=0.2 alpha=0.3 alpha=0.4 alpha=0.5 alpha=0.6 alpha=0.7 alpha=0.8 alpha=0.9 alpha=1.0 </p>"},{"location":"guide/styles/#dimensions","title":"Dimensions","text":"<p>Widgets occupy a rectangular region of the screen, which may be as small as a single character or as large as the screen (potentially larger if scrolling is enabled).</p>"},{"location":"guide/styles/#box-model","title":"Box Model","text":"<p>The following styles influence the dimensions of a widget.</p> <ul> <li>width and height define the size of the widget.</li> <li>padding adds optional space around the content area.</li> <li>border draws an optional rectangular border around the padding and the content area.</li> </ul> <p>Additionally, the margin style adds space around a widget's border, which isn't technically part of the widget, but provides visual separation between widgets.</p> <p>Together these styles compose the widget's box model. The following diagram shows how these settings are combined:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT2txcdTAwMTb+3l/h+H4tu/t+6cyZM9VqrbfWevfMO51cYlx1MDAwMaJAaFx1MDAxMlx1MDAxNHyn//2sXHUwMDFklCSERFCw6Dn50EpcdTAwMTKSxd7redaz1r78825lZTVcdTAwMWF03dWPK6tuv+q0vFrg3K6+t+dv3CD0/Fx1MDAwZVxcovHn0O9cdTAwMDXV+M5mXHUwMDE0dcOPXHUwMDFmPrSd4NqNui2n6qJcdTAwMWIv7DmtMOrVPFx1MDAxZlX99lx1MDAwNy9y2+G/7b/7Ttv9V9dv16JcdTAwMDAlL6m4NS/yg+G73JbbdjtRXGJP/1x1MDAwZnxeWfkn/jdlXeBWI6fTaLnxXHUwMDE34kuJgZzT8bP7fic2llBFleCck9FcdTAwMWRe+Fx1MDAxOd5cdTAwMTe5NbhcXFx1MDAwN5vd5Io9tTo46Tt6Y//TbvubXHUwMDFmnISHXHUwMDFkv16tJa+te63WYTRoXHKbwqk2e0HKqDBcbvxr99SrRU379rHzo+/V/MhcdTAwMWEwulx1MDAxY/i9RrPjhmHmS37XqXrRwJ7DeHR22FxmXHUwMDFmV5IzfdtcdTAwMDZYXCIhpMGYXHUwMDEwybA0cnQ5flx1MDAwMMdIY2FcYiZGKEFcdTAwMTVcdTAwMWYzbd1vQW+AaX/h+Ehsu3Sq11xyMLBTXHUwMDFi3Vx1MDAxM1x1MDAwNU4n7DpcdTAwMDH0WXLf7f2PXHUwMDE22CCmNJVUXHUwMDBiplxyS35P0/VcdTAwMWHNyFx1MDAxYUtcdMJaXHUwMDE4psTwbYmxoVx1MDAxYndcZtjJXGI8JfmR1oTu11rsI3+Pt2vTXHS69823XHUwMDFh2lx1MDAwZinzreVcdTAwMWLjXHUwMDBllnayVN9/r+v+vt5vXa5HV0dH52dVXHUwMDE11ndGz8p4pFx1MDAxM1x1MDAwNP7t6ujK7/u/XHUwMDEy03rdmjP0MlwiJSOSSo0l06PrLa9zXHJcdTAwMTc7vVYrOedXr1x1MDAxM8eMz/5+/1x1MDAwNERIZVxuXHUwMDExYYji4Fx1MDAwNFRNjYjdra+tur9f3aq3XHUwMDA3P1x1MDAxYd7N7lx1MDAwMd1cZlx1MDAwYlx1MDAxMFx1MDAxMfqA75nxMPatx+DAXHUwMDFlRYNcdTAwMDI0XHUwMDE4TVx1MDAxOVx1MDAxNVx1MDAxYyshWFx1MDAxNlxylGokJSZKXHS4R6cvj6NB1FmtykvR8Fx1MDAxN69Kty7ySGBCIS1cdTAwMDSXWok8XGKoMIhcdTAwMWFcdTAwMDNewVx1MDAxOcNU5EFAXHUwMDE5XHUwMDEzklxirl9cdTAwMTZcdTAwMDTVb7vnzbOt49rAmE5vn3RVs+a9Qlx1MDAxMHBZXGZcdTAwMDImMeVUSjE1XGKud6+u2mHw6zRw+4HZONu46PHPT1x1MDAwYlx1MDAwYrRcYlx1MDAwNjUnbM43LFxiRpFSXFxIYaiSWpAsXHUwMDBlXHUwMDE0uKDWWlx1MDAxOUOoIIqwQlx1MDAxY7hSqedEXHUwMDA18O88XHUwMDA0SMq1XHUwMDFmiJ9pXGJh0DX8pZz+wZdcIrdcdTAwMWZlvXzY8TtcdTAwMTef9k5+bW1drG1dXHUwMDA0P2818/prTsrn309+7PDLd1x1MDAwM7355Yiz3Z1+c933mt+rXHUwMDFi11+WXHUwMDEzS5nfn5Z/KZCMwchIQjhcdTAwMDeKmlx1MDAxYUU3XHUwMDFlZnzT7Kvewefq9aU52D6W3+YsrmZcZiaPg0hcdTAwMWGDuLA/lEpmtKFcdTAwMTlcdTAwMTBcdMKQ1pJcdTAwMTgjtNRcdTAwMTBNXHUwMDE2pqwkzUOIilx1MDAxY4KwkFQxiHHzR9A8nTHpdL9cdTAwMTNcdTAwMWR6d7bdKc6c3XTaXmuQ6bfYS8HSPSdoeJ10W4YuvDMmd525+1PLa1g/Xm259ayDR1x1MDAxZWQjo8uRn/rlVXi7XHUwMDAzj1x1MDAwYr7Wxn+FXHUwMDFmePBmp3WUteRJ2GKiXHUwMDEwW1x1MDAwNGSaUcDabGpwXHLCzs7hQe1qw2l+3dq9lp2Dm7D5gplcdTAwMGJ+XCK6IERRK4K0XHLLXFxk0Fx1MDAwNalcdTAwMWJcdTAwMDLgYSpccmRcdTAwMTOMXHUwMDFhtTB4pXKicngpSFxcXGZ+YVXmqeb2TXV7/etGh31yu+etSPw8mmskSdTSosH73anVvE5jXHUwMDE50PtgytNCI1bjZ1x1MDAxZuBcdTAwMGLaXHUwMDFkXHUwMDEyXFwpplx1MDAwZo2Tdcayo1cwVVwiMFx1MDAxOSdIvZDA5Fx1MDAxM1x1MDAwNCZNvW9cYl9gXHUwMDFiyLYgUL98cFxcXHUwMDE0vlhcdTAwMGVf63BcdTAwMTmsWoGmciaDzExcdTAwMDZZXHUwMDE1vuVcdTAwMDYlMGt7tVo628pcIu2xJGlcdTAwMWN8XHUwMDE5O0tcdTAwMTFYnuhpXlx1MDAwNEPCpWCCSjJ9tWPnR6O5dbm5b1x1MDAwNs2rk8b+USDO+rdcdTAwMDU4rFx1MDAwNn5cdTAwMThWmk5UbVx1MDAxNmFxvNC2OJlcdTAwMWFcdTAwMTc9tFx1MDAxMYRgI1xyIYxnsEipRJBZXHRNjZREM1lcXFx1MDAwMpyi6FGKxcdcdTAwMGJcdTAwMWaGcCzzwVVcYlxyvVx1MDAwNVx1MDAwMvZlY+vF55/O2t2nauv48MugvXf16cfBXHUwMDE1ny62lmZ/e9v9XHLj17c3RXBUOe+37rw9df3HYnYpwIbvn1x1MDAwNC4qcVx1MDAxMbooMUopkGVTg6u8pWdcdTAwMDZXYSVl7uBcdTAwMTJGIU4heGCNtVx1MDAwMcfO5oBcdTAwMTSucmhcdGIgXHUwMDAzNGRxOSAjiHJcYqZcdTAwMWNiKSeQdubxxTRcdTAwMTJcdTAwMDRMZFx1MDAxNFBuMOXjKCNYWv+RqXxyapjFpr50XHUwMDEwXGYjJ4jWvE6s1D6mkPYwcjSMPj0xOOmJdXzt4cPTtmxf3ahcdTAwMTM/XHUwMDA1N1xim9Ve7Fx1MDAwMlxiY26w4Fx1MDAxYfqCXHUwMDFhbFL3NJxu3ESIKMNcdTAwMTVcdTAwMTAp3Mah3+/vXHUwMDE4XHUwMDAxftXt1Fx1MDAxZTepPJikTKpgRDU3jFxi8DBwMS1VziiKjFx1MDAwMXMgXHSC+5SUQuWMajlhtO63257Ved99r1x1MDAxM403cdyWnyzam66Tk8fwo9LXxmmha5+YpdPkr5VcdTAwMDQy8YfR33+/n3h3oSvbo5Lz4uRx79L/z6rZ7buK+Ixhrlx1MDAxOZMzpNzlLvdcInz2RN1O49ZXoFx1MDAxNojmNFW5XHUwMDE51rQ4XHUwMDAyNU9cdTAwMTlIXHUwMDA1cDSlx+yaY00rXHT1JUm35sImXHUwMDEwL1dcdTAwMTR+ti5YQPyeJSfI59xrflBLS/s/l3LfW/I0OWL5sVxivuCwilE9vdQv12fzXHUwMDE505k7cpUmXGJcdTAwMTRcYoGMmyvKx1Q+5DqIgFx1MDAxMiFcdTAwMDRcdTAwMTBDXHUwMDE0Xdw4P1x1MDAwNCwhpVxyVMDdXFzTXHTFaWB4XHUwMDA29zCOXHUwMDE52GnrezkpXCKYYoxi/lx1MDAwNGQvg1x1MDAxNFx1MDAxOVx1MDAwZp5zUFx1MDAwNMNYr5GWXHUwMDE0Q8tcdTAwMTgsQX/wtERJaVx1MDAwNoWNVkpyyZTQkHK9akFQ6FH2qOSdaUZFUMwpjJeMXHUwMDE0K2MoVnz6Ql75JJIlZlx1MDAxNWh6XHUwMDAzv5RA2/Ox/IZhXHUwMDA0XHQ7tFx1MDAxM8EgkPi4XfNkXHUwMDE1XHTv4LFcdTAwMTZcdTAwMDbP5olcZs7QitJcdTAwMTRslWCtJFxc5jNcdTAwMWNcdTAwMDHGgqh5ylx1MDAxONjrpJXyWWsp0oCO5EZcdTAwMDCSKFFcdTAwMDI4I2m8JPl55SxS5EH2yPvOjCxcdTAwMTJrplx0JKJTXHUwMDEyepxDpGBcdTAwMDY4LTUp6zFcdTAwMGVZ29w4ucWuUP0tsbl95ZxXfTlY9nFyYFxyXHUwMDA09IHt1Cqp+Vx1MDAxOIdAXHUwMDFlh1xmqFx1MDAxMiPhXHUwMDA2I1x1MDAwNF/kXHUwMDE0RESkMpPLj1x1MDAwNI1XJlx1MDAxZkhDXHUwMDEzhTGHZPOtkUb2YfPFcubaXFyBPKFcdTAwMTftMeq/OVx1MDAwMVfIYuBqJY2tqE9fXHUwMDEwYNu/blx1MDAwZqtcdTAwMDbj3unNSbOmyMHaN7b0wIWmVpBdXHUwMDFiqZSwXHUwMDAzXGJcdTAwMTngcq3tbF3OoNlcdTAwMDEgIDdcdTAwMTdcdTAwMDZcXFx1MDAwZbJXXHUwMDEwkVx1MDAxZVx1MDAxOVx1MDAxOOFcdTAwMTYjXHUwMDE2K8NcdMDlXHUwMDAwXFyRKVP8XHUwMDFmuH9cdTAwMTC4+V60RyXpwHlcdPd0oT1cdTAwMDddyCVcdTAwMTQ1eHrofu7XpXvxq7Le9DaOf7Y/fz6+/LGx9NBVXHUwMDE0KfBHyqmiXHUwMDEyXHUwMDA0XVx1MDAwNrqMcWQ4t9OIXHUwMDE1aFx1MDAxZbLIaoBRRnHGXGJjoKxcZp9Q14PcXHUwMDAxXHSMNYeeseV3kUoj7mc8cylcdTAwMTSh4pVcdTAwMDK5SJz7Z8e7J25w1T350Vx1MDAxZmzc7eytNUNZMFxugDlcdTAwMTaMQdBRiimuVaoqnoxNUFx1MDAwMklcdTAwMWFcdTAwMTNwp5mQ879cdTAwMTiFLFTHV4pdKr6c96Z50VxuKFg2fvqBV5TClNmumZpWSO07ub08qG5+ObxsrK/fnlx1MDAwN+J4b/lphSBbeLKDUYaQ8Wk9SiNlsJ3xg+2s2MVccndcdTAwMTJkbbAlXHUwMDA3zOFl6XZcdTAwMWbRiiHgKKBbiKCaKZErXHUwMDA2KEq4XHUwMDA2J3mlsv7ZpFx1MDAwMjKaQKbLJFx1MDAwNVxmYYEpyXOKRra4Q5WhmFx1MDAxMSHMXHUwMDFi5ZRid7LHuCPNyCdFI466eFx1MDAwMoWCfrEj0dOLlPJeX1Y24Vx1MDAxY0lNtDBKXGLI/rOFXHUwMDAxxlx1MDAwNbI+Z9dCcWpSq3bmXlx1MDAxN0hcdTAwMWVdMthoQDpcdTAwMTKhzVx1MDAwYk/wLY9cdTAwMTNcdTAwMTlPm2lcdTAwMTJSuawtfe6D2y+C5Z40iLk17LWUXHUwMDAz/KlBzHtLSlx0oajiYEwhIVx1MDAxMMUhrIKomX698vlp4/i6urfryruoe0hMv1x1MDAxMX3dWnZG4DZtXHUwMDExTFPQd5ZcdTAwMDGzaVx1MDAwYsVcdTAwMDYkrq38gPbA6ULiXHUwMDAyhlx1MDAxYqC9gfCp4cD8lEzQXHUwMDE3QE9cdTAwMTiDXHUwMDEw1Vx1MDAwMi5TjXW+XHUwMDAwXHUwMDAxeZfAdsnz65RcdTAwMThvrVx1MDAwMFHcq/ao5Dt0xkhfXHUwMDA07LQ8XHUwMDFkn5sgjLaZw/TDiL1m55Z4XHUwMDBl+bV5Snb5trk46vhF85CXXHUwMDA215pcdESltPPqMNCcyuZcclx1MDAxNEtEQIcyw5nGgJrFVVx1MDAxMjHSRmktXHUwMDA1SCwstZ5Uj+B2XHUwMDE3XHUwMDAyUIFK2GXimuSHXHUwMDExJaRcdTAwMGWcavXmZie8VlxcXHUwMDE3dao9Krn+nFx1MDAxMdbFXHUwMDA1gZJcdTAwMTVcdTAwMDbUzlx1MDAxMOCQXHUwMDExT4/s5vb15UG3Ujlccu+2XHUwMDBl1ytsoPYrRZOgl1x1MDAwNtmSaGR3XHUwMDE2XHUwMDAxXHUwMDE1z5igKrtMj1x1MDAxOMu5XHUwMDE4Wt72S3pa8twrXHUwMDAyTFwiXHUwMDEwXGbA21x1MDAwNOjFpEZdUyN8QENcdTAwMWOua8ZcdTAwMTRcdTAwMDVcdJFbZc4451pcdTAwMTP6SuN1UUngSNd37i62XHUwMDFiP9yzjbWdwDn9eXjzs6DOSOxcXFx1MDAwZYhJXHUwMDEyMmHDSXqyTVJntHOMsVx1MDAxMZgzm1x1MDAxMt3f8NaKXHUwMDAylUKXXHUwMDFhXs1509xoJb1mLbdxXHUwMDExwVSotPZ9jFakS25PXHUwMDBm1k7Xe7+O62FwuH6MXbr0tGIoMsDXkFx1MDAwYmBlXGZcdTAwMWKjXHUwMDE1bZBcItb9qFLMyOLlg8+mXHUwMDE1amfcXHUwMDAxfeF4jDNN+JlcdTAwMTFIwlx0RJ94sJHp9GLke8VAiMBcdTAwMDJj/r/KLFx1MDAxOMHPl1RBXG5cdTAwMGKQsqFxwvxcIoKInZwllMKEQ7fn1zG8XHJmKXYqe1Qm+NOM1FJUclQlK1wiXHK1vjLDfMbyvl9WXrFNXHUwMDBmylx1MDAxZNI7q81otuRIlERSc6OJsfNcdTAwMWQoW1x1MDAxY7GI5NFlu1xuQMakiZb6XHS88ZyiY7lcdTAwMTTN+NpMRcfyWFT63Fx1MDAwN8dfXHUwMDA02z2p6Dh03pRcdTAwMDP8qZrj0JCnaVxyXjxVgjOioEVnmJ1YvqvR0s5wZlxiYo3dQ4RplopLw0lOQiFiXGaVIDMoXHUwMDExophcdTAwMTBcdTAwMThnXHUwMDBlf1ZlXHUwMDAyXHUwMDEzO81cdTAwMTAzXGJcdTAwMGbAw8JM2nfEqlwiXHUwMDAxYcFcdTAwMTZBIUayXFxcbmOkgUeItzdZsUiClO8tMFx1MDAxMlx1MDAxN1x1MDAxMlx1MDAxOWm1uuTSjk7zlJhP0lx1MDAxZrtcdTAwMDCUXHUwMDAw30L+w6lcdTAwMDHflzlcdTAwMDXymnRGpcSn4ut5d5pRaFx1MDAxNOcwqmRcdTAwMDcjIZmgRE5PLOWb3CwtsVDEscF2koFcdTAwMTFybPKkXHUwMDA0satBXGZcdTAwMTOFXHUwMDAxPCUrKZ/PK5rH0/ol1liI9JKqpDKikVx1MDAwNPlHIKM1oI7YhFx1MDAwNVlgpmBY0SdswbBcZrxSuD6idG+sLDdASlwiuYYkRoNOJGpCZUTYtTKScFx1MDAwNUhcdTAwMTOg3lx1MDAxZiqNby2BqVx1MDAxNDuVPfLuNCOtlG7rYkjhts5cdTAwMTRDjMaE0umzmIprjs+jy7NQRc2Ts1x1MDAwZebru79cdTAwMGVcbqhlubZ10Vx1MDAxONJlu1kpt9BMVyaG27pcdTAwMThky3eGXHRNKFBNMcM8f1tcdTAwMTeCXHUwMDE4J0VcdTAwMGIrqKCIMUj9qWRcdTAwMDVcdTAwMTO1IeBcdTAwMWFcdTAwMGXukrTEsq/jLs1yXHUwMDE2ur+LgoQwtfXmtPu7vLt/6KrT7Vx1MDAxZUbwyFx1MDAxMSlCW3u1++wneczqjeferk3Y1bhcdTAwMWVcdTAwMWbW5LhcdTAwMTEsQlxc29L//H73+7/nXHUwMDBiXHUwMDAzXCIifQ== MarginPaddingContent areaBorderHeightWidth"},{"location":"guide/styles/#width-and-height","title":"Width and height","text":"<p>Setting the width restricts the number of columns used by a widget, and setting the height restricts the number of rows. Let's look at an example which sets both dimensions.</p> dimensions01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.height = 10\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>This code produces the following result.</p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0 me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0 will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see its\u00a0path. </p> <p>Note how the text wraps in the widget, and is cropped because it doesn't fit in the space provided.</p>"},{"location":"guide/styles/#auto-dimensions","title":"Auto dimensions","text":"<p>In practice, we generally want the size of a widget to adapt to its content, which we can do by setting a dimension to <code>\"auto\"</code>.</p> <p>Let's set the height to auto and see what happens.</p> dimensions02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.height = \"auto\"\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>If you run this you will see the height of the widget now grows to accommodate the full text:</p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0 me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0 will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0 will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p>"},{"location":"guide/styles/#units","title":"Units","text":"<p>Textual offers a few different units which allow you to specify dimensions relative to the screen or container. Relative units can better make use of available space if the user resizes the terminal.</p> <ul> <li>Percentage units are given as a number followed by a percent (<code>%</code>) symbol and will set a dimension to a proportion of the widget's parent size. For instance, setting width to <code>\"50%\"</code> will cause a widget to be half the width of its parent.</li> <li>View units are similar to percentage units, but explicitly reference a dimension. The <code>vw</code> unit sets a dimension to a percentage of the terminal width, and <code>vh</code> sets a dimension to a percentage of the terminal height.</li> <li>The <code>w</code> unit sets a dimension to a percentage of the available width (which may be smaller than the terminal size if the widget is within another widget).</li> <li>The <code>h</code> unit sets a dimension to a percentage of the available height.</li> </ul> <p>The following example demonstrates applying percentage units:</p> dimensions03.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.height = \"80%\"\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>With the width set to <code>\"50%\"</code> and the height set to <code>\"80%\"</code>, the widget will keep those relative dimensions when resizing the terminal window:</p> 60 x 2080 x 30120 x 40 <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0 me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0 will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0 will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0 total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0 through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0 the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0 nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. </p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0 its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p>"},{"location":"guide/styles/#fr-units","title":"FR units","text":"<p>Percentage units can be problematic for some relative values. For instance, if we want to divide the screen into thirds, we would have to set a dimension to <code>33.3333333333%</code> which is awkward. Textual supports <code>fr</code> units which are often better than percentage-based units for these situations.</p> <p>When specifying <code>fr</code> units for a given dimension, Textual will divide the available space by the sum of the <code>fr</code> units on that dimension. That space will then be divided amongst the widgets as a proportion of their individual <code>fr</code> values.</p> <p>Let's look at an example. We will create two widgets, one with a height of <code>\"2fr\"</code> and one with a height of <code>\"1fr\"</code>.</p> dimensions04.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass DimensionsApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(TEXT)\n        yield self.widget1\n        self.widget2 = Static(TEXT)\n        yield self.widget2\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"purple\"\n        self.widget2.styles.background = \"darkgreen\"\n        self.widget1.styles.height = \"2fr\"\n        self.widget2.styles.height = \"1fr\"\n\n\nif __name__ == \"__main__\":\n    app = DimensionsApp()\n    app.run()\n</code></pre> <p>The total <code>fr</code> units for height is 3. The first widget will have a screen height of two thirds because its height style is set to <code>2fr</code>. The second widget's height style is <code>1fr</code> so its screen height will be one third. Here's what that looks like.</p> <p> DimensionsApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. </p>"},{"location":"guide/styles/#maximum-and-minimums","title":"Maximum and minimums","text":"<p>The same units may also be used to set limits on a dimension. The following styles set minimum and maximum sizes and can accept any of the values used in width and height.</p> <ul> <li>min-width sets a minimum width.</li> <li>max-width sets a maximum width.</li> <li>min-height sets a minimum height.</li> <li>max-height sets a maximum height.</li> </ul>"},{"location":"guide/styles/#padding","title":"Padding","text":"<p>Padding adds space around your content which can aid readability. Setting padding to an integer will add that number additional rows and columns around the content area. The following example sets padding to 2:</p> padding01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass PaddingApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.padding = 2\n\n\nif __name__ == \"__main__\":\n    app = PaddingApp()\n    app.run()\n</code></pre> <p>Notice the additional space around the text:</p> <p> PaddingApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0 that\u00a0brings\u00a0total\u00a0 obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past, I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0 to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0 there\u00a0will\u00a0be\u00a0nothing.\u00a0 Only\u00a0I\u00a0will\u00a0remain. </p> <p>You can also set padding to a tuple of two integers which will apply padding to the top/bottom and left/right edges. The following example sets padding to <code>(2, 4)</code> which adds two rows to the top and bottom of the widget, and 4 columns to the left and right of the widget.</p> padding02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass PaddingApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"purple\"\n        self.widget.styles.width = 30\n        self.widget.styles.padding = (2, 4)\n\n\nif __name__ == \"__main__\":\n    app = PaddingApp()\n    app.run()\n</code></pre> <p>Compare the output of this example to the previous example:</p> <p> PaddingApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0 mind-killer. Fear\u00a0is\u00a0the\u00a0 little-death\u00a0that\u00a0 brings\u00a0total\u00a0 obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0 pass\u00a0over\u00a0me\u00a0and\u00a0 through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0 past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0 inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0 path. Where\u00a0the\u00a0fear\u00a0has\u00a0 gone\u00a0there\u00a0will\u00a0be\u00a0 nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p> <p>You can also set padding to a tuple of four values which applies padding to each edge individually. The first value is the padding for the top of the widget, followed by the right of the widget, then bottom, then left.</p>"},{"location":"guide/styles/#border","title":"Border","text":"<p>The border style draws a border around a widget. To add a border set <code>styles.border</code> to a tuple of two values. The first value is the border type, which should be a string. The second value is the border color which will accept any value that works with  color and background.</p> <p>The following example adds a border around a widget:</p> border01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass BorderApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Label(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.border = (\"heavy\", \"yellow\")\n\n\nif __name__ == \"__main__\":\n    app = BorderApp()\n    app.run()\n</code></pre> <p>Here is the result:</p> <p> BorderApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0\u2503 \u2503total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u2503 \u2503through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u2503 \u2503the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u2503 \u2503nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>There are many other border types. Run the following from the command prompt to preview them.</p> <pre><code>textual borders\n</code></pre>"},{"location":"guide/styles/#title-alignment","title":"Title alignment","text":"<p>Widgets have two attributes, <code>border_title</code> and <code>border_subtitle</code> which (if set) will be displayed within the border. The <code>border_title</code> attribute is displayed in the top border, and <code>border_subtitle</code> is displayed in the bottom border.</p> <p>There are two styles to set the alignment of these border labels, which may be set to \"left\", \"right\", or \"center\".</p> <ul> <li><code>border-title-align</code> sets the alignment of the title, which defaults to \"left\".</li> <li><code>border-subtitle-align</code> sets the alignment of the subtitle, which defaults to \"right\".</li> </ul> <p>The following example sets both titles and changes the alignment of the title (top) to \"center\".</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass BorderTitleApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.border = (\"heavy\", \"yellow\")\n        self.widget.border_title = \"Litany Against Fear\"\n        self.widget.border_subtitle = \"by Frank Herbert, in \u201cDune\u201d\"\n        self.widget.styles.border_title_align = \"center\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <p>Note the addition of the titles and their alignments:</p> <p> BorderTitleApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Litany\u00a0Against\u00a0Fear\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0\u2503 \u2503total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u2503 \u2503through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u2503 \u2503the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u2503 \u2503nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0by\u00a0Frank\u00a0Herbert,\u00a0in\u00a0\u201cDune\u201d\u00a0\u2501\u251b </p>"},{"location":"guide/styles/#outline","title":"Outline","text":"<p>Outline is similar to border and is set in the same way. The difference is that outline will not change the size of the widget, and may overlap the content area. The following example sets an outline on a widget:</p> outline01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget = Static(TEXT)\n        yield self.widget\n\n    def on_mount(self) -&gt; None:\n        self.widget.styles.background = \"darkblue\"\n        self.widget.styles.width = \"50%\"\n        self.widget.styles.outline = (\"heavy\", \"yellow\")\n\n\nif __name__ == \"__main__\":\n    app = OutlineApp()\n    app.run()\n</code></pre> <p>Notice how the outline overlaps the text in the widget.</p> <p> OutlineApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503ear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503ear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0\u2503 \u2503otal\u00a0obliteration.\u2503 \u2503\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u2503 \u2503hrough\u00a0me.\u2503 \u2503nd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0\u2503 \u2503he\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503here\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Outline can be useful to emphasize a widget, but be mindful that it may obscure your content.</p>"},{"location":"guide/styles/#box-sizing","title":"Box sizing","text":"<p>When you set padding or border it reduces the size of the widget's content area. In other words, setting padding or border won't change the width or height of the widget.</p> <p>This is generally desirable when you arrange things on screen as you can add border or padding without breaking your layout. Occasionally though you may want to keep the size of the content area constant and grow the size of the widget to fit padding and border. The box-sizing style allows you to switch between these two modes.</p> <p>If you set <code>box_sizing</code> to <code>\"content-box\"</code> then the space required for padding and border will be added to the widget dimensions. The default value of <code>box_sizing</code> is <code>\"border-box\"</code>. Compare the box model diagram for <code>content-box</code> to the box model for <code>border-box</code>.</p> content-boxborder-box <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGlT28pcdTAwMTL9nl9Bcb/Gysz0bJ2qV6/Yl1x1MDAxMCAsXHTJq1spYVx1MDAwYizwXHUwMDE2W8bArfz31yNcdTAwMTZJliWwMY6TukpCsEaWRjN9Tp/uWf55s7CwXHUwMDE43XSCxfdcdTAwMGKLwXXVb4S1rj9YfOvOX1x1MDAwNd1e2G5RkYg/99r9bjW+slx1MDAxZUWd3vt375p+9zKIOlxyv1x1MDAxYXhXYa/vN3pRv1x1MDAxNra9arv5LoyCZu+/7ueu31xm/tNpN2tR10tcdTAwMWVSXHRqYdTu3j0raFx1MDAwNM2gXHUwMDE19eju/6PPXHUwMDBiXHUwMDBi/8Q/U7XrXHUwMDA21chvnTeC+Fx1MDAwYnFRUkGpzPDZ3XYrrqxUXFxLieyxPOyt0tOioEaFZ1TjIClxp1x1MDAxNtVJX+2Y48anXHUwMDBmK8tcdTAwMDfXjWZ40lo+Tlx1MDAxZXpcdTAwMTY2XHUwMDFhh9FN464h/Gq9301VqVx1MDAxN3Xbl8GXsFx1MDAxNtWpnFx1MDAwZp1//F6tXHUwMDFkuVxuPFx1MDAxNnfb/fN6K+j1Ml9qd/xqXHUwMDE43bhzLKn/XSO8X0jOXFzTp1xuXGJcdTAwMGa1NVxcXHUwMDFhRW9rRNIg7lx1MDAwNkJ5Qlx1MDAxYtDKMlx1MDAwYkYrXHUwMDA1Q1VbaTeoL6hqf7H4SOp26lcvz6mCrdrjNVHXb/U6fpd6LLlucP/SiqFcdTAwMDfGXG4trFx1MDAwMouQvE89XGLP65HrXHUwMDEzwT1mXHUwMDE1glF3T9NJbYK4Y1x1MDAwNENtuNaQvKWrQ2erXHUwMDE2m8jfw1xyW/e7nfv2W+y5XHUwMDBmqfq7qq9ccttX2sZSnf/j+uvG9tnJPr+48LdVyGorXHUwMDFmLlx1MDAwZVx1MDAxZe+VMUi/221cdTAwMGZcdTAwMTZcdTAwMWZLft7/llSt36n5d2bmXkRIxplcdTAwMTQqeaFG2Lqkwla/0UjOtauXiWXGZ3++nVx1MDAwMFx1MDAxMFx1MDAxYaFcdTAwMTBcdTAwMTCAXHUwMDFjJTPPR0TQ6e5o4P5t31x1MDAxZixvfP+6Jzu6WYCIXpvQPTZcdTAwMWWGvvVcdTAwMTRcdTAwMWPgKTSA8VxiXHUwMDAymlx1MDAxYq1RSc6MzKCBc/C44Fx1MDAxYYAjWSAyVYhcdTAwMDZ1XHUwMDA2taosRcNfsqqDM5VHXHUwMDAyKONZpSTBUuVBIFx1MDAxNHpcdTAwMDJcdLNMXHUwMDAyMDKMXHUwMDFjXGK4Je5ijIOdLVxiqns7X+snm8e1XHUwMDFixFZ/l3dMvVx1MDAxNv6GIJBWXHUwMDE3gYBcYlxuXGZcIpfPXHUwMDA2XHUwMDAxRqfB7sdGY1x1MDAxYsz+5kr9495BuLkxmVtcdTAwMTCFbsHv1afrXHUwMDE2XHUwMDEwPCEtKs6UloZZkcWBXHUwMDA2jyhcdTAwMThAKaG4JNdQiINAXHUwMDFi81x1MDAxMq+Q7vNHXGJwaYdtXHUwMDFlXHUwMDA01YLqNWOT34K1o5Poy97H9kmwXHUwMDFmNcLLz8fV76NNPlxurqOUxb8tu+3h0fopu8L95tGn6HJ5aXn1eFuL5yGp9L5Tr27m6rfPfeCvw32mnmmlamxcdTAwMTHkpSaq1TiG37tcdTAwMTZcdTAwMWSz/vXHSudQXpyurP6wrZrembJcdTAwMTJcdTAwMWPT8z2NeOdWUFgrNaAwRmJcdTAwMDbxgNZcdTAwMDPpXHUwMDA0IEeUWlxmU9H0ZKBcdTAwMTZ5vFx1MDAwYjVcZndcdTAwMGVcbiW5YvNcbjpvmsaYdHq7XHUwMDE1XHUwMDFkhrdBrFEzZ9f9Zti4yfRbbKVU049+9zxspduyXHUwMDE30DOD2Mdnrl5qhOfOjlx1MDAxN1x1MDAxYsFZ1sCjkFx1MDAwMqfH4qidevMqPd2n23W3asNv0e6G9GS/cZStyUTYXHUwMDAyI1xusSWsZEKq57vTpUF978dutHVzc1xm6+2br6dflr75M4yy2ITgXCLhiNJyi1JcdTAwMDCyrDtcdTAwMDVhXHR65G+F0lrSP/Nq6EpcdNoydGkjKVx1MDAxYzMptz9cdTAwMTNvurRdw9Wr3dMts1x1MDAwNlx1MDAxZjuDXHK5PMDOL1x1MDAxM5Avw+6+X6uFrfN5XHUwMDAw70NVJvOMglx1MDAwZp99QC93XHUwMDAyUY+RXCIpl1x1MDAxZvNcbl5yfSVaWFxi7YlcdTAwMTlpYTlCXHUwMDBii9Tz7tHLhdRcbq36g3wj5PC1QsVUq1x1MDAwNWorfzTIcDTIqvStoFtcdTAwMDKzZlirpVx1MDAwM8Ms0p5cbuiGwZepZylcdTAwMDLLY1IsXHUwMDE0qFxcOM/CpFx1MDAxNM9cdTAwMDZitX/bWPmxXHUwMDE0+T40XHUwMDBlj1pcdTAwMWbPw5NOrVx1MDAwMIjVbrvXq9T9qFovXHUwMDAyoyxcdTAwMDLj1FWqS9BQkIekQJXT5CqDRc6ZR1wilYFVxlpGTqxcdTAwMTCLz8jPlGLx6Vx1MDAxY1xyXHUwMDEyXHUwMDE56Lxv1Vx1MDAxNtEgn3F+ctnfq96eXW037GF7XHUwMDBm+X57U/k4hYCyxj5/qHZPbtesXHUwMDFhyNslXFw7XHK7dj5TPnfPXHUwMDFmXHUwMDA1rZLgT3AgzjdqXGYnV97UY2OrMOkzdWxxMmlkoLlLsFx1MDAxYiVTuVx1MDAxNHdcdTAwMDPJOVx1MDAxNVtcdTAwMGLUXHUwMDFhWnElhlE/PZVcbpw8LpJcdTAwMWIzXHUwMDFjJLd6xFBcdTAwMDBYj0JRbUFw61x1MDAwNLVcdTAwMWPGXHUwMDE5xalWKlx1MDAxNJMgLa7qrL1gL/K70XLYiqXa+1x1MDAxNNjIXHUwMDEzVvtxt3qMSWRKWmpdgVxmXHUwMDEznC2e+524kz1uUFx1MDAxYdTuMomJOFh4XHUwMDFjK7vzYitwc7Mp+ss7XHUwMDFi+uhi/Zj8WCNYekDnI+ZcdTAwMTeDVq20Slx1MDAxNeZRXGKHwFx1MDAxNZBp0N8kdnmslPBcdTAwMTCpOiCQrjNaK1NUqdFuKVepht+LVtrNZuiU3n47bEXDTVx1MDAxY7flklx1MDAwM3w98HP6mF4qXTbMXGZcdTAwMWR3xyyjJr8tJKCJPzz+/vfbkVdcdTAwMTeasjsqOStObvcm/f+4op2DKkxhc1x0zKF7XGZKXHUwMDFibSwzpbTJpLvlnlx1MDAxMZI4nNpfMMwltdBcdTAwMTOCsKKEJTzxYrXw4qRW0lx1MDAxYiVht+JEwZKzXHUwMDE5R90v0Fx1MDAwNq/gw8eJXG7yUfdyu1tLi/tfXHUwMDE3dN/XZDJJwpUsnJjA3aBcdTAwMWaF3qlBqqfwW67SpjNcdTAwMDY1deyCXHUwMDE0XHUwMDFlkMKnuJskPcEziVx1MDAwMe/kXGLzNLNGXHUwMDEzsIFcdTAwMWPecEJgeuAlXHUwMDE3p7R2ro34W1oxXCJBTSxPjKtBMpD0x/JcXFAuXGYyhlx1MDAwMn9TNTLsP59cdTAwMTJcdTAwMDWGoTVGS01q0VKclFx1MDAxM1x1MDAwNdazmjqOSJm5aTYyrWX+dE1QaFDuqORtaUxRUMwqXHUwMDE0y1x1MDAxNFx1MDAwNjqMXHUwMDE0PSGNP19cdTAwMTWUz3mZY1bhhFxyXHUwMDE0SiphWHaCh+SS7NJYRnJNkVx1MDAwNac4dvqsotHB06lngopMJf3TtGKssFx1MDAwNFx1MDAxMUZcdTAwMTdwqfNRXHUwMDBlt4bCXHUwMDAxnCRT/9vxXG7ziClcdTAwMTSBQ3CjiFaS5khcdTAwMDKgXCJcdTAwMWFcdTAwMTk9O+83p5FcIlx1MDAwYnJH3nbGpJFYNo1gXHUwMDExhOJMpDUomLYqueIpXHUwMDEy0cd0Tn7b3T9cdTAwMWaovY3o1lZcdTAwMDbt7mQkMruxcsmUZ610Q+HkwFxmXHUwMDFmykJq4Vx1MDAxMblQkVx1MDAxNKhcZvLXXHUwMDFizpPoWdTU4kZcbklcdTAwMDYgR1xm7zGPWSlcdTAwMDGsJDVlNaRH9Vx1MDAxZcSJdrGRSc0km1x0iVx1MDAxMM+mXHUwMDA2l16DRLI3my62M2VTXHUwMDA1dnGvuqMyokOnXHUwMDA0bVxyavjsI7RcdTAwMTGIbUhrPz/qODw+Xr3+hD++NU5cdTAwMDbtlVUxOPig+nNcdTAwMGZtLjwmjFFcdTAwMWFJXHUwMDA0gM7mQIH0gbGK2oFcdTAwMTSEpk+vlzKQpJBcdTAwMTVX6Vx1MDAxMYRcdTAwMTSkIVx1MDAxNo9mxLxcdTAwMThO6Fx1MDAxMnbWUFx1MDAxNoCQxDz/QvnhyPeiOypJXHUwMDA3Tkvbo8XhsylpT0EygHq+tF/fXGYvwP9yeHKw9v3G9PR688BuzT10XHUwMDAxPDBAYVxmMi7lkFems1x1MDAxZfltyzl55Hio/lx1MDAxNaW9Mlx1MDAwNlx1MDAxMJVcdTAwMDYg8YVyRPaPOF5cdTAwMTC9W+DGpfRVzidzelx1MDAwN6TXkDNW9lxc8pQpTWX8XCIjxPXF8vbpkeZXl37YPFx1MDAxZfRcdTAwMWHLXHUwMDExT09cdTAwMWRNZ1x1MDAxMShcdTAwMDJcdTAwMTbIKFZcdTAwMDOOViPafFx1MDAxZYFTME2UJ8m6XHUwMDE1oHrAU8FcYsZrksirav1KsU3FxTlzmlx1MDAxNq9wLorlvlx1MDAxMoxcdTAwMTGNyedrgsp1/fvR5dbFWuvbh481pj/rw09zPzVWUiylwFquSbNcIiP1lWVcdTAwMTZccp5QXHUwMDAy3ChcdTAwMGXxrFx1MDAxNq+3Ror8XHUwMDA2Z4JcZl4yN8/BwKj5fORzgOojjXGLXHUwMDE1VC5nXHUwMDAwZCDaoJpgqvyLiIXE6lxcXHUwMDEwXHUwMDBi8zhDNMqNgVx0hdqkoPSYndQgUbhoXHUwMDE2uFL4h7JKiTm5Y9iQxuSUosFJa1xus5DWcCZcdTAwMTlcdTAwMWIjXHRZ3uvzSihMeU5cdTAwMTRKaS1YJYaUikBPXHUwMDEzj1x1MDAxM4ujdvmU11MqKlx1MDAwMWTJuCRIt1x1MDAxYc6KXHRiipeMS5b7ioypjTVnqVxc3Jbe98HuS2hutuOdm3e9ljKAXzXeeV+TUkYoyjtcdTAwMTBcdTAwMWZcdTAwMTdSQiwySM2PkXhY2j483Fplllx1MDAxZKxcdTAwMWT8WGnsbKnjrVx0XHUwMDA3JmbHXHTIPa1Rc5JcdTAwMTkk45TKJlx1MDAxZVB6XHUwMDFjhdVCXHUwMDE40NrK11t/wz3rVsBcdTAwMDI9xFxyQOmU/EtcdTAwMTSG8khcdTAwMDVZXHUwMDA0i0ZKrUx+XHQquVxmdGNcdTAwMTMzjl6IU8FMgr4/PFx1MDAwZlEp7ta4ON+jYzr7XCJoW1W4+EdwXHUwMDA2XGJcIj2g/uTKOlx1MDAxZV2cXHUwMDFlX0U7387WQrH+5Wrtw+lg3pFNze2RXHUwMDE3Z8LSoVx1MDAxZIqz0HbJIGFcdTAwMTW5e+Pmmr4mtEFow9yQXHUwMDExcVxijExLMM+6OaBWaYoxOeaCh3heoeapqGI2uDYgXne88bfFdUGfxqW57lx1MDAxY1x1MDAxM9UlXHUwMDEzlFThsiDBlFx1MDAwMW7ZXHUwMDE4XHUwMDEzXGZbS2ebn7+sRlx1MDAxYqe3N7jx+Vx1MDAxY7aD02kvXGaa/nxp48JEQ3yqKebnILJcdTAwMTOUXGZRKvlrZrTlbjFcdTAwMWRcdTAwMGVVbHq4ttTLwjDDrTI8PTybXHUwMDFhMDBWulx1MDAwNFx1MDAxYVx1MDAwMFx1MDAxOIGc59bPc0GBl8suzTgrQO2X0lxi089cbny++bz27Wj95OKK0LpcdTAwMTNt3X5a2d0uSDdyQOGmlFx1MDAxOVCMJNaIqcxuzlx1MDAxOTlHaigmKTTmf2y6scik4sK8NU2NVqB4taFVaMmN4vPXXG53t0Cavf7tdme9YTe+Nb/uhLti3lnFLVx1MDAxNSbbc0pcZrQxmF1taKRHoolcdTAwMTlFP5hg/PXEgqWIg7ulZZLiLyPtiEQj97hcdTAwMTVcdTAwMWNccuNuzbKFXHUwMDE0wz2QilIxoGZMKsJcdTAwMWGchlp4MakwjyCkXGJJWjO00pr0eox7SqFWXHUwMDE0JFx1MDAwMJWhdpTMilx1MDAwN+X9p3FKoUG5o5KzpTEppSjZaIrXTYJbiWdcdTAwMTV//mSl8n6fU0LhXHUwMDE2PWDAOVx1MDAxMDzIv1x1MDAwZi3r0tTyUlPUrIxb7FaypdWLk42JPirbe4BcIiVyrVx1MDAwMFx1MDAxM0RcdTAwMTgvyTaWS9CMrY2VbSx3QqX3fTD8XHUwMDEypptttvHOeFNcdTAwMDbwq5KNd1x1MDAxNZlMY5BwK5RcdTAwMThWU4huxtjdq3yjprmdXHUwMDAzXHKeUlJQjOYmobCko+M5TtJlXCKZXHUwMDExQFElXHRcdTAwMTBePJxJN/Lli4YzyYJJSVx1MDAxMztcdItSKVx1MDAxY7U9ifBQkY7Qd9tUMsjHLmi15NJMsunjbzdcdLriVoFyt5OMdfNL2ajhS+2h5syCllTKpEzJ96yQXHUwMDE5vZdBToD8TjKjUmJUcXnensaUXHUwMDFhxdFLSnRcdTAwMGUxXHUwMDBiUiBFfTVcdTAwMDazlO+FM7fMXCI8a4lcdTAwMTZAo0tGXHLNnpTK01x1MDAxMq1LXHUwMDBmoYSS9ZYvJ1x1MDAxNivjdVx1MDAwMlx1MDAxNH0wRcH6qOjFepriSW7BXHUwMDA1llx1MDAxNvJrtrj7srRcdTAwMTNtJjtcdTAwMGa8Mpo9JDOaXkpcdTAwMTjLjeYmtfjoIVwioV5cIk/odlx1MDAwNFaotMoss8jQx+jNuHL08WfEL5Vio3JH3pzGpJXS7V+wZFx1MDAxNlx1MDAxNrqlMEaPseji5lxmev1PW8dw+vX6y/fT6569Piqa3jlX279I5lHrut0nQIGgTshcdTAwMGWluP15rZvFgi5nJYUuli4v3/+Fe6SUXGZcdTAwMTZtXHUwMDAwIzxcdTAwMDBhXHUwMDE41aFgpjZcdTAwMTlcdTAwMTEhkU8yU/vfnWCet1x1MDAxM8yb+5su+p3OYUS3fCRFauuwdlx1MDAxZv8kt1m8XG6DwfKInZrP4sNVOW5cdTAwMDSHkMC19D8/3/z8P1KdJ/cifQ== MarginPaddingContent areaBorderHeightWidth </p> <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9vr+CYr/G2nn0vFJ161x1MDAxNs9cdTAwMTBcdTAwMTJcYpCsgdzaSim2sFx1MDAwNbJlZFx1MDAxMSBb+e+3RybWw5KwjU2c7CqpXHUwMDA0NLLU1vQ5fbrn8fdva2vr8f3AW3+5tu7dtdzAb0fu7fpcdTAwMGJ7/otcdTAwMTdccv2wj00s+X1cdTAwMTjeRK3kym5cdTAwMWNcdTAwMGaGL//4o+dGV148XGLclud88Yc3bjCMb9p+6LTC3lx1MDAxZn7s9Yb/tf9cdTAwMWW6Pe8/g7DXjiMnfUjDa/txXHUwMDE4jZ7lXHUwMDA1Xs/rx0O8+//w97W1v5N/M9ZFXit2+53ASz6QNKVcdTAwMDaCkMWzh2E/MVZIXHUwMDAyyihcdTAwMTi3+8NtfFrstbHxXHUwMDAyLfbSXHUwMDE2e2r9rue/8+NmcPL57IB5XHUwMDE3LvGvXHUwMDA2nfShXHUwMDE3flx1MDAxMLyP74PRi3Bb3ZsoY9IwjsIr79Rvx11sp4Xz48+1w9hcdTAwMWEwbo7Cm06371xyh7lcdTAwMGaFXHUwMDAzt+XH9/ZcdTAwMWMh47Ojl/ByLT1zh79x7nBKtNRCcVwiOOhxq/082GaiOVx1MDAxN1xmXHUwMDE4SC5cdTAwMGKGbYVcdTAwMDH2XHUwMDA0XHUwMDFh9jtJjtSyz27rqoPm9dvja+LI7Vx1MDAwZlx1MDAwN26E/ZVed/vwlVx1MDAwNTFcdTAwMGVXmkmmXHUwMDA114an36br+Z1ubI1h1CFaXHUwMDE4rsToaVx1MDAxOWu8pFskp5wrotm4wZoweN1O/OOv4lvtutHg4eWtXHUwMDBm7S9cdTAwMTnzreU7RefKOlim51xy8TZO7k7J3edBXHUwMDEzneY0eHfahPG9ct7oRlF4uz5u+fbwU2razaDtjnyMSslcdTAwMTlcdTAwMTB8+6D5uD3w+1fY2L9cdIL0XFzYukrdMjn77cVcdTAwMWNokIZVoYFqYjRcdTAwMTDK2NR4ODm97MZcdTAwMWLhtup97Hxccj5+eCvfvb2vwMMwRGzPjIbCp1x1MDAxZVx1MDAwM1x1MDAwM39cZlx1MDAwYpSgt1x1MDAwYsZcYjFcdTAwMDZ9jGb8yH5eoP9RySRBJzXEyKJdKVx1MDAxOMRcdTAwMDVvt6BcdTAwMTZcZr9DS3pcdTAwMTdiXHUwMDEyXGJcXChHXHUwMDBiXHUwMDAxUisxiVx1MDAwMSaMw4yRmiA0XHRcdTAwMTOTXHUwMDE44JxqLkHA82Kg9e7tefds78/2vTH9m0M6UN22/1x1MDAxM2JcdTAwMDA0VGKAUMJcdTAwMDDUXGYxYftcXJxcXDc9ev9n8+xEXHUwMDBm995cdTAwMDSXXHUwMDFmTueLXHSsXG5cdTAwMDVtd9hdbEyg6GTC8jBwXHLAqVB5XHUwMDFjKOooQzlcdTAwMDEjXGZjylTiwJNKPSUooH9PQoBmYtSDzzNcboDxKXv5szj94U5M3vpcdTAwMWRcdTAwMTF/jravTuLgXCLce/Wm3Olj7y7O+PyLutteXGZOXulX/a2d/YbYi09aXHUwMDAxOT6/m1x1MDAwZUtcdTAwMTX3zVnxYtov8uMgmrMzKyiVrkInSCRFaVx1MDAxNJlcdTAwMWGcXHUwMDA3XHUwMDFmVaB29oP30cX713s3w43b1n60YME2Y4iaQq8x6TCigVx1MDAxOcWI4kJCXHUwMDBlm/hcblx1MDAxY661tGKNXHUwMDBiMLxcdTAwMTKbT1x1MDAxNWySTUKTiVwiMlx1MDAwMcMkXG6yZUSjRTpj2ulhP37vf7XvnZHc2V2351x1MDAwN/e5fku81DqSXHUwMDFidfx+9lVcdTAwMGU9fOZIN+Wu3lxi/I714/XAu8g7eOxjfjNujsPMN2/h0128XfS6XfxcdTAwMTZh5OOT3eBD3pK5sMVcdTAwMTWtwlx1MDAxNkXppylcdTAwMTAxfeR7c35w+nZn+PntznHcUTuvOifdT3NGvrmyITJcdTAwMWa6qHFAXHUwMDAxXHUwMDEwXGZrhGNOkkeX4tIxkoNAiYgvg6uloSujMWrQRVxyXHUwMDEzXHUwMDEyreR68fCqXHUwMDBiUFFHXHUwMDFlNFx1MDAwM/r5LrzqkyDUp2Hv4vCHib2ngffIbbf9fmdcdTAwMTXQ+92U+UJj5itcdTAwMTfhK4iNXHUwMDE3POMmj8G3XtmsKnyphDrhisjF5OlZhCuUXGJXllx0xlx1MDAwZvhcdTAwMDVcblx1MDAxOMzR8X+d8MgnXHUwMDEwtoXNaNVcdTAwMWG+K7dcdTAwMWNmplx1MDAxY2Yt/JRcdTAwMTfVXHUwMDAwree329k0Lo+1x7KvXCL8cnbWYrA+gzSqXHUwMDEyiEQxRtksXHUwMDE5ZGfbb59s3HXce/ewXHUwMDE37t1cZm72gFRcdTAwMDCxXHUwMDE1hcNho+vGrW5cdTAwMTVcdTAwMTihXG6MXHUwMDBiXHUwMDE3qkkxXHUwMDA1OCgjXHUwMDA0l0LlXHUwMDBii4JqR6AyJJpQplxyiEooTlFLqYXi4/VcdTAwMTSDykaWXHUwMDA0V8JcdTAwMTlVmstnriY2L11/6+p6p8ng3WB/+PngVu2cPyn7XHUwMDFi3fe8/fVi19/a273YdU9PT10uP7Y+rWaFZvT8MmwhdqrAhXxcdTAwMGWU80xF7DFs1b/pmbFVWaFZOLZcdTAwMThcdTAwMDOHalx1MDAxNKuGIbKooDxcdTAwMDcujSrWgNFcdTAwMDQ1LJGELS9cdOTUYWAoXHUwMDAzRTlQLUuq9txcdTAwMDLdSI1g0txcdTAwMTBcdTAwMDZFnKH1wsBcXCliYulzx8Bh7Ebxpt9PpNrLXGbSMFx1MDAwZbZukk51XGJKXGZMXHUwMDEwNL5cXFsqTkG23nFcdTAwMDdJXHUwMDE3O1x1MDAxNN1VXHUwMDE5aS9cdTAwMDOTdtHaeExrXHUwMDE0w+KtY3bNdjY25T5rvTmmh/y8t/1cdTAwMWSaY8Cve/12rUlccuIwXHJcdTAwMDYlXHUwMDExJ1rjX6kmjGKOMWhcdTAwMGVnXHUwMDA2r1NSXG5VZVR5UJowKnCH8VbY6/lW51x1MDAxZIV+Py6+4uRdbli0dz13Qlx1MDAxZuOXyrZcdTAwMTVpYWDvmKfT9Ke1XHUwMDE0Mskv45//elF6daUn26Mx4cTp7X7L/j+raEfXXHUwMDE3xdNjsYCRx8pYPT2hlTvLs1x1MDAxMtqcwlx1MDAxZDRihitqhLKygFx1MDAxNataysGEXFxK7Fx1MDAxZMy6dbVaeHJVK33ZdXk31cJIhO3PI1xyllx1MDAxMMJnyVxuJvPuzTBqZ8X9j0u7XHUwMDFmLJlPkVBUlpVcYmbSKIXeP/2gab1IW8yA0cLRXHUwMDBiRDtSXHUwMDEwJE4g3GiTwedIjmAzZkVcdTAwMWP9TGnk0KWhXHUwMDE3g5yQ0lx1MDAwNjdkcNCspESNPM/xXHUwMDFhjpaCLVx1MDAxM9CJpNygnVx1MDAxNNRcdTAwMWMltVWQI8VcdTAwMDD6mCpQxGilJGDXXGKt02g0Vlx1MDAwNdrRkmEqRFxmkahUICtmfnVRUOlP9mhMutKMqqCaVLjkxdNjUsHwx7iZZWZS/fyUXHUwMDE1Jlx1MDAxNVx1MDAwMIZZu1accZpGkIRTXHUwMDE4qlWCnlx1MDAwYlRcdTAwMTCioLqU93ROkYZcdTAwMTJI1LN9Xiqcc6SiNNOIXHUwMDEwNFx1MDAwNclDTiQ50tY5XHUwMDA05mT/XHUwMDAwViHYb0YgNFx1MDAxOFVcdTAwMDJJJX1cdTAwMWJp/lNFXCLlk+h+clx1MDAxMqlyIHtMus6MJJJoplx1MDAxMlx1MDAwZdGiejyAII1cdTAwMGL0yOnHynfc+91B0CHNe9o6+nIs2NZ1pz9cdTAwMWaFPN9YOShw8ItcIj2D4sJQmtclglJcdTAwMDdTPWCUXCLhSrk8XVwiMN2XmOyXliCpU6xOfs8yXHUwMDEwPVxcSzPPdMbVJo38zVx1MDAxNovlXFzbQoFcXNKL9lx1MDAxOPffgoCLwKxcdTAwMDIuYlpcYok6e2rcfo1JTM8uL4/5K7155DF+pE/C1cetclx1MDAwNFKmRKFjU6g8bJUmXHUwMDBlalx1MDAwMi2JoFx1MDAxY4XZ8opcdTAwMDGA2ldQkVx1MDAxZFx1MDAxYlx1MDAxOKOWODyRhSWwTSZcdTAwMGZgXHUwMDE2NMeg3r+wTdpcdTAwMTZcbtvJXrRHI+3ARal2wyonp1FJmJI0XHUwMDFik1x1MDAxZkNu97T1seG7uumfiNthXHUwMDE0XGbgar9q4G91kGvszFHCXGZTzNhZNPmBXHTJXHUwMDE0akOpNGWYWGUnky9etVx1MDAxYrt4g9tcdTAwMDVcdTAwMDE2PYCSup5cdTAwMWShxORBg5DKlutFxpxcdTAwMTGUNbdF2J82XHUwMDAwl2f8XHUwMDA0iOBcXFx1MDAxYqFcdTAwMTRXoFVWi49HJ1BcdTAwMTNJ4Fx1MDAxOG64ydVcdTAwMDRyYl1cXEf87O71wac+XHUwMDA0fPPr8aG5fffpkbGJZXLIUmV8o9qlkuZJb1pcdTAwMTSvUKKqS4xIYVxcIK9MX2I87X9yNztcdTAwMWJcdTAwMDfXsblcdTAwMGVft44/6aG6Wn1iUY62Yy+Gg9CSZtZtJcSiqMOMXaYkUVx1MDAxNDC+vFx1MDAxMU9MXHUwMDE5gFx1MDAxM84lXHUwMDEwUJiz8ZJygKHoKlxuXHUwMDEzXHUwMDBlwTRXYrJcdTAwMTiAmFI8y0k/O62gMqaYvFwiWVwiLlxieiOdZFx1MDAxNe1IXHUwMDBlXHUwMDE4XHUwMDE4XGYjnFxuUVlH/EexSrU72aPoSDMyStWoo1bV1UXQXHUwMDA0I7NR009cdTAwMTUs769V51x1MDAxMyRcZoxvmml0VU15fqWX5MqRQlx1MDAwM1x1MDAwM8XxXmp583xTXHUwMDE41I43XHUwMDAyp9RcdTAwMGXaz05cdTAwMThPXHUwMDE5bqyPXHUwMDE0OVebaSZSvbStve93v19cdTAwMDbNzTWMuTfqtYxcdTAwMDP8qGHMXHUwMDA3S2pcdTAwMTmhquaQXHUwMDFioyzOq1wiRlx1MDAxYqpcdTAwMTlMP1x1MDAwZmEn2N30olx1MDAwZsHB9kWjcfl+b/NAdVc+d7GpXHUwMDBiQt1cYm2IMpLnU1x1MDAxN0GoYydvUmaFs1x1MDAxMMurOlx1MDAxMEdcdTAwMTLDkPIxg0LuZ7REYYBwXGJBMapcdTAwMDU2M010SfHQ2HnFdJ6lXHUwMDAxqyAyfrUqRHWv2qMx2aEzxvoqZGeHxlxuwFaCSsblXGZcdTAwMDOJW/os+qT3z/eGTdlvXHUwMDFmeTJqbp6tOq5BMocwzKE0SClcdTAwMDXPZ1x1MDAwZWCsLtVSXHUwMDAyaFBMXHUwMDE2J0gvXHUwMDEy11x1MDAxYWWVlkJJSqTWZSVcdLA7XHUwMDFjoFxmVIKJZMnVXHUwMDA0rDm26rmUwFNRndryL6rHXHUwMDE3VPapPVx1MDAxYVx1MDAxM905I6irS1x1MDAwMjWLXGYwvbKlRlx1MDAwZdOXXHUwMDA0ro/8+y3SNedcdTAwMWa67Y7vn53e7u6t/ChcdTAwMDFcdTAwMDNwXGaVRktjXGLDfLqwdYnmXHUwMDBlxUxTKWqzTbnEcVx1MDAwMlx1MDAwNKVDsEeYpkTR7Gq8zCCf5lx1MDAwMrBdc66YoXRiXHI7xYTDUFwi5plTuFxu0C4vNqKjUtSPJNlMXHUwMDA3aHZcdTAwMDZNWmy0U42JXHUwMDExXHUwMDA0OFx1MDAxM7Sy2rjt9ptnPGTn9+JcdTAwMGJcdTAwMWKqo2PYV41ftS7QqPSpUeuEOy2MWZioLFx1MDAwZVx1MDAxOCWTXYCmXHUwMDE3XGaXYuvd61x1MDAxYlxugygkV1+uXHUwMDA2zd1ccrq/6sRiXHUwMDE3XHUwMDAxK1wiXHUwMDExiShcdTAwMDeULTlcdTAwMTaIhTmMMrthXHUwMDEyXHUwMDAzu6JrebzC7OQ7u9hYKjvJSZcsXG62w1hcdTAwMTQoXHUwMDA2ICGl0lxcZ1x1MDAwMsN3ZtHG2PDzI1KBJTFcdTAwMGJxiCDSXHUwMDBls1x1MDAwMoKEI7WUzDGiXHUwMDBlZVxcM0zXXGJcdTAwMDVM6SqXM/yjmKXaqezRKPGnXHUwMDE5qaWq6qhqJFx1MDAwYrpcdTAwMGJcdTAwMTUzTEcq77FcdTAwMTXnXHUwMDE1JoQjNJN25Vx1MDAwMFxiY1xuq7ZAXHUwMDFhh2qFnopdw1x1MDAxOC9cdTAwMWG2wKJj+uC6oqO09Icq65lcdTAwMTc51IvRnKvNVHWsj0W19/3u98sgu7mqjiPnzTjAjyo6jlxmmU9qQMbFi8NcdTAwMTBUXHUwMDE4JG0mp6851m+atLKTnFxyKjmuXHTlRmCQyqcwXG6sXHUwMDEwwVx1MDAxNIeB3dOnZoJcIlx1MDAwN+7Ck2pcdTAwMTNcdTAwMDSNtSNRo9XYwpTtP8JcdTAwMWMjXHUwMDA0hlx1MDAwNTtcdTAwMDVcdTAwMGWN5ZM5XGbmWUJcdTAwMTIxzz5cXKugNGZbPGGXeVKN6krb7TUwnGaS/1x1MDAwN1xyYreLsVwiXVx1MDAwMrZcdTAwMTKAjIovSJDSrVxuJiTIzyQ0XHUwMDFhNU6VtE/604xKozqJ0ZVFT8G5xD9meq1Rv9nNXG5cdTAwMTNcdTAwMGKVnNi1lPhfcVxupeCONFx1MDAwNLVcYv4k6qZQPp1YNCQrXHUwMDAxJNGWXHUwMDE3oIRX7PIwRmzJSlx1MDAxOM3snKtcIq/gWck5Uz9gifiySiPUQaEnQWNcdTAwMTKjqZJUlVRGhGPXXHUwMDFlUVBcYlx1MDAxZCFFblx1MDAxZEWOPco325pgj18jgWlU+5Q9Jr1pRlap3dzFsMokxqC254ZPTyyt4y+dm6NBcDxodT9s0r1cdTAwMGZfL5tVeyyt2NYu0tFcbr8tui9nupDH2G1yXHI6LbW+bZipnjzx9K1dqMOBVi2sYII5ljUsXHUwMDAzlk/VtjsoamaL88+b4vy8W7zMQoe/fb9xctN1dzB4XHUwMDFm4y3HhIjv2m8/pD7pbda/+N7tZsmGyVx1MDAxN8lhTU5egsWHZ9/0399++/Z/3Vx1MDAxNVx1MDAwZVx1MDAwMiJ9 MarginPaddingContent areaBorderHeightWidth </p> <p>The following example creates two widgets with a width of 30, a height of 6, and a border and padding of 1. The first widget has the default <code>box_sizing</code> (<code>\"border-box\"</code>). The second widget sets <code>box_sizing</code> to <code>\"content-box\"</code>.</p> box_sizing01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass BoxSizing(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(TEXT)\n        yield self.widget1\n        self.widget2 = Static(TEXT)\n        yield self.widget2\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"purple\"\n        self.widget2.styles.background = \"darkgreen\"\n        self.widget1.styles.width = 30\n        self.widget2.styles.width = 30\n        self.widget1.styles.height = 6\n        self.widget2.styles.height = 6\n        self.widget1.styles.border = (\"heavy\", \"white\")\n        self.widget2.styles.border = (\"heavy\", \"white\")\n        self.widget1.styles.padding = 1\n        self.widget2.styles.padding = 1\n        self.widget2.styles.box_sizing = \"content-box\"\n\n\nif __name__ == \"__main__\":\n    app = BoxSizing()\n    app.run()\n</code></pre> <p>The padding and border of the first widget is subtracted from the height leaving only 2 lines in the content area. The second widget also has a height of 6, but the padding and border adds additional height so that the content area remains 6 lines.</p> <p> BoxSizing \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u2503 \u2503brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p>"},{"location":"guide/styles/#margin","title":"Margin","text":"<p>Margin is similar to padding in that it adds space, but unlike padding, margin is outside of the widget's border. It is used to add space between widgets.</p> <p>The following example creates two widgets, each with a margin of 2.</p> margin01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass MarginApp(App):\n    def compose(self) -&gt; ComposeResult:\n        self.widget1 = Static(TEXT)\n        yield self.widget1\n        self.widget2 = Static(TEXT)\n        yield self.widget2\n\n    def on_mount(self) -&gt; None:\n        self.widget1.styles.background = \"purple\"\n        self.widget2.styles.background = \"darkgreen\"\n        self.widget1.styles.border = (\"heavy\", \"white\")\n        self.widget2.styles.border = (\"heavy\", \"white\")\n        self.widget1.styles.margin = 2\n        self.widget2.styles.margin = 2\n\n\nif __name__ == \"__main__\":\n    app = MarginApp()\n    app.run()\n</code></pre> <p>Notice how each widget has an additional two rows and columns around the border.</p> <p> MarginApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2503Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <p>Note</p> <p>In the above example both widgets have a margin of 2, but there are only 2 lines of space between the widgets. This is because margins of consecutive widgets overlap. In other words when there are two widgets next to each other Textual picks the greater of the two margins.</p>"},{"location":"guide/styles/#more-styles","title":"More styles","text":"<p>We've covered the most fundamental styles used by Textual apps, but there are many more which you can use to customize many aspects of how your app looks. See the Styles reference for a comprehensive list.</p> <p>In the next chapter we will discuss Textual CSS which is a powerful way of applying styles to widgets that keeps your code free of style attributes.</p>"},{"location":"guide/testing/","title":"Testing","text":"<p>Code testing is an important part of software development. This chapter will cover how to write tests for your Textual apps.</p>"},{"location":"guide/testing/#what-is-testing","title":"What is testing?","text":"<p>It is common to write tests alongside your app. A test is simply a function that confirms your app is working correctly.</p> <p>Learn more about testing</p> <p>We recommend Python Testing with pytest for a comprehensive guide to writing tests.</p>"},{"location":"guide/testing/#do-you-need-to-write-tests","title":"Do you need to write tests?","text":"<p>The short answer is \"no\", you don't need to write tests.</p> <p>In practice however, it is almost always a good idea to write tests. Writing code that is completely bug free is virtually impossible, even for experienced developers. If you want to have confidence that your application will run as you intended it to, then you should write tests. Your test code will help you find bugs early, and alert you if you accidentally break something in the future.</p>"},{"location":"guide/testing/#testing-frameworks-for-textual","title":"Testing frameworks for Textual","text":"<p>Textual doesn't require any particular test framework. You can use any test framework you are familiar with, but we will be using pytest in this chapter.</p>"},{"location":"guide/testing/#testing-apps","title":"Testing apps","text":"<p>You can often test Textual code in the same way as any other app, and use similar techniques. But when testing user interface interactions, you may need to use Textual's dedicated test features.</p> <p>Let's write a simple Textual app so we can demonstrate how to test it. The following app shows three buttons labelled \"red\", \"green\", and \"blue\". Clicking one of those buttons or pressing a corresponding R, G, and B key will change the background color.</p> rgb.pyOutput <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Button, Footer\n\n\nclass RGBApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    Horizontal {\n        width: auto;\n        height: auto;\n    }\n    \"\"\"\n\n    BINDINGS = [\n        (\"r\", \"switch_color('red')\", \"Go Red\"),\n        (\"g\", \"switch_color('green')\", \"Go Green\"),\n        (\"b\", \"switch_color('blue')\", \"Go Blue\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            yield Button(\"Red\", id=\"red\")\n            yield Button(\"Green\", id=\"green\")\n            yield Button(\"Blue\", id=\"blue\")\n        yield Footer()\n\n    @on(Button.Pressed)\n    def pressed_button(self, event: Button.Pressed) -&gt; None:\n        assert event.button.id is not None\n        self.action_switch_color(event.button.id)\n\n    def action_switch_color(self, color: str) -&gt; None:\n        self.screen.styles.background = color\n\n\nif __name__ == \"__main__\":\n    app = RGBApp()\n    app.run()\n</code></pre> <p> RGBApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Red\u00a0\u00a0Green\u00a0\u00a0Blue\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u00a0r\u00a0Go\u00a0Red\u00a0\u00a0g\u00a0Go\u00a0Green\u00a0\u00a0b\u00a0Go\u00a0Blue\u00a0\u258f^p\u00a0palette </p> <p>Although it is straightforward to test an app like this manually, it is not practical to click every button and hit every key in your app after changing a single line of code. Tests allow us to automate such testing so we can quickly simulate user interactions and check the result.</p> <p>To test our simple app we will use the <code>run_test()</code> method on the <code>App</code> class. This replaces the usual call to <code>run()</code> and will run the app in headless mode, which prevents Textual from updating the terminal but otherwise behaves as normal.</p> <p>The <code>run_test()</code> method is an async context manager which returns a <code>Pilot</code> object. You can use this object to interact with the app as if you were operating it with a keyboard and mouse.</p> <p>Let's look at the tests for the example above:</p> test_rgb.py<pre><code>from rgb import RGBApp\n\nfrom textual.color import Color\n\n\nasync def test_keys():  # (1)!\n    \"\"\"Test pressing keys has the desired result.\"\"\"\n    app = RGBApp()\n    async with app.run_test() as pilot:  # (2)!\n        # Test pressing the R key\n        await pilot.press(\"r\")  # (3)!\n        assert app.screen.styles.background == Color.parse(\"red\")  # (4)!\n\n        # Test pressing the G key\n        await pilot.press(\"g\")\n        assert app.screen.styles.background == Color.parse(\"green\")\n\n        # Test pressing the B key\n        await pilot.press(\"b\")\n        assert app.screen.styles.background == Color.parse(\"blue\")\n\n        # Test pressing the X key\n        await pilot.press(\"x\")\n        # No binding (so no change to the color)\n        assert app.screen.styles.background == Color.parse(\"blue\")\n\n\nasync def test_buttons():\n    \"\"\"Test pressing keys has the desired result.\"\"\"\n    app = RGBApp()\n    async with app.run_test() as pilot:\n        # Test clicking the \"red\" button\n        await pilot.click(\"#red\")  # (5)!\n        assert app.screen.styles.background == Color.parse(\"red\")\n\n        # Test clicking the \"green\" button\n        await pilot.click(\"#green\")\n        assert app.screen.styles.background == Color.parse(\"green\")\n\n        # Test clicking the \"blue\" button\n        await pilot.click(\"#blue\")\n        assert app.screen.styles.background == Color.parse(\"blue\")\n</code></pre> <ol> <li>The <code>run_test()</code> method requires that it run in a coroutine, so tests must use the <code>async</code> keyword.</li> <li>This runs the app and returns a Pilot instance we can use to interact with it.</li> <li>Simulates pressing the R key.</li> <li>This checks that pressing the R key has resulted in the background color changing.</li> <li>Simulates clicking on the widget with an <code>id</code> of <code>red</code> (the button labelled \"Red\").</li> </ol> <p>There are two tests defined in <code>test_rgb.py</code>. The first to test keys and the second to test button clicks. Both tests first construct an instance of the app and then call <code>run_test()</code> to get a Pilot object. The <code>test_keys</code> function simulates key presses with <code>Pilot.press</code>, and <code>test_buttons</code> simulates button clicks with <code>Pilot.click</code>.</p> <p>After simulating a user interaction, Textual tests will typically check the state has been updated with an <code>assert</code> statement. The <code>pytest</code> module will record any failures of these assert statements as a test fail.</p> <p>If you run the tests with <code>pytest test_rgb.py</code> you should get 2 passes, which will confirm that the user will be able to click buttons or press the keys to change the background color.</p> <p>If you later update this app, and accidentally break this functionality, one or more of your tests will fail. Knowing which test has failed will help you quickly track down where your code was broken.</p>"},{"location":"guide/testing/#simulating-key-presses","title":"Simulating key presses","text":"<p>We've seen how the <code>press</code> method simulates keys. You can also supply multiple keys to simulate the user typing in to the app. Here's an example of simulating the user typing the word \"hello\".</p> <pre><code>await pilot.press(\"h\", \"e\", \"l\", \"l\", \"o\")\n</code></pre> <p>Each string creates a single keypress. You can also use the name for non-printable keys (such as \"enter\") and the \"ctrl+\" modifier. These are the same identifiers as used for key events, which you can experiment with by running <code>textual keys</code>.</p>"},{"location":"guide/testing/#simulating-clicks","title":"Simulating clicks","text":"<p>You can simulate mouse clicks in a similar way with <code>Pilot.click</code>. If you supply a CSS selector Textual will simulate clicking on the matching widget.</p> <p>Note</p> <p>If there is another widget in front of the widget you want to click, you may end up clicking the topmost widget rather than the widget indicated in the selector. This is generally what you want, because a real user would experience the same thing.</p>"},{"location":"guide/testing/#clicking-the-screen","title":"Clicking the screen","text":"<p>If you don't supply a CSS selector, then the click will be relative to the screen. For example, the following simulates a click at (0, 0):</p> <pre><code>await pilot.click()\n</code></pre>"},{"location":"guide/testing/#click-offsets","title":"Click offsets","text":"<p>If you supply an <code>offset</code> value, it will be added to the coordinates of the simulated click. For example the following line would simulate a click at the coordinates (10, 5).</p> <pre><code>await pilot.click(offset=(10, 5))\n</code></pre> <p>If you combine this with a selector, then the offset will be relative to the widget. Here's how you would click the line above a button.</p> <pre><code>await pilot.click(Button, offset=(0, -1))\n</code></pre>"},{"location":"guide/testing/#modifier-keys","title":"Modifier keys","text":"<p>You can simulate clicks in combination with modifier keys, by setting the <code>shift</code>, <code>meta</code>, or <code>control</code> parameters. Here's how you could simulate ctrl-clicking a widget with an ID of \"slider\":</p> <pre><code>await pilot.click(\"#slider\", control=True)\n</code></pre>"},{"location":"guide/testing/#changing-the-screen-size","title":"Changing the screen size","text":"<p>The default size of a simulated app is (80, 24). You may want to test what happens when the app has a different size. To do this, set the <code>size</code> parameter of <code>run_test</code> to a different size. For example, here is how you would simulate a terminal resized to 100 columns and 50 lines:</p> <pre><code>async with app.run_test(size=(100, 50)) as pilot:\n    ...\n</code></pre>"},{"location":"guide/testing/#pausing-the-pilot","title":"Pausing the pilot","text":"<p>Some actions in a Textual app won't change the state immediately. For instance, messages may take a moment to bubble from the widget that sent them. If you were to post a message and immediately <code>assert</code> you may find that it fails because the message hasn't yet been processed.</p> <p>You can generally solve this by calling <code>pause()</code> which will wait for all pending messages to be processed. You can also supply a <code>delay</code> parameter, which will insert a delay prior to waiting for pending messages.</p>"},{"location":"guide/testing/#textuals-tests","title":"Textual's tests","text":"<p>Textual itself has a large battery of tests. If you are interested in how we write tests, see the tests/ directory in the Textual repository.</p>"},{"location":"guide/testing/#snapshot-testing","title":"Snapshot testing","text":"<p>Snapshot testing is the process of recording the output of a test, and comparing it against the output from previous runs.</p> <p>Textual uses snapshot testing internally to ensure that the builtin widgets look and function correctly in every release. We've made the pytest plugin we built available for public use.</p> <p>The official Textual pytest plugin can help you catch otherwise difficult to detect visual changes in your app.</p> <p>It works by generating an SVG screenshot (such as the images in these docs) from your app. If the screenshot changes in any test run, you will have the opportunity to visually compare the new output against previous runs.</p>"},{"location":"guide/testing/#installing-the-plugin","title":"Installing the plugin","text":"<p>You can install <code>pytest-textual-snapshot</code> using your favorite package manager (<code>pip</code>, <code>poetry</code>, etc.).</p> <pre><code>pip install pytest-textual-snapshot\n</code></pre>"},{"location":"guide/testing/#creating-a-snapshot-test","title":"Creating a snapshot test","text":"<p>With the package installed, you now have access to the <code>snap_compare</code> pytest fixture.</p> <p>Let's look at an example of how we'd create a snapshot test for the calculator app below.</p> <p> CalculatorApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0C\u00a0\u00a0+/-\u00a0\u00a0%\u00a0\u00a0\u00f7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a07\u00a0\u00a08\u00a0\u00a09\u00a0\u00a0\u00d7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a04\u00a0\u00a05\u00a0\u00a06\u00a0\u00a0-\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a01\u00a0\u00a02\u00a0\u00a03\u00a0\u00a0+\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a00\u00a0\u00a0.\u00a0\u00a0=\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>First, we need to create a new test and specify the path to the Python file containing the app. This path should be relative to the location of the test.</p> <pre><code>def test_calculator(snap_compare):\n    assert snap_compare(\"path/to/calculator.py\")\n</code></pre> <p>Let's run the test as normal using <code>pytest</code>.</p> <pre><code>pytest\n</code></pre> <p>When this test runs for the first time, an SVG screenshot of the calculator app is generated, and the test will fail. Snapshot tests always fail on the first run, since there's no previous version to compare the snapshot to.</p> <p></p> <p>If you open the snapshot report in your browser, you'll see something like this:</p> <p></p> <p>Tip</p> <p>You can usually open the link directly from the terminal, but some terminal emulators may require you to hold Ctrl or Cmd while clicking for links to work.</p> <p>The report explains that there's \"No history for this test\". It's our job to validate that the initial snapshot looks correct before proceeding. Our calculator is rendering as we expect, so we'll save this snapshot:</p> <pre><code>pytest --snapshot-update\n</code></pre> <p>Warning</p> <p>Only ever run pytest with <code>--snapshot-update</code> if you're happy with how the output looks on the left hand side of the snapshot report. When using <code>--snapshot-update</code>, you're saying \"I'm happy with all of the screenshots in the snapshot test report, and they will now represent the ground truth which all future runs will be compared against\". As such, you should only run <code>pytest --snapshot-update</code> after running <code>pytest</code> and confirming the output looks good.</p> <p>Now that our snapshot is saved, if we run <code>pytest</code> (with no arguments) again, the test will pass. This is because the screenshot taken during this test run matches the one we saved earlier.</p>"},{"location":"guide/testing/#catching-a-bug","title":"Catching a bug","text":"<p>The real power of snapshot testing comes from its ability to catch visual regressions which could otherwise easily be missed.</p> <p>Imagine a new developer joins your team, and tries to make a few changes to the calculator. While making this change they accidentally break some styling which removes the orange coloring from the buttons on the right of the app. When they run <code>pytest</code>, they're presented with a report which reveals the damage:</p> <p></p> <p>On the right, we can see our \"historical\" snapshot - this is the one we saved earlier. On the left is how our app is currently rendering - clearly not how we intended!</p> <p>We can click the \"Show difference\" toggle at the top right of the diff to overlay the two versions:</p> <p></p> <p>This reveals another problem, which could easily be missed in a quick visual inspection - our new developer has also deleted the number 4!</p> <p>Tip</p> <p>Snapshot tests work well in CI on all supported operating systems, and the snapshot report is just an HTML file which can be exported as a build artifact.</p>"},{"location":"guide/testing/#pressing-keys","title":"Pressing keys","text":"<p>You can simulate pressing keys before the snapshot is captured using the <code>press</code> parameter.</p> <pre><code>def test_calculator_pressing_numbers(snap_compare):\n    assert snap_compare(\"path/to/calculator.py\", press=[\"1\", \"2\", \"3\"])\n</code></pre>"},{"location":"guide/testing/#changing-the-terminal-size","title":"Changing the terminal size","text":"<p>To capture the snapshot with a different terminal size, pass a tuple <code>(width, height)</code> as the <code>terminal_size</code> parameter.</p> <pre><code>def test_calculator(snap_compare):\n    assert snap_compare(\"path/to/calculator.py\", terminal_size=(50, 100))\n</code></pre>"},{"location":"guide/testing/#running-setup-code","title":"Running setup code","text":"<p>You can also run arbitrary code before the snapshot is captured using the <code>run_before</code> parameter.</p> <p>In this example, we use <code>run_before</code> to hover the mouse cursor over the widget with ID <code>number-5</code> before taking the snapshot.</p> <pre><code>def test_calculator_hover_number(snap_compare):\n    async def run_before(pilot) -&gt; None:\n        await pilot.hover(\"#number-5\")\n\n    assert snap_compare(\"path/to/calculator.py\", run_before=run_before)\n</code></pre> <p>For more information, visit the <code>pytest-textual-snapshot</code> repo on GitHub.</p>"},{"location":"guide/widgets/","title":"Widgets","text":"<p>In this chapter we will explore widgets in more detail, and how you can create custom widgets of your own.</p>"},{"location":"guide/widgets/#what-is-a-widget","title":"What is a widget?","text":"<p>A widget is a component of your UI responsible for managing a rectangular region of the screen. Widgets may respond to events in much the same way as an app. In many respects, widgets are like mini-apps.</p> <p>Information</p> <p>Every widget runs in its own asyncio task.</p>"},{"location":"guide/widgets/#custom-widgets","title":"Custom widgets","text":"<p>There is a growing collection of builtin widgets in Textual, but you can build entirely custom widgets that work in the same way.</p> <p>The first step in building a widget is to import and extend a widget class. This can either be Widget which is the base class of all widgets, or one of its subclasses.</p> <p>Let's create a simple custom widget to display a greeting.</p> hello01.py<pre><code>from textual.app import App, ComposeResult, RenderResult\nfrom textual.widget import Widget\n\n\nclass Hello(Widget):\n    \"\"\"Display a greeting.\"\"\"\n\n    def render(self) -&gt; RenderResult:\n        return \"Hello, [b]World[/b]!\"\n\n\nclass CustomApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> <p>The highlighted lines define a custom widget class with just a render() method. Textual will display whatever is returned from render in the content area of your widget. We have returned a string in the code above, but there are other possible return types which we will cover later.</p> <p>Note that the text contains tags in square brackets, i.e. <code>[b]</code>. This is console markup which allows you to embed various styles within your content. If you run this you will find that <code>World</code> is in bold.</p> <p> CustomApp Hello,\u00a0World! </p> <p>This (very simple) custom widget may be styled in the same way as builtin widgets, and targeted with CSS. Let's add some CSS to this app.</p> hello02.pyhello02.tcss hello02.py<pre><code>from textual.app import App, ComposeResult, RenderResult\nfrom textual.widget import Widget\n\n\nclass Hello(Widget):\n    \"\"\"Display a greeting.\"\"\"\n\n    def render(self) -&gt; RenderResult:\n        return \"Hello, [b]World[/b]!\"\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello02.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    color: $text;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p>The addition of the CSS has completely transformed our custom widget.</p> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHello,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"guide/widgets/#static-widget","title":"Static widget","text":"<p>While you can extend the Widget class, a subclass will typically be a better starting point. The Static class is a widget subclass which caches the result of render, and provides an update() method to update the content area.</p> <p>Let's use Static to create a widget which cycles through \"hello\" in various languages.</p> hello03.pyhello03.tcssOutput hello03.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.next_word()\n\n    def on_click(self) -&gt; None:\n        self.next_word()\n\n    def next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"{hello}, [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello03.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello03.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note that there is no <code>render()</code> method on this widget. The Static class is handling the render for us. Instead we call <code>update()</code> when we want to update the content within the widget.</p> <p>The <code>next_word</code> method updates the greeting. We call this method from the mount handler to get the first word, and from a click handler to cycle through the greetings when we click the widget.</p>"},{"location":"guide/widgets/#default-css","title":"Default CSS","text":"<p>When building an app it is best to keep your CSS in an external file. This allows you to see all your CSS in one place, and to enable live editing. However if you intend to distribute a widget (via PyPI for instance) it can be convenient to bundle the code and CSS together. You can do this by adding a <code>DEFAULT_CSS</code> class variable inside your widget class.</p> <p>Textual's builtin widgets bundle CSS in this way, which is why you can see nicely styled widgets without having to copy any CSS code.</p> <p>Here's the Hello example again, this time the widget has embedded default CSS:</p> hello04.pyhello04.tcssOutput hello04.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Hello {\n        width: 40;\n        height: 9;\n        padding: 1 2;\n        background: $panel;\n        border: $secondary tall;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.next_word()\n\n    def on_click(self) -&gt; None:\n        self.next_word()\n\n    def next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"{hello}, [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello04.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello04.tcss<pre><code>Screen {\n    align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"guide/widgets/#scoped-css","title":"Scoped CSS","text":"<p>Default CSS is scoped by default. All this means is that CSS defined in <code>DEFAULT_CSS</code> will affect the widget and potentially its children only. This is to prevent you from inadvertently breaking an unrelated widget.</p> <p>You can disable scoped CSS by setting the class var <code>SCOPED_CSS</code> to <code>False</code>.</p>"},{"location":"guide/widgets/#default-specificity","title":"Default specificity","text":"<p>CSS defined within <code>DEFAULT_CSS</code> has an automatically lower specificity than CSS read from either the App's <code>CSS</code> class variable or an external stylesheet. In practice this means that your app's CSS will take precedence over any CSS bundled with widgets.</p>"},{"location":"guide/widgets/#text-links","title":"Text links","text":"<p>Text in a widget may be marked up with links which perform an action when clicked. Links in console markup use the following format:</p> <pre><code>\"Click [@click='app.bell']Me[/]\"\n</code></pre> <p>The <code>@click</code> tag introduces a click handler, which runs the <code>app.bell</code> action.</p> <p>Let's use markup links in the hello example so that the greeting becomes a link which updates the widget.</p> hello05.pyhello05.tcssOutput hello05.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.action_next_word()\n\n    def action_next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"[@click='next_word']{hello}[/], [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello05.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> hello05.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>If you run this example you will see that the greeting has been underlined, which indicates it is clickable. If you click on the greeting it will run the <code>next_word</code> action which updates the next word.</p>"},{"location":"guide/widgets/#border-titles","title":"Border titles","text":"<p>Every widget has a <code>border_title</code> and <code>border_subtitle</code> attribute. Setting <code>border_title</code> will display text within the top border, and setting <code>border_subtitle</code> will display text within the bottom border.</p> <p>Note</p> <p>Border titles will only display if the widget has a border enabled.</p> <p>The default value for these attributes is empty string, which disables the title. You can change the default value for the title attributes with the <code>BORDER_TITLE</code> and <code>BORDER_SUBTITLE</code> class variables.</p> <p>Let's demonstrate setting a title, both as a class variable and a instance variable:</p> hello06.pyhello06.tcssOutput hello06.py<pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nhellos = cycle(\n    [\n        \"Hola\",\n        \"Bonjour\",\n        \"Guten tag\",\n        \"Salve\",\n        \"N\u01d0n h\u01ceo\",\n        \"Ol\u00e1\",\n        \"Asalaam alaikum\",\n        \"Konnichiwa\",\n        \"Anyoung haseyo\",\n        \"Zdravstvuyte\",\n        \"Hello\",\n    ]\n)\n\n\nclass Hello(Static):\n    \"\"\"Display a greeting.\"\"\"\n\n    BORDER_TITLE = \"Hello Widget\"  # (1)!\n\n    def on_mount(self) -&gt; None:\n        self.action_next_word()\n        self.border_subtitle = \"Click for next hello\"  # (2)!\n\n    def action_next_word(self) -&gt; None:\n        \"\"\"Get a new hello and update the content area.\"\"\"\n        hello = next(hellos)\n        self.update(f\"[@click='next_word']{hello}[/], [b]World[/b]!\")\n\n\nclass CustomApp(App):\n    CSS_PATH = \"hello05.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Hello()\n\n\nif __name__ == \"__main__\":\n    app = CustomApp()\n    app.run()\n</code></pre> <ol> <li>Setting the default for the <code>title</code> attribute via class variable.</li> <li>Setting <code>subtitle</code> via an instance attribute.</li> </ol> hello06.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nHello {\n    width: 40;\n    height: 9;\n    padding: 1 2;\n    background: $panel;\n    border: $secondary tall;\n    content-align: center middle;\n}\n</code></pre> <p> CustomApp \u258a\u2594\u00a0Hello\u00a0Widget\u00a0\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aHola,\u00a0World!\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0Click\u00a0for\u00a0next\u00a0hello\u00a0\u2581\u258e </p> <p>Note that titles are limited to a single line of text. If the supplied text is too long to fit within the widget, it will be cropped (and an ellipsis added).</p> <p>There are a number of styles that influence how titles are displayed (color and alignment). See the style reference for details.</p>"},{"location":"guide/widgets/#rich-renderables","title":"Rich renderables","text":"<p>In previous examples we've set strings as content for Widgets. You can also use special objects called renderables for advanced visuals. You can use any renderable defined in Rich or third party libraries.</p> <p>Lets make a widget that uses a Rich table for its content. The following app is a solution to the classic fizzbuzz problem often used to screen software engineers in job interviews. The problem is this: Count up from 1 to 100, when the number is divisible by 3, output \"fizz\"; when the number is divisible by 5, output \"buzz\"; and when the number is divisible by both 3 and 5 output \"fizzbuzz\".</p> <p>This app will \"play\" fizz buzz by displaying a table of the first 15 numbers and columns for fizz and buzz.</p> fizzbuzz01.pyfizzbuzz01.tcssOutput fizzbuzz01.py<pre><code>from rich.table import Table\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass FizzBuzz(Static):\n    def on_mount(self) -&gt; None:\n        table = Table(\"Number\", \"Fizz?\", \"Buzz?\")\n        for n in range(1, 16):\n            fizz = not n % 3\n            buzz = not n % 5\n            table.add_row(\n                str(n),\n                \"fizz\" if fizz else \"\",\n                \"buzz\" if buzz else \"\",\n            )\n        self.update(table)\n\n\nclass FizzBuzzApp(App):\n    CSS_PATH = \"fizzbuzz01.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield FizzBuzz()\n\n\nif __name__ == \"__main__\":\n    app = FizzBuzzApp()\n    app.run()\n</code></pre> fizzbuzz01.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nFizzBuzz {\n    width: auto;\n    height: auto;\n    background: $primary;\n    color: $text;\n}\n</code></pre> <p> FizzBuzzApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u00a0Number\u00a0\u2503\u00a0Fizz?\u00a0\u2503\u00a0Buzz?\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u2502 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a010\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u2502 \u2502\u00a011\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a012\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a013\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a014\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a015\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p>"},{"location":"guide/widgets/#content-size","title":"Content size","text":"<p>Textual will auto-detect the dimensions of the content area from rich renderables if width or height is set to <code>auto</code>. You can override auto dimensions by implementing get_content_width() or get_content_height().</p> <p>Let's modify the default width for the fizzbuzz example. By default, the table will be just wide enough to fix the columns. Let's force it to be 50 characters wide.</p> fizzbuzz02.pyfizzbuzz02.tcssOutput fizzbuzz02.py<pre><code>from rich.table import Table\n\nfrom textual.app import App, ComposeResult\nfrom textual.geometry import Size\nfrom textual.widgets import Static\n\n\nclass FizzBuzz(Static):\n    def on_mount(self) -&gt; None:\n        table = Table(\"Number\", \"Fizz?\", \"Buzz?\", expand=True)\n        for n in range(1, 16):\n            fizz = not n % 3\n            buzz = not n % 5\n            table.add_row(\n                str(n),\n                \"fizz\" if fizz else \"\",\n                \"buzz\" if buzz else \"\",\n            )\n        self.update(table)\n\n    def get_content_width(self, container: Size, viewport: Size) -&gt; int:\n        \"\"\"Force content width size.\"\"\"\n        return 50\n\n\nclass FizzBuzzApp(App):\n    CSS_PATH = \"fizzbuzz02.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield FizzBuzz()\n\n\nif __name__ == \"__main__\":\n    app = FizzBuzzApp()\n    app.run()\n</code></pre> fizzbuzz02.tcss<pre><code>Screen {\n    align: center middle;\n}\n\nFizzBuzz {\n    width: auto;\n    height: auto;\n    background: $primary;\n    color: $text;\n}\n</code></pre> <p> FizzBuzzApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u00a0Number\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Fizz?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Buzz?\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a010\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a011\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a012\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a013\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a014\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a015\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0fizz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0buzz\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <p>Note that we've added <code>expand=True</code> to tell the <code>Table</code> to expand beyond the optimal width, so that it fills the 50 characters returned by <code>get_content_width</code>.</p>"},{"location":"guide/widgets/#tooltips","title":"Tooltips","text":"<p>Widgets can have tooltips which is content displayed when the user hovers the mouse over the widget. You can use tooltips to add supplementary information or help messages.</p> <p>Tip</p> <p>It is best not to rely on tooltips for essential information. Some users prefer to use the keyboard exclusively and may never see tooltips.</p> <p>To add a tooltip, assign to the widget's <code>tooltip</code> property. You can set text or any other Rich renderable.</p> <p>The following example adds a tooltip to a button:</p> tooltip01.pyOutput (before hover)Output (after hover) tooltip01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\"\"\"\n\n\nclass TooltipApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"Click me\", variant=\"success\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(Button).tooltip = TEXT\n\n\nif __name__ == \"__main__\":\n    app = TooltipApp()\n    app.run()\n</code></pre> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Click\u00a0me\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. </p>"},{"location":"guide/widgets/#customizing-the-tooltip","title":"Customizing the tooltip","text":"<p>If you don't like the default look of the tooltips, you can customize them to your liking with CSS. Add a rule to your CSS that targets <code>Tooltip</code>. Here's an example:</p> tooltip02.pyOutput (before hover)Output (after hover) tooltip02.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Button\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\"\"\"\n\n\nclass TooltipApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    Tooltip {\n        padding: 2 4;\n        background: $primary;\n        color: auto 90%;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Button(\"Click me\", variant=\"success\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(Button).tooltip = TEXT\n\n\nif __name__ == \"__main__\":\n    app = TooltipApp()\n    app.run()\n</code></pre> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Click\u00a0me\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> TooltipApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581 I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0 brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. </p>"},{"location":"guide/widgets/#loading-indicator","title":"Loading indicator","text":"<p>Widgets have a <code>loading</code> reactive which when set to <code>True</code> will temporarily replace your widget with a <code>LoadingIndicator</code>.</p> <p>You can use this to indicate to the user that the app is currently working on getting data, and there will be content when that data is available. Let's look at an example of this.</p> loading01.pyOutput loading01.py<pre><code>from asyncio import sleep\nfrom random import randint\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass DataApp(App):\n    CSS = \"\"\"\n    Screen {\n        layout: grid;\n        grid-size: 2;\n    }\n    DataTable {\n        height: 1fr;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n        yield DataTable()\n        yield DataTable()\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        for data_table in self.query(DataTable):\n            data_table.loading = True  # (1)!\n            self.load_data(data_table)\n\n    @work\n    async def load_data(self, data_table: DataTable) -&gt; None:\n        await sleep(randint(2, 10))  # (2)!\n        data_table.add_columns(*ROWS[0])\n        data_table.add_rows(ROWS[1:])\n        data_table.loading = False  # (3)!\n\n\nif __name__ == \"__main__\":\n    app = DataApp()\n    app.run()\n</code></pre> <ol> <li>Shows the loading indicator in place of the data table.</li> <li>Insert a random sleep to simulate a network request.</li> <li>Show the new data.</li> </ol> <p> DataApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf </p> <p>In this example we have four DataTable widgets, which we put into a loading state by setting the widget's <code>loading</code> property to <code>True</code>. This will temporarily replace the widget with a loading indicator animation. When the (simulated) data has been retrieved, we reset the <code>loading</code> property to show the new data.</p> <p>Tip</p> <p>See the guide on Workers if you want to know more about the <code>@work</code> decorator.</p>"},{"location":"guide/widgets/#line-api","title":"Line API","text":"<p>A downside of widgets that return Rich renderables is that Textual will redraw the entire widget when its state is updated or it changes size. If a widget is large enough to require scrolling, or updates frequently, then this redrawing can make your app feel less responsive. Textual offers an alternative API which reduces the amount of work required to refresh a widget, and makes it possible to update portions of a widget (as small as a single character) without a full redraw. This is known as the line API.</p> <p>Note</p> <p>The Line API requires a little more work that typical Rich renderables, but can produce powerful widgets such as the builtin DataTable which can handle thousands or even millions of rows.</p>"},{"location":"guide/widgets/#render-line-method","title":"Render Line method","text":"<p>To build a widget with the line API, implement a <code>render_line</code> method rather than a <code>render</code> method. The <code>render_line</code> method takes a single integer argument <code>y</code> which is an offset from the top of the widget, and should return a Strip object containing that line's content. Textual will call this method as required to get content for every row of characters in the widget.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9nl9BsV/2Vlx1MDAwNe109zxTtXVcdTAwMGJIIISER4BcdTAwMTBya4tcdTAwMTK2bFx1MDAxNORcdTAwMDe2eG7lv99cdTAwMWWHWPJDxjY2ce5d71x1MDAwNowk2+OZc7pPP0Z/v1haWk7vmtHyq6Xl6LZcdTAwMTQmcblcdTAwMTXeLL/0x6+jVjtu1PlcdTAwMTR2/m43rlqlzpXnadpsv/rjj1rYuojSZlx1MDAxMpai4DpuX4VJO70qx42g1Kj9XHUwMDExp1Gt/W//cyesRX82XHUwMDFitXLaXG6yXHUwMDBmWYnKcdpoff+sKIlqUT1t87v/h/9eWvq78zM3ulZUSsN6NYk6L+icylx1MDAwNqjR9Vx1MDAxZt1p1DuDtWhJkJa6e0Hcfs1cdTAwMWaXRmU+W+EhR9lcdTAwMTl/aFndXHUwMDFlnVx1MDAxY16fNnfM0d398cmhkqdlzD61XHUwMDEyJ8lBepd8n4mwdH7Vyo2pnbZcdTAwMWFcdTAwMTfRcVxcTs/5vOw73n1du8GTkL2q1biqntejtv/+0D3aaIalOL3zX0J0XHUwMDBmfp+DV0vZkVv+a0VcdTAwMDVOklx1MDAwMuuUMMZcdJd9sn89KFxurFJGgUGhrXR941pvJLxcdTAwMTI8rt9UhcolmY3sLCxdVHl49XL3mrRcdTAwMTXW282wxeuVXXfz8I3JUICCXHUwMDAwVffUeVx1MDAxNFfPU1x1MDAwZiPUgVLOKtLKOevQZMOIOstcdTAwMDFaXHUwMDFhRONM9u38hze3ylx1MDAxZGT8lZ+wevlhwupXSZKN159404+mPKJyK920Z9VduFx1MDAxMVxmiFx1MDAxOGpn764qm4er3e/UXHUwMDAzv7DVatwsd898e3iWjeiqWVx1MDAwZdOHL2GURGLgWYvd80lcXL/oXHUwMDFmbNIoXWQw7Fx1MDAxY/32clxu+IOAQvzzSljhQMmx8Z9cXLy7PD1vbev9N3uJhlx1MDAwYrmLd1x1MDAxYlx1MDAwNfgvtVx1MDAxYe32ynmYls6LOIAz4lx1MDAwMIhHSeBE4LRgiFx1MDAxYqFcdTAwMDXwXHUwMDFh9JDAuMA5XHUwMDA3vCokrdVAhSRcdTAwMTCdx/QkUFJcdTAwMDaakCRcdFx1MDAwNVx1MDAwMEOoQFpcdTAwMDRcdTAwMTaYplKTpy3qXHUwMDAxKpBTXGYkUnZmVFx1MDAxOFx1MDAwMVaDRln9LGA1aFx1MDAwYrHqnCG2XGZkx1x1MDAwNqvaxvVSZecmxNXjk1x1MDAxYqrCadIuMtZ9gPt5MIWA0JA2glx1MDAxNFx0hFx1MDAwMZhK6yRcdTAwMWFUxlhw84QpXHUwMDA1XHUwMDAytEKrXGaw0bWDOEVcdTAwMWJoLZgvWqAmxvQgTlx1MDAxZCn2KFx1MDAxYWZnslx1MDAxZsOpmVx1MDAxNU6jJImb7eGKQkNcdTAwMTFKnbcsykpcdTAwMWNcdTAwMWKk+1uV6+279t37xsV++nqrtd3ePL+cXHUwMDA2pPB8IPUwJJBsw7RcdTAwMDX2IL0gtS5QhtFAiEJYJfqFzkQg/a1cdTAwMTIqVDhcYlCgQFxuROU08i822nJcdTAwMTChgIHSWjJcbkEgXHUwMDExylx1MDAwMVEh2bxaySrwf1xuoCbnVvpcdTAwMDCK1pFGY8dcdTAwMDcolurV++Rz+aB+bj/o9kH49cRcdTAwMTS5/EVcdTAwMDGo4oVcdTAwMTdCXHUwMDFha0AjsLPsXHUwMDA1qFxyXHUwMDE4XHUwMDExvFx1MDAxNk4oyVx1MDAwMNZPXHUwMDA06JlcdTAwMTBqXlx1MDAwMCW2v0Yw1Z5ccqD2OVx1MDAwMKpcdTAwMGI1qXKs0YhyjHxcZqDHe1x1MDAxN/d7n87XXHUwMDEy8UnvbO2+PvhcdTAwMWNcdTAwMDItOEBRXHUwMDA20kipXHUwMDE0aFx1MDAwMM1cdTAwMTBQvVxiNYFcdTAwMTGCueqIp4qVwJNcdTAwMTBcbnjGmnZeXGLl8TlhrNC/XHUwMDFlQkdqUetcbr08XHUwMDAwSZBKuPFBWj7Y3CuX3lx1MDAxZlx1MDAxZX01N1dcdTAwMWZut1Vauf70XFwgXHUwMDE1U4FUXHUwMDA0QILYO3JULpSPm7BcdTAwMDekoFxcXHUwMDAw0jlEXHUwMDA2MVx1MDAxOYbIk1BqnFx1MDAxMlx1MDAxNcQhrt5cdTAwMDdEikNcdTAwMDNyUqNcdTAwMWOePtBcdTAwMWO/SZSKjFx1MDAxNPwzXHUwMDA35Vx1MDAxZoZUasPhnZ5cdTAwMDSmWVrgXHUwMDA3ZOjhyLdi9HZfMySp8PHy+uaotH178WXjrb7/fLe+d4234yVcdTAwMTVejnrfuSYrXGZcdTAwMWJkSbPiXFxcdTAwMWHdpsPohrYw9EMjrVx1MDAwNDOBSzhxXHUwMDFm31x1MDAxZidcdTAwMDdvjqp2rXK1trL1QZVcdTAwMGWnS9M9o1Mgli0sSViyoPWhXHUwMDE39NFcclx1MDAwMz5swElcdTAwMDFI4Pqj0tlcdTAwMDV/mMuOZFx1MDAxNFP9lGLyK+/DZmj650SeR0HOVoVtuppcdTAwMDDkXHUwMDE5mFx1MDAxYfX0IL7vXHUwMDAwVfRcdTAwMWPdXGJrcXLXg4dcdTAwMGX6X3Vmulx1MDAxYaVcdTAwMDFPfzlqnfKnRb/f/Sn+lV+yduRcdTAwMGb7V9uel68mcdVcdTAwMTNmOYkqvUxK41KYdE+njWZ2tsTDXHT57Vpb5f6v1WjF1bhcdTAwMWUmh49cZm0qVlNxqFxmXHUwMDFjXHUwMDBikdMwfvJRXHUwMDFklsT2znFsWnt2o11cdTAwMGJ33ea7rV+C1Up4SrNzXCKle4NlNq1cdTAwMDEosFx1MDAxNkmwi2NcdTAwMTU2P1ZcdTAwMGZLNlx1MDAwZbKa1Vx1MDAxY0p2o5l5mSepL0vr7urg8qDkbPJ2O6xcXGxdfjibXHUwMDE5qVnTimzZflxuqWFxSVxyU5JajojehHLkI5qxSZ2YKt6n+9H1p9219fhzJV7Zw5tfgNQqQMGKmONcdTAwMTFcdTAwMTamprekhopcdTAwMDJhQLP168R4pm9gs/TUQ2K2IZ6anOPh2GdcInWj9CVsnVTfXHUwMDFlxXs7d+5g/8Jd7u/OjtSan/1cXFLj4pJcdTAwMWFcdTAwMWYh9fdcdFx1MDAxZsJqsLk0Wb+vJiU5XG5cdTAwMTg/aThaqy0qq1lWM29cdTAwMWRcdTAwMWFAzf6YSd6rwDWfVtrn45RcdTAwMDUgnJ9cdTAwMDJcdTAwMDewgVWGPOJRO8rlKLPUXGZcdTAwMDRoXHUwMDA1x2eWQ3Difznp8KNkzr5cdTAwMWOJ9CS0XHUwMDFmXGZ68eHIiKB3XHUwMDE0X0lLmspcdLfTsJWuxfVyXFyv9lx1MDAwZeyhJWRrjGCvw/DSlVx1MDAxZuWKXGKUlZJNtjI8JG0zseVnJmzyNTqwqKzzVXOSzFxioVx1MDAwNr480+3xQX1U5eZXiCvq6HiXPtRcdTAwMGWqq9VwtWBQXHUwMDA2wPB/1pLjNVdcdTAwMDNjXHUwMDAyXG5cYqWUwvjAz6EzXHUwMDAzY0rCdrreqNXilOd+r1x1MDAxMdfT/jnuTOaqJ/95XHUwMDE0XHUwMDBlmFx1MDAxNv5O+XP9VqLp37HX7GfPljJcdTAwMWF1/ug+/+vl0KuLsf39bD+qs/d7kf89uYFcdTAwMTNS9Fx1MDAxZv5h4CRcdTAwMThfUp+guDxauC6uhbNcdTAwMDFLe9ZcdTAwMDO+PFwiOf7qXHUwMDE1LiBcdTAwMDOn0WhpNIl8d8LMXHJcdTAwMWPKwFdg0DphhVOZQ8/6IJitvCp8gXS+ijOsJUghaWEmalx0mrl94zHgJL08k9q30WFvzpSIXHUwMDAwhFx1MDAwNuGs9Wl9XHUwMDBlrVx1MDAxNeSu+m5LePk77S+KULMxXHUwMDE5/OpjWbeTnd23qzWx6u7bZ7T1+vBetdebw4eEmlx1MDAxOExaW7Ik+HPNwJBAXHUwMDA0JFx1MDAxNS8w+1XprFx1MDAwNPdrm7dcImT7x8ogqGdm3vKxwEDzXGbrXHUwMDE29M1EY9u30Vx1MDAxYX5x7Vx1MDAxYrJEQ1x1MDAwNGRWSqFtb1x1MDAwZVx1MDAxNTXbN+NcdTAwMWJalCAgkvOLzNin+5KEVk5LadlMXHLpoFx1MDAwMVx1MDAxNVx1MDAwMFx1MDAwM1x1MDAwNSQrXHUwMDEydJZoiIWz1lxuMmaSTq+ZW7ipI64xLdzoXHUwMDFjQI85YelGzCpjkWWEM4NcdTAwMDbO16TYhnhcdTAwMDPoW+zUYMVmLFx1MDAwYrd1e5rcrVSPcUW3PsLnzXfNK7k3fEhsctF6YUasZyzpIUNcIoau0lxuoNP++ovbt0Jg+8fKIKYnNHCFWSco7lxyRI7IWDVOXHUwMDEyoI7U51x1MDAxM5m3wu7Actg+j2bZyc3YXHUwMDE2qHjWmY/ev/dFp8h+lGkhnWKZl/dcdTAwMDYzzzrl2oeyrFM21q7xXHUwMDEyXGZcdTAwMDRHM+yu6mJptkXQl6Ped751J2JdlKVTp8tmge452s1mZaWGXHUwMDFm2ayDtFx1MDAxNTd//087qvopfbnUfVx1MDAxMlx1MDAwNMFfXHUwMDA1SS3d8y7zTmo9MsKRpmNkP4fLtSn221x1MDAwZtZGPvKewH7EryVtv0nCS6rJXHUwMDBioq9cdTAwMWI3t7VcInm0IP1cdTAwMWMrXCKQaIT1qlx1MDAxM1xmWtvfXHUwMDE3XHUwMDA3Tlx1MDAwN1xuXHUwMDA0XHUwMDBiVO8/zdOa4Ofdz+FNvlx1MDAwNtLuacroiVxyXHUwMDFk8yxfkW9cdTAwMDM3z9PsxIFjYfLXi+lOz8H4RZ1K+0vdnF9cXH84PLtf+1irt+tuM1l4dqBwznI4L1x1MDAxOXhGqL6aXHUwMDBlSfa+TivB/6N4Ws/onLnB4ouv6Nm18Vx1MDAxM7gxzypcdTAwMTD5lqBcXNpnTk1JJFx1MDAwYiud2vq9RGqCRurRSZNcdTAwMDWVnDogjUL4rVNWXHSw/d1cdTAwMGJcIjDo87iW8WjNXHUwMDFjXHUwMDBinWNKTuLoz29cdTAwMTN6XHUwMDE2xTlX62+F31fzjzKciTIs7k8q7jpcdTAwMTSKpFx1MDAxNdaNnzNcdTAwMWKdNFhQhqtcdTAwMDBcdTAwMTUq0dnAxXymfrdnXHUwMDAyXHJW++SF1ajnV1x1MDAxMVx1MDAxOJPhljQoXprniSnn6sNcdTAwMThcXEr/XHUwMDEz+82X4a44Ka6N76PNV8dcdTAwMWYjOJhcdTAwMWS92fq0cXK11npT3r9d/bJn381U146i9zBh+yi9/T5O5dCXu5Umlvn9/Fx1MDAwZVgtXHUwMDEyKVx1MDAwZfeU0UZcdTAwMTdcdTAwMGLbMbb/j1x1MDAxMLaghm0hXHUwMDFk7FRija2cmSysW9Rd/lJcdTAwMTgzVWVwqk6l90yypdW9raXjTl/QXCJ0KPVcdTAwMGZpJINcdTAwMGIrW7r4XHUwMDBlXHUwMDA2KKRcdTAwMDSfa1x1MDAxZb+LePSSz3lX+FRcdTAwMTT2XHJcdTAwMTOGY0Gyxlx1MDAxN4Ogd1x1MDAxYlx1MDAwZVx1MDAwN4zOXHUwMDE3iDhe1Fx1MDAxMmGEh35cdTAwMWGBpVx1MDAwYoS0vqeRQ1x1MDAwMVx1MDAxNlx1MDAwNEPobGWgrZagJZtcdTAwMTOgXFz+6MF3I1x1MDAwN21mlvtcdTAwMDVGsk/lXHUwMDBiXHUwMDAys69ajXZcdTAwMDZLPUVwYVx00Vx1MDAxOFx1MDAxMKT81FHuqodcIjhcdTAwMDbGMZitXHUwMDAzniRp7WCPz1h1q9H7zHpcdTAwMDYloNM6gdJcdTAwMDdcdTAwMWHo01x1MDAxZYOjooC1oUFeclx1MDAwNpiU4tcuXVx1MDAxNULYP/rBm73Zi/zv6dJrVHxjXHUwMDBi35BmnZ5AhVT3bk72t1blUUlhfFgtl0qfP5ZnqkImtGDqUVx1MDAwYlx1MDAxNiAozfAxvu8kn9TsaFx1MDAxMCNcdTAwMDLpXHUwMDA0XHUwMDBiXHUwMDE0R8hRRv+wZpZbU96OknWK/OpcdTAwMDNcZuudfjS5ZslqY1xyPq2ncpFza7xcdTAwMDIzvOFLkTBXuW6HPkpcdTAwMTAvgGOvP75T39i5rq2vJPK02Tyrne5v7X51Z5s/OfKWj0rzwJBjny4sXHUwMDE4Ry5/XHUwMDAzle+0kFx1MDAwMet2sEjOXGIj5rjfb9x6rtTkd8o9z81cYizHXHUwMDAyk2w7/Sc6ntY7gSws/liw3v+Pn1x1MDAwM/uyefYubFx1MDAxZdy//Xik11x1MDAwZeMvd9vVm2e7XHUwMDFiw1TOybeFS/Y9yMFcdTAwMDSgXHUwMDEykEv6d7BcInRgWFx1MDAxM1xinlx1MDAwN806ySx0XVx1MDAxNFhnWpA0/43uI6sz/j4z8/YgUlx1MDAxNXpcdTAwMTDQYNCx3lx1MDAxON+FvK9cdTAwMWbbo1J8vH5v65XD083W12azseguhFx1MDAwMoaLUuyzfVecXHUwMDEzvVx1MDAxYlZcYjj08Dd11PyDr/rpXHUwMDBlRFx1MDAxOVL+plGz24Y20oFImKhE+I9cdTAwMDOZ2oFcdTAwMTTfY1x1MDAxNaThZfftx2MzcVVUrrd0RUNyrfZKXHUwMDFm4q9n9rqojPIsLuRRXHUwMDFh+lx1MDAxNFxmXGJGtkO/P6xv31x1MDAxOElcdTAwMGWjjXaC40q0+Z7kXHUwMDA19Fx1MDAxZlx1MDAxY4uSr3z9XFz34UvN83dcdTAwMWaFXHJhKCx6XHUwMDFkYMbXPXftjav7hjsyNqkmZXO6oe7fvVl098FoIHKotZ9vwVx1MDAxZaJcdTAwMWa4Olx1MDAxMP5mR75Q5XdcdTAwMGL99Po+XG7lt1SoXHUwMDE5llx1MDAwN0Z6XHUwMDEwjrqeelOQ/ztcdTAwMGby4iG5sFx1MDAxYzabXHUwMDA3Kc9o10LwWsXlh2nJPmf5Oo5u1obdWa/z8O/aobbnUNQxN99efPsvXHUwMDFht7uQIn0= widget.render_line(y=0)widget.render_line(y=1)widget.render_line(y=2)Strip([segment, segment, ...])Strip([segment, segment, ...])Strip([segment, segment, ...])Line API WidgetStrip([segment, segment, ...])Strip([segment, segment, ...])Strip([segment, segment, ...]) <p>Let's look at an example before we go in to the details. The following Textual app implements a widget with the line API that renders a checkerboard pattern. This might form the basis of a chess / checkers game. Here's the code:</p> checker01.pyOutput checker01.py<pre><code>from rich.segment import Segment\nfrom rich.style import Style\n\nfrom textual.app import App, ComposeResult\nfrom textual.strip import Strip\nfrom textual.widget import Widget\n\n\nclass CheckerBoard(Widget):\n    \"\"\"Render an 8x8 checkerboard.\"\"\"\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        row_index = y // 4  # A checkerboard square consists of 4 rows\n\n        if row_index &gt;= 8:  # Generate blank lines when we reach the end\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2  # Used to alternate the starting square on each row\n\n        white = Style.parse(\"on white\")  # Get a style object for a white background\n        black = Style.parse(\"on black\")  # Get a style object for a black background\n\n        # Generate a list of segments with alternating black and white space characters\n        segments = [\n            Segment(\" \" * 8, black if (column + is_odd) % 2 else white)\n            for column in range(8)\n        ]\n        strip = Strip(segments, 8 * 8)\n        return strip\n\n\nclass BoardApp(App):\n    \"\"\"A simple app to show our widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard()\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp </p> <p>The <code>render_line</code> method above calculates a <code>Strip</code> for every row of characters in the widget. Each strip contains alternating black and white space characters which form the squares in the checkerboard.</p> <p>You may have noticed that the checkerboard widget makes use of some objects we haven't covered before. Let's explore those.</p>"},{"location":"guide/widgets/#segment-and-style","title":"Segment and Style","text":"<p>A Segment is a class borrowed from the Rich project. It is small object (actually a named tuple) which bundles a string to be displayed and a Style which tells Textual how the text should look (color, bold, italic etc).</p> <p>Let's look at a simple segment which would produce the text \"Hello, World!\" in bold.</p> <pre><code>greeting = Segment(\"Hello, World!\", Style(bold=True))\n</code></pre> <p>This would create the following object:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1aW1PbRlx1MDAxOH3nVzDuSztcdTAwMTM2e790ptOhJFx1MDAxNEIuUEJoaTuMsNa2gixcdTAwMTlJ5pJO/nu/XHUwMDE1RpIl7CBjUqd+XHUwMDAwe3el/Xb3nPNdpH/W1tc72c3Idn5cXO/Y665cdTAwMTdcdTAwMDZ+4l11nrn2S5ukQVx1MDAxY0FcdTAwMTfNf6fxOOnmI1x1MDAwN1k2Sn98/nzoJec2XHUwMDFihV7XossgXHUwMDFke2Gajf0gRt14+DzI7DD92f1961xy7U+jeOhnXHQqJ9mwfpDFye1cXDa0Q1x1MDAxYmUp3P1P+L2+/k/+t2JdYruZXHUwMDE39UObX5B3lVx1MDAwNirJ661v4yg3lkhFhGRcdTAwMWHLYkSQvoD5MutDd1x1MDAwZmy2ZY9r6vAjuvlhK+7ffPQvtlx1MDAwZcJNSo7CP8ppe0FcdTAwMThcdTAwMWVmN+HtVnjdwTipXHUwMDE4lWZJfG6PXHUwMDAzP1x1MDAxYrjZa+3Fdb6XXHUwMDBlwICiO4nH/UFkU7dcdTAwMDO4aI1HXjfIbtyNcNl6u1xy1XHX7pBcZkZSca41Zsatueh11zNKXHUwMDExx0ZLyZRcdTAwMTCMypphW3FcYmdcdTAwMDGGfYfzT2nZmdc974N5kV+MyVx1MDAxMi9KR15cdTAwMDInVo67miyZXHUwMDBiiqQglCqMXHKunszAXHUwMDA2/UHmjosgho1SynDMsJCiNMbmp0JcZnN2XHUwMDEyo4tcdTAwMWVnwmjXz1x1MDAxMfJ3ddtcIn+ybXeQKUHDJi2fy8W48S/rYKtcdTAwMDKugoN3e0dXxmNDtn/iXHUwMDFk7uyeblx1MDAxZqTvVLHgKXR6SVx1MDAxMl91ip7Pk2+loeOR791cIlx1MDAwZVx1MDAwMCk4XHUwMDExWlFDTdFcdTAwMWZcdTAwMDbROXRG4zAs2+LueVx00rXKStqxg1a2scZcdTAwMGVcdTAwMDBcdTAwMGLRilx1MDAxOf5gclxcnrw7vd5S9rV93dvjsYjt/lx0WYxcdTAwMWN0XHUwMDE2OdJcdTAwMTgk4n5ukFx1MDAwNblhkFwiXFxzXHUwMDAw1TQtXHUwMDE4QVhSMZNcclpSa7qLs4FiiaQhXHUwMDFjJuHGfVSTXHUwMDBlgiFtpm2744HEmlxuzivn80Q8mIdUXHUwMDAxu8SWhdTMXmf3gnQmRlx1MDAwNTVcZnSLPlxcwI9Aen57b7btx4R9XHUwMDE0Nt7ZXHUwMDBlg8GSXHUwMDA1fOlcdTAwMThlRFwirakmtFx1MDAwNlH+dFpNKtJbwJHyOlxmXHKmXHUwMDA0XHUwMDBiptqgcFxuXHUwMDFmrWT3evx7cPkq+nBp9/ax2Lu+Or5cdTAwMWPsLUl2OWfaXHUwMDE40lx1MDAwMswlauIoO1xmPtmc1FOt294wXGLzoyqac5SDgX91dmxcdTAwMTjGz9aP4yT0/+pUjyq1MHvtdu66zTDoO0Z0QtubpkpcdTAwMTZA8FR0Z/Go7O2CXHUwMDFkXHUwMDFl3C7Z9evriZOgXHUwMDFmRF74fpZNi3tcdTAwMTbGVL31jrWGXHUwMDEwIK3hXHUwMDBmZ+3u3ubbbSrVxYuD991cdTAwMWXTn3x/J5jB2lx1MDAxYfv+K79cIihGVIBCmqZjwVxiT7XWucsk73XVIzxcdTAwMGJhSNx5ldaeRTpBxZqV6/m/XHUwMDA1WMYwgkvFelwit0VmM4AoyjGRpEVwdfM2ftU/O9u/XHUwMDEx4uJ0g1x1MDAxZI9e71x1MDAxZmyuuuNcdTAwMTJMI6yVXHUwMDEyhlPnKNg0XHUwMDExuECSc8HInCjr0X5Mmyb4m35MSaG5Ulx1MDAxNU16Sj/2q/fJo3tcdTAwMDO6uSuOduTxsWTnLy+Wlj5cdTAwMTjNOG2B7sf5sVx1MDAxYz3fn8Wh/9P7ZGx/WFx1MDAwNT/WsGmxuLNidZ3AnEHKXHUwMDAwaWhcdTAwMTmafonAL0/UwcvRfnK+8bt9dbQpe1x1MDAxYofh6apcdTAwMTOYUYYoJNzwMVxuXHUwMDEy93K57nouOVx1MDAwMvpSXHUwMDE3PHHYjbp3XVwii+k9Low2XFyXkka6QK6N61rNaFRcdTAwMTBcdTAwMTBF9lQsJlNsdFx1MDAwNvZcdTAwMTNrsyDqo2kyVChcXIH616DwtEGL8Vx1MDAxN8/kL/gjXHR7rMpcdTAwMDFfou9V/8Ppm1x1MDAxNyPpXHUwMDFmvtl68UZEoThcdTAwMWOfrDp9hYJA0HBiZO6AWZ2+XG5RIDV0XHUwMDAwezWresVl87dCyTn8hWReSY1L2H+zTphcdTAwMTCBK1x1MDAxOfRXo2+aY2mV+Htr0VxcXHUwMDAy327vfUlkpVxmWvfAWlx1MDAwYlx1MDAwMVx1MDAxOU5cdTAwMGJcdTAwMGY8X69XlMJMXHUwMDBiJFx1MDAwNGR04Fx1MDAwZaRcdTAwMDF/PFx1MDAxZENzSZCmmFNtnthcdTAwMDVcdTAwMWKkQElcXKFEaqOwvqc8pDRSICXmLlx1MDAxY6hcdTAwMThzV7yXcFx1MDAwM6ZcdTAwMWVXu6eTlsVqlos71jTzkuyXIPJcdTAwMDHW04ZNnlHtPiDQy7ncXHUwMDFkOys3MMJcXFx1MDAxMVc9g3CSUWp4+WjG7Y03cqtFkuWlv8aqbeR/2Zr5XHUwMDA1z4o1YFxmwVx1MDAwNsPeMEyoNIRy1TCGMMjn8pJGw5rQS7OteDhcZjLY7v04iLL6tub7t+m4PrBeQ0BgNdW+uiiM3Fx1MDAxZKc1vfy2XpIm/1F8//vZvaNnYtl9Nlx1MDAxYTAub7dW/d9azqiaWclcdTAwMDYh4EJcYqVcdTAwMWUuZ/P914rKmWRcdTAwMWNcdTAwMTmqMVMu6IDMoaFmsFx1MDAwNdJhzEUkrGbX8tRcZuJcIsyNUkZcdTAwMGLIb4SsJP6lnCmEXHUwMDFkXHUwMDE1INOrXHUwMDE5M1EzJjXRXHUwMDFjyzZFg2XL2eLZ/lx1MDAwM+VsfuBblzNcdTAwMDaUYiBoXHUwMDEwVzqK8cq4W1x1MDAwNVx1MDAxMYgzdr+CPEjP5tfBpvWMXG7KNVx1MDAwMVx1MDAwNitOsKaGNawhXHUwMDAykVx1MDAxOer6LenZxmw45911JLdcdTAwMTS0WVx0lmGi3lokWFxmpuK0zZO5M9zt9a8hXHUwMDFhXHUwMDFkXHUwMDFmXnw8+qN38mv8epFcdTAwMWH/XCJitth7XHUwMDE1Tq5cdTAwMDTPdUxgXHUwMDAzwVlZpHA3oJQh8KJGXHUwMDEy6TA/O7tcdTAwMDLn7/H5YvZdr9drqph6UFWEQOKHtWStdGrxvOqJS/dSV6pQXyuvWqWMasFcXIpSQurNRfRcdTAwMDFbXHUwMDBiQCUtkqn5p7ySj+S4XHUwMDExiCqmlVCUS1x1MDAxMMKSkTldhUBaQSxuXHUwMDA0eHZiKq/GLI2wXHUwMDEwP3NcZiqtJOdcdTAwMWFCoEq4Vz6ZI65mg4VDPDZcdTAwMTJX9GzygFx1MDAwZbSVske+XHUwMDAw9aioQ2JcdTAwMTeutnlFqW3UMd9cdTAwMWJMuXnKMVx1MDAwM99GKTbCbUwz5lBIuUhAaYWpXHUwMDE0RuNcdTAwMDVjj/lv/9ViXHUwMDBmLMDlau5cdTAwMWVwSaFpwyhcdTAwMDKBMNPgrImGMFx1MDAxMoY0n5h+SyHIbGS7T1x1MDAwM9OzXCKQtclcdTAwMDRcdTAwMWRvNDrMXHUwMDAwdMVxXHUwMDAwylx1MDAwM39cIuDlKjuXgb365X76OVx1MDAwNq5N9tNcdJLNmfB57fO/MTl+mCJ9 \"Hello, World\"Style(bold=True)greeting.textgreeting.stylegreeting <p>Both Rich and Textual work with segments to generate content. A Textual app is the result of combining hundreds, or perhaps thousands, of segments,</p>"},{"location":"guide/widgets/#strips","title":"Strips","text":"<p>A Strip is a container for a number of segments covering a single line (or row) in the Widget. A Strip will contain at least one segment, but often many more.</p> <p>A <code>Strip</code> is constructed from a list of <code>Segment</code> objects. Here's now you might construct a strip that displays the text \"Hello, World!\", but with the second word in bold:</p> <pre><code>segments = [\n    Segment(\"Hello, \"),\n    Segment(\"World\", Style(bold=True)),\n    Segment(\"!\")\n]\nstrip = Strip(segments)\n</code></pre> <p>The first and third <code>Segment</code> omit a style, which results in the widget's default style being used. The second segment has a style object which applies bold to the text \"World\". If this were part of a widget it would produce the text: <code>Hello, World!</code></p> <p>The <code>Strip</code> constructor has an optional second parameter, which should be the cell length of the strip. The strip above has a length of 13, so we could have constructed it like this:</p> <pre><code>strip = Strip(segments, 13)\n</code></pre> <p>Note that the cell length parameter is not the total number of characters in the string. It is the number of terminal \"cells\". Some characters (such as Asian language characters and certain emoji) take up the space of two Western alphabet characters. If you don't know in advance the number of cells your segments will occupy, it is best to omit the length parameter so that Textual calculates it automatically.</p>"},{"location":"guide/widgets/#component-classes","title":"Component classes","text":"<p>When applying styles to widgets we can use CSS to select the child widgets. Widgets rendered with the line API don't have children per-se, but we can still use CSS to apply styles to parts of our widget by defining component classes. Component classes are associated with a widget by defining a <code>COMPONENT_CLASSES</code> class variable which should be a <code>set</code> of strings containing CSS class names.</p> <p>In the checkerboard example above we hard-coded the color of the squares to \"white\" and \"black\". But what if we want to create a checkerboard with different colors? We can do this by defining two component classes, one for the \"white\" squares and one for the \"dark\" squares. This will allow us to change the colors with CSS.</p> <p>The following example replaces our hard-coded colors with component classes.</p> checker02.pyOutput checker02.py<pre><code>from rich.segment import Segment\n\nfrom textual.app import App, ComposeResult\nfrom textual.strip import Strip\nfrom textual.widget import Widget\n\n\nclass CheckerBoard(Widget):\n    \"\"\"Render an 8x8 checkerboard.\"\"\"\n\n    COMPONENT_CLASSES = {\n        \"checkerboard--white-square\",\n        \"checkerboard--black-square\",\n    }\n\n    DEFAULT_CSS = \"\"\"\n    CheckerBoard .checkerboard--white-square {\n        background: #A5BAC9;\n    }\n    CheckerBoard .checkerboard--black-square {\n        background: #004578;\n    }\n    \"\"\"\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        row_index = y // 4  # four lines per row\n\n        if row_index &gt;= 8:\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2\n\n        white = self.get_component_rich_style(\"checkerboard--white-square\")\n        black = self.get_component_rich_style(\"checkerboard--black-square\")\n\n        segments = [\n            Segment(\" \" * 8, black if (column + is_odd) % 2 else white)\n            for column in range(8)\n        ]\n        strip = Strip(segments, 8 * 8)\n        return strip\n\n\nclass BoardApp(App):\n    \"\"\"A simple app to show our widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard()\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp </p> <p>The <code>COMPONENT_CLASSES</code> class variable above adds two class names: <code>checkerboard--white-square</code> and <code>checkerboard--black-square</code>. These are set in the <code>DEFAULT_CSS</code> but can modified in the app's <code>CSS</code> class variable or external CSS.</p> <p>Tip</p> <p>Component classes typically begin with the name of the widget followed by two hyphens. This is a convention to avoid potential name clashes.</p> <p>The <code>render_line</code> method calls get_component_rich_style to get <code>Style</code> objects from the CSS, which we apply to the segments to create a more colorful looking checkerboard.</p>"},{"location":"guide/widgets/#scrolling","title":"Scrolling","text":"<p>A Line API widget can be made to scroll by extending the ScrollView class (rather than <code>Widget</code>). The <code>ScrollView</code> class will do most of the work, but we will need to manage the following details:</p> <ol> <li>The <code>ScrollView</code> class requires a virtual size, which is the size of the scrollable content and should be set via the <code>virtual_size</code> property. If this is larger than the widget then Textual will add scrollbars.</li> <li>We need to update the <code>render_line</code> method to generate strips for the visible area of the widget, taking into account the current position of the scrollbars.</li> </ol> <p>Let's add scrolling to our checkerboard example. A standard 8 x 8 board isn't sufficient to demonstrate scrolling so we will make the size of the board configurable and set it to 100 x 100, for a total of 10,000 squares.</p> checker03.pyOutput checker03.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.geometry import Size\nfrom textual.strip import Strip\nfrom textual.scroll_view import ScrollView\n\nfrom rich.segment import Segment\n\n\nclass CheckerBoard(ScrollView):\n    COMPONENT_CLASSES = {\n        \"checkerboard--white-square\",\n        \"checkerboard--black-square\",\n    }\n\n    DEFAULT_CSS = \"\"\"\n    CheckerBoard .checkerboard--white-square {\n        background: #A5BAC9;\n    }\n    CheckerBoard .checkerboard--black-square {\n        background: #004578;\n    }\n    \"\"\"\n\n    def __init__(self, board_size: int) -&gt; None:\n        super().__init__()\n        self.board_size = board_size\n        # Each square is 4 rows and 8 columns\n        self.virtual_size = Size(board_size * 8, board_size * 4)\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        scroll_x, scroll_y = self.scroll_offset  # The current scroll position\n        y += scroll_y  # The line at the top of the widget is now `scroll_y`, not zero!\n        row_index = y // 4  # four lines per row\n\n        white = self.get_component_rich_style(\"checkerboard--white-square\")\n        black = self.get_component_rich_style(\"checkerboard--black-square\")\n\n        if row_index &gt;= self.board_size:\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2\n\n        segments = [\n            Segment(\" \" * 8, black if (column + is_odd) % 2 else white)\n            for column in range(self.board_size)\n        ]\n        strip = Strip(segments, self.board_size * 8)\n        # Crop the strip so that is covers the visible area\n        strip = strip.crop(scroll_x, scroll_x + self.size.width)\n        return strip\n\n\nclass BoardApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard(100)\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp \u2585\u2585 \u258b </p> <p>The virtual size is set in the constructor to match the total size of the board, which will enable scrollbars (unless you have your terminal zoomed out very far). You can update the <code>virtual_size</code> attribute dynamically as required, but our checkerboard isn't going to change size so we only need to set it once.</p> <p>The <code>render_line</code> method gets the scroll offset which is an Offset containing the current position of the scrollbars. We add <code>scroll_offset.y</code> to the <code>y</code> argument because <code>y</code> is relative to the top of the widget, and we need a Y coordinate relative to the scrollable content.</p> <p>We also need to compensate for the position of the horizontal scrollbar. This is done in the call to <code>strip.crop</code> which crops the strip to the visible area between <code>scroll_x</code> and <code>scroll_x + self.size.width</code>.</p> <p>Tip</p> <p>Strip objects are immutable, so methods will return a new Strip rather than modifying the original.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVdaXNcIkmS/d6/QlbzcZuccI97zMbWdKFcdTAwMTPd6GB3TMYpkFKAOCSktv7v645UXCI5XHUwMDEyoYvKYtVtqiqSI4h87v6eh4fHX38sLf3oPDbLP/619KPcK+bDWqmVf/jxJz9+X261a406XcL+v9uNbqvYf2a102m2//XPf97mWzflTjPMXHUwMDE3y8F9rd3Nh+1Ot1RrXHUwMDA0xcbtP2ud8m37v/n3Xv62/O9m47bUaVx1MDAwNYNcdTAwMGZJlUu1TqP1/FnlsHxbrnfa9O7/Q/9eWvqr/zsyula52MnXr8Jy/1x1MDAwNf1Lg1x1MDAwMVx1MDAxYWVHXHUwMDFm3WvU+4NcdTAwMDVcdTAwMTRotdBavj6j1l6jz+uUS3S5QmMuXHUwMDBmrvBDP453K1AvX/dcdTAwMGWLK6nWib/e1M3LjcHHVmpheNx5XGafp1wiX6x2W5FBtTutxk35rFbqVPnTR1x1MDAxZX99XbtBszB4VavRvarWy+320GtcdTAwMWHNfLHWeaTHpHh98HlcdTAwMTL+tTR4pEf/SjlcZjRcdTAwMDJ4kFx1MDAwZZXE14v8auVcXKC0tVJIROE1yJFhrTZCulx1MDAxMzSsf4j+z2BghXzx5opGVy9ccp6D6FxuZTN4zsPLlzUmXHUwMDEwylqtUGlnhFevz6iWa1fVXHUwMDBlPcVi4KQ2wlx1MDAxOIHCOTdcdTAwMThnu9y/XHUwMDFmXGJSKbruXHUwMDA3N5Q/vrlV6mPjP9FcdTAwMTmrl15mrN5ccsPBiPnCelx1MDAwNE+D13SbpfzzbVx1MDAwN2O1Rk9DoLl5vVx1MDAxZdbqN6NvXHUwMDE3Noo3XHUwMDAzpPRcdTAwMWb9+89cdTAwMGZAlO5KXHUwMDFjRK1cdTAwMDaNXHUwMDAy3OxcYl3LVm6ue8t7d1x1MDAxOXl2eFxcObnPZdeWXHUwMDEzjlBtXHUwMDAy0MpcdTAwMWGp0ErrnDfjXHUwMDE4ldJrXHRcdTAwMDRTacEkXHUwMDE2ozR85b0wesEgaoWLgyhISSZcdORDZsZo+WRzm1x1MDAwNl8olNTRQWbL7excdTAwMWPcqIRjNFx1MDAwNTJcdTAwMTDgnfZgwVx1MDAxOedgXHUwMDE4pNrIQFx1MDAxOSfoXHUwMDEyoFOj40pcdTAwMGVEQUvp6D9YOIjqOIhaa5SQxsLMXGI93y/s7VxcaFdoXHUwMDFjXHUwMDFj3ubP7zeJ37R/LUJBvOlGVWC1oWl3XHUwMDA2vFFgh1x1MDAwMGqkXHUwMDBmiFx1MDAwM3hPXHUwMDFlSmilMbFcYkWwVtFQXHUwMDE3XHUwMDBloVx1MDAxMEtFUSjiNqD97IH+NpXLy3RxOXucq96U16pcdTAwMDfrXHUwMDFiISTdiTpcYoiFKidccjqg71xmw1x1MDAxMFVcIiBcdTAwMGaqtFx1MDAwMkVE1erEQlx1MDAxNCyRXHUwMDE0TTFg0bio9bFcXFx1MDAxNFx1MDAxY01cdTAwMTdFNz27XHUwMDFi9TZvdNi4vu5cdTAwMTazcFx1MDAxOXZLjX27l3CMXHUwMDAy6sBcdTAwMWKhKcxcdTAwMTNcdTAwMDR8RFx1MDAxMD2HeU1cXNRcYutQ9mNKciHafy25lPm5UT9cdTAwMWa5JHxcdTAwMWNEtfDOXHUwMDAy+plcdTAwMDHaetquLtv1PVxym5uynFp7Slx1MDAxZlRPk1x1MDAxZefpzlKgJ1x1MDAwNmdR05/aXHJLesJtgI6UvDGoPGKSqahw4KxcdTAwMTBcdTAwMGJcdTAwMDdRXHUwMDE5n3RykmKbfIdcdTAwMTNdllx1MDAwNd+53Xpyjerm8Xr2XGbyp/WkK/pcdTAwMTRgIDmvRLLeoSBHaUYwqomMXG5E68lFXHUwMDE5n9ysXHUwMDEzgDWk6oWaX6SfXHUwMDBmRq0wcVx1MDAxOPXgPOiogHhcdTAwMGKjK141fKdzs1Jo3+CtKUH7ot5MOEbBXHUwMDEzXHUwMDA2lVx1MDAwNVx1MDAwMUpcdTAwMDLFe1x1MDAxY470ylx1MDAxOYKGoD+EQYr3oJKLUUnwcdZEXHUwMDAy42JglD4pXHUwMDBlo8zMlNJmdozuhL3qWlXmMlx1MDAxZFFcdTAwMGXXzcNj2OydJFx1MDAxY6NSyoCYptBcdTAwMTTKhTM4mrwniFxuY+mOWCFRJDgxSjZGMUBoOb/M6JzcqME4iFwiKE30Rjo9M0b1zXpYKFXu08f3WpRy5+FlfT1MOEbRqEA68j9cdTAwMWWU0TKShntcdTAwMTZMXHUwMDEwOMKuQk5MYYKdKPlcdTAwMTJA4qNcdTAwMGKHUFx1MDAxZJu7d2hQ0q2ZPeu0eqMuOnBdusruXHUwMDE1W6dcdTAwMGYtma3m80lcdTAwMTdM7EWV8kQzXHRcdTAwMDFcdTAwMDCRtYyfWSdA4ywvjoIzXHSGqJVcdTAwMTL418JBVMk4iKKj2dL+XHUwMDFkq0v6+mJze9dm95dVuYHb+6enzZxNOkTBm4Cw4STxXHUwMDFhXHUwMDAxUo5hXHUwMDE0XHUwMDAzLSjWkGJcImbuklx1MDAwYlGyMbpjOMdF+jlRUVx1MDAxZFx1MDAwYlFtke5cdTAwMWH42SU9bi7bo3C7lrtfbV5f7eNtRVxc51x1MDAxMlx1MDAxZeaVkIEha1x1MDAxNN4rXHUwMDBmVo2GeVwiXHUwMDAxSMhcdTAwMTDSeUy0oDfaWWW1XTQn6lxcbF6UvIvxRkaXSN+C6F7n8r6mbnqnzZW73HLnMXN8VF3/XHUwMDFkIGqEJS6qnZMjqXvOOVx1MDAxMVd1gqhcdTAwMDCr/eSKJS6FsVx1MDAxNtTCIVTGMlFcdTAwMDM0a1rI2X3oxe7DRqHaq4Rdd7ZV92erjfr+RdLDPNHMwFiHJJPAOI3KjkDUXHUwMDA2XHUwMDAyXHUwMDFk31x1MDAxOGe4jiixXHUwMDEwReEleVHQi5ZysjLWiyryoUJqNbtcdTAwMTNcci+ecvumqFx1MDAwZm/NQ72zv3N73To/TLhcdTAwMTNNOZJD9D3BSclcdJtcdTAwMTGEelx1MDAxMVgwSoNcdTAwMDaLTiVXLCktkWJeRFksXHUwMDA2QJ1cdTAwMTdxXHUwMDAwXHUwMDA1Vlx1MDAxMHTv9OxcYr16KKZPa21wl9nH7VpVmePc+i9Ois5Q6GRJXGZJ+qaEQZr3KD6eMVxugdJkrFZcdTAwMDOp/YiLSlx1MDAxYUbpXCLxXHUwMDE05Vx1MDAxNm3908ZjlL+wgWhZxZvVou2KKp6c7Oid5mrT5DLd6nphM+lOXHUwMDE0REA6wztcdTAwMDOoud4uUpPAb+BcYj2kokjqk2Am8CS3jMRcdTAwMTlnhV84JlxusVFcdTAwMWWFXHUwMDE2Xoj3rCx5XHUwMDExVjvdwoYt75ZqXCJzXuymdlx1MDAxYlx0Ryj5UGk8ek1cXFR7gcNy3itcdTAwMTF4hSRDXHUwMDE0XG6Z4Fx1MDAxMlx1MDAxMpLxxEXkwiXtnYivXHUwMDE1JXySdphcdTAwMWSehUZcdTAwMTWuWts7t08rXHUwMDA3t1f3ze398/VMwuGZsi6w1pIs1I6IJrnRXHUwMDExfMpAopTOoqbJwORWiqIgLi1cdTAwMTDEwvFQXHUwMDFiW2+PLJSMtbPT0OPMRerk5nxv67540d3aL4dcdTAwMGZcdTAwMGb791x0hyigXHJcdTAwMTR7SFCS5LBcdTAwMWGN8Fx1MDAwNGAgnU86RHlcdTAwMGLJLbe3aLVfQFx1MDAxN+ohNtukpLXo4Vx1MDAxZEp+fcs9XFyd7tQz9+XD7PLKSemyW096OpRcdTAwMDHKy1x1MDAxMp5cdTAwMWOQ5FxyIUNcdTAwMDAl7qlcdTAwMDMhNTlZrZXxNsGLSob/035cdTAwMDG1fHwps1x1MDAwNE9cIvZcdTAwMWRL8/dcdTAwMWJcdTAwMGad86Otq8xarry6fX2xXazmz1x1MDAxM1x1MDAwZdFcdTAwMTS5UMF1MsJpY6xcdTAwMWYpZSaM2sAp+lx1MDAxMUT0SEol14tcdTAwMDJdsDSChcuHmtgw7zQ4XHUwMDE33Y79pk7avYHbTmpzt3l3XHUwMDEwbuyk6j19eZD0ZFx1MDAxM3jL2+eFQCSkRpcwnnNNXHUwMDE4KND9XHJ3hGKdXFylXHUwMDA0QCYk1OIlRH188VxiOO2dXHUwMDE3XHUwMDA2Zlx1MDAwZvS5Wlx1MDAxNcqNVLpWz2RrOrO50fBcdTAwMGa/WMvPUuBkXHUwMDAyQqDXllx1MDAxM0p+dFWJMCqJXHIxepBcdTAwMTdtXHUwMDEyi1FjUJOkc4vmRJ2MdaIgOIXt5DtcbpzOT1x1MDAwZotccn9YujqrXHUwMDFkZU+0bj21Vs5cdTAwMTJcdTAwMWXo0fDKJil2pYiWXHUwMDEy3Vx1MDAxY07ZO7qsSMqT4JdcdTAwMWGT7EXRWuJcIkYvmlpyJjbhpFhcdTAwMWPCe7YsZc+3m1x1MDAxYrWtjaNMa2tXn3SOz07bSW+TI6VcdTAwMGVcdTAwMWNcYqKhxEhp1ofVkldcdTAwMTA4a/t1I+RpXHUwMDEznFx1MDAxMVx1MDAwNcnKwZk59iCZV1x1MDAwNV5spT2QNDBWKJw9zvuV8/rpffWyU8BcdTAwMTW3WXkqrJVcdTAwMWbuXHUwMDEyXHUwMDBlUfAuIDFvhffaaFx1MDAwMGlGMKpcdTAwMDKKn2iIqYJEmVxcQe/J0Kywi0dFMX7fp1x1MDAxMZr3jNvZNydcdTAwMWbs7dhuSp7ByeN1/cGmsVPYLCdcdTAwMWOiSlx1MDAxMDxIXHTT/UUhhVx1MDAxZNlcckJyMTCaVD1xVMNro8mFqDZcbr3Ri1bH7OPT9oCO63tRzVx1MDAwZdH1Qlhv3e1cdTAwMTfSXHUwMDBltleObjZuXHUwMDFl1sKjxEOUXHUwMDAzPVFRYclcdTAwMGaBXHUwMDE4dqL9tKi3gvyr8kbK5Fx1MDAxNo9cdTAwMDCS/Vxit4iCPt6LUtBcdTAwMTDc9WB2Lrpmd+5ztfW1p/AqbNbq4DauNm5cdTAwMTNcdTAwMGVR8p+BIMmOdPspkFx1MDAwYmdHMcqro16C1nR7olQvcSBVvDuVSfOCgVSa+I54zit05Edmz91X7/Nb6V1cdTAwMTf2Llxua2m7nXdHO+W4XHUwMDFhp1x1MDAxMbBcckN0tFx1MDAxZfP1VaV8u1p+XHUwMDA3Ru0sbUVZXHRpZTn1NJq6573JXHUwMDA2eEcl31x1MDAxOTDuUyVOnVa+3m7mW4SBcZxqrVx1MDAwMmOs05ZmXurIkskrTlx0oUG/o5TWRJ9hUs8xxWu5qL5cdTAwMGWnL1x1MDAxN1x1MDAwNsCK3O+Gvdjcv8Dl5ulx+7RSa/m6yVxmmndccqEw32o1XHUwMDFlfrxe+fvPae+bOd+9XHUwMDE2+TOzVz0uioNmoVx1MDAxM+7ordne9+VvybAucDZ+M4vgLXJcdTAwMTbf0c5v+bKS71xcXHUwMDFk7Fx1MDAxZjdSVVkopo+PN1RcXD5iqnmNrj99azM/bblcdTAwMTZNXHUwMDExTyalN8yjjXRcdTAwMDFcdTAwMDV+0CwriG/Hl2HTs/LqjVx1MDAwMFCpVMatSipHI1BI4ZY+30VcdTAwMTbTX62KXCJT4HkvXHUwMDAzyU2DUX3+umHVaMlcdTAwMWJWv45FT7Wq89LpKt5V7vaq+96Yxoo5yJz8juhcdTAwMTdcdTAwMTCf6rA0o85F6/LfQr8tbu7Ui4VO53Hn3pnlp9Ku6vaSvqShdSB5r1x1MDAwNVx1MDAxMoSUVsRyhlxyQEEgyd+DI1x1MDAwNjy0pTtpXGbIglRCLdy6MFxijMcoXHRJ40HNzn+2lrP3XHUwMDBm4U1W5S5219IrWbVij4pJhyh4XHUwMDE1oNFWcl9cdTAwMGIyWTWGUFx1MDAwMVx1MDAwNlx1MDAwNXlp3tGdZI7OXHUwMDA1XHUwMDE4Xi9cdTAwMWNH91x1MDAxMYowuqbRryrRZvZUhzvdyJz27uzmyurxzr06XHUwMDBm5ermL27DNsvCMFx1MDAwNqSYvSdcdTAwMDLurbejPYFcdTAwMTVcdTAwMDaSN1x1MDAxYzpP0TvJzVm80t5TXHUwMDE0WDg3qlxcrFx1MDAxYjVWSVx1MDAxMlc4e6TvPS7fhPlwfTt31MvlTn0h3HWtxPNcXCG04jVGr7mkeyTOXHUwMDEz0SWKS1x1MDAxNJIgqpz93I7YXHUwMDE4omtcdTAwMDOtaFx1MDAxMJKbwGk1QT7CM9tGYl7cKFx1MDAwNqL7dV52XHUwMDFiXG6Dyir4ukW3aURcdTAwMTex97jTbsPxg6rD9uPBtj+utWcjulPl429EoMthWGu2J9tcdTAwMTTxxjibQsKIXHUwMDA2Zdzs4nE1tfm0dbyXlb1cdTAwMDPZvs4101x1MDAwZvthXFxcdTAwMDJxqlHNz+1cdTAwMWKiXHUwMDFlfI5cdTAwMDa3XHUwMDFmXHUwMDEz0c6Fz05fXHUwMDEzMUHJus1+cot5Ja9R47hNsXS0xtHryb+p6IlcdTAwMWSvNuUoKqDtb9Hs96yXoyZcdTAwMDVcdTAwMWVcdTAwMTVyt/D5iMdP2FSSsK+mtPXkXHLsxsvZXHUwMDE3yVx1MDAxZkXtonq/bVx1MDAwMVx1MDAxZXZ6XHUwMDE1n013u+eYbOhbctVAmDFeSEUqeVQ2qn5iXVvlUVxu87l64kq+QN7ke9BvKfJcdTAwMTn9lfnIZMBTx+f1nOZ2rO9pUrPSOzg9Or9q1zOt+onRqdst7dLJxqc3XHUwMDAxeUyJwnpBXHUwMDE4XHUwMDFjQadcZlx1MDAxY0hcdTAwMDOWa+GI9Hxcbp2AXHUwMDA15ybw8a9AJyrlXHUwMDAwo0dcdTAwMDH8Nuh8K/NcdTAwMTa79qiNJOeJcnbJeLeVrm0yc7BcdTAwMTdP9e4y3jzI9C9u8zVcdTAwMDMhN4RBL/uiUWvrRurd+SwuuiOSdJxcIsKb3I3rXHUwMDAwaHjBZ+G6KHlcdTAwMTWfeFPsRH20XHUwMDEx9FtcdTAwMThN27ua9duVxure6nlnuXZb3ln7xZ27Z0trXHUwMDEwj9GOlCNnf4drNblHXHLvXHUwMDE1XCKhJrj1QoJrNWl00jrxO0b56aduxm9sXHUwMDAzT1x1MDAxOFx1MDAxNVx1MDAxNFneUU58mOnKXZu9W1x1MDAxM+srOzv32Vx1MDAxNYzd2fblYV58XGKh2lx1MDAwNki+UlxuirROR49cdTAwMTjtl8FpRVxi9U5JQb/d51LDxXJJlfLjXHUwMDAwlcR1pVx1MDAxNUSB0ViylkhkXHUwMDFiJDYwMF4765ltSHKYalx1MDAxNKLIXUeV/Uo3+nJholxuM2m9d5KRT1ukXdcvU3p143LvcDZcdTAwMTX257T33czVTHhSf+q08+Ji9XBv/ab31PgqdUdwILo+XHUwMDFm51x1MDAxZp/aIOZsXHUwMDE0yvdcdTAwMWPEuFJO5eHo2nWaZ49yZb1X2c2sJZ6gXHUwMDEwOVx0LFx1MDAxYc3HL1x07q0w3v1JXGLD59xcdTAwMTlF/jW5PfRcXL9kxSyc85+6Ic9xu1x1MDAwZfOOKuiLsL0s072101x1MDAwYpHN71x1MDAxYtvJp5dlsp0/qdxcdTAwMDClXHUwMDA04tDcjlSPIJS9v6BcdTAwMTBoiK55Jz/ZcFxcXHUwMDE1TbkyIVx0XHUwMDAx3lx1MDAwN9JbXHUwMDAwj9yHSkyo3yDvT+BFQzpUOOWjNVx1MDAwNT8hXG5cXH6iXHUwMDE27oCmaD/xXHUwMDExiEq2SVx1MDAxZF1cZn1cdTAwMTOhd729w4vl/HZnZ2VHnl2J1XVI/uI16lx1MDAwMKxcInhwP3mMXHUwMDFlY/HcidRcdTAwMDSSXHUwMDBiMFx1MDAxNOk8XHUwMDFmLeBJmlx1MDAxN1x1MDAwNU6kWLt4zSHIaOMwalx1MDAxNUU4mozZI31ntbZXrbWrdrmi0o3Udc2ellx1MDAwYknHKFx1MDAxYVx1MDAxOWiB5JpcZoAzY/2cTUBcdTAwMTSagihywjfBzXKl5lx1MDAxM7VcZs4tXHUwMDEzXHUwMDExab/4rdkygFg2yrkh3nw/O0Srayd+67GweplXXHUwMDA3T83zfPmweFx1MDAxOXcqeEJcdTAwMDK9dC6g6GmRmDc5Slx1MDAxY85DXHUwMDE4TVx1MDAxMVihUJI7zmvxPTJcdTAwMGZkoIhE8mJcdTAwMDFZgvGRj1x1MDAxOVx1MDAwNHqv+Cwzy1x1MDAwZV8hUZLxxTbB8mHo1d8p875Vjs3TXHUwMDAyplfBWURcdTAwMDPvqDG6gHSx2Mvu11x1MDAwZdPiuuuf0ie4XHUwMDFld1x1MDAxY2lC1jPYXHUwMDA0LHeC9rxcdTAwMWRFXHUwMDFhXHUwMDFjWXAjscY9KZSxRDC9/tySRizXhcCQtCBkU5RcdTAwMTAmmltcdTAwMWGsaSA3vFx1MDAxNMJb0d8zM8Z1uaU198iYz3Lz91pcdTAwMDBxh1xiw/2kXHUwMDA1dMq9zkTw2/hcXFx1MDAwNDvDfmO5mbF/WMrc7V9cdTAwMWTpjebVQ+8207kut+1jsrfAXHUwMDEw5lx1MDAwM97agqiJXHUwMDE1Kj16yKly/eI7XHUwMDE0ktgpfvKs6Im1S6gn8JHoyVx1MDAxNi+bWYWWnjuKzVx1MDAwNdrftbnlNH1oiqliPsy1ZK+3msvmunj8y4LGXHUwMDAwmY1657j21K8uckOPpvO3tfBxXGJdfVuiXHUwMDAx3tdanW4+vGzTXHUwMDBig5c7XHUwMDE3uf3tMlxyoP+Oeuily2Htik3vR1iuXGbbZKdGXHUwMDEz83q504is4Vx1MDAxNGkoeXq71lZp9Cs1WrWrWj1cdTAwMWaeTFx1MDAxOdZU3/A80Vx1MDAxM5yDjO9cdTAwMWLG68rkqmdcdTAwMTfY01x1MDAwMfVcdTAwMGLKXHUwMDFh3/RcZlrYgMNcdJLxK1x1MDAxN21o1H+51IHU5Fx1MDAxYVR/Z4P83Fx1MDAwMtXkosZAcDrfSevpfy0mXHUwMDE0NVwi14EpxedcdTAwMWIrjUpGT1x1MDAxNXshhY6rXHUwMDAwXFy0XHUwMDE3cZKES2TW8q3OSq1eqtWv6OLAdfwoP3/01lxmXHUwMDExpm+zxS6PMiVcdTAwMDLPRf2aj6ZWpP5cdTAwMDbHXFzwXHUwMDE05JvPtFuS6lx1MDAwM+2lN8R7lHt5xqtcdTAwMGb7Ua6X3lx1MDAxZdT0nZ/RQUFAZkM3RIO1Rlx1MDAxYTM+Jkk0qK+6pNbWXHUwMDFib8aGXHUwMDE05tud1cbtba1DU3/QqNU7o1Pcn8tltupqOT/mL+grRa+Nmn+T33E4Plxm/rY0sJH+P17//p8/Jz47XHUwMDE1i+H+1XH4XHUwMDBl3vCP6J/vdl3g4lx1MDAwZsxcdTAwMTQ0rzp6XHUwMDE4+Fu+a3rQSqTvXHUwMDAyXGacMoq4hTPK4OjiOlx1MDAwMZ9cdTAwMTNcIkKTojTuk1x1MDAxNXRcdTAwMTNJTUBKQTjuXHUwMDEyQoJcdTAwMTYnkXn0JvBoXHUwMDE0N1j2Q2vJr9VcdTAwMWbgSVx1MDAxMkj8f+a6ROCclyTDvFx1MDAwM7qFkSbdr16CXHUwMDBi6lxy3TuCOadcdTAwMDOMn+64hr/F7+Q/YnHEP2NcYnqn94hcdTAwMTNFXHUwMDE4aVx1MDAxYzbqPKRA8lTvKM5pZFx1MDAxZs9ubaPcLGbO2/uq53Xq9EOFXHUwMDBm89NEzlx1MDAwNzTd5LWVdlx1MDAwZYRcdTAwMTjO2fJOzUDxjk3pnJRcbj/XXmWy+1AzaVwiXHUwMDEwXHUwMDEyrHZfeLTJK4K+dmP+VE10eUfM/na1dLV2SVx1MDAxYXPz5GB/q1hdXHUwMDA0TfR8N5MmiZ5H9TFagT5eXHUwMDExkSP22pnZN8xOx1NcdTAwMTJphVTE5/hcdTAwMDRuzV1cdTAwMDEs4qhnQKJcdTAwMWRcdTAwMTSUXHUwMDE09y6Unz1cdTAwMTJpomdcdTAwMDBhXHUwMDAyR1x1MDAxZu1IgFx1MDAxMmsk/TXuKIhCoyT2Yzw3K3U+kjP5mUyxzlxuObfVxm/lXHUwMDE101x1MDAwM8wrZfBcdTAwMDF6a9FYllx1MDAxZdxcdTAwMDd7smhcdTAwMTKcXHUwMDA146JcdTAwMWPBZbdK/oypXy2Jnlx1MDAwN4UuXHUwMDAwzjtznLGSXHUwMDBmMpqsmoRcdTAwMTe8QEKciIZlzLhO+51ITTyE+Sc1jt530pp474XxR7p5x4fcvKPubHrUSqL3sjJwJHZI+TG43UhCXHUwMDA3+KhccuuE1EZ5bsvyXHLbVEFDXHUwMDAwXHUwMDE0XCJcYsaOTFxm3KR1voC7oDrSqJJbbMrIdtSfzotgQaFmfodf/1r3XHUwMDE1cU5AhFx1MDAxNEi1XCJcdTAwMGIk7uw35lC48Vx1MDAxZlqFkmjhc9Ob6f7r91VG8Vh6vjxcdTAwMDajd3qROHFkpm3MRXDeR1Olb/ZHrW489MJcXObx8WlVy+WM0vXK2q/0XCL+LS+S0nyomXL9XHUwMDAzd4zGkcMktFS8nmRRXHUwMDBiukNexi+WXHUwMDE2PeYx/43iqH/ajv9KdTStfppl+mBcZt+tM0hJVIJ2sdVcYsPLRqXSLidi6WXCqD5cdTAwMTapdXzrNG1cdTAwMDRZdZS8vmVj03dFJzFSp6znXHUwMDEzqsnXW66vJa8/ZGOqf4C1JetcdTAwMTJGO4VTemd+2MhcdTAwMDBVYJXnXHUwMDE0XHUwMDFjSC8hsmFrXHUwMDEwqo1cZri3XHUwMDA3elSWrHIsg8l1Q4pcdTAwMGL95tLyXHUwMDA0rDPqK0L1aFB7O4hPb1oywuWl53RcdTAwMWVqcpXCXHJK/pZcdTAwMDbJTU/S0mrF7W608vL3ZvuxQOpfXHUwMDFkhdBcdTAwMTdF6eh+37H6fetcdTAwMWRzg9mj9NHZzX796v60dt29yOS1PCnBdpjsKI3OkGrkQ1x1MDAxNLRA6e1o3SmRJ6GF8WSeXHUwMDE433huXHUwMDA29zG1rSmYXHRcdTAwMWK2JoRqkoOMdfi6XHUwMDFh/VdcdTAwMWP9ilx1MDAxNjFzTDg+Lv176SXiPiaBXHUwMDAyXGaN52PB30yR6aRrjFx1MDAxNPJcdTAwMWR1XHUwMDE3U+91XCJNXHUwMDE3hFxulCNpY6Xpn1x1MDAxYTmyOYyrZT2FXGLe4m7UlMqLT1uv8oHzvHvGcz9cdTAwMTIhJ3BcdTAwMDBSYVx1MDAwZcBcdHR82ICa0Fx1MDAwMseK/smyZi6rmGA1XHUwMDA1ky/gXHUwMDAwcZF+eihYiq5iUpwnXHTCfcOF9laPXHUwMDA3elBcdTAwMDFdI3fBrWelNm682OFr2Vx1MDAwN9FGQYzCsjDiqr5J3IN71HE9oHRa0vB/b+5cdTAwMTFcdTAwMGJg/kmNYfeLyIeRscVcdTAwMTc0XHUwMDBloKDrZ+9cdTAwMGaDXHUwMDA3qdZaeLjse2F2I1u73c6Bc8l2YOSZXHUwMDAydl7kw4zhxZAh/+UlXHUwMDA2SE5cXDllLZeifJ//slx1MDAxM1x1MDAxY9Yk9tE/1O1cdTAwMGKXQ6aRj0/sXHUwMDBlf5t8XHUwMDEwnfaRpv7fTT56g2DfS1x1MDAwMvlcdTAwMThcdTAwMWHPx8hcdTAwMDeXp8VcdTAwMTkvzbAw7zr+aPrNTqTxXHUwMDAy9yVBpygmeTJgXHUwMDFjyT2QTlx1MDAwYlx1MDAxMNGT/Vx1MDAxYe99fO1DibSHqHzCeJ1cdTAwMGZQsCZUxnKX7HFTNuTdjdJeKvLfWsFY41x1MDAwN7DAgfUri8a/xfhm5Fx1MDAxZdNDQSSGXHUwMDBiJTiuXHRyr9xBYFx1MDAwMlx1MDAxM+CVTor0XHUwMDFj4ZWy3HOByPHH2Mf0ziZcdTAwMDOyM2FcdTAwMTTc5Vx1MDAwMFx1MDAwNaBzgLxs/nuTjTjA8k9qXGarX8Q1tI7lXHUwMDFhUvSLe9/RwnzdbKz2uqc5dyGOb25qVX1cdTAwMWFmk801NK9cdTAwMDKR7XnBp11ZO9xcdTAwMWKaZjvgynVNXCKK7suUXHUwMDBl+5+lXHUwMDFhOKk63Y4lRHmbL1x1MDAxOdxcdTAwMTdcdTAwMWVcdTAwMGU8jWp8b8NcdTAwMThUVnxIaX2aaiz91//Wn5dcdTAwMWGmV1mZ4beZJ/uYNMRcdTAwMGZcdTAwMTJcdTAwMTLw8VvUKOKAtO85pWA6Jlx1MDAxMmni3lx1MDAwN55z4ZJcdTAwMWKB2JGaK1wiXCKBRd7VzkdcdTAwMTR4XHUwMDFiT0g+rSbIv5NIXHUwMDA3329RJGDSKqTl4lx1MDAxNW208dKSjejx7Shk/PRiO5+OfsinWOiP2OiMjGR6wFiKZlx1MDAxZZDPylx1MDAwND6uwFC8x/GdXHUwMDFmKuBSW3IqgMhV31x1MDAxZt2MMnVcdTAwMGL+0JCI8lx1MDAxMNEl5Vx1MDAwZp6X7u3YkFxcoPlwXGbNjVx1MDAwZpif/N51V6l4XHUwMDA09y+PgfeLKFxuQPwxcyRcInjh/Fx1MDAxZOdg1dxGXHUwMDBmM+kw18hgunS0JY5cbvvbiXZg4HSgNVx1MDAxZj/FvJDsYPR4XHUwMDAwXHUwMDEzOEt6SkpyXHUwMDBicko70lx1MDAxOc7BmurB7IQ2uZFcXPvPTlx1MDAxZlxc1+Hn2C/p06slkfa/QyxiXHUwMDEwKX6yiJVGvlVabjYn0oXI28yDLryO5dmo/nix21x1MDAxZvlm87hDs/Tq42j+a6WXrzp4x1x1MDAxZve18sPK5OV8XtH/48VQ2VwiynxcdTAwMWL++vuPv/9cdTAwMGZcYuGAVyJ9 virtual_size.heightvirtual_size.widthself.scroll_offsety = scroll_yx = scroll_xx = scroll_x +self.size.widthBoardApp"},{"location":"guide/widgets/#region-updates","title":"Region updates","text":"<p>The Line API makes it possible to refresh parts of a widget, as small as a single character. Refreshing smaller regions makes updates more efficient, and keeps your widget feeling responsive.</p> <p>To demonstrate this we will update the checkerboard to highlight the square under the mouse pointer. Here's the code:</p> checker04.pyOutput checker04.py<pre><code>from __future__ import annotations\n\nfrom textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.geometry import Offset, Region, Size\nfrom textual.reactive import var\nfrom textual.strip import Strip\nfrom textual.scroll_view import ScrollView\n\nfrom rich.segment import Segment\nfrom rich.style import Style\n\n\nclass CheckerBoard(ScrollView):\n    COMPONENT_CLASSES = {\n        \"checkerboard--white-square\",\n        \"checkerboard--black-square\",\n        \"checkerboard--cursor-square\",\n    }\n\n    DEFAULT_CSS = \"\"\"\n    CheckerBoard &gt; .checkerboard--white-square {\n        background: #A5BAC9;\n    }\n    CheckerBoard &gt; .checkerboard--black-square {\n        background: #004578;\n    }\n    CheckerBoard &gt; .checkerboard--cursor-square {\n        background: darkred;\n    }\n    \"\"\"\n\n    cursor_square = var(Offset(0, 0))\n\n    def __init__(self, board_size: int) -&gt; None:\n        super().__init__()\n        self.board_size = board_size\n        # Each square is 4 rows and 8 columns\n        self.virtual_size = Size(board_size * 8, board_size * 4)\n\n    def on_mouse_move(self, event: events.MouseMove) -&gt; None:\n        \"\"\"Called when the user moves the mouse over the widget.\"\"\"\n        mouse_position = event.offset + self.scroll_offset\n        self.cursor_square = Offset(mouse_position.x // 8, mouse_position.y // 4)\n\n    def watch_cursor_square(\n        self, previous_square: Offset, cursor_square: Offset\n    ) -&gt; None:\n        \"\"\"Called when the cursor square changes.\"\"\"\n\n        def get_square_region(square_offset: Offset) -&gt; Region:\n            \"\"\"Get region relative to widget from square coordinate.\"\"\"\n            x, y = square_offset\n            region = Region(x * 8, y * 4, 8, 4)\n            # Move the region in to the widgets frame of reference\n            region = region.translate(-self.scroll_offset)\n            return region\n\n        # Refresh the previous cursor square\n        self.refresh(get_square_region(previous_square))\n\n        # Refresh the new cursor square\n        self.refresh(get_square_region(cursor_square))\n\n    def render_line(self, y: int) -&gt; Strip:\n        \"\"\"Render a line of the widget. y is relative to the top of the widget.\"\"\"\n\n        scroll_x, scroll_y = self.scroll_offset  # The current scroll position\n        y += scroll_y  # The line at the top of the widget is now `scroll_y`, not zero!\n        row_index = y // 4  # four lines per row\n\n        white = self.get_component_rich_style(\"checkerboard--white-square\")\n        black = self.get_component_rich_style(\"checkerboard--black-square\")\n        cursor = self.get_component_rich_style(\"checkerboard--cursor-square\")\n\n        if row_index &gt;= self.board_size:\n            return Strip.blank(self.size.width)\n\n        is_odd = row_index % 2\n\n        def get_square_style(column: int, row: int) -&gt; Style:\n            \"\"\"Get the cursor style at the given position on the checkerboard.\"\"\"\n            if self.cursor_square == Offset(column, row):\n                square_style = cursor\n            else:\n                square_style = black if (column + is_odd) % 2 else white\n            return square_style\n\n        segments = [\n            Segment(\" \" * 8, get_square_style(column, row_index))\n            for column in range(self.board_size)\n        ]\n        strip = Strip(segments, self.board_size * 8)\n        # Crop the strip so that is covers the visible area\n        strip = strip.crop(scroll_x, scroll_x + self.size.width)\n        return strip\n\n\nclass BoardApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield CheckerBoard(100)\n\n\nif __name__ == \"__main__\":\n    app = BoardApp()\n    app.run()\n</code></pre> <p> BoardApp \u2585\u2585 \u258b </p> <p>We've added a style to the checkerboard which is the color of the highlighted square, with a default of \"darkred\". We will need this when we come to render the highlighted square.</p> <p>We've also added a reactive variable called <code>cursor_square</code> which will hold the coordinate of the square underneath the mouse. Note that we have used var which gives us reactive superpowers but won't automatically refresh the whole widget, because we want to update only the squares under the cursor.</p> <p>The <code>on_mouse_move</code> handler takes the mouse coordinates from the MouseMove object and calculates the coordinate of the square underneath the mouse. There's a little math here, so let's break it down.</p> <ul> <li>The event contains the coordinates of the mouse relative to the top left of the widget, but we need the coordinate relative to the top left of board which depends on the position of the scrollbars. We can perform this conversion by adding <code>self.scroll_offset</code> to <code>event.offset</code>.</li> <li>Once we have the board coordinate underneath the mouse we divide the x coordinate by 8 and divide the y coordinate by 4 to give us the coordinate of a square.</li> </ul> <p>If the cursor square coordinate calculated in <code>on_mouse_move</code> changes, Textual will call <code>watch_cursor_square</code> with the previous coordinate and new coordinate of the square. This method works out the regions of the widget to update and essentially does the reverse of the steps we took to go from mouse coordinates to square coordinates. The <code>get_square_region</code> function calculates a Region object for each square and uses them as a positional argument in a call to refresh. Passing Region objects to <code>refresh</code> tells Textual to update only the cells underneath those regions, and not the entire widget.</p> <p>Note</p> <p>Textual is smart about performing updates. If you refresh multiple regions, Textual will combine them into as few non-overlapping regions as possible.</p> <p>The final step is to update the <code>render_line</code> method to use the cursor style when rendering the square underneath the mouse.</p> <p>You should find that if you move the mouse over the widget now, it will highlight the square underneath the mouse pointer in red.</p>"},{"location":"guide/widgets/#line-api-examples","title":"Line API examples","text":"<p>The following builtin widgets use the Line API. If you are building advanced widgets, it may be worth looking through the code for inspiration!</p> <ul> <li>DataTable</li> <li>RichLog</li> <li>Tree</li> </ul>"},{"location":"guide/widgets/#compound-widgets","title":"Compound widgets","text":"<p>Widgets may be combined to create new widgets with additional features. Such widgets are known as compound widgets. The stopwatch in the tutorial is an example of a compound widget.</p> <p>A compound widget can be used like any other widget. The only thing that differs is that when you build a compound widget, you write a <code>compose()</code> method which yields child widgets, rather than implement a <code>render</code> or <code>render_line</code> method.</p> <p>The following is an example of a compound widget.</p> compound01.pyOutput compound01.py<pre><code>from textual.app import App, ComposeResult\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label\n\n\nclass InputWithLabel(Widget):\n    \"\"\"An input with a label.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    InputWithLabel {\n        layout: horizontal;\n        height: auto;\n    }\n    InputWithLabel Label {\n        padding: 1;\n        width: 12;\n        text-align: right;\n    }\n    InputWithLabel Input {\n        width: 1fr;\n    }\n    \"\"\"\n\n    def __init__(self, input_label: str) -&gt; None:\n        self.input_label = input_label\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:  # (1)!\n        yield Label(self.input_label)\n        yield Input()\n\n\nclass CompoundApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    InputWithLabel {\n        width: 80%;\n        margin: 1;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield InputWithLabel(\"First Name\")\n        yield InputWithLabel(\"Last Name\")\n        yield InputWithLabel(\"Email\")\n\n\nif __name__ == \"__main__\":\n    app = CompoundApp()\n    app.run()\n</code></pre> <ol> <li>The <code>compose</code> method makes this widget a compound widget.</li> </ol> <p> CompoundApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e First\u00a0Name\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0Last\u00a0Name\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0Email\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>The <code>InputWithLabel</code> class bundles an Input with a Label to create a new widget that displays a right-aligned label next to an input control. You can re-use this <code>InputWithLabel</code> class anywhere in a Textual app, including in other widgets.</p>"},{"location":"guide/widgets/#coordinating-widgets","title":"Coordinating widgets","text":"<p>Widgets rarely exist in isolation, and often need to communicate or exchange data with other parts of your app. This is not difficult to do, but there is a risk that widgets can become dependant on each other, making it impossible to reuse a widget without copying a lot of dependant code.</p> <p>In this section we will show how to design and build a fully-working app, while keeping widgets reusable.</p>"},{"location":"guide/widgets/#designing-the-app","title":"Designing the app","text":"<p>We are going to build a byte editor which allows you to enter a number in both decimal and binary. You could use this as a teaching aid for binary numbers.</p> <p>Here's a sketch of what the app should ultimately look like:</p> <p>Tip</p> <p>There are plenty of resources on the web, such as this excellent video from Khan Academy if you want to brush up on binary numbers.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVdaU/jyFx1MDAxNv3ev1x1MDAwMjFf3pMmnlpvVY309MTSQCCsYe2nXHUwMDExMomTmCTOYidcdTAwMDRG/d/frUBcdTAwMTNncchcdTAwMDKM0400PVx1MDAxMNtJueqcU+de36r8/WVtbT16bHrrf66te72CW/OLbfdh/Xf7etdrh34jwEOs/3fY6LRcdTAwMGL9MytR1Fxm//zjj7rbrnpRs+ZcdTAwMTY8p+uHXHUwMDFkt1x1MDAxNkadot9wXG6N+lx1MDAxZn7k1cP/2n+P3Lr3n2ajXozazuBDMl7Rj1x1MDAxYe3nz/JqXt1cdTAwMGKiXHUwMDEw3/1/+Pfa2t/9f2Ota3uFyFxyyjWvf0H/UKyBko++etRcYvqNpVx1MDAwNDQ1lHP6eoZcdTAwMWZu4+dFXlx1MDAxMVx1MDAwZpewzd7giH1pXHUwMDFkzppcdTAwMTdnwVOnSW865dxWZn9jc/dm8LElv1bLR4+1frNcbu1GXHUwMDE4ZipuVKhcZs5cYqN2o+pd+cWoYlsw8vrrtWFcdTAwMDN7YnBVu9EpV1x1MDAwMi9cZoeuaTTdglx1MDAxZj3amySvLz53xJ9rg1d6+Jek2lFEU05cdTAwMTRcdTAwMDHDxetBe7XQ4GggWjNcdTAwMTCEMdAjrdpq1HAwsFW/kf7PoF13bqFaxsZcdTAwMDXFwTmiXHUwMDAwXklcdTAwMGXOeXi5VymoQzhjnFHNKSHy9YyK55crkb01RVx1MDAxZInNUJJcdTAwMTEmqVx1MDAxMmzQXHUwMDEyrz8mXHUwMDE0NKGcXHUwMDExMlx1MDAxOFT7+c1ssY+Pv+I9XHUwMDE2XHUwMDE0X3os6NRqgybbXHUwMDAzX2OYXHUwMDFhXFzTaVx1MDAxNt3o5WOUUoZQrYlcdTAwMTn0Rs1cdTAwMGaqo29Xa1x1MDAxNKpcdTAwMDO09F/9/vtcdTAwMDIwpYQn41RcdTAwMTNcclx1MDAwMsDMjtM9dpJxm72oVT047Fx1MDAxYz1cdTAwMTGze8C/Lo5T9k44xWF/XHUwMDEzqMrBW+VcZlxiUcA4XGYjVVx1MDAxYYdcdTAwMDHiR1HBXHJ2i1pcdTAwMDaqUdtccsKm20YkTIKrcLBcdTAwMTlcXHBcIimlXHUwMDEz0MqBOJpcdTAwMTIjXHUwMDA0cI5cdTAwMDRjMIpWMJJIzpn8NLCaT1x1MDAwMWucmKNY5VpQI1x1MDAwNZiZsZrb2bvZolx1MDAwZlutWq8rRHGDkqfrIFx1MDAwMasjePsnUUqIXHUwMDAxhVomULFGQKpcdTAwMWSthcbxXHUwMDAw0Fxu4CNBylx1MDAxZEJBMi1cdTAwMTVVRulxlDLtXHUwMDAwXHUwMDEwjlx1MDAxYU9cdTAwMThwS6xRlCrNSJ9Sq4dSr1bzm+FEjIJcdTAwMTKJXHUwMDE41YIowbWSM2PU69ZPN77dXHUwMDFmXFzlstmb6kaudbW3XV5cdTAwMDSj7zXjz4BRXHUwMDFjeUMkXHUwMDEwoVx1MDAxMa7EsGGQXHUwMDAygpRLg8rGjIXOUnN+yZVMsnF8Uu5YRyFccuCEzpBcdTAwMTJiXHUwMDFjoJQ5XHUwMDEyQFx1MDAxOJRQwlAshVx1MDAxYVx1MDAwNShcdTAwMTeUMWpibfxcdTAwMTlcdTAwMDCqmE5cdTAwMDIo+jBcdTAwMWMxodTM+DSsV7nNRlx1MDAwN7nuUfd8v51vcdVopFx1MDAxY59SXCJcdTAwMDJcdTAwMDFcdTAwMDEqXHRcdTAwMDe0pSP4VFx1MDAwZVCBRGVUSFx1MDAwNVIsXHTQO3ScXHUwMDFmXHUwMDA1UIZyYlx1MDAxOFx1MDAwMbWCXHUwMDEz/TSE6uRpXlKMXCJcdTAwMDSfXHUwMDE5oHv5ulxmy2euOLmqXHUwMDFmh8F5buN6p5NygGqOYVx1MDAxMZM4W0itXHUwMDE4lyNcdTAwMDBcdTAwMDVcdTAwMDdRY7hmiFWtR83HfPik7E5r+Dh8XHUwMDEynFx1MDAwNriWn1x1MDAxNzV9jlx1MDAxMdUyXHUwMDExoFx1MDAxOERcbowk+excdTAwMTBccjJnV0FwuXta7mZ36MZGePh0t5duiCqG8ZA0SmBgLVx1MDAxMYxmXGKiUjJcdTAwMDSwZIDgXHUwMDExeFAuXHUwMDA10VKpNFx0n1x1MDAxM1x1MDAwMFx1MDAxOWPKj1x1MDAxOVxccpzCcVx1MDAxMp9cdTAwMDN/P5AwwFx1MDAwMn955XsyLF+vXHUwMDE5XFxcdTAwMWTDUuT1XHUwMDA2Jjo28s2Th92jTKV0obY297fJ6WbLO9Drr+d9/33y2z5f/PW47rmt/Xz1kGarXHUwMDE33lGzenFcdTAwMTJcdTAwMGV/yo/Pd9vtxkPsfV9+S+KSxrBSsHgotSSXhu4/RiNhXHUwMDEyaaRBgVx1MDAxYVxuYd+i0eTOnEyjiluodNpe+omk3o9IU1x1MDAwMzrGx+nExuiEXHUwMDAxNjZCXHUwMDEzmc6QbTDWjSDK+099S0uGXt1x637tcWi4+uDE/lkz8e5cdTAwMGI9/LxnJFx1MDAwZZ25UfPLXHUwMDE2uus1rzSM6cgvuLXXw3W/WIzPXHUwMDFkXHUwMDA1/HBcdTAwMTffsZ2dRfNcdTAwMWJtv+xcdTAwMDdu7XzQtsUnK5qciTZCXHUwMDEzYSPSmVnmV0/Oj2vlzMP+9l6tK+tHJrpkqWeZXHUwMDExyDLGNNpcdTAwMTFcZnHYsOVHmXE4xnnKXHUwMDE4jFx1MDAwYthcdTAwMDfm9lx1MDAwNHdsXHUwMDFhXHUwMDFjuKVcdTAwMTBIOSm7x5hcdTAwMDPKSGyyTeRQYsbzJngpXHUwMDFlg3nC0oUmtXR4LWqSXHUwMDEzKqibIONcdTAwMDH6W/DduoON6FwiMsXb++vTXFzwcHK2XHUwMDE1h9o/9Vx1MDAxY+VtXGJrKlx1MDAxZI6ux3CDs7PUZlx1MDAwNMLCMTgmXHUwMDE4XHUwMDFhUUYwMljKcVx0UiBSTZokXHUwMDFj++Rcbj9cdTAwMDQ7XWpKJ6CXOlJcdTAwMTJF7dRtjb9cdTAwMWVcdTAwMDUvN4JK8vGGLFx1MDAxZNhlsXFcdTAwMWRPWHOFgVx1MDAxM5394cp+b/eCXHUwMDA2N1t1cXpPj8J6JnNZ99OuvUZcdTAwMDFcblx1MDAxYdpw9DFCXHUwMDFiMVx1MDAwZVxcITHg11x1MDAwMiNdJZeKZj9Fe5F7XHUwMDEy47t/XHUwMDE2v/Fu/1D8isRAVzFcdTAwMTQhXHUwMDE5XHUwMDFmz7fgXHUwMDFifVx1MDAxNU2/c1jyXHUwMDAytl1RXHUwMDE5kTO79HZcdTAwMTW0XHUwMDE3J1x1MDAxOFx1MDAwN4HKudFcdTAwMTKNOGUjXHUwMDEwXHUwMDA2h0hcdTAwMDGaXHUwMDE5gtJrlkHwh0qvfZzLmFwiep5s4TtGw88oyOe/XHUwMDFkdO/Pe3dunlSOXHUwMDAyUz2JVP3dwlb0d7FHt1x1MDAxZkpccpmYRqdAUTw4mUPaN/d6XHUwMDA10T5Sgp1vfDvdr9Jet1dLu7RjbzuUY8dcdTAwMTNcdTAwMDFExaPCV1ttn1NcdTAwMTP0JahasFxmMT5B2pmy8bdcdTAwMTK/iLRzQVx1MDAxM/HLJEhOyVx1MDAxY88p71xcssd446RVydz1mt6J37qst1ZB2y2G0XegfFNcdTAwMTR3zSeEhuhaKMNAg/LlQsPfNGjPTEi2v4e4o61cdTAwMDai8YRfXHUwMDA0vclVS1x1MDAxOP9cdTAwMTjCXHUwMDE5mT1cdTAwMDHf2rlcdTAwMTf+dnBcdTAwMWJcXJU293dP+d7N8U1SIUhqxFx1MDAxNyiaXHUwMDEyXGb4lFbow1x1MDAwMMRcYnCFI21lndBcblx1MDAwNZGnPadhn2VRXHUwMDFlL877qeGLTE9cdTAwMTRfyYnSqFx1MDAwNLPj9+yqVbx42pG128JZVVx1MDAxNKNm7f6gsFxu4lx1MDAwYlQ7XHUwMDE0XHJcdTAwMWJojFx1MDAwZlxy3vN4bKhcdTAwMTDZwI1SiObUii9lXHUwMDFh8Dao+UXgy03yXHUwMDAzepuZxLBRzVx1MDAxZVx1MDAxNz5cXFb35bedyq6f9erB8VngPVx1MDAxY6Q+rYF65lx1MDAxMCptvVxmXGLsj9G0XHUwMDA2c9D14pQsXHUwMDE1pfFAIJ3ySzlGK4LJX1x1MDAwNcBCJeY1NKP2QVx1MDAwMZ1dfm9Ubkfz4lG1ZIr5Mjts1VtVs1x1MDAxMvKr7MNHNPpoXCK0UWN5XHLEsCRGM2LQbi1ZaPKh8quFXCJGxiOan1x1MDAxYr06Oatsi4Ml9sbsqYf7w1x1MDAxM9K4PLy99MONh43QXFxH+fOktFxcauRXceUwjNgwNiNcdTAwMDTFS41AlztSoCnGIaGGkbRnle1iIFxmt3+Z3IOEZP+A3Vx1MDAwNMJQmD33kMtcdTAwMTauvcr1TeusXrjNPmRcdTAwMGav+fHxKuivXHUwMDA1sTRacS2YfVx1MDAxNqTHQUxt9lx1MDAwMf1cdTAwMTSVii9cdTAwMDPij9VfyVx1MDAxOcM2/ir6K6eU+INcdTAwMTbGMJgjdVbee3wqXHUwMDExt37VaoS3hzdcdTAwMWI8W8Omp1xcf7VE4bOVSURb68BGrUNfXHUwMDE2gSphUcGXeibyXHT6y4kkiH4+T5nqXG7jXHUwMDE3ZGL2gffLis1cdTAwMWNld1ftzVMhzEGvfXfwKFx1MDAxYrVcdTAwMWJcdTAwMWFcdTAwMTb2V0F90Tw4VKBNsE/0uIxVwP2AMChbXHUwMDFiheBcdTAwMDK0walVX4bmXFxY+/CLgJcmi68xVGCwMrv3velcdTAwMTVOdffkXHUwMDAyrlx1MDAwZnfunlqd/cvk1Vx1MDAwManRXjSLqL3CYM8zNbR+91V7cUKWiFrN4s44ndqL5uHZ//xcIvCNXHUwMDE1q43AXHUwMDE3XHUwMDE1XHUwMDAwea7nSPxcdTAwMTa7VffxdrtcdTAwMDS3j3fu08XxiV9/zK6C9lwiT1x1MDAxZEJcdTAwMThcdTAwMDDKL1omOlx1MDAxZb4pZp8/UvtoWaU48Vx1MDAwYii9gPj+eZxvUq0+Jcm6S23yXGKHi8yM3MKW2cs8VkpcdTAwMTc7ep9lg9Pc0Vx1MDAwZZUrgVxcw1x1MDAxY3RcdTAwMGKEXG4lXHUwMDEwejCCXFxcdTAwMDKOXHUwMDEyNppcdTAwMDctUZ2TXHUwMDBi9lx1MDAxMTeuWFx1MDAxMLmxRN1cdTAwMDCqZFx1MDAxNJv9dYHA4lx1MDAwNYbLXHUwMDE2679cdTAwMDJ3Ql1P7mJcdTAwMGZuu7RLOlx1MDAwN/eiXFwq34WN2FQ6XHUwMDA0sbnrelx1MDAwNKNcdTAwMWFiOYPFllx1MDAwMsQqUN5YXG4wNC6DlVx1MDAwMGLoxFlXXHUwMDAyRI1m0jKAoVx1MDAxYlx1MDAxOK35J9NL/pN4XG7JZUmKISbto6qZaXr+UKrlNk0+XGLK7u5Fdvss4zG6XHUwMDEyNLXPXHUwMDBlKWFcdTAwMTjWac3VyMNxXCLt7MPxP1xmX5VKtkjLsHSSXHUwMDFiXHUwMDFhI6mdgDBcdTAwMTD5+PU0n09cIppcdTAwMDZcdTAwMTLRxUhERTKLXHUwMDA0XHUwMDAyRtrtNWZmUY5+bfaK1b2C2JK1m8JJt83yuVVgkVbELoanXHUwMDA2JzOiOZ1AI0BJsfGzkmy0XZ862VEmXHJX8bTxz8Mkllx1MDAwNiaxXHUwMDA1mVx1MDAwNIllhuhcdTAwMTjR/+NcdHpmJu2dbXSzl5fhrp/fyarr6Lq3ebGzXG5MwlDGYVLYXHUwMDFiRnuoKYwxSYKtz5bckPhjoHdl0qRcYmeMSZRcdTAwMTOpOPC5kqGrwiSRXHUwMDA2JolcdTAwMDWZlFxcs6BcZlx1MDAwN61cdTAwMDWfPf66XHUwMDBmz13aOFx1MDAwN5/Ip8fbsOh+O6+vRNZcdTAwMTZcZjhcdTAwMDLjL4M84dyIcVwiXHUwMDAxKENcdTAwMTkwW8r9z1x1MDAxMkmjs/uUzS8+n0gyXHJEkouau+RtXHUwMDA3XGLaXGKGnTk7k85uy3tQb3qV7Y2n3YjSXG5/MKvBJC5cdTAwMWRFtX28rFx1MDAxNWej1T9cdTAwMDRcdTAwMWPWL4RcIooyPeVcdTAwMTHexzOJc6FcdTAwMTVTn7BR3OdcdTAwMTNcdNJAJFiQSDzR22HQIKyhmWNKOi+b/MmFyLiFfWRJJLdcdTAwMWW71XBcdTAwMTWIJFx1MDAxNbo3YiTBXHUwMDE5WFx1MDAwYi1GyjhwSuKcUlx1MDAxMFx1MDAxY12VgOQyjqWIRGYhkt1yz65cbvhcdTAwMTlnJJVcdTAwMDZcIqlcdTAwMDWJZJL34Fx1MDAxNVx1MDAxYeNaXHUwMDEy31XyLVwi8XLQpHukWij1NiumSup1fytpOUuqiKQpdZRdUkw44lxcqdFcdTAwMTlJONTuzStcZmg2bUnLx6dcdTAwMWJcZlx1MDAxMcauqvlcdTAwMTmJxNNAJL4gkZLTdlx1MDAxMuyihDm2XG7ptIS/V2td3T1G3V3voFx1MDAwYse3Okqg0WLbslx1MDAxNd2w4r3zdlLaIVx1MDAwNqdcdTAwMTljjJB0JDrCOdlcdTAwMTFcdTAwMDKhi7GRYYpM2XyVgyhcdTAwMTXUdFxuTdyYTc6U9pbcSPGu+1a+XHUwMDFjWIGd0pZjZzZodqJ//Ttcclx1MDAxY/3RlKlMfe7QXHRUTa5BXHUwMDEz9lx1MDAwYlx1MDAwM0Do2esgplx1MDAwZnA6d1CU4IDk6Fx0cUJDYzi8fkhcYuZQTe3G2VxiMymSXHUwMDBi2Fx1MDAxNyYqY1x1MDAwZfpVQFx1MDAxOVDcME5iNVx1MDAxOINcdTAwMWQ+ibGb4jNb1Gp3XHUwMDAxZWPfi1x1MDAwMFx1MDAxYVBr9Fxc+/ksOlx1MDAxMVwi1WQ8mzJcdTAwMDfVwshtR5t+UPSD8vpQXHUwMDA1xsu3fGRnkPw+OVx1MDAwYlx1MDAxZNtK4lx1MDAxMG1QSXH0XHUwMDAwhUzSwY5Ltlx1MDAwYtymXHUwMDFkYUdcdKLQunGFWGaoxi9nXGaqPLyg+Hajpm9cdTAwMTVcdTAwMTdrVIZYzFx1MDAxOIyUXHUwMDE5XG68xMbJsUZRh1GluMBwXHUwMDA1zyGcwVijam5cdTAwMThtNdA0Rtj5J1xyP4hGO7nfm1x1MDAxYpbYXHUwMDE1z1x1MDAxZJNcdLyp+LFRXHUwMDA1aNp3XHUwMDFjluzBb2tcdTAwMDOW9P94/f2v3yeenVxmYvszXHUwMDBl38H7fYn/f26bkVx1MDAxOPditCdcdTAwMTiXc+z+ynVR+81vN6Ql/bPcXHUwMDE27+RPL5LyRynRLiPAkYaAfC4vieVl7PVcdTAwMWGYY5fzckSixDebkjlaVLtgtlx1MDAwNKyiknE6X1n34i4jXVx1MDAxYtss5zLyXHUwMDBmPkaE6bBcdTAwMTmvbVnMZ0Dy5pdGg/0yhtlr3adcdTAwMGZxOrmqwG4wK5GLz1x1MDAxYt5cdTAwMGZzVWpHKk5sZa4ynCfv0bMwVzGmt3swo1ZcdTAwMTiceDSZQF1cdTAwMDNcdTAwMGVcdTAwMTdcdTAwMTLDfi2pxKhg/NuXXHUwMDA04OVcdTAwMTBflPuRNmNhrs1oM6ZL/vCMjlx1MDAwZVx1MDAwMnWMK+A4hDqW9Xid0rmDc5/hKLtcbm9cdTAwMDAnw8VsxvTd2WKNsjWxXFzbXHUwMDFkXHUwMDE57JdcZlHB2ViTKDpcdTAwMTFA8ae2JsNcdTAwMTiQK20yXHUwMDEyXHUwMDExbH8yY+B9L4+RuMaXXHQjQZHZM1x1MDAxObXC3XaVX3tX8p7C42XuW/787C7dskWtdzOGXHUwMDExm1BcdTAwMTdGjqyNXHUwMDA0YVVNc1uCi1xu9/6qJSdsLz8xXHKo3u/LYaaZi4+srkVlofEt8j/aXFzk3Duvllx1MDAwZW/xoylcdTAwMGJaiymlTVx1MDAwNsNcdTAwMTJcdTAwMTLfjuvNXCLBqSOcVpIyW9XE7ZbwXHUwMDA02Ti8f1x1MDAwZqC5QFVcdTAwMTRMKrvNLUwphl+UpoY7dr9jw6xcIlxuPcFbyH5cdTAwMGLt14xxobiKnfLDW6CEXGJit8H4XHUwMDE0b7Ew1Wb0XHUwMDE207V+LZ7CwFHhxm6/ZPc+l3w8WWB3PVWKgTJcdTAwMDKHj6nFjMX0pVx1MDAxZSNuXHUwMDA3m4KjiZG60XbhsFx1MDAxZW+UcLTRXHUwMDAynaxcdTAwMTREYYipV9pbZJJcdTAwMTBsf8awm2Qtvry8/7rbbOYjRNzrcCCW/eKLQlx1MDAwZm5yvet7XHUwMDBmm5NJZnn25aU7rep4/SVL3798/z/RhT5iIn0=  901245673Input()Switch()Label() <p>There are three types of built-in widget in the sketch, namely (Input, Label, and Switch). Rather than manage these as a single collection of widgets, we can arrange them into logical groups with compound widgets. This will make our app easier to work with.</p> Try in Textual-web <p></p>"},{"location":"guide/widgets/#identifying-components","title":"Identifying components","text":"<p>We will divide this UI into three compound widgets:</p> <ol> <li><code>BitSwitch</code> for a switch with a numeric label.</li> <li><code>ByteInput</code> which contains 8 <code>BitSwitch</code> widgets.</li> <li><code>ByteEditor</code> which contains a <code>ByteInput</code> and an Input to show the decimal value.</li> </ol> <p>This is not the only way we could implement our design with compound widgets. So why these three widgets? As a rule of thumb, a widget should handle one piece of data, which is why we have an independent widget for a bit, a byte, and the decimal value.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVdaVNcdTAwMWJLsv3uX+HwfJlcdTAwMTdx6VtZlbXdiFx1MDAxN1x1MDAxMyDAYEBcYiPWXHUwMDE3XHUwMDEzjpbUWkBcdTAwMWLqXHUwMDE2ICb831+WzKDW0kJcdTAwMGLybVx1MDAwMSYw9KKurjqZeTIrK+s/nz5//lx1MDAxMvXawZe/Pn9cdFx1MDAxZYt+vVbq+Fx1MDAwZl/+cMfvg05YazXpXHUwMDE07/9cdTAwMWS2up1i/8pqXHUwMDE0tcO//vyz4Xdug6hd94uBd19cdTAwMGK7fj2MuqVayyu2XHUwMDFhf9aioFx1MDAxMf7L/cz6jeB/261GKep4g4dsXHUwMDA0pVrU6vx6VlBcdTAwMGZcdTAwMWFBM1xu6dP/j/7+/Pk//Z+x1nWCYuQ3K/Wgf0P/VKyBio9cdTAwMWXNtpr9xlx1MDAwMkMtwGqAlytq4TY9L1xuSnS6TG1cdTAwMGVcdTAwMDZn3KEvT9XLm28n33vfOrlCrprJt2VcdTAwMTFLg8eWa/X6adSr95tV7LTCcKPqR8Xq4Iow6rRug4taKaq6XHUwMDE2jFx1MDAxY3+5N2xRT1xm7uq0upVqM1xiw6F7Wm2/WIt67iXZy8FfXHUwMDFk8dfnwZFH+ktZjzPNJVx1MDAwN8tBoVQvZ93tdNBDg6BcdTAwMTQ3hiGzI83KtOo0XHUwMDFh1Kx/sP7XoGFcdTAwMDW/eFuh1jVLg2uwqIKyXHUwMDFjXFzz8PyyXHUwMDEywWOCc8HBXGJgTL5cXFFccmqVauRcdTAwMWGiwZPGcC0541x1MDAxMjRcdTAwMGXGLlxm+oNcdTAwMDKSziM1cXC3e357v9RcdTAwMDfIv+Nd1iw9d1mzW69cdTAwMGaa7E7sxEA1uKfbLvm/xlx1MDAxZZTWRiDn2sKgXHL1WvN29OPqreLtXHUwMDAwLv2jP/9YXHUwMDAwp1x1MDAwNEZMXHUwMDA0KpeaXHUwMDAzXHUwMDA3XHUwMDEwM1x1MDAwM/VwL7NxcJcrlc+yqnfUqu9njoVcXFx1MDAxY6j8jYBKw/5cdTAwMWFStWeVRNRouZExXHUwMDAw9G9X6Fx1MDAxOSOBsGxBW7RmXHUwMDE5pEZcdTAwMWS/XHUwMDE5tv1cdTAwMGVcdTAwMDFhXHUwMDEyWtFTglx1MDAwYlx1MDAxNExcdTAwMDLAXHUwMDA0sFxuxTxcdTAwMDPMXCIqISRcdTAwMTiuxsDKjdBKk5Z5Z2DVXHUwMDEyXHUwMDEysVxuKNFqasrMWL3LXHUwMDE2dq5cdTAwMThuPcHm4VZWl0s3XHUwMDE3359cdTAwMTKwOoK3v1x1MDAxMaWSXHUwMDE5bYVS1oBRYyils6TMNKCyTOtcdTAwMTWiVHhcZpQkUaGnWW3GYcqNp1x1MDAxNFx1MDAxM2hcdTAwMTTjSlx1MDAxMKTHYGolkKDhOqrUoF6vtcOJXHUwMDE4VUYkYdRcdTAwMDJaxpTUM0P01lx1MDAwNPzkoFx1MDAwMPmbrd7RiVx0ermjy5NFIPpWXHUwMDE2/3WIaushXHUwMDExXHUwMDFjXHUwMDFhc6GsiGnK/u1cdTAwMWE9lFx1MDAxNmjotbJWxPpqXHUwMDExk1/2JXGLcXiCoDZwLq1cInvOkSz3XHUwMDA0m889qVx1MDAxNFpSoYxcdTAwMGLBUY/iXHUwMDEzJFx1MDAxMVx1MDAwMuBkXHUwMDAy31x1MDAxNUC10ElcdTAwMDBcdTAwMDVcdTAwMDKv5ZbPXHUwMDBl0KenzUaNXHUwMDFkXHUwMDFlbaszWVx1MDAwNX9v92t19yzdXHUwMDAwXHUwMDA1pjwynMqANcYy4GJcdTAwMDSiwuNkPi0zilx1MDAwYkviuiREXHUwMDBiRDlXXHUwMDA1UU28lIGAd4ZQm2jmOelcdTAwMTR6aTE7QkWb1W52oqPsTvXmQF1cdTAwMWbnXHUwMDFizcJWylx1MDAxMSrQXHUwMDEzXG40k2RnLfkvOIJQwlx1MDAwNYGT/Fx1MDAxOYtkXcUo/5hcdTAwMGahwFx1MDAwYsaoVSGUXHUwMDEzOrVUxM7WXHUwMDBmoq84TixcdKRgiXxLLYWcXHUwMDE5pfXNzon6epCv6G+t81x1MDAwNopM/qmeSzdKqas9TV6xXHUwMDAy8kaI5ckhkHJpyLcnT8pcdTAwMWHpPEi1XHUwMDE0Rsvl8iSATkBkrM//a8aJf1x1MDAxMvNcItdtXHUwMDBlXHUwMDA0/lx1MDAxN1x1MDAwYlx1MDAwMzSI5yM/k4H5cs/g7lx1MDAxOJqi4HHApGNDn+/ulvf38o9cdTAwMGbly1x1MDAxM7v1vWefXHUwMDBluzdfXq77+fzbb0P9UDtjgJc2XHTvhlx1MDAwNpuTzzl7mGDyO0+Ge9UvVrudIPWAV+LtXHUwMDAwP9X5ilx1MDAxMZaBtzVcdTAwMGV74thcdTAwMTaRpzRcYjBcdTAwMTjrVjM6rT31jTtcdTAwMWI6uus3avXe0HD1sUn989nGuy9cZuh5fcVrhq7crNcqzb52XHLKw5COakW//nK6USuV4kq+SFx1MDAwZvfpXHUwMDEzO/uz6OZWp1apNf16ftC2JazKlLCxZuQsky2dnfucibNN0auD3GiI7c7DztNcdTAwMDO/a6ZdzFx1MDAwNFwiiVx1MDAxOSlsziwoXHUwMDE0w6E4XHUwMDE0xrMo+yFcdTAwMDUgeK8uXHUwMDEyh8LTTFklXGaToKScXHUwMDE0i+PcU9pKbUnyXHJcdTAwMDNmx2NxKFx1MDAxNbXXmnnEcCHrk1x1MDAwZVrEWWL4XHUwMDAzhJRcdTAwMDaQ3P6ZXHUwMDAxfHC2KcOL6Nthpn2OXHUwMDA15V/dV6r3f/+8x1xmIFbSM8BcdTAwMTVcdTAwMTB7N9rYYVuByDyJZCVcYlrWWFx1MDAwMtdS7FxiWZFJPclQeIzcXFxcdTAwMTIoJS11PUxcdTAwMDAweORBanJ6ibxcdTAwMGIjzSh+OWlcdTAwMWOpXHUwMDE5zuNhrjV8XHUwMDEzWVx1MDAwZVjqSnLI2OzwbTX09fZ2ttjL3NbuNkVcdTAwMThcXFx1MDAxZUo/7fpXcu2Ri0lcdTAwMWVcdTAwMWYpNOByXHUwMDFjuoygXHUwMDA0XHUwMDFjOCNcdTAwMDeUL1x1MDAxNcH7XHUwMDFkXG6YMcmN4UZ/XHUwMDEwXHUwMDA0y+T5PMWJunJtZvdLg+2Tk30ondejnVx1MDAxZvLxurXFi9dmXHUwMDFkXHUwMDE0sETjcSFQgVx1MDAxMJprMCMoXHUwMDA2wo22StF1xDFSq37pXGZcdTAwMTNcdTAwMTaIQ3xcdTAwMTD0qsTgtJFSxVxy6WvQLdT3KmdcdTAwMDeb96fFQGm1n+ncdjN3aVe+XHUwMDAwzCNqa1x1MDAxOTjSKKRcdTAwMWVcdTAwMGVOo7BcdTAwMWVjKDRKXHUwMDAxXHUwMDFh5OqczDdSvmQwrTBcXHxcdTAwMTD4XG6ZXHUwMDE4XHUwMDE0JFx1MDAxMWdO+9qZXHUwMDAxvHt4e3pZzp0/tJqN/ePK9SPb7lx1MDAxZa+D7nUgNlx1MDAwNFFitprQg6PK17lwmoNVTFxuS65cdTAwMWMug+J/XHUwMDE4ZVx1MDAwMjshfv1cdTAwMTbql8yHm1x1MDAwMjRcdTAwMWaE/VxuTI4+SO2yo+RcdTAwMWNJa2fnu5eH29vlXHUwMDAzfVx1MDAxNlRcIlZu4o/N9CtgRbzBcMVcdTAwMTjXqK1cdTAwMWVGLpFfXHUwMDEwXHUwMDFjmJFutmOFXHRcdTAwMTZvo35dhlx1MDAxMCNcdTAwMDb/QbQvxnyVUfKgLLWC4eza965Z7+BBuVuA4kE2f3GQffpRTprZTpf2VS7zhli+1eSxas3GMcystYJ4XHUwMDA0MSrUy8VcdTAwMWVWqX1dviZIXHUwMDBlXHUwMDFmxHNDlpzdpvv5fHaOXHUwMDE5xd5pMTRFznd2s51K5nLv5OvGblLKcGq0L+fWI8IghZtHUVxc4Fxidok5SKZcdTAwMTDRzX2DhKWYw+/gv1x1MDAwMP08zY+igE1y7EGgy5+Nx9deQzDkq6adLVx1MDAxN24u9+5cdTAwMWHb19nKg9pPQdL7bCgmssQ5aWF0UbIxXHUwMDEwI1x1MDAxZFdSo1Nvy2VvrFL/KlwiOvTNPlxi+0WTXHUwMDFj+yW/jaivkLOjt3rQyYeNw/bOWXi3u5FcdTAwMGZt8VtcdTAwMTZTr3+N9lxiXHUwMDEw5LZcdFx1MDAxN26B8ehcdTAwMDO4XHUwMDE4XGZotDruLKRU+yrSOZqA9EHUr9TJXHUwMDA0wjDUXHUwMDEwp1Kv4fe+yO5OK7WwsbeFm9cnd5FfbZXXQvtcdTAwMWFDXHUwMDA0V1x1MDAxYmktM1x1MDAxNuOZXHUwMDE4LyBcdTAwMTY0NuS/uUVYfLnMpJXyX+E+wX6U2K9MzpyHflx1MDAxN7mMlpnxe+37aifb/da5rCt21oyAIT9Ku/5Fhlx1MDAxZVfoXCKmjjnwUeZgPcFcdNZklC1PfeqDXHUwMDEyaDR5mlx1MDAxZlx1MDAwNL5KJUZcdTAwMWaASa5cdTAwMTXOXHUwMDEzfrjZle3vR+qSseuef3WV2z82lfN1UL9cdTAwMGXC5KGRLTJWS8PNuPrlVmtcIsdcdTAwMDC4ZHL9SpWvZkyTz/1RtK/iidqXM6Vccqp4mspr8O12evuHXHUwMDE13Fx1MDAxMVet4F5vZXgzb3qp176qr32ZtVx1MDAxY7hcdTAwMTAxr/1F+2olhVx1MDAxNkwxxLRcdTAwMDd/wdL7WMnYXHUwMDA3XHSfUZcl6l9LbJBjXFzdvFx1MDAwNuDHvdtKeHPh8+vHXFw1v3lzXHUwMDFmXT9l10L/9leBgjbKXG5Ffc/lOIpcdTAwMTGFW+5O/2C5OYzVTr4xg1x1MDAwMqx8P5mTSan1XHUwMDAwidDlXGbBXHUwMDE5ojnm3W7bX4PM1VnQ/V45yD49Ni/CcmEt5o0lck9cdTAwMGLnsVx1MDAxMWqJXHUwMDAxj0RcdTAwMWaAk/7lXGKSVLNEmMJcdTAwMWRcdTAwMDRcblx1MDAxZlx1MDAxN0RubLRcdTAwMDdQZaPYXHUwMDA06Vx1MDAwMtBcdTAwMTg3mqvMrid/NVx1MDAwNpHFsutjXHUwMDFm8Ep2/VDPXHKS63HowlmT66NWOymzfuhcdTAwMDVG0+jZ9Cz6JFHSyYtbXHUwMDA10VFrxFx1MDAxY9lvW6J9b3PhUfugoDG30WlcdTAwMWSZncw6SFx1MDAxMlx1MDAxYfQss8LNYVx1MDAwYsVwNInTZVx1MDAxOXEpXWcoMlx1MDAxMlOWYS8jSpNoy7gkUWPcYtx5WMq6XGJcdTAwMTKkQZBgMUFcdTAwMDKZKEnkyoJi8VmtV1NB7ptf4ewqd1x1MDAwMUenbV3M5i+KrcZaXGJcdTAwMTKxXHUwMDE0cNEnRiBlio+LkbHOPLtcXDzF/1aLhIKcXHUwMDEyXHUwMDFiX4L7flx1MDAwNImnQZD4goKkk1x1MDAxN1xuK7DkW1x1MDAwM5+d3PXC6sPj7db53fX33Yvz5tXF1d7xWqSlXGJcdTAwMDaelsI4v1x1MDAwNInLjYpcdTAwMTLJmZGMPG9cdTAwMTJcdTAwMDNjkr2SpSRpklx1MDAxYjIuSeSSXHUwMDE4l1x1MDAxZP5cdTAwMWW5XHUwMDFkpkGScEFJSk4vUORcdTAwMGVYXHUwMDA1c1QuMVdcdTAwMDf4taDOiz/OXHUwMDFh55nocKdcXM111kGQOCrPOs+USVdcdTAwMDVCglx1MDAxYZMkblx1MDAwMazi2lx1MDAxNV5YlZs0kyhx5Vx1MDAxMu90LMfs/UiSTIMkyUXJnUmSJFJ+Uiszz1wiocvDo4ctc7b740T29i5yZYjqtbVcdTAwMTAlsjVcdTAwMWVcdTAwMTlcdTAwMWNcdTAwMDZE4MhcdTAwMWRcdTAwMDJtxkTJoGJcdTAwMDY12Wlr2GrcpFx1MDAxOa1cdTAwMTJcdTAwMTlPRoZxrnDYusiSSoMsqVx1MDAwNWVcdJP5XHUwMDFk00R7mJhjyX6mlM1sh+a8cZMrXHUwMDA03ZNWbvPworJcdTAwMTayxJXHXFzNLGt5v0TTqCwxz0pE1NZVfF2VKLFcdTAwMTlFXHRcdTAwMTmq91x1MDAxObzTaVx1MDAxMCW9mChxlrz+RLmiySDZ7GZcdH50wzB6aLDj8z14ZFmf5UpJ1S9SJUpCcY9cdTAwMTO3XHUwMDAzMJqTXHUwMDBlMSPRO2Y90iuuQFx1MDAxZFx00rRVKKuPOmhUXHUwMDFhLYjfXHUwMDEzdEAyw/DbJEmkQZLEXHUwMDEyxWRscja2XHUwMDE0ynKNZnbD1Ny/vTu4lFulzrm82snrS773mH/jXHUwMDE5/ZJcdTAwMWZWg1x1MDAwNFFiXHUwMDBiiZJcdTAwMDTjITdMMlx1MDAxN1x1MDAwZZdsJOrAhMcsXG6ppNJkqKfU4Sha7nN/qihNndN3XHUwMDE1pN1cdTAwMDNcdTAwMTQ3rmrNpNJlWnmayKawQjBqT9xxe/amXHUwMDE4J1x1MDAwZahQvZ3dej4xUrLsOdRkbOPh4TJ7XFyyt5uV3Yub3o5ccl/ebFxihn6n03pIYc0ySF6PS+4zMVx1MDAwMFx1MDAwMDV7XHUwMDE0+yravc0yntssfisp2/leOdkpJk1cdTAwMDelR1x1MDAwNJRcdTAwMTSeXHUwMDA1REt9bp1cdTAwMWIzJFx1MDAwMsJcdTAwMTJt45qTOpBcdTAwMTIlT15Rs6xcdTAwMDRALD9jSt0yJVG4+mlvZ1HWXHUwMDA345Ps1exF0bZq0elDjVx1MDAxOMw//2ey5VqsOtqilivenKnC+6tjJ0hvPFx1MDAwM2tsa1x1MDAwMtMvkzBHStr0oU5pSppC6TF62X6VXHUwMDEylzI5Yr9cXD14QSBcdTAwMTP0rfiUelx1MDAxMEvbL+Zxi1x1MDAxMo0w9CBcdTAwMTNPm1x1MDAxZlxis/Ikama50UowXHUwMDFlr/k6qMVJhpjFd5RIZVHCMPI70VatWao1K1+Gsoqet4XZn8Eg9CW22O1rbk+7jG3JXHUwMDE5aMuJdsjYRVx1MDAxNb9Nl1x1MDAxOI+4LVxyN/F+RaOtn89cdTAwMGbSloJm6fVcdTAwMTZNZ2lDLVx1MDAwMueZ0oOk1Vx1MDAxY21sqeVLk8Ajb11Zolx1MDAxY9KQbVx1MDAwMDueS1X3wyjTajRqXHUwMDEx9XyuVWtGoz3c78pNJ+LVwFx1MDAxZlNcdTAwMWH0UvFzo7qg7T5xWIlcdTAwMGZ++zyQlf5cdTAwMWYvv//7j4lXbyRj2H2No3fwgZ/i/y9W2FFPKSymjVuKPUf91Ivi9cHTRifs7FfK/KZ519RVm5RcdTAwMWSeXHUwMDFlJmKkJ1x1MDAxNaGNSctcdTAwMTSPr2v5xUS0p6VcdTAwMDRgVkvNpuSkXHUwMDAwKUO/sLguI5XpKdRu6p5+XGJpJySqXHUwMDE4XCLj5NhKrV1cdTAwMDaeVLFuet69QjO0Kp4/uUqeclx1MDAxNvpPcHxRr1x1MDAwNyivRKF1nrHifM24uJ1qzSWNylx1MDAxY8vbj/Ld7t2PTDPfXHQvXHUwMDFl7cVcdTAwMTM8QEGnXlx1MDAwMiR6iEBcdTAwMDZbWaflcZiLS4PkXHUwMDAxXHUwMDEy+pnb1YdjMlx1MDAxN19WXHUwMDAyJm4sNKGGsHSRUivecCZ8fUC+JFx1MDAxOe9FwX6z3Y1SQsZjzVmMjHNIXFzexFx00W5XojnSWKZcdTAwMGZ1Ssk4MOOJX8XXmDDkTVx1MDAwZlenkFp5XHUwMDE2hVx1MDAwMSO1ZdM2XHRbVnyJqlCPc86MsYbHp/hfhNlcdTAwMTJ5c3tHWGO4dcHkMdnWxEJcdTAwMTU19H1Q8en2IEZ8N4j5up3C0FxyoUFr9ThcdTAwMTfXnuHSXG43TSU1qlx1MDAxNyY4J1x1MDAxOZ/O0obdXHUwMDAz0vi/Qn9cdTAwMTJVrNrugIuvNfVOXHUwMDA0rPvaXHUwMDE4w+qbXHUwMDEyb56Y6kBcdTAwMWTNNeBcdTAwMWMxhLMrv36+fdPbPtBfe49cdTAwMGa7ufvd3lsvKp7GOlx1MDAxNtySS3jo0qxcdFmCSzWyuSFnrqKv1lx1MDAwMiXTgvh3Mu2QRYustFx1MDAwNPFcdTAwMTbcI34vgLqd+t5MmGJcdTAwMTJgPCW0KzFM9IjJ8Z04ibZcdTAwMGJt4uuaVslJXG7lw9ZtXHUwMDA3mtunnfLpcclcdTAwMDS3N42t9Vwi3skxcCBcdTAwMTJKqnCeXHUwMDE4+OZjq7jTuS40N+Do/vvtzs2VLrdTL1x1MDAwMZxxr79lXHUwMDAwMuVKQlxme56ESE/2tylSbqNcIm2SXHUwMDBim/CC8UWwXHUwMDA08eaTplUnXHUwMDEwb7fRXHUwMDE1zLVpwHvB+PK8e6e/jXN6iPdLe1x1MDAxNmPekFxck95tXHUwMDFlIIycI+11+linlHiTufBcdTAwMTi3RJtcdTAwMTVze9uO7NiHzPFcdTAwMDdcdTAwMGJCMUcweHJCxNLia0hRKCPIXFxcdTAwMTJNIco2gXlL44JLxlx1MDAwNbpcdTAwMTUqsmJcdTAwMTOkW1omh2pcdTAwMDGvM/Weblx1MDAxMoapN2Ouklx1MDAxNtFu5crzgIs7j1Nd8MiddDXPXHUwMDA1uVOAOFx1MDAxZXaeiX5PJ2tD9Jsxji40LJjWNGh2kFx1MDAxZftOXGJ4MnDd1zhkk1x1MDAxOPin5yd88dvt04iA9tL/XHUwMDA04VrpWV1cdTAwMGZe88t9LXjYmryjm9vU7dNzhzrFXHUwMDEz9Fx1MDAxN3D//PTz/1x1MDAwMcOHY8gifQ==  901245673BitSwitch()ByteInput()ByteEditor() <p>In the following code we will implement the three widgets. There will be no functionality yet, but it should look like our design.</p> byte01.pyOutput byte01.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label, Switch\n\n\nclass BitSwitch(Widget):\n    \"\"\"A Switch with a numeric label above it.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    BitSwitch {\n        layout: vertical;\n        width: auto;\n        height: auto;\n    }\n    BitSwitch &gt; Label {\n        text-align: center;\n        width: 100%;\n    }\n    \"\"\"\n\n    def __init__(self, bit: int) -&gt; None:\n        self.bit = bit\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(str(self.bit))\n        yield Switch()\n\n\nclass ByteInput(Widget):\n    \"\"\"A compound widget with 8 switches.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    ByteInput {\n        width: auto;\n        height: auto;\n        border: blank;\n        layout: horizontal;\n    }\n    ByteInput:focus-within {\n        border: heavy $secondary;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for bit in reversed(range(8)):\n            yield BitSwitch(bit)\n\n\nclass ByteEditor(Widget):\n    DEFAULT_CSS = \"\"\"\n    ByteEditor &gt; Container {\n        height: 1fr;\n        align: center middle;\n    }\n    ByteEditor &gt; Container.top {\n        background: $boost;\n    }\n    ByteEditor Input {\n        width: 16;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Container(classes=\"top\"):\n            yield Input(placeholder=\"byte\")\n        with Container():\n            yield ByteInput()\n\n\nclass ByteInputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ByteEditor()\n\n\nif __name__ == \"__main__\":\n    app = ByteInputApp()\n    app.run()\n</code></pre> <p> ByteInputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258abyte\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0\u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Note the <code>compose()</code> methods of each of the widgets.</p> <ul> <li> <p>The <code>BitSwitch</code> yields a Label which displays the bit number, and a Switch control for that bit. The default CSS for <code>BitSwitch</code> aligns its children vertically, and sets the label's text-align to center.</p> </li> <li> <p>The <code>ByteInput</code> yields 8 <code>BitSwitch</code> widgets and arranges them horizontally. It also adds a <code>focus-within</code> style in its CSS to draw an accent border when any of the switches are focused.</p> </li> <li> <p>The <code>ByteEditor</code> yields a <code>ByteInput</code> and an <code>Input</code> control. The default CSS stacks the two controls on top of each other to divide the screen into two parts.</p> </li> </ul> <p>With these three widgets, the DOM for our app will look like this:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nN1daVPjSNL+3r+CYL/0Row1WXfVREy8wdnc0OZo4O1ccsLYXHUwMDAyXHUwMDBijG1kmWtj/vtmXHUwMDE5XHUwMDFhSdZh2fiiPUPTLclyuiqfzCezslL//bKwsFx1MDAxODy33cW/XHUwMDE2XHUwMDE23adqpeHV/Mrj4lx1MDAxZvb4g+t3vFZcdTAwMTNP0d6/O62uX+1dWVx1MDAwZoJ2568//7yr+Ldu0G5Uqq7z4HW6lUYn6Na8llNt3f3pXHUwMDA17l3n/+yfe5U79+92665cdTAwMTb4TvghJbfmXHUwMDA1Lf/1s9yGe+c2g1x1MDAwZd79//HfXHUwMDBiXHUwMDBi/+39XHUwMDE5kc53q0Gled1we2/onVxuXHUwMDA1VET0XHUwMDFm3Ws1e8JSXHUwMDBlVFx1MDAxOcPDXHUwMDBivM4qflxc4Nbw7Fx1MDAxNYrshmfsocUr9nK7d9N9rJtm6eB43Vx1MDAwZs5L5+vhp155jcZh8Nx4XHUwMDFkiUq13vUjMnVcdTAwMDK/dev+8GpB/dfARY6/v6/TwkFcYt/lt7rX9abbsd+fvFx1MDAxZm21K1UveLbHXHUwMDAw3o++XHUwMDBlwl9cdTAwMGLhkSd7hWFcdTAwMGVQQY0xRIDR6v1s7/1cblx1MDAxY6GZltQoKpRhfXKttFx1MDAxYThcdTAwMTMo17/EXHUwMDE1q1V5KNllpXp7jeI1a+/XXHUwMDA0fqXZaVd8nK/wuse3b0xEONB117uuXHUwMDA3eFCa8PPc3rhcdTAwMTOliFx1MDAwNk01fz9jP6W9WeupwH+iI9OsvY1Ms9tohILZXHUwMDEza/1qXHUwMDEzVZ2Y+lx1MDAwNO5TKG1ksluVdndcdTAwMWJMUN7erizz48btaaVZXny/7p8/0m/7+ubO3vdye31cdTAwMWb2dlx1MDAxZb7V+MWe/H7sPsU/5dfnV3y/9Vj0vjv+wVx1MDAwZn61U/7O+ePekeeXvNXvlWL3fftbOIDddq3yqutEKlxyXFyDUSZcdTAwMDKXhte87Vx1MDAxZttGq3pcdTAwMWLC40tE4Fx1MDAwNCxj41x1MDAxYUGkzEakXHUwMDAwbrSRQlx1MDAxNkZk+iSNhEgyNURSMI6IIDJcdTAwMDKC3lxyXGadXHUwMDE2JClNQpKKXHUwMDA0JKlihlx1MDAxMEXk2CCZoYVKXHUwMDBiqUBLoYbQwnC2W83g0Hvp2XaIXHUwMDFkXa/ceY3n2IT11Fx1MDAxM1x1MDAwN2j5OXDXev7m67+jI9lx8ZPtrYiOvWep4V1bNV6s4ndx/ZiGXHUwMDA3XHUwMDFlurD3XHUwMDBi7rxaLeqUqihIXHUwMDA17+lvXHUwMDE2cSYt37v2mpXGUZqcucB7XHUwMDA1flxu8lxiRIal31x1MDAxOVx1MDAxMqI1IyxyxSDs5du4ecWe0Fx1MDAwZYBUgilKXHUwMDE1NSBj2KNcXDqCXHUwMDE4oVx1MDAwNbUjolQ2+KD3XHUwMDFhXHUwMDFkfEY5QDgxXHUwMDA0lOT4k0SiXHUwMDEwXHUwMDBl2lx1MDAwN4WAXHUwMDEwXHUwMDFhgCnSXHUwMDBmTHtKgpHDuMrQqfxSXHUwMDE4+nbknynDtVx1MDAxM1T8YNlr1rzmdVxcsDfOV1x1MDAwNCf2O1fa1q04hlx0nFPKcUg0ZyxyxVWr2rXfo1x1MDAwNFx1MDAwZcd5XHUwMDE30nAj0c1IymTiy7vN2mChLq7u/aP9l2Zru37hi43qQ1N8f0xcbmVcdTAwMWOCdp5cdTAwMWHG0KArSXm6UIJcdTAwMDHHadRIzigorlx1MDAxMjI1Kp1gpXV351x1MDAwNTj2XHUwMDA3La9cdTAwMTn0j3FvMJcs8utupdZ/XHUwMDE2v1P0XFy/iWjbO8apUvi3hVx1MDAxMEG9f7z//T9/pF5dylJs+0qodHi3L9HfWbYtl+tTKmX/4Xf7XHUwMDA2SC6oXHUwMDA2XHUwMDE1erxB9i1/jmdi39Qg86aII1x1MDAwNdVUcEMojm+c7DNcdTAwMDKOMlx1MDAwMq1cdTAwMWLHWUDjJ/rkXHUwMDFhn3UjOiQ171x1MDAwNi1cIv4vXHUwMDBihryTcsZDXHUwMDFmO1x1MDAxYrJ/6W8/updcdTAwMWKb9eP6snfmnrfXl1fOZk32L7rPOytwt/tcdTAwMWPcd8pAXHUwMDFloHJTL81zXHUwMDEwMZI/XHUwMDE4KYigVOssqGtmJEFcdTAwMTdQnMmkz/6cI13mI11MXHLpTCWRLpNIXHUwMDA3gaKCoWND+qRjiEi4MyCGWPnF7L/+bNpcdTAwMTNV9NdcdTAwMWS38/fPxaDV/rn4s5lcdTAwMWVZXGJcdTAwMWW703vg0HCvgtHjilx1MDAwMW6rP64oIPtcdTAwMDc8slxmeVg/TFx0Rr+AlEdcdTAwMTfH6crhnqqdbHzb89ae2lxcb7i+u+TNe/6NXHUwMDEx9MlcdTAwMThYIf9AXHUwMDAyQkGyXHUwMDE4UjlnjqaMIDUhXHUwMDFjgOpMoH442jeQXHUwMDA0qkpE+5Io4JJFvtdsXFzyzfpccl8+u1/deKhcXH6/a+12N48vr4q6uJuLk12x3azed4+f6jdUXHUwMDFk3d22XHUwMDFlxuA6XHUwMDBmbsr153OvfHrbeVhT61stf3XDXHUwMDFiw323r6ube+tcdTAwMGZPasv9UTnaa+/drWP8MS6XzFx1MDAxNGOhXk3KJUtNM7HOuOGaUiiO9fTpn6lPLoB1XHS5WEd6zlwiWFdcdTAwMTPDuklL7CV8sjXBlKE846Pf8+OUbcJss9nuXHUwMDA2WXm9XGbv+9G83lx1MDAwMCeVltf7JebojpYh581cdTAwMDKfMMC1UkNk9nboXHUwMDBm/2bHXdl9WuvSMrku7Z+Wm/PuZylTXHUwMDBlXHUwMDE4xJbgXHUwMDFh/zPxxJ5cdTAwMDTiXGKNJopcdTAwMTjFpFx1MDAxMlx1MDAxM3SzJMXNykTujjD0sdJwOevQl2JQeVjdO395emr5vPHy/HJ/dTRrP3tx841cdTAwMWVtPK2xTX/l4rl+u+5cdTAwMDdwPob78v3DXHUwMDA3s7NcdTAwMTI86lx1MDAxMu8snWnXK2k1Lj+rqWZcIlT4XHT5WcZ19pI2hnpcbqO+SEZ4XHUwMDEw1tOnf879LOU8XHUwMDBm65Q6MFx1MDAxNayblKx90s1SQimyXHUwMDAxXHUwMDBl41vSXHUwMDFlp1x1MDAxNn7QzXrB4aNcdTAwMTdU619hun52gJNK+NmInFx1MDAwYlx1MDAxZlx0aVx1MDAxNWR6WoywMJzT0lx1MDAxNF/AfvK8yr1/e3dSWq+wXHUwMDE3ft899PZmvIgmXHUwMDA3pp7AXHUwMDExxiiOP4wzwXhcZn2cI8lVlFx1MDAwMVd4XHRcdTAwMDOSzXI/nHoyPIk/naS5XHUwMDA06ZEydIy5p9FcXO3a/snN7qM8XT2g66XT1WD7eUOuTSFcdTAwMWI82HVNKWurc7CjqUKFkUOkg9KHc86xI3KxI+LY6WfP41xcnyFJ6CSztkhmmcJIVY4vXHUwMDFiND9cdTAwMTHia9j1mvbslSrWW42a6//9c/FcdTAwMTKDss60XHUwMDEzt1x1MDAwM1xcQb9DKyR9LkwzXHUwMDBiRVx1MDAxNCGZMLWL2ZrpyIrdwHXUXFzDNadcZpNI5lx1MDAxMFsqXHUwMDAwXHUwMDA2tZ/RXHUwMDE4TJm2oSaA0JZeXG5cdTAwMWVZdlx1MDAxZTdOwaFcdTAwMTRxITV+XHUwMDE0YsPoXHUwMDE0jyeYXHUwMDAzQjFcdTAwMDCNYT5cdTAwMThcdTAwMTFBwHuih4PNtqthKrg+XaVIwaJcZulQw7mixtbgXHRJZFpVXHUwMDA2OFx1MDAxOEpJW4kqUG6NLMYkvnyhSpF8VL9cdTAwMGJFcJ654UJcdTAwMTBbmWKkyKhfXHUwMDAxblBcdTAwMWKkoTjjSlFJXHUwMDEyUn2qWpFs9bavpGKHN/xcdTAwMTL9PbSFo1xcZK5cdTAwMWZcdTAwMTODNIUoPVx1MDAwNIvPT4PMqYljWjvSXHUwMDE45F2ao1wi0ThcdTAwMTVBaDiK4yBQsGUz0ULtcVx1MDAxN8JRXHUwMDA3yZ8gqM5MUqHCiVx0iVx0d4iU1GhGgWiTXFy00ohcdTAwMGIzY/uGcpFIiD9++5afWY7bXHRcdTAwMDaaIZxcdTAwMTjYKmI0/ilW0NixJoxwUFx1MDAxY936aOYtP1xuj8uEQ8RcYrJeXCJ6dc9JmexKqVwi1iRTYVx1MDAxZFx1MDAxNv/cxi1Tse0rodJDmrb8JFx1MDAwNc+u9MVcdTAwMTkgXHUwMDE0lVx1MDAxNYrnXGJ3L1a+lcs3zD+puZetnSXxtNahc15cdTAwMWbDwDjoVDRDXHUwMDAzJ1x1MDAwNbKPOIMj3DGMgFx1MDAxMpzgXHUwMDBmzsLkXCKtVINcdTAwMTZJirwlXHRcdTAwMTFcdTAwMTNcdTAwMWMjv1kvXHUwMDA3bJ2s3DWvK8es/qw3ZGX95P6YXHUwMDA2s15cdTAwMWX/XHUwMDFkKtY4z2RcdTAwMWNI5jgyXHUwMDEyXHUwMDE4XCL3kT5Nc1x1MDAwZUkh8iDJtMOnXHUwMDAzSV0obY9cdTAwMDabXHUwMDAzj/Ki3yf1XHUwMDExVn1NN2k/wJNkXHUwMDE3p4285yW6kbBcdTAwMGZ2XHUwMDFj41x1MDAwZWLZbWHU5du3OeX5XHUwMDFjtFx1MDAwM5pcYs21pHh5nOczbVx1MDAxYyEw1jWogISTSEZy/LlcZoZ2TuGAI8pcdOEqJVx1MDAwNckxOqfCbv/UWuNcdTAwMTU6uVx1MDAxYk1cdTAwMGKD0IzuZfpccnNcdTAwMTn5QInzalx1MDAwMkJyYFx1MDAwMlVcdTAwMTlcdTAwMDNpmuTVysGJ14ZzrnrUO5k0KMT1XHUwMDBix1x1MDAxZuBgyI7ScMlQ+YxkJpbOeFx1MDAxNVxuldIuliE1XHUwMDA2IGj4PzfXz9Zt+0pq9ZBsP9u+oYPKsm+Ca/u/LJ6qzedZc2rfcMxcdTAwMWSltVwiXHUwMDFjObTk0X3mr1v6LOtAdkVcdTAwMDBpXHUwMDA3V5NcXFSh1JGglOQ2KWzT5CnMn6HeS6KYZFRcdTAwMTiI7C59s29cXKJcdTAwMWVcdTAwMTk6VLHApzNvhTf1UVx1MDAwMTiQhNg9myotJ1xuXHUwMDBlx1x1MDAxM1xubZvhQFxig1x1MDAxMXf0XHI0uL8kslx1MDAxYslcdTAwMDBQjVx1MDAxOLHqlCqSoIg80au8xVA8ZZPhZ7Jt2VptX1x0fVx1MDAxZdKy5Zc1yki7ikSaXHUwMDE2Z5zhNFx1MDAxNN/Rx5fXuydrm62V04p7UX95MK2no/05XHUwMDBmmohgjpBMqN6ym2AsXHUwMDFlNSlGXHUwMDFjXHUwMDA13O5lRf+OqjY541asrlEjhVRy9u076lx1MDAwZlx1MDAxYvewXq67bOX2qnbaofWDy4PfvfwwXHUwMDFhNE+q/FBFdnb2QVx1MDAxMqmcXHUwMDEyisjiXHUwMDAxVfoszTlcIqXMRaSgXHUwMDBlnVxuXCLT1oKTaVxmLa2QZjo1/kPrYDjVo6QxdiqXbuPrz0X4ufjvhakmMlx1MDAwNriS/kRGXFzQXHUwMDBmOEStMkszKJJcdTAwMWZi2DBcdTAwMWLqXHUwMDBlzrfcs+f7Yyit7m6elPeuyrf1kzmHXHUwMDFm1cg4rLZJXHRUXHRcdTAwMTJcdTAwMDdcdTAwMWa6Q0OQiFCMXHUwMDAzlJi5N1Q4I2Cj4Fx1MDAxOXvD/bVcdTAwMDefL61cdTAwMWZcdTAwMWRstq+6Tb3JO+V9PVx1MDAxZl7LkGhcdTAwMTOWSXktozKz78hsXHUwMDE1V2irXHUwMDBiwyZ9NOdcdTAwMWI2XGYsj8yCXHL6LD5cctjIlK5cdTAwMTApLsvG8kzy6dTLXHUwMDBmq4BcdTAwMWZzWW9F6FN2V1x1MDAwM1xmfb+7XG6FzEVbdlbKiEw3hbGxJU5miEYsuWx8XrNSXG5pIJpcdTAwMTZGXHUwMDE1XHUwMDExOtqAoVcnrLjDNZ5lXHUwMDAwljH3yzU+xFx06ShJXGIyM2X7f6mUjaE2O8mRI1wiU1x1MDAwNIPxNEvm3Fx1MDAxNcG36qhlmEF9jaJ6tI0tXHUwMDA1k1LD1LIwu5hiXHUwMDA3lnDbtimSXHUwMDEyXHRrWVxmgM1cXDGMXHUwMDA2XHUwMDAwVT7x5Vx1MDAwYuWl8olmXFwornBcdTAwMTJccqBMVEguaVIocIxdf+VS4JByopNCfabMVClTue0rqdbh/b5Ef49QPZhTXsOBMsX0XHUwMDEwW93z+dW82jejUd9Q4yjYoSe0b1x1MDAwZp7CIJlcdTAwMTnCJVx1MDAxOE3BTM7AcVxmXHUwMDA3mN1Qj26FoUFlKVEx5460+1x1MDAwNFx1MDAxNcFYWEqW4OnUNiuj3JjZXHUwMDE2XHUwMDEwXCJcdTAwMTOZZNa9sIGzffKQMFx1MDAxYZtXt/tyeKxz3ZstYY5cdTAwMTFcYitbISGYXHUwMDFk99FcZlxcPjWJXHQlXGJcdTAwMTFcdTAwMDS0XaCgXGIxkpRcdFx1MDAxY2XLqI0t39WA4n1q+5at2r2z/Uo9pHlcdTAwMWKQeYfsblx1MDAxZb2F5KF6hZ7cXHUwMDFmXFysLYlD+dgodVx1MDAwZk42Lk7rL4ejmbjpdVx1MDAxNEDn4dhcdTAwMGVcdTAwMTmcXHUwMDBiTanS8ZhcdFx1MDAwN8hRXGZcdTAwMDRcdTAwMDBnyI50dtA0rY5cdTAwMDJcdTAwMTKhoW2XlbGFTe9cdTAwMWE1VLKhc7ZVW/Jqa+Z4/9ErLZeO5OXZ9lx1MDAxNDrh5N634ZLzXHUwMDFk0Tl9MFtcdTAwMDcvXHUwMDE1v96+WSndjeG+3aPmcX1rp7y0XHUwMDEx1O9fSof+j63zsW3L1EyISMg8qeSINJlduoSxLbmH6VxunDr5c05muGF5SKfMoVNBetp+5pS2PcCR3JNxds1cdTAwMWOnXHUwMDBlhnP9sX5cdTAwMDJquqWJXHUwMDAzXFxUdj9cdTAwMDE1cpqEyuwulkTbsihFSPE8Sb7pnFfoMeIwRjFcdTAwMWVlxvbcVvE4QlDuYEBLMNzoXHUwMDE5oslVJ2JcdTAwMDTg2MpcdTAwMGWjgCkqIa2Fllx1MDAwMlx1MDAwNykos5V0XHUwMDFhf6KlRG9xXHUwMDA0Tlx1MDAxYTBOh+rqM/Y4QlxiSkfKaI57I1x1MDAxMjhUXCJZx+jbprq0MskwQjjEXHUwMDFlN4RcdG2f/ZBk7IWiiHz0xqNcYklt/Vx1MDAwZVx1MDAxN7ZcZl0xlVx1MDAxMEk7XHUwMDEyY1x1MDAxZmVcdTAwMWK5aUWJTM7GZ1xuXCKy9dq+XHUwMDEyXHUwMDFhPdYgQqvMVkVWJ1RsZ/Ug81Zb3VIrRy+Px7v3z3urm9v+9f7jjDtcdTAwMTVcclxcdeFUOVxmXGZD48VRoYyMW7de9Vx1MDAwZdo1MDaLRcRcdTAwMDStW7FcdTAwMTiCXG6NTidatDCbXHUwMDEwgtzfXHUwMDFjlLdWa+X25Vn1uHPaZJuXT7831Udzwya+XHUwMDBiXHTNWnZBXHUwMDFkKG2fVjBE5jJ9muZcdTAwMWOSnDg6XHUwMDA3krZ8ZyqQTOvAkkL2kVx1MDAxYtk1hOl0YFx1MDAxOVpcdTAwMGI/RvZ/lcWoqdfvXGZwJln1O+qj9TsmO9TWUvPeWlFh+Fx1MDAxZEO9Jsjyj4fjhzOoPnWPbneuunNcdTAwMGU/ZF9cdTAwMGUyfeRV1G5cdTAwMDeH/vpcdTAwMWS7tIaUXHUwMDEx9dDk9Medkju0JVx1MDAxMchcdTAwMTWVnnVKbf3+XHUwMDA2bpmskcf79o/d5TX329Nz4c5hXHUwMDEz9Vu2gymfuN+yj8fJ9FtcdTAwMTTokHVv6cM558DR1NHZwFx1MDAxMeDoKVx1MDAwMKdYXHUwMDAxXHUwMDBmwUBdXHUwMDE5JulUMlRDq+DHnNZsKnhcdTAwMDbY+vFX8GSXeWtkioxcdTAwMDEp3lx1MDAxZiefkc9pZsp2wLG8XHUwMDBiXHUwMDE0aIK0MN5cdTAwMDNMKoaAY1x1MDAxYc+B4Vx1MDAxYbKbzH54gdtcdTAwMTJSYXu54MdQalJcdTAwMTDIpW0mQoxcIr0nN5DEU1W17fIuh2s2Pe60lEGNXHUwMDE56jFcdTAwMDSRXHUwMDExLZSWKpxcdTAwMDOybaeEwbhcXFx1MDAwMtJdXCIjnfhcdTAwMTdcIkvJtm8oKIlRkaIjPykun2jGheJ2kLTtXGbJKfL+lDV34iiGsVx0Z0Joxpn55Fx1MDAxZHIyVdu+XHUwMDEySlx1MDAxZN7uS/T38Gl3XHUwMDE2cZ79xcD24YHUXGaxZzafXc2rbVx1MDAxM9ox9slrRCvOXHUwMDE19Fx1MDAxN+9oRzImeoVcdTAwMWaCkcl14kBcdTAwMDVcdTAwMDD7uC6tKUFcdTAwMWIlU9a/mHGQ/YHtQsqZ3Vx1MDAxY9tv26Tdi4k2epZcdTAwMWJmR6cg47ZtNn6SYG2IsrUhXHUwMDEwZmBDK8JcdTAwMWRj60okXHUwMDA2o4xSKZJcdTAwMGacLGTa8ilJXFwmxlx0t9V46E2FTjFsXHUwMDE4XHUwMDE0okhUo1x1MDAwMUT+ysTnzrlnqrV9JVx1MDAxNHpIu5ZcdTAwMTUjXHSZmWy3T3lcdTAwMTmi39fz877ZbW3uXpOT/c7SycqZ9+1ged5NXHUwMDFhU8ThvTJPaqjdnFx1MDAxZDdpgCaNgCUhhGnOJ/dQbZPymHuRiJC4ffpcdTAwMTmHKVx1MDAwNUh2q/pIzGukR2o7jvOz+ZUsXHUwMDA0db+7INNX8SNcdTAwMTMwXFyYXHUwMDE0tNpZMVLsXHUwMDBi9Vx1MDAwN0T9Qr1C7MtcdTAwMWKEXHUwMDE3K+32YYCj9m7ucD682ttXXHUwMDBmb7z44LmPy0mN+NdV72Xv2oOtxYjbczT/fPnnf+6uXHUwMDA3ViJ9 ByteEditor()Container(    classes=\"top\")ByteInput()BitSwitch(0)Input(    placeholder=\"bytes\")Container()Label(\"0\") Switch() BitSwitch(7)Label(\"7\") Switch() ...(1 thru 6) <p>Now that we have the design in place, we can implement the behavior.</p>"},{"location":"guide/widgets/#data-flow","title":"Data flow","text":"<p>We want to ensure that our widgets are re-usable, which we can do by following the guideline of \"attributes down, messages up\". This means that a widget can update a child by setting its attributes or calling its methods, but widgets should only ever send messages to their parent (or other ancestors).</p> <p>Info</p> <p>This pattern of only setting attributes in one direction and using messages for the opposite direction is known as uni-directional data flow.</p> <p>In practice, this means that to update a child widget you get a reference to it and use it like any other Python object. Here's an example of an action that updates a child widget:</p> <pre><code>def action_set_true(self):\n    self.query_one(Switch).value = 1\n</code></pre> <p>If a child needs to update a parent, it should send a message with post_message.</p> <p>Here's an example of posting message:</p> <pre><code>def on_click(self):\n    self.post_message(MyWidget.Change(active=True))\n</code></pre> <p>Note that attributes down and messages up means that you can't modify widgets on the same level directly. If you want to modify a sibling, you will need to send a message to the parent, and the parent would make the changes.</p> <p>The following diagram illustrates this concept:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1bbU/byFx1MDAxNv7eX4HYL3uljTtvZ14qXV1cdTAwMTHabmm7QFx1MDAwYrS3vVpVJjHEJYmzjlx1MDAwM6Wr/vd9xkDsxHFcYmkoUF1LpYk9XHUwMDFlXHUwMDFmz5znec45M/n70draenY+iNafrK1HX1phN26n4dn6b/78aZRcdTAwMGXjpI9LXCL/PkxGaStv2cmywfDJ48e9MD2JskE3bEXBaTxcdTAwMWOF3WE2asdJ0Ep6j+Ms6lxy/+P/boe96N+DpNfO0qB4SCNqx1mSXjwr6ka9qJ9cctH7//B9be3v/G/JujRqZWH/uFx1MDAxYuU35Jdcblx1MDAwM6W2bPr0dtLPreWGXHUwMDE5LomsXHUwMDFht4iHT/HALGrj8lx1MDAxMYyOiiv+1Hp7I1x1MDAxOVxmXlx1MDAxZf4uP71qXHUwMDFldk5cdTAwMWJCfNz5XFw89yjudvey8+7FWIStzigtWTXM0uQkelx1MDAxZrezztXQlc6P71x1MDAxYiZcdTAwMTiG4q40XHUwMDE5XHUwMDFkd/rR0I9cdTAwMDBcdTAwMWafTVx1MDAwNmErzs79OVa84MUwPFkrznzBN6VYwPFHSSdcdTAwMWOXjunxZd9cdTAwMDHOXHUwMDA2TFx1MDAxMmdCa+Gc4VOGbSZdTFx1MDAwNlxm+4WOZLulXG7TXHUwMDBlw9bJMezrt8dtsjTsXHUwMDBmXHUwMDA3YYopK9qdXb4yJ1x1MDAxYmjmpOKKlDFE41x1MDAxNp0oPu5kaGJN4Egz6yRcdO6kdoUxUT4rVlx1MDAxYiVcdTAwMWOZYvi8XHUwMDA1g6127iF/loet375cdTAwMWO2/qjbLYz2XHUwMDE3nk17VdmzJrwri75cdTAwMTRvUvKEdCdcdTAwMWWdb1Bz1Njdf7v59Vlj820nXlx1MDAxZrf79tvsbi9ubkafs99Pn37gpn9+4I6V2Op3pp5y9fwwTZOzRftcdTAwMWQ4+vzcbDe/dj+yNOp8lVx1MDAwM2lcdTAwMGZW0O+zt9m2ftE8dPZsZ1s8c3uvKVmFve+fvZJvXHUwMDA3XHUwMDFmtYuy5qe9/us/WKPXWazfy0/FhI9cdTAwMDbt8Fx1MDAwMrhcXFx1MDAxYsuEs0qRLlxcvVx1MDAxYvdPpn2hm7ROXG6sPypcdTAwMTlcXGGZXHQ/KFx1MDAxM4w1NH16TDDWOSGVYHZhgpntVktcdTAwMTHMNI5vkWBcZlx1MDAwYpSyhitNmoQuXtffr7hccpzj3Fx0xom70mCsml9cXNH1mFCo8IBLXHUwMDA2IW1cdTAwMTiXJTO+l0BW6YPFTCf9bC/+6lx1MDAwN1vIwFx1MDAxOKOc0lJcdTAwMTitmJto9Dzsxd3zibnLfVx1MDAxNYO1m4/Tr/8qj+gwglx1MDAxMb5XZSfab3TjY+/P6y3cXHUwMDEypVx1MDAxM66exZDmcYPDJMuSXtGgXHUwMDA1I0L0mW4tXCKRSVx1MDAxYVx1MDAxZsf9sLs/beNcXPTN1XjFLK+FoDRcbjOxOFx1MDAwMF80P785y87Tk8M/PvRenGyop6/l2d1cdTAwMDLQXFyHP2FUoJ0w0mjOlZN8UuDJWK//Vlx1MDAwYoDTcuFqXHUwMDAxyPLjblx1MDAwNVx1MDAxZfZJRCpOr1xmn8tcdPxr2j7/LyUv9ejAfvncO2Bb7tPxzyrwbz5svd9I3iE0fNVP4iMxXHUwMDE4ZsasSIitI0xp4di3JMSIXG51XHUwMDFkXHUwMDBiQJtcdTAwMDRBf1x1MDAxNmaB2ZN/v1lAQmeVM2BDKa21JZnwt2tGXHUwMDAxlFx1MDAxY3PBXHUwMDE4Mabp1kiglEDMUWEr4Gyal7Kz25NheKDmdyfDm5242/7BKnyNjE2r8JWJ3yHC4PNaXHUwMDExhi44y1x1MDAxMFx1MDAwMS5cZkDqf+2evmxcdTAwMWOIvZPPO/uHZ+HWwba551x1MDAwMNRcdTAwMDJcdTAwMTCDe8DhhFx1MDAxNFx1MDAxNVx1MDAxMTZwXHUwMDFmidRVO01GqlvD30pEWCHFdkqy1cFzOVx1MDAxNY7C072NdP9Mmv2/tt8kfGh3mns/QNV+wnSYXHUwMDE0XHUwMDE38tZVXHUwMDE42VUtXHIwqaWU7lx1MDAwNvW22dN/z2lA+3zXh+NETDNpJnhAM1x1MDAxNVx1MDAxOMRDllx1MDAxOKJcdTAwMTI9p9r2Y3TYOKRcdTAwMDZCKLUyoK/SXHUwMDA3XHUwMDFmvFx1MDAwZV+jY0vp8Fx1MDAwNfZngE9oUa/BllxmyF6oxVPh+UnMfS12W1x1MDAxNzhcco+2UivLidRcdTAwMDT8oGtcdTAwMTBH4sxoq1x1MDAxOLPThlx1MDAxNfDjVqvw8DuKUSpAXHUwMDFjYJhcdTAwMDLtcTzRVNFoRIDQXHUwMDE00TozTlx1MDAxMKeKXGZjvlx1MDAxMFCQpZtUu1x1MDAwYmG58lx1MDAxOHF55ttyoF26hjXMwjRrxv123D+eNOxyVWeRilGO69bIW9lggVx1MDAxMFx1MDAxY1x1MDAxY8KJWbJWXCKyLzU7XHUwMDBlXHUwMDA3efhcdTAwMTNoLlx1MDAxZIfN1nKjuKy8fdRvX2/V/FxietIqXHUwMDEwkZPge8hcdTAwMWLhqFx1MDAxYeVcdTAwMDKtlOKwyFx1MDAxMUlesahcdTAwMWJcdTAwMGWzzaTXizNcZv1uXHUwMDEy97PpIc7HcsMjv1x1MDAxM4Xt6at4o/K1aYpcdTAwMTj4XHUwMDFlJ6Ow4tNagaD8y/jzn7/NbN2QNmCOw3G5VVx1MDAwZTGk1OX7XHUwMDE1hoOUVYj3cZVLc21/tUjxR1x1MDAwNSNFd4/K/9+YLJWoXHJUyFxi6Vx1MDAwNWbxOGV+pLlcdTAwMWGqbCfeOVx1MDAxNudKupYqSVx1MDAwNcz4ckH+skpPZiyai0AppoEgXHUwMDAxPiUzZdgqM1x1MDAxNlxuYIxcdTAwMTKet5mRZlx1MDAwNlfCXHJcZlx1MDAxN4asYX6lUlbL+iSVsfpuqXLp+GZBqrxcdClcdJJcZrNmpDbMKWZLsLpkJcFcdTAwMDLIoCGlreRcdTAwMDaR6XJMOT/GKVx1MDAxOcWCXHUwMDFj4dxIJpnmXG6onknfXHUwMDFhyavQxLWDUfSgybLetf1RcepcdTAwMWKSW1x1MDAxZbzO4DZuarnNK1x1MDAxMIaWXHUwMDE3VYHruK3RODxcdTAwMTl0e413nz703n462uc7NnyzXHUwMDFjt01cdTAwMTc9bi9cZoRPXHUwMDA3ym92IORcYkK5qWJcZiSHXHSGLFxmLlxi4qintpZcdTAwMTOhXGKXpzZJXHUwMDAxQWl8XHUwMDFjKiGYppSAjalccnpqXHUwMDEwqXCutJLWQVx1MDAwMitxoECw6inmzrhccjKAaEtcdTAwMTdcdTAwMTO4PLdNY7HmyopRPnFtxfFQ7Vx1MDAxY/ujOrsrXHUwMDAyuWD1q57EuGWalVxue9eh/JXZ33p3tN//a3evXHUwMDExd3Y/7vY2yzi+pyjnXGahKHNcdTAwMWF6XCJcdTAwMWSjyVJcdTAwMGI5XHUwMDFl+HqTXHUwMDE2mlx05Ma3XHUwMDA3cul11GJCuJRCilx1MDAxOeFcdTAwMGLoXGJcdTAwMTk4poWk1UaUmlxcVVxckUEohqt3inFokSpM+z/Gr47aXHUwMDE59kdlbm9cYvD6XHUwMDE0xcnps+NcdTAwMTRFwFuM0IunKPOXju9pNUdqXHUwMDFiKM9kklx1MDAxY1x1MDAxM0pNXHUwMDE2c0grjDyzSmryy1x1MDAxOfVrKpE25nsyXHUwMDE0K1x1MDAwMzyFM1x1MDAwYiVcdTAwMTZOmFx1MDAxOWsqXHUwMDA2TSxcdTAwMTfqosTNbaWY44zz+UkxXHUwMDEwP2Ep5yb5XHT32039tjHpk49S4lbkXHUwMDAy0pfymN9GZ1x1MDAwNMPs28rbL5Sg3KjAhEArz4c1hEXzqk0skPA0MLVcdTAwMGaJyIxcdTAwMGJcdTAwMTJcdTAwMGYzP/HFdMF93VxuaVwiXHUwMDFj1JXvbihcdTAwMTko5vNIvKt23OrruqvFSd5dXHUwMDA1XCKrXCJKcHLtJkxcdTAwMTCHVCRcdTAwMTYve89fhbunREkqr0JcdTAwMTJcdTAwMTG3xu+PniBK5D+B4yRcdTAwMTTmXHUwMDA1woHxqGXK7y17I71Hwmu19lm8sULPqnv7QoBcdTAwMTVcdTAwMDC+c1x1MDAwNKtLw3RcdTAwMTlcZjGEyoIxW9j5XHUwMDEzXHUwMDE2c1x1MDAxNqYlsJIzoCUlXHL+Icx1pVxm44qXMMPgLtKCIVx1MDAxM1x1MDAxMXrJqvdccmo5/udcdTAwMDJKYKqM407MsIhcdTAwMDXgUWNcdTAwMTCngDyMIFMx6SExpVx1MDAxNFx1MDAwMahcdTAwMTDqIJj0xepcdGqTKlBcdTAwMDZcdTAwMTFcYsf0cKmEvK63epj4o1x1MDAwMpBVXHUwMDExJWZrzs9hpDQgS7Z4TDl/I8Q9pUptKPDcXCKl31x1MDAxZlOiwjykJFx1MDAxYvhanZXI11x1MDAxOVx1MDAxOODWQkpHgfNLQlpcdTAwMTE8h5XixTFPalx1MDAwM6+CjVx1MDAxMpE+VNNUat7cec1G9Fvc/Fx1MDAxM/LkTerLXG40o1x1MDAwNVx1MDAwNtRxSZzPiCldQIjsuEDCRuAtW2Wl1caULIBNiLBcdTAwMWPYm/zCs6pcdTAwMTbiPVU643dDglx1MDAxMrhGXvOgqbIhXHUwMDFj0mXn02XwpCPi5dtcdTAwMWKKw/MtoCfhv1baa8myUYuV/GpcdTAwMDUmN2TLur1Mtv6HPbBcdTAwMDQxp6XC7a+jyk7nTTM92n16MNJnh9REYrT//PzeUyVcdTAwMDZcdTAwMWUyZIB0+G15xfTqh4O+oCm130RcYlx1MDAwN741ruRyxi97RKVMzpGpSFx1MDAwZeYuLLm1zUxcYscs5Hupgnh5M1x1MDAxM5s4O2f3Ulx1MDAwZuaGx9Fw7dfRYPZcdTAwMWUmXrOHqVx1MDAxYlx1MDAxZE369+RcdTAwMGWmLFx1MDAxOdRtX5p4mem9SpNcdTAwMDYthTBobFx1MDAxZMSQYlvos1i8gp18jJ/2qdGmdCS2XHUwMDA2zVx1MDAxZGaH2+9cdTAwMWVcdTAwMDLCXHUwMDA09EprST66nMrbiFx1MDAwN2SsX1xi9Vx1MDAwYqeO32LeZtRCXHUwMDEw035DkrP6x0DMr1UuVY9eXG5iYZal8eEo8z7dTs7691x1MDAwMmZVoy6g9uhSLtfDwWAvw7iNg1x1MDAxNcxI3L58+aLr9dM4OmtWveKXo/zwvebw9UCJ8jjx26Nv/1x1MDAwMC2LavoifQ== Parent()Child()Child()messages (up)attributes (down)"},{"location":"guide/widgets/#messages-up","title":"Messages up","text":"<p>Let's extend the <code>ByteEditor</code> so that clicking any of the 8 <code>BitSwitch</code> widgets updates the decimal value. To do this we will add a custom message to <code>BitSwitch</code> that we catch in the <code>ByteEditor</code>.</p> byte02.pyOutput byte02.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.message import Message\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label, Switch\n\n\nclass BitSwitch(Widget):\n    \"\"\"A Switch with a numeric label above it.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    BitSwitch {\n        layout: vertical;\n        width: auto;\n        height: auto;\n    }\n    BitSwitch &gt; Label {\n        text-align: center;\n        width: 100%;\n    }\n    \"\"\"\n\n    class BitChanged(Message):\n        \"\"\"Sent when the 'bit' changes.\"\"\"\n\n        def __init__(self, bit: int, value: bool) -&gt; None:\n            super().__init__()\n            self.bit = bit\n            self.value = value\n\n    value = reactive(0)  # (1)!\n\n    def __init__(self, bit: int) -&gt; None:\n        self.bit = bit\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(str(self.bit))\n        yield Switch()\n\n    def on_switch_changed(self, event: Switch.Changed) -&gt; None:  # (2)!\n        \"\"\"When the switch changes, notify the parent via a message.\"\"\"\n        event.stop()  # (3)!\n        self.value = event.value  # (4)!\n        self.post_message(self.BitChanged(self.bit, event.value))\n\n\nclass ByteInput(Widget):\n    \"\"\"A compound widget with 8 switches.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    ByteInput {\n        width: auto;\n        height: auto;\n        border: blank;\n        layout: horizontal;\n    }\n    ByteInput:focus-within {\n        border: heavy $secondary;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for bit in reversed(range(8)):\n            yield BitSwitch(bit)\n\n\nclass ByteEditor(Widget):\n    DEFAULT_CSS = \"\"\"\n    ByteEditor &gt; Container {\n        height: 1fr;\n        align: center middle;\n    }\n    ByteEditor &gt; Container.top {\n        background: $boost;\n    }\n    ByteEditor Input {\n        width: 16;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Container(classes=\"top\"):\n            yield Input(placeholder=\"byte\")\n        with Container():\n            yield ByteInput()\n\n    def on_bit_switch_bit_changed(self, event: BitSwitch.BitChanged) -&gt; None:\n        \"\"\"When a switch changes, update the value.\"\"\"\n        value = 0\n        for switch in self.query(BitSwitch):\n            value |= switch.value &lt;&lt; switch.bit\n        self.query_one(Input).value = str(value)\n\n\nclass ByteInputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ByteEditor()\n\n\nif __name__ == \"__main__\":\n    app = ByteInputApp()\n    app.run()\n</code></pre> <ol> <li>This will store the value of the \"bit\".</li> <li>This is sent by the builtin <code>Switch</code> widgets, when it changes state.</li> <li>Stop the event, because we don't want it to go to the parent.</li> <li>Store the new value of the \"bit\".</li> </ol> <p> ByteInputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a32\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u00a0\u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00\u00a0\u00a0\u00a0\u00a0\u00a0\u2503 \u2503\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2503 \u2503\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u2503 \u2503\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <ul> <li>The <code>BitSwitch</code> widget now has an <code>on_switch_changed</code> method which will handle a <code>Switch.Changed</code> message, sent when the user clicks a switch. We use this to store the new value of the bit, and sent a new custom message, <code>BitSwitch.BitChanged</code>.</li> <li>The <code>ByteEditor</code> widget handles the <code>BitSwitch.Changed</code> message by calculating the decimal value and setting it on the input.</li> </ul> <p>The following is a (simplified) DOM diagram to show how the new message is processed:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPiSNL+7l9BeL/MXHUwMDFiMdbUlXVMxMaGb7vb99l4e8MhQLZlZKBBPjfmv29cdTAwMTZ2I4FcdTAwMGVcdTAwMDTGgHteOtrYkiilqvLJfDKrsvjvQqm0XHUwMDE4Pre8xT9Li95T1Vxy/FrbfVxc/N1cdTAwMWV/8NpcdTAwMWS/2cBTrPt3p3nfrnavvFx0w1bnzz/+uHPbdS9sXHUwMDA1btVzXHUwMDFl/M69XHUwMDFidML7mt90qs27P/zQu+v8y/7cc++8f7aad7Ww7UQ3WfJqfthsv97LXHUwMDBivDuvXHUwMDExdrD1f+PfpdJ/uz9j0rW9aug2rlx1MDAwM6/7ge6pmIBcdTAwMWH44OG9ZqMrrSGEK0JcdTAwMDTtXeB31vB+oVfDs1cos1x1MDAxN52pdVx1MDAxZs9cdTAwMTfl/ZPjQ7ax/0Rf/MOL5tI2j2575Vx1MDAwN8Fx+Fx1MDAxY7x2hVu9uW/HhOqE7WbdO/dr4c3PnotcdTAwMWTvfa7TxF6IPtVu3l/fNLyO7YBI0GbLrfrhsz1GSO/oay/8WYqOPOFfXHUwMDAwwpHAiFRGXHUwMDFhQ0x05+7nJXWEUExSpoXgQOSAYKvNXHUwMDAwx1x1MDAwMlx1MDAwNftcdTAwMDdcXPFaVUSiVdxq/Vx1MDAxYeVr1HrXhG230Wm5bVx1MDAxY7House3R6Y8uvWN51/fhHhQRlx1MDAwZtXxulx1MDAxZFx1MDAwZlx1MDAxYSRKZFTvhL1Ja7vW1YH/xHumUXvrmcZ9XHUwMDEwRHLZXHUwMDEz64N6XHUwMDEz150+/Vx0vadI2NhgP1x1MDAxZl3723opuPpa11+vvJ1rslx1MDAxNJ4v9q776/f0Zl8/zF42audnXHUwMDE3x0vN3X3plVx1MDAxZla/3Kq1/rv8vL/bbjdcdTAwMWZj7b79XHUwMDE2Peh9q+a+6iSVSlx1MDAxM6FcdDdMR4NcdTAwMWP4jfpgXHUwMDFmXHUwMDA0zWo9UuOFmMBcdPz0PX9cdTAwMWM6hoos6FDNmEFRiC6MnfTuXHUwMDFjXHUwMDBiO3R62FE0XHUwMDBmO5o51ExcdTAwMDU7RiehQ80gdKhcdTAwMDZcdTAwMDZcXFGYXHUwMDE4dLK0kDJKiVx1MDAwMjKKXHUwMDE2RmPdbITH/ktXkWTf0Vxy985cdTAwMGae+4arq57YPSvPobfedVxmv/1fvFx1MDAxZjtcdTAwMWXeudtcdTAwMTTv+8xy4F9bNV6s4rN47T5cclx1MDAwZn30Nb1cdTAwMGLu/Fot7j2qKIiLbba3i1x1MDAxOP1m27/2XHUwMDFibnCSJmcu8HJcdTAwMWRcdTAwMTdHdGWhj1FcdTAwMDaGoz6qwujTle3d1fKjvOzcbLeCSiB2XaPn3nNJ7lx1MDAxMK0oVcSAVMz0oY9p6aAx1Fx1MDAxYzVeXHUwMDAyZVx1MDAwND5cZn2o60U8XHUwMDE32lx1MDAwMkEkxaGZsetqy/UtVl7+tvTilqv1tc7S4flyY1xuriu3XbF3V79cclx1MDAxZaTim+et2y/N8mXdrU+g3VBcdTAwMDSbT4dXXHUwMDBmXHUwMDE1oYOV2vPm84/bJz1cdFerNChD0PhHivVBrpZrk8lSKTIhTlx1MDAwNep3YbCnXHUwMDBm/ydwtdlg50Q6MFx1MDAxZLBcdTAwMWKRxHqKq1XGXGJ0+zGv81x1MDAwYvlaPzx+9MPqzW9qur52iJtK+NqYnKV8Z/tcbv007IEhmdijVCilmCpcdTAwMWVcIuZbzznFnqTSQTZhXHKe6uKv39Ey6ShcdTAwMTDCWkJqiFx1MDAwMJ2JPdJ9jY894qBcdTAwMDWQXHUwMDFhKbVcdTAwMDEgRpuUiFx1MDAxMYgjXHUwMDE41VQrJVx1MDAwNIYgbFx1MDAxMJqGI2Y4k6NcdTAwMDSQkV/5qTHs7chfo1x1MDAwM/ZniEbHXHUwMDAxbCd02+GK36j5jet+wd5SIUVYqX1mt4XXXHSHXHUwMDEzjFx1MDAwN1xml0pII6L+7Fx1MDAxYYHqfafb6Tiw1t1cdJAouFx1MDAwNtCJZ/dcdTAwMWG14TLlo7cnk8ZBRlx1MDAwMov/0LlyXHUwMDAxXCJdJlxmuqjSXG7sf1x1MDAxY26iXHUwMDEyQlx1MDAwNW4nXFxt3t35Ifb9QdNvhIN93O3MZVx1MDAwYv1cdTAwMWLPrVxynsWHip9cdTAwMWK0XHUwMDExLdtiP1x1MDAwYot+K0VcdTAwMTDq/tH7/T+/p1+dqdn2ldDpqLmF+PtYoVx1MDAwNDbHXHUwMDA2XHUwMDBm9yxcdTAwMWNcdTAwMTJcdTAwMGJcdTAwMWNwXHUwMDE5c7fDLFxc5UTedbbWn/ZcdTAwMGVEsFX/8m19tbV1PFtcdTAwMGKnhpJcdTAwMGJcdTAwMDKOUlx1MDAwNrhcdTAwMDTgQotcdTAwMDFcdTAwMGKHps1yXHUwMDBmSz9cYmp/pJFcdTAwMTM3cKmRXHUwMDA0RMfeTFx1MDAxOGPaUFxudNY5sCevfHZ5e7N50ZKrrfrB8u7LVc2fXHUwMDAy4Z9cdTAwMTdijujIzoFcdTAwMTmUwlx1MDAxMCOL58DSu3POoYPYYFx1MDAxMXRcdTAwMDaAw2FKwIk501x1MDAxY1ZutFx1MDAxMFIjaZtcdTAwMWEpXHUwMDFmy8ePRcp33IpcdTAwMTf89n1RfV9EsjtNVj7E4lx1MDAwZrLyfkHf4bdoXHUwMDBlM1x1MDAwNyqBXGJcdTAwMTGLm4eBr3a6t7dzclY7P0TQ3Vx1MDAxY79UV59cdTAwMGXUnINPcqTehHGMM20kovvzz1x1MDAwMmk7kUxQJJyKXGIjs4PiKfktqlx1MDAwNMbnJJ7OmI3jkpvkaUM9fttvXHUwMDFmeU+rXHUwMDE3661V9+jub5RRXHUwMDEyLCejhOacauQ8xTNK6d0559hcdTAwMDHlsGzscDot7EiThE7SdXHKXGaGXHUwMDA1ZnpzN9NzXW9Jmim7rSFcdTAwMDZ/0G1FQuZcIi4zkcQgliZcdTAwMWGAnNboy/goUVY+eZ7XPFx1MDAxMoZZVDFUY2lcdTAwMTBYnPZBjlx1MDAwMzhcdTAwMWPhyKnmiEnGP1xmcYDYNpJcdTAwMTjOXGbjUsTuXHUwMDE0+S7pUINcdTAwMDNiU+tKMMVcdTAwMDfxSFx1MDAxObOeN25cdTAwMTimm0ZcdTAwMWHLWcS6tFBcdTAwMWGpcMpcdTAwMDZcdTAwMDNSMFJcdTAwMDB6d8K0jl3xM2WzZONcdTAwMDTCKJGK2excdTAwMWJRSiZcdTAwMWW+UFx1MDAxZSmfb8aEXHUwMDAywOFlaDhcdTAwMTUnPDJH/UJcdE1cdTAwMTWnwIBcdTAwMThhM2BcdJk+U1x1MDAxYWkpU7XtK6HUUXNcdTAwMGLx99FtXHUwMDFidlxcpm0jXGJ5SiFS02G2LZ9fzatt48xBViVcdTAwMTRcdTAwMWE3XG5aRqHuq20zXHUwMDBl2jeBJyQ3mis1INhkjVx1MDAxYva3wpDbKIRaynSVQLyitlM0XHUwMDFlXHUwMDA2JY5f8zPBRJTQXHUwMDA0Ufr/1s2aeodcdTAwMTMp0WppJVx1MDAxNGozxC6JMtJcdTAwMWOQMnNjKHInKWQyXHUwMDFmXci45bOSmHFcdTAwMTNGXHUwMDAxt/8p1TLVuKFInFx1MDAxYqIpJ8SumDNJe/uZbFumYttXUqVHtG25qVx1MDAwNqpoJndD5ibRmlIovtqGtOvbX7dcdTAwMGWDXHUwMDEzctmRrdN6eHrS+jL3XHUwMDA2zlx1MDAxOIcx27WMaWl0xO67k4CGOVRqVDc8XHUwMDBm6G6z7VtFMVxyufbt7Vx1MDAxYSGS1o2ylGhcdFx1MDAxMvZcdTAwMGJVRFxuytHQvst+0eH2q/eZkfJcdTAwMGbaf1bNaq3R2Vx1MDAxNPvqWMOB6bxcdTAwMTROnMPJ9cph58vt3XVjjSw/XHR2tr4rP1f+gVwiWcxcdTAwMDJcdTAwMTRGQtTOXHUwMDAwysJ4Su/NOceTXCJcIlx1MDAxN096cnjKT92RlPCHJ/JcdTAwMGZMXCKbVFx1MDAwMqa3noWNoITRWMfyXHUwMDBm1EHDzImWTKBKkdhUTV8+oj+9sNhcdTAwMGL1ndVcdTAwMWJcdTAwMWM5r/bb94Y9++BcdTAwMDb33j9P2vfe90b6qlx1MDAxNy77WurlIVx1MDAwMu+qXHUwMDFmXHUwMDA0I6UphjiL9DRFruzjcXyusyk+XGJcdTAwMGV8hEKJfFx1MDAwYjZcdTAwMTnA1tzOjTdRxGqGPk5TXHUwMDEwXHUwMDEyQCPp6l+CJoh0XHUwMDE05UA018hR9MchXHUwMDE2hIO3oFx1MDAxOHNR5OiKcEhcdTAwMDJcdTAwMThcdTAwMTRyViosYUJahOBcdTAwMWTEM0ib1Fx1MDAwND5cbp4nTvC54eojXHR++NU/OHKXbzfPt063j2twpra93TiZjqgyM2huKTfUXHUwMDE4ZVikyz3GXHJcdTAwMGXaarxCXHUwMDAypZxRNuZcIph8OPeLpDhcdTAwMTeW7uJQXHUwMDAz4TIhXHUwMDEyd5jgikpk91xmLTP/7LmLTL1+PT2o0pNk+JzFqOLgenpAXHUwMDFlaVx1MDAwN7+wfSt7QeXg7GqLPD7Cycry/ZHoXFzuz/1yeux/ooFcYlx1MDAwNmBcZiH9XHUwMDE5XGbQxulcdTAwMDaTimMsqSE7gfH+1fSRsYrsWYKQaHTsXFxyMevF9GflzfJcdTAwMTKtrHjV1epcdTAwMGZf3vDypbgqSuXp4cF6cNsgq/7h3kZwtXfyrHaCidSBWVx1MDAxNtWN/j+aynNmMpFDQWpcdTAwMDPoXHUwMDE0WWHopHfnnHP510qUXGI6/VxcXlx1MDAxMuOg3ZpcdTAwMDJ0XG6WgVx1MDAxMYw7qITY/MtHcvlRtTCVy89/XHUwMDFk2Fx1MDAxMJv/QXVggtHMRTCAPotJw4tcdTAwMDfSO/ri6kbpx1v/oHy+fPz88Lgmzubeb0nmXHUwMDEwZsBcdTAwMTBKpCZU94FcdTAwMGa7XHUwMDAw/Vx1MDAxNmBcdTAwMTQtKFKKWFx1MDAxMDOrKjAlJGKPTbAyZDzH1VDrbnAsXq7Kl1qrs8ZdsIy+5+NcdTAwMWRXbruHpzWobZRltVx1MDAxNXYuqD5mlaO9/Vx0tNtoP/JNODva6ZgnODhZXHRX7vjW53K0gsVcdTAwMTZ/JCpRrOtcdTAwMTkpaZY+/PPuaFx1MDAxNcnDumCOnlxu1otcdTAwMTWBcTvNSmBKa3am7GdnVVx1MDAwMzbER31EXHKYkCxz+sdmgjhBT1tcdTAwMTh4+aZzToEnKXGEsrVCXGZcdTAwMTksVf25L1x0zFx1MDAwMZDKXHUwMDA2yoxzPSjX5Ga3hWNX7DFcdTAwMDWKo1x0gFx1MDAxNFx1MDAxOErqoFx1MDAxOVSaaWWUMDpJf1FAjpxcdTAwMWNmVlx1MDAwMNZFq2CxXGJ78qmvfDpaXHUwMDFhLO/SXHUwMDFjiNLG1lGp+Oqdn2ViXHUwMDE4Llx1MDAxOIGBg1x1MDAwMmCCQ+LZXHUwMDBi5b7yoVvKLO/CuybzcdpB6ElDqVx1MDAxNFx1MDAwNohmn3tyO0uv7Suh0VFjXHUwMDBi8ffxXHUwMDAyXGIhs6e2hUShsG8jRVx1MDAxZGbc7k9b6ujBe3jY2Hrcba1cdLPjXHUwMDFkzdi4XHUwMDE1qP7iaNuwbzU3nLBcdTAwMDFSgdbOXHUwMDAxQrStuELkfmB1a9FF9MxWwaNGzDqA8I8qa1crtdtccvdCfDup1Fx1MDAwM1J396dA9OeGkEM2dFBPXHUwMDEwWECL04L03pxz5FDlmGzkSDkl5Fx1MDAxNKv+UoxcdTAwMDDGSXJyXHUwMDE54/mh47Or/lx1MDAxYWLxP6z6XHUwMDBiVOZcblx1MDAxMqQo1Fx1MDAxOGGKXHUwMDA3w99u7veO/fLVKWeN3VbraYtvm4c5XHUwMDA3XHUwMDFm+mZHcIyDpTJMx6ffX91cdTAwMTaSKGq3YEPk0fhsznTcVjLvhUxcdTAwMDOMgZnvfnS6slG5fdg/uEJd9Y/LnFc3Ksd/pzySjFx1MDAxOH5yMaOmwG1qpTB00rtzzqFcdTAwMDPaMdnQkeDAVKBTrPSLMqa7ZWi/4nzNbGq/htj7Sdd+cWmyIVx1MDAwN5JQu1a1eJCVz53nNYNEmMNcdTAwMTlGuJJcdTAwMTDDgffvXHUwMDE0oFxmdaRcdTAwMTZcdTAwMTjjaoVRp1x1MDAxOZw+mmBcdTAwMDbJOCCMUZJwgy5Jpm0hhFx1MDAwMbe0Y4ZgQHljXHUwMDBiP3r7b0hQo/ixT5c+KpyqsWVd0ih0XHUwMDFjSPPRoEZ7kpSyqsN44tFcdTAwMGJlj/KJZim7qFx1MDAwYjiFXHUwMDE0ofqqw0RCps+UPVrKVGr7Sqhz1NxC/H10s2ZU5s5BjFFcdTAwMWPzUTh4PrWaV6vGucPRbFx1MDAxMSYpKvfAKm5lwDFCITaowivIx+XFke1TxolmVlx1MDAxOMVT4mFcdTAwMDFcdTAwMGW39Y1GIErBJEsmUH2UlCNFx7+uWXst51x1MDAxMnainiB2XGKw5PJLaic9bEZcXOFVaEjUmCVf+WSklF3QlVx1MDAxNEk7SGmFIYBcdTAwMDZQXHUwMDEzwz73itAspbavQXVcdTAwMWXRpuV/K1x1MDAwMIPsJW2ca6kkXHUwMDFiIUI65N5cdTAwMGVpiy1cdTAwMTnenZZbT5VvlVx1MDAxM3ExW8Mmhld7Scfmy4TQXHUwMDAwXHUwMDE4gPTvjqFcdTAwMTh3hMUqdoPdXHUwMDA0M5utuZJ6opZr1/7hSWE3i0+r9lx1MDAxMilcdTAwMGLaIEHHMEzjwtD3bun4YdVe9y7dXGb8h/37L/5hsKb3g43640rRjFx1MDAwM/9xcv+1/nxSP/56015fuffPrlduP1fGgdHsxdVUgFGCY1RQXHUwMDE4T+ndOd94wuA9XHUwMDBmT5xOXHUwMDBlT/nJurTNLpLVXpTYRJ31NCMgasYph7HLvXpLROak4muIv8hcXOEyftFXvjfkMnPdXHUwMDE59jVcdTAwMTOKj7DHobtz0Vxcalxcr9HTXHUwMDAzXb/wNm+bZ8/e3LN8Y3fO0EaBVlQgw+pDL1x1MDAxOEQvVcyWR1x1MDAxYVx1MDAxZV/sPlx1MDAxYm8ojWGESP2+vVx1MDAxYj7MXHUwMDFidiqHoVe+8E7MQV2dtFdum5Xdtb+TN2RcInu/XfRcdTAwMTNcdTAwMTKdoSjuXHLTu3POXHUwMDAxZd1hXHUwMDFloMzkXHUwMDAwNVx0d8hcYjVcdTAwMTQ0+URcdTAwMGI5f1x1MDAxOW84xGF8gDfMzHdRqTPT+Fx1MDAwNlx1MDAxOLWhd/F8V74pm9dcImgllUOUNFx1MDAxYdWKoaPpX1xiqqh0tOXz1NhccnNIzjZH7922wFx1MDAxMVozSbjmWktqTErRoOSv+11cdJTHriZMbuJmP6pcdTAwMTSwWVVBTyXplc8nS32Jc8LRJNtcdEfVXVwiK2M5l7dcdTAwMTSTdIBLpYjm3e9bgTHXgubDutS3XHUwMDE2XHUwMDE0PVx1MDAwMZPC1lxc21R+MuslXHUwMDFjprlB3VVgR1MlJ1x1MDAxOD5T1mspW7W7p1x1MDAxM1pcdTAwMWQ1uFx1MDAxMH9cdTAwMWZzp6PY5PlgSlx1MDAxZs2fVYziu1Tm19/PhJvAcFx1MDAwM8fsvrCCXCI/wchnoJZTULtcdTAwMDeE5Izh8NiKz5x9Yaex0Vx1MDAxMVxiYlBcdTAwMGJgXrn+16PDcufMO79i4erezsHDt6WD2nzsczTq3lx1MDAxM2NxfVtlm8n1XHUwMDE5t7KoXHUwMDExguf07px3PKlcXDzpXHTiaVx1MDAxMlx1MDAxYlx1MDAxZFEgqFx1MDAxZDJe8vPRO1x1MDAxZI3l/H+9nY6GeItJ73SUidlcdTAwMWNcdTAwMGaImJVSk1x1MDAxMVxuXCI6wU1l47D98uOyeaafVn/slDfXZuxcdTAwMDJcdTAwMGKUWVxu4oDgXHUwMDE4fVx1MDAxYrtiU/av61x1MDAxNkY51FZZaqT5hKpY0elkfSCPfcFNXHUwMDBmsbEvOowqqi3t0yNtVjo+Ylx1MDAwMVx1MDAxOYJ6L2JcdTAwMGKvj1t2Sq+KXuogXHTtlPq1vnSHT+Nee6kojX0/8ygoXHKbrSyI9j3lIFx1MDAxZVx1MDAwYko6XHUwMDE2JmVOkZKynnyETVx1MDAwZfjT5Y/VJ7qp1lx1MDAxZlr8eV08Xla/VudcdTAwMWWRhDukXHUwMDFidFx1MDAxM40/419waVx1MDAxYjDMfoFcdTAwMTVgPIbRpCTZlVx1MDAxNkUy0NmAjH+bXrSwJPn1VGg60EqS6UxcdTAwMWVJSsW7PWjxumen1Esxldpep9W0ul557io9hrylRFx1MDAwMup7I2yW/LBTXHUwMDFhJCZxhzpdqL7/IV5RvPBGsVx1MDAxN91W6zjEcelFXHUwMDE3OOJ+7a1zI1FcdTAwMTZcdTAwMWZ873ElReWuui/batcyWFx1MDAxMHrdUOWvhb/+XHUwMDA3KtdcdTAwMDdDIn0= ByteEditor()BitSwitch(7)Label(\"7\") Switch() Switch.Changed(    value=True)ByteEditor()BitSwitch(7)Label(\"7\") Switch() BitSwitch.Changed(    value=True)BitSwitch.Changed(    value=True)Switch.Changed(    value=True)A. Switch sends Switch.Changed messageB. BitSwitch responds by sending BitSwitch.Changedto its parent"},{"location":"guide/widgets/#attributes-down","title":"Attributes down","text":"<p>We also want the switches to update if the user edits the decimal value.</p> <p>Since the switches are children of <code>ByteEditor</code> we can update them by setting their attributes directly. This is an example of \"attributes down\".</p> byte03.pyOutput byte03.py<pre><code>from __future__ import annotations\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.geometry import clamp\nfrom textual.message import Message\nfrom textual.reactive import reactive\nfrom textual.widget import Widget\nfrom textual.widgets import Input, Label, Switch\n\n\nclass BitSwitch(Widget):\n    \"\"\"A Switch with a numeric label above it.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    BitSwitch {\n        layout: vertical;\n        width: auto;\n        height: auto;\n    }\n    BitSwitch &gt; Label {\n        text-align: center;\n        width: 100%;\n    }\n    \"\"\"\n\n    class BitChanged(Message):\n        \"\"\"Sent when the 'bit' changes.\"\"\"\n\n        def __init__(self, bit: int, value: bool) -&gt; None:\n            super().__init__()\n            self.bit = bit\n            self.value = value\n\n    value = reactive(0)\n\n    def __init__(self, bit: int) -&gt; None:\n        self.bit = bit\n        super().__init__()\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(str(self.bit))\n        yield Switch()\n\n    def watch_value(self, value: bool) -&gt; None:  # (1)!\n        \"\"\"When the value changes we want to set the switch accordingly.\"\"\"\n        self.query_one(Switch).value = value\n\n    def on_switch_changed(self, event: Switch.Changed) -&gt; None:\n        \"\"\"When the switch changes, notify the parent via a message.\"\"\"\n        event.stop()\n        self.value = event.value\n        self.post_message(self.BitChanged(self.bit, event.value))\n\n\nclass ByteInput(Widget):\n    \"\"\"A compound widget with 8 switches.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    ByteInput {\n        width: auto;\n        height: auto;\n        border: blank;\n        layout: horizontal;\n    }\n    ByteInput:focus-within {\n        border: heavy $secondary;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for bit in reversed(range(8)):\n            yield BitSwitch(bit)\n\n\nclass ByteEditor(Widget):\n    DEFAULT_CSS = \"\"\"\n    ByteEditor &gt; Container {\n        height: 1fr;\n        align: center middle;\n    }\n    ByteEditor &gt; Container.top {\n        background: $boost;\n    }\n    ByteEditor Input {\n        width: 16;\n    }\n    \"\"\"\n\n    value = reactive(0)\n\n    def validate_value(self, value: int) -&gt; int:  # (2)!\n        \"\"\"Ensure value is between 0 and 255.\"\"\"\n        return clamp(value, 0, 255)\n\n    def compose(self) -&gt; ComposeResult:\n        with Container(classes=\"top\"):\n            yield Input(placeholder=\"byte\")\n        with Container():\n            yield ByteInput()\n\n    def on_bit_switch_bit_changed(self, event: BitSwitch.BitChanged) -&gt; None:\n        \"\"\"When a switch changes, update the value.\"\"\"\n        value = 0\n        for switch in self.query(BitSwitch):\n            value |= switch.value &lt;&lt; switch.bit\n        self.query_one(Input).value = str(value)\n\n    def on_input_changed(self, event: Input.Changed) -&gt; None:  # (3)!\n        \"\"\"When the text changes, set the value of the byte.\"\"\"\n        try:\n            self.value = int(event.value or \"0\")\n        except ValueError:\n            pass\n\n    def watch_value(self, value: int) -&gt; None:  # (4)!\n        \"\"\"When self.value changes, update switches.\"\"\"\n        for switch in self.query(BitSwitch):\n            with switch.prevent(BitSwitch.BitChanged):  # (5)!\n                switch.value = bool(value &amp; (1 &lt;&lt; switch.bit))  # (6)!\n\n\nclass ByteInputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ByteEditor()\n\n\nif __name__ == \"__main__\":\n    app = ByteInputApp()\n    app.run()\n</code></pre> <ol> <li>When the <code>BitSwitch</code>'s value changed, we want to update the builtin <code>Switch</code> to match.</li> <li>Ensure the value is in a the range of a byte.</li> <li>Handle the <code>Input.Changed</code> event when the user modified the value in the input.</li> <li>When the <code>ByteEditor</code> value changes, update all the switches to match.</li> <li>Prevent the <code>BitChanged</code> message from being sent.</li> <li>Because <code>switch</code> is a child, we can set its attributes directly.</li> </ol> <p> ByteInputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a100\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0\u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <ul> <li>When the user edits the input, the Input widget sends a <code>Changed</code> event, which we handle with <code>on_input_changed</code> by setting <code>self.value</code>, which is a reactive value we added to <code>ByteEditor</code>.</li> <li>If the value has changed, Textual will call <code>watch_value</code> which sets the value of each of the eight switches. Because we are working with children of the <code>ByteEditor</code>, we can set attributes directly without going via a message.</li> </ul>"},{"location":"guide/workers/","title":"Workers","text":"<p>In this chapter we will explore the topic of concurrency and how to use Textual's Worker API to make it easier.</p> <p>The Worker API was added in version 0.18.0</p>"},{"location":"guide/workers/#concurrency","title":"Concurrency","text":"<p>There are many interesting uses for Textual which require reading data from an internet service. When an app requests data from the network it is important that it doesn't prevent the user interface from updating. In other words, the requests should be concurrent (happen at the same time) as the UI updates.</p> <p>This is also true for anything that could take a significant time (more than a few milliseconds) to complete. For instance, reading from a subprocess or doing compute heavy work.</p> <p>Managing this concurrency is a tricky topic, in any language or framework. Even for experienced developers, there are gotchas which could make your app lock up or behave oddly. Textual's Worker API makes concurrency far less error prone and easier to reason about.</p>"},{"location":"guide/workers/#workers_1","title":"Workers","text":"<p>Before we go into detail, let's see an example that demonstrates a common pitfall for apps that make network requests.</p> <p>The following app uses httpx to get the current weather for any given city, by making a request to wttr.in.</p> weather01.pyweather.tcssOutput weather01.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        await self.update_weather(message.value)\n\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> weather.tcss<pre><code>Input {\n    dock: top;\n    width: 100%;\n}\n\n#weather-container {\n    width: 100%;\n    height: 1fr;\n    align: center middle;\n    overflow: auto;\n}\n\n#weather {\n    width: auto;\n    height: auto;\n}\n</code></pre> <p> WeatherApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aEnter\u00a0a\u00a0City\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>If you were to run this app, you should see weather information update as you type. But you may find that the input is not as responsive as usual, with a noticeable delay between pressing a key and seeing it echoed in screen. This is because we are making a request to the weather API within a message handler, and the app will not be able to process other messages until the request has completed (which may be anything from a few hundred milliseconds to several seconds later).</p> <p>To resolve this we can use the run_worker method which runs the <code>update_weather</code> coroutine (<code>async def</code> function) in the background. Here's the code:</p> weather02.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.run_worker(self.update_weather(message.value), exclusive=True)\n\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>This one line change will make typing as responsive as you would expect from any app.</p> <p>The <code>run_worker</code> method schedules a new worker to run <code>update_weather</code>, and returns a Worker object. This happens almost immediately, so it won't prevent other messages from being processed. The <code>update_weather</code> function is now running concurrently, and will finish a second or two later.</p> <p>Tip</p> <p>The Worker object has a few useful methods on it, but you can often ignore it as we did in <code>weather02.py</code>.</p> <p>The call to <code>run_worker</code> also sets <code>exclusive=True</code> which solves an additional problem with concurrent network requests: when pulling data from the network, there is no guarantee that you will receive the responses in the same order as the requests. For instance, if you start typing \"Paris\", you may get the response for \"Pari\" after the response for \"Paris\", which could show the wrong weather information. The <code>exclusive</code> flag tells Textual to cancel all previous workers before starting the new one.</p>"},{"location":"guide/workers/#work-decorator","title":"Work decorator","text":"<p>An alternative to calling <code>run_worker</code> manually is the work decorator, which automatically generates a worker from the decorated method.</p> <p>Let's use this decorator in our weather app:</p> weather03.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.update_weather(message.value)\n\n    @work(exclusive=True)\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>The addition of <code>@work(exclusive=True)</code> converts the <code>update_weather</code> coroutine into a regular function which when called will create and start a worker. Note that even though <code>update_weather</code> is an <code>async def</code> function, the decorator means that we don't need to use the <code>await</code> keyword when calling it.</p> <p>Tip</p> <p>The decorator takes the same arguments as <code>run_worker</code>.</p>"},{"location":"guide/workers/#worker-return-values","title":"Worker return values","text":"<p>When you run a worker, the return value of the function won't be available until the work has completed. You can check the return value of a worker with the <code>worker.result</code> attribute which will initially be <code>None</code>, but will be replaced with the return value of the function when it completes.</p> <p>If you need the return value you can call worker.wait which is a coroutine that will wait for the work to complete. But note that if you do this in a message handler it will also prevent the widget from updating until the worker returns. Often a better approach is to handle worker events which will notify your app when a worker completes, and the return value is available without waiting.</p>"},{"location":"guide/workers/#cancelling-workers","title":"Cancelling workers","text":"<p>You can cancel a worker at any time before it is finished by calling Worker.cancel. This will raise a CancelledError within the coroutine, and should cause it to exit prematurely.</p>"},{"location":"guide/workers/#worker-errors","title":"Worker errors","text":"<p>The default behavior when a worker encounters an exception is to exit the app and display the traceback in the terminal. You can also create workers which will not immediately exit on exception, by setting <code>exit_on_error=False</code> on the call to <code>run_worker</code> or the <code>@work</code> decorator.</p>"},{"location":"guide/workers/#worker-lifetime","title":"Worker lifetime","text":"<p>Workers are managed by a single WorkerManager instance, which you can access via <code>app.workers</code>. This is a container-like object which you iterate over to see your active workers.</p> <p>Workers are tied to the DOM node (widget, screen, or app) where they are created. This means that if you remove the widget or pop the screen where they are created, then the tasks will be cleaned up automatically. Similarly if you exit the app, any running tasks will be cancelled.</p> <p>Worker objects have a <code>state</code> attribute which will contain a WorkerState enumeration that indicates what the worker is doing at any given time. The <code>state</code> attribute will contain one of the following values:</p> Value Description PENDING The worker was created, but not yet started. RUNNING The worker is currently running. CANCELLED The worker was cancelled and is no longer running. ERROR The worker raised an exception, and <code>worker.error</code> will contain the exception. SUCCESS The worker completed successful, and <code>worker.result</code> will contain the return value. <p>Workers start with a <code>PENDING</code> state, then go to <code>RUNNING</code>. From there, they will go to <code>CANCELLED</code>, <code>ERROR</code> or <code>SUCCESS</code>.</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nOVbaVPbSlx1MDAxNv2eX8EwX2aqQqf3JVVTU2BcdTAwMWN2YzDLkFevUsKWjWLZciSZ7VX++7uSwdq8gnFMxkmxqFvS7dv33HNud/PXh7W19fChZ69/Xlu37+uW6zR86279Y3T91vZcdTAwMDPH60JcdTAwMTONf1x1MDAwZry+X4973oRhL/j86VPH8tt22HOtuo1unaBvuUHYbzhcdTAwMWWqe51PTmh3gv9GXytWx/5Pz+s0Qlx1MDAxZiUv2bBcdTAwMWJO6PmDd9mu3bG7YVx1MDAwME//XHUwMDAzfl9b+yv+mrLOt+uh1W25dnxD3JRcdTAwMTjIhM5frXjd2FiKXHUwMDE10YRiTIY9nGBcdTAwMWLeXHUwMDE32lxyaG6CzXbSXHUwMDEyXVq3znrXZLtd3dpUXHUwMDBm21xyfSrtRilIXtt0XFy3XHUwMDE2PrhcdTAwMDNXWPWbvp8yKlxifa9tXzqN8Fx1MDAwNtpJ7vrwvoZcdTAwMTXcgFx1MDAwMcNm3+u3brp2XHUwMDEwZG7yelbdXHRcdTAwMWbgmsTDi1x1MDAwMy98Xkuu3MNvgjDEXHUwMDE1JpozKolcImbYXHUwMDFh3U6MRsxAo1CYXHUwMDExKnJmlTxcdTAwMTdmXHUwMDAyzPonjj+JXddWvd1cdTAwMDLjuo2kXHUwMDBmXHUwMDExlnXdVCrpdfc8XFylkZGaYENcdTAwMTjWwrBkWm5sp3VcdTAwMTNCXHUwMDFmRZDWXFxJIdNm2PFsXHUwMDEww6lcdTAwMTBaXHUwMDEwOWyJXt7ba8SR8WfaXd3Gk7ueQyVcdFx1MDAxNvZ05WcyjKh/OVx1MDAxZmTpQMtcdTAwMDRbaN+Hw9GlXCKDXHUwMDFlYm653vbRySU+7SmveVx1MDAxZPh368N+Pz+Ofuzg5tbX3bPbg4rg2K0+bjaCutNcdTAwMGV19i3P77d830s/9+mnZPz9XsNcdTAwMWFcdTAwMDQwkVx1MDAxYVx1MDAwYmaEMJypYbvrdNvQ2O27bnLNq7eTmP+QMrhcdTAwMDC2zPjTiYCbcTgjlElCXHKZXHUwMDFkZqOduViYXHUwMDA1XHUwMDFlJJtFokxwxFx1MDAwNadMa0MkTsVpdDulXHUwMDE0acYphVxizob3/ChcdTAwMGJ9q1x1MDAxYvQsXHUwMDFmXHUwMDAytogzo4q4oiyPJsNcZotiY1x1MDAxZTBlXCKmgJpFXHUwMDA2YDLRXjesOY+DZJ25+sXqOO5DZq7iyFx1MDAwNPdUy5XtvcpO2oWBXHIvjUNRZbpvuk4rXG7e9TpcZsP2M3FcdTAwMWQ6QEfDXHUwMDBlXHUwMDFkp9FIXHUwMDEzTFx1MDAxZGyw4Jn+3iy84PlOy+la7lnOxIlIm0hrVLPxcMOGXG6qUi6fhrcq/966XGKCbvussnlMSuLhuH9cdTAwMTj+WryZ6aymXHUwMDExQFx04lx1MDAwYuBmXGalXHUwMDE5vHFsXHUwMDEwIJFTpVx1MDAxOFx1MDAwNN/rWFxyUHttyzdhNcKYoVLNXHUwMDA1xCWy2rfqZVmwb3T/ZrfU8qonrTPaO1pcdTAwMDKrTXxuXHUwMDE4XHUwMDFjXHUwMDE4uSVlu3K811xid75x9ztcclx1MDAxN/Dcsz0lws7Z8Vx1MDAxN1BBzdOr+uFV6bv1vliYXHUwMDE4OjYtQHxqRjgzM6eF0bO/4mlBYkQ4XHUwMDA2b3NNOc2JXc5cdTAwMThcdTAwMTJcdTAwMWFcdTAwMDNgXHUwMDA1l/p1aWEyXHKLYlwiKNKwXHUwMDAyNc5cck9N2u9Dw6fnlcqyaXhcbo/lafjZxJfTME/JrVx1MDAxY95cdTAwMDRcdTAwMTPGXGLK2Mxw278qNbulSvXm6urkXFxaTJ5WW1x1MDAwZr9cdTAwMTZuXHUwMDA0T8NcdTAwMWI1XG5cdTAwMTjQ4NE0XGakh0BcZnNJoHpTUGy/ioeb1jXGYvEsrOHNUFx1MDAxZq8qXHTLi3ur6e5cXDx6m1++063+5Vx1MDAxMS6fLoEsV4XUOFx1MDAxZLuEXHUwMDAzYWUwwXNw2mhnrjjIXHUwMDE4VVBbMjya1GAukMRU86j4pK9cdTAwMDTZRFYjqfQ/gdaI0Vx1MDAwNv5cdTAwMTP2O/JaabNSKlx1MDAxZlx1MDAxZZa3l8psU7ghz2yJkS/nNkHEONhRoYWSxMzObf2gVz06bzfZ0ebBl1p5V5VZzVl12Fx1MDAwMXsjQoFcdTAwMWSE0YRcdTAwMDNcdTAwMDBz3CZcdTAwMDCUUlGJXHUwMDE1YFLr18BcdTAwMGW4TURF+1vUmIxSRoRKXHJ3pehtyznY3WnKq9ZuhXnNvc6J7LR+zEpvj03F5f79t83H8I5cXO79aFx1MDAwNY1cdTAwMGLzzuiN87FcdTAwMWFSSC4wobOv5Ix25qrjTClEgFtkviqLYaZcZpLcQPmqtVSvhNlEdlOkXGKsUeRmKMSHTs3a70Nu5dPT49OlXHUwMDEy21x1MDAxNGLIXHUwMDEz28DAl5Oa5HJcdTAwMWPYiIZMbrjWc+xT6KteKdxix51wrytkTe5vXf7iXHUwMDA1kuloU1x1MDAwMiNKXHUwMDE0ZYYpo3VKXFxcdTAwMGZYTSHMXHUwMDE0V9Fmm3ntyinHdSzeZjfQRHeLXHUwMDE1Ldno0f1t7+7r8WG5XSv/j11cXJrKJf8/WodcdTAwMTSpdbpcdTAwMDLMXGKIJVx1MDAwZVbMXHUwMDBls5HeXFx1mFx1MDAxOYZcdTAwMTRwt2FcdTAwMDaUY3pjfVCzXHUwMDExRKmJlmSNfu1cdTAwMDbF5JVIWoTWXGJWXHUwMDAzuGtcIomeRyS+XHUwMDE3Vqudl0rlWm2pvDaFXHUwMDFh8rz2bOJEtFxy0D5cdTAwMDJuTI9dIYlyK+irOUq1yds2v1x1MDAwNG16XHUwMDFh2CRmQFx1MDAxNlx1MDAxMMRcbpiBM5JcdTAwMDVcdTAwMWKUcIjA1Vx1MDAxMXSy2EpcckF0S0O0UlxmftIjkFx1MDAwNypcdTAwMTeIj0FCgFxmSDiWuoBEbahkOj2lL6E2+lbU5tbUj6ZcdTAwMWSow2qtVf8udv3b6ld/PlxugrQok3icXHUwMDAz/UFo+eGW02043VZ21E+nxGbZjY/zRb1cdTAwMWa5YFx1MDAwMyNcZlLEKFx1MDAxZS1RR3pcIknEkd+tXpRAkZagilx1MDAxNOFxoi741e42pps0eWdcImdcdTAwMTKEXHUwMDEwN8JoZVx1MDAwNFCE5Fx1MDAwNZM0opoorJRkUUlEdMEo11xuwpLX6TghuL7qOd0w7+LYl5tRRrmxrUa+XHUwMDE1XHUwMDA2lW7Lp55e9MRsXHUwMDEw/ZFcblx1MDAxNZyOXHUwMDFiPPz5z48je2+MxU30KVwiJnneh/T3eTWKXHUwMDFjL1EkOJ5cdTAwMDPIZ19WXHUwMDFljYrVTprgUmSUVlB6Q+LkJLt1w6hBhEJcdTAwMWNySplk9M2Wt/hsXHUwMDAyRVx1MDAxMYh3upyiW2GskvG+tTy59Py27aNcdTAwMTiQ//r3UlXKXHUwMDE0rs+rlJylL1x1MDAxMytqwnaOwVQxSMazXHUwMDAzb/L+1orWXHUwMDA2QktcdTAwMDS9KDGKZlx1MDAwNUl8SEFcdTAwMWLEhVEkOlx1MDAxN/TKQ1xuXHUwMDEzgEdcdEZSYoVcdTAwMTnoJUzFiNUvXCI5YoRcdTAwMDEzsvyxxSdUQtbGMFx1MDAwMjLPTs9cdTAwMTLFyr7TOvH6cqu822w/XFw2N1x1MDAxZZ3z8423rZfnXHUwMDE1K/MoXHUwMDAzwVxyg6mimkPZyLRK9XpcdTAwMTZcdTAwMDZES0HZy4XK5I2mrDk0OlJcdTAwMDRpXHUwMDE5XmhcdTAwMDCzpGBcdTAwMGVFYKRkw1N471xcplx1MDAwMC5ZdFTAsKfD8un7pVx1MDAwMFFmXHUwMDE0Y4Nl6uFgxz9vLFx1MDAwMKNPXHUwMDAxelx1MDAwYlI9avwxbcJcdTAwMTVhkHJm321cdTAwMThccq9cdTAwMTVPvoyKaFx1MDAxYUFKgtjUXHUwMDAw70zyXHUwMDE1nCFQPVxcgNBkmYXJRcueROJM3G3gWlExVzH4XpZl7lx1MDAwNmqibkH8uUtcdTAwMTY+U2RDXvjkTX2Z8oFcdTAwMDJzbM0ho9NcdTAwMWRcdTAwMDC/2cE3eZl4NU9nSmZcdTAwMDBdRFx1MDAxMKi2WeaoSix8XGaBXHUwMDFjXG7131Nd+2bSh1x1MDAxOIOUXHUwMDE22DBcdTAwMDI1XHUwMDA1o4pcdTAwMTexSCTUnURjXG4l0lx1MDAxOPHDuVx1MDAwMv7jYkXFz87Rdui2+4dcdTAwMWLbvavHg1x1MDAwNt1cdTAwMGZvN3bfqfjBXGLIScnon+QwJSbVZ6A1SLSWQyeJjZn0z+R124xFQDWQnomKTlVcdTAwMGLNaVH/cKRcdTAwMTmTRFx1MDAwM5njhMLfp/whSiCjwfWEXHUwMDE4XHUwMDEyXHUwMDBmJ6N+XGZcIuB6XCJcdTAwMDfbedPVz3hcYsatXHUwMDA18C1I/tDxxadcdTAwMDAsQ1Jis2//jlx1MDAwNthqZ2ClXHUwMDE1UpSDqmC4eNhCcI1cZsWYXHUwMDE3Nq1cdTAwMTabgMVMx+OBXHUwMDA0XGbEXHUwMDEz/lx1MDAxZE9abHtd+1x1MDAxZkuVPFP0Ql7yXGZcZnyZ0GF6rM5cdTAwMTGR8Dacz46yyUe8Vlx1MDAxM2VcdTAwMTLYSGGsoWRcdTAwMDRIXHSVXHUwMDA1XHUwMDE5jir55JBcdTAwMDV/I5BcdTAwMTFgKEJcdTAwMTWWUF1CYoM0O0LlXGKo0bnCQGD5fehcdTAwMDFcdTAwMDbh2VBcdTAwMDeJV56NfzONU71t7Vx1MDAxY7Q23E1v1z5o3oqT+0M9527UojROnpmna43JZ5/WsptCoJaJplx1MDAxNGzlXHUwMDAyXHUwMDE0NC/uXG5RJGT0Z708PqKm3/1yy9jwjT5CI1x1MDAwNlU8V0+nb2dYb1x1MDAwMUhcbqKMUVx1MDAxOL5CVDOVfmBcdTAwMDFcdFx1MDAwYlJcdTAwMWNi/DZcdTAwMTOL8iCAa/ZcXDg63Fc7XHUwMDE3gnpD0Z9CcfB45NnseTPBXHUwMDE1YuD1p02mV/+F0LhkaEaUeEXFQZXBkkv6Oy63lO/rdi+MgnKZqmNcbntcdTAwMTfOd1x1MDAwZY1cdTAwMWOA7cNcdTAwMTOc161er1x1MDAxNoL/hulcdTAwMTRmxmk8OSHx2fqtY99tjYqM+Fx1MDAxMz01XHUwMDA2cFx1MDAwNFx1MDAxNTvmqp9cdTAwMWZ+/lxycIktXGYifQ== PENDINGRUNNINGCANCELLEDERRORSUCCESSWorker.start()worker.cancel()Done!Exception"},{"location":"guide/workers/#worker-events","title":"Worker events","text":"<p>When a worker changes state, it sends a Worker.StateChanged event to the widget where the worker was created. You can handle this message by defining an <code>on_worker_state_changed</code> event handler. For instance, here is how we might log the state of the worker that updates the weather:</p> weather04.py<pre><code>import httpx\nfrom rich.text import Text\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\nfrom textual.worker import Worker\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.update_weather(message.value)\n\n    @work(exclusive=True)\n    async def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{city}\"\n            async with httpx.AsyncClient() as client:\n                response = await client.get(url)\n                weather = Text.from_ansi(response.text)\n                weather_widget.update(weather)\n        else:\n            # No city, so just blank out the weather\n            weather_widget.update(\"\")\n\n    def on_worker_state_changed(self, event: Worker.StateChanged) -&gt; None:\n        \"\"\"Called when the worker state changes.\"\"\"\n        self.log(event)\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>If you run the above code with <code>textual</code> you should see the worker lifetime events logged in the Textual console.</p> <pre><code>textual run weather04.py --dev\n</code></pre>"},{"location":"guide/workers/#thread-workers","title":"Thread workers","text":"<p>In previous examples we used <code>run_worker</code> or the <code>work</code> decorator in conjunction with coroutines. This works well if you are using an async API like <code>httpx</code>, but if your API doesn't support async you may need to use threads.</p> <p>What are threads?</p> <p>Threads are a form of concurrency supplied by your Operating System. Threads allow your code to run more than a single function simultaneously.</p> <p>You can create threads by setting <code>thread=True</code> on the <code>run_worker</code> method or the <code>work</code> decorator. The API for thread workers is identical to async workers, but there are a few differences you need to be aware of when writing code for thread workers.</p> <p>The first difference is that you should avoid calling methods on your UI directly, or setting reactive variables. You can work around this with the App.call_from_thread method which schedules a call in the main thread.</p> <p>The second difference is that you can't cancel threads in the same way as coroutines, but you can manually check if the worker was cancelled.</p> <p>Let's demonstrate thread workers by replacing <code>httpx</code> with <code>urllib.request</code> (in the standard library). The <code>urllib</code> module is not async aware, so we will need to use threads:</p> weather05.py<pre><code>from urllib.parse import quote\nfrom urllib.request import Request, urlopen\n\nfrom rich.text import Text\n\nfrom textual import work\nfrom textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Input, Static\nfrom textual.worker import Worker, get_current_worker\n\n\nclass WeatherApp(App):\n    \"\"\"App to display the current weather.\"\"\"\n\n    CSS_PATH = \"weather.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"Enter a City\")\n        with VerticalScroll(id=\"weather-container\"):\n            yield Static(id=\"weather\")\n\n    async def on_input_changed(self, message: Input.Changed) -&gt; None:\n        \"\"\"Called when the input changes\"\"\"\n        self.update_weather(message.value)\n\n    @work(exclusive=True, thread=True)\n    def update_weather(self, city: str) -&gt; None:\n        \"\"\"Update the weather for the given city.\"\"\"\n        weather_widget = self.query_one(\"#weather\", Static)\n        worker = get_current_worker()\n        if city:\n            # Query the network API\n            url = f\"https://wttr.in/{quote(city)}\"\n            request = Request(url)\n            request.add_header(\"User-agent\", \"CURL\")\n            response_text = urlopen(request).read().decode(\"utf-8\")\n            weather = Text.from_ansi(response_text)\n            if not worker.is_cancelled:\n                self.call_from_thread(weather_widget.update, weather)\n        else:\n            # No city, so just blank out the weather\n            if not worker.is_cancelled:\n                self.call_from_thread(weather_widget.update, \"\")\n\n    def on_worker_state_changed(self, event: Worker.StateChanged) -&gt; None:\n        \"\"\"Called when the worker state changes.\"\"\"\n        self.log(event)\n\n\nif __name__ == \"__main__\":\n    app = WeatherApp()\n    app.run()\n</code></pre> <p>In this example, the <code>update_weather</code> is not asynchronous (i.e. a regular function). The <code>@work</code> decorator has <code>thread=True</code> which makes it a thread worker. Note the use of get_current_worker which the function uses to check if it has been cancelled or not.</p> <p>Important</p> <p>Textual will raise an exception if you add the <code>work</code> decorator to a regular function without <code>thread=True</code>.</p>"},{"location":"guide/workers/#posting-messages","title":"Posting messages","text":"<p>Most Textual functions are not thread-safe which means you will need to use <code>call_from_thread</code> to run them from a thread worker. An exception would be post_message which is thread-safe. If your worker needs to make multiple updates to the UI, it is a good idea to send custom messages and let the message handler update the state of the UI.</p>"},{"location":"how-to/","title":"How To","text":"<p>Welcome to the How To section.</p> <p>Here you will find How To articles which cover various topics at a higher level than the Guide or Reference. We will be adding more articles in the future. If there is anything you would like to see covered, open an issue in the Textual repository!</p>"},{"location":"how-to/center-things/","title":"Center things","text":"<p>If you have ever needed to center something in a web page, you will be glad to know it is much easier in Textual.</p> <p>This article discusses a few different ways in which things can be centered, and the differences between them.</p>"},{"location":"how-to/center-things/#aligning-widgets","title":"Aligning widgets","text":"<p>The align rule will center a widget relative to one or both edges. This rule is applied to a container, and will impact how the container's children are arranged. Let's see this in practice with a trivial app containing a Static widget:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, World!\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's the output:</p> <p> CenterApp Hello,\u00a0World! </p> <p>The container of the widget is the screen, which has the <code>align: center middle;</code> rule applied. The <code>center</code> part tells Textual to align in the horizontal direction, and <code>middle</code> tells Textual to align in the vertical direction.</p> <p>The output may surprise you. The text appears to be aligned in the middle (i.e. vertical edge), but left aligned on the horizontal. This isn't a bug \u2014 I promise. Let's make a small change to reveal what is happening here. In the next example, we will add a background and a border to our text:</p> <p>Tip</p> <p>Adding a border is a very good way of visualizing layout issues, if something isn't behaving as you would expect.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, World!\", id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>The static widget will now have a blue background and white border:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHello,\u00a0World!\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note the static widget is as wide as the screen. Since the widget is as wide as its container, there is no room for it to move in the horizontal direction.</p> <p>Info</p> <p>The <code>align</code> rule applies to widgets, not the text.</p> <p>In order to see the <code>center</code> alignment, we will have to make the widget smaller than the width of the screen. Let's set the width of the Static widget to <code>auto</code>, which will make the widget just wide enough to fit the content:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, World!\", id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this now, you should see the widget is aligned on both axis:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHello,\u00a0World!\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"how-to/center-things/#aligning-text","title":"Aligning text","text":"<p>In addition to aligning widgets, you may also want to align text. In order to demonstrate the difference, lets update the example with some longer text. We will also set the width of the widget to something smaller, to force the text to wrap.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's what it looks like with longer text:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eCould\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258eterminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u258a \u258eclassified\u00a0address.\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note how the widget is centered, but the text within it is flushed to the left edge. Left aligned text is the default, but you can also center the text with the text-align rule. Let's center align the longer text by setting this rule:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n        text-align: center;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this, you will see that each line of text is individually centered:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u00a0Could\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258e\u00a0\u00a0\u00a0terminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0classified\u00a0address.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>You can also use <code>text-align</code> to right align text or justify the text (align to both edges).</p>"},{"location":"how-to/center-things/#aligning-content","title":"Aligning content","text":"<p>There is one last rule that can help us center things. The content-align rule aligns content within a widget. It treats the text as a rectangular region and positions it relative to the space inside a widget's border.</p> <p>In order to see why we might need this rule, we need to make the Static widget larger than required to fit the text. Let's set the height of the Static widget to 9 to give the content room to move:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n        height: 9;\n        text-align: center;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's what it looks like with the larger widget:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u00a0Could\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258e\u00a0\u00a0\u00a0terminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0classified\u00a0address.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Textual aligns a widget's content to the top border by default, which is why the space is below the text. We can tell Textual to align the content to the center by setting <code>content-align: center middle</code>;</p> <p>Note</p> <p>Strictly speaking, we only need to align the content vertically here (there is no room to move the content left or right) So we could have done <code>content-align-vertical: middle;</code></p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nQUOTE = \"Could not find you in Seattle and no terminal is in operation at your classified address.\"\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    #hello {\n        background: blue 50%;\n        border: wide white;\n        width: 40;\n        height: 9;\n        text-align: center;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(QUOTE, id=\"hello\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this now, the content will be centered within the widget:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258e\u258a \u258e\u258a \u258e\u00a0Could\u00a0not\u00a0find\u00a0you\u00a0in\u00a0Seattle\u00a0and\u00a0no\u00a0\u258a \u258e\u00a0\u00a0\u00a0terminal\u00a0is\u00a0in\u00a0operation\u00a0at\u00a0your\u00a0\u00a0\u00a0\u258a \u258e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0classified\u00a0address.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a \u258e\u258a \u258e\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"how-to/center-things/#aligning-multiple-widgets","title":"Aligning multiple widgets","text":"<p>It's just as easy to align multiple widgets as it is a single widget. Applying <code>align: center middle;</code> to the parent widget (screen or other container) will align all its children.</p> <p>Let's create an example with two widgets. The following code adds two widgets with auto dimensions:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    .words {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"How about a nice game\", classes=\"words\")\n        yield Static(\"of chess?\", classes=\"words\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>This produces the following output:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHow\u00a0about\u00a0a\u00a0nice\u00a0game\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eof\u00a0chess?\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>We can center both those widgets by applying the <code>align</code> rule as before:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    .words {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"How about a nice game\", classes=\"words\")\n        yield Static(\"of chess?\", classes=\"words\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>Here's the output:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHow\u00a0about\u00a0a\u00a0nice\u00a0game\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eof\u00a0chess?\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <p>Note how the widgets are aligned as if they are a single group. In other words, their position relative to each other didn't change, just their position relative to the screen.</p> <p>If you do want to center each widget independently, you can place each widget inside its own container, and set <code>align</code> for those containers. Textual has a builtin <code>Center</code> container for just this purpose.</p> <p>Let's wrap our two widgets in a <code>Center</code> container:</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center\nfrom textual.widgets import Static\n\n\nclass CenterApp(App):\n    \"\"\"How to center things.\"\"\"\n\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n\n    .words {\n        background: blue 50%;\n        border: wide white;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Center():\n            yield Static(\"How about a nice game\", classes=\"words\")\n        with Center():\n            yield Static(\"of chess?\", classes=\"words\")\n\n\nif __name__ == \"__main__\":\n    app = CenterApp()\n    app.run()\n</code></pre> <p>If you run this, you will see that the widgets are centered relative to each other, not just the screen:</p> <p> CenterApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eHow\u00a0about\u00a0a\u00a0nice\u00a0game\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eof\u00a0chess?\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p>"},{"location":"how-to/center-things/#summary","title":"Summary","text":"<p>Keep the following in mind when you want to center content in Textual:</p> <ul> <li>In order to center a widget, it needs to be smaller than its container.</li> <li>The <code>align</code> rule is applied to the parent of the widget you want to center (i.e. the widget's container).</li> <li>The <code>text-align</code> rule aligns text on a line by line basis.</li> <li>The <code>content-align</code> rule aligns content within a widget.</li> <li>Use the <code>Center</code> container if you want to align multiple widgets relative to each other.</li> <li>Add a border if the alignment isn't working as you would expect.</li> </ul> <p>If you need further help, we are here to help.</p>"},{"location":"how-to/design-a-layout/","title":"Design a Layout","text":"<p>This article discusses an approach you can take when designing the layout for your applications.</p> <p>Textual's layout system is flexible enough to accommodate just about any application design you could conceive of, but it may be hard to know where to start. We will go through a few tips which will help you get over the initial hurdle of designing an application layout.</p>"},{"location":"how-to/design-a-layout/#tip-1-make-a-sketch","title":"Tip 1. Make a sketch","text":"<p>The initial design of your application is best done with a sketch. You could use a drawing package such as Excalidraw for your sketch, but pen and paper is equally as good.</p> <p>Start by drawing a rectangle to represent a blank terminal, then draw a rectangle for each element in your application. Annotate each of the rectangles with the content they will contain, and note wether they will scroll (and in what direction).</p> <p>For the purposes of this article we are going to design a layout for a Twitter or Mastodon client, which will have a header / footer and a number of columns.</p> <p>Note</p> <p>The approach we are discussing here is applicable even if the app you want to build looks nothing like our sketch!</p> <p>Here's our sketch:</p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daW9cdTAwMWK7kv1+f0WQ92VcdTAwMDa46ktcdTAwMTbJXCJ5gcHAi1x1MDAxY1mOl8iKt8GDoaUtyda+eHvIf5+ivKjVUsstW7JbuTaQxGktzWafOudcdTAwMTRZTf7njy9fvvbv2v7Xv7989W9LhXqt3C3cfP3TXHUwMDFkv/a7vVqrSS/B8P+91qBbXHUwMDFhvrPa77d7f//1V6PQvfL77Xqh5HvXtd6gUO/1XHUwMDA35VrLK7VcdTAwMWF/1fp+o/e/7u+9QsP/n3arUe53vdFJUn651m91XHUwMDFmzuXX/Ybf7Pfo2/+P/v/ly3+Gf1x1MDAwN1rX9Uv9QrNS94dcdTAwMWZcdTAwMTi+NGogZ0aFXHUwMDBm77Waw9ZyLoxGxVxyPL+j1tukXHUwMDEz9v0yvXxBjfZHr7hDX1x1MDAwZnL9dT+3q/ay56WbXCK2djHdXHUwMDFkjM57UavXXHUwMDBm+3f1YbtK3Vavl6pcdTAwMTb6peroXHUwMDFkvX63deVcdTAwMWbXyv3qU/dcdTAwMDWOP3+216KuXHUwMDE4farbXHUwMDFhVKpNv+d6gT9cdTAwMWZttVx1MDAwYqVa/254lez56ENX/P1ldOSW/pdC4Vx0LY1VqLW1KtAr7lx1MDAwYkAoXHUwMDBmhFx1MDAxNKhcdTAwMDVarahfQi3baNXpjlDL/sWGP6O2XHUwMDE1XHUwMDBipatcbjWwWX5+T79baPbahS7dt9H7blx1MDAxZa9ZSemhcCdjinM+akfVr1WqfXqHQOZcdTAwMTnOrJQohLs9OGqMP7w1XHUwMDFjjNCopVx1MDAxNs+vuCa0t8tDnPw72HHN8mPHNVx1MDAwN/X6qNXuhXRcdTAwMDBbo89cZtrlwlx1MDAwM1x1MDAwMjhcdTAwMWFcdIpJ1Fxio1x1MDAwZanXmlfhr6u3Slcj0Fxmj/7681x1MDAxNXDVKlx1MDAxYa1WcVx1MDAwNIlcdTAwMThcdTAwMWKsuVLn5367sL63s3+Lza2fXHUwMDA3nZ3tTlx1MDAwNFhDgPtImFx1MDAxYcGVtIpxJjhBIIRT6Vx1MDAxOaUlgcJcdTAwMDJKi8vEqfBcdTAwMThHXHUwMDA1dD6urTaTQFx1MDAwNeMhMiFccjJAQaCeXHUwMDAwKt0zJYGuZvVw6tfrtXZvKkpxXHUwMDA2p1x1MDAxYZCcI1cmNkzbP86OS+lstssvc9f5+3TqrtG8fVxyTPn7wVRxz1xuhdTxQljOQIbolDjOMCMl11x1MDAwZcqgw1x1MDAxMTRcdTAwMTdM/3VRUKBgXHUwMDEyolxceJJcdTAwMDEoi0D/SGPkJEY5eFxuKVKISFx1MDAxOVxiXHUwMDAxUocxyql9ilNcdTAwMWL5b1x1MDAwNVItbFx1MDAxNEi1QXfNXHUwMDEwX/dP1jrpu8ZB7qC4tnXT2upvna3jTcIxXG7KY9TdyLnhlsBcdTAwMDEhiFxuT1x1MDAxObRkXG4kUZhV8o1cdTAwMTAtMqaWXHUwMDA1Uc1cdTAwMTXpgeC/XHUwMDE5Qq2IQijnjJSFS81iQ7TeSbdTV1x1MDAxNexs1upXWLrrb53UXHUwMDBlk1xyUVx1MDAxMljgXHUwMDAyQWjBmWRWh1x1MDAxMFxujmQl3Vx1MDAxNVxyxLVv41BcdTAwMGVFY3BZXHUwMDAwpcsgqkcuV1DoZ+dPKlx1MDAxMqPu1iihXHUwMDAzb3hcdKLr37ZcbrsldbLV2V1vnt3+OL6pXHUwMDFjNJJcctFcdTAwMTTlXCKk4lZcdTAwMTFFcnBJyThGXHUwMDExXHQ+hFxmTTTKJcOlYFRJ5oym4Vx1MDAxNCnaQiBOXHUwMDAyOZMnNaekytphO0CFIUquTJGLNYrNXHUwMDAx0SewjOBcIlx1MDAxZY/8ikbu82dGn1x1MDAwZcCt79+O3HZcdTAwMDBcdTAwMWPd9mG1cbB9tj/YK+VzlbXWgVx1MDAxOdx9fX7fr8ffosJCXGImjTLWLiosxtpcdTAwMTmMXGJcdTAwMTNcdTAwMTVcdTAwMTCczs5dvqBiR8T0i55cdTAwMWVcdTAwMTHVQqk66PpcdTAwMWZcdTAwMWZcdTAwMTNcXCO5W+JKQIK+YTLE21x1MDAxYTxcdTAwMDdB4nNcdTAwMTlcbpnXXHUwMDA0XHUwMDA1xVx1MDAxZbuYYn4p8oBcdTAwMTPaXHUwMDE5p1x1MDAwZSeRmJafTVx1MDAwNoFcdTAwMDWuyZ3PXHUwMDE1XHUwMDA0r+Pp11x1MDAwMHJ041vN/mHt3vU9sLGjW4VGrX43du+GSKWuyviFst/9OnZ8rV6rONR+LVF7gy9cdTAwMTJ2+7VSof78hkatXFxcdTAwMGVqQIlOVqg1/e52XHUwMDFj7m51a5Vas1DPR7SFrt3PPOupXHUwMDE3uDPFQs93r1x1MDAwZVx1MDAwM+j1Qlx1MDAwNVx1MDAxOJmTkns0QltcdTAwMTN/5GRtc6O+M2Bddn/XuK/YfL5/lc68LizfcexEXHUwMDE5j5NRkoxsfUhcdTAwMDPcN1xihp7ipGQ8XHUwMDE4XHUwMDE3XHUwMDBiXHUwMDFlNeGKuEFScvEkiKPrXHUwMDFmhSX5KbCGXHUwMDFisnXKqCA/PLkp0IZy6sDgz1x1MDAxMt2UJt5cdTAwMGVkP0t1U1x1MDAwMapcZouHM/zW5fmxUdqpbbT2sr3NXGZ2N1x1MDAwZTK57av9evpV43vvOXBcIjy6t+hcdTAwMTJwMis6hFBuKCdcdTAwMTX0gmIhYLzGTalCoXgh5TTPzz1GSIUpg89Selx1MDAxMjSzj01cYjbxXHUwMDExnUJcdTAwMWKlmVx0XGZcYr5cdTAwMTWcrzNM2Xbnvt45Ov/x48f5Sf3i6vgwfXxcdTAwMWMwTH9O/9qHXHUwMDBm51t7lUIu5Z9095pH9lx1MDAxMCv1y+1cdTAwMWbjZ3k6f6Hbbd3MYcQ4XHUwMDAwhZRQi4qoSCNcdTAwMTY5vkMmjGhcdTAwMGWtiZ+aTO/MhFx1MDAxYrFcdTAwMTRcdTAwMTGpIOtDySBlXHUwMDA1aMLhJJin6bBloFxirnYh2cm0eJLW46QsmnJBy6ZGVcDEPI2MazJvxr5cdTAwMDPFXHUwMDBiSpjIi1x1MDAwNYj1dUaM49jRXHUwMDE5Rix/4/v9JfmwXHUwMDE3SD/sw0JNiWfD5Fx1MDAxYmyYgPDR5/FcdTAwMDLBXGYjb1x1MDAxMt+GVXnaNrYvdzqp6lx1MDAwNuxfyrPTn0onX+BcZnJcdTAwMDGGh+1cdTAwMTdcdTAwMWGPRIVcdTAwMDJEaGCaiVCbPsUteOu3mtlccr9/36hWz5pq/7qU7drcSXxcdTAwMTFcdTAwMDLFKVx1MDAwMdNq+aNcdTAwMDFcdTAwMDFWXGKrkLbcXHUwMDE4w+dcdTAwMTggm37VK6BCJD+KSWHleHYxxL1hXHUwMDFlJSXyzXnHylx1MDAwYpCYXHUwMDAzjMlcdTAwMTWgXHUwMDE3SPnDXHUwMDA1yLLw0ZEtVJJroUT8uen1k5udY5VLnzXRXFzdf9va6ejNXtJcdTAwMTWISN5cdTAwMDBcdC03XHUwMDFjJ4dcdTAwMDEkMOp24iVOIYtGvNFcdTAwMTT+5jqUXHUwMDFmXFyv5fa+X/LU/u3deW692Pl29X1OXHUwMDFkUjJQXHUwMDE4sixcdTAwMWTSkb5cdTAwMGKYkFxcQrBW5iXYT7/qxOuQ8JRigCBcdTAwMTXnlIKG0iHiYU9qXHUwMDEwlFx1MDAwYjFBXHUwMDE27Y1cdTAwMDbsU4xcdTAwMTIgRi/w80eLkTA8fPQpKlxySM1cdTAwMDH1aIzrpaBs9b5cdTAwMWSet9bWe2epn+1jW7lnJ7yQdC1SXHUwMDFlkTjprlx1MDAxNVO1SLteXHUwMDE3Slx1MDAxYm6QXHTFlydGU8ah5cTAc1JU5yB9WG9uXHUwMDFmVlx1MDAwN/5ajde+dUSnXdqZU3U0LF91Zk26kOxcdTAwMDCoOZKf6Vx1MDAxN71cdTAwMDKig0hcdTAwMTIvNJsqOkYsXHUwMDE04Z+qk1x1MDAwMNV5gYk/WnU4RqpcdTAwMGVcdTAwMDHEWUGr45codPZcdTAwMGWvXHUwMDFi6Hc6WXPon9rDwkb7eDPZsmOYp13dNVk9YVx0fCM6f5hlolBcdTAwMTGCXCKTQmk8Yl9cdTAwMTOSXHUwMDAwpuhPKywzXHUwMDFlc1Vj04ORXGLa01x1MDAxOJ6MfZz+ZHTcXG7BR/q0xFwiXHUwMDA1VFxc2PcpJlx1MDAwM1x1MDAxYpmkcCGlq+Ww8f3Qjl83379l6rtcdTAwMTfqqr2pdLfWbq4nXHUwMDFimK6aXGaBOdplXHUwMDE2UYcqXHUwMDFlldJcdTAwMWWlxXRYg5VcdTAwMTbeVvFooGS5P1x0zH9ENVmnWMzk8T6T7V3ft3WuslNax/R8XHUwMDBlytBcdTAwMWTgi4qLyLxcdTAwMWRlVEhoXHUwMDAzwDmzc1D11ItOuIPiWntcdTAwMTKtq8IgymMqVE2mUHiMoXtcdTAwMDe5TXzjXHUwMDEwcmQxmSTAWyvoNCBcZlx1MDAwNNK2hFx1MDAxNJMtyD/FLybbarX6Sysme4G6w1x1MDAwNirclqVcdTAwMTeTXHUwMDA1XHUwMDA3JENRKSkkiacxvk5cdTAwMWSfyduLTnFXZHbSm5mN3Lp/1j9KejFcdTAwMTnnnPyJtGjMw2zl6GtcdTAwMWVqySxFpXJPOHF8c43nSlaUTdelx6Gajla63vJ57fREXFyKrl/cuD1fWHVccmk2W5gwzTZsMnp2k9hcdTAwMWHcJEL86fxcdTAwMDNd6N521i94tre/0Thkx1x1MDAwN+e902RcdTAwMWI2QrdngFx1MDAxMftCuJZ5XHUwMDE4XHUwMDA2wDyrjEW7iDD47SdT1vKnu9vbP1x1MDAwZnY2+1x1MDAxOdk46lx1MDAxZmyd5W3cirXs9o+LU6wp1chu9ZrXR5XCzdXu4irW3NTg0s1cdTAwMWXMKP90s0RcdTAwMWGZjVx1MDAxZE7TezPpbo9SXHUwMDFjrYiOXHUwMDE5Ob6JXHUwMDA0SFxi4ZGlUlxcPZYwvy2cPlx1MDAwN8timr1lXHUwMDBllr3A+lx1MDAxZj1YJmT0xKlcIoiilvGHsEV3/fJ252fZ7MHZcVVV8VStdZOvcKRvJOVcdTAwMTiWsGFEalI4So0oXHUwMDAzs1x1MDAwYnjA7TdcdTAwMTe4/PptrWvWXHUwMDBlb1tcdTAwMWIoikff7zavXHUwMDBi+3M9wyZcdTAwMTRcYlxc+qhDcGooLEQgmUBleXzUT7/qxFx1MDAwYlx1MDAxMXpcdTAwMTZdMkdJ/6RcdTAwMTBcdTAwMTlcdTAwMTJcIvc4r3vY9+3FmqsqRK/AY3KF6Fx1MDAwNXL+cCGy0c8zUL5H2TaK+KtcdTAwMDGcsfNO6qJvMsfVtZ3Uxam6zlx1MDAwNzLQhCqR8lx1MDAxNFx1MDAwNzR0qUJPKJFcdTAwMDTwXGZl92RcdTAwMWQ1uHj5VKJcdTAwMTlKxLLp0rbMs61Byp5cdTAwMWOcXHUwMDE2JWtcdTAwMTVcdTAwMDbzjX9LYiZcdTAwMTbE/1KUKLpCXHUwMDA2NWHBTVx1MDAwYsVcdTAwMDb99IteXHUwMDAxIZJuXHUwMDEwmaDjVlx1MDAxYVx1MDAxOFx1MDAxN1wiKZTHkFx1MDAwMGdcZqi3V2uuqlx1MDAxMP1WXHUwMDE50Vx1MDAwYtz80UIkZ1RQk1WSXHUwMDA20cZcdTAwMTeiXvNO+er7fjs/yFxmWje8t7X5bTfpQiQ98r9aXHUwMDAyQ+VcbmdHXGb0ULQmSIiY0kYwMz5h9Y8uWjtcdTAwMTPrezc3crN4spMvpG4vq7uVg0pcdTAwMDIlR+jIKVeyIHS/jOXxNWf6Va+A5lxi4chcdTAwMWXc8LWRIatl1EJcdTAwMTG+4qozz9pcdTAwMDDJVZ1cdTAwMTeI+KNVh7xeVFSCMlxiwOJPNG01N3c7W6ksbMP5oLnm64vNb1FcdTAwMDNcdTAwMTJcdNFcdTAwMWNQzFOMXHUwMDFiTVx1MDAxZW+yXGJCXHUwMDAwp9RILWpJnZUuWVx1MDAxYq7Ywd6rZE1gdMlcdTAwMWFcdTAwMThB3oDJ+KVcdTAwMDCbOyeH7eyp3fyW/nFweqK+i3w/asWOxJRcdTAwMDLQZXqKYFx1MDAwMUrgtFx1MDAxMWLOPFSWhJPDm59r/u0qXHUwMDAxdvs3p8Wj01x1MDAxY5rMnbzoraW3blpnXHUwMDBim7WUYFx1MDAwMlx1MDAxNfhLrVx1MDAwNFx1MDAxMJFcdTAwMTUxnJO2U0Ns/JVrjptnxVRd18o1xnJZOEinipuphFx1MDAxM7QxRNBaI2pwSz2HaopcdTAwMDE8gr5WXGa5q/JXn/Mks1KFa57ezd3traV+yPtTuGfFjctKMW4hwPFdeW3ztsVcdTAwMGYzuWo5n8FBrnmbW1xcIYCVbOkpyMxVXHUwMDAztNKcXHUwMDFiXHUwMDFi/2nN6b2Z8Fx1MDAxNITMtSeFVdZcdTAwMTlszoJcdTAwMTHzUFx04HJw7Vx1MDAxYziGXHUwMDE20/hMQVY1XHUwMDA1eYH2PzpcdTAwMDVcdTAwMTFcInLgXHUwMDBiKE92i1xixlx1MDAxZvdK93aE/H7q31xcXHUwMDFmd1x1MDAwYmv3ftpcdTAwMWVVo8aiXHUwMDEzI3HaXHUwMDE1u1lheFjEXHUwMDFlSlx1MDAwMcAjkUelXHUwMDFmpkTDXHL7lLjg/b+6YoNGZuOuVsZu75JlZfv84GLO0TD3Z9lSXHUwMDA0PPpcdTAwMDFcdTAwMDRAVFx1MDAwNIb4XHUwMDBmIEy/6MQrkXElaVx1MDAxYbmRjPAvxlFvSIhIXHUwMDE4mISQ7/vUoVXVoVx1MDAxN7j5w3XIRJaJUrRcbuJnmGNcdJutVvU8ZVtHfnX/JNPM1lxuulHNJl+IXGJtQqCSROdhIZIgPWRMuVx1MDAxZFjQ2OC04KdcdTAwMTJNKtH29fqV8Sv5Sr3Fi6Zlv12y9LzzMu+iRFx1MDAxOF1cdTAwMDAjlVuxiFx1MDAwNYpcdTAwMDVegv30q15cdTAwMDEpcvVWyEBcdTAwMWJcdTAwMTGWXCIp0DPcjXxcdG5ccshFbIjxKUVcdTAwMWYrRS+w80dLkdSRUoSKvJLSc9Sk2SNbNlBLr/XyV6XizV1e/cgmfCVcdTAwMDEw6GlGcWCUskqHXHUwMDAzUitPUpxQsqRcdTAwMDAkLi8jWqlCgFx1MDAxMzi9zJTklrxs71c3dnZz+6U7lUDBXHUwMDEx0etkSPdwXHUwMDFiSX98vZl+0SugN1x1MDAxY6zbeskyJoIrRD/UXHUwMDAx6EXi+1NwXHUwMDEyIDgvkPBHXHUwMDBiXHUwMDBlRG+AqrVGXHUwMDAwruOnPt30UZrt7O83hTpJy8Za5uw+9zPZguOqnIGSXG5BXHUwMDA0NNysYywgXHUwMDA1uMdcdTAwMTJcdTAwMDJjcG9cbsjVL1x1MDAwM1x1MDAxMDqQXGIvtVxmQEfv+oRCgWVyjpVr9lmrv5nL+oY31/X6xe4mXjRcdTAwMTO/qix6buEowp52i5mFXHUwMDE28qNcdTAwMWXwrFvv+nFcdTAwMTW0t42SRVx1MDAwMVO6labdhlNuq1x1MDAwM/c1OFx0T5Bu116SXHUwMDExPVxcx1x1MDAwMyZcdTAwMGJcdTAwMDDeXHUwMDE3o1x1MDAxMoRcXPoq5DNYU7n1XHUwMDAyOJujiv460ylmXHUwMDFh9udm+eLozFx1MDAxN1x1MDAwNzlTgGbSnVxmXHUwMDExJlx1MDAwMVx1MDAxMNFwI1x1MDAxMVhgfYSHrSS14yxOyTORhjViedtGk5eR5ExcdTAwMTRcYlx1MDAwYqFAmbGUXGY1yY1wwLKt+9KLUlx1MDAxNuSV5linpnbrlyO8Ut2/6M9wSv1WO8omjTV3Yjma8VMuYjWa6MdjXCLHxITbbFCjiV8nUDXr+3fn1fIgla1s5Vx1MDAxYq3LuzxL/OxcZoWFR1xcL4XVhlEqMl58hpx0h6SXQKeMU55/dFxc58hcdTAwMTZcdTAwMTbyV2dcXF9cdTAwMWNuX36HUjrTb3/G9Vx1MDAwN8b1QzdPM5Qztlx1MDAxMVVuu2vkMv7I2mxCT2pkg/bc9ijKKKVItsdcdTAwMWQloPBcdTAwMDSS41x1MDAxNNxcIuCbxrpnXHUwMDA2tmWeNW5FVMtcdTAwMTRcdTAwMTnHXHUwMDEx31x1MDAwNi0loqA2MOOe0MNcdEvJiXtcdTAwMTSToOdcdTAwMTmMmFxcXGZcdTAwMTFcdTAwMWWPzFhcZnFG5Zog9tOv2my01y90++u1ZrnWrIw3zH849XZcZl84jOjSwLWSeaApYXLzXHUwMDE0bjhSju6s65hC2/G2Ry6c2lxmlj9MsE1cXLrfLL/cpNn11IEmpZhnXHUwMDE0pztkhit6XHUwMDE4hWKiTZR5o9vcW5I9dONQdqJN9UKvv9FqNGp96vmDVq3ZXHUwMDBm9/CwK9dcXNBX/cJcdTAwMDTh0DVcdTAwMDVfXHUwMDBis0PbfeM4yY9++zKKnuF/nn//959T352KwrX7mUD06Nv+XGL+Ozet2ehHq1xmUr9Solx1MDAxY3/4ZracJZXVXHUwMDE0o1x1MDAwNJQpUIbwL9n4g1x1MDAxY1xi3ONusFx1MDAwMJlcdTAwMTaISyyWt8JDbYZLW4xtXGY4mj/gXHUwMDFlXHUwMDEzlFxmW0roXHRcdTAwMWWT01x0XHUwMDFjKWWiTJnNY15cdTAwMTbOasxcYnzVY78xWW22KVx1MDAxZadcdTAwMTBiNNdXXGJARKLZiO6fOcR40m1cdTAwMDIurGTuwVFjZvPa+HWsXHUwMDE0u0yH1/C1XHRkzckukfM1NnIyUlx0NG5p8/iL1lx1MDAxY1X29zZQ9vzaXHUwMDFl+Nnvt53Dw42bpJNLSqJLd4hBrEIlJIyzXHUwMDBiV+5JXHUwMDFkrVxyMolumONNw3Czn8Ux2uNCXHUwMDE5lNHZ0MScXHK3lFxyKVx1MDAwN4x3SYfesMftn7O+91xyK1x1MDAxMc783iU+2OD2one9/8b0Lf5cdTAwMTRcdTAwMTahaNBo9r7811N29qVX6rbq9f9+35QuRjNcdTAwMTYxpVx1MDAxNemHzIxcdTAwMDc9lFtseq5nzWdcdTAwMDM6oZwljEdGXHUwMDEzrHFcdTAwMWJccihcdTAwMDXjXHUwMDAzOI5HXHUwMDE0XHUwMDEzRltcdTAwMTKS5Y7MkunVJM1cbshccmshg9tCjCa3QHiGh2r+nthcdTAwMGKcnVx1MDAxYptSeG8/5MLY7dm3RD80W1x1MDAxN8ezPNBkcyVKpa1Ukk2meZy6XFxcInPVkbONUFRrZu92PO7OXHUwMDE4Uk5jQIOWXG5IlfREczQhkfwsvW4lXHUwMDEycuVEo1bKg0VcdTAwMDPa/Vx1MDAwNKE8p1x1MDAwMYukM2TRdCY510zMs13BbFx1MDAxZE0onVnjaW5cdGSEXCJcdCZUmsxccvfc7CRcYiWXTGfaeJRmSLe/MFx1MDAxMavk09hMoEfo0I55hzvdXHUwMDA0nkp95LRhnVx1MDAwMVx1MDAwNFx1MDAxN194f05T1Ly5dtpYXHUwMDFhp1x1MDAxMYtI4G6tU1wiXG6plbTTSMRyx2jSXHUwMDBlf8zkMFEsZpu9LO5cdTAwMTjPckKVXHUwMDE0YIxcdTAwMDX6VUzSLHiUhJEyuM50T2/halx1MDAxM1skst3PJKZcdTAwMTdGbjxyXHUwMDEynVTOclxu9vjcNtvLJ5TbXGI4XHUwMDFlKkBKLCWA0eOT6NxQz1x1MDAxM945d0umkl1b3pg8R+5m891CXHUwMDBlklx1MDAwMlLBlEJcdTAwMGbKOSlYJcWhXHUwMDFlrvRcdTAwMTBMdlx1MDAxZshNKtRqrlxc8/d1a47ZyPRcZvdop0ZJXHUwMDE2XHUwMDFjXHUwMDEwfnJrZFx1MDAxOEjFXHTsZlg680rPNvsp33FmQ+ZG+MDtduVOOTko71x1MDAxNlx1MDAxNzFuSS73yFx1MDAwMzVcdHGiUatEbdHAXHUwMDFlvjpcdTAwMDHpObkter3nSNvGnfZqPUel88Fpo8GuQF9tnaX3i93SbvbnbtRcIueJoTaNnuSkXHUwMDE3XHUwMDA0fjfXKMeX70CiNiNcZqM/Llx1MDAwZmVLXHUwMDFjN1NIpt1cdTAwMWHlRuhcZuppS9hMKatcdTAwMTSMzLVcclxc5YruXvNYRvDWcaj4ZVx1MDAwNNVWt3bvxoueRn7ed/xpxumXWl5cdTAwMTCoXHUwMDFiXHUwMDBll1xyKcvA7VpcdTAwMTY73mfDIaHxzqX2iF6F21x1MDAwN5TcitLjhdSopVx1MDAwN4xcdTAwMWOkojcuN+Ct52qDrZ3Ykz7gZKwnnVx1MDAwMNqIkSdtXHUwMDE5XHSHlfOE/6In4ubedWpeKzNbVr6EJuKoP9zjXCJ0f8mowlx1MDAxNN/gJvNcdTAwMWZ2d32li5m5a9uYi2Hu4Vx1MDAxOMVcdTAwMDRnROtcdTAwMDKnjIOBoFx1MDAxYqxcdTAwMWTna5fIMTZ5L1bKxURh2v2kJuBcdTAwMWNlYv54PMHXQrt92Ce4Pd9cdTAwMGXCd638yPWjq/x6XfNv1qfUi19cZn+cXGZccvvTUZI/jIFff/z6f3dfuVAifQ== HeaderTweetTweetTweetTweetFooterTweetTweetTweetTweetTweetTweetTweetTweetFixedFixedColumns (vertical scroll)horizontal scroll <p>It's rough, but it's all we need.</p> Try in Textual-web <p></p>"},{"location":"how-to/design-a-layout/#tip-2-work-outside-in","title":"Tip 2. Work outside in","text":"<p>Like a sculpture with a block of marble, it is best to work from the outside towards the center. If your design has fixed elements (like a header, footer, or sidebar), start with those first.</p> <p>In our sketch we have a header and footer. Since these are the outermost widgets, we will begin by adding them.</p> <p>Tip</p> <p>Textual has builtin Header and Footer widgets which you could use in a real application.</p> <p>The following example defines an app, a screen, and our header and footer widgets. Since we're starting from scratch and don't have any functionality for our widgets, we are going to use the Placeholder widget to help us visualize our design.</p> <p>In a real app, we would replace these placeholders with more useful content.</p> layout01.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):  # (1)!\n    pass\n\n\nclass Footer(Placeholder):  # (2)!\n    pass\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")  # (3)!\n        yield Footer(id=\"Footer\")  # (4)!\n\n\nclass LayoutApp(App):\n    def on_mount(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <ol> <li>The Header widget extends Placeholder.</li> <li>The footer widget extends Placeholder.</li> <li>Creates the header widget (the id will be displayed within the placeholder widget).</li> <li>Creates the footer widget.</li> </ol> <p> LayoutApp #Header </p>"},{"location":"how-to/design-a-layout/#tip-3-apply-docks","title":"Tip 3. Apply docks","text":"<p>This app works, but the header and footer don't behave as expected. We want both of these widgets to be fixed to an edge of the screen and limited in height. In Textual this is known as docking which you can apply with the dock rule.</p> <p>We will dock the header and footer to the top and bottom edges of the screen respectively, by adding a little CSS to the widget classes:</p> layout02.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <p> LayoutApp #Header #Footer </p> <p>The <code>DEFAULT_CSS</code> class variable is used to set CSS directly in Python code. We could define these in an external CSS file, but writing the CSS inline like this can be convenient if it isn't too complex.</p> <p>When you dock a widget, it reduces the available area for other widgets. This means that Textual will automatically compensate for the 6 additional lines reserved for the header and footer.</p>"},{"location":"how-to/design-a-layout/#tip-4-use-fr-units-for-flexible-things","title":"Tip 4. Use FR Units for flexible things","text":"<p>After we've added the header and footer, we want the remaining space to be used for the main interface, which will contain the columns in the sketch. This area is flexible (will change according to the size of the terminal), so how do we ensure that it takes up precisely the space needed?</p> <p>The simplest way is to use fr units. By setting both the width and height to <code>1fr</code>, we are telling Textual to divide the space equally amongst the remaining widgets. There is only a single widget, so that widget will fill all of the remaining space.</p> <p>Let's make that change.</p> layout03.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass ColumnsContainer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    ColumnsContainer {\n        width: 1fr;\n        height: 1fr;\n        border: solid white;\n    }\n    \"\"\"  # (1)!\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        yield ColumnsContainer(id=\"Columns\")\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <ol> <li>Here's where we set the width and height to <code>1fr</code>. We also add a border just to illustrate the dimensions better.</li> </ol> <p> LayoutApp #Header \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502#Columns\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 #Footer </p> <p>As you can see, the central Columns area will resize with the terminal window.</p>"},{"location":"how-to/design-a-layout/#tip-5-use-containers","title":"Tip 5. Use containers","text":"<p>Before we add content to the Columns area, we have an opportunity to simplify. Rather than extend <code>Placeholder</code> for our <code>ColumnsContainer</code> widget, we can use one of the builtin containers. A container is simply a widget designed to contain other widgets. Containers are styled with <code>fr</code> units to fill the remaining space so we won't need to add any more CSS.</p> <p>Let's replace the <code>ColumnsContainer</code> class in the previous example with a <code>HorizontalScroll</code> container, which also adds an automatic horizontal scrollbar.</p> layout04.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        yield HorizontalScroll()  # (1)!\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <ol> <li>The builtin container widget.</li> </ol> <p> LayoutApp #Header #Footer </p> <p>The container will appear as blank space until we add some widgets to it.</p> <p>Let's add the columns to the <code>HorizontalScroll</code>. A column is itself a container which will have a vertical scrollbar, so we will define our <code>Column</code> by subclassing <code>VerticalScroll</code>. In a real app, these columns will likely be added dynamically from some kind of configuration, but let's add 4 to visualize the layout.</p> <p>We will also define a <code>Tweet</code> placeholder and add a few to each column.</p> layout05.pyOutput <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll, VerticalScroll\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass Tweet(Placeholder):\n    pass\n\n\nclass Column(VerticalScroll):\n    def compose(self) -&gt; ComposeResult:\n        for tweet_no in range(1, 20):\n            yield Tweet(id=f\"Tweet{tweet_no}\")\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        with HorizontalScroll():\n            yield Column()\n            yield Column()\n            yield Column()\n            yield Column()\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <p> LayoutApp #Header #Tweet1#Tweet1#Tweet1#Tweet1 #Footer </p> <p>Note from the output that each <code>Column</code> takes a quarter of the screen width. This happens because <code>Column</code> extends a container which has a width of <code>1fr</code>.</p> <p>It makes more sense for a column in a Twitter / Mastodon client to use a fixed width. Let's set the width of the columns to 32.</p> <p>We also want to reduce the height of each \"tweet\". In the real app, you might set the height to \"auto\" so it fits the content, but lets set it to 5 lines for now.</p> <p>Here's the final example and a reminder of the sketch.</p> layout06.pyOutputSketch <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import HorizontalScroll, VerticalScroll\nfrom textual.screen import Screen\nfrom textual.widgets import Placeholder\n\n\nclass Header(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Header {\n        height: 3;\n        dock: top;\n    }\n    \"\"\"\n\n\nclass Footer(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        height: 3;\n        dock: bottom;\n    }\n    \"\"\"\n\n\nclass Tweet(Placeholder):\n    DEFAULT_CSS = \"\"\"\n    Tweet {\n        height: 5;\n        width: 1fr;\n        border: tall $background;\n    }\n    \"\"\"\n\n\nclass Column(VerticalScroll):\n    DEFAULT_CSS = \"\"\"\n    Column {\n        height: 1fr;\n        width: 32;\n        margin: 0 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        for tweet_no in range(1, 20):\n            yield Tweet(id=f\"Tweet{tweet_no}\")\n\n\nclass TweetScreen(Screen):\n    def compose(self) -&gt; ComposeResult:\n        yield Header(id=\"Header\")\n        yield Footer(id=\"Footer\")\n        with HorizontalScroll():\n            yield Column()\n            yield Column()\n            yield Column()\n            yield Column()\n\n\nclass LayoutApp(App):\n    def on_ready(self) -&gt; None:\n        self.push_screen(TweetScreen())\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <p> LayoutApp #Header \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet1\u258e\u258a#Tweet1\u258e\u258a#Tweet1\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u2583\u2583\u258a\u258e\u2583\u2583\u258a\u258e \u258a#Tweet2\u258e\u258a#Tweet2\u258e\u258a#Tweet2\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet3\u258e\u258a#Tweet3\u258e\u258a#Tweet3\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet4\u258e\u258a#Tweet4\u258e\u258a#Tweet4\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a#Tweet5\u258e\u258a#Tweet5\u258e\u258a#Tweet5\u258e \u258a\u258e\u258a\u258e\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258c #Footer </p> <p> eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daW9cdTAwMWK7kv1+f0WQ92VcdTAwMDa46ktcdTAwMTbJXCJ5gcHAi1x1MDAxY1mOl8iKt8GDoaUtyda+eHvIf5+ivKjVUsstW7JbuTaQxGktzWafOudcdTAwMTRZTf7njy9fvvbv2v7Xv7989W9LhXqt3C3cfP3TXHUwMDFkv/a7vVqrSS/B8P+91qBbXHUwMDFhvrPa77d7f//1V6PQvfL77Xqh5HvXtd6gUO/1XHUwMDA35VrLK7VcdTAwMWF/1fp+o/e/7u+9QsP/n3arUe53vdFJUn651m91XHUwMDFmzuXX/Ybf7Pfo2/+P/v/ly3+Gf1x1MDAwN1rX9Uv9QrNS94dcdTAwMWZcdTAwMTi+NGogZ0aFXHUwMDBm77Waw9ZyLoxGxVxyPL+j1tukXHUwMDEz9v0yvXxBjfZHr7hDX1x1MDAwZnL9dT+3q/ay56WbXCK2djHdXHUwMDFkjM57UavXXHUwMDBm+3f1YbtK3Vavl6pcdTAwMTb6peroXHUwMDFkvX63deVcdTAwMWbXyv3qU/dcdTAwMDWOP3+216KuXHUwMDE4farbXHUwMDFhVKpNv+d6gT9cdTAwMWZttVx1MDAwYqVa/254lez56ENX/P1ldOSW/pdC4Vx0LY1VqLW1KtAr7lx1MDAwYkAoXHUwMDBmhFx1MDAxNKhcdTAwMDVarahfQi3baNXpjlDL/sWGP6O2XHUwMDE1XHUwMDBipatcbjWwWX5+T79baPbahS7dt9H7blx1MDAxZa9ZSemhcCdjinM+akfVr1WqfXqHQOZcdTAwMTnOrJQohLs9OGqMP7w1XHUwMDFjjNCopVx1MDAxNs+vuCa0t8tDnPw72HHN8mPHNVx1MDAwN/X6qNXuhXRcdTAwMDBbo89cZtrlwlx1MDAwM1x1MDAwMjhcdTAwMWFcdIpJ1Fxio1x1MDAwZanXmlfhr6u3Slcj0Fxmj/7681x1MDAxNXDVKlx1MDAxYa1WcVx1MDAwNIlcdTAwMThcdTAwMWKsuVLn5367sL63s3+Lza2fXHUwMDA3nZ3tTlx1MDAwNFhDgPtImFx1MDAxYcGVtIpxJjhBIIRT6Vx1MDAxOaUlgcJcdTAwMDJKi8vEqfBcdTAwMThHXHUwMDA1dD6urTaTQFx1MDAwNeMhMiFccjJAQaCeXHUwMDAwKt0zJYGuZvVw6tfrtXZvKkpxXHUwMDA2p1x1MDAxYZCcI1cmNkzbP86OS+lstssvc9f5+3TqrtG8fVxyTPn7wVRxz1xuhdTxQljOQIbolDjOMCMl11x1MDAwZcqgw1x1MDAxMTRcdTAwMTdM/3VRUKBgXHUwMDEyolxceJJcdTAwMDEoi0D/SGPkJEY5eFxuKVKISFx1MDAxOVxiXHUwMDAxUocxyql9ilNcdTAwMWL5b1x1MDAwNVItbFx1MDAxNEi1QXfNXHUwMDEwX/dP1jrpu8ZB7qC4tnXT2upvna3jTcIxXG7KY9TdyLnhlsBcdTAwMDEhiFxuT1x1MDAxObRkXG4kUZhV8o1cdTAwMTAtMqaWXHUwMDA1Uc1cdTAwMTXpgeC/XHUwMDE5Qq2IQijnjJSFS81iQ7TeSbdTV1x1MDAxNexs1upXWLrrb53UXHUwMDBlk1xyUVx1MDAxMljgXHUwMDAyQWjBmWRWh1x1MDAxMFxujmQl3Vx1MDAxNVxyxLVv41BcdTAwMGVFY3BZXHUwMDAwpcsgqkcuV1DoZ+dPKlx1MDAxMqPu1iihXHUwMDAzb3hcdKLr37ZcbrsldbLV2V1vnt3+OL6pXHUwMDFjNJJcctFcdTAwMTTlXCKk4lZcdTAwMTFFcnBJyThGXHUwMDExXHQ+hFxmTTTKJcOlYFRJ5oym4Vx1MDAxNCnaQiBOXHUwMDAyOZMnNaekytphO0CFIUquTJGLNYrNXHUwMDAx0SewjOBcIlx1MDAxZY/8ikbu82dGn1x1MDAwZcCt79+O3HZcdTAwMDBcdTAwMWPd9mG1cbB9tj/YK+VzlbXWgVx1MDAxOdx9fX7fr8ffosJCXGImjTLWLiosxtpcdTAwMTmMXGJcdTAwMTNcdTAwMTVcdTAwMTCczs5dvqBiR8T0i55cdTAwMWVcdTAwMTHVQqk66PpcdTAwMWZcdTAwMWZcdTAwMTNcXCO5W+JKQIK+YTLE21x1MDAxYTxcdTAwMDdB4nNcdTAwMTlcbpnXXHUwMDA0XHUwMDA1xVx1MDAxZbuYYn4p8oBcdTAwMTPaXHUwMDE5p1x1MDAwZSeRmJafTVx1MDAwNoFcdTAwMDWuyZ3PXHUwMDE1XHUwMDA0r+Pp11x1MDAwMHJ041vN/mHt3vU9sLGjW4VGrX43du+GSKWuyviFst/9OnZ8rV6rONR+LVF7gy9cdTAwMTJ2+7VSof78hkatXFxcdTAwMGVqQIlOVqg1/e52XHUwMDFj7m51a5Vas1DPR7SFrt3PPOupXHUwMDE3uDPFQs93r1x1MDAwZVx1MDAwM+j1Qlx1MDAwNVx1MDAxOJmTkns0QltcdTAwMTN/5GRtc6O+M2Bddn/XuK/YfL5/lc68LizfcexEXHUwMDE5j5NRkoxsfUhcdTAwMDPcN1xihp7ipGQ8XHUwMDE4XHUwMDE3XHUwMDBiXHUwMDFlNeGKuEFScvEkiKPrXHUwMDFmhSX5KbCGXHUwMDFisnXKqCA/PLkp0IZy6sDgz1x1MDAxMt2UJt5cdTAwMGVkP0t1U1x1MDAwMapcZouHM/zW5fmxUdqpbbT2sr3NXGZ2N1x1MDAwZTK57av9evpV43vvOXBcIjy6t+hcdTAwMTJwMis6hFBuKCdcdTAwMTX0gmIhYLzGTalCoXgh5TTPzz1GSIUpg89Selx1MDAxMjSzj01cYjbxXHUwMDExnUJcdTAwMWKlmVx0XGZcYr5cdTAwMTWcrzNM2Xbnvt45Ov/x48f5Sf3i6vgwfXxcdTAwMWMwTH9O/9qHXHUwMDBm51t7lUIu5Z9095pH9lx1MDAxMCv1y+1cdTAwMWbjZ3k6f6Hbbd3MYcQ4XHUwMDAwhZRQi4qoSCNcdTAwMTY5vkMmjGhcdTAwMGWtiZ+aTO/MhFx1MDAxYrFcdTAwMTRcdTAwMTGpIOtDySBlXHUwMDA1aMLhJJin6bBloFxirnYh2cm0eJLW46QsmnJBy6ZGVcDEPI2MazJvxr5cdTAwMDPFXHUwMDBiSpjIi1x1MDAwNYj1dUaM49jRXHUwMDE5Rix/4/v9JfmwXHUwMDE3SD/sw0JNiWfD5Fx1MDAxYmyYgPDR5/FcdTAwMDLBXGYjb1x1MDAxMt+GVXnaNrYvdzqp6lx1MDAwNuxfyrPTn0onX+BcZnJcdTAwMDGGh+1cdTAwMTdcdTAwMWGPRIVcdTAwMDJEaGCaiVCbPsUteOu3mtlccr9/36hWz5pq/7qU7drcSXxcdTAwMTFcdTAwMDLFKVx1MDAwMdNq+aNcdTAwMDFcdTAwMDFWXGKrkLbcXHUwMDE4w+dcdTAwMTggm37VK6BCJD+KSWHleHYxxL1hXHUwMDFlJSXyzXnHylx1MDAwYpCYXHUwMDAzjMlcdTAwMTWgXHUwMDE3SPnDXHUwMDA1yLLw0ZEtVJJroUT8uen1k5udY5VLnzXRXFzdf9va6ejNXtJcdTAwMTWISN5cdTAwMDBcdC03XHUwMDFjJ4dcdTAwMDEkMOp24iVOIYtGvNFcdTAwMTT+5jqUXHUwMDFmXFyv5fa+X/LU/u3deW692Pl29X1OXHUwMDFkUjJQXHUwMDE4sixcdTAwMWTSkb5cdTAwMGKYkFxcQrBW5iXYT7/qxOuQ8JRigCBcdTAwMTXnlIKG0iHiYU9qXHUwMDEwlFx1MDAwYjFBXHUwMDE27Y1cdTAwMDbsU4xcdTAwMTIgRi/w80eLkTA8fPQpKlxySM1cdTAwMDH1aIzrpaBs9b5cdTAwMWSet9bWe2epn+1jW7lnJ7yQdC1SXHUwMDFlkTjprlx1MDAxNVO1SLteXHUwMDE3Slx1MDAxYm6QXHTFlydGU8ah5cTAc1JU5yB9WG9uXHUwMDFmVlx1MDAwN/5ajde+dUSnXdqZU3U0LF91Zk26kOxcdTAwMDCoOZKf6Vx1MDAxN71cdTAwMDKig0hcdTAwMTIvNJsqOkYsXHUwMDE04Z+qk1x1MDAwMNV5gYk/WnU4RqpcdTAwMGVcdTAwMDHEWUGr45codPZcdTAwMGWvXHUwMDFi6Hc6WXPon9rDwkb7eDPZsmOYp13dNVk9YVx0fCM6f5hlolBcdTAwMTGCXCKTQmk8Yl9cdTAwMTOSXHUwMDAwpuhPKywzXHUwMDFlc1Vj04ORXGLa01x1MDAxOJ6MfZz+ZHTcXG7BR/q0xFwiXHUwMDA1VFxc2PcpJlx1MDAwM1x1MDAxYpmkcCGlq+Ww8f3Qjl83379l6rtcdTAwMTfqqr2pdLfWbq4nXHUwMDFimK6aXGaBOdplXHUwMDE2UYcqXHUwMDFlldJcdTAwMWWlxXRYg5VcdTAwMTbeVvFooGS5P1x0zH9ENVmnWMzk8T6T7V3ft3WuslNax/R8XHUwMDBlytBcdTAwMWTgi4qLyLxcdTAwMWRlVEhoXHUwMDAzwDmzc1D11ItOuIPiWntcdTAwMTKtq8IgymMqVE2mUHiMoXtcdTAwMDe5TXzjXHUwMDEwcmQxmSTAWyvoNCBcZlx1MDAwNNK2hFx1MDAxNJMtyD/FLybbarX6Sysme4G6w1x1MDAwNirclqVcdTAwMTeTXHUwMDA1XHUwMDA3JENRKSkkiacxvk5cdTAwMWSfyduLTnFXZHbSm5mN3Lp/1j9KejFcdTAwMTnnnPyJtGjMw2zl6GtcdTAwMWVqySxFpXJPOHF8c43nSlaUTdelx6Gajla63vJ57fREXFyKrl/cuD1fWHVccmk2W5gwzTZsMnp2k9hcdTAwMWHcJEL86fxcdTAwMDNd6N521i94tre/0Thkx1x1MDAwN+e902RcdTAwMWI2QrdngFx1MDAxMftCuJZ5XHUwMDE4XHUwMDA2wDyrjEW7iDD47SdT1vKnu9vbP1x1MDAwZnY2+1x1MDAxOdk46lx1MDAxZmyd5W3cirXs9o+LU6wp1chu9ZrXR5XCzdXu4irW3NTg0s1cdTAwMWXMKP90s0RcdTAwMWGZjVx1MDAxZE7TezPpbo9SXHUwMDFjrYiOXHUwMDE5Ob6JXHUwMDA0SFxi4ZGlUlxcPZYwvy2cPlx1MDAwN8timr1lXHUwMDBllr3A+lx1MDAxZj1YJmT0xKlcIoiilvGHsEV3/fJ252fZ7MHZcVVV8VStdZOvcKRvJOVcdTAwMTiWsGFEalI4So0oXHUwMDAzs1x1MDAwYnjA7TdcdTAwMTe4/PptrWvWXHUwMDBlb1tcdTAwMWIoikff7zavXHUwMDBi+3M9wyZcdTAwMTRcYlxc+qhDcGooLEQgmUBleXzUT7/qxFx1MDAwYlx1MDAxMXpcdTAwMTZdMkdJ/6RcdTAwMTBcdTAwMTlcdTAwMTJcIvc4r3vY9+3FmqsqRK/AY3KF6Fx1MDAwNXL+cCGy0c8zUL5H2TaK+KtcdTAwMDGcsfNO6qJvMsfVtZ3Uxam6zlx1MDAwNzLQhCqR8lx1MDAxNFx1MDAwNzR0qUJPKJFcdTAwMDTwXGZl92RcdTAwMWQ1uHj5VKJcdTAwMTlKxLLp0rbMs61Byp5cdTAwMWOcXHUwMDE2JWtcdTAwMTVcdTAwMDbzjX9LYiZcdTAwMTbE/1KUKLpCXHUwMDA2NWHBTVx1MDAwYsVcdTAwMDb99IteXHUwMDAxIZJuXHUwMDEwmaDjVlx1MDAxYVx1MDAxOFx1MDAxN1wiKZTHkFx1MDAwMGdcZqi3V2uuqlx1MDAxMP1WXHUwMDE50Vx1MDAwYtz80UIkZ1RQk1WSXHUwMDA20cZcdTAwMTeiXvNO+er7fjs/yFxmWje8t7X5bTfpQiQ98r9aXHUwMDAyQ+VcbmdHXGb0ULQmSIiY0kYwMz5h9Y8uWjtcdTAwMTPrezc3crN4spMvpG4vq7uVg0pcdTAwMDIlR+jIKVeyIHS/jOXxNWf6Va+A5lxi4chcdTAwMWXc8LWRIatl1EJcdTAwMTG+4qozz9pcdTAwMDDJVZ1cdTAwMTeI+KNVh7xeVFSCMlxiwOJPNG01N3c7W6ksbMP5oLnm64vNb1FcdTAwMDNcdTAwMTJcdNFcdTAwMWNQzFOMXHUwMDFiTVx1MDAxZW+yXGJCXHUwMDAwp9RILWpJnZUuWVx1MDAxYq7Ywd6rZE1gdMlcdTAwMWFcdTAwMThB3oDJ+KVcdTAwMDCbOyeH7eyp3fyW/nFweqK+i3w/asWOxJRcdTAwMDLQZXqKYFx1MDAwMUrgtFx1MDAxMWLOPFSWhJPDm59r/u0qXHUwMDAxdvs3p8Wj01x1MDAxY5rMnbzoraW3blpnXHUwMDBim7WUYFx1MDAwMlx1MDAxNfhLrVx1MDAwNFx1MDAxMJFcdTAwMTUxnJO2U0Ns/JVrjptnxVRd18o1xnJZOEinipuphFx1MDAxM7QxRNBaI2pwSz2HaopcdTAwMDE8gr5WXGa5q/JXn/Mks1KFa57ezd3traV+yPtTuGfFjctKMW4hwPFdeW3ztsVcdTAwMGYzuWo5n8FBrnmbW1xcIYCVbOkpyMxVXHUwMDAztNKcXHUwMDFiXHUwMDFi/2nN6b2Z8Fx1MDAxNITMtSeFVdZcdTAwMTlszoJcdTAwMTHzUFx04HJw7Vx1MDAxYziGXHUwMDE20/hMQVY1XHUwMDA1eYH2PzpcdTAwMDVcdTAwMTFcInLgXHUwMDBiKE92i1xixlx1MDAxZvdK93aE/H7q31xcXHUwMDFmd1x1MDAwYmv3ftpcdTAwMWVVo8aiXHUwMDEzI3HaXHUwMDE1u1lheFjEXHUwMDFlSlx1MDAwMcAjkUelXHUwMDFmpkTDXHL7lLjg/b+6YoNGZuOuVsZu75JlZfv84GLO0TD3Z9lSXHUwMDA0PPpcdTAwMDFcdTAwMDRAVFx1MDAwNIb4XHUwMDBmIEy/6MQrkXElaVx1MDAxYbmRjPAvxlFvSIhIXHUwMDE4mISQ7/vUoVXVoVx1MDAxN7j5w3XIRJaJUrRcbuJnmGNcdJutVvU8ZVtHfnX/JNPM1lxuulHNJl+IXGJtQqCSROdhIZIgPWRMuVx1MDAxZFjQ2OC04KdcdTAwMTJNKtH29fqV8Sv5Sr3Fi6Zlv12y9LzzMu+iRFx1MDAxOF1cdTAwMDAjlVuxiFx1MDAwNYpcdTAwMDVegv30q15cdTAwMDEpcvVWyEBcdTAwMWJcdTAwMTGWXCIp0DPcjXxcdG5ccshFbIjxKUVcdTAwMWYrRS+w80dLkdSRUoSKvJLSc9Sk2SNbNlBLr/XyV6XizV1e/cgmfCVcdTAwMDEw6GlGcWCUskqHXHUwMDAzUitPUpxQsqRcdTAwMDAkLi8jWqlCgFx1MDAxMzi9zJTklrxs71c3dnZz+6U7lUDBXHUwMDEx0etkSPdwXHUwMDFiSX98vZl+0SugN1x1MDAxY6zbeskyJoIrRD/UXHUwMDAx6EXi+1NwXHUwMDEyIDgvkPBHXHUwMDBiXHUwMDBlRG+AqrVGXHUwMDAwruOnPt30UZrt7O83hTpJy8Za5uw+9zPZguOqnIGSXG5BXHUwMDA0NNysYywgXHUwMDA1uMdcdTAwMTJcdTAwMDJjcG9cbsjVL1x1MDAwM1x1MDAxMDqQXGIvtVxmQEfv+oRCgWVyjpVr9lmrv5nL+oY31/X6xe4mXjRcdTAwMTO/qix6buEowp52i5mFXHUwMDE28qNcdTAwMWXwrFvv+nFcdTAwMTW0t42SRVx1MDAwMVO6labdhlNuq1x1MDAwM/c1OFx0T5Bu116SXHUwMDExPVxcx1x1MDAwMyZcdTAwMGJcdTAwMDDeXHUwMDE3o1x1MDAxMoRcXPoq5DNYU7n1XHUwMDAyOJujiv460ylmXHUwMDFh9udm+eLozFx1MDAxN1x1MDAwNzlTgGbSnVxmXHUwMDExJlx1MDAwMVx1MDAxMNFwI1x1MDAxMVhgfYSHrSS14yxOyTORhjViedtGk5eR5ExcdTAwMTRcYlx1MDAwYqFAmbGUXGY1yY1wwLKt+9KLUlx1MDAxNuSV5linpnbrlyO8Ut2/6M9wSv1WO8omjTV3Yjma8VMuYjWa6MdjXCLHxITbbFCjiV8nUDXr+3fn1fIgla1s5Vx1MDAxYq3LuzxL/OxcZoWFR1xcL4XVhlEqMl58hpx0h6SXQKeMU55/dFxc58hcdTAwMTZcdTAwMTbyV2dcXF9cdTAwMWNuX36HUjrTb3/G9Vx1MDAwN8b1QzdPM5Qztlx1MDAxMVVuu2vkMv7I2mxCT2pkg/bc9ijKKKVItsdcdTAwMWQloPBcdTAwMDSS41x1MDAxNNxcIuCbxrpnXHUwMDA2tmWeNW5FVMtcdTAwMTRcdTAwMTnHXHUwMDEx31x1MDAwNi0loqA2MOOe0MNcdEvJiXtcdTAwMTSToOdcdTAwMTmMmFxcXGZcdTAwMTFcdTAwMWWPzFhcZnFG5Zog9tOv2my01y90++u1ZrnWrIw3zH849XZcZl84jOjSwLWSeaApYXLzXHUwMDE0bjhSju6s65hC2/G2Ry6c2lxmlj9MsE1cXLrfLL/cpNn11IEmpZhnXHUwMDE0pztkhit6XHUwMDE4hWKiTZR5o9vcW5I9dONQdqJN9UKvv9FqNGp96vmDVq3ZXHUwMDBm9/CwK9dcXNBX/cJcdTAwMDTh0DVcdTAwMDVfXHUwMDBis0PbfeM4yY9++zKKnuF/nn//959T352KwrX7mUD06Nv+XGL+Ozet2ehHq1xmUr9Solx1MDAxY3/4ZracJZXVXHUwMDE0o1x1MDAwNJQpUIbwL9n4g1x1MDAxY1xi3ONusFx1MDAwMJlcdTAwMTaISyyWt8JDbYZLW4xtXGY4mj/gXHUwMDFlXHUwMDEzlFxmW0roXHRcdTAwMWWT01x0XHUwMDFjKWWiTJnNY15cdTAwMTbOasxcYnzVY78xWW22KVx1MDAxZadcdTAwMTBiNNdXXGJARKLZiO6fOcR40m1cdTAwMDIurGTuwVFjZvPa+HWsXHUwMDE0u0yH1/C1XHRkzckukfM1NnIyUlx0NG5p8/iL1lx1MDAxY1X29zZQ9vzaXHUwMDFl+Nnvt53Dw42bpJNLSqJLd4hBrEIlJIyzXHUwMDBiV+5JXHUwMDFkrVxyMolumONNw3Czn8Ux2uNCXHUwMDE5lNHZ0MScXHK3lFxyKVx1MDAwN4x3SYfesMftn7O+91xyK1x1MDAxMc783iU+2OD2one9/8b0Lf5cdTAwMTRcdTAwMTahaNBo9r7811N29qVX6rbq9f9+35QuRjNcdTAwMTYxpVx1MDAxNemHzIxcdTAwMDc9lFtseq5nzWdcdTAwMDM6oZwljEdGXHUwMDEzrHFcdTAwMWJccihcdTAwMDXjXHUwMDAzOI5HXHUwMDE0XHUwMDEzRltcdTAwMTKS5Y7MkunVJM1cbshccmshg9tCjCa3QHiGh2r+nthcdTAwMGKcnVx1MDAxYptSeG8/5MLY7dm3RD80W1x1MDAxN8ezPNBkcyVKpa1Ukk2meZy6XFxcInPVkbONUFRrZu92PO7OXHUwMDE4Uk5jQIOWXG5IlfREczQhkfwsvW4lXHUwMDEycuVEo1bKg0VcdTAwMDPa/Vx1MDAwNKE8p1x1MDAwMYukM2TRdCY510zMs13BbFx1MDAxZE0onVnjaW5cdGSEXCJcdCZUmsxccvfc7CRcYiWXTGfaeJRmSLe/MFx1MDAxMavk09hMoEfo0I55hzvdXHUwMDA0nkp95LRhnVx1MDAwMVx1MDAwNFx1MDAxN194f05T1Ly5dtpYXHUwMDFhp1x1MDAxMYtI4G6tU1wiXG6plbTTSMRyx2jSXHUwMDBlf8zkMFEsZpu9LO5cdTAwMTjPckKVXHUwMDE0YIxcdTAwMDX6VUzSLHiUhJEyuM50T2/halx1MDAxM1skst3PJKZcdTAwMTdGbjxyXHUwMDEynVTOclxu9vjcNtvLJ5TbXGI4XHUwMDFlKkBKLCWA0eOT6NxQz1x1MDAxM945d0umkl1b3pg8R+5m891CXHUwMDBlklx1MDAwMlLBlEJcdTAwMGbKOSlYJcWhXHUwMDFlrvRcdTAwMTBMdlx1MDAxZshNKtRqrlxc8/d1a47ZyPRcZvdop0ZJXHUwMDE2XHUwMDFjXHUwMDEwfnJrZFx1MDAxOEjFXHTsZlg680rPNvsp33FmQ+ZG+MDtduVOOTko71x1MDAxNlx1MDAxNzFuSS73yFx1MDAwMzVcdHGiUatEbdHAXHUwMDFlvjpcdTAwMDHpObkter3nSNvGnfZqPUel88Fpo8GuQF9tnaX3i93SbvbnbtRcIueJoTaNnuSkXHUwMDE3XHUwMDA0fjfXKMeX70CiNiNcZqM/Llx1MDAwZmVLXHUwMDFjN1NIpt1cdTAwMWHlRuhcZuppS9hMKatcdTAwMTSMzLVcclxc5YruXvNYRvDWcaj4ZVx1MDAwNNVWt3bvxoueRn7ed/xpxumXWl5cdTAwMTCoXHUwMDFiXHUwMDBll1xyKcvA7VpcdTAwMTY73mfDIaHxzqX2iF6F21x1MDAwN5TcitLjhdSopVx1MDAwN4xcdTAwMWOkojcuN+Ct52qDrZ3Ykz7gZKwnnVx1MDAwMNqIkSdtXHUwMDE5XHSHlfOE/6In4ubedWpeKzNbVr6EJuKoP9zjXCJ0f8mowlx1MDAxNN/gJvNcdTAwMWZ2d32li5m5a9uYi2Hu4Vx1MDAxOMVcdTAwMDRnROtcdTAwMDKnjIOBoFx1MDAxYqxcdTAwMWTna5fIMTZ5L1bKxURh2v2kJuBcdTAwMWNlYv54PMHXQrt92Ce4Pd9cdTAwMGXCd638yPWjq/x6XfNv1qfUi19cZn+cXGZccvvTUZI/jIFff/z6f3dfuVAifQ== HeaderTweetTweetTweetTweetFooterTweetTweetTweetTweetTweetTweetTweetTweetFixedFixedColumns (vertical scroll)horizontal scroll </p> <p>A layout like this is a great starting point. In a real app, you would start replacing each of the placeholders with builtin or custom widgets.</p>"},{"location":"how-to/design-a-layout/#summary","title":"Summary","text":"<p>Layout is the first thing you will tackle when building a Textual app. The following tips will help you get started.</p> <ol> <li>Make a sketch (pen and paper is fine).</li> <li>Work outside in. Start with the entire space of the terminal, add the outermost content first.</li> <li>Dock fixed widgets. If the content doesn't move or scroll, you probably want to dock it.</li> <li>Make use of <code>fr</code> for flexible space within layouts.</li> <li>Use containers to contain other widgets, particularly if they scroll!</li> </ol> <p>If you need further help, we are here to help.</p>"},{"location":"how-to/package-with-hatch/","title":"Package a Textual app with Hatch","text":"<p>Python apps may be distributed via PyPI so they can be installed via <code>pip</code>. This is known as packaging. The packaging process for Textual apps is much the same as any Python library, with the additional requirement that we can launch our app from the command line.</p> <p>Tip</p> <p>An alternative to packaging your app is to turn it into a web application with textual-web.</p> <p>In this How To we will cover how to use Hatch to package an example application.</p> <p>Hatch is a build tool (a command line app to assist with packaging). You could use any build tool to package a Textual app (such as Poetry for example), but Hatch is a good choice given its large feature set and ease of use.</p> <p>Calculator example</p> <p> CalculatorApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0C\u00a0\u00a0+/-\u00a0\u00a0%\u00a0\u00a0\u00f7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a07\u00a0\u00a08\u00a0\u00a09\u00a0\u00a0\u00d7\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a04\u00a0\u00a05\u00a0\u00a06\u00a0\u00a0-\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a01\u00a0\u00a02\u00a0\u00a03\u00a0\u00a0+\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a00\u00a0\u00a0.\u00a0\u00a0=\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p>This example is <code>calculator.py</code> taken from the examples directory in the Textual repository.</p>"},{"location":"how-to/package-with-hatch/#foreword","title":"Foreword","text":"<p>Packaging with Python can be a little intimidating if you haven't tackled it before. But it's not all that complicated.  When you have been through it once or twice, you should find it fairly straightforward.</p>"},{"location":"how-to/package-with-hatch/#example-repository","title":"Example repository","text":"<p>See the textual-calculator-hatch repository for the project created in this How To.</p>"},{"location":"how-to/package-with-hatch/#the-example-app","title":"The example app","text":"<p>To demonstrate packaging we are going to take the calculator example from the examples directory, and publish it to PyPI. The end goal is to allow a user to install it with pip:</p> <pre><code>pip install textual-calculator\n</code></pre> <p>Then launch the app from the command line:</p> <pre><code>calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#installing-hatch","title":"Installing Hatch","text":"<p>There are a few ways to install Hatch. See the official docs on installation for the best method for your operating system.</p> <p>Once installed, you should have the <code>hatch</code> command available on the command line. Run the following to check Hatch was installed correctly:</p> <pre><code>hatch\n</code></pre>"},{"location":"how-to/package-with-hatch/#hatch-new","title":"Hatch new","text":"<p>Hatch can create an initial directory structure and files with the <code>new</code> subcommand. Enter <code>hatch new</code> followed by the name of your project. For the calculator example, the name will be \"textual calculator\":</p> <pre><code>hatch new \"textual calculator\"\n</code></pre> <p>This will create the following directory structure:</p> <pre><code>textual-calculator\n\u251c\u2500\u2500 LICENSE.txt\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 pyproject.toml\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 textual_calculator\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 __about__.py\n\u2502\u00a0\u00a0     \u2514\u2500\u2500 __init__.py\n\u2514\u2500\u2500 tests\n    \u2514\u2500\u2500 __init__.py\n</code></pre> <p>This follows a well established convention when packaging Python code, and will create the following files:</p> <ul> <li><code>LICENSE.txt</code> contains the license you want to distribute your code under.</li> <li><code>README.md</code> is a markdown file containing information about your project, which will be displayed in PyPI and Github (if you use it). You can edit this with information about your app and how to use it.</li> <li><code>pyproject.toml</code> is a TOML file which contains metadata (additional information) about your project and how to package it. This is a Python standard. This file may be edited manually or by a build tool (such as Hatch).</li> <li><code>src/textual_calculator/__about__.py</code> contains the version number of your app. You should update this when you release new versions.</li> <li><code>src/textual_calculator/__init__.py</code>  and <code>tests/__init__py</code> indicate the directory they are within contains Python code (these files are often empty).</li> </ul> <p>In the top level is a directory called <code>src</code>. This should contain a directory named after your project, and will be the name your code can be imported from. In our example, this directory is <code>textual_calculator</code> so we can do <code>import textual_calculator</code> in Python code.</p> <p>Additionally, there is a <code>tests</code> directory where you can add any test code.</p>"},{"location":"how-to/package-with-hatch/#more-on-naming","title":"More on naming","text":"<p>Note how Hatch replaced the space in the project name with a hyphen (i.e. <code>textual-calculator</code>), but the directory in <code>src</code> with an underscore (i.e. <code>textual_calculator</code>). This is because the directory in <code>src</code> contains the Python module, and a hyphen is not legal in a Python import. The top-level directory doesn't have this restriction and uses a hyphen, which is more typical for a directory name.</p> <p>Bear this in mind if your project name contains spaces.</p>"},{"location":"how-to/package-with-hatch/#got-existing-code","title":"Got existing code?","text":"<p>The <code>hatch new</code> command assumes you are starting from scratch. If you have existing code you would like to package, navigate to your directory and run the following command (replace <code>&lt;YOUR ROJECT NAME&gt;</code> with the name of your project):</p> <pre><code>hatch new --init &lt;YOUR PROJECT NAME&gt;\n</code></pre> <p>This will generate a <code>pyproject.toml</code> in the current directory.</p> <p>Note</p> <p>It will simplify things if your code follows the directory structure convention above. This may require that you move your files -- you only need to do this once!</p>"},{"location":"how-to/package-with-hatch/#adding-code","title":"Adding code","text":"<p>Your code should reside inside <code>src/&lt;PROJECT NAME&gt;</code>. For the calculator example we will copy <code>calculator.py</code> and <code>calculator.tcss</code> into the <code>src/textual_calculator</code> directory, so our directory will look like the following:</p> <pre><code>textual-calculator\n\u251c\u2500\u2500 LICENSE.txt\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 pyproject.toml\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 textual_calculator\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 __about__.py\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 __init__.py\n\u2502\u00a0\u00a0     \u251c\u2500\u2500 calculator.py\n\u2502\u00a0\u00a0     \u2514\u2500\u2500 calculator.tcss\n\u2514\u2500\u2500 tests\n    \u2514\u2500\u2500 __init__.py\n</code></pre>"},{"location":"how-to/package-with-hatch/#adding-dependencies","title":"Adding dependencies","text":"<p>Your Textual app will likely depend on other Python libraries (at the very least Textual itself). We need to list these in <code>pyproject.toml</code> to ensure that these dependencies are installed alongside your app.</p> <p>In <code>pyproject.toml</code> there should be a section beginning with <code>[project]</code>, which will look something like the following:</p> <pre><code>[project]\nname = \"textual-calculator\"\ndynamic = [\"version\"]\ndescription = 'A example app'\nreadme = \"README.md\"\nrequires-python = \"&gt;=3.8\"\nlicense = \"MIT\"\nkeywords = []\nauthors = [\n  { name = \"Will McGugan\", email = \"redacted@textualize.io\" },\n]\nclassifiers = [\n  \"Development Status :: 4 - Beta\",\n  \"Programming Language :: Python\",\n  \"Programming Language :: Python :: 3.8\",\n  \"Programming Language :: Python :: 3.9\",\n  \"Programming Language :: Python :: 3.10\",\n  \"Programming Language :: Python :: 3.11\",\n  \"Programming Language :: Python :: 3.12\",\n  \"Programming Language :: Python :: Implementation :: CPython\",\n  \"Programming Language :: Python :: Implementation :: PyPy\",\n]\ndependencies = []\n</code></pre> <p>We are interested in the <code>dependencies</code> value, which should list the app's dependencies. If you want a particular version of a project you can add <code>==</code> followed by the version.</p> <p>For the calculator, the only dependency is Textual. We can add Textual by modifying the following line:</p> <pre><code>dependencies = [\"textual==0.47.1\"]\n</code></pre> <p>At the time of writing, the latest Textual is <code>0.47.1</code>. The entry in <code>dependencies</code> will ensure we get that particular version, even when newer versions are released.</p> <p>See the Hatch docs for more information on specifying dependencies.</p>"},{"location":"how-to/package-with-hatch/#environments","title":"Environments","text":"<p>A common problem when working with Python code is managing multiple projects with different dependencies. For instance, if we had another app that used version <code>0.40.0</code> of Textual, it may break if we installed version <code>0.47.1</code>.</p> <p>The standard way of solving this is with virtual environments (or venvs), which allow each project to have its own set of dependencies. Hatch can create virtual environments for us, and makes working with them very easy.</p> <p>To create a new virtual environment, navigate to the directory with the <code>pyproject.toml</code> file and run the following command (this is only require once, as the virtual environment will persist):</p> <pre><code>hatch env create\n</code></pre> <p>Then run the following command to activate the virtual environment:</p> <pre><code>hatch shell\n</code></pre> <p>If you run <code>python</code> now, it will have our app and its dependencies available for import:</p> <pre><code>$ python\nPython 3.11.1 (main, Jan  1 2023, 10:28:48) [Clang 14.0.0 (clang-1400.0.29.202)] on darwin\nType \"help\", \"copyright\", \"credits\" or \"license\" for more information.\n&gt;&gt;&gt; from textual_calculator import calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#running-the-app","title":"Running the app","text":"<p>You can launch the calculator from the command line with the following command:</p> <pre><code>python -m textual_calculator.calculator\n</code></pre> <p>The <code>-m</code> switch tells Python to import the module and run it.</p> <p>Although you can run your app this way (and it is fine for development), it's not ideal for sharing. It would be preferable to have a dedicated command to launch the app, so the user can easily run it from the command line. To do that, we will need to add an entry point to pyproject.toml</p>"},{"location":"how-to/package-with-hatch/#entry-points","title":"Entry points","text":"<p>An entry point is a function in your project that can be run from the command line. For our calculator example, we first need to create a function that will run the app. Add the following file to the <code>src/textual_calculator</code> folder, and name it <code>entry_points.py</code>:</p> <pre><code>from textual_calculator.calculator import CalculatorApp\n\n\ndef calculator():\n    app = CalculatorApp()\n    app.run()\n</code></pre> <p>Tip</p> <p>If you already have a function that runs your app, you may not need an <code>entry_points.py</code> file.</p> <p>Then edit <code>pyproject.toml</code> to add the following section:</p> <pre><code>[project.scripts]\ncalculator = \"textual_calculator.entry_points:calculator\"\n</code></pre> <p>Each entry in the <code>[project.scripts]</code> section (there can be more than one) maps a command on to an import and function name. In the second line above, before the <code>=</code> character, <code>calculator</code> is the name of the command. The string after the <code>=</code> character contains the name of the import (<code>textual_calculator.entry_points</code>), followed by a colon (<code>:</code>), and then the name of the function (also called <code>calculator</code>).</p> <p>Specifying an entry point like this is equivalent to doing the following from the Python REPL:</p> <pre><code>&gt;&gt;&gt; import textual_calculator.entry_points\n&gt;&gt;&gt; textual_calculator.entry_points.calculator()\n</code></pre> <p>To add the <code>calculator</code> command once you have edited <code>pyproject.toml</code>, run the following from the command line:</p> <pre><code>pip install -e .\n</code></pre> <p>Info</p> <p>You will have no doubt used <code>pip</code> before, but perhaps not with <code>-e .</code>. The addition of <code>-e</code> installs the project in editable mode which means pip won't copy the <code>.py</code> files code anywhere, the dot (<code>.</code>) indicates were installing the project in the current directory. </p> <p>Now you can launch the calculator from the command line as follows:</p> <pre><code>calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#building","title":"Building","text":"<p>Building produces archive files that contain your code. When you install a package via pip or other tool, it will download one of these archives.</p> <p>To build your project with Hatch, change to the directory containing your <code>pyproject.toml</code> and run the <code>hatch build</code> subcommand:</p> <pre><code>cd textual-calculator\nhatch build\n</code></pre> <p>After a moment, you should find that Hatch has created a <code>dist</code> (distribution) folder, which contains the project archive files. You don't typically need to use these files directly, but feel free to have a look at the directory contents.</p> <p>Packaging TCSS and other files</p> <p>Hatch will typically include all the files needed by your project, i.e. the <code>.py</code> files. It will also include any Textual CSS (<code>.tcss</code>) files in the project directory. Not all build tools will include files other than <code>.py</code>; if you are using another build tool, you may have to consult the documentation for how to add the Textual CSS files.</p>"},{"location":"how-to/package-with-hatch/#publishing","title":"Publishing","text":"<p>After your project has been successfully built you are ready to publish it to PyPI.</p> <p>If you don't have a PyPI account, you can create one now. Be sure to follow the instructions to validate your email and set up 2FA (Two Factor Authentication).</p> <p>Once you have an account, login to PyPI and go to the Account Settings tab. Scroll down and click the \"Add API token\" button. In the \"Create API Token\" form, create a token with name \"Uploads\" and select the \"Entire project\" scope, then click the \"Create token\" button.</p> <p>Copy this API token (long string of random looking characters) somewhere safe. This API token is how PyPI authenticates uploads are for your account, so you should never share your API token or upload it to the internet.</p> <p>Run the following command (replacing <code>&lt;YOUR API TOKEN&gt;</code> with the text generated in the previous step):</p> <pre><code>hatch publish -u __token__ -a &lt;YOUR API TOKEN&gt;\n</code></pre> <p>Hatch will upload the distribution files, and you should see a PyPI URL in the terminal.</p>"},{"location":"how-to/package-with-hatch/#managing-api-tokens","title":"Managing API Tokens","text":"<p>Creating an API token with the \"all projects\" permission is required for the first upload. You may want to generate a new API token with permissions to upload a single project when you upload a new version of your app (and delete the old one). This way if your token is leaked, it will only impact the one project.</p>"},{"location":"how-to/package-with-hatch/#publishing-new-versions","title":"Publishing new versions","text":"<p>If you have made changes to your app, and you want to publish the updates, you will need to update the <code>version</code> value in the <code>__about__.py</code> file, then repeat the build and publish steps.</p> <p>Managing version numbers</p> <p>See Semver for a popular versioning system (used by Textual itself).</p>"},{"location":"how-to/package-with-hatch/#installing-the-calculator","title":"Installing the calculator","text":"<p>From the user's point of view, they only need run the following command to install the calculator:</p> <pre><code>pip install textual_calculator\n</code></pre> <p>They will then be able to launch the calculator with the following command:</p> <pre><code>calculator\n</code></pre>"},{"location":"how-to/package-with-hatch/#pipx","title":"Pipx","text":"<p>A downside of installing apps this way is that unless the user has created a virtual environment, they may find it breaks other packages with conflicting dependencies.</p> <p>A good solution to this issue is pipx which automatically creates virtual environments that won't conflict with any other Python commands. Once PipX is installed, you can advise users to install your app with the following command:</p> <pre><code>pipx install textual_calculator\n</code></pre> <p>This will install the calculator and the <code>textual</code> dependency as before, but without the potential of dependency conflicts.</p>"},{"location":"how-to/package-with-hatch/#summary","title":"Summary","text":"<ol> <li>Use a build system, such as Hatch.</li> <li>Initialize your project with <code>hatch new</code> (or equivalent).</li> <li>Write a function to run your app, if there isn't one already.</li> <li>Add your dependencies and entry points to <code>pyproject.toml</code>.</li> <li>Build your app with <code>hatch build</code>.</li> <li>Publish your app with <code>hatch publish</code>.</li> </ol> <p>If you have any problems packaging Textual apps, we are here to help!</p>"},{"location":"how-to/render-and-compose/","title":"Render and compose","text":"<p>A common question that comes up on the Textual Discord server is what is the difference between <code>render</code> and <code>compose</code> methods on a widget? In this article we will clarify the differences, and use both these methods to build something fun.</p>"},{"location":"how-to/render-and-compose/#which-method-to-use","title":"Which method to use?","text":"<p>Render and compose are easy to confuse because they both ultimately define what a widget will look like, but they have quite different uses. </p> <p>The <code>render</code> method on a widget returns a Rich renderable, which is anything you could print with Rich. The simplest renderable is just text; so <code>render()</code> methods often return a string, but could equally return a <code>Text</code> instance, a <code>Table</code>, or anything else from Rich (or third party library). Whatever is returned from <code>render()</code> will be combined with any styles from CSS and displayed within the widget's borders.</p> <p>The <code>compose</code> method is used to build compound widgets (widgets composed of other widgets).</p> <p>A general rule of thumb, is that if you implement a <code>compose</code> method, there is no need for a <code>render</code> method because it is the widgets yielded from <code>compose</code> which define how the custom widget will look. However, you can mix these two methods. If you implement both, the <code>render</code> method will set the custom widget's background and <code>compose</code> will add widgets on top of that background.</p>"},{"location":"how-to/render-and-compose/#combining-render-and-compose","title":"Combining render and compose","text":"<p>Let's look at an example that combines both these methods. We will create a custom widget with a linear gradient as a background. The background will be animated (I did promise fun)!</p> render_compose.pyOutput <pre><code>from time import time\n\nfrom textual.app import App, ComposeResult, RenderResult\nfrom textual.containers import Container\nfrom textual.renderables.gradient import LinearGradient\nfrom textual.widgets import Static\n\nCOLORS = [\n    \"#881177\",\n    \"#aa3355\",\n    \"#cc6666\",\n    \"#ee9944\",\n    \"#eedd00\",\n    \"#99dd55\",\n    \"#44dd88\",\n    \"#22ccbb\",\n    \"#00bbcc\",\n    \"#0099cc\",\n    \"#3366bb\",\n    \"#663399\",\n]\nSTOPS = [(i / (len(COLORS) - 1), color) for i, color in enumerate(COLORS)]\n\n\nclass Splash(Container):\n    \"\"\"Custom widget that extends Container.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Splash {\n        align: center middle;\n    }\n    Static {\n        width: 40;\n        padding: 2 4;\n    }\n    \"\"\"\n\n    def on_mount(self) -&gt; None:\n        self.auto_refresh = 1 / 30  # (1)!\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Making a splash with Textual!\")  # (2)!\n\n    def render(self) -&gt; RenderResult:\n        return LinearGradient(time() * 90, STOPS)  # (3)!\n\n\nclass SplashApp(App):\n    \"\"\"Simple app to show our custom widget.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Splash()\n\n\nif __name__ == \"__main__\":\n    app = SplashApp()\n    app.run()\n</code></pre> <ol> <li>Refresh the widget 30 times a second.</li> <li>Compose our compound widget, which contains a single Static.</li> <li>Render a linear gradient in the background.</li> </ol> <p> SplashApp \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580Making\u00a0a\u00a0splash\u00a0with\u00a0Textual!\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 </p> <p>The <code>Splash</code> custom widget has a <code>compose</code> method which adds a simple <code>Static</code> widget to display a message. Additionally there is a <code>render</code> method which returns a renderable to fill the background with a gradient.</p> <p>Tip</p> <p>As fun as this is, spinning animated gradients may be too distracting for most apps!</p>"},{"location":"how-to/render-and-compose/#summary","title":"Summary","text":"<p>Keep the following in mind when building custom widgets.</p> <ol> <li>Use <code>render</code> to return simple text, or a Rich renderable.</li> <li>Use <code>compose</code> to create a widget out of other widgets.</li> <li>If you define both, then <code>render</code> will be used as a background.</li> </ol> <p>We are here to help!</p>"},{"location":"how-to/style-inline-apps/","title":"Style Inline Apps","text":"<p>Version 0.55.0 of Textual added support for running apps inline (below the prompt). Running an inline app is as simple as adding <code>inline=True</code> to <code>run()</code>.</p> <p>Your apps will typically run inline without modification, but you may want to make some tweaks for inline mode, which you can do with a little CSS. This How-To will explain how.</p> <p>Let's look at an inline app. The following app displays the the current time (and keeps it up to date).</p> <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass ClockApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    #clock {\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"\", id=\"clock\")\n\n    def on_ready(self) -&gt; None:\n        self.update_clock()\n        self.set_interval(1, self.update_clock)\n\n    def update_clock(self) -&gt; None:\n        clock = datetime.now().time()\n        self.query_one(Digits).update(f\"{clock:%T}\")\n\n\nif __name__ == \"__main__\":\n    app = ClockApp()\n    app.run(inline=True)  #  (1)!\n</code></pre> <ol> <li>The <code>inline=True</code> runs the app inline.</li> </ol> <p>With Textual's default settings, this clock will be displayed in 5 lines; 3 for the digits and 2 for a top and bottom border.</p> <p>You can change the height or the border with CSS and the <code>:inline</code> pseudo-selector, which only matches rules in inline mode. Let's update this app to remove the default border, and increase the height:</p> <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass ClockApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n        &amp;:inline {\n            border: none;\n            height: 50vh;\n            Digits {\n                color: $success;\n            }\n        }\n    }\n    #clock {\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"\", id=\"clock\")\n\n    def on_ready(self) -&gt; None:\n        self.update_clock()\n        self.set_interval(1, self.update_clock)\n\n    def update_clock(self) -&gt; None:\n        clock = datetime.now().time()\n        self.query_one(Digits).update(f\"{clock:%T}\")\n\n\nif __name__ == \"__main__\":\n    app = ClockApp()\n    app.run(inline=True)\n</code></pre> <p>The highlighted CSS targets online inline mode. By setting the <code>height</code> rule on Screen we can define how many lines the app should consume when it runs. Setting <code>border: none</code> removes the default border when running in inline mode.</p> <p>We've also added a rule to change the color of the clock when running inline.</p>"},{"location":"how-to/style-inline-apps/#summary","title":"Summary","text":"<p>Most apps will not require modification to run inline, but if you want to tweak the height and border you can write CSS that targets inline mode with the <code>:inline</code> pseudo-selector.</p>"},{"location":"reference/","title":"Reference","text":"<p>Welcome to the Textual Reference.</p> <ul> <li> <p> CSS Types</p> <p>CSS Types are the data types that CSS styles accept in their rules.</p> <p> CSS Types Reference</p> </li> <li> <p> Events</p> <p>Events are how Textual communicates with your application.</p> <p> Events Reference</p> </li> <li> <p> Styles</p> <p>All the styles you can use to take your Textual app to the next level.</p> <p> Styles Reference</p> </li> <li> <p> Widgets</p> <p>How to use the many widgets builtin to Textual.</p> <p> Widgets Reference</p> </li> </ul>"},{"location":"styles/","title":"Styles","text":"<p>A reference to Widget styles.</p> <p>See the links to the left of the page, or in the hamburger menu (three horizontal bars, top left).</p>"},{"location":"styles/align/","title":"Align","text":"<p>The <code>align</code> style aligns children within a container.</p>"},{"location":"styles/align/#syntax","title":"Syntax","text":"<pre>\nalign: &lt;horizontal&gt; &lt;vertical&gt;;\n\nalign-horizontal: &lt;horizontal&gt;;\nalign-vertical: &lt;vertical&gt;;\n</pre> <p>The <code>align</code> style takes a <code>&lt;horizontal&gt;</code> followed by a <code>&lt;vertical&gt;</code>.</p> <p>You can also set the alignment for each axis individually with <code>align-horizontal</code> and <code>align-vertical</code>.</p>"},{"location":"styles/align/#examples","title":"Examples","text":""},{"location":"styles/align/#basic-usage","title":"Basic usage","text":"<p>This example contains a simple app with two labels centered on the screen with <code>align: center middle;</code>:</p> Outputalign.pyalign.tcss <p> AlignApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503Vertical\u00a0alignment\u00a0with\u00a0Textual\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503Take\u00a0note,\u00a0browsers.\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass AlignApp(App):\n    CSS_PATH = \"align.tcss\"\n\n    def compose(self):\n        yield Label(\"Vertical alignment with [b]Textual[/]\", classes=\"box\")\n        yield Label(\"Take note, browsers.\", classes=\"box\")\n\n\nif __name__ == \"__main__\":\n    app = AlignApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\n.box {\n    width: 40;\n    height: 5;\n    margin: 1;\n    padding: 1;\n    background: green;\n    color: white 90%;\n    border: heavy white;\n}\n</code></pre>"},{"location":"styles/align/#all-alignments","title":"All alignments","text":"<p>The next example shows a 3 by 3 grid of containers with text labels. Each label has been aligned differently inside its container, and its text shows its <code>align: ...</code> value.</p> Outputalign_all.pyalign_all.tcss <p> AlignAllApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502left\u00a0top\u2502\u2502center\u00a0top\u2502\u2502right\u00a0top\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502left\u00a0middle\u2502\u2502center\u00a0middle\u2502\u2502right\u00a0middle\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502 \u2502left\u00a0bottom\u2502\u2502center\u00a0bottom\u2502\u2502right\u00a0bottom\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container\nfrom textual.widgets import Label\n\n\nclass AlignAllApp(App):\n    \"\"\"App that illustrates all alignments.\"\"\"\n\n    CSS_PATH = \"align_all.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Container(Label(\"left top\"), id=\"left-top\")\n        yield Container(Label(\"center top\"), id=\"center-top\")\n        yield Container(Label(\"right top\"), id=\"right-top\")\n        yield Container(Label(\"left middle\"), id=\"left-middle\")\n        yield Container(Label(\"center middle\"), id=\"center-middle\")\n        yield Container(Label(\"right middle\"), id=\"right-middle\")\n        yield Container(Label(\"left bottom\"), id=\"left-bottom\")\n        yield Container(Label(\"center bottom\"), id=\"center-bottom\")\n        yield Container(Label(\"right bottom\"), id=\"right-bottom\")\n\n\nif __name__ == \"__main__\":\n    AlignAllApp().run()\n</code></pre> <pre><code>#left-top {\n    /* align: left top; this is the default value and is implied. */\n}\n\n#center-top {\n    align: center top;\n}\n\n#right-top {\n    align: right top;\n}\n\n#left-middle {\n    align: left middle;\n}\n\n#center-middle {\n    align: center middle;\n}\n\n#right-middle {\n    align: right middle;\n}\n\n#left-bottom {\n    align: left bottom;\n}\n\n#center-bottom {\n    align: center bottom;\n}\n\n#right-bottom {\n    align: right bottom;\n}\n\nScreen {\n    layout: grid;\n    grid-size: 3 3;\n    grid-gutter: 1;\n}\n\nContainer {\n    background: $boost;\n    border: solid gray;\n    height: 100%;\n}\n\nLabel {\n    width: auto;\n    height: 1;\n    background: $accent;\n}\n</code></pre>"},{"location":"styles/align/#css","title":"CSS","text":"<pre><code>/* Align child widgets to the center. */\nalign: center middle;\n/* Align child widget to the top right */\nalign: right top;\n\n/* Change the horizontal alignment of the children of a widget */\nalign-horizontal: right;\n/* Change the vertical alignment of the children of a widget */\nalign-vertical: middle;\n</code></pre>"},{"location":"styles/align/#python","title":"Python","text":"<pre><code># Align child widgets to the center\nwidget.styles.align = (\"center\", \"middle\")\n# Align child widgets to the top right\nwidget.styles.align = (\"right\", \"top\")\n\n# Change the horizontal alignment of the children of a widget\nwidget.styles.align_horizontal = \"right\"\n# Change the vertical alignment of the children of a widget\nwidget.styles.align_vertical = \"middle\"\n</code></pre>"},{"location":"styles/align/#see-also","title":"See also","text":"<ul> <li><code>content-align</code> to set the alignment of content inside a widget.</li> <li><code>text-align</code> to set the alignment of text in a widget.</li> </ul>"},{"location":"styles/background/","title":"Background","text":"<p>The <code>background</code> style sets the background color of a widget.</p>"},{"location":"styles/background/#syntax","title":"Syntax","text":"<pre>\nbackground: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p>The <code>background</code> style requires a <code>&lt;color&gt;</code> optionally followed by <code>&lt;percentage&gt;</code> to specify the color's opacity (clamped between <code>0%</code> and <code>100%</code>).</p>"},{"location":"styles/background/#examples","title":"Examples","text":""},{"location":"styles/background/#basic-usage","title":"Basic usage","text":"<p>This example creates three widgets and applies a different background to each.</p> Outputbackground.pybackground.tcss <p> BackgroundApp Widget\u00a01 Widget\u00a02 Widget\u00a03 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BackgroundApp(App):\n    CSS_PATH = \"background.tcss\"\n\n    def compose(self):\n        yield Label(\"Widget 1\", id=\"static1\")\n        yield Label(\"Widget 2\", id=\"static2\")\n        yield Label(\"Widget 3\", id=\"static3\")\n\n\nif __name__ == \"__main__\":\n    app = BackgroundApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    width: 100%;\n    height: 1fr;\n    content-align: center middle;\n    color: white;\n}\n\n#static1 {\n    background: red;\n}\n\n#static2 {\n    background: rgb(0, 255, 0);\n}\n\n#static3 {\n    background: hsl(240, 100%, 50%);\n}\n</code></pre>"},{"location":"styles/background/#different-opacity-settings","title":"Different opacity settings","text":"<p>The next example creates ten widgets laid out side by side to show the effect of setting different percentages for the background color's opacity.</p> Outputbackground_transparency.pybackground_transparency.tcss <p> BackgroundTransparencyApp 10%20%30%40%50%60%70%80%90%100% </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass BackgroundTransparencyApp(App):\n    \"\"\"Simple app to exemplify different transparency settings.\"\"\"\n\n    CSS_PATH = \"background_transparency.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"10%\", id=\"t10\")\n        yield Static(\"20%\", id=\"t20\")\n        yield Static(\"30%\", id=\"t30\")\n        yield Static(\"40%\", id=\"t40\")\n        yield Static(\"50%\", id=\"t50\")\n        yield Static(\"60%\", id=\"t60\")\n        yield Static(\"70%\", id=\"t70\")\n        yield Static(\"80%\", id=\"t80\")\n        yield Static(\"90%\", id=\"t90\")\n        yield Static(\"100%\", id=\"t100\")\n\n\nif __name__ == \"__main__\":\n    app = BackgroundTransparencyApp()\n    app.run()\n</code></pre> <pre><code>#t10 {\n    background: red 10%;\n}\n\n#t20 {\n    background: red 20%;\n}\n\n#t30 {\n    background: red 30%;\n}\n\n#t40 {\n    background: red 40%;\n}\n\n#t50 {\n    background: red 50%;\n}\n\n#t60 {\n    background: red 60%;\n}\n\n#t70 {\n    background: red 70%;\n}\n\n#t80 {\n    background: red 80%;\n}\n\n#t90 {\n    background: red 90%;\n}\n\n#t100 {\n    background: red 100%;\n}\n\nScreen {\n    layout: horizontal;\n}\n\nStatic {\n    height: 100%;\n    width: 1fr;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/background/#css","title":"CSS","text":"<pre><code>/* Blue background */\nbackground: blue;\n\n/* 20% red background */\nbackground: red 20%;\n\n/* RGB color */\nbackground: rgb(100, 120, 200);\n\n/* HSL color */\nbackground: hsl(290, 70%, 80%);\n</code></pre>"},{"location":"styles/background/#python","title":"Python","text":"<p>You can use the same syntax as CSS, or explicitly set a <code>Color</code> object for finer-grained control.</p> <pre><code># Set blue background\nwidget.styles.background = \"blue\"\n# Set through HSL model\nwidget.styles.background = \"hsl(351,32%,89%)\"\n\nfrom textual.color import Color\n# Set with a color object by parsing a string\nwidget.styles.background = Color.parse(\"pink\")\nwidget.styles.background = Color.parse(\"#FF00FF\")\n# Set with a color object instantiated directly\nwidget.styles.background = Color(120, 60, 100)\n</code></pre>"},{"location":"styles/background/#see-also","title":"See also","text":"<ul> <li><code>color</code> to set the color of text in a widget.</li> </ul>"},{"location":"styles/border/","title":"Border","text":"<p>The <code>border</code> style enables the drawing of a box around a widget.</p> <p>A border style may also be applied to individual edges with <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, and <code>border-left</code>.</p> <p>Note</p> <p><code>border</code> and <code>outline</code> cannot coexist in the same edge of a widget.</p>"},{"location":"styles/border/#syntax","title":"Syntax","text":"<pre>\nborder: [&lt;border&gt;] [&lt;color&gt;] [&lt;percentage&gt;];\n\nborder-top: [&lt;border&gt;] [&lt;color&gt;] [&lt;percentage&gt;];\nborder-right: [&lt;border&gt;] [&lt;color&gt; [&lt;percentage&gt;]];\nborder-bottom: [&lt;border&gt;] [&lt;color&gt; [&lt;percentage&gt;]];\nborder-left: [&lt;border&gt;] [&lt;color&gt; [&lt;percentage&gt;]];\n</pre> <p>In CSS, the border is set with a border style and a color. Both are optional. An optional percentage may be added to blend the border with the background color.</p> <p>In Python, the border is set with a tuple of border style and a color.</p>"},{"location":"styles/border/#border-command","title":"Border command","text":"<p>The <code>textual</code> CLI has a subcommand which will let you explore the various border types interactively:</p> <pre><code>textual borders\n</code></pre> <p>Alternatively, you can see the examples below.</p>"},{"location":"styles/border/#examples","title":"Examples","text":""},{"location":"styles/border/#basic-usage","title":"Basic usage","text":"<p>This examples shows three widgets with different border styles.</p> Outputborder.pyborder.tcss <p> BorderApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502My\u00a0border\u00a0is\u00a0solid\u00a0red\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 \u254f\u254f \u254fMy\u00a0border\u00a0is\u00a0dashed\u00a0green\u254f \u254f\u254f \u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258aMy\u00a0border\u00a0is\u00a0tall\u00a0blue\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BorderApp(App):\n    CSS_PATH = \"border.tcss\"\n\n    def compose(self):\n        yield Label(\"My border is solid red\", id=\"label1\")\n        yield Label(\"My border is dashed green\", id=\"label2\")\n        yield Label(\"My border is tall blue\", id=\"label3\")\n\n\nif __name__ == \"__main__\":\n    app = BorderApp()\n    app.run()\n</code></pre> <pre><code>#label1 {\n    background: red 20%;\n    color: red;\n    border: solid red;\n}\n\n#label2 {\n    background: green 20%;\n    color: green;\n    border: dashed green;\n}\n\n#label3 {\n    background: blue 20%;\n    color: blue;\n    border: tall blue;\n}\n\nScreen {\n    background: white;\n}\n\nScreen &gt; Label {\n    width: 100%;\n    height: 5;\n    content-align: center middle;\n    color: white;\n    margin: 1;\n    box-sizing: border-box;\n}\n</code></pre>"},{"location":"styles/border/#all-border-types","title":"All border types","text":"<p>The next example shows a grid with all the available border types.</p> Outputborder_all.pyborder_all.tcss <p> AllBordersApp +----------------+\u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 |ascii|blank\u254fdashed\u254f\u2551double\u2551 +----------------+\u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2597\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2596 \u2503heavy\u2503hidden/nonehkey\u2590inner\u258c \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u259d\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2598 \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c\u258a\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u258couter\u2590\u258apanel\u258e\u2502round\u2502\u2502solid\u2502 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2588\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2588\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258atall\u258e\u2588thick\u2588\u258fvkey\u2595\u258ewide\u258a \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2588\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2588\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass AllBordersApp(App):\n    CSS_PATH = \"border_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"ascii\", id=\"ascii\"),\n            Label(\"blank\", id=\"blank\"),\n            Label(\"dashed\", id=\"dashed\"),\n            Label(\"double\", id=\"double\"),\n            Label(\"heavy\", id=\"heavy\"),\n            Label(\"hidden/none\", id=\"hidden\"),\n            Label(\"hkey\", id=\"hkey\"),\n            Label(\"inner\", id=\"inner\"),\n            Label(\"outer\", id=\"outer\"),\n            Label(\"panel\", id=\"panel\"),\n            Label(\"round\", id=\"round\"),\n            Label(\"solid\", id=\"solid\"),\n            Label(\"tall\", id=\"tall\"),\n            Label(\"thick\", id=\"thick\"),\n            Label(\"vkey\", id=\"vkey\"),\n            Label(\"wide\", id=\"wide\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = AllBordersApp()\n    app.run()\n</code></pre> <pre><code>#ascii {\n    border: ascii $accent;\n}\n\n#blank {\n    border: blank $accent;\n}\n\n#dashed {\n    border: dashed $accent;\n}\n\n#double {\n    border: double $accent;\n}\n\n#heavy {\n    border: heavy $accent;\n}\n\n#hidden {\n    border: hidden $accent;\n}\n\n#hkey {\n    border: hkey $accent;\n}\n\n#inner {\n    border: inner $accent;\n}\n\n#outer {\n    border: outer $accent;\n}\n\n#panel {\n    border: panel $accent;\n}\n\n#round {\n    border: round $accent;\n}\n\n#solid {\n    border: solid $accent;\n}\n\n#tall {\n    border: tall $accent;\n}\n\n#thick {\n    border: thick $accent;\n}\n\n#vkey {\n    border: vkey $accent;\n}\n\n#wide {\n    border: wide $accent;\n}\n\nGrid {\n    grid-size: 4 4;\n    align: center middle;\n    grid-gutter: 1 2;\n}\n\nLabel {\n    width: 20;\n    height: 3;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/border/#borders-and-outlines","title":"Borders and outlines","text":"<p>The next example makes the difference between <code>border</code> and <code>outline</code> clearer by having three labels side-by-side. They contain the same text, have the same width and height, and are styled exactly the same up to their <code>border</code> and <code>outline</code> styles.</p> <p>This example also shows that a widget cannot contain both a <code>border</code> and an <code>outline</code>:</p> Outputoutline_vs_border.pyoutline_vs_border.tcss <p> OutlineBorderApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502ear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502ear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502nd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path\u2502 \u2502here\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502I\u00a0must\u00a0not\u00a0fear.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineBorderApp(App):\n    CSS_PATH = \"outline_vs_border.tcss\"\n\n    def compose(self):\n        yield Label(TEXT, classes=\"outline\")\n        yield Label(TEXT, classes=\"border\")\n        yield Label(TEXT, classes=\"outline border\")\n\n\nif __name__ == \"__main__\":\n    app = OutlineBorderApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    height: 8;\n}\n\n.outline {\n    outline: $error round;\n}\n\n.border {\n    border: $success heavy;\n}\n</code></pre>"},{"location":"styles/border/#css","title":"CSS","text":"<pre><code>/* Set a heavy white border */\nborder: heavy white;\n\n/* Set a red border on the left */\nborder-left: outer red;\n\n/* Set a rounded orange border, 50% opacity. */\nborder: round orange 50%;\n</code></pre>"},{"location":"styles/border/#python","title":"Python","text":"<pre><code># Set a heavy white border\nwidget.styles.border = (\"heavy\", \"white\")\n\n# Set a red border on the left\nwidget.styles.border_left = (\"outer\", \"red\")\n</code></pre>"},{"location":"styles/border/#see-also","title":"See also","text":"<ul> <li><code>box-sizing</code> to specify how to account for the border in a widget's dimensions.</li> <li><code>outline</code> to add an outline around the content of a widget.</li> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_align/","title":"Border-subtitle-align","text":"<p>The <code>border-subtitle-align</code> style sets the horizontal alignment for the border subtitle.</p>"},{"location":"styles/border_subtitle_align/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-align: &lt;horizontal&gt;;\n</pre> <p>The <code>border-subtitle-align</code> style takes a <code>&lt;horizontal&gt;</code> that determines where the border subtitle is aligned along the top edge of the border. This means that the border corners are always visible.</p>"},{"location":"styles/border_subtitle_align/#default","title":"Default","text":"<p>The default alignment is <code>right</code>.</p>"},{"location":"styles/border_subtitle_align/#examples","title":"Examples","text":""},{"location":"styles/border_subtitle_align/#basic-usage","title":"Basic usage","text":"<p>This example shows three labels, each with a different border subtitle alignment:</p> Outputborder_subtitle_align.pyborder_subtitle_align.tcss <p> BorderSubtitleAlignApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502My\u00a0subtitle\u00a0is\u00a0on\u00a0the\u00a0left.\u2502 \u2502\u2502 \u2514\u2500\u00a0&lt;\u00a0Left\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 \u254f\u254f \u254fMy\u00a0subtitle\u00a0is\u00a0centered\u254f \u254f\u254f \u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u00a0Centered!\u00a0\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258aMy\u00a0subtitle\u00a0is\u00a0on\u00a0the\u00a0right\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0Right\u00a0&gt;\u00a0\u2581\u258e </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BorderSubtitleAlignApp(App):\n    CSS_PATH = \"border_subtitle_align.tcss\"\n\n    def compose(self):\n        lbl = Label(\"My subtitle is on the left.\", id=\"label1\")\n        lbl.border_subtitle = \"&lt; Left\"\n        yield lbl\n\n        lbl = Label(\"My subtitle is centered\", id=\"label2\")\n        lbl.border_subtitle = \"Centered!\"\n        yield lbl\n\n        lbl = Label(\"My subtitle is on the right\", id=\"label3\")\n        lbl.border_subtitle = \"Right &gt;\"\n        yield lbl\n\n\nif __name__ == \"__main__\":\n    app = BorderSubtitleAlignApp()\n    app.run()\n</code></pre> <pre><code>#label1 {\n    border: solid $secondary;\n    border-subtitle-align: left;\n}\n\n#label2 {\n    border: dashed $secondary;\n    border-subtitle-align: center;\n}\n\n#label3 {\n    border: tall $secondary;\n    border-subtitle-align: right;\n}\n\nScreen &gt; Label {\n    width: 100%;\n    height: 5;\n    content-align: center middle;\n    color: white;\n    margin: 1;\n    box-sizing: border-box;\n}\n</code></pre>"},{"location":"styles/border_subtitle_align/#complete-usage-reference","title":"Complete usage reference","text":"<p>This example shows all border title and subtitle alignments, together with some examples of how (sub)titles can have custom markup. Open the code tabs to see the details of the code examples.</p> Outputborder_sub_title_align_all.pyborder_sub_title_align_all.tcss <p> BorderSubTitleAlignAll \u258f\u00a0\u00a0Border\u00a0title\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u256d\u2500\u00a0Lef\u2026\u00a0\u2500\u256e\u2581\u2581\u2581\u2581\u2581\u00a0Left\u00a0\u2581\u2581\u2581\u2581\u2581 \u258fThis\u00a0is\u00a0the\u00a0story\u00a0of\u2595\u2502a\u00a0Python\u2502\u258edeveloper\u00a0that\u258a \u258f\u00a0\u00a0\u00a0Border\u00a0subtitle\u00a0\u00a0\u2595\u2570\u2500\u00a0Cen\u2026\u00a0\u2500\u256f\u2594\u2594\u2594\u2594\u2594\u00a0@@@\u00a0\u2594\u2594\u2594\u2594\u2594\u2594 +--------------+\u2500Title\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 |had\u00a0to\u00a0fill\u00a0up|\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nine\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0and\u00a0ended\u00a0up\u00a0redoing\u00a0it\u00a0\u00a0 +-\u00a0Left\u00a0-------+\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500Subtitle\u2500 \u2500Title,\u00a0but\u00a0really\u00a0looo\u2026\u2500 \u2500Title,\u00a0but\u00a0r\u2026\u2500\u2500Title,\u00a0but\u00a0reall\u2026\u2500 because\u00a0the\u00a0first\u00a0try\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0had\u00a0some\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0that\u00a0were\u00a0too\u00a0long.\u00a0\u00a0\u00a0\u00a0 \u2500Subtitle,\u00a0bu\u2026\u2500\u2500Subtitle,\u00a0but\u00a0re\u2026\u2500 \u2500Subtitle,\u00a0but\u00a0really\u00a0l\u2026\u2500 </p> <pre><code>from textual.app import App\nfrom textual.containers import Container, Grid\nfrom textual.widgets import Label\n\n\ndef make_label_container(  # (11)!\n    text: str, id: str, border_title: str, border_subtitle: str\n) -&gt; Container:\n    lbl = Label(text, id=id)\n    lbl.border_title = border_title\n    lbl.border_subtitle = border_subtitle\n    return Container(lbl)\n\n\nclass BorderSubTitleAlignAll(App[None]):\n    CSS_PATH = \"border_sub_title_align_all.tcss\"\n\n    def compose(self):\n        with Grid():\n            yield make_label_container(  # (1)!\n                \"This is the story of\",\n                \"lbl1\",\n                \"[b]Border [i]title[/i][/]\",\n                \"[u][r]Border[/r] subtitle[/]\",\n            )\n            yield make_label_container(  # (2)!\n                \"a Python\",\n                \"lbl2\",\n                \"[b red]Left, but it's loooooooooooong\",\n                \"[reverse]Center, but it's loooooooooooong\",\n            )\n            yield make_label_container(  # (3)!\n                \"developer that\",\n                \"lbl3\",\n                \"[b i on purple]Left[/]\",\n                \"[r u white on black]@@@[/]\",\n            )\n            yield make_label_container(\n                \"had to fill up\",\n                \"lbl4\",\n                \"\",  # (4)!\n                \"[link=https://textual.textualize.io]Left[/]\",  # (5)!\n            )\n            yield make_label_container(  # (6)!\n                \"nine labels\", \"lbl5\", \"Title\", \"Subtitle\"\n            )\n            yield make_label_container(  # (7)!\n                \"and ended up redoing it\",\n                \"lbl6\",\n                \"Title\",\n                \"Subtitle\",\n            )\n            yield make_label_container(  # (8)!\n                \"because the first try\",\n                \"lbl7\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (9)!\n                \"had some labels\",\n                \"lbl8\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (10)!\n                \"that were too long.\",\n                \"lbl9\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n\n\nif __name__ == \"__main__\":\n    app = BorderSubTitleAlignAll()\n    app.run()\n</code></pre> <ol> <li>Border (sub)titles can contain nested markup.</li> <li>Long (sub)titles get truncated and occupy as much space as possible.</li> <li>(Sub)titles can be stylised with Rich markup.</li> <li>An empty (sub)title isn't displayed.</li> <li>The markup can even contain Rich links.</li> <li>If the widget does not have a border, the title and subtitle are not shown.</li> <li>When the side borders are not set, the (sub)title will align with the edge of the widget.</li> <li>The title and subtitle are aligned on the left and very long, so they get truncated and we can still see the rightmost character of the border edge.</li> <li>The title and subtitle are centered and very long, so they get truncated and are centered with one character of padding on each side.</li> <li>The title and subtitle are aligned on the right and very long, so they get truncated and we can still see the leftmost character of the border edge.</li> <li>An auxiliary function to create labels with border title and subtitle.</li> </ol> <pre><code>Grid {\n    grid-size: 3 3;\n    align: center middle;\n}\n\nContainer {\n    width: 100%;\n    height: 100%;\n    align: center middle;\n}\n\n#lbl1 {  /* (1)! */\n    border: vkey $secondary;\n}\n\n#lbl2 {  /* (2)! */\n    border: round $secondary;\n    border-title-align: right;\n    border-subtitle-align: right;\n}\n\n#lbl3 {\n    border: wide $secondary;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl4 {\n    border: ascii $success;\n    border-title-align: center;  /* (3)! */\n    border-subtitle-align: left;\n}\n\n#lbl5 {  /* (4)! */\n    /* No border = no (sub)title. */\n    border: none $success;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl6 {  /* (5)! */\n    border-top: solid $success;\n    border-bottom: solid $success;\n}\n\n#lbl7 {  /* (6)! */\n    border-top: solid $error;\n    border-bottom: solid $error;\n    padding: 1 2;\n    border-subtitle-align: left;\n}\n\n#lbl8 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl9 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: right;\n}\n</code></pre> <ol> <li>The default alignment for the title is <code>left</code> and the default alignment for the subtitle is <code>right</code>.</li> <li>Specifying an alignment when the (sub)title is too long has no effect. (Although, it will have an effect if the (sub)title is shortened or if the widget is widened.)</li> <li>Setting the alignment does not affect empty (sub)titles.</li> <li>If the border is not set, or set to <code>none</code>/<code>hidden</code>, the (sub)title is not shown.</li> <li>If the (sub)title alignment is on a side which does not have a border edge, the (sub)title will be flush to that side.</li> <li>Naturally, (sub)title positioning is affected by padding.</li> </ol>"},{"location":"styles/border_subtitle_align/#css","title":"CSS","text":"<pre><code>border-subtitle-align: left;\nborder-subtitle-align: center;\nborder-subtitle-align: right;\n</code></pre>"},{"location":"styles/border_subtitle_align/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_align = \"left\"\nwidget.styles.border_subtitle_align = \"center\"\nwidget.styles.border_subtitle_align = \"right\"\n</code></pre>"},{"location":"styles/border_subtitle_align/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_background/","title":"Border-subtitle-background","text":"<p>The <code>border-subtitle-background</code> style sets the background color of the border_subtitle.</p>"},{"location":"styles/border_subtitle_background/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-background: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_subtitle_background/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_subtitle_background/#css","title":"CSS","text":"<pre><code>border-subtitle-background: blue;\n</code></pre>"},{"location":"styles/border_subtitle_background/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_background = \"blue\"\n</code></pre>"},{"location":"styles/border_subtitle_background/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_color/","title":"Border-subtitle-color","text":"<p>The <code>border-subtitle-color</code> style sets the color of the border_subtitle.</p>"},{"location":"styles/border_subtitle_color/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-color: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_subtitle_color/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_subtitle_color/#css","title":"CSS","text":"<pre><code>border-subtitle-color: red;\n</code></pre>"},{"location":"styles/border_subtitle_color/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_color = \"red\"\n</code></pre>"},{"location":"styles/border_subtitle_color/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_subtitle_style/","title":"Border-subtitle-style","text":"<p>The <code>border-subtitle-style</code> style sets the text style of the border_subtitle.</p>"},{"location":"styles/border_subtitle_style/#syntax","title":"Syntax","text":"<pre>\nborder-subtitle-style: &lt;text-style&gt;;\n</pre>"},{"location":"styles/border_subtitle_style/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_subtitle_style/#css","title":"CSS","text":"<pre><code>border-subtitle-style: bold underline;\n</code></pre>"},{"location":"styles/border_subtitle_style/#python","title":"Python","text":"<pre><code>widget.styles.border_subtitle_style = \"bold underline\"\n</code></pre>"},{"location":"styles/border_subtitle_style/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_align/","title":"Border-title-align","text":"<p>The <code>border-title-align</code> style sets the horizontal alignment for the border title.</p>"},{"location":"styles/border_title_align/#syntax","title":"Syntax","text":"<pre>\nborder-title-align: &lt;horizontal&gt;;\n</pre> <p>The <code>border-title-align</code> style takes a <code>&lt;horizontal&gt;</code> that determines where the border title is aligned along the top edge of the border. This means that the border corners are always visible.</p>"},{"location":"styles/border_title_align/#default","title":"Default","text":"<p>The default alignment is <code>left</code>.</p>"},{"location":"styles/border_title_align/#examples","title":"Examples","text":""},{"location":"styles/border_title_align/#basic-usage","title":"Basic usage","text":"<p>This example shows three labels, each with a different border title alignment:</p> Outputborder_title_align.pyborder_title_align.tcss <p> BorderTitleAlignApp \u250c\u2500\u00a0&lt;\u00a0Left\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502My\u00a0title\u00a0is\u00a0on\u00a0the\u00a0left.\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u00a0Centered!\u00a0\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 \u254f\u254f \u254fMy\u00a0title\u00a0is\u00a0centered\u254f \u254f\u254f \u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u00a0Right\u00a0&gt;\u00a0\u2594\u258e \u258a\u258e \u258aMy\u00a0title\u00a0is\u00a0on\u00a0the\u00a0right\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass BorderTitleAlignApp(App):\n    CSS_PATH = \"border_title_align.tcss\"\n\n    def compose(self):\n        lbl = Label(\"My title is on the left.\", id=\"label1\")\n        lbl.border_title = \"&lt; Left\"\n        yield lbl\n\n        lbl = Label(\"My title is centered\", id=\"label2\")\n        lbl.border_title = \"Centered!\"\n        yield lbl\n\n        lbl = Label(\"My title is on the right\", id=\"label3\")\n        lbl.border_title = \"Right &gt;\"\n        yield lbl\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleAlignApp()\n    app.run()\n</code></pre> <pre><code>#label1 {\n    border: solid $secondary;\n    border-title-align: left;\n}\n\n#label2 {\n    border: dashed $secondary;\n    border-title-align: center;\n}\n\n#label3 {\n    border: tall $secondary;\n    border-title-align: right;\n}\n\nScreen &gt; Label {\n    width: 100%;\n    height: 5;\n    content-align: center middle;\n    color: white;\n    margin: 1;\n    box-sizing: border-box;\n}\n</code></pre>"},{"location":"styles/border_title_align/#complete-usage-reference","title":"Complete usage reference","text":"<p>This example shows all border title and subtitle alignments, together with some examples of how (sub)titles can have custom markup. Open the code tabs to see the details of the code examples.</p> Outputborder_sub_title_align_all.pyborder_sub_title_align_all.tcss <p> BorderSubTitleAlignAll \u258f\u00a0\u00a0Border\u00a0title\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u256d\u2500\u00a0Lef\u2026\u00a0\u2500\u256e\u2581\u2581\u2581\u2581\u2581\u00a0Left\u00a0\u2581\u2581\u2581\u2581\u2581 \u258fThis\u00a0is\u00a0the\u00a0story\u00a0of\u2595\u2502a\u00a0Python\u2502\u258edeveloper\u00a0that\u258a \u258f\u00a0\u00a0\u00a0Border\u00a0subtitle\u00a0\u00a0\u2595\u2570\u2500\u00a0Cen\u2026\u00a0\u2500\u256f\u2594\u2594\u2594\u2594\u2594\u00a0@@@\u00a0\u2594\u2594\u2594\u2594\u2594\u2594 +--------------+\u2500Title\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 |had\u00a0to\u00a0fill\u00a0up|\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nine\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0and\u00a0ended\u00a0up\u00a0redoing\u00a0it\u00a0\u00a0 +-\u00a0Left\u00a0-------+\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500Subtitle\u2500 \u2500Title,\u00a0but\u00a0really\u00a0looo\u2026\u2500 \u2500Title,\u00a0but\u00a0r\u2026\u2500\u2500Title,\u00a0but\u00a0reall\u2026\u2500 because\u00a0the\u00a0first\u00a0try\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0had\u00a0some\u00a0labels\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0that\u00a0were\u00a0too\u00a0long.\u00a0\u00a0\u00a0\u00a0 \u2500Subtitle,\u00a0bu\u2026\u2500\u2500Subtitle,\u00a0but\u00a0re\u2026\u2500 \u2500Subtitle,\u00a0but\u00a0really\u00a0l\u2026\u2500 </p> <pre><code>from textual.app import App\nfrom textual.containers import Container, Grid\nfrom textual.widgets import Label\n\n\ndef make_label_container(  # (11)!\n    text: str, id: str, border_title: str, border_subtitle: str\n) -&gt; Container:\n    lbl = Label(text, id=id)\n    lbl.border_title = border_title\n    lbl.border_subtitle = border_subtitle\n    return Container(lbl)\n\n\nclass BorderSubTitleAlignAll(App[None]):\n    CSS_PATH = \"border_sub_title_align_all.tcss\"\n\n    def compose(self):\n        with Grid():\n            yield make_label_container(  # (1)!\n                \"This is the story of\",\n                \"lbl1\",\n                \"[b]Border [i]title[/i][/]\",\n                \"[u][r]Border[/r] subtitle[/]\",\n            )\n            yield make_label_container(  # (2)!\n                \"a Python\",\n                \"lbl2\",\n                \"[b red]Left, but it's loooooooooooong\",\n                \"[reverse]Center, but it's loooooooooooong\",\n            )\n            yield make_label_container(  # (3)!\n                \"developer that\",\n                \"lbl3\",\n                \"[b i on purple]Left[/]\",\n                \"[r u white on black]@@@[/]\",\n            )\n            yield make_label_container(\n                \"had to fill up\",\n                \"lbl4\",\n                \"\",  # (4)!\n                \"[link=https://textual.textualize.io]Left[/]\",  # (5)!\n            )\n            yield make_label_container(  # (6)!\n                \"nine labels\", \"lbl5\", \"Title\", \"Subtitle\"\n            )\n            yield make_label_container(  # (7)!\n                \"and ended up redoing it\",\n                \"lbl6\",\n                \"Title\",\n                \"Subtitle\",\n            )\n            yield make_label_container(  # (8)!\n                \"because the first try\",\n                \"lbl7\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (9)!\n                \"had some labels\",\n                \"lbl8\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n            yield make_label_container(  # (10)!\n                \"that were too long.\",\n                \"lbl9\",\n                \"Title, but really loooooooooong!\",\n                \"Subtitle, but really loooooooooong!\",\n            )\n\n\nif __name__ == \"__main__\":\n    app = BorderSubTitleAlignAll()\n    app.run()\n</code></pre> <ol> <li>Border (sub)titles can contain nested markup.</li> <li>Long (sub)titles get truncated and occupy as much space as possible.</li> <li>(Sub)titles can be stylised with Rich markup.</li> <li>An empty (sub)title isn't displayed.</li> <li>The markup can even contain Rich links.</li> <li>If the widget does not have a border, the title and subtitle are not shown.</li> <li>When the side borders are not set, the (sub)title will align with the edge of the widget.</li> <li>The title and subtitle are aligned on the left and very long, so they get truncated and we can still see the rightmost character of the border edge.</li> <li>The title and subtitle are centered and very long, so they get truncated and are centered with one character of padding on each side.</li> <li>The title and subtitle are aligned on the right and very long, so they get truncated and we can still see the leftmost character of the border edge.</li> <li>An auxiliary function to create labels with border title and subtitle.</li> </ol> <pre><code>Grid {\n    grid-size: 3 3;\n    align: center middle;\n}\n\nContainer {\n    width: 100%;\n    height: 100%;\n    align: center middle;\n}\n\n#lbl1 {  /* (1)! */\n    border: vkey $secondary;\n}\n\n#lbl2 {  /* (2)! */\n    border: round $secondary;\n    border-title-align: right;\n    border-subtitle-align: right;\n}\n\n#lbl3 {\n    border: wide $secondary;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl4 {\n    border: ascii $success;\n    border-title-align: center;  /* (3)! */\n    border-subtitle-align: left;\n}\n\n#lbl5 {  /* (4)! */\n    /* No border = no (sub)title. */\n    border: none $success;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl6 {  /* (5)! */\n    border-top: solid $success;\n    border-bottom: solid $success;\n}\n\n#lbl7 {  /* (6)! */\n    border-top: solid $error;\n    border-bottom: solid $error;\n    padding: 1 2;\n    border-subtitle-align: left;\n}\n\n#lbl8 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: center;\n    border-subtitle-align: center;\n}\n\n#lbl9 {\n    border-top: solid $error;\n    border-bottom: solid $error;\n    border-title-align: right;\n}\n</code></pre> <ol> <li>The default alignment for the title is <code>left</code> and the default alignment for the subtitle is <code>right</code>.</li> <li>Specifying an alignment when the (sub)title is too long has no effect. (Although, it will have an effect if the (sub)title is shortened or if the widget is widened.)</li> <li>Setting the alignment does not affect empty (sub)titles.</li> <li>If the border is not set, or set to <code>none</code>/<code>hidden</code>, the (sub)title is not shown.</li> <li>If the (sub)title alignment is on a side which does not have a border edge, the (sub)title will be flush to that side.</li> <li>Naturally, (sub)title positioning is affected by padding.</li> </ol>"},{"location":"styles/border_title_align/#css","title":"CSS","text":"<pre><code>border-title-align: left;\nborder-title-align: center;\nborder-title-align: right;\n</code></pre>"},{"location":"styles/border_title_align/#python","title":"Python","text":"<pre><code>widget.styles.border_title_align = \"left\"\nwidget.styles.border_title_align = \"center\"\nwidget.styles.border_title_align = \"right\"\n</code></pre>"},{"location":"styles/border_title_align/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_background/","title":"Border-title-background","text":"<p>The <code>border-title-background</code> style sets the background color of the border_title.</p>"},{"location":"styles/border_title_background/#syntax","title":"Syntax","text":"<pre>\nborder-title-background: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_title_background/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_title_background/#css","title":"CSS","text":"<pre><code>border-title-background: blue;\n</code></pre>"},{"location":"styles/border_title_background/#python","title":"Python","text":"<pre><code>widget.styles.border_title_background = \"blue\"\n</code></pre>"},{"location":"styles/border_title_background/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_color/","title":"Border-title-color","text":"<p>The <code>border-title-color</code> style sets the color of the border_title.</p>"},{"location":"styles/border_title_color/#syntax","title":"Syntax","text":"<pre>\nborder-title-color: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre>"},{"location":"styles/border_title_color/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_title_color/#css","title":"CSS","text":"<pre><code>border-title-color: red;\n</code></pre>"},{"location":"styles/border_title_color/#python","title":"Python","text":"<pre><code>widget.styles.border_title_color = \"red\"\n</code></pre>"},{"location":"styles/border_title_color/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/border_title_style/","title":"Border-title-style","text":"<p>The <code>border-title-style</code> style sets the text style of the border_title.</p>"},{"location":"styles/border_title_style/#syntax","title":"Syntax","text":"<pre>\nborder-title-style: &lt;text-style&gt;;\n</pre>"},{"location":"styles/border_title_style/#example","title":"Example","text":"<p>The following examples demonstrates customization of the border color and text style rules.</p> Outputborder_title_colors.pyborder_title_colors.tcss <p> BorderTitleApp \u250f\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503Hello,\u00a0World!\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0Textual\u00a0Rocks\u00a0\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass BorderTitleApp(App):\n    CSS_PATH = \"border_title_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, World!\")\n\n    def on_mount(self) -&gt; None:\n        label = self.query_one(Label)\n        label.border_title = \"Textual Rocks\"\n        label.border_subtitle = \"Textual Rocks\"\n\n\nif __name__ == \"__main__\":\n    app = BorderTitleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nLabel {\n    padding: 4 8;\n    border: heavy red;\n\n    border-title-color: green;\n    border-title-background: white;\n    border-title-style: bold;\n\n    border-subtitle-color: magenta;\n    border-subtitle-background: yellow;\n    border-subtitle-style: italic;\n}\n</code></pre>"},{"location":"styles/border_title_style/#css","title":"CSS","text":"<pre><code>border-title-style: bold underline;\n</code></pre>"},{"location":"styles/border_title_style/#python","title":"Python","text":"<pre><code>widget.styles.border_title_style = \"bold underline\"\n</code></pre>"},{"location":"styles/border_title_style/#see-also","title":"See also","text":"<ul> <li><code>border-title-align</code> to set the title's alignment.</li> <li><code>border-title-color</code> to set the title's color.</li> <li><code>border-title-background</code> to set the title's background color.</li> <li> <p><code>border-title-style</code> to set the title's text style.</p> </li> <li> <p><code>border-subtitle-align</code> to set the sub-title's alignment.</p> </li> <li><code>border-subtitle-color</code> to set the sub-title's color.</li> <li><code>border-subtitle-background</code> to set the sub-title's background color.</li> <li><code>border-subtitle-style</code> to set the sub-title's text style.</li> </ul>"},{"location":"styles/box_sizing/","title":"Box-sizing","text":"<p>The <code>box-sizing</code> style determines how the width and height of a widget are calculated.</p>"},{"location":"styles/box_sizing/#syntax","title":"Syntax","text":"<pre><code>box-sizing: border-box | content-box;\n</code></pre>"},{"location":"styles/box_sizing/#values","title":"Values","text":"Value Description <code>border-box</code> (default) Padding and border are included in the width and height. If you add padding and/or border the widget will not change in size, but you will have less space for content. <code>content-box</code> Padding and border will increase the size of the widget, leaving the content area unaffected."},{"location":"styles/box_sizing/#example","title":"Example","text":"<p>Both widgets in this example have the same height (5). The top widget has <code>box-sizing: border-box</code> which means that padding and border reduce the space for content. The bottom widget has <code>box-sizing: content-box</code> which increases the size of the widget to compensate for padding and border.</p> Outputbox_sizing.pybox_sizing.tcss <p> BoxSizingApp \u00a0\u00a0\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0\u00a0 \u258e\u258a \u258eI'm\u00a0using\u00a0border-box!\u258a \u258e\u258a \u00a0\u00a0\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u00a0\u00a0 \u00a0\u00a0\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u00a0\u00a0 \u258e\u258a \u258eI'm\u00a0using\u00a0content-box!\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u258e\u258a \u00a0\u00a0\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u00a0\u00a0 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\n\nclass BoxSizingApp(App):\n    CSS_PATH = \"box_sizing.tcss\"\n\n    def compose(self):\n        yield Static(\"I'm using border-box!\", id=\"static1\")\n        yield Static(\"I'm using content-box!\", id=\"static2\")\n\n\nif __name__ == \"__main__\":\n    app = BoxSizingApp()\n    app.run()\n</code></pre> <pre><code>#static1 {\n    box-sizing: border-box;\n}\n\n#static2 {\n    box-sizing: content-box;\n}\n\nScreen {\n    background: white;\n    color: black;\n}\n\nApp Static {\n    background: blue 20%;\n    height: 5;\n    margin: 2;\n    padding: 1;\n    border: wide black;\n}\n</code></pre>"},{"location":"styles/box_sizing/#css","title":"CSS","text":"<pre><code>/* Set box sizing to border-box (default) */\nbox-sizing: border-box;\n\n/* Set box sizing to content-box */\nbox-sizing: content-box;\n</code></pre>"},{"location":"styles/box_sizing/#python","title":"Python","text":"<pre><code># Set box sizing to border-box (default)\nwidget.box_sizing = \"border-box\"\n\n# Set box sizing to content-box\nwidget.box_sizing = \"content-box\"\n</code></pre>"},{"location":"styles/box_sizing/#see-also","title":"See also","text":"<ul> <li><code>border</code> to add a border around a widget.</li> <li><code>padding</code> to add spacing around the content of a widget.</li> </ul>"},{"location":"styles/color/","title":"Color","text":"<p>The <code>color</code> style sets the text color of a widget.</p>"},{"location":"styles/color/#syntax","title":"Syntax","text":"<pre>\ncolor: (&lt;color&gt; | auto) [&lt;percentage&gt;];\n</pre> <p>The <code>color</code> style requires a <code>&lt;color&gt;</code> followed by an optional <code>&lt;percentage&gt;</code> to specify the color's opacity.</p> <p>You can also use the special value of <code>\"auto\"</code> in place of a color. This tells Textual to automatically select either white or black text for best contrast against the background.</p>"},{"location":"styles/color/#examples","title":"Examples","text":""},{"location":"styles/color/#basic-usage","title":"Basic usage","text":"<p>This example sets a different text color for each of three different widgets.</p> Outputcolor.pycolor.tcss <p> ColorApp I'm\u00a0red! I'm\u00a0rgb(0,\u00a0255,\u00a00)! I'm\u00a0hsl(240,\u00a0100%,\u00a050%)! </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass ColorApp(App):\n    CSS_PATH = \"color.tcss\"\n\n    def compose(self):\n        yield Label(\"I'm red!\", id=\"label1\")\n        yield Label(\"I'm rgb(0, 255, 0)!\", id=\"label2\")\n        yield Label(\"I'm hsl(240, 100%, 50%)!\", id=\"label3\")\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    height: 1fr;\n    content-align: center middle;\n    width: 100%;\n}\n\n#label1 {\n    color: red;\n}\n\n#label2 {\n    color: rgb(0, 255, 0);\n}\n\n#label3 {\n    color: hsl(240, 100%, 50%);\n}\n</code></pre>"},{"location":"styles/color/#auto","title":"Auto","text":"<p>The next example shows how <code>auto</code> chooses between a lighter or a darker text color to increase the contrast and improve readability.</p> Outputcolor_auto.pycolor_auto.tcss <p> ColorApp The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! The\u00a0quick\u00a0brown\u00a0fox\u00a0jumps\u00a0over\u00a0the\u00a0lazy\u00a0dog! </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass ColorApp(App):\n    CSS_PATH = \"color_auto.tcss\"\n\n    def compose(self):\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl1\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl2\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl3\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl4\")\n        yield Label(\"The quick brown fox jumps over the lazy dog!\", id=\"lbl5\")\n\n\nif __name__ == \"__main__\":\n    app = ColorApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    color: auto 80%;\n    content-align: center middle;\n    height: 1fr;\n    width: 100%;\n}\n\n#lbl1 {\n    background: red 80%;\n}\n\n#lbl2 {\n    background: yellow 80%;\n}\n\n#lbl3 {\n    background: blue 80%;\n}\n\n#lbl4 {\n    background: pink 80%;\n}\n\n#lbl5 {\n    background: green 80%;\n}\n</code></pre>"},{"location":"styles/color/#css","title":"CSS","text":"<pre><code>/* Blue text */\ncolor: blue;\n\n/* 20% red text */\ncolor: red 20%;\n\n/* RGB color */\ncolor: rgb(100, 120, 200);\n\n/* Automatically choose color with suitable contrast for readability */\ncolor: auto;\n</code></pre>"},{"location":"styles/color/#python","title":"Python","text":"<p>You can use the same syntax as CSS, or explicitly set a <code>Color</code> object.</p> <pre><code># Set blue text\nwidget.styles.color = \"blue\"\n\nfrom textual.color import Color\n# Set with a color object\nwidget.styles.color = Color.parse(\"pink\")\n</code></pre>"},{"location":"styles/color/#see-also","title":"See also","text":"<ul> <li><code>background</code> to set the background color in a widget.</li> </ul>"},{"location":"styles/content_align/","title":"Content-align","text":"<p>The <code>content-align</code> style aligns content inside a widget.</p>"},{"location":"styles/content_align/#syntax","title":"Syntax","text":"<pre>\ncontent-align: &lt;horizontal&gt; &lt;vertical&gt;;\n\ncontent-align-horizontal: &lt;horizontal&gt;;\ncontent-align-vertical: &lt;vertical&gt;;\n</pre> <p>The <code>content-align</code> style takes a <code>&lt;horizontal&gt;</code> followed by a <code>&lt;vertical&gt;</code>.</p> <p>You can specify the alignment of content on both the horizontal and vertical axes at the same time, or on each of the axis separately. To specify content alignment on a single axis, use the respective style and type:</p> <ul> <li><code>content-align-horizontal</code> takes a <code>&lt;horizontal&gt;</code> and does alignment along the horizontal axis; and</li> <li><code>content-align-vertical</code> takes a <code>&lt;vertical&gt;</code> and does alignment along the vertical axis.</li> </ul>"},{"location":"styles/content_align/#examples","title":"Examples","text":""},{"location":"styles/content_align/#basic-usage","title":"Basic usage","text":"<p>This first example shows three labels stacked vertically, each with different content alignments.</p> Outputcontent_align.pycontent_align.tcss <p> ContentAlignApp With\u00a0content-align\u00a0you\u00a0can... ...Easily\u00a0align\u00a0content... ...Horizontally\u00a0and\u00a0vertically! </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass ContentAlignApp(App):\n    CSS_PATH = \"content_align.tcss\"\n\n    def compose(self):\n        yield Label(\"With [i]content-align[/] you can...\", id=\"box1\")\n        yield Label(\"...[b]Easily align content[/]...\", id=\"box2\")\n        yield Label(\"...Horizontally [i]and[/] vertically!\", id=\"box3\")\n\n\nif __name__ == \"__main__\":\n    app = ContentAlignApp()\n    app.run()\n</code></pre> <pre><code>#box1 {\n    content-align: left top;\n    background: red;\n}\n\n#box2 {\n    content-align-horizontal: center;\n    content-align-vertical: middle;\n    background: green;\n}\n\n#box3 {\n    content-align: right bottom;\n    background: blue;\n}\n\nLabel {\n    width: 100%;\n    height: 1fr;\n    padding: 1;\n    color: white;\n}\n</code></pre>"},{"location":"styles/content_align/#all-content-alignments","title":"All content alignments","text":"<p>The next example shows a 3 by 3 grid of labels. Each label has its text aligned differently.</p> Outputcontent_align_all.pycontent_align_all.tcss <p> AllContentAlignApp left\u00a0topcenter\u00a0topright\u00a0top left\u00a0middlecenter\u00a0middleright\u00a0middle left\u00a0bottomcenter\u00a0bottomright\u00a0bottom </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass AllContentAlignApp(App):\n    CSS_PATH = \"content_align_all.tcss\"\n\n    def compose(self):\n        yield Label(\"left top\", id=\"left-top\")\n        yield Label(\"center top\", id=\"center-top\")\n        yield Label(\"right top\", id=\"right-top\")\n        yield Label(\"left middle\", id=\"left-middle\")\n        yield Label(\"center middle\", id=\"center-middle\")\n        yield Label(\"right middle\", id=\"right-middle\")\n        yield Label(\"left bottom\", id=\"left-bottom\")\n        yield Label(\"center bottom\", id=\"center-bottom\")\n        yield Label(\"right bottom\", id=\"right-bottom\")\n\n\nif __name__ == \"__main__\":\n    app = AllContentAlignApp()\n    app.run()\n</code></pre> <pre><code>#left-top {\n    /* content-align: left top; this is the default implied value. */\n}\n#center-top {\n    content-align: center top;\n}\n#right-top {\n    content-align: right top;\n}\n#left-middle {\n    content-align: left middle;\n}\n#center-middle {\n    content-align: center middle;\n}\n#right-middle {\n    content-align: right middle;\n}\n#left-bottom {\n    content-align: left bottom;\n}\n#center-bottom {\n    content-align: center bottom;\n}\n#right-bottom {\n    content-align: right bottom;\n}\n\nScreen {\n    layout: grid;\n    grid-size: 3 3;\n    grid-gutter: 1;\n}\n\nLabel {\n    width: 100%;\n    height: 100%;\n    background: $primary;\n}\n</code></pre>"},{"location":"styles/content_align/#css","title":"CSS","text":"<pre><code>/* Align content in the very center of a widget */\ncontent-align: center middle;\n/* Align content at the top right of a widget */\ncontent-align: right top;\n\n/* Change the horizontal alignment of the content of a widget */\ncontent-align-horizontal: right;\n/* Change the vertical alignment of the content of a widget */\ncontent-align-vertical: middle;\n</code></pre>"},{"location":"styles/content_align/#python","title":"Python","text":"<pre><code># Align content in the very center of a widget\nwidget.styles.content_align = (\"center\", \"middle\")\n# Align content at the top right of a widget\nwidget.styles.content_align = (\"right\", \"top\")\n\n# Change the horizontal alignment of the content of a widget\nwidget.styles.content_align_horizontal = \"right\"\n# Change the vertical alignment of the content of a widget\nwidget.styles.content_align_vertical = \"middle\"\n</code></pre>"},{"location":"styles/content_align/#see-also","title":"See also","text":"<ul> <li><code>align</code> to set the alignment of children widgets inside a container.</li> <li><code>text-align</code> to set the alignment of text in a widget.</li> </ul>"},{"location":"styles/display/","title":"Display","text":"<p>The <code>display</code> style defines whether a widget is displayed or not.</p>"},{"location":"styles/display/#syntax","title":"Syntax","text":"<pre><code>display: block | none;\n</code></pre>"},{"location":"styles/display/#values","title":"Values","text":"Value Description <code>block</code> (default) Display the widget as normal. <code>none</code> The widget is not displayed and space will no longer be reserved for it."},{"location":"styles/display/#example","title":"Example","text":"<p>Note that the second widget is hidden by adding the <code>\"remove\"</code> class which sets the display style to <code>none</code>.</p> Outputdisplay.pydisplay.tcss <p> DisplayApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a01\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a03\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\n\nclass DisplayApp(App):\n    CSS_PATH = \"display.tcss\"\n\n    def compose(self):\n        yield Static(\"Widget 1\")\n        yield Static(\"Widget 2\", classes=\"remove\")\n        yield Static(\"Widget 3\")\n\n\nif __name__ == \"__main__\":\n    app = DisplayApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: green;\n}\n\nStatic {\n    height: 5;\n    background: white;\n    color: blue;\n    border: heavy blue;\n}\n\nStatic.remove {\n    display: none;\n}\n</code></pre>"},{"location":"styles/display/#css","title":"CSS","text":"<pre><code>/* Widget is shown */\ndisplay: block;\n\n/* Widget is not shown */\ndisplay: none;\n</code></pre>"},{"location":"styles/display/#python","title":"Python","text":"<pre><code># Hide the widget\nself.styles.display = \"none\"\n\n# Show the widget again\nself.styles.display = \"block\"\n</code></pre> <p>There is also a shortcut to show / hide a widget. The <code>display</code> property on <code>Widget</code> may be set to <code>True</code> or <code>False</code> to show or hide the widget.</p> <pre><code># Hide the widget\nwidget.display = False\n\n# Show the widget\nwidget.display = True\n</code></pre>"},{"location":"styles/display/#see-also","title":"See also","text":"<ul> <li><code>visibility</code> to specify whether a widget is visible or not.</li> </ul>"},{"location":"styles/dock/","title":"Dock","text":"<p>The <code>dock</code> style is used to fix a widget to the edge of a container (which may be the entire terminal window).</p>"},{"location":"styles/dock/#syntax","title":"Syntax","text":"<pre><code>dock: bottom | left | right | top;\n</code></pre> <p>The option chosen determines the edge to which the widget is docked.</p>"},{"location":"styles/dock/#examples","title":"Examples","text":""},{"location":"styles/dock/#basic-usage","title":"Basic usage","text":"<p>The example below shows a <code>left</code> docked sidebar. Notice that even though the content is scrolled, the sidebar remains fixed.</p> Outputdock_layout1_sidebar.pydock_layout1_sidebar.tcss <p> DockLayoutExample SidebarDocking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0\u2587\u2587 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. Docked\u00a0widgets\u00a0will\u00a0not\u00a0scroll\u00a0out\u00a0of\u00a0view,\u00a0making\u00a0them\u00a0ideal\u00a0 for\u00a0sticky\u00a0headers,\u00a0footers,\u00a0and\u00a0sidebars. Docking\u00a0a\u00a0widget\u00a0removes\u00a0it\u00a0from\u00a0the\u00a0layout\u00a0and\u00a0fixes\u00a0its\u00a0 position,\u00a0aligned\u00a0to\u00a0either\u00a0the\u00a0top,\u00a0right,\u00a0bottom,\u00a0or\u00a0left\u00a0 edges\u00a0of\u00a0a\u00a0container. </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nDocking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container.\n\nDocked widgets will not scroll out of view, making them ideal for sticky headers, footers, and sidebars.\n\n\"\"\"\n\n\nclass DockLayoutExample(App):\n    CSS_PATH = \"dock_layout1_sidebar.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Sidebar\", id=\"sidebar\")\n        yield Static(TEXT * 10, id=\"body\")\n\n\nif __name__ == \"__main__\":\n    app = DockLayoutExample()\n    app.run()\n</code></pre> <pre><code>#sidebar {\n    dock: left;\n    width: 15;\n    height: 100%;\n    color: #0f2b41;\n    background: dodgerblue;\n}\n</code></pre>"},{"location":"styles/dock/#advanced-usage","title":"Advanced usage","text":"<p>The second example shows how one can use full-width or full-height containers to dock labels to the edges of a larger container. The labels will remain in that position (docked) even if the container they are in scrolls horizontally and/or vertically.</p> Outputdock_all.pydock_all.tcss <p> DockAllApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0top\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502left\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0right\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bottom\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Container\nfrom textual.widgets import Label\n\n\nclass DockAllApp(App):\n    CSS_PATH = \"dock_all.tcss\"\n\n    def compose(self):\n        yield Container(\n            Container(Label(\"left\"), id=\"left\"),\n            Container(Label(\"top\"), id=\"top\"),\n            Container(Label(\"right\"), id=\"right\"),\n            Container(Label(\"bottom\"), id=\"bottom\"),\n            id=\"big_container\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = DockAllApp()\n    app.run()\n</code></pre> <pre><code>#left {\n    dock: left;\n    height: 100%;\n    width: auto;\n    align-vertical: middle;\n}\n#top {\n    dock: top;\n    height: auto;\n    width: 100%;\n    align-horizontal: center;\n}\n#right {\n    dock: right;\n    height: 100%;\n    width: auto;\n    align-vertical: middle;\n}\n#bottom {\n    dock: bottom;\n    height: auto;\n    width: 100%;\n    align-horizontal: center;\n}\n\nScreen {\n    align: center middle;\n}\n\n#big_container {\n    width: 75%;\n    height: 75%;\n    border: round white;\n}\n</code></pre>"},{"location":"styles/dock/#css","title":"CSS","text":"<pre><code>dock: bottom;  /* Docks on the bottom edge of the parent container. */\ndock: left;    /* Docks on the   left edge of the parent container. */\ndock: right;   /* Docks on the  right edge of the parent container. */\ndock: top;     /* Docks on the    top edge of the parent container. */\n</code></pre>"},{"location":"styles/dock/#python","title":"Python","text":"<pre><code>widget.styles.dock = \"bottom\"  # Dock bottom.\nwidget.styles.dock = \"left\"    # Dock   left.\nwidget.styles.dock = \"right\"   # Dock  right.\nwidget.styles.dock = \"top\"     # Dock    top.\n</code></pre>"},{"location":"styles/dock/#see-also","title":"See also","text":"<ul> <li>The layout guide section on docking.</li> </ul>"},{"location":"styles/hatch/","title":"Hatch","text":"<p>The <code>hatch</code> style fills a widget's background with a repeating character for a pleasing textured effect.</p>"},{"location":"styles/hatch/#syntax","title":"Syntax","text":"<pre>\nhatch: (&lt;hatch&gt; | CHARACTER) &lt;color&gt; [&lt;percentage&gt;]\n</pre> <p>The hatch type can be specified with a constant, or a string. For example, <code>cross</code> for cross hatch, or <code>\"T\"</code> for a custom character.</p> <p>The color can be any Textual color value.</p> <p>An optional percentage can be used to set the opacity.</p>"},{"location":"styles/hatch/#examples","title":"Examples","text":"<p>An app to show a few hatch effects.</p> Outputhatch.pyhatch.tcss <p> HatchApp \u250c\u2500\u00a0cross\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u00a0horizontal\u00a0\u2500\u2510\u250c\u2500\u00a0custom\u00a0\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u00a0left\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u250c\u2500\u00a0right\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2502\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2573\u2502\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\u2502TTTTTTTTTTTTTT\u2502\u2502\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2572\u2502\u2502\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2571\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, Vertical\nfrom textual.widgets import Static\n\nHATCHES = (\"cross\", \"horizontal\", \"custom\", \"left\", \"right\")\n\n\nclass HatchApp(App):\n    CSS_PATH = \"hatch.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            for hatch in HATCHES:\n                static = Static(classes=f\"hatch {hatch}\")\n                static.border_title = hatch\n                with Vertical():\n                    yield static\n\n\nif __name__ == \"__main__\":\n    app = HatchApp()\n    app.run()\n</code></pre> <pre><code>.hatch {\n    height: 1fr;\n    border: solid $secondary;\n\n    &amp;.cross {\n        hatch: cross $success;\n    }\n    &amp;.horizontal {\n        hatch: horizontal $success 80%;\n    }\n    &amp;.custom {\n        hatch: \"T\" $success 60%;\n    }\n    &amp;.left {\n        hatch: left $success 40%;\n    }\n    &amp;.right {\n        hatch: right $success 20%;\n    }\n}\n</code></pre>"},{"location":"styles/hatch/#css","title":"CSS","text":"<pre><code>/* Red cross hatch */\nhatch: cross red;\n/* Right diagonals, 50% transparent green. */\nhatch: right green 50%;\n/* T custom character in 80% blue. **/\nhatch: \"T\" blue 80%;\n</code></pre>"},{"location":"styles/hatch/#python","title":"Python","text":"<pre><code>widget.styles.hatch = (\"cross\", \"red\")\nwidget.styles.hatch = (\"right\", \"rgba(0,255,0,128)\")\nwidget.styles.hatch = (\"T\", \"blue\")\n</code></pre>"},{"location":"styles/height/","title":"Height","text":"<p>The <code>height</code> style sets a widget's height.</p>"},{"location":"styles/height/#syntax","title":"Syntax","text":"<pre>\nheight: &lt;scalar&gt;;\n</pre> <p>The <code>height</code> style needs a <code>&lt;scalar&gt;</code> to determine the vertical length of the widget. By default, it sets the height of the content area, but if <code>box-sizing</code> is set to <code>border-box</code> it sets the height of the border area.</p>"},{"location":"styles/height/#examples","title":"Examples","text":""},{"location":"styles/height/#basic-usage","title":"Basic usage","text":"<p>This examples creates a widget with a height of 50% of the screen.</p> Outputheight.pyheight.tcss <p> HeightApp Widget </p> <pre><code>from textual.app import App\nfrom textual.widget import Widget\n\n\nclass HeightApp(App):\n    CSS_PATH = \"height.tcss\"\n\n    def compose(self):\n        yield Widget()\n\n\nif __name__ == \"__main__\":\n    app = HeightApp()\n    app.run()\n</code></pre> <pre><code>Screen &gt; Widget {\n    background: green;\n    height: 50%;\n    color: white;\n}\n</code></pre>"},{"location":"styles/height/#all-height-formats","title":"All height formats","text":"<p>The next example creates a series of wide widgets with heights set with different units. Open the CSS file tab to see the comments that explain how each height is computed. (The output includes a vertical ruler on the right to make it easier to check the height of each widget.)</p> Outputheight_comparison.pyheight_comparison.tcss <p> HeightComparisonApp #cells\u00b7 \u00b7 \u00b7 #percent\u00b7 \u2022 \u00b7 #w\u00b7 \u00b7 \u00b7 \u2022 #h\u00b7 \u00b7 \u00b7 \u00b7 #vw\u2022 \u00b7 \u00b7 \u00b7 #vh\u00b7 \u2022 #auto\u00b7 #fr1\u00b7 #fr2\u00b7 \u00b7 </p> <pre><code>from textual.app import App\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Label, Placeholder, Static\n\n\nclass Ruler(Static):\n    def compose(self):\n        ruler_text = \"\u00b7\\n\u00b7\\n\u00b7\\n\u00b7\\n\u2022\\n\" * 100\n        yield Label(ruler_text)\n\n\nclass HeightComparisonApp(App):\n    CSS_PATH = \"height_comparison.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Placeholder(id=\"cells\"),  # (1)!\n            Placeholder(id=\"percent\"),\n            Placeholder(id=\"w\"),\n            Placeholder(id=\"h\"),\n            Placeholder(id=\"vw\"),\n            Placeholder(id=\"vh\"),\n            Placeholder(id=\"auto\"),\n            Placeholder(id=\"fr1\"),\n            Placeholder(id=\"fr2\"),\n        )\n        yield Ruler()\n\n\nif __name__ == \"__main__\":\n    app = HeightComparisonApp()\n    app.run()\n</code></pre> <ol> <li>The id of the placeholder identifies which unit will be used to set the height of the widget.</li> </ol> <pre><code>#cells {\n    height: 2;       /* (1)! */\n}\n#percent {\n    height: 12.5%;   /* (2)! */\n}\n#w {\n    height: 5w;      /* (3)! */\n}\n#h {\n    height: 12.5h;   /* (4)! */\n}\n#vw {\n    height: 6.25vw;  /* (5)! */\n}\n#vh {\n    height: 12.5vh;  /* (6)! */\n}\n#auto {\n    height: auto;    /* (7)! */\n}\n#fr1 {\n    height: 1fr;     /* (8)! */\n}\n#fr2 {\n    height: 2fr;     /* (9)! */\n}\n\nScreen {\n    layers: ruler;\n    overflow: hidden;\n}\n\nRuler {\n    layer: ruler;\n    dock: right;\n    width: 1;\n    background: $accent;\n}\n</code></pre> <ol> <li>This sets the height to 2 lines.</li> <li>This sets the height to 12.5% of the space made available by the container. The container is 24 lines tall, so 12.5% of 24 is 3.</li> <li>This sets the height to 5% of the width of the direct container, which is the <code>VerticalScroll</code> container. Because it expands to fit all of the terminal, the width of the <code>VerticalScroll</code> is 80 and 5% of 80 is 4.</li> <li>This sets the height to 12.5% of the height of the direct container, which is the <code>VerticalScroll</code> container. Because it expands to fit all of the terminal, the height of the <code>VerticalScroll</code> is 24 and 12.5% of 24 is 3.</li> <li>This sets the height to 6.25% of the viewport width, which is 80. 6.25% of 80 is 5.</li> <li>This sets the height to 12.5% of the viewport height, which is 24. 12.5% of 24 is 3.</li> <li>This sets the height of the placeholder to be the optimal size that fits the content without scrolling. Because the content only spans one line, the placeholder has its height set to 1.</li> <li>This sets the height to <code>1fr</code>, which means this placeholder will have half the height of a placeholder with <code>2fr</code>.</li> <li>This sets the height to <code>2fr</code>, which means this placeholder will have twice the height of a placeholder with <code>1fr</code>.</li> </ol>"},{"location":"styles/height/#css","title":"CSS","text":"<pre><code>/* Explicit cell height */\nheight: 10;\n\n/* Percentage height */\nheight: 50%;\n\n/* Automatic height */\nheight: auto\n</code></pre>"},{"location":"styles/height/#python","title":"Python","text":"<pre><code>self.styles.height = 10  # Explicit cell height can be an int\nself.styles.height = \"50%\"\nself.styles.height = \"auto\"\n</code></pre>"},{"location":"styles/height/#see-also","title":"See also","text":"<ul> <li><code>max-height</code> and <code>min-height</code> to limit the height of a widget.</li> <li><code>width</code> to set the width of a widget.</li> </ul>"},{"location":"styles/keyline/","title":"Keyline","text":"<p>The <code>keyline</code> style is applied to a container and will draw lines around child widgets.</p> <p>A keyline is superficially like the border rule, but rather than draw inside the widget, a keyline is drawn outside of the widget's border. Additionally, unlike <code>border</code>, keylines can overlap and cross to create dividing lines between widgets.</p> <p>Because keylines are drawn in the widget's margin, you will need to apply the margin or grid-gutter rule to see the effect.</p>"},{"location":"styles/keyline/#syntax","title":"Syntax","text":"<pre>\nkeyline: [&lt;keyline&gt;] [&lt;color&gt;];\n</pre>"},{"location":"styles/keyline/#examples","title":"Examples","text":""},{"location":"styles/keyline/#horizontal-keyline","title":"Horizontal Keyline","text":"<p>The following examples shows a simple horizontal layout with a thin keyline.</p> Outputkeyline.pykeyline.tcss <p> KeylineApp \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502Placeholder\u2502Placeholder\u2502Placeholder\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Placeholder\n\n\nclass KeylineApp(App):\n    CSS_PATH = \"keyline_horizontal.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            yield Placeholder()\n            yield Placeholder()\n            yield Placeholder()\n\n\nif __name__ == \"__main__\":\n    app = KeylineApp()\n    app.run()\n</code></pre> <pre><code>Placeholder {\n    margin: 1;\n    width: 1fr;\n}\n\nHorizontal {\n    keyline: thin $secondary;\n}\n</code></pre>"},{"location":"styles/keyline/#grid-keyline","title":"Grid keyline","text":"<p>The following examples shows a grid layout with a heavy keyline.</p> Outputkeyline.pykeyline.tcss <p> KeylineApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503\u2503\u2503 \u2503\u2503\u2503 \u2503#foo\u2503\u2503 \u2503\u2503\u2503 \u2503\u2503\u2503 \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252b#bar\u2503 \u2503\u2503\u2503\u2503 \u2503\u2503\u2503\u2503 \u2503Placeholder\u2503\u2503\u2503 \u2503\u2503\u2503\u2503 \u2503\u2503\u2503\u2503 \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u253b\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u253b\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252b \u2503\u2503 \u2503\u2503 \u2503#baz\u2503 \u2503\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass KeylineApp(App):\n    CSS_PATH = \"keyline.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Grid():\n            yield Placeholder(id=\"foo\")\n            yield Placeholder(id=\"bar\")\n            yield Placeholder()\n            yield Placeholder(classes=\"hidden\")\n            yield Placeholder(id=\"baz\")\n\n\nif __name__ == \"__main__\":\n    KeylineApp().run()\n</code></pre> <pre><code>Grid {\n    grid-size: 3 3;\n    grid-gutter: 1;\n    padding: 2 3;\n    keyline: heavy green;\n}\nPlaceholder {\n    height: 1fr;\n}\n.hidden {\n    visibility: hidden;\n}\n#foo {\n    column-span: 2;\n}\n#bar {\n    row-span: 2;\n}\n#baz {\n    column-span:3;\n}\n</code></pre>"},{"location":"styles/keyline/#css","title":"CSS","text":"<pre><code>/* Set a thin green keyline */\n/* Note: Must be set on a container or a widget with a layout. */\nkeyline: thin green;\n</code></pre>"},{"location":"styles/keyline/#python","title":"Python","text":"<p>You can set a keyline in Python with a tuple of type and color:</p> <pre><code>widget.styles.keyline = (\"thin\", \"green\")\n</code></pre>"},{"location":"styles/keyline/#see-also","title":"See also","text":"<ul> <li><code>border</code> to add a border around a widget.</li> </ul>"},{"location":"styles/layer/","title":"Layer","text":"<p>The <code>layer</code> style defines the layer a widget belongs to.</p>"},{"location":"styles/layer/#syntax","title":"Syntax","text":"<pre>\nlayer: &lt;name&gt;;\n</pre> <p>The <code>layer</code> style accepts a <code>&lt;name&gt;</code> that defines the layer this widget belongs to. This <code>&lt;name&gt;</code> must correspond to a <code>&lt;name&gt;</code> that has been defined in a <code>layers</code> style by an ancestor of this widget.</p> <p>More information on layers can be found in the guide.</p> <p>Warning</p> <p>Using a <code>&lt;name&gt;</code> that hasn't been defined in a <code>layers</code> declaration of an ancestor of this widget has no effect.</p>"},{"location":"styles/layer/#example","title":"Example","text":"<p>In the example below, <code>#box1</code> is yielded before <code>#box2</code>. However, since <code>#box1</code> is on the higher layer, it is drawn on top of <code>#box2</code>.</p> Outputlayers.pylayers.tcss <p> LayersExample box1\u00a0(layer\u00a0=\u00a0above) box2\u00a0(layer\u00a0=\u00a0below) </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass LayersExample(App):\n    CSS_PATH = \"layers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"box1 (layer = above)\", id=\"box1\")\n        yield Static(\"box2 (layer = below)\", id=\"box2\")\n\n\nif __name__ == \"__main__\":\n    app = LayersExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n    layers: below above;\n}\n\nStatic {\n    width: 28;\n    height: 8;\n    color: auto;\n    content-align: center middle;\n}\n\n#box1 {\n    layer: above;\n    background: darkcyan;\n}\n\n#box2 {\n    layer: below;\n    background: orange;\n    offset: 12 6;\n}\n</code></pre>"},{"location":"styles/layer/#css","title":"CSS","text":"<pre><code>/* Draw the widget on the layer called 'below' */\nlayer: below;\n</code></pre>"},{"location":"styles/layer/#python","title":"Python","text":"<pre><code># Draw the widget on the layer called 'below'\nwidget.styles.layer = \"below\"\n</code></pre>"},{"location":"styles/layer/#see-also","title":"See also","text":"<ul> <li>The layout guide section on layers.</li> <li><code>layers</code> to define an ordered set of layers.</li> </ul>"},{"location":"styles/layers/","title":"Layers","text":"<p>The <code>layers</code> style allows you to define an ordered set of layers.</p>"},{"location":"styles/layers/#syntax","title":"Syntax","text":"<pre>\nlayers: &lt;name&gt;+;\n</pre> <p>The <code>layers</code> style accepts one or more <code>&lt;name&gt;</code> that define the layers that the widget is aware of, and the order in which they will be painted on the screen.</p> <p>The values used here can later be referenced using the <code>layer</code> property. The layers defined first in the list are drawn under the layers that are defined later in the list.</p> <p>More information on layers can be found in the guide.</p>"},{"location":"styles/layers/#example","title":"Example","text":"<p>In the example below, <code>#box1</code> is yielded before <code>#box2</code>. However, since <code>#box1</code> is on the higher layer, it is drawn on top of <code>#box2</code>.</p> Outputlayers.pylayers.tcss <p> LayersExample box1\u00a0(layer\u00a0=\u00a0above) box2\u00a0(layer\u00a0=\u00a0below) </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass LayersExample(App):\n    CSS_PATH = \"layers.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"box1 (layer = above)\", id=\"box1\")\n        yield Static(\"box2 (layer = below)\", id=\"box2\")\n\n\nif __name__ == \"__main__\":\n    app = LayersExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n    layers: below above;\n}\n\nStatic {\n    width: 28;\n    height: 8;\n    color: auto;\n    content-align: center middle;\n}\n\n#box1 {\n    layer: above;\n    background: darkcyan;\n}\n\n#box2 {\n    layer: below;\n    background: orange;\n    offset: 12 6;\n}\n</code></pre>"},{"location":"styles/layers/#css","title":"CSS","text":"<pre><code>/* Bottom layer is called 'below', layer above it is called 'above' */\nlayers: below above;\n</code></pre>"},{"location":"styles/layers/#python","title":"Python","text":"<pre><code># Bottom layer is called 'below', layer above it is called 'above'\nwidget.style.layers = (\"below\", \"above\")\n</code></pre>"},{"location":"styles/layers/#see-also","title":"See also","text":"<ul> <li>The layout guide section on layers.</li> <li><code>layer</code> to set the layer a widget belongs to.</li> </ul>"},{"location":"styles/layout/","title":"Layout","text":"<p>The <code>layout</code> style defines how a widget arranges its children.</p>"},{"location":"styles/layout/#syntax","title":"Syntax","text":"<pre>\nlayout: grid | horizontal | vertical;\n</pre> <p>The <code>layout</code> style takes an option that defines how child widgets will be arranged, as per the table shown below.</p>"},{"location":"styles/layout/#values","title":"Values","text":"Value Description <code>grid</code> Child widgets will be arranged in a grid. <code>horizontal</code> Child widgets will be arranged along the horizontal axis, from left to right. <code>vertical</code> (default) Child widgets will be arranged along the vertical axis, from top to bottom. <p>See the layout guide for more information.</p>"},{"location":"styles/layout/#example","title":"Example","text":"<p>Note how the <code>layout</code> style affects the arrangement of widgets in the example below. To learn more about the grid layout, you can see the layout guide or the grid reference.</p> Outputlayout.pylayout.tcss <p> LayoutApp Layout Is Vertical LayoutIsHorizontal </p> <pre><code>from textual.app import App\nfrom textual.containers import Container\nfrom textual.widgets import Label\n\n\nclass LayoutApp(App):\n    CSS_PATH = \"layout.tcss\"\n\n    def compose(self):\n        yield Container(\n            Label(\"Layout\"),\n            Label(\"Is\"),\n            Label(\"Vertical\"),\n            id=\"vertical-layout\",\n        )\n        yield Container(\n            Label(\"Layout\"),\n            Label(\"Is\"),\n            Label(\"Horizontal\"),\n            id=\"horizontal-layout\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = LayoutApp()\n    app.run()\n</code></pre> <pre><code>#vertical-layout {\n    layout: vertical;\n    background: darkmagenta;\n    height: auto;\n}\n\n#horizontal-layout {\n    layout: horizontal;\n    background: darkcyan;\n    height: auto;\n}\n\nLabel {\n    margin: 1;\n    width: 12;\n    color: black;\n    background: yellowgreen;\n}\n</code></pre>"},{"location":"styles/layout/#css","title":"CSS","text":"<pre><code>layout: horizontal;\n</code></pre>"},{"location":"styles/layout/#python","title":"Python","text":"<pre><code>widget.styles.layout = \"horizontal\"\n</code></pre>"},{"location":"styles/layout/#see-also","title":"See also","text":"<ul> <li>Layout guide.</li> <li>Grid reference.</li> </ul>"},{"location":"styles/margin/","title":"Margin","text":"<p>The <code>margin</code> style specifies spacing around a widget.</p>"},{"location":"styles/margin/#syntax","title":"Syntax","text":"<pre>\nmargin: &lt;integer&gt;\n      # one value for all edges\n      | &lt;integer&gt; &lt;integer&gt;\n      # top/bot   left/right\n      | &lt;integer&gt; &lt;integer&gt; &lt;integer&gt; &lt;integer&gt;;\n      # top       right     bot       left\n\nmargin-top: &lt;integer&gt;;\nmargin-right: &lt;integer&gt;;\nmargin-bottom: &lt;integer&gt;;\nmargin-left: &lt;integer&gt;;\n</pre> <p>The <code>margin</code> specifies spacing around the four edges of the widget equal to the <code>&lt;integer&gt;</code> specified. The number of values given defines what edges get what margin:</p> <ul> <li>1 <code>&lt;integer&gt;</code> sets the same margin for the four edges of the widget;</li> <li>2 <code>&lt;integer&gt;</code> set margin for top/bottom and left/right edges, respectively.</li> <li>4 <code>&lt;integer&gt;</code> set margin for the top, right, bottom, and left edges, respectively.</li> </ul> <p>Tip</p> <p>To remember the order of the edges affected by the rule <code>margin</code> when it has 4 values, think of a clock. Its hand starts at the top and the goes clockwise: top, right, bottom, left.</p> <p>Alternatively, margin can be set for each edge individually through the styles <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code>, respectively.</p>"},{"location":"styles/margin/#examples","title":"Examples","text":""},{"location":"styles/margin/#basic-usage","title":"Basic usage","text":"<p>In the example below we add a large margin to a label, which makes it move away from the top-left corner of the screen.</p> Outputmargin.pymargin.tcss <p> MarginApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eI\u00a0must\u00a0not\u00a0fear.\u258a \u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u258a \u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u258a \u258eAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0\u258a \u258eits\u00a0path.\u258a \u258eWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u258a \u258eremain.\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass MarginApp(App):\n    CSS_PATH = \"margin.tcss\"\n\n    def compose(self):\n        yield Label(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = MarginApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: black;\n}\n\nLabel {\n    margin: 4 8;\n    background: blue 20%;\n    border: blue wide;\n    width: 100%;\n}\n</code></pre>"},{"location":"styles/margin/#all-margin-settings","title":"All margin settings","text":"<p>The next example shows a grid. In each cell, we have a placeholder that has its margins set in different ways.</p> Outputmargin_all.pymargin_all.tcss <p> MarginAllApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502margin\u2502\u2502margin:\u00a01\u00a0\u2502 \u2502no\u00a0margin\u2502\u2502margin:\u00a01\u2502\u2502:\u00a01\u00a05\u2502\u25021\u00a02\u00a06\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502margin-bottom:\u00a04\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502margin-right:\u00a0\u2502\u2502\u2502\u2502margin-left:\u00a03\u2502 \u2502\u2502\u25023\u2502\u2502\u2502\u2502\u2502 \u2502margin-top:\u00a04\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Container, Grid\nfrom textual.widgets import Placeholder\n\n\nclass MarginAllApp(App):\n    CSS_PATH = \"margin_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Container(Placeholder(\"no margin\", id=\"p1\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin: 1\", id=\"p2\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin: 1 5\", id=\"p3\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin: 1 1 2 6\", id=\"p4\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-top: 4\", id=\"p5\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-right: 3\", id=\"p6\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-bottom: 4\", id=\"p7\"), classes=\"bordered\"),\n            Container(Placeholder(\"margin-left: 3\", id=\"p8\"), classes=\"bordered\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MarginAllApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: $background;\n}\n\nGrid {\n    grid-size: 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    width: 100%;\n    height: 100%;\n}\n\nContainer {\n    width: 100%;\n    height: 100%;\n}\n\n.bordered {\n    border: white round;\n}\n\n#p1 {\n    /* default is no margin */\n}\n\n#p2 {\n    margin: 1;\n}\n\n#p3 {\n    margin: 1 5;\n}\n\n#p4 {\n    margin: 1 1 2 6;\n}\n\n#p5 {\n    margin-top: 4;\n}\n\n#p6 {\n    margin-right: 3;\n}\n\n#p7 {\n    margin-bottom: 4;\n}\n\n#p8 {\n    margin-left: 3;\n}\n</code></pre>"},{"location":"styles/margin/#css","title":"CSS","text":"<pre><code>/* Set margin of 1 around all edges */\nmargin: 1;\n/* Set margin of 2 on the top and bottom edges, and 4 on the left and right */\nmargin: 2 4;\n/* Set margin of 1 on the top, 2 on the right,\n                 3 on the bottom, and 4 on the left */\nmargin: 1 2 3 4;\n\nmargin-top: 1;\nmargin-right: 2;\nmargin-bottom: 3;\nmargin-left: 4;\n</code></pre>"},{"location":"styles/margin/#python","title":"Python","text":"<p>Python does not provide the properties <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code>. However, you can set the margin to a single integer, a tuple of 2 integers, or a tuple of 4 integers:</p> <pre><code># Set margin of 1 around all edges\nwidget.styles.margin = 1\n# Set margin of 2 on the top and bottom edges, and 4 on the left and right\nwidget.styles.margin = (2, 4)\n# Set margin of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left\nwidget.styles.margin = (1, 2, 3, 4)\n</code></pre>"},{"location":"styles/margin/#see-also","title":"See also","text":"<ul> <li><code>padding</code> to add spacing around the content of a widget.</li> </ul>"},{"location":"styles/max_height/","title":"Max-height","text":"<p>The <code>max-height</code> style sets a maximum height for a widget.</p>"},{"location":"styles/max_height/#syntax","title":"Syntax","text":"<pre>\nmax-height: &lt;scalar&gt;;\n</pre> <p>The <code>max-height</code> style accepts a <code>&lt;scalar&gt;</code> that defines an upper bound for the <code>height</code> of a widget. That is, the height of a widget is never allowed to exceed <code>max-height</code>.</p>"},{"location":"styles/max_height/#example","title":"Example","text":"<p>The example below shows some placeholders that were defined to span vertically from the top edge of the terminal to the bottom edge. Then, we set <code>max-height</code> individually on each placeholder.</p> Outputmax_height.pymax_height.tcss <p> MaxHeightApp max-height:\u00a010w max-height:\u00a010 max-height:\u00a050% max-height:\u00a0999 </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal\nfrom textual.widgets import Placeholder\n\n\nclass MaxHeightApp(App):\n    CSS_PATH = \"max_height.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            Placeholder(\"max-height: 10w\", id=\"p1\"),\n            Placeholder(\"max-height: 999\", id=\"p2\"),\n            Placeholder(\"max-height: 50%\", id=\"p3\"),\n            Placeholder(\"max-height: 10\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MaxHeightApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    height: 100%;\n    width: 100%;\n}\n\nPlaceholder {\n    height: 100%;\n    width: 1fr;\n}\n\n#p1 {\n    max-height: 10w;\n}\n\n#p2 {\n    max-height: 999;  /* (1)! */\n}\n\n#p3 {\n    max-height: 50%;\n}\n\n#p4 {\n    max-height: 10;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its height is less than the maximum height.</li> </ol>"},{"location":"styles/max_height/#css","title":"CSS","text":"<pre><code>/* Set the maximum height to 10 rows */\nmax-height: 10;\n\n/* Set the maximum height to 25% of the viewport height */\nmax-height: 25vh;\n</code></pre>"},{"location":"styles/max_height/#python","title":"Python","text":"<pre><code># Set the maximum height to 10 rows\nwidget.styles.max_height = 10\n\n# Set the maximum height to 25% of the viewport height\nwidget.styles.max_height = \"25vh\"\n</code></pre>"},{"location":"styles/max_height/#see-also","title":"See also","text":"<ul> <li><code>min-height</code> to set a lower bound on the height of a widget.</li> <li><code>height</code> to set the height of a widget.</li> </ul>"},{"location":"styles/max_width/","title":"Max-width","text":"<p>The <code>max-width</code> style sets a maximum width for a widget.</p>"},{"location":"styles/max_width/#syntax","title":"Syntax","text":"<pre>\nmax-width: &lt;scalar&gt;;\n</pre> <p>The <code>max-width</code> style accepts a <code>&lt;scalar&gt;</code> that defines an upper bound for the <code>width</code> of a widget. That is, the width of a widget is never allowed to exceed <code>max-width</code>.</p>"},{"location":"styles/max_width/#example","title":"Example","text":"<p>The example below shows some placeholders that were defined to span horizontally from the left edge of the terminal to the right edge. Then, we set <code>max-width</code> individually on each placeholder.</p> Outputmax_width.pymax_width.tcss <p> MaxWidthApp max-width:\u00a0 50h max-width:\u00a0999 max-width:\u00a050% max-width:\u00a030 </p> <pre><code>from textual.app import App\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass MaxWidthApp(App):\n    CSS_PATH = \"max_width.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Placeholder(\"max-width: 50h\", id=\"p1\"),\n            Placeholder(\"max-width: 999\", id=\"p2\"),\n            Placeholder(\"max-width: 50%\", id=\"p3\"),\n            Placeholder(\"max-width: 30\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MaxWidthApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    height: 100%;\n    width: 100%;\n}\n\nPlaceholder {\n    width: 100%;\n    height: 1fr;\n}\n\n#p1 {\n    max-width: 50h;\n}\n\n#p2 {\n    max-width: 999;  /* (1)! */\n}\n\n#p3 {\n    max-width: 50%;\n}\n\n#p4 {\n    max-width: 30;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its width is less than the maximum width.</li> </ol>"},{"location":"styles/max_width/#css","title":"CSS","text":"<pre><code>/* Set the maximum width to 10 rows */\nmax-width: 10;\n\n/* Set the maximum width to 25% of the viewport width */\nmax-width: 25vw;\n</code></pre>"},{"location":"styles/max_width/#python","title":"Python","text":"<pre><code># Set the maximum width to 10 rows\nwidget.styles.max_width = 10\n\n# Set the maximum width to 25% of the viewport width\nwidget.styles.max_width = \"25vw\"\n</code></pre>"},{"location":"styles/max_width/#see-also","title":"See also","text":"<ul> <li><code>min-width</code> to set a lower bound on the width of a widget.</li> <li><code>width</code> to set the width of a widget.</li> </ul>"},{"location":"styles/min_height/","title":"Min-height","text":"<p>The <code>min-height</code> style sets a minimum height for a widget.</p>"},{"location":"styles/min_height/#syntax","title":"Syntax","text":"<pre>\nmin-height: &lt;scalar&gt;;\n</pre> <p>The <code>min-height</code> style accepts a <code>&lt;scalar&gt;</code> that defines a lower bound for the <code>height</code> of a widget. That is, the height of a widget is never allowed to be under <code>min-height</code>.</p>"},{"location":"styles/min_height/#example","title":"Example","text":"<p>The example below shows some placeholders with their height set to <code>50%</code>. Then, we set <code>min-height</code> individually on each placeholder.</p> Outputmin_height.pymin_height.tcss <p> MinHeightApp min-height:\u00a025% min-height:\u00a075% min-height:\u00a030 min-height:\u00a040w \u2583\u2583 </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal\nfrom textual.widgets import Placeholder\n\n\nclass MinHeightApp(App):\n    CSS_PATH = \"min_height.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            Placeholder(\"min-height: 25%\", id=\"p1\"),\n            Placeholder(\"min-height: 75%\", id=\"p2\"),\n            Placeholder(\"min-height: 30\", id=\"p3\"),\n            Placeholder(\"min-height: 40w\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MinHeightApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n}\n\nPlaceholder {\n    width: 1fr;\n    height: 50%;\n}\n\n#p1 {\n    min-height: 25%;  /* (1)! */\n}\n\n#p2 {\n    min-height: 75%;\n}\n\n#p3 {\n    min-height: 30;\n}\n\n#p4 {\n    min-height: 40w;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its height is larger than the minimum height.</li> </ol>"},{"location":"styles/min_height/#css","title":"CSS","text":"<pre><code>/* Set the minimum height to 10 rows */\nmin-height: 10;\n\n/* Set the minimum height to 25% of the viewport height */\nmin-height: 25vh;\n</code></pre>"},{"location":"styles/min_height/#python","title":"Python","text":"<pre><code># Set the minimum height to 10 rows\nwidget.styles.min_height = 10\n\n# Set the minimum height to 25% of the viewport height\nwidget.styles.min_height = \"25vh\"\n</code></pre>"},{"location":"styles/min_height/#see-also","title":"See also","text":"<ul> <li><code>max-height</code> to set an upper bound on the height of a widget.</li> <li><code>height</code> to set the height of a widget.</li> </ul>"},{"location":"styles/min_width/","title":"Min-width","text":"<p>The <code>min-width</code> style sets a minimum width for a widget.</p>"},{"location":"styles/min_width/#syntax","title":"Syntax","text":"<pre>\nmin-width: &lt;scalar&gt;;\n</pre> <p>The <code>min-width</code> style accepts a <code>&lt;scalar&gt;</code> that defines a lower bound for the <code>width</code> of a widget. That is, the width of a widget is never allowed to be under <code>min-width</code>.</p>"},{"location":"styles/min_width/#example","title":"Example","text":"<p>The example below shows some placeholders with their width set to <code>50%</code>. Then, we set <code>min-width</code> individually on each placeholder.</p> Outputmin_width.pymin_width.tcss <p> MinWidthApp min-width:\u00a025% min-width:\u00a075% min-width:\u00a0100 min-width:\u00a0400h </p> <pre><code>from textual.app import App\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass MinWidthApp(App):\n    CSS_PATH = \"min_width.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Placeholder(\"min-width: 25%\", id=\"p1\"),\n            Placeholder(\"min-width: 75%\", id=\"p2\"),\n            Placeholder(\"min-width: 100\", id=\"p3\"),\n            Placeholder(\"min-width: 400h\", id=\"p4\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MinWidthApp()\n    app.run()\n</code></pre> <pre><code>VerticalScroll {\n    height: 100%;\n    width: 100%;\n    overflow-x: auto;\n}\n\nPlaceholder {\n    height: 1fr;\n    width: 50%;\n}\n\n#p1 {\n    min-width: 25%;\n    /* (1)! */\n}\n\n#p2 {\n    min-width: 75%;\n}\n\n#p3 {\n    min-width: 100;\n}\n\n#p4 {\n    min-width: 400h;\n}\n</code></pre> <ol> <li>This won't affect the placeholder because its width is larger than the minimum width.</li> </ol>"},{"location":"styles/min_width/#css","title":"CSS","text":"<pre><code>/* Set the minimum width to 10 rows */\nmin-width: 10;\n\n/* Set the minimum width to 25% of the viewport width */\nmin-width: 25vw;\n</code></pre>"},{"location":"styles/min_width/#python","title":"Python","text":"<pre><code># Set the minimum width to 10 rows\nwidget.styles.min_width = 10\n\n# Set the minimum width to 25% of the viewport width\nwidget.styles.min_width = \"25vw\"\n</code></pre>"},{"location":"styles/min_width/#see-also","title":"See also","text":"<ul> <li><code>max-width</code> to set an upper bound on the width of a widget.</li> <li><code>width</code> to set the width of a widget.</li> </ul>"},{"location":"styles/offset/","title":"Offset","text":"<p>The <code>offset</code> style defines an offset for the position of the widget.</p>"},{"location":"styles/offset/#syntax","title":"Syntax","text":"<pre>\noffset: &lt;scalar&gt; &lt;scalar&gt;;\n\noffset-x: &lt;scalar&gt;;\noffset-y: &lt;scalar&gt;\n</pre> <p>The two <code>&lt;scalar&gt;</code> in the <code>offset</code> define, respectively, the offsets in the horizontal and vertical axes for the widget.</p> <p>To specify an offset along a single axis, you can use <code>offset-x</code> and <code>offset-y</code>.</p>"},{"location":"styles/offset/#example","title":"Example","text":"<p>In this example, we have 3 widgets with differing offsets.</p> Outputoffset.pyoffset.tcss <p> OffsetApp \u258c\u2590 \u258cChani\u00a0(offset\u00a00\u00a0\u2590 \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c\u258c-3)\u2590 \u258c\u2590\u258c\u2590 \u258c\u2590\u258c\u2590 \u258c\u2590\u258c\u2590 \u258cPaul\u00a0(offset\u00a08\u00a02)\u2590\u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u258c\u2590 \u258c\u2590 \u258c\u2590 \u258c\u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u258c\u2590 \u258c\u2590 \u258c\u2590 \u258cDuncan\u00a0(offset\u00a04\u00a0\u2590 \u258c10)\u2590 \u258c\u2590 \u258c\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass OffsetApp(App):\n    CSS_PATH = \"offset.tcss\"\n\n    def compose(self):\n        yield Label(\"Paul (offset 8 2)\", classes=\"paul\")\n        yield Label(\"Duncan (offset 4 10)\", classes=\"duncan\")\n        yield Label(\"Chani (offset 0 -3)\", classes=\"chani\")\n\n\nif __name__ == \"__main__\":\n    app = OffsetApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: black;\n    layout: horizontal;\n}\nLabel {\n    width: 20;\n    height: 10;\n    content-align: center middle;\n}\n\n.paul {\n    offset: 8 2;\n    background: red 20%;\n    border: outer red;\n    color: red;\n}\n\n.duncan {\n    offset: 4 10;\n    background: green 20%;\n    border: outer green;\n    color: green;\n}\n\n.chani {\n    offset: 0 -3;\n    background: blue 20%;\n    border: outer blue;\n    color: blue;\n}\n</code></pre>"},{"location":"styles/offset/#css","title":"CSS","text":"<pre><code>/* Move the widget 8 cells in the x direction and 2 in the y direction */\noffset: 8 2;\n\n/* Move the widget 4 cells in the x direction\noffset-x: 4;\n/* Move the widget -3 cells in the y direction\noffset-y: -3;\n</code></pre>"},{"location":"styles/offset/#python","title":"Python","text":"<p>You cannot change programmatically the offset for a single axis. You have to set the two axes at the same time.</p> <pre><code># Move the widget 2 cells in the x direction, and 4 in the y direction.\nwidget.styles.offset = (2, 4)\n</code></pre>"},{"location":"styles/offset/#see-also","title":"See also","text":"<ul> <li>The layout guide section on offsets.</li> </ul>"},{"location":"styles/opacity/","title":"Opacity","text":"<p>The <code>opacity</code> style sets the opacity of a widget.</p> <p>While terminals are not capable of true opacity, Textual can create an approximation by blending widgets with their background color.</p>"},{"location":"styles/opacity/#syntax","title":"Syntax","text":"<pre>\nopacity: &lt;number&gt; | &lt;percentage&gt;;\n</pre> <p>The opacity of a widget can be set as a <code>&lt;number&gt;</code> or a <code>&lt;percentage&gt;</code>. If given as a number, then <code>opacity</code> should be a value between 0 and 1, where 0 is the background color and 1 is fully opaque. If given as a percentage, 0% is the background color and 100% is fully opaque.</p> <p>Typically, if you set this value it would be somewhere between the two extremes. For instance, setting the opacity of a widget to <code>70%</code> will make it appear dimmer than surrounding widgets, which could be used to display a disabled state.</p>"},{"location":"styles/opacity/#example","title":"Example","text":"<p>This example shows, from top to bottom, increasing opacity values for a label with a border and some text. When the opacity is zero, all we see is the (black) background.</p> Outputopacity.pyopacity.tcss <p> OpacityApp \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258copacity:\u00a00%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a025%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a050%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a075%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c \u258c\u2590 \u258copacity:\u00a0100%\u2590 \u258c\u2590 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass OpacityApp(App):\n    CSS_PATH = \"opacity.tcss\"\n\n    def compose(self):\n        yield Label(\"opacity: 0%\", id=\"zero-opacity\")\n        yield Label(\"opacity: 25%\", id=\"quarter-opacity\")\n        yield Label(\"opacity: 50%\", id=\"half-opacity\")\n        yield Label(\"opacity: 75%\", id=\"three-quarter-opacity\")\n        yield Label(\"opacity: 100%\", id=\"full-opacity\")\n\n\nif __name__ == \"__main__\":\n    app = OpacityApp()\n    app.run()\n</code></pre> <pre><code>#zero-opacity {\n    opacity: 0%;\n}\n\n#quarter-opacity {\n    opacity: 25%;\n}\n\n#half-opacity {\n    opacity: 50%;\n}\n\n#three-quarter-opacity {\n    opacity: 75%;\n}\n\n#full-opacity {\n    opacity: 100%;\n}\n\nScreen {\n    background: black;\n}\n\nLabel {\n    width: 100%;\n    height: 1fr;\n    border: outer dodgerblue;\n    background: lightseagreen;\n    content-align: center middle;\n    text-style: bold;\n}\n</code></pre>"},{"location":"styles/opacity/#css","title":"CSS","text":"<pre><code>/* Fade the widget to 50% against its parent's background */\nopacity: 50%;\n</code></pre>"},{"location":"styles/opacity/#python","title":"Python","text":"<pre><code># Fade the widget to 50% against its parent's background\nwidget.styles.opacity = \"50%\"\n</code></pre>"},{"location":"styles/opacity/#see-also","title":"See also","text":"<ul> <li><code>text-opacity</code> to blend the color of a widget's content with its background color.</li> </ul>"},{"location":"styles/outline/","title":"Outline","text":"<p>The <code>outline</code> style enables the drawing of a box around the content of a widget, which means the outline is drawn over the content area.</p> <p>Note</p> <p><code>border</code> and <code>outline</code> cannot coexist in the same edge of a widget.</p>"},{"location":"styles/outline/#syntax","title":"Syntax","text":"<pre>\noutline: [&lt;border&gt;] [&lt;color&gt;];\n\noutline-top: [&lt;border&gt;] [&lt;color&gt;];\noutline-right: [&lt;border&gt;] [&lt;color&gt;];\noutline-bottom: [&lt;border&gt;] [&lt;color&gt;];\noutline-left: [&lt;border&gt;] [&lt;color&gt;];\n</pre> <p>The style <code>outline</code> accepts an optional <code>&lt;border&gt;</code> that sets the visual style of the widget outline and an optional <code>&lt;color&gt;</code> to set the color of the outline.</p> <p>Unlike the style <code>border</code>, the frame of the outline is drawn over the content area of the widget. This rule can be useful to add temporary emphasis on the content of a widget, if you want to draw the user's attention to it.</p>"},{"location":"styles/outline/#border-command","title":"Border command","text":"<p>The <code>textual</code> CLI has a subcommand which will let you explore the various border types interactively, when applied to the CSS rule <code>border</code>:</p> <pre><code>textual borders\n</code></pre>"},{"location":"styles/outline/#examples","title":"Examples","text":""},{"location":"styles/outline/#basic-usage","title":"Basic usage","text":"<p>This example shows a widget with an outline. Note how the outline occludes the text area.</p> Outputoutline.pyoutline.tcss <p> OutlineApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u258a \u258e\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258e\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u258a \u258end\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u258a \u258eath.\u258a \u258ehere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u258a \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineApp(App):\n    CSS_PATH = \"outline.tcss\"\n\n    def compose(self):\n        yield Label(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = OutlineApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: black;\n}\n\nLabel {\n    margin: 4 8;\n    background: green 20%;\n    outline: wide green;\n    width: 100%;\n}\n</code></pre>"},{"location":"styles/outline/#all-outline-types","title":"All outline types","text":"<p>The next example shows a grid with all the available outline types.</p> Outputoutline_all.pyoutline_all.tcss <p> AllOutlinesApp +------------------+\u250f\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u2513 |ascii|blank\u254fdashed\u254f +------------------+\u2517\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u251b \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2551double\u2551\u2503heavy\u2503hidden/none \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2597\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2596 hkey\u2590inner\u258cnone \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u259d\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2598 \u259b\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u259c\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u258couter\u2590\u2502round\u2502\u2502solid\u2502 \u2599\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u2584\u259f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258atall\u258e\u258fvkey\u2595\u258ewide\u258a \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258f\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2595\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass AllOutlinesApp(App):\n    CSS_PATH = \"outline_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"ascii\", id=\"ascii\"),\n            Label(\"blank\", id=\"blank\"),\n            Label(\"dashed\", id=\"dashed\"),\n            Label(\"double\", id=\"double\"),\n            Label(\"heavy\", id=\"heavy\"),\n            Label(\"hidden/none\", id=\"hidden\"),\n            Label(\"hkey\", id=\"hkey\"),\n            Label(\"inner\", id=\"inner\"),\n            Label(\"none\", id=\"none\"),\n            Label(\"outer\", id=\"outer\"),\n            Label(\"round\", id=\"round\"),\n            Label(\"solid\", id=\"solid\"),\n            Label(\"tall\", id=\"tall\"),\n            Label(\"vkey\", id=\"vkey\"),\n            Label(\"wide\", id=\"wide\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = AllOutlinesApp()\n    app.run()\n</code></pre> <pre><code>#ascii {\n    outline: ascii $accent;\n}\n\n#blank {\n    outline: blank $accent;\n}\n\n#dashed {\n    outline: dashed $accent;\n}\n\n#double {\n    outline: double $accent;\n}\n\n#heavy {\n    outline: heavy $accent;\n}\n\n#hidden {\n    outline: hidden $accent;\n}\n\n#hkey {\n    outline: hkey $accent;\n}\n\n#inner {\n    outline: inner $accent;\n}\n\n#none {\n    outline: none $accent;\n}\n\n#outer {\n    outline: outer $accent;\n}\n\n#round {\n    outline: round $accent;\n}\n\n#solid {\n    outline: solid $accent;\n}\n\n#tall {\n    outline: tall $accent;\n}\n\n#vkey {\n    outline: vkey $accent;\n}\n\n#wide {\n    outline: wide $accent;\n}\n\nGrid {\n    grid-size: 3 5;\n    align: center middle;\n    grid-gutter: 1 2;\n}\n\nLabel {\n    width: 20;\n    height: 3;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/outline/#borders-and-outlines","title":"Borders and outlines","text":"<p>The next example makes the difference between <code>border</code> and <code>outline</code> clearer by having three labels side-by-side. They contain the same text, have the same width and height, and are styled exactly the same up to their <code>border</code> and <code>outline</code> styles.</p> <p>This example also shows that a widget cannot contain both a <code>border</code> and an <code>outline</code>:</p> Outputoutline_vs_border.pyoutline_vs_border.tcss <p> OutlineBorderApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502ear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502ear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502nd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path\u2502 \u2502here\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503I\u00a0must\u00a0not\u00a0fear.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0mind-killer.\u2503 \u2503Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2503 \u2503I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2503 \u2503I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2503 \u2503And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502I\u00a0must\u00a0not\u00a0fear.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0mind-killer.\u2502 \u2502Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2502 \u2502I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2502 \u2502I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u2502 \u2502And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OutlineBorderApp(App):\n    CSS_PATH = \"outline_vs_border.tcss\"\n\n    def compose(self):\n        yield Label(TEXT, classes=\"outline\")\n        yield Label(TEXT, classes=\"border\")\n        yield Label(TEXT, classes=\"outline border\")\n\n\nif __name__ == \"__main__\":\n    app = OutlineBorderApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    height: 8;\n}\n\n.outline {\n    outline: $error round;\n}\n\n.border {\n    border: $success heavy;\n}\n</code></pre>"},{"location":"styles/outline/#css","title":"CSS","text":"<pre><code>/* Set a heavy white outline */\noutline:heavy white;\n\n/* set a red outline on the left */\noutline-left:outer red;\n</code></pre>"},{"location":"styles/outline/#python","title":"Python","text":"<pre><code># Set a heavy white outline\nwidget.outline = (\"heavy\", \"white\")\n\n# Set a red outline on the left\nwidget.outline_left = (\"outer\", \"red\")\n</code></pre>"},{"location":"styles/outline/#see-also","title":"See also","text":"<ul> <li><code>border</code> to add a border around a widget.</li> </ul>"},{"location":"styles/overflow/","title":"Overflow","text":"<p>The <code>overflow</code> style specifies if and when scrollbars should be displayed.</p>"},{"location":"styles/overflow/#syntax","title":"Syntax","text":"<pre>\noverflow: &lt;overflow&gt; &lt;overflow&gt;;\n\noverflow-x: &lt;overflow&gt;;\noverflow-y: &lt;overflow&gt;;\n</pre> <p>The style <code>overflow</code> accepts two values that determine when to display scrollbars in a container widget. The two values set the overflow for the horizontal and vertical axes, respectively.</p> <p>Overflow may also be set individually for each axis:</p> <ul> <li><code>overflow-x</code> sets the overflow for the horizontal axis; and</li> <li><code>overflow-y</code> sets the overflow for the vertical axis.</li> </ul>"},{"location":"styles/overflow/#defaults","title":"Defaults","text":"<p>The default setting for containers is <code>overflow: auto auto</code>.</p> <p>Warning</p> <p>Some built-in containers like <code>Horizontal</code> and <code>VerticalScroll</code> override these defaults.</p>"},{"location":"styles/overflow/#example","title":"Example","text":"<p>Here we split the screen into left and right sections, each with three vertically scrolling widgets that do not fit into the height of the terminal.</p> <p>The left side has <code>overflow-y: auto</code> (the default) and will automatically show a scrollbar. The right side has <code>overflow-y: hidden</code> which will prevent a scrollbar from being shown.</p> Outputoverflow.pyoverflow.tcss <p> OverflowApp \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u258eI\u00a0must\u00a0not\u00a0fear.\u258a\u258eI\u00a0must\u00a0not\u00a0fear.\u258a \u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a\u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a\u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a \u258ebrings\u00a0total\u00a0obliteration.\u258a\u258ebrings\u00a0total\u00a0obliteration.\u258a \u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a\u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u258a\u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0\u258a \u258eand\u00a0through\u00a0me.\u258a\u258eand\u00a0through\u00a0me.\u258a \u258eAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0\u258a\u258eAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0\u258a \u258ewill\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0\u258a\u258eturn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0\u258a \u258eits\u00a0path.\u258a\u2581\u2581\u258epath.\u258a \u258eWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0\u258a\u258eWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u258a \u258ewill\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0\u258a\u258ebe\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u258a \u258eremain.\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258eI\u00a0must\u00a0not\u00a0fear.\u258a \u258eI\u00a0must\u00a0not\u00a0fear.\u258a\u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a \u258eFear\u00a0is\u00a0the\u00a0mind-killer.\u258a\u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a \u258eFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0\u258a\u258ebrings\u00a0total\u00a0obliteration.\u258a \u258ebrings\u00a0total\u00a0obliteration.\u258a\u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a \u258eI\u00a0will\u00a0face\u00a0my\u00a0fear.\u258a\u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0\u258a \u258eI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u258a\u258eand\u00a0through\u00a0me.\u258a </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Static\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass OverflowApp(App):\n    CSS_PATH = \"overflow.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            VerticalScroll(Static(TEXT), Static(TEXT), Static(TEXT), id=\"left\"),\n            VerticalScroll(Static(TEXT), Static(TEXT), Static(TEXT), id=\"right\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = OverflowApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: $background;\n    color: black;\n}\n\nVerticalScroll {\n    width: 1fr;\n}\n\nStatic {\n    margin: 1 2;\n    background: green 80%;\n    border: green wide;\n    color: white 90%;\n    height: auto;\n}\n\n#right {\n    overflow-y: hidden;\n}\n</code></pre>"},{"location":"styles/overflow/#css","title":"CSS","text":"<pre><code>/* Automatic scrollbars on both axes (the default) */\noverflow: auto auto;\n\n/* Hide the vertical scrollbar */\noverflow-y: hidden;\n\n/* Always show the horizontal scrollbar */\noverflow-x: scroll;\n</code></pre>"},{"location":"styles/overflow/#python","title":"Python","text":"<p>Overflow cannot be programmatically set for both axes at the same time.</p> <pre><code># Hide the vertical scrollbar\nwidget.styles.overflow_y = \"hidden\"\n\n# Always show the horizontal scrollbar\nwidget.styles.overflow_x = \"scroll\"\n</code></pre>"},{"location":"styles/padding/","title":"Padding","text":"<p>The <code>padding</code> style specifies spacing around the content of a widget.</p>"},{"location":"styles/padding/#syntax","title":"Syntax","text":"<pre>\npadding: &lt;integer&gt; # one value for all edges\n       | &lt;integer&gt; &lt;integer&gt;\n       # top/bot   left/right\n       | &lt;integer&gt; &lt;integer&gt; &lt;integer&gt; &lt;integer&gt;;\n       # top       right     bot       left\n\npadding-top: &lt;integer&gt;;\npadding-right: &lt;integer&gt;;\npadding-bottom: &lt;integer&gt;;\npadding-left: &lt;integer&gt;;\n</pre> <p>The <code>padding</code> specifies spacing around the content of a widget, thus this spacing is added inside the widget. The values of the <code>&lt;integer&gt;</code> determine how much spacing is added and the number of values define what edges get what padding:</p> <ul> <li>1 <code>&lt;integer&gt;</code> sets the same padding for the four edges of the widget;</li> <li>2 <code>&lt;integer&gt;</code> set padding for top/bottom and left/right edges, respectively.</li> <li>4 <code>&lt;integer&gt;</code> set padding for the top, right, bottom, and left edges, respectively.</li> </ul> <p>Tip</p> <p>To remember the order of the edges affected by the rule <code>padding</code> when it has 4 values, think of a clock. Its hand starts at the top and then goes clockwise: top, right, bottom, left.</p> <p>Alternatively, padding can be set for each edge individually through the rules <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>, respectively.</p>"},{"location":"styles/padding/#example","title":"Example","text":""},{"location":"styles/padding/#basic-usage","title":"Basic usage","text":"<p>This example adds padding around some text.</p> Outputpadding.pypadding.tcss <p> PaddingApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0 path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0 remain. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass PaddingApp(App):\n    CSS_PATH = \"padding.tcss\"\n\n    def compose(self):\n        yield Label(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = PaddingApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: blue;\n}\n\nLabel {\n    padding: 4 8;\n    background: blue 20%;\n    width: 100%;\n}\n</code></pre>"},{"location":"styles/padding/#all-padding-settings","title":"All padding settings","text":"<p>The next example shows a grid. In each cell, we have a placeholder that has its padding set in different ways. The effect of each padding setting is noticeable in the colored background around the text of each placeholder.</p> Outputpadding_all.pypadding_all.tcss <p> PaddingAllApp no\u00a0padding padding:\u00a01padding:padding:\u00a01\u00a01 1\u00a052\u00a06 padding-right:\u00a03padding-bottom:\u00a04padding-left:\u00a03 padding-top:\u00a04 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass PaddingAllApp(App):\n    CSS_PATH = \"padding_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Placeholder(\"no padding\", id=\"p1\"),\n            Placeholder(\"padding: 1\", id=\"p2\"),\n            Placeholder(\"padding: 1 5\", id=\"p3\"),\n            Placeholder(\"padding: 1 1 2 6\", id=\"p4\"),\n            Placeholder(\"padding-top: 4\", id=\"p5\"),\n            Placeholder(\"padding-right: 3\", id=\"p6\"),\n            Placeholder(\"padding-bottom: 4\", id=\"p7\"),\n            Placeholder(\"padding-left: 3\", id=\"p8\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = PaddingAllApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: $background;\n}\n\nGrid {\n    grid-size: 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    width: auto;\n    height: auto;\n}\n\n#p1 {\n    /* default is no padding */\n}\n\n#p2 {\n    padding: 1;\n}\n\n#p3 {\n    padding: 1 5;\n}\n\n#p4 {\n    padding: 1 1 2 6;\n}\n\n#p5 {\n    padding-top: 4;\n}\n\n#p6 {\n    padding-right: 3;\n}\n\n#p7 {\n    padding-bottom: 4;\n}\n\n#p8 {\n    padding-left: 3;\n}\n</code></pre>"},{"location":"styles/padding/#css","title":"CSS","text":"<pre><code>/* Set padding of 1 around all edges */\npadding: 1;\n/* Set padding of 2 on the top and bottom edges, and 4 on the left and right */\npadding: 2 4;\n/* Set padding of 1 on the top, 2 on the right,\n                 3 on the bottom, and 4 on the left */\npadding: 1 2 3 4;\n\npadding-top: 1;\npadding-right: 2;\npadding-bottom: 3;\npadding-left: 4;\n</code></pre>"},{"location":"styles/padding/#python","title":"Python","text":"<p>In Python, you cannot set any of the individual <code>padding</code> styles <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>.</p> <p>However, you can set padding to a single integer, a tuple of 2 integers, or a tuple of 4 integers:</p> <pre><code># Set padding of 1 around all edges\nwidget.styles.padding = 1\n# Set padding of 2 on the top and bottom edges, and 4 on the left and right\nwidget.styles.padding = (2, 4)\n# Set padding of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left\nwidget.styles.padding = (1, 2, 3, 4)\n</code></pre>"},{"location":"styles/padding/#see-also","title":"See also","text":"<ul> <li><code>box-sizing</code> to specify how to account for padding in a widget's dimensions.</li> <li><code>margin</code> to add spacing around a widget.</li> </ul>"},{"location":"styles/scrollbar_gutter/","title":"Scrollbar-gutter","text":"<p>The <code>scrollbar-gutter</code> style allows reserving space for a vertical scrollbar.</p>"},{"location":"styles/scrollbar_gutter/#syntax","title":"Syntax","text":"<pre>\nscrollbar-gutter: auto | stable;\n</pre>"},{"location":"styles/scrollbar_gutter/#values","title":"Values","text":"Value Description <code>auto</code> (default) No space is reserved for a vertical scrollbar. <code>stable</code> Space is reserved for a vertical scrollbar. <p>Setting the value to <code>stable</code> prevents unwanted layout changes when the scrollbar becomes visible, whereas the default value of <code>auto</code> means that the layout of your application is recomputed when a vertical scrollbar becomes needed.</p>"},{"location":"styles/scrollbar_gutter/#example","title":"Example","text":"<p>In the example below, notice the gap reserved for the scrollbar on the right side of the terminal window.</p> Outputscrollbar_gutter.pyscrollbar_gutter.tcss <p> ScrollbarGutterApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass ScrollbarGutterApp(App):\n    CSS_PATH = \"scrollbar_gutter.tcss\"\n\n    def compose(self):\n        yield Static(TEXT, id=\"text-box\")\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarGutterApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-gutter: stable;\n}\n\n#text-box {\n    color: floralwhite;\n    background: darkmagenta;\n}\n</code></pre>"},{"location":"styles/scrollbar_gutter/#css","title":"CSS","text":"<pre><code>scrollbar-gutter: auto;    /* Don't reserve space for a vertical scrollbar. */\nscrollbar-gutter: stable;  /* Reserve space for a vertical scrollbar. */\n</code></pre>"},{"location":"styles/scrollbar_gutter/#python","title":"Python","text":"<pre><code>self.styles.scrollbar_gutter = \"auto\"    # Don't reserve space for a vertical scrollbar.\nself.styles.scrollbar_gutter = \"stable\"  # Reserve space for a vertical scrollbar.\n</code></pre>"},{"location":"styles/scrollbar_size/","title":"Scrollbar-size","text":"<p>The <code>scrollbar-size</code> style defines the width of the scrollbars.</p>"},{"location":"styles/scrollbar_size/#syntax","title":"Syntax","text":"<pre>\nscrollbar-size: &lt;integer&gt; &lt;integer&gt;;\n              # horizontal vertical\n\nscrollbar-size-horizontal: &lt;integer&gt;;\nscrollbar-size-vertical: &lt;integer&gt;;\n</pre> <p>The <code>scrollbar-size</code> style takes two <code>&lt;integer&gt;</code> to set the horizontal and vertical scrollbar sizes, respectively. This customisable size is the width of the scrollbar, given that its length will always be 100% of the container.</p> <p>The scrollbar widths may also be set individually with <code>scrollbar-size-horizontal</code> and <code>scrollbar-size-vertical</code>.</p>"},{"location":"styles/scrollbar_size/#examples","title":"Examples","text":""},{"location":"styles/scrollbar_size/#basic-usage","title":"Basic usage","text":"<p>In this example we modify the size of the widget's scrollbar to be much larger than usual.</p> Outputscrollbar_size.pyscrollbar_size.tcss <p> ScrollbarApp I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u2581\u2581\u2581\u2581 I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain. I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear. </p> <pre><code>from textual.app import App\nfrom textual.containers import ScrollableContainer\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarApp(App):\n    CSS_PATH = \"scrollbar_size.tcss\"\n\n    def compose(self):\n        yield ScrollableContainer(Label(TEXT * 5), classes=\"panel\")\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: white;\n    color: blue 80%;\n    layout: horizontal;\n}\n\nLabel {\n    padding: 1 2;\n    width: 200;\n}\n\n.panel {\n    scrollbar-size: 10 4;\n    padding: 1 2;\n}\n</code></pre>"},{"location":"styles/scrollbar_size/#scrollbar-sizes-comparison","title":"Scrollbar sizes comparison","text":"<p>In the next example we show three containers with differently sized scrollbars.</p> <p>Tip</p> <p>If you want to hide the scrollbar but still allow the container to scroll using the mousewheel or keyboard, you can set the scrollbar size to <code>0</code>.</p> Outputscrollbar_size2.pyscrollbar_size2.tcss <p> ScrollbarApp I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0oI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pastAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0tWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0thWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0t I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2587I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.\u2587\u2587 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0oI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0pastAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0tWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0thWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0t I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.\u2582I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0oI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 \u258fAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u258f \u258fWhere\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0th\u258f \u258fI\u00a0must\u00a0not\u00a0fear.\u258f \u258fFear\u00a0is\u00a0the\u00a0mind-killer.\u258f \u258f\u2589\u258f </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, ScrollableContainer\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarApp(App):\n    CSS_PATH = \"scrollbar_size2.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            ScrollableContainer(Label(TEXT * 5), id=\"v1\"),\n            ScrollableContainer(Label(TEXT * 5), id=\"v2\"),\n            ScrollableContainer(Label(TEXT * 5), id=\"v3\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarApp()\n    app.run()\n</code></pre> <pre><code>ScrollableContainer {\n    width: 1fr;\n}\n\n#v1 {\n    scrollbar-size: 5 1;\n    background: red 20%;\n}\n\n#v2 {\n    scrollbar-size-vertical: 1;\n    background: green 20%;\n}\n\n#v3 {\n    scrollbar-size-horizontal: 5;\n    background: blue 20%;\n}\n</code></pre>"},{"location":"styles/scrollbar_size/#css","title":"CSS","text":"<pre><code>/* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */\nscrollbar-size: 10 4;\n\n/* Set horizontal scrollbar to 10 */\nscrollbar-size-horizontal: 10;\n\n/* Set vertical scrollbar to 4 */\nscrollbar-size-vertical: 4;\n</code></pre>"},{"location":"styles/scrollbar_size/#python","title":"Python","text":"<p>The style <code>scrollbar-size</code> has no Python equivalent. The scrollbar sizes must be set independently:</p> <pre><code># Set horizontal scrollbar to 10:\nwidget.styles.scrollbar_size_horizontal = 10\n# Set vertical scrollbar to 4:\nwidget.styles.scrollbar_size_vertical = 4\n</code></pre>"},{"location":"styles/text_align/","title":"Text-align","text":"<p>The <code>text-align</code> style sets the text alignment in a widget.</p>"},{"location":"styles/text_align/#syntax","title":"Syntax","text":"<pre>\ntext-align: &lt;text-align&gt;;\n</pre> <p>The <code>text-align</code> style accepts a value of the type <code>&lt;text-align&gt;</code> that defines how text is aligned inside the widget.</p>"},{"location":"styles/text_align/#defaults","title":"Defaults","text":"<p>The default value is <code>start</code>.</p>"},{"location":"styles/text_align/#example","title":"Example","text":"<p>This example shows, from top to bottom: <code>left</code>, <code>center</code>, <code>right</code>, and <code>justify</code> text alignments.</p> Outputtext_align.pytext_align.tcss <p> TextAlign Left\u00a0alignedCenter\u00a0aligned I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0 mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0 obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0Iobliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0\u00a0\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0 through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Right\u00a0alignedJustified \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0theI\u00a0\u00a0must\u00a0\u00a0not\u00a0\u00a0fear.\u00a0\u00a0Fear\u00a0\u00a0\u00a0is\u00a0\u00a0\u00a0the \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0themind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0Fear\u00a0\u00a0\u00a0\u00a0\u00a0is\u00a0\u00a0\u00a0\u00a0\u00a0the \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0little-death\u00a0that\u00a0brings\u00a0totallittle-death\u00a0\u00a0\u00a0that\u00a0\u00a0\u00a0brings\u00a0\u00a0\u00a0total obliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0Iobliteration.\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0I \u00a0\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0andwill\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0\u00a0me\u00a0\u00a0and \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0through\u00a0me.through\u00a0me. </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\nTEXT = (\n    \"I must not fear. Fear is the mind-killer. Fear is the little-death that \"\n    \"brings total obliteration. I will face my fear. I will permit it to pass over \"\n    \"me and through me.\"\n)\n\n\nclass TextAlign(App):\n    CSS_PATH = \"text_align.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"[b]Left aligned[/]\\n\" + TEXT, id=\"one\"),\n            Label(\"[b]Center aligned[/]\\n\" + TEXT, id=\"two\"),\n            Label(\"[b]Right aligned[/]\\n\" + TEXT, id=\"three\"),\n            Label(\"[b]Justified[/]\\n\" + TEXT, id=\"four\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = TextAlign()\n    app.run()\n</code></pre> <pre><code>#one {\n    text-align: left;\n    background: lightblue;\n}\n\n#two {\n    text-align: center;\n    background: indianred;\n}\n\n#three {\n    text-align: right;\n    background: palegreen;\n}\n\n#four {\n    text-align: justify;\n    background: palevioletred;\n}\n\nLabel {\n    padding: 1 2;\n    height: 100%;\n    color: auto;\n}\n\nGrid {\n    grid-size: 2 2;\n}\n</code></pre>"},{"location":"styles/text_align/#css","title":"CSS","text":"<pre><code>/* Set text in the widget to be right aligned */\ntext-align: right;\n</code></pre>"},{"location":"styles/text_align/#python","title":"Python","text":"<pre><code># Set text in the widget to be right aligned\nwidget.styles.text_align = \"right\"\n</code></pre>"},{"location":"styles/text_align/#see-also","title":"See also","text":"<ul> <li><code>align</code> to set the alignment of children widgets inside a container.</li> <li><code>content-align</code> to set the alignment of content inside a widget.</li> </ul>"},{"location":"styles/text_opacity/","title":"Text-opacity","text":"<p>The <code>text-opacity</code> style blends the foreground color (i.e. text) with the background color.</p>"},{"location":"styles/text_opacity/#syntax","title":"Syntax","text":"<pre>\ntext-opacity: &lt;number&gt; | &lt;percentage&gt;;\n</pre> <p>The text opacity of a widget can be set as a <code>&lt;number&gt;</code> or a <code>&lt;percentage&gt;</code>. If given as a number, then <code>text-opacity</code> should be a value between 0 and 1, where 0 makes the foreground color match the background (effectively making text invisible) and 1 will display text as normal. If given as a percentage, 0% will result in invisible text, and 100% will display fully opaque text.</p> <p>Typically, if you set this value it would be somewhere between the two extremes. For instance, setting <code>text-opacity</code> to <code>70%</code> would result in slightly faded text. Setting it to <code>0.3</code> would result in very dim text.</p> <p>Warning</p> <p>Be careful not to set text opacity so low as to make it hard to read.</p>"},{"location":"styles/text_opacity/#example","title":"Example","text":"<p>This example shows, from top to bottom, increasing <code>text-opacity</code> values.</p> Outputtext_opacity.pytext_opacity.tcss <p> TextOpacityApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a025%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a050%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a075%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-opacity:\u00a0100%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass TextOpacityApp(App):\n    CSS_PATH = \"text_opacity.tcss\"\n\n    def compose(self):\n        yield Label(\"text-opacity: 0%\", id=\"zero-opacity\")\n        yield Label(\"text-opacity: 25%\", id=\"quarter-opacity\")\n        yield Label(\"text-opacity: 50%\", id=\"half-opacity\")\n        yield Label(\"text-opacity: 75%\", id=\"three-quarter-opacity\")\n        yield Label(\"text-opacity: 100%\", id=\"full-opacity\")\n\n\nif __name__ == \"__main__\":\n    app = TextOpacityApp()\n    app.run()\n</code></pre> <pre><code>#zero-opacity {\n    text-opacity: 0%;\n}\n\n#quarter-opacity {\n    text-opacity: 25%;\n}\n\n#half-opacity {\n    text-opacity: 50%;\n}\n\n#three-quarter-opacity {\n    text-opacity: 75%;\n}\n\n#full-opacity {\n    text-opacity: 100%;\n}\n\nLabel {\n    height: 1fr;\n    width: 100%;\n    text-align: center;\n    text-style: bold;\n}\n</code></pre>"},{"location":"styles/text_opacity/#css","title":"CSS","text":"<pre><code>/* Set the text to be \"half-faded\" against the background of the widget */\ntext-opacity: 50%;\n</code></pre>"},{"location":"styles/text_opacity/#python","title":"Python","text":"<pre><code># Set the text to be \"half-faded\" against the background of the widget\nwidget.styles.text_opacity = \"50%\"\n</code></pre>"},{"location":"styles/text_opacity/#see-also","title":"See also","text":"<ul> <li><code>opacity</code> to specify the opacity of a whole widget.</li> </ul>"},{"location":"styles/text_style/","title":"Text-style","text":"<p>The <code>text-style</code> style sets the style for the text in a widget.</p>"},{"location":"styles/text_style/#syntax","title":"Syntax","text":"<pre>\ntext-style: &lt;text-style&gt;;\n</pre> <p><code>text-style</code> will take all the values specified and will apply that styling combination to the text in the widget.</p>"},{"location":"styles/text_style/#examples","title":"Examples","text":""},{"location":"styles/text_style/#basic-usage","title":"Basic usage","text":"<p>Each of the three text panels has a different text style, respectively <code>bold</code>, <code>italic</code>, and <code>reverse</code>, from left to right.</p> Outputtext_style.pytext_style.tcss <p> TextStyleApp I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0 that\u00a0brings\u00a0total\u00a0that\u00a0brings\u00a0total\u00a0that\u00a0brings\u00a0total\u00a0 obliteration.obliteration.obliteration. I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0 over\u00a0me\u00a0and\u00a0through\u00a0me.over\u00a0me\u00a0and\u00a0through\u00a0me.over\u00a0me\u00a0and\u00a0through\u00a0me. And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0 I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0 to\u00a0see\u00a0its\u00a0path.to\u00a0see\u00a0its\u00a0path.to\u00a0see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0 there\u00a0will\u00a0be\u00a0nothing.\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Onlythere\u00a0will\u00a0be\u00a0nothing.\u00a0Only Only\u00a0I\u00a0will\u00a0remain.I\u00a0will\u00a0remain.I\u00a0will\u00a0remain. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass TextStyleApp(App):\n    CSS_PATH = \"text_style.tcss\"\n\n    def compose(self):\n        yield Label(TEXT, id=\"lbl1\")\n        yield Label(TEXT, id=\"lbl2\")\n        yield Label(TEXT, id=\"lbl3\")\n\n\nif __name__ == \"__main__\":\n    app = TextStyleApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: horizontal;\n}\nLabel {\n    width: 1fr;\n}\n#lbl1 {\n    background: red 30%;\n    text-style: bold;\n}\n#lbl2 {\n    background: green 30%;\n    text-style: italic;\n}\n#lbl3 {\n    background: blue 30%;\n    text-style: reverse;\n}\n</code></pre>"},{"location":"styles/text_style/#all-text-styles","title":"All text styles","text":"<p>The next example shows all different text styles on their own, as well as some combinations of styles in a single widget.</p> Outputtext_style_all.pytext_style_all.tcss <p> AllTextStyleApp \u00a0\u00a0nonebolditalicreverse \u00a0\u00a0I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. \u00a0\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 \u00a0\u00a0mind-killer.mind-killer.mind-killer.mind-killer. \u00a0\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 \u00a0\u00a0little-death\u00a0that\u00a0\u00a0little-death\u00a0that\u00a0little-death\u00a0thatlittle-death\u00a0that\u00a0 \u00a0\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0 \u00a0\u00a0obliteration.obliteration.obliteration.obliteration. \u00a0\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0 \u00a0\u00a0fear.fear.fear.fear. strikeunderlinebold\u00a0italicreverse\u00a0strike I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 mind-killer.mind-killer.mind-killer.mind-killer. Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0Fear\u00a0is\u00a0the\u00a0 little-death\u00a0thatlittle-death\u00a0that\u00a0little-death\u00a0thatlittle-death\u00a0that\u00a0 brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0brings\u00a0total\u00a0 obliteration.obliteration.obliteration.obliteration. I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0I\u00a0will\u00a0face\u00a0my\u00a0 fear.fear.fear.fear. I\u00a0will\u00a0permit\u00a0it\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass AllTextStyleApp(App):\n    CSS_PATH = \"text_style_all.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"none\\n\" + TEXT, id=\"lbl1\"),\n            Label(\"bold\\n\" + TEXT, id=\"lbl2\"),\n            Label(\"italic\\n\" + TEXT, id=\"lbl3\"),\n            Label(\"reverse\\n\" + TEXT, id=\"lbl4\"),\n            Label(\"strike\\n\" + TEXT, id=\"lbl5\"),\n            Label(\"underline\\n\" + TEXT, id=\"lbl6\"),\n            Label(\"bold italic\\n\" + TEXT, id=\"lbl7\"),\n            Label(\"reverse strike\\n\" + TEXT, id=\"lbl8\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = AllTextStyleApp()\n    app.run()\n</code></pre> <pre><code>#lbl1 {\n    text-style: none;\n}\n\n#lbl2 {\n    text-style: bold;\n}\n\n#lbl3 {\n    text-style: italic;\n}\n\n#lbl4 {\n    text-style: reverse;\n}\n\n#lbl5 {\n    text-style: strike;\n}\n\n#lbl6 {\n    text-style: underline;\n}\n\n#lbl7 {\n    text-style: bold italic;\n}\n\n#lbl8 {\n    text-style: reverse strike;\n}\n\nGrid {\n    grid-size: 4;\n    grid-gutter: 1 2;\n    margin: 1 2;\n    height: 100%;\n}\n\nLabel {\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/text_style/#css","title":"CSS","text":"<pre><code>text-style: italic;\n</code></pre>"},{"location":"styles/text_style/#python","title":"Python","text":"<pre><code>widget.styles.text_style = \"italic\"\n</code></pre>"},{"location":"styles/tint/","title":"Tint","text":"<p>The <code>tint</code> style blends a color with the whole widget.</p>"},{"location":"styles/tint/#syntax","title":"Syntax","text":"<pre>\ntint: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p>The tint style blends a <code>&lt;color&gt;</code> with the widget. The color should likely have an alpha component (specified directly in the color used or by the optional <code>&lt;percentage&gt;</code>), otherwise the end result will obscure the widget content.</p>"},{"location":"styles/tint/#example","title":"Example","text":"<p>This examples shows a green tint with gradually increasing alpha.</p> Outputtint.pytint.tcss <p> TintApp tint:\u00a0green\u00a00%; tint:\u00a0green\u00a010%; tint:\u00a0green\u00a020%; tint:\u00a0green\u00a030%; tint:\u00a0green\u00a040%; tint:\u00a0green\u00a050%; \u2584\u2584 tint:\u00a0green\u00a060%; tint:\u00a0green\u00a070%; </p> <pre><code>from textual.app import App\nfrom textual.color import Color\nfrom textual.widgets import Label\n\n\nclass TintApp(App):\n    CSS_PATH = \"tint.tcss\"\n\n    def compose(self):\n        color = Color.parse(\"green\")\n        for tint_alpha in range(0, 101, 10):\n            widget = Label(f\"tint: green {tint_alpha}%;\")\n            widget.styles.tint = color.with_alpha(tint_alpha / 100)  # (1)!\n            yield widget\n\n\nif __name__ == \"__main__\":\n    app = TintApp()\n    app.run()\n</code></pre> <ol> <li>We set the tint to a <code>Color</code> instance with varying levels of opacity, set through the method with_alpha.</li> </ol> <pre><code>Label {\n    height: 3;\n    width: 100%;\n    text-style: bold;\n    background: white;\n    color: black;\n    content-align: center middle;\n}\n</code></pre>"},{"location":"styles/tint/#css","title":"CSS","text":"<pre><code>/* A red tint (could indicate an error) */\ntint: red 20%;\n\n/* A green tint */\ntint: rgba(0, 200, 0, 0.3);\n</code></pre>"},{"location":"styles/tint/#python","title":"Python","text":"<pre><code># A red tint\nfrom textual.color import Color\nwidget.styles.tint = Color.parse(\"red\").with_alpha(0.2);\n\n# A green tint\nwidget.styles.tint = \"rgba(0, 200, 0, 0.3)\"\n</code></pre>"},{"location":"styles/visibility/","title":"Visibility","text":"<p>The <code>visibility</code> style determines whether a widget is visible or not.</p>"},{"location":"styles/visibility/#syntax","title":"Syntax","text":"<pre>\nvisibility: hidden | visible;\n</pre> <p><code>visibility</code> takes one of two values to set the visibility of a widget.</p>"},{"location":"styles/visibility/#values","title":"Values","text":"Value Description <code>hidden</code> The widget will be invisible. <code>visible</code> (default) The widget will be displayed as normal."},{"location":"styles/visibility/#visibility-inheritance","title":"Visibility inheritance","text":"<p>Note</p> <p>Children of an invisible container can be visible.</p> <p>By default, children inherit the visibility of their parents. So, if a container is set to be invisible, its children widgets will also be invisible by default. However, those widgets can be made visible if their visibility is explicitly set to <code>visibility: visible</code>. This is shown in the second example below.</p>"},{"location":"styles/visibility/#examples","title":"Examples","text":""},{"location":"styles/visibility/#basic-usage","title":"Basic usage","text":"<p>Note that the second widget is hidden while leaving a space where it would have been rendered.</p> Outputvisibility.pyvisibility.tcss <p> VisibilityApp \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a01\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513 \u2503Widget\u00a03\u2503 \u2503\u2503 \u2503\u2503 \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251b </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass VisibilityApp(App):\n    CSS_PATH = \"visibility.tcss\"\n\n    def compose(self):\n        yield Label(\"Widget 1\")\n        yield Label(\"Widget 2\", classes=\"invisible\")\n        yield Label(\"Widget 3\")\n\n\nif __name__ == \"__main__\":\n    app = VisibilityApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    background: green;\n}\n\nLabel {\n    height: 5;\n    width: 100%;\n    background: white;\n    color: blue;\n    border: heavy blue;\n}\n\nLabel.invisible {\n    visibility: hidden;\n}\n</code></pre>"},{"location":"styles/visibility/#overriding-container-visibility","title":"Overriding container visibility","text":"<p>The next example shows the interaction of the <code>visibility</code> style with invisible containers that have visible children. The app below has three rows with a <code>Horizontal</code> container per row and three placeholders per row. The containers all have a white background, and then:</p> <ul> <li>the top container is visible by default (we can see the white background around the placeholders);</li> <li>the middle container is invisible and the children placeholders inherited that setting;</li> <li>the bottom container is invisible but the children placeholders are visible because they were set to be visible.</li> </ul> Outputvisibility_containers.pyvisibility_containers.tcss <p> VisibilityContainersApp PlaceholderPlaceholderPlaceholder PlaceholderPlaceholderPlaceholder </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass VisibilityContainersApp(App):\n    CSS_PATH = \"visibility_containers.tcss\"\n\n    def compose(self):\n        yield VerticalScroll(\n            Horizontal(\n                Placeholder(),\n                Placeholder(),\n                Placeholder(),\n                id=\"top\",\n            ),\n            Horizontal(\n                Placeholder(),\n                Placeholder(),\n                Placeholder(),\n                id=\"middle\",\n            ),\n            Horizontal(\n                Placeholder(),\n                Placeholder(),\n                Placeholder(),\n                id=\"bot\",\n            ),\n        )\n\n\nif __name__ == \"__main__\":\n    app = VisibilityContainersApp()\n    app.run()\n</code></pre> <pre><code>Horizontal {\n    padding: 1 2;     /* (1)! */\n    background: white;\n    height: 1fr;\n}\n\n#top {}               /* (2)! */\n\n#middle {             /* (3)! */\n    visibility: hidden;\n}\n\n#bot {                /* (4)! */\n    visibility: hidden;\n}\n\n#bot &gt; Placeholder {  /* (5)! */\n    visibility: visible;\n}\n\nPlaceholder {\n    width: 1fr;\n}\n</code></pre> <ol> <li>The padding and the white background let us know when the <code>Horizontal</code> is visible.</li> <li>The top <code>Horizontal</code> is visible by default, and so are its children.</li> <li>The middle <code>Horizontal</code> is made invisible and its children will inherit that setting.</li> <li>The bottom <code>Horizontal</code> is made invisible...</li> <li>... but its children override that setting and become visible.</li> </ol>"},{"location":"styles/visibility/#css","title":"CSS","text":"<pre><code>/* Widget is invisible */\nvisibility: hidden;\n\n/* Widget is visible */\nvisibility: visible;\n</code></pre>"},{"location":"styles/visibility/#python","title":"Python","text":"<pre><code># Widget is invisible\nself.styles.visibility = \"hidden\"\n\n# Widget is visible\nself.styles.visibility = \"visible\"\n</code></pre> <p>There is also a shortcut to set a Widget's visibility. The <code>visible</code> property on <code>Widget</code> may be set to <code>True</code> or <code>False</code>.</p> <pre><code># Make a widget invisible\nwidget.visible = False\n\n# Make the widget visible again\nwidget.visible = True\n</code></pre>"},{"location":"styles/visibility/#see-also","title":"See also","text":"<ul> <li><code>display</code> to specify whether a widget is displayed or not.</li> </ul>"},{"location":"styles/width/","title":"Width","text":"<p>The <code>width</code> style sets a widget's width.</p>"},{"location":"styles/width/#syntax","title":"Syntax","text":"<pre>\nwidth: &lt;scalar&gt;;\n</pre> <p>The style <code>width</code> needs a <code>&lt;scalar&gt;</code> to determine the horizontal length of the width. By default, it sets the width of the content area, but if <code>box-sizing</code> is set to <code>border-box</code> it sets the width of the border area.</p>"},{"location":"styles/width/#examples","title":"Examples","text":""},{"location":"styles/width/#basic-usage","title":"Basic usage","text":"<p>This example adds a widget with 50% width of the screen.</p> Outputwidth.pywidth.tcss <p> WidthApp Widget </p> <pre><code>from textual.app import App\nfrom textual.widget import Widget\n\n\nclass WidthApp(App):\n    CSS_PATH = \"width.tcss\"\n\n    def compose(self):\n        yield Widget()\n\n\nif __name__ == \"__main__\":\n    app = WidthApp()\n    app.run()\n</code></pre> <pre><code>Screen &gt; Widget {\n    background: green;\n    width: 50%;\n    color: white;\n}\n</code></pre>"},{"location":"styles/width/#all-width-formats","title":"All width formats","text":"Outputwidth_comparison.pywidth_comparison.tcss <p> WidthComparisonApp #cells#percent#w#h#vw#vh#auto#fr1#fr3 \u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022\u00b7\u00b7\u00b7\u00b7\u2022 </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal\nfrom textual.widgets import Label, Placeholder, Static\n\n\nclass Ruler(Static):\n    def compose(self):\n        ruler_text = \"\u00b7\u00b7\u00b7\u00b7\u2022\" * 100\n        yield Label(ruler_text)\n\n\nclass WidthComparisonApp(App):\n    CSS_PATH = \"width_comparison.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            Placeholder(id=\"cells\"),  # (1)!\n            Placeholder(id=\"percent\"),\n            Placeholder(id=\"w\"),\n            Placeholder(id=\"h\"),\n            Placeholder(id=\"vw\"),\n            Placeholder(id=\"vh\"),\n            Placeholder(id=\"auto\"),\n            Placeholder(id=\"fr1\"),\n            Placeholder(id=\"fr3\"),\n        )\n        yield Ruler()\n\n\nif __name__ == \"__main__\":\n    app = WidthComparisonApp()\n    app.run()\n</code></pre> <ol> <li>The id of the placeholder identifies which unit will be used to set the width of the widget.</li> </ol> <pre><code>#cells {\n    width: 9;      /* (1)! */\n}\n#percent {\n    width: 12.5%;  /* (2)! */\n}\n#w {\n    width: 10w;    /* (3)! */\n}\n#h {\n    width: 25h;    /* (4)! */\n}\n#vw {\n    width: 15vw;   /* (5)! */\n}\n#vh {\n    width: 25vh;   /* (6)! */\n}\n#auto {\n    width: auto;   /* (7)! */\n}\n#fr1 {\n    width: 1fr;    /* (8)! */\n}\n#fr3 {\n    width: 3fr;    /* (9)! */\n}\n\nScreen {\n    layers: ruler;\n}\n\nRuler {\n    layer: ruler;\n    dock: bottom;\n    overflow: hidden;\n    height: 1;\n    background: $accent;\n}\n</code></pre> <ol> <li>This sets the width to 9 columns.</li> <li>This sets the width to 12.5% of the space made available by the container. The container is 80 columns wide, so 12.5% of 80 is 10.</li> <li>This sets the width to 10% of the width of the direct container, which is the <code>Horizontal</code> container. Because it expands to fit all of the terminal, the width of the <code>Horizontal</code> is 80 and 10% of 80 is 8.</li> <li>This sets the width to 25% of the height of the direct container, which is the <code>Horizontal</code> container. Because it expands to fit all of the terminal, the height of the <code>Horizontal</code> is 24 and 25% of 24 is 6.</li> <li>This sets the width to 15% of the viewport width, which is 80. 15% of 80 is 12.</li> <li>This sets the width to 25% of the viewport height, which is 24. 25% of 24 is 6.</li> <li>This sets the width of the placeholder to be the optimal size that fits the content without scrolling. Because the content is the string <code>\"#auto\"</code>, the placeholder has its width set to 5.</li> <li>This sets the width to <code>1fr</code>, which means this placeholder will have a third of the width of a placeholder with <code>3fr</code>.</li> <li>This sets the width to <code>3fr</code>, which means this placeholder will have triple the width of a placeholder with <code>1fr</code>.</li> </ol>"},{"location":"styles/width/#css","title":"CSS","text":"<pre><code>/* Explicit cell width */\nwidth: 10;\n\n/* Percentage width */\nwidth: 50%;\n\n/* Automatic width */\nwidth: auto;\n</code></pre>"},{"location":"styles/width/#python","title":"Python","text":"<pre><code>widget.styles.width = 10\nwidget.styles.width = \"50%\nwidget.styles.width = \"auto\"\n</code></pre>"},{"location":"styles/width/#see-also","title":"See also","text":"<ul> <li><code>max-width</code> and <code>min-width</code> to limit the width of a widget.</li> <li><code>height</code> to set the height of a widget.</li> </ul>"},{"location":"styles/grid/","title":"Grid","text":"<p>There are a number of styles relating to the Textual <code>grid</code> layout.</p> <p>For an in-depth look at the grid layout, visit the grid guide.</p> Property Description <code>column-span</code> Number of columns a cell spans. <code>grid-columns</code> Width of grid columns. <code>grid-gutter</code> Spacing between grid cells. <code>grid-rows</code> Height of grid rows. <code>grid-size</code> Number of columns and rows in the grid layout. <code>row-span</code> Number of rows a cell spans."},{"location":"styles/grid/#syntax","title":"Syntax","text":"<pre>\ncolumn-span: &lt;integer&gt;;\n\ngrid-columns: &lt;scalar&gt;+;\n\ngrid-gutter: &lt;scalar&gt; [&lt;scalar&gt;];\n\ngrid-rows: &lt;scalar&gt;+;\n\ngrid-size: &lt;integer&gt; [&lt;integer&gt;];\n\nrow-span: &lt;integer&gt;;\n</pre> <p>Visit each style's reference page to learn more about how the values are used.</p>"},{"location":"styles/grid/#example","title":"Example","text":"<p>The example below shows all the styles above in action. The <code>grid-size: 3 4;</code> declaration sets the grid to 3 columns and 4 rows. The first cell of the grid, tinted magenta, shows a cell spanning multiple rows and columns. The spacing between grid cells is defined by the <code>grid-gutter</code> style.</p> Outputgrid.pygrid.tcss <p> GridApp Grid\u00a0cell\u00a01Grid\u00a0cell\u00a02 row-span:\u00a03; column-span:\u00a02; Grid\u00a0cell\u00a03 Grid\u00a0cell\u00a04 Grid\u00a0cell\u00a05Grid\u00a0cell\u00a06Grid\u00a0cell\u00a07 </p> <pre><code>from textual.app import App\nfrom textual.widgets import Static\n\n\nclass GridApp(App):\n    CSS_PATH = \"grid.tcss\"\n\n    def compose(self):\n        yield Static(\"Grid cell 1\\n\\nrow-span: 3;\\ncolumn-span: 2;\", id=\"static1\")\n        yield Static(\"Grid cell 2\", id=\"static2\")\n        yield Static(\"Grid cell 3\", id=\"static3\")\n        yield Static(\"Grid cell 4\", id=\"static4\")\n        yield Static(\"Grid cell 5\", id=\"static5\")\n        yield Static(\"Grid cell 6\", id=\"static6\")\n        yield Static(\"Grid cell 7\", id=\"static7\")\n\n\nif __name__ == \"__main__\":\n    app = GridApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    layout: grid;\n    grid-size: 3 4;\n    grid-rows: 1fr;\n    grid-columns: 1fr;\n    grid-gutter: 1;\n}\n\nStatic {\n    color: auto;\n    background: lightblue;\n    height: 100%;\n    padding: 1 2;\n}\n\n#static1 {\n    tint: magenta 40%;\n    row-span: 3;\n    column-span: 2;\n}\n</code></pre> <p>Warning</p> <p>The styles listed on this page will only work when the layout is <code>grid</code>.</p>"},{"location":"styles/grid/#see-also","title":"See also","text":"<ul> <li>The grid layout guide.</li> </ul>"},{"location":"styles/grid/column_span/","title":"Column-span","text":"<p>The <code>column-span</code> style specifies how many columns a widget will span in a grid layout.</p> <p>Note</p> <p>This style only affects widgets that are direct children of a widget with <code>layout: grid</code>.</p>"},{"location":"styles/grid/column_span/#syntax","title":"Syntax","text":"<pre>\ncolumn-span: &lt;integer&gt;;\n</pre> <p>The <code>column-span</code> style accepts a single non-negative <code>&lt;integer&gt;</code> that quantifies how many columns the given widget spans.</p>"},{"location":"styles/grid/column_span/#example","title":"Example","text":"<p>The example below shows a 4 by 4 grid where many placeholders span over several columns.</p> Outputcolumn_span.pycolumn_span.tcss <p> MyApp #p1 #p2#p3 #p4#p5 #p6#p7 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass MyApp(App):\n    CSS_PATH = \"column_span.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Placeholder(id=\"p1\"),\n            Placeholder(id=\"p2\"),\n            Placeholder(id=\"p3\"),\n            Placeholder(id=\"p4\"),\n            Placeholder(id=\"p5\"),\n            Placeholder(id=\"p6\"),\n            Placeholder(id=\"p7\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>#p1 {\n    column-span: 4;\n}\n#p2 {\n    column-span: 3;\n}\n#p3 {\n    column-span: 1;  /* Didn't need to be set explicitly. */\n}\n#p4 {\n    column-span: 2;\n}\n#p5 {\n    column-span: 2;\n}\n#p6 {\n    /* Default value is 1. */\n}\n#p7 {\n    column-span: 3;\n}\n\nGrid {\n    grid-size: 4 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/column_span/#css","title":"CSS","text":"<pre><code>column-span: 3;\n</code></pre>"},{"location":"styles/grid/column_span/#python","title":"Python","text":"<pre><code>widget.styles.column_span = 3\n</code></pre>"},{"location":"styles/grid/column_span/#see-also","title":"See also","text":"<ul> <li><code>row-span</code> to specify how many rows a widget spans.</li> </ul>"},{"location":"styles/grid/grid_columns/","title":"Grid-columns","text":"<p>The <code>grid-columns</code> style allows to define the width of the columns of the grid.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_columns/#syntax","title":"Syntax","text":"<pre>\ngrid-columns: &lt;scalar&gt;+;\n</pre> <p>The <code>grid-columns</code> style takes one or more <code>&lt;scalar&gt;</code> that specify the length of the columns of the grid.</p> <p>If there are more columns in the grid than scalars specified in <code>grid-columns</code>, they are reused cyclically. If the number of <code>&lt;scalar&gt;</code> is in excess, the excess is ignored.</p>"},{"location":"styles/grid/grid_columns/#example","title":"Example","text":"<p>The example below shows a grid with 10 labels laid out in a grid with 2 rows and 5 columns.</p> <p>We set <code>grid-columns: 1fr 16 2fr</code>. Because there are more rows than scalars in the style definition, the scalars will be reused:</p> <ul> <li>columns 1 and 4 have width <code>1fr</code>;</li> <li>columns 2 and 5 have width <code>16</code>; and</li> <li>column 3 has width <code>2fr</code>.</li> </ul> Outputgrid_columns.pygrid_columns.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u2502width\u00a0=\u00a016\u2502\u25022fr\u2502\u25021fr\u2502\u2502width\u00a0=\u00a016\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u2502width\u00a0=\u00a016\u2502\u25022fr\u2502\u25021fr\u2502\u2502width\u00a0=\u00a016\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_columns.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n            Label(\"2fr\"),\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n            Label(\"2fr\"),\n            Label(\"1fr\"),\n            Label(\"width = 16\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 5 2;\n    grid-columns: 1fr 16 2fr;\n}\n\nLabel {\n    border: round white;\n    content-align-horizontal: center;\n    width: 100%;\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/grid_columns/#css","title":"CSS","text":"<pre><code>/* Set all columns to have 50% width */\ngrid-columns: 50%;\n\n/* Every other column is twice as wide as the first one */\ngrid-columns: 1fr 2fr;\n</code></pre>"},{"location":"styles/grid/grid_columns/#python","title":"Python","text":"<pre><code>grid.styles.grid_columns = \"50%\"\ngrid.styles.grid_columns = \"1fr 2fr\"\n</code></pre>"},{"location":"styles/grid/grid_columns/#see-also","title":"See also","text":"<ul> <li><code>grid-rows</code> to specify the height of the grid rows.</li> </ul>"},{"location":"styles/grid/grid_gutter/","title":"Grid-gutter","text":"<p>The <code>grid-gutter</code> style sets the size of the gutter in the grid layout. That is, it sets the space between adjacent cells in the grid.</p> <p>Gutter is only applied between the edges of cells. No spacing is added between the edges of the cells and the edges of the container.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_gutter/#syntax","title":"Syntax","text":"<pre>\ngrid-gutter: &lt;integer&gt; [&lt;integer&gt;];\n</pre> <p>The <code>grid-gutter</code> style takes one or two <code>&lt;integer&gt;</code> that set the length of the gutter along the vertical and horizontal axes. If only one <code>&lt;integer&gt;</code> is supplied, it sets the vertical and horizontal gutters. If two are supplied, they set the vertical and horizontal gutters, respectively.</p>"},{"location":"styles/grid/grid_gutter/#example","title":"Example","text":"<p>The example below employs a common trick to apply visually consistent spacing around all grid cells.</p> Outputgrid_gutter.pygrid_gutter.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25021\u2502\u25022\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25023\u2502\u25024\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25025\u2502\u25026\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25027\u2502\u25028\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_gutter.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1\"),\n            Label(\"2\"),\n            Label(\"3\"),\n            Label(\"4\"),\n            Label(\"5\"),\n            Label(\"6\"),\n            Label(\"7\"),\n            Label(\"8\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2 4;\n    grid-gutter: 1 2;  /* (1)! */\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre> <ol> <li>We set the horizontal gutter to be double the vertical gutter because terminal cells are typically two times taller than they are wide. Thus, the result shows visually consistent spacing around grid cells.</li> </ol>"},{"location":"styles/grid/grid_gutter/#css","title":"CSS","text":"<pre><code>/* Set vertical and horizontal gutters to be the same */\ngrid-gutter: 5;\n\n/* Set vertical and horizontal gutters separately */\ngrid-gutter: 1 2;\n</code></pre>"},{"location":"styles/grid/grid_gutter/#python","title":"Python","text":"<p>Vertical and horizontal gutters correspond to different Python properties, so they must be set separately:</p> <pre><code>widget.styles.grid_gutter_vertical = \"1\"\nwidget.styles.grid_gutter_horizontal = \"2\"\n</code></pre>"},{"location":"styles/grid/grid_rows/","title":"Grid-rows","text":"<p>The <code>grid-rows</code> style allows to define the height of the rows of the grid.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_rows/#syntax","title":"Syntax","text":"<pre>\ngrid-rows: &lt;scalar&gt;+;\n</pre> <p>The <code>grid-rows</code> style takes one or more <code>&lt;scalar&gt;</code> that specify the length of the rows of the grid.</p> <p>If there are more rows in the grid than scalars specified in <code>grid-rows</code>, they are reused cyclically. If the number of <code>&lt;scalar&gt;</code> is in excess, the excess is ignored.</p>"},{"location":"styles/grid/grid_rows/#example","title":"Example","text":"<p>The example below shows a grid with 10 labels laid out in a grid with 5 rows and 2 columns.</p> <p>We set <code>grid-rows: 1fr 6 25%</code>. Because there are more rows than scalars in the style definition, the scalars will be reused:</p> <ul> <li>rows 1 and 4 have height <code>1fr</code>;</li> <li>rows 2 and 5 have height <code>6</code>; and</li> <li>row 3 has height <code>25%</code>.</li> </ul> Outputgrid_rows.pygrid_rows.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u25021fr\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502height\u00a0=\u00a06\u2502\u2502height\u00a0=\u00a06\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u250225%\u2502\u250225%\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u25021fr\u2502\u25021fr\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502height\u00a0=\u00a06\u2502\u2502height\u00a0=\u00a06\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_rows.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1fr\"),\n            Label(\"1fr\"),\n            Label(\"height = 6\"),\n            Label(\"height = 6\"),\n            Label(\"25%\"),\n            Label(\"25%\"),\n            Label(\"1fr\"),\n            Label(\"1fr\"),\n            Label(\"height = 6\"),\n            Label(\"height = 6\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2 5;\n    grid-rows: 1fr 6 25%;\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/grid_rows/#css","title":"CSS","text":"<pre><code>/* Set all rows to have 50% height */\ngrid-rows: 50%;\n\n/* Every other row is twice as tall as the first one */\ngrid-rows: 1fr 2fr;\n</code></pre>"},{"location":"styles/grid/grid_rows/#python","title":"Python","text":"<pre><code>grid.styles.grid_rows = \"50%\"\ngrid.styles.grid_rows = \"1fr 2fr\"\n</code></pre>"},{"location":"styles/grid/grid_rows/#see-also","title":"See also","text":"<ul> <li><code>grid-columns</code> to specify the width of the grid columns.</li> </ul>"},{"location":"styles/grid/grid_size/","title":"Grid-size","text":"<p>The <code>grid-size</code> style sets the number of columns and rows in a grid layout.</p> <p>The number of rows can be left unspecified and it will be computed automatically.</p> <p>Note</p> <p>This style only affects widgets with <code>layout: grid</code>.</p>"},{"location":"styles/grid/grid_size/#syntax","title":"Syntax","text":"<pre>\ngrid-size: &lt;integer&gt; [&lt;integer&gt;];\n</pre> <p>The <code>grid-size</code> style takes one or two non-negative <code>&lt;integer&gt;</code>. The first defines how many columns there are in the grid. If present, the second one sets the number of rows \u2013 regardless of the number of children of the grid \u2013, otherwise the number of rows is computed automatically.</p>"},{"location":"styles/grid/grid_size/#examples","title":"Examples","text":""},{"location":"styles/grid/grid_size/#columns-and-rows","title":"Columns and rows","text":"<p>In the first example, we create a grid with 2 columns and 5 rows, although we do not have enough labels to fill in the whole grid:</p> Outputgrid_size_both.pygrid_size_both.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25021\u2502\u25022\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u25023\u2502\u25024\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502 \u25025\u2502 \u2502\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_size_both.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1\"),\n            Label(\"2\"),\n            Label(\"3\"),\n            Label(\"4\"),\n            Label(\"5\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2 4;  /* (1)! */\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre> <ol> <li>Create a grid with 2 columns and 4 rows.</li> </ol>"},{"location":"styles/grid/grid_size/#columns-only","title":"Columns only","text":"<p>In the second example, we create a grid with 2 columns and however many rows are needed to display all of the grid children:</p> Outputgrid_size_columns.pygrid_size_columns.tcss <p> MyApp \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u25021\u2502\u25022\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u25023\u2502\u25024\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2502\u2502\u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502 \u2502\u2502 \u25025\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Label\n\n\nclass MyApp(App):\n    CSS_PATH = \"grid_size_columns.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Label(\"1\"),\n            Label(\"2\"),\n            Label(\"3\"),\n            Label(\"4\"),\n            Label(\"5\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>Grid {\n    grid-size: 2;  /* (1)! */\n}\n\nLabel {\n    border: round white;\n    content-align: center middle;\n    width: 100%;\n    height: 100%;\n}\n</code></pre> <ol> <li>Create a grid with 2 columns and however many rows.</li> </ol>"},{"location":"styles/grid/grid_size/#css","title":"CSS","text":"<pre><code>/* Grid with 3 columns and 5 rows */\ngrid-size: 3 5;\n\n/* Grid with 4 columns and as many rows as needed */\ngrid-size: 4;\n</code></pre>"},{"location":"styles/grid/grid_size/#python","title":"Python","text":"<p>To programmatically change the grid size, the number of rows and columns must be specified separately:</p> <pre><code>widget.styles.grid_size_rows = 3\nwidget.styles.grid_size_columns = 6\n</code></pre>"},{"location":"styles/grid/row_span/","title":"Row-span","text":"<p>The <code>row-span</code> style specifies how many rows a widget will span in a grid layout.</p> <p>Note</p> <p>This style only affects widgets that are direct children of a widget with <code>layout: grid</code>.</p>"},{"location":"styles/grid/row_span/#syntax","title":"Syntax","text":"<pre>\nrow-span: &lt;integer&gt;;\n</pre> <p>The <code>row-span</code> style accepts a single non-negative <code>&lt;integer&gt;</code> that quantifies how many rows the given widget spans.</p>"},{"location":"styles/grid/row_span/#example","title":"Example","text":"<p>The example below shows a 4 by 4 grid where many placeholders span over several rows.</p> <p>Notice that grid cells are filled from left to right, top to bottom. After placing the placeholders <code>#p1</code>, <code>#p2</code>, <code>#p3</code>, and <code>#p4</code>, the next available cell is in the second row, fourth column, which is where the top of <code>#p5</code> is.</p> Outputrow_span.pyrow_span.tcss <p> MyApp #p4 #p3 #p2 #p1 #p5 #p6 #p7 </p> <pre><code>from textual.app import App\nfrom textual.containers import Grid\nfrom textual.widgets import Placeholder\n\n\nclass MyApp(App):\n    CSS_PATH = \"row_span.tcss\"\n\n    def compose(self):\n        yield Grid(\n            Placeholder(id=\"p1\"),\n            Placeholder(id=\"p2\"),\n            Placeholder(id=\"p3\"),\n            Placeholder(id=\"p4\"),\n            Placeholder(id=\"p5\"),\n            Placeholder(id=\"p6\"),\n            Placeholder(id=\"p7\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = MyApp()\n    app.run()\n</code></pre> <pre><code>#p1 {\n    row-span: 4;\n}\n#p2 {\n    row-span: 3;\n}\n#p3 {\n    row-span: 2;\n}\n#p4 {\n    row-span: 1;  /* Didn't need to be set explicitly. */\n}\n#p5 {\n    row-span: 3;\n}\n#p6 {\n    row-span: 2;\n}\n#p7 {\n    /* Default value is 1. */\n}\n\nGrid {\n    grid-size: 4 4;\n    grid-gutter: 1 2;\n}\n\nPlaceholder {\n    height: 100%;\n}\n</code></pre>"},{"location":"styles/grid/row_span/#css","title":"CSS","text":"<pre><code>row-span: 3\n</code></pre>"},{"location":"styles/grid/row_span/#python","title":"Python","text":"<pre><code>widget.styles.row_span = 3\n</code></pre>"},{"location":"styles/grid/row_span/#see-also","title":"See also","text":"<ul> <li><code>column-span</code> to specify how many columns a widget spans.</li> </ul>"},{"location":"styles/links/","title":"Links","text":"<p>Textual supports the concept of inline \"links\" embedded in text which trigger an action when pressed. There are a number of styles which influence the appearance of these links within a widget.</p> <p>Note</p> <p>These CSS rules only target Textual action links. Internet hyperlinks are not affected by these styles.</p> Property Description <code>link-background</code> The background color of the link text. <code>link-background-hover</code> The background color of the link text when the cursor is over it. <code>link-color</code> The color of the link text. <code>link-color-hover</code> The color of the link text when the cursor is over it. <code>link-style</code> The style of the link text (e.g. underline). <code>link-style-hover</code> The style of the link text when the cursor is over it."},{"location":"styles/links/#syntax","title":"Syntax","text":"<pre>\nlink-background: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-color: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-style: &lt;text-style&gt;;\n\nlink-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nlink-style-hover: &lt;text-style&gt;;\n</pre> <p>Visit each style's reference page to learn more about how the values are used.</p>"},{"location":"styles/links/#example","title":"Example","text":"<p>In the example below, the first label illustrates default link styling. The second label uses CSS to customize the link color, background, and style.</p> Outputlinks.pylinks.tcss <p> LinksApp Here\u00a0is\u00a0a\u00a0link\u00a0which\u00a0you\u00a0can\u00a0click! Here\u00a0is\u00a0a\u00a0link\u00a0which\u00a0you\u00a0can\u00a0click! </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\nTEXT = \"\"\"\\\nHere is a [@click='app.bell']link[/] which you can click!\n\"\"\"\n\n\nclass LinksApp(App):\n    CSS_PATH = \"links.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Static(TEXT)\n        yield Static(TEXT, id=\"custom\")\n\n\nif __name__ == \"__main__\":\n    app = LinksApp()\n    app.run()\n</code></pre> <pre><code>#custom {\n    link-color: black 90%;\n    link-background: dodgerblue;\n    link-style: bold italic underline;\n}\n</code></pre>"},{"location":"styles/links/#additional-notes","title":"Additional Notes","text":"<ul> <li>Inline links are not widgets, and thus cannot be focused.</li> </ul>"},{"location":"styles/links/#see-also","title":"See Also","text":"<ul> <li>An introduction to links in the Actions guide.</li> </ul>"},{"location":"styles/links/link_background/","title":"Link-background","text":"<p>The <code>link-background</code> style sets the background color of the link.</p> <p>Note</p> <p><code>link-background</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_background/#syntax","title":"Syntax","text":"<pre>\nlink-background: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-background</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of text enclosed in Textual action links.</p>"},{"location":"styles/links/link_background/#example","title":"Example","text":"<p>The example below shows some links with their background color changed. It also shows that <code>link-background</code> does not affect hyperlinks.</p> Outputlink_background.pylink_background.tcss <p> LinkBackgroundApp Visit\u00a0the\u00a0Textualize\u00a0website.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 You\u00a0can\u00a0also\u00a0click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Exit\u00a0this\u00a0application. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkBackgroundApp(App):\n    CSS_PATH = \"link_background.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkBackgroundApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-background</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-background</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-background: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-background: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    link-background: $accent;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_background/#css","title":"CSS","text":"<pre><code>link-background: red 70%;\nlink-background: $accent;\n</code></pre>"},{"location":"styles/links/link_background/#python","title":"Python","text":"<pre><code>widget.styles.link_background = \"red 70%\"\nwidget.styles.link_background = \"$accent\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_background = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_background/#see-also","title":"See also","text":"<ul> <li><code>link-color</code> to set the color of link text.</li> <li><code>link-background-hover</code> to set the background color of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_background_hover/","title":"Link-background-hover","text":"<p>The <code>link-background-hover</code> style sets the background color of the link when the mouse cursor is over the link.</p> <p>Note</p> <p><code>link-background-hover</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_background_hover/#syntax","title":"Syntax","text":"<pre>\nlink-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-background-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.</p>"},{"location":"styles/links/link_background_hover/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-background-hover</code> set to <code>$accent</code>.</p>"},{"location":"styles/links/link_background_hover/#example","title":"Example","text":"<p>The example below shows some links that have their background color changed when the mouse moves over it and it shows that there is a default color for <code>link-background-hover</code>.</p> <p>It also shows that <code>link-background-hover</code> does not affect hyperlinks.</p> Outputlink_background_hover.pylink_background_hover.tcss <p></p> <p>Note</p> <p>The GIF has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/link_background_hover.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkHoverBackgroundApp(App):\n    CSS_PATH = \"link_background_hover.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkHoverBackgroundApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-background-hover</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-background-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-background-hover</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-background-hover: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-background-hover: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    /* Empty to show the default hover background */ /* (2)! */\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> <li>The default behavior for links on hover is to change to a different background color, so we don't need to change anything if all we want is to add emphasis to the link under the mouse.</li> </ol>"},{"location":"styles/links/link_background_hover/#css","title":"CSS","text":"<pre><code>link-background-hover: red 70%;\nlink-background-hover: $accent;\n</code></pre>"},{"location":"styles/links/link_background_hover/#python","title":"Python","text":"<pre><code>widget.styles.link_background_hover = \"red 70%\"\nwidget.styles.link_background_hover = \"$accent\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_background_hover = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_background_hover/#see-also","title":"See also","text":"<ul> <li><code>link-background</code> to set the background color of link text.</li> <li><code>link-color-hover</code> to set the color of link text when the mouse pointer is over it.</li> <li><code>link-style-hover</code> to set the style of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_color/","title":"Link-color","text":"<p>The <code>link-color</code> style sets the color of the link text.</p> <p>Note</p> <p><code>link-color</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_color/#syntax","title":"Syntax","text":"<pre>\nlink-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-color</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of text enclosed in Textual action links.</p>"},{"location":"styles/links/link_color/#example","title":"Example","text":"<p>The example below shows some links with their color changed. It also shows that <code>link-color</code> does not affect hyperlinks.</p> Outputlink_color.pylink_color.tcss <p> LinkColorApp Visit\u00a0the\u00a0Textualize\u00a0website.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 You\u00a0can\u00a0also\u00a0click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Exit\u00a0this\u00a0application. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkColorApp(App):\n    CSS_PATH = \"link_color.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkColorApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-color</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-color</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-color: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-color: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    link-color: $accent;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_color/#css","title":"CSS","text":"<pre><code>link-color: red 70%;\nlink-color: $accent;\n</code></pre>"},{"location":"styles/links/link_color/#python","title":"Python","text":"<pre><code>widget.styles.link_color = \"red 70%\"\nwidget.styles.link_color = \"$accent\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_color = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_color/#see-also","title":"See also","text":"<ul> <li><code>link-background</code> to set the background color of link text.</li> <li><code>link-color-hover</code> to set the color of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_color_hover/","title":"Link-color-hover","text":"<p>The <code>link-color-hover</code> style sets the color of the link text when the mouse cursor is over the link.</p> <p>Note</p> <p><code>link-color-hover</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_color_hover/#syntax","title":"Syntax","text":"<pre>\nlink-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>link-color-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.</p>"},{"location":"styles/links/link_color_hover/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-color-hover</code> set to <code>white</code>.</p>"},{"location":"styles/links/link_color_hover/#example","title":"Example","text":"<p>The example below shows some links that have their color changed when the mouse moves over it. It also shows that <code>link-color-hover</code> does not affect hyperlinks.</p> Outputlink_color_hover.pylink_color_hover.tcss <p></p> <p>Note</p> <p>The background color also changes when the mouse moves over the links because that is the default behavior. That can be customised by setting <code>link-background-hover</code> but we haven't done so in this example.</p> <p>Note</p> <p>The GIF has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/link_color_hover.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkHoverColorApp(App):\n    CSS_PATH = \"link_color_hover.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkHoverColorApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-color-hover</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-color-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-color-hover</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-color-hover: red;  /* (1)! */\n}\n\n#lbl3 {\n    link-color-hover: hsl(60,100%,50%) 50%;\n}\n\n#lbl4 {\n    link-color-hover: black;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_color_hover/#css","title":"CSS","text":"<pre><code>link-color-hover: red 70%;\nlink-color-hover: black;\n</code></pre>"},{"location":"styles/links/link_color_hover/#python","title":"Python","text":"<pre><code>widget.styles.link_color_hover = \"red 70%\"\nwidget.styles.link_color_hover = \"black\"\n\n# You can also use a `Color` object directly:\nwidget.styles.link_color_hover = Color(100, 30, 173)\n</code></pre>"},{"location":"styles/links/link_color_hover/#see-also","title":"See also","text":"<ul> <li><code>link-color</code> to set the color of link text.</li> <li><code>link-background-hover</code> to set the background color of link text when the mouse pointer is over it.</li> <li><code>link-style-hover</code> to set the style of link text when the mouse pointer is over it.</li> </ul>"},{"location":"styles/links/link_style/","title":"Link-style","text":"<p>The <code>link-style</code> style sets the text style for the link text.</p> <p>Note</p> <p><code>link-style</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_style/#syntax","title":"Syntax","text":"<pre>\nlink-style: &lt;text-style&gt;;\n</pre> <p><code>link-style</code> will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.</p>"},{"location":"styles/links/link_style/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-style</code> set to <code>underline</code>.</p>"},{"location":"styles/links/link_style/#example","title":"Example","text":"<p>The example below shows some links with different styles applied to their text. It also shows that <code>link-style</code> does not affect hyperlinks.</p> Outputlink_style.pylink_style.tcss <p> LinkStyleApp Visit\u00a0the\u00a0Textualize\u00a0website.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 You\u00a0can\u00a0also\u00a0click\u00a0here\u00a0for\u00a0the\u00a0bell\u00a0sound.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Exit\u00a0this\u00a0application. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkStyleApp(App):\n    CSS_PATH = \"link_style.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkStyleApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-style</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-style</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-style: bold italic;  /* (1)! */\n}\n\n#lbl3 {\n    link-style: reverse strike;\n}\n\n#lbl4 {\n    link-style: bold;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> </ol>"},{"location":"styles/links/link_style/#css","title":"CSS","text":"<pre><code>link-style: bold;\nlink-style: bold italic reverse;\n</code></pre>"},{"location":"styles/links/link_style/#python","title":"Python","text":"<pre><code>widget.styles.link_style = \"bold\"\nwidget.styles.link_style = \"bold italic reverse\"\n</code></pre>"},{"location":"styles/links/link_style/#see-also","title":"See also","text":"<ul> <li><code>link-style-hover</code> to set the style of link text when the mouse pointer is over it.</li> <li><code>text-style</code> to set the style of text in a widget.</li> </ul>"},{"location":"styles/links/link_style_hover/","title":"Link-style-hover","text":"<p>The <code>link-style-hover</code> style sets the text style for the link text when the mouse cursor is over the link.</p> <p>Note</p> <p><code>link-style-hover</code> only applies to Textual action links as described in the actions guide and not to regular hyperlinks.</p>"},{"location":"styles/links/link_style_hover/#syntax","title":"Syntax","text":"<pre>\nlink-style-hover: &lt;text-style&gt;;\n</pre> <p><code>link-style-hover</code> applies its <code>&lt;text-style&gt;</code> to the text of Textual action links when the mouse pointer is over them.</p>"},{"location":"styles/links/link_style_hover/#defaults","title":"Defaults","text":"<p>If not provided, a Textual action link will have <code>link-style-hover</code> set to <code>bold</code>.</p>"},{"location":"styles/links/link_style_hover/#example","title":"Example","text":"<p>The example below shows some links that have their color changed when the mouse moves over it. It also shows that <code>link-style-hover</code> does not affect hyperlinks.</p> Outputlink_style_hover.pylink_style_hover.tcss <p></p> <p>Note</p> <p>The background color also changes when the mouse moves over the links because that is the default behavior. That can be customised by setting <code>link-background-hover</code> but we haven't done so in this example.</p> <p>Note</p> <p>The GIF has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/link_style_hover.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\n\nclass LinkHoverStyleApp(App):\n    CSS_PATH = \"link_style_hover.tcss\"\n\n    def compose(self):\n        yield Label(\n            \"Visit the [link=https://textualize.io]Textualize[/link] website.\",\n            id=\"lbl1\",  # (1)!\n        )\n        yield Label(\n            \"Click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl2\",  # (2)!\n        )\n        yield Label(\n            \"You can also click [@click=app.bell]here[/] for the bell sound.\",\n            id=\"lbl3\",  # (3)!\n        )\n        yield Label(\n            \"[@click=app.quit]Exit this application.[/]\",\n            id=\"lbl4\",  # (4)!\n        )\n\n\nif __name__ == \"__main__\":\n    app = LinkHoverStyleApp()\n    app.run()\n</code></pre> <ol> <li>This label has a hyperlink so it won't be affected by the <code>link-style-hover</code> rule.</li> <li>This label has an \"action link\" that can be styled with <code>link-style-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style-hover</code>.</li> <li>This label has an \"action link\" that can be styled with <code>link-style-hover</code>.</li> </ol> <pre><code>#lbl1, #lbl2 {\n    link-style-hover: bold italic;  /* (1)! */\n}\n\n#lbl3 {\n    link-style-hover: reverse strike;\n}\n\n#lbl4 {\n    link-style-hover: bold;\n}\n</code></pre> <ol> <li>This will only affect one of the labels because action links are the only links that this rule affects.</li> <li>The default behavior for links on hover is to change to a different text style, so we don't need to change anything if all we want is to add emphasis to the link under the mouse.</li> </ol>"},{"location":"styles/links/link_style_hover/#css","title":"CSS","text":"<pre><code>link-style-hover: bold;\nlink-style-hover: bold italic reverse;\n</code></pre>"},{"location":"styles/links/link_style_hover/#python","title":"Python","text":"<pre><code>widget.styles.link_style_hover = \"bold\"\nwidget.styles.link_style_hover = \"bold italic reverse\"\n</code></pre>"},{"location":"styles/links/link_style_hover/#see-also","title":"See also","text":"<ul> <li><code>link-background-hover</code> to set the background color of link text when the mouse pointer is over it.</li> <li><code>link-color-hover</code> to set the color of link text when the mouse pointer is over it.</li> <li><code>link-style</code> to set the style of link text.</li> <li><code>text-style</code> to set the style of text in a widget.</li> </ul>"},{"location":"styles/scrollbar_colors/","title":"Scrollbar colors","text":"<p>There are a number of styles to set the colors used in Textual scrollbars. You won't typically need to do this, as the default themes have carefully chosen colors, but you can if you want to.</p> Style Applies to <code>scrollbar-background</code> Scrollbar background. <code>scrollbar-background-active</code> Scrollbar background when the thumb is being dragged. <code>scrollbar-background-hover</code> Scrollbar background when the mouse is hovering over it. <code>scrollbar-color</code> Scrollbar \"thumb\" (movable part). <code>scrollbar-color-active</code> Scrollbar thumb when it is active (being dragged). <code>scrollbar-color-hover</code> Scrollbar thumb when the mouse is hovering over it. <code>scrollbar-corner-color</code> The gap between the horizontal and vertical scrollbars."},{"location":"styles/scrollbar_colors/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-background-active: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-color: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-color-active: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n\nscrollbar-corner-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p>Visit each style's reference page to learn more about how the values are used.</p>"},{"location":"styles/scrollbar_colors/#example","title":"Example","text":"<p>This example shows two panels that contain oversized text. The right panel sets <code>scrollbar-background</code>, <code>scrollbar-color</code>, and <code>scrollbar-corner-color</code>, and the left panel shows the default colors for comparison.</p> Outputscrollbars.pyscrollbars.tcss <p> ScrollbarApp I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0t I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0tI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0t And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turnAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn see\u00a0its\u00a0path.see\u00a0its\u00a0path. Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0 will\u00a0remain.will\u00a0remain. I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0t I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0tI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0t And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turnAnd\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn see\u00a0its\u00a0path.\u2583\u2583see\u00a0its\u00a0path.\u2583\u2583 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0 will\u00a0remain.will\u00a0remain. I\u00a0must\u00a0not\u00a0fear.I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer.Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0tFear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0t I\u00a0will\u00a0face\u00a0my\u00a0fear.I\u00a0will\u00a0face\u00a0my\u00a0fear. I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0tI\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0t \u258d\u258d </p> <pre><code>from textual.app import App\nfrom textual.containers import Horizontal, ScrollableContainer\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarApp(App):\n    CSS_PATH = \"scrollbars.tcss\"\n\n    def compose(self):\n        yield Horizontal(\n            ScrollableContainer(Label(TEXT * 10)),\n            ScrollableContainer(Label(TEXT * 10), classes=\"right\"),\n        )\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarApp()\n    app.run()\n</code></pre> <pre><code>Label {\n    width: 150%;\n    height: 150%;\n}\n\n.right {\n    scrollbar-background: red;\n    scrollbar-color: green;\n    scrollbar-corner-color: blue;\n}\n\nHorizontal &gt; ScrollableContainer {\n    width: 50%;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/","title":"Scrollbar-background","text":"<p>The <code>scrollbar-background</code> style sets the background color of the scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-background</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of a scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/#css","title":"CSS","text":"<pre><code>scrollbar-backround: blue;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_background = \"blue\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background-active</code> to set the scrollbar background color when the scrollbar is being dragged.</li> <li><code>scrollbar-background-hover</code> to set the scrollbar background color when the mouse pointer is over it.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> <li><code>scrollbar-corner-color</code> to set the color of the corner where horizontal and vertical scrollbars meet.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/","title":"Scrollbar-background-active","text":"<p>The <code>scrollbar-background-active</code> style sets the background color of the scrollbar when the thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background-active: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-background-active</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of a scrollbar when its thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#css","title":"CSS","text":"<pre><code>scrollbar-backround-active: red;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_background_active = \"red\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_active/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-background-hover</code> to set the scrollbar background color when the mouse pointer is over it.</li> <li><code>scrollbar-color-active</code> to set the scrollbar color when the scrollbar is being dragged.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/","title":"Scrollbar-background-hover","text":"<p>The <code>scrollbar-background-hover</code> style sets the background color of the scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#syntax","title":"Syntax","text":"<pre>\nscrollbar-background-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-background-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the background color of a scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#css","title":"CSS","text":"<pre><code>scrollbar-background-hover: purple;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_background_hover = \"purple\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#see-also","title":"See also","text":""},{"location":"styles/scrollbar_colors/scrollbar_background_hover/#see-also_1","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-background-active</code> to set the scrollbar background color when the scrollbar is being dragged.</li> <li><code>scrollbar-color-hover</code> to set the scrollbar color when the mouse pointer is over it.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_color/","title":"Scrollbar-color","text":"<p>The <code>scrollbar-color</code> style sets the color of the scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color/#syntax","title":"Syntax","text":"<pre>\nscrollbar-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-color</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of a scrollbar.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color/#css","title":"CSS","text":"<pre><code>scrollbar-color: cyan;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_color = \"cyan\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-color-active</code> to set the scrollbar color when the scrollbar is being dragged.</li> <li><code>scrollbar-color-hover</code> to set the scrollbar color when the mouse pointer is over it.</li> <li><code>scrollbar-corner-color</code> to set the color of the corner where horizontal and vertical scrollbars meet.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/","title":"Scrollbar-color-active","text":"<p>The <code>scrollbar-color-active</code> style sets the color of the scrollbar when the thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#syntax","title":"Syntax","text":"<pre>\nscrollbar-color-active: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-color-active</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of a scrollbar when its thumb is being dragged.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#css","title":"CSS","text":"<pre><code>scrollbar-color-active: yellow;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_color_active = \"yellow\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_active/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background-active</code> to set the scrollbar background color when the scrollbar is being dragged.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> <li><code>scrollbar-color-hover</code> to set the scrollbar color when the mouse pointer is over it.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/","title":"Scrollbar-color-hover","text":"<p>The <code>scrollbar-color-hover</code> style sets the color of the scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#syntax","title":"Syntax","text":"<pre>\nscrollbar-color-hover: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-color-hover</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of a scrollbar when the cursor is over it.</p>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#example","title":"Example","text":"Outputscrollbars2.pyscrollbars2.tcss <p>Note</p> <p>The GIF above has reduced quality to make it easier to load in the documentation. Try running the example yourself with <code>textual run docs/examples/styles/scrollbars2.py</code>.</p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass Scrollbar2App(App):\n    CSS_PATH = \"scrollbars2.tcss\"\n\n    def compose(self):\n        yield Label(TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = Scrollbar2App()\n    app.run()\n</code></pre> <pre><code>Screen {\n    scrollbar-background: blue;\n    scrollbar-background-active: red;\n    scrollbar-background-hover: purple;\n    scrollbar-color: cyan;\n    scrollbar-color-active: yellow;\n    scrollbar-color-hover: pink;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#css","title":"CSS","text":"<pre><code>scrollbar-color-hover: pink;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_color_hover = \"pink\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_color_hover/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background-hover</code> to set the scrollbar background color when the mouse pointer is over it.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> <li><code>scrollbar-color-active</code> to set the scrollbar color when the scrollbar is being dragged.</li> </ul>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/","title":"Scrollbar-corner-color","text":"<p>The <code>scrollbar-corner-color</code> style sets the color of the gap between the horizontal and vertical scrollbars.</p>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#syntax","title":"Syntax","text":"<pre>\nscrollbar-corner-color: &lt;color&gt; [&lt;percentage&gt;];\n</pre> <p><code>scrollbar-corner-color</code> accepts a <code>&lt;color&gt;</code> (with an optional opacity level defined by a <code>&lt;percentage&gt;</code>) that is used to define the color of the gap between the horizontal and vertical scrollbars of a widget.</p>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#example","title":"Example","text":"<p>The example below sets the scrollbar corner (bottom-right corner of the screen) to white.</p> Outputscrollbar_corner_color.pyscrollbar_corner_color.tcss <p> ScrollbarCornerColorApp I\u00a0must\u00a0not\u00a0fear.\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings I\u00a0must\u00a0not\u00a0fear. Fear\u00a0is\u00a0the\u00a0mind-killer. Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration. </p> <pre><code>from textual.app import App\nfrom textual.widgets import Label\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\n\"\"\"\n\n\nclass ScrollbarCornerColorApp(App):\n    CSS_PATH = \"scrollbar_corner_color.tcss\"\n\n    def compose(self):\n        yield Label(TEXT.replace(\"\\n\", \" \") + \"\\n\" + TEXT * 10)\n\n\nif __name__ == \"__main__\":\n    app = ScrollbarCornerColorApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    overflow: auto auto;\n    scrollbar-corner-color: white;\n}\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#css","title":"CSS","text":"<pre><code>scrollbar-corner-color: white;\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#python","title":"Python","text":"<pre><code>widget.styles.scrollbar_corner_color = \"white\"\n</code></pre>"},{"location":"styles/scrollbar_colors/scrollbar_corner_color/#see-also","title":"See also","text":"<ul> <li><code>scrollbar-background</code> to set the background color of scrollbars.</li> <li><code>scrollbar-color</code> to set the color of scrollbars.</li> </ul>"},{"location":"widgets/","title":"Widgets","text":"<p>A reference to the builtin widgets.</p> <p>See the links to the left of the page, or in the hamburger menu (three horizontal bars, top left).</p>"},{"location":"widgets/button/","title":"Button","text":"<p>A simple button widget which can be pressed using a mouse click or by pressing Enter when it has focus.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/button/#example","title":"Example","text":"<p>The example below shows each button variant, and its disabled equivalent. Clicking any of the non-disabled buttons in the example app below will result in the app exiting and the details of the selected button being printed to the console.</p> Outputbutton.pybutton.tcss <p> ButtonsApp Standard\u00a0ButtonsDisabled\u00a0Buttons \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Default\u00a0\u00a0Default\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Primary!\u00a0\u00a0Primary!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Success!\u00a0\u00a0Success!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Warning!\u00a0\u00a0Warning!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0Error!\u00a0\u00a0Error!\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Button, Static\n\n\nclass ButtonsApp(App[str]):\n    CSS_PATH = \"button.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Horizontal(\n            VerticalScroll(\n                Static(\"Standard Buttons\", classes=\"header\"),\n                Button(\"Default\"),\n                Button(\"Primary!\", variant=\"primary\"),\n                Button.success(\"Success!\"),\n                Button.warning(\"Warning!\"),\n                Button.error(\"Error!\"),\n            ),\n            VerticalScroll(\n                Static(\"Disabled Buttons\", classes=\"header\"),\n                Button(\"Default\", disabled=True),\n                Button(\"Primary!\", variant=\"primary\", disabled=True),\n                Button.success(\"Success!\", disabled=True),\n                Button.warning(\"Warning!\", disabled=True),\n                Button.error(\"Error!\", disabled=True),\n            ),\n        )\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.exit(str(event.button))\n\n\nif __name__ == \"__main__\":\n    app = ButtonsApp()\n    print(app.run())\n</code></pre> <pre><code>Button {\n    margin: 1 2;\n}\n\nHorizontal &gt; VerticalScroll {\n    width: 24;\n}\n\n.header {\n    margin: 1 0 0 2;\n    text-style: bold;\n}\n</code></pre>"},{"location":"widgets/button/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>label</code> <code>str</code> <code>\"\"</code> The text that appears inside the button. <code>variant</code> <code>ButtonVariant</code> <code>\"default\"</code> Semantic styling variant. One of <code>default</code>, <code>primary</code>, <code>success</code>, <code>warning</code>, <code>error</code>. <code>disabled</code> <code>bool</code> <code>False</code> Whether the button is disabled or not. Disabled buttons cannot be focused or clicked, and are styled in a way that suggests this."},{"location":"widgets/button/#messages","title":"Messages","text":"<ul> <li>Button.Pressed</li> </ul>"},{"location":"widgets/button/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/button/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/button/#additional-notes","title":"Additional Notes","text":"<ul> <li>The spacing between the text and the edges of a button are not due to padding. The default styling for a <code>Button</code> has the <code>height</code> set to 3 lines and a <code>min-width</code> of 16 columns. To create a button with zero visible padding, you will need to change these values and also remove the border with <code>border: none;</code>.</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A simple clickable button.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>ButtonVariant</code> <p>The variant of the button.</p> <code>'default'</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/button/#textual.widgets.Button(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(variant)","title":"<code>variant</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.active_effect_duration","title":"active_effect_duration  <code>instance-attribute</code>","text":"<pre><code>active_effect_duration = 0.2\n</code></pre> <p>Amount of time in seconds the button 'press' animation lasts.</p>"},{"location":"widgets/button/#textual.widgets.Button.label","title":"label  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>label = label\n</code></pre> <p>The text label that appears within the button.</p>"},{"location":"widgets/button/#textual.widgets.Button.variant","title":"variant  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>variant = variant\n</code></pre> <p>The variant name for the button.</p>"},{"location":"widgets/button/#textual.widgets.Button.Pressed","title":"Pressed","text":"<pre><code>Pressed(button)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Event sent when a <code>Button</code> is pressed.</p> <p>Can be handled using <code>on_button_pressed</code> in a subclass of <code>Button</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/button/#textual.widgets.Button.Pressed.button","title":"button  <code>instance-attribute</code>","text":"<pre><code>button = button\n</code></pre> <p>The button that was pressed.</p>"},{"location":"widgets/button/#textual.widgets.Button.Pressed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for Pressed.button.</p> <p>This will be the same value as Pressed.button.</p>"},{"location":"widgets/button/#textual.widgets.Button.action_press","title":"action_press","text":"<pre><code>action_press()\n</code></pre> <p>Activate a press of the button.</p>"},{"location":"widgets/button/#textual.widgets.Button.error","title":"error  <code>classmethod</code>","text":"<pre><code>error(\n    label=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Utility constructor for creating an error Button variant.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Button</code> <p>A <code>Button</code> widget of the 'error' variant.</p>"},{"location":"widgets/button/#textual.widgets.Button.error(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.error(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.press","title":"press","text":"<pre><code>press()\n</code></pre> <p>Animate the button and send the Pressed message.</p> <p>Can be used to simulate the button being pressed by a user.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The button instance.</p>"},{"location":"widgets/button/#textual.widgets.Button.success","title":"success  <code>classmethod</code>","text":"<pre><code>success(\n    label=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Utility constructor for creating a success Button variant.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Button</code> <p>A <code>Button</code> widget of the 'success' variant.</p>"},{"location":"widgets/button/#textual.widgets.Button.success(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.success(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.validate_label","title":"validate_label","text":"<pre><code>validate_label(label)\n</code></pre> <p>Parse markup for self.label</p>"},{"location":"widgets/button/#textual.widgets.Button.warning","title":"warning  <code>classmethod</code>","text":"<pre><code>warning(\n    label=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Utility constructor for creating a warning Button variant.</p> <p>Parameters:</p> Name Type Description Default <code>TextType | None</code> <p>The text that appears within the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Button</code> <p>A <code>Button</code> widget of the 'warning' variant.</p>"},{"location":"widgets/button/#textual.widgets.Button.warning(label)","title":"<code>label</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(name)","title":"<code>name</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(id)","title":"<code>id</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/button/#textual.widgets.Button.warning(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/button/#textual.widgets.button","title":"textual.widgets.button","text":""},{"location":"widgets/button/#textual.widgets.button.ButtonVariant","title":"ButtonVariant  <code>module-attribute</code>","text":"<pre><code>ButtonVariant = Literal[\n    \"default\", \"primary\", \"success\", \"warning\", \"error\"\n]\n</code></pre> <p>The names of the valid button variants.</p> <p>These are the variants that can be used with a <code>Button</code>.</p>"},{"location":"widgets/checkbox/","title":"Checkbox","text":"<p>Added in version 0.13.0</p> <p>A simple checkbox widget which stores a boolean value.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/checkbox/#example","title":"Example","text":"<p>The example below shows check boxes in various states.</p> Outputcheckbox.pycheckbox.tcss <p> CheckboxApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Arrakis\u00a0\ud83d\ude13\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Caladan\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Chusuk\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGiedi\u00a0Prime\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258cGinaz\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590X\u258c\u00a0Grumman\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2583\u2583 \u258a\u2590X\u258cKaitain\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import VerticalScroll\nfrom textual.widgets import Checkbox\n\n\nclass CheckboxApp(App[None]):\n    CSS_PATH = \"checkbox.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with VerticalScroll():\n            yield Checkbox(\"Arrakis :sweat:\")\n            yield Checkbox(\"Caladan\")\n            yield Checkbox(\"Chusuk\")\n            yield Checkbox(\"[b]Giedi Prime[/b]\")\n            yield Checkbox(\"[magenta]Ginaz[/]\")\n            yield Checkbox(\"Grumman\", True)\n            yield Checkbox(\"Kaitain\", id=\"initial_focus\")\n            yield Checkbox(\"Novebruns\", True)\n\n    def on_mount(self):\n        self.query_one(\"#initial_focus\", Checkbox).focus()\n\n\nif __name__ == \"__main__\":\n    CheckboxApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nVerticalScroll {\n    width: auto;\n    height: auto;\n    background: $boost;\n    padding: 2;\n}\n</code></pre>"},{"location":"widgets/checkbox/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>value</code> <code>bool</code> <code>False</code> The value of the checkbox."},{"location":"widgets/checkbox/#messages","title":"Messages","text":"<ul> <li>Checkbox.Changed</li> </ul>"},{"location":"widgets/checkbox/#bindings","title":"Bindings","text":"<p>The checkbox widget defines the following bindings:</p> Key(s) Description enter, space Toggle the value."},{"location":"widgets/checkbox/#component-classes","title":"Component Classes","text":"<p>The checkbox widget inherits the following component classes:</p> Class Description <code>toggle--button</code> Targets the toggle button itself. <code>toggle--label</code> Targets the text label of the toggle button. <p>               Bases: <code>ToggleButton</code></p> <p>A check box widget that represents a boolean value.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label for the toggle.</p> <code>''</code> <code>bool</code> <p>The initial value of the toggle.</p> <code>False</code> <code>bool</code> <p>Should the button come before the label, or after?</p> <code>True</code> <code>str | None</code> <p>The name of the toggle.</p> <code>None</code> <code>str | None</code> <p>The ID of the toggle in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the toggle.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>RenderableType | None = None,</p> <code>None</code>"},{"location":"widgets/checkbox/#textual.widgets.Checkbox(label)","title":"<code>label</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(value)","title":"<code>value</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(button_first)","title":"<code>button_first</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(name)","title":"<code>name</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(id)","title":"<code>id</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed","title":"Changed","text":"<pre><code>Changed(toggle_button, value)\n</code></pre> <p>               Bases: <code>Changed</code></p> <p>Posted when the value of the checkbox changes.</p> <p>This message can be handled using an <code>on_checkbox_changed</code> method.</p> <p>Parameters:</p> Name Type Description Default <code>ToggleButton</code> <p>The toggle button sending the message.</p> required <code>bool</code> <p>The value of the toggle button.</p> required"},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed(toggle_button)","title":"<code>toggle_button</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed(value)","title":"<code>value</code>","text":""},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed.checkbox","title":"checkbox  <code>property</code>","text":"<pre><code>checkbox\n</code></pre> <p>The checkbox that was changed.</p>"},{"location":"widgets/checkbox/#textual.widgets.Checkbox.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for Changed.checkbox.</p>"},{"location":"widgets/collapsible/","title":"Collapsible","text":"<p>Added in version 0.37</p> <p>A container with a title that can be used to show (expand) or hide (collapse) content, either by clicking or focusing and pressing Enter.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/collapsible/#composing","title":"Composing","text":"<p>You can add content to a Collapsible widget either by passing in children to the constructor, or with a context manager (<code>with</code> statement).</p> <p>Here is an example of using the constructor to add content:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Collapsible(Label(\"Hello, world.\"))\n</code></pre> <p>Here's how the to use it with the context manager:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible():\n        yield Label(\"Hello, world.\")\n</code></pre> <p>The second form is generally preferred, but the end result is the same.</p>"},{"location":"widgets/collapsible/#title","title":"Title","text":"<p>The default title \"Toggle\" can be customized by setting the <code>title</code> parameter of the constructor:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible(title=\"An interesting story.\"):\n        yield Label(\"Interesting but verbose story.\")\n</code></pre>"},{"location":"widgets/collapsible/#initial-state","title":"Initial State","text":"<p>The initial state of the <code>Collapsible</code> widget can be customized via the <code>collapsed</code> parameter of the constructor:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible(title=\"Contents 1\", collapsed=False):\n        yield Label(\"Hello, world.\")\n\n    with Collapsible(title=\"Contents 2\", collapsed=True):  # Default.\n        yield Label(\"Hello, world.\")\n</code></pre>"},{"location":"widgets/collapsible/#collapseexpand-symbols","title":"Collapse/Expand Symbols","text":"<p>The symbols used to show the collapsed / expanded state can be customized by setting the parameters <code>collapsed_symbol</code> and <code>expanded_symbol</code>:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with Collapsible(collapsed_symbol=\"&gt;&gt;&gt;\", expanded_symbol=\"v\"):\n        yield Label(\"Hello, world.\")\n</code></pre>"},{"location":"widgets/collapsible/#examples","title":"Examples","text":"<p>The following example contains three <code>Collapsible</code>s in different states.</p> All expandedAll collapsedMixedcollapsible.py <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Leto #\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides Head\u00a0of\u00a0House\u00a0Atreides.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Jessica Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Paul\u2586\u2586 \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p> <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Leto \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Jessica \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Paul \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p> <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Leto #\u00a0Duke\u00a0Leto\u00a0I\u00a0Atreides Head\u00a0of\u00a0House\u00a0Atreides.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Jessica Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Paul \u00a0c\u00a0Collapse\u00a0All\u00a0\u00a0e\u00a0Expand\u00a0All\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Collapsible, Footer, Label, Markdown\n\nLETO = \"\"\"\\\n# Duke Leto I Atreides\n\nHead of House Atreides.\"\"\"\n\nJESSICA = \"\"\"\n# Lady Jessica\n\nBene Gesserit and concubine of Leto, and mother of Paul and Alia.\n\"\"\"\n\nPAUL = \"\"\"\n# Paul Atreides\n\nSon of Leto and Jessica.\n\"\"\"\n\n\nclass CollapsibleApp(App[None]):\n    \"\"\"An example of collapsible container.\"\"\"\n\n    BINDINGS = [\n        (\"c\", \"collapse_or_expand(True)\", \"Collapse All\"),\n        (\"e\", \"collapse_or_expand(False)\", \"Expand All\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Compose app with collapsible containers.\"\"\"\n        yield Footer()\n        with Collapsible(collapsed=False, title=\"Leto\"):\n            yield Label(LETO)\n        yield Collapsible(Markdown(JESSICA), collapsed=False, title=\"Jessica\")\n        with Collapsible(collapsed=True, title=\"Paul\"):\n            yield Markdown(PAUL)\n\n    def action_collapse_or_expand(self, collapse: bool) -&gt; None:\n        for child in self.walk_children(Collapsible):\n            child.collapsed = collapse\n\n\nif __name__ == \"__main__\":\n    app = CollapsibleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/collapsible/#setting-initial-state","title":"Setting Initial State","text":"<p>The example below shows nested <code>Collapsible</code> widgets and how to set their initial state.</p> Outputcollapsible_nested.py <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25bc\u00a0Toggle \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u25b6\u00a0Toggle </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Collapsible, Label\n\n\nclass CollapsibleApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        with Collapsible(collapsed=False):\n            with Collapsible():\n                yield Label(\"Hello, world.\")\n\n\nif __name__ == \"__main__\":\n    app = CollapsibleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/collapsible/#custom-symbols","title":"Custom Symbols","text":"<p>The following example shows <code>Collapsible</code> widgets with custom expand/collapse symbols.</p> Outputcollapsible_custom_symbol.py <p> CollapsibleApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 &gt;&gt;&gt;\u00a0Togglev\u00a0Toggle Hello,\u00a0world.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Collapsible, Label\n\n\nclass CollapsibleApp(App[None]):\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            with Collapsible(\n                collapsed_symbol=\"&gt;&gt;&gt;\",\n                expanded_symbol=\"v\",\n            ):\n                yield Label(\"Hello, world.\")\n\n            with Collapsible(\n                collapsed_symbol=\"&gt;&gt;&gt;\",\n                expanded_symbol=\"v\",\n                collapsed=False,\n            ):\n                yield Label(\"Hello, world.\")\n\n\nif __name__ == \"__main__\":\n    app = CollapsibleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/collapsible/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>collapsed</code> <code>bool</code> <code>True</code> Controls the collapsed/expanded state of the widget. <code>title</code> <code>str</code> <code>\"Toggle\"</code> Title of the collapsed/expanded contents."},{"location":"widgets/collapsible/#messages","title":"Messages","text":"<ul> <li>Collapsible.Toggled</li> </ul>"},{"location":"widgets/collapsible/#bindings","title":"Bindings","text":"<p>The collapsible widget defines the following binding on its title:</p> Key(s) Description enter Toggle the collapsible."},{"location":"widgets/collapsible/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A collapsible container.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Contents that will be collapsed/expanded.</p> <code>()</code> <code>str</code> <p>Title of the collapsed/expanded contents.</p> <code>'Toggle'</code> <code>bool</code> <p>Default status of the contents.</p> <code>True</code> <code>str</code> <p>Collapsed symbol before the title.</p> <code>'\u25b6'</code> <code>str</code> <p>Expanded symbol before the title.</p> <code>'\u25bc'</code> <code>str | None</code> <p>The name of the collapsible.</p> <code>None</code> <code>str | None</code> <p>The ID of the collapsible in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the collapsible.</p> <code>None</code> <code>bool</code> <p>Whether the collapsible is disabled or not.</p> <code>False</code>"},{"location":"widgets/collapsible/#textual.widgets.Collapsible(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(title)","title":"<code>title</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(collapsed)","title":"<code>collapsed</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(collapsed_symbol)","title":"<code>collapsed_symbol</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(expanded_symbol)","title":"<code>expanded_symbol</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(name)","title":"<code>name</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(id)","title":"<code>id</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Collapsed","title":"Collapsed","text":"<pre><code>Collapsed(collapsible)\n</code></pre> <p>               Bases: <code>Toggled</code></p> <p>Event sent when the <code>Collapsible</code> widget is collapsed.</p> <p>Can be handled using <code>on_collapsible_collapsed</code> in a subclass of <code>Collapsible</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>Collapsible</code> <p>The <code>Collapsible</code> widget that was toggled.</p> required"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Collapsed(collapsible)","title":"<code>collapsible</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Expanded","title":"Expanded","text":"<pre><code>Expanded(collapsible)\n</code></pre> <p>               Bases: <code>Toggled</code></p> <p>Event sent when the <code>Collapsible</code> widget is expanded.</p> <p>Can be handled using <code>on_collapsible_expanded</code> in a subclass of <code>Collapsible</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>Collapsible</code> <p>The <code>Collapsible</code> widget that was toggled.</p> required"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Expanded(collapsible)","title":"<code>collapsible</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled","title":"Toggled","text":"<pre><code>Toggled(collapsible)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Parent class subclassed by <code>Collapsible</code> messages.</p> <p>Can be handled with <code>on(Collapsible.Toggled)</code> if you want to handle expansions and collapsed in the same way, or you can handle the specific events individually.</p> <p>Parameters:</p> Name Type Description Default <code>Collapsible</code> <p>The <code>Collapsible</code> widget that was toggled.</p> required"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled(collapsible)","title":"<code>collapsible</code>","text":""},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled.collapsible","title":"collapsible  <code>instance-attribute</code>","text":"<pre><code>collapsible = collapsible\n</code></pre> <p>The collapsible that was toggled.</p>"},{"location":"widgets/collapsible/#textual.widgets.Collapsible.Toggled.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for Toggled.collapsible.</p>"},{"location":"widgets/content_switcher/","title":"ContentSwitcher","text":"<p>Added in version 0.14.0</p> <p>A widget for containing and switching display between multiple child widgets.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/content_switcher/#example","title":"Example","text":"<p>The example below uses a <code>ContentSwitcher</code> in combination with two <code>Button</code>s to create a simple tabbed view. Note how each <code>Button</code> has an ID set, and how each child of the <code>ContentSwitcher</code> has a corresponding ID; then a <code>Button.Clicked</code> handler is used to set <code>ContentSwitcher.current</code> to switch between the different views.</p> Outputcontent_switcher.pycontent_switcher.tcss <p> ContentSwitcherApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0DataTable\u00a0\u00a0Markdown\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u00a0Book\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Year\u00a0\u2502 \u2502\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01965\u00a0\u2502 \u2502\u00a0Dune\u00a0Messiah\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01969\u00a0\u2502 \u2502\u00a0Children\u00a0of\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01976\u00a0\u2502 \u2502\u00a0God\u00a0Emperor\u00a0of\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01981\u00a0\u2502 \u2502\u00a0Heretics\u00a0of\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01984\u00a0\u2502 \u2502\u00a0Chapterhouse:\u00a0Dune\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01985\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Button, ContentSwitcher, DataTable, Markdown\n\nMARKDOWN_EXAMPLE = \"\"\"# Three Flavours Cornetto\n\nThe Three Flavours Cornetto trilogy is an anthology series of British\ncomedic genre films directed by Edgar Wright.\n\n## Shaun of the Dead\n\n| Flavour | UK Release Date | Director |\n| -- | -- | -- |\n| Strawberry | 2004-04-09 | Edgar Wright |\n\n## Hot Fuzz\n\n| Flavour | UK Release Date | Director |\n| -- | -- | -- |\n| Classico | 2007-02-17 | Edgar Wright |\n\n## The World's End\n\n| Flavour | UK Release Date | Director |\n| -- | -- | -- |\n| Mint | 2013-07-19 | Edgar Wright |\n\"\"\"\n\n\nclass ContentSwitcherApp(App[None]):\n    CSS_PATH = \"content_switcher.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal(id=\"buttons\"):  # (1)!\n            yield Button(\"DataTable\", id=\"data-table\")  # (2)!\n            yield Button(\"Markdown\", id=\"markdown\")  # (3)!\n\n        with ContentSwitcher(initial=\"data-table\"):  # (4)!\n            yield DataTable(id=\"data-table\")\n            with VerticalScroll(id=\"markdown\"):\n                yield Markdown(MARKDOWN_EXAMPLE)\n\n    def on_button_pressed(self, event: Button.Pressed) -&gt; None:\n        self.query_one(ContentSwitcher).current = event.button.id  # (5)!\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(\"Book\", \"Year\")\n        table.add_rows(\n            [\n                (title.ljust(35), year)\n                for title, year in (\n                    (\"Dune\", 1965),\n                    (\"Dune Messiah\", 1969),\n                    (\"Children of Dune\", 1976),\n                    (\"God Emperor of Dune\", 1981),\n                    (\"Heretics of Dune\", 1984),\n                    (\"Chapterhouse: Dune\", 1985),\n                )\n            ]\n        )\n\n\nif __name__ == \"__main__\":\n    ContentSwitcherApp().run()\n</code></pre> <ol> <li>A <code>Horizontal</code> to hold the buttons, each with a unique ID.</li> <li>This button will select the <code>DataTable</code> in the <code>ContentSwitcher</code>.</li> <li>This button will select the <code>Markdown</code> in the <code>ContentSwitcher</code>.</li> <li>Note that the initial visible content is set by its ID, see below.</li> <li>When a button is pressed, its ID is used to switch to a different widget in the <code>ContentSwitcher</code>. Remember that IDs are unique within parent, so the buttons and the widgets in the <code>ContentSwitcher</code> can share IDs.</li> </ol> <pre><code>Screen {\n    align: center middle;\n    padding: 1;\n}\n\n#buttons {\n    height: 3;\n    width: auto;\n}\n\nContentSwitcher {\n    background: $panel;\n    border: round $primary;\n    width: 90%;\n    height: 1fr;\n}\n\nDataTable {\n    background: $panel;\n}\n\nMarkdownH2 {\n    background: $primary;\n    color: yellow;\n    border: none;\n    padding: 0;\n}\n</code></pre> <p>When the user presses the \"Markdown\" button the view is switched:</p> <p> ContentSwitcherApp \u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u00a0DataTable\u00a0\u00a0Markdown\u00a0 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\u2502 \u2502\u2502 \u2502Three\u00a0Flavours\u00a0Cornetto\u2502 \u2502\u2502 \u2502\u00a0\u00a0The\u00a0Three\u00a0Flavours\u00a0Cornetto\u00a0trilogy\u00a0is\u00a0an\u00a0anthology\u00a0series\u00a0of\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0British\u00a0comedic\u00a0genre\u00a0films\u00a0directed\u00a0by\u00a0Edgar\u00a0Wright.\u2502 \u2502\u2502 \u2502\u2502 \u2502Shaun\u00a0of\u00a0the\u00a0Dead\u2502 \u2502\u2502 \u2502\u2502 \u2502Flavour\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0UK\u00a0Release\u00a0Date\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Director\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0Strawberry\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02004-04-09\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edgar\u00a0Wright\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502Hot\u00a0Fuzz\u2502 \u2502\u2502 \u2502\u2502 \u2502Flavour\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0UK\u00a0Release\u00a0Date\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Director\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0Classico\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02007-02-17\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edgar\u00a0Wright\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502The\u00a0World's\u00a0End\u2502 \u2502\u2502 \u2502\u2502 \u2502Flavour\u00a0\u00a0\u00a0\u00a0\u00a0UK\u00a0Release\u00a0Date\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Director\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0\u00a0\u00a0\u2502 \u2502\u00a0\u00a0\u00a0Mint\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02013-07-19\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edgar\u00a0Wright\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2587\u2587\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f </p>"},{"location":"widgets/content_switcher/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>current</code> <code>str</code> | <code>None</code> <code>None</code> The ID of the currently-visible child. <code>None</code> means nothing is visible."},{"location":"widgets/content_switcher/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/content_switcher/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/content_switcher/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Container</code></p> <p>A widget for switching between different children.</p> Note <p>All child widgets that are to be switched between need a unique ID. Children that have no ID will be hidden and ignored.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>The widgets to switch between.</p> <code>()</code> <code>str | None</code> <p>The name of the content switcher.</p> <code>None</code> <code>str | None</code> <p>The ID of the content switcher in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the content switcher.</p> <code>None</code> <code>bool</code> <p>Whether the content switcher is disabled or not.</p> <code>False</code> <code>str | None</code> <p>The ID of the initial widget to show, <code>None</code> or empty string for the first tab.</p> <code>None</code> Note <p>If <code>initial</code> is not supplied no children will be shown to start with.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(name)","title":"<code>name</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(id)","title":"<code>id</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher(initial)","title":"<code>initial</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.current","title":"current  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>current = reactive[Optional[str]](None, init=False)\n</code></pre> <p>The ID of the currently-displayed widget.</p> <p>If set to <code>None</code> then no widget is visible.</p> Note <p>If set to an unknown ID, this will result in <code>NoMatches</code> being raised.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.visible_content","title":"visible_content  <code>property</code>","text":"<pre><code>visible_content\n</code></pre> <p>A reference to the currently-visible widget.</p> <p><code>None</code> if nothing is visible.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content","title":"add_content","text":"<pre><code>add_content(widget, *, id=None, set_current=False)\n</code></pre> <p>Add new content to the <code>ContentSwitcher</code>.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>A Widget to add.</p> required <code>str | None</code> <p>ID for the widget, or <code>None</code> if the widget already has an ID.</p> <code>None</code> <code>bool</code> <p>Set the new widget as current (which will cause it to display).</p> <code>False</code> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An awaitable to wait for the new content to be mounted.</p>"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content(widget)","title":"<code>widget</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content(id)","title":"<code>id</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.add_content(set_current)","title":"<code>set_current</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.watch_current","title":"watch_current","text":"<pre><code>watch_current(old, new)\n</code></pre> <p>React to the current visible child choice being changed.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The old widget ID (or <code>None</code> if there was no widget).</p> required <code>str | None</code> <p>The new widget ID (or <code>None</code> if nothing should be shown).</p> required"},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.watch_current(old)","title":"<code>old</code>","text":""},{"location":"widgets/content_switcher/#textual.widgets.ContentSwitcher.watch_current(new)","title":"<code>new</code>","text":""},{"location":"widgets/data_table/","title":"DataTable","text":"<p>A widget to display text in a table.  This includes the ability to update data, use a cursor to navigate data, respond to mouse clicks, delete rows or columns, and individually render each cell as a Rich Text renderable.  DataTable provides an efficiently displayed and updated table capable for most applications.</p> <p>Applications may have custom rules for formatting, numbers, repopulating tables after searching or filtering, and responding to selections.  The widget emits events to interface with custom logic.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/data_table/#guide","title":"Guide","text":""},{"location":"widgets/data_table/#adding-data","title":"Adding data","text":"<p>The following example shows how to fill a table with data. First, we use add_columns to include the <code>lane</code>, <code>swimmer</code>, <code>country</code>, and <code>time</code> columns in the table. After that, we use the add_rows method to insert the rows into the table.</p> Outputdata_table.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(*ROWS[0])\n        table.add_rows(ROWS[1:])\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>To add a single row or column use add_row and add_column, respectively.</p>"},{"location":"widgets/data_table/#styling-and-justifying-cells","title":"Styling and justifying cells","text":"<p>Cells can contain more than just plain strings - Rich renderables such as <code>Text</code> are also supported. <code>Text</code> objects provide an easy way to style and justify cell content:</p> Outputdata_table_renderables.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0Singapore50.39 \u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0PhelpsUnited\u00a0States51.14 \u00a0\u00a0\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0South\u00a0Africa51.14 \u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary51.14 \u00a0\u00a0\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China51.26 \u00a0\u00a0\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France51.58 \u00a0\u00a0\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0ShieldsUnited\u00a0States51.73 \u00a0\u00a0\u00a01Aleksandr\u00a0Sadovnikov\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Russia51.84 \u00a0\u00a010\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0Scotland51.84 </p> <pre><code>from rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(*ROWS[0])\n        for row in ROWS[1:]:\n            # Adding styled and justified `Text` objects instead of plain strings.\n            styled_row = [\n                Text(str(cell), style=\"italic #03AC13\", justify=\"right\") for cell in row\n            ]\n            table.add_row(*styled_row)\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#keys","title":"Keys","text":"<p>When adding a row to the table, you can supply a key to add_row. A key is a unique identifier for that row. If you don't supply a key, Textual will generate one for you and return it from <code>add_row</code>. This key can later be used to reference the row, regardless of its current position in the table.</p> <p>When working with data from a database, for example, you may wish to set the row <code>key</code> to the primary key of the data to ensure uniqueness. The method add_column also accepts a <code>key</code> argument and works similarly.</p> <p>Keys are important because cells in a data table can change location due to factors like row deletion and sorting. Thus, using keys instead of coordinates allows us to refer to data without worrying about its current location in the table.</p> <p>If you want to change the table based solely on coordinates, you may need to convert that coordinate to a cell key first using the coordinate_to_cell_key method.</p>"},{"location":"widgets/data_table/#cursors","title":"Cursors","text":"<p>A cursor allows navigating within a table with the keyboard or mouse. There are four cursor types: <code>\"cell\"</code> (the default), <code>\"row\"</code>, <code>\"column\"</code>, and <code>\"none\"</code>.</p> <p>Change the cursor type by assigning to  the <code>cursor_type</code> reactive attribute. The coordinate of the cursor is exposed via the <code>cursor_coordinate</code> reactive attribute.</p> <p>Using the keyboard, arrow keys,  Page Up, Page Down, Home and End move the cursor highlight, emitting a <code>CellHighlighted</code>  message, then enter selects the cell, emitting a <code>CellSelected</code> message.  If the  <code>cursor_type</code> is row, then <code>RowHighlighted</code> and <code>RowSelected</code> are emitted, similarly for  <code>ColumnHighlighted</code> and <code>ColumnSelected</code>.</p> <p>When moving the mouse over the table, a <code>MouseMove</code> event is emitted, the cell hovered over is styled, and the <code>hover_coordinate</code> reactive attribute is updated.  Clicking the mouse then emits the <code>CellHighlighted</code> and  <code>CellSelected</code> events. </p> <p>A new table starts with no cell highlighted, i.e., row and column are zero.  You can force the first item to highlight with <code>move_cursor(row=1, column=1)</code>.  All row and column indexes start at one.</p> Column CursorRow CursorCell CursorNo Cursordata_table_cursors.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <pre><code>from itertools import cycle\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\ncursors = cycle([\"column\", \"row\", \"cell\", \"none\"])\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.cursor_type = next(cursors)\n        table.zebra_stripes = True\n        table.add_columns(*ROWS[0])\n        table.add_rows(ROWS[1:])\n\n    def key_c(self):\n        table = self.query_one(DataTable)\n        table.cursor_type = next(cursors)\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#updating-data","title":"Updating data","text":"<p>Cells can be updated using the update_cell and update_cell_at methods.</p>"},{"location":"widgets/data_table/#removing-data","title":"Removing data","text":"<p>To remove all data in the table, use the clear method. To remove individual rows, use remove_row. The <code>remove_row</code> method accepts a <code>key</code> argument, which identifies the row to be removed.</p> <p>If you wish to remove the row below the cursor in the <code>DataTable</code>, use <code>coordinate_to_cell_key</code> to get the row key of the row under the current <code>cursor_coordinate</code>, then supply this key to <code>remove_row</code>:</p> <pre><code># Get the keys for the row and column under the cursor.\nrow_key, _ = table.coordinate_to_cell_key(table.cursor_coordinate)\n# Supply the row key to `remove_row` to delete the row.\ntable.remove_row(row_key)\n</code></pre>"},{"location":"widgets/data_table/#removing-columns","title":"Removing columns","text":"<p>To remove individual columns, use remove_column. The <code>remove_column</code> method accepts a <code>key</code> argument, which identifies the column to be removed.</p> <p>You can remove the column below the cursor using the same <code>coordinate_to_cell_key</code> method described above:</p> <pre><code># Get the keys for the row and column under the cursor.\n_, column_key = table.coordinate_to_cell_key(table.cursor_coordinate)\n# Supply the column key to `column_row` to delete the column.\ntable.remove_column(column_key)\n</code></pre>"},{"location":"widgets/data_table/#fixed-data","title":"Fixed data","text":"<p>You can fix a number of rows and columns in place, keeping them pinned to the top and left of the table respectively. To do this, assign an integer to the <code>fixed_rows</code> or <code>fixed_columns</code> reactive attributes of the <code>DataTable</code>.</p> Fixed datadata_table_fixed.py <p> TableApp \u00a0A\u00a0\u00a0\u00a0B\u00a0\u00a0\u00a0\u00a0C\u00a0\u00a0\u00a0 \u00a01\u00a0\u00a0\u00a02\u00a0\u00a0\u00a0\u00a03\u00a0\u00a0\u00a0 \u00a02\u00a0\u00a0\u00a04\u00a0\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0 \u00a03\u00a0\u00a0\u00a06\u00a0\u00a0\u00a0\u00a09\u00a0\u00a0\u00a0 \u00a04\u00a0\u00a0\u00a08\u00a0\u00a0\u00a0\u00a012\u00a0\u00a0 \u00a05\u00a0\u00a0\u00a010\u00a0\u00a0\u00a015\u00a0\u00a0\u2581\u2581 \u00a06\u00a0\u00a0\u00a012\u00a0\u00a0\u00a018\u00a0\u00a0 \u00a07\u00a0\u00a0\u00a014\u00a0\u00a0\u00a021\u00a0\u00a0 \u00a08\u00a0\u00a0\u00a016\u00a0\u00a0\u00a024\u00a0\u00a0 \u00a09\u00a0\u00a0\u00a018\u00a0\u00a0\u00a027\u00a0\u00a0 \u00a010\u00a0\u00a020\u00a0\u00a0\u00a030\u00a0\u00a0 \u00a011\u00a0\u00a022\u00a0\u00a0\u00a033\u00a0\u00a0 \u00a012\u00a0\u00a024\u00a0\u00a0\u00a036\u00a0\u00a0 \u00a013\u00a0\u00a026\u00a0\u00a0\u00a039\u00a0\u00a0 \u00a014\u00a0\u00a028\u00a0\u00a0\u00a042\u00a0\u00a0 \u00a015\u00a0\u00a030\u00a0\u00a0\u00a045\u00a0\u00a0 \u00a016\u00a0\u00a032\u00a0\u00a0\u00a048\u00a0\u00a0 \u00a017\u00a0\u00a034\u00a0\u00a0\u00a051\u00a0\u00a0 \u00a018\u00a0\u00a036\u00a0\u00a0\u00a054\u00a0\u00a0 \u00a019\u00a0\u00a038\u00a0\u00a0\u00a057\u00a0\u00a0 \u00a020\u00a0\u00a040\u00a0\u00a0\u00a060\u00a0\u00a0 \u00a021\u00a0\u00a042\u00a0\u00a0\u00a063\u00a0\u00a0 \u00a022\u00a0\u00a044\u00a0\u00a0\u00a066\u00a0\u00a0 \u00a023\u00a0\u00a046\u00a0\u00a0\u00a069\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\n\nclass TableApp(App):\n    CSS = \"DataTable {height: 1fr}\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.focus()\n        table.add_columns(\"A\", \"B\", \"C\")\n        for number in range(1, 100):\n            table.add_row(str(number), str(number * 2), str(number * 3))\n        table.fixed_rows = 2\n        table.fixed_columns = 1\n        table.cursor_type = \"row\"\n        table.zebra_stripes = True\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>In the example above, we set <code>fixed_rows</code> to <code>2</code>, and <code>fixed_columns</code> to <code>1</code>, meaning the first two rows and the leftmost column do not scroll - they always remain visible as you scroll through the data table.</p>"},{"location":"widgets/data_table/#sorting","title":"Sorting","text":"<p>The DataTable rows can be sorted using the  <code>sort</code>  method.</p> <p>There are three methods of using <code>sort</code>:</p> <ul> <li>By Column.  Pass columns in as parameters to sort by the natural order of one or more columns.  Specify a column using either a <code>ColumnKey</code> instance or the <code>key</code> you supplied to <code>add_column</code>.  For example, <code>sort(\"country\", \"region\")</code> would sort by country, and, when the country values are equal, by region.</li> <li>By Key function.  Pass a function as the <code>key</code> parameter to sort, similar to the key function parameter  of Python's <code>sorted</code> built-in.   The function will be called once per row with a tuple of all row values.</li> <li>By both Column and Key function.   You can specify which columns to include as parameters to your key function.  For example, <code>sort(\"hours\", \"rate\", key=lambda h, r: h*r)</code> passes two values to the key function for each row.</li> </ul> <p>The <code>reverse</code> argument reverses the order of your sort.  Note that correct sorting may require your key function to undo your formatting.</p> Outputdata_table_sort.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a01\u00a0\u00a0time\u00a02\u00a0 \u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a050.39\u00a0\u00a0\u00a051.84\u00a0\u00a0 \u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a050.39\u00a0\u00a0\u00a051.84\u00a0\u00a0 \u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a051.14\u00a0\u00a0\u00a051.73\u00a0\u00a0 \u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a051.14\u00a0\u00a0\u00a051.58\u00a0\u00a0 \u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a051.26\u00a0\u00a0\u00a051.26\u00a0\u00a0 \u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a051.58\u00a0\u00a0\u00a052.15\u00a0\u00a0 \u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a051.73\u00a0\u00a0\u00a051.12\u00a0\u00a0 \u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0Russia\u00a051.84\u00a0\u00a0\u00a050.85\u00a0\u00a0 \u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a051.84\u00a0\u00a0\u00a051.55\u00a0\u00a0 \u00a0a\u00a0Sort\u00a0By\u00a0Average\u00a0Time\u00a0\u00a0n\u00a0Sort\u00a0By\u00a0Last\u00a0Name\u00a0\u00a0c\u00a0Sort\u00a0By\u00a0Country\u00a0\u00a0d\u00a0S\u258f^p\u00a0palette </p> <pre><code>from rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable, Footer\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time 1\", \"time 2\"),\n    (4, \"Joseph Schooling\", Text(\"Singapore\", style=\"italic\"), 50.39, 51.84),\n    (2, \"Michael Phelps\", Text(\"United States\", style=\"italic\"), 50.39, 51.84),\n    (5, \"Chad le Clos\", Text(\"South Africa\", style=\"italic\"), 51.14, 51.73),\n    (6, \"L\u00e1szl\u00f3 Cseh\", Text(\"Hungary\", style=\"italic\"), 51.14, 51.58),\n    (3, \"Li Zhuhao\", Text(\"China\", style=\"italic\"), 51.26, 51.26),\n    (8, \"Mehdy Metella\", Text(\"France\", style=\"italic\"), 51.58, 52.15),\n    (7, \"Tom Shields\", Text(\"United States\", style=\"italic\"), 51.73, 51.12),\n    (1, \"Aleksandr Sadovnikov\", Text(\"Russia\", style=\"italic\"), 51.84, 50.85),\n    (10, \"Darren Burns\", Text(\"Scotland\", style=\"italic\"), 51.84, 51.55),\n]\n\n\nclass TableApp(App):\n    BINDINGS = [\n        (\"a\", \"sort_by_average_time\", \"Sort By Average Time\"),\n        (\"n\", \"sort_by_last_name\", \"Sort By Last Name\"),\n        (\"c\", \"sort_by_country\", \"Sort By Country\"),\n        (\"d\", \"sort_by_columns\", \"Sort By Columns (Only)\"),\n    ]\n\n    current_sorts: set = set()\n\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        for col in ROWS[0]:\n            table.add_column(col, key=col)\n        table.add_rows(ROWS[1:])\n\n    def sort_reverse(self, sort_type: str):\n        \"\"\"Determine if `sort_type` is ascending or descending.\"\"\"\n        reverse = sort_type in self.current_sorts\n        if reverse:\n            self.current_sorts.remove(sort_type)\n        else:\n            self.current_sorts.add(sort_type)\n        return reverse\n\n    def action_sort_by_average_time(self) -&gt; None:\n        \"\"\"Sort DataTable by average of times (via a function) and\n        passing of column data through positional arguments.\"\"\"\n\n        def sort_by_average_time_then_last_name(row_data):\n            name, *scores = row_data\n            return (sum(scores) / len(scores), name.split()[-1])\n\n        table = self.query_one(DataTable)\n        table.sort(\n            \"swimmer\",\n            \"time 1\",\n            \"time 2\",\n            key=sort_by_average_time_then_last_name,\n            reverse=self.sort_reverse(\"time\"),\n        )\n\n    def action_sort_by_last_name(self) -&gt; None:\n        \"\"\"Sort DataTable by last name of swimmer (via a lambda).\"\"\"\n        table = self.query_one(DataTable)\n        table.sort(\n            \"swimmer\",\n            key=lambda swimmer: swimmer.split()[-1],\n            reverse=self.sort_reverse(\"swimmer\"),\n        )\n\n    def action_sort_by_country(self) -&gt; None:\n        \"\"\"Sort DataTable by country which is a `Rich.Text` object.\"\"\"\n        table = self.query_one(DataTable)\n        table.sort(\n            \"country\",\n            key=lambda country: country.plain,\n            reverse=self.sort_reverse(\"country\"),\n        )\n\n    def action_sort_by_columns(self) -&gt; None:\n        \"\"\"Sort DataTable without a key.\"\"\"\n        table = self.query_one(DataTable)\n        table.sort(\"swimmer\", \"lane\", reverse=self.sort_reverse(\"columns\"))\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#labeled-rows","title":"Labeled rows","text":"<p>A \"label\" can be attached to a row using the add_row method. This will add an extra column to the left of the table which the cursor cannot interact with. This column is similar to the leftmost column in a spreadsheet containing the row numbers. The example below shows how to attach simple numbered labels to rows.</p> Labeled rowsdata_table_labels.py <p> TableApp \u00a0lane\u00a0\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time\u00a0\u00a0 1\u00a04\u00a0\u00a0\u00a0\u00a0\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u00a050.39\u00a0 2\u00a02\u00a0\u00a0\u00a0\u00a0\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.14\u00a0 3\u00a05\u00a0\u00a0\u00a0\u00a0\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0South\u00a0Africa\u00a0\u00a0\u00a051.14\u00a0 4\u00a06\u00a0\u00a0\u00a0\u00a0\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.14\u00a0 5\u00a03\u00a0\u00a0\u00a0\u00a0\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.26\u00a0 6\u00a08\u00a0\u00a0\u00a0\u00a0\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.58\u00a0 7\u00a07\u00a0\u00a0\u00a0\u00a0\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0United\u00a0States\u00a0\u00a051.73\u00a0 8\u00a01\u00a0\u00a0\u00a0\u00a0\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 9\u00a010\u00a0\u00a0\u00a0\u00a0Darren\u00a0Burns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Scotland\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a051.84\u00a0 </p> <pre><code>from rich.text import Text\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DataTable\n\nROWS = [\n    (\"lane\", \"swimmer\", \"country\", \"time\"),\n    (4, \"Joseph Schooling\", \"Singapore\", 50.39),\n    (2, \"Michael Phelps\", \"United States\", 51.14),\n    (5, \"Chad le Clos\", \"South Africa\", 51.14),\n    (6, \"L\u00e1szl\u00f3 Cseh\", \"Hungary\", 51.14),\n    (3, \"Li Zhuhao\", \"China\", 51.26),\n    (8, \"Mehdy Metella\", \"France\", 51.58),\n    (7, \"Tom Shields\", \"United States\", 51.73),\n    (1, \"Aleksandr Sadovnikov\", \"Russia\", 51.84),\n    (10, \"Darren Burns\", \"Scotland\", 51.84),\n]\n\n\nclass TableApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DataTable()\n\n    def on_mount(self) -&gt; None:\n        table = self.query_one(DataTable)\n        table.add_columns(*ROWS[0])\n        for number, row in enumerate(ROWS[1:], start=1):\n            label = Text(str(number), style=\"#B0FC38 italic\")\n            table.add_row(*row, label=label)\n\n\napp = TableApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/data_table/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_header</code> <code>bool</code> <code>True</code> Show the table header <code>show_row_labels</code> <code>bool</code> <code>True</code> Show the row labels (if applicable) <code>fixed_rows</code> <code>int</code> <code>0</code> Number of fixed rows (rows which do not scroll) <code>fixed_columns</code> <code>int</code> <code>0</code> Number of fixed columns (columns which do not scroll) <code>zebra_stripes</code> <code>bool</code> <code>False</code> Style with alternating colors on rows <code>header_height</code> <code>int</code> <code>1</code> Height of header row <code>show_cursor</code> <code>bool</code> <code>True</code> Show the cursor <code>cursor_type</code> <code>str</code> <code>\"cell\"</code> One of <code>\"cell\"</code>, <code>\"row\"</code>, <code>\"column\"</code>, or <code>\"none\"</code> <code>cursor_coordinate</code> Coordinate <code>Coordinate(0, 0)</code> The current coordinate of the cursor <code>hover_coordinate</code> Coordinate <code>Coordinate(0, 0)</code> The coordinate the mouse cursor is above"},{"location":"widgets/data_table/#messages","title":"Messages","text":"<ul> <li>DataTable.CellHighlighted</li> <li>DataTable.CellSelected</li> <li>DataTable.RowHighlighted</li> <li>DataTable.RowSelected</li> <li>DataTable.ColumnHighlighted</li> <li>DataTable.ColumnSelected</li> <li>DataTable.HeaderSelected</li> <li>DataTable.RowLabelSelected</li> </ul>"},{"location":"widgets/data_table/#bindings","title":"Bindings","text":"<p>The data table widget defines the following bindings:</p> Key(s) Description enter Select cells under the cursor. up Move the cursor up. down Move the cursor down. right Move the cursor right. left Move the cursor left. pageup Move one page up. pagedown Move one page down. ctrl+home Move to the top. ctrl+end Move to the bottom. home Move to the home position (leftmost column). end Move to the end position (rightmost column)."},{"location":"widgets/data_table/#component-classes","title":"Component Classes","text":"<p>The data table widget provides the following component classes:</p> Class Description <code>datatable--cursor</code> Target the cursor. <code>datatable--hover</code> Target the cells under the hover cursor. <code>datatable--fixed</code> Target fixed columns and fixed rows. <code>datatable--fixed-cursor</code> Target highlighted and fixed columns or header. <code>datatable--header</code> Target the header of the data table. <code>datatable--header-cursor</code> Target cells highlighted by the cursor. <code>datatable--header-hover</code> Target hovered header or row label cells. <code>datatable--even-row</code> Target even rows (row indices start at 0) if zebra_stripes. <code>datatable--odd-row</code> Target odd rows (row indices start at 0) if zebra_stripes. <p>               Bases: <code>ScrollView</code>, <code>Generic[CellType]</code></p> <p>A tabular widget that contains data.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether the table header should be visible or not.</p> <code>True</code> <code>bool</code> <p>Whether the row labels should be shown or not.</p> <code>True</code> <code>int</code> <p>The number of rows, counting from the top, that should be fixed and still visible when the user scrolls down.</p> <code>0</code> <code>int</code> <p>The number of columns, counting from the left, that should be fixed and still visible when the user scrolls right.</p> <code>0</code> <code>bool</code> <p>Enables or disables a zebra effect applied to the background color of the rows of the table, where alternate colors are styled differently to improve the readability of the table.</p> <code>False</code> <code>int</code> <p>The height, in number of cells, of the data table header.</p> <code>1</code> <code>bool</code> <p>Whether the cursor should be visible when navigating the data table or not.</p> <code>True</code> <code>Literal['renderable', 'css']</code> <p>If the data associated with a cell is an arbitrary renderable with a set foreground color, this determines whether that color is prioritized over the cursor component class or not.</p> <code>'css'</code> <code>Literal['renderable', 'css']</code> <p>If the data associated with a cell is an arbitrary renderable with a set background color, this determines whether that color is prioritized over the cursor component class or not.</p> <code>'renderable'</code> <code>CursorType</code> <p>The type of cursor to be used when navigating the data table with the keyboard.</p> <code>'cell'</code> <code>int</code> <p>The number of cells added on each side of each column. Setting this value to zero will likely make your table very hard to read.</p> <code>1</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/data_table/#textual.widgets.DataTable(show_header)","title":"<code>show_header</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(show_row_labels)","title":"<code>show_row_labels</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(fixed_rows)","title":"<code>fixed_rows</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(fixed_columns)","title":"<code>fixed_columns</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(zebra_stripes)","title":"<code>zebra_stripes</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(header_height)","title":"<code>header_height</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(show_cursor)","title":"<code>show_cursor</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cursor_foreground_priority)","title":"<code>cursor_foreground_priority</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cursor_background_priority)","title":"<code>cursor_background_priority</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cursor_type)","title":"<code>cursor_type</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(cell_padding)","title":"<code>cell_padding</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(name)","title":"<code>name</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(id)","title":"<code>id</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"enter\", \"select_cursor\", \"Select\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Cursor Up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"Cursor Down\", show=False\n    ),\n    Binding(\n        \"right\", \"cursor_right\", \"Cursor Right\", show=False\n    ),\n    Binding(\n        \"left\", \"cursor_left\", \"Cursor Left\", show=False\n    ),\n    Binding(\"pageup\", \"page_up\", \"Page Up\", show=False),\n    Binding(\n        \"pagedown\", \"page_down\", \"Page Down\", show=False\n    ),\n    Binding(\"ctrl+home\", \"scroll_top\", \"Top\", show=False),\n    Binding(\n        \"ctrl+end\", \"scroll_bottom\", \"Bottom\", show=False\n    ),\n    Binding(\"home\", \"scroll_home\", \"Home\", show=False),\n    Binding(\"end\", \"scroll_end\", \"End\", show=False),\n]\n</code></pre> Key(s) Description enter Select cells under the cursor. up Move the cursor up. down Move the cursor down. right Move the cursor right. left Move the cursor left. pageup Move one page up. pagedown Move one page down. ctrl+home Move to the top. ctrl+end Move to the bottom. home Move to the home position (leftmost column). end Move to the end position (rightmost column)."},{"location":"widgets/data_table/#textual.widgets.DataTable.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"datatable--cursor\",\n    \"datatable--hover\",\n    \"datatable--fixed\",\n    \"datatable--fixed-cursor\",\n    \"datatable--header\",\n    \"datatable--header-cursor\",\n    \"datatable--header-hover\",\n    \"datatable--odd-row\",\n    \"datatable--even-row\",\n}\n</code></pre> Class Description <code>datatable--cursor</code> Target the cursor. <code>datatable--hover</code> Target the cells under the hover cursor. <code>datatable--fixed</code> Target fixed columns and fixed rows. <code>datatable--fixed-cursor</code> Target highlighted and fixed columns or header. <code>datatable--header</code> Target the header of the data table. <code>datatable--header-cursor</code> Target cells highlighted by the cursor. <code>datatable--header-hover</code> Target hovered header or row label cells. <code>datatable--even-row</code> Target even rows (row indices start at 0) if zebra_stripes. <code>datatable--odd-row</code> Target odd rows (row indices start at 0) if zebra_stripes."},{"location":"widgets/data_table/#textual.widgets.DataTable.cell_padding","title":"cell_padding  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cell_padding = cell_padding\n</code></pre> <p>Horizontal padding between cells, applied on each side of each cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.columns","title":"columns  <code>instance-attribute</code>","text":"<pre><code>columns = {}\n</code></pre> <p>Metadata about the columns of the table, indexed by their key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_background_priority","title":"cursor_background_priority  <code>instance-attribute</code>","text":"<pre><code>cursor_background_priority = cursor_background_priority\n</code></pre> <p>Should we prioritize the cursor component class CSS background or the renderable background in the event where a cell contains a renderable with a background color.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_column","title":"cursor_column  <code>property</code>","text":"<pre><code>cursor_column\n</code></pre> <p>The index of the column that the DataTable cursor is currently on.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_coordinate","title":"cursor_coordinate  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_coordinate = Reactive(\n    Coordinate(0, 0), repaint=False, always_update=True\n)\n</code></pre> <p>Current cursor <code>Coordinate</code>.</p> <p>This can be set programmatically or changed via the method <code>move_cursor</code>.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_foreground_priority","title":"cursor_foreground_priority  <code>instance-attribute</code>","text":"<pre><code>cursor_foreground_priority = cursor_foreground_priority\n</code></pre> <p>Should we prioritize the cursor component class CSS foreground or the renderable foreground in the event where a cell contains a renderable with a foreground color.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_row","title":"cursor_row  <code>property</code>","text":"<pre><code>cursor_row\n</code></pre> <p>The index of the row that the DataTable cursor is currently on.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.cursor_type","title":"cursor_type  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_type = cursor_type\n</code></pre> <p>The type of cursor of the <code>DataTable</code>.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.fixed_columns","title":"fixed_columns  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>fixed_columns = fixed_columns\n</code></pre> <p>The number of columns to fix (prevented from scrolling).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.fixed_rows","title":"fixed_rows  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>fixed_rows = fixed_rows\n</code></pre> <p>The number of rows to fix (prevented from scrolling).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.header_height","title":"header_height  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>header_height = header_height\n</code></pre> <p>The height of the header row (the row of column labels).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.hover_column","title":"hover_column  <code>property</code>","text":"<pre><code>hover_column\n</code></pre> <p>The index of the column that the mouse cursor is currently hovering above.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.hover_coordinate","title":"hover_coordinate  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>hover_coordinate = Reactive(\n    Coordinate(0, 0), repaint=False, always_update=True\n)\n</code></pre> <p>The coordinate of the <code>DataTable</code> that is being hovered.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.hover_row","title":"hover_row  <code>property</code>","text":"<pre><code>hover_row\n</code></pre> <p>The index of the row that the mouse cursor is currently hovering above.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ordered_columns","title":"ordered_columns  <code>property</code>","text":"<pre><code>ordered_columns\n</code></pre> <p>The list of Columns in the DataTable, ordered as they appear on screen.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ordered_rows","title":"ordered_rows  <code>property</code>","text":"<pre><code>ordered_rows\n</code></pre> <p>The list of Rows in the DataTable, ordered as they appear on screen.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.row_count","title":"row_count  <code>property</code>","text":"<pre><code>row_count\n</code></pre> <p>The number of rows currently present in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.rows","title":"rows  <code>instance-attribute</code>","text":"<pre><code>rows = {}\n</code></pre> <p>Metadata about the rows of the table, indexed by their key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.show_cursor","title":"show_cursor  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_cursor = show_cursor\n</code></pre> <p>Show/hide both the keyboard and hover cursor.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.show_header","title":"show_header  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_header = show_header\n</code></pre> <p>Show/hide the header row (the row of column labels).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.show_row_labels","title":"show_row_labels  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_row_labels = show_row_labels\n</code></pre> <p>Show/hide the column containing the labels of rows.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.zebra_stripes","title":"zebra_stripes  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>zebra_stripes = zebra_stripes\n</code></pre> <p>Apply alternating styles, datatable--even-row and datatable-odd-row, to create a zebra effect, e.g.,  alternating light and dark backgrounds.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted","title":"CellHighlighted","text":"<pre><code>CellHighlighted(data_table, value, coordinate, cell_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the cursor moves to highlight a new cell.</p> <p>This is only relevant when the <code>cursor_type</code> is <code>\"cell\"</code>. It's also posted when the cell cursor is re-enabled (by setting <code>show_cursor=True</code>), and when the cursor type is changed to <code>\"cell\"</code>. Can be handled using <code>on_data_table_cell_highlighted</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.cell_key","title":"cell_key  <code>instance-attribute</code>","text":"<pre><code>cell_key = cell_key\n</code></pre> <p>The key for the highlighted cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.coordinate","title":"coordinate  <code>instance-attribute</code>","text":"<pre><code>coordinate = coordinate\n</code></pre> <p>The coordinate of the highlighted cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellHighlighted.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value = value\n</code></pre> <p>The value in the highlighted cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected","title":"CellSelected","text":"<pre><code>CellSelected(data_table, value, coordinate, cell_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted by the <code>DataTable</code> widget when a cell is selected.</p> <p>This is only relevant when the <code>cursor_type</code> is <code>\"cell\"</code>. Can be handled using <code>on_data_table_cell_selected</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.cell_key","title":"cell_key  <code>instance-attribute</code>","text":"<pre><code>cell_key = cell_key\n</code></pre> <p>The key for the selected cell.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.coordinate","title":"coordinate  <code>instance-attribute</code>","text":"<pre><code>coordinate = coordinate\n</code></pre> <p>The coordinate of the cell that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.CellSelected.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value = value\n</code></pre> <p>The value in the cell that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted","title":"ColumnHighlighted","text":"<pre><code>ColumnHighlighted(data_table, cursor_column, column_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a column is highlighted.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"column\"</code>. Can be handled using <code>on_data_table_column_highlighted</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key = column_key\n</code></pre> <p>The key of the column that was highlighted.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.cursor_column","title":"cursor_column  <code>instance-attribute</code>","text":"<pre><code>cursor_column = cursor_column\n</code></pre> <p>The x-coordinate of the column that was highlighted.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnHighlighted.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected","title":"ColumnSelected","text":"<pre><code>ColumnSelected(data_table, cursor_column, column_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a column is selected.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"column\"</code>. Can be handled using <code>on_data_table_column_selected</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key = column_key\n</code></pre> <p>The key of the column that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.cursor_column","title":"cursor_column  <code>instance-attribute</code>","text":"<pre><code>cursor_column = cursor_column\n</code></pre> <p>The x-coordinate of the column that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.ColumnSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected","title":"HeaderSelected","text":"<pre><code>HeaderSelected(data_table, column_key, column_index, label)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a column header/label is clicked.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.column_index","title":"column_index  <code>instance-attribute</code>","text":"<pre><code>column_index = column_index\n</code></pre> <p>The index for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key = column_key\n</code></pre> <p>The key for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.HeaderSelected.label","title":"label  <code>instance-attribute</code>","text":"<pre><code>label = label\n</code></pre> <p>The text of the label.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted","title":"RowHighlighted","text":"<pre><code>RowHighlighted(data_table, cursor_row, row_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a row is highlighted.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"row\"</code>. Can be handled using <code>on_data_table_row_highlighted</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.cursor_row","title":"cursor_row  <code>instance-attribute</code>","text":"<pre><code>cursor_row = cursor_row\n</code></pre> <p>The y-coordinate of the cursor that highlighted the row.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowHighlighted.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key = row_key\n</code></pre> <p>The key of the row that was highlighted.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected","title":"RowLabelSelected","text":"<pre><code>RowLabelSelected(data_table, row_key, row_index, label)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a row label is clicked.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.label","title":"label  <code>instance-attribute</code>","text":"<pre><code>label = label\n</code></pre> <p>The text of the label.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.row_index","title":"row_index  <code>instance-attribute</code>","text":"<pre><code>row_index = row_index\n</code></pre> <p>The index for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowLabelSelected.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key = row_key\n</code></pre> <p>The key for the column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected","title":"RowSelected","text":"<pre><code>RowSelected(data_table, cursor_row, row_key)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a row is selected.</p> <p>This message is only posted when the <code>cursor_type</code> is set to <code>\"row\"</code>. Can be handled using <code>on_data_table_row_selected</code> in a subclass of <code>DataTable</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for the data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.cursor_row","title":"cursor_row  <code>instance-attribute</code>","text":"<pre><code>cursor_row = cursor_row\n</code></pre> <p>The y-coordinate of the cursor that made the selection.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.data_table","title":"data_table  <code>instance-attribute</code>","text":"<pre><code>data_table = data_table\n</code></pre> <p>The data table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.RowSelected.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key = row_key\n</code></pre> <p>The key of the row that was selected.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_down","title":"action_page_down","text":"<pre><code>action_page_down()\n</code></pre> <p>Move the cursor one page down.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_left","title":"action_page_left","text":"<pre><code>action_page_left()\n</code></pre> <p>Move the cursor one page left.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_right","title":"action_page_right","text":"<pre><code>action_page_right()\n</code></pre> <p>Move the cursor one page right.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_page_up","title":"action_page_up","text":"<pre><code>action_page_up()\n</code></pre> <p>Move the cursor one page up.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_bottom","title":"action_scroll_bottom","text":"<pre><code>action_scroll_bottom()\n</code></pre> <p>Move the cursor and scroll to the bottom.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_end","title":"action_scroll_end","text":"<pre><code>action_scroll_end()\n</code></pre> <p>Move the cursor and scroll to the rightmost column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_home","title":"action_scroll_home","text":"<pre><code>action_scroll_home()\n</code></pre> <p>Move the cursor and scroll to the leftmost column.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.action_scroll_top","title":"action_scroll_top","text":"<pre><code>action_scroll_top()\n</code></pre> <p>Move the cursor and scroll to the top.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column","title":"add_column","text":"<pre><code>add_column(label, *, width=None, key=None, default=None)\n</code></pre> <p>Add a column to the table.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>A str or Text object containing the label (shown top of column).</p> required <code>int | None</code> <p>Width of the column in cells or None to fit content.</p> <code>None</code> <code>str | None</code> <p>A key which uniquely identifies this column. If None, it will be generated for you.</p> <code>None</code> <code>CellType | None</code> <p>The  value to insert into pre-existing rows.</p> <code>None</code> <p>Returns:</p> Type Description <code>ColumnKey</code> <p>Uniquely identifies this column. Can be used to retrieve this column regardless of its current location in the DataTable (it could have moved after being added due to sorting/insertion/deletion of other columns).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(label)","title":"<code>label</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(width)","title":"<code>width</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(key)","title":"<code>key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_column(default)","title":"<code>default</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_columns","title":"add_columns","text":"<pre><code>add_columns(*labels)\n</code></pre> <p>Add a number of columns.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Column headers.</p> <code>()</code> <p>Returns:</p> Type Description <code>list[ColumnKey]</code> <p>A list of the keys for the columns that were added. See the <code>add_column</code> method docstring for more information on how these keys are used.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_columns(*labels)","title":"<code>*labels</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row","title":"add_row","text":"<pre><code>add_row(*cells, height=1, key=None, label=None)\n</code></pre> <p>Add a row at the bottom of the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>CellType</code> <p>Positional arguments should contain cell data.</p> <code>()</code> <code>int | None</code> <p>The height of a row (in lines). Use <code>None</code> to auto-detect the optimal height.</p> <code>1</code> <code>str | None</code> <p>A key which uniquely identifies this row. If None, it will be generated for you and returned.</p> <code>None</code> <code>TextType | None</code> <p>The label for the row. Will be displayed to the left if supplied.</p> <code>None</code> <p>Returns:</p> Type Description <code>RowKey</code> <p>Unique identifier for this row. Can be used to retrieve this row regardless of its current location in the DataTable (it could have moved after being added due to sorting or insertion/deletion of other rows).</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(*cells)","title":"<code>*cells</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(height)","title":"<code>height</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(key)","title":"<code>key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_row(label)","title":"<code>label</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.add_rows","title":"add_rows","text":"<pre><code>add_rows(rows)\n</code></pre> <p>Add a number of rows at the bottom of the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Iterable[CellType]]</code> <p>Iterable of rows. A row is an iterable of cells.</p> required <p>Returns:</p> Type Description <code>list[RowKey]</code> <p>A list of the keys for the rows that were added. See the <code>add_row</code> method docstring for more information on how these keys are used.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.add_rows(rows)","title":"<code>rows</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.clear","title":"clear","text":"<pre><code>clear(columns=False)\n</code></pre> <p>Clear the table.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Also clear the columns.</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.clear(columns)","title":"<code>columns</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.coordinate_to_cell_key","title":"coordinate_to_cell_key","text":"<pre><code>coordinate_to_cell_key(coordinate)\n</code></pre> <p>Return the key for the cell currently occupying this coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to exam the current cell key of.</p> required <p>Returns:</p> Type Description <code>CellKey</code> <p>The key of the cell currently occupying this coordinate.</p> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>If the coordinate is not valid.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.coordinate_to_cell_key(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell","title":"get_cell","text":"<pre><code>get_cell(row_key, column_key)\n</code></pre> <p>Given a row key and column key, return the value of the corresponding cell.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The row key of the cell.</p> required <code>ColumnKey | str</code> <p>The column key of the cell.</p> required <p>Returns:</p> Type Description <code>CellType</code> <p>The value of the cell identified by the row and column keys.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_at","title":"get_cell_at","text":"<pre><code>get_cell_at(coordinate)\n</code></pre> <p>Get the value from the cell occupying the given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to retrieve the value from.</p> required <p>Returns:</p> Type Description <code>CellType</code> <p>The value of the cell at the coordinate.</p> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>If there is no cell with the given coordinate.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_at(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_coordinate","title":"get_cell_coordinate","text":"<pre><code>get_cell_coordinate(row_key, column_key)\n</code></pre> <p>Given a row key and column key, return the corresponding cell coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The row key of the cell.</p> required <code>ColumnKey | str</code> <p>The column key of the cell.</p> required <p>Returns:</p> Type Description <code>Coordinate</code> <p>The current coordinate of the cell identified by the row and column keys.</p> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>If the specified cell does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_coordinate(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_cell_coordinate(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column","title":"get_column","text":"<pre><code>get_column(column_key)\n</code></pre> <p>Get the values from the column identified by the given column key.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>The key of the column.</p> required <p>Returns:</p> Type Description <code>Iterable[CellType]</code> <p>A generator which yields the cells in the column.</p> <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If there is no column corresponding to the key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_at","title":"get_column_at","text":"<pre><code>get_column_at(column_index)\n</code></pre> <p>Get the values from the column at a given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the column.</p> required <p>Returns:</p> Type Description <code>Iterable[CellType]</code> <p>A generator which yields the cells in the column.</p> <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If there is no column with the given index.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_at(column_index)","title":"<code>column_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_index","title":"get_column_index","text":"<pre><code>get_column_index(column_key)\n</code></pre> <p>Return the current index for the column identified by column_key.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>The column key to find the current index of.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The current index of the specified column key.</p> <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If the column key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_column_index(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row","title":"get_row","text":"<pre><code>get_row(row_key)\n</code></pre> <p>Get the values from the row identified by the given row key.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The key of the row.</p> required <p>Returns:</p> Type Description <code>list[CellType]</code> <p>A list of the values contained within the row.</p> <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>When there is no row corresponding to the key.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_at","title":"get_row_at","text":"<pre><code>get_row_at(row_index)\n</code></pre> <p>Get the values from the cells in a row at a given index. This will return the values from a row based on the rows current position in the table.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the row.</p> required <p>Returns:</p> Type Description <code>list[CellType]</code> <p>A list of the values contained in the row.</p> <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>If there is no row with the given index.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_at(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_height","title":"get_row_height","text":"<pre><code>get_row_height(row_key)\n</code></pre> <p>Given a row key, return the height of that row in terminal cells.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey</code> <p>The key of the row.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The height of the row, measured in terminal character cells.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_height(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_index","title":"get_row_index","text":"<pre><code>get_row_index(row_key)\n</code></pre> <p>Return the current index for the row identified by row_key.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The row key to find the current index of.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The current index of the specified row key.</p> <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>If the row key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.get_row_index(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_column_index","title":"is_valid_column_index","text":"<pre><code>is_valid_column_index(column_index)\n</code></pre> <p>Return a boolean indicating whether the column_index is within table bounds.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The column index to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the column index is within the bounds of the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_column_index(column_index)","title":"<code>column_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_coordinate","title":"is_valid_coordinate","text":"<pre><code>is_valid_coordinate(coordinate)\n</code></pre> <p>Return a boolean indicating whether the given coordinate is valid.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to validate.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the coordinate is within the bounds of the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_coordinate(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_row_index","title":"is_valid_row_index","text":"<pre><code>is_valid_row_index(row_index)\n</code></pre> <p>Return a boolean indicating whether the row_index is within table bounds.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The row index to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the row index is within the bounds of the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.is_valid_row_index(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor","title":"move_cursor","text":"<pre><code>move_cursor(\n    *, row=None, column=None, animate=False, scroll=True\n)\n</code></pre> <p>Move the cursor to the given position.</p> Example <pre><code>datatable = app.query_one(DataTable)\ndatatable.move_cursor(row=4, column=6)\n# datatable.cursor_coordinate == Coordinate(4, 6)\ndatatable.move_cursor(row=3)\n# datatable.cursor_coordinate == Coordinate(3, 6)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>The new row to move the cursor to.</p> <code>None</code> <code>int | None</code> <p>The new column to move the cursor to.</p> <code>None</code> <code>bool</code> <p>Whether to animate the change of coordinates.</p> <code>False</code> <code>bool</code> <p>Scroll the cursor into view after moving.</p> <code>True</code>"},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(row)","title":"<code>row</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(column)","title":"<code>column</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.move_cursor(scroll)","title":"<code>scroll</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_column","title":"refresh_column","text":"<pre><code>refresh_column(column_index)\n</code></pre> <p>Refresh the column at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the column to refresh.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_column(column_index)","title":"<code>column_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_coordinate","title":"refresh_coordinate","text":"<pre><code>refresh_coordinate(coordinate)\n</code></pre> <p>Refresh the cell at a coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to refresh.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_coordinate(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_row","title":"refresh_row","text":"<pre><code>refresh_row(row_index)\n</code></pre> <p>Refresh the row at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the row to refresh.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.refresh_row(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_column","title":"remove_column","text":"<pre><code>remove_column(column_key)\n</code></pre> <p>Remove a column (identified by a key) from the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>The key identifying the column to remove.</p> required <p>Raises:</p> Type Description <code>ColumnDoesNotExist</code> <p>If the column key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_column(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_row","title":"remove_row","text":"<pre><code>remove_row(row_key)\n</code></pre> <p>Remove a row (identified by a key) from the DataTable.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The key identifying the row to remove.</p> required <p>Raises:</p> Type Description <code>RowDoesNotExist</code> <p>If the row key does not exist.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.remove_row(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.sort","title":"sort","text":"<pre><code>sort(*columns, key=None, reverse=False)\n</code></pre> <p>Sort the rows in the <code>DataTable</code> by one or more column keys or a key function (or other callable). If both columns and a key function are specified, only data from those columns will sent to the key function.</p> <p>Parameters:</p> Name Type Description Default <code>ColumnKey | str</code> <p>One or more columns to sort by the values in.</p> <code>()</code> <code>Callable[[Any], Any] | None</code> <p>A function (or other callable) that returns a key to use for sorting purposes.</p> <code>None</code> <code>bool</code> <p>If True, the sort order will be reversed.</p> <code>False</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>DataTable</code> instance.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.sort(columns)","title":"<code>columns</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.sort(key)","title":"<code>key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.sort(reverse)","title":"<code>reverse</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell","title":"update_cell","text":"<pre><code>update_cell(\n    row_key, column_key, value, *, update_width=False\n)\n</code></pre> <p>Update the cell identified by the specified row key and column key.</p> <p>Parameters:</p> Name Type Description Default <code>RowKey | str</code> <p>The key identifying the row.</p> required <code>ColumnKey | str</code> <p>The key identifying the column.</p> required <code>CellType</code> <p>The new value to put inside the cell.</p> required <code>bool</code> <p>Whether to resize the column width to accommodate for the new cell content.</p> <code>False</code> <p>Raises:</p> Type Description <code>CellDoesNotExist</code> <p>When the supplied <code>row_key</code> and <code>column_key</code> cannot be found in the table.</p>"},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(row_key)","title":"<code>row_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(column_key)","title":"<code>column_key</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(value)","title":"<code>value</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell(update_width)","title":"<code>update_width</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at","title":"update_cell_at","text":"<pre><code>update_cell_at(coordinate, value, *, update_width=False)\n</code></pre> <p>Update the content inside the cell currently occupying the given coordinate.</p> <p>Parameters:</p> Name Type Description Default <code>Coordinate</code> <p>The coordinate to update the cell at.</p> required <code>CellType</code> <p>The new value to place inside the cell.</p> required <code>bool</code> <p>Whether to resize the column width to accommodate for the new cell content.</p> <code>False</code>"},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at(coordinate)","title":"<code>coordinate</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at(value)","title":"<code>value</code>","text":""},{"location":"widgets/data_table/#textual.widgets.DataTable.update_cell_at(update_width)","title":"<code>update_width</code>","text":""},{"location":"widgets/data_table/#textual.widgets.data_table","title":"textual.widgets.data_table","text":""},{"location":"widgets/data_table/#textual.widgets.data_table.CellType","title":"CellType  <code>module-attribute</code>","text":"<pre><code>CellType = TypeVar('CellType')\n</code></pre> <p>Type used for cells in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CursorType","title":"CursorType  <code>module-attribute</code>","text":"<pre><code>CursorType = Literal['cell', 'row', 'column', 'none']\n</code></pre> <p>The valid types of cursors for <code>DataTable.cursor_type</code>.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellDoesNotExist","title":"CellDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>The cell key/index was invalid.</p> <p>Raised when the coordinates or cell key provided does not exist in the DataTable (e.g. out of bounds index, invalid key)</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellKey","title":"CellKey","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A unique identifier for a cell in the DataTable.</p> <p>A cell key is a <code>(row_key, column_key)</code> tuple.</p> <p>Even if the cell changes visual location (i.e. moves to a different coordinate in the table), this key can still be used to retrieve it, regardless of where it currently is.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellKey.column_key","title":"column_key  <code>instance-attribute</code>","text":"<pre><code>column_key\n</code></pre> <p>The key of this cell's column.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.CellKey.row_key","title":"row_key  <code>instance-attribute</code>","text":"<pre><code>row_key\n</code></pre> <p>The key of this cell's row.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Column","title":"Column  <code>dataclass</code>","text":"<pre><code>Column(\n    key, label, width=0, content_width=0, auto_width=False\n)\n</code></pre> <p>Metadata for a column in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Column.get_render_width","title":"get_render_width","text":"<pre><code>get_render_width(data_table)\n</code></pre> <p>Width, in cells, required to render the column with padding included.</p> <p>Parameters:</p> Name Type Description Default <code>DataTable[Any]</code> <p>The data table where the column will be rendered.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The width, in cells, required to render the column with padding included.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Column.get_render_width(data_table)","title":"<code>data_table</code>","text":""},{"location":"widgets/data_table/#textual.widgets.data_table.ColumnDoesNotExist","title":"ColumnDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the column index or column key provided does not exist in the DataTable (e.g. out of bounds index, invalid key)</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.ColumnKey","title":"ColumnKey","text":"<pre><code>ColumnKey(value=None)\n</code></pre> <p>               Bases: <code>StringKey</code></p> <p>Uniquely identifies a column in the DataTable.</p> <p>Even if the visual location of the column changes due to sorting or other modifications, a key will always refer to the same column.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.DuplicateKey","title":"DuplicateKey","text":"<p>               Bases: <code>Exception</code></p> <p>The key supplied already exists.</p> <p>Raised when the RowKey or ColumnKey provided already refers to an existing row or column in the DataTable. Keys must be unique.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.Row","title":"Row  <code>dataclass</code>","text":"<pre><code>Row(key, height, label=None, auto_height=False)\n</code></pre> <p>Metadata for a row in the DataTable.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.RowDoesNotExist","title":"RowDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the row index or row key provided does not exist in the DataTable (e.g. out of bounds index, invalid key)</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.RowKey","title":"RowKey","text":"<pre><code>RowKey(value=None)\n</code></pre> <p>               Bases: <code>StringKey</code></p> <p>Uniquely identifies a row in the DataTable.</p> <p>Even if the visual location of the row changes due to sorting or other modifications, a key will always refer to the same row.</p>"},{"location":"widgets/data_table/#textual.widgets.data_table.StringKey","title":"StringKey","text":"<pre><code>StringKey(value=None)\n</code></pre> <p>An object used as a key in a mapping.</p> <p>It can optionally wrap a string, and lookups into a map using the object behave the same as lookups using the string itself.</p>"},{"location":"widgets/digits/","title":"Digits","text":"<p>Added in version 0.33.0</p> <p>A widget to display numerical values in tall multi-line characters.</p> <p>The digits 0-9 are supported, in addition to the following characters <code>+</code>, <code>-</code>, <code>^</code>, <code>:</code>, and <code>\u00d7</code>. Other characters will be displayed in a regular size font.</p> <p>You can set the text to be displayed in the constructor, or call <code>update()</code> to change the text after the widget has been mounted.</p> <p>This widget will respect the text-align rule.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/digits/#example","title":"Example","text":"<p>The following example displays a few digits of Pi:</p> Outputdigits.py <p> DigitApp \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557 \u2551\u257a\u2501\u2513\u00a0\u00a0\u2513\u00a0\u257b\u00a0\u257b\u00a0\u2513\u00a0\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2578\u257a\u2501\u2513\u00a0\u250f\u2501\u2578\u250f\u2501\u2513\u250f\u2501\u2513\u257a\u2501\u2513\u2551 \u2551\u00a0\u2501\u252b\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b\u00a0\u2503\u00a0\u00a0\u2517\u2501\u2513\u2517\u2501\u252b\u250f\u2501\u251b\u00a0\u2523\u2501\u2513\u2517\u2501\u2513\u00a0\u2501\u252b\u00a0\u2517\u2501\u2513\u2523\u2501\u252b\u2517\u2501\u252b\u00a0\u00a0\u2503\u2551 \u2551\u257a\u2501\u251b.\u257a\u253b\u2578\u00a0\u00a0\u2579\u257a\u253b\u2578,\u257a\u2501\u251b\u257a\u2501\u251b\u2517\u2501\u2578,\u2517\u2501\u251b\u257a\u2501\u251b\u257a\u2501\u251b,\u257a\u2501\u251b\u2517\u2501\u251b\u257a\u2501\u251b\u00a0\u00a0\u2579\u2551 \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass DigitApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    #pi {\n        border: double green;\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"3.141,592,653,5897\", id=\"pi\")\n\n\nif __name__ == \"__main__\":\n    app = DigitApp()\n    app.run()\n</code></pre> <p>Here's another example which uses <code>Digits</code> to display the current time:</p> Outputclock.py <p> ClockApp \u00a0\u2513\u00a0\u250f\u2501\u2513\u00a0\u00a0\u00a0\u250f\u2501\u2578\u00a0\u2513\u00a0\u00a0\u00a0\u00a0\u00a0\u2513\u00a0\u250f\u2501\u2513 \u00a0\u2503\u00a0\u2523\u2501\u252b\u00a0:\u00a0\u2517\u2501\u2513\u00a0\u2503\u00a0\u00a0:\u00a0\u00a0\u2503\u00a0\u2517\u2501\u252b \u257a\u253b\u2578\u2517\u2501\u251b\u00a0\u00a0\u00a0\u257a\u2501\u251b\u257a\u253b\u2578\u00a0\u00a0\u00a0\u257a\u253b\u2578\u257a\u2501\u251b </p> <pre><code>from datetime import datetime\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Digits\n\n\nclass ClockApp(App):\n    CSS = \"\"\"\n    Screen {\n        align: center middle;\n    }\n    #clock {\n        width: auto;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Digits(\"\", id=\"clock\")\n\n    def on_ready(self) -&gt; None:\n        self.update_clock()\n        self.set_interval(1, self.update_clock)\n\n    def update_clock(self) -&gt; None:\n        clock = datetime.now().time()\n        self.query_one(Digits).update(f\"{clock:%T}\")\n\n\nif __name__ == \"__main__\":\n    app = ClockApp()\n    app.run(inline=True)\n</code></pre>"},{"location":"widgets/digits/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/digits/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/digits/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/digits/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A widget to display numerical values using a 3x3 grid of unicode characters.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Value to display in widget.</p> <code>''</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/digits/#textual.widgets.Digits(value)","title":"<code>value</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(name)","title":"<code>name</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(id)","title":"<code>id</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/digits/#textual.widgets.Digits.value","title":"value  <code>property</code>","text":"<pre><code>value\n</code></pre> <p>The current value displayed in the Digits.</p>"},{"location":"widgets/digits/#textual.widgets.Digits.update","title":"update","text":"<pre><code>update(value)\n</code></pre> <p>Update the Digits with a new value.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>New value to display.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>If the value isn't a <code>str</code>.</p>"},{"location":"widgets/digits/#textual.widgets.Digits.update(value)","title":"<code>value</code>","text":""},{"location":"widgets/directory_tree/","title":"DirectoryTree","text":"<p>A tree control to navigate the contents of your filesystem.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/directory_tree/#example","title":"Example","text":"<p>The example below creates a simple tree to navigate the current working directory.</p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import DirectoryTree\n\n\nclass DirectoryTreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield DirectoryTree(\"./\")\n\n\nif __name__ == \"__main__\":\n    app = DirectoryTreeApp()\n    app.run()\n</code></pre>"},{"location":"widgets/directory_tree/#filtering","title":"Filtering","text":"<p>There may be times where you want to filter what appears in the <code>DirectoryTree</code>. To do this inherit from <code>DirectoryTree</code> and implement your own version of the <code>filter_paths</code> method. It should take an iterable of Python <code>Path</code> objects, and return those that pass the filter. For example, if you wanted to take the above code an filter out all of the \"hidden\" files and directories:</p> Outputdirectory_tree_filtered.py <p> DirectoryTreeApp \ud83d\udcc2\u00a0 \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0__pycache__ \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0dist \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0docs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0examples \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0imgs \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0notes \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0questions \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0reference \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0sandbox \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0site \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0src \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tests \u2523\u2501\u2501\u00a0\ud83d\udcc1\u00a0tools \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0CHANGELOG.md \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0CODE_OF_CONDUCT.md \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0CONTRIBUTING.md\u2584\u2584 \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0docs.md \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0faq.yml \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0keys.log \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0LICENSE \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0Makefile \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0mkdocs-common.yml \u2523\u2501\u2501\u00a0\ud83d\udcc4\u00a0mkdocs-nav-offline.yml </p> <pre><code>from pathlib import Path\nfrom typing import Iterable\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import DirectoryTree\n\n\nclass FilteredDirectoryTree(DirectoryTree):\n    def filter_paths(self, paths: Iterable[Path]) -&gt; Iterable[Path]:\n        return [path for path in paths if not path.name.startswith(\".\")]\n\n\nclass DirectoryTreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield FilteredDirectoryTree(\"./\")\n\n\nif __name__ == \"__main__\":\n    app = DirectoryTreeApp()\n    app.run()\n</code></pre>"},{"location":"widgets/directory_tree/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_root</code> <code>bool</code> <code>True</code> Show the root node. <code>show_guides</code> <code>bool</code> <code>True</code> Show guide lines between levels. <code>guide_depth</code> <code>int</code> <code>4</code> Amount of indentation between parent and child."},{"location":"widgets/directory_tree/#messages","title":"Messages","text":"<ul> <li>DirectoryTree.FileSelected</li> </ul>"},{"location":"widgets/directory_tree/#bindings","title":"Bindings","text":"<p>The directory tree widget inherits the bindings from the tree widget.</p>"},{"location":"widgets/directory_tree/#component-classes","title":"Component Classes","text":"<p>The directory tree widget provides the following component classes:</p> Class Description <code>directory-tree--extension</code> Target the extension of a file name. <code>directory-tree--file</code> Target files in the directory structure. <code>directory-tree--folder</code> Target folders in the directory structure. <code>directory-tree--hidden</code> Target hidden items in the directory structure. <p>See also the component classes for <code>Tree</code>.</p>"},{"location":"widgets/directory_tree/#see-also","title":"See Also","text":"<ul> <li>Tree code reference</li> </ul> <p>               Bases: <code>Tree[DirEntry]</code></p> <p>A Tree widget that presents files and directories.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path</code> <p>Path to directory.</p> required <code>str | None</code> <p>The name of the widget, or None for no name.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM, or None for no ID.</p> <code>None</code> <code>str | None</code> <p>A space-separated list of classes, or None for no classes.</p> <code>None</code> <code>bool</code> <p>Whether the directory tree is disabled or not.</p> <code>False</code>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(name)","title":"<code>name</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(id)","title":"<code>id</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"directory-tree--extension\",\n    \"directory-tree--file\",\n    \"directory-tree--folder\",\n    \"directory-tree--hidden\",\n}\n</code></pre> Class Description <code>directory-tree--extension</code> Target the extension of a file name. <code>directory-tree--file</code> Target files in the directory structure. <code>directory-tree--folder</code> Target folders in the directory structure. <code>directory-tree--hidden</code> Target hidden items in the directory structure. <p>See also the component classes for <code>Tree</code>.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.PATH","title":"PATH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>PATH = Path\n</code></pre> <p>Callable that returns a fresh path object.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.path","title":"path  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>path = path\n</code></pre> <p>The path that is the root of the directory tree.</p> Note <p>This can be set to either a <code>str</code> or a <code>pathlib.Path</code> object, but the value will always be a <code>pathlib.Path</code> object.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected","title":"DirectorySelected","text":"<pre><code>DirectorySelected(node, path)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a directory is selected.</p> <p>Can be handled using <code>on_directory_tree_directory_selected</code> in a subclass of <code>DirectoryTree</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The tree node for the directory that was selected.</p> required <code>Path</code> <p>The path of the directory that was selected.</p> required"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Tree</code> that had a directory selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The tree node of the directory that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.DirectorySelected.path","title":"path  <code>instance-attribute</code>","text":"<pre><code>path = path\n</code></pre> <p>The path of the directory that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected","title":"FileSelected","text":"<pre><code>FileSelected(node, path)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a file is selected.</p> <p>Can be handled using <code>on_directory_tree_file_selected</code> in a subclass of <code>DirectoryTree</code> or in a parent widget in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The tree node for the file that was selected.</p> required <code>Path</code> <p>The path of the file that was selected.</p> required"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Tree</code> that had a file selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The tree node of the file that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.FileSelected.path","title":"path  <code>instance-attribute</code>","text":"<pre><code>path = path\n</code></pre> <p>The path of the file that was selected.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.clear_node","title":"clear_node","text":"<pre><code>clear_node(node)\n</code></pre> <p>Clear all nodes under the given node.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.filter_paths","title":"filter_paths","text":"<pre><code>filter_paths(paths)\n</code></pre> <p>Filter the paths before adding them to the tree.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[Path]</code> <p>The paths to be filtered.</p> required <p>Returns:</p> Type Description <code>Iterable[Path]</code> <p>The filtered paths.</p> <p>By default this method returns all of the paths provided. To create a filtered <code>DirectoryTree</code> inherit from it and implement your own version of this method.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.filter_paths(paths)","title":"<code>paths</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.process_label","title":"process_label","text":"<pre><code>process_label(label)\n</code></pre> <p>Process a str or Text into a label. May be overridden in a subclass to modify how labels are rendered.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.process_label(label)","title":"<code>label</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reload","title":"reload","text":"<pre><code>reload()\n</code></pre> <p>Reload the <code>DirectoryTree</code> contents.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable that ensures the tree has finished reloading.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reload_node","title":"reload_node","text":"<pre><code>reload_node(node)\n</code></pre> <p>Reload the given node's contents.</p> <p>The return value may be awaited to ensure the DirectoryTree has reached a stable state and is no longer performing any node reloading (of this node or any other nodes).</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The root of the subtree to reload.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable that ensures the subtree has finished reloading.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reload_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label","title":"render_label","text":"<pre><code>render_label(node, base_style, style)\n</code></pre> <p>Render a label for the given node.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>A tree node.</p> required <code>Style</code> <p>The base style of the widget.</p> required <code>Style</code> <p>The additional style for the label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object containing the label.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label(base_style)","title":"<code>base_style</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.render_label(style)","title":"<code>style</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node","title":"reset_node","text":"<pre><code>reset_node(node, label, data=None)\n</code></pre> <p>Clear the subtree and reset the given node.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[DirEntry]</code> <p>The node to reset.</p> required <code>TextType</code> <p>The label for the node.</p> required <code>DirEntry | None</code> <p>Optional data for the node.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node(label)","title":"<code>label</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.reset_node(data)","title":"<code>data</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.validate_path","title":"validate_path","text":"<pre><code>validate_path(path)\n</code></pre> <p>Ensure that the path is of the <code>Path</code> type.</p> <p>Parameters:</p> Name Type Description Default <code>str | Path</code> <p>The path to validate.</p> required <p>Returns:</p> Type Description <code>Path</code> <p>The validated Path value.</p> Note <p>The result will always be a Python <code>Path</code> object, regardless of the value given.</p>"},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.validate_path(path)","title":"<code>path</code>","text":""},{"location":"widgets/directory_tree/#textual.widgets.DirectoryTree.watch_path","title":"watch_path  <code>async</code>","text":"<pre><code>watch_path()\n</code></pre> <p>Watch for changes to the <code>path</code> of the directory tree.</p> <p>If the path is changed the directory tree will be repopulated using the new value as the root.</p>"},{"location":"widgets/footer/","title":"Footer","text":"<p>Added in version 0.63.0</p> <p>A simple footer widget which is docked to the bottom of its parent container. Displays available keybindings for the currently focused widget.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/footer/#example","title":"Example","text":"<p>The example below shows an app with a single keybinding that contains only a <code>Footer</code> widget. Notice how the <code>Footer</code> automatically displays the keybinding.</p> Outputfooter.py <p> FooterApp \u00a0q\u00a0Quit\u00a0the\u00a0app\u00a0\u00a0?\u00a0Show\u00a0help\u00a0screen\u00a0\u00a0del\u00a0Delete\u00a0the\u00a0thing\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.binding import Binding\nfrom textual.widgets import Footer\n\n\nclass FooterApp(App):\n    BINDINGS = [\n        Binding(key=\"q\", action=\"quit\", description=\"Quit the app\"),\n        Binding(\n            key=\"question_mark\",\n            action=\"help\",\n            description=\"Show help screen\",\n            key_display=\"?\",\n        ),\n        Binding(key=\"delete\", action=\"delete\", description=\"Delete the thing\"),\n        Binding(key=\"j\", action=\"down\", description=\"Scroll down\", show=False),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = FooterApp()\n    app.run()\n</code></pre>"},{"location":"widgets/footer/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>compact</code> <code>bool</code> <code>False</code> Display a more compact footer. <code>show_command_palette</code> <code>bool</code> <code>True</code> Display the key to invoke the command palette (show on the right hand side of the footer)."},{"location":"widgets/footer/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/footer/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/footer/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/footer/#additional-notes","title":"Additional Notes","text":"<ul> <li>You can prevent keybindings from appearing in the footer by setting the <code>show</code> argument of the <code>Binding</code> to <code>False</code>.</li> <li>You can customize the text that appears for the key itself in the footer using the <code>key_display</code> argument of <code>Binding</code>.</li> </ul> <p>               Bases: <code>ScrollableContainer</code></p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <code>bool</code> <p>Show key binding to command palette, on the right of the footer.</p> <code>True</code>"},{"location":"widgets/footer/#textual.widgets.Footer(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(name)","title":"<code>name</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(id)","title":"<code>id</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer(show_command_palette)","title":"<code>show_command_palette</code>","text":""},{"location":"widgets/footer/#textual.widgets.Footer.compact","title":"compact  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>compact = reactive(False)\n</code></pre> <p>Display in compact style.</p>"},{"location":"widgets/footer/#textual.widgets.Footer.show_command_palette","title":"show_command_palette  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_command_palette = reactive(True)\n</code></pre> <p>Show the key to invoke the command palette.</p>"},{"location":"widgets/header/","title":"Header","text":"<p>A simple header widget which docks itself to the top of the parent container.</p> <p>Note</p> <p>The application title which is shown in the header is taken from the <code>title</code> and <code>sub_title</code> of the application.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/header/#example","title":"Example","text":"<p>The example below shows an app with a <code>Header</code>.</p> Outputheader.py <p> HeaderApp \u2b58HeaderApp </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header\n\n\nclass HeaderApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n\n\nif __name__ == \"__main__\":\n    app = HeaderApp()\n    app.run()\n</code></pre> <p>This example shows how to set the text in the <code>Header</code> using <code>App.title</code> and <code>App.sub_title</code>:</p> Outputheader_app_title.py <p> HeaderApp \u2b58Header\u00a0Application\u00a0\u2014\u00a0With\u00a0title\u00a0and\u00a0sub-title </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Header\n\n\nclass HeaderApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n\n    def on_mount(self) -&gt; None:\n        self.title = \"Header Application\"\n        self.sub_title = \"With title and sub-title\"\n\n\nif __name__ == \"__main__\":\n    app = HeaderApp()\n    app.run()\n</code></pre>"},{"location":"widgets/header/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>tall</code> <code>bool</code> <code>True</code> Whether the <code>Header</code> widget is displayed as tall or not. The tall variant is 3 cells tall by default. The non-tall variant is a single cell tall. This can be toggled by clicking on the header."},{"location":"widgets/header/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/header/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/header/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A header widget with icon and clock.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p><code>True</code> if the clock should be shown on the right of the header.</p> <code>False</code> <code>str | None</code> <p>The name of the header widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the header widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the header widget.</p> <code>None</code> <code>str | None</code> <p>Single character to use as an icon, or <code>None</code> for default.</p> <code>None</code> <code>str | None</code> <p>Time format (used by strftime) for clock, or <code>None</code> for default.</p> <code>None</code>"},{"location":"widgets/header/#textual.widgets.Header(show_clock)","title":"<code>show_clock</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(name)","title":"<code>name</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(id)","title":"<code>id</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(icon)","title":"<code>icon</code>","text":""},{"location":"widgets/header/#textual.widgets.Header(time_format)","title":"<code>time_format</code>","text":""},{"location":"widgets/header/#textual.widgets.Header.icon","title":"icon  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>icon = Reactive('\u2b58')\n</code></pre> <p>A character for the icon at the top left.</p>"},{"location":"widgets/header/#textual.widgets.Header.screen_sub_title","title":"screen_sub_title  <code>property</code>","text":"<pre><code>screen_sub_title\n</code></pre> <p>The sub-title that this header will display.</p> <p>This depends on <code>Screen.sub_title</code> and <code>App.sub_title</code>.</p>"},{"location":"widgets/header/#textual.widgets.Header.screen_title","title":"screen_title  <code>property</code>","text":"<pre><code>screen_title\n</code></pre> <p>The title that this header will display.</p> <p>This depends on <code>Screen.title</code> and <code>App.title</code>.</p>"},{"location":"widgets/header/#textual.widgets.Header.tall","title":"tall  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>tall = Reactive(False)\n</code></pre> <p>Set to <code>True</code> for a taller header or <code>False</code> for a single line header.</p>"},{"location":"widgets/header/#textual.widgets.Header.time_format","title":"time_format  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>time_format = Reactive('%X')\n</code></pre> <p>Time format of the clock.</p>"},{"location":"widgets/input/","title":"Input","text":"<p>A single-line text input widget.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/input/#examples","title":"Examples","text":""},{"location":"widgets/input/#a-simple-example","title":"A Simple Example","text":"<p>The example below shows how you might create a simple form using two <code>Input</code> widgets.</p> Outputinput.py <p> InputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aDarren\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aLast\u00a0Name\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Input\n\n\nclass InputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"First Name\")\n        yield Input(placeholder=\"Last Name\")\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre>"},{"location":"widgets/input/#input-types","title":"Input Types","text":"<p>The <code>Input</code> widget supports a <code>type</code> parameter which will prevent the user from typing invalid characters. You can set <code>type</code> to any of the following values:</p> input.type Description <code>\"integer\"</code> Restricts input to integers. <code>\"number\"</code> Restricts input to a floating point number. <code>\"text\"</code> Allow all text (no restrictions). Outputinput_types.py <p> InputApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAn\u00a0integer\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aA\u00a0number\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Input\n\n\nclass InputApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Input(placeholder=\"An integer\", type=\"integer\")\n        yield Input(placeholder=\"A number\", type=\"number\")\n\n\nif __name__ == \"__main__\":\n    app = InputApp()\n    app.run()\n</code></pre> <p>If you set <code>type</code> to something other than <code>\"text\"</code>, then the <code>Input</code> will apply the appropriate validator.</p>"},{"location":"widgets/input/#restricting-input","title":"Restricting Input","text":"<p>You can limit input to particular characters by supplying the <code>restrict</code> parameter, which should be a regular expression. The <code>Input</code> widget will prevent the addition of any characters that would cause the regex to no longer match. For instance, if you wanted to limit characters to binary you could set <code>restrict=r\"[01]*\"</code>.</p> <p>Note</p> <p>The <code>restrict</code> regular expression is applied to the full value and not just to the new character.</p>"},{"location":"widgets/input/#maximum-length","title":"Maximum Length","text":"<p>You can limit the length of the input by setting <code>max_length</code> to a value greater than zero. This will prevent the user from typing any more characters when the maximum has been reached.</p>"},{"location":"widgets/input/#validating-input","title":"Validating Input","text":"<p>You can supply one or more validators to the <code>Input</code> widget to validate the value.</p> <p>All the supplied validators will run when the value changes, the <code>Input</code> is submitted, or focus moves out of the <code>Input</code>. The values <code>\"changed\"</code>, <code>\"submitted\"</code>, and <code>\"blur\"</code>, can be passed as an iterable to the <code>Input</code> parameter <code>validate_on</code> to request that validation occur only on the respective mesages. (See <code>InputValidationOn</code> and <code>Input.validate_on</code>.) For example, the code below creates an <code>Input</code> widget that only gets validated when the value is submitted explicitly:</p> <pre><code>input = Input(validate_on=[\"submitted\"])\n</code></pre> <p>Validation is considered to have failed if any of the validators fail.</p> <p>You can check whether the validation succeeded or failed inside an Input.Changed or Input.Submitted handler by looking at the <code>validation_result</code> attribute on these events.</p> <p>In the example below, we show how to combine multiple validators and update the UI to tell the user why validation failed. Click the tabs to see the output for validation failures and successes.</p> input_validation.pyValidation FailureValidation Success <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.validation import Function, Number, ValidationResult, Validator\nfrom textual.widgets import Input, Label, Pretty\n\n\nclass InputApp(App):\n    # (6)!\n    CSS = \"\"\"\n    Input.-valid {\n        border: tall $success 60%;\n    }\n    Input.-valid:focus {\n        border: tall $success;\n    }\n    Input {\n        margin: 1 1;\n    }\n    Label {\n        margin: 1 2;\n    }\n    Pretty {\n        margin: 1 2;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Enter an even number between 1 and 100 that is also a palindrome.\")\n        yield Input(\n            placeholder=\"Enter a number...\",\n            validators=[\n                Number(minimum=1, maximum=100),  # (1)!\n                Function(is_even, \"Value is not even.\"),  # (2)!\n                Palindrome(),  # (3)!\n            ],\n        )\n        yield Pretty([])\n\n    @on(Input.Changed)\n    def show_invalid_reasons(self, event: Input.Changed) -&gt; None:\n        # Updating the UI to show the reasons why validation failed\n        if not event.validation_result.is_valid:  # (4)!\n            self.query_one(Pretty).update(event.validation_result.failure_descriptions)\n        else:\n            self.query_one(Pretty).update([])\n\n\ndef is_even(value: str) -&gt; bool:\n    try:\n        return int(value) % 2 == 0\n    except ValueError:\n        return False\n\n\n# A custom validator\nclass Palindrome(Validator):  # (5)!\n    def validate(self, value: str) -&gt; ValidationResult:\n        \"\"\"Check a string is equal to its reverse.\"\"\"\n        if self.is_palindrome(value):\n            return self.success()\n        else:\n            return self.failure(\"That's not a palindrome :/\")\n\n    @staticmethod\n    def is_palindrome(value: str) -&gt; bool:\n        return value == value[::-1]\n\n\napp = InputApp()\n\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li><code>Number</code> is a built-in <code>Validator</code>. It checks that the value in the <code>Input</code> is a valid number, and optionally can check that it falls within a range.</li> <li><code>Function</code> lets you quickly define custom validation constraints. In this case, we check the value in the <code>Input</code> is even.</li> <li><code>Palindrome</code> is a custom <code>Validator</code> defined below.</li> <li>The <code>Input.Changed</code> event has a <code>validation_result</code> attribute which contains information about the validation that occurred when the value changed.</li> <li>Here's how we can implement a custom validator which checks if a string is a palindrome. Note how the description passed into <code>self.failure</code> corresponds to the message seen on UI.</li> <li>Textual offers default styling for the <code>-invalid</code> CSS class (a red border), which is automatically applied to <code>Input</code> when validation fails. We can also provide custom styling for the <code>-valid</code> class, as seen here. In this case, we add a green border around the <code>Input</code> to indicate successful validation.</li> </ol> <p> InputApp \u00a0\u00a0Enter\u00a0an\u00a0even\u00a0number\u00a0between\u00a01\u00a0and\u00a0100\u00a0that\u00a0is\u00a0also\u00a0a\u00a0palindrome.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a-23\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e [ 'Must\u00a0be\u00a0between\u00a01\u00a0and\u00a0100.', 'Value\u00a0is\u00a0not\u00a0even.', \"That's\u00a0not\u00a0a\u00a0palindrome\u00a0:/\" ] </p> <p> InputApp \u00a0\u00a0Enter\u00a0an\u00a0even\u00a0number\u00a0between\u00a01\u00a0and\u00a0100\u00a0that\u00a0is\u00a0also\u00a0a\u00a0palindrome.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a44\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e [] </p> <p>Textual offers several built-in validators for common requirements, but you can easily roll your own by extending Validator, as seen for <code>Palindrome</code> in the example above.</p>"},{"location":"widgets/input/#validate-empty","title":"Validate Empty","text":"<p>If you set <code>valid_empty=True</code> then empty values will bypass any validators, and empty values will be considered valid.</p>"},{"location":"widgets/input/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>cursor_blink</code> <code>bool</code> <code>True</code> True if cursor blinking is enabled. <code>value</code> <code>str</code> <code>\"\"</code> The value currently in the text input. <code>cursor_position</code> <code>int</code> <code>0</code> The index of the cursor in the value string. <code>placeholder</code> <code>str</code> <code>\"\"</code> The dimmed placeholder text to display when the input is empty. <code>password</code> <code>bool</code> <code>False</code> True if the input should be masked. <code>restrict</code> <code>str</code> <code>None</code> Optional regular expression to restrict input. <code>type</code> <code>str</code> <code>\"text\"</code> The type of the input. <code>max_length</code> <code>int</code> <code>None</code> Maximum length of the input value. <code>valid_empty</code> <code>bool</code> <code>False</code> Allow empty values to bypass validation."},{"location":"widgets/input/#messages","title":"Messages","text":"<ul> <li>Input.Changed</li> <li>Input.Submitted</li> </ul>"},{"location":"widgets/input/#bindings","title":"Bindings","text":"<p>The input widget defines the following bindings:</p> Key(s) Description left Move the cursor left. ctrl+left Move the cursor one word to the left. right Move the cursor right or accept the completion suggestion. ctrl+right Move the cursor one word to the right. backspace Delete the character to the left of the cursor. home,ctrl+a Go to the beginning of the input. end,ctrl+e Go to the end of the input. delete,ctrl+d Delete the character to the right of the cursor. enter Submit the current value of the input. ctrl+w Delete the word to the left of the cursor. ctrl+u Delete everything to the left of the cursor. ctrl+f Delete the word to the right of the cursor. ctrl+k Delete everything to the right of the cursor."},{"location":"widgets/input/#component-classes","title":"Component Classes","text":"<p>The input widget provides the following component classes:</p> Class Description <code>input--cursor</code> Target the cursor. <code>input--placeholder</code> Target the placeholder text (when it exists). <code>input--suggestion</code> Target the auto-completion suggestion (when it exists)."},{"location":"widgets/input/#additional-notes","title":"Additional Notes","text":"<ul> <li>The spacing around the text content is due to border. To remove it, set <code>border: none;</code> in your CSS.</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A text input widget.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>An optional default value for the input.</p> <code>None</code> <code>str</code> <p>Optional placeholder text for the input.</p> <code>''</code> <code>Highlighter | None</code> <p>An optional highlighter for the input.</p> <code>None</code> <code>bool</code> <p>Flag to say if the field should obfuscate its content.</p> <code>False</code> <code>str | None</code> <p>A regex to restrict character inputs.</p> <code>None</code> <code>InputType</code> <p>The type of the input.</p> <code>'text'</code> <code>int</code> <p>The maximum length of the input, or 0 for no maximum length.</p> <code>0</code> <code>Suggester | None</code> <p><code>Suggester</code> associated with this input instance.</p> <code>None</code> <code>Validator | Iterable[Validator] | None</code> <p>An iterable of validators that the Input value will be checked against.</p> <code>None</code> <code>Iterable[InputValidationOn] | None</code> <p>Zero or more of the values \"blur\", \"changed\", and \"submitted\", which determine when to do input validation. The default is to do validation for all messages.</p> <code>None</code> <code>bool</code> <p>Empty values are valid.</p> <code>False</code> <code>str | None</code> <p>Optional name for the input widget.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the input is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/input/#textual.widgets.Input(value)","title":"<code>value</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(placeholder)","title":"<code>placeholder</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(highlighter)","title":"<code>highlighter</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(password)","title":"<code>password</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(restrict)","title":"<code>restrict</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(type)","title":"<code>type</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(max_length)","title":"<code>max_length</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(suggester)","title":"<code>suggester</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(validators)","title":"<code>validators</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(validate_on)","title":"<code>validate_on</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(valid_empty)","title":"<code>valid_empty</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(name)","title":"<code>name</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(id)","title":"<code>id</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/input/#textual.widgets.Input(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"left\", \"cursor_left\", \"cursor left\", show=False\n    ),\n    Binding(\n        \"ctrl+left\",\n        \"cursor_left_word\",\n        \"cursor left word\",\n        show=False,\n    ),\n    Binding(\n        \"right\", \"cursor_right\", \"cursor right\", show=False\n    ),\n    Binding(\n        \"ctrl+right\",\n        \"cursor_right_word\",\n        \"cursor right word\",\n        show=False,\n    ),\n    Binding(\n        \"backspace\",\n        \"delete_left\",\n        \"delete left\",\n        show=False,\n    ),\n    Binding(\"home,ctrl+a\", \"home\", \"home\", show=False),\n    Binding(\"end,ctrl+e\", \"end\", \"end\", show=False),\n    Binding(\n        \"delete,ctrl+d\",\n        \"delete_right\",\n        \"delete right\",\n        show=False,\n    ),\n    Binding(\"enter\", \"submit\", \"submit\", show=False),\n    Binding(\n        \"ctrl+w\",\n        \"delete_left_word\",\n        \"delete left to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+u\",\n        \"delete_left_all\",\n        \"delete all to the left\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+f\",\n        \"delete_right_word\",\n        \"delete right to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+k\",\n        \"delete_right_all\",\n        \"delete all to the right\",\n        show=False,\n    ),\n]\n</code></pre> Key(s) Description left Move the cursor left. ctrl+left Move the cursor one word to the left. right Move the cursor right or accept the completion suggestion. ctrl+right Move the cursor one word to the right. backspace Delete the character to the left of the cursor. home,ctrl+a Go to the beginning of the input. end,ctrl+e Go to the end of the input. delete,ctrl+d Delete the character to the right of the cursor. enter Submit the current value of the input. ctrl+w Delete the word to the left of the cursor. ctrl+u Delete everything to the left of the cursor. ctrl+f Delete the word to the right of the cursor. ctrl+k Delete everything to the right of the cursor."},{"location":"widgets/input/#textual.widgets.Input.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"input--cursor\",\n    \"input--placeholder\",\n    \"input--suggestion\",\n}\n</code></pre> Class Description <code>input--cursor</code> Target the cursor. <code>input--placeholder</code> Target the placeholder text (when it exists). <code>input--suggestion</code> Target the auto-completion suggestion (when it exists)."},{"location":"widgets/input/#textual.widgets.Input.cursor_screen_offset","title":"cursor_screen_offset  <code>property</code>","text":"<pre><code>cursor_screen_offset\n</code></pre> <p>The offset of the cursor of this input in screen-space. (x, y)/(column, row)</p>"},{"location":"widgets/input/#textual.widgets.Input.cursor_width","title":"cursor_width  <code>property</code>","text":"<pre><code>cursor_width\n</code></pre> <p>The width of the input (with extra space for cursor at the end).</p>"},{"location":"widgets/input/#textual.widgets.Input.is_valid","title":"is_valid  <code>property</code>","text":"<pre><code>is_valid\n</code></pre> <p>Check if the value has passed validation.</p>"},{"location":"widgets/input/#textual.widgets.Input.max_length","title":"max_length  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>max_length = max_length\n</code></pre> <p>The maximum length of the input, in characters.</p>"},{"location":"widgets/input/#textual.widgets.Input.restrict","title":"restrict  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>restrict = restrict\n</code></pre> <p>A regular expression to limit changes in value.</p>"},{"location":"widgets/input/#textual.widgets.Input.suggester","title":"suggester  <code>instance-attribute</code>","text":"<pre><code>suggester = suggester\n</code></pre> <p>The suggester used to provide completions as the user types.</p>"},{"location":"widgets/input/#textual.widgets.Input.type","title":"type  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>type = type\n</code></pre> <p>The type of the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.valid_empty","title":"valid_empty  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>valid_empty = var(False)\n</code></pre> <p>Empty values should pass validation.</p>"},{"location":"widgets/input/#textual.widgets.Input.validate_on","title":"validate_on  <code>instance-attribute</code>","text":"<pre><code>validate_on = (\n    _POSSIBLE_VALIDATE_ON_VALUES &amp; set(validate_on)\n    if validate_on is not None\n    else _POSSIBLE_VALIDATE_ON_VALUES\n)\n</code></pre> <p>Set with event names to do input validation on.</p> <p>Validation can only be performed on blur, on input changes and on input submission.</p> Example <p>This creates an <code>Input</code> widget that only gets validated when the value is submitted explicitly:</p> <pre><code>input = Input(validate_on=[\"submitted\"])\n</code></pre>"},{"location":"widgets/input/#textual.widgets.Input.Changed","title":"Changed  <code>dataclass</code>","text":"<pre><code>Changed(input, value, validation_result=None)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the value changes.</p> <p>Can be handled using <code>on_input_changed</code> in a subclass of <code>Input</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for self.input.</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.input","title":"input  <code>instance-attribute</code>","text":"<pre><code>input\n</code></pre> <p>The <code>Input</code> widget that was changed.</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.validation_result","title":"validation_result  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>validation_result = None\n</code></pre> <p>The result of validating the value (formed by combining the results from each validator), or None if validation was not performed (for example when no validators are specified in the <code>Input</code>s init)</p>"},{"location":"widgets/input/#textual.widgets.Input.Changed.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value\n</code></pre> <p>The value that the input was changed to.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted","title":"Submitted  <code>dataclass</code>","text":"<pre><code>Submitted(input, value, validation_result=None)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the enter key is pressed within an <code>Input</code>.</p> <p>Can be handled using <code>on_input_submitted</code> in a subclass of <code>Input</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for self.input.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.input","title":"input  <code>instance-attribute</code>","text":"<pre><code>input\n</code></pre> <p>The <code>Input</code> widget that is being submitted.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.validation_result","title":"validation_result  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>validation_result = None\n</code></pre> <p>The result of validating the value on submission, formed by combining the results for each validator. This value will be None if no validation was performed, which will be the case if no validators are supplied to the corresponding <code>Input</code> widget.</p>"},{"location":"widgets/input/#textual.widgets.Input.Submitted.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value\n</code></pre> <p>The value of the <code>Input</code> being submitted.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_left","title":"action_cursor_left","text":"<pre><code>action_cursor_left()\n</code></pre> <p>Move the cursor one position to the left.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_left_word","title":"action_cursor_left_word","text":"<pre><code>action_cursor_left_word()\n</code></pre> <p>Move the cursor left to the start of a word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_right","title":"action_cursor_right","text":"<pre><code>action_cursor_right()\n</code></pre> <p>Accept an auto-completion or move the cursor one position to the right.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_cursor_right_word","title":"action_cursor_right_word","text":"<pre><code>action_cursor_right_word()\n</code></pre> <p>Move the cursor right to the start of a word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_left","title":"action_delete_left","text":"<pre><code>action_delete_left()\n</code></pre> <p>Delete one character to the left of the current cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_left_all","title":"action_delete_left_all","text":"<pre><code>action_delete_left_all()\n</code></pre> <p>Delete all characters to the left of the cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_left_word","title":"action_delete_left_word","text":"<pre><code>action_delete_left_word()\n</code></pre> <p>Delete leftward of the cursor position to the start of a word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_right","title":"action_delete_right","text":"<pre><code>action_delete_right()\n</code></pre> <p>Delete one character at the current cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_right_all","title":"action_delete_right_all","text":"<pre><code>action_delete_right_all()\n</code></pre> <p>Delete the current character and all characters to the right of the cursor position.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_delete_right_word","title":"action_delete_right_word","text":"<pre><code>action_delete_right_word()\n</code></pre> <p>Delete the current character and all rightward to the start of the next word.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_end","title":"action_end","text":"<pre><code>action_end()\n</code></pre> <p>Move the cursor to the end of the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_home","title":"action_home","text":"<pre><code>action_home()\n</code></pre> <p>Move the cursor to the start of the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.action_submit","title":"action_submit  <code>async</code>","text":"<pre><code>action_submit()\n</code></pre> <p>Handle a submit action.</p> <p>Normally triggered by the user pressing Enter. This may also run any validators.</p>"},{"location":"widgets/input/#textual.widgets.Input.check_consume_key","title":"check_consume_key","text":"<pre><code>check_consume_key(key, character)\n</code></pre> <p>Check if the widget may consume the given key.</p> <p>As an input we are expecting to capture printable keys.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A key identifier.</p> required <code>str | None</code> <p>A character associated with the key, or <code>None</code> if there isn't one.</p> required <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may capture the key in it's <code>Key</code> message, or <code>False</code> if it won't.</p>"},{"location":"widgets/input/#textual.widgets.Input.check_consume_key(key)","title":"<code>key</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.check_consume_key(character)","title":"<code>character</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the input.</p>"},{"location":"widgets/input/#textual.widgets.Input.insert_text_at_cursor","title":"insert_text_at_cursor","text":"<pre><code>insert_text_at_cursor(text)\n</code></pre> <p>Insert new text at the cursor, move the cursor to the end of the new text.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>New text to insert.</p> required"},{"location":"widgets/input/#textual.widgets.Input.insert_text_at_cursor(text)","title":"<code>text</code>","text":""},{"location":"widgets/input/#textual.widgets.Input.restricted","title":"restricted","text":"<pre><code>restricted()\n</code></pre> <p>Called when a character has been restricted.</p> <p>The default behavior is to play the system bell. You may want to override this method if you want to disable the bell or do something else entirely.</p>"},{"location":"widgets/input/#textual.widgets.Input.validate","title":"validate","text":"<pre><code>validate(value)\n</code></pre> <p>Run all the validators associated with this Input on the supplied value.</p> <p>Runs all validators, combines the result into one. If any of the validators failed, the combined result will be a failure. If no validators are present, None will be returned. This also sets the <code>-invalid</code> CSS class on the Input if the validation fails, and sets the <code>-valid</code> CSS class on the Input if the validation succeeds.</p> <p>Returns:</p> Type Description <code>ValidationResult | None</code> <p>A ValidationResult indicating whether all validators succeeded or not. That is, if any validator fails, the result will be an unsuccessful validation.</p>"},{"location":"widgets/label/","title":"Label","text":"<p>Added in version 0.5.0</p> <p>A widget which displays static text, but which can also contain more complex Rich renderables.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/label/#example","title":"Example","text":"<p>The example below shows how you can use a <code>Label</code> widget to display some text.</p> Outputlabel.py <p> LabelApp Hello,\u00a0world!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label\n\n\nclass LabelApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Label(\"Hello, world!\")\n\n\nif __name__ == \"__main__\":\n    app = LabelApp()\n    app.run()\n</code></pre>"},{"location":"widgets/label/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/label/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/label/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/label/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Static</code></p> <p>A simple label widget for displaying text-oriented renderables.</p>"},{"location":"widgets/list_item/","title":"ListItem","text":"<p>Added in version 0.6.0</p> <p><code>ListItem</code> is the type of the elements in a <code>ListView</code>.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/list_item/#example","title":"Example","text":"<p>The example below shows an app with a simple <code>ListView</code>, consisting of multiple <code>ListItem</code>s. The arrow keys can be used to navigate the list.</p> Outputlist_view.py <p> ListViewExample One Two Three \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, ListItem, ListView\n\n\nclass ListViewExample(App):\n    CSS_PATH = \"list_view.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ListViewExample()\n    app.run()\n</code></pre>"},{"location":"widgets/list_item/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlighted</code> <code>bool</code> <code>False</code> True if this ListItem is highlighted"},{"location":"widgets/list_item/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/list_item/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/list_item/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A widget that is an item within a <code>ListView</code>.</p> <p>A <code>ListItem</code> is designed for use within a ListView, please see <code>ListView</code>'s documentation for more details on use.</p> <p>Parameters:</p> Name Type Description Default <code>Widget</code> <p>Child widgets.</p> <code>()</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/list_item/#textual.widgets.ListItem(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(name)","title":"<code>name</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(id)","title":"<code>id</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/list_item/#textual.widgets.ListItem.highlighted","title":"highlighted  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlighted = reactive(False)\n</code></pre> <p>Is this item highlighted?</p>"},{"location":"widgets/list_view/","title":"ListView","text":"<p>Added in version 0.6.0</p> <p>Displays a vertical list of <code>ListItem</code>s which can be highlighted and selected. Supports keyboard navigation.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/list_view/#example","title":"Example","text":"<p>The example below shows an app with a simple <code>ListView</code>.</p> Outputlist_view.pylist_view.tcss <p> ListViewExample One Two Three \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, ListItem, ListView\n\n\nclass ListViewExample(App):\n    CSS_PATH = \"list_view.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    app = ListViewExample()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nListView {\n    width: 30;\n    height: auto;\n    margin: 2 2;\n}\n\nLabel {\n    padding: 1 2;\n}\n</code></pre>"},{"location":"widgets/list_view/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>index</code> <code>int</code> <code>0</code> The currently highlighted index."},{"location":"widgets/list_view/#messages","title":"Messages","text":"<ul> <li>ListView.Highlighted</li> <li>ListView.Selected</li> </ul>"},{"location":"widgets/list_view/#bindings","title":"Bindings","text":"<p>The list view widget defines the following bindings:</p> Key(s) Description enter Select the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/list_view/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>VerticalScroll</code></p> <p>A vertical list view widget.</p> <p>Displays a vertical list of <code>ListItem</code>s which can be highlighted and selected using the mouse or keyboard.</p> <p>Attributes:</p> Name Type Description <code>index</code> <p>The index in the list that's currently highlighted.</p> <p>Parameters:</p> Name Type Description Default <code>ListItem</code> <p>The ListItems to display in the list.</p> <code>()</code> <code>int | None</code> <p>The index that should be highlighted when the list is first mounted.</p> <code>0</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The unique ID of the widget used in CSS/query selection.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the ListView is disabled or not.</p> <code>False</code>"},{"location":"widgets/list_view/#textual.widgets.ListView(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(initial_index)","title":"<code>initial_index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(name)","title":"<code>name</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(id)","title":"<code>id</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"enter\", \"select_cursor\", \"Select\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Cursor Up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"Cursor Down\", show=False\n    ),\n]\n</code></pre> Key(s) Description enter Select the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/list_view/#textual.widgets.ListView.highlighted_child","title":"highlighted_child  <code>property</code>","text":"<pre><code>highlighted_child\n</code></pre> <p>The currently highlighted ListItem, or None if nothing is highlighted.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.index","title":"index  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>index = reactive[Optional[int]](\n    0, always_update=True, init=False\n)\n</code></pre> <p>The index of the currently highlighted item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted","title":"Highlighted","text":"<pre><code>Highlighted(list_view, item)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the highlighted item changes.</p> <p>Highlighted item is controlled using up/down keys. Can be handled using <code>on_list_view_highlighted</code> in a subclass of <code>ListView</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'item'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The view that contains the item highlighted.</p> <p>This is an alias for <code>Highlighted.list_view</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.item","title":"item  <code>instance-attribute</code>","text":"<pre><code>item = item\n</code></pre> <p>The highlighted item, if there is one highlighted.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Highlighted.list_view","title":"list_view  <code>instance-attribute</code>","text":"<pre><code>list_view = list_view\n</code></pre> <p>The view that contains the item highlighted.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected","title":"Selected","text":"<pre><code>Selected(list_view, item)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when a list item is selected, e.g. when you press the enter key on it.</p> <p>Can be handled using <code>on_list_view_selected</code> in a subclass of <code>ListView</code> or in a parent widget in the DOM.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'item'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The view that contains the item selected.</p> <p>This is an alias for <code>Selected.list_view</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.item","title":"item  <code>instance-attribute</code>","text":"<pre><code>item = item\n</code></pre> <p>The selected item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.Selected.list_view","title":"list_view  <code>instance-attribute</code>","text":"<pre><code>list_view = list_view\n</code></pre> <p>The view that contains the item selected.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down()\n</code></pre> <p>Highlight the next item in the list.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up()\n</code></pre> <p>Highlight the previous item in the list.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.action_select_cursor","title":"action_select_cursor","text":"<pre><code>action_select_cursor()\n</code></pre> <p>Select the current item in the list.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.append","title":"append","text":"<pre><code>append(item)\n</code></pre> <p>Append a new ListItem to the end of the ListView.</p> <p>Parameters:</p> Name Type Description Default <code>ListItem</code> <p>The ListItem to append.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable that yields control to the event loop until the DOM has been updated with the new child item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.append(item)","title":"<code>item</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear all items from the ListView.</p> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable that yields control to the event loop until the DOM has been updated to reflect all children being removed.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.extend","title":"extend","text":"<pre><code>extend(items)\n</code></pre> <p>Append multiple new ListItems to the end of the ListView.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[ListItem]</code> <p>The ListItems to append.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable that yields control to the event loop until the DOM has been updated with the new child items.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.extend(items)","title":"<code>items</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.insert","title":"insert","text":"<pre><code>insert(index, items)\n</code></pre> <p>Insert new ListItem(s) to specified index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>index to insert new ListItem.</p> required <code>Iterable[ListItem]</code> <p>The ListItems to insert.</p> required <p>Returns:</p> Type Description <code>AwaitMount</code> <p>An awaitable that yields control to the event loop until the DOM has been updated with the new child item.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.insert(index)","title":"<code>index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.insert(items)","title":"<code>items</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.pop","title":"pop","text":"<pre><code>pop(index=None)\n</code></pre> <p>Remove last ListItem from ListView or    Remove ListItem from ListView by index</p> <p>Parameters:</p> Name Type Description Default <code>Optional[int]</code> <p>index of ListItem to remove from ListView</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable that yields control to the event loop until the DOM has been updated to reflect item being removed.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.pop(index)","title":"<code>index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.remove_items","title":"remove_items","text":"<pre><code>remove_items(indices)\n</code></pre> <p>Remove ListItems from ListView by indices</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[int]</code> <p>index(s) of ListItems to remove from ListView</p> required <p>Returns:</p> Type Description <code>AwaitRemove</code> <p>An awaitable object that waits for the direct children to be removed.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.remove_items(indices)","title":"<code>indices</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.validate_index","title":"validate_index","text":"<pre><code>validate_index(index)\n</code></pre> <p>Clamp the index to the valid range, or set to None if there's nothing to highlight.</p> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>The index to clamp.</p> required <p>Returns:</p> Type Description <code>int | None</code> <p>The clamped index.</p>"},{"location":"widgets/list_view/#textual.widgets.ListView.validate_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/list_view/#textual.widgets.ListView.watch_index","title":"watch_index","text":"<pre><code>watch_index(old_index, new_index)\n</code></pre> <p>Updates the highlighting when the index changes.</p>"},{"location":"widgets/loading_indicator/","title":"LoadingIndicator","text":"<p>Added in version 0.15.0</p> <p>Displays pulsating dots to indicate when data is being loaded.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Tip</p> <p>Widgets have a <code>loading</code> reactive which you can use to temporarily replace your widget with a <code>LoadingIndicator</code>. See the Loading Indicator section in the Widgets guide for details.</p>"},{"location":"widgets/loading_indicator/#example","title":"Example","text":"<p>Simple usage example:</p> Outputloading_indicator.py <p> LoadingApp \u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf\u00a0\u25cf </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import LoadingIndicator\n\n\nclass LoadingApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield LoadingIndicator()\n\n\nif __name__ == \"__main__\":\n    app = LoadingApp()\n    app.run()\n</code></pre>"},{"location":"widgets/loading_indicator/#changing-indicator-color","title":"Changing Indicator Color","text":"<p>You can set the color of the loading indicator by setting its <code>color</code> style.</p> <p>Here's how you would do that with CSS:</p> <pre><code>LoadingIndicator {\n    color: red;\n}\n</code></pre>"},{"location":"widgets/loading_indicator/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/loading_indicator/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/loading_indicator/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/loading_indicator/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>Display an animated loading indicator.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(name)","title":"<code>name</code>","text":""},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(id)","title":"<code>id</code>","text":""},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/loading_indicator/#textual.widgets.LoadingIndicator(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/log/","title":"Log","text":"<p>Added in version 0.32.0</p> <p>A Log widget displays lines of text which may be appended to in realtime.</p> <p>Call Log.write_line to write a line at a time, or Log.write_lines to write multiple lines at once. Call Log.clear to clear the Log widget.</p> <p>Tip</p> <p>See also RichLog which can write more than just text, and supports a number of advanced features.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/log/#example","title":"Example","text":"<p>The example below shows how to write text to a <code>Log</code> widget:</p> Outputlog.py <p> LogApp And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2584\u2584 I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 And\u00a0when\u00a0it\u00a0has\u00a0gone\u00a0past,\u00a0I\u00a0will\u00a0turn\u00a0the\u00a0inner\u00a0eye\u00a0to\u00a0see\u00a0its\u00a0path.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where\u00a0the\u00a0fear\u00a0has\u00a0gone\u00a0there\u00a0will\u00a0be\u00a0nothing.\u00a0Only\u00a0I\u00a0will\u00a0remain.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Log\n\nTEXT = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\nAnd when it has gone past, I will turn the inner eye to see its path.\nWhere the fear has gone there will be nothing. Only I will remain.\"\"\"\n\n\nclass LogApp(App):\n    \"\"\"An app with a simple log.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Log()\n\n    def on_ready(self) -&gt; None:\n        log = self.query_one(Log)\n        log.write_line(\"Hello, World!\")\n        for _ in range(10):\n            log.write_line(TEXT)\n\n\nif __name__ == \"__main__\":\n    app = LogApp()\n    app.run()\n</code></pre>"},{"location":"widgets/log/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>max_lines</code> <code>int</code> <code>None</code> Maximum number of lines in the log or <code>None</code> for no maximum. <code>auto_scroll</code> <code>bool</code> <code>False</code> Scroll to end of log when new lines are added."},{"location":"widgets/log/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/log/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/log/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>ScrollView</code></p> <p>A widget to log text.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Enable highlighting.</p> <code>False</code> <code>int | None</code> <p>Maximum number of lines to display.</p> <code>None</code> <code>bool</code> <p>Scroll to end on new lines.</p> <code>True</code> <code>str | None</code> <p>The name of the text log.</p> <code>None</code> <code>str | None</code> <p>The ID of the text log in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the text log.</p> <code>None</code> <code>bool</code> <p>Whether the text log is disabled or not.</p> <code>False</code>"},{"location":"widgets/log/#textual.widgets.Log(highlight)","title":"<code>highlight</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(max_lines)","title":"<code>max_lines</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(auto_scroll)","title":"<code>auto_scroll</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(name)","title":"<code>name</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(id)","title":"<code>id</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/log/#textual.widgets.Log(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.auto_scroll","title":"auto_scroll  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_scroll = auto_scroll\n</code></pre> <p>Automatically scroll to new lines.</p>"},{"location":"widgets/log/#textual.widgets.Log.highlight","title":"highlight  <code>instance-attribute</code>","text":"<pre><code>highlight = highlight\n</code></pre> <p>Enable highlighting.</p>"},{"location":"widgets/log/#textual.widgets.Log.highlighter","title":"highlighter  <code>instance-attribute</code>","text":"<pre><code>highlighter = ReprHighlighter()\n</code></pre> <p>The Rich Highlighter object to use, if <code>highlight=True</code></p>"},{"location":"widgets/log/#textual.widgets.Log.line_count","title":"line_count  <code>property</code>","text":"<pre><code>line_count\n</code></pre> <p>Number of lines of content.</p>"},{"location":"widgets/log/#textual.widgets.Log.lines","title":"lines  <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>The raw lines in the Log.</p> <p>Note that this attribute is read only. Changing the lines will not update the Log's contents.</p>"},{"location":"widgets/log/#textual.widgets.Log.max_lines","title":"max_lines  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>max_lines = max_lines\n</code></pre> <p>Maximum number of lines to show</p>"},{"location":"widgets/log/#textual.widgets.Log.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the Log.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.notify_style_update","title":"notify_style_update","text":"<pre><code>notify_style_update()\n</code></pre> <p>Called by Textual when styles update.</p>"},{"location":"widgets/log/#textual.widgets.Log.refresh_lines","title":"refresh_lines","text":"<pre><code>refresh_lines(y_start, line_count=1)\n</code></pre> <p>Refresh one or more lines.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>First line to refresh.</p> required <code>int</code> <p>Total number of lines to refresh.</p> <code>1</code>"},{"location":"widgets/log/#textual.widgets.Log.refresh_lines(y_start)","title":"<code>y_start</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.refresh_lines(line_count)","title":"<code>line_count</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write","title":"write","text":"<pre><code>write(data, scroll_end=None)\n</code></pre> <p>Write to the log.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>Data to write.</p> required <code>bool | None</code> <p>Scroll to the end after writing, or <code>None</code> to use <code>self.auto_scroll</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.write(data)","title":"<code>data</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write(scroll_end)","title":"<code>scroll_end</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write_line","title":"write_line","text":"<pre><code>write_line(line)\n</code></pre> <p>Write content on a new line.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>String to write to the log.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.write_line(line)","title":"<code>line</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write_lines","title":"write_lines","text":"<pre><code>write_lines(lines, scroll_end=None)\n</code></pre> <p>Write an iterable of lines.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[str]</code> <p>An iterable of strings to write.</p> required <code>bool | None</code> <p>Scroll to the end after writing, or <code>None</code> to use <code>self.auto_scroll</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Log</code> instance.</p>"},{"location":"widgets/log/#textual.widgets.Log.write_lines(lines)","title":"<code>lines</code>","text":""},{"location":"widgets/log/#textual.widgets.Log.write_lines(scroll_end)","title":"<code>scroll_end</code>","text":""},{"location":"widgets/markdown/","title":"Markdown","text":"<p>Added in version 0.11.0</p> <p>A widget to display a Markdown document.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Tip</p> <p>See MarkdownViewer for a widget that adds additional features such as a Table of Contents.</p>"},{"location":"widgets/markdown/#example","title":"Example","text":"<p>The following example displays Markdown from a string.</p> Outputmarkdown.py <p> MarkdownExampleApp Markdown\u00a0Document \u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0Markdown\u00a0widget. Features \u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u25cf\u00a0Headers \u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u25cf\u00a0Tables! </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Markdown\n\nEXAMPLE_MARKDOWN = \"\"\"\\\n# Markdown Document\n\nThis is an example of Textual's `Markdown` widget.\n\n## Features\n\nMarkdown syntax and extensions are supported.\n\n- Typography *emphasis*, **strong**, `inline code` etc.\n- Headers\n- Lists (bullet and ordered)\n- Syntax highlighted code blocks\n- Tables!\n\"\"\"\n\n\nclass MarkdownExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Markdown(EXAMPLE_MARKDOWN)\n\n\nif __name__ == \"__main__\":\n    app = MarkdownExampleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/markdown/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/markdown/#messages","title":"Messages","text":"<ul> <li>Markdown.TableOfContentsUpdated</li> <li>Markdown.TableOfContentsSelected</li> <li>Markdown.LinkClicked</li> </ul>"},{"location":"widgets/markdown/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/markdown/#component-classes","title":"Component Classes","text":"<p>The markdown widget provides the following component classes:</p> <p>These component classes target standard inline markdown styles. Changing these will potentially break the standard markdown formatting.</p> Class Description <code>code_inline</code> Target text that is styled as inline code. <code>em</code> Target text that is emphasized inline. <code>s</code> Target text that is styled inline with strykethrough. <code>strong</code> Target text that is styled inline with strong."},{"location":"widgets/markdown/#see-also","title":"See Also","text":"<ul> <li>MarkdownViewer code reference</li> </ul> <p>               Bases: <code>Widget</code></p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>String containing Markdown or None to leave blank for now.</p> <code>None</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>Callable[[], MarkdownIt] | None</code> <p>A factory function to return a configured MarkdownIt instance. If <code>None</code>, a \"gfm-like\" parser is used.</p> <code>None</code>"},{"location":"widgets/markdown/#textual.widgets.Markdown(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown(parser_factory)","title":"<code>parser_factory</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'em', 'strong', 's', 'code_inline'}\n</code></pre> <p>These component classes target standard inline markdown styles. Changing these will potentially break the standard markdown formatting.</p> Class Description <code>code_inline</code> Target text that is styled as inline code. <code>em</code> Target text that is emphasized inline. <code>s</code> Target text that is styled inline with strykethrough. <code>strong</code> Target text that is styled inline with strong."},{"location":"widgets/markdown/#textual.widgets.Markdown.code_dark_theme","title":"code_dark_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_dark_theme = reactive('material')\n</code></pre> <p>The theme to use for code blocks when in dark mode.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.code_light_theme","title":"code_light_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_light_theme = reactive('material-light')\n</code></pre> <p>The theme to use for code blocks when in light mode.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked","title":"LinkClicked","text":"<pre><code>LinkClicked(markdown, href)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>A link in the document was clicked.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p> <p>This is an alias for <code>LinkClicked.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked.href","title":"href  <code>instance-attribute</code>","text":"<pre><code>href = unquote(href)\n</code></pre> <p>The link that was selected.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.LinkClicked.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected","title":"TableOfContentsSelected","text":"<pre><code>TableOfContentsSelected(markdown, block_id)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>An item in the TOC was selected.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected.block_id","title":"block_id  <code>instance-attribute</code>","text":"<pre><code>block_id = block_id\n</code></pre> <p>ID of the block that was selected.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p> <p>This is an alias for <code>TableOfContentsSelected.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsSelected.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated","title":"TableOfContentsUpdated","text":"<pre><code>TableOfContentsUpdated(markdown, table_of_contents)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The table of contents was updated.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p> <p>This is an alias for <code>TableOfContentsUpdated.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.TableOfContentsUpdated.table_of_contents","title":"table_of_contents  <code>instance-attribute</code>","text":"<pre><code>table_of_contents = table_of_contents\n</code></pre> <p>Table of contents.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.goto_anchor","title":"goto_anchor","text":"<pre><code>goto_anchor(anchor)\n</code></pre> <p>Try and find the given anchor in the current document.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The anchor to try and find.</p> required Note <p>The anchor is found by looking at all of the headings in the document and finding the first one whose slug matches the anchor.</p> <p>Note that the slugging method used is similar to that found on GitHub.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True when the anchor was found in the current document, False otherwise.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.goto_anchor(anchor)","title":"<code>anchor</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.load","title":"load  <code>async</code>","text":"<pre><code>load(path)\n</code></pre> <p>Load a new Markdown document.</p> <p>Parameters:</p> Name Type Description Default <code>Path</code> <p>Path to the document.</p> required <p>Raises:</p> Type Description <code>OSError</code> <p>If there was some form of error loading the document.</p> Note <p>The exceptions that can be raised by this method are all of those that can be raised by calling <code>Path.read_text</code>.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.load(path)","title":"<code>path</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.sanitize_location","title":"sanitize_location  <code>staticmethod</code>","text":"<pre><code>sanitize_location(location)\n</code></pre> <p>Given a location, break out the path and any anchor.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The location to sanitize.</p> required <p>Returns:</p> Type Description <code>Path</code> <p>A tuple of the path to the location cleaned of any anchor, plus</p> <code>str</code> <p>the anchor (or an empty string if none was found).</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.sanitize_location(location)","title":"<code>location</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.unhandled_token","title":"unhandled_token","text":"<pre><code>unhandled_token(token)\n</code></pre> <p>Process an unhandled token.</p> <p>Parameters:</p> Name Type Description Default <code>Token</code> <p>The MarkdownIt token to handle.</p> required <p>Returns:</p> Type Description <code>MarkdownBlock | None</code> <p>Either a widget to be added to the output, or <code>None</code>.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.unhandled_token(token)","title":"<code>token</code>","text":""},{"location":"widgets/markdown/#textual.widgets.Markdown.update","title":"update","text":"<pre><code>update(markdown)\n</code></pre> <p>Update the document with new Markdown.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A string containing Markdown.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object. Await this to ensure that all children have been mounted.</p>"},{"location":"widgets/markdown/#textual.widgets.Markdown.update(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/","title":"MarkdownViewer","text":"<p>Added in version 0.11.0</p> <p>A Widget to display Markdown content with an optional Table of Contents.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Note</p> <p>This Widget adds browser-like functionality on top of the Markdown widget.</p>"},{"location":"widgets/markdown_viewer/#example","title":"Example","text":"<p>The following example displays Markdown from a string and a Table of Contents.</p> Outputmarkdown.py <p> MarkdownExampleApp \u258a \u25bc\u00a0\u2160\u00a0Markdown\u00a0Viewer\u258a \u251c\u2500\u2500\u00a0\u2161\u00a0Features\u258aMarkdown\u00a0Viewer \u251c\u2500\u2500\u00a0\u2161\u00a0Tables\u258a \u2514\u2500\u2500\u00a0\u2161\u00a0Code\u00a0Blocks\u258a\u00a0\u00a0This\u00a0is\u00a0an\u00a0example\u00a0of\u00a0Textual's\u00a0MarkdownViewer\u00a0widget. \u258a \u258a \u258aFeatures \u258a \u258a\u00a0\u00a0Markdown\u00a0syntax\u00a0and\u00a0extensions\u00a0are\u00a0supported. \u258a \u258a\u25cf\u00a0Typography\u00a0emphasis,\u00a0strong,\u00a0inline\u00a0code\u00a0etc. \u258a\u25cf\u00a0Headers \u258a\u25cf\u00a0Lists\u00a0(bullet\u00a0and\u00a0ordered) \u258a\u25cf\u00a0Syntax\u00a0highlighted\u00a0code\u00a0blocks \u258a\u25cf\u00a0Tables! \u258a \u258a \u258aTables \u258a \u258a\u00a0\u00a0Tables\u00a0are\u00a0displayed\u00a0in\u00a0a\u00a0DataTable\u00a0widget. \u258a \u258a \u258aName\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Type\u00a0Default\u00a0Description\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u00a0 \u258ashow_headerboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0the\u00a0table\u00a0header\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_rowsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258afixed_columnsint0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Number\u00a0of\u00a0fixed\u00a0columns\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258azebra_stripesboolFalse\u00a0\u00a0\u00a0\u00a0Display\u00a0alternating\u00a0colors\u00a0on\u00a0rows\u00a0\u00a0\u00a0\u00a0\u00a0 \u258aheader_heightint1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Height\u00a0of\u00a0header\u00a0row\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258ashow_cursorboolTrue\u00a0\u00a0\u00a0\u00a0\u00a0Show\u00a0a\u00a0cell\u00a0cursor\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a \u258a \u258a \u258aCode\u00a0Blocks \u258a\u2585\u2585 \u258a\u00a0\u00a0Code\u00a0blocks\u00a0are\u00a0syntax\u00a0highlighted,\u00a0with\u00a0guidelines. \u258a \u258a \u258aclassListViewExample(App): \u258a\u2502\u00a0\u00a0\u00a0defcompose(self)-&gt;\u00a0ComposeResult: \u258a\u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0ListView( </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import MarkdownViewer\n\nEXAMPLE_MARKDOWN = \"\"\"\\\n# Markdown Viewer\n\nThis is an example of Textual's `MarkdownViewer` widget.\n\n\n## Features\n\nMarkdown syntax and extensions are supported.\n\n- Typography *emphasis*, **strong**, `inline code` etc.\n- Headers\n- Lists (bullet and ordered)\n- Syntax highlighted code blocks\n- Tables!\n\n## Tables\n\nTables are displayed in a DataTable widget.\n\n| Name            | Type   | Default | Description                        |\n| --------------- | ------ | ------- | ---------------------------------- |\n| `show_header`   | `bool` | `True`  | Show the table header              |\n| `fixed_rows`    | `int`  | `0`     | Number of fixed rows               |\n| `fixed_columns` | `int`  | `0`     | Number of fixed columns            |\n| `zebra_stripes` | `bool` | `False` | Display alternating colors on rows |\n| `header_height` | `int`  | `1`     | Height of header row               |\n| `show_cursor`   | `bool` | `True`  | Show a cell cursor                 |\n\n\n## Code Blocks\n\nCode blocks are syntax highlighted, with guidelines.\n\n```python\nclass ListViewExample(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ListView(\n            ListItem(Label(\"One\")),\n            ListItem(Label(\"Two\")),\n            ListItem(Label(\"Three\")),\n        )\n        yield Footer()\n```\n\"\"\"\n\n\nclass MarkdownExampleApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield MarkdownViewer(EXAMPLE_MARKDOWN, show_table_of_contents=True)\n\n\nif __name__ == \"__main__\":\n    app = MarkdownExampleApp()\n    app.run()\n</code></pre>"},{"location":"widgets/markdown_viewer/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_table_of_contents</code> bool True Wether a Table of Contents should be displayed with the Markdown."},{"location":"widgets/markdown_viewer/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/markdown_viewer/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/markdown_viewer/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/markdown_viewer/#see-also","title":"See Also","text":"<ul> <li>Markdown code reference</li> </ul> <p>               Bases: <code>VerticalScroll</code></p> <p>A Markdown viewer widget.</p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>String containing Markdown, or None to leave blank.</p> <code>None</code> <code>bool</code> <p>Show a table of contents in a sidebar.</p> <code>True</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>Callable[[], MarkdownIt] | None</code> <p>A factory function to return a configured MarkdownIt instance. If <code>None</code>, a \"gfm-like\" parser is used.</p> <code>None</code>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(show_table_of_contents)","title":"<code>show_table_of_contents</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer(parser_factory)","title":"<code>parser_factory</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.document","title":"document  <code>property</code>","text":"<pre><code>document\n</code></pre> <p>The <code>Markdown</code> document widget.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.table_of_contents","title":"table_of_contents  <code>property</code>","text":"<pre><code>table_of_contents\n</code></pre> <p>The table of contents widget.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.NavigatorUpdated","title":"NavigatorUpdated","text":"<pre><code>NavigatorUpdated()\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Navigator has been changed (clicked link etc).</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.back","title":"back  <code>async</code>","text":"<pre><code>back()\n</code></pre> <p>Go back one level in the history.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.forward","title":"forward  <code>async</code>","text":"<pre><code>forward()\n</code></pre> <p>Go forward one level in the history.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.MarkdownViewer.go","title":"go  <code>async</code>","text":"<pre><code>go(location)\n</code></pre> <p>Navigate to a new document path.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown","title":"textual.widgets.markdown","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.TableOfContentsType","title":"TableOfContentsType  <code>module-attribute</code>","text":"<pre><code>TableOfContentsType = 'list[tuple[int, str, str | None]]'\n</code></pre> <p>Information about the table of contents of a markdown document.</p> <p>The triples encode the level, the label, and the optional block id of each heading.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown","title":"Markdown","text":"<pre><code>Markdown(\n    markdown=None,\n    *,\n    name=None,\n    id=None,\n    classes=None,\n    parser_factory=None\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>String containing Markdown or None to leave blank for now.</p> <code>None</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>Callable[[], MarkdownIt] | None</code> <p>A factory function to return a configured MarkdownIt instance. If <code>None</code>, a \"gfm-like\" parser is used.</p> <code>None</code>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown(parser_factory)","title":"<code>parser_factory</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'em', 'strong', 's', 'code_inline'}\n</code></pre> <p>These component classes target standard inline markdown styles. Changing these will potentially break the standard markdown formatting.</p> Class Description <code>code_inline</code> Target text that is styled as inline code. <code>em</code> Target text that is emphasized inline. <code>s</code> Target text that is styled inline with strykethrough. <code>strong</code> Target text that is styled inline with strong."},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.code_dark_theme","title":"code_dark_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_dark_theme = reactive('material')\n</code></pre> <p>The theme to use for code blocks when in dark mode.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.code_light_theme","title":"code_light_theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>code_light_theme = reactive('material-light')\n</code></pre> <p>The theme to use for code blocks when in light mode.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked","title":"LinkClicked","text":"<pre><code>LinkClicked(markdown, href)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>A link in the document was clicked.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p> <p>This is an alias for <code>LinkClicked.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked.href","title":"href  <code>instance-attribute</code>","text":"<pre><code>href = unquote(href)\n</code></pre> <p>The link that was selected.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.LinkClicked.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget containing the link clicked.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected","title":"TableOfContentsSelected","text":"<pre><code>TableOfContentsSelected(markdown, block_id)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>An item in the TOC was selected.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected.block_id","title":"block_id  <code>instance-attribute</code>","text":"<pre><code>block_id = block_id\n</code></pre> <p>ID of the block that was selected.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p> <p>This is an alias for <code>TableOfContentsSelected.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsSelected.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget where the selected item is.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated","title":"TableOfContentsUpdated","text":"<pre><code>TableOfContentsUpdated(markdown, table_of_contents)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>The table of contents was updated.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p> <p>This is an alias for <code>TableOfContentsUpdated.markdown</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The <code>Markdown</code> widget associated with the table of contents.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.TableOfContentsUpdated.table_of_contents","title":"table_of_contents  <code>instance-attribute</code>","text":"<pre><code>table_of_contents = table_of_contents\n</code></pre> <p>Table of contents.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.goto_anchor","title":"goto_anchor","text":"<pre><code>goto_anchor(anchor)\n</code></pre> <p>Try and find the given anchor in the current document.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The anchor to try and find.</p> required Note <p>The anchor is found by looking at all of the headings in the document and finding the first one whose slug matches the anchor.</p> <p>Note that the slugging method used is similar to that found on GitHub.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True when the anchor was found in the current document, False otherwise.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.goto_anchor(anchor)","title":"<code>anchor</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.load","title":"load  <code>async</code>","text":"<pre><code>load(path)\n</code></pre> <p>Load a new Markdown document.</p> <p>Parameters:</p> Name Type Description Default <code>Path</code> <p>Path to the document.</p> required <p>Raises:</p> Type Description <code>OSError</code> <p>If there was some form of error loading the document.</p> Note <p>The exceptions that can be raised by this method are all of those that can be raised by calling <code>Path.read_text</code>.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.load(path)","title":"<code>path</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.sanitize_location","title":"sanitize_location  <code>staticmethod</code>","text":"<pre><code>sanitize_location(location)\n</code></pre> <p>Given a location, break out the path and any anchor.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The location to sanitize.</p> required <p>Returns:</p> Type Description <code>Path</code> <p>A tuple of the path to the location cleaned of any anchor, plus</p> <code>str</code> <p>the anchor (or an empty string if none was found).</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.sanitize_location(location)","title":"<code>location</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.unhandled_token","title":"unhandled_token","text":"<pre><code>unhandled_token(token)\n</code></pre> <p>Process an unhandled token.</p> <p>Parameters:</p> Name Type Description Default <code>Token</code> <p>The MarkdownIt token to handle.</p> required <p>Returns:</p> Type Description <code>MarkdownBlock | None</code> <p>Either a widget to be added to the output, or <code>None</code>.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.unhandled_token(token)","title":"<code>token</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.update","title":"update","text":"<pre><code>update(markdown)\n</code></pre> <p>Update the document with new Markdown.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A string containing Markdown.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object. Await this to ensure that all children have been mounted.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.Markdown.update(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock","title":"MarkdownBlock","text":"<pre><code>MarkdownBlock(markdown, *args, **kwargs)\n</code></pre> <p>               Bases: <code>Static</code></p> <p>The base class for a Markdown Element.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.action_link","title":"action_link  <code>async</code>","text":"<pre><code>action_link(href)\n</code></pre> <p>Called on link click.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.build_from_token","title":"build_from_token","text":"<pre><code>build_from_token(token)\n</code></pre> <p>Build the block content from its source token.</p> <p>This method allows the block to be rebuilt on demand, which is useful when the styles assigned to the Markdown.COMPONENT_CLASSES change.</p> <p>See https://github.com/Textualize/textual/issues/3464 for more information.</p> <p>Parameters:</p> Name Type Description Default <code>Token</code> <p>The token from which this block is built.</p> required"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.build_from_token(token)","title":"<code>token</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.notify_style_update","title":"notify_style_update","text":"<pre><code>notify_style_update()\n</code></pre> <p>If CSS was reloaded, try to rebuild this block from its token.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownBlock.rebuild","title":"rebuild","text":"<pre><code>rebuild()\n</code></pre> <p>Rebuild the content of the block if we have a source token.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents","title":"MarkdownTableOfContents","text":"<pre><code>MarkdownTableOfContents(\n    markdown,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Widget</code></p> <p>Displays a table of contents for a markdown document.</p> <p>Parameters:</p> Name Type Description Default <code>Markdown</code> <p>The Markdown document associated with this table of contents.</p> required <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(markdown)","title":"<code>markdown</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(name)","title":"<code>name</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(id)","title":"<code>id</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.markdown","title":"markdown  <code>instance-attribute</code>","text":"<pre><code>markdown = markdown\n</code></pre> <p>The Markdown document associated with this table of contents.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.table_of_contents","title":"table_of_contents  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>table_of_contents = reactive[Optional[TableOfContentsType]](\n    None, init=False\n)\n</code></pre> <p>Underlying data to populate the table of contents widget.</p>"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.rebuild_table_of_contents","title":"rebuild_table_of_contents","text":"<pre><code>rebuild_table_of_contents(table_of_contents)\n</code></pre> <p>Rebuilds the tree representation of the table of contents data.</p> <p>Parameters:</p> Name Type Description Default <code>TableOfContentsType</code> <p>Table of contents.</p> required"},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.rebuild_table_of_contents(table_of_contents)","title":"<code>table_of_contents</code>","text":""},{"location":"widgets/markdown_viewer/#textual.widgets.markdown.MarkdownTableOfContents.watch_table_of_contents","title":"watch_table_of_contents","text":"<pre><code>watch_table_of_contents(table_of_contents)\n</code></pre> <p>Triggered when the table of contents changes.</p>"},{"location":"widgets/option_list/","title":"OptionList","text":"<p>Added in version 0.17.0</p> <p>A widget for showing a vertical list of Rich renderable options.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/option_list/#examples","title":"Examples","text":""},{"location":"widgets/option_list/#options-as-simple-strings","title":"Options as simple strings","text":"<p>An <code>OptionList</code> can be constructed with a simple collection of string options:</p> Outputoption_list_strings.pyoption_list.tcss <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aTauron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aVirgon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, OptionList\n\n\nclass OptionListApp(App[None]):\n    CSS_PATH = \"option_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield OptionList(\n            \"Aerilon\",\n            \"Aquaria\",\n            \"Canceron\",\n            \"Caprica\",\n            \"Gemenon\",\n            \"Leonis\",\n            \"Libran\",\n            \"Picon\",\n            \"Sagittaron\",\n            \"Scorpia\",\n            \"Tauron\",\n            \"Virgon\",\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    OptionListApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nOptionList {\n    width: 70%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/option_list/#options-as-option-instances","title":"Options as <code>Option</code> instances","text":"<p>For finer control over the options, the <code>Option</code> class can be used; this allows for setting IDs, setting initial disabled state, etc. The <code>Separator</code> class can be used to add separator lines between options.</p> Outputoption_list_options.pyoption_list.tcss <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aAerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aAquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aCanceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aCaprica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aGemenon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aLeonis\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aLibran\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aPicon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2581\u2581\u258e \u258a\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u258e \u258aSagittaron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258aScorpia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, OptionList\nfrom textual.widgets.option_list import Option, Separator\n\n\nclass OptionListApp(App[None]):\n    CSS_PATH = \"option_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield OptionList(\n            Option(\"Aerilon\", id=\"aer\"),\n            Option(\"Aquaria\", id=\"aqu\"),\n            Separator(),\n            Option(\"Canceron\", id=\"can\"),\n            Option(\"Caprica\", id=\"cap\", disabled=True),\n            Separator(),\n            Option(\"Gemenon\", id=\"gem\"),\n            Separator(),\n            Option(\"Leonis\", id=\"leo\"),\n            Option(\"Libran\", id=\"lib\"),\n            Separator(),\n            Option(\"Picon\", id=\"pic\"),\n            Separator(),\n            Option(\"Sagittaron\", id=\"sag\"),\n            Option(\"Scorpia\", id=\"sco\"),\n            Separator(),\n            Option(\"Tauron\", id=\"tau\"),\n            Separator(),\n            Option(\"Virgon\", id=\"vir\"),\n        )\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    OptionListApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nOptionList {\n    width: 70%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/option_list/#options-as-rich-renderables","title":"Options as Rich renderables","text":"<p>Because the prompts for the options can be Rich renderables, this means they can be any height you wish. As an example, here is an option list comprised of Rich tables:</p> Outputoption_list_tables.pyoption_list.tcss <p> OptionListApp \u2b58OptionListApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aerilon\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u2587\u2587\u258e \u258a\u2502\u00a0Demeter\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a01.2\u00a0Billion\u00a0\u00a0\u00a0\u2502\u00a0Gaoth\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Aquaria\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u258e \u258a\u2502\u00a0Hermes\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a075,000\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0None\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u258e \u258a\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u258e \u258a\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Data\u00a0for\u00a0Canceron\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u258e \u258a\u2503\u00a0Patron\u00a0God\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Population\u00a0\u00a0\u00a0\u00a0\u2503\u00a0Capital\u00a0City\u00a0\u00a0\u00a0\u2503\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258f^p\u00a0palette </p> <pre><code>from __future__ import annotations\n\nfrom rich.table import Table\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, OptionList\n\nCOLONIES: tuple[tuple[str, str, str, str], ...] = (\n    (\"Aerilon\", \"Demeter\", \"1.2 Billion\", \"Gaoth\"),\n    (\"Aquaria\", \"Hermes\", \"75,000\", \"None\"),\n    (\"Canceron\", \"Hephaestus\", \"6.7 Billion\", \"Hades\"),\n    (\"Caprica\", \"Apollo\", \"4.9 Billion\", \"Caprica City\"),\n    (\"Gemenon\", \"Hera\", \"2.8 Billion\", \"Oranu\"),\n    (\"Leonis\", \"Artemis\", \"2.6 Billion\", \"Luminere\"),\n    (\"Libran\", \"Athena\", \"2.1 Billion\", \"None\"),\n    (\"Picon\", \"Poseidon\", \"1.4 Billion\", \"Queenstown\"),\n    (\"Sagittaron\", \"Zeus\", \"1.7 Billion\", \"Tawa\"),\n    (\"Scorpia\", \"Dionysus\", \"450 Million\", \"Celeste\"),\n    (\"Tauron\", \"Ares\", \"2.5 Billion\", \"Hypatia\"),\n    (\"Virgon\", \"Hestia\", \"4.3 Billion\", \"Boskirk\"),\n)\n\n\nclass OptionListApp(App[None]):\n    CSS_PATH = \"option_list.tcss\"\n\n    @staticmethod\n    def colony(name: str, god: str, population: str, capital: str) -&gt; Table:\n        table = Table(title=f\"Data for {name}\", expand=True)\n        table.add_column(\"Patron God\")\n        table.add_column(\"Population\")\n        table.add_column(\"Capital City\")\n        table.add_row(god, population, capital)\n        return table\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield OptionList(*[self.colony(*row) for row in COLONIES])\n        yield Footer()\n\n\nif __name__ == \"__main__\":\n    OptionListApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nOptionList {\n    width: 70%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/option_list/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlighted</code> <code>int</code> | <code>None</code> <code>None</code> The index of the highlighted option. <code>None</code> means nothing is highlighted."},{"location":"widgets/option_list/#messages","title":"Messages","text":"<ul> <li>OptionList.OptionHighlighted</li> <li>OptionList.OptionSelected</li> </ul> <p>Both of the messages above inherit from the common base <code>OptionList.OptionMessage</code>, so refer to its documentation to see what attributes are available.</p>"},{"location":"widgets/option_list/#bindings","title":"Bindings","text":"<p>The option list widget defines the following bindings:</p> Key(s) Description down Move the highlight down. end Move the highlight to the last option. enter Select the current option. home Move the highlight to the first option. pagedown Move the highlight down a page of options. pageup Move the highlight up a page of options. up Move the highlight up."},{"location":"widgets/option_list/#component-classes","title":"Component Classes","text":"<p>The option list provides the following component classes:</p> Class Description <code>option-list--option-disabled</code> Target disabled options. <code>option-list--option-highlighted</code> Target the highlighted option. <code>option-list--option-hover</code> Target an option that has the mouse over it. <code>option-list--option-hover-highlighted</code> Target a highlighted option that has the mouse over it. <code>option-list--separator</code> Target the separators. <p>               Bases: <code>ScrollView</code></p> <p>A vertical option list with bounce-bar highlighting.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"down\", \"cursor_down\", \"Down\", show=False),\n    Binding(\"end\", \"last\", \"Last\", show=False),\n    Binding(\"enter\", \"select\", \"Select\", show=False),\n    Binding(\"home\", \"first\", \"First\", show=False),\n    Binding(\n        \"pagedown\", \"page_down\", \"Page Down\", show=False\n    ),\n    Binding(\"pageup\", \"page_up\", \"Page Up\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Up\", show=False),\n]\n</code></pre> Key(s) Description down Move the highlight down. end Move the highlight to the last option. enter Select the current option. home Move the highlight to the first option. pagedown Move the highlight down a page of options. pageup Move the highlight up a page of options. up Move the highlight up."},{"location":"widgets/option_list/#textual.widgets.OptionList.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"option-list--option\",\n    \"option-list--option-disabled\",\n    \"option-list--option-highlighted\",\n    \"option-list--option-hover\",\n    \"option-list--option-hover-highlighted\",\n    \"option-list--separator\",\n}\n</code></pre> Class Description <code>option-list--option-disabled</code> Target disabled options. <code>option-list--option-highlighted</code> Target the highlighted option. <code>option-list--option-hover</code> Target an option that has the mouse over it. <code>option-list--option-hover-highlighted</code> Target a highlighted option that has the mouse over it. <code>option-list--separator</code> Target the separators."},{"location":"widgets/option_list/#textual.widgets.OptionList.highlighted","title":"highlighted  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlighted = reactive['int | None'](None)\n</code></pre> <p>The index of the currently-highlighted option, or <code>None</code> if no option is highlighted.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.option_count","title":"option_count  <code>property</code>","text":"<pre><code>option_count\n</code></pre> <p>The count of options.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionHighlighted","title":"OptionHighlighted","text":"<pre><code>OptionHighlighted(option_list, index)\n</code></pre> <p>               Bases: <code>OptionMessage</code></p> <p>Message sent when an option is highlighted.</p> <p>Can be handled using <code>on_option_list_option_highlighted</code> in a subclass of <code>OptionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>OptionList</code> <p>The option list that owns the option.</p> required <code>int</code> <p>The index of the option that the message relates to.</p> required"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionHighlighted(option_list)","title":"<code>option_list</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionHighlighted(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage","title":"OptionMessage","text":"<pre><code>OptionMessage(option_list, index)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Base class for all option messages.</p> <p>Parameters:</p> Name Type Description Default <code>OptionList</code> <p>The option list that owns the option.</p> required <code>int</code> <p>The index of the option that the message relates to.</p> required"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage(option_list)","title":"<code>option_list</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The option list that sent the message.</p> <p>This is an alias for <code>OptionMessage.option_list</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option","title":"option  <code>instance-attribute</code>","text":"<pre><code>option = get_option_at_index(index)\n</code></pre> <p>The highlighted option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option_id","title":"option_id  <code>instance-attribute</code>","text":"<pre><code>option_id = id\n</code></pre> <p>The ID of the option that the message relates to.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option_index","title":"option_index  <code>instance-attribute</code>","text":"<pre><code>option_index = index\n</code></pre> <p>The index of the option that the message relates to.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionMessage.option_list","title":"option_list  <code>instance-attribute</code>","text":"<pre><code>option_list = option_list\n</code></pre> <p>The option list that sent the message.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionSelected","title":"OptionSelected","text":"<pre><code>OptionSelected(option_list, index)\n</code></pre> <p>               Bases: <code>OptionMessage</code></p> <p>Message sent when an option is selected.</p> <p>Can be handled using <code>on_option_list_option_selected</code> in a subclass of <code>OptionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>OptionList</code> <p>The option list that owns the option.</p> required <code>int</code> <p>The index of the option that the message relates to.</p> required"},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionSelected(option_list)","title":"<code>option_list</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.OptionSelected(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down()\n</code></pre> <p>Move the highlight down to the next enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up()\n</code></pre> <p>Move the highlight up to the previous enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_first","title":"action_first","text":"<pre><code>action_first()\n</code></pre> <p>Move the highlight to the first enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_last","title":"action_last","text":"<pre><code>action_last()\n</code></pre> <p>Move the highlight to the last enabled option.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_page_down","title":"action_page_down","text":"<pre><code>action_page_down()\n</code></pre> <p>Move the highlight down roughly by one page.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_page_up","title":"action_page_up","text":"<pre><code>action_page_up()\n</code></pre> <p>Move the highlight up roughly by one page.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.action_select","title":"action_select","text":"<pre><code>action_select()\n</code></pre> <p>Select the currently-highlighted option.</p> <p>If no option is selected, then nothing happens. If an option is selected, a OptionList.OptionSelected message will be posted.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.add_option","title":"add_option","text":"<pre><code>add_option(item=None)\n</code></pre> <p>Add a new option to the end of the option list.</p> <p>Parameters:</p> Name Type Description Default <code>NewOptionListContent</code> <p>The new item to add.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.add_option(item)","title":"<code>item</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.add_options","title":"add_options","text":"<pre><code>add_options(items)\n</code></pre> <p>Add new options to the end of the option list.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[NewOptionListContent]</code> <p>The new items to add.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p> Note <p>All options are checked for duplicate IDs before any option is added. A duplicate ID will cause none of the passed items to be added to the option list.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.add_options(items)","title":"<code>items</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.clear_options","title":"clear_options","text":"<pre><code>clear_options()\n</code></pre> <p>Clear the content of the option list.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.disable_option","title":"disable_option","text":"<pre><code>disable_option(option_id)\n</code></pre> <p>Disable the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to disable.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.disable_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.disable_option_at_index","title":"disable_option_at_index","text":"<pre><code>disable_option_at_index(index)\n</code></pre> <p>Disable the option at the given index.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.enable_option","title":"enable_option","text":"<pre><code>enable_option(option_id)\n</code></pre> <p>Enable the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to enable.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.enable_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.enable_option_at_index","title":"enable_option_at_index","text":"<pre><code>enable_option_at_index(index)\n</code></pre> <p>Enable the option at the given index.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option","title":"get_option","text":"<pre><code>get_option(option_id)\n</code></pre> <p>Get the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to get.</p> required <p>Returns:</p> Type Description <code>Option</code> <p>The option with the ID.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_at_index","title":"get_option_at_index","text":"<pre><code>get_option_at_index(index)\n</code></pre> <p>Get the option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the option to get.</p> required <p>Returns:</p> Type Description <code>Option</code> <p>The option at that index.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_index","title":"get_option_index","text":"<pre><code>get_option_index(option_id)\n</code></pre> <p>Get the index of the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to get the index of.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The index of the item with the given ID.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.get_option_index(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option","title":"remove_option","text":"<pre><code>remove_option(option_id)\n</code></pre> <p>Remove the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to remove.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option_at_index","title":"remove_option_at_index","text":"<pre><code>remove_option_at_index(index)\n</code></pre> <p>Remove the option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the option to remove.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.remove_option_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt","title":"replace_option_prompt","text":"<pre><code>replace_option_prompt(option_id, prompt)\n</code></pre> <p>Replace the prompt of the option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the option to replace the prompt of.</p> required <code>RenderableType</code> <p>The new prompt for the option.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no option has the given ID.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt_at_index","title":"replace_option_prompt_at_index","text":"<pre><code>replace_option_prompt_at_index(index, prompt)\n</code></pre> <p>Replace the prompt of the option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the option to replace the prompt of.</p> required <code>RenderableType</code> <p>The new prompt for the option.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>OptionList</code> instance.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no option with the given index.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.replace_option_prompt_at_index(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.scroll_to_highlight","title":"scroll_to_highlight","text":"<pre><code>scroll_to_highlight(top=False)\n</code></pre> <p>Ensure that the highlighted option is in view.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Scroll highlight to top of the list.</p> <code>False</code>"},{"location":"widgets/option_list/#textual.widgets.OptionList.scroll_to_highlight(top)","title":"<code>top</code>","text":""},{"location":"widgets/option_list/#textual.widgets.OptionList.validate_highlighted","title":"validate_highlighted","text":"<pre><code>validate_highlighted(highlighted)\n</code></pre> <p>Validate the <code>highlighted</code> property value on access.</p>"},{"location":"widgets/option_list/#textual.widgets.OptionList.watch_highlighted","title":"watch_highlighted","text":"<pre><code>watch_highlighted(highlighted)\n</code></pre> <p>React to the highlighted option having changed.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.DuplicateID","title":"DuplicateID","text":"<p>               Bases: <code>Exception</code></p> <p>Raised if a duplicate ID is used when adding options to an option list.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option","title":"Option","text":"<pre><code>Option(prompt, id=None, disabled=False)\n</code></pre> <p>Class that holds the details of an individual option.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>The prompt for the option.</p> required <code>str | None</code> <p>The optional ID for the option.</p> <code>None</code> <code>bool</code> <p>The initial enabled/disabled state. Enabled by default.</p> <code>False</code>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.Option(id)","title":"<code>id</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.Option(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.Option.id","title":"id  <code>property</code>","text":"<pre><code>id\n</code></pre> <p>The optional ID for the option.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option.prompt","title":"prompt  <code>property</code>","text":"<pre><code>prompt\n</code></pre> <p>The prompt for the option.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Option.set_prompt","title":"set_prompt","text":"<pre><code>set_prompt(prompt)\n</code></pre> <p>Set the prompt for the option.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>The new prompt for the option.</p> required"},{"location":"widgets/option_list/#textual.widgets.option_list.Option.set_prompt(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/option_list/#textual.widgets.option_list.OptionDoesNotExist","title":"OptionDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when a request has been made for an option that doesn't exist.</p>"},{"location":"widgets/option_list/#textual.widgets.option_list.Separator","title":"Separator","text":"<p>Class used to add a separator to an OptionList.</p>"},{"location":"widgets/placeholder/","title":"Placeholder","text":"<p>Added in version 0.6.0</p> <p>A widget that is meant to have no complex functionality. Use the placeholder widget when studying the layout of your app before having to develop your custom widgets.</p> <p>The placeholder widget has variants that display different bits of useful information. Clicking a placeholder will cycle through its variants.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/placeholder/#example","title":"Example","text":"<p>The example below shows each placeholder variant.</p> Outputplaceholder.pyplaceholder.tcss <p> PlaceholderApp Placeholder\u00a0p2\u00a0here! This\u00a0is\u00a0a\u00a0custom\u00a0label\u00a0for\u00a0p1. #p4 #p3#p5Placeholde r Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0 26\u00a0x\u00a06amet,\u00a0consectetur\u00a027\u00a0x\u00a06 adipiscing\u00a0elit.\u00a0Etiam\u00a0 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0 Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 consectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a040\u00a0x\u00a06 feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 gravida.\u00a0Phasellus\u00a0id\u00a0eleifend\u00a0ligula. Nullam\u00a0imperdiet\u00a0sem\u00a0tellus,\u00a0sed\u00a0 vehicula\u00a0nisl\u00a0faucibus\u00a0sit\u00a0amet.\u00a0Lorem\u00a0ipsum\u00a0dolor\u00a0sit\u00a0amet,\u00a0 Praesent\u00a0iaculis\u00a0tempor\u00a0ultricies.\u00a0Sedconsectetur\u00a0adipiscing\u00a0elit.\u00a0Etiam\u00a0 lacinia,\u00a0tellus\u00a0id\u00a0rutrum\u00a0lacinia,\u00a0feugiat\u00a0ac\u00a0elit\u00a0sit\u00a0amet\u00a0accumsan.\u00a0 sapien\u00a0sapien\u00a0congue\u00a0mauris,\u00a0sit\u00a0amet\u00a0Suspendisse\u00a0bibendum\u00a0nec\u00a0libero\u00a0quis\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Container, Horizontal, VerticalScroll\nfrom textual.widgets import Placeholder\n\n\nclass PlaceholderApp(App):\n    CSS_PATH = \"placeholder.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield VerticalScroll(\n            Container(\n                Placeholder(\"This is a custom label for p1.\", id=\"p1\"),\n                Placeholder(\"Placeholder p2 here!\", id=\"p2\"),\n                Placeholder(id=\"p3\"),\n                Placeholder(id=\"p4\"),\n                Placeholder(id=\"p5\"),\n                Placeholder(),\n                Horizontal(\n                    Placeholder(variant=\"size\", id=\"col1\"),\n                    Placeholder(variant=\"text\", id=\"col2\"),\n                    Placeholder(variant=\"size\", id=\"col3\"),\n                    id=\"c1\",\n                ),\n                id=\"bot\",\n            ),\n            Container(\n                Placeholder(variant=\"text\", id=\"left\"),\n                Placeholder(variant=\"size\", id=\"topright\"),\n                Placeholder(variant=\"text\", id=\"botright\"),\n                id=\"top\",\n            ),\n            id=\"content\",\n        )\n\n\nif __name__ == \"__main__\":\n    app = PlaceholderApp()\n    app.run()\n</code></pre> <pre><code>Placeholder {\n    height: 100%;\n}\n\n#top {\n    height: 50%;\n    width: 100%;\n    layout: grid;\n    grid-size: 2 2;\n}\n\n#left {\n    row-span: 2;\n}\n\n#bot {\n    height: 50%;\n    width: 100%;\n    layout: grid;\n    grid-size: 8 8;\n}\n\n#c1 {\n    row-span: 4;\n    column-span: 8;\n    height: 100%;\n}\n\n#col1, #col2, #col3 {\n    width: 1fr;\n}\n\n#p1 {\n    row-span: 4;\n    column-span: 4;\n}\n\n#p2 {\n    row-span: 2;\n    column-span: 4;\n}\n\n#p3 {\n    row-span: 2;\n    column-span: 2;\n}\n\n#p4 {\n    row-span: 1;\n    column-span: 2;\n}\n</code></pre>"},{"location":"widgets/placeholder/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>variant</code> <code>str</code> <code>\"default\"</code> Styling variant. One of <code>default</code>, <code>size</code>, <code>text</code>."},{"location":"widgets/placeholder/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/placeholder/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/placeholder/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A simple placeholder widget to use before you build your custom widgets.</p> <p>This placeholder has a couple of variants that show different data. Clicking the placeholder cycles through the available variants, but a placeholder can also be initialised in a specific variant.</p> <p>The variants available are:</p> Variant Placeholder shows default Identifier label or the ID of the placeholder. size Size of the placeholder. text Lorem Ipsum text. <p>Parameters:</p> Name Type Description Default <code>str | None</code> <p>The label to identify the placeholder. If no label is present, uses the placeholder ID instead.</p> <code>None</code> <code>PlaceholderVariant</code> <p>The variant of the placeholder.</p> <code>'default'</code> <code>str | None</code> <p>The name of the placeholder.</p> <code>None</code> <code>str | None</code> <p>The ID of the placeholder in the DOM.</p> <code>None</code> <code>str | None</code> <p>A space separated string with the CSS classes of the placeholder, if any.</p> <code>None</code> <code>bool</code> <p>Whether the placeholder is disabled or not.</p> <code>False</code>"},{"location":"widgets/placeholder/#textual.widgets.Placeholder(label)","title":"<code>label</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(variant)","title":"<code>variant</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(name)","title":"<code>name</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(id)","title":"<code>id</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/placeholder/#textual.widgets.Placeholder.variant","title":"variant  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>variant = validate_variant(variant)\n</code></pre> <p>The current variant of the placeholder.</p>"},{"location":"widgets/placeholder/#textual.widgets.Placeholder.cycle_variant","title":"cycle_variant","text":"<pre><code>cycle_variant()\n</code></pre> <p>Get the next variant in the cycle.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Placeholder</code> instance.</p>"},{"location":"widgets/placeholder/#textual.widgets.Placeholder.validate_variant","title":"validate_variant","text":"<pre><code>validate_variant(variant)\n</code></pre> <p>Validate the variant to which the placeholder was set.</p>"},{"location":"widgets/pretty/","title":"Pretty","text":"<p>Display a pretty-formatted object.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/pretty/#example","title":"Example","text":"<p>The example below shows a pretty-formatted <code>dict</code>, but <code>Pretty</code> can display any Python object.</p> Outputpretty.py <p> PrettyExample { 'title':\u00a0'Back\u00a0to\u00a0the\u00a0Future', 'releaseYear':\u00a01985, 'director':\u00a0'Robert\u00a0Zemeckis', 'genre':\u00a0'Adventure,\u00a0Comedy,\u00a0Sci-Fi', 'cast':\u00a0[ {'actor':\u00a0'Michael\u00a0J.\u00a0Fox',\u00a0'character':\u00a0'Marty\u00a0McFly'}, {'actor':\u00a0'Christopher\u00a0Lloyd',\u00a0'character':\u00a0'Dr.\u00a0Emmett\u00a0Brown'} ] } </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Pretty\n\nDATA = {\n    \"title\": \"Back to the Future\",\n    \"releaseYear\": 1985,\n    \"director\": \"Robert Zemeckis\",\n    \"genre\": \"Adventure, Comedy, Sci-Fi\",\n    \"cast\": [\n        {\"actor\": \"Michael J. Fox\", \"character\": \"Marty McFly\"},\n        {\"actor\": \"Christopher Lloyd\", \"character\": \"Dr. Emmett Brown\"},\n    ],\n}\n\n\nclass PrettyExample(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Pretty(DATA)\n\n\napp = PrettyExample()\n\nif __name__ == \"__main__\":\n    app.run()\n</code></pre>"},{"location":"widgets/pretty/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/pretty/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/pretty/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/pretty/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A pretty-printing widget.</p> <p>Used to pretty-print any object.</p> <p>Parameters:</p> Name Type Description Default <code>Any</code> <p>The object to pretty-print.</p> required <code>str | None</code> <p>The name of the pretty widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the pretty in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the pretty.</p> <code>None</code>"},{"location":"widgets/pretty/#textual.widgets.Pretty(object)","title":"<code>object</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty(name)","title":"<code>name</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty(id)","title":"<code>id</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/pretty/#textual.widgets.Pretty.update","title":"update","text":"<pre><code>update(object)\n</code></pre> <p>Update the content of the pretty widget.</p> <p>Parameters:</p> Name Type Description Default <code>Any</code> <p>The object to pretty-print.</p> required"},{"location":"widgets/pretty/#textual.widgets.Pretty.update(object)","title":"<code>object</code>","text":""},{"location":"widgets/progress_bar/","title":"ProgressBar","text":"<p>A widget that displays progress on a time-consuming task.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/progress_bar/#examples","title":"Examples","text":""},{"location":"widgets/progress_bar/#progress-bar-in-isolation","title":"Progress Bar in Isolation","text":"<p>The example below shows a progress bar in isolation. It shows the progress bar in:</p> <ul> <li>its indeterminate state, when the <code>total</code> progress hasn't been set yet;</li> <li>the middle of the progress; and</li> <li>the completed state.</li> </ul> Indeterminate state39% doneCompletedprogress_bar_isolated.py <p> IndeterminateProgressBar \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501--%--:--:--\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> IndeterminateProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250139%00:00:07\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> IndeterminateProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501100%--:--:--\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center, Middle\nfrom textual.timer import Timer\nfrom textual.widgets import Footer, ProgressBar\n\n\nclass IndeterminateProgressBar(App[None]):\n    BINDINGS = [(\"s\", \"start\", \"Start\")]\n\n    progress_timer: Timer\n    \"\"\"Timer to simulate progress happening.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Center():\n            with Middle():\n                yield ProgressBar()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Set up a timer to simulate progess happening.\"\"\"\n        self.progress_timer = self.set_interval(1 / 10, self.make_progress, pause=True)\n\n    def make_progress(self) -&gt; None:\n        \"\"\"Called automatically to advance the progress bar.\"\"\"\n        self.query_one(ProgressBar).advance(1)\n\n    def action_start(self) -&gt; None:\n        \"\"\"Start the progress tracking.\"\"\"\n        self.query_one(ProgressBar).update(total=100)\n        self.progress_timer.resume()\n\n\nif __name__ == \"__main__\":\n    IndeterminateProgressBar().run()\n</code></pre>"},{"location":"widgets/progress_bar/#complete-app-example","title":"Complete App Example","text":"<p>The example below shows a simple app with a progress bar that is keeping track of a fictitious funding level for an organisation.</p> OutputOutput (partial funding)Output (full funding)progress_bar.pyprogress_bar.tcss <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u25010%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250135%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Donation\u00a0for\u00a0$15\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Donation\u00a0for\u00a0$20\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <p> Funding\u00a0tracking \u2b58Funding\u00a0tracking \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Funding:\u00a0\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501100%\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594 \u258a$$$\u258e\u00a0Donate\u00a0 \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 Donation\u00a0for\u00a0$15\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Donation\u00a0for\u00a0$20\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Donation\u00a0for\u00a0$65\u00a0received!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center, VerticalScroll\nfrom textual.widgets import Button, Header, Input, Label, ProgressBar\n\n\nclass FundingProgressApp(App[None]):\n    CSS_PATH = \"progress_bar.tcss\"\n\n    TITLE = \"Funding tracking\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        with Center():\n            yield Label(\"Funding: \")\n            yield ProgressBar(total=100, show_eta=False)  # (1)!\n        with Center():\n            yield Input(placeholder=\"$$$\")\n            yield Button(\"Donate\")\n\n        yield VerticalScroll(id=\"history\")\n\n    def on_button_pressed(self) -&gt; None:\n        self.add_donation()\n\n    def on_input_submitted(self) -&gt; None:\n        self.add_donation()\n\n    def add_donation(self) -&gt; None:\n        text_value = self.query_one(Input).value\n        try:\n            value = int(text_value)\n        except ValueError:\n            return\n        self.query_one(ProgressBar).advance(value)\n        self.query_one(VerticalScroll).mount(Label(f\"Donation for ${value} received!\"))\n        self.query_one(Input).value = \"\"\n\n\nif __name__ == \"__main__\":\n    FundingProgressApp().run()\n</code></pre> <ol> <li>We create a progress bar with a total of <code>100</code> steps and we hide the ETA countdown because we are not keeping track of a continuous, uninterrupted task.</li> </ol> <pre><code>Container {\n    overflow: hidden hidden;\n    height: auto;\n}\n\nCenter {\n    margin-top: 1;\n    margin-bottom: 1;\n    layout: horizontal;\n}\n\nProgressBar {\n    padding-left: 3;\n}\n\nInput {\n    width: 16;\n}\n\nVerticalScroll {\n    height: auto;\n}\n</code></pre>"},{"location":"widgets/progress_bar/#gradient-bars","title":"Gradient Bars","text":"<p>Progress bars support an optional <code>gradient</code> parameter, which renders a smooth gradient rather than a solid bar. To use a gradient, create and set a Gradient object on the ProgressBar widget.</p> <p>Note</p> <p>Setting a gradient will override styles set in CSS.</p> <p>Here's an example:</p> Outputprogress_bar_gradient.py <p> ProgressApp \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250170%--:--:--\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.color import Gradient\nfrom textual.containers import Center, Middle\nfrom textual.widgets import ProgressBar\n\n\nclass ProgressApp(App[None]):\n    \"\"\"Progress bar with a rainbow gradient.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        gradient = Gradient.from_colors(\n            \"#881177\",\n            \"#aa3355\",\n            \"#cc6666\",\n            \"#ee9944\",\n            \"#eedd00\",\n            \"#99dd55\",\n            \"#44dd88\",\n            \"#22ccbb\",\n            \"#00bbcc\",\n            \"#0099cc\",\n            \"#3366bb\",\n            \"#663399\",\n        )\n        with Center():\n            with Middle():\n                yield ProgressBar(total=100, gradient=gradient)\n\n    def on_mount(self) -&gt; None:\n        self.query_one(ProgressBar).update(progress=70)\n\n\nif __name__ == \"__main__\":\n    ProgressApp().run()\n</code></pre>"},{"location":"widgets/progress_bar/#custom-styling","title":"Custom Styling","text":"<p>This shows a progress bar with custom styling. Refer to the section below for more information.</p> Indeterminate state39% doneCompletedprogress_bar_styled.pyprogress_bar_styled.tcss <p> StyledProgressBar \u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501--%--:--:-- \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> StyledProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250139%00:00:07 \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <p> StyledProgressBar \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501100%--:--:-- \u00a0s\u00a0Start\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Center, Middle\nfrom textual.timer import Timer\nfrom textual.widgets import Footer, ProgressBar\n\n\nclass StyledProgressBar(App[None]):\n    BINDINGS = [(\"s\", \"start\", \"Start\")]\n    CSS_PATH = \"progress_bar_styled.tcss\"\n\n    progress_timer: Timer\n    \"\"\"Timer to simulate progress happening.\"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Center():\n            with Middle():\n                yield ProgressBar()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Set up a timer to simulate progress happening.\"\"\"\n        self.progress_timer = self.set_interval(1 / 10, self.make_progress, pause=True)\n\n    def make_progress(self) -&gt; None:\n        \"\"\"Called automatically to advance the progress bar.\"\"\"\n        self.query_one(ProgressBar).advance(1)\n\n    def action_start(self) -&gt; None:\n        \"\"\"Start the progress tracking.\"\"\"\n        self.query_one(ProgressBar).update(total=100)\n        self.progress_timer.resume()\n\n\nif __name__ == \"__main__\":\n    StyledProgressBar().run()\n</code></pre> <pre><code>Bar &gt; .bar--indeterminate {\n    color: $primary;\n    background: $secondary;\n}\n\nBar &gt; .bar--bar {\n    color: $primary;\n    background: $primary 30%;\n}\n\nBar &gt; .bar--complete {\n    color: $error;\n}\n\nPercentageStatus {\n    text-style: reverse;\n    color: $secondary;\n}\n\nETAStatus {\n    text-style: underline;\n}\n</code></pre>"},{"location":"widgets/progress_bar/#styling-the-progress-bar","title":"Styling the Progress Bar","text":"<p>The progress bar is composed of three sub-widgets that can be styled independently:</p> Widget name ID Description <code>Bar</code> <code>#bar</code> The bar that visually represents the progress made. <code>PercentageStatus</code> <code>#percentage</code> Label that shows the percentage of completion. <code>ETAStatus</code> <code>#eta</code> Label that shows the estimated time to completion."},{"location":"widgets/progress_bar/#bar-component-classes","title":"Bar Component Classes","text":"<p>The bar sub-widget provides the component classes that follow.</p> <p>These component classes let you modify the foreground and background color of the bar in its different states.</p> Class Description <code>bar--bar</code> Style of the bar (may be used to change the color). <code>bar--complete</code> Style of the bar when it's complete. <code>bar--indeterminate</code> Style of the bar when it's in an indeterminate state."},{"location":"widgets/progress_bar/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>percentage</code> <code>float  | None</code> The read-only percentage of progress that has been made. This is <code>None</code> if the <code>total</code> hasn't been set. <code>progress</code> <code>float</code> <code>0</code> The number of steps of progress already made. <code>total</code> <code>float  | None</code> The total number of steps that we are keeping track of."},{"location":"widgets/progress_bar/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/progress_bar/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/progress_bar/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A progress bar widget.</p> <p>The progress bar uses \"steps\" as the measurement unit.</p> Example <pre><code>class MyApp(App):\n    def compose(self):\n        yield ProgressBar(total=100)\n\n    def key_space(self):\n        self.query_one(ProgressBar).advance(5)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>float | None</code> <p>The total number of steps in the progress if known.</p> <code>None</code> <code>bool</code> <p>Whether to show the bar portion of the progress bar.</p> <code>True</code> <code>bool</code> <p>Whether to show the percentage status of the bar.</p> <code>True</code> <code>bool</code> <p>Whether to show the ETA countdown of the progress bar.</p> <code>True</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <code>Clock | None</code> <p>An optional clock object (leave as default unless testing).</p> <code>None</code> <code>Gradient | None</code> <p>An optional Gradient object (will replace CSS styles in the bar).</p> <code>None</code>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(total)","title":"<code>total</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(show_bar)","title":"<code>show_bar</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(show_percentage)","title":"<code>show_percentage</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(show_eta)","title":"<code>show_eta</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(name)","title":"<code>name</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(id)","title":"<code>id</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(clock)","title":"<code>clock</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar(gradient)","title":"<code>gradient</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.gradient","title":"gradient  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>gradient = reactive(None)\n</code></pre> <p>Optional gradient object (will replace CSS styling in bar).</p>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.percentage","title":"percentage  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>percentage = reactive[Optional[float]](None)\n</code></pre> <p>The percentage of progress that has been completed.</p> <p>The percentage is a value between 0 and 1 and the returned value is only <code>None</code> if the total progress of the bar hasn't been set yet.</p> Example <pre><code>progress_bar = ProgressBar()\nprint(progress_bar.percentage)  # None\nprogress_bar.update(total=100)\nprogress_bar.advance(50)\nprint(progress_bar.percentage)  # 0.5\n</code></pre>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.progress","title":"progress  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>progress = reactive(0.0)\n</code></pre> <p>The progress so far, in number of steps.</p>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.total","title":"total  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>total = total\n</code></pre> <p>The total number of steps associated with this progress bar, when known.</p> <p>The value <code>None</code> will render an indeterminate progress bar.</p>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.advance","title":"advance","text":"<pre><code>advance(advance=1)\n</code></pre> <p>Advance the progress of the progress bar by the given amount.</p> Example <pre><code>progress_bar.advance(10)  # Advance 10 steps.\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>float</code> <p>Number of steps to advance progress by.</p> <code>1</code>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.advance(advance)","title":"<code>advance</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update","title":"update","text":"<pre><code>update(*, total=UNUSED, progress=UNUSED, advance=UNUSED)\n</code></pre> <p>Update the progress bar with the given options.</p> Example <pre><code>progress_bar.update(\n    total=200,  # Set new total to 200 steps.\n    progress=50,  # Set the progress to 50 (out of 200).\n)\n</code></pre> <p>Parameters:</p> Name Type Description Default <code>None | float | UnusedParameter</code> <p>New total number of steps.</p> <code>UNUSED</code> <code>float | UnusedParameter</code> <p>Set the progress to the given number of steps.</p> <code>UNUSED</code> <code>float | UnusedParameter</code> <p>Advance the progress by this number of steps.</p> <code>UNUSED</code>"},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update(total)","title":"<code>total</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update(progress)","title":"<code>progress</code>","text":""},{"location":"widgets/progress_bar/#textual.widgets.ProgressBar.update(advance)","title":"<code>advance</code>","text":""},{"location":"widgets/radiobutton/","title":"RadioButton","text":"<p>Added in version 0.13.0</p> <p>A simple radio button which stores a boolean value.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>A radio button is best used with others inside a <code>RadioSet</code>.</p>"},{"location":"widgets/radiobutton/#example","title":"Example","text":"<p>The example below shows radio buttons, used within a <code>RadioSet</code>.</p> Outputradio_button.pyradio_button.tcss <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Picture\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import RadioButton, RadioSet\n\n\nclass RadioChoicesApp(App[None]):\n    CSS_PATH = \"radio_button.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with RadioSet():\n            yield RadioButton(\"Battlestar Galactica\")\n            yield RadioButton(\"Dune 1984\")\n            yield RadioButton(\"Dune 2021\", id=\"focus_me\")\n            yield RadioButton(\"Serenity\", value=True)\n            yield RadioButton(\"Star Trek: The Motion Picture\")\n            yield RadioButton(\"Star Wars: A New Hope\")\n            yield RadioButton(\"The Last Starfighter\")\n            yield RadioButton(\n                \"Total Recall :backhand_index_pointing_right: :red_circle:\"\n            )\n            yield RadioButton(\"Wing Commander\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(RadioSet).focus()\n\n\nif __name__ == \"__main__\":\n    RadioChoicesApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nRadioSet {\n    width: 50%;\n}\n</code></pre>"},{"location":"widgets/radiobutton/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>value</code> <code>bool</code> <code>False</code> The value of the radio button."},{"location":"widgets/radiobutton/#messages","title":"Messages","text":"<ul> <li>RadioButton.Changed</li> </ul>"},{"location":"widgets/radiobutton/#bindings","title":"Bindings","text":"<p>The radio button widget defines the following bindings:</p> Key(s) Description enter, space Toggle the value."},{"location":"widgets/radiobutton/#component-classes","title":"Component Classes","text":"<p>The checkbox widget inherits the following component classes:</p> Class Description <code>toggle--button</code> Targets the toggle button itself. <code>toggle--label</code> Targets the text label of the toggle button."},{"location":"widgets/radiobutton/#see-also","title":"See Also","text":"<ul> <li>RadioSet</li> </ul> <p>               Bases: <code>ToggleButton</code></p> <p>A radio button widget that represents a boolean value.</p> Note <p>A <code>RadioButton</code> is best used within a RadioSet.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label for the toggle.</p> <code>''</code> <code>bool</code> <p>The initial value of the toggle.</p> <code>False</code> <code>bool</code> <p>Should the button come before the label, or after?</p> <code>True</code> <code>str | None</code> <p>The name of the toggle.</p> <code>None</code> <code>str | None</code> <p>The ID of the toggle in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the toggle.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>RenderableType | None = None,</p> <code>None</code>"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(label)","title":"<code>label</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(value)","title":"<code>value</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(button_first)","title":"<code>button_first</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(name)","title":"<code>name</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(id)","title":"<code>id</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.BUTTON_INNER","title":"BUTTON_INNER  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BUTTON_INNER = '\u25cf'\n</code></pre> <p>The character used for the inside of the button.</p>"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed","title":"Changed","text":"<pre><code>Changed(toggle_button, value)\n</code></pre> <p>               Bases: <code>Changed</code></p> <p>Posted when the value of the radio button changes.</p> <p>This message can be handled using an <code>on_radio_button_changed</code> method.</p> <p>Parameters:</p> Name Type Description Default <code>ToggleButton</code> <p>The toggle button sending the message.</p> required <code>bool</code> <p>The value of the toggle button.</p> required"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed(toggle_button)","title":"<code>toggle_button</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed(value)","title":"<code>value</code>","text":""},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for Changed.radio_button.</p>"},{"location":"widgets/radiobutton/#textual.widgets.RadioButton.Changed.radio_button","title":"radio_button  <code>property</code>","text":"<pre><code>radio_button\n</code></pre> <p>The radio button that was changed.</p>"},{"location":"widgets/radioset/","title":"RadioSet","text":"<p>Added in version 0.13.0</p> <p>A container widget that groups <code>RadioButton</code>s together.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/radioset/#example","title":"Example","text":""},{"location":"widgets/radioset/#simple-example","title":"Simple example","text":"<p>The example below shows two radio sets, one built using a collection of radio buttons, the other a collection of simple strings.</p> Outputradio_set.pyradio_set.tcss <p> RadioChoicesApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e\u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e\u258a\u2590\u25cf\u258c\u00a0Amanda\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e\u258a\u2590\u25cf\u258c\u00a0Connor\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e\u258a\u2590\u25cf\u258c\u00a0Duncan\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e\u258a\u2590\u25cf\u258c\u00a0Heather\u00a0MacLeod\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Pictur\u258e\u258a\u2590\u25cf\u258c\u00a0Joe\u00a0Dawson\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e\u258a\u2590\u25cf\u258c\u00a0Kurgan,\u00a0The\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e\u258a\u2590\u25cf\u258c\u00a0Methos\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e\u258a\u2590\u25cf\u258c\u00a0Rachel\u00a0Ellenstein\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e\u258a\u2590\u25cf\u258c\u00a0Ram\u00edrez\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e\u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import RadioButton, RadioSet\n\n\nclass RadioChoicesApp(App[None]):\n    CSS_PATH = \"radio_set.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            # A RadioSet built up from RadioButtons.\n            with RadioSet(id=\"focus_me\"):\n                yield RadioButton(\"Battlestar Galactica\")\n                yield RadioButton(\"Dune 1984\")\n                yield RadioButton(\"Dune 2021\")\n                yield RadioButton(\"Serenity\", value=True)\n                yield RadioButton(\"Star Trek: The Motion Picture\")\n                yield RadioButton(\"Star Wars: A New Hope\")\n                yield RadioButton(\"The Last Starfighter\")\n                yield RadioButton(\n                    \"Total Recall :backhand_index_pointing_right: :red_circle:\"\n                )\n                yield RadioButton(\"Wing Commander\")\n            # A RadioSet built up from a collection of strings.\n            yield RadioSet(\n                \"Amanda\",\n                \"Connor MacLeod\",\n                \"Duncan MacLeod\",\n                \"Heather MacLeod\",\n                \"Joe Dawson\",\n                \"Kurgan, [bold italic red]The[/]\",\n                \"Methos\",\n                \"Rachel Ellenstein\",\n                \"Ram\u00edrez\",\n            )\n\n    def on_mount(self) -&gt; None:\n        self.query_one(\"#focus_me\").focus()\n\n\nif __name__ == \"__main__\":\n    RadioChoicesApp().run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    align: center middle;\n    height: auto;\n}\n\nRadioSet {\n    width: 45%;\n}\n</code></pre>"},{"location":"widgets/radioset/#reacting-to-changes-in-a-radio-set","title":"Reacting to Changes in a Radio Set","text":"<p>Here is an example of using the message to react to changes in a <code>RadioSet</code>:</p> Outputradio_set_changed.pyradio_set_changed.tcss <p> RadioSetChangedApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u2590\u25cf\u258cBattlestar\u00a0Galactica\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a01984\u258e \u258a\u2590\u25cf\u258c\u00a0Dune\u00a02021\u258e \u258a\u2590\u25cf\u258c\u00a0Serenity\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Trek:\u00a0The\u00a0Motion\u00a0Pictu\u258e \u258a\u2590\u25cf\u258c\u00a0Star\u00a0Wars:\u00a0A\u00a0New\u00a0Hope\u258e \u258a\u2590\u25cf\u258c\u00a0The\u00a0Last\u00a0Starfighter\u258e \u258a\u2590\u25cf\u258c\u00a0Total\u00a0Recall\u00a0\ud83d\udc49\u00a0\ud83d\udd34\u258e \u258a\u2590\u25cf\u258c\u00a0Wing\u00a0Commander\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u2587\u2587 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Pressed\u00a0button\u00a0label:\u00a0Battlestar\u00a0Galactica\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal, VerticalScroll\nfrom textual.widgets import Label, RadioButton, RadioSet\n\n\nclass RadioSetChangedApp(App[None]):\n    CSS_PATH = \"radio_set_changed.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with VerticalScroll():\n            with Horizontal():\n                with RadioSet(id=\"focus_me\"):\n                    yield RadioButton(\"Battlestar Galactica\")\n                    yield RadioButton(\"Dune 1984\")\n                    yield RadioButton(\"Dune 2021\")\n                    yield RadioButton(\"Serenity\", value=True)\n                    yield RadioButton(\"Star Trek: The Motion Picture\")\n                    yield RadioButton(\"Star Wars: A New Hope\")\n                    yield RadioButton(\"The Last Starfighter\")\n                    yield RadioButton(\n                        \"Total Recall :backhand_index_pointing_right: :red_circle:\"\n                    )\n                    yield RadioButton(\"Wing Commander\")\n            with Horizontal():\n                yield Label(id=\"pressed\")\n            with Horizontal():\n                yield Label(id=\"index\")\n\n    def on_mount(self) -&gt; None:\n        self.query_one(RadioSet).focus()\n\n    def on_radio_set_changed(self, event: RadioSet.Changed) -&gt; None:\n        self.query_one(\"#pressed\", Label).update(\n            f\"Pressed button label: {event.pressed.label}\"\n        )\n        self.query_one(\"#index\", Label).update(\n            f\"Pressed button index: {event.radio_set.pressed_index}\"\n        )\n\n\nif __name__ == \"__main__\":\n    RadioSetChangedApp().run()\n</code></pre> <pre><code>VerticalScroll {\n    align: center middle;\n}\n\nHorizontal {\n    align: center middle;\n    height: auto;\n}\n\nRadioSet {\n    width: 45%;\n}\n</code></pre>"},{"location":"widgets/radioset/#messages","title":"Messages","text":"<ul> <li>RadioSet.Changed</li> </ul>"},{"location":"widgets/radioset/#bindings","title":"Bindings","text":"<p>The <code>RadioSet</code> widget defines the following bindings:</p> Key(s) Description enter, space Toggle the currently-selected button. left, up Select the previous radio button in the set. right, down Select the next radio button in the set."},{"location":"widgets/radioset/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/radioset/#see-also","title":"See Also","text":"<ul> <li>RadioButton</li> </ul> <p>               Bases: <code>Container</code></p> <p>Widget for grouping a collection of radio buttons into a set.</p> <p>When a collection of <code>RadioButton</code>s are grouped with this widget, they will be treated as a mutually-exclusive grouping. If one button is turned on, the previously-on button will be turned off.</p> <p>Parameters:</p> Name Type Description Default <code>str | RadioButton</code> <p>The labels or <code>RadioButton</code>s to group together.</p> <code>()</code> <code>str | None</code> <p>The name of the radio set.</p> <code>None</code> <code>str | None</code> <p>The ID of the radio set in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the radio set.</p> <code>None</code> <code>bool</code> <p>Whether the radio set is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code> Note <p>When a <code>str</code> label is provided, a RadioButton will be created from it.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet(buttons)","title":"<code>buttons</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(name)","title":"<code>name</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(id)","title":"<code>id</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"down,right\", \"next_button\", \"\", show=False),\n    Binding(\n        \"enter,space\", \"toggle_button\", \"Toggle\", show=False\n    ),\n    Binding(\"up,left\", \"previous_button\", \"\", show=False),\n]\n</code></pre> Key(s) Description enter, space Toggle the currently-selected button. left, up Select the previous radio button in the set. right, down Select the next radio button in the set."},{"location":"widgets/radioset/#textual.widgets.RadioSet.pressed_button","title":"pressed_button  <code>property</code>","text":"<pre><code>pressed_button\n</code></pre> <p>The currently-pressed <code>RadioButton</code>, or <code>None</code> if none are pressed.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.pressed_index","title":"pressed_index  <code>property</code>","text":"<pre><code>pressed_index\n</code></pre> <p>The index of the currently-pressed <code>RadioButton</code>, or -1 if none are pressed.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed","title":"Changed","text":"<pre><code>Changed(radio_set, pressed)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the pressed button in the set changes.</p> <p>This message can be handled using an <code>on_radio_set_changed</code> method.</p> <p>Parameters:</p> Name Type Description Default <code>RadioButton</code> <p>The radio button that was pressed.</p> required"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed(pressed)","title":"<code>pressed</code>","text":""},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'pressed'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>A reference to the <code>RadioSet</code> that was changed.</p> <p>This is an alias for <code>Changed.radio_set</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.index","title":"index  <code>instance-attribute</code>","text":"<pre><code>index = pressed_index\n</code></pre> <p>The index of the <code>RadioButton</code> that was pressed to make the change.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.pressed","title":"pressed  <code>instance-attribute</code>","text":"<pre><code>pressed = pressed\n</code></pre> <p>The <code>RadioButton</code> that was pressed to make the change.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.Changed.radio_set","title":"radio_set  <code>instance-attribute</code>","text":"<pre><code>radio_set = radio_set\n</code></pre> <p>A reference to the <code>RadioSet</code> that was changed.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.action_next_button","title":"action_next_button","text":"<pre><code>action_next_button()\n</code></pre> <p>Navigate to the next button in the set.</p> <p>Note that this will wrap around to the start if at the end.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.action_previous_button","title":"action_previous_button","text":"<pre><code>action_previous_button()\n</code></pre> <p>Navigate to the previous button in the set.</p> <p>Note that this will wrap around to the end if at the start.</p>"},{"location":"widgets/radioset/#textual.widgets.RadioSet.action_toggle_button","title":"action_toggle_button","text":"<pre><code>action_toggle_button()\n</code></pre> <p>Toggle the state of the currently-selected button.</p>"},{"location":"widgets/rich_log/","title":"RichLog","text":"<p>A RichLog is a widget which displays scrollable content that may be appended to in realtime.</p> <p>Call RichLog.write with a string or Rich Renderable to write content to the end of the RichLog. Call RichLog.clear to clear the content.</p> <p>Tip</p> <p>See also Log which is an alternative to <code>RichLog</code> but specialized for simple text.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/rich_log/#example","title":"Example","text":"<p>The example below shows an application showing a <code>RichLog</code> with different kinds of data logged.</p> Outputrich_log.py <p> RichLogApp \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0next(iter_values) \u2502\u00a0\u00a0\u00a0exceptStopIteration: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0return \u2502\u00a0\u00a0\u00a0first\u00a0=True\u2585\u2585 \u2502\u00a0\u00a0\u00a0for\u00a0value\u00a0in\u00a0iter_values: \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0False,\u00a0previous_value \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0first\u00a0=False \u2502\u00a0\u00a0\u00a0\u2502\u00a0\u00a0\u00a0previous_value\u00a0=\u00a0value \u2502\u00a0\u00a0\u00a0yield\u00a0first,\u00a0True,\u00a0previous_value \u250f\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2533\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2503\u00a0lane\u00a0\u2503\u00a0swimmer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0country\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2503\u00a0time\u00a0\u00a0\u2503\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2521\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2547\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2529\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a04\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Joseph\u00a0Schooling\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Singapore\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a050.39\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a02\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Michael\u00a0Phelps\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a05\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Chad\u00a0le\u00a0Clos\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0South\u00a0Africa\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a06\u00a0\u00a0\u00a0\u00a0\u2502\u00a0L\u00e1szl\u00f3\u00a0Cseh\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Hungary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.14\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a03\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Li\u00a0Zhuhao\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0China\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.26\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a08\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Mehdy\u00a0Metella\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0France\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.58\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a07\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Tom\u00a0Shields\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a0United\u00a0States\u00a0\u2502\u00a051.73\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2502\u00a01\u00a0\u00a0\u00a0\u00a0\u2502\u00a0Aleksandr\u00a0Sadovnikov\u00a0\u2502\u00a0Russia\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u00a051.84\u00a0\u2502\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Write\u00a0text\u00a0or\u00a0any\u00a0Rich\u00a0renderable! Key(key='H',\u00a0character='H',\u00a0name='upper_h',\u00a0is_printable=True) Key(key='i',\u00a0character='i',\u00a0name='i',\u00a0is_printable=True) </p> <pre><code>import csv\nimport io\n\nfrom rich.syntax import Syntax\nfrom rich.table import Table\n\nfrom textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import RichLog\n\nCSV = \"\"\"lane,swimmer,country,time\n4,Joseph Schooling,Singapore,50.39\n2,Michael Phelps,United States,51.14\n5,Chad le Clos,South Africa,51.14\n6,L\u00e1szl\u00f3 Cseh,Hungary,51.14\n3,Li Zhuhao,China,51.26\n8,Mehdy Metella,France,51.58\n7,Tom Shields,United States,51.73\n1,Aleksandr Sadovnikov,Russia,51.84\"\"\"\n\n\nCODE = '''\\\ndef loop_first_last(values: Iterable[T]) -&gt; Iterable[tuple[bool, bool, T]]:\n    \"\"\"Iterate and generate a tuple with a flag for first and last value.\"\"\"\n    iter_values = iter(values)\n    try:\n        previous_value = next(iter_values)\n    except StopIteration:\n        return\n    first = True\n    for value in iter_values:\n        yield first, False, previous_value\n        first = False\n        previous_value = value\n    yield first, True, previous_value\\\n'''\n\n\nclass RichLogApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield RichLog(highlight=True, markup=True)\n\n    def on_ready(self) -&gt; None:\n        \"\"\"Called  when the DOM is ready.\"\"\"\n        text_log = self.query_one(RichLog)\n\n        text_log.write(Syntax(CODE, \"python\", indent_guides=True))\n\n        rows = iter(csv.reader(io.StringIO(CSV)))\n        table = Table(*next(rows))\n        for row in rows:\n            table.add_row(*row)\n\n        text_log.write(table)\n        text_log.write(\"[bold magenta]Write text or any Rich renderable!\")\n\n    def on_key(self, event: events.Key) -&gt; None:\n        \"\"\"Write Key events to log.\"\"\"\n        text_log = self.query_one(RichLog)\n        text_log.write(event)\n\n\nif __name__ == \"__main__\":\n    app = RichLogApp()\n    app.run()\n</code></pre>"},{"location":"widgets/rich_log/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlight</code> <code>bool</code> <code>False</code> Automatically highlight content. <code>markup</code> <code>bool</code> <code>False</code> Apply Rich console markup. <code>max_lines</code> <code>int</code> <code>None</code> Maximum number of lines in the log or <code>None</code> for no maximum. <code>min_width</code> <code>int</code> 78 Minimum width of renderables. <code>wrap</code> <code>bool</code> <code>False</code> Enable word wrapping."},{"location":"widgets/rich_log/#messages","title":"Messages","text":"<p>This widget sends no messages.</p>"},{"location":"widgets/rich_log/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/rich_log/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>ScrollView</code></p> <p>A widget for logging text.</p> <p>Parameters:</p> Name Type Description Default <code>int | None</code> <p>Maximum number of lines in the log or <code>None</code> for no maximum.</p> <code>None</code> <code>int</code> <p>Minimum width of renderables.</p> <code>78</code> <code>bool</code> <p>Enable word wrapping (default is off).</p> <code>False</code> <code>bool</code> <p>Automatically highlight content.</p> <code>False</code> <code>bool</code> <p>Apply Rich console markup.</p> <code>False</code> <code>bool</code> <p>Enable automatic scrolling to end.</p> <code>True</code> <code>str | None</code> <p>The name of the text log.</p> <code>None</code> <code>str | None</code> <p>The ID of the text log in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the text log.</p> <code>None</code> <code>bool</code> <p>Whether the text log is disabled or not.</p> <code>False</code>"},{"location":"widgets/rich_log/#textual.widgets.RichLog(max_lines)","title":"<code>max_lines</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(min_width)","title":"<code>min_width</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(wrap)","title":"<code>wrap</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(highlight)","title":"<code>highlight</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(markup)","title":"<code>markup</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(auto_scroll)","title":"<code>auto_scroll</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(name)","title":"<code>name</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(id)","title":"<code>id</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.auto_scroll","title":"auto_scroll  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_scroll = auto_scroll\n</code></pre> <p>Automatically scroll to the end on write.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.highlight","title":"highlight  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>highlight = highlight\n</code></pre> <p>Automatically highlight content.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.highlighter","title":"highlighter  <code>instance-attribute</code>","text":"<pre><code>highlighter = ReprHighlighter()\n</code></pre> <p>Rich Highlighter used to highlight content when highlight is True</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.markup","title":"markup  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>markup = markup\n</code></pre> <p>Apply Rich console markup.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.max_lines","title":"max_lines  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>max_lines = max_lines\n</code></pre> <p>Maximum number of lines in the log or <code>None</code> for no maximum.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.min_width","title":"min_width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>min_width = min_width\n</code></pre> <p>Minimum width of renderables.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.wrap","title":"wrap  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>wrap = wrap\n</code></pre> <p>Enable word wrapping.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the text log.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>RichLog</code> instance.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.write","title":"write","text":"<pre><code>write(\n    content,\n    width=None,\n    expand=False,\n    shrink=True,\n    scroll_end=None,\n)\n</code></pre> <p>Write text or a rich renderable.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType | object</code> <p>Rich renderable (or text).</p> required <code>int | None</code> <p>Width to render or <code>None</code> to use optimal width.</p> <code>None</code> <code>bool</code> <p>Enable expand to widget width, or <code>False</code> to use <code>width</code>.</p> <code>False</code> <code>bool</code> <p>Enable shrinking of content to fit width.</p> <code>True</code> <code>bool | None</code> <p>Enable automatic scroll to end, or <code>None</code> to use <code>self.auto_scroll</code>.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>RichLog</code> instance.</p>"},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(content)","title":"<code>content</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(width)","title":"<code>width</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(expand)","title":"<code>expand</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(shrink)","title":"<code>shrink</code>","text":""},{"location":"widgets/rich_log/#textual.widgets.RichLog.write(scroll_end)","title":"<code>scroll_end</code>","text":""},{"location":"widgets/rule/","title":"Rule","text":"<p>A rule widget to separate content, similar to a <code>&lt;hr&gt;</code> HTML tag.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/rule/#examples","title":"Examples","text":""},{"location":"widgets/rule/#horizontal-rule","title":"Horizontal Rule","text":"<p>The default orientation of a rule is horizontal.</p> <p>The example below shows horizontal rules with all the available line styles.</p> Outputhorizontal_rules.pyhorizontal_rules.tcss <p> HorizontalRulesApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0solid\u00a0(default)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0heavy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0thick\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dashed\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d\u254d \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0double\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ascii\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ---------------------------------------------------------------- </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Vertical\nfrom textual.widgets import Label, Rule\n\n\nclass HorizontalRulesApp(App):\n    CSS_PATH = \"horizontal_rules.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Vertical():\n            yield Label(\"solid (default)\")\n            yield Rule()\n            yield Label(\"heavy\")\n            yield Rule(line_style=\"heavy\")\n            yield Label(\"thick\")\n            yield Rule(line_style=\"thick\")\n            yield Label(\"dashed\")\n            yield Rule(line_style=\"dashed\")\n            yield Label(\"double\")\n            yield Rule(line_style=\"double\")\n            yield Label(\"ascii\")\n            yield Rule(line_style=\"ascii\")\n\n\nif __name__ == \"__main__\":\n    app = HorizontalRulesApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nVertical {\n    height: auto;\n    width: 80%;\n}\n\nLabel {\n    width: 100%;\n    text-align: center;\n}\n</code></pre>"},{"location":"widgets/rule/#vertical-rule","title":"Vertical Rule","text":"<p>The example below shows vertical rules with all the available line styles.</p> Outputvertical_rules.pyvertical_rules.tcss <p> VerticalRulesApp \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0solid\u00a0\u00a0\u00a0\u2502\u00a0\u00a0heavy\u00a0\u00a0\u00a0\u2503\u00a0\u00a0thick\u00a0\u00a0\u00a0\u2588\u00a0\u00a0dashed\u00a0\u00a0\u254f\u00a0\u00a0double\u00a0\u00a0\u2551\u00a0\u00a0ascii\u00a0\u00a0\u00a0| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| \u2502\u2503\u2588\u254f\u2551| </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Label, Rule\n\n\nclass VerticalRulesApp(App):\n    CSS_PATH = \"vertical_rules.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        with Horizontal():\n            yield Label(\"solid\")\n            yield Rule(orientation=\"vertical\")\n            yield Label(\"heavy\")\n            yield Rule(orientation=\"vertical\", line_style=\"heavy\")\n            yield Label(\"thick\")\n            yield Rule(orientation=\"vertical\", line_style=\"thick\")\n            yield Label(\"dashed\")\n            yield Rule(orientation=\"vertical\", line_style=\"dashed\")\n            yield Label(\"double\")\n            yield Rule(orientation=\"vertical\", line_style=\"double\")\n            yield Label(\"ascii\")\n            yield Rule(orientation=\"vertical\", line_style=\"ascii\")\n\n\nif __name__ == \"__main__\":\n    app = VerticalRulesApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    width: auto;\n    height: 80%;\n}\n\nLabel {\n    width: 6;\n    height: 100%;\n    text-align: center;\n}\n</code></pre>"},{"location":"widgets/rule/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>orientation</code> <code>RuleOrientation</code> <code>\"horizontal\"</code> The orientation of the rule. <code>line_style</code> <code>LineStyle</code> <code>\"solid\"</code> The line style of the rule."},{"location":"widgets/rule/#messages","title":"Messages","text":"<p>This widget sends no messages.</p>"},{"location":"widgets/rule/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/rule/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A rule widget to separate content, similar to a <code>&lt;hr&gt;</code> HTML tag.</p> <p>Parameters:</p> Name Type Description Default <code>RuleOrientation</code> <p>The orientation of the rule.</p> <code>'horizontal'</code> <code>LineStyle</code> <p>The line style of the rule.</p> <code>'solid'</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/rule/#textual.widgets.Rule(orientation)","title":"<code>orientation</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(line_style)","title":"<code>line_style</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(name)","title":"<code>name</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(id)","title":"<code>id</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.line_style","title":"line_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>line_style = line_style\n</code></pre> <p>The line style of the rule.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.orientation","title":"orientation  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>orientation = orientation\n</code></pre> <p>The orientation of the rule.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.horizontal","title":"horizontal  <code>classmethod</code>","text":"<pre><code>horizontal(\n    line_style=\"solid\",\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>Utility constructor for creating a horizontal rule.</p> <p>Parameters:</p> Name Type Description Default <code>LineStyle</code> <p>The line style of the rule.</p> <code>'solid'</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Rule</code> <p>A rule widget with horizontal orientation.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(line_style)","title":"<code>line_style</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(name)","title":"<code>name</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(id)","title":"<code>id</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.horizontal(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical","title":"vertical  <code>classmethod</code>","text":"<pre><code>vertical(\n    line_style=\"solid\",\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n)\n</code></pre> <p>Utility constructor for creating a vertical rule.</p> <p>Parameters:</p> Name Type Description Default <code>LineStyle</code> <p>The line style of the rule.</p> <code>'solid'</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Rule</code> <p>A rule widget with vertical orientation.</p>"},{"location":"widgets/rule/#textual.widgets.Rule.vertical(line_style)","title":"<code>line_style</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(name)","title":"<code>name</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(id)","title":"<code>id</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/rule/#textual.widgets.Rule.vertical(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/rule/#textual.widgets.rule","title":"textual.widgets.rule","text":""},{"location":"widgets/rule/#textual.widgets.rule.LineStyle","title":"LineStyle  <code>module-attribute</code>","text":"<pre><code>LineStyle = Literal[\n    \"ascii\",\n    \"blank\",\n    \"dashed\",\n    \"double\",\n    \"heavy\",\n    \"hidden\",\n    \"none\",\n    \"solid\",\n    \"thick\",\n]\n</code></pre> <p>The valid line styles of the rule widget.</p>"},{"location":"widgets/rule/#textual.widgets.rule.RuleOrientation","title":"RuleOrientation  <code>module-attribute</code>","text":"<pre><code>RuleOrientation = Literal['horizontal', 'vertical']\n</code></pre> <p>The valid orientations of the rule widget.</p>"},{"location":"widgets/rule/#textual.widgets.rule.InvalidLineStyle","title":"InvalidLineStyle","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised for an invalid rule line style.</p>"},{"location":"widgets/rule/#textual.widgets.rule.InvalidRuleOrientation","title":"InvalidRuleOrientation","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised for an invalid rule orientation.</p>"},{"location":"widgets/select/","title":"Select","text":"<p>Added in version 0.24.0</p> <p>A Select widget is a compact control to allow the user to select between a number of possible options.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>The options in a select control may be passed in to the constructor or set later with set_options. Options should be given as a sequence of tuples consisting of two values: the first is the string (or Rich Renderable) to display in the control and list of options, the second is the value of option.</p> <p>The value of the currently selected option is stored in the <code>value</code> attribute of the widget, and the <code>value</code> attribute of the Changed message.</p>"},{"location":"widgets/select/#typing","title":"Typing","text":"<p>The <code>Select</code> control is a typing Generic which allows you to set the type of the option values. For instance, if the data type for your values is an integer, you would type the widget as follows:</p> <pre><code>options = [(\"First\", 1), (\"Second\", 2)]\nmy_select: Select[int] =  Select(options)\n</code></pre> <p>Note</p> <p>Typing is entirely optional.</p> <p>If you aren't familiar with typing or don't want to worry about it right now, feel free to ignore it.</p>"},{"location":"widgets/select/#examples","title":"Examples","text":""},{"location":"widgets/select/#basic-example","title":"Basic Example","text":"<p>The following example presents a <code>Select</code> with a number of options.</p> OutputOutput (expanded)select_widget.pyselect.tcss <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25bc\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Header, Select\n\nLINES = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\"\"\".splitlines()\n\n\nclass SelectApp(App):\n    CSS_PATH = \"select.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Select((line, line) for line in LINES)\n\n    @on(Select.Changed)\n    def select_changed(self, event: Select.Changed) -&gt; None:\n        self.title = str(event.value)\n\n\nif __name__ == \"__main__\":\n    app = SelectApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center top;\n}\n\nSelect {\n    width: 60;\n    margin: 2;\n}\n</code></pre>"},{"location":"widgets/select/#example-using-class-method","title":"Example using Class Method","text":"<p>The following example presents a <code>Select</code> created using the <code>from_values</code> class method.</p> OutputOutput (expanded)select_from_values_widget.pyselect.tcss <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25bc\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p> SelectApp \u2b58SelectApp \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u25b2\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258aSelect\u258e \u258a\u00a0I\u00a0must\u00a0not\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0mind-killer.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0Fear\u00a0is\u00a0the\u00a0little-death\u00a0that\u00a0brings\u00a0total\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0obliteration.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0face\u00a0my\u00a0fear.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0I\u00a0will\u00a0permit\u00a0it\u00a0to\u00a0pass\u00a0over\u00a0me\u00a0and\u00a0through\u00a0me.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Header, Select\n\nLINES = \"\"\"I must not fear.\nFear is the mind-killer.\nFear is the little-death that brings total obliteration.\nI will face my fear.\nI will permit it to pass over me and through me.\"\"\".splitlines()\n\n\nclass SelectApp(App):\n    CSS_PATH = \"select.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield Select.from_values(LINES)\n\n    @on(Select.Changed)\n    def select_changed(self, event: Select.Changed) -&gt; None:\n        self.title = str(event.value)\n\n\nif __name__ == \"__main__\":\n    app = SelectApp()\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center top;\n}\n\nSelect {\n    width: 60;\n    margin: 2;\n}\n</code></pre>"},{"location":"widgets/select/#blank-state","title":"Blank state","text":"<p>The widget <code>Select</code> has an option <code>allow_blank</code> for its constructor. If set to <code>True</code>, the widget may be in a state where there is no selection, in which case its value will be the special constant <code>Select.BLANK</code>. The auxiliary methods <code>Select.is_blank</code> and <code>Select.clear</code> provide a convenient way to check if the widget is in this state and to set this state, respectively.</p>"},{"location":"widgets/select/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>expanded</code> <code>bool</code> <code>False</code> True to expand the options overlay. <code>value</code> <code>SelectType</code> | <code>_NoSelection</code> <code>Select.BLANK</code> Current value of the Select."},{"location":"widgets/select/#messages","title":"Messages","text":"<ul> <li>Select.Changed</li> </ul>"},{"location":"widgets/select/#bindings","title":"Bindings","text":"<p>The Select widget defines the following bindings:</p> Key(s) Description enter,down,space,up Activate the overlay"},{"location":"widgets/select/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Generic[SelectType]</code>, <code>Vertical</code></p> <p>Widget to select from a list of possible options.</p> <p>A Select displays the current selection. When activated with Enter the widget displays an overlay with a list of all possible options.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[tuple[RenderableType, SelectType]]</code> <p>Options to select from. If no options are provided then <code>allow_blank</code> must be set to <code>True</code>.</p> required <code>str</code> <p>Text to show in the control when no option is selected.</p> <code>'Select'</code> <code>bool</code> <p>Enables or disables the ability to have the widget in a state with no selection made, in which case its value is set to the constant <code>Select.BLANK</code>.</p> <code>True</code> <code>SelectType | NoSelection</code> <p>Initial value selected. Should be one of the values in <code>options</code>. If no initial value is set and <code>allow_blank</code> is <code>False</code>, the widget will auto-select the first available option.</p> <code>BLANK</code> <code>str | None</code> <p>The name of the select control.</p> <code>None</code> <code>str | None</code> <p>The ID of the control in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the control.</p> <code>None</code> <code>bool</code> <p>Whether the control is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code> <p>Raises:</p> Type Description <code>EmptySelectError</code> <p>If no options are provided and <code>allow_blank</code> is <code>False</code>.</p>"},{"location":"widgets/select/#textual.widgets.Select(options)","title":"<code>options</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(allow_blank)","title":"<code>allow_blank</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(value)","title":"<code>value</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(name)","title":"<code>name</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(id)","title":"<code>id</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/select/#textual.widgets.Select(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.BINDINGS","title":"BINDINGS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDINGS = [('enter,down,space,up', 'show_overlay')]\n</code></pre> Key(s) Description enter,down,space,up Activate the overlay"},{"location":"widgets/select/#textual.widgets.Select.BLANK","title":"BLANK  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BLANK = BLANK\n</code></pre> <p>Constant to flag that the widget has no selection.</p>"},{"location":"widgets/select/#textual.widgets.Select.expanded","title":"expanded  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>expanded = var(False, init=False)\n</code></pre> <p>True to show the overlay, otherwise False.</p>"},{"location":"widgets/select/#textual.widgets.Select.prompt","title":"prompt  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>prompt = prompt\n</code></pre> <p>The prompt to show when no value is selected.</p>"},{"location":"widgets/select/#textual.widgets.Select.value","title":"value  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>value = var[Union[SelectType, NoSelection]](\n    BLANK, init=False\n)\n</code></pre> <p>The value of the selection.</p> <p>If the widget has no selection, its value will be <code>Select.BLANK</code>. Setting this to an illegal value will raise a <code>InvalidSelectValueError</code> exception.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed","title":"Changed","text":"<pre><code>Changed(select, value)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the select value was changed.</p> <p>This message can be handled using a <code>on_select_changed</code> method.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The Select that sent the message.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed.select","title":"select  <code>instance-attribute</code>","text":"<pre><code>select = select\n</code></pre> <p>The select widget.</p>"},{"location":"widgets/select/#textual.widgets.Select.Changed.value","title":"value  <code>instance-attribute</code>","text":"<pre><code>value = value\n</code></pre> <p>The value of the Select when it changed.</p>"},{"location":"widgets/select/#textual.widgets.Select.action_show_overlay","title":"action_show_overlay","text":"<pre><code>action_show_overlay()\n</code></pre> <p>Show the overlay.</p>"},{"location":"widgets/select/#textual.widgets.Select.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear the selection if <code>allow_blank</code> is <code>True</code>.</p> <p>Raises:</p> Type Description <code>InvalidSelectValueError</code> <p>If <code>allow_blank</code> is set to <code>False</code>.</p>"},{"location":"widgets/select/#textual.widgets.Select.from_values","title":"from_values  <code>classmethod</code>","text":"<pre><code>from_values(\n    values,\n    *,\n    prompt=\"Select\",\n    allow_blank=True,\n    value=BLANK,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False\n)\n</code></pre> <p>Initialize the Select control with values specified by an arbitrary iterable</p> <p>The options shown in the control are computed by calling the built-in <code>str</code> on each value.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[SelectType]</code> <p>Values used to generate options to select from.</p> required <code>str</code> <p>Text to show in the control when no option is selected.</p> <code>'Select'</code> <code>bool</code> <p>Enables or disables the ability to have the widget in a state with no selection made, in which case its value is set to the constant <code>Select.BLANK</code>.</p> <code>True</code> <code>SelectType | NoSelection</code> <p>Initial value selected. Should be one of the values in <code>values</code>. If no initial value is set and <code>allow_blank</code> is <code>False</code>, the widget will auto-select the first available value.</p> <code>BLANK</code> <code>str | None</code> <p>The name of the select control.</p> <code>None</code> <code>str | None</code> <p>The ID of the control in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the control.</p> <code>None</code> <code>bool</code> <p>Whether the control is disabled or not.</p> <code>False</code> <p>Returns:</p> Type Description <code>Select[SelectType]</code> <p>A new Select widget with the provided values as options.</p>"},{"location":"widgets/select/#textual.widgets.Select.from_values(values)","title":"<code>values</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(allow_blank)","title":"<code>allow_blank</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(value)","title":"<code>value</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(name)","title":"<code>name</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(id)","title":"<code>id</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.from_values(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/select/#textual.widgets.Select.is_blank","title":"is_blank","text":"<pre><code>is_blank()\n</code></pre> <p>Indicates whether this <code>Select</code> is blank or not.</p> <p>Returns:</p> Type Description <code>bool</code> <p>True if the selection is blank, False otherwise.</p>"},{"location":"widgets/select/#textual.widgets.Select.set_options","title":"set_options","text":"<pre><code>set_options(options)\n</code></pre> <p>Set the options for the Select.</p> <p>This will reset the selection. The selection will be empty, if allowed, otherwise the first valid option is picked.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[tuple[RenderableType, SelectType]]</code> <p>An iterable of tuples containing the renderable to display for each option and the corresponding internal value.</p> required <p>Raises:</p> Type Description <code>EmptySelectError</code> <p>If the options iterable is empty and <code>allow_blank</code> is <code>False</code>.</p>"},{"location":"widgets/select/#textual.widgets.Select.set_options(options)","title":"<code>options</code>","text":""},{"location":"widgets/select/#textual.widgets.select.EmptySelectError","title":"EmptySelectError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when a <code>Select</code> has no options and <code>allow_blank=False</code>.</p>"},{"location":"widgets/select/#textual.widgets.select.InvalidSelectValueError","title":"InvalidSelectValueError","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when setting a <code>Select</code> to an unknown option.</p>"},{"location":"widgets/selection_list/","title":"SelectionList","text":"<p>Added in version 0.27.0</p> <p>A widget for showing a vertical list of selectable options.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/selection_list/#typing","title":"Typing","text":"<p>The <code>SelectionList</code> control is a <code>Generic</code>, which allows you to set the type of the selection values. For instance, if the data type for your values is an integer, you would type the widget as follows:</p> <pre><code>selections = [(\"First\", 1), (\"Second\", 2)]\nmy_selection_list: SelectionList[int] =  SelectionList(*selections)\n</code></pre> <p>Note</p> <p>Typing is entirely optional.</p> <p>If you aren't familiar with typing or don't want to worry about it right now, feel free to ignore it.</p>"},{"location":"widgets/selection_list/#examples","title":"Examples","text":"<p>A selection list is designed to be built up of single-line prompts (which can be Rich <code>Text</code>) and an associated unique value.</p>"},{"location":"widgets/selection_list/#selections-as-tuples","title":"Selections as tuples","text":"<p>A selection list can be built with tuples, either of two or three values in length. Each tuple must contain a prompt and a value, and it can also optionally contain a flag for the initial selected state of the option.</p> Outputselection_list_tuples.pyselection_list.tcss <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, SelectionList\n\n\nclass SelectionListApp(App[None]):\n    CSS_PATH = \"selection_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield SelectionList[int](  # (1)!\n            (\"Falken's Maze\", 0, True),\n            (\"Black Jack\", 1),\n            (\"Gin Rummy\", 2),\n            (\"Hearts\", 3),\n            (\"Bridge\", 4),\n            (\"Checkers\", 5),\n            (\"Chess\", 6, True),\n            (\"Poker\", 7),\n            (\"Fighter Combat\", 8, True),\n        )\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        self.query_one(SelectionList).border_title = \"Shall we play some games?\"\n\n\nif __name__ == \"__main__\":\n    SelectionListApp().run()\n</code></pre> <ol> <li>Note that the <code>SelectionList</code> is typed as <code>int</code>, for the type of the values.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nSelectionList {\n    padding: 1;\n    border: solid $accent;\n    width: 80%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/selection_list/#selections-as-selection-objects","title":"Selections as Selection objects","text":"<p>Alternatively, selections can be passed in as <code>Selection</code>s:</p> Outputselection_list_selections.pyselection_list.tcss <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Header, SelectionList\nfrom textual.widgets.selection_list import Selection\n\n\nclass SelectionListApp(App[None]):\n    CSS_PATH = \"selection_list.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        yield SelectionList[int](  # (1)!\n            Selection(\"Falken's Maze\", 0, True),\n            Selection(\"Black Jack\", 1),\n            Selection(\"Gin Rummy\", 2),\n            Selection(\"Hearts\", 3),\n            Selection(\"Bridge\", 4),\n            Selection(\"Checkers\", 5),\n            Selection(\"Chess\", 6, True),\n            Selection(\"Poker\", 7),\n            Selection(\"Fighter Combat\", 8, True),\n        )\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        self.query_one(SelectionList).border_title = \"Shall we play some games?\"\n\n\nif __name__ == \"__main__\":\n    SelectionListApp().run()\n</code></pre> <ol> <li>Note that the <code>SelectionList</code> is typed as <code>int</code>, for the type of the values.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nSelectionList {\n    padding: 1;\n    border: solid $accent;\n    width: 80%;\n    height: 80%;\n}\n</code></pre>"},{"location":"widgets/selection_list/#handling-changes-to-the-selections","title":"Handling changes to the selections","text":"<p>Most of the time, when using the <code>SelectionList</code>, you will want to know when the collection of selected items has changed; this is ideally done using the <code>SelectedChanged</code> message. Here is an example of using that message to update a <code>Pretty</code> with the collection of selected values:</p> Outputselection_list_selections.pyselection_list.tcss <p> SelectionListApp \u2b58SelectionListApp \u250c\u2500\u00a0Shall\u00a0we\u00a0play\u00a0some\u00a0games?\u00a0\u2500\u2500\u2510\u250c\u2500\u00a0Selected\u00a0games\u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502\u2502[\u2502 \u2502\u2590X\u258c\u00a0Falken's\u00a0Maze\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502'secret_back_door',\u2502 \u2502\u2590X\u258c\u00a0Black\u00a0Jack\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502'a_nice_game_of_chess',\u2502 \u2502\u2590X\u258c\u00a0Gin\u00a0Rummy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502'fighter_combat'\u2502 \u2502\u2590X\u258c\u00a0Hearts\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2502]\u2502 \u2502\u2590X\u258c\u00a0Bridge\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2590X\u258c\u00a0Checkers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Chess\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Poker\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2590X\u258c\u00a0Fighter\u00a0Combat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u2502\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u258f^p\u00a0palette </p> <pre><code>from textual import on\nfrom textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.events import Mount\nfrom textual.widgets import Footer, Header, Pretty, SelectionList\nfrom textual.widgets.selection_list import Selection\n\n\nclass SelectionListApp(App[None]):\n    CSS_PATH = \"selection_list_selected.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Header()\n        with Horizontal():\n            yield SelectionList[str](  # (1)!\n                Selection(\"Falken's Maze\", \"secret_back_door\", True),\n                Selection(\"Black Jack\", \"black_jack\"),\n                Selection(\"Gin Rummy\", \"gin_rummy\"),\n                Selection(\"Hearts\", \"hearts\"),\n                Selection(\"Bridge\", \"bridge\"),\n                Selection(\"Checkers\", \"checkers\"),\n                Selection(\"Chess\", \"a_nice_game_of_chess\", True),\n                Selection(\"Poker\", \"poker\"),\n                Selection(\"Fighter Combat\", \"fighter_combat\", True),\n            )\n            yield Pretty([])\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        self.query_one(SelectionList).border_title = \"Shall we play some games?\"\n        self.query_one(Pretty).border_title = \"Selected games\"\n\n    @on(Mount)\n    @on(SelectionList.SelectedChanged)\n    def update_selected_view(self) -&gt; None:\n        self.query_one(Pretty).update(self.query_one(SelectionList).selected)\n\n\nif __name__ == \"__main__\":\n    SelectionListApp().run()\n</code></pre> <ol> <li>Note that the <code>SelectionList</code> is typed as <code>str</code>, for the type of the values.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nHorizontal {\n    width: 80%;\n    height: 80%;\n}\n\nSelectionList {\n    padding: 1;\n    border: solid $accent;\n    width: 1fr;\n}\n\nPretty {\n    width: 1fr;\n    border: solid $accent;\n}\n</code></pre>"},{"location":"widgets/selection_list/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>highlighted</code> <code>int</code> | <code>None</code> <code>None</code> The index of the highlighted selection. <code>None</code> means nothing is highlighted."},{"location":"widgets/selection_list/#messages","title":"Messages","text":"<ul> <li>SelectionList.SelectionHighlighted</li> <li>SelectionList.SelectionToggled</li> <li>SelectionList.SelectedChanged</li> </ul>"},{"location":"widgets/selection_list/#bindings","title":"Bindings","text":"<p>The selection list widget defines the following bindings:</p> Key(s) Description space Toggle the state of the highlighted selection. <p>It inherits from <code>OptionList</code> and so also inherits the following bindings:</p> Key(s) Description down Move the highlight down. end Move the highlight to the last option. enter Select the current option. home Move the highlight to the first option. pagedown Move the highlight down a page of options. pageup Move the highlight up a page of options. up Move the highlight up."},{"location":"widgets/selection_list/#component-classes","title":"Component Classes","text":"<p>The selection list provides the following component classes:</p> Class Description <code>selection-list--button</code> Target the default button style. <code>selection-list--button-selected</code> Target a selected button style. <code>selection-list--button-highlighted</code> Target a highlighted button style. <code>selection-list--button-selected-highlighted</code> Target a highlighted selected button style. <p>It inherits from <code>OptionList</code> and so also makes use of the following component classes:</p> Class Description <code>option-list--option-disabled</code> Target disabled options. <code>option-list--option-highlighted</code> Target the highlighted option. <code>option-list--option-hover</code> Target an option that has the mouse over it. <code>option-list--option-hover-highlighted</code> Target a highlighted option that has the mouse over it. <code>option-list--separator</code> Target the separators. <p>               Bases: <code>Generic[SelectionType]</code>, <code>OptionList</code></p> <p>A vertical selection list that allows making multiple selections.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | tuple[TextType, SelectionType] | tuple[TextType, SelectionType, bool]</code> <p>The content for the selection list.</p> <code>()</code> <code>str | None</code> <p>The name of the selection list.</p> <code>None</code> <code>str | None</code> <p>The ID of the selection list in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the selection list.</p> <code>None</code> <code>bool</code> <p>Whether the selection list is disabled or not.</p> <code>False</code>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList(*selections)","title":"<code>*selections</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(name)","title":"<code>name</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(id)","title":"<code>id</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.BINDINGS","title":"BINDINGS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDINGS = [Binding('space', 'select')]\n</code></pre> Key(s) Description space Toggle the state of the highlighted selection."},{"location":"widgets/selection_list/#textual.widgets.SelectionList.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"selection-list--button\",\n    \"selection-list--button-selected\",\n    \"selection-list--button-highlighted\",\n    \"selection-list--button-selected-highlighted\",\n}\n</code></pre> Class Description <code>selection-list--button</code> Target the default button style. <code>selection-list--button-selected</code> Target a selected button style. <code>selection-list--button-highlighted</code> Target a highlighted button style. <code>selection-list--button-selected-highlighted</code> Target a highlighted selected button style."},{"location":"widgets/selection_list/#textual.widgets.SelectionList.selected","title":"selected  <code>property</code>","text":"<pre><code>selected\n</code></pre> <p>The selected values.</p> <p>This is a list of all of the values associated with selections in the list that are currently in the selected state.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectedChanged","title":"SelectedChanged  <code>dataclass</code>","text":"<pre><code>SelectedChanged(selection_list)\n</code></pre> <p>               Bases: <code>Generic[MessageSelectionType]</code>, <code>Message</code></p> <p>Message sent when the collection of selected values changes.</p> <p>This is sent regardless of whether the change occurred via user interaction or programmatically the the <code>SelectionList</code> API.</p> <p>When a bulk change occurs, such as through <code>select_all</code> or <code>deselect_all</code>, only a single <code>SelectedChanged</code> message will be sent (rather than one per option).</p> <p>Can be handled using <code>on_selection_list_selected_changed</code> in a subclass of <code>SelectionList</code> or in a parent node in the DOM.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectedChanged.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>An alias for <code>selection_list</code>.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectedChanged.selection_list","title":"selection_list  <code>instance-attribute</code>","text":"<pre><code>selection_list\n</code></pre> <p>The <code>SelectionList</code> that sent the message.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionHighlighted","title":"SelectionHighlighted","text":"<pre><code>SelectionHighlighted(selection_list, index)\n</code></pre> <p>               Bases: <code>SelectionMessage[MessageSelectionType]</code></p> <p>Message sent when a selection is highlighted.</p> <p>Can be handled using <code>on_selection_list_selection_highlighted</code> in a subclass of <code>SelectionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>SelectionList[MessageSelectionType]</code> <p>The selection list that owns the selection.</p> required <code>int</code> <p>The index of the selection that the message relates to.</p> required"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionHighlighted(selection_list)","title":"<code>selection_list</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionHighlighted(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage","title":"SelectionMessage","text":"<pre><code>SelectionMessage(selection_list, index)\n</code></pre> <p>               Bases: <code>Generic[MessageSelectionType]</code>, <code>Message</code></p> <p>Base class for all selection messages.</p> <p>Parameters:</p> Name Type Description Default <code>SelectionList[MessageSelectionType]</code> <p>The selection list that owns the selection.</p> required <code>int</code> <p>The index of the selection that the message relates to.</p> required"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage(selection_list)","title":"<code>selection_list</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The selection list that sent the message.</p> <p>This is an alias for <code>SelectionMessage.selection_list</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.selection","title":"selection  <code>instance-attribute</code>","text":"<pre><code>selection = get_option_at_index(index)\n</code></pre> <p>The highlighted selection.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.selection_index","title":"selection_index  <code>instance-attribute</code>","text":"<pre><code>selection_index = index\n</code></pre> <p>The index of the selection that the message relates to.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionMessage.selection_list","title":"selection_list  <code>instance-attribute</code>","text":"<pre><code>selection_list = selection_list\n</code></pre> <p>The selection list that sent the message.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionToggled","title":"SelectionToggled","text":"<pre><code>SelectionToggled(selection_list, index)\n</code></pre> <p>               Bases: <code>SelectionMessage[MessageSelectionType]</code></p> <p>Message sent when a selection is toggled.</p> <p>This is only sent when the value is explicitly toggled e.g. via <code>toggle</code> or <code>toggle_all</code>, or via user interaction. If you programmatically set a value to be selected, this message will not be sent, even if it happens to be the opposite of what was originally selected (i.e. setting a True to a False or vice-versa).</p> <p>Since this message indicates a toggle occurring at a per-option level, a message will be sent for each option that is toggled, even when a bulk action is performed (e.g. via <code>toggle_all</code>).</p> <p>Can be handled using <code>on_selection_list_selection_toggled</code> in a subclass of <code>SelectionList</code> or in a parent node in the DOM.</p> <p>Parameters:</p> Name Type Description Default <code>SelectionList[MessageSelectionType]</code> <p>The selection list that owns the selection.</p> required <code>int</code> <p>The index of the selection that the message relates to.</p> required"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionToggled(selection_list)","title":"<code>selection_list</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.SelectionToggled(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_option","title":"add_option","text":"<pre><code>add_option(item=None)\n</code></pre> <p>Add a new selection option to the end of the list.</p> <p>Parameters:</p> Name Type Description Default <code>NewOptionListContent | Selection | tuple[TextType, SelectionType] | tuple[TextType, SelectionType, bool]</code> <p>The new item to add.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p> <code>SelectionError</code> <p>If the selection option is of the wrong form.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_option(item)","title":"<code>item</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_options","title":"add_options","text":"<pre><code>add_options(items)\n</code></pre> <p>Add new selection options to the end of the list.</p> <p>Parameters:</p> Name Type Description Default <code>Iterable[NewOptionListContent | Selection[SelectionType] | tuple[TextType, SelectionType] | tuple[TextType, SelectionType, bool]]</code> <p>The new items to add.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p> <p>Raises:</p> Type Description <code>DuplicateID</code> <p>If there is an attempt to use a duplicate ID.</p> <code>SelectionError</code> <p>If one of the selection options is of the wrong form.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.add_options(items)","title":"<code>items</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.clear_options","title":"clear_options","text":"<pre><code>clear_options()\n</code></pre> <p>Clear the content of the selection list.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.deselect","title":"deselect","text":"<pre><code>deselect(selection)\n</code></pre> <p>Mark the given selection as not selected.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | SelectionType</code> <p>The selection to mark as not selected.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.deselect(selection)","title":"<code>selection</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.deselect_all","title":"deselect_all","text":"<pre><code>deselect_all()\n</code></pre> <p>Deselect all items.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option","title":"get_option","text":"<pre><code>get_option(option_id)\n</code></pre> <p>Get the selection option with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the selection option to get.</p> required <p>Returns:</p> Type Description <code>Selection[SelectionType]</code> <p>The selection option with the ID.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If no selection option has the given ID.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option(option_id)","title":"<code>option_id</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option_at_index","title":"get_option_at_index","text":"<pre><code>get_option_at_index(index)\n</code></pre> <p>Get the selection option at the given index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the selection option to get.</p> required <p>Returns:</p> Type Description <code>Selection[SelectionType]</code> <p>The selection option at that index.</p> <p>Raises:</p> Type Description <code>OptionDoesNotExist</code> <p>If there is no selection option with the index.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.get_option_at_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.select","title":"select","text":"<pre><code>select(selection)\n</code></pre> <p>Mark the given selection as selected.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | SelectionType</code> <p>The selection to mark as selected.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.select(selection)","title":"<code>selection</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.select_all","title":"select_all","text":"<pre><code>select_all()\n</code></pre> <p>Select all items.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.toggle","title":"toggle","text":"<pre><code>toggle(selection)\n</code></pre> <p>Toggle the selected state of the given selection.</p> <p>Parameters:</p> Name Type Description Default <code>Selection[SelectionType] | SelectionType</code> <p>The selection to toggle.</p> required <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.SelectionList.toggle(selection)","title":"<code>selection</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.SelectionList.toggle_all","title":"toggle_all","text":"<pre><code>toggle_all()\n</code></pre> <p>Toggle all items.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>SelectionList</code> instance.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.MessageSelectionType","title":"MessageSelectionType  <code>module-attribute</code>","text":"<pre><code>MessageSelectionType = TypeVar('MessageSelectionType')\n</code></pre> <p>The type for the value of a <code>Selection</code> in a <code>SelectionList</code> message.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.SelectionType","title":"SelectionType  <code>module-attribute</code>","text":"<pre><code>SelectionType = TypeVar('SelectionType')\n</code></pre> <p>The type for the value of a <code>Selection</code> in a <code>SelectionList</code></p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection","title":"Selection","text":"<pre><code>Selection(\n    prompt,\n    value,\n    initial_state=False,\n    id=None,\n    disabled=False,\n)\n</code></pre> <p>               Bases: <code>Generic[SelectionType]</code>, <code>Option</code></p> <p>A selection for a <code>SelectionList</code>.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The prompt for the selection.</p> required <code>SelectionType</code> <p>The value for the selection.</p> required <code>bool</code> <p>The initial selected state of the selection.</p> <code>False</code> <code>str | None</code> <p>The optional ID for the selection.</p> <code>None</code> <code>bool</code> <p>The initial enabled/disabled state. Enabled by default.</p> <code>False</code>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(prompt)","title":"<code>prompt</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(value)","title":"<code>value</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(initial_state)","title":"<code>initial_state</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(id)","title":"<code>id</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection.initial_state","title":"initial_state  <code>property</code>","text":"<pre><code>initial_state\n</code></pre> <p>The initial selected state for the selection.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.Selection.value","title":"value  <code>property</code>","text":"<pre><code>value\n</code></pre> <p>The value for this selection.</p>"},{"location":"widgets/selection_list/#textual.widgets.selection_list.SelectionError","title":"SelectionError","text":"<p>               Bases: <code>TypeError</code></p> <p>Type of an error raised if a selection is badly-formed.</p>"},{"location":"widgets/sparkline/","title":"Sparkline","text":"<p>Added in version 0.27.0</p> <p>A widget that is used to visually represent numerical data.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/sparkline/#examples","title":"Examples","text":""},{"location":"widgets/sparkline/#basic-example","title":"Basic example","text":"<p>The example below illustrates the relationship between the data, its length, the width of the sparkline, and the number of bars displayed.</p> <p>Tip</p> <p>The sparkline data is split into equally-sized chunks. Each chunk is represented by a bar and the width of the sparkline dictates how many bars there are.</p> Outputsparkline_basic.pysparkline_basic.tcss <p> SparklineBasicApp \u2582\u2584\u2588 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Sparkline\n\ndata = [1, 2, 2, 1, 1, 4, 3, 1, 1, 8, 8, 2]  # (1)!\n\n\nclass SparklineBasicApp(App[None]):\n    CSS_PATH = \"sparkline_basic.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Sparkline(  # (2)!\n            data,  # (3)!\n            summary_function=max,  # (4)!\n        )\n\n\napp = SparklineBasicApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li>We have 12 data points.</li> <li>This sparkline will have its width set to 3 via CSS.</li> <li>The data (12 numbers) will be split across 3 bars, so 4 data points are associated with each bar.</li> <li>Each bar will represent its largest value. The largest value of each chunk is 2, 4, and 8, respectively. That explains why the first bar is half the height of the second and the second bar is half the height of the third.</li> </ol> <pre><code>Screen {\n    align: center middle;\n}\n\nSparkline {\n    width: 3;  /* (1)! */\n    margin: 2;\n}\n</code></pre> <ol> <li>By setting the width to 3 we get three buckets.</li> </ol>"},{"location":"widgets/sparkline/#different-summary-functions","title":"Different summary functions","text":"<p>The example below shows a sparkline widget with different summary functions. The summary function is what determines the height of each bar.</p> Outputsparkline.pysparkline.tcss <p> SparklineSummaryFunctionApp \u2582\u2584\u2582\u2584\u2583\u2583\u2586\u2585\u2583\u2582\u2583\u2582\u2583\u2582\u2584\u2587\u2583\u2583\u2587\u2585\u2584\u2583\u2584\u2584\u2583\u2582\u2583\u2582\u2583\u2584\u2584\u2588\u2586\u2582\u2583\u2583\u2585\u2583\u2583\u2584\u2583\u2587\u2583\u2583\u2583\u2584\u2584\u2586\u2583\u2583\u2585\u2582\u2585\u2583\u2584\u2583\u2583\u2584\u2583\u2585\u2586\u2582\u2582\u2583\u2586\u2582\u2583\u2584\u2585\u2584\u2583\u2584\u2584\u2581\u2583\u2582 \u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2582\u2582\u2582\u2582\u2582\u2582\u2581\u2581\u2581\u2581\u2581\u2582\u2581\u2582\u2582\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2581\u2581\u2582\u2582\u2581\u2581\u2581\u2581\u2582\u2581\u2581\u2582\u2581\u2582\u2581\u2581\u2582\u2581\u2581\u2581\u2581\u2581\u2581\u2582\u2582\u2582\u2581\u2582\u2581\u2581\u2581\u2581 \u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581 </p> <pre><code>import random\nfrom statistics import mean\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Sparkline\n\nrandom.seed(73)\ndata = [random.expovariate(1 / 3) for _ in range(1000)]\n\n\nclass SparklineSummaryFunctionApp(App[None]):\n    CSS_PATH = \"sparkline.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        yield Sparkline(data, summary_function=max)  # (1)!\n        yield Sparkline(data, summary_function=mean)  # (2)!\n        yield Sparkline(data, summary_function=min)  # (3)!\n\n\napp = SparklineSummaryFunctionApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li>Each bar will show the largest value of that bucket.</li> <li>Each bar will show the mean value of that bucket.</li> <li>Each bar will show the smaller value of that bucket.</li> </ol> <pre><code>Sparkline {\n    width: 100%;\n    margin: 2;\n}\n</code></pre>"},{"location":"widgets/sparkline/#changing-the-colors","title":"Changing the colors","text":"<p>The example below shows how to use component classes to change the colors of the sparkline.</p> Outputsparkline_colors.pysparkline_colors.tcss <p> SparklineColorsApp \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 \u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2583\u2583\u2584\u2585\u2586\u2586\u2586\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2584\u2584\u2583\u2582\u2581\u2581\u2582\u2582\u2583\u2584\u2585\u2585\u2586\u2586\u2587\u2587\u2587\u2587\u2588\u2587\u2587\u2587\u2587\u2586\u2586\u2585\u2585\u2584\u2583\u2582 </p> <pre><code>from math import sin\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import Sparkline\n\n\nclass SparklineColorsApp(App[None]):\n    CSS_PATH = \"sparkline_colors.tcss\"\n\n    def compose(self) -&gt; ComposeResult:\n        nums = [abs(sin(x / 3.14)) for x in range(0, 360 * 6, 20)]\n        yield Sparkline(nums, summary_function=max, id=\"fst\")\n        yield Sparkline(nums, summary_function=max, id=\"snd\")\n        yield Sparkline(nums, summary_function=max, id=\"trd\")\n        yield Sparkline(nums, summary_function=max, id=\"frt\")\n        yield Sparkline(nums, summary_function=max, id=\"fft\")\n        yield Sparkline(nums, summary_function=max, id=\"sxt\")\n        yield Sparkline(nums, summary_function=max, id=\"svt\")\n        yield Sparkline(nums, summary_function=max, id=\"egt\")\n        yield Sparkline(nums, summary_function=max, id=\"nnt\")\n        yield Sparkline(nums, summary_function=max, id=\"tnt\")\n\n\napp = SparklineColorsApp()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>Sparkline {\n    width: 100%;\n    margin: 1;\n}\n\n#fst &gt; .sparkline--max-color {\n    color: $success;\n}\n#fst &gt; .sparkline--min-color {\n    color: $warning;\n}\n\n#snd &gt; .sparkline--max-color {\n    color: $warning;\n}\n#snd &gt; .sparkline--min-color {\n    color: $success;\n}\n\n#trd &gt; .sparkline--max-color {\n    color: $error;\n}\n#trd &gt; .sparkline--min-color {\n    color: $warning;\n}\n\n#frt &gt; .sparkline--max-color {\n    color: $warning;\n}\n#frt &gt; .sparkline--min-color {\n    color: $error;\n}\n\n#fft &gt; .sparkline--max-color {\n    color: $accent;\n}\n#fft &gt; .sparkline--min-color {\n    color: $accent 30%;\n}\n\n#sxt &gt; .sparkline--max-color {\n    color: $accent 30%;\n}\n#sxt &gt; .sparkline--min-color {\n    color: $accent;\n}\n\n#svt &gt; .sparkline--max-color {\n    color: $error;\n}\n#svt &gt; .sparkline--min-color {\n    color: $error 30%;\n}\n\n#egt &gt; .sparkline--max-color {\n    color: $error 30%;\n}\n#egt &gt; .sparkline--min-color {\n    color: $error;\n}\n\n#nnt &gt; .sparkline--max-color {\n    color: $success;\n}\n#nnt &gt; .sparkline--min-color {\n    color: $success 30%;\n}\n\n#tnt &gt; .sparkline--max-color {\n    color: $success 30%;\n}\n#tnt &gt; .sparkline--min-color {\n    color: $success;\n}\n</code></pre>"},{"location":"widgets/sparkline/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>data</code> <code>Sequence[float] | None</code> <code>None</code> The data represented by the sparkline. <code>summary_function</code> <code>Callable[[Sequence[float]], float]</code> <code>max</code> The function that computes the height of each bar."},{"location":"widgets/sparkline/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/sparkline/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/sparkline/#component-classes","title":"Component Classes","text":"<p>The sparkline widget provides the following component classes:</p> <p>Use these component classes to define the two colors that the sparkline interpolates to represent its numerical data.</p> Note <p>These two component classes are used exclusively for the color of the sparkline widget. Setting any style other than <code>color</code> will have no effect.</p> Class Description <code>sparkline--max-color</code> The color used for the larger values in the data. <code>sparkline--min-color</code> The color used for the smaller values in the data. <p>               Bases: <code>Widget</code></p> <p>A sparkline widget to display numerical data.</p> <p>Parameters:</p> Name Type Description Default <code>Sequence[float] | None</code> <p>The initial data to populate the sparkline with.</p> <code>None</code> <code>Callable[[Sequence[float]], float] | None</code> <p>Summarizes bar values into a single value used to represent each bar.</p> <code>None</code> <code>str | None</code> <p>The name of the widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the widget is disabled or not.</p> <code>False</code>"},{"location":"widgets/sparkline/#textual.widgets.Sparkline(data)","title":"<code>data</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(summary_function)","title":"<code>summary_function</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(name)","title":"<code>name</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(id)","title":"<code>id</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/sparkline/#textual.widgets.Sparkline.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"sparkline--max-color\",\n    \"sparkline--min-color\",\n}\n</code></pre> <p>Use these component classes to define the two colors that the sparkline interpolates to represent its numerical data.</p> Note <p>These two component classes are used exclusively for the color of the sparkline widget. Setting any style other than <code>color</code> will have no effect.</p> Class Description <code>sparkline--max-color</code> The color used for the larger values in the data. <code>sparkline--min-color</code> The color used for the smaller values in the data."},{"location":"widgets/sparkline/#textual.widgets.Sparkline.data","title":"data  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>data = data\n</code></pre> <p>The data that populates the sparkline.</p>"},{"location":"widgets/sparkline/#textual.widgets.Sparkline.summary_function","title":"summary_function  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>summary_function = reactive[\n    Callable[[Sequence[float]], float]\n](_max_factory)\n</code></pre> <p>The function that computes the value that represents each bar.</p>"},{"location":"widgets/static/","title":"Static","text":"<p>A widget which displays static content. Can be used for Rich renderables and can also be the base for other types of widgets.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/static/#example","title":"Example","text":"<p>The example below shows how you can use a <code>Static</code> widget as a simple text label (but see Label as a way of displaying text).</p> Outputstatic.py <p> StaticApp Hello,\u00a0world! </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Static\n\n\nclass StaticApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"Hello, world!\")\n\n\nif __name__ == \"__main__\":\n    app = StaticApp()\n    app.run()\n</code></pre>"},{"location":"widgets/static/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/static/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/static/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/static/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/static/#see-also","title":"See Also","text":"<ul> <li>Label</li> <li>Pretty</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A widget to display simple static content, or use as a base class for more complex widgets.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>A Rich renderable, or string containing console markup.</p> <code>''</code> <code>bool</code> <p>Expand content if required to fill container.</p> <code>False</code> <code>bool</code> <p>Shrink content if required to fill container.</p> <code>False</code> <code>bool</code> <p>True if markup should be parsed and rendered.</p> <code>True</code> <code>str | None</code> <p>Name of widget.</p> <code>None</code> <code>str | None</code> <p>ID of Widget.</p> <code>None</code> <code>str | None</code> <p>Space separated list of class names.</p> <code>None</code> <code>bool</code> <p>Whether the static is disabled or not.</p> <code>False</code>"},{"location":"widgets/static/#textual.widgets.Static(renderable)","title":"<code>renderable</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(expand)","title":"<code>expand</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(shrink)","title":"<code>shrink</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(markup)","title":"<code>markup</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(name)","title":"<code>name</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(id)","title":"<code>id</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/static/#textual.widgets.Static(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/static/#textual.widgets.Static.update","title":"update","text":"<pre><code>update(renderable='')\n</code></pre> <p>Update the widget's content area with new text or Rich renderable.</p> <p>Parameters:</p> Name Type Description Default <code>RenderableType</code> <p>A new rich renderable. Defaults to empty renderable;</p> <code>''</code>"},{"location":"widgets/static/#textual.widgets.Static.update(renderable)","title":"<code>renderable</code>","text":""},{"location":"widgets/switch/","title":"Switch","text":"<p>A simple switch widget which stores a boolean value.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/switch/#example","title":"Example","text":"<p>The example below shows switches in various states.</p> Outputswitch.pyswitch.tcss <p> SwitchApp Example\u00a0switches \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0off:\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0on:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0focused:\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0custom:\u00a0\u00a0\u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.containers import Horizontal\nfrom textual.widgets import Static, Switch\n\n\nclass SwitchApp(App):\n    def compose(self) -&gt; ComposeResult:\n        yield Static(\"[b]Example switches\\n\", classes=\"label\")\n        yield Horizontal(\n            Static(\"off:     \", classes=\"label\"),\n            Switch(animate=False),\n            classes=\"container\",\n        )\n        yield Horizontal(\n            Static(\"on:      \", classes=\"label\"),\n            Switch(value=True),\n            classes=\"container\",\n        )\n\n        focused_switch = Switch()\n        focused_switch.focus()\n        yield Horizontal(\n            Static(\"focused: \", classes=\"label\"), focused_switch, classes=\"container\"\n        )\n\n        yield Horizontal(\n            Static(\"custom:  \", classes=\"label\"),\n            Switch(id=\"custom-design\"),\n            classes=\"container\",\n        )\n\n\napp = SwitchApp(css_path=\"switch.tcss\")\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <pre><code>Screen {\n    align: center middle;\n}\n\n.container {\n    height: auto;\n    width: auto;\n}\n\nSwitch {\n    height: auto;\n    width: auto;\n}\n\n.label {\n    height: 3;\n    content-align: center middle;\n    width: auto;\n}\n\n#custom-design {\n    background: darkslategrey;\n}\n\n#custom-design &gt; .switch--slider {\n    color: dodgerblue;\n    background: darkslateblue;\n}\n</code></pre>"},{"location":"widgets/switch/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>value</code> <code>bool</code> <code>False</code> The value of the switch."},{"location":"widgets/switch/#messages","title":"Messages","text":"<ul> <li>Switch.Changed</li> </ul>"},{"location":"widgets/switch/#bindings","title":"Bindings","text":"<p>The switch widget defines the following bindings:</p> Key(s) Description enter,space Toggle the switch state."},{"location":"widgets/switch/#component-classes","title":"Component Classes","text":"<p>The switch widget provides the following component classes:</p> Class Description <code>switch--slider</code> Targets the slider of the switch."},{"location":"widgets/switch/#additional-notes","title":"Additional Notes","text":"<ul> <li>To remove the spacing around a <code>Switch</code>, set <code>border: none;</code> and <code>padding: 0;</code>.</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A switch widget that represents a boolean value.</p> <p>Can be toggled by clicking on it or through its bindings.</p> <p>The switch widget also contains component classes that enable more customization.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>The initial value of the switch.</p> <code>False</code> <code>bool</code> <p>True if the switch should animate when toggled.</p> <code>True</code> <code>str | None</code> <p>The name of the switch.</p> <code>None</code> <code>str | None</code> <p>The ID of the switch in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the switch.</p> <code>None</code> <code>bool</code> <p>Whether the switch is disabled or not.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/switch/#textual.widgets.Switch(value)","title":"<code>value</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(name)","title":"<code>name</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(id)","title":"<code>id</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/switch/#textual.widgets.Switch.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"enter,space\", \"toggle_switch\", \"Toggle\", show=False\n    )\n]\n</code></pre> Key(s) Description enter,space Toggle the switch state."},{"location":"widgets/switch/#textual.widgets.Switch.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'switch--slider'}\n</code></pre> Class Description <code>switch--slider</code> Targets the slider of the switch."},{"location":"widgets/switch/#textual.widgets.Switch.value","title":"value  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>value = reactive(False, init=False)\n</code></pre> <p>The value of the switch; <code>True</code> for on and <code>False</code> for off.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.Changed","title":"Changed","text":"<pre><code>Changed(switch, value)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the status of the switch changes.</p> <p>Can be handled using <code>on_switch_changed</code> in a subclass of <code>Switch</code> or in a parent widget in the DOM.</p> <p>Attributes:</p> Name Type Description <code>value</code> <code>bool</code> <p>The value that the switch was changed to.</p> <code>switch</code> <code>Switch</code> <p>The <code>Switch</code> widget that was changed.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>Alias for self.switch.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.action_toggle_switch","title":"action_toggle_switch","text":"<pre><code>action_toggle_switch()\n</code></pre> <p>Toggle the state of the switch.</p>"},{"location":"widgets/switch/#textual.widgets.Switch.toggle","title":"toggle","text":"<pre><code>toggle()\n</code></pre> <p>Toggle the switch value.</p> <p>As a result of the value changing, a <code>Switch.Changed</code> message will be posted.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Switch</code> instance.</p>"},{"location":"widgets/tabbed_content/","title":"TabbedContent","text":"<p>Added in version 0.16.0</p> <p>Switch between mutually exclusive content panes via a row of tabs.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>This widget combines the Tabs and ContentSwitcher widgets to create a convenient way of navigating content.</p> <p>Only a single child of TabbedContent is visible at once. Each child has an associated tab which will make it visible and hide the others.</p>"},{"location":"widgets/tabbed_content/#composing","title":"Composing","text":"<p>There are two ways to provide the titles for the tab. You can pass them as positional arguments to the TabbedContent constructor:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent(\"Leto\", \"Jessica\", \"Paul\"):\n        yield Markdown(LETO)\n        yield Markdown(JESSICA)\n        yield Markdown(PAUL)\n</code></pre> <p>Alternatively you can wrap the content in a TabPane widget, which takes the tab title as the first parameter:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent():\n        with TabPane(\"Leto\"):\n            yield Markdown(LETO)\n        with TabPane(\"Jessica\"):\n            yield Markdown(JESSICA)\n        with TabPane(\"Paul\"):\n            yield Markdown(PAUL)\n</code></pre>"},{"location":"widgets/tabbed_content/#switching-tabs","title":"Switching tabs","text":"<p>If you need to programmatically switch tabs, you should provide an <code>id</code> attribute to the <code>TabPane</code>s.</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent():\n        with TabPane(\"Leto\", id=\"leto\"):\n            yield Markdown(LETO)\n        with TabPane(\"Jessica\", id=\"jessica\"):\n            yield Markdown(JESSICA)\n        with TabPane(\"Paul\", id=\"paul\"):\n            yield Markdown(PAUL)\n</code></pre> <p>You can then switch tabs by setting the <code>active</code> reactive attribute:</p> <pre><code># Switch to Jessica tab\nself.query_one(TabbedContent).active = \"jessica\"\n</code></pre> <p>Note</p> <p>If you don't provide <code>id</code> attributes to the tab panes, they will be assigned sequentially starting at <code>tab-1</code> (then <code>tab-2</code> etc).</p>"},{"location":"widgets/tabbed_content/#initial-tab","title":"Initial tab","text":"<p>The first child of <code>TabbedContent</code> will be the initial active tab by default. You can pick a different initial tab by setting the <code>initial</code> argument to the <code>id</code> of the tab:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    with TabbedContent(initial=\"jessica\"):\n        with TabPane(\"Leto\", id=\"leto\"):\n            yield Markdown(LETO)\n        with TabPane(\"Jessica\", id=\"jessica\"):\n            yield Markdown(JESSICA)\n        with TabPane(\"Paul\", id=\"paul\"):\n            yield Markdown(PAUL)\n</code></pre>"},{"location":"widgets/tabbed_content/#example","title":"Example","text":"<p>The following example contains a <code>TabbedContent</code> with three tabs.</p> Outputtabbed_content.py <p> TabbedApp LetoJessicaPaul \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Lady\u00a0Jessica \u00a0\u00a0Bene\u00a0Gesserit\u00a0and\u00a0concubine\u00a0of\u00a0Leto,\u00a0and\u00a0mother\u00a0of\u00a0Paul\u00a0and\u00a0Alia. PaulAlia \u2501\u2578\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 First\u00a0child\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0l\u00a0Leto\u00a0\u00a0j\u00a0Jessica\u00a0\u00a0p\u00a0Paul\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, Markdown, TabbedContent, TabPane\n\nLETO = \"\"\"\n# Duke Leto I Atreides\n\nHead of House Atreides.\n\"\"\"\n\nJESSICA = \"\"\"\n# Lady Jessica\n\nBene Gesserit and concubine of Leto, and mother of Paul and Alia.\n\"\"\"\n\nPAUL = \"\"\"\n# Paul Atreides\n\nSon of Leto and Jessica.\n\"\"\"\n\n\nclass TabbedApp(App):\n    \"\"\"An example of tabbed content.\"\"\"\n\n    BINDINGS = [\n        (\"l\", \"show_tab('leto')\", \"Leto\"),\n        (\"j\", \"show_tab('jessica')\", \"Jessica\"),\n        (\"p\", \"show_tab('paul')\", \"Paul\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        \"\"\"Compose app with tabbed content.\"\"\"\n        # Footer to show keys\n        yield Footer()\n\n        # Add the TabbedContent widget\n        with TabbedContent(initial=\"jessica\"):\n            with TabPane(\"Leto\", id=\"leto\"):  # First tab\n                yield Markdown(LETO)  # Tab content\n            with TabPane(\"Jessica\", id=\"jessica\"):\n                yield Markdown(JESSICA)\n                with TabbedContent(\"Paul\", \"Alia\"):\n                    yield TabPane(\"Paul\", Label(\"First child\"))\n                    yield TabPane(\"Alia\", Label(\"Second child\"))\n\n            with TabPane(\"Paul\", id=\"paul\"):\n                yield Markdown(PAUL)\n\n    def action_show_tab(self, tab: str) -&gt; None:\n        \"\"\"Switch to a new tab.\"\"\"\n        self.get_child_by_type(TabbedContent).active = tab\n\n\nif __name__ == \"__main__\":\n    app = TabbedApp()\n    app.run()\n</code></pre>"},{"location":"widgets/tabbed_content/#styling","title":"Styling","text":"<p>The <code>TabbedContent</code> widget is composed of two main sub-widgets: a <code>Tabs</code> and a <code>ContentSwitcher</code>; you can style them accordingly.</p> <p>The tabs within the <code>Tabs</code> widget will have prefixed IDs; each ID being the ID of the <code>TabPane</code> the <code>Tab</code> is for, prefixed with <code>--content-tab-</code>. If you wish to style individual tabs within the <code>TabbedContent</code> widget you will need to use that prefix for the <code>Tab</code> IDs.</p> <p>For example, to create a <code>TabbedContent</code> that has red and green labels:</p> Outputtabbed_content.py <p> ColorTabsApp RedGreen \u2501\u2578\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 Red!\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Label, TabbedContent, TabPane\n\n\nclass ColorTabsApp(App):\n    CSS = \"\"\"\n    TabbedContent #--content-tab-green {\n        color: green;\n    }\n\n    TabbedContent #--content-tab-red {\n        color: red;\n    }\n    \"\"\"\n\n    def compose(self) -&gt; ComposeResult:\n        with TabbedContent():\n            with TabPane(\"Red\", id=\"red\"):\n                yield Label(\"Red!\")\n            with TabPane(\"Green\", id=\"green\"):\n                yield Label(\"Green!\")\n\n\nif __name__ == \"__main__\":\n    ColorTabsApp().run()\n</code></pre>"},{"location":"widgets/tabbed_content/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>active</code> <code>str</code> <code>\"\"</code> The <code>id</code> attribute of the active tab. Set this to switch tabs."},{"location":"widgets/tabbed_content/#messages","title":"Messages","text":"<ul> <li>TabbedContent.Cleared</li> <li>TabbedContent.TabActivated</li> </ul>"},{"location":"widgets/tabbed_content/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/tabbed_content/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p>"},{"location":"widgets/tabbed_content/#see-also","title":"See also","text":"<ul> <li>Tabs</li> <li>ContentSwitcher</li> </ul> <p>               Bases: <code>Widget</code></p> <p>A container with associated tabs to toggle content visibility.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Positional argument will be used as title.</p> <code>()</code> <code>str</code> <p>The id of the initial tab, or empty string to select the first tab.</p> <code>''</code> <code>str | None</code> <p>The name of the button.</p> <code>None</code> <code>str | None</code> <p>The ID of the button in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the button.</p> <code>None</code> <code>bool</code> <p>Whether the button is disabled or not.</p> <code>False</code> <p>               Bases: <code>Widget</code></p> <p>A container for switchable content, with additional title.</p> <p>This widget is intended to be used with TabbedContent.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Title of the TabPane (will be displayed in a tab label).</p> required <code>Widget</code> <p>Widget to go inside the TabPane.</p> <code>()</code> <code>str | None</code> <p>Optional name for the TabPane.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the TabPane.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the TabPane is disabled or not.</p> <code>False</code>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(*titles)","title":"<code>*titles</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(initial)","title":"<code>initial</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(name)","title":"<code>name</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.active","title":"active  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>active = reactive('', init=False)\n</code></pre> <p>The ID of the active tab, or empty string if none are active.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.active_pane","title":"active_pane  <code>property</code>","text":"<pre><code>active_pane\n</code></pre> <p>The currently active pane, or <code>None</code> if no pane is active.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.tab_count","title":"tab_count  <code>property</code>","text":"<pre><code>tab_count\n</code></pre> <p>Total number of tabs.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared","title":"Cleared","text":"<pre><code>Cleared(tabbed_content)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when no tab pane is active.</p> <p>This can happen if all tab panes are removed or if the currently active tab pane is unset.</p> <p>Parameters:</p> Name Type Description Default <code>TabbedContent</code> <p>The TabbedContent widget.</p> required"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared(tabbed_content)","title":"<code>tabbed_content</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>TabbedContent</code> widget that was cleared of all tab panes.</p> <p>This is an alias for <code>Cleared.tabbed_content</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.Cleared.tabbed_content","title":"tabbed_content  <code>instance-attribute</code>","text":"<pre><code>tabbed_content = tabbed_content\n</code></pre> <p>The <code>TabbedContent</code> widget that contains the tab activated.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated","title":"TabActivated","text":"<pre><code>TabActivated(tabbed_content, tab)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the active tab changes.</p> <p>Parameters:</p> Name Type Description Default <code>TabbedContent</code> <p>The TabbedContent widget.</p> required <code>ContentTab</code> <p>The Tab widget that was selected (contains the tab label).</p> required"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated(tabbed_content)","title":"<code>tabbed_content</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'pane'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>TabbedContent</code> widget that contains the tab activated.</p> <p>This is an alias for <code>TabActivated.tabbed_content</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.pane","title":"pane  <code>instance-attribute</code>","text":"<pre><code>pane = get_pane(tab)\n</code></pre> <p>The <code>TabPane</code> widget that was activated by selecting the tab.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.tab","title":"tab  <code>instance-attribute</code>","text":"<pre><code>tab = tab\n</code></pre> <p>The <code>Tab</code> widget that was selected (contains the tab label).</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.TabActivated.tabbed_content","title":"tabbed_content  <code>instance-attribute</code>","text":"<pre><code>tabbed_content = tabbed_content\n</code></pre> <p>The <code>TabbedContent</code> widget that contains the tab activated.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane","title":"add_pane","text":"<pre><code>add_pane(pane, *, before=None, after=None)\n</code></pre> <p>Add a new pane to the tabbed content.</p> <p>Parameters:</p> Name Type Description Default <code>TabPane</code> <p>The pane to add.</p> required <code>TabPane | str | None</code> <p>Optional pane or pane ID to add the pane before.</p> <code>None</code> <code>TabPane | str | None</code> <p>Optional pane or pane ID to add the pane after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the pane to be added.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided an exception is raised.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane(pane)","title":"<code>pane</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane(before)","title":"<code>before</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.add_pane(after)","title":"<code>after</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.clear_panes","title":"clear_panes","text":"<pre><code>clear_panes()\n</code></pre> <p>Remove all the panes in the tabbed content.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object which waits for all panes to be removed and the Cleared message to be posted.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.disable_tab","title":"disable_tab","text":"<pre><code>disable_tab(tab_id)\n</code></pre> <p>Disables the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to disable.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.disable_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.enable_tab","title":"enable_tab","text":"<pre><code>enable_tab(tab_id)\n</code></pre> <p>Enables the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to enable.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.enable_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_pane","title":"get_pane","text":"<pre><code>get_pane(pane_id)\n</code></pre> <p>Get the <code>TabPane</code> associated with the given ID or tab.</p> <p>Parameters:</p> Name Type Description Default <code>str | ContentTab</code> <p>The ID of the pane to get, or the Tab it is associated with.</p> required <p>Returns:</p> Type Description <code>TabPane</code> <p>The <code>TabPane</code> associated with the ID or the given tab.</p> <p>Raises:</p> Type Description <code>ValueError</code> <p>Raised if no ID was available.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_pane(pane_id)","title":"<code>pane_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_tab","title":"get_tab","text":"<pre><code>get_tab(pane_id)\n</code></pre> <p>Get the <code>Tab</code> associated with the given ID or <code>TabPane</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str | TabPane</code> <p>The ID of the pane, or the pane itself.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The Tab associated with the ID.</p> <p>Raises:</p> Type Description <code>ValueError</code> <p>Raised if no ID was available.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.get_tab(pane_id)","title":"<code>pane_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.hide_tab","title":"hide_tab","text":"<pre><code>hide_tab(tab_id)\n</code></pre> <p>Hides the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to hide.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.hide_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.remove_pane","title":"remove_pane","text":"<pre><code>remove_pane(pane_id)\n</code></pre> <p>Remove a given pane from the tabbed content.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the pane to remove.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the pane to be removed and the Cleared message to be posted.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.remove_pane(pane_id)","title":"<code>pane_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.show_tab","title":"show_tab","text":"<pre><code>show_tab(tab_id)\n</code></pre> <p>Shows the tab with the given ID.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>TabPane</code> to show.</p> required <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabbedContent.show_tab(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(title)","title":"<code>title</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(*children)","title":"<code>*children</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(name)","title":"<code>name</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.Disabled","title":"Disabled  <code>dataclass</code>","text":"<pre><code>Disabled(tab_pane)\n</code></pre> <p>               Bases: <code>TabPaneMessage</code></p> <p>Sent when a tab pane is disabled via its reactive <code>disabled</code>.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.Enabled","title":"Enabled  <code>dataclass</code>","text":"<pre><code>Enabled(tab_pane)\n</code></pre> <p>               Bases: <code>TabPaneMessage</code></p> <p>Sent when a tab pane is enabled via its reactive <code>disabled</code>.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.Focused","title":"Focused  <code>dataclass</code>","text":"<pre><code>Focused(tab_pane)\n</code></pre> <p>               Bases: <code>TabPaneMessage</code></p> <p>Sent when a child widget is focused.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.TabPaneMessage","title":"TabPaneMessage  <code>dataclass</code>","text":"<pre><code>TabPaneMessage(tab_pane)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Base class for <code>TabPane</code> messages.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.TabPaneMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tab pane that is the object of this message.</p> <p>This is an alias for the attribute <code>tab_pane</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabbed_content/#textual.widgets.TabPane.TabPaneMessage.tab_pane","title":"tab_pane  <code>instance-attribute</code>","text":"<pre><code>tab_pane\n</code></pre> <p>The <code>TabPane</code> that is he object of this message.</p>"},{"location":"widgets/tabs/","title":"Tabs","text":"<p>Added in version 0.15.0</p> <p>Displays a number of tab headers which may be activated with a click or navigated with cursor keys.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Construct a <code>Tabs</code> widget with strings or Text objects as positional arguments, which will set the labels in the tabs. Here's an example with three tabs:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Tabs(\"First tab\", \"Second tab\", Text.from_markup(\"[u]Third[/u] tab\"))\n</code></pre> <p>This will create Tab widgets internally, with auto-incrementing <code>id</code> attributes (<code>\"tab-1\"</code>, <code>\"tab-2\"</code> etc). You can also supply <code>Tab</code> objects directly in the constructor, which will allow you to explicitly set an <code>id</code>. Here's an example:</p> <pre><code>def compose(self) -&gt; ComposeResult:\n    yield Tabs(\n        Tab(\"First tab\", id=\"one\"),\n        Tab(\"Second tab\", id=\"two\"),\n    )\n</code></pre> <p>When the user switches to a tab by clicking or pressing keys, then <code>Tabs</code> will send a Tabs.TabActivated message which contains the <code>tab</code> that was activated. You can then use <code>event.tab.id</code> attribute to perform any related actions.</p>"},{"location":"widgets/tabs/#clearing-tabs","title":"Clearing tabs","text":"<p>Clear tabs by calling the clear method. Clearing the tabs will send a Tabs.TabActivated message with the <code>tab</code> attribute set to <code>None</code>.</p>"},{"location":"widgets/tabs/#adding-tabs","title":"Adding tabs","text":"<p>Tabs may be added dynamically with the add_tab method, which accepts strings, Text, or Tab objects.</p>"},{"location":"widgets/tabs/#example","title":"Example","text":"<p>The following example adds a <code>Tabs</code> widget above a text label. Press A to add a tab, C to clear the tabs.</p> Outputtabs.py <p> TabsApp \u00a0AtreidiesDuke\u00a0Leto\u00a0AtreidesLady\u00a0JessicaGurney\u00a0HalleckBaron\u00a0Vladimir \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2578\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u257a\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258aLady\u00a0Jessica\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e \u00a0a\u00a0Add\u00a0tab\u00a0\u00a0r\u00a0Remove\u00a0active\u00a0tab\u00a0\u00a0c\u00a0Clear\u00a0tabs\u00a0\u258f^p\u00a0palette </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Footer, Label, Tabs\n\nNAMES = [\n    \"Paul Atreidies\",\n    \"Duke Leto Atreides\",\n    \"Lady Jessica\",\n    \"Gurney Halleck\",\n    \"Baron Vladimir Harkonnen\",\n    \"Glossu Rabban\",\n    \"Chani\",\n    \"Silgar\",\n]\n\n\nclass TabsApp(App):\n    \"\"\"Demonstrates the Tabs widget.\"\"\"\n\n    CSS = \"\"\"\n    Tabs {\n        dock: top;\n    }\n    Screen {\n        align: center middle;\n    }\n    Label {\n        margin:1 1;\n        width: 100%;\n        height: 100%;\n        background: $panel;\n        border: tall $primary;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    BINDINGS = [\n        (\"a\", \"add\", \"Add tab\"),\n        (\"r\", \"remove\", \"Remove active tab\"),\n        (\"c\", \"clear\", \"Clear tabs\"),\n    ]\n\n    def compose(self) -&gt; ComposeResult:\n        yield Tabs(NAMES[0])\n        yield Label()\n        yield Footer()\n\n    def on_mount(self) -&gt; None:\n        \"\"\"Focus the tabs when the app starts.\"\"\"\n        self.query_one(Tabs).focus()\n\n    def on_tabs_tab_activated(self, event: Tabs.TabActivated) -&gt; None:\n        \"\"\"Handle TabActivated message sent by Tabs.\"\"\"\n        label = self.query_one(Label)\n        if event.tab is None:\n            # When the tabs are cleared, event.tab will be None\n            label.visible = False\n        else:\n            label.visible = True\n            label.update(event.tab.label)\n\n    def action_add(self) -&gt; None:\n        \"\"\"Add a new tab.\"\"\"\n        tabs = self.query_one(Tabs)\n        # Cycle the names\n        NAMES[:] = [*NAMES[1:], NAMES[0]]\n        tabs.add_tab(NAMES[0])\n\n    def action_remove(self) -&gt; None:\n        \"\"\"Remove active tab.\"\"\"\n        tabs = self.query_one(Tabs)\n        active_tab = tabs.active_tab\n        if active_tab is not None:\n            tabs.remove_tab(active_tab.id)\n\n    def action_clear(self) -&gt; None:\n        \"\"\"Clear the tabs.\"\"\"\n        self.query_one(Tabs).clear()\n\n\nif __name__ == \"__main__\":\n    app = TabsApp()\n    app.run()\n</code></pre>"},{"location":"widgets/tabs/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>active</code> <code>str</code> <code>\"\"</code> The ID of the active tab. Set this attribute to a tab ID to change the active tab."},{"location":"widgets/tabs/#messages","title":"Messages","text":"<ul> <li>Tabs.TabActivated</li> <li>Tabs.Cleared</li> </ul>"},{"location":"widgets/tabs/#bindings","title":"Bindings","text":"<p>The Tabs widget defines the following bindings:</p> Key(s) Description left Move to the previous tab. right Move to the next tab."},{"location":"widgets/tabs/#component-classes","title":"Component Classes","text":"<p>This widget has no component classes.</p> <p>               Bases: <code>Widget</code></p> <p>A row of tabs.</p> <p>Parameters:</p> Name Type Description Default <code>Tab | TextType</code> <p>Positional argument should be explicit Tab objects, or a str or Text.</p> <code>()</code> <code>str | None</code> <p>ID of the tab which should be active on start.</p> <code>None</code> <code>str | None</code> <p>Optional name for the input widget.</p> <code>None</code> <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Optional initial classes for the widget.</p> <code>None</code> <code>bool</code> <p>Whether the input is disabled or not.</p> <code>False</code> <p>               Bases: <code>Static</code></p> <p>A Widget to manage a single tab within a Tabs widget.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label to use in the tab.</p> required <code>str | None</code> <p>Optional ID for the widget.</p> <code>None</code> <code>str | None</code> <p>Space separated list of class names.</p> <code>None</code> <code>bool</code> <p>Whether the tab is disabled or not.</p> <code>False</code>"},{"location":"widgets/tabs/#textual.widgets.Tabs(*tabs)","title":"<code>*tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(active)","title":"<code>active</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(name)","title":"<code>name</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\n        \"left\", \"previous_tab\", \"Previous tab\", show=False\n    ),\n    Binding(\"right\", \"next_tab\", \"Next tab\", show=False),\n]\n</code></pre> Key(s) Description left Move to the previous tab. right Move to the next tab."},{"location":"widgets/tabs/#textual.widgets.Tabs.active","title":"active  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>active = reactive('', init=False)\n</code></pre> <p>The ID of the active tab, or empty string if none are active.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.active_tab","title":"active_tab  <code>property</code>","text":"<pre><code>active_tab\n</code></pre> <p>The currently active tab, or None if there are no active tabs.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.tab_count","title":"tab_count  <code>property</code>","text":"<pre><code>tab_count\n</code></pre> <p>Total number of tabs.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared","title":"Cleared","text":"<pre><code>Cleared(tabs)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Sent when there are no active tabs.</p> <p>This can occur when Tabs are cleared, if all tabs are hidden, or if the currently active tab is unset.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The tabs widget.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tabs widget which was cleared.</p> <p>This is an alias for <code>Cleared.tabs</code> which is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.Cleared.tabs","title":"tabs  <code>instance-attribute</code>","text":"<pre><code>tabs = tabs\n</code></pre> <p>The tabs widget which was cleared.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabActivated","title":"TabActivated","text":"<pre><code>TabActivated(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a new tab is activated.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabActivated(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabActivated(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabDisabled","title":"TabDisabled","text":"<pre><code>TabDisabled(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is disabled.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabDisabled(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabDisabled(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabEnabled","title":"TabEnabled","text":"<pre><code>TabEnabled(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is enabled.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabEnabled(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabEnabled(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabError","title":"TabError","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when there is an error relating to tabs.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabHidden","title":"TabHidden","text":"<pre><code>TabHidden(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is hidden.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabHidden(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabHidden(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage","title":"TabMessage","text":"<pre><code>TabMessage(tabs, tab)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Parent class for all messages that have to do with a specific tab.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.ALLOW_SELECTOR_MATCH","title":"ALLOW_SELECTOR_MATCH  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>ALLOW_SELECTOR_MATCH = {'tab'}\n</code></pre> <p>Additional message attributes that can be used with the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tabs widget containing the tab that is the object of this message.</p> <p>This is an alias for the attribute <code>tabs</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.tab","title":"tab  <code>instance-attribute</code>","text":"<pre><code>tab = tab\n</code></pre> <p>The tab that is the object of this message.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabMessage.tabs","title":"tabs  <code>instance-attribute</code>","text":"<pre><code>tabs = tabs\n</code></pre> <p>The tabs widget containing the tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabShown","title":"TabShown","text":"<pre><code>TabShown(tabs, tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>Sent when a tab is shown.</p> <p>Parameters:</p> Name Type Description Default <code>Tabs</code> <p>The Tabs widget.</p> required <code>Tab</code> <p>The tab that is the object of this message.</p> required"},{"location":"widgets/tabs/#textual.widgets.Tabs.TabShown(tabs)","title":"<code>tabs</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.TabShown(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.action_next_tab","title":"action_next_tab","text":"<pre><code>action_next_tab()\n</code></pre> <p>Make the next tab active.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.action_previous_tab","title":"action_previous_tab","text":"<pre><code>action_previous_tab()\n</code></pre> <p>Make the previous tab active.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab","title":"add_tab","text":"<pre><code>add_tab(tab, *, before=None, after=None)\n</code></pre> <p>Add a new tab to the end of the tab list.</p> <p>Parameters:</p> Name Type Description Default <code>Tab | str | Text</code> <p>A new tab object, or a label (str or Text).</p> required <code>Tab | str | None</code> <p>Optional tab or tab ID to add the tab before.</p> <code>None</code> <code>Tab | str | None</code> <p>Optional tab or tab ID to add the tab after.</p> <code>None</code> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the tab to be mounted and internal state to be fully updated to reflect the new tab.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>Tabs.TabError</code> will be raised.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab(tab)","title":"<code>tab</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab(before)","title":"<code>before</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.add_tab(after)","title":"<code>after</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear all the tabs.</p> <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An awaitable object that waits for the tabs to be removed.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.disable","title":"disable","text":"<pre><code>disable(tab_id)\n</code></pre> <p>Disable the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to disable.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.disable(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.enable","title":"enable","text":"<pre><code>enable(tab_id)\n</code></pre> <p>Enable the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to enable.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.enable(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.hide","title":"hide","text":"<pre><code>hide(tab_id)\n</code></pre> <p>Hide the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to hide.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.hide(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.remove_tab","title":"remove_tab","text":"<pre><code>remove_tab(tab_or_id)\n</code></pre> <p>Remove a tab.</p> <p>Parameters:</p> Name Type Description Default <code>Tab | str | None</code> <p>The Tab to remove or its id.</p> required <p>Returns:</p> Type Description <code>AwaitComplete</code> <p>An optionally awaitable object that waits for the tab to be removed.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.remove_tab(tab_or_id)","title":"<code>tab_or_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.show","title":"show","text":"<pre><code>show(tab_id)\n</code></pre> <p>Show the indicated tab.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The ID of the <code>Tab</code> to show.</p> required <p>Returns:</p> Type Description <code>Tab</code> <p>The <code>Tab</code> that was targeted.</p> <p>Raises:</p> Type Description <code>TabError</code> <p>If there are any issues with the request.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.show(tab_id)","title":"<code>tab_id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tabs.validate_active","title":"validate_active","text":"<pre><code>validate_active(active)\n</code></pre> <p>Check id assigned to active attribute is a valid tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tabs.watch_active","title":"watch_active","text":"<pre><code>watch_active(previously_active, active)\n</code></pre> <p>Handle a change to the active tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab(label)","title":"<code>label</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab(id)","title":"<code>id</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tabs/#textual.widgets.Tab.label","title":"label  <code>property</code> <code>writable</code>","text":"<pre><code>label\n</code></pre> <p>The label for the tab.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.label_text","title":"label_text  <code>property</code>","text":"<pre><code>label_text\n</code></pre> <p>Undecorated text of the label.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Clicked","title":"Clicked  <code>dataclass</code>","text":"<pre><code>Clicked(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was clicked.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Disabled","title":"Disabled  <code>dataclass</code>","text":"<pre><code>Disabled(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was disabled.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Enabled","title":"Enabled  <code>dataclass</code>","text":"<pre><code>Enabled(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was enabled.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.Relabelled","title":"Relabelled  <code>dataclass</code>","text":"<pre><code>Relabelled(tab)\n</code></pre> <p>               Bases: <code>TabMessage</code></p> <p>A tab was relabelled.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.TabMessage","title":"TabMessage  <code>dataclass</code>","text":"<pre><code>TabMessage(tab)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Tab-related messages.</p> <p>These are mostly intended for internal use when interacting with <code>Tabs</code>.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.TabMessage.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tab that is the object of this message.</p> <p>This is an alias for the attribute <code>tab</code> and is used by the <code>on</code> decorator.</p>"},{"location":"widgets/tabs/#textual.widgets.Tab.TabMessage.tab","title":"tab  <code>instance-attribute</code>","text":"<pre><code>tab\n</code></pre> <p>The tab that is the object of this message.</p>"},{"location":"widgets/text_area/","title":"TextArea","text":"<p>Tip</p> <p>Added in version 0.38.0. Soft wrapping added in version 0.48.0.</p> <p>A widget for editing text which may span multiple lines. Supports text selection, soft wrapping, optional syntax highlighting with tree-sitter and a variety of keybindings.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/text_area/#guide","title":"Guide","text":""},{"location":"widgets/text_area/#code-editing-vs-plain-text-editing","title":"Code editing vs plain text editing","text":"<p>By default, the <code>TextArea</code> widget is a standard multi-line input box with soft-wrapping enabled.</p> <p>If you're interested in editing code, you may wish to use the <code>TextArea.code_editor</code> convenience constructor. This is a method which, by default, returns a new <code>TextArea</code> with soft-wrapping disabled, line numbers enabled, and the tab key behavior configured to insert <code>\\t</code>.</p>"},{"location":"widgets/text_area/#syntax-highlighting-dependencies","title":"Syntax highlighting dependencies","text":"<p>To enable syntax highlighting, you'll need to install the <code>syntax</code> extra dependencies:</p> pippoetry <pre><code>pip install \"textual[syntax]\"\n</code></pre> <pre><code>poetry add \"textual[syntax]\"\n</code></pre> <p>This will install <code>tree-sitter</code> and <code>tree-sitter-languages</code>. These packages are distributed as binary wheels, so it may limit your applications ability to run in environments where these wheels are not available. After installing, you can set the <code>language</code> reactive attribute on the <code>TextArea</code> to enable highlighting.</p>"},{"location":"widgets/text_area/#loading-text","title":"Loading text","text":"<p>In this example we load some initial text into the <code>TextArea</code>, and set the language to <code>\"python\"</code> to enable syntax highlighting.</p> Outputtext_area_example.py <p> TextAreaExample \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0defhello(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a2\u00a0\u00a0print(\"hello\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a3\u00a0\u00a0\u258e \u258a4\u00a0\u00a0defgoodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0print(\"goodbye\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\nTEXT = \"\"\"\\\ndef hello(name):\n    print(\"hello\" + name)\n\ndef goodbye(name):\n    print(\"goodbye\" + name)\n\"\"\"\n\n\nclass TextAreaExample(App):\n    def compose(self) -&gt; ComposeResult:\n        yield TextArea.code_editor(TEXT, language=\"python\")\n\n\napp = TextAreaExample()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>To update the content programmatically, set the <code>text</code> property to a string value.</p> <p>To update the parser used for syntax highlighting, set the <code>language</code> reactive attribute:</p> <pre><code># Set the language to Markdown\ntext_area.language = \"markdown\"\n</code></pre> <p>Note</p> <p>More built-in languages will be added in the future. For now, you can add your own.</p>"},{"location":"widgets/text_area/#reading-content-from-textarea","title":"Reading content from <code>TextArea</code>","text":"<p>There are a number of ways to retrieve content from the <code>TextArea</code>:</p> <ul> <li>The <code>TextArea.text</code> property returns all content in the text area as a string.</li> <li>The <code>TextArea.selected_text</code> property returns the text corresponding to the current selection.</li> <li>The <code>TextArea.get_text_range</code> method returns the text between two locations.</li> </ul> <p>In all cases, when multiple lines of text are retrieved, the document line separator will be used.</p>"},{"location":"widgets/text_area/#editing-content-inside-textarea","title":"Editing content inside <code>TextArea</code>","text":"<p>The content of the <code>TextArea</code> can be updated using the <code>replace</code> method. This method is the programmatic equivalent of selecting some text and then pasting.</p> <p>Some other convenient methods are available, such as <code>insert</code>, <code>delete</code>, and <code>clear</code>.</p> <p>Tip</p> <p>The <code>TextArea.document.end</code> property returns the location at the end of the document, which might be convenient when editing programmatically.</p>"},{"location":"widgets/text_area/#working-with-the-cursor","title":"Working with the cursor","text":""},{"location":"widgets/text_area/#moving-the-cursor","title":"Moving the cursor","text":"<p>The cursor location is available via the <code>cursor_location</code> property, which represents the location of the cursor as a tuple <code>(row_index, column_index)</code>. These indices are zero-based and represent the position of the cursor in the content. Writing a new value to <code>cursor_location</code> will immediately update the location of the cursor.</p> <pre><code>&gt;&gt;&gt; text_area = TextArea()\n&gt;&gt;&gt; text_area.cursor_location\n(0, 0)\n&gt;&gt;&gt; text_area.cursor_location = (0, 4)\n&gt;&gt;&gt; text_area.cursor_location\n(0, 4)\n</code></pre> <p><code>cursor_location</code> is a simple way to move the cursor programmatically, but it doesn't let us select text.</p>"},{"location":"widgets/text_area/#selecting-text","title":"Selecting text","text":"<p>To select text, we can use the <code>selection</code> reactive attribute. Let's select the first two lines of text in a document by adding <code>text_area.selection = Selection(start=(0, 0), end=(2, 0))</code> to our code:</p> Outputtext_area_selection.py <p> TextAreaSelection \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0defhello(name):\u258e \u258a2\u00a0\u00a0print(\"hello\"+\u00a0name)\u258e \u258a3\u00a0\u00a0\u258e \u258a4\u00a0\u00a0defgoodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0print(\"goodbye\"+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\nfrom textual.widgets.text_area import Selection\n\nTEXT = \"\"\"\\\ndef hello(name):\n    print(\"hello\" + name)\n\ndef goodbye(name):\n    print(\"goodbye\" + name)\n\"\"\"\n\n\nclass TextAreaSelection(App):\n    def compose(self) -&gt; ComposeResult:\n        text_area = TextArea.code_editor(TEXT, language=\"python\")\n        text_area.selection = Selection(start=(0, 0), end=(2, 0))  # (1)!\n        yield text_area\n\n\napp = TextAreaSelection()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <ol> <li>Selects the first two lines of text.</li> </ol> <p>Note that selections can happen in both directions, so <code>Selection((2, 0), (0, 0))</code> is also valid.</p> <p>Tip</p> <p>The <code>end</code> attribute of the <code>selection</code> is always equal to <code>TextArea.cursor_location</code>. In other words, the <code>cursor_location</code> attribute is simply a convenience for accessing <code>text_area.selection.end</code>.</p>"},{"location":"widgets/text_area/#more-cursor-utilities","title":"More cursor utilities","text":"<p>There are a number of additional utility methods available for interacting with the cursor.</p>"},{"location":"widgets/text_area/#location-information","title":"Location information","text":"<p>Many properties exist on <code>TextArea</code> which give information about the current cursor location. These properties begin with <code>cursor_at_</code>, and return booleans. For example, <code>cursor_at_start_of_line</code> tells us if the cursor is at a start of line.</p> <p>We can also check the location the cursor would arrive at if we were to move it. For example, <code>get_cursor_right_location</code> returns the location the cursor would move to if it were to move right. A number of similar methods exist, with names like <code>get_cursor_*_location</code>.</p>"},{"location":"widgets/text_area/#cursor-movement-methods","title":"Cursor movement methods","text":"<p>The <code>move_cursor</code> method allows you to move the cursor to a new location while selecting text, or move the cursor and scroll to keep it centered.</p> <pre><code># Move the cursor from its current location to row index 4,\n# column index 8, while selecting all the text between.\ntext_area.move_cursor((4, 8), select=True)\n</code></pre> <p>The <code>move_cursor_relative</code> method offers a very similar interface, but moves the cursor relative to its current location.</p>"},{"location":"widgets/text_area/#common-selections","title":"Common selections","text":"<p>There are some methods available which make common selections easier:</p> <ul> <li><code>select_line</code> selects a line by index. Bound to F6 by default.</li> <li><code>select_all</code> selects all text. Bound to F7 by default.</li> </ul>"},{"location":"widgets/text_area/#themes","title":"Themes","text":"<p><code>TextArea</code> ships with some builtin themes, and you can easily add your own.</p> <p>Themes give you control over the look and feel, including syntax highlighting, the cursor, selection, gutter, and more.</p>"},{"location":"widgets/text_area/#default-theme","title":"Default theme","text":"<p>The default <code>TextArea</code> theme is called <code>css</code>, which takes its values entirely from CSS. This means that the default appearance of the widget fits nicely into a standard Textual application, and looks right on both dark and light mode.</p> <p>When using the <code>css</code> theme, you can make use of component classes to style elements of the <code>TextArea</code>. For example, the CSS code <code>TextArea .text-area--cursor { background: green; }</code> will make the cursor <code>green</code>.</p> <p>More complex applications such as code editors may want to use pre-defined themes such as <code>monokai</code>. This involves using a <code>TextAreaTheme</code> object, which we cover in detail below. This allows full customization of the <code>TextArea</code>, including syntax highlighting, at the code level.</p>"},{"location":"widgets/text_area/#using-builtin-themes","title":"Using builtin themes","text":"<p>The initial theme of the <code>TextArea</code> is determined by the <code>theme</code> parameter.</p> <pre><code># Create a TextArea with the 'dracula' theme.\nyield TextArea.code_editor(\"print(123)\", language=\"python\", theme=\"dracula\")\n</code></pre> <p>You can check which themes are available using the <code>available_themes</code> property.</p> <pre><code>&gt;&gt;&gt; text_area = TextArea()\n&gt;&gt;&gt; print(text_area.available_themes)\n{'css', 'dracula', 'github_light', 'monokai', 'vscode_dark'}\n</code></pre> <p>After creating a <code>TextArea</code>, you can change the theme by setting the <code>theme</code> attribute to one of the available themes.</p> <pre><code>text_area.theme = \"vscode_dark\"\n</code></pre> <p>On setting this attribute the <code>TextArea</code> will immediately refresh to display the updated theme.</p>"},{"location":"widgets/text_area/#custom-themes","title":"Custom themes","text":"<p>Note</p> <p>Custom themes are only relevant for people who are looking to customize syntax highlighting. If you're only editing plain text, and wish to recolor aspects of the <code>TextArea</code>, you should use the provided component classes.</p> <p>Using custom (non-builtin) themes is a two-step process:</p> <ol> <li>Create an instance of <code>TextAreaTheme</code>.</li> <li>Register it using <code>TextArea.register_theme</code>.</li> </ol>"},{"location":"widgets/text_area/#1-creating-a-theme","title":"1. Creating a theme","text":"<p>Let's create a simple theme, <code>\"my_cool_theme\"</code>, which colors the cursor blue, and the cursor line yellow. Our theme will also syntax highlight strings as red, and comments as magenta.</p> <pre><code>from rich.style import Style\nfrom textual.widgets.text_area import TextAreaTheme\n# ...\nmy_theme = TextAreaTheme(\n    # This name will be used to refer to the theme...\n    name=\"my_cool_theme\",\n    # Basic styles such as background, cursor, selection, gutter, etc...\n    cursor_style=Style(color=\"white\", bgcolor=\"blue\"),\n    cursor_line_style=Style(bgcolor=\"yellow\"),\n    # `syntax_styles` is for syntax highlighting.\n    # It maps tokens parsed from the document to Rich styles.\n    syntax_styles={\n        \"string\": Style(color=\"red\"),\n        \"comment\": Style(color=\"magenta\"),\n    }\n)\n</code></pre> <p>Attributes like <code>cursor_style</code> and <code>cursor_line_style</code> apply general language-agnostic styling to the widget. If you choose not to supply a value for one of these attributes, it will be taken from the CSS component styles.</p> <p>The <code>syntax_styles</code> attribute of <code>TextAreaTheme</code> is used for syntax highlighting and depends on the <code>language</code> currently in use. For more details, see syntax highlighting.</p> <p>If you wish to build on an existing theme, you can obtain a reference to it using the <code>TextAreaTheme.get_builtin_theme</code> classmethod:</p> <pre><code>from textual.widgets.text_area import TextAreaTheme\n\nmonokai = TextAreaTheme.get_builtin_theme(\"monokai\")\n</code></pre>"},{"location":"widgets/text_area/#2-registering-a-theme","title":"2. Registering a theme","text":"<p>Our theme can now be registered with the <code>TextArea</code> instance.</p> <pre><code>text_area.register_theme(my_theme)\n</code></pre> <p>After registering a theme, it'll appear in the <code>available_themes</code>:</p> <pre><code>&gt;&gt;&gt; print(text_area.available_themes)\n{'dracula', 'github_light', 'monokai', 'vscode_dark', 'my_cool_theme'}\n</code></pre> <p>We can now switch to it:</p> <pre><code>text_area.theme = \"my_cool_theme\"\n</code></pre> <p>This immediately updates the appearance of the <code>TextArea</code>:</p> <p> TextAreaCustomThemes \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a#\u00a0says\u00a0hello\u258e \u258adef\u00a0hello(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u00a0\u00a0\u00a0\u00a0print(\"hello\"\u00a0+\u00a0name)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u258e \u258a#\u00a0says\u00a0goodbye\u2584\u2584\u258e \u258adef\u00a0goodbye(name):\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widgets/text_area/#tab-and-escape-behavior","title":"Tab and Escape behavior","text":"<p>Pressing the Tab key will shift focus to the next widget in your application by default. This matches how other widgets work in Textual.</p> <p>To have Tab insert a <code>\\t</code> character, set the <code>tab_behavior</code> attribute to the string value <code>\"indent\"</code>. While in this mode, you can shift focus by pressing the Esc key.</p>"},{"location":"widgets/text_area/#indentation","title":"Indentation","text":"<p>The character(s) inserted when you press tab is controlled by setting the <code>indent_type</code> attribute to either <code>tabs</code> or <code>spaces</code>.</p> <p>If <code>indent_type == \"spaces\"</code>, pressing Tab will insert up to <code>indent_width</code> spaces in order to align with the next tab stop.</p>"},{"location":"widgets/text_area/#undo-and-redo","title":"Undo and redo","text":"<p><code>TextArea</code> offers <code>undo</code> and <code>redo</code> methods. By default, <code>undo</code> is bound to Ctrl+Z and <code>redo</code> to Ctrl+Y.</p> <p>The <code>TextArea</code> uses a heuristic to place checkpoints after certain types of edit. When you call <code>undo</code>, all of the edits between now and the most recent checkpoint are reverted. You can manually add a checkpoint by calling the <code>TextArea.history.checkpoint()</code> instance method.</p> <p>The undo and redo history uses a stack-based system, where a single item on the stack represents a single checkpoint. In memory-constrained environments, you may wish to reduce the maximum number of checkpoints that can exist. You can do this by passing the <code>max_checkpoints</code> argument to the <code>TextArea</code> constructor.</p>"},{"location":"widgets/text_area/#read-only-mode","title":"Read-only mode","text":"<p><code>TextArea.read_only</code> is a boolean reactive attribute which, if <code>True</code>, will prevent users from modifying content in the <code>TextArea</code>.</p> <p>While <code>read_only=True</code>, you can still modify the content programmatically.</p> <p>While this mode is active, the <code>TextArea</code> receives the <code>-read-only</code> CSS class, which you can use to supply custom styles for read-only mode.</p>"},{"location":"widgets/text_area/#line-separators","title":"Line separators","text":"<p>When content is loaded into <code>TextArea</code>, the content is scanned from beginning to end and the first occurrence of a line separator is recorded.</p> <p>This separator will then be used when content is later read from the <code>TextArea</code> via the <code>text</code> property. The <code>TextArea</code> widget does not support exporting text which contains mixed line endings.</p> <p>Similarly, newline characters pasted into the <code>TextArea</code> will be converted.</p> <p>You can check the line separator of the current document by inspecting <code>TextArea.document.newline</code>:</p> <pre><code>&gt;&gt;&gt; text_area = TextArea()\n&gt;&gt;&gt; text_area.document.newline\n'\\n'\n</code></pre>"},{"location":"widgets/text_area/#line-numbers","title":"Line numbers","text":"<p>The gutter (column on the left containing line numbers) can be toggled by setting the <code>show_line_numbers</code> attribute to <code>True</code> or <code>False</code>.</p> <p>Setting this attribute will immediately repaint the <code>TextArea</code> to reflect the new value.</p> <p>You can also change the start line number (the topmost line number in the gutter) by setting the <code>line_number_start</code> reactive attribute.</p>"},{"location":"widgets/text_area/#extending-textarea","title":"Extending <code>TextArea</code>","text":"<p>Sometimes, you may wish to subclass <code>TextArea</code> to add some extra functionality. In this section, we'll briefly explore how we can extend the widget to achieve common goals.</p>"},{"location":"widgets/text_area/#hooking-into-key-presses","title":"Hooking into key presses","text":"<p>You may wish to hook into certain key presses to inject some functionality. This can be done by over-riding <code>_on_key</code> and adding the required functionality.</p>"},{"location":"widgets/text_area/#example-closing-parentheses-automatically","title":"Example - closing parentheses automatically","text":"<p>Let's extend <code>TextArea</code> to add a feature which automatically closes parentheses and moves the cursor to a sensible location.</p> <pre><code>from textual import events\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\n\nclass ExtendedTextArea(TextArea):\n    \"\"\"A subclass of TextArea with parenthesis-closing functionality.\"\"\"\n\n    def _on_key(self, event: events.Key) -&gt; None:\n        if event.character == \"(\":\n            self.insert(\"()\")\n            self.move_cursor_relative(columns=-1)\n            event.prevent_default()\n\n\nclass TextAreaKeyPressHook(App):\n    def compose(self) -&gt; ComposeResult:\n        yield ExtendedTextArea.code_editor(language=\"python\")\n\n\napp = TextAreaKeyPressHook()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>This intercepts the key handler when <code>\"(\"</code> is pressed, and inserts <code>\"()\"</code> instead. It then moves the cursor so that it lands between the open and closing parentheses.</p> <p>Typing \"<code>def hello(</code>\" into the <code>TextArea</code> now results in the bracket automatically being closed:</p> <p> TextAreaKeyPressHook \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0def\u00a0hello()\u258e \u258a\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p>"},{"location":"widgets/text_area/#advanced-concepts","title":"Advanced concepts","text":""},{"location":"widgets/text_area/#syntax-highlighting","title":"Syntax highlighting","text":"<p>Syntax highlighting inside the <code>TextArea</code> is powered by a library called <code>tree-sitter</code>.</p> <p>Each time you update the document in a <code>TextArea</code>, an internal syntax tree is updated. This tree is frequently queried to find location ranges relevant to syntax highlighting. We give these ranges names, and ultimately map them to Rich styles inside <code>TextAreaTheme.syntax_styles</code>.</p> <p>To illustrate how this works, lets look at how the \"Monokai\" <code>TextAreaTheme</code> highlights Markdown files.</p> <p>When the <code>language</code> attribute is set to <code>\"markdown\"</code>, a highlight query similar to the one below is used (trimmed for brevity).</p> <pre><code>(heading_content) @heading\n(link) @link\n</code></pre> <p>This highlight query maps <code>heading_content</code> nodes returned by the Markdown parser to the name <code>@heading</code>, and <code>link</code> nodes to the name <code>@link</code>.</p> <p>Inside our <code>TextAreaTheme.syntax_styles</code> dict, we can map the name <code>@heading</code> to a Rich style. Here's a snippet from the \"Monokai\" theme which does just that:</p> <pre><code>TextAreaTheme(\n    name=\"monokai\",\n    base_style=Style(color=\"#f8f8f2\", bgcolor=\"#272822\"),\n    gutter_style=Style(color=\"#90908a\", bgcolor=\"#272822\"),\n    # ...\n    syntax_styles={\n        # Colorise @heading and make them bold\n        \"heading\": Style(color=\"#F92672\", bold=True),\n        # Colorise and underline @link\n        \"link\": Style(color=\"#66D9EF\", underline=True),\n        # ...\n    },\n)\n</code></pre> <p>To understand which names can be mapped inside <code>syntax_styles</code>, we recommend looking at the existing themes and highlighting queries (<code>.scm</code> files) in the Textual repository.</p> <p>Tip</p> <p>You may also wish to take a look at the contents of <code>TextArea._highlights</code> on an active <code>TextArea</code> instance to see which highlights have been generated for the open document.</p>"},{"location":"widgets/text_area/#adding-support-for-custom-languages","title":"Adding support for custom languages","text":"<p>To add support for a language to a <code>TextArea</code>, use the <code>register_language</code> method.</p> <p>To register a language, we require two things:</p> <ol> <li>A tree-sitter <code>Language</code> object which contains the grammar for the language.</li> <li>A highlight query which is used for syntax highlighting.</li> </ol>"},{"location":"widgets/text_area/#example-adding-java-support","title":"Example - adding Java support","text":"<p>The easiest way to obtain a <code>Language</code> object is using the <code>py-tree-sitter-languages</code> package. Here's how we can use this package to obtain a reference to a <code>Language</code> object representing Java:</p> <pre><code>from tree_sitter_languages import get_language\njava_language = get_language(\"java\")\n</code></pre> <p>The exact version of the parser used when you call <code>get_language</code> can be checked via the <code>repos.txt</code> file in the version of <code>py-tree-sitter-languages</code> you're using. This file contains links to the GitHub repos and commit hashes of the tree-sitter parsers. In these repos you can often find pre-made highlight queries at <code>queries/highlights.scm</code>, and a file showing all the available node types which can be used in highlight queries at <code>src/node-types.json</code>.</p> <p>Since we're adding support for Java, lets grab the Java highlight query from the repo by following these steps:</p> <ol> <li>Open <code>repos.txt</code> file from the <code>py-tree-sitter-languages</code> repo.</li> <li>Find the link corresponding to <code>tree-sitter-java</code> and go to the repo on GitHub (you may also need to go to the specific commit referenced in <code>repos.txt</code>).</li> <li>Go to <code>queries/highlights.scm</code> to see the example highlight query for Java.</li> </ol> <p>Be sure to check the license in the repo to ensure it can be freely copied.</p> <p>Warning</p> <p>It's important to use a highlight query which is compatible with the parser in use, so pay attention to the commit hash when visiting the repo via <code>repos.txt</code>.</p> <p>We now have our <code>Language</code> and our highlight query, so we can register Java as a language.</p> <pre><code>from pathlib import Path\n\nfrom tree_sitter_languages import get_language\n\nfrom textual.app import App, ComposeResult\nfrom textual.widgets import TextArea\n\njava_language = get_language(\"java\")\njava_highlight_query = (Path(__file__).parent / \"java_highlights.scm\").read_text()\njava_code = \"\"\"\\\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n\"\"\"\n\n\nclass TextAreaCustomLanguage(App):\n    def compose(self) -&gt; ComposeResult:\n        text_area = TextArea.code_editor(text=java_code)\n        text_area.cursor_blink = False\n\n        # Register the Java language and highlight query\n        text_area.register_language(java_language, java_highlight_query)\n\n        # Switch to Java\n        text_area.language = \"java\"\n        yield text_area\n\n\napp = TextAreaCustomLanguage()\nif __name__ == \"__main__\":\n    app.run()\n</code></pre> <p>Running our app, we can see that the Java code is highlighted. We can freely edit the text, and the syntax highlighting will update immediately.</p> <p> TextAreaCustomLanguage \u258a\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u258e \u258a1\u00a0\u00a0class\u00a0HelloWorld\u00a0{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a2\u00a0\u00a0publicstatic\u00a0void\u00a0main(String[]\u00a0args)\u00a0{\u00a0\u258e \u258a3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0System.out.println(\"Hello,\u00a0World!\");\u00a0\u258e \u258a4\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a5\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u258e \u258a6\u00a0\u00a0\u258e \u258a\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u258e </p> <p>Recall that we map names (like <code>@heading</code>) from the tree-sitter highlight query to Rich style objects inside the <code>TextAreaTheme.syntax_styles</code> dictionary. If you notice some highlights are missing after registering a language, the issue may be:</p> <ol> <li>The current <code>TextAreaTheme</code> doesn't contain a mapping for the name in the highlight query. Adding a new key-value pair to <code>syntax_styles</code> should resolve the issue.</li> <li>The highlight query doesn't assign a name to the pattern you expect to be highlighted. In this case you'll need to update the highlight query to assign to the name.</li> </ol> <p>Tip</p> <p>The names assigned in tree-sitter highlight queries are often reused across multiple languages. For example, <code>@string</code> is used in many languages to highlight strings.</p>"},{"location":"widgets/text_area/#navigation-and-wrapping-information","title":"Navigation and wrapping information","text":"<p>If you're building functionality on top of <code>TextArea</code>, it may be useful to inspect the <code>navigator</code> and <code>wrapped_document</code> attributes.</p> <ul> <li><code>navigator</code> is a <code>DocumentNavigator</code> instance which can give us general information about the cursor's location within a document, as well as where the cursor will move to when certain actions are performed.</li> <li><code>wrapped_document</code> is a <code>WrappedDocument</code> instance which can be used to convert document locations to visual locations, taking wrapping into account. It also offers a variety of other convenience methods and properties.</li> </ul> <p>A detailed view of these classes is out of scope, but do note that a lot of the functionality of <code>TextArea</code> exists within them, so inspecting them could be worthwhile.</p>"},{"location":"widgets/text_area/#reactive-attributes","title":"Reactive attributes","text":"Name Type Default Description <code>language</code> <code>str | None</code> <code>None</code> The language to use for syntax highlighting. <code>theme</code> <code>str</code> <code>\"css\"</code> The theme to use. <code>selection</code> <code>Selection</code> <code>Selection()</code> The current selection. <code>show_line_numbers</code> <code>bool</code> <code>False</code> Show or hide line numbers. <code>line_number_start</code> <code>int</code> <code>1</code> The start line number in the gutter. <code>indent_width</code> <code>int</code> <code>4</code> The number of spaces to indent and width of tabs. <code>match_cursor_bracket</code> <code>bool</code> <code>True</code> Enable/disable highlighting matching brackets under cursor. <code>cursor_blink</code> <code>bool</code> <code>True</code> Enable/disable blinking of the cursor when the widget has focus. <code>soft_wrap</code> <code>bool</code> <code>True</code> Enable/disable soft wrapping. <code>read_only</code> <code>bool</code> <code>False</code> Enable/disable read-only mode."},{"location":"widgets/text_area/#messages","title":"Messages","text":"<ul> <li>TextArea.Changed</li> <li>TextArea.SelectionChanged</li> </ul>"},{"location":"widgets/text_area/#bindings","title":"Bindings","text":"<p>The <code>TextArea</code> widget defines the following bindings:</p> Key(s) Description up Move the cursor up. down Move the cursor down. left Move the cursor left. ctrl+left Move the cursor to the start of the word. ctrl+shift+left Move the cursor to the start of the word and select. right Move the cursor right. ctrl+right Move the cursor to the end of the word. ctrl+shift+right Move the cursor to the end of the word and select. home,ctrl+a Move the cursor to the start of the line. end,ctrl+e Move the cursor to the end of the line. shift+home Move the cursor to the start of the line and select. shift+end Move the cursor to the end of the line and select. pageup Move the cursor one page up. pagedown Move the cursor one page down. shift+up Select while moving the cursor up. shift+down Select while moving the cursor down. shift+left Select while moving the cursor left. shift+right Select while moving the cursor right. backspace Delete character to the left of cursor. ctrl+w Delete from cursor to start of the word. delete,ctrl+d Delete character to the right of cursor. ctrl+f Delete from cursor to end of the word. ctrl+x Delete the current line. ctrl+u Delete from cursor to the start of the line. ctrl+k Delete from cursor to the end of the line. f6 Select the current line. f7 Select all text in the document. ctrl+z Undo. ctrl+y Redo."},{"location":"widgets/text_area/#component-classes","title":"Component classes","text":"<p>The <code>TextArea</code> defines component classes that can style various aspects of the widget. Styles from the <code>theme</code> attribute take priority.</p> <p><code>TextArea</code> offers some component classes which can be used to style aspects of the widget.</p> <p>Note that any attributes provided in the chosen <code>TextAreaTheme</code> will take priority here.</p> Class Description <code>text-area--cursor</code> Target the cursor. <code>text-area--gutter</code> Target the gutter (line number column). <code>text-area--cursor-gutter</code> Target the gutter area of the line the cursor is on. <code>text-area--cursor-line</code> Target the line the cursor is on. <code>text-area--selection</code> Target the current selection. <code>text-area--matching-bracket</code> Target matching brackets."},{"location":"widgets/text_area/#see-also","title":"See also","text":"<ul> <li><code>Input</code> - single-line text input widget</li> <li><code>TextAreaTheme</code> - theming the <code>TextArea</code></li> <li><code>DocumentNavigator</code> - guides cursor movement </li> <li><code>WrappedDocument</code> - manages wrapping the document </li> <li><code>EditHistory</code> - manages the undo stack</li> <li>The tree-sitter documentation website.</li> <li>The tree-sitter Python bindings repository.</li> <li><code>py-tree-sitter-languages</code> repository (provides binary wheels for a large variety of tree-sitter languages).</li> </ul>"},{"location":"widgets/text_area/#additional-notes","title":"Additional notes","text":"<ul> <li>To remove the outline effect when the <code>TextArea</code> is focused, you can set <code>border: none; padding: 0;</code> in your CSS.</li> </ul> <p>               Bases: <code>ScrollView</code></p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The initial text to load into the TextArea.</p> <code>''</code> <code>str | None</code> <p>The language to use.</p> <code>None</code> <code>str</code> <p>The theme to use.</p> <code>'css'</code> <code>bool</code> <p>Enable soft wrapping.</p> <code>True</code> <code>Literal['focus', 'indent']</code> <p>If 'focus', pressing tab will switch focus. If 'indent', pressing tab will insert a tab.</p> <code>'focus'</code> <code>bool</code> <p>Enable read-only mode. This prevents edits using the keyboard.</p> <code>False</code> <code>bool</code> <p>Show line numbers on the left edge.</p> <code>False</code> <code>int</code> <p>What line number to start on.</p> <code>1</code> <code>int</code> <p>The maximum number of undo history checkpoints to retain.</p> <code>50</code> <code>str | None</code> <p>The name of the <code>TextArea</code> widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget, used to refer to it from Textual CSS.</p> <code>None</code> <code>str | None</code> <p>One or more Textual CSS compatible class names separated by spaces.</p> <code>None</code> <code>bool</code> <p>True if the widget is disabled.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip.</p> <code>None</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(theme)","title":"<code>theme</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(soft_wrap)","title":"<code>soft_wrap</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(tab_behavior)","title":"<code>tab_behavior</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(read_only)","title":"<code>read_only</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(show_line_numbers)","title":"<code>show_line_numbers</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(line_number_start)","title":"<code>line_number_start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(max_checkpoints)","title":"<code>max_checkpoints</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(name)","title":"<code>name</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(id)","title":"<code>id</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.BINDINGS","title":"BINDINGS  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"up\", \"cursor_up\", \"cursor up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"cursor down\", show=False\n    ),\n    Binding(\n        \"left\", \"cursor_left\", \"cursor left\", show=False\n    ),\n    Binding(\n        \"right\", \"cursor_right\", \"cursor right\", show=False\n    ),\n    Binding(\n        \"ctrl+left\",\n        \"cursor_word_left\",\n        \"cursor word left\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+right\",\n        \"cursor_word_right\",\n        \"cursor word right\",\n        show=False,\n    ),\n    Binding(\n        \"home,ctrl+a\",\n        \"cursor_line_start\",\n        \"cursor line start\",\n        show=False,\n    ),\n    Binding(\n        \"end,ctrl+e\",\n        \"cursor_line_end\",\n        \"cursor line end\",\n        show=False,\n    ),\n    Binding(\n        \"pageup\",\n        \"cursor_page_up\",\n        \"cursor page up\",\n        show=False,\n    ),\n    Binding(\n        \"pagedown\",\n        \"cursor_page_down\",\n        \"cursor page down\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+shift+left\",\n        \"cursor_word_left(True)\",\n        \"cursor left word select\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+shift+right\",\n        \"cursor_word_right(True)\",\n        \"cursor right word select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+home\",\n        \"cursor_line_start(True)\",\n        \"cursor line start select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+end\",\n        \"cursor_line_end(True)\",\n        \"cursor line end select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+up\",\n        \"cursor_up(True)\",\n        \"cursor up select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+down\",\n        \"cursor_down(True)\",\n        \"cursor down select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+left\",\n        \"cursor_left(True)\",\n        \"cursor left select\",\n        show=False,\n    ),\n    Binding(\n        \"shift+right\",\n        \"cursor_right(True)\",\n        \"cursor right select\",\n        show=False,\n    ),\n    Binding(\"f6\", \"select_line\", \"select line\", show=False),\n    Binding(\"f7\", \"select_all\", \"select all\", show=False),\n    Binding(\n        \"backspace\",\n        \"delete_left\",\n        \"delete left\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+w\",\n        \"delete_word_left\",\n        \"delete left to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"delete,ctrl+d\",\n        \"delete_right\",\n        \"delete right\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+f\",\n        \"delete_word_right\",\n        \"delete right to start of word\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+x\", \"delete_line\", \"delete line\", show=False\n    ),\n    Binding(\n        \"ctrl+u\",\n        \"delete_to_start_of_line\",\n        \"delete to line start\",\n        show=False,\n    ),\n    Binding(\n        \"ctrl+k\",\n        \"delete_to_end_of_line_or_delete_line\",\n        \"delete to line end\",\n        show=False,\n    ),\n    Binding(\"ctrl+z\", \"undo\", \"Undo\", show=False),\n    Binding(\"ctrl+y\", \"redo\", \"Redo\", show=False),\n]\n</code></pre> Key(s) Description up Move the cursor up. down Move the cursor down. left Move the cursor left. ctrl+left Move the cursor to the start of the word. ctrl+shift+left Move the cursor to the start of the word and select. right Move the cursor right. ctrl+right Move the cursor to the end of the word. ctrl+shift+right Move the cursor to the end of the word and select. home,ctrl+a Move the cursor to the start of the line. end,ctrl+e Move the cursor to the end of the line. shift+home Move the cursor to the start of the line and select. shift+end Move the cursor to the end of the line and select. pageup Move the cursor one page up. pagedown Move the cursor one page down. shift+up Select while moving the cursor up. shift+down Select while moving the cursor down. shift+left Select while moving the cursor left. shift+right Select while moving the cursor right. backspace Delete character to the left of cursor. ctrl+w Delete from cursor to start of the word. delete,ctrl+d Delete character to the right of cursor. ctrl+f Delete from cursor to end of the word. ctrl+x Delete the current line. ctrl+u Delete from cursor to the start of the line. ctrl+k Delete from cursor to the end of the line. f6 Select the current line. f7 Select all text in the document. ctrl+z Undo. ctrl+y Redo."},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"text-area--cursor\",\n    \"text-area--gutter\",\n    \"text-area--cursor-gutter\",\n    \"text-area--cursor-line\",\n    \"text-area--selection\",\n    \"text-area--matching-bracket\",\n}\n</code></pre> <p><code>TextArea</code> offers some component classes which can be used to style aspects of the widget.</p> <p>Note that any attributes provided in the chosen <code>TextAreaTheme</code> will take priority here.</p> Class Description <code>text-area--cursor</code> Target the cursor. <code>text-area--gutter</code> Target the gutter (line number column). <code>text-area--cursor-gutter</code> Target the gutter area of the line the cursor is on. <code>text-area--cursor-line</code> Target the line the cursor is on. <code>text-area--selection</code> Target the current selection. <code>text-area--matching-bracket</code> Target matching brackets."},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.available_languages","title":"available_languages  <code>property</code>","text":"<pre><code>available_languages\n</code></pre> <p>A list of the names of languages available to the <code>TextArea</code>.</p> <p>The values in this list can be assigned to the <code>language</code> reactive attribute of <code>TextArea</code>.</p> <p>The returned list contains the builtin languages plus those registered via the <code>register_language</code> method. Builtin languages will be listed before user-registered languages, but there are no other ordering guarantees.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.available_themes","title":"available_themes  <code>property</code>","text":"<pre><code>available_themes\n</code></pre> <p>A list of the names of the themes available to the <code>TextArea</code>.</p> <p>The values in this list can be assigned <code>theme</code> reactive attribute of <code>TextArea</code>.</p> <p>You can retrieve the full specification for a theme by passing one of the strings from this list into <code>TextAreaTheme.get_by_name(theme_name: str)</code>.</p> <p>Alternatively, you can directly retrieve a list of <code>TextAreaTheme</code> objects (which contain the full theme specification) by calling <code>TextAreaTheme.builtin_themes()</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_end_of_line","title":"cursor_at_end_of_line  <code>property</code>","text":"<pre><code>cursor_at_end_of_line\n</code></pre> <p>True if and only if the cursor is at the end of a row.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_end_of_text","title":"cursor_at_end_of_text  <code>property</code>","text":"<pre><code>cursor_at_end_of_text\n</code></pre> <p>True if and only if the cursor is at the very end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_first_line","title":"cursor_at_first_line  <code>property</code>","text":"<pre><code>cursor_at_first_line\n</code></pre> <p>True if and only if the cursor is on the first line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_last_line","title":"cursor_at_last_line  <code>property</code>","text":"<pre><code>cursor_at_last_line\n</code></pre> <p>True if and only if the cursor is on the last line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_start_of_line","title":"cursor_at_start_of_line  <code>property</code>","text":"<pre><code>cursor_at_start_of_line\n</code></pre> <p>True if and only if the cursor is at column 0.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_at_start_of_text","title":"cursor_at_start_of_text  <code>property</code>","text":"<pre><code>cursor_at_start_of_text\n</code></pre> <p>True if and only if the cursor is at location (0, 0)</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_blink","title":"cursor_blink  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_blink = reactive(True, init=False)\n</code></pre> <p>True if the cursor should blink.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_location","title":"cursor_location  <code>property</code> <code>writable</code>","text":"<pre><code>cursor_location\n</code></pre> <p>The current location of the cursor in the document.</p> <p>This is a utility for accessing the <code>end</code> of <code>TextArea.selection</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cursor_screen_offset","title":"cursor_screen_offset  <code>property</code>","text":"<pre><code>cursor_screen_offset\n</code></pre> <p>The offset of the cursor relative to the screen.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.document","title":"document  <code>instance-attribute</code>","text":"<pre><code>document = Document(text)\n</code></pre> <p>The document this widget is currently editing.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.gutter_width","title":"gutter_width  <code>property</code>","text":"<pre><code>gutter_width\n</code></pre> <p>The width of the gutter (the left column containing line numbers).</p> <p>Returns:</p> Type Description <code>int</code> <p>The cell-width of the line number column. If <code>show_line_numbers</code> is <code>False</code> returns 0.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.history","title":"history  <code>instance-attribute</code>","text":"<pre><code>history = EditHistory(\n    max_checkpoints=max_checkpoints,\n    checkpoint_timer=2.0,\n    checkpoint_max_characters=100,\n)\n</code></pre> <p>A stack (the end of the list is the top of the stack) for tracking edits.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.indent_type","title":"indent_type  <code>instance-attribute</code>","text":"<pre><code>indent_type = 'spaces'\n</code></pre> <p>Whether to indent using tabs or spaces.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.indent_width","title":"indent_width  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>indent_width = reactive(4, init=False)\n</code></pre> <p>The width of tabs or the multiple of spaces to align to on pressing the <code>tab</code> key.</p> <p>If the document currently open contains tabs that are currently visible on screen, altering this value will immediately change the display width of the visible tabs.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.is_syntax_aware","title":"is_syntax_aware  <code>property</code>","text":"<pre><code>is_syntax_aware\n</code></pre> <p>True if the TextArea is currently syntax aware - i.e. it's parsing document content.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.language","title":"language  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>language = language\n</code></pre> <p>The language to use.</p> <p>This must be set to a valid, non-None value for syntax highlighting to work.</p> <p>If the value is a string, a built-in language parser will be used if available.</p> <p>If you wish to use an unsupported language, you'll have to register it first using  <code>TextArea.register_language</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.line_number_start","title":"line_number_start  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>line_number_start = reactive(1, init=False)\n</code></pre> <p>The line number the first line should be.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.match_cursor_bracket","title":"match_cursor_bracket  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>match_cursor_bracket = reactive(True, init=False)\n</code></pre> <p>If the cursor is at a bracket, highlight the matching bracket (if found).</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.matching_bracket_location","title":"matching_bracket_location  <code>property</code>","text":"<pre><code>matching_bracket_location\n</code></pre> <p>The location of the matching bracket, if there is one.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.navigator","title":"navigator  <code>instance-attribute</code>","text":"<pre><code>navigator = DocumentNavigator(wrapped_document)\n</code></pre> <p>Queried to determine where the cursor should move given a navigation action, accounting for wrapping etc.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.read_only","title":"read_only  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>read_only = reactive(False)\n</code></pre> <p>True if the content is read-only.</p> <p>Read-only means end users cannot insert, delete or replace content.</p> <p>The document can still be edited programmatically via the API.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.selected_text","title":"selected_text  <code>property</code>","text":"<pre><code>selected_text\n</code></pre> <p>The text between the start and end points of the current selection.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.selection","title":"selection  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>selection = reactive(\n    Selection(), init=False, always_update=True\n)\n</code></pre> <p>The selection start and end locations (zero-based line_index, offset).</p> <p>This represents the cursor location and the current selection.</p> <p>The <code>Selection.end</code> always refers to the cursor location.</p> <p>If no text is selected, then <code>Selection.end == Selection.start</code> is True.</p> <p>The text selected in the document is available via the <code>TextArea.selected_text</code> property.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.show_line_numbers","title":"show_line_numbers  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_line_numbers = reactive(False, init=False)\n</code></pre> <p>True to show the line number column on the left edge, otherwise False.</p> <p>Changing this value will immediately re-render the <code>TextArea</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.soft_wrap","title":"soft_wrap  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>soft_wrap = reactive(True, init=False)\n</code></pre> <p>True if text should soft wrap.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.text","title":"text  <code>property</code> <code>writable</code>","text":"<pre><code>text\n</code></pre> <p>The entire text content of the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.theme","title":"theme  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>theme = theme\n</code></pre> <p>The name of the theme to use.</p> <p>Themes must be registered using  <code>TextArea.register_theme</code> before they can be used.</p> <p>Syntax highlighting is only possible when the <code>language</code> attribute is set.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.wrap_width","title":"wrap_width  <code>property</code>","text":"<pre><code>wrap_width\n</code></pre> <p>The width which gets used when the document wraps.</p> <p>Accounts for gutter, scrollbars, etc.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.wrapped_document","title":"wrapped_document  <code>instance-attribute</code>","text":"<pre><code>wrapped_document = WrappedDocument(document)\n</code></pre> <p>The wrapped view of the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.Changed","title":"Changed  <code>dataclass</code>","text":"<pre><code>Changed(text_area)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the content inside the TextArea changes.</p> <p>Handle this message using the <code>on</code> decorator - <code>@on(TextArea.Changed)</code> or a method named <code>on_text_area_changed</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.Changed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The <code>TextArea</code> that sent this message.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.Changed.text_area","title":"text_area  <code>instance-attribute</code>","text":"<pre><code>text_area\n</code></pre> <p>The <code>text_area</code> that sent this message.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.SelectionChanged","title":"SelectionChanged  <code>dataclass</code>","text":"<pre><code>SelectionChanged(selection, text_area)\n</code></pre> <p>               Bases: <code>Message</code></p> <p>Posted when the selection changes.</p> <p>This includes when the cursor moves or when text is selected.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.SelectionChanged.selection","title":"selection  <code>instance-attribute</code>","text":"<pre><code>selection\n</code></pre> <p>The new selection.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.SelectionChanged.text_area","title":"text_area  <code>instance-attribute</code>","text":"<pre><code>text_area\n</code></pre> <p>The <code>text_area</code> that sent this message.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down(select=False)\n</code></pre> <p>Move the cursor down one cell.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_down(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_left","title":"action_cursor_left","text":"<pre><code>action_cursor_left(select=False)\n</code></pre> <p>Move the cursor one location to the left.</p> <p>If the cursor is at the left edge of the document, try to move it to the end of the previous line.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_left(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_line_end","title":"action_cursor_line_end","text":"<pre><code>action_cursor_line_end(select=False)\n</code></pre> <p>Move the cursor to the end of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_line_start","title":"action_cursor_line_start","text":"<pre><code>action_cursor_line_start(select=False)\n</code></pre> <p>Move the cursor to the start of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_page_down","title":"action_cursor_page_down","text":"<pre><code>action_cursor_page_down()\n</code></pre> <p>Move the cursor and scroll down one page.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_page_up","title":"action_cursor_page_up","text":"<pre><code>action_cursor_page_up()\n</code></pre> <p>Move the cursor and scroll up one page.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_right","title":"action_cursor_right","text":"<pre><code>action_cursor_right(select=False)\n</code></pre> <p>Move the cursor one location to the right.</p> <p>If the cursor is at the end of a line, attempt to go to the start of the next line.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_right(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up(select=False)\n</code></pre> <p>Move the cursor up one cell.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, select the text while moving.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_up(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_word_left","title":"action_cursor_word_left","text":"<pre><code>action_cursor_word_left(select=False)\n</code></pre> <p>Move the cursor left by a single word, skipping trailing whitespace.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>Whether to select while moving the cursor.</p> <code>False</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_word_left(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_cursor_word_right","title":"action_cursor_word_right","text":"<pre><code>action_cursor_word_right(select=False)\n</code></pre> <p>Move the cursor right by a single word, skipping leading whitespace.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_left","title":"action_delete_left","text":"<pre><code>action_delete_left()\n</code></pre> <p>Deletes the character to the left of the cursor and updates the cursor location.</p> <p>If there's a selection, then the selected range is deleted.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_line","title":"action_delete_line","text":"<pre><code>action_delete_line()\n</code></pre> <p>Deletes the lines which intersect with the selection.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_right","title":"action_delete_right","text":"<pre><code>action_delete_right()\n</code></pre> <p>Deletes the character to the right of the cursor and keeps the cursor at the same location.</p> <p>If there's a selection, then the selected range is deleted.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_to_end_of_line","title":"action_delete_to_end_of_line","text":"<pre><code>action_delete_to_end_of_line()\n</code></pre> <p>Deletes from the cursor location to the end of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_to_end_of_line_or_delete_line","title":"action_delete_to_end_of_line_or_delete_line  <code>async</code>","text":"<pre><code>action_delete_to_end_of_line_or_delete_line()\n</code></pre> <p>Deletes from the cursor location to the end of the line, or deletes the line.</p> <p>The line will be deleted if the line is empty.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_to_start_of_line","title":"action_delete_to_start_of_line","text":"<pre><code>action_delete_to_start_of_line()\n</code></pre> <p>Deletes from the cursor location to the start of the line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_word_left","title":"action_delete_word_left","text":"<pre><code>action_delete_word_left()\n</code></pre> <p>Deletes the word to the left of the cursor and updates the cursor location.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_delete_word_right","title":"action_delete_word_right","text":"<pre><code>action_delete_word_right()\n</code></pre> <p>Deletes the word to the right of the cursor and keeps the cursor at the same location.</p> <p>Note that the location that we delete to using this action is not the same as the location we move to when we move the cursor one word to the right. This action does not skip leading whitespace, whereas cursor movement does.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_redo","title":"action_redo","text":"<pre><code>action_redo()\n</code></pre> <p>Redo the most recently undone batch of edits.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_select_all","title":"action_select_all","text":"<pre><code>action_select_all()\n</code></pre> <p>Select all the text in the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_select_line","title":"action_select_line","text":"<pre><code>action_select_line()\n</code></pre> <p>Select all the text on the current line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.action_undo","title":"action_undo","text":"<pre><code>action_undo()\n</code></pre> <p>Undo the edits since the last checkpoint (the most recent batch of edits).</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cell_width_to_column_index","title":"cell_width_to_column_index","text":"<pre><code>cell_width_to_column_index(cell_width, row_index)\n</code></pre> <p>Return the column that the cell width corresponds to on the given row.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The cell width to convert.</p> required <code>int</code> <p>The index of the row to examine.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The column corresponding to the cell width on that row.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cell_width_to_column_index(cell_width)","title":"<code>cell_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.cell_width_to_column_index(row_index)","title":"<code>row_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.check_consume_key","title":"check_consume_key","text":"<pre><code>check_consume_key(key, character=None)\n</code></pre> <p>Check if the widget may consume the given key.</p> <p>As a textarea we are expecting to capture printable keys.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>A key identifier.</p> required <code>str | None</code> <p>A character associated with the key, or <code>None</code> if there isn't one.</p> <code>None</code> <p>Returns:</p> Type Description <code>bool</code> <p><code>True</code> if the widget may capture the key in it's <code>Key</code> message, or <code>False</code> if it won't.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.check_consume_key(key)","title":"<code>key</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.check_consume_key(character)","title":"<code>character</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.clamp_visitable","title":"clamp_visitable","text":"<pre><code>clamp_visitable(location)\n</code></pre> <p>Clamp the given location to the nearest visitable location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to clamp.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The nearest location that we could conceivably navigate to using the cursor.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.clamp_visitable(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Delete all text from the document.</p> <p>Returns:</p> Type Description <code>EditResult</code> <p>An EditResult relating to the deletion of all content.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor","title":"code_editor  <code>classmethod</code>","text":"<pre><code>code_editor(\n    text=\"\",\n    *,\n    language=None,\n    theme=\"monokai\",\n    soft_wrap=False,\n    tab_behavior=\"indent\",\n    read_only=False,\n    show_line_numbers=True,\n    line_number_start=1,\n    max_checkpoints=50,\n    name=None,\n    id=None,\n    classes=None,\n    disabled=False,\n    tooltip=None\n)\n</code></pre> <p>Construct a new <code>TextArea</code> with sensible defaults for editing code.</p> <p>This instantiates a <code>TextArea</code> with line numbers enabled, soft wrapping disabled, \"indent\" tab behavior, and the \"monokai\" theme.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The initial text to load into the TextArea.</p> <code>''</code> <code>str | None</code> <p>The language to use.</p> <code>None</code> <code>str</code> <p>The theme to use.</p> <code>'monokai'</code> <code>bool</code> <p>Enable soft wrapping.</p> <code>False</code> <code>Literal['focus', 'indent']</code> <p>If 'focus', pressing tab will switch focus. If 'indent', pressing tab will insert a tab.</p> <code>'indent'</code> <code>bool</code> <p>Show line numbers on the left edge.</p> <code>True</code> <code>int</code> <p>What line number to start on.</p> <code>1</code> <code>str | None</code> <p>The name of the <code>TextArea</code> widget.</p> <code>None</code> <code>str | None</code> <p>The ID of the widget, used to refer to it from Textual CSS.</p> <code>None</code> <code>str | None</code> <p>One or more Textual CSS compatible class names separated by spaces.</p> <code>None</code> <code>bool</code> <p>True if the widget is disabled.</p> <code>False</code> <code>RenderableType | None</code> <p>Optional tooltip</p> <code>None</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(theme)","title":"<code>theme</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(soft_wrap)","title":"<code>soft_wrap</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(tab_behavior)","title":"<code>tab_behavior</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(show_line_numbers)","title":"<code>show_line_numbers</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(line_number_start)","title":"<code>line_number_start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(name)","title":"<code>name</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(id)","title":"<code>id</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.code_editor(tooltip)","title":"<code>tooltip</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete","title":"delete","text":"<pre><code>delete(start, end, *, maintain_selection_offset=True)\n</code></pre> <p>Delete the text between two locations in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location.</p> required <code>Location</code> <p>The end location.</p> required <code>bool</code> <p>If True, the active Selection will be updated such that the same text is selected before and after the selection, if possible. Otherwise, the cursor will jump to the end point of the edit.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the edit.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.delete(maintain_selection_offset)","title":"<code>maintain_selection_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.edit","title":"edit","text":"<pre><code>edit(edit)\n</code></pre> <p>Perform an Edit.</p> <p>Parameters:</p> Name Type Description Default <code>Edit</code> <p>The Edit to perform.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>Data relating to the edit that may be useful. The data returned</p> <code>EditResult</code> <p>may be different depending on the edit performed.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.edit(edit)","title":"<code>edit</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.find_matching_bracket","title":"find_matching_bracket","text":"<pre><code>find_matching_bracket(bracket, search_from)\n</code></pre> <p>If the character is a bracket, find the matching bracket.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The character we're searching for the matching bracket of.</p> required <code>Location</code> <p>The location to start the search.</p> required <p>Returns:</p> Type Description <code>Location | None</code> <p>The <code>Location</code> of the matching bracket, or <code>None</code> if it's not found.</p> <code>Location | None</code> <p>If the character is not available for bracket matching, <code>None</code> is returned.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.find_matching_bracket(bracket)","title":"<code>bracket</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.find_matching_bracket(search_from)","title":"<code>search_from</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_column_width","title":"get_column_width","text":"<pre><code>get_column_width(row, column)\n</code></pre> <p>Get the cell offset of the column from the start of the row.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The row index.</p> required <code>int</code> <p>The column index (codepoint offset from start of row).</p> required <p>Returns:</p> Type Description <code>int</code> <p>The cell width of the column relative to the start of the row.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_column_width(row)","title":"<code>row</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_column_width(column)","title":"<code>column</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_down_location","title":"get_cursor_down_location","text":"<pre><code>get_cursor_down_location()\n</code></pre> <p>Get the location the cursor will move to if it moves down.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will move to if it moves down.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_left_location","title":"get_cursor_left_location","text":"<pre><code>get_cursor_left_location()\n</code></pre> <p>Get the location the cursor will move to if it moves left.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location of the cursor if it moves left.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_line_end_location","title":"get_cursor_line_end_location","text":"<pre><code>get_cursor_line_end_location()\n</code></pre> <p>Get the location of the end of the current line.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The (row, column) location of the end of the cursors current line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_line_start_location","title":"get_cursor_line_start_location","text":"<pre><code>get_cursor_line_start_location(smart_home=False)\n</code></pre> <p>Get the location of the start of the current line.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>If True, use \"smart home key\" behavior - go to the first non-whitespace character on the line, and if already there, go to offset 0. Smart home only works when wrapping is disabled.</p> <code>False</code> <p>Returns:</p> Type Description <code>Location</code> <p>The (row, column) location of the start of the cursors current line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_line_start_location(smart_home)","title":"<code>smart_home</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_right_location","title":"get_cursor_right_location","text":"<pre><code>get_cursor_right_location()\n</code></pre> <p>Get the location the cursor will move to if it moves right.</p> <p>Returns:</p> Type Description <code>Location</code> <p>the location the cursor will move to if it moves right.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_up_location","title":"get_cursor_up_location","text":"<pre><code>get_cursor_up_location()\n</code></pre> <p>Get the location the cursor will move to if it moves up.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will move to if it moves up.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_word_left_location","title":"get_cursor_word_left_location","text":"<pre><code>get_cursor_word_left_location()\n</code></pre> <p>Get the location the cursor will jump to if it goes 1 word left.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will jump on \"jump word left\".</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_cursor_word_right_location","title":"get_cursor_word_right_location","text":"<pre><code>get_cursor_word_right_location()\n</code></pre> <p>Get the location the cursor will jump to if it goes 1 word right.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The location the cursor will jump on \"jump word right\".</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_line","title":"get_line","text":"<pre><code>get_line(line_index)\n</code></pre> <p>Retrieve the line at the given line index.</p> <p>You can stylize the Text object returned here to apply additional styling to TextArea content.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A <code>rich.Text</code> object containing the requested line.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_line(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_target_document_location","title":"get_target_document_location","text":"<pre><code>get_target_document_location(event)\n</code></pre> <p>Given a MouseEvent, return the row and column offset of the event in document-space.</p> <p>Parameters:</p> Name Type Description Default <code>MouseEvent</code> <p>The MouseEvent.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location of the mouse event within the document.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_target_document_location(event)","title":"<code>event</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_text_range","title":"get_text_range","text":"<pre><code>get_text_range(start, end)\n</code></pre> <p>Get the text between a start and end location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location.</p> required <code>Location</code> <p>The end location.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The text between start and end.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_text_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.get_text_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert","title":"insert","text":"<pre><code>insert(\n    text, location=None, *, maintain_selection_offset=True\n)\n</code></pre> <p>Insert text into the document.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text to insert.</p> required <code>Location | None</code> <p>The location to insert text, or None to use the cursor location.</p> <code>None</code> <code>bool</code> <p>If True, the active Selection will be updated such that the same text is selected before and after the selection, if possible. Otherwise, the cursor will jump to the end point of the edit.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the edit.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.insert(maintain_selection_offset)","title":"<code>maintain_selection_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.load_text","title":"load_text","text":"<pre><code>load_text(text)\n</code></pre> <p>Load text into the TextArea.</p> <p>This will replace the text currently in the TextArea and clear the edit history.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text to load into the TextArea.</p> required"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.load_text(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor","title":"move_cursor","text":"<pre><code>move_cursor(\n    location, select=False, center=False, record_width=True\n)\n</code></pre> <p>Move the cursor to a location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to move the cursor to.</p> required <code>bool</code> <p>If True, select text between the old and new location.</p> <code>False</code> <code>bool</code> <p>If True, scroll such that the cursor is centered.</p> <code>False</code> <code>bool</code> <p>If True, record the cursor column cell width after navigating so that we jump back to the same width the next time we move to a row that is wide enough.</p> <code>True</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(center)","title":"<code>center</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor(record_width)","title":"<code>record_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative","title":"move_cursor_relative","text":"<pre><code>move_cursor_relative(\n    rows=0,\n    columns=0,\n    select=False,\n    center=False,\n    record_width=True,\n)\n</code></pre> <p>Move the cursor relative to its current location in document-space.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The number of rows to move down by (negative to move up)</p> <code>0</code> <code>int</code> <p>The number of columns to move right by (negative to move left)</p> <code>0</code> <code>bool</code> <p>If True, select text between the old and new location.</p> <code>False</code> <code>bool</code> <p>If True, scroll such that the cursor is centered.</p> <code>False</code> <code>bool</code> <p>If True, record the cursor column cell width after navigating so that we jump back to the same width the next time we move to a row that is wide enough.</p> <code>True</code>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(rows)","title":"<code>rows</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(columns)","title":"<code>columns</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(select)","title":"<code>select</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(center)","title":"<code>center</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.move_cursor_relative(record_width)","title":"<code>record_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.record_cursor_width","title":"record_cursor_width","text":"<pre><code>record_cursor_width()\n</code></pre> <p>Record the current cell width of the cursor.</p> <p>This is used where we navigate up and down through rows. If we're in the middle of a row, and go down to a row with no content, then we go down to another row, we want our cursor to jump back to the same offset that we were originally at.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.redo","title":"redo","text":"<pre><code>redo()\n</code></pre> <p>Redo the most recently undone batch of edits.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_language","title":"register_language","text":"<pre><code>register_language(language, highlight_query)\n</code></pre> <p>Register a language and corresponding highlight query.</p> <p>Calling this method does not change the language of the <code>TextArea</code>. On switching to this language (via the <code>language</code> reactive attribute), syntax highlighting will be performed using the given highlight query.</p> <p>If a string <code>name</code> is supplied for a builtin supported language, then this method will update the default highlight query for that language.</p> <p>Registering a language only registers it to this instance of <code>TextArea</code>.</p> <p>Parameters:</p> Name Type Description Default <code>'str | Language'</code> <p>A string referring to a builtin language or a tree-sitter <code>Language</code> object.</p> required <code>str</code> <p>The highlight query to use for syntax highlighting this language.</p> required"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_language(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_language(highlight_query)","title":"<code>highlight_query</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.register_theme","title":"register_theme","text":"<pre><code>register_theme(theme)\n</code></pre> <p>Register a theme for use by the <code>TextArea</code>.</p> <p>After registering a theme, you can set themes by assigning the theme name to the <code>TextArea.theme</code> reactive attribute. For example <code>text_area.theme = \"my_custom_theme\"</code> where <code>\"my_custom_theme\"</code> is the name of the theme you registered.</p> <p>If you supply a theme with a name that already exists that theme will be overwritten.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace","title":"replace","text":"<pre><code>replace(\n    insert, start, end, *, maintain_selection_offset=True\n)\n</code></pre> <p>Replace text in the document with new text.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The text to insert.</p> required <code>Location</code> <p>The start location</p> required <code>Location</code> <p>The end location.</p> required <code>bool</code> <p>If True, the active Selection will be updated such that the same text is selected before and after the selection, if possible. Otherwise, the cursor will jump to the end point of the edit.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the edit.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(insert)","title":"<code>insert</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.replace(maintain_selection_offset)","title":"<code>maintain_selection_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.scroll_cursor_visible","title":"scroll_cursor_visible","text":"<pre><code>scroll_cursor_visible(center=False, animate=False)\n</code></pre> <p>Scroll the <code>TextArea</code> such that the cursor is visible on screen.</p> <p>Parameters:</p> Name Type Description Default <code>bool</code> <p>True if the cursor should be scrolled to the center.</p> <code>False</code> <code>bool</code> <p>True if we should animate while scrolling.</p> <code>False</code> <p>Returns:</p> Type Description <code>Offset</code> <p>The offset that was scrolled to bring the cursor into view.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.scroll_cursor_visible(center)","title":"<code>center</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.scroll_cursor_visible(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.select_all","title":"select_all","text":"<pre><code>select_all()\n</code></pre> <p>Select all of the text in the <code>TextArea</code>.</p>"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.select_line","title":"select_line","text":"<pre><code>select_line(index)\n</code></pre> <p>Select all the text in the specified line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line to select (starting from 0).</p> required"},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.select_line(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets._text_area.TextArea.undo","title":"undo","text":"<pre><code>undo()\n</code></pre> <p>Undo the edits since the last checkpoint (the most recent batch of edits).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Highlight","title":"Highlight  <code>module-attribute</code>","text":"<pre><code>Highlight = Tuple[StartColumn, EndColumn, HighlightName]\n</code></pre> <p>A tuple representing a syntax highlight within one line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Location","title":"Location  <code>module-attribute</code>","text":"<pre><code>Location = Tuple[int, int]\n</code></pre> <p>A location (row, column) within the document. Indexing starts at 0.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document","title":"Document","text":"<pre><code>Document(text)\n</code></pre> <p>               Bases: <code>DocumentBase</code></p> <p>A document which can be opened in a TextArea.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.end","title":"end  <code>property</code>","text":"<pre><code>end\n</code></pre> <p>Returns the location of the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.line_count","title":"line_count  <code>property</code>","text":"<pre><code>line_count\n</code></pre> <p>Returns the number of lines in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.lines","title":"lines  <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>Get the document as a list of strings, where each string represents a line.</p> <p>Newline characters are not included in at the end of the strings.</p> <p>The newline character used in this document can be found via the <code>Document.newline</code> property.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.newline","title":"newline  <code>property</code>","text":"<pre><code>newline\n</code></pre> <p>Get the Newline used in this document (e.g. ' ', ' '. etc.)</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.start","title":"start  <code>property</code>","text":"<pre><code>start\n</code></pre> <p>Returns the location of the start of the document (0, 0).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.text","title":"text  <code>property</code>","text":"<pre><code>text\n</code></pre> <p>Get the text from the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_index_from_location","title":"get_index_from_location","text":"<pre><code>get_index_from_location(location)\n</code></pre> <p>Given a location, returns the index from the document's text.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location in the document.</p> required <p>Returns:</p> Type Description <code>int</code> <p>The index in the document's text.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_index_from_location(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_line","title":"get_line","text":"<pre><code>get_line(index)\n</code></pre> <p>Returns the line with the given index from the document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The string representing the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_line(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_location_from_index","title":"get_location_from_index","text":"<pre><code>get_location_from_index(index)\n</code></pre> <p>Given an index in the document's text, returns the corresponding location.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index in the document's text.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The corresponding location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_location_from_index(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_size","title":"get_size","text":"<pre><code>get_size(tab_width)\n</code></pre> <p>The Size of the document, taking into account the tab rendering width.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The width to use for tab indents.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>The size (width, height) of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_size(tab_width)","title":"<code>tab_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_text_range","title":"get_text_range","text":"<pre><code>get_text_range(start, end)\n</code></pre> <p>Get the text that falls between the start and end locations.</p> <p>Returns the text between <code>start</code> and <code>end</code>, including the appropriate line separator character as specified by <code>Document._newline</code>. Note that <code>_newline</code> is set automatically to the first line separator character found in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location of the selection.</p> required <code>Location</code> <p>The end location of the selection.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The text between start (inclusive) and end (exclusive).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_text_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.get_text_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range","title":"replace_range","text":"<pre><code>replace_range(start, end, text)\n</code></pre> <p>Replace text at the given range.</p> <p>This is the only method by which a document may be updated.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A tuple (row, column) where the edit starts.</p> required <code>Location</code> <p>A tuple (row, column) where the edit ends.</p> required <code>str</code> <p>The text to insert between start and end.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>The EditResult containing information about the completed replace operation.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Document.replace_range(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase","title":"DocumentBase","text":"<p>               Bases: <code>ABC</code></p> <p>Describes the minimum functionality a Document implementation must provide in order to be used by the TextArea widget.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.end","title":"end  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>end\n</code></pre> <p>Returns the location of the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.line_count","title":"line_count  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>line_count\n</code></pre> <p>Returns the number of lines in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.lines","title":"lines  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>Get the lines of the document as a list of strings.</p> <p>The strings should not include newline characters. The newline character used for the document can be retrieved via the newline property.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.newline","title":"newline  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>newline\n</code></pre> <p>Return the line separator used in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.start","title":"start  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>start\n</code></pre> <p>Returns the location of the start of the document (0, 0).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.text","title":"text  <code>abstractmethod</code> <code>property</code>","text":"<pre><code>text\n</code></pre> <p>The text from the document as a string.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_line","title":"get_line  <code>abstractmethod</code>","text":"<pre><code>get_line(index)\n</code></pre> <p>Returns the line with the given index from the document.</p> <p>This is used in rendering lines, and will be called by the TextArea for each line that is rendered.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The str instance representing the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_line(index)","title":"<code>index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_size","title":"get_size  <code>abstractmethod</code>","text":"<pre><code>get_size(indent_width)\n</code></pre> <p>Get the size of the document.</p> <p>The height is generally the number of lines, and the width is generally the maximum cell length of all the lines.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The width to use for tab characters.</p> required <p>Returns:</p> Type Description <code>Size</code> <p>The Size of the document bounding box.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_size(indent_width)","title":"<code>indent_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_text_range","title":"get_text_range  <code>abstractmethod</code>","text":"<pre><code>get_text_range(start, end)\n</code></pre> <p>Get the text that falls between the start and end locations.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location of the selection.</p> required <code>Location</code> <p>The end location of the selection.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The text between start (inclusive) and end (exclusive).</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_text_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.get_text_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree","title":"query_syntax_tree","text":"<pre><code>query_syntax_tree(query, start_point=None, end_point=None)\n</code></pre> <p>Query the tree-sitter syntax tree.</p> <p>The default implementation always returns an empty list.</p> <p>To support querying in a subclass, this must be implemented.</p> <p>Parameters:</p> Name Type Description Default <code>Query</code> <p>The tree-sitter Query to perform.</p> required <code>tuple[int, int] | None</code> <p>The (row, column byte) to start the query at.</p> <code>None</code> <code>tuple[int, int] | None</code> <p>The (row, column byte) to end the query at.</p> <code>None</code> <p>Returns:</p> Type Description <code>list[tuple[Node, str]]</code> <p>A tuple containing the nodes and text captured by the query.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree(query)","title":"<code>query</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree(start_point)","title":"<code>start_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.query_syntax_tree(end_point)","title":"<code>end_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range","title":"replace_range  <code>abstractmethod</code>","text":"<pre><code>replace_range(start, end, text)\n</code></pre> <p>Replace the text at the given range.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A tuple (row, column) where the edit starts.</p> required <code>Location</code> <p>A tuple (row, column) where the edit ends.</p> required <code>str</code> <p>The text to insert between start and end.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>The new end location after the edit is complete.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentBase.replace_range(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator","title":"DocumentNavigator","text":"<pre><code>DocumentNavigator(wrapped_document)\n</code></pre> <p>Cursor navigation in the TextArea is \"wrapping-aware\".</p> <p>Although the cursor location (the selection) is represented as a location in the raw document, when you actually move the cursor, it must take wrapping into account (otherwise things start to look really confusing to the user where wrapping is involved).</p> <p>Your cursor visually moves through the wrapped version of the document, rather than the raw document. So, for example, pressing down on the keyboard may move your cursor to a position further along the current raw document line, rather than on to the next line in the raw document.</p> <p>The DocumentNavigator class manages that behavior.</p> <p>Given a cursor location in the unwrapped document, and a cursor movement action, this class can inform us of the destination the cursor will move to considering the current wrapping width and document content. It can also translate between document-space (a location/(row,col) in the raw document), and visual-space (x and y offsets) as the user will see them on screen after the document has been wrapped.</p> <p>For this to work correctly, the wrapped_document and document must be synchronised. This means that if you make an edit to the document, you must then update the wrapped document, and then you may query the document navigator.</p> <p>Naming conventions:</p> <p>A \"location\" refers to a location, in document-space (in the raw document). It is entirely unrelated to visually positioning. A location in a document can appear in any visual position, as it is influenced by scrolling, wrapping, gutter settings, and the cell width of characters to its left.</p> <p>A \"wrapped section\" refers to a portion of the line accounting for wrapping. For example the line \"ABCDEF\" when wrapped at width 3 will result in 2 sections: \"ABC\" and \"DEF\". In this case, we call \"ABC\" is the first section/wrapped section.</p> <p>A \"wrap offset\" is an integer representing the index at which wrapping occurs in a document-space line. This is a codepoint index, rather than a visual offset. In \"ABCDEF\" with wrapping at width 3, there is a single wrap offset of 3.</p> <p>\"Smart home\" refers to a modification of the \"home\" key behavior. If smart home is enabled, the first non-whitespace character is considered to be the home location. If the cursor is currently at this position, then the normal home behavior applies. This is designed to make cursor movement more useful to end users.</p> <p>Parameters:</p> Name Type Description Default <code>WrappedDocument</code> <p>The WrappedDocument to be used when making navigation decisions.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator(wrapped_document)","title":"<code>wrapped_document</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.last_x_offset","title":"last_x_offset  <code>instance-attribute</code>","text":"<pre><code>last_x_offset = 0\n</code></pre> <p>Remembers the last x offset (cell width) the cursor was moved horizontally to, so that it can be restored on vertical movement where possible.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.clamp_reachable","title":"clamp_reachable","text":"<pre><code>clamp_reachable(location)\n</code></pre> <p>Given a location, return the nearest location that corresponds to a reachable location in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A location.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The nearest reachable location in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.clamp_reachable(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_above","title":"get_location_above","text":"<pre><code>get_location_above(location)\n</code></pre> <p>Get the location visually aligned with the cell above the given location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The cell above the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_above(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_at_y_offset","title":"get_location_at_y_offset","text":"<pre><code>get_location_at_y_offset(location, vertical_offset)\n</code></pre> <p>Apply a visual vertical offset to a location and check the resulting location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <code>int</code> <p>The vertical offset to move (negative=up, positive=down).</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location after the offset has been applied.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_at_y_offset(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_at_y_offset(vertical_offset)","title":"<code>vertical_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_below","title":"get_location_below","text":"<pre><code>get_location_below(location)\n</code></pre> <p>Given a location in the raw document, return the raw document location corresponding to moving down in the wrapped representation of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location in the raw document.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location which is visually below the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_below(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_end","title":"get_location_end","text":"<pre><code>get_location_end(location)\n</code></pre> <p>Get the location corresponding to the end of the current section.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The current location.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location corresponding to the end of the wrapped line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_end(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_home","title":"get_location_home","text":"<pre><code>get_location_home(location, smart_home=False)\n</code></pre> <p>Get the \"home location\" corresponding to the given location.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to consider.</p> required <code>bool</code> <p>Enable/disable 'smart home' behavior.</p> <code>False</code> <p>Returns:</p> Type Description <code>Location</code> <p>The home location, relative to the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_home(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_home(smart_home)","title":"<code>smart_home</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_left","title":"get_location_left","text":"<pre><code>get_location_left(location)\n</code></pre> <p>Get the location to the left of the given location.</p> <p>Note that if the given location is at the start of the line, then this will return the end of the preceding line, since that's where you would expect the cursor to move.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location to the right.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_left(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_right","title":"get_location_right","text":"<pre><code>get_location_right(location)\n</code></pre> <p>Get the location to the right of the given location.</p> <p>Note that if the given location is at the end of the line, then this will return the start of the following line, since that's where you would expect the cursor to move.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to start from.</p> required <p>Returns:</p> Type Description <code>Location</code> <p>The location to the right.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.get_location_right(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document","title":"is_end_of_document","text":"<pre><code>is_end_of_document(location)\n</code></pre> <p>Check if a location is at the end of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is at the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document_line","title":"is_end_of_document_line","text":"<pre><code>is_end_of_document_line(location)\n</code></pre> <p>True if the location is at the end of a line in the document.</p> <p>Note that the \"end\" of a line is equal to its length (one greater than the final index), since there is a space at the end of the line for the cursor to rest.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the document is at the end of a line in the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_wrapped_line","title":"is_end_of_wrapped_line","text":"<pre><code>is_end_of_wrapped_line(location)\n</code></pre> <p>True if the location is at the end of a wrapped line.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the last wrapped section of any line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_end_of_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_document_line","title":"is_first_document_line","text":"<pre><code>is_first_document_line(location)\n</code></pre> <p>Check if the given location is on the first line in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the first line of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_wrapped_line","title":"is_first_wrapped_line","text":"<pre><code>is_first_wrapped_line(location)\n</code></pre> <p>Check if the given location is on the first wrapped section of the first line in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the first wrapped section of the first line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_first_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_document_line","title":"is_last_document_line","text":"<pre><code>is_last_document_line(location)\n</code></pre> <p>Check if the given location is on the last line of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True when the location is on the last line of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_wrapped_line","title":"is_last_wrapped_line","text":"<pre><code>is_last_wrapped_line(location)\n</code></pre> <p>Check if the given location is on the last wrapped section of the last line.</p> <p>That is, the cursor is visually on the last rendered row.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is on the last section of the last line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_last_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document","title":"is_start_of_document","text":"<pre><code>is_start_of_document(location)\n</code></pre> <p>Check if a location is at the start of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to examine.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if and only if the cursor is at document location (0, 0)</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document_line","title":"is_start_of_document_line","text":"<pre><code>is_start_of_document_line(location)\n</code></pre> <p>True when the location is at the start of the first document line.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the location is at column index 0.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_document_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_wrapped_line","title":"is_start_of_wrapped_line","text":"<pre><code>is_start_of_wrapped_line(location)\n</code></pre> <p>True when the location is at the start of the first wrapped line.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to check.</p> required <p>Returns:</p> Type Description <code>bool</code> <p>True if the location is at column index 0.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.DocumentNavigator.is_start_of_wrapped_line(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit","title":"Edit  <code>dataclass</code>","text":"<pre><code>Edit(\n    text,\n    from_location,\n    to_location,\n    maintain_selection_offset,\n)\n</code></pre> <p>Implements the Undoable protocol to replace text at some range within a document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.bottom","title":"bottom  <code>property</code>","text":"<pre><code>bottom\n</code></pre> <p>The Location impacted by this edit that is nearest the end of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.from_location","title":"from_location  <code>instance-attribute</code>","text":"<pre><code>from_location\n</code></pre> <p>The start location of the insert.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.maintain_selection_offset","title":"maintain_selection_offset  <code>instance-attribute</code>","text":"<pre><code>maintain_selection_offset\n</code></pre> <p>If True, the selection will maintain its offset to the replacement range.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.text","title":"text  <code>instance-attribute</code>","text":"<pre><code>text\n</code></pre> <p>The text to insert. An empty string is equivalent to deletion.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.to_location","title":"to_location  <code>instance-attribute</code>","text":"<pre><code>to_location\n</code></pre> <p>The end location of the insert</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.top","title":"top  <code>property</code>","text":"<pre><code>top\n</code></pre> <p>The Location impacted by this edit that is nearest the start of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.after","title":"after","text":"<pre><code>after(text_area)\n</code></pre> <p>Hook for running code after an Edit has been performed via <code>Edit.do</code> and side effects such as re-wrapping the document and refreshing the display have completed.</p> <p>For example, we can't record cursor visual offset until we know where the cursor will land after wrapping has been performed, so we must wait until here to do it.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The <code>TextArea</code> this operation was performed on.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.after(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.do","title":"do","text":"<pre><code>do(text_area, record_selection=True)\n</code></pre> <p>Perform the edit operation.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The <code>TextArea</code> to perform the edit on.</p> required <code>bool</code> <p>If True, record the current selection in the TextArea so that it may be restored if this Edit is undone in the future.</p> <code>True</code> <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the replace operation.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.do(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.do(record_selection)","title":"<code>record_selection</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.undo","title":"undo","text":"<pre><code>undo(text_area)\n</code></pre> <p>Undo the edit operation.</p> <p>Looks at the data stored in the edit, and performs the inverse operation of <code>Edit.do</code>.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The <code>TextArea</code> to undo the insert operation on.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>An <code>EditResult</code> containing information about the replace operation.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Edit.undo(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory","title":"EditHistory  <code>dataclass</code>","text":"<pre><code>EditHistory(\n    max_checkpoints,\n    checkpoint_timer,\n    checkpoint_max_characters,\n)\n</code></pre> <p>Manages batching/checkpointing of Edits into groups that can be undone/redone in the TextArea.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.checkpoint_max_characters","title":"checkpoint_max_characters  <code>instance-attribute</code>","text":"<pre><code>checkpoint_max_characters\n</code></pre> <p>Maximum number of characters that can appear in a batch before a new batch is formed.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.checkpoint_timer","title":"checkpoint_timer  <code>instance-attribute</code>","text":"<pre><code>checkpoint_timer\n</code></pre> <p>Maximum number of seconds since last edit until a new batch is created.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.redo_stack","title":"redo_stack  <code>property</code>","text":"<pre><code>redo_stack\n</code></pre> <p>A copy of the redo stack, with references to the original Edits.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.undo_stack","title":"undo_stack  <code>property</code>","text":"<pre><code>undo_stack\n</code></pre> <p>A copy of the undo stack, with references to the original Edits.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.checkpoint","title":"checkpoint","text":"<pre><code>checkpoint()\n</code></pre> <p>Ensure the next recorded edit starts a new batch.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Completely clear the history.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.record","title":"record","text":"<pre><code>record(edit)\n</code></pre> <p>Record an Edit so that it may be undone and redone.</p> <p>Determines whether to batch the Edit with previous Edits, or create a new batch/checkpoint.</p> <p>This method must be called exactly once per edit, in chronological order.</p> <p>A new batch/checkpoint is created when:</p> <ul> <li>The undo stack is empty.</li> <li>The checkpoint timer expires.</li> <li>The maximum number of characters permitted in a checkpoint is reached.</li> <li>A redo is performed (we should not add new edits to a batch that has been redone).</li> <li>The programmer has requested a new batch via a call to <code>force_new_batch</code>.<ul> <li>e.g. the TextArea widget may call this method in some circumstances.</li> <li>Clicking to move the cursor elsewhere in the document should create a new batch.</li> <li>Movement of the cursor via a keyboard action that is NOT an edit.</li> <li>Blurring the TextArea creates a new checkpoint.</li> </ul> </li> <li>The current edit involves a deletion/replacement and the previous edit did not.</li> <li>The current edit is a pure insertion and the previous edit was not.</li> <li>The edit involves insertion or deletion of one or more newline characters.</li> <li>An edit which inserts more than a single character (a paste) gets an isolated batch.</li> </ul> <p>Parameters:</p> Name Type Description Default <code>Edit</code> <p>The edit to record.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.EditHistory.record(edit)","title":"<code>edit</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.EditResult","title":"EditResult  <code>dataclass</code>","text":"<pre><code>EditResult(end_location, replaced_text)\n</code></pre> <p>Contains information about an edit that has occurred.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditResult.end_location","title":"end_location  <code>instance-attribute</code>","text":"<pre><code>end_location\n</code></pre> <p>The new end Location after the edit is complete.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.EditResult.replaced_text","title":"replaced_text  <code>instance-attribute</code>","text":"<pre><code>replaced_text\n</code></pre> <p>The text that was replaced.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.LanguageDoesNotExist","title":"LanguageDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the user tries to use a language which does not exist. This means a language which is not builtin, or has not been registered.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection","title":"Selection","text":"<p>               Bases: <code>NamedTuple</code></p> <p>A range of characters within a document from a start point to the end point. The location of the cursor is always considered to be the <code>end</code> point of the selection. The selection is inclusive of the minimum point and exclusive of the maximum point.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.end","title":"end  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>end = (0, 0)\n</code></pre> <p>The end location of the selection.</p> <p>If you were to click and drag a selection inside a text-editor, this is where you finished dragging.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.is_empty","title":"is_empty  <code>property</code>","text":"<pre><code>is_empty\n</code></pre> <p>Return True if the selection has 0 width, i.e. it's just a cursor.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.start","title":"start  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>start = (0, 0)\n</code></pre> <p>The start location of the selection.</p> <p>If you were to click and drag a selection inside a text-editor, this is where you started dragging.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.cursor","title":"cursor  <code>classmethod</code>","text":"<pre><code>cursor(location)\n</code></pre> <p>Create a Selection with the same start and end point - a \"cursor\".</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location to create the zero-width Selection.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.Selection.cursor(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument","title":"SyntaxAwareDocument","text":"<pre><code>SyntaxAwareDocument(text, language)\n</code></pre> <p>               Bases: <code>Document</code></p> <p>A wrapper around a Document which also maintains a tree-sitter syntax tree when the document is edited.</p> <p>The primary reason for this split is actually to keep tree-sitter stuff separate, since it isn't supported in Python 3.7. By having the tree-sitter code isolated in this subclass, it makes it easier to conditionally import. However, it does come with other design flaws (e.g. Document is required to have methods which only really make sense on SyntaxAwareDocument).</p> <p>If you're reading this and Python 3.7 is no longer supported by Textual, consider merging this subclass into the <code>Document</code> superclass.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The initial text contained in the document.</p> required <code>str | Language</code> <p>The language to use. You can pass a string to use a supported language, or pass in your own tree-sitter <code>Language</code> object.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument(language)","title":"<code>language</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.language","title":"language  <code>instance-attribute</code>","text":"<pre><code>language = get_language(language)\n</code></pre> <p>The tree-sitter Language or None if tree-sitter is unavailable.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.get_line","title":"get_line","text":"<pre><code>get_line(line_index)\n</code></pre> <p>Return the string representing the line, not including new line characters.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line.</p> required <p>Returns:</p> Type Description <code>str</code> <p>The string representing the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.get_line(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.prepare_query","title":"prepare_query","text":"<pre><code>prepare_query(query)\n</code></pre> <p>Prepare a tree-sitter tree query.</p> <p>Queries should be prepared once, then reused.</p> <p>To execute a query, call <code>query_syntax_tree</code>.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The string query to prepare.</p> required <p>Returns:</p> Type Description <code>Query | None</code> <p>The prepared query.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.prepare_query(query)","title":"<code>query</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree","title":"query_syntax_tree","text":"<pre><code>query_syntax_tree(query, start_point=None, end_point=None)\n</code></pre> <p>Query the tree-sitter syntax tree.</p> <p>The default implementation always returns an empty list.</p> <p>To support querying in a subclass, this must be implemented.</p> <p>Parameters:</p> Name Type Description Default <code>Query</code> <p>The tree-sitter Query to perform.</p> required <code>tuple[int, int] | None</code> <p>The (row, column byte) to start the query at.</p> <code>None</code> <code>tuple[int, int] | None</code> <p>The (row, column byte) to end the query at.</p> <code>None</code> <p>Returns:</p> Type Description <code>list[tuple['Node', str]]</code> <p>A tuple containing the nodes and text captured by the query.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree(query)","title":"<code>query</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree(start_point)","title":"<code>start_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.query_syntax_tree(end_point)","title":"<code>end_point</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range","title":"replace_range","text":"<pre><code>replace_range(start, end, text)\n</code></pre> <p>Replace text at the given range.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>A tuple (row, column) where the edit starts.</p> required <code>Location</code> <p>A tuple (row, column) where the edit ends.</p> required <code>str</code> <p>The text to insert between start and end.</p> required <p>Returns:</p> Type Description <code>EditResult</code> <p>The new end location after the edit is complete.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range(end)","title":"<code>end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.SyntaxAwareDocument.replace_range(text)","title":"<code>text</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme","title":"TextAreaTheme  <code>dataclass</code>","text":"<pre><code>TextAreaTheme(\n    name,\n    base_style=None,\n    gutter_style=None,\n    cursor_style=None,\n    cursor_line_style=None,\n    cursor_line_gutter_style=None,\n    bracket_matching_style=None,\n    selection_style=None,\n    syntax_styles=dict(),\n)\n</code></pre> <p>A theme for the <code>TextArea</code> widget.</p> <p>Allows theming the general widget (gutter, selections, cursor, and so on) and mapping of tree-sitter tokens to Rich styles.</p> <p>For example, consider the following snippet from the <code>markdown.scm</code> highlight query file. We've assigned the <code>heading_content</code> token type to the name <code>heading</code>.</p> <pre><code>(heading_content) @heading\n</code></pre> <p>Now, we can map this <code>heading</code> name to a Rich style, and it will be styled as such in the <code>TextArea</code>, assuming a parser which returns a <code>heading_content</code> node is used (as will be the case when language=\"markdown\").</p> <pre><code>TextAreaTheme('my_theme', syntax_styles={'heading': Style(color='cyan', bold=True)})\n</code></pre> <p>We can register this theme with our <code>TextArea</code> using the  <code>TextArea.register_theme</code> method, and headings in our markdown files will be styled bold cyan.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.base_style","title":"base_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>base_style = None\n</code></pre> <p>The background style of the text area. If <code>None</code> the parent style will be used.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.bracket_matching_style","title":"bracket_matching_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>bracket_matching_style = None\n</code></pre> <p>The style to apply to matching brackets. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.cursor_line_gutter_style","title":"cursor_line_gutter_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_line_gutter_style = None\n</code></pre> <p>The style to apply to the gutter of the line the cursor is on. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.cursor_line_style","title":"cursor_line_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_line_style = None\n</code></pre> <p>The style to apply to the line the cursor is on.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.cursor_style","title":"cursor_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_style = None\n</code></pre> <p>The style of the cursor. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.gutter_style","title":"gutter_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>gutter_style = None\n</code></pre> <p>The style of the gutter. If <code>None</code>, a legible Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.name","title":"name  <code>instance-attribute</code>","text":"<pre><code>name\n</code></pre> <p>The name of the theme.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.selection_style","title":"selection_style  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>selection_style = None\n</code></pre> <p>The style of the selection. If <code>None</code> a default selection Style will be generated.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.syntax_styles","title":"syntax_styles  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>syntax_styles = field(default_factory=dict)\n</code></pre> <p>The mapping of tree-sitter names from the <code>highlight_query</code> to Rich styles.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.apply_css","title":"apply_css","text":"<pre><code>apply_css(text_area)\n</code></pre> <p>Apply CSS rules from a TextArea to be used for fallback styling.</p> <p>If any attributes in the theme aren't supplied, they'll be filled with the appropriate base CSS (e.g. color, background, etc.) and component CSS (e.g. text-area--cursor) from the supplied TextArea.</p> <p>Parameters:</p> Name Type Description Default <code>TextArea</code> <p>The TextArea instance to retrieve fallback styling from.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.apply_css(text_area)","title":"<code>text_area</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.builtin_themes","title":"builtin_themes  <code>classmethod</code>","text":"<pre><code>builtin_themes()\n</code></pre> <p>Get a list of all builtin TextAreaThemes.</p> <p>Returns:</p> Type Description <code>list[TextAreaTheme]</code> <p>A list of all builtin TextAreaThemes.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_builtin_theme","title":"get_builtin_theme  <code>classmethod</code>","text":"<pre><code>get_builtin_theme(theme_name)\n</code></pre> <p>Get a <code>TextAreaTheme</code> by name.</p> <p>Given a <code>theme_name</code>, return the corresponding <code>TextAreaTheme</code> object.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The name of the theme.</p> required <p>Returns:</p> Type Description <code>TextAreaTheme | None</code> <p>The <code>TextAreaTheme</code> corresponding to the name or <code>None</code> if the theme isn't found.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_builtin_theme(theme_name)","title":"<code>theme_name</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_highlight","title":"get_highlight","text":"<pre><code>get_highlight(name)\n</code></pre> <p>Return the Rich style corresponding to the name defined in the tree-sitter highlight query for the current theme.</p> <p>Parameters:</p> Name Type Description Default <code>str</code> <p>The name of the highlight.</p> required <p>Returns:</p> Type Description <code>Style | None</code> <p>The <code>Style</code> to use for this highlight, or <code>None</code> if no style.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.TextAreaTheme.get_highlight(name)","title":"<code>name</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.ThemeDoesNotExist","title":"ThemeDoesNotExist","text":"<p>               Bases: <code>Exception</code></p> <p>Raised when the user tries to use a theme which does not exist. This means a theme which is not builtin, or has not been registered.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument","title":"WrappedDocument","text":"<pre><code>WrappedDocument(document, width=0, tab_width=4)\n</code></pre> <p>A view into a Document which wraps the document at a certain width and can be queried to retrieve lines from the wrapped version of the document.</p> <p>Allows for incremental updates, ensuring that we only re-wrap ranges of the document that were influenced by edits.</p> <p>By default, a WrappedDocument is wrapped with width=0 (no wrapping). To wrap the document, use the wrap() method.</p> <p>Parameters:</p> Name Type Description Default <code>DocumentBase</code> <p>The document to wrap.</p> required <code>int</code> <p>The width to wrap at.</p> <code>0</code> <code>int</code> <p>The maximum width to consider for tab characters.</p> <code>4</code>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument(document)","title":"<code>document</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument(width)","title":"<code>width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument(tab_width)","title":"<code>tab_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.document","title":"document  <code>instance-attribute</code>","text":"<pre><code>document = document\n</code></pre> <p>The document wrapping is performed on.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.height","title":"height  <code>property</code>","text":"<pre><code>height\n</code></pre> <p>The height of the wrapped document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.lines","title":"lines  <code>property</code>","text":"<pre><code>lines\n</code></pre> <p>The lines of the wrapped version of the Document.</p> <p>Each index in the returned list represents a line index in the raw document. The list[str] at each index is the content of the raw document line split into multiple lines via wrapping.</p> <p>Note that this is expensive to compute and is not cached.</p> <p>Returns:</p> Type Description <code>list[list[str]]</code> <p>A list of lines from the wrapped version of the document.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrapped","title":"wrapped  <code>property</code>","text":"<pre><code>wrapped\n</code></pre> <p>True if the content is wrapped. This is not the same as wrapping being \"enabled\". For example, an empty document can have wrapping enabled, but no wrapping has actually occurred.</p> <p>In other words, this is True if the length of any line in the document is greater than the available width.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_offsets","title":"get_offsets","text":"<pre><code>get_offsets(line_index)\n</code></pre> <p>Given a line index, get the offsets within that line where wrapping should occur for the current document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line within the document.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>When <code>line_index</code> is out of bounds.</p> <p>Returns:</p> Type Description <code>list[int]</code> <p>The offsets within the line where wrapping should occur.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_offsets(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_sections","title":"get_sections","text":"<pre><code>get_sections(line_index)\n</code></pre> <p>Return the sections for the given line index.</p> <p>When wrapping is enabled, a single line in the document can visually span multiple lines. The list returned represents that visually (each string in the list represents a single section (y-offset) after wrapping happens).</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line to get sections for.</p> required <p>Returns:</p> Type Description <code>list[str]</code> <p>The wrapped line as a list of strings.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_sections(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_tab_widths","title":"get_tab_widths","text":"<pre><code>get_tab_widths(line_index)\n</code></pre> <p>Return a list of the tab widths for the given line index.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <p>Returns:</p> Type Description <code>list[int]</code> <p>An ordered list of the expanded width of the tabs in the line.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_tab_widths(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column","title":"get_target_document_column","text":"<pre><code>get_target_document_column(line_index, x_offset, y_offset)\n</code></pre> <p>Given a line index and the offsets within the wrapped version of that line, return the corresponding column index in the raw document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The index of the line in the document.</p> required <code>int</code> <p>The x-offset within the wrapped line.</p> required <code>int</code> <p>The y-offset within the wrapped line (supports negative indexing).</p> required <p>Returns:</p> Type Description <code>int</code> <p>The column index corresponding to the line index and y offset.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column(line_index)","title":"<code>line_index</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column(x_offset)","title":"<code>x_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.get_target_document_column(y_offset)","title":"<code>y_offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.location_to_offset","title":"location_to_offset","text":"<pre><code>location_to_offset(location)\n</code></pre> <p>Convert a location in the document to an offset within the wrapped/visual display of the document.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The location in the document.</p> required <p>Returns:</p> Type Description <code>Offset</code> <p>The Offset in the document's visual display corresponding to the given location.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.location_to_offset(location)","title":"<code>location</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.offset_to_location","title":"offset_to_location","text":"<pre><code>offset_to_location(offset)\n</code></pre> <p>Given an offset within the wrapped/visual display of the document, return the corresponding location in the document.</p> <p>Parameters:</p> Name Type Description Default <code>Offset</code> <p>The y-offset within the document.</p> required <p>Raises:</p> Type Description <code>ValueError</code> <p>When the given offset does not correspond to a line in the document.</p> <p>Returns:</p> Type Description <code>Location</code> <p>The Location in the document corresponding to the given offset.</p>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.offset_to_location(offset)","title":"<code>offset</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap","title":"wrap","text":"<pre><code>wrap(width, tab_width=None)\n</code></pre> <p>Wrap and cache all lines in the document.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The width to wrap at. 0 for no wrapping.</p> required <code>int | None</code> <p>The maximum width to consider for tab characters. If None, reuse the  tab width.</p> <code>None</code>"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap(width)","title":"<code>width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap(tab_width)","title":"<code>tab_width</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range","title":"wrap_range","text":"<pre><code>wrap_range(start, old_end, new_end)\n</code></pre> <p>Incrementally recompute wrapping based on a performed edit.</p> <p>This must be called after the source document has been edited.</p> <p>Parameters:</p> Name Type Description Default <code>Location</code> <p>The start location of the edit that was performed in document-space.</p> required <code>Location</code> <p>The old end location of the edit in document-space.</p> required <code>Location</code> <p>The new end location of the edit in document-space.</p> required"},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range(start)","title":"<code>start</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range(old_end)","title":"<code>old_end</code>","text":""},{"location":"widgets/text_area/#textual.widgets.text_area.WrappedDocument.wrap_range(new_end)","title":"<code>new_end</code>","text":""},{"location":"widgets/toast/","title":"Toast","text":"<p>Added in version 0.30.0</p> <p>A widget which displays a notification message.</p> <ul> <li> Focusable</li> <li> Container</li> </ul> <p>Note that <code>Toast</code> isn't designed to be used directly in your applications, but it is instead used by <code>notify</code> to display a message when using Textual's built-in notification system.</p>"},{"location":"widgets/toast/#styling","title":"Styling","text":"<p>You can customize the style of Toasts by targeting the <code>Toast</code> CSS type. For example:</p> <pre><code>Toast {\n    padding: 3;\n}\n</code></pre> <p>If you wish to change the location of Toasts, it is possible by targeting the <code>ToastRack</code> CSS type. For example:</p> <pre><code>ToastRack {\n        align: right top;\n}\n</code></pre> <p>The three severity levels also have corresponding classes, allowing you to target the different styles of notification. They are:</p> <ul> <li><code>-information</code></li> <li><code>-warning</code></li> <li><code>-error</code></li> </ul> <p>If you wish to tailor the notifications for your application you can add rules to your CSS like this:</p> <pre><code>Toast.-information {\n    /* Styling here. */\n}\n\nToast.-warning {\n    /* Styling here. */\n}\n\nToast.-error {\n    /* Styling here. */\n}\n</code></pre> <p>You can customize just the title wih the <code>toast--title</code> class. The following would make the title italic for an information toast:</p> <pre><code>Toast.-information .toast--title {\n    text-style: italic;\n}\n</code></pre>"},{"location":"widgets/toast/#example","title":"Example","text":"Outputtoast.py <p> ToastApp \u258c\u2590 \u258cIt's\u00a0an\u00a0older\u00a0code,\u00a0sir,\u00a0but\u00a0it\u00a0\u2590 \u258cchecks\u00a0out.\u2590 \u258c\u2590 \u258c\u2590 \u258cPossible\u00a0trap\u00a0detected\u2590 \u258cNow\u00a0witness\u00a0the\u00a0firepower\u00a0of\u00a0this\u00a0\u2590 \u258cfully\u00a0ARMED\u00a0and\u00a0OPERATIONAL\u00a0battle\u00a0\u2590 \u258cstation!\u2590 \u258c\u2590 \u258c\u2590 \u258cIt's\u00a0a\u00a0trap!\u2590 \u258c\u2590 \u258c\u2590 \u258cIt's\u00a0against\u00a0my\u00a0programming\u00a0to\u00a0\u2590 \u258cimpersonate\u00a0a\u00a0deity.\u2590 \u258c\u2590 </p> <pre><code>from textual.app import App\n\n\nclass ToastApp(App[None]):\n    def on_mount(self) -&gt; None:\n        # Show an information notification.\n        self.notify(\"It's an older code, sir, but it checks out.\")\n\n        # Show a warning. Note that Textual's notification system allows\n        # for the use of Rich console markup.\n        self.notify(\n            \"Now witness the firepower of this fully \"\n            \"[b]ARMED[/b] and [i][b]OPERATIONAL[/b][/i] battle station!\",\n            title=\"Possible trap detected\",\n            severity=\"warning\",\n        )\n\n        # Show an error. Set a longer timeout so it's noticed.\n        self.notify(\"It's a trap!\", severity=\"error\", timeout=10)\n\n        # Show an information notification, but without any sort of title.\n        self.notify(\"It's against my programming to impersonate a deity.\", title=\"\")\n\n\nif __name__ == \"__main__\":\n    ToastApp().run()\n</code></pre>"},{"location":"widgets/toast/#reactive-attributes","title":"Reactive Attributes","text":"<p>This widget has no reactive attributes.</p>"},{"location":"widgets/toast/#messages","title":"Messages","text":"<p>This widget posts no messages.</p>"},{"location":"widgets/toast/#bindings","title":"Bindings","text":"<p>This widget has no bindings.</p>"},{"location":"widgets/toast/#component-classes","title":"Component Classes","text":"<p>The toast widget provides the following component classes:</p> Class Description <code>toast--title</code> Targets the title of the toast."},{"location":"widgets/toast/#textual.widgets._toast.Toast","title":"textual.widgets._toast.Toast","text":"<pre><code>Toast(notification)\n</code></pre> <p>               Bases: <code>Static</code></p> <p>A widget for displaying short-lived notifications.</p> <p>Parameters:</p> Name Type Description Default <code>Notification</code> <p>The notification to show in the toast.</p> required"},{"location":"widgets/toast/#textual.widgets._toast.Toast(notification)","title":"<code>notification</code>","text":""},{"location":"widgets/toast/#textual.widgets._toast.Toast.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {'toast--title'}\n</code></pre> Class Description <code>toast--title</code> Targets the title of the toast."},{"location":"widgets/tree/","title":"Tree","text":"<p>Added in version 0.6.0</p> <p>A tree control widget.</p> <ul> <li> Focusable</li> <li> Container</li> </ul>"},{"location":"widgets/tree/#example","title":"Example","text":"<p>The example below creates a simple tree.</p> Outputtree.py <p> TreeApp \u25bc\u00a0Dune \u2517\u2501\u2501\u00a0\u25bc\u00a0Characters \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Paul \u00a0\u00a0\u00a0\u00a0\u2523\u2501\u2501\u00a0Jessica \u00a0\u00a0\u00a0\u00a0\u2517\u2501\u2501\u00a0Chani </p> <pre><code>from textual.app import App, ComposeResult\nfrom textual.widgets import Tree\n\n\nclass TreeApp(App):\n    def compose(self) -&gt; ComposeResult:\n        tree: Tree[dict] = Tree(\"Dune\")\n        tree.root.expand()\n        characters = tree.root.add(\"Characters\", expand=True)\n        characters.add_leaf(\"Paul\")\n        characters.add_leaf(\"Jessica\")\n        characters.add_leaf(\"Chani\")\n        yield tree\n\n\nif __name__ == \"__main__\":\n    app = TreeApp()\n    app.run()\n</code></pre> <p>Tree widgets have a \"root\" attribute which is an instance of a TreeNode. Call add() or add_leaf() to add new nodes underneath the root. Both these methods return a TreeNode for the child which you can use to add additional levels.</p>"},{"location":"widgets/tree/#reactive-attributes","title":"Reactive Attributes","text":"Name Type Default Description <code>show_root</code> <code>bool</code> <code>True</code> Show the root node. <code>show_guides</code> <code>bool</code> <code>True</code> Show guide lines between levels. <code>guide_depth</code> <code>int</code> <code>4</code> Amount of indentation between parent and child."},{"location":"widgets/tree/#messages","title":"Messages","text":"<ul> <li>Tree.NodeCollapsed</li> <li>Tree.NodeExpanded</li> <li>Tree.NodeHighlighted</li> <li>Tree.NodeSelected</li> </ul>"},{"location":"widgets/tree/#bindings","title":"Bindings","text":"<p>The tree widget defines the following bindings:</p> Key(s) Description enter Select the current item. space Toggle the expand/collapsed space of the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/tree/#component-classes","title":"Component Classes","text":"<p>The tree widget provides the following component classes:</p> Class Description <code>tree--cursor</code> Targets the cursor. <code>tree--guides</code> Targets the indentation guides. <code>tree--guides-hover</code> Targets the indentation guides under the cursor. <code>tree--guides-selected</code> Targets the indentation guides that are selected. <code>tree--highlight</code> Targets the highlighted items. <code>tree--highlight-line</code> Targets the lines under the cursor. <code>tree--label</code> Targets the (text) labels of the items. <p>               Bases: <code>Generic[TreeDataType]</code>, <code>ScrollView</code></p> <p>A widget for displaying and navigating data in a tree.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label of the root node of the tree.</p> required <code>TreeDataType | None</code> <p>The optional data to associate with the root node of the tree.</p> <code>None</code> <code>str | None</code> <p>The name of the Tree.</p> <code>None</code> <code>str | None</code> <p>The ID of the tree in the DOM.</p> <code>None</code> <code>str | None</code> <p>The CSS classes of the tree.</p> <code>None</code> <code>bool</code> <p>Whether the tree is disabled or not.</p> <code>False</code> <p>Make non-widget Tree support classes available.</p>"},{"location":"widgets/tree/#textual.widgets.Tree(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(name)","title":"<code>name</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(id)","title":"<code>id</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(classes)","title":"<code>classes</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree(disabled)","title":"<code>disabled</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.BINDINGS","title":"BINDINGS  <code>class-attribute</code>","text":"<pre><code>BINDINGS = [\n    Binding(\"enter\", \"select_cursor\", \"Select\", show=False),\n    Binding(\"space\", \"toggle_node\", \"Toggle\", show=False),\n    Binding(\"up\", \"cursor_up\", \"Cursor Up\", show=False),\n    Binding(\n        \"down\", \"cursor_down\", \"Cursor Down\", show=False\n    ),\n]\n</code></pre> Key(s) Description enter Select the current item. space Toggle the expand/collapsed space of the current item. up Move the cursor up. down Move the cursor down."},{"location":"widgets/tree/#textual.widgets.Tree.COMPONENT_CLASSES","title":"COMPONENT_CLASSES  <code>class-attribute</code>","text":"<pre><code>COMPONENT_CLASSES = {\n    \"tree--cursor\",\n    \"tree--guides\",\n    \"tree--guides-hover\",\n    \"tree--guides-selected\",\n    \"tree--highlight\",\n    \"tree--highlight-line\",\n    \"tree--label\",\n}\n</code></pre> Class Description <code>tree--cursor</code> Targets the cursor. <code>tree--guides</code> Targets the indentation guides. <code>tree--guides-hover</code> Targets the indentation guides under the cursor. <code>tree--guides-selected</code> Targets the indentation guides that are selected. <code>tree--highlight</code> Targets the highlighted items. <code>tree--highlight-line</code> Targets the lines under the cursor. <code>tree--label</code> Targets the (text) labels of the items."},{"location":"widgets/tree/#textual.widgets.Tree.auto_expand","title":"auto_expand  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>auto_expand = var(True)\n</code></pre> <p>Auto expand tree nodes when they are selected.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.cursor_line","title":"cursor_line  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>cursor_line = var(-1, always_update=True)\n</code></pre> <p>The line with the cursor, or -1 if no cursor.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.cursor_node","title":"cursor_node  <code>property</code>","text":"<pre><code>cursor_node\n</code></pre> <p>The currently selected node, or <code>None</code> if no selection.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.guide_depth","title":"guide_depth  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>guide_depth = reactive(4, init=False)\n</code></pre> <p>The indent depth of tree nodes.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.hover_line","title":"hover_line  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>hover_line = var(-1)\n</code></pre> <p>The line number under the mouse pointer, or -1 if not under the mouse pointer.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.last_line","title":"last_line  <code>property</code>","text":"<pre><code>last_line\n</code></pre> <p>The index of the last line.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.root","title":"root  <code>instance-attribute</code>","text":"<pre><code>root = _add_node(None, text_label, data)\n</code></pre> <p>The root node of the tree.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.show_guides","title":"show_guides  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_guides = reactive(True)\n</code></pre> <p>Enable display of tree guide lines.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.show_root","title":"show_root  <code>class-attribute</code> <code>instance-attribute</code>","text":"<pre><code>show_root = reactive(True)\n</code></pre> <p>Show the root of the tree.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeCollapsed","title":"NodeCollapsed","text":"<pre><code>NodeCollapsed(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is collapsed.</p> <p>Can be handled using <code>on_tree_node_collapsed</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeCollapsed.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeCollapsed.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was collapsed.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeExpanded","title":"NodeExpanded","text":"<pre><code>NodeExpanded(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is expanded.</p> <p>Can be handled using <code>on_tree_node_expanded</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeExpanded.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeExpanded.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was expanded.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeHighlighted","title":"NodeHighlighted","text":"<pre><code>NodeHighlighted(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is highlighted.</p> <p>Can be handled using <code>on_tree_node_highlighted</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeHighlighted.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeHighlighted.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was highlighted.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeSelected","title":"NodeSelected","text":"<pre><code>NodeSelected(node)\n</code></pre> <p>               Bases: <code>Generic[EventTreeDataType]</code>, <code>Message</code></p> <p>Event sent when a node is selected.</p> <p>Can be handled using <code>on_tree_node_selected</code> in a subclass of <code>Tree</code> or in a parent node in the DOM.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeSelected.control","title":"control  <code>property</code>","text":"<pre><code>control\n</code></pre> <p>The tree that sent the message.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.NodeSelected.node","title":"node  <code>instance-attribute</code>","text":"<pre><code>node = node\n</code></pre> <p>The node that was selected.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_cursor_down","title":"action_cursor_down","text":"<pre><code>action_cursor_down()\n</code></pre> <p>Move the cursor down one node.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_cursor_up","title":"action_cursor_up","text":"<pre><code>action_cursor_up()\n</code></pre> <p>Move the cursor up one node.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_page_down","title":"action_page_down","text":"<pre><code>action_page_down()\n</code></pre> <p>Move the cursor down a page's-worth of nodes.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_page_up","title":"action_page_up","text":"<pre><code>action_page_up()\n</code></pre> <p>Move the cursor up a page's-worth of nodes.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_scroll_end","title":"action_scroll_end","text":"<pre><code>action_scroll_end()\n</code></pre> <p>Move the cursor to the bottom of the tree.</p> Note <p>Here bottom means vertically, not branch depth.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_scroll_home","title":"action_scroll_home","text":"<pre><code>action_scroll_home()\n</code></pre> <p>Move the cursor to the top of the tree.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_select_cursor","title":"action_select_cursor","text":"<pre><code>action_select_cursor()\n</code></pre> <p>Cause a select event for the target node.</p> Note <p>If <code>auto_expand</code> is <code>True</code> use of this action on a non-leaf node will cause both an expand/collapse event to occur, as well as a selected event.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.action_toggle_node","title":"action_toggle_node","text":"<pre><code>action_toggle_node()\n</code></pre> <p>Toggle the expanded state of the target node.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.clear","title":"clear","text":"<pre><code>clear()\n</code></pre> <p>Clear all nodes under root.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_label_width","title":"get_label_width","text":"<pre><code>get_label_width(node)\n</code></pre> <p>Get the width of the nodes label.</p> <p>The default behavior is to call <code>render_node</code> and return the cell length. This method may be overridden in a sub-class if it can be done more efficiently.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType]</code> <p>A node.</p> required <p>Returns:</p> Type Description <code>int</code> <p>Width in cells.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_label_width(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.get_node_at_line","title":"get_node_at_line","text":"<pre><code>get_node_at_line(line_no)\n</code></pre> <p>Get the node for a given line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>A line number.</p> required <p>Returns:</p> Type Description <code>TreeNode[TreeDataType] | None</code> <p>A tree node, or <code>None</code> if there is no node at that line.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_node_at_line(line_no)","title":"<code>line_no</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.get_node_by_id","title":"get_node_by_id","text":"<pre><code>get_node_by_id(node_id)\n</code></pre> <p>Get a tree node by its ID.</p> <p>Parameters:</p> Name Type Description Default <code>NodeID</code> <p>The ID of the node to get.</p> required <p>Returns:</p> Type Description <code>TreeNode[TreeDataType]</code> <p>The node associated with that ID.</p> <p>Raises:</p> Type Description <code>UnknownNodeID</code> <p>Raised if the <code>TreeNode</code> ID is unknown.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.get_node_by_id(node_id)","title":"<code>node_id</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.move_cursor","title":"move_cursor","text":"<pre><code>move_cursor(node)\n</code></pre> <p>Move the cursor to the given node, or reset cursor.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType] | None</code> <p>A tree node, or None to reset cursor.</p> required"},{"location":"widgets/tree/#textual.widgets.Tree.move_cursor(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.process_label","title":"process_label","text":"<pre><code>process_label(label)\n</code></pre> <p>Process a <code>str</code> or <code>Text</code> value into a label.</p> <p>May be overridden in a subclass to change how labels are rendered.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.process_label(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.render_label","title":"render_label","text":"<pre><code>render_label(node, base_style, style)\n</code></pre> <p>Render a label for the given node. Override this to modify how labels are rendered.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType]</code> <p>A tree node.</p> required <code>Style</code> <p>The base style of the widget.</p> required <code>Style</code> <p>The additional style for the label.</p> required <p>Returns:</p> Type Description <code>Text</code> <p>A Rich Text object containing the label.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.render_label(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.render_label(base_style)","title":"<code>base_style</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.render_label(style)","title":"<code>style</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.reset","title":"reset","text":"<pre><code>reset(label, data=None)\n</code></pre> <p>Clear the tree and reset the root node.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The label for the root node.</p> required <code>TreeDataType | None</code> <p>Optional data for the root node.</p> <code>None</code> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>Tree</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.reset(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.reset(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_line","title":"scroll_to_line","text":"<pre><code>scroll_to_line(line, animate=True)\n</code></pre> <p>Scroll to the given line.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>A line number.</p> required <code>bool</code> <p>Enable animation.</p> <code>True</code>"},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_line(line)","title":"<code>line</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_line(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_node","title":"scroll_to_node","text":"<pre><code>scroll_to_node(node, animate=True)\n</code></pre> <p>Scroll to the given node.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType]</code> <p>Node to scroll in to view.</p> required <code>bool</code> <p>Animate scrolling.</p> <code>True</code>"},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.scroll_to_node(animate)","title":"<code>animate</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.select_node","title":"select_node","text":"<pre><code>select_node(node)\n</code></pre> <p>Move the cursor to the given node and select it, or reset cursor.</p> <p>Parameters:</p> Name Type Description Default <code>TreeNode[TreeDataType] | None</code> <p>A tree node to move the cursor to and select, or None to reset cursor.</p> required"},{"location":"widgets/tree/#textual.widgets.Tree.select_node(node)","title":"<code>node</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.validate_cursor_line","title":"validate_cursor_line","text":"<pre><code>validate_cursor_line(value)\n</code></pre> <p>Prevent cursor line from going outside of range.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The value to test.</p> required Return <p>A valid version of the given value.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.validate_cursor_line(value)","title":"<code>value</code>","text":""},{"location":"widgets/tree/#textual.widgets.Tree.validate_guide_depth","title":"validate_guide_depth","text":"<pre><code>validate_guide_depth(value)\n</code></pre> <p>Restrict guide depth to reasonable range.</p> <p>Parameters:</p> Name Type Description Default <code>int</code> <p>The value to test.</p> required Return <p>A valid version of the given value.</p>"},{"location":"widgets/tree/#textual.widgets.Tree.validate_guide_depth(value)","title":"<code>value</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.EventTreeDataType","title":"EventTreeDataType  <code>module-attribute</code>","text":"<pre><code>EventTreeDataType = TypeVar('EventTreeDataType')\n</code></pre> <p>The type of the data for a given instance of a Tree.</p> <p>Similar to TreeDataType but used for <code>Tree</code> messages.</p>"},{"location":"widgets/tree/#textual.widgets.tree.NodeID","title":"NodeID  <code>module-attribute</code>","text":"<pre><code>NodeID = NewType('NodeID', int)\n</code></pre> <p>The type of an ID applied to a TreeNode.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeDataType","title":"TreeDataType  <code>module-attribute</code>","text":"<pre><code>TreeDataType = TypeVar('TreeDataType')\n</code></pre> <p>The type of the data for a given instance of a Tree.</p>"},{"location":"widgets/tree/#textual.widgets.tree.AddNodeError","title":"AddNodeError","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when there is an error with a request to add a node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.RemoveRootError","title":"RemoveRootError","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when trying to remove the root of a <code>TreeNode</code>.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode","title":"TreeNode","text":"<pre><code>TreeNode(\n    tree,\n    parent,\n    id,\n    label,\n    data=None,\n    *,\n    expanded=True,\n    allow_expand=True\n)\n</code></pre> <p>               Bases: <code>Generic[TreeDataType]</code></p> <p>An object that represents a \"node\" in a tree control.</p> <p>Parameters:</p> Name Type Description Default <code>Tree[TreeDataType]</code> <p>The tree that the node is being attached to.</p> required <code>TreeNode[TreeDataType] | None</code> <p>The parent node that this node is being attached to.</p> required <code>NodeID</code> <p>The ID of the node.</p> required <code>Text</code> <p>The label for the node.</p> required <code>TreeDataType | None</code> <p>Optional data to associate with the node.</p> <code>None</code> <code>bool</code> <p>Should the node be attached in an expanded state?</p> <code>True</code> <code>bool</code> <p>Should the node allow being expanded by the user?</p> <code>True</code>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(tree)","title":"<code>tree</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(parent)","title":"<code>parent</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(id)","title":"<code>id</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(expanded)","title":"<code>expanded</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode(allow_expand)","title":"<code>allow_expand</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.allow_expand","title":"allow_expand  <code>property</code> <code>writable</code>","text":"<pre><code>allow_expand\n</code></pre> <p>Is this node allowed to expand?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.children","title":"children  <code>property</code>","text":"<pre><code>children\n</code></pre> <p>The child nodes of a TreeNode.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.data","title":"data  <code>instance-attribute</code>","text":"<pre><code>data = data\n</code></pre> <p>Optional data associated with the tree node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.id","title":"id  <code>property</code>","text":"<pre><code>id\n</code></pre> <p>The ID of the  node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.is_expanded","title":"is_expanded  <code>property</code>","text":"<pre><code>is_expanded\n</code></pre> <p>Is the node expanded?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.is_last","title":"is_last  <code>property</code>","text":"<pre><code>is_last\n</code></pre> <p>Is this the last child node of its parent?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.is_root","title":"is_root  <code>property</code>","text":"<pre><code>is_root\n</code></pre> <p>Is this node the root of the tree?</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.label","title":"label  <code>property</code> <code>writable</code>","text":"<pre><code>label\n</code></pre> <p>The label for the node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.line","title":"line  <code>property</code>","text":"<pre><code>line\n</code></pre> <p>The line number for this node, or -1 if it is not displayed.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.parent","title":"parent  <code>property</code>","text":"<pre><code>parent\n</code></pre> <p>The parent of the node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.tree","title":"tree  <code>property</code>","text":"<pre><code>tree\n</code></pre> <p>The tree that this node is attached to.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add","title":"add","text":"<pre><code>add(\n    label,\n    data=None,\n    *,\n    before=None,\n    after=None,\n    expand=False,\n    allow_expand=True\n)\n</code></pre> <p>Add a node to the sub-tree.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>The new node's label.</p> required <code>TreeDataType | None</code> <p>Data associated with the new node.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node before.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node after.</p> <code>None</code> <code>bool</code> <p>Node should be expanded.</p> <code>False</code> <code>bool</code> <p>Allow use to expand the node via keyboard or mouse.</p> <code>True</code> <p>Returns:</p> Type Description <code>TreeNode[TreeDataType]</code> <p>A new Tree node</p> <p>Raises:</p> Type Description <code>AddNodeError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>AddNodeError</code> will be raised.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(before)","title":"<code>before</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(after)","title":"<code>after</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(expand)","title":"<code>expand</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add(allow_expand)","title":"<code>allow_expand</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf","title":"add_leaf","text":"<pre><code>add_leaf(label, data=None, *, before=None, after=None)\n</code></pre> <p>Add a 'leaf' node (a node that can not expand).</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>Label for the node.</p> required <code>TreeDataType | None</code> <p>Optional data.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node before.</p> <code>None</code> <code>int | TreeNode[TreeDataType] | None</code> <p>Optional index or <code>TreeNode</code> to add the node after.</p> <code>None</code> <p>Returns:</p> Type Description <code>TreeNode[TreeDataType]</code> <p>New node.</p> <p>Raises:</p> Type Description <code>AddNodeError</code> <p>If there is a problem with the addition request.</p> Note <p>Only one of <code>before</code> or <code>after</code> can be provided. If both are provided a <code>AddNodeError</code> will be raised.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(data)","title":"<code>data</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(before)","title":"<code>before</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.add_leaf(after)","title":"<code>after</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.collapse","title":"collapse","text":"<pre><code>collapse()\n</code></pre> <p>Collapse the node (hide its children).</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.collapse_all","title":"collapse_all","text":"<pre><code>collapse_all()\n</code></pre> <p>Collapse the node (hide its children) and all those below it.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.expand","title":"expand","text":"<pre><code>expand()\n</code></pre> <p>Expand the node (show its children).</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.expand_all","title":"expand_all","text":"<pre><code>expand_all()\n</code></pre> <p>Expand the node (show its children) and all those below it.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.refresh","title":"refresh","text":"<pre><code>refresh()\n</code></pre> <p>Initiate a refresh (repaint) of this node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.remove","title":"remove","text":"<pre><code>remove()\n</code></pre> <p>Remove this node from the tree.</p> <p>Raises:</p> Type Description <code>RemoveRootError</code> <p>If there is an attempt to remove the root.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.remove_children","title":"remove_children","text":"<pre><code>remove_children()\n</code></pre> <p>Remove any child nodes of this node.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.set_label","title":"set_label","text":"<pre><code>set_label(label)\n</code></pre> <p>Set a new label for the node.</p> <p>Parameters:</p> Name Type Description Default <code>TextType</code> <p>A <code>str</code> or <code>Text</code> object with the new label.</p> required"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.set_label(label)","title":"<code>label</code>","text":""},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.toggle","title":"toggle","text":"<pre><code>toggle()\n</code></pre> <p>Toggle the node's expanded state.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.TreeNode.toggle_all","title":"toggle_all","text":"<pre><code>toggle_all()\n</code></pre> <p>Toggle the node's expanded state and make all those below it match.</p> <p>Returns:</p> Type Description <code>Self</code> <p>The <code>TreeNode</code> instance.</p>"},{"location":"widgets/tree/#textual.widgets.tree.UnknownNodeID","title":"UnknownNodeID","text":"<p>               Bases: <code>Exception</code></p> <p>Exception raised when referring to an unknown <code>TreeNode</code> ID.</p>"},{"location":"blog/archive/2024/","title":"2024","text":""},{"location":"blog/archive/2023/","title":"2023","text":""},{"location":"blog/archive/2022/","title":"2022","text":""},{"location":"blog/category/devlog/","title":"DevLog","text":""},{"location":"blog/category/release/","title":"Release","text":""},{"location":"blog/category/news/","title":"News","text":""},{"location":"blog/page/2/","title":"Textual Blog","text":""},{"location":"blog/page/3/","title":"Textual Blog","text":""},{"location":"blog/page/4/","title":"Textual Blog","text":""},{"location":"blog/archive/2023/page/2/","title":"2023","text":""},{"location":"blog/archive/2023/page/3/","title":"2023","text":""},{"location":"blog/archive/2022/page/2/","title":"2022","text":""},{"location":"blog/category/devlog/page/2/","title":"DevLog","text":""},{"location":"blog/category/release/page/2/","title":"Release","text":""}]}
\ No newline at end of file
diff --git a/tutorial/index.html b/tutorial/index.html
index c71368b2c4..c0912a44c1 100644
--- a/tutorial/index.html
+++ b/tutorial/index.html
@@ -6846,141 +6846,141 @@ <h2 id="stopwatch-application">Stopwatch Application<a class="headerlink" href="
         font-weight: 700;
     }
 
-    .terminal-2821400481-matrix {
+    .terminal-3602392989-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-2821400481-title {
+    .terminal-3602392989-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-2821400481-r1 { fill: #c5c8c6 }
-.terminal-2821400481-r2 { fill: #e3e3e3 }
-.terminal-2821400481-r3 { fill: #e1e1e1 }
-.terminal-2821400481-r4 { fill: #e76580 }
-.terminal-2821400481-r5 { fill: #f5e5e9;font-weight: bold }
-.terminal-2821400481-r6 { fill: #0a180e;font-weight: bold }
-.terminal-2821400481-r7 { fill: #780028 }
-.terminal-2821400481-r8 { fill: #fea62b;font-weight: bold }
-.terminal-2821400481-r9 { fill: #a7a9ab }
-.terminal-2821400481-r10 { fill: #e2e3e3 }
-.terminal-2821400481-r11 { fill: #4c5055 }
+    .terminal-3602392989-r1 { fill: #c5c8c6 }
+.terminal-3602392989-r2 { fill: #e3e3e3 }
+.terminal-3602392989-r3 { fill: #e1e1e1 }
+.terminal-3602392989-r4 { fill: #e76580 }
+.terminal-3602392989-r5 { fill: #f5e5e9;font-weight: bold }
+.terminal-3602392989-r6 { fill: #0a180e;font-weight: bold }
+.terminal-3602392989-r7 { fill: #780028 }
+.terminal-3602392989-r8 { fill: #fea62b;font-weight: bold }
+.terminal-3602392989-r9 { fill: #a7a9ab }
+.terminal-3602392989-r10 { fill: #e2e3e3 }
+.terminal-3602392989-r11 { fill: #4c5055 }
     </style>
 
     <defs>
-    <clipPath id="terminal-2821400481-clip-terminal">
+    <clipPath id="terminal-3602392989-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-2821400481-line-0">
+    <clipPath id="terminal-3602392989-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-1">
+<clipPath id="terminal-3602392989-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-2">
+<clipPath id="terminal-3602392989-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-3">
+<clipPath id="terminal-3602392989-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-4">
+<clipPath id="terminal-3602392989-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-5">
+<clipPath id="terminal-3602392989-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-6">
+<clipPath id="terminal-3602392989-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-7">
+<clipPath id="terminal-3602392989-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-8">
+<clipPath id="terminal-3602392989-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-9">
+<clipPath id="terminal-3602392989-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-10">
+<clipPath id="terminal-3602392989-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-11">
+<clipPath id="terminal-3602392989-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-12">
+<clipPath id="terminal-3602392989-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-13">
+<clipPath id="terminal-3602392989-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-14">
+<clipPath id="terminal-3602392989-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-15">
+<clipPath id="terminal-3602392989-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-16">
+<clipPath id="terminal-3602392989-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-17">
+<clipPath id="terminal-3602392989-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-18">
+<clipPath id="terminal-3602392989-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-19">
+<clipPath id="terminal-3602392989-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-20">
+<clipPath id="terminal-3602392989-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-21">
+<clipPath id="terminal-3602392989-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-2821400481-line-22">
+<clipPath id="terminal-3602392989-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-2821400481-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch.py</text>
+    <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-3602392989-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch.py</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-2821400481-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-3602392989-clip-terminal)">
     <rect fill="#282828" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="24.4" y="1.5" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="402.6" y="1.5" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="549" y="1.5" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="866.2" y="1.5" width="0" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="866.2" y="1.5" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="74.7" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="85.4" y="99.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="158.6" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="99.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="414.8" y="99.1" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="549" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="123.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="123.5" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="147.9" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="196.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="221.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="221.1" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="85.4" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="158.6" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="245.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="414.8" y="245.5" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="549" y="245.5" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="269.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="269.9" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="294.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="343.1" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="367.5" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="85.4" y="391.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="158.6" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="391.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="414.8" y="391.9" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="549" y="391.9" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="416.3" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="440.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="0" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="36.6" y="562.7" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="280.6" y="562.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="329.4" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="366" y="562.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="451.4" y="562.7" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="829.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="866.2" y="562.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-2821400481-matrix">
-    <text class="terminal-2821400481-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-2821400481-line-0)">⭘</text><text class="terminal-2821400481-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-2821400481-line-0)">StopwatchApp</text><text class="terminal-2821400481-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-2821400481-line-0)">
-</text><text class="terminal-2821400481-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-2821400481-line-1)">
-</text><text class="terminal-2821400481-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-2821400481-line-2)">
-</text><text class="terminal-2821400481-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-2821400481-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-2821400481-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-2821400481-line-3)">
-</text><text class="terminal-2821400481-r5" x="85.4" y="117.6" textLength="73.2" clip-path="url(#terminal-2821400481-line-4)">&#160;Stop&#160;</text><text class="terminal-2821400481-r6" x="414.8" y="117.6" textLength="134.2" clip-path="url(#terminal-2821400481-line-4)">00:00:16.17</text><text class="terminal-2821400481-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-2821400481-line-4)">
-</text><text class="terminal-2821400481-r7" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-2821400481-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-2821400481-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-2821400481-line-5)">
-</text><text class="terminal-2821400481-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-2821400481-line-6)">
-</text><text class="terminal-2821400481-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-2821400481-line-7)">
-</text><text class="terminal-2821400481-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-2821400481-line-8)">
-</text><text class="terminal-2821400481-r4" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-2821400481-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-2821400481-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-2821400481-line-9)">
-</text><text class="terminal-2821400481-r5" x="85.4" y="264" textLength="73.2" clip-path="url(#terminal-2821400481-line-10)">&#160;Stop&#160;</text><text class="terminal-2821400481-r6" x="414.8" y="264" textLength="134.2" clip-path="url(#terminal-2821400481-line-10)">00:00:12.12</text><text class="terminal-2821400481-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-2821400481-line-10)">
-</text><text class="terminal-2821400481-r7" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-2821400481-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-2821400481-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-2821400481-line-11)">
-</text><text class="terminal-2821400481-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-2821400481-line-12)">
-</text><text class="terminal-2821400481-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-2821400481-line-13)">
-</text><text class="terminal-2821400481-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-2821400481-line-14)">
-</text><text class="terminal-2821400481-r4" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-2821400481-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-2821400481-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-2821400481-line-15)">
-</text><text class="terminal-2821400481-r5" x="85.4" y="410.4" textLength="73.2" clip-path="url(#terminal-2821400481-line-16)">&#160;Stop&#160;</text><text class="terminal-2821400481-r6" x="414.8" y="410.4" textLength="134.2" clip-path="url(#terminal-2821400481-line-16)">00:00:08.09</text><text class="terminal-2821400481-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-2821400481-line-16)">
-</text><text class="terminal-2821400481-r7" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-2821400481-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-2821400481-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-2821400481-line-17)">
-</text><text class="terminal-2821400481-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-2821400481-line-18)">
-</text><text class="terminal-2821400481-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-2821400481-line-19)">
-</text><text class="terminal-2821400481-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-2821400481-line-20)">
-</text><text class="terminal-2821400481-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-2821400481-line-21)">
-</text><text class="terminal-2821400481-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-2821400481-line-22)">
-</text><text class="terminal-2821400481-r8" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-2821400481-line-23)">&#160;d&#160;</text><text class="terminal-2821400481-r9" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-2821400481-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-2821400481-r8" x="244" y="581.2" textLength="36.6" clip-path="url(#terminal-2821400481-line-23)">&#160;a&#160;</text><text class="terminal-2821400481-r9" x="280.6" y="581.2" textLength="48.8" clip-path="url(#terminal-2821400481-line-23)">Add&#160;</text><text class="terminal-2821400481-r8" x="329.4" y="581.2" textLength="36.6" clip-path="url(#terminal-2821400481-line-23)">&#160;r&#160;</text><text class="terminal-2821400481-r9" x="366" y="581.2" textLength="85.4" clip-path="url(#terminal-2821400481-line-23)">Remove&#160;</text><text class="terminal-2821400481-r11" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-2821400481-line-23)">▏</text><text class="terminal-2821400481-r8" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-2821400481-line-23)">^p</text><text class="terminal-2821400481-r9" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-2821400481-line-23)">&#160;palette</text>
+    <g class="terminal-3602392989-matrix">
+    <text class="terminal-3602392989-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-3602392989-line-0)">⭘</text><text class="terminal-3602392989-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-3602392989-line-0)">StopwatchApp</text><text class="terminal-3602392989-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3602392989-line-0)">
+</text><text class="terminal-3602392989-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3602392989-line-1)">
+</text><text class="terminal-3602392989-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3602392989-line-2)">
+</text><text class="terminal-3602392989-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-3602392989-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3602392989-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3602392989-line-3)">
+</text><text class="terminal-3602392989-r5" x="85.4" y="117.6" textLength="73.2" clip-path="url(#terminal-3602392989-line-4)">&#160;Stop&#160;</text><text class="terminal-3602392989-r6" x="414.8" y="117.6" textLength="134.2" clip-path="url(#terminal-3602392989-line-4)">00:00:16.15</text><text class="terminal-3602392989-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3602392989-line-4)">
+</text><text class="terminal-3602392989-r7" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-3602392989-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3602392989-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3602392989-line-5)">
+</text><text class="terminal-3602392989-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3602392989-line-6)">
+</text><text class="terminal-3602392989-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3602392989-line-7)">
+</text><text class="terminal-3602392989-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3602392989-line-8)">
+</text><text class="terminal-3602392989-r4" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-3602392989-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3602392989-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3602392989-line-9)">
+</text><text class="terminal-3602392989-r5" x="85.4" y="264" textLength="73.2" clip-path="url(#terminal-3602392989-line-10)">&#160;Stop&#160;</text><text class="terminal-3602392989-r6" x="414.8" y="264" textLength="134.2" clip-path="url(#terminal-3602392989-line-10)">00:00:12.10</text><text class="terminal-3602392989-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3602392989-line-10)">
+</text><text class="terminal-3602392989-r7" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-3602392989-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3602392989-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3602392989-line-11)">
+</text><text class="terminal-3602392989-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3602392989-line-12)">
+</text><text class="terminal-3602392989-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3602392989-line-13)">
+</text><text class="terminal-3602392989-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3602392989-line-14)">
+</text><text class="terminal-3602392989-r4" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-3602392989-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3602392989-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3602392989-line-15)">
+</text><text class="terminal-3602392989-r5" x="85.4" y="410.4" textLength="73.2" clip-path="url(#terminal-3602392989-line-16)">&#160;Stop&#160;</text><text class="terminal-3602392989-r6" x="414.8" y="410.4" textLength="134.2" clip-path="url(#terminal-3602392989-line-16)">00:00:08.09</text><text class="terminal-3602392989-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3602392989-line-16)">
+</text><text class="terminal-3602392989-r7" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-3602392989-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3602392989-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3602392989-line-17)">
+</text><text class="terminal-3602392989-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3602392989-line-18)">
+</text><text class="terminal-3602392989-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3602392989-line-19)">
+</text><text class="terminal-3602392989-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3602392989-line-20)">
+</text><text class="terminal-3602392989-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3602392989-line-21)">
+</text><text class="terminal-3602392989-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3602392989-line-22)">
+</text><text class="terminal-3602392989-r8" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-3602392989-line-23)">&#160;d&#160;</text><text class="terminal-3602392989-r9" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-3602392989-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-3602392989-r8" x="244" y="581.2" textLength="36.6" clip-path="url(#terminal-3602392989-line-23)">&#160;a&#160;</text><text class="terminal-3602392989-r9" x="280.6" y="581.2" textLength="48.8" clip-path="url(#terminal-3602392989-line-23)">Add&#160;</text><text class="terminal-3602392989-r8" x="329.4" y="581.2" textLength="36.6" clip-path="url(#terminal-3602392989-line-23)">&#160;r&#160;</text><text class="terminal-3602392989-r9" x="366" y="581.2" textLength="85.4" clip-path="url(#terminal-3602392989-line-23)">Remove&#160;</text><text class="terminal-3602392989-r11" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-3602392989-line-23)">▏</text><text class="terminal-3602392989-r8" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-3602392989-line-23)">^p</text><text class="terminal-3602392989-r9" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-3602392989-line-23)">&#160;palette</text>
     </g>
     </g>
 </svg>
@@ -8440,144 +8440,144 @@ <h2 id="reactive-attributes">Reactive attributes<a class="headerlink" href="#rea
         font-weight: 700;
     }
 
-    .terminal-1318070296-matrix {
+    .terminal-4183959585-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-1318070296-title {
+    .terminal-4183959585-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-1318070296-r1 { fill: #c5c8c6 }
-.terminal-1318070296-r2 { fill: #e3e3e3 }
-.terminal-1318070296-r3 { fill: #e1e1e1 }
-.terminal-1318070296-r4 { fill: #7ae998 }
-.terminal-1318070296-r5 { fill: #454a50 }
-.terminal-1318070296-r6 { fill: #0a180e;font-weight: bold }
-.terminal-1318070296-r7 { fill: #969696 }
-.terminal-1318070296-r8 { fill: #e2e3e3;font-weight: bold }
-.terminal-1318070296-r9 { fill: #008139 }
-.terminal-1318070296-r10 { fill: #000000 }
-.terminal-1318070296-r11 { fill: #fea62b;font-weight: bold }
-.terminal-1318070296-r12 { fill: #a7a9ab }
-.terminal-1318070296-r13 { fill: #e2e3e3 }
-.terminal-1318070296-r14 { fill: #4c5055 }
+    .terminal-4183959585-r1 { fill: #c5c8c6 }
+.terminal-4183959585-r2 { fill: #e3e3e3 }
+.terminal-4183959585-r3 { fill: #e1e1e1 }
+.terminal-4183959585-r4 { fill: #7ae998 }
+.terminal-4183959585-r5 { fill: #454a50 }
+.terminal-4183959585-r6 { fill: #0a180e;font-weight: bold }
+.terminal-4183959585-r7 { fill: #969696 }
+.terminal-4183959585-r8 { fill: #e2e3e3;font-weight: bold }
+.terminal-4183959585-r9 { fill: #008139 }
+.terminal-4183959585-r10 { fill: #000000 }
+.terminal-4183959585-r11 { fill: #fea62b;font-weight: bold }
+.terminal-4183959585-r12 { fill: #a7a9ab }
+.terminal-4183959585-r13 { fill: #e2e3e3 }
+.terminal-4183959585-r14 { fill: #4c5055 }
     </style>
 
     <defs>
-    <clipPath id="terminal-1318070296-clip-terminal">
+    <clipPath id="terminal-4183959585-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-1318070296-line-0">
+    <clipPath id="terminal-4183959585-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-1">
+<clipPath id="terminal-4183959585-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-2">
+<clipPath id="terminal-4183959585-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-3">
+<clipPath id="terminal-4183959585-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-4">
+<clipPath id="terminal-4183959585-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-5">
+<clipPath id="terminal-4183959585-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-6">
+<clipPath id="terminal-4183959585-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-7">
+<clipPath id="terminal-4183959585-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-8">
+<clipPath id="terminal-4183959585-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-9">
+<clipPath id="terminal-4183959585-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-10">
+<clipPath id="terminal-4183959585-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-11">
+<clipPath id="terminal-4183959585-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-12">
+<clipPath id="terminal-4183959585-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-13">
+<clipPath id="terminal-4183959585-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-14">
+<clipPath id="terminal-4183959585-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-15">
+<clipPath id="terminal-4183959585-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-16">
+<clipPath id="terminal-4183959585-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-17">
+<clipPath id="terminal-4183959585-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-18">
+<clipPath id="terminal-4183959585-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-19">
+<clipPath id="terminal-4183959585-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-20">
+<clipPath id="terminal-4183959585-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-21">
+<clipPath id="terminal-4183959585-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1318070296-line-22">
+<clipPath id="terminal-4183959585-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-1318070296-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch05.py</text>
+    <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-4183959585-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch05.py</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-1318070296-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-4183959585-clip-terminal)">
     <rect fill="#282828" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="24.4" y="1.5" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="402.6" y="1.5" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="549" y="1.5" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="866.2" y="1.5" width="0" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="866.2" y="1.5" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="74.7" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="73.2" y="99.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="99.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="414.8" y="99.1" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="549" y="99.1" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="805.2" y="99.1" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="890.6" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="123.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="123.5" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="123.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="147.9" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="196.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="221.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="221.1" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="221.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="73.2" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="245.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="414.8" y="245.5" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="549" y="245.5" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="805.2" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="890.6" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="269.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="269.9" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="269.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="294.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="343.1" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="367.5" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="73.2" y="391.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="391.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="414.8" y="391.9" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="549" y="391.9" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="805.2" y="391.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="890.6" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="416.3" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="440.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="0" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="36.6" y="562.7" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="562.7" width="585.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="829.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="866.2" y="562.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-1318070296-matrix">
-    <text class="terminal-1318070296-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-1318070296-line-0)">⭘</text><text class="terminal-1318070296-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-1318070296-line-0)">StopwatchApp</text><text class="terminal-1318070296-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1318070296-line-0)">
-</text><text class="terminal-1318070296-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1318070296-line-1)">
-</text><text class="terminal-1318070296-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1318070296-line-2)">
-</text><text class="terminal-1318070296-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-1318070296-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1318070296-r5" x="756.4" y="93.2" textLength="195.2" clip-path="url(#terminal-1318070296-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1318070296-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1318070296-line-3)">
-</text><text class="terminal-1318070296-r6" x="73.2" y="117.6" textLength="85.4" clip-path="url(#terminal-1318070296-line-4)">&#160;Start&#160;</text><text class="terminal-1318070296-r7" x="414.8" y="117.6" textLength="134.2" clip-path="url(#terminal-1318070296-line-4)">00:00:03.05</text><text class="terminal-1318070296-r8" x="805.2" y="117.6" textLength="85.4" clip-path="url(#terminal-1318070296-line-4)">&#160;Reset&#160;</text><text class="terminal-1318070296-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1318070296-line-4)">
-</text><text class="terminal-1318070296-r9" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-1318070296-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1318070296-r10" x="756.4" y="142" textLength="195.2" clip-path="url(#terminal-1318070296-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1318070296-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1318070296-line-5)">
-</text><text class="terminal-1318070296-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1318070296-line-6)">
-</text><text class="terminal-1318070296-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1318070296-line-7)">
-</text><text class="terminal-1318070296-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1318070296-line-8)">
-</text><text class="terminal-1318070296-r4" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-1318070296-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1318070296-r5" x="756.4" y="239.6" textLength="195.2" clip-path="url(#terminal-1318070296-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1318070296-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1318070296-line-9)">
-</text><text class="terminal-1318070296-r6" x="73.2" y="264" textLength="85.4" clip-path="url(#terminal-1318070296-line-10)">&#160;Start&#160;</text><text class="terminal-1318070296-r7" x="414.8" y="264" textLength="134.2" clip-path="url(#terminal-1318070296-line-10)">00:00:03.05</text><text class="terminal-1318070296-r8" x="805.2" y="264" textLength="85.4" clip-path="url(#terminal-1318070296-line-10)">&#160;Reset&#160;</text><text class="terminal-1318070296-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1318070296-line-10)">
-</text><text class="terminal-1318070296-r9" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-1318070296-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1318070296-r10" x="756.4" y="288.4" textLength="195.2" clip-path="url(#terminal-1318070296-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1318070296-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1318070296-line-11)">
-</text><text class="terminal-1318070296-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1318070296-line-12)">
-</text><text class="terminal-1318070296-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1318070296-line-13)">
-</text><text class="terminal-1318070296-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1318070296-line-14)">
-</text><text class="terminal-1318070296-r4" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-1318070296-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1318070296-r5" x="756.4" y="386" textLength="195.2" clip-path="url(#terminal-1318070296-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1318070296-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1318070296-line-15)">
-</text><text class="terminal-1318070296-r6" x="73.2" y="410.4" textLength="85.4" clip-path="url(#terminal-1318070296-line-16)">&#160;Start&#160;</text><text class="terminal-1318070296-r7" x="414.8" y="410.4" textLength="134.2" clip-path="url(#terminal-1318070296-line-16)">00:00:03.05</text><text class="terminal-1318070296-r8" x="805.2" y="410.4" textLength="85.4" clip-path="url(#terminal-1318070296-line-16)">&#160;Reset&#160;</text><text class="terminal-1318070296-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1318070296-line-16)">
-</text><text class="terminal-1318070296-r9" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-1318070296-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1318070296-r10" x="756.4" y="434.8" textLength="195.2" clip-path="url(#terminal-1318070296-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1318070296-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1318070296-line-17)">
-</text><text class="terminal-1318070296-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1318070296-line-18)">
-</text><text class="terminal-1318070296-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1318070296-line-19)">
-</text><text class="terminal-1318070296-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1318070296-line-20)">
-</text><text class="terminal-1318070296-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1318070296-line-21)">
-</text><text class="terminal-1318070296-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1318070296-line-22)">
-</text><text class="terminal-1318070296-r11" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-1318070296-line-23)">&#160;d&#160;</text><text class="terminal-1318070296-r12" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-1318070296-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-1318070296-r14" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1318070296-line-23)">▏</text><text class="terminal-1318070296-r11" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1318070296-line-23)">^p</text><text class="terminal-1318070296-r12" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-1318070296-line-23)">&#160;palette</text>
+    <g class="terminal-4183959585-matrix">
+    <text class="terminal-4183959585-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-4183959585-line-0)">⭘</text><text class="terminal-4183959585-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-4183959585-line-0)">StopwatchApp</text><text class="terminal-4183959585-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4183959585-line-0)">
+</text><text class="terminal-4183959585-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4183959585-line-1)">
+</text><text class="terminal-4183959585-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4183959585-line-2)">
+</text><text class="terminal-4183959585-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-4183959585-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4183959585-r5" x="756.4" y="93.2" textLength="195.2" clip-path="url(#terminal-4183959585-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4183959585-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4183959585-line-3)">
+</text><text class="terminal-4183959585-r6" x="73.2" y="117.6" textLength="85.4" clip-path="url(#terminal-4183959585-line-4)">&#160;Start&#160;</text><text class="terminal-4183959585-r7" x="414.8" y="117.6" textLength="134.2" clip-path="url(#terminal-4183959585-line-4)">00:00:03.08</text><text class="terminal-4183959585-r8" x="805.2" y="117.6" textLength="85.4" clip-path="url(#terminal-4183959585-line-4)">&#160;Reset&#160;</text><text class="terminal-4183959585-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4183959585-line-4)">
+</text><text class="terminal-4183959585-r9" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-4183959585-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4183959585-r10" x="756.4" y="142" textLength="195.2" clip-path="url(#terminal-4183959585-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4183959585-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4183959585-line-5)">
+</text><text class="terminal-4183959585-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4183959585-line-6)">
+</text><text class="terminal-4183959585-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4183959585-line-7)">
+</text><text class="terminal-4183959585-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4183959585-line-8)">
+</text><text class="terminal-4183959585-r4" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-4183959585-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4183959585-r5" x="756.4" y="239.6" textLength="195.2" clip-path="url(#terminal-4183959585-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4183959585-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4183959585-line-9)">
+</text><text class="terminal-4183959585-r6" x="73.2" y="264" textLength="85.4" clip-path="url(#terminal-4183959585-line-10)">&#160;Start&#160;</text><text class="terminal-4183959585-r7" x="414.8" y="264" textLength="134.2" clip-path="url(#terminal-4183959585-line-10)">00:00:03.08</text><text class="terminal-4183959585-r8" x="805.2" y="264" textLength="85.4" clip-path="url(#terminal-4183959585-line-10)">&#160;Reset&#160;</text><text class="terminal-4183959585-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4183959585-line-10)">
+</text><text class="terminal-4183959585-r9" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-4183959585-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4183959585-r10" x="756.4" y="288.4" textLength="195.2" clip-path="url(#terminal-4183959585-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4183959585-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4183959585-line-11)">
+</text><text class="terminal-4183959585-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4183959585-line-12)">
+</text><text class="terminal-4183959585-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4183959585-line-13)">
+</text><text class="terminal-4183959585-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4183959585-line-14)">
+</text><text class="terminal-4183959585-r4" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-4183959585-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4183959585-r5" x="756.4" y="386" textLength="195.2" clip-path="url(#terminal-4183959585-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4183959585-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4183959585-line-15)">
+</text><text class="terminal-4183959585-r6" x="73.2" y="410.4" textLength="85.4" clip-path="url(#terminal-4183959585-line-16)">&#160;Start&#160;</text><text class="terminal-4183959585-r7" x="414.8" y="410.4" textLength="134.2" clip-path="url(#terminal-4183959585-line-16)">00:00:03.08</text><text class="terminal-4183959585-r8" x="805.2" y="410.4" textLength="85.4" clip-path="url(#terminal-4183959585-line-16)">&#160;Reset&#160;</text><text class="terminal-4183959585-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4183959585-line-16)">
+</text><text class="terminal-4183959585-r9" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-4183959585-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4183959585-r10" x="756.4" y="434.8" textLength="195.2" clip-path="url(#terminal-4183959585-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4183959585-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4183959585-line-17)">
+</text><text class="terminal-4183959585-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4183959585-line-18)">
+</text><text class="terminal-4183959585-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4183959585-line-19)">
+</text><text class="terminal-4183959585-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4183959585-line-20)">
+</text><text class="terminal-4183959585-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4183959585-line-21)">
+</text><text class="terminal-4183959585-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4183959585-line-22)">
+</text><text class="terminal-4183959585-r11" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-4183959585-line-23)">&#160;d&#160;</text><text class="terminal-4183959585-r12" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-4183959585-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-4183959585-r14" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-4183959585-line-23)">▏</text><text class="terminal-4183959585-r11" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-4183959585-line-23)">^p</text><text class="terminal-4183959585-r12" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-4183959585-line-23)">&#160;palette</text>
     </g>
     </g>
 </svg>
@@ -8727,148 +8727,148 @@ <h3 id="wiring-buttons">Wiring buttons<a class="headerlink" href="#wiring-button
         font-weight: 700;
     }
 
-    .terminal-1669252969-matrix {
+    .terminal-3072968554-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-1669252969-title {
+    .terminal-3072968554-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-1669252969-r1 { fill: #c5c8c6 }
-.terminal-1669252969-r2 { fill: #e3e3e3 }
-.terminal-1669252969-r3 { fill: #e1e1e1 }
-.terminal-1669252969-r4 { fill: #e76580 }
-.terminal-1669252969-r5 { fill: #f5e5e9;font-weight: bold }
-.terminal-1669252969-r6 { fill: #0a180e;font-weight: bold }
-.terminal-1669252969-r7 { fill: #780028 }
-.terminal-1669252969-r8 { fill: #7ae998 }
-.terminal-1669252969-r9 { fill: #454a50 }
-.terminal-1669252969-r10 { fill: #4ebf71;font-weight: bold }
-.terminal-1669252969-r11 { fill: #969696 }
-.terminal-1669252969-r12 { fill: #e2e3e3;font-weight: bold }
-.terminal-1669252969-r13 { fill: #008139 }
-.terminal-1669252969-r14 { fill: #000000 }
-.terminal-1669252969-r15 { fill: #fea62b;font-weight: bold }
-.terminal-1669252969-r16 { fill: #a7a9ab }
-.terminal-1669252969-r17 { fill: #e2e3e3 }
-.terminal-1669252969-r18 { fill: #4c5055 }
+    .terminal-3072968554-r1 { fill: #c5c8c6 }
+.terminal-3072968554-r2 { fill: #e3e3e3 }
+.terminal-3072968554-r3 { fill: #e1e1e1 }
+.terminal-3072968554-r4 { fill: #e76580 }
+.terminal-3072968554-r5 { fill: #f5e5e9;font-weight: bold }
+.terminal-3072968554-r6 { fill: #0a180e;font-weight: bold }
+.terminal-3072968554-r7 { fill: #780028 }
+.terminal-3072968554-r8 { fill: #7ae998 }
+.terminal-3072968554-r9 { fill: #454a50 }
+.terminal-3072968554-r10 { fill: #4ebf71;font-weight: bold }
+.terminal-3072968554-r11 { fill: #969696 }
+.terminal-3072968554-r12 { fill: #e2e3e3;font-weight: bold }
+.terminal-3072968554-r13 { fill: #008139 }
+.terminal-3072968554-r14 { fill: #000000 }
+.terminal-3072968554-r15 { fill: #fea62b;font-weight: bold }
+.terminal-3072968554-r16 { fill: #a7a9ab }
+.terminal-3072968554-r17 { fill: #e2e3e3 }
+.terminal-3072968554-r18 { fill: #4c5055 }
     </style>
 
     <defs>
-    <clipPath id="terminal-1669252969-clip-terminal">
+    <clipPath id="terminal-3072968554-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-1669252969-line-0">
+    <clipPath id="terminal-3072968554-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-1">
+<clipPath id="terminal-3072968554-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-2">
+<clipPath id="terminal-3072968554-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-3">
+<clipPath id="terminal-3072968554-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-4">
+<clipPath id="terminal-3072968554-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-5">
+<clipPath id="terminal-3072968554-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-6">
+<clipPath id="terminal-3072968554-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-7">
+<clipPath id="terminal-3072968554-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-8">
+<clipPath id="terminal-3072968554-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-9">
+<clipPath id="terminal-3072968554-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-10">
+<clipPath id="terminal-3072968554-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-11">
+<clipPath id="terminal-3072968554-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-12">
+<clipPath id="terminal-3072968554-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-13">
+<clipPath id="terminal-3072968554-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-14">
+<clipPath id="terminal-3072968554-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-15">
+<clipPath id="terminal-3072968554-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-16">
+<clipPath id="terminal-3072968554-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-17">
+<clipPath id="terminal-3072968554-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-18">
+<clipPath id="terminal-3072968554-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-19">
+<clipPath id="terminal-3072968554-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-20">
+<clipPath id="terminal-3072968554-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-21">
+<clipPath id="terminal-3072968554-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1669252969-line-22">
+<clipPath id="terminal-3072968554-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-1669252969-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch06.py</text>
+    <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-3072968554-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch06.py</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-1669252969-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-3072968554-clip-terminal)">
     <rect fill="#282828" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="24.4" y="1.5" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="402.6" y="1.5" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="549" y="1.5" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="866.2" y="1.5" width="0" height="24.65" shape-rendering="crispEdges"/><rect fill="#282828" x="866.2" y="1.5" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="74.7" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="85.4" y="99.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="158.6" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="99.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="414.8" y="99.1" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="549" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="123.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="123.5" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="147.9" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="196.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="221.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="221.1" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="85.4" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="158.6" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="245.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="414.8" y="245.5" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="549" y="245.5" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="269.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="269.9" width="744.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="294.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="343.1" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="367.5" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a180e" x="73.2" y="391.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="391.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="414.8" y="391.9" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="549" y="391.9" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="805.2" y="391.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="890.6" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="219.6" y="416.3" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="756.4" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="440.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="0" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="36.6" y="562.7" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="562.7" width="585.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="829.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="866.2" y="562.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-1669252969-matrix">
-    <text class="terminal-1669252969-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-1669252969-line-0)">⭘</text><text class="terminal-1669252969-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-1669252969-line-0)">StopwatchApp</text><text class="terminal-1669252969-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1669252969-line-0)">
-</text><text class="terminal-1669252969-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1669252969-line-1)">
-</text><text class="terminal-1669252969-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1669252969-line-2)">
-</text><text class="terminal-1669252969-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-1669252969-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1669252969-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1669252969-line-3)">
-</text><text class="terminal-1669252969-r5" x="85.4" y="117.6" textLength="73.2" clip-path="url(#terminal-1669252969-line-4)">&#160;Stop&#160;</text><text class="terminal-1669252969-r6" x="414.8" y="117.6" textLength="134.2" clip-path="url(#terminal-1669252969-line-4)">00:00:10.10</text><text class="terminal-1669252969-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1669252969-line-4)">
-</text><text class="terminal-1669252969-r7" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-1669252969-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1669252969-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1669252969-line-5)">
-</text><text class="terminal-1669252969-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1669252969-line-6)">
-</text><text class="terminal-1669252969-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1669252969-line-7)">
-</text><text class="terminal-1669252969-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1669252969-line-8)">
-</text><text class="terminal-1669252969-r4" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-1669252969-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1669252969-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1669252969-line-9)">
-</text><text class="terminal-1669252969-r5" x="85.4" y="264" textLength="73.2" clip-path="url(#terminal-1669252969-line-10)">&#160;Stop&#160;</text><text class="terminal-1669252969-r6" x="414.8" y="264" textLength="134.2" clip-path="url(#terminal-1669252969-line-10)">00:00:06.07</text><text class="terminal-1669252969-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1669252969-line-10)">
-</text><text class="terminal-1669252969-r7" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-1669252969-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1669252969-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1669252969-line-11)">
-</text><text class="terminal-1669252969-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1669252969-line-12)">
-</text><text class="terminal-1669252969-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1669252969-line-13)">
-</text><text class="terminal-1669252969-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1669252969-line-14)">
-</text><text class="terminal-1669252969-r8" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-1669252969-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1669252969-r9" x="756.4" y="386" textLength="195.2" clip-path="url(#terminal-1669252969-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1669252969-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1669252969-line-15)">
-</text><text class="terminal-1669252969-r10" x="73.2" y="410.4" textLength="85.4" clip-path="url(#terminal-1669252969-line-16)">&#160;Start&#160;</text><text class="terminal-1669252969-r11" x="414.8" y="410.4" textLength="134.2" clip-path="url(#terminal-1669252969-line-16)">00:00:00.00</text><text class="terminal-1669252969-r12" x="805.2" y="410.4" textLength="85.4" clip-path="url(#terminal-1669252969-line-16)">&#160;Reset&#160;</text><text class="terminal-1669252969-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1669252969-line-16)">
-</text><text class="terminal-1669252969-r13" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-1669252969-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1669252969-r14" x="756.4" y="434.8" textLength="195.2" clip-path="url(#terminal-1669252969-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1669252969-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1669252969-line-17)">
-</text><text class="terminal-1669252969-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1669252969-line-18)">
-</text><text class="terminal-1669252969-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1669252969-line-19)">
-</text><text class="terminal-1669252969-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1669252969-line-20)">
-</text><text class="terminal-1669252969-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1669252969-line-21)">
-</text><text class="terminal-1669252969-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1669252969-line-22)">
-</text><text class="terminal-1669252969-r15" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-1669252969-line-23)">&#160;d&#160;</text><text class="terminal-1669252969-r16" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-1669252969-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-1669252969-r18" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-1669252969-line-23)">▏</text><text class="terminal-1669252969-r15" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-1669252969-line-23)">^p</text><text class="terminal-1669252969-r16" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-1669252969-line-23)">&#160;palette</text>
+    <g class="terminal-3072968554-matrix">
+    <text class="terminal-3072968554-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-3072968554-line-0)">⭘</text><text class="terminal-3072968554-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-3072968554-line-0)">StopwatchApp</text><text class="terminal-3072968554-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3072968554-line-0)">
+</text><text class="terminal-3072968554-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3072968554-line-1)">
+</text><text class="terminal-3072968554-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3072968554-line-2)">
+</text><text class="terminal-3072968554-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-3072968554-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3072968554-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3072968554-line-3)">
+</text><text class="terminal-3072968554-r5" x="85.4" y="117.6" textLength="73.2" clip-path="url(#terminal-3072968554-line-4)">&#160;Stop&#160;</text><text class="terminal-3072968554-r6" x="414.8" y="117.6" textLength="134.2" clip-path="url(#terminal-3072968554-line-4)">00:00:10.12</text><text class="terminal-3072968554-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3072968554-line-4)">
+</text><text class="terminal-3072968554-r7" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-3072968554-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3072968554-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3072968554-line-5)">
+</text><text class="terminal-3072968554-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3072968554-line-6)">
+</text><text class="terminal-3072968554-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3072968554-line-7)">
+</text><text class="terminal-3072968554-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3072968554-line-8)">
+</text><text class="terminal-3072968554-r4" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-3072968554-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3072968554-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3072968554-line-9)">
+</text><text class="terminal-3072968554-r5" x="85.4" y="264" textLength="73.2" clip-path="url(#terminal-3072968554-line-10)">&#160;Stop&#160;</text><text class="terminal-3072968554-r6" x="414.8" y="264" textLength="134.2" clip-path="url(#terminal-3072968554-line-10)">00:00:06.06</text><text class="terminal-3072968554-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3072968554-line-10)">
+</text><text class="terminal-3072968554-r7" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-3072968554-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3072968554-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3072968554-line-11)">
+</text><text class="terminal-3072968554-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3072968554-line-12)">
+</text><text class="terminal-3072968554-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3072968554-line-13)">
+</text><text class="terminal-3072968554-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3072968554-line-14)">
+</text><text class="terminal-3072968554-r8" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-3072968554-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3072968554-r9" x="756.4" y="386" textLength="195.2" clip-path="url(#terminal-3072968554-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3072968554-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3072968554-line-15)">
+</text><text class="terminal-3072968554-r10" x="73.2" y="410.4" textLength="85.4" clip-path="url(#terminal-3072968554-line-16)">&#160;Start&#160;</text><text class="terminal-3072968554-r11" x="414.8" y="410.4" textLength="134.2" clip-path="url(#terminal-3072968554-line-16)">00:00:00.00</text><text class="terminal-3072968554-r12" x="805.2" y="410.4" textLength="85.4" clip-path="url(#terminal-3072968554-line-16)">&#160;Reset&#160;</text><text class="terminal-3072968554-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3072968554-line-16)">
+</text><text class="terminal-3072968554-r13" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-3072968554-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3072968554-r14" x="756.4" y="434.8" textLength="195.2" clip-path="url(#terminal-3072968554-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3072968554-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3072968554-line-17)">
+</text><text class="terminal-3072968554-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3072968554-line-18)">
+</text><text class="terminal-3072968554-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3072968554-line-19)">
+</text><text class="terminal-3072968554-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3072968554-line-20)">
+</text><text class="terminal-3072968554-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3072968554-line-21)">
+</text><text class="terminal-3072968554-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3072968554-line-22)">
+</text><text class="terminal-3072968554-r15" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-3072968554-line-23)">&#160;d&#160;</text><text class="terminal-3072968554-r16" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-3072968554-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-3072968554-r18" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-3072968554-line-23)">▏</text><text class="terminal-3072968554-r15" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-3072968554-line-23)">^p</text><text class="terminal-3072968554-r16" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-3072968554-line-23)">&#160;palette</text>
     </g>
     </g>
 </svg>
@@ -9016,148 +9016,148 @@ <h2 id="dynamic-widgets">Dynamic widgets<a class="headerlink" href="#dynamic-wid
         font-weight: 700;
     }
 
-    .terminal-4044215925-matrix {
+    .terminal-4106344058-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-4044215925-title {
+    .terminal-4106344058-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-4044215925-r1 { fill: #c5c8c6 }
-.terminal-4044215925-r2 { fill: #1e1e1e }
-.terminal-4044215925-r3 { fill: #1f1f1f }
-.terminal-4044215925-r4 { fill: #e76580 }
-.terminal-4044215925-r5 { fill: #f5e5e9;font-weight: bold }
-.terminal-4044215925-r6 { fill: #0a180e;font-weight: bold }
-.terminal-4044215925-r7 { fill: #780028 }
-.terminal-4044215925-r8 { fill: #7ae998 }
-.terminal-4044215925-r9 { fill: #ffffff }
-.terminal-4044215925-r10 { fill: #4ebf71;font-weight: bold }
-.terminal-4044215925-r11 { fill: #707070 }
-.terminal-4044215925-r12 { fill: #1c1d1e;font-weight: bold }
-.terminal-4044215925-r13 { fill: #008139 }
-.terminal-4044215925-r14 { fill: #9ea4a9 }
-.terminal-4044215925-r15 { fill: #004578;font-weight: bold }
-.terminal-4044215925-r16 { fill: #585a5c }
-.terminal-4044215925-r17 { fill: #1c1d1e }
-.terminal-4044215925-r18 { fill: #b3b8bc }
+    .terminal-4106344058-r1 { fill: #c5c8c6 }
+.terminal-4106344058-r2 { fill: #1e1e1e }
+.terminal-4106344058-r3 { fill: #1f1f1f }
+.terminal-4106344058-r4 { fill: #e76580 }
+.terminal-4106344058-r5 { fill: #f5e5e9;font-weight: bold }
+.terminal-4106344058-r6 { fill: #0a180e;font-weight: bold }
+.terminal-4106344058-r7 { fill: #780028 }
+.terminal-4106344058-r8 { fill: #7ae998 }
+.terminal-4106344058-r9 { fill: #ffffff }
+.terminal-4106344058-r10 { fill: #4ebf71;font-weight: bold }
+.terminal-4106344058-r11 { fill: #707070 }
+.terminal-4106344058-r12 { fill: #1c1d1e;font-weight: bold }
+.terminal-4106344058-r13 { fill: #008139 }
+.terminal-4106344058-r14 { fill: #9ea4a9 }
+.terminal-4106344058-r15 { fill: #004578;font-weight: bold }
+.terminal-4106344058-r16 { fill: #585a5c }
+.terminal-4106344058-r17 { fill: #1c1d1e }
+.terminal-4106344058-r18 { fill: #b3b8bc }
     </style>
 
     <defs>
-    <clipPath id="terminal-4044215925-clip-terminal">
+    <clipPath id="terminal-4106344058-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-4044215925-line-0">
+    <clipPath id="terminal-4106344058-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-1">
+<clipPath id="terminal-4106344058-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-2">
+<clipPath id="terminal-4106344058-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-3">
+<clipPath id="terminal-4106344058-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-4">
+<clipPath id="terminal-4106344058-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-5">
+<clipPath id="terminal-4106344058-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-6">
+<clipPath id="terminal-4106344058-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-7">
+<clipPath id="terminal-4106344058-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-8">
+<clipPath id="terminal-4106344058-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-9">
+<clipPath id="terminal-4106344058-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-10">
+<clipPath id="terminal-4106344058-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-11">
+<clipPath id="terminal-4106344058-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-12">
+<clipPath id="terminal-4106344058-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-13">
+<clipPath id="terminal-4106344058-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-14">
+<clipPath id="terminal-4106344058-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-15">
+<clipPath id="terminal-4106344058-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-16">
+<clipPath id="terminal-4106344058-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-17">
+<clipPath id="terminal-4106344058-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-18">
+<clipPath id="terminal-4106344058-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-19">
+<clipPath id="terminal-4106344058-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-20">
+<clipPath id="terminal-4106344058-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-21">
+<clipPath id="terminal-4106344058-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-4044215925-line-22">
+<clipPath id="terminal-4106344058-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-4044215925-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch.py</text>
+    <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-4106344058-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">stopwatch.py</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-4044215925-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-4106344058-clip-terminal)">
     <rect fill="#e9e9e9" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="24.4" y="1.5" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="402.6" y="1.5" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="549" y="1.5" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="866.2" y="1.5" width="0" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="866.2" y="1.5" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="25.9" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="50.3" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="74.7" width="719.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="85.4" y="99.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="158.6" y="99.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="99.1" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="402.6" y="99.1" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="536.8" y="99.1" width="402.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#b93c5b" x="24.4" y="123.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="219.6" y="123.5" width="719.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="12.2" y="147.9" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="172.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="196.7" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="221.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="221.1" width="512.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="221.1" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0a180e" x="73.2" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="245.5" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="402.6" y="245.5" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="536.8" y="245.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="780.8" y="245.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="866.2" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="269.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="269.9" width="512.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="269.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="294.3" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="318.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="343.1" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="367.5" width="512.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="367.5" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="73.2" y="391.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="391.9" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="402.6" y="391.9" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="536.8" y="391.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="780.8" y="391.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="866.2" y="391.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="416.3" width="512.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="416.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="440.7" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="465.1" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="489.5" width="927.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="513.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="513.9" width="512.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="513.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="12.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="24.4" y="538.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="73.2" y="538.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#4ebf71" x="158.6" y="538.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="219.6" y="538.3" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="402.6" y="538.3" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="536.8" y="538.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="732" y="538.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="780.8" y="538.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="866.2" y="538.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#ebebeb" x="927.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="939.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="0" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="36.6" y="562.7" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="244" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="280.6" y="562.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="329.4" y="562.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="366" y="562.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="451.4" y="562.7" width="378.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="829.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="841.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="866.2" y="562.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#dce3e8" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-4044215925-matrix">
-    <text class="terminal-4044215925-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-4044215925-line-0)">⭘</text><text class="terminal-4044215925-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-4044215925-line-0)">StopwatchApp</text><text class="terminal-4044215925-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4044215925-line-0)">
-</text><text class="terminal-4044215925-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4044215925-line-1)">
-</text><text class="terminal-4044215925-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4044215925-line-2)">
-</text><text class="terminal-4044215925-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-4044215925-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4044215925-line-3)">
-</text><text class="terminal-4044215925-r5" x="85.4" y="117.6" textLength="73.2" clip-path="url(#terminal-4044215925-line-4)">&#160;Stop&#160;</text><text class="terminal-4044215925-r6" x="402.6" y="117.6" textLength="134.2" clip-path="url(#terminal-4044215925-line-4)">00:00:06.10</text><text class="terminal-4044215925-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4044215925-line-4)">
-</text><text class="terminal-4044215925-r7" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-4044215925-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4044215925-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4044215925-line-5)">
-</text><text class="terminal-4044215925-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4044215925-line-6)">
-</text><text class="terminal-4044215925-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4044215925-line-7)">
-</text><text class="terminal-4044215925-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4044215925-line-8)">
-</text><text class="terminal-4044215925-r8" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-4044215925-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r9" x="732" y="239.6" textLength="195.2" clip-path="url(#terminal-4044215925-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4044215925-line-9)">
-</text><text class="terminal-4044215925-r10" x="73.2" y="264" textLength="85.4" clip-path="url(#terminal-4044215925-line-10)">&#160;Start&#160;</text><text class="terminal-4044215925-r11" x="402.6" y="264" textLength="134.2" clip-path="url(#terminal-4044215925-line-10)">00:00:00.00</text><text class="terminal-4044215925-r12" x="780.8" y="264" textLength="85.4" clip-path="url(#terminal-4044215925-line-10)">&#160;Reset&#160;</text><text class="terminal-4044215925-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4044215925-line-10)">
-</text><text class="terminal-4044215925-r13" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-4044215925-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4044215925-r14" x="732" y="288.4" textLength="195.2" clip-path="url(#terminal-4044215925-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4044215925-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4044215925-line-11)">
-</text><text class="terminal-4044215925-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4044215925-line-12)">
-</text><text class="terminal-4044215925-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4044215925-line-13)">
-</text><text class="terminal-4044215925-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4044215925-line-14)">
-</text><text class="terminal-4044215925-r8" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-4044215925-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r9" x="732" y="386" textLength="195.2" clip-path="url(#terminal-4044215925-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4044215925-line-15)">
-</text><text class="terminal-4044215925-r6" x="73.2" y="410.4" textLength="85.4" clip-path="url(#terminal-4044215925-line-16)">&#160;Start&#160;</text><text class="terminal-4044215925-r11" x="402.6" y="410.4" textLength="134.2" clip-path="url(#terminal-4044215925-line-16)">00:00:00.00</text><text class="terminal-4044215925-r12" x="780.8" y="410.4" textLength="85.4" clip-path="url(#terminal-4044215925-line-16)">&#160;Reset&#160;</text><text class="terminal-4044215925-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4044215925-line-16)">
-</text><text class="terminal-4044215925-r13" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-4044215925-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4044215925-r14" x="732" y="434.8" textLength="195.2" clip-path="url(#terminal-4044215925-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4044215925-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4044215925-line-17)">
-</text><text class="terminal-4044215925-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4044215925-line-18)">
-</text><text class="terminal-4044215925-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4044215925-line-19)">
-</text><text class="terminal-4044215925-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4044215925-line-20)">
-</text><text class="terminal-4044215925-r8" x="24.4" y="532.4" textLength="195.2" clip-path="url(#terminal-4044215925-line-21)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r9" x="732" y="532.4" textLength="195.2" clip-path="url(#terminal-4044215925-line-21)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4044215925-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4044215925-line-21)">
-</text><text class="terminal-4044215925-r6" x="73.2" y="556.8" textLength="85.4" clip-path="url(#terminal-4044215925-line-22)">&#160;Start&#160;</text><text class="terminal-4044215925-r11" x="402.6" y="556.8" textLength="134.2" clip-path="url(#terminal-4044215925-line-22)">00:00:00.00</text><text class="terminal-4044215925-r12" x="780.8" y="556.8" textLength="85.4" clip-path="url(#terminal-4044215925-line-22)">&#160;Reset&#160;</text><text class="terminal-4044215925-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4044215925-line-22)">
-</text><text class="terminal-4044215925-r15" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-4044215925-line-23)">&#160;d&#160;</text><text class="terminal-4044215925-r16" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-4044215925-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-4044215925-r15" x="244" y="581.2" textLength="36.6" clip-path="url(#terminal-4044215925-line-23)">&#160;a&#160;</text><text class="terminal-4044215925-r16" x="280.6" y="581.2" textLength="48.8" clip-path="url(#terminal-4044215925-line-23)">Add&#160;</text><text class="terminal-4044215925-r15" x="329.4" y="581.2" textLength="36.6" clip-path="url(#terminal-4044215925-line-23)">&#160;r&#160;</text><text class="terminal-4044215925-r16" x="366" y="581.2" textLength="85.4" clip-path="url(#terminal-4044215925-line-23)">Remove&#160;</text><text class="terminal-4044215925-r18" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-4044215925-line-23)">▏</text><text class="terminal-4044215925-r15" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-4044215925-line-23)">^p</text><text class="terminal-4044215925-r16" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-4044215925-line-23)">&#160;palette</text>
+    <g class="terminal-4106344058-matrix">
+    <text class="terminal-4106344058-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-4106344058-line-0)">⭘</text><text class="terminal-4106344058-r2" x="402.6" y="20" textLength="146.4" clip-path="url(#terminal-4106344058-line-0)">StopwatchApp</text><text class="terminal-4106344058-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4106344058-line-0)">
+</text><text class="terminal-4106344058-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4106344058-line-1)">
+</text><text class="terminal-4106344058-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4106344058-line-2)">
+</text><text class="terminal-4106344058-r4" x="24.4" y="93.2" textLength="195.2" clip-path="url(#terminal-4106344058-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4106344058-line-3)">
+</text><text class="terminal-4106344058-r5" x="85.4" y="117.6" textLength="73.2" clip-path="url(#terminal-4106344058-line-4)">&#160;Stop&#160;</text><text class="terminal-4106344058-r6" x="402.6" y="117.6" textLength="134.2" clip-path="url(#terminal-4106344058-line-4)">00:00:06.15</text><text class="terminal-4106344058-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4106344058-line-4)">
+</text><text class="terminal-4106344058-r7" x="24.4" y="142" textLength="195.2" clip-path="url(#terminal-4106344058-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4106344058-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4106344058-line-5)">
+</text><text class="terminal-4106344058-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4106344058-line-6)">
+</text><text class="terminal-4106344058-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4106344058-line-7)">
+</text><text class="terminal-4106344058-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4106344058-line-8)">
+</text><text class="terminal-4106344058-r8" x="24.4" y="239.6" textLength="195.2" clip-path="url(#terminal-4106344058-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r9" x="732" y="239.6" textLength="195.2" clip-path="url(#terminal-4106344058-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4106344058-line-9)">
+</text><text class="terminal-4106344058-r10" x="73.2" y="264" textLength="85.4" clip-path="url(#terminal-4106344058-line-10)">&#160;Start&#160;</text><text class="terminal-4106344058-r11" x="402.6" y="264" textLength="134.2" clip-path="url(#terminal-4106344058-line-10)">00:00:00.00</text><text class="terminal-4106344058-r12" x="780.8" y="264" textLength="85.4" clip-path="url(#terminal-4106344058-line-10)">&#160;Reset&#160;</text><text class="terminal-4106344058-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4106344058-line-10)">
+</text><text class="terminal-4106344058-r13" x="24.4" y="288.4" textLength="195.2" clip-path="url(#terminal-4106344058-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4106344058-r14" x="732" y="288.4" textLength="195.2" clip-path="url(#terminal-4106344058-line-11)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4106344058-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4106344058-line-11)">
+</text><text class="terminal-4106344058-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4106344058-line-12)">
+</text><text class="terminal-4106344058-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4106344058-line-13)">
+</text><text class="terminal-4106344058-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4106344058-line-14)">
+</text><text class="terminal-4106344058-r8" x="24.4" y="386" textLength="195.2" clip-path="url(#terminal-4106344058-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r9" x="732" y="386" textLength="195.2" clip-path="url(#terminal-4106344058-line-15)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4106344058-line-15)">
+</text><text class="terminal-4106344058-r6" x="73.2" y="410.4" textLength="85.4" clip-path="url(#terminal-4106344058-line-16)">&#160;Start&#160;</text><text class="terminal-4106344058-r11" x="402.6" y="410.4" textLength="134.2" clip-path="url(#terminal-4106344058-line-16)">00:00:00.00</text><text class="terminal-4106344058-r12" x="780.8" y="410.4" textLength="85.4" clip-path="url(#terminal-4106344058-line-16)">&#160;Reset&#160;</text><text class="terminal-4106344058-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4106344058-line-16)">
+</text><text class="terminal-4106344058-r13" x="24.4" y="434.8" textLength="195.2" clip-path="url(#terminal-4106344058-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4106344058-r14" x="732" y="434.8" textLength="195.2" clip-path="url(#terminal-4106344058-line-17)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4106344058-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4106344058-line-17)">
+</text><text class="terminal-4106344058-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4106344058-line-18)">
+</text><text class="terminal-4106344058-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4106344058-line-19)">
+</text><text class="terminal-4106344058-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4106344058-line-20)">
+</text><text class="terminal-4106344058-r8" x="24.4" y="532.4" textLength="195.2" clip-path="url(#terminal-4106344058-line-21)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r9" x="732" y="532.4" textLength="195.2" clip-path="url(#terminal-4106344058-line-21)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4106344058-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4106344058-line-21)">
+</text><text class="terminal-4106344058-r6" x="73.2" y="556.8" textLength="85.4" clip-path="url(#terminal-4106344058-line-22)">&#160;Start&#160;</text><text class="terminal-4106344058-r11" x="402.6" y="556.8" textLength="134.2" clip-path="url(#terminal-4106344058-line-22)">00:00:00.00</text><text class="terminal-4106344058-r12" x="780.8" y="556.8" textLength="85.4" clip-path="url(#terminal-4106344058-line-22)">&#160;Reset&#160;</text><text class="terminal-4106344058-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4106344058-line-22)">
+</text><text class="terminal-4106344058-r15" x="0" y="581.2" textLength="36.6" clip-path="url(#terminal-4106344058-line-23)">&#160;d&#160;</text><text class="terminal-4106344058-r16" x="36.6" y="581.2" textLength="207.4" clip-path="url(#terminal-4106344058-line-23)">Toggle&#160;dark&#160;mode&#160;</text><text class="terminal-4106344058-r15" x="244" y="581.2" textLength="36.6" clip-path="url(#terminal-4106344058-line-23)">&#160;a&#160;</text><text class="terminal-4106344058-r16" x="280.6" y="581.2" textLength="48.8" clip-path="url(#terminal-4106344058-line-23)">Add&#160;</text><text class="terminal-4106344058-r15" x="329.4" y="581.2" textLength="36.6" clip-path="url(#terminal-4106344058-line-23)">&#160;r&#160;</text><text class="terminal-4106344058-r16" x="366" y="581.2" textLength="85.4" clip-path="url(#terminal-4106344058-line-23)">Remove&#160;</text><text class="terminal-4106344058-r18" x="829.6" y="581.2" textLength="12.2" clip-path="url(#terminal-4106344058-line-23)">▏</text><text class="terminal-4106344058-r15" x="841.8" y="581.2" textLength="24.4" clip-path="url(#terminal-4106344058-line-23)">^p</text><text class="terminal-4106344058-r16" x="866.2" y="581.2" textLength="97.6" clip-path="url(#terminal-4106344058-line-23)">&#160;palette</text>
     </g>
     </g>
 </svg>
diff --git a/widgets/digits/index.html b/widgets/digits/index.html
index 4ace3817cb..e2e9cc1087 100644
--- a/widgets/digits/index.html
+++ b/widgets/digits/index.html
@@ -6872,132 +6872,132 @@ <h2 id="example">Example<a class="headerlink" href="#example" title="Permanent l
         font-weight: 700;
     }
 
-    .terminal-3240537144-matrix {
+    .terminal-4032470845-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-3240537144-title {
+    .terminal-4032470845-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-3240537144-r1 { fill: #e1e1e1 }
-.terminal-3240537144-r2 { fill: #c5c8c6 }
-.terminal-3240537144-r3 { fill: #e1e1e1;font-weight: bold }
+    .terminal-4032470845-r1 { fill: #e1e1e1 }
+.terminal-4032470845-r2 { fill: #c5c8c6 }
+.terminal-4032470845-r3 { fill: #e1e1e1;font-weight: bold }
     </style>
 
     <defs>
-    <clipPath id="terminal-3240537144-clip-terminal">
+    <clipPath id="terminal-4032470845-clip-terminal">
       <rect x="0" y="0" width="975.0" height="584.5999999999999" />
     </clipPath>
-    <clipPath id="terminal-3240537144-line-0">
+    <clipPath id="terminal-4032470845-line-0">
     <rect x="0" y="1.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-1">
+<clipPath id="terminal-4032470845-line-1">
     <rect x="0" y="25.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-2">
+<clipPath id="terminal-4032470845-line-2">
     <rect x="0" y="50.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-3">
+<clipPath id="terminal-4032470845-line-3">
     <rect x="0" y="74.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-4">
+<clipPath id="terminal-4032470845-line-4">
     <rect x="0" y="99.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-5">
+<clipPath id="terminal-4032470845-line-5">
     <rect x="0" y="123.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-6">
+<clipPath id="terminal-4032470845-line-6">
     <rect x="0" y="147.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-7">
+<clipPath id="terminal-4032470845-line-7">
     <rect x="0" y="172.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-8">
+<clipPath id="terminal-4032470845-line-8">
     <rect x="0" y="196.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-9">
+<clipPath id="terminal-4032470845-line-9">
     <rect x="0" y="221.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-10">
+<clipPath id="terminal-4032470845-line-10">
     <rect x="0" y="245.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-11">
+<clipPath id="terminal-4032470845-line-11">
     <rect x="0" y="269.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-12">
+<clipPath id="terminal-4032470845-line-12">
     <rect x="0" y="294.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-13">
+<clipPath id="terminal-4032470845-line-13">
     <rect x="0" y="318.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-14">
+<clipPath id="terminal-4032470845-line-14">
     <rect x="0" y="343.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-15">
+<clipPath id="terminal-4032470845-line-15">
     <rect x="0" y="367.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-16">
+<clipPath id="terminal-4032470845-line-16">
     <rect x="0" y="391.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-17">
+<clipPath id="terminal-4032470845-line-17">
     <rect x="0" y="416.3" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-18">
+<clipPath id="terminal-4032470845-line-18">
     <rect x="0" y="440.7" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-19">
+<clipPath id="terminal-4032470845-line-19">
     <rect x="0" y="465.1" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-20">
+<clipPath id="terminal-4032470845-line-20">
     <rect x="0" y="489.5" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-21">
+<clipPath id="terminal-4032470845-line-21">
     <rect x="0" y="513.9" width="976" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-3240537144-line-22">
+<clipPath id="terminal-4032470845-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-3240537144-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ClockApp</text>
+    <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-4032470845-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ClockApp</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-3240537144-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-4032470845-clip-terminal)">
     <rect fill="#1e1e1e" x="0" y="1.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="245.5" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="245.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="269.9" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="269.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="294.3" width="292.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="634.4" y="294.3" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
-    <g class="terminal-3240537144-matrix">
-    <text class="terminal-3240537144-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3240537144-line-0)">
-</text><text class="terminal-3240537144-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3240537144-line-1)">
-</text><text class="terminal-3240537144-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3240537144-line-2)">
-</text><text class="terminal-3240537144-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3240537144-line-3)">
-</text><text class="terminal-3240537144-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3240537144-line-4)">
-</text><text class="terminal-3240537144-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3240537144-line-5)">
-</text><text class="terminal-3240537144-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3240537144-line-6)">
-</text><text class="terminal-3240537144-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3240537144-line-7)">
-</text><text class="terminal-3240537144-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3240537144-line-8)">
-</text><text class="terminal-3240537144-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3240537144-line-9)">
-</text><text class="terminal-3240537144-r3" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-3240537144-line-10)">&#160;┓&#160;┏━╸&#160;&#160;&#160;╺━┓┏━┓&#160;&#160;&#160;╺━┓╺━┓</text><text class="terminal-3240537144-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3240537144-line-10)">
-</text><text class="terminal-3240537144-r3" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-3240537144-line-11)">&#160;┃&#160;┣━┓&#160;:&#160;┏━┛┗━┫&#160;:&#160;┏━┛&#160;━┫</text><text class="terminal-3240537144-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3240537144-line-11)">
-</text><text class="terminal-3240537144-r3" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-3240537144-line-12)">╺┻╸┗━┛&#160;&#160;&#160;┗━╸╺━┛&#160;&#160;&#160;┗━╸╺━┛</text><text class="terminal-3240537144-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3240537144-line-12)">
-</text><text class="terminal-3240537144-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3240537144-line-13)">
-</text><text class="terminal-3240537144-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3240537144-line-14)">
-</text><text class="terminal-3240537144-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3240537144-line-15)">
-</text><text class="terminal-3240537144-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3240537144-line-16)">
-</text><text class="terminal-3240537144-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3240537144-line-17)">
-</text><text class="terminal-3240537144-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3240537144-line-18)">
-</text><text class="terminal-3240537144-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3240537144-line-19)">
-</text><text class="terminal-3240537144-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3240537144-line-20)">
-</text><text class="terminal-3240537144-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3240537144-line-21)">
-</text><text class="terminal-3240537144-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3240537144-line-22)">
+    <g class="terminal-4032470845-matrix">
+    <text class="terminal-4032470845-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4032470845-line-0)">
+</text><text class="terminal-4032470845-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4032470845-line-1)">
+</text><text class="terminal-4032470845-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4032470845-line-2)">
+</text><text class="terminal-4032470845-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4032470845-line-3)">
+</text><text class="terminal-4032470845-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4032470845-line-4)">
+</text><text class="terminal-4032470845-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4032470845-line-5)">
+</text><text class="terminal-4032470845-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4032470845-line-6)">
+</text><text class="terminal-4032470845-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4032470845-line-7)">
+</text><text class="terminal-4032470845-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4032470845-line-8)">
+</text><text class="terminal-4032470845-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4032470845-line-9)">
+</text><text class="terminal-4032470845-r3" x="341.6" y="264" textLength="292.8" clip-path="url(#terminal-4032470845-line-10)">&#160;┓&#160;┏━┓&#160;&#160;&#160;┏━╸&#160;┓&#160;&#160;&#160;&#160;&#160;┓&#160;┏━┓</text><text class="terminal-4032470845-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4032470845-line-10)">
+</text><text class="terminal-4032470845-r3" x="341.6" y="288.4" textLength="292.8" clip-path="url(#terminal-4032470845-line-11)">&#160;┃&#160;┣━┫&#160;:&#160;┗━┓&#160;┃&#160;&#160;:&#160;&#160;┃&#160;┗━┫</text><text class="terminal-4032470845-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4032470845-line-11)">
+</text><text class="terminal-4032470845-r3" x="341.6" y="312.8" textLength="292.8" clip-path="url(#terminal-4032470845-line-12)">╺┻╸┗━┛&#160;&#160;&#160;╺━┛╺┻╸&#160;&#160;&#160;╺┻╸╺━┛</text><text class="terminal-4032470845-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4032470845-line-12)">
+</text><text class="terminal-4032470845-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4032470845-line-13)">
+</text><text class="terminal-4032470845-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4032470845-line-14)">
+</text><text class="terminal-4032470845-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4032470845-line-15)">
+</text><text class="terminal-4032470845-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4032470845-line-16)">
+</text><text class="terminal-4032470845-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4032470845-line-17)">
+</text><text class="terminal-4032470845-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4032470845-line-18)">
+</text><text class="terminal-4032470845-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4032470845-line-19)">
+</text><text class="terminal-4032470845-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4032470845-line-20)">
+</text><text class="terminal-4032470845-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4032470845-line-21)">
+</text><text class="terminal-4032470845-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4032470845-line-22)">
 </text>
     </g>
     </g>