diff --git a/claro.info.yml b/claro.info.yml
index 2b3099a34a8a7c85d523b17318e73e436b5506d0..13ff16ae066c4f414e0c06b6e622b18433afbeff 100644
--- a/claro.info.yml
+++ b/claro.info.yml
@@ -138,6 +138,8 @@ libraries-extend:
     - claro/drupal.tableselect
   core/jquery.ui:
     - claro/claro.jquery.ui
+  file/drupal.file:
+    - claro/file
   media_library/view:
     - claro/media_library.view
   system/admin:
diff --git a/claro.libraries.yml b/claro.libraries.yml
index f24e2fa4275625749db0199868dc547ca47c6337..cbcbe27410fe827ae77e0ccf56dd84bab3671850 100644
--- a/claro.libraries.yml
+++ b/claro.libraries.yml
@@ -22,6 +22,7 @@ global-styling:
       css/dist/components/form--checkbox-radio.css: {}
       css/dist/components/form--checkbox-radio--ie.css: {}
       css/dist/components/form--field-multiple.css: {}
+      css/dist/components/form--managed-file.css: {}
       css/dist/components/form--text.css: {}
       css/dist/components/form--select.css: {}
       css/dist/components/help.css: {}
@@ -32,6 +33,7 @@ global-styling:
       css/dist/components/pager.css: {}
       css/dist/components/skip-link.css: {}
       css/dist/components/tables.css: {}
+      css/dist/components/table--file-multiple-widget.css: {}
       css/dist/components/search-admin-settings.css: {}
       css/dist/components/tablesort-indicator.css: {}
       css/dist/components/system-status-report-general-info.css: {}
@@ -49,6 +51,16 @@ global-styling:
     - system/admin
     - core/jquery
     - core/drupal
+    # Claro has small and extra small variation for most of the control elements
+    # such as inputs, action links, buttons, dropbuttons. For usability and
+    # accessibility reasons, we keep target sizes big enough on touch screen
+    # devices (by not making these elements smaller than their default size).
+    # Modernizr is used for recognising whether user is using a touch device or
+    # not. This allows conditionally rendering small variation of the control
+    # elements on non-touch devices. In some cases, such as when rendering
+    # links, it is hard recognize when Modernizr should be attached, therefore
+    # it has to be always attached.
+    - core/modernizr
     # @todo Remove 'claro/drupal-theme' from dependencies and add to core/drupal
     # extensions after https://www.drupal.org/node/3024975 is in.
     - claro/drupal-theme
@@ -236,3 +248,8 @@ vertical-tabs:
       css/dist/components/vertical-tabs.css: {}
   dependencies:
     - claro/global-styling
