Merge branch 'refactor/rxjs-typescript' into refactor/dark-mode

docs/releases/5.md

@@ -413,9 +413,10 @@ matches the new structure:
 #### `partials/footer.html`
 
 ``` diff
-@@ -7,32 +7,32 @@
+@@ -5,34 +5,34 @@
      <div class="md-footer-nav">
-       <nav class="md-footer-nav__inner md-grid">
+-      <nav class="md-footer-nav__inner md-grid">
++      <nav class="md-footer-nav__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
          {% if page.previous_page %}
 -          <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
 -            <div class="md-flex__cell md-flex__cell--shrink">
@@ -463,10 +464,11 @@ matches the new structure:
 #### `partials/header.html`
 
 ``` diff
-@@ -3,50 +3,44 @@
+@@ -2,51 +2,46 @@
+   This file was automatically generated - do not edit
  -#}
  <header class="md-header" data-md-component="header">
-   <nav class="md-header-nav md-grid">
+-  <nav class="md-header-nav md-grid">
 -    <div class="md-flex">
 -      <div class="md-flex__cell md-flex__cell--shrink">
 -        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
@@ -483,6 +485,7 @@ matches the new structure:
 -      <div class="md-flex__cell md-flex__cell--stretch">
 -        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
 -          {% if config.site_name == page.title %}
++  <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
 +    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
 +      {% if config.theme.logo %}
 +        <img src="{{ config.theme.logo | url }}" alt="logo">
@@ -598,7 +601,7 @@ matches the new structure:
 +      </span>
      </label>
 -    <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
-+    <nav class="md-nav" data-md-level="{{ level }}">
++    <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
        <label class="md-nav__title" for="{{ path }}">
 +        <span class="md-nav__icon md-icon">
 +          {% include ".icons/material/arrow-left.svg" %}
@@ -607,7 +610,7 @@ matches the new structure:
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
 @@ -39,6 +45,9 @@
-     {% if toc_ | first is defined %}
+     {% if toc | first is defined %}
        <label class="md-nav__link md-nav__link--active" for="__toc">
          {{ nav_item.title }}
 +        <span class="md-nav__icon md-icon">
@@ -621,21 +624,24 @@ matches the new structure:
 #### `partials/nav.html`
 
 ``` diff
-@@ -2,12 +2,12 @@
+@@ -1,13 +1,14 @@
+ {#-
    This file was automatically generated - do not edit
  -#}
- <nav class="md-nav md-nav--primary" data-md-level="0">
+-<nav class="md-nav md-nav--primary" data-md-level="0">
 -  <label class="md-nav__title md-nav__title--site" for="__drawer">
 -    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
 -      {% if config.theme.logo.icon %}
 -        <i class="md-icon">{{ config.theme.logo.icon }}</i>
++<nav class="md-nav md-nav--primary" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
 +  <label class="md-nav__title" for="__drawer">
 +    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
 +      {% if config.theme.logo %}
 +        <img src="{{ config.theme.logo | url }}" alt="logo">
        {% else %}
 -        <img alt="logo" src="{{ config.theme.logo | url }}" width="48" height="48">
-+        {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
++        {% set icon = config.theme.icon.logo or "material/library" %}
++        {% include ".icons/" ~ icon ~ ".svg" %}
        {% endif %}
      </a>
      {{ config.site_name }}
@@ -648,15 +654,15 @@ matches the new structure:
    <label class="md-search__overlay" for="__search"></label>
    <div class="md-search__inner" role="search">
      <form class="md-search__form" name="search">
--      <input type="text" class="md-search__input" aria-label="search" name="query" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
-+      <input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
+-      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
++      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
        <label class="md-search__icon md-icon" for="__search">
 +        {% include ".icons/material/magnify.svg" %}
 +        {% include ".icons/material/arrow-left.svg" %}
        </label>
 -      <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
 -        &#xE5CD;
-+      <button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1">
++      <button type="reset" class="md-search__icon md-icon" aria-label="{{ lang.t('search.reset') }}" data-md-component="search-reset" tabindex="-1">
 +        {% include ".icons/material/close.svg" %}
        </button>
      </form>
@@ -732,7 +738,7 @@ matches the new structure:
 #### `partials/source.html`
 
 ``` diff
