WIP

material/assets/stylesheets/palette.css

@@ -0,0 +1,387 @@
+[data-md-color-accent=red] {
+  --md-accent-fg-color: hsla(348, 100%, 55%, 1);
+  --md-accent-fg-color--transparent: hsla(348, 100%, 55%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=pink] {
+  --md-accent-fg-color: hsla(339, 100%, 48%, 1);
+  --md-accent-fg-color--transparent: hsla(339, 100%, 48%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=purple] {
+  --md-accent-fg-color: hsla(291, 96%, 62%, 1);
+  --md-accent-fg-color--transparent: hsla(291, 96%, 62%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=deep-purple] {
+  --md-accent-fg-color: hsla(256, 100%, 65%, 1);
+  --md-accent-fg-color--transparent: hsla(256, 100%, 65%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=indigo] {
+  --md-accent-fg-color: hsla(231, 99%, 66%, 1);
+  --md-accent-fg-color--transparent: hsla(231, 99%, 66%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=blue] {
+  --md-accent-fg-color: hsla(218, 100%, 63%, 1);
+  --md-accent-fg-color--transparent: hsla(218, 100%, 63%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=light-blue] {
+  --md-accent-fg-color: hsla(203, 100%, 46%, 1);
+  --md-accent-fg-color--transparent: hsla(203, 100%, 46%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=cyan] {
+  --md-accent-fg-color: hsla(188, 100%, 42%, 1);
+  --md-accent-fg-color--transparent: hsla(188, 100%, 42%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=teal] {
+  --md-accent-fg-color: hsla(172, 100%, 37%, 1);
+  --md-accent-fg-color--transparent: hsla(172, 100%, 37%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=green] {
+  --md-accent-fg-color: hsla(145, 100%, 39%, 1);
+  --md-accent-fg-color--transparent: hsla(145, 100%, 39%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=light-green] {
+  --md-accent-fg-color: hsla(97, 81%, 48%, 1);
+  --md-accent-fg-color--transparent: hsla(97, 81%, 48%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-accent=lime] {
+  --md-accent-fg-color: hsla(75, 100%, 46%, 1);
+  --md-accent-fg-color--transparent: hsla(75, 100%, 46%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-accent-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-accent=yellow] {
+  --md-accent-fg-color: hsla(50, 100%, 50%, 1);
+  --md-accent-fg-color--transparent: hsla(50, 100%, 50%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-accent-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-accent=amber] {
+  --md-accent-fg-color: hsla(40, 100%, 50%, 1);
+  --md-accent-fg-color--transparent: hsla(40, 100%, 50%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-accent-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-accent=orange] {
+  --md-accent-fg-color: hsla(34, 100%, 50%, 1);
+  --md-accent-fg-color--transparent: hsla(34, 100%, 50%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-accent-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-accent=deep-orange] {
+  --md-accent-fg-color: hsla(14, 100%, 63%, 1);
+  --md-accent-fg-color--transparent: hsla(14, 100%, 63%, 0.1);
+  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=red] {
+  --md-primary-fg-color: hsl(1, 83%, 63%);
+  --md-primary-fg-color--light: hsl(0, 69%, 67%);
+  --md-primary-fg-color--dark: hsl(1, 77%, 55%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=pink] {
+  --md-primary-fg-color: hsl(340, 82%, 52%);
+  --md-primary-fg-color--light: hsl(340, 82%, 59%);
+  --md-primary-fg-color--dark: hsl(336, 78%, 43%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=purple] {
+  --md-primary-fg-color: hsl(291, 47%, 51%);
+  --md-primary-fg-color--light: hsl(291, 47%, 60%);
+  --md-primary-fg-color--dark: hsl(287, 65%, 40%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=deep-purple] {
+  --md-primary-fg-color: hsl(262, 47%, 55%);
+  --md-primary-fg-color--light: hsl(262, 47%, 63%);
+  --md-primary-fg-color--dark: hsl(262, 52%, 47%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=indigo] {
+  --md-primary-fg-color: hsl(231, 48%, 48%);
+  --md-primary-fg-color--light: hsl(231, 44%, 56%);
+  --md-primary-fg-color--dark: hsl(232, 54%, 41%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=blue] {
+  --md-primary-fg-color: hsl(207, 90%, 54%);
+  --md-primary-fg-color--light: hsl(207, 90%, 61%);
+  --md-primary-fg-color--dark: hsl(210, 79%, 46%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=light-blue] {
+  --md-primary-fg-color: hsl(199, 98%, 48%);
+  --md-primary-fg-color--light: hsl(199, 92%, 56%);
+  --md-primary-fg-color--dark: hsl(201, 98%, 41%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=cyan] {
+  --md-primary-fg-color: hsl(187, 100%, 42%);
+  --md-primary-fg-color--light: hsl(187, 71%, 50%);
+  --md-primary-fg-color--dark: hsl(186, 100%, 33%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=teal] {
+  --md-primary-fg-color: hsl(174, 100%, 29%);
+  --md-primary-fg-color--light: hsl(174, 63%, 40%);
+  --md-primary-fg-color--dark: hsl(173, 100%, 24%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=green] {
+  --md-primary-fg-color: hsl(122, 39%, 49%);
+  --md-primary-fg-color--light: hsl(123, 38%, 57%);
+  --md-primary-fg-color--dark: hsl(123, 43%, 39%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=light-green] {
+  --md-primary-fg-color: hsl(88, 50%, 53%);
+  --md-primary-fg-color--light: hsl(88, 50%, 60%);
+  --md-primary-fg-color--dark: hsl(92, 48%, 42%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=lime] {
+  --md-primary-fg-color: hsl(66, 70%, 54%);
+  --md-primary-fg-color--light: hsl(66, 70%, 61%);
+  --md-primary-fg-color--dark: hsl(62, 61%, 44%);
+  --md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-primary=yellow] {
+  --md-primary-fg-color: hsl(54, 100%, 62%);
+  --md-primary-fg-color--light: hsl(54, 100%, 67%);
+  --md-primary-fg-color--dark: hsl(43, 96%, 58%);
+  --md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-primary=amber] {
+  --md-primary-fg-color: hsl(45, 100%, 51%);
+  --md-primary-fg-color--light: hsl(45, 100%, 58%);
+  --md-primary-fg-color--dark: hsl(38, 100%, 50%);
+  --md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-primary=orange] {
+  --md-primary-fg-color: hsl(36, 100%, 57%);
+  --md-primary-fg-color--light: hsl(36, 100%, 57%);
+  --md-primary-fg-color--dark: hsl(33, 100%, 49%);
+  --md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
+}
+
+[data-md-color-primary=deep-orange] {
+  --md-primary-fg-color: hsl(14, 100%, 63%);
+  --md-primary-fg-color--light: hsl(14, 100%, 70%);
+  --md-primary-fg-color--dark: hsl(14, 91%, 54%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=brown] {
+  --md-primary-fg-color: hsl(16, 25%, 38%);
+  --md-primary-fg-color--light: hsl(16, 18%, 47%);
+  --md-primary-fg-color--dark: hsl(14, 26%, 29%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=grey] {
+  --md-primary-fg-color: hsl(0, 0%, 46%);
+  --md-primary-fg-color--light: hsl(0, 0%, 62%);
+  --md-primary-fg-color--dark: hsl(0, 0%, 38%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=blue-grey] {
+  --md-primary-fg-color: hsl(199, 18%, 40%);
+  --md-primary-fg-color--light: hsl(200, 18%, 46%);
+  --md-primary-fg-color--dark: hsl(199, 18%, 33%);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+}
+
+[data-md-color-primary=white] {
+  --md-primary-fg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-fg-color--light: hsla(0, 0%, 100%, 0.7);
+  --md-primary-fg-color--dark: hsla(0, 0%, 0%, 0.07);
+  --md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
+  --md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
+  --md-typeset-a-color: hsla(231, 48%, 48%, 1);
+}
+@media screen and (min-width: 60em) {
+  [data-md-color-primary=white] .md-search__form {
+    background-color: hsla(0deg, 0%, 0%, 0.07);
+  }
+  [data-md-color-primary=white] .md-search__form:hover {
+    background-color: hsla(0deg, 0%, 0%, 0.32);
+  }
+  [data-md-color-primary=white] .md-search__input + .md-search__icon {
+    color: hsla(0deg, 0%, 0%, 0.87);
+  }
+}
+@media screen and (min-width: 76.25em) {
+  [data-md-color-primary=white] .md-tabs {
+    border-bottom: 0.05rem solid hsla(0deg, 0%, 0%, 0.07);
+  }
+}
+
+[data-md-color-primary=black] {
+  --md-primary-fg-color: hsla(0, 0%, 0%, 1);
+  --md-primary-fg-color--light: hsla(0, 0%, 0%, 0.54);
+  --md-primary-fg-color--dark: hsla(0, 0%, 0%, 1);
+  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+  --md-typeset-a-color: hsla(231, 48%, 48%, 1);
+}
+[data-md-color-primary=black] .md-header {
+  background-color: hsl(0deg, 0%, 0%);
+}
+@media screen and (max-width: 59.9375em) {
+  [data-md-color-primary=black] .md-nav__source {
+    background-color: hsla(0deg, 0%, 0%, 0.87);
+  }
+}
+@media screen and (min-width: 60em) {
+  [data-md-color-primary=black] .md-search__form {
+    background-color: hsla(0deg, 0%, 100%, 0.12);
+  }
+  [data-md-color-primary=black] .md-search__form:hover {
+    background-color: hsla(0deg, 0%, 100%, 0.3);
+  }
+}
+@media screen and (max-width: 76.1875em) {
+  html [data-md-color-primary=black] .md-nav--primary .md-nav__title[for=__drawer] {
+    background-color: hsl(0deg, 0%, 0%);
+  }
+}
+@media screen and (min-width: 76.25em) {
+  [data-md-color-primary=black] .md-tabs {
+    background-color: hsl(0deg, 0%, 0%);
+  }
+}
+
+@media screen {
+  [data-md-color-scheme=slate] {
+    --md-hue: 232;
+    --md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
+    --md-default-fg-color--light: hsla(var(--md-hue), 75%, 90%, 0.62);
+    --md-default-fg-color--lighter: hsla(var(--md-hue), 75%, 90%, 0.32);
+    --md-default-fg-color--lightest: hsla(var(--md-hue), 75%, 90%, 0.12);
+    --md-default-bg-color: hsla(var(--md-hue), 15%, 21%, 1);
+    --md-default-bg-color--light: hsla(var(--md-hue), 15%, 21%, 0.54);
+    --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 21%, 0.26);
+    --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 21%, 0.07);
+    --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 1);
+    --md-code-bg-color: hsla(var(--md-hue), 15%, 15%, 1);
+    --md-code-hl-color: hsla(218, 100%, 63%, 0.15);
+    --md-code-hl-number-color: hsla(6, 74%, 63%, 1);
+    --md-code-hl-special-color: hsla(340, 83%, 66%, 1);
+    --md-code-hl-function-color: hsla(291, 57%, 65%, 1);
+    --md-code-hl-constant-color: hsla(250, 62%, 70%, 1);
+    --md-code-hl-keyword-color: hsla(219, 66%, 64%, 1);
+    --md-code-hl-string-color: hsla(150, 58%, 44%, 1);
+    --md-code-hl-name-color: var(--md-code-fg-color);
+    --md-code-hl-operator-color: var(--md-default-fg-color--light);
+    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
+    --md-code-hl-comment-color: var(--md-default-fg-color--light);
+    --md-code-hl-generic-color: var(--md-default-fg-color--light);
+    --md-code-hl-variable-color: var(--md-default-fg-color--light);
+    --md-typeset-color: var(--md-default-fg-color);
+    --md-typeset-a-color: var(--md-primary-fg-color);
+    --md-typeset-mark-color: hsla(218, 100%, 63%, 0.3);
+    --md-typeset-kbd-color: hsla(var(--md-hue), 15%, 94%, 0.12);
+    --md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 94%, 0.2);
+    --md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1);
+    --md-typeset-table-color: hsla(var(--md-hue), 75%, 95%, 0.12);
+    --md-footer-bg-color: hsla(var(--md-hue), 15%, 12%, 0.87);
+    --md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 10%, 1);
+    --md-shadow-z1:
+      0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.2),
+      0 0 0.05rem hsla(0, 0%, 0%, 0.1);
+    --md-shadow-z2:
+      0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.3),
+      0 0 0.05rem hsla(0, 0%, 0%, 0.25);
+    --md-shadow-z3:
+      0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.4),
+      0 0 0.05rem hsla(0, 0%, 0%, 0.35);
+  }
+  [data-md-color-scheme=slate][data-md-color-primary=black], [data-md-color-scheme=slate][data-md-color-primary=white] {
+    --md-typeset-a-color: hsla(231, 44%, 56%, 1);
+  }
+  [data-md-color-scheme=slate] img[src$="#only-light"],
+[data-md-color-scheme=slate] img[src$="#gh-light-mode-only"] {
+    display: none;
+  }
+  [data-md-color-scheme=slate] img[src$="#only-dark"],
+[data-md-color-scheme=slate] img[src$="#gh-dark-mode-only"] {
+    display: initial;
+  }
+
+  [data-md-color-switching] *,
+[data-md-color-switching] *::before,
+[data-md-color-switching] *::after {
+    transition-duration: 0ms !important;
+  }
+}

material/base.html

@@ -39,10 +39,10 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.6cd88726.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.96b5c56e.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.css' | url }}">
         {% if palette.primary %}
           {% import "partials/palette.html" as map %}
           {% set primary = map.primary(
@@ -220,7 +220,7 @@
         "base": base_url,
         "features": features,
         "translations": {},
-        "search": "assets/javascripts/workers/search.89d78cd4.min.js" | url
+        "search": "assets/javascripts/workers/search.js" | url
       } -%}
       {%- if config.extra.version -%}
         {%- set _ = app.update({ "version": config.extra.version }) -%}
@@ -252,7 +252,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.1c9b1ac7.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/overrides/assets/stylesheets/home.css

@@ -0,0 +1,475 @@
+.md-typeset {
+  color: var(--md-typeset-color);
+}
+.md-typeset h2 {
+  margin-top: 0.175em;
+  font-weight: 700;
+}
+.md-typeset h2 + h3 {
+  margin-top: -0.8em;
+  font-size: 1em;
+}
+.md-typeset :target {
+  --md-scroll-margin: 5.2rem;
+}
+
+.md-main__inner {
+  margin: 0;
+}
+.md-main__inner > .md-sidebar--secondary,
+.md-main__inner > .md-content {
+  display: none;
+}
+
+.md-content__inner {
+  margin-bottom: 0;
+  padding: 5.2rem 0;
+}
+.md-content__inner::before {
+  display: none;
+}
+.md-content header {
+  display: block;
+  transition: opacity 750ms;
+}
+.js .md-content header[hidden] {
+  opacity: 0;
+}
+
+.md-typeset .md-button {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  color: var(--md-primary-bg-color);
+  background-color: rgb(221, 46, 87);
+  border-width: 0;
+}
+.md-typeset .md-button--secondary {
+  background-color: transparent;
+}
+
+.md-header:not(.md-header--shadow) {
+  background-color: transparent;
+  transition: background-color 125ms, transform 125ms cubic-bezier(0.1, 0.7, 0.1, 1), box-shadow 0ms;
+}
+.md-header--shadow {
+  transition: background-color 250ms, transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), box-shadow 250ms;
+}
+
+:root {
+  --md-parallax-perspective: 2.5rem;
+}
+
+.mdx-parallax {
+  width: 100vw;
+  height: 100vh;
+  margin-top: -2.4rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  perspective: var(--md-parallax-perspective);
+  overscroll-behavior-y: none;
+  scroll-behavior: smooth;
+}
+.mdx-parallax__group {
+  position: relative;
+  display: block;
+  color: var(--md-typeset-color);
+  background-color: var(--md-default-bg-color);
+  transform-style: preserve-3d;
+}
+.mdx-parallax__group:first-child {
+  height: 140vh;
+  background-color: transparent;
+  contain: strict;
+}
+.safari .mdx-parallax__group:first-child {
+  contain: none;
+}
+@media (min-width: 125vh) {
+  .mdx-parallax__group:first-child {
+    height: 120vw;
+  }
+}
+@media (min-width: 137.5vh) {
+  .mdx-parallax__group:first-child {
+    height: 125vw;
+  }
+}
+@media (min-width: 150vh) {
+  .mdx-parallax__group:first-child {
+    height: 130vw;
+  }
+}
+@media (min-width: 162.5vh) {
+  .mdx-parallax__group:first-child {
+    height: 135vw;
+  }
+}
+@media (min-width: 175vh) {
+  .mdx-parallax__group:first-child {
+    height: 140vw;
+  }
+}
+@media (min-width: 187.5vh) {
+  .mdx-parallax__group:first-child {
+    height: 145vw;
+  }
+}
+@media (min-width: 200vh) {
+  .mdx-parallax__group:first-child {
+    height: 150vw;
+  }
+}
+.mdx-parallax__group:last-child {
+  background-color: var(--md-default-bg-color);
+}
+.mdx-parallax__layer {
+  position: absolute;
+  top: 0;
+  z-index: calc(10 - var(--md-parallax-depth, 0));
+  width: 100vw;
+  height: max(120vh, 100vw);
+  transform: translateZ(calc(var(--md-parallax-perspective) * var(--md-parallax-depth) * -1)) scale(calc(var(--md-parallax-depth) + 1));
+  transform-origin: 50vw 50vh;
+  pointer-events: none;
+}
+.mdx-parallax__image {
+  position: absolute;
+  z-index: -1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: var(--md-image-position, 50%);
+}
+.mdx-parallax__blend {
+  top: initial;
+  bottom: 0;
+  height: min(100vh, 100vw);
+  background-image: linear-gradient(to bottom, transparent, var(--md-default-bg-color));
+}
+
+.mdx-content__column:last-child {
+  margin-top: 2.4rem;
+}
+.mdx-content__column p:last-child {
+  margin-bottom: 0;
+}
+@media screen and (min-width: 60em) {
+  .mdx-content__inner {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6.4rem;
+  }
+  .mdx-content__column {
+    margin-top: 0;
+  }
+  .mdx-content__column:first-child {
+    flex: 2 0;
+  }
+  .mdx-content__column:last-child {
+    flex: 1 0;
+    margin-top: 0;
+  }
+}
+
+.mdx-connect {
+  display: block;
+  transition: transform 750ms 125ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms 125ms;
+}
+.js .mdx-connect[hidden] {
+  transform: translateY(1.6rem);
+  opacity: 0;
+}
+.mdx-connect .mdx-connect__link {
+  display: block;
+  color: var(--md-default-fg-color);
+}
+.mdx-connect .mdx-connect__link span {
+  margin-right: 0.2rem;
+}
+
+.mdx-expect {
+  margin: 2.4rem 0;
+}
+.mdx-expect__list {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1.6rem;
+  padding: 0;
+}
+.mdx-expect__item {
+  display: flex;
+  flex: 1 0 48%;
+  gap: 0.6rem;
+  margin: 0;
+  transition: transform 750ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms;
+}
+.mdx-expect__item:nth-child(1) {
+  transition-delay: 200ms;
+}
+.mdx-expect__item:nth-child(2) {
+  transition-delay: 275ms;
+}
+.mdx-expect__item:nth-child(3) {
+  transition-delay: 350ms;
+}
+.mdx-expect__item:nth-child(4) {
+  transition-delay: 425ms;
+}
+.mdx-expect__item:nth-child(5) {
+  transition-delay: 500ms;
+}
+.mdx-expect__item:nth-child(6) {
+  transition-delay: 575ms;
+}
+.js .mdx-expect__item[hidden] {
+  transform: translate(-0.8rem, 0.4rem);
+  opacity: 0;
+}
+.js .mdx-expect__item[hidden]:nth-child(2n) {
+  transform: translate(0.8rem, 0.4rem);
+}
+.mdx-expect__icon {
+  flex-shrink: 0;
+  width: 2.2rem;
+  height: 2.2rem;
+  padding: 0.4rem;
+  background-color: var(--md-default-fg-color--lightest);
+  border-radius: 100%;
+  fill: currentcolor;
+}
+.mdx-expect__description > :last-child {
+  margin-bottom: 0;
+}
+@media screen and (max-width: 76.1875em) {
+  .mdx-expect__description > :last-child {
+    margin-left: -2.8rem;
+  }
+}
+
+.mdx-hero {
+  display: block;
+  height: inherit;
+}
+.js .mdx-hero[hidden] > * {
+  transform: translateY(16px);
+  opacity: 0;
+  transition: transform 0ms 100ms, opacity 100ms;
+}
+.mdx-hero__scrollwrap {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 9;
+  height: 100vh;
+  margin-bottom: -100vh;
+}
+.mdx-hero__inner {
+  position: absolute;
+  bottom: 3.2rem;
+  display: block;
+  width: 100%;
+  transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms;
+}
+@media screen and (max-width: 44.9375em) {
+  .mdx-hero__inner {
+    bottom: 6.4rem;
+  }
+}
+.mdx-hero__teaser {
+  max-width: 24rem;
+  margin: 0 0.8rem;
+  color: var(--md-primary-bg-color);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.mdx-hero__teaser h1 {
+  margin-bottom: 0;
+  color: inherit;
+  font-weight: 700;
+}
+.mdx-hero__teaser :not(.md-button) {
+  text-shadow: 0 0 0.2rem rgba(33, 29, 45, 0.8);
+}
+.mdx-hero .mdx-hero__attribution {
+  position: absolute;
+  right: 0.8rem;
+  bottom: -2.4rem;
+  padding: 0.1rem 0.4rem;
+  color: var(--md-default-fg-color);
+  font-size: 0.5rem;
+  background-color: var(--md-default-bg-color--light);
+  border-radius: 0.1rem;
+  transition: color 125ms, background-color 125ms;
+}
+.mdx-hero .mdx-hero__attribution:focus, .mdx-hero .mdx-hero__attribution:hover {
+  color: var(--md-accent-bg-color);
+  background-color: var(--md-accent-fg-color);
+}
+.mdx-hero__more {
+  position: absolute;
+  bottom: -2.4rem;
+  left: 50%;
+  display: block;
+  margin-left: -0.6rem;
+  text-align: center;
+  pointer-events: none;
+}
+.mdx-hero__more svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgb(255, 255, 255);
+}
+
+.mdx-spotlight {
+  margin: 2em 0;
+}
+.mdx-spotlight__feature {
+  display: flex;
+  flex: 1 0 48%;
+  flex-flow: row nowrap;
+  gap: 3.2rem;
+  margin: 0;
+  margin-bottom: 3.2rem;
+}
+@media screen and (max-width: 59.9375em) {
+  .mdx-spotlight__feature {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+@media screen and (min-width: 60em) {
+  .mdx-spotlight__feature:nth-child(2n+1) {
+    flex-direction: row-reverse;
+  }
+}
+.mdx-spotlight__feature:last-child {
+  margin-bottom: 1em;
+}
+.mdx-spotlight__feature > a {
+  display: block;
+  flex-shrink: 0;
+  transition: transform 500ms cubic-bezier(0.075, 0.85, 0.175, 1);
+}
+@media screen and (max-width: 59.9375em) {
+  .mdx-spotlight__feature > a {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+.mdx-spotlight__feature > a:hover {
+  transform: scale(1.025);
+}
+.mdx-spotlight__feature a > img {
+  display: block;
+  width: 25rem;
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.2rem;
+  box-shadow: var(--md-shadow-z2);
+  transition: transform 750ms 125ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms 125ms;
+}
+.mdx-spotlight__feature figcaption {
+  margin-top: 0.8rem;
+  transition: transform 750ms 125ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms 125ms;
+}
+.js .mdx-spotlight__feature[hidden] > a > img {
+  transform: translateY(1.6rem);
+  opacity: 0;
+}
+.js .mdx-spotlight__feature[hidden] > figcaption {
+  transform: translateX(1.6rem);
+  opacity: 0;
+}
+.js .mdx-spotlight__feature[hidden]:nth-child(2n) > figcaption {
+  transform: translateX(-1.6rem);
+}
+
+.mdx-trust {
+  display: block;
+  max-width: 40rem;
+  transition: transform 750ms 125ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms 125ms;
+}
+.js .mdx-trust[hidden] {
+  transform: translateY(1.6rem);
+  opacity: 0;
+}
+
+.mdx-users {
+  display: flex;
+  gap: 3.2rem;
+  margin: 2.4rem 0;
+}
+@media screen and (max-width: 59.9375em) {
+  .mdx-users {
+    flex-direction: column;
+  }
+}
+.mdx-users__testimonial {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1.2rem;
+  margin: 0;
+  text-align: center;
+}
+.mdx-users__testimonial:nth-child(1) {
+  transition-delay: 200ms;
+}
+.mdx-users__testimonial:nth-child(2) {
+  transition-delay: 275ms;
+}
+.mdx-users__testimonial:nth-child(3) {
+  transition-delay: 350ms;
+}
+.mdx-users__testimonial img {
+  width: 10rem;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 5rem;
+  transition: transform 750ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms;
+  transition-delay: inherit;
+}
+.mdx-users__testimonial figcaption {
+  display: block;
+  transition: transform 750ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 750ms;
+  transition-delay: inherit;
+}
+.mdx-users__testimonial hr {
+  width: 5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mdx-users__testimonial cite {
+  display: block;
+  text-align: justify;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}
+.js .mdx-users__testimonial[hidden] img {
+  transform: scale(0.75);
+  opacity: 0;
+}
+.js .mdx-users__testimonial[hidden] figcaption {
+  transform: translateY(1.6rem);
+  opacity: 0;
+}
+
+@media screen and (min-width: 60em) {
+  .md-sidebar--secondary {
+    display: none;
+  }
+}
+@media screen and (min-width: 76.25em) {
+  .md-sidebar--primary {
+    display: none;
+  }
+}
+
+.md-tabs {
+  position: absolute;
+  top: 2.4rem;
+  background-color: transparent;
+}

material/overrides/assets/stylesheets/main.css

@@ -0,0 +1,260 @@
+@-webkit-keyframes heart {
+  0%, 40%, 80%, 100% {
+    transform: scale(1);
+  }
+  20%, 60% {
+    transform: scale(1.15);
+  }
+}
+@keyframes heart {
+  0%, 40%, 80%, 100% {
+    transform: scale(1);
+  }
+  20%, 60% {
+    transform: scale(1.15);
+  }
+}
+[data-md-color-scheme=slate] {
+  --md-typeset-a-color: #7986cb;
+}
+
+.md-typeset .twitter {
+  color: #00acee;
+}
+.md-typeset .mdx-video {
+  width: auto;
+}
+.md-typeset .mdx-video__inner {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.138%;
+}
+.md-typeset .mdx-video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border: none;
+}
+.md-typeset .mdx-heart {
+  -webkit-animation: heart 1000ms infinite;
+          animation: heart 1000ms infinite;
+}
+.md-typeset .mdx-insiders {
+  color: #e91e63;
+}
+.md-typeset .mdx-switch button {
+  cursor: pointer;
+  transition: opacity 250ms;
+}
+.md-typeset .mdx-switch button:focus, .md-typeset .mdx-switch button:hover {
+  opacity: 0.75;
+}
+.md-typeset .mdx-switch button > code {
+  display: block;
+  color: var(--md-primary-bg-color);
+  background-color: var(--md-primary-fg-color);
+}
+.md-typeset .mdx-deprecated {
+  opacity: 0.5;
+  transition: opacity 250ms;
+}
+.md-typeset .mdx-deprecated:focus-within, .md-typeset .mdx-deprecated:hover {
+  opacity: 1;
+}
+.md-typeset .mdx-columns ol,
+.md-typeset .mdx-columns ul {
+  -moz-columns: 2;
+       columns: 2;
+}
+@media screen and (max-width: 29.9375em) {
+  .md-typeset .mdx-columns ol,
+.md-typeset .mdx-columns ul {
+    -moz-columns: initial;
+         columns: initial;
+  }
+}
+.md-typeset .mdx-columns li {
+  -moz-column-break-inside: avoid;
+       break-inside: avoid;
+}
+.md-typeset .mdx-author {
+  display: flex;
+  font-size: 0.68rem;
+}
+.md-typeset .mdx-author img {
+  height: 2rem;
+  border-radius: 100%;
+}
+.md-typeset .mdx-author p:first-child {
+  flex-shrink: 0;
+  margin-right: 0.8rem;
+}
+.md-typeset .mdx-author p > span {
+  display: block;
+}
+
+.md-banner a,
+.md-banner a:focus,
+.md-banner a:hover {
+  color: currentcolor;
+}
+.md-banner strong {
+  white-space: nowrap;
+}
+[dir="ltr"] .md-banner .twitter {
+  margin-left: 0.2em;
+}
+[dir="rtl"] .md-banner .twitter {
+  margin-right: 0.2em;
+}
+
+.md-typeset .mdx-iconsearch {
+  position: relative;
+  background-color: var(--md-default-bg-color);
+  border-radius: 0.1rem;
+  box-shadow: var(--md-shadow-z1);
+  transition: box-shadow 125ms;
+}
+.md-typeset .mdx-iconsearch:focus-within, .md-typeset .mdx-iconsearch:hover {
+  box-shadow: var(--md-shadow-z2);
+}
+.md-typeset .mdx-iconsearch .md-input {
+  background: var(--md-default-bg-color);
+  box-shadow: none;
+}
+[data-md-color-scheme=slate] .md-typeset .mdx-iconsearch .md-input {
+  background: var(--md-code-bg-color);
+}
+.md-typeset .mdx-iconsearch-result {
+  max-height: 50vh;
+  overflow-y: auto;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  touch-action: pan-y;
+  scrollbar-width: thin;
+  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
+}
+.md-tooltip .md-typeset .mdx-iconsearch-result {
+  max-height: 10.25rem;
+}
+.md-typeset .mdx-iconsearch-result::-webkit-scrollbar {
+  width: 0.2rem;
+  height: 0.2rem;
+}
+.md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb {
+  background-color: var(--md-default-fg-color--lighter);
+}
+.md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb:hover {
+  background-color: var(--md-accent-fg-color);
+}
+.md-typeset .mdx-iconsearch-result__meta {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.6rem;
+  color: var(--md-default-fg-color--lighter);
+  font-size: 0.64rem;
+}
+[dir="ltr"] .md-typeset .mdx-iconsearch-result__list {
+  margin-left: 0;
+}
+[dir="rtl"] .md-typeset .mdx-iconsearch-result__list {
+  margin-right: 0;
+}
+.md-typeset .mdx-iconsearch-result__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+[dir="ltr"] .md-typeset .mdx-iconsearch-result__item {
+  margin-left: 0;
+}
+[dir="rtl"] .md-typeset .mdx-iconsearch-result__item {
+  margin-right: 0;
+}
+.md-typeset .mdx-iconsearch-result__item {
+  margin: 0;
+  padding: 0.2rem 0.6rem;
+  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
+}
+.md-typeset .mdx-iconsearch-result__item:last-child {
+  border-bottom: none;
+}
+.md-typeset .mdx-iconsearch-result__item > * {
+  margin-right: 0.6rem;
+}
+.md-typeset .mdx-iconsearch-result__item img {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+[data-md-color-scheme=slate] .md-typeset .mdx-iconsearch-result__item img[src*=squidfunk] {
+  filter: invert(1);
+  /* stylelint-disable-line */
+}
+
+.md-typeset .mdx-premium p {
+  margin: 2em 0;
+  text-align: center;
+}
+.md-typeset .mdx-premium img {
+  height: 3.25rem;
+}
+.md-typeset .mdx-premium p:last-child {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.md-typeset .mdx-premium p:last-child > a {
+  display: block;
+  flex-shrink: 0;
+}
+.md-typeset .mdx-sponsorship__list {
+  margin: 2em 0;
+}
+.md-typeset .mdx-sponsorship__list::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+.md-typeset .mdx-sponsorship__item {
+  display: block;
+  float: left;
+  width: 1.6rem;
+  height: 1.6rem;
+  margin: 0.2rem;
+  overflow: hidden;
+  border-radius: 100%;
+  transform: scale(1);
+  transition: color 125ms, transform 125ms;
+}
+.md-typeset .mdx-sponsorship__item:focus, .md-typeset .mdx-sponsorship__item:hover {
+  transform: scale(1.1);
+}
+.md-typeset .mdx-sponsorship__item:focus img, .md-typeset .mdx-sponsorship__item:hover img {
+  filter: grayscale(0%);
+}
+.md-typeset .mdx-sponsorship__item--private {
+  color: var(--md-default-fg-color--lighter);
+  font-weight: 700;
+  font-size: 0.6rem;
+  line-height: 1.6rem;
+  text-align: center;
+  background: var(--md-default-fg-color--lightest);
+}
+.md-typeset .mdx-sponsorship__item img {
+  display: block;
+  width: 100%;
+  height: auto;
+  filter: grayscale(100%) opacity(75%);
+  transition: filter 125ms;
+}
+.md-typeset .mdx-sponsorship-button {
+  font-weight: 400;
+}
+.md-typeset .mdx-sponsorship-count,
+.md-typeset .mdx-sponsorship-total {
+  font-weight: 700;
+}

material/overrides/home.html

@@ -7,7 +7,7 @@
 {% endblock %}
 {% block styles %}
   {{ super() }}
-  <link rel="stylesheet" href="overrides/assets/stylesheets/home.def3a648.min.css">
+  <link rel="stylesheet" href="overrides/assets/stylesheets/home.css">
   <script>"Apple Computer, Inc."===navigator.vendor&&document.documentElement.classList.add("safari")</script>
 {% endblock %}
 {% block hero %}

material/overrides/main.html

@@ -4,12 +4,12 @@
 {% extends "base.html" %}
 {% block styles %}
   {{ super() }}
-  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.9e77ca7e.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.css' | url }}">
 {% endblock %}
 {% block content %}
   {% include "overrides/partials/content.html" %}
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'overrides/assets/javascripts/bundle.7a380e18.min.js' | url }}"></script>
+  <script src="{{ 'overrides/assets/javascripts/bundle.js' | url }}"></script>
 {% endblock %}

src/assets/javascripts/browser/element/focus/index.ts

@@ -71,7 +71,7 @@ const observer$ = merge(
  * @returns Element focus observable
  */
 export function watchElementFocus(
-  el: HTMLElement
+  el: Element
 ): Observable<boolean> {
   return observer$
     .pipe(

src/assets/javascripts/browser/element/hover/index.ts

@@ -43,7 +43,7 @@ import {
  * @returns Element hover observable
  */
 export function watchElementHover(
-  el: HTMLElement, duration?: number
+  el: Element, duration?: number
 ): Observable<boolean> {
   return merge(
     fromEvent(el, "mouseenter").pipe(map(() => true)),

src/assets/javascripts/components/content/_/index.ts

@@ -123,7 +123,7 @@ export function mountContent(
       .map(child => mountContentTabs(child)),
 
     /* Tooltips */
-    ...getElements("[title]", el)
+    ...getElements("[title], svg title", el)
       .filter(() => feature("content.tooltips"))
       .map(child => mountTooltip(child))
   )

src/assets/javascripts/components/tooltip/index.ts

@@ -123,8 +123,11 @@ export function watchTooltip(
  * @returns Tooltip component observable
  */
 export function mountTooltip(
-  el: HTMLElement
+  el: HTMLElement | SVGElement
 ): Observable<Component<Tooltip>> {
+  if (el instanceof SVGElement)
+    return mountSVGTooltip(el)
+
   const title = el.title
   if (!title.length)
     return EMPTY
@@ -199,3 +202,132 @@ export function mountTooltip(
       )
   })
 }
+
+export function watchSVGTooltip(
+  el: HTMLElement, host: SVGTitleElement
+): Observable<Tooltip> {
+  document.body.append(el)
+  const svg = host.closest("svg")!
+
+  /* Determine dimensions */
+  const actual = svg.getBBox()
+  const scaled = {
+    width: svg.clientWidth,
+    height: svg.clientHeight
+  }
+
+  const inner = (host.parentElement as SVGSVGElement).getBBox()!
+
+  const relX = scaled.width  * inner.x / actual.width
+  const relY = scaled.height * inner.y / actual.height
+
+  const relWidth = scaled.width * inner.width / actual.width
+  const relHeight = scaled.height * inner.height / actual.height
+
+  /* Compute width and remove tooltip immediately */
+  const { width } = getElementSize(el)
+  el.style.setProperty("--md-tooltip-width", `${width}px`)
+  el.remove()
+
+  /* Actively watch tooltip on focus/hover */
+  return combineLatest([
+    watchElementFocus(host.parentElement!),
+    watchElementHover(host.parentElement!)
+  ])
+    .pipe(
+      map(([focus, hover]) => focus || hover),
+      map(active => {
+        console.log("OLA")
+        const parent = { width: relWidth, height: relHeight }
+        let { x, y } = getElementOffset(svg.parentElement!)
+        console.log(parent, x, y)
+        x += relX
+        y += relY
+        return {
+          active,
+          offset: {
+            x: x + parent.width / 2 - width / 2,
+            y: y + parent.height + 8
+          }
+        }
+      })
+    )
+}
+
+function mountSVGTooltip(el: SVGTitleElement) {
+  const title = el.textContent!
+  const svg = el.closest("svg")!
+
+  /* Render tooltip and set title from host element */
+  const id = `__tooltip_${sequence++}`
+  const tooltip = renderTooltip(id, "inline")
+  const typeset = getElement(".md-typeset", tooltip)
+  typeset.innerHTML = title
+
+  /* Mount component on subscription */
+  return defer(() => {
+    const push$ = new Subject<Tooltip>()
+    push$.subscribe({
+
+      /* Handle emission */
+      next({ offset }) {
+        tooltip.style.setProperty("--md-tooltip-x", `${offset.x}px`)
+        tooltip.style.setProperty("--md-tooltip-y", `${offset.y}px`)
+      },
+
+      /* Handle complete */
+      complete() {
+        tooltip.style.removeProperty("--md-tooltip-x")
+        tooltip.style.removeProperty("--md-tooltip-y")
+      }
+    })
+
+    /* Toggle tooltip presence to mitigate empty lines when copying */
+    merge(
+      push$.pipe(filter(({ active }) => active)),
+      push$.pipe(debounceTime(250), filter(({ active }) => !active))
+    )
+      .subscribe({
+
+        /* Handle emission */
+        next({ active }) {
+          if (active) {
+            svg.insertAdjacentElement("afterend", tooltip)
+            // @todo - this must be the host element!
+            el.parentElement!.setAttribute("aria-describedby", id)
+            el.textContent = ""
+          } else {
+            tooltip.remove()
+            el.parentElement!.removeAttribute("aria-describedby")
+            // svg.setAttribute("title", title)
+            el.textContent = title
+          }
+        },
+
+        /* Handle complete */
+        complete() {
+          tooltip.remove()
+          el.parentElement!.removeAttribute("aria-describedby")
+          // svg.setAttribute("title", title)
+          el.textContent = title
+        }
+      })
+
+    /* Toggle tooltip visibility */
+    push$
+      .pipe(
+        auditTime(16, animationFrameScheduler)
+      )
+      .subscribe(({ active }) => {
+        tooltip.classList.toggle("md-tooltip--active", active)
+      })
+
+    /* Create and return component */
+    return watchSVGTooltip(tooltip, el)
+      .pipe(
+        tap(state => push$.next(state)),
+        finalize(() => push$.complete()),
+        map(state => ({ ref: el, ...state }))
+      )
+  })
+}