+
+file:
+  css:
+    component:
+      css/dist/components/file.css: {}
diff --git a/claro.theme b/claro.theme
index 26a36f1afc51b1bee423f5f997e0efc5a3f958d0..8e0937055c29586d05626a9d3236f4fe9d229326 100644
--- a/claro.theme
+++ b/claro.theme
@@ -221,27 +221,12 @@ function claro_preprocess_menu_local_action(array &$variables) {
   if ($legacy_class_key !== FALSE) {
     $variables['link']['#options']['attributes']['class'][$legacy_class_key] = 'button--action';
   }
-
-  // Modernizr is used for recognising whether user is using a touch device or
-  // not. This allows conditionally rendering small variation of buttons on
-  // non-touch devices.
-  $variables['#attached']['library'][] = 'core/modernizr';
 }
 
 /**
  * Implements hook_element_info_alter().
  */
 function claro_element_info_alter(&$type) {
-  // Modernizr is used for recognising whether user is using a touch device or
-  // not. This allows conditionally rendering small variation of buttons on
-  // non-touch devices.
-  if (isset($type['button'])) {
-    $type['button']['#attached']['library'][] = 'core/modernizr';
-  }
-  if (isset($type['submit'])) {
-    $type['submit']['#attached']['library'][] = 'core/modernizr';
-  }
-
   // Add a pre-render function that handles the sidebar of the node form.
   // @todo Refactor when https://www.drupal.org/node/3056089 is in.
   if (isset($type['container'])) {
@@ -264,6 +249,60 @@ function claro_element_info_alter(&$type) {
   if (isset($type['vertical_tabs'])) {
     $type['vertical_tabs']['#pre_render'][] = '_claro_vertical_tabs_prerender';
   }
+
+  // Add a pre-render to managed_file.
+  if (isset($type['managed_file'])) {
+    $type['managed_file']['#pre_render'][] = '_claro_managed_file_prerender';
+  }
+}
+
+/**
+ * Prerender callback for managed_file.
+ */
+function _claro_managed_file_prerender($element) {
+  if (!empty($element['remove_button']) && is_array($element['remove_button'])) {
+    $element['remove_button']['#attributes']['class'][] = 'button--extrasmall';
+    $element['remove_button']['#attributes']['class'][] = 'remove-button';
+  }
+
+  if (!empty($element['upload_button']) && is_array($element['upload_button'])) {
+    $element['upload_button']['#attributes']['class'][] = 'upload-button';
+  }
+
+  // Wrap single-cardinality widgets with a details element.
+  $single_file_widget = !empty($element['#cardinality']) && $element['#cardinality'] === 1;
+  if ($single_file_widget && empty($element['#single_wrapped'])) {
+    $element['#theme_wrappers']['details'] = [
+      '#title' => $element['#title'],
+      '#summary_attributes' => [],
+      '#attributes' => ['open' => TRUE],
+      '#value' => NULL,
+      // The description of the single cardinality file widgets will be
+      // displayed by the managed file widget.
+      '#description' => NULL,
+      '#required' => $element['#required'],
+      '#errors' => NULL,
+      '#disabled' => !empty($element['#disabled']),
+    ];
+    $element['#single_wrapped'] = TRUE;
+
+    $upload_is_accessible = empty($element['#default_value']['fids']) && (!isset($element['upload']['#access']) || $element['upload']['#access'] !== FALSE);
+    if ($upload_is_accessible) {
+      // Change widget title. This is the same title that is used by the
+      // multiple file widget.
+      // @see https://git.drupalcode.org/project/drupal/blob/ade7b950a1/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php#L192
+      $element['#title'] = t('Add a new file');
+    }
+    else {
+      // If the field has a value, the file upload title doesn't have to be
+      // visible because the wrapper element will have the same title as the
+      // managed file widget. The title is kept in the markup as visually
+      // hidden for accessibility.
+      $element['#title_display'] = 'invisible';
+    }
+  }
+
+  return $element;
 }
 
 /**
@@ -366,7 +405,7 @@ function _claro_text_format_prerender($element) {
   // Hide format select label visually.
   $element['format']['format']['#title_display'] = 'invisible';
   $element['format']['format']['#wrapper_attributes']['class'][] = 'form-item--editor-format';
-  $element['format']['format']['#attributes']['class'][] = 'form-element--small';
+  $element['format']['format']['#attributes']['class'][] = 'form-element--extrasmall';
   $element['format']['format']['#attributes']['class'][] = 'form-element--editor-format';
 
   // Fix JS inconsistencies of the 'text_textarea_with_summary' widgets.
@@ -452,6 +491,25 @@ function claro_preprocess_details(&$variables) {
     // Details should appear as a standalone accordion.
     $variables['accordion'] = TRUE;
   }
+
+  if (!empty($element['#theme']) &&  $element['#theme'] === 'file_widget_multiple') {
+    // Mark the details required if needed. If the file widget allows uploading
+    // multiple files, the required state is checked by checking the state of
+    // the first child.
+    $variables['required'] = isset($element[0]['#required']) ?
+      $element[0]['#required'] :
+      !empty($element['#required']);
+
+    // If the error is the same as the one in the multiple field widget element,
+    // we have to avoid displaying it twice. Seven and Stark have this issue
+    // as well.
+    // @todo revisit when https://www.drupal.org/node/3084906 is fixed.
+    if (isset($element['#errors']) && isset($variables['errors']) && $element['#errors'] === $variables['errors']) {
+      unset($variables['errors']);
+    }
+  }
+
+  $variables['disabled'] = !empty($element['#disabled']);
 }
 
 /**
@@ -462,7 +520,7 @@ function claro_form_alter(&$form, FormStateInterface $form_state) {
 
   // Make entity forms delete link use the action-link component.
   if (isset($form['actions']['delete']['#type']) && $form['actions']['delete']['#type'] === 'link' && !empty($build_info['callback_object']) && $build_info['callback_object'] instanceof EntityForm) {
-    $form['actions']['delete'] = _claro_convert_link_to_action_link($form['actions']['delete'], 'trash', FALSE, 'danger');
+    $form['actions']['delete'] = _claro_convert_link_to_action_link($form['actions']['delete'], 'trash', 'default', 'danger');
   }
 }
 
@@ -475,16 +533,16 @@ function claro_preprocess_links(&$variables) {
       if ($links_item['link']['#url']->isRouted()) {
         switch ($links_item['link']['#url']->getRouteName()) {
           case 'system.theme_settings_theme':
-            $links_item['link'] = _claro_convert_link_to_action_link($links_item['link'], 'cog', TRUE);
+            $links_item['link'] = _claro_convert_link_to_action_link($links_item['link'], 'cog', 'small');
             break;
 
           case 'system.theme_uninstall':
-            $links_item['link'] = _claro_convert_link_to_action_link($links_item['link'], 'ex', TRUE);
+            $links_item['link'] = _claro_convert_link_to_action_link($links_item['link'], 'ex', 'small');
             break;
 
           case 'system.theme_set_default':
           case 'system.theme_install':
-            $links_item['link'] = _claro_convert_link_to_action_link($links_item['link'], 'checkmark', TRUE);
+            $links_item['link'] = _claro_convert_link_to_action_link($links_item['link'], 'checkmark', 'small');
             break;
         }
       }
@@ -510,8 +568,12 @@ function claro_preprocess_links(&$variables) {
  *    - ex,
  *    - plus,
  *    - trash.
- * @param bool $small
- *   Whether the small action link variant is needed. Defaults to FALSE.
+ * @param string $size
+ *   Name of the small action link variant. Defaults to 'default'.
+ *   Supported sizes are:
+ *    - default,
+ *    - small,
+ *    - extrasmall.
  * @param string $variant
  *   Variant of the action link. Supported variants are 'default' and 'danger'.
  *   Defaults to 'default'.
@@ -519,7 +581,7 @@ function claro_preprocess_links(&$variables) {
  * @return array
  *   The link renderable converted to action link.
  */
-function _claro_convert_link_to_action_link(array $link, $icon_name = NULL, $small = FALSE, $variant = 'default') {
+function _claro_convert_link_to_action_link(array $link, $icon_name = NULL, $size = 'default', $variant = 'default') {
   // Early opt-out if we cannot do anything.
   if (empty($link['#type']) || $link['#type'] !== 'link' || empty($link['#url'])) {
     return $link;
@@ -557,6 +619,7 @@ function _claro_convert_link_to_action_link(array $link, $icon_name = NULL, $sma
     'button--primary',
     'button--danger',
     'button--small',
+    'button--extrasmall',
     'link',
   ]);
 
@@ -573,8 +636,8 @@ function _claro_convert_link_to_action_link(array $link, $icon_name = NULL, $sma
     $link['#options']['attributes']['class'][] = Html::getClass("action-link--icon-$icon_name");
   }
 
-  if ($small) {
-    $link['#options']['attributes']['class'][] = 'action-link--small';
+  if ($size && in_array($size, ['small', 'extrasmall'])) {
+    $link['#options']['attributes']['class'][] = Html::getClass("action-link--$size");
   }
 
   // If the provided $link is an item of the 'links' theme function, then only
@@ -813,7 +876,7 @@ function claro_preprocess_select(&$variables) {
     'form-element--type-select';
 
   if (in_array('block-region-select', $variables['attributes']['class'])) {
-    $variables['attributes']['class'][] = 'form-element--small';
+    $variables['attributes']['class'][] = 'form-element--extrasmall';
   }
 }
 
@@ -1166,3 +1229,78 @@ function claro_preprocess_links__action_links(&$variables) {
     $variables['links'][$delta]['attributes']->addClass('action-links__item');
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK() for file_managed_file.
+ */
+function claro_preprocess_file_managed_file(&$variables) {
+  $element = $variables['element'];
+
+  // Calculate helper values for the template.
+  $upload_is_accessible = !isset($element['upload']['#access']) || $element['upload']['#access'] !== FALSE;
+  $is_multiple = !empty($element['#cardinality']) && $element['#cardinality'] !== 1;
+  $has_value = isset($element['#value']['fids']) && !empty($element['#value']['fids']);
+  $display_can_be_displayed = !empty($element['#display_field']);
+  // Display is rendered in a separate table cell for multiple value widgets.
+  $display_is_visible = $display_can_be_displayed && !$is_multiple && isset($element['display']['#type']) && $element['display']['#type'] !== 'hidden';
+  $description_can_be_displayed = !empty($element['#description_field']);
+  $description_is_visible = $description_can_be_displayed && isset($element['description']);
+
+  $variables['multiple'] = $is_multiple;
+  $variables['upload'] = $upload_is_accessible;
+  $variables['has_value'] = $has_value;
+  $variables['has_meta'] = $display_is_visible || $description_is_visible;
+  $variables['display'] = $display_is_visible;
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for file_widget_multiple.
+ */
+function claro_preprocess_file_widget_multiple(&$variables) {
+  if (isset($variables['table']['#type']) && $variables['table']['#type'] === 'table') {
+    // Add a variant class for the table.
+    $variables['table']['#attributes']['class'][] = 'table-file-multiple-widget';
+
+    // Mark table disabled if the field widget is disabled.
+    if (isset($variables['element']['#disabled']) && $variables['element']['#disabled']) {
+      $variables['table']['#attributes']['class'][] = 'tabledrag-disabled';
+      $variables['table']['#attributes']['class'][] = 'js-tabledrag-disabled';
+
+      // We will add the 'is-disabled' CSS class to the disabled table header
+      // cells.
+      foreach ($variables['table']['#header'] as &$cell) {
+        if (is_array($cell) && isset($cell['data'])) {
+          $cell = $cell + ['class' => []];
+          $cell['class'][] = 'is-disabled';
+        }
+        else {
+          // We have to modify the structure of this header cell.
+          $cell = [
+            'data' => $cell,
+            'class' => ['is-disabled'],
+          ];
+        }
+      }
+    }
+
+    // Mark operations column cells with a CSS class.
+    if (isset($variables['table']['#rows']) && is_array($variables['table']['#rows'])) {
+      foreach ($variables['table']['#rows'] as $row_key => $row) {
+        if (isset($row['data']) && is_array($row['data'])) {
+          $last_cell = end($row['data']);
+          $last_cell_key = key($row['data']);
+
+          if (is_array($last_cell['data'])) {
+            foreach ($last_cell['data'] as $last_cell_item) {
+              if (isset($last_cell_item['#attributes']['class']) && is_array($last_cell_item['#attributes']['class']) && in_array('remove-button', $last_cell_item['#attributes']['class'])) {
+                $variables['table']['#rows'][$row_key]['data'][$last_cell_key] += ['class' => []];
+                $variables['table']['#rows'][$row_key]['data'][$last_cell_key]['class'][] = 'file-operations-cell';
+                break 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/css/src/base/variables.css b/css/src/base/variables.css
index 914e86a4b5c9444591c76d7869d604145c73829a..3798ff463b0b9f5f2dfc82c98135a6e2a1074792 100644
--- a/css/src/base/variables.css
+++ b/css/src/base/variables.css
@@ -93,8 +93,16 @@
   --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
   --input--disabled-border-opacity: 0.5;
   --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
-  --input-border-size: 0.0625rem; /* (1/16)em ~ 1px */
+  --input-border-size: 1px; /* (1/16)em ~ 1px */
   --input--error-border-size: 2px;
+  --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
+  --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
+  --input-font-size: var(--font-size-base);
+  --input-line-height: var(--space-l);
+  --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
+  --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
+  --input--extrasmall-font-size: var(--font-size-s);
+  --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
   --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
   --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
   /*
@@ -161,4 +169,8 @@
    * Tabledrag icon size.
    */
   --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
+  /**
+   * Ajax progress.
+   */
+  --ajax-progress-margin-horizontal: var(--space-s);
 }
diff --git a/css/src/components/action-link.css b/css/src/components/action-link.css
index 80883d82e9da4c3beab5d3a619a91718b8b09a2e..d85f3d48b21d02b47275bf04b6644ff58fe7776d 100644
--- a/css/src/components/action-link.css
+++ b/css/src/components/action-link.css
@@ -50,14 +50,21 @@
   line-height: var(--space-l); /* Bigger line-height needed to prevent the icon from increasing the height */
   -webkit-font-smoothing: antialiased;
   text-decoration: none;
+  cursor: pointer;
 }
 
 /* Small variant. */
-.action-link--small {
+.no-touchevents .action-link--small {
   padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
   font-size: var(--font-size-s);
 }
 
+/* Extra small variant. */
+.no-touchevents .action-link--extrasmall {
+  padding: 0 var(--space-xs);
+  font-size: var(--font-size-s);
+}
+
 .action-link + .action-link {
   margin-left: var(--space-s); /* LTR */
 }
@@ -65,10 +72,12 @@
   margin-right: var(--space-s);
   margin-left: 0;
 }
-.action-link--small + .action-link--small {
+.no-touchevents .action-link--small + .action-link--small,
+.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
   margin-left: var(--space-xs); /* LTR */
 }
-[dir="rtl"] .action-link--small + .action-link--small {
+[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,
+[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {
   margin-right: var(--space-xs);
   margin-left: 0;
 }
@@ -96,6 +105,7 @@
 .action-link:focus {
   position: relative;
   text-decoration: none;
+  z-index: 1;
 }
 .action-link:active {
   color: var(--color-absolutezero-active);
@@ -142,12 +152,22 @@
   margin-left: 0.5em;
 }
 
-.action-link--small::before {
+.no-touchevents .action-link--small::before,
+.no-touchevents .action-link--extrasmall::before {
   top: 0.0625rem; /* Set the proper vertical alignment */
   width: var(--space-s);
   height: var(--space-s);
 }
 
+.no-touchevents .action-link--extrasmall::before {
+  margin-right: 0.4em; /* LTR */
+  margin-left: -0.125rem; /* LTR */
+}
+[dir="rtl"].no-touchevents .action-link--extrasmall::before {
+  margin-right: -0.125rem;
+  margin-left: 0.4em;
+}
+
 /**
  * Hide action link icons for IE11.
  *
@@ -164,59 +184,59 @@
 /* Plus */
 .action-link--icon-plus::before {
   content: '';
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
 }
 
 .action-link--icon-plus:hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%230036b1'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%230036b1'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
 }
 .action-link--icon-plus:active::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%2300309e'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%2300309e'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
 }
 
 /* Plus — danger */
 .action-link--icon-plus.action-link--danger::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23d72222'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23d72222'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
 }
 .action-link--icon-plus.action-link--danger:hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23c11f1f'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23c11f1f'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
 }
 .action-link--icon-plus.action-link--danger:active::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23ab1b1b'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23ab1b1b'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
 }
 
 @media screen and (-ms-high-contrast: active) {
   .action-link--icon-plus.action-link--icon-plus.action-link--icon-plus::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='windowText'%3E%3Cpath d='M3,8 H13'/%3E%3Cpath d='M8,3 V13'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='windowText'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
   }
 }
 
 /* Trash */
 .action-link--icon-trash::before {
   content: '';
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%23545560' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E");
 }
 .action-link--icon-trash:hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%230036b1' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E");
 }
 .action-link--icon-trash:active::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%2300309e' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E");
 }
 
 /* Trash — danger */
 .action-link--icon-trash.action-link--danger::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%23d72222' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E");
 }
 .action-link--icon-trash.action-link--danger:hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%23c11f1f' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E");
 }
 .action-link--icon-trash.action-link--danger:active::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%23ab1b1b' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E");
 }
 
 @media screen and (-ms-high-contrast: active) {
   .action-link--icon-trash.action-link--icon-trash.action-link--icon-trash::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='windowText' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E") !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3E%3C/svg%3E") !important;
   }
 }
 
@@ -281,28 +301,86 @@
 /* Cog */
 .action-link--icon-cog::before {
   content: '';
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
 }
 .action-link--icon-cog:hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
 }
 .action-link--icon-cog:active::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
 }
 
 /* Cog — danger */
 .action-link--icon-cog.action-link--danger::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
 }
 .action-link--icon-cog.action-link--danger:hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
 }
 .action-link--icon-cog.action-link--danger:active::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E");
 }
 
 @media screen and (-ms-high-contrast: active) {
   .action-link--icon-cog.action-link--icon-cog.action-link--icon-cog::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='M15.426 9.249C15.471 8.922 15.502 8.591 15.502 8.251C15.502 7.891 15.467 7.541 15.416 7.195L13.141 6.902C13.026 6.476 12.858 6.075 12.643 5.701L14.039 3.893C13.623 3.342 13.133 2.854 12.58 2.441L10.773 3.832C10.4 3.617 9.999 3.449 9.573 3.333L9.281 1.081C8.943 1.033 8.604 1 8.252 1C7.9 1 7.558 1.033 7.22 1.082L6.929 3.333C6.503 3.449 6.103 3.617 5.729 3.832L3.924 2.441C3.372 2.854 2.88 3.342 2.465 3.893L3.86 5.701C3.645 6.075 3.477 6.475 3.361 6.901L1.085 7.195C1.035 7.541 1 7.891 1 8.251C1 8.591 1.031 8.922 1.077 9.249L3.362 9.544C3.477 9.97 3.646 10.37 3.861 10.744L2.444 12.58C2.855 13.13 3.34 13.618 3.887 14.032L5.729 12.612C6.103 12.827 6.503 12.995 6.929 13.11L7.227 15.421C7.564 15.468 7.904 15.501 8.252 15.501C8.6 15.501 8.94 15.468 9.273 15.421L9.572 13.11C9.998 12.995 10.398 12.827 10.773 12.612L12.615 14.032C13.162 13.618 13.646 13.13 14.058 12.58L12.642 10.743C12.857 10.37 13.025 9.97 13.14 9.544L15.426 9.249ZM8.252 10.763C6.846 10.763 5.709 9.626 5.709 8.222C5.709 6.82 6.846 5.681 8.252 5.681C9.654 5.681 10.793 6.819 10.793 8.222C10.793 9.626 9.654 10.763 8.252 10.763Z'/%3E%3C/svg%3E") !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText'%3E%3Cpath d='m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z'/%3E%3C/svg%3E") !important;
