Repository: Textualize/textual
Pull request: Add `ContentSwitcher`
Implements the requirement outlined in #1945. Simply put: this PR adds a simple container widget (that inherits from `Container` and can be styled as desired) that hides all its immediate children, and expects them all to have a widget id. A `current` property is then set to switch between the different children. Essentially providing the foundation for a tabbed view or other similar widgets.

Problem statement:
Switcher Widget
We need a widget to switch between child widgets. Not sure what we would call it yet.

Essentially a single child would be visible at one time. Setting a reactive attribute to an query selector would make a new pane visible and hide the others.

Hints from issue discussion:
Carousel? Gallery?
Kind of, but more fundamental than that. Think of it as the foundation of a tabbed widget.

Commit message: Learning my alphabet...

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9379b4f55..3e263246d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Breaking change: Added `toggle_button` attribute to RadioButton and Checkbox events, replaces `input` https://github.com/Textualize/textual/pull/1940
 - A percentage alpha can now be applied to a border https://github.com/Textualize/textual/issues/1863
 - Added `Color.multiply_alpha`.
+- Added `ContentSwitcher` https://github.com/Textualize/textual/issues/1945
 
 ### Fixed
 
diff --git a/docs/api/content_switcher.md b/docs/api/content_switcher.md
new file mode 100644
index 0000000000..ef2cfe930b
--- /dev/null
+++ b/docs/api/content_switcher.md
@@ -0,0 +1 @@
+::: textual.widgets.ContentSwitcher
diff --git a/docs/examples/widgets/content_switcher.css b/docs/examples/widgets/content_switcher.css
new file mode 100644
index 0000000000..b8546b1177
--- /dev/null
+++ b/docs/examples/widgets/content_switcher.css
@@ -0,0 +1,27 @@
+Screen {
+    align: center middle;
+}
+
+#buttons {
+    margin-top: 1;
+    height: 3;
+    width: auto;
+}
+
+ContentSwitcher {
+    background: $panel;
+    border: round $primary;
+    width: 90%;
+    height: 80%;
+}
+
+DataTable {
+    background: $panel;
+}
+
+MarkdownH2 {
+    background: $primary;
+    color: yellow;
+    border: none;
+    padding: 0;
+}
diff --git a/docs/examples/widgets/content_switcher.py b/docs/examples/widgets/content_switcher.py
new file mode 100644
index 0000000000..1a774a8055
--- /dev/null
+++ b/docs/examples/widgets/content_switcher.py
@@ -0,0 +1,64 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Button, ContentSwitcher, DataTable, Markdown
+
+MARKDOWN_EXAMPLE = """# Three Flavours Cornetto
+
+The Three Flavours Cornetto trilogy is an anthology series of British
+comedic genre films directed by Edgar Wright.
+
+## Shaun of the Dead
+
+| Flavour | UK Release Date | Director |
+| -- | -- | -- |
+| Strawberry | 2004-04-09 | Edgar Wright |
+
+## Hot Fuzz
+
+| Flavour | UK Release Date | Director |
+| -- | -- | -- |
+| Classico | 2007-02-17 | Edgar Wright |
+
+## The World's End
+
+| Flavour | UK Release Date | Director |
+| -- | -- | -- |
+| Mint | 2013-07-19 | Edgar Wright |
+"""
+
+
+class ContentSwitcherApp(App[None]):
+    CSS_PATH = "content_switcher.css"
+
+    def compose(self) -> ComposeResult:
+        with Horizontal(id="buttons"):  # (1)!
+            yield Button("DataTable", id="data-table")  # (2)!
+            yield Button("Markdown", id="markdown")  # (3)!
+
+        with ContentSwitcher(initial="data-table"):  # (4)!
+            yield DataTable(id="data-table")
+            yield Markdown(MARKDOWN_EXAMPLE, id="markdown")
+
+    def on_button_pressed(self, event: Button.Pressed) -> None:
+        self.query_one(ContentSwitcher).current = event.button.id  # (5)!
+
+    def on_mount(self) -> None:
+        table = self.query_one(DataTable)
+        table.add_columns("Book", "Year")
+        table.add_rows(
+            [
+                (title.ljust(35), year)
+                for title, year in (
+                    ("Dune", 1965),
+                    ("Dune Messiah", 1969),
+                    ("Children of Dune", 1976),
+                    ("God Emperor of Dune", 1981),
+                    ("Heretics of Dune", 1984),
+                    ("Chapterhouse: Dune", 1985),
+                )
+            ]
+        )
+
+
+if __name__ == "__main__":
+    ContentSwitcherApp().run()
diff --git a/docs/widgets/content_switcher.md b/docs/widgets/content_switcher.md
new file mode 100644
index 0000000000..8673bf78f8
--- /dev/null
+++ b/docs/widgets/content_switcher.md
@@ -0,0 +1,54 @@
+# ContentSwitcher
+
+A widget for containing and switching display between multiple child
+widgets.
+
+- [ ] Focusable
+- [X] Container
+
+## Example
+
+The example below uses a `ContentSwitcher` in combination with two `Button`s
+to create a simple tabbed view. Note how each `Button` has an ID set, and
+how each child of the `ContentSwitcher` has a corresponding ID; then a
+`Button.Clicked` handler is used to set `ContentSwitcher.current` to switch
+between the different views.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/content_switcher.py"}
+    ```
+
+=== "content_switcher.py"
+
+    ~~~python
+    --8<-- "docs/examples/widgets/content_switcher.py"
+    ~~~
+
+    1. A `Horizontal` to hold the buttons, which with a unique ID.
+    2. This button will select the `DataTable` in the `ContentSwitcher`.
+    3. This button will select the `Markdown` in the `ContentSwitcher`
+    4. Note that the intial visible content is set by its ID, see below.
+    5. When a button is pressed, its ID is used to switch to a different widget in the `ContentSwitcher`. Remember that IDs are unique within parent, so the buttons and the widgets in the `ContentSwitcher` can share IDs.
+
+=== "content_switcher.css"
+
+    ~~~sass
+    --8<-- "docs/examples/widgets/content_switcher.css"
+    ~~~
+
+When the user presses the "Markdown" button the view is switched:
+
+```{.textual path="docs/examples/widgets/content_switcher.py" lines="40" press="tab,tab,enter"}
+```
+
+## Reactive Attributes
+
+| Name      | Type            | Default | Description                                                          |
+|-----------|-----------------|---------|----------------------------------------------------------------------|
+| `current` | `str` \| `None` | `None`  | The ID of the currently-visible child. `None` means nothing visible. |
+
+
+## See Also
+
+* [ContentSwitcher][textual.widgets.ContentSwitcher] code reference
diff --git a/mkdocs-nav.yml b/mkdocs-nav.yml
index 3750fc9d7c..820d601a79 100644
--- a/mkdocs-nav.yml
+++ b/mkdocs-nav.yml
@@ -122,6 +122,7 @@ nav:
     - Widgets:
       - "widgets/button.md"
       - "widgets/checkbox.md"
+      - "widgets/content_switcher.md"
       - "widgets/data_table.md"
       - "widgets/directory_tree.md"
       - "widgets/footer.md"
@@ -148,6 +149,7 @@ nav:
     - "api/checkbox.md"
     - "api/color.md"
     - "api/containers.md"
+    - "api/content_switcher.md"
     - "api/coordinate.md"
     - "api/data_table.md"
     - "api/directory_tree.md"
diff --git a/src/textual/widgets/__init__.py b/src/textual/widgets/__init__.py
index 0b85c91267..5dc515deae 100644
--- a/src/textual/widgets/__init__.py
+++ b/src/textual/widgets/__init__.py
@@ -12,6 +12,7 @@
     from ..widget import Widget
     from ._button import Button
     from ._checkbox import Checkbox
+    from ._content_switcher import ContentSwitcher
     from ._data_table import DataTable
     from ._directory_tree import DirectoryTree
     from ._footer import Footer
@@ -35,6 +36,7 @@
 __all__ = [
     "Button",
     "Checkbox",
+    "ContentSwitcher",
     "DataTable",
     "DirectoryTree",
     "Footer",
diff --git a/src/textual/widgets/__init__.pyi b/src/textual/widgets/__init__.pyi
index 3d2edfc065..5fe292f2d1 100644
--- a/src/textual/widgets/__init__.pyi
+++ b/src/textual/widgets/__init__.pyi
@@ -1,6 +1,7 @@
 # This stub file must re-export every classes exposed in the __init__.py's `__all__` list:
 from ._button import Button as Button
 from ._checkbox import Checkbox as Checkbox
+from ._content_switcher import ContentSwitcher as ContentSwitcher
 from ._data_table import DataTable as DataTable
 from ._directory_tree import DirectoryTree as DirectoryTree
 from ._footer import Footer as Footer
diff --git a/src/textual/widgets/_content_switcher.py b/src/textual/widgets/_content_switcher.py
new file mode 100644
index 0000000000..bc73ee4ec0
--- /dev/null
+++ b/src/textual/widgets/_content_switcher.py
@@ -0,0 +1,79 @@
+"""Provides a widget for switching between the display of its immediate children."""
+
+from __future__ import annotations
+
+from typing import Optional
+
+from ..containers import Container
+from ..reactive import reactive
+from ..widget import Widget
+
+
+class ContentSwitcher(Container):
+    """A widget for switching between different children.
+
+    Note:
+        All child widgets that are to be switched between need a unique ID.
+        Children that have no ID will be hidden and ignored.
+    """
+
+    current: reactive[str | None] = reactive[Optional[str]](None)
+    """The ID of the currently-displayed widget.
+
+    If set to `None` then no widget is visible.
+
+    Note:
+        If set to an unknown ID, this will result in
+        [NoMatches][textual.css.query.NoMatches] being raised.
+    """
+
+    def __init__(
+        self,
+        *children: Widget,
+        name: str | None = None,
+        id: str | None = None,
+        classes: str | None = None,
+        disabled: bool = False,
+        initial: str | None = None,
+    ) -> None:
+        """Initialise the content switching widget.
+
+        Args:
+            *children: The widgets to switch between.
+            name: The name of the content switcher.
+            id: The ID of the content switcher in the DOM.
+            classes: The CSS classes of the content switcher.
+            disabled: Whether the content switcher is disabled or not.
+            initial: The ID of the initial widget to show.
+
+        Note:
+            If `initial` is not supplied no children will be shown to start
+            with.
+        """
+        super().__init__(
+            *children,
+            name=name,
+            id=id,
+            classes=classes,
+            disabled=disabled,
+        )
+        self._initial = initial
+
+    def on_mount(self) -> None:
+        """Perform the initial setup of the widget once the DOM is ready."""
+        self.current = self._initial
+
+    @property
+    def visible_content(self) -> Widget | None:
+        """A reference to the currently-visible widget.
+
+        `None` if nothing is visible.
+        """
+        return self.get_child_by_id(self.current) if self.current is not None else None
+
+    def watch_current(self) -> None:
+        """React to the current visible child choice being changed."""
+        display = self.visible_content
+        with self.app.batch_update():
+            for child in self.children:
+                child.display = child == display
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
index ba2cbf1ca1..52b28a5ed7 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
@@ -828,6 +828,340 @@
   
   '''
 # ---
+# name: test_content_switcher_example_initial
+  '''
+  <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+      <!-- Generated with Rich https://www.textualize.io -->
+      <style>
+  
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Regular"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+          font-style: normal;
+          font-weight: 400;
+      }
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Bold"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+          font-style: bold;
+          font-weight: 700;
+      }
+  
+      .terminal-3464736066-matrix {
+          font-family: Fira Code, monospace;
+          font-size: 20px;
+          line-height: 24.4px;
+          font-variant-east-asian: full-width;
+      }
+  
+      .terminal-3464736066-title {
+          font-size: 18px;
+          font-weight: bold;
+          font-family: arial;
+      }
+  
+      .terminal-3464736066-r1 { fill: #e1e1e1 }
+  .terminal-3464736066-r2 { fill: #c5c8c6 }
+  .terminal-3464736066-r3 { fill: #454a50 }
+  .terminal-3464736066-r4 { fill: #e2e3e3;font-weight: bold }
+  .terminal-3464736066-r5 { fill: #000000 }
+  .terminal-3464736066-r6 { fill: #004578 }
+  .terminal-3464736066-r7 { fill: #dde6ed;font-weight: bold }
+  .terminal-3464736066-r8 { fill: #dde6ed }
+  .terminal-3464736066-r9 { fill: #211505 }
+  .terminal-3464736066-r10 { fill: #e2e3e3 }
+      </style>
+  
+      <defs>
+      <clipPath id="terminal-3464736066-clip-terminal">
+        <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+      </clipPath>
+      <clipPath id="terminal-3464736066-line-0">
+      <rect x="0" y="1.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-1">
+      <rect x="0" y="25.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-2">
+      <rect x="0" y="50.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-3">
+      <rect x="0" y="74.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-4">
+      <rect x="0" y="99.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-5">
+      <rect x="0" y="123.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-6">
+      <rect x="0" y="147.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-7">
+      <rect x="0" y="172.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-8">
+      <rect x="0" y="196.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-9">
+      <rect x="0" y="221.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-10">
+      <rect x="0" y="245.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-11">
+      <rect x="0" y="269.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-12">
+      <rect x="0" y="294.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-13">
+      <rect x="0" y="318.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-14">
+      <rect x="0" y="343.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-15">
+      <rect x="0" y="367.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-16">
+      <rect x="0" y="391.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-17">
+      <rect x="0" y="416.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-18">
+      <rect x="0" y="440.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-19">
+      <rect x="0" y="465.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-20">
+      <rect x="0" y="489.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-line-21">
+      <rect x="0" y="513.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3464736066-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-3464736066-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ContentSwitcherApp</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-3464736066-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="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="25.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="25.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="25.9" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="85.4" y="50.3" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="195.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="207.4" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="280.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="292.8" y="50.3" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="390.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="402.6" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="50.3" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="74.7" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="61" y="123.5" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="512.4" y="123.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#093e65" x="585.6" y="123.5" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#fea62b" x="61" y="147.9" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="512.4" y="147.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="585.6" y="147.9" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="172.3" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="512.4" y="172.3" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="585.6" y="172.3" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="172.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="196.7" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="512.4" y="196.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="585.6" y="196.7" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="221.1" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="512.4" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="585.6" y="221.1" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="245.5" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="512.4" y="245.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="585.6" y="245.5" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="269.9" width="451.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="512.4" y="269.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="585.6" y="269.9" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="343.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="367.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="391.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="416.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="440.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="465.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="489.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="513.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="513.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="538.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="538.3" width="48.8" 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-3464736066-matrix">
+      <text class="terminal-3464736066-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3464736066-line-0)">
+  </text><text class="terminal-3464736066-r3" x="48.8" y="44.4" textLength="195.2" clip-path="url(#terminal-3464736066-line-1)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3464736066-r3" x="244" y="44.4" textLength="195.2" clip-path="url(#terminal-3464736066-line-1)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-3464736066-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-1)">
+  </text><text class="terminal-3464736066-r4" x="85.4" y="68.8" textLength="109.8" clip-path="url(#terminal-3464736066-line-2)">DataTable</text><text class="terminal-3464736066-r4" x="292.8" y="68.8" textLength="97.6" clip-path="url(#terminal-3464736066-line-2)">Markdown</text><text class="terminal-3464736066-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-2)">
+  </text><text class="terminal-3464736066-r5" x="48.8" y="93.2" textLength="195.2" clip-path="url(#terminal-3464736066-line-3)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3464736066-r5" x="244" y="93.2" textLength="195.2" clip-path="url(#terminal-3464736066-line-3)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-3464736066-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-3)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="117.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-4)">╭</text><text class="terminal-3464736066-r6" x="61" y="117.6" textLength="854" clip-path="url(#terminal-3464736066-line-4)">──────────────────────────────────────────────────────────────────────</text><text class="terminal-3464736066-r6" x="915" y="117.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-4)">╮</text><text class="terminal-3464736066-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-4)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="142" textLength="12.2" clip-path="url(#terminal-3464736066-line-5)">│</text><text class="terminal-3464736066-r7" x="61" y="142" textLength="451.4" clip-path="url(#terminal-3464736066-line-5)">&#160;Book&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r7" x="512.4" y="142" textLength="73.2" clip-path="url(#terminal-3464736066-line-5)">&#160;Year&#160;</text><text class="terminal-3464736066-r6" x="915" y="142" textLength="12.2" clip-path="url(#terminal-3464736066-line-5)">│</text><text class="terminal-3464736066-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3464736066-line-5)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="166.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-6)">│</text><text class="terminal-3464736066-r9" x="61" y="166.4" textLength="451.4" clip-path="url(#terminal-3464736066-line-6)">&#160;Dune&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r10" x="512.4" y="166.4" textLength="73.2" clip-path="url(#terminal-3464736066-line-6)">&#160;1965&#160;</text><text class="terminal-3464736066-r6" x="915" y="166.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-6)">│</text><text class="terminal-3464736066-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-6)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="190.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-7)">│</text><text class="terminal-3464736066-r10" x="61" y="190.8" textLength="451.4" clip-path="url(#terminal-3464736066-line-7)">&#160;Dune&#160;Messiah&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r10" x="512.4" y="190.8" textLength="73.2" clip-path="url(#terminal-3464736066-line-7)">&#160;1969&#160;</text><text class="terminal-3464736066-r6" x="915" y="190.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-7)">│</text><text class="terminal-3464736066-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-7)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="215.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-8)">│</text><text class="terminal-3464736066-r10" x="61" y="215.2" textLength="451.4" clip-path="url(#terminal-3464736066-line-8)">&#160;Children&#160;of&#160;Dune&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r10" x="512.4" y="215.2" textLength="73.2" clip-path="url(#terminal-3464736066-line-8)">&#160;1976&#160;</text><text class="terminal-3464736066-r6" x="915" y="215.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-8)">│</text><text class="terminal-3464736066-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-8)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="239.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-9)">│</text><text class="terminal-3464736066-r10" x="61" y="239.6" textLength="451.4" clip-path="url(#terminal-3464736066-line-9)">&#160;God&#160;Emperor&#160;of&#160;Dune&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r10" x="512.4" y="239.6" textLength="73.2" clip-path="url(#terminal-3464736066-line-9)">&#160;1981&#160;</text><text class="terminal-3464736066-r6" x="915" y="239.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-9)">│</text><text class="terminal-3464736066-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-9)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="264" textLength="12.2" clip-path="url(#terminal-3464736066-line-10)">│</text><text class="terminal-3464736066-r10" x="61" y="264" textLength="451.4" clip-path="url(#terminal-3464736066-line-10)">&#160;Heretics&#160;of&#160;Dune&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r10" x="512.4" y="264" textLength="73.2" clip-path="url(#terminal-3464736066-line-10)">&#160;1984&#160;</text><text class="terminal-3464736066-r6" x="915" y="264" textLength="12.2" clip-path="url(#terminal-3464736066-line-10)">│</text><text class="terminal-3464736066-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3464736066-line-10)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="288.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-11)">│</text><text class="terminal-3464736066-r10" x="61" y="288.4" textLength="451.4" clip-path="url(#terminal-3464736066-line-11)">&#160;Chapterhouse:&#160;Dune&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-3464736066-r10" x="512.4" y="288.4" textLength="73.2" clip-path="url(#terminal-3464736066-line-11)">&#160;1985&#160;</text><text class="terminal-3464736066-r6" x="915" y="288.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-11)">│</text><text class="terminal-3464736066-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-11)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="312.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-12)">│</text><text class="terminal-3464736066-r6" x="915" y="312.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-12)">│</text><text class="terminal-3464736066-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-12)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="337.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-13)">│</text><text class="terminal-3464736066-r6" x="915" y="337.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-13)">│</text><text class="terminal-3464736066-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-13)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="361.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-14)">│</text><text class="terminal-3464736066-r6" x="915" y="361.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-14)">│</text><text class="terminal-3464736066-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-14)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="386" textLength="12.2" clip-path="url(#terminal-3464736066-line-15)">│</text><text class="terminal-3464736066-r6" x="915" y="386" textLength="12.2" clip-path="url(#terminal-3464736066-line-15)">│</text><text class="terminal-3464736066-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3464736066-line-15)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="410.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-16)">│</text><text class="terminal-3464736066-r6" x="915" y="410.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-16)">│</text><text class="terminal-3464736066-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-16)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="434.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-17)">│</text><text class="terminal-3464736066-r6" x="915" y="434.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-17)">│</text><text class="terminal-3464736066-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-17)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="459.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-18)">│</text><text class="terminal-3464736066-r6" x="915" y="459.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-18)">│</text><text class="terminal-3464736066-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3464736066-line-18)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="483.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-19)">│</text><text class="terminal-3464736066-r6" x="915" y="483.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-19)">│</text><text class="terminal-3464736066-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3464736066-line-19)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="508" textLength="12.2" clip-path="url(#terminal-3464736066-line-20)">│</text><text class="terminal-3464736066-r6" x="915" y="508" textLength="12.2" clip-path="url(#terminal-3464736066-line-20)">│</text><text class="terminal-3464736066-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3464736066-line-20)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="532.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-21)">│</text><text class="terminal-3464736066-r6" x="915" y="532.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-21)">│</text><text class="terminal-3464736066-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3464736066-line-21)">
+  </text><text class="terminal-3464736066-r6" x="48.8" y="556.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-22)">╰</text><text class="terminal-3464736066-r6" x="61" y="556.8" textLength="854" clip-path="url(#terminal-3464736066-line-22)">──────────────────────────────────────────────────────────────────────</text><text class="terminal-3464736066-r6" x="915" y="556.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-22)">╯</text><text class="terminal-3464736066-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3464736066-line-22)">
+  </text>
+      </g>
+      </g>
+  </svg>
+  
+  '''
+# ---
+# name: test_content_switcher_example_switch
+  '''
+  <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+      <!-- Generated with Rich https://www.textualize.io -->
+      <style>
+  
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Regular"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+          font-style: normal;
+          font-weight: 400;
+      }
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Bold"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+          font-style: bold;
+          font-weight: 700;
+      }
+  
+      .terminal-4254212613-matrix {
+          font-family: Fira Code, monospace;
+          font-size: 20px;
+          line-height: 24.4px;
+          font-variant-east-asian: full-width;
+      }
+  
+      .terminal-4254212613-title {
+          font-size: 18px;
+          font-weight: bold;
+          font-family: arial;
+      }
+  
+      .terminal-4254212613-r1 { fill: #e1e1e1 }
+  .terminal-4254212613-r2 { fill: #c5c8c6 }
+  .terminal-4254212613-r3 { fill: #454a50 }
+  .terminal-4254212613-r4 { fill: #05080f }
+  .terminal-4254212613-r5 { fill: #e2e3e3;font-weight: bold }
+  .terminal-4254212613-r6 { fill: #1e2226;font-weight: bold }
+  .terminal-4254212613-r7 { fill: #000000 }
+  .terminal-4254212613-r8 { fill: #35393d }
+  .terminal-4254212613-r9 { fill: #004578 }
+  .terminal-4254212613-r10 { fill: #121212 }
+  .terminal-4254212613-r11 { fill: #e2e3e3 }
+  .terminal-4254212613-r12 { fill: #0053aa }
+  .terminal-4254212613-r13 { fill: #dde8f3;font-weight: bold }
+  .terminal-4254212613-r14 { fill: #ffff00;font-weight: bold }
+  .terminal-4254212613-r15 { fill: #dde6ed;font-weight: bold }
+  .terminal-4254212613-r16 { fill: #dde6ed }
+  .terminal-4254212613-r17 { fill: #e1e3e5 }
+  .terminal-4254212613-r18 { fill: #14191f }
+      </style>
+  
+      <defs>
+      <clipPath id="terminal-4254212613-clip-terminal">
+        <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+      </clipPath>
+      <clipPath id="terminal-4254212613-line-0">
+      <rect x="0" y="1.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-1">
+      <rect x="0" y="25.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-2">
+      <rect x="0" y="50.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-3">
+      <rect x="0" y="74.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-4">
+      <rect x="0" y="99.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-5">
+      <rect x="0" y="123.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-6">
+      <rect x="0" y="147.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-7">
+      <rect x="0" y="172.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-8">
+      <rect x="0" y="196.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-9">
+      <rect x="0" y="221.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-10">
+      <rect x="0" y="245.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-11">
+      <rect x="0" y="269.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-12">
+      <rect x="0" y="294.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-13">
+      <rect x="0" y="318.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-14">
+      <rect x="0" y="343.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-15">
+      <rect x="0" y="367.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-16">
+      <rect x="0" y="391.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-17">
+      <rect x="0" y="416.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-18">
+      <rect x="0" y="440.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-19">
+      <rect x="0" y="465.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-20">
+      <rect x="0" y="489.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-line-21">
+      <rect x="0" y="513.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-4254212613-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-4254212613-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ContentSwitcherApp</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-4254212613-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="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="25.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2226" x="244" y="25.9" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="25.9" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="85.4" y="50.3" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="195.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="207.4" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2226" x="244" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3a4a4" x="280.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3a4a4" x="292.8" y="50.3" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#a3a4a4" x="390.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2226" x="402.6" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="50.3" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2226" x="244" y="74.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="74.7" width="536.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="99.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="122" y="123.5" width="707.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="829.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="109.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="122" y="147.9" width="707.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="829.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="172.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="109.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="122" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="134.2" y="172.3" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="329.4" y="172.3" width="280.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="610" y="172.3" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="817.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="829.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="172.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="172.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="109.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="122" y="196.7" width="707.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="829.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="122" y="221.1" width="707.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="829.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="221.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="245.5" width="719.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="829.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="269.9" width="122" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="231.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="244" y="269.9" width="549" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="793" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="269.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="294.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="294.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="109.8" y="318.7" width="256.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="366" y="318.7" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="573.4" y="318.7" width="268.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="318.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="343.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="343.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="109.8" y="367.5" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="256.2" y="367.5" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="463.6" y="367.5" width="170.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#093e65" x="634.4" y="367.5" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="367.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2d39" x="109.8" y="391.9" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2d39" x="256.2" y="391.9" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2d39" x="463.6" y="391.9" width="170.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f2c36" x="634.4" y="391.9" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="391.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="416.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="890.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="109.8" y="440.7" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="427" y="440.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="524.6" y="440.7" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="890.6" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="440.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="109.8" y="465.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="890.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="109.8" y="489.5" width="122" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="231.8" y="489.5" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#004578" x="439.2" y="489.5" width="170.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#093e65" x="610" y="489.5" width="231.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="890.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="513.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2d39" x="109.8" y="513.9" width="122" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2d39" x="231.8" y="513.9" width="207.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e2d39" x="439.2" y="513.9" width="170.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1f2c36" x="610" y="513.9" width="231.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="841.8" y="513.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="890.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="513.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="61" y="538.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="915" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="927.2" y="538.3" width="48.8" 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-4254212613-matrix">
+      <text class="terminal-4254212613-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-4254212613-line-0)">
+  </text><text class="terminal-4254212613-r3" x="48.8" y="44.4" textLength="195.2" clip-path="url(#terminal-4254212613-line-1)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4254212613-r4" x="244" y="44.4" textLength="195.2" clip-path="url(#terminal-4254212613-line-1)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4254212613-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-1)">
+  </text><text class="terminal-4254212613-r5" x="85.4" y="68.8" textLength="109.8" clip-path="url(#terminal-4254212613-line-2)">DataTable</text><text class="terminal-4254212613-r6" x="292.8" y="68.8" textLength="97.6" clip-path="url(#terminal-4254212613-line-2)">Markdown</text><text class="terminal-4254212613-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-2)">
+  </text><text class="terminal-4254212613-r7" x="48.8" y="93.2" textLength="195.2" clip-path="url(#terminal-4254212613-line-3)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4254212613-r8" x="244" y="93.2" textLength="195.2" clip-path="url(#terminal-4254212613-line-3)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4254212613-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-3)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="117.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-4)">╭</text><text class="terminal-4254212613-r9" x="61" y="117.6" textLength="854" clip-path="url(#terminal-4254212613-line-4)">──────────────────────────────────────────────────────────────────────</text><text class="terminal-4254212613-r9" x="915" y="117.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-4)">╮</text><text class="terminal-4254212613-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-4)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="142" textLength="12.2" clip-path="url(#terminal-4254212613-line-5)">│</text><text class="terminal-4254212613-r10" x="109.8" y="142" textLength="12.2" clip-path="url(#terminal-4254212613-line-5)">▁</text><text class="terminal-4254212613-r10" x="122" y="142" textLength="707.6" clip-path="url(#terminal-4254212613-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-4254212613-r10" x="829.6" y="142" textLength="12.2" clip-path="url(#terminal-4254212613-line-5)">▁</text><text class="terminal-4254212613-r9" x="915" y="142" textLength="12.2" clip-path="url(#terminal-4254212613-line-5)">│</text><text class="terminal-4254212613-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-4254212613-line-5)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="166.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-6)">│</text><text class="terminal-4254212613-r10" x="109.8" y="166.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-6)">▎</text><text class="terminal-4254212613-r12" x="829.6" y="166.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-6)">▋</text><text class="terminal-4254212613-r9" x="915" y="166.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-6)">│</text><text class="terminal-4254212613-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-6)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="190.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-7)">│</text><text class="terminal-4254212613-r10" x="109.8" y="190.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-7)">▎</text><text class="terminal-4254212613-r13" x="329.4" y="190.8" textLength="280.6" clip-path="url(#terminal-4254212613-line-7)">Three&#160;Flavours&#160;Cornetto</text><text class="terminal-4254212613-r12" x="829.6" y="190.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-7)">▋</text><text class="terminal-4254212613-r9" x="915" y="190.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-7)">│</text><text class="terminal-4254212613-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-7)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="215.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-8)">│</text><text class="terminal-4254212613-r10" x="109.8" y="215.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-8)">▎</text><text class="terminal-4254212613-r12" x="829.6" y="215.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-8)">▋</text><text class="terminal-4254212613-r9" x="915" y="215.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-8)">│</text><text class="terminal-4254212613-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-8)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="239.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-9)">│</text><text class="terminal-4254212613-r10" x="109.8" y="239.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-9)">▔</text><text class="terminal-4254212613-r10" x="122" y="239.6" textLength="707.6" clip-path="url(#terminal-4254212613-line-9)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-4254212613-r10" x="829.6" y="239.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-9)">▔</text><text class="terminal-4254212613-r9" x="915" y="239.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-9)">│</text><text class="terminal-4254212613-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-9)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="264" textLength="12.2" clip-path="url(#terminal-4254212613-line-10)">│</text><text class="terminal-4254212613-r11" x="109.8" y="264" textLength="719.8" clip-path="url(#terminal-4254212613-line-10)">The&#160;Three&#160;Flavours&#160;Cornetto&#160;trilogy&#160;is&#160;an&#160;anthology&#160;series&#160;</text><text class="terminal-4254212613-r9" x="915" y="264" textLength="12.2" clip-path="url(#terminal-4254212613-line-10)">│</text><text class="terminal-4254212613-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-4254212613-line-10)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="288.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-11)">│</text><text class="terminal-4254212613-r11" x="109.8" y="288.4" textLength="122" clip-path="url(#terminal-4254212613-line-11)">of&#160;British</text><text class="terminal-4254212613-r11" x="244" y="288.4" textLength="549" clip-path="url(#terminal-4254212613-line-11)">comedic&#160;genre&#160;films&#160;directed&#160;by&#160;Edgar&#160;Wright.</text><text class="terminal-4254212613-r9" x="915" y="288.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-11)">│</text><text class="terminal-4254212613-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-11)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="312.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-12)">│</text><text class="terminal-4254212613-r9" x="915" y="312.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-12)">│</text><text class="terminal-4254212613-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-12)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="337.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-13)">│</text><text class="terminal-4254212613-r14" x="366" y="337.2" textLength="207.4" clip-path="url(#terminal-4254212613-line-13)">Shaun&#160;of&#160;the&#160;Dead</text><text class="terminal-4254212613-r9" x="915" y="337.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-13)">│</text><text class="terminal-4254212613-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-13)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="361.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-14)">│</text><text class="terminal-4254212613-r9" x="915" y="361.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-14)">│</text><text class="terminal-4254212613-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-14)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="386" textLength="12.2" clip-path="url(#terminal-4254212613-line-15)">│</text><text class="terminal-4254212613-r15" x="109.8" y="386" textLength="146.4" clip-path="url(#terminal-4254212613-line-15)">&#160;Flavour&#160;&#160;&#160;&#160;</text><text class="terminal-4254212613-r15" x="256.2" y="386" textLength="207.4" clip-path="url(#terminal-4254212613-line-15)">&#160;UK&#160;Release&#160;Date&#160;</text><text class="terminal-4254212613-r15" x="463.6" y="386" textLength="170.8" clip-path="url(#terminal-4254212613-line-15)">&#160;Director&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-4254212613-r9" x="915" y="386" textLength="12.2" clip-path="url(#terminal-4254212613-line-15)">│</text><text class="terminal-4254212613-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-4254212613-line-15)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="410.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-16)">│</text><text class="terminal-4254212613-r17" x="109.8" y="410.4" textLength="146.4" clip-path="url(#terminal-4254212613-line-16)">&#160;Strawberry&#160;</text><text class="terminal-4254212613-r17" x="256.2" y="410.4" textLength="207.4" clip-path="url(#terminal-4254212613-line-16)">&#160;2004-04-09&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-4254212613-r17" x="463.6" y="410.4" textLength="170.8" clip-path="url(#terminal-4254212613-line-16)">&#160;Edgar&#160;Wright&#160;</text><text class="terminal-4254212613-r9" x="915" y="410.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-16)">│</text><text class="terminal-4254212613-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-16)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="434.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-17)">│</text><text class="terminal-4254212613-r18" x="890.6" y="434.8" textLength="24.4" clip-path="url(#terminal-4254212613-line-17)">▇▇</text><text class="terminal-4254212613-r9" x="915" y="434.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-17)">│</text><text class="terminal-4254212613-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-17)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="459.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-18)">│</text><text class="terminal-4254212613-r14" x="427" y="459.2" textLength="97.6" clip-path="url(#terminal-4254212613-line-18)">Hot&#160;Fuzz</text><text class="terminal-4254212613-r9" x="915" y="459.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-18)">│</text><text class="terminal-4254212613-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-4254212613-line-18)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="483.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-19)">│</text><text class="terminal-4254212613-r9" x="915" y="483.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-19)">│</text><text class="terminal-4254212613-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-4254212613-line-19)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="508" textLength="12.2" clip-path="url(#terminal-4254212613-line-20)">│</text><text class="terminal-4254212613-r15" x="109.8" y="508" textLength="122" clip-path="url(#terminal-4254212613-line-20)">&#160;Flavour&#160;&#160;</text><text class="terminal-4254212613-r15" x="231.8" y="508" textLength="207.4" clip-path="url(#terminal-4254212613-line-20)">&#160;UK&#160;Release&#160;Date&#160;</text><text class="terminal-4254212613-r15" x="439.2" y="508" textLength="170.8" clip-path="url(#terminal-4254212613-line-20)">&#160;Director&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-4254212613-r9" x="915" y="508" textLength="12.2" clip-path="url(#terminal-4254212613-line-20)">│</text><text class="terminal-4254212613-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-4254212613-line-20)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="532.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-21)">│</text><text class="terminal-4254212613-r17" x="109.8" y="532.4" textLength="122" clip-path="url(#terminal-4254212613-line-21)">&#160;Classico&#160;</text><text class="terminal-4254212613-r17" x="231.8" y="532.4" textLength="207.4" clip-path="url(#terminal-4254212613-line-21)">&#160;2007-02-17&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-4254212613-r17" x="439.2" y="532.4" textLength="170.8" clip-path="url(#terminal-4254212613-line-21)">&#160;Edgar&#160;Wright&#160;</text><text class="terminal-4254212613-r9" x="915" y="532.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-21)">│</text><text class="terminal-4254212613-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-4254212613-line-21)">
+  </text><text class="terminal-4254212613-r9" x="48.8" y="556.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-22)">╰</text><text class="terminal-4254212613-r9" x="61" y="556.8" textLength="854" clip-path="url(#terminal-4254212613-line-22)">──────────────────────────────────────────────────────────────────────</text><text class="terminal-4254212613-r9" x="915" y="556.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-22)">╯</text><text class="terminal-4254212613-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-4254212613-line-22)">
+  </text>
+      </g>
+      </g>
+  </svg>
+  
+  '''
+# ---
 # name: test_css_property[align.py]
   '''
   <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py
index 5c07ff8f5b..f6b448755d 100644
--- a/tests/snapshot_tests/test_snapshots.py
+++ b/tests/snapshot_tests/test_snapshots.py
@@ -163,6 +163,16 @@ def test_radio_set_example(snap_compare):
     assert snap_compare(WIDGET_EXAMPLES_DIR / "radio_set.py")
 
 
+def test_content_switcher_example_initial(snap_compare):
+    assert snap_compare(WIDGET_EXAMPLES_DIR / "content_switcher.py")
+
+
+def test_content_switcher_example_switch(snap_compare):
+    assert snap_compare(WIDGET_EXAMPLES_DIR / "content_switcher.py", press=[
+        "tab", "tab", "enter", "wait:50"
+    ])
+
+
 # --- CSS properties ---
 # We have a canonical example for each CSS property that is shown in their docs.
 # If any of these change, something has likely broken, so snapshot each of them.
diff --git a/tests/test_content_switcher.py b/tests/test_content_switcher.py
new file mode 100644
index 0000000000..8c194b5a91
--- /dev/null
+++ b/tests/test_content_switcher.py
@@ -0,0 +1,95 @@
+from __future__ import annotations
+
+import pytest
+
+from textual.app import App, ComposeResult
+from textual.css.query import NoMatches
+from textual.widget import Widget
+from textual.widgets import ContentSwitcher
+
+
+class SwitcherApp(App[None]):
+    def __init__(self, initial: str | None = None) -> None:
+        super().__init__()
+        self._initial = initial
+
+    def compose(self) -> ComposeResult:
+        with ContentSwitcher(initial=self._initial):
+            for n in range(5):
+                yield Widget(id=f"w{n}")
+
+
+async def test_no_initial_display() -> None:
+    """Test starting a content switcher with nothing shown."""
+    async with SwitcherApp().run_test() as pilot:
+        assert pilot.app.query_one(ContentSwitcher).current is None
+        assert all(
+            not child.display for child in pilot.app.query_one(ContentSwitcher).children
+        )
+
+
+async def test_initial_display() -> None:
+    """Test starting a content switcher with a widget initially shown."""
+    async with SwitcherApp("w3").run_test() as pilot:
+        assert pilot.app.query_one(ContentSwitcher).current == "w3"
+        for child in pilot.app.query_one(ContentSwitcher).children:
+            assert child.display is (child.id == "w3")
+
+
+async def test_no_initial_display_then_set() -> None:
+    """Test starting a content switcher with nothing shown then setting the display."""
+    async with SwitcherApp().run_test() as pilot:
+        assert pilot.app.query_one(ContentSwitcher).current is None
+        assert all(
+            not child.display for child in pilot.app.query_one(ContentSwitcher).children
+        )
+        pilot.app.query_one(ContentSwitcher).current = "w3"
+        assert pilot.app.query_one(ContentSwitcher).current == "w3"
+        for child in pilot.app.query_one(ContentSwitcher).children:
+            assert child.display is (child.id == "w3")
+
+
+async def test_initial_display_then_change() -> None:
+    """Test starting a content switcher with a widget initially shown then changing it."""
+    async with SwitcherApp("w3").run_test() as pilot:
+        assert pilot.app.query_one(ContentSwitcher).current == "w3"
+        for child in pilot.app.query_one(ContentSwitcher).children:
+            assert child.display is (child.id == "w3")
+        pilot.app.query_one(ContentSwitcher).current = "w2"
+        assert pilot.app.query_one(ContentSwitcher).current == "w2"
+        for child in pilot.app.query_one(ContentSwitcher).children:
+            assert child.display is (child.id == "w2")
+
+
+async def test_initial_display_then_hide() -> None:
+    """Test starting a content switcher with a widget initially shown then hide all."""
+    async with SwitcherApp("w3").run_test() as pilot:
+        assert pilot.app.query_one(ContentSwitcher).current == "w3"
+        for child in pilot.app.query_one(ContentSwitcher).children:
+            assert child.display is (child.id == "w3")
+        pilot.app.query_one(ContentSwitcher).current = None
+        assert pilot.app.query_one(ContentSwitcher).current is None
+        assert all(
+            not child.display for child in pilot.app.query_one(ContentSwitcher).children
+        )
+
+
+@pytest.mark.xfail(
+    reason="The expected exception doesn't appear to make it to pytest -- perhaps related to https://github.com/Textualize/textual/issues/1972"
+)
+async def test_initial_display_unknown_id() -> None:
+    """Test setting an initial display to an unknown widget ID."""
+    with pytest.raises(NoMatches):
+        async with SwitcherApp("does-not-exist").run_test():
+            pass
+
+
+async def test_set_current_to_unknown_id() -> None:
+    """Test attempting to switch to an unknown widget ID."""
+    async with SwitcherApp().run_test() as pilot:
+        assert pilot.app.query_one(ContentSwitcher).current is None
+        assert all(
+            not child.display for child in pilot.app.query_one(ContentSwitcher).children
+        )
+        with pytest.raises(NoMatches):
+            pilot.app.query_one(ContentSwitcher).current = "does-not-exist"


Code review comments:
diff_hunk: @@ -0,0 +1,54 @@
+# ContentSwitcher
+
+A widget for containing and switching display between multiple child
+widgets.
+
+- [ ] Focusable
+- [X] Container
+
+## Example
+
+The example below uses a `ContentSwitcher` in combination with two `Button`s
+to create a simple tabbed view. Note how each `Button` has an ID set, and
+how each child of the `ContentSwitcher` has a corresponding ID; then a
+`Button.Clicked` handler is used to set `ContentSwitcher.current` to switch
+between the different views.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/content_switcher.py"}
+    ```
+
+=== "content_switcher.py"
+
+    ~~~python
+    --8<-- "docs/examples/widgets/content_switcher.py"
+    ~~~
+
+    1. A `Horizontal` to hold the buttons, which with a unique ID.
path: docs/widgets/content_switcher.md
text: @user1:
```suggestion
    1. A `Horizontal` to hold the buttons, each with a unique ID.
```

