From 3bb63fdf6ecadd9a9ba87d51710006598d995e3f Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Mon, 7 Oct 2019 17:00:48 +0300
Subject: [PATCH] Issue #3021094 by huzooka, lauriii, ckrina, fhaeberle,
 antonellasevero, jasonbarrie: File field style update

---
 claro.info.yml                                |   2 +
 claro.libraries.yml                           |  17 ++
 claro.theme                                   | 190 +++++++++++++++---
 css/src/base/variables.css                    |  14 +-
 css/src/components/action-link.css            | 128 +++++++++---
 css/src/components/ajax-progress.module.css   |  25 ++-
 css/src/components/button.css                 |  14 +-
 css/src/components/details.css                |  26 ++-
 css/src/components/dropbutton.css             |  36 ++--
 css/src/components/file.css                   |  18 ++
 css/src/components/form--managed-file.css     |  79 ++++++++
 css/src/components/form--select.css           |   9 +-
 css/src/components/form--text.css             |  44 +++-
 .../table--file-multiple-widget.css           | 107 ++++++++++
 css/src/components/tables.css                 |  15 +-
 images/src/checkmark.svg                      |   2 +-
 images/src/ex.svg                             |   2 +-
 images/src/hide.svg                           |   1 +
 images/src/show.svg                           |   1 +
 images/src/trash.svg                          |   2 +-
 js/claro.tabledrag.es6.js                     |  96 ++++++++-
 js/claro.tabledrag.js                         |  44 +++-
 .../content-edit/file-managed-file.html.twig  |  46 +++++
 .../file-widget-multiple.html.twig            |  19 ++
 templates/details.html.twig                   |   6 +-
 templates/field/file-link.html.twig           |  18 ++
 26 files changed, 851 insertions(+), 110 deletions(-)
 create mode 100644 css/src/components/file.css
 create mode 100644 css/src/components/form--managed-file.css
 create mode 100644 css/src/components/table--file-multiple-widget.css
 create mode 100644 images/src/hide.svg
 create mode 100644 images/src/show.svg
 create mode 100644 templates/content-edit/file-managed-file.html.twig
 create mode 100644 templates/content-edit/file-widget-multiple.html.twig
 create mode 100644 templates/field/file-link.html.twig

diff --git a/claro.info.yml b/claro.info.yml
index 2b3099a..13ff16a 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 f24e2fa..cbcbe27 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 26a36f1..8e09370 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 914e86a..3798ff4 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 80883d8..d85f3d4 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 ddf70c3..16eb94f 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 e425674..4f9614e 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 e3b65d8..8129c6f 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 b875384..8c4dbcf 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 0000000..2af4514
--- /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 0000000..7cebd2c
--- /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 0cac541..0eda9c6 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 439ad31..72292de 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 0000000..fca415c
--- /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 a3e8d6c..50f7f89 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 fb79f88..dcc3549 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 adba386..c73530a 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 0000000..83e8fc5
--- /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 0000000..56ae78f
--- /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 53e2d09..c0ec27d 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 70d92f2..161f770 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 86c5dab..ef37e23 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 0000000..ee0fbff
--- /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 0000000..606d983
--- /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 2bfcd1c..88f72ee 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 0000000..891c7a1
--- /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>
-- 
GitLab