+  }
+}
+
+/* Show */
+.action-link--icon-show::before {
+  content: '';
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
+}
+.action-link--icon-show:hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
+}
+.action-link--icon-show:active::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
+}
+
+/* Show - danger */
+.action-link--icon-show.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
+}
+.action-link--icon-show.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
+}
+.action-link--icon-show.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E");
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .action-link--icon-show.action-link--icon-show.action-link--icon-show::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText' fill-rule='evenodd'%3E%3Cpath d='m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z'/%3E%3C/svg%3E") !important;
+  }
+}
+
+/* Hide */
+.action-link--icon-hide::before {
+  content: '';
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23545560' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
+}
+.action-link--icon-hide:hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230036b1' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
+}
+.action-link--icon-hide:active::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2300309e' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
+}
+
+/* Hide - danger */
+.action-link--icon-hide.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23d72222' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
+}
+.action-link--icon-hide.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23c11f1f' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
+}
+.action-link--icon-hide.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23ab1b1b' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .action-link--icon-hide.action-link--icon-hide.action-link--icon-hide::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='windowText' fill-rule='evenodd'%3E%3Cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3E%3Cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3E%3C/svg%3E");
   }
 }
diff --git a/css/src/components/ajax-progress.module.css b/css/src/components/ajax-progress.module.css
index ddf70c3b85c58d910ce2c66e2fbad2fb380b6b32..16eb94f7aee3b129ede790a54482de2d6844ef1d 100644
--- a/css/src/components/ajax-progress.module.css
+++ b/css/src/components/ajax-progress.module.css
@@ -29,19 +29,32 @@
   position: relative;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -3px var(--space-s) 0;