-@@ -2,24 +2,10 @@
+@@ -2,24 +2,11 @@
    This file was automatically generated - do not edit
  -#}
  {% import "partials/language.html" as lang with context %}
@@ -756,7 +762,8 @@ matches the new structure:
 -  {% endif %}
 +<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
 +  <div class="md-source__icon md-icon">
-+    {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
++    {% set icon = config.theme.icon.repo or "fontawesome/brands/git-alt" %}
++    {% include ".icons/" ~ icon ~ ".svg" %}
 +  </div>
    <div class="md-source__repository">
      {{ config.repo_name }}
@@ -777,11 +784,43 @@ matches the new structure:
        <a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active">
 ```
 
+#### `partials/tabs.html`
+
+``` diff
+@@ -5,7 +5,7 @@
+ {% if page.ancestors | length > 0 %}
+   {% set class = "md-tabs md-tabs--active" %}
+ {% endif %}
+-<nav class="{{ class }}" data-md-component="tabs">
++<nav class="{{ class }}" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
+   <div class="md-tabs__inner md-grid">
+     <ul class="md-tabs__list">
+       {% for nav_item in nav %}
+```
+
+#### `partials/toc-item.html`
+
+``` diff
+@@ -6,7 +6,7 @@
+     {{ toc_item.title }}
+   </a>
+   {% if toc_item.children %}
+-    <nav class="md-nav">
++    <nav class="md-nav" aria-label="{{ toc_item.title }}">
+       <ul class="md-nav__list">
+         {% for toc_item in toc_item.children %}
+           {% include "partials/toc-item.html" %}
+```
+
 #### `partials/toc.html`
 
 ``` diff
-@@ -8,29 +8,16 @@
+@@ -2,35 +2,22 @@
+   This file was automatically generated - do not edit
  -#}
+ {% import "partials/language.html" as lang with context %}
+-<nav class="md-nav md-nav--secondary">
++<nav class="md-nav md-nav--secondary" aria-label="{{ lang.t('toc.title') }}">
    {% endif %}
    {% if toc | first is defined %}
      <label class="md-nav__title" for="__toc">

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.94a3fc3f.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.94a3fc3f.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7ea61618.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7ea61618.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.b9803391.min.css",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
+  "assets/stylesheets/main.css": "assets/stylesheets/main.a59423ce.min.css",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
 }

material/base.html

@@ -41,9 +41,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.b9803391.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.a59423ce.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -178,7 +178,7 @@
     {% endblock %}
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.94a3fc3f.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.7ea61618.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/partials/search.html

@@ -6,7 +6,7 @@
   <label class="md-search__overlay" for="__search"></label>
   <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
+      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
       <label class="md-search__icon md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}
         {% include ".icons/material/arrow-left.svg" %}

src/assets/stylesheets/layout/_search.scss

@@ -394,7 +394,8 @@ $md-toggle__search--checked:
       }
 
       // Show reset button if search is active and input non-empty
-      #{$md-toggle__search--checked} .md-search__input:valid ~ & {
+      #{$md-toggle__search--checked}
+      .md-search__input:not(:placeholder-shown) ~ & {
         transform: scale(1);
         opacity: 1;
         pointer-events: initial;

src/assets/stylesheets/palette.scss

@@ -134,6 +134,11 @@
       &::placeholder {
         color: var(--md-default-fg-color--light);
       }
+
+      // Hovered search field
+      &:hover {
+        background-color: var(--md-default-fg-color--lighter);
+      }
     }
   }
 
@@ -200,9 +205,14 @@
 
     // Search input
     .md-search__input {
+      background-color: var(--md-default-bg-color--lighter);
+
+      // Hovered search field
+      &:hover {
         background-color: var(--md-default-bg-color--lightest);
       }
     }
+  }
 
   // [tablet -]: Layered navigation
   @include break-to-device(tablet) {

src/partials/search.html

@@ -39,7 +39,6 @@
         spellcheck="false"
         data-md-component="search-query"
         data-md-state="active"
-        required
       />
       <label class="md-search__icon md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}