diff_hunk: @@ -0,0 +1,54 @@
+# ContentSwitcher
+
+A widget for containing and switching display between multiple child
+widgets.
+
+- [ ] Focusable
+- [X] Container
+
+## Example
+
+The example below uses a `ContentSwitcher` in combination with two `Button`s
+to create a simple tabbed view. Note how each `Button` has an ID set, and
+how each child of the `ContentSwitcher` has a corresponding ID; then a
+`Button.Clicked` handler is used to set `ContentSwitcher.current` to switch
+between the different views.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/content_switcher.py"}
+    ```
+
+=== "content_switcher.py"
+
+    ~~~python
+    --8<-- "docs/examples/widgets/content_switcher.py"
+    ~~~
+
+    1. A `Horizontal` to hold the buttons, which with a unique ID.
+    2. This button will select the `DataTable` in the `ContentSwitcher`.
+    3. This button will select the `Markdown` in the `ContentSwitcher`
+    4. Note that the intial visible content is set by its ID, see below.
+    5. When a button is pressed, its ID is used to switch to a different widget in the `ContentSwitcher`. Remember that IDs are unique within parent, so the buttons and the widgets in the `ContentSwitcher` can share IDs.
+
+=== "content_switcher.css"
+
+    ~~~sass
+    --8<-- "docs/examples/widgets/content_switcher.css"
+    ~~~
+
+When the user presses the "Markdown" button the view is switched:
+
+```{.textual path="docs/examples/widgets/content_switcher.py" lines="40" press="tab,tab,enter"}
+```
+
+## Reactive Attributes
+
+| Name      | Type            | Default | Description                                                          |
+|-----------|-----------------|---------|----------------------------------------------------------------------|
+| `current` | `str` \| `None` | `None`  | The ID of the currently-visible child. `None` means nothing visible. |
path: docs/widgets/content_switcher.md
text: @user1:
```suggestion
| `current` | `str` \| `None` | `None`  | The ID of the currently-visible child. `None` means nothing is visible. |
```

diff_hunk: @@ -0,0 +1,54 @@
+# ContentSwitcher
+
+A widget for containing and switching display between multiple child
+widgets.
+
+- [ ] Focusable
+- [X] Container
+
+## Example
+
+The example below uses a `ContentSwitcher` in combination with two `Button`s
+to create a simple tabbed view. Note how each `Button` has an ID set, and
+how each child of the `ContentSwitcher` has a corresponding ID; then a
+`Button.Clicked` handler is used to set `ContentSwitcher.current` to switch
+between the different views.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/content_switcher.py"}
+    ```
+
+=== "content_switcher.py"
+
+    ~~~python
+    --8<-- "docs/examples/widgets/content_switcher.py"
+    ~~~
+
+    1. A `Horizontal` to hold the buttons, which with a unique ID.
+    2. This button will select the `DataTable` in the `ContentSwitcher`.
+    3. This button will select the `Markdown` in the `ContentSwitcher`
path: docs/widgets/content_switcher.md
text: @user1:
```suggestion
    3. This button will select the `Markdown` in the `ContentSwitcher`.
```