+  margin: -3px var(--ajax-progress-margin-horizontal) 0;
 }
 
 /**
  * Remove margin from ajax throbbers following buttons because buttons already
  * have a large margin set.
  */
-.button + .ajax-progress--throbber {
+.js .button:not(.js-hide) + .ajax-progress--throbber {
   margin-left: 0; /* LTR */
 }
-[dir="rtl"] .button + .ajax-progress--throbber {
-  margin-left: var(--space-s);
+[dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
   margin-right: 0;
+  margin-left: var(--ajax-progress-margin-horizontal);
+}
+
+/**
+ * Restore start margin for ajax throbbers inside a managed file widget.
+ */
+.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
+.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
+  margin-left: var(--ajax-progress-margin-horizontal); /* LTR */
+}
+[dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
+[dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
+  margin-right: var(--ajax-progress-margin-horizontal);
+  margin-left: var(--ajax-progress-margin-horizontal);
 }
 
 .ajax-progress__throbber {
@@ -56,12 +69,12 @@
 
 .ajax-progress__message {
   display: inline-block;
-  padding-left: var(--space-s);
+  padding-left: var(--ajax-progress-margin-horizontal);
   font-size: var(--font-size-label);
 }
 [dir="rtl"] .ajax-progress__message {
   padding-left: 0;
-  padding-right: var(--space-s);
+  padding-right: var(--ajax-progress-margin-horizontal);
 }
 /**
  * Full screen throbber.
diff --git a/css/src/components/button.css b/css/src/components/button.css
index e425674311b87617a0bcec057353c7b09c91ea37..4f9614e02800731fb5fda443f81c3adc9e59ea15 100644
--- a/css/src/components/button.css
+++ b/css/src/components/button.css
@@ -19,7 +19,6 @@
  *
  * @todo Consider moving box-sizing into base.css under a universal selector.
  * See https://www.drupal.org/node/2124251
- *
  */
 
 /**
@@ -74,8 +73,17 @@
   padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
   font-size: var(--font-size-xs);
 }
-[dir="rtl"].no-touchevents .button--small {
-  margin: var(--space-s) 0 var(--space-s) var(--space-xs);
+
+/* Common styles for extra small buttons */
+.no-touchevents .button--extrasmall {
+  margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
+  padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
+  font-size: var(--font-size-xs);
+}
+[dir="rtl"].no-touchevents .button--small,
+[dir="rtl"].no-touchevents .button--extrasmall {
+  margin-right: 0;
+  margin-left: var(--space-xs);
 }
 
 /* Styles for action link buttons */
diff --git a/css/src/components/details.css b/css/src/components/details.css
index e3b65d85a835587c463ae28a57910f1e98c50409..8129c6fb2ed5e02b8adfdd9e4f0c551ff2cec5c8 100644
--- a/css/src/components/details.css
+++ b/css/src/components/details.css
@@ -11,7 +11,6 @@
  * Available modifiers are:
  *  - .claro-details--accordion
  *  - .claro-details--accordion-item
- *  - .claro-details--vertical-tabs-item
  *
  * Despite the fact that 'accordion' isn't used anywhere right now, we
  * implemented it (since the design defines that).
@@ -103,6 +102,7 @@
   padding-right: var(--details-desktop-wrapper-padding-start);
   padding-left: var(--space-l);
 }
+
 /**
  * Accordion list items must not have border radius except they are the first
  * or the last ones.
@@ -423,6 +423,17 @@
   }
 }
 
+/* Description. */
+.claro-details__description {
+  font-size: var(--font-size-xs); /* ~13px */
+  line-height: calc(17rem / 16); /* 17px */
+  color: var(--input-fg-color--description);
+  margin-bottom: var(--space-m);
+}
+.claro-details__description.is-disabled {
+  color: var(--input--disabled-fg-color);
+}
+
 /**
  * Collapse processed for non-supporting browsers like IE or Edge.
  */
@@ -541,3 +552,16 @@
     border: 2px dotted;
   }
 }
+
+.required-mark::after {
+  content: "";
+  vertical-align: super;
+  display: inline-block;
+  background-image: url(../../../images/core/ee0000/required.svg);
+  background-repeat: no-repeat;
+  background-size: 0.4375rem 0.4375rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  margin-right: 0.3em;
+  margin-left: 0.3em;
+}
diff --git a/css/src/components/dropbutton.css b/css/src/components/dropbutton.css
index b8753849907ca36ca0663df383619a3d6b2a50a4..8c4dbcf8b109dd794de834b4a2a60c7a505b8f47 100644
--- a/css/src/components/dropbutton.css
+++ b/css/src/components/dropbutton.css
@@ -73,11 +73,11 @@
 }
 
 /* Variants. */
-.js .dropbutton--small {
+.js.no-touchevents .dropbutton--small {
   height: var(--dropbutton-small-toggle-size);
 }
 
-.js .dropbutton--extrasmall {
+.js.no-touchevents .dropbutton--extrasmall {
   height: var(--dropbutton-extrasmall-toggle-size);
 }
 
@@ -93,18 +93,18 @@
 }
 
 /* First dropbutton list item variants */
-.js .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
-[dir="rtl"].js .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
 
-.js .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
-[dir="rtl"].js .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
@@ -168,18 +168,18 @@
 }
 
 /* Toggler variants */
-.dropbutton--small .dropbutton__toggle {
+.no-touchevents .dropbutton--small .dropbutton__toggle {
   width: var(--dropbutton-small-toggle-size);
   height: var(--dropbutton-small-toggle-size);
 }
 
-.dropbutton--extrasmall .dropbutton__toggle {
+.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
   width: var(--dropbutton-extrasmall-toggle-size);
   height: var(--dropbutton-extrasmall-toggle-size);
 }
 
-.dropbutton--small .dropbutton__toggle::before,
-.dropbutton--extrasmall .dropbutton__toggle::before {
+.no-touchevents .dropbutton--small .dropbutton__toggle::before,
+.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
   width: 0.75rem; /* 12px */
 }
 
@@ -206,8 +206,8 @@
 
   /* Variants */
 
-  .dropbutton--small .dropbutton__toggle::before,
-  .dropbutton--extrasmall .dropbutton__toggle::before {
+  .no-touchevents .dropbutton--small .dropbutton__toggle::before,
+  .no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
     width: 0.4375rem;
     height: 0.4375rem;
     margin-top: calc(0.4375rem / (2 * -1.41429));
@@ -246,14 +246,14 @@
 }
 
 /* Variants */
-.dropbutton__item--small:first-of-type > * {
+.no-touchevents .dropbutton__item--small:first-of-type > * {
   padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
   padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
   font-size: var(--dropbutton-small-font-size);
   line-height: var(--dropbutton-small-line-height);
 }
 
-.dropbutton__item--extrasmall:first-of-type > * {
+.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
   padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
   padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
   font-size: var(--dropbutton-extrasmall-font-size);
@@ -369,16 +369,16 @@
 }
 
 /* Variants. */
-.dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
-.dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
   padding-top: var(--dropbutton-small-spacing-size);
   padding-bottom: var(--dropbutton-small-spacing-size);
   font-size: var(--dropbutton-small-font-size);
   line-height: var(--dropbutton-small-line-height);
 }
 
-.dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
-.dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
   padding-top: var(--dropbutton-extrasmall-spacing-size);
   padding-bottom: var(--dropbutton-extrasmall-spacing-size);
   font-size: var(--dropbutton-extrasmall-font-size);
diff --git a/css/src/components/file.css b/css/src/components/file.css
new file mode 100644
index 0000000000000000000000000000000000000000..2af451431f8dc6a4a48f7a9b9e35826cb6f501f3
--- /dev/null
+++ b/css/src/components/file.css
@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Extends styles of the file link.
+ */
+
+@import "../base/variables.css";
+
+.file {
+  font-size: var(--font-size-s);
+  line-height: calc(18rem / 16);
+  background-size: var(--space-m) var(--space-m);
+  background-position: left 0.0625rem;
+  min-height: calc(var(--space-m) + 0.0625rem);
+  padding-left: var(--space-l); /* LTR */
+}
+[dir="rtl"] .file {
+  padding-right: var(--space-l); /* LTR */
+}
diff --git a/css/src/components/form--managed-file.css b/css/src/components/form--managed-file.css
new file mode 100644
index 0000000000000000000000000000000000000000..7cebd2c5c092c787ab800cfd6f80aeb41aa6d4c0
--- /dev/null
+++ b/css/src/components/form--managed-file.css
@@ -0,0 +1,79 @@
+/**
+ * @file
+ * Styles for the managed file widget.
+ */
+
+@import "../base/variables.css";
+
+.form-managed-file.no-upload {
+  max-width: 32rem;
+}
+
+.form-managed-file.has-value.no-meta {
+  max-width: none;
+}
+
+.form-managed-file__main {
+  display: flex;
+  align-items: center;
+}
+
+.form-managed-file.has-upload .form-managed-file__main,
+.form-managed-file.has-value.no-meta .form-managed-file__main {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.form-managed-file .file {
+  word-break: break-all;
+  hyphens: auto;
+}
+
+.form-managed-file .file__size {
+  word-break: normal;
+}
+
+.form-managed-file__main .file {
+  flex-grow: 1;
+  margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */
+}
+[dir="rtl"] .form-managed-file__main .file {
+  margin-right: 0;
+  margin-left: var(--space-m);
+}
+
+/* Remove margins from RTL .buttons as well */
+.form-managed-file .button.button {
+  margin: 0;
+}
+
+.form-managed-file__main .form-element--api-file {
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.form-managed-file__main .upload-button {
+  flex: 0 0 auto;
+}
+
+[dir="rtl"] .form-managed-file__main .file {
+  margin-right: 0;
+  margin-left: var(--space-m);
+}
+
+/**
+ * Alternative styles for the widget inside a (draggable) table.
+ */
+.table-file-multiple-widget .form-managed-file .file {
+  margin-bottom: 0;
+}
+
+.table-file-multiple-widget .form-item::before {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.table-file-multiple-widget .form-managed-file .form-element {
+  width: 100%;
+}
diff --git a/css/src/components/form--select.css b/css/src/components/form--select.css
index 0cac541cce4bad966a530239c985c74113c3a654..0eda9c6372e4af0bef6261fe1469af21c9afa50c 100644
--- a/css/src/components/form--select.css
+++ b/css/src/components/form--select.css
@@ -17,11 +17,14 @@
   padding-left: calc(2rem - var(--input-border-size));
   background-position: 0 50%;
 }
-.form-element--type-select.form-element--small {
-  background-size: 1.75rem 0.5625rem; /* w: 14px + (2 * 7px), h: 9px */
+
+.no-touchevents .form-element--type-select.form-element--extrasmall,
+.no-touchevents .form-element--type-select[name$="][_weight]"] {
+  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
   padding-right: calc(1.5rem - var(--input-border-size));
 }
-[dir="rtl"] .form-element--type-select.form-element--small {
+[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
+[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
   padding-right: calc(0.5rem - var(--input-border-size));
   padding-left: calc(1.5rem - var(--input-border-size));
 }
diff --git a/css/src/components/form--text.css b/css/src/components/form--text.css
index 439ad3192b2ad14561e12065e33a34c1576bd656..72292decebb59e472162e1fe6683fa88a82e0aa4 100644
--- a/css/src/components/form--text.css
+++ b/css/src/components/form--text.css
@@ -8,20 +8,23 @@
 .form-element {
   appearance: none; /* Being able to control inner box shadow on iOS. */
   box-sizing: border-box;
-  padding: calc(0.75rem - var(--input-border-size)) calc(1rem - var(--input-border-size));
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
   max-width: 100%;
   border: var(--input-border-size) solid var(--input-border-color);
   border-radius: var(--input-border-radius-size);
   background: var(--input-bg-color);
   color: var(--input-fg-color);
-  min-height: 3rem; /* iOS. */
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+  min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
 }
 
-.form-element--small {
-  font-size: var(--font-size-label);
-  padding: calc(0.25rem - var(--input-border-size)) calc(0.5rem - var(--input-border-size));
-  line-height: 1rem;
-  min-height: 1.5rem; /* iOS. */
+.no-touchevents .form-element--extrasmall,
+.no-touchevents .form-element[name$="][_weight]"] {
+  min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
+  padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
+  font-size: var(--input--extrasmall-font-size);
+  line-height: var(--input--extrasmall-line-height);
 }
 
 /**
@@ -52,6 +55,33 @@
   text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
 }
 
+/**
+ * Reset value border and background of the file input on IE11 and Edge.
+ */
+.form-element--type-file::-ms-value {
+  border: 0;
+  background: inherit;
+}
+/**
+ * Better upload button alignment for Chrome.
+ */
+.form-element--type-file::-webkit-file-upload-button {
+  vertical-align: top;
+}
+
+/**
+ * Target IE 11 and Edge.
+ *
+ * Reduce the vertical padding of the file input element to make the browse
+ * button fit into the needed input height.
+ */
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+:root .form-element--type-file {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 /**
  * States.
  */
diff --git a/css/src/components/table--file-multiple-widget.css b/css/src/components/table--file-multiple-widget.css
new file mode 100644
index 0000000000000000000000000000000000000000..fca415c8958927f89301e13efe09be66d4dc3d1e
--- /dev/null
+++ b/css/src/components/table--file-multiple-widget.css
@@ -0,0 +1,107 @@
+/**
+ * @file
+ * Styles for multiple file widget table.
+ */
+
+@import "../base/variables.css";
+
+.table-file-multiple-widget tbody {
+  vertical-align: top;
+}
+
+.table-file-multiple-widget .tabledrag-cell-content {
+  position: relative;
+  display: block;
+  height: auto;
+}
+
+.table-file-multiple-widget .tabledrag-cell-content > * {
+  display: block;
+}
+
+.table-file-multiple-widget .tabledrag-cell-content__item {
+  padding: 0;
+}
+
+.table-file-multiple-widget .tabledrag-handle {
+  float: left; /* LTR */
+}
+[dir="rtl"] .table-file-multiple-widget .tabledrag-handle {
+  float: right;
+}
+
+.table-file-multiple-widget .tabledrag-changed {
+  float: left; /* LTR */
+  line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--space-xs) * 2));
+}
+[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
+  float: left;
+}
+
+.table-file-multiple-widget td {
+  height: calc(var(--space-m) * 3);
+}
+
+.table-file-multiple-widget td > :first-child {
+  margin-top: 0;
+}
+.table-file-multiple-widget td > :last-child {
+  margin-bottom: 0;
+}
+
+.table-file-multiple-widget .button.button {
+  margin: 0;
+}
+
+.table-file-multiple-widget th {
+  color: var(--color-davysgrey);
+  background: var(--color-whitesmoke);
+  font-size: var(--font-size-s);
+  height: calc(var(--space-m) * 2);
+}
+
+.table-file-multiple-widget td {
+  padding-top: var(--space-m);
+  padding-bottom: var(--space-m);
+}
+
+.table-file-multiple-widget .form-item {
+  margin-top: var(--space-m);
+  margin-bottom: var(--space-xs);
+}
+
+.table-file-multiple-widget .tabledrag-cell {
+  padding-top: var(--space-xs);
+  padding-bottom: var(--space-xs);
+}
+
+.table-file-multiple-widget .checkbox .form-type--boolean {
+  line-height: calc(var(--space-m) * 3);
+}
+
+.no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {
+  line-height: var(--line-height);
+}
+
+/**
+ * The cell that contains file operations (usually, this is the remove button).
+ */
+.file-operations-cell {
+  width: 1px;
+  white-space: nowrap; /* Don't let ajax-progress be broken into a new line. */
+}
+
+/**
+ * Take as much space as possible.
+ */
+@media screen and (max-width: 37.5em) {
+  .claro-details__wrapper .file-widget-multiple__table-wrapper {
+    margin-right: calc(var(--space-m) * -1);
+    margin-left: calc(var(--space-m) * -1);
+  }
+
+  .claro-details__wrapper .file-widget-multiple__table-wrapper > :not(table) {
+    margin-right: var(--space-m);
+    margin-left: var(--space-m);
+  }
+}
diff --git a/css/src/components/tables.css b/css/src/components/tables.css
index a3e8d6c06bb3ace1c911e319aaa26f1987c7a676..50f7f89c084a398f144062faee0eccfeae95ba75 100644
--- a/css/src/components/tables.css
+++ b/css/src/components/tables.css
@@ -10,6 +10,7 @@ table {
   margin-top: var(--space-l);
   margin-bottom: var(--space-l);
 }
+
 .sticky-header {
   min-width: 0;
 }
@@ -25,6 +26,7 @@ th {
   height: var(--space-xl);
   padding: var(--space-xs) var(--space-m);
   background: var(--color-whitesmoke);
+  color: var(--color-text);
   line-height: 1.25rem; /* 20px */
   text-align: left; /* LTR */
   position: relative;
@@ -181,7 +183,8 @@ td > .ajax-new-content > .form-item > .form-element {
   width: 100%;
 }
 
-th.is-disabled {
+/* Win over table-file-multiple-widget. */
+th.is-disabled.is-disabled {
   color: var(--input--disabled-fg-color);
 }
 /* Force browsers to calculate the width of a 'select all' <th> element. */
@@ -229,3 +232,13 @@ td.priority-medium {
     display: table-cell;
   }
 }
+
+.tabledrag-toggle-weight-wrapper {
+  margin-top: var(--space-l);
+  line-height: calc(28rem / 16);
+}
+
+.tabledrag-toggle-weight-wrapper + table,
+.tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {
+  margin-top: 0;
+}
diff --git a/images/src/checkmark.svg b/images/src/checkmark.svg
index fb79f881a8e70bfecac46d6c16b3170c51b635e3..dcc35495aa2ff6b2267711da7e82bd78f11a67ca 100644
--- a/images/src/checkmark.svg
+++ b/images/src/checkmark.svg
@@ -1 +1 @@
-<svg fill="none" height="16" stroke="#000" stroke-width="2" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m2 8.57143 3.6 3.42857 8.4-8"/></svg>
\ No newline at end of file
+<svg fill="none" height="16" stroke="#000" stroke-width="2" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.57143L5.6 12L14 4"/></svg>
diff --git a/images/src/ex.svg b/images/src/ex.svg
index adba38623cabbabb7751c37444f4eb6814f96a98..c73530ad8384e08269c12bb0ac07b7b392bc4fe9 100644
--- a/images/src/ex.svg
+++ b/images/src/ex.svg
@@ -1 +1 @@
-<svg height="16" stroke="#000" stroke-width="1.5" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m13 3-10 10"/><path d="m13 13-10-10"/></svg>
\ No newline at end of file
+<svg height="16" stroke="#000" stroke-width="1.5" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M13 3L3 13"/><path d="M13 13L3 3"/></svg>
diff --git a/images/src/hide.svg b/images/src/hide.svg
new file mode 100644
index 0000000000000000000000000000000000000000..83e8fc58aab1911929f483659d2ed017ba33a593
--- /dev/null
+++ b/images/src/hide.svg
@@ -0,0 +1 @@
+<svg fill-rule="evenodd" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z"/><path d="m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z"/></svg>
\ No newline at end of file
diff --git a/images/src/show.svg b/images/src/show.svg
new file mode 100644
index 0000000000000000000000000000000000000000..56ae78f30931c802bbd293ced56738c0f5bfa230
--- /dev/null
+++ b/images/src/show.svg
@@ -0,0 +1 @@
+<svg fill-rule="evenodd" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8 3c-3.6363601 0-6.7418187 2.0733333-8 5 1.2581813 2.926667 4.3636399 5 8 5 3.63636 0 6.741866-2.073333 8-5-1.258134-2.9266667-4.36364-5-8-5zm0 8c1.6568531 0 3-1.343147 3-3 0-1.6568534-1.3431469-3-3-3-1.6568535 0-3 1.3431466-3 3 0 1.656853 1.3431466 3 3 3z"/></svg>
\ No newline at end of file
diff --git a/images/src/trash.svg b/images/src/trash.svg
index 53e2d09ce1f005f7f024b1c54d68b1432e9764c3..c0ec27d72b2b14c2b98d05e222799e4684274faa 100644
--- a/images/src/trash.svg
+++ b/images/src/trash.svg
@@ -1 +1 @@
-<svg height="16" viewBox="0 0 14 16" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m13.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z"/></svg>
\ No newline at end of file
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m14.89965 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2h-4.6c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8h-10.8c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z"/></svg>
diff --git a/js/claro.tabledrag.es6.js b/js/claro.tabledrag.es6.js
index 70d92f2c849d9ac2ec5b2cb7c63266a598758085..161f77072c022426f113ad95beb641fe0eead26d 100644
--- a/js/claro.tabledrag.es6.js
+++ b/js/claro.tabledrag.es6.js
@@ -4,6 +4,10 @@
  *
  * - New Drupal.theme.tableDragHandle() function for tabledrag handle markup
  *   (https://www.drupal.org/node/3077938).
+ * - New Drupal.theme.tableDragToggle() function for tabledrag toggle markup
+ *   (@todo: https://www.drupal.org/node/3084916).
+ * - New Drupal.theme.tableDragToggleWrapper() function for the wrapper of the
+ *   tabledrag toggle (@todo: https://www.drupal.org/node/3084916).
  * - Tabledrag functionality can be disabled
  *   (https://www.drupal.org/node/3083039).
  * - The initial content of the tabledrag-cell is wrapped into a new DOM element
@@ -21,6 +25,8 @@
  *     changed marker.
  * - Fixes the RTL bug of the original tabledrag.js
  *   (https://www.drupal.org/node/197641).
+ * - Tabledrag changed mark is added next to the drag-handle, and not after the
+ *   last item. (@todo: https://www.drupal.org/node/3084910).
  *
  * The '_slicedToArray' shim added for handling destructured arrays breaks IE11,
  * that is why the 'prefer-destructuring' rule is disabled.
@@ -252,17 +258,18 @@
       self.makeDraggable(this);
     });
 
-    // Add a link before the table for users to show or hide weight columns.
-    $table.before($('<button type="button" class="link tabledrag-toggle-weight"></button>')
+    // Add the toggle link wrapper before the table that will contain the toggle
+    // for users to show or hide weight columns.
+    $table.before($(Drupal.theme('tableDragToggleWrapper'))
+      .addClass('js-tabledrag-toggle-weight-wrapper')
       .on(
         'click',
+        '.js-tabledrag-toggle-weight',
         $.proxy(function toggleColumns(event) {
           event.preventDefault();
           this.toggleColumns();
         }, this),
-      )
-      .wrap('<div class="tabledrag-toggle-weight-wrapper"></div>')
-      .parent());
+      ));
 
     // Initialize the specified columns (for example, weight or parent columns)
     // to show or hide according to user preference. This aids accessibility
@@ -431,7 +438,18 @@
         this.colSpan = this.colSpan - 1;
       });
       // Change link text.
-      $('.tabledrag-toggle-weight').text(Drupal.t('Show row weights'));
+      $('.js-tabledrag-toggle-weight-wrapper').each(function addShowWeightToggle() {
+        const $wrapper = $(this);
+        const toggleWasFocused = $wrapper.find('.js-tabledrag-toggle-weight:focus').length;
+        $wrapper.empty().append($(Drupal.theme(
+          'tableDragToggle',
+          'show',
+          Drupal.t('Show row weights'),
+        )).addClass('js-tabledrag-toggle-weight'));
+        if (toggleWasFocused) {
+          $wrapper.find('.js-tabledrag-toggle-weight').trigger('focus');
+        }
+      });
     },
 
     /**
@@ -450,7 +468,18 @@
         this.colSpan = this.colSpan + 1;
       });
       // Change link text.
-      $('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights'));
+      $('.js-tabledrag-toggle-weight-wrapper').each(function addHideWeightToggle() {
+        const $wrapper = $(this);
+        const toggleWasFocused = $wrapper.find('.js-tabledrag-toggle-weight:focus').length;
+        $wrapper.empty().append($(Drupal.theme(
+          'tableDragToggle',
+          'hide',
+          Drupal.t('Hide row weights'),
+        )).addClass('js-tabledrag-toggle-weight'));
+        if (toggleWasFocused) {
+          $wrapper.find('.js-tabledrag-toggle-weight').trigger('focus');
+        }
+      });
     },
 
     /**
@@ -903,8 +932,11 @@
 
           self.rowObject.markChanged();
           if (self.changed === false) {
+            const $messageTarget = $(self.table).prevAll('.js-tabledrag-toggle-weight-wrapper').length ?
+              $(self.table).prevAll('.js-tabledrag-toggle-weight-wrapper').last() :
+              self.table;
             $(Drupal.theme('tableDragChangedWarning'))
-              .insertBefore(self.table)
+              .insertBefore($messageTarget)
               .hide()
               .fadeIn('slow');
             self.changed = true;
@@ -1682,7 +1714,7 @@
       const marker = $(Drupal.theme('tableDragChangedMarker')).addClass('js-tabledrag-changed-marker');
       const cell = $(this.element).find('td:first-of-type');
       if (cell.find('.js-tabledrag-changed-marker').length === 0) {
-        cell.parent().find('.js-tabledrag-cell-content').append(marker);
+        cell.find('.js-tabledrag-handle').after(marker);
       }
     },
 
@@ -1767,6 +1799,52 @@
       tableDragCellContentWrapper() {
         return '<div class="tabledrag-cell-content__item"/>';
       },
+
+      /**
+       * Constructs the weight column toggle.
+       *
+       * The 'tabledrag-toggle-weight' CSS class should be kept since it is used
+       * elsewhere as well (e.g. in tests).
+       *
+       * @param {string} action
+       *   The action the toggle will perform.
+       * @param {string} text
+       *   The text content of the toggle.
+       *
+       * @return {string}
+       *   A string representing a DOM fragment.
+       */
+      tableDragToggle(action, text) {
+        const classes = [
+          'action-link',
+          'action-link--extrasmall',
+          'tabledrag-toggle-weight',
+        ];
+        switch (action) {
+          case 'show':
+            classes.push('action-link--icon-show');
+            break;
+
+          default:
+            classes.push('action-link--icon-hide');
+            break;
+        }
+
+        return `<a href="#" class="${classes.join(' ')}">${text}</a>`;
+      },
+
+      /**
+       * Constructs the wrapper of the weight column toggle.
+       *
+       * The 'tabledrag-toggle-weight-wrapper' CSS class should be kept since it is used
+       * by Views UI and inside off-canvas dialogs.
+       *
+       * @return {string}
+       *   A string representing a DOM fragment.
+       */
+      tableDragToggleWrapper() {
+        return '<div class="tabledrag-toggle-weight-wrapper"></div>';
+      },
     },
   );
 })(jQuery, Drupal, drupalSettings);
diff --git a/js/claro.tabledrag.js b/js/claro.tabledrag.js
index 86c5dab38a5f98140919e6f17a6013d4d267d4db..ef37e236c0d0e17f069b37964cacd9b96403dfb4 100644
--- a/js/claro.tabledrag.js
+++ b/js/claro.tabledrag.js
@@ -86,10 +86,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       self.makeDraggable(this);
     });
 
-    $table.before($('<button type="button" class="link tabledrag-toggle-weight"></button>').on('click', $.proxy(function toggleColumns(event) {
+    $table.before($(Drupal.theme('tableDragToggleWrapper')).addClass('js-tabledrag-toggle-weight-wrapper').on('click', '.js-tabledrag-toggle-weight', $.proxy(function toggleColumns(event) {
       event.preventDefault();
       this.toggleColumns();
-    }, this)).wrap('<div class="tabledrag-toggle-weight-wrapper"></div>').parent());
+    }, this)));
 
     self.initColumns();
 
@@ -191,7 +191,14 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         this.colSpan = this.colSpan - 1;
       });
 
-      $('.tabledrag-toggle-weight').text(Drupal.t('Show row weights'));
+      $('.js-tabledrag-toggle-weight-wrapper').each(function addShowWeightToggle() {
+        var $wrapper = $(this);
+        var toggleWasFocused = $wrapper.find('.js-tabledrag-toggle-weight:focus').length;
+        $wrapper.empty().append($(Drupal.theme('tableDragToggle', 'show', Drupal.t('Show row weights'))).addClass('js-tabledrag-toggle-weight'));
+        if (toggleWasFocused) {
+          $wrapper.find('.js-tabledrag-toggle-weight').trigger('focus');
+        }
+      });
     },
     showColumns: function showColumns() {
       var $tables = $('table').findOnce('tabledrag');
@@ -204,7 +211,14 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         this.colSpan = this.colSpan + 1;
       });
 
-      $('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights'));
+      $('.js-tabledrag-toggle-weight-wrapper').each(function addHideWeightToggle() {
+        var $wrapper = $(this);
+        var toggleWasFocused = $wrapper.find('.js-tabledrag-toggle-weight:focus').length;
+        $wrapper.empty().append($(Drupal.theme('tableDragToggle', 'hide', Drupal.t('Hide row weights'))).addClass('js-tabledrag-toggle-weight'));
+        if (toggleWasFocused) {
+          $wrapper.find('.js-tabledrag-toggle-weight').trigger('focus');
+        }
+      });
     },
     rowSettings: function rowSettings(group, row) {
       var field = $(row).find('.' + group);
@@ -488,7 +502,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 
           self.rowObject.markChanged();
           if (self.changed === false) {
-            $(Drupal.theme('tableDragChangedWarning')).insertBefore(self.table).hide().fadeIn('slow');
+            var $messageTarget = $(self.table).prevAll('.js-tabledrag-toggle-weight-wrapper').length ? $(self.table).prevAll('.js-tabledrag-toggle-weight-wrapper').last() : self.table;
+            $(Drupal.theme('tableDragChangedWarning')).insertBefore($messageTarget).hide().fadeIn('slow');
             self.changed = true;
           }
         }
@@ -935,7 +950,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       var marker = $(Drupal.theme('tableDragChangedMarker')).addClass('js-tabledrag-changed-marker');
       var cell = $(this.element).find('td:first-of-type');
       if (cell.find('.js-tabledrag-changed-marker').length === 0) {
-        cell.parent().find('.js-tabledrag-cell-content').append(marker);
+        cell.find('.js-tabledrag-handle').after(marker);
       }
     },
     onIndent: function onIndent() {
@@ -964,6 +979,23 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
     },
     tableDragCellContentWrapper: function tableDragCellContentWrapper() {
       return '<div class="tabledrag-cell-content__item"/>';
+    },
+    tableDragToggle: function tableDragToggle(action, text) {
+      var classes = ['action-link', 'action-link--extrasmall', 'tabledrag-toggle-weight'];
+      switch (action) {
+        case 'show':
+          classes.push('action-link--icon-show');
+          break;
+
+        default:
+          classes.push('action-link--icon-hide');
+          break;
+      }
+
+      return '<a href="#" class="' + classes.join(' ') + '">' + text + '</a>';
+    },
+    tableDragToggleWrapper: function tableDragToggleWrapper() {
+      return '<div class="tabledrag-toggle-weight-wrapper"></div>';
     }
   });
 })(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/templates/content-edit/file-managed-file.html.twig b/templates/content-edit/file-managed-file.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ee0fbffb50f8e68da4209381f2a6cb6bfb58dec1
--- /dev/null
+++ b/templates/content-edit/file-managed-file.html.twig
@@ -0,0 +1,46 @@
+{#
+/**
+ * @file
+ * Theme override to display a file form widget.
+ *
+ * Available variables:
+ * - element: Form element for the file upload.
+ * - attributes: HTML attributes for the containing element.
+ *
+ * Added by Claro:
+ * - multiple: Whether this widget is the part of a multi-value file widget or
+ *   not.
+ * - upload: Whether the file upload input is displayed or not.
+ * - has_value: true if the widget already contains a file.
+ * - has_meta: true when the display checkbox or the description input are
+ *   enabled and and are visible.
+ * - has_display: true when the display checkbox is enabled and is visible.
+ *
+ * @see template_preprocess_file_managed_file()
+ * @see claro_preprocess_file_managed_file()
+ */
+#}
+
+{%
+  set classes = [
+    'js-form-managed-file',
+    'form-managed-file',
+    upload ? 'has-upload' : 'no-upload',
+    has_value ? 'has-value' : 'no-value',
+    has_meta ? 'has-meta' : 'no-meta',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  <div class="form-managed-file__main">
+    {{ element|without('display', 'description')}}
+  </div>
+
+  {% if has_meta %}
+    <div class="form-managed-file__meta">
+      {{ element.description }}
+      {% if display %}
+        {{ element.display }}
+      {% endif %}
+    </div>
+  {% endif %}
+</div>
diff --git a/templates/content-edit/file-widget-multiple.html.twig b/templates/content-edit/file-widget-multiple.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..606d9835921c7e11a3b084da656b001d265045c6
--- /dev/null
+++ b/templates/content-edit/file-widget-multiple.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Theme override to display a multiple file upload form widget.
+ *
+ * Available variables:
+ * - table: Table of previously uploaded files.
+ * - element: The form element for uploading another file.
+ *
+ * @see template_preprocess_file_widget_multiple()
+ */
+#}
+<div class="file-widget-multiple">
+  <div class="file-widget-multiple__table-wrapper">
+    {{ table }}
+  </div>
+
+  {{ element }}
+</div>
diff --git a/templates/details.html.twig b/templates/details.html.twig
index 2bfcd1c54769baf12088a1a2f5b078b0651e38cf..88f72ee1369d87e9e19330a5548c4f7b16de374a 100644
--- a/templates/details.html.twig
+++ b/templates/details.html.twig
@@ -13,6 +13,7 @@
  * - accordion: whether the details element should look as an accordion.
  * - accordion_item: whether the details element is an item of an accordion
  *   list.
+ * - disabled: whether the details is disabled.
  *
  * @see template_preprocess_details()
  * @see claro_preprocess_details()
@@ -58,6 +59,9 @@
     %}
     <summary{{ summary_attributes.addClass(summary_classes) }}>
       {{- title -}}
+      {%- if required -%}
+        <span class="required-mark"></span>
+      {%- endif -%}
     </summary>
   {%- endif -%}
   <div{{ content_attributes.addClass(content_wrapper_classes) }}>
@@ -71,7 +75,7 @@
         </div>
       {% endif %}
       {%- if description -%}
-        <div class="claro-details__description">{{ description }}</div>
+        <div class="claro-details__description{{ disabled ? ' is-disabled' }}">{{ description }}</div>
       {%- endif -%}
       {%- if children -%}
         {{ children }}
diff --git a/templates/field/file-link.html.twig b/templates/field/file-link.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..891c7a124d3a4d739e080d30be49958c3e182259
--- /dev/null
+++ b/templates/field/file-link.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override for a link to a file.
+ *
+ * Available variables:
+ * - attributes: The HTML attributes for the containing element.
+ * - link: A link to the file.
+ * - icon: The icon image representing the file type. This seems to be always
+ *   empty.
+ * - file_size: The size of the file.
+ *
+ * @see template_preprocess_file_link()
+ * @see stable_preprocess_image_widget()
+ */
+#}
+{{ attach_library('classy/file') }}
+<span{{ attributes }}>{{ link }} <span class="file__size">({{ file_size }})</span></span>