diff --git a/core/.stylelintignore b/core/.stylelintignore
new file mode 100644
index 0000000000000000000000000000000000000000..d70b0031c42dd2af4b0ccc5545b02eab9c85c36d
--- /dev/null
+++ b/core/.stylelintignore
@@ -0,0 +1,2 @@
+themes/claro/**/*.css
+!themes/claro/**/*.pcss.css
diff --git a/core/composer.json b/core/composer.json
index 184c999b61727c667edfbc5b1c4c6142fc790b84..e64836bc5b5b5e3164f746af954c22dbda2099bf 100644
--- a/core/composer.json
+++ b/core/composer.json
@@ -65,6 +65,7 @@
"drupal/book": "self.version",
"drupal/breakpoint": "self.version",
"drupal/ckeditor": "self.version",
+ "drupal/claro": "self.version",
"drupal/classy": "self.version",
"drupal/color": "self.version",
"drupal/comment": "self.version",
diff --git a/core/modules/shortcut/shortcut.install b/core/modules/shortcut/shortcut.install
index 21ebf51942245a952cb43bf2cb83006f3b2fad64..ba1c700551315b3897531cc20676438c13098d0e 100644
--- a/core/modules/shortcut/shortcut.install
+++ b/core/modules/shortcut/shortcut.install
@@ -52,8 +52,13 @@ function shortcut_schema() {
function shortcut_install() {
// Theme settings are not configuration entities and cannot depend on modules
// so to set a module-specific setting, we need to set it with logic.
- if (\Drupal::service('theme_handler')->themeExists('seven')) {
- \Drupal::configFactory()->getEditable('seven.settings')->set('third_party_settings.shortcut.module_link', TRUE)->save(TRUE);
+ foreach (['seven', 'claro'] as $theme) {
+ if (\Drupal::service('theme_handler')->themeExists($theme)) {
+ \Drupal::configFactory()
+ ->getEditable("$theme.settings")
+ ->set('third_party_settings.shortcut.module_link', TRUE)
+ ->save(TRUE);
+ }
}
}
@@ -63,7 +68,12 @@ function shortcut_install() {
function shortcut_uninstall() {
// Theme settings are not configuration entities and cannot depend on modules
// so to unset a module-specific setting, we need to unset it with logic.
- if (\Drupal::service('theme_handler')->themeExists('seven')) {
- \Drupal::configFactory()->getEditable('seven.settings')->clear('third_party_settings.shortcut')->save(TRUE);
+ foreach (['seven', 'claro'] as $theme) {
+ if (\Drupal::service('theme_handler')->themeExists($theme)) {
+ \Drupal::configFactory()
+ ->getEditable("$theme.settings")
+ ->clear('third_party_settings.shortcut')
+ ->save(TRUE);
+ }
}
}
diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module
index 1b281b2b02b15f2849bea65b64879dd96d86828c..1c5e74b7f7e40b9281e43f6490a4d22047c043fd 100644
--- a/core/modules/shortcut/shortcut.module
+++ b/core/modules/shortcut/shortcut.module
@@ -435,11 +435,13 @@ function shortcut_toolbar() {
* Implements hook_themes_installed().
*/
function shortcut_themes_installed($theme_list) {
- if (in_array('seven', $theme_list)) {
- // Theme settings are not configuration entities and cannot depend on modules
- // so to set a module-specific setting, we need to set it with logic.
- if (\Drupal::moduleHandler()->moduleExists('shortcut')) {
- \Drupal::configFactory()->getEditable('seven.settings')->set('third_party_settings.shortcut.module_link', TRUE)->save(TRUE);
+ // Theme settings are not configuration entities and cannot depend on modules
+ // so to set a module-specific setting, we need to set it with logic.
+ foreach (['seven', 'claro'] as $theme) {
+ if (in_array($theme, $theme_list, TRUE)) {
+ \Drupal::configFactory()->getEditable("$theme.settings")
+ ->set('third_party_settings.shortcut.module_link', TRUE)
+ ->save(TRUE);
}
}
}
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroBlockFilterTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroBlockFilterTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..e456ecbefab169fa59c0a5be1e4092c6859ba856
--- /dev/null
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroBlockFilterTest.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\block\FunctionalJavascript\BlockFilterTest;
+
+/**
+ * Runs BlockFilterTest in Claro.
+ *
+ * @group block
+ *
+ * @see \Drupal\Tests\block\FunctionalJavascript\BlockFilterTest.
+ */
+class ClaroBlockFilterTest extends BlockFilterTest {
+
+ /**
+ * Modules to enable.
+ *
+ * Install the shortcut module so that claro.settings has its schema checked.
+ * There's currently no way for Claro to provide a default and have valid
+ * configuration as themes cannot react to a module install.
+ *
+ * @var string[]
+ */
+ public static $modules = ['shortcut'];
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp() {
+ parent::setUp();
+ $this->container->get('theme_installer')->install(['claro']);
+ $this->config('system.theme')->set('default', 'claro')->save();
+ }
+
+}
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroEntityDisplayTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroEntityDisplayTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..3415765086dec54f10a1b3a6f82ebe458066c057
--- /dev/null
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroEntityDisplayTest.php
@@ -0,0 +1,116 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest;
+
+/**
+ * Runs EntityDisplayTest in Claro.
+ *
+ * @group claro
+ *
+ * @see \Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest.
+ */
+class ClaroEntityDisplayTest extends EntityDisplayTest {
+
+ /**
+ * Modules to enable.
+ *
+ * Install the shortcut module so that claro.settings has its schema checked.
+ * There's currently no way for Claro to provide a default and have valid
+ * configuration as themes cannot react to a module install.
+ *
+ * @var string[]
+ */
+ public static $modules = ['shortcut'];
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp() {
+ parent::setUp();
+ $this->container->get('theme_installer')->install(['claro']);
+ $this->config('system.theme')->set('default', 'claro')->save();
+ }
+
+ /**
+ * Copied from parent.
+ *
+ * This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testEntityForm()
+ * with a line changed to reflect row weight toggle being a link instead
+ * of a button.
+ */
+ public function testEntityForm() {
+ $this->drupalGet('entity_test/manage/1/edit');
+ $this->assertSession()->fieldExists('field_test_text[0][value]');
+
+ $this->drupalGet('entity_test/structure/entity_test/form-display');
+ $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
+ $this->getSession()->getPage()->clickLink('Show row weights');
+ $this->assertSession()->waitForElementVisible('css', '[name="fields[field_test_text][region]"]');
+ $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'hidden');
+ $this->assertSession()->assertWaitOnAjaxRequest();
+ $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
+
+ $this->submitForm([], 'Save');
+ $this->assertSession()->pageTextContains('Your settings have been saved.');
+ $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
+
+ $this->drupalGet('entity_test/manage/1/edit');
+ $this->assertSession()->fieldNotExists('field_test_text[0][value]');
+ }
+
+ /**
+ * Copied from parent.
+ *
+ * This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testEntityView()
+ * with a line changed to reflect row weight toggle being a link instead
+ * of a button.
+ */
+ public function testEntityView() {
+ $this->drupalGet('entity_test/1');
+ $this->assertSession()->elementNotExists('css', '.field--name-field-test-text');
+
+ $this->drupalGet('entity_test/structure/entity_test/display');
+ $this->assertSession()->elementExists('css', '.region-content-message.region-empty');
+ $this->getSession()->getPage()->clickLink('Show row weights');
+ $this->assertSession()->waitForElementVisible('css', '[name="fields[field_test_text][region]"]');
+ $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
+
+ $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'content');
+ $this->assertSession()->assertWaitOnAjaxRequest();
+ $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
+
+ $this->submitForm([], 'Save');
+ $this->assertSession()->pageTextContains('Your settings have been saved.');
+ $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
+
+ $this->drupalGet('entity_test/1');
+ $this->assertSession()->elementExists('css', '.field--name-field-test-text');
+ }
+
+ /**
+ * Copied from parent.
+ *
+ * This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testExtraFields()
+ * with a line changed to reflect Claro's tabledrag selector.
+ */
+ public function testExtraFields() {
+ entity_test_create_bundle('bundle_with_extra_fields');
+ $this->drupalGet('entity_test/structure/bundle_with_extra_fields/display');
+ $this->assertSession()->waitForElement('css', '.tabledrag-handle');
+ $id = $this->getSession()->getPage()->find('css', '[name="form_build_id"]')->getValue();
+
+ $extra_field_row = $this->getSession()->getPage()->find('css', '#display-extra-field');
+ $disabled_region_row = $this->getSession()->getPage()->find('css', '.region-hidden-title');
+
+ $extra_field_row->find('css', '.js-tabledrag-handle')->dragTo($disabled_region_row);
+ $this->assertSession()->assertWaitOnAjaxRequest();
+ $this->assertSession()
+ ->waitForElement('css', "[name='form_build_id']:not([value='$id'])");
+
+ $this->submitForm([], 'Save');
+ $this->assertSession()->pageTextContains('Your settings have been saved.');
+ }
+
+}
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroMenuUiJavascriptTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroMenuUiJavascriptTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..500c239aaaa684a480a63fcee38258bcf1b8ebf7
--- /dev/null
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroMenuUiJavascriptTest.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\menu_ui\FunctionalJavascript\MenuUiJavascriptTest;
+
+/**
+ * Runs MenuUiJavascriptTest in Claro.
+ *
+ * @group claro
+ *
+ * @see \Drupal\Tests\menu_ui\FunctionalJavascript\MenuUiJavascriptTest;
+ */
+class ClaroMenuUiJavascriptTest extends MenuUiJavascriptTest {
+
+ /**
+ * {@inheritdoc}
+ */
+ protected static $modules = [
+ 'shortcut',
+ ];
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp() {
+ parent::setUp();
+ $this->container->get('theme_installer')->install(['claro']);
+ $this->config('system.theme')->set('default', 'claro')->save();
+ }
+
+ /**
+ * Intentionally empty method.
+ *
+ * Contextual links do not work in admin themes, so this is empty to prevent
+ * this test running in the parent class.
+ */
+ public function testBlockContextualLinks() {
+ }
+
+}
diff --git a/core/tests/Drupal/FunctionalTests/Theme/ClaroTest.php b/core/tests/Drupal/FunctionalTests/Theme/ClaroTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..ad052c5c4150866e166a4e7aa034988110325dd6
--- /dev/null
+++ b/core/tests/Drupal/FunctionalTests/Theme/ClaroTest.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace Drupal\FunctionalTests\Theme;
+
+use Drupal\Tests\BrowserTestBase;
+
+/**
+ * Tests the Claro theme.
+ *
+ * @group claro
+ */
+class ClaroTest extends BrowserTestBase {
+
+ /**
+ * Modules to enable.
+ *
+ * Install the shortcut module so that claro.settings has its schema checked.
+ * There's currently no way for Claro to provide a default and have valid
+ * configuration as themes cannot react to a module install.
+ *
+ * @var string[]
+ */
+ public static $modules = ['shortcut'];
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setUp() {
+ parent::setUp();
+
+ $this->assertTrue(\Drupal::service('theme_installer')->install(['claro']));
+ $this->container->get('config.factory')
+ ->getEditable('system.theme')
+ ->set('default', 'claro')
+ ->save();
+ }
+
+ /**
+ * Tests that the Claro theme always adds its elements.css.
+ *
+ * @see claro.info.yml
+ */
+ public function testRegressionMissingElementsCss() {
+ $this->drupalGet('');
+ $this->assertSession()->statusCodeEquals(200);
+ $this->assertSession()->responseContains('claro/css/src/base/elements.css');
+
+ $this->drupalLogin($this->rootUser);
+ $this->drupalGet('admin/modules');
+ $this->assertSession()->elementNotExists('css', '#block-claro-help');
+
+ // Install the block module to ensure Claro's configuration is valid
+ // according to schema.
+ \Drupal::service('module_installer')->install(['block', 'help']);
+ $this->rebuildAll();
+
+ $this->drupalGet('admin/modules');
+ $this->assertSession()->elementExists('css', '#block-claro-help');
+ }
+
+ /**
+ * Tests that the Claro theme can be uninstalled, despite being experimental.
+ *
+ * @todo Remove in https://www.drupal.org/project/drupal/issues/3066007
+ */
+ public function testIsUninstallable() {
+ $this->drupalLogin($this->drupalCreateUser(['access administration pages', 'administer themes']));
+
+ $this->drupalGet('admin/appearance');
+ $this->cssSelect('a[title="Install Seven as default theme"]')[0]->click();
+ $this->cssSelect('a[title="Uninstall Claro theme"]')[0]->click();
+ $this->assertText('The Claro theme has been uninstalled.');
+ }
+
+}
diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
new file mode 100644
index 0000000000000000000000000000000000000000..55f43b606cd7c834ffef7caa516ad0045f5504b7
--- /dev/null
+++ b/core/themes/claro/claro.info.yml
@@ -0,0 +1,175 @@
+# This theme is marked as @internal. It is intended to evolve and change over
+# minor releases.
+# Change record https://www.drupal.org/node/2582945.
+# As the UI of Drupal improves between minor versions, the markup and assets
+# in the Claro theme will change. The Claro theme is not backwards compatible.
+# If you wish to modify the output or assets of Claro you can:
+# 1. Copy the whole of Claro and rename it as your own administration theme. You
+# will need to manually manage your own updates if you want to stay up to
+# date with Claro's bug fixes and feature support.
+#
+# 2. Sub-theme Claro. This is only recommended if you want to make minor tweaks
+# and understand that Claro could break your modifications as it changes.
+name: Claro
+type: theme
+base theme: classy
+description: 'A clean, accessible, and powerful Drupal administration theme.'
+alt text: 'Screenshot of Claro, Drupal administration theme.'
+package: Core
+version: VERSION
+experimental: true
+core: 8.x
+libraries:
+ - claro/global-styling
+libraries-override:
+ system/base:
+ css:
+ component:
+ /core/themes/stable/css/system/components/ajax-progress.module.css: css/src/components/ajax-progress.module.css
+ /core/themes/stable/css/system/components/autocomplete-loading.module.css: css/src/components/autocomplete-loading.module.css
+ /core/themes/stable/css/system/components/system-status-counter.css: css/src/components/system-status-counter.css
+ /core/themes/stable/css/system/components/system-status-report-counters.css: css/src/components/system-status-report-counters.css
+ /core/themes/stable/css/system/components/system-status-report-general-info.css: css/src/components/system-status-report-general-info.css
+ /core/themes/stable/css/system/components/tabledrag.module.css: css/src/components/tabledrag.css
+
+ system/admin:
+ css:
+ theme:
+ /core/themes/stable/css/system/system.admin.css: false
+
+ core/drupal.dropbutton:
+ css:
+ component:
+ /core/themes/stable/css/core/dropbutton/dropbutton.css: css/src/components/dropbutton.css
+
+ core/drupal.tabledrag:
+ js:
+ misc/tabledrag.js: js/tabledrag.js
+
+ core/drupal.vertical-tabs:
+ css:
+ component:
+ /core/themes/stable/css/core/vertical-tabs.css: false
+ js:
+ misc/vertical-tabs.js: js/vertical-tabs.js
+
+ core/jquery.ui:
+ css:
+ theme:
+ assets/vendor/jquery.ui/themes/base/theme.css: false
+
+ core/jquery.ui.dialog:
+ css:
+ component:
+ assets/vendor/jquery.ui/themes/base/dialog.css: false
+
+ classy/dialog: claro/claro.drupal.dialog
+
+ classy/base:
+ css:
+ component:
+ css/components/action-links.css: false
+ css/components/breadcrumb.css: false
+ css/components/button.css: false
+ css/components/details.css: false
+ css/components/dropbutton.css: false
+ css/components/form.css: false
+ css/components/tabs.css: false
+ css/components/pager.css: false
+ css/components/tableselect.css: css/src/components/tableselect.css
+ css/components/tabledrag.css: false
+ css/components/collapse-processed.css: false
+
+ classy/dropbutton:
+ css:
+ component:
+ css/components/dropbutton.css: false
+
+ classy/messages:
+ css:
+ component:
+ css/components/messages.css: false
+
+ classy/progress:
+ css:
+ component:
+ css/components/progress.css: css/src/components/progress.css
+ # @todo Refactor when https://www.drupal.org/node/2642122 is fixed.
+
+ classy/user: false
+
+ user/drupal.user: claro/form.password-confirm
+
+ field_ui/drupal.field_ui:
+ css:
+ theme:
+ /core/themes/stable/css/field_ui/field_ui.admin.css: css/src/theme/field-ui.admin.css
+
+ filter/drupal.filter.admin:
+ css:
+ theme:
+ /core/themes/stable/css/filter/filter.admin.css: css/src/theme/filter.theme.css
+
+ filter/drupal.filter:
+ css:
+ theme:
+ /core/themes/stable/css/filter/filter.admin.css: css/src/theme/filter.theme.css
+
+ views_ui/admin.styling:
+ css:
+ theme:
+ /core/themes/stable/css/views_ui/views_ui.admin.theme.css: css/src/theme/views_ui.admin.theme.css
+
+libraries-extend:
+ ckeditor/drupal.ckeditor:
+ - claro/ckeditor-editor
+ classy/image-widget:
+ - claro/image-widget
+ core/ckeditor:
+ - claro/ckeditor-dialog
+ core/drupal.collapse:
+ - claro/details-focus
+ core/drupal.dropbutton:
+ - claro/dropbutton
+ core/drupal.checkbox:
+ - claro/checkbox
+ core/drupal.message:
+ - claro/messages
+ core/drupal.vertical-tabs:
+ - claro/vertical-tabs
+ core/jquery.ui:
+ - claro/claro.jquery.ui
+ file/drupal.file:
+ - claro/file
+ system/admin:
+ - claro/system.admin
+ core/drupal.autocomplete:
+ - claro/autocomplete
+ tour/tour-styling:
+ - claro/tour-styling
+ shortcut/drupal.shortcut:
+ - claro/drupal.shortcut
+ core/drupal.ajax:
+ - claro/ajax
+ views/views.module:
+ - claro/views
+
+quickedit_stylesheets:
+ - css/src/components/quickedit.css
+ckeditor_stylesheets:
+ - css/src/base/elements.css
+ - css/src/base/typography.css
+ - css/src/theme/ckeditor-frame.css
+
+regions:
+ header: 'Header'
+ pre_content: 'Pre-content'
+ breadcrumb: Breadcrumb
+ highlighted: Highlighted
+ help: Help
+ content: Content
+ page_top: 'Page top'
+ page_bottom: 'Page bottom'
+ sidebar_first: 'First sidebar'
+regions_hidden:
+ - sidebar_first
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1ab96c8ca84dd04df8211651d2d482823c53b1e1
--- /dev/null
+++ b/core/themes/claro/claro.libraries.yml
@@ -0,0 +1,249 @@
+global-styling:
+ version: VERSION
+ css:
+ base:
+ css/src/base/elements.css: {}
+ css/src/base/typography.css: {}
+ css/src/base/print.css: {}
+ component:
+ css/src/components/accordion.css: {}
+ css/src/components/action-link.css: {}
+ css/src/components/content-header.css: {}
+ css/src/components/container-inline.css: {}
+ css/src/components/container-inline.module.css: {}
+ css/src/components/breadcrumb.css: {}
+ css/src/components/button.css: {}
+ css/src/components/details.css: {}
+ css/src/components/divider.css: {}
+ css/src/components/messages.css: {}
+ css/src/components/entity-meta.css: {}
+ css/src/components/fieldset.css: {}
+ css/src/components/form.css: {}
+ css/src/components/form--checkbox-radio.css: {}
+ css/src/components/form--checkbox-radio--ie.css: {}
+ css/src/components/form--field-multiple.css: {}
+ css/src/components/form--managed-file.css: {}
+ css/src/components/form--text.css: {}
+ css/src/components/form--select.css: {}
+ css/src/components/help.css: {}
+ css/src/components/image-preview.css: {}
+ css/src/components/menus-and-lists.css: {}
+ css/src/components/modules-page.css: {}
+ css/src/components/node.css: {}
+ css/src/components/page-title.css: {}
+ css/src/components/pager.css: {}
+ css/src/components/skip-link.css: {}
+ css/src/components/tables.css: {}
+ css/src/components/table--file-multiple-widget.css: {}
+ css/src/components/search-admin-settings.css: {}
+ css/src/components/tablesort-indicator.css: {}
+ css/src/components/system-status-report-general-info.css: {}
+ css/src/components/system-status-report.css: {}
+ css/src/components/system-status-report-counters.css: {}
+ css/src/components/system-status-counter.css: {}
+ css/src/components/tabs.css: {}
+ css/src/components/views-ui.css: {}
+ theme:
+ css/src/theme/colors.css: {}
+ layout:
+ css/src/layout/breadcrumb.css: {}
+ css/src/layout/local-actions.css: {}
+ css/src/layout/layout.css: {}
+ dependencies:
+ - 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
+
+node-form:
+ version: VERSION
+ css:
+ layout:
+ css/src/layout/node-add.css: {}
+ dependencies:
+ - node/form
+
+maintenance-page:
+ version: VERSION
+ js:
+ js/mobile.install.js: {}
+ css:
+ theme:
+ css/src/theme/maintenance-page.css: {}
+ dependencies:
+ - system/maintenance
+ - claro/global-styling
+
+install-page:
+ version: VERSION
+ js:
+ js/mobile.install.js: {}
+ css:
+ theme:
+ css/src/theme/install-page.css: {}
+ dependencies:
+ - claro/maintenance-page
+
+drupal.nav-tabs:
+ version: VERSION
+ js:
+ js/nav-tabs.js: {}
+ dependencies:
+ - core/matchmedia
+ - core/jquery
+ - core/drupal
+ - core/jquery.once
+ - core/drupal.debounce
+ - core/collapse
+
+drupal.responsive-detail:
+ version: VERSION
+ js:
+ js/responsive-details.js: {}
+ dependencies:
+ - core/matchmedia
+ - core/matchmedia.addListener
+ - core/jquery
+ - core/jquery.once
+ - core/collapse
+
+claro.jquery.ui:
+ version: VERSION
+ css:
+ component:
+ css/src/components/jquery.ui/theme.css: { weight: -1 }
+
+claro.drupal.dialog:
+ version: VERSION
+ css:
+ theme:
+ css/src/components/dialog.css: {}
+
+ckeditor-dialog:
+ version: VERSION
+ css:
+ theme:
+ css/src/theme/ckeditor-dialog.css: {}
+
+ckeditor-editor:
+ version: VERSION
+ css:
+ theme:
+ css/src/theme/ckeditor-editor.css: {}
+
+tour-styling:
+ version: VERSION
+ css:
+ theme:
+ css/src/components/tour.theme.css: {}
+
+media-form:
+ version: VERSION
+ css:
+ layout:
+ css/src/components/media.css: {}
+ dependencies:
+ - media/form
+
+image-widget:
+ version: VERSION
+ css:
+ component:
+ css/src/layout/image-widget.css: {}
+
+system.admin:
+ version: VERSION
+ css:
+ component:
+ css/src/components/system-admin--admin-list.css: { weight: -10 }
+ css/src/components/system-admin--links.css: { weight: -10 }
+ css/src/components/system-admin--modules.css: { weight: -10 }
+ css/src/components/system-admin--panel.css: { weight: -10 }
+ css/src/components/system-admin--status-report.css: { weight: -10 }
+ layout:
+ css/src/layout/system-admin--layout.css: { weight: -10 }
+ dependencies:
+ - claro/card
+
+checkbox:
+ version: VERSION
+ js:
+ js/checkbox.js: {}
+ dependencies:
+ - core/drupal
+
+dropbutton:
+ version: VERSION
+ js:
+ js/dropbutton.js: {}
+ dependencies:
+ - core/drupal
+
+autocomplete:
+ version: VERSION
+ js:
+ js/autocomplete.js: {}
+
+drupal.shortcut:
+ version: VERSION
+ css:
+ # @todo move this to components after
+ # https://www.drupal.org/project/drupal/issues/3045467 is in.
+ theme:
+ css/src/components/shortcut.css: {}
+
+details-focus:
+ js:
+ js/details.js: {}
+
+ajax:
+ js:
+ js/ajax.js: {}
+
+form.password-confirm:
+ css:
+ component:
+ css/src/components/form--password-confirm.css: {}
+ js:
+ js/user.js: {}
+ dependencies:
+ - core/jquery
+ - core/drupal
+ - core/jquery.once
+ - claro/global-styling
+
+views:
+ css:
+ component:
+ css/src/components/views-exposed-form.css: {}
+
+messages:
+ js:
+ js/messages.js: {}
+
+card:
+ css:
+ component:
+ css/src/layout/card-list.css: {}
+ css/src/components/card.css: {}
+
+vertical-tabs:
+ css:
+ component:
+ css/src/components/vertical-tabs.css: {}
+ dependencies:
+ - claro/global-styling
+
+file:
+ css:
+ component:
+ css/src/components/file.css: {}
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
new file mode 100644
index 0000000000000000000000000000000000000000..ccd1f348c4060ffb2135db1d62a4c8d280f4ecc1
--- /dev/null
+++ b/core/themes/claro/claro.theme
@@ -0,0 +1,1192 @@
+<?php
+
+/**
+ * @file
+ * Functions to support theming in the Claro theme.
+ */
+
+use Drupal\claro\ClaroPreRender;
+use Drupal\Component\Utility\Html;
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Component\Utility\UrlHelper;
+use Drupal\Core\Entity\EntityForm;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\GeneratedLink;
+use Drupal\Core\Link;
+use Drupal\Core\Render\Element;
+use Drupal\Core\Template\Attribute;
+use Drupal\Core\Url;
+use Drupal\media\MediaForm;
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for form_element.
+ */
+function claro_theme_suggestions_form_element_alter(&$suggestions, $variables) {
+ if (!empty($variables['element']['#type'])) {
+ $suggestions[] = 'form_element__' . $variables['element']['#type'];
+ }
+}
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for details.
+ */
+function claro_theme_suggestions_details_alter(&$suggestions, $variables) {
+ if (!empty($variables['element']['#vertical_tab_item'])) {
+ $suggestions[] = 'details__vertical_tabs';
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-tasks templates.
+ *
+ * Use preprocess hook to set #attached to child elements
+ * because they will be processed by Twig and drupal_render will
+ * be invoked.
+ */
+function claro_preprocess_menu_local_tasks(&$variables) {
+ if (!empty($variables['primary'])) {
+ $variables['primary']['#attached'] = [
+ 'library' => [
+ 'claro/drupal.nav-tabs',
+ ],
+ ];
+ }
+ elseif (!empty($variables['secondary'])) {
+ $variables['secondary']['#attached'] = [
+ 'library' => [
+ 'claro/drupal.nav-tabs',
+ ],
+ ];
+ }
+
+ foreach (Element::children($variables['primary']) as $key) {
+ $variables['primary'][$key]['#level'] = 'primary';
+ }
+ foreach (Element::children($variables['secondary']) as $key) {
+ $variables['secondary'][$key]['#level'] = 'secondary';
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-task templates.
+ */
+function claro_preprocess_menu_local_task(&$variables) {
+ $variables['link']['#options']['attributes']['class'][] = 'tabs__link';
+ $variables['link']['#options']['attributes']['class'][] = 'js-tabs-link';
+
+ // Ensure is-active class is set when the tab is active. The generic active
+ // link handler applies stricter comparison rules than what is necessary for
+ // tabs.
+ if (isset($variables['is_active']) && $variables['is_active'] === TRUE) {
+ $variables['link']['#options']['attributes']['class'][] = 'is-active';
+ }
+
+ if (isset($variables['element']['#level'])) {
+ $variables['level'] = $variables['element']['#level'];
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-task Views UI templates.
+ */
+function claro_preprocess_menu_local_task__views_ui(&$variables) {
+ // Remove 'tabs__link' without adding a new class because it couldn't be used
+ // reliably.
+ // @see https://www.drupal.org/node/3051605
+ $link_class_index = array_search('tabs__link', $variables['link']['#options']['attributes']['class']);
+ if ($link_class_index !== FALSE) {
+ unset($variables['link']['#options']['attributes']['class'][$link_class_index]);
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for node_add_list.
+ *
+ * Makes node_add_list variables compatible with entity_add_list.
+ */
+function claro_preprocess_node_add_list(&$variables) {
+ if (!empty($variables['content'])) {
+ /** @var \Drupal\node\NodeTypeInterface $type */
+ foreach ($variables['content'] as $type) {
+ $label = $type->label();
+ $description = $type->getDescription();
+ $type_id = $type->id();
+ $add_url = Url::fromRoute('node.add', ['node_type' => $type_id]);
+ $variables['bundles'][$type_id] = [
+ 'label' => $label,
+ 'add_link' => Link::fromTextAndUrl($label, $add_url),
+ 'description' => [],
+ ];
+ if (!empty($description)) {
+ $variables['bundles'][$type_id]['description'] = [
+ '#markup' => $description,
+ ];
+ }
+ }
+ $variables['attributes']['class'][] = 'node-type-list';
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for block_content_add_list.
+ *
+ * Makes block_content_add_list variables compatible with entity_add_list.
+ */
+function claro_preprocess_block_content_add_list(&$variables) {
+ if (!empty($variables['content'])) {
+ $query = \Drupal::request()->query->all();
+ /** @var \Drupal\block_content\BlockContentTypeInterface $type */
+ foreach ($variables['content'] as $type) {
+ $label = $type->label();
+ $description = $type->getDescription();
+ $type_id = $type->id();
+ $add_url = Url::fromRoute('block_content.add_form', [
+ 'block_content_type' => $type_id,
+ ], [
+ 'query' => $query,
+ ]);
+ $variables['bundles'][$type_id] = [
+ 'label' => $label,
+ 'add_link' => Link::fromTextAndUrl($label, $add_url),
+ 'description' => [],
+ ];
+
+ if (!empty($description)) {
+ $variables['bundles'][$type_id]['description'] = [
+ '#markup' => $description,
+ ];
+ }
+ }
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for entity_add_list.
+ */
+function claro_preprocess_entity_add_list(&$variables) {
+ // Remove description if empty.
+ foreach ($variables['bundles'] as $type_id => $values) {
+ if (isset($values['description']['#markup']) && empty($values['description']['#markup'])) {
+ $variables['bundles'][$type_id]['description'] = [];
+ }
+ }
+}
+
+/**
+ * Implements hook_preprocess_block() for block content.
+ *
+ * Disables contextual links for all blocks.
+ */
+function claro_preprocess_block(&$variables) {
+ if (isset($variables['title_suffix']['contextual_links'])) {
+ unset($variables['title_suffix']['contextual_links']);
+ unset($variables['elements']['#contextual_links']);
+
+ $variables['attributes']['class'] = array_diff($variables['attributes']['class'], ['contextual-region']);
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for admin_block.
+ */
+function claro_preprocess_admin_block(&$variables) {
+ if (!empty($variables['block']['content'])) {
+ $variables['block']['content']['#attributes']['class'][] = 'admin-list--panel';
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for admin_block.
+ */
+function claro_preprocess_admin_block_content(&$variables) {
+ foreach ($variables['content'] as &$item) {
+ $link_attributes = $item['url']->getOption('attributes') ?: [];
+ $link_attributes['class'][] = 'admin-item__link';
+ $item['url']->setOption('attributes', $link_attributes);
+ $item['link'] = Link::fromTextAndUrl($item['title'], $item['url']);
+
+ if (empty($item['description']) || empty($item['description']['#markup'])) {
+ unset($item['description']);
+ }
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-action templates.
+ */
+function claro_preprocess_menu_local_action(array &$variables) {
+ $variables['link']['#options']['attributes']['class'][] = 'button--primary';
+ $variables['attributes']['class'][] = 'local-actions__item';
+ $legacy_class_key = array_search('button-action', $variables['link']['#options']['attributes']['class']);
+
+ if ($legacy_class_key !== FALSE) {
+ $variables['link']['#options']['attributes']['class'][$legacy_class_key] = 'button--action';
+ }
+}
+
+/**
+ * Implements hook_element_info_alter().
+ */
+function claro_element_info_alter(&$type) {
+ // 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'])) {
+ $container_pre_renders = !empty($type['container']['#pre_render']) ? $type['container']['#pre_render'] : [];
+ array_unshift($container_pre_renders, [ClaroPreRender::class, 'container']);
+
+ $type['container']['#pre_render'] = $container_pre_renders;
+ }
+
+ // @todo Refactor when https://www.drupal.org/node/3016343 is fixed.
+ if (isset($type['text_format'])) {
+ $type['text_format']['#pre_render'][] = [ClaroPreRender::class, 'textFormat'];
+ }
+
+ // Add a pre-render function that handles dropbutton variants.
+ if (isset($type['dropbutton'])) {
+ $type['dropbutton']['#pre_render'][] = [ClaroPreRender::class, 'dropButton'];
+ }
+
+ if (isset($type['vertical_tabs'])) {
+ $type['vertical_tabs']['#pre_render'][] = [ClaroPreRender::class, 'verticalTabs'];
+ }
+
+ // Add a pre-render to managed_file.
+ if (isset($type['managed_file'])) {
+ $type['managed_file']['#pre_render'][] = [ClaroPreRender::class, 'managedFile'];
+ }
+}
+
+/**
+ * Implements template_preprocess_filter_guidelines().
+ */
+function claro_preprocess_filter_guidelines(&$variables) {
+ // Fix filter guidelines selector issue of 'filter/drupal.filter'.
+ // @todo Remove when https://www.drupal.org/node/2881212 is fixed.
+ $variables['attributes']['class'][] = 'filter-guidelines-item';
+ $variables['attributes']['class'][] = 'filter-guidelines-' . $variables['format']->id();
+}
+
+/**
+ * Implements template_preprocess_text_format_wrapper().
+ *
+ * @todo Remove when https://www.drupal.org/node/3016343 is fixed.
+ */
+function claro_preprocess_text_format_wrapper(&$variables) {
+ $description_attributes = [];
+ if (!empty($variables['attributes']['id'])) {
+ $description_attributes['id'] = $variables['attributes']['aria-describedby'] = $variables['attributes']['id'];
+ unset($variables['attributes']['id']);
+ }
+ $variables['description_attributes'] = new Attribute($description_attributes);
+}
+
+/**
+ * Implements hook_theme_registry_alter().
+ */
+function claro_theme_registry_alter(&$theme_registry) {
+ if (!empty($theme_registry['admin_block_content'])) {
+ $theme_registry['admin_block_content']['variables']['attributes'] = [];
+ }
+
+ // @todo Remove when https://www.drupal.org/node/3016346 is fixed.
+ if (!empty($theme_registry['text_format_wrapper'])) {
+ $theme_registry['text_format_wrapper']['variables']['disabled'] = FALSE;
+ }
+}
+
+/**
+ * Implements hook_preprocess_install_page().
+ */
+function claro_preprocess_install_page(&$variables) {
+ // Claro has custom styling for the install page.
+ $variables['#attached']['library'][] = 'claro/install-page';
+}
+
+/**
+ * Implements hook_preprocess_maintenance_page().
+ */
+function claro_preprocess_maintenance_page(&$variables) {
+ // Claro has custom styling for the maintenance page.
+ $variables['#attached']['library'][] = 'claro/maintenance-page';
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for details.
+ *
+ * @todo Revisit when https://www.drupal.org/node/3056089 is in.
+ */
+function claro_preprocess_details(&$variables) {
+ $element = $variables['element'];
+
+ if (!empty($element['#accordion_item'])) {
+ // Details should appear as an accordion item.
+ $variables['accordion_item'] = TRUE;
+ }
+
+ if (!empty($element['#accordion'])) {
+ // 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']);
+}
+
+/**
+ * Implements hook_form_alter().
+ */
+function claro_form_alter(&$form, FormStateInterface $form_state) {
+ $build_info = $form_state->getBuildInfo();
+
+ // 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', 'default', 'danger');
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for links.
+ */
+function claro_preprocess_links(&$variables) {
+ foreach ($variables['links'] as $links_item) {
+ if (!empty($links_item['link']) && !empty($links_item['link']['#url']) && $links_item['link']['#url'] instanceof Url) {
+ 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', 'small');
+ break;
+
+ case 'system.theme_uninstall':
+ $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', 'small');
+ break;
+ }
+ }
+ }
+ }
+}
+
+/**
+ * Converts a link render element to an action link.
+ *
+ * This helper merges every attributes from $link['#attributes'], from
+ * $link['#options']['attributes'] and from the Url object's.
+ *
+ * @param array $link
+ * Link renderable array.
+ * @param string|null $icon_name
+ * The name of the needed icon. When specified, a CSS class will be added with
+ * the following pattern: 'action-link--icon-[icon_name]'. If the needed icon
+ * is not implemented in CSS, no icon will be added.
+ * Currently available icons are:
+ * - checkmark,
+ * - cog,
+ * - ex,
+ * - plus,
+ * - trash.
+ * @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'.
+ *
+ * @return array
+ * The link renderable converted to action link.
+ */
+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;
+ }
+
+ // \Drupal\Core\Render\Element\Link::preRenderLink adds $link['#attributes']
+ // to $link[#options]['attributes'] if it is not empty, but it does not merges
+ // the 'class' subkey deeply.
+ // Because of this, when $link[#options]['attributes']['class'] is set, the
+ // classes defined in $link['#attributes']['class'] are ignored.
+ //
+ // To keep this behavior we repeat this for action-link, which means that this
+ // conversion happens a bit earlier. We unset $link['#attributes'] to prevent
+ // Link::preRenderLink() doing the same, because for action-links, that would
+ // be needless.
+ $link += ['#options' => []];
+ if (isset($link['#attributes'])) {
+ $link['#options'] += [
+ 'attributes' => [],
+ ];
+ $link['#options']['attributes'] += $link['#attributes'];
+ unset($link['#attributes']);
+ }
+ $link['#options'] += ['attributes' => []];
+ $link['#options']['attributes'] += ['class' => []];
+
+ // Determine the needed (type) variant.
+ $variants_supported = ['default', 'danger'];
+ $variant = is_string($variant) && in_array($variant, $variants_supported) ? $variant : reset($variants_supported);
+
+ // Remove button, button modifier CSS classes and other unwanted ones.
+ $link['#options']['attributes']['class'] = array_diff($link['#options']['attributes']['class'], [
+ 'button',
+ 'button--action',
+ 'button--primary',
+ 'button--danger',
+ 'button--small',
+ 'button--extrasmall',
+ 'link',
+ ]);
+
+ // Adding the needed CSS classes.
+ $link['#options']['attributes']['class'][] = 'action-link';
+
+ // Add the variant-modifier CSS class only if the variant is not the default.
+ if ($variant !== reset($variants_supported)) {
+ $link['#options']['attributes']['class'][] = Html::getClass("action-link--$variant");
+ }
+
+ // Add the icon modifier CSS class.
+ if (!empty($icon_name)) {
+ $link['#options']['attributes']['class'][] = Html::getClass("action-link--icon-$icon_name");
+ }
+
+ 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
+ // the attributes of the Url object are processed during rendering.
+ $url_attributes = $link['#url']->getOption('attributes') ?: [];
+ $url_attributes = NestedArray::mergeDeep($url_attributes, $link['#options']['attributes']);
+ $link['#url']->setOption('attributes', $url_attributes);
+
+ return $link;
+}
+
+/**
+ * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\node\NodeForm.
+ *
+ * Changes vertical tabs to container.
+ */
+function claro_form_node_form_alter(&$form, FormStateInterface $form_state) {
+ $form['#theme'] = ['node_edit_form'];
+ $form['#attached']['library'][] = 'claro/node-form';
+
+ $form['advanced']['#type'] = 'container';
+ $form['advanced']['#accordion'] = TRUE;
+ $form['meta']['#type'] = 'container';
+ $form['meta']['#access'] = TRUE;
+
+ $form['revision_information']['#type'] = 'container';
+ $form['revision_information']['#group'] = 'meta';
+ $form['revision_information']['#attributes']['class'][] = 'entity-meta__revision';
+}
+
+/**
+ * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\media\MediaForm.
+ */
+function claro_form_media_form_alter(&$form, FormStateInterface $form_state) {
+ // Only attach CSS from core if this form comes from Media core, and not from
+ // the contrib Media Entity 1.x branch.
+ if (\Drupal::moduleHandler()->moduleExists('media') && $form_state->getFormObject() instanceof MediaForm) {
+ // @todo Revisit after https://www.drupal.org/node/2892304 is in. It
+ // introduces a footer region to these forms which will allow for us to
+ // display a top border over the published checkbox by defining a
+ // media-edit-form.html.twig template the same way node does.
+ $form['#attached']['library'][] = 'claro/media-form';
+ }
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter() for view_edit_form.
+ */
+function claro_form_view_edit_form_alter(&$form, FormStateInterface $form_state) {
+ // @todo remove this after https://www.drupal.org/node/3051605 has been
+ // solved.
+ $form['displays']['top']['tabs']['#prefix'] = preg_replace('/(class="(.+\s)?)tabs(\s.+"|")/', '$1views-tabs$3', $form['displays']['top']['tabs']['#prefix']);
+ $form['displays']['top']['tabs']['#prefix'] = preg_replace('/(class="(.+\s)?)secondary(\s.+"|")/', '$1views-tabs--secondary$3', $form['displays']['top']['tabs']['#prefix']);
+
+ foreach (Element::children($form['displays']['top']['tabs']) as $tab) {
+ $form['displays']['top']['tabs'][$tab]['#theme'] = 'menu_local_task__views_ui';
+ }
+
+ if (!empty($form['displays'])) {
+ // Change top extra actions to use the small dropbutton variant.
+ // @todo Revisit after https://www.drupal.org/node/3057581 is added.
+ if (!empty($form['displays']['top']['extra_actions'])) {
+ $form['displays']['top']['extra_actions']['#dropbutton_type'] = 'small';
+ }
+
+ // We process the dropbutton-like element on views edit form's
+ // display settings top section.
+ //
+ // That element should be a regular Dropbutton.
+ //
+ // After that the reported issue is fixed and the element is rendered with
+ // the Dropbutton type, we just have to set it's '#dropbutton_type' to
+ // 'extrasmall'.
+ //
+ // @todo: revisit after https://www.drupal.org/node/3057577 is fixed.
+ $dummy_dropbutton = &$form['displays']['settings']['settings_content']['tab_content']['details']['top']['actions'];
+
+ if ($dummy_dropbutton) {
+ $child_keys = Element::children($dummy_dropbutton);
+ $prefix_regex = '/(<.*class\s*= *["\']?)([^"\']*)(.*)/i';
+ $child_count = 0;
+
+ foreach ($child_keys as $key) {
+ if (in_array($key, ['prefix', 'suffix'])) {
+ continue;
+ }
+ $nested_child_keys = Element::children($dummy_dropbutton[$key], TRUE);
+
+ if (!empty($nested_child_keys)) {
+ foreach ($nested_child_keys as $nested_key) {
+ $child_count++;
+ $prefix = $dummy_dropbutton[$key][$nested_key]['#prefix'];
+ $dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
+ }
+ }
+ else {
+ $child_count++;
+ $prefix = $dummy_dropbutton[$key]['#prefix'];
+ $dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
+ }
+ }
+
+ if (!empty($dummy_dropbutton['prefix']) && !empty($dummy_dropbutton['prefix']['#markup'])) {
+ $classes = 'dropbutton--extrasmall ';
+ $classes .= ($child_count > 1) ? 'dropbutton--multiple' : 'dropbutton--single';
+ $prefix = $dummy_dropbutton['prefix']['#markup'];
+ $dummy_dropbutton['prefix']['#markup'] = preg_replace($prefix_regex, '$1$2 ' . $classes . '$3', $prefix);
+ }
+ }
+ }
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter() for views_exposed_form.
+ */
+function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_state) {
+ $view = $form_state->getStorage()['view'];
+ $view_title = $view->getTitle();
+
+ // Add BEM classes for items in the form.
+ // Sorted keys.
+ $child_keys = Element::children($form, TRUE);
+ $last_key = NULL;
+ $child_before_actions_key = NULL;
+
+ foreach ($child_keys as $child_key) {
+ if (!empty($form[$child_key]['#type'])) {
+ if ($form[$child_key]['#type'] === 'actions') {
+ // We need the key of the element that precedes the actions element.
+ $child_before_actions_key = $last_key;
+ $form[$child_key]['#attributes']['class'][] = 'views-exposed-form__item';
+ $form[$child_key]['#attributes']['class'][] = 'views-exposed-form__item--actions';
+ }
+
+ if (!in_array($form[$child_key]['#type'], ['hidden', 'actions'])) {
+ $form[$child_key]['#wrapper_attributes']['class'][] = 'views-exposed-form__item';
+ $last_key = $child_key;
+ }
+ }
+ }
+
+ if ($child_before_actions_key) {
+ // Add a modifier class to the item that precedes the form actions.
+ $form[$child_before_actions_key]['#wrapper_attributes']['class'][] = 'views-exposed-form__item--preceding-actions';
+ }
+
+ // Add a label so screenreaders can identify the purpose of the exposed form
+ // without having to scan content that appears further down the page.
+ $form['#attributes']['aria-label'] = t('Filter the contents of the %view_title view', ['%view_title' => $view_title]);
+}
+
+/**
+ * Implements hook_preprocess_form_element().
+ */
+function claro_preprocess_form_element(&$variables) {
+ if (!empty($variables['element']['#errors'])) {
+ $variables['label']['#attributes']['class'][] = 'has-error';
+ }
+
+ if ($variables['disabled']) {
+ $variables['label']['#attributes']['class'][] = 'is-disabled';
+
+ if (!empty($variables['description']['attributes'])) {
+ $variables['description']['attributes']->addClass('is-disabled');
+ }
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for input.
+ */
+function claro_preprocess_input(&$variables) {
+ if (
+ !empty($variables['element']['#title_display']) &&
+ $variables['element']['#title_display'] === 'attribute' &&
+ !empty((string) $variables['element']['#title'])
+ ) {
+ $variables['attributes']['title'] = (string) $variables['element']['#title'];
+ }
+
+ $type_api = $variables['element']['#type'];
+ $type_html = $variables['attributes']['type'];
+ $text_types_html = [
+ 'text',
+ 'email',
+ 'tel',
+ 'number',
+ 'search',
+ 'password',
+ 'date',
+ 'time',
+ 'file',
+ 'color',
+ 'datetime-local',
+ 'url',
+ 'month',
+ 'week',
+ ];
+
+ if (in_array($type_html, $text_types_html)) {
+ $variables['attributes']['class'][] = 'form-element';
+ $variables['attributes']['class'][] = Html::getClass('form-element--type-' . $type_html);
+ $variables['attributes']['class'][] = Html::getClass('form-element--api-' . $type_api);
+
+ if (!empty($variables['element']['#autocomplete_route_name'])) {
+ $variables['autocomplete_message'] = t('Loading…');
+ }
+ }
+
+ if (in_array($type_html, ['checkbox', 'radio'])) {
+ $variables['attributes']['class'][] = 'form-boolean';
+ $variables['attributes']['class'][] = Html::getClass('form-boolean--type-' . $type_html);
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for textarea.
+ */
+function claro_preprocess_textarea(&$variables) {
+ $variables['attributes']['class'][] = 'form-element';
+ $variables['attributes']['class'][] = 'form-element--type-textarea';
+ $variables['attributes']['class'][] = 'form-element--api-textarea';
+}
+
+/**
+ * Implements template_preprocess_HOOK() for select.
+ */
+function claro_preprocess_select(&$variables) {
+ if (!empty($variables['element']['#title_display']) && $variables['element']['#title_display'] === 'attribute' && !empty((string) $variables['element']['#title'])) {
+ $variables['attributes']['title'] = (string) $variables['element']['#title'];
+ }
+
+ $variables['attributes']['class'][] = 'form-element';
+ $variables['attributes']['class'][] = $variables['element']['#multiple'] ?
+ 'form-element--type-select-multiple' :
+ 'form-element--type-select';
+
+ if (in_array('block-region-select', $variables['attributes']['class'])) {
+ $variables['attributes']['class'][] = 'form-element--extrasmall';
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for datetime_wrapper.
+ */
+function claro_preprocess_datetime_wrapper(&$variables) {
+ if (!empty($variables['element']['#errors'])) {
+ $variables['title_attributes']['class'][] = 'has-error';
+ }
+
+ if (!empty($variables['element']['#disabled'])) {
+ $variables['title_attributes']['class'][] = 'is-disabled';
+
+ if (!empty($variables['description_attributes'])) {
+ $variables['description_attributes']->addClass('is-disabled');
+ }
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for fieldset.
+ */
+function claro_preprocess_fieldset(&$variables) {
+ $element = $variables['element'];
+ $composite_types = ['checkboxes', 'radios'];
+
+ if (!empty($element['#type']) && in_array($element['#type'], $composite_types) && !empty($variables['element']['#children_errors'])) {
+ $variables['legend_span']['attributes']->addClass('has-error');
+ }
+
+ if (!empty($element['#disabled'])) {
+ $variables['legend_span']['attributes']->addClass('is-disabled');
+
+ if (!empty($variables['description']) && !empty($variables['description']['attributes'])) {
+ $variables['description']['attributes']->addClass('is-disabled');
+ }
+ }
+
+ // Remove 'container-inline' class from the main attributes and add a flag
+ // instead.
+ // @todo remove this after https://www.drupal.org/node/3059593 has been
+ // resolved.
+ if (!empty($variables['attributes']['class'])) {
+ $container_inline_key = array_search('container-inline', $variables['attributes']['class']);
+
+ if ($container_inline_key !== FALSE) {
+ unset($variables['attributes']['class'][$container_inline_key]);
+ $variables['inline_items'] = TRUE;
+ }
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for field_multiple_value_form.
+ */
+function claro_preprocess_field_multiple_value_form(&$variables) {
+ // Make disabled available for the template.
+ $variables['disabled'] = !empty($variables['element']['#disabled']);
+
+ if ($variables['multiple']) {
+ // Add an additional CSS class for the field label table cell.
+ // This repeats the logic of template_preprocess_field_multiple_value_form()
+ // without using '#prefix' and '#suffix' for the wrapper element.
+ //
+ // If the field is multiple, we don't have to check the existence of the
+ // table header cell.
+ //
+ // @see template_preprocess_field_multiple_value_form().
+ $header_attributes = ['class' => ['form-item__label', 'form-item__label--multiple-value-form']];
+ if (!empty($variables['element']['#required'])) {
+ $header_attributes['class'][] = 'js-form-required';
+ $header_attributes['class'][] = 'form-required';
+ }
+ // Using array_key_first() for addressing the first header cell would be
+ // more elegant here, but we can rely on the related theme.inc preprocess.
+ $variables['table']['#header'][0]['data'] = [
+ '#type' => 'html_tag',
+ '#tag' => 'h4',
+ '#value' => $variables['element']['#title'],
+ '#attributes' => $header_attributes,
+ ];
+
+ if ($variables['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.
+ $header_attributes['class'][] = 'is-disabled';
+ 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'],
+ ];
+ }
+ }
+ }
+
+ // Make add-more button smaller.
+ if (!empty($variables['button'])) {
+ $variables['button']['#attributes']['class'][] = 'button--small';
+ }
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for form_element__password_confirm.
+ */
+function claro_preprocess_form_element__password_confirm(&$variables) {
+ // Add CSS classes needed for theming the password confirm widget.
+ $variables['attributes']['class'][] = 'password-confirm';
+ $variables['attributes']['class'][] = 'is-initial';
+ $variables['attributes']['class'][] = 'is-password-empty';
+ $variables['attributes']['class'][] = 'is-confirm-empty';
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for form_element__password.
+ */
+function claro_preprocess_form_element__password(&$variables) {
+ if (!empty($variables['element']['#array_parents']) && in_array('pass1', $variables['element']['#array_parents'])) {
+ // This is the main password form element.
+ $variables['attributes']['class'][] = 'password-confirm__password';
+ }
+
+ if (!empty($variables['element']['#array_parents']) && in_array('pass2', $variables['element']['#array_parents'])) {
+ // This is the password confirm form element.
+ $variables['attributes']['class'][] = 'password-confirm__confirm';
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for checkboxes.
+ */
+function claro_preprocess_checkboxes(&$variables) {
+ $variables['attributes']['class'][] = 'form-boolean-group';
+}
+
+/**
+ * Implements template_preprocess_HOOK() for radios.
+ */
+function claro_preprocess_radios(&$variables) {
+ $variables['attributes']['class'][] = 'form-boolean-group';
+}
+
+/**
+ * Implements template_preprocess_HOOK() for filter_tips.
+ */
+function claro_preprocess_filter_tips(&$variables) {
+ $variables['#attached']['library'][] = 'filter/drupal.filter';
+}
+
+/**
+ * Implements template_preprocess_HOOK() for table.
+ */
+function claro_preprocess_table(&$variables) {
+ // Adding table sort indicator CSS class for inactive sort link.
+ // @todo Revisit after https://www.drupal.org/node/3025726 or
+ // https://www.drupal.org/node/1973418 is in.
+ if (!empty($variables['header'])) {
+ foreach ($variables['header'] as &$header_cell) {
+ // For 8.6.x and below.
+ // @todo Remove this after 8.6.x is out of support.
+ if ($header_cell['content'] instanceof GeneratedLink) {
+ $dom_doc = Html::load($header_cell['content']->getGeneratedLink());
+ $anchors = $dom_doc->getElementsByTagName('a');
+
+ if (!empty($anchors)) {
+ foreach ($anchors as $anchor) {
+ $anchor_href = $anchor->getAttribute('href');
+ $parsed_url = UrlHelper::parse($anchor_href);
+ $query = !empty($parsed_url['query']) ? $parsed_url['query'] : [];
+
+ if (isset($query['order']) && isset($query['sort'])) {
+ $header_cell['attributes']->addClass('sortable-heading');
+ }
+ }
+ }
+ }
+
+ // For 8.7.x and above.
+ if ($header_cell['content'] instanceof Link) {
+ $query = $header_cell['content']->getUrl()->getOption('query') ?: [];
+
+ if (isset($query['order']) && isset($query['sort'])) {
+ $header_cell['attributes']->addClass('sortable-heading');
+ }
+ }
+ }
+ }
+
+ // Mark the whole table and the first cells if rows are draggable.
+ if (!empty($variables['rows'])) {
+ $draggable_row_found = FALSE;
+ foreach ($variables['rows'] as &$row) {
+ /** @var \Drupal\Core\Template\Attribute $row['attributes'] */
+ if (!empty($row['attributes']) && $row['attributes']->hasClass('draggable')) {
+ if (!$draggable_row_found) {
+ $variables['attributes']['class'][] = 'draggable-table';
+ $draggable_row_found = TRUE;
+ }
+
+ reset($row['cells']);
+ $first_cell_key = key($row['cells']);
+ // The 'attributes' key is always here and it is an
+ // \Drupal\Core\Template\Attribute.
+ // @see template_preprocess_table();
+ $row['cells'][$first_cell_key]['attributes']->addClass('tabledrag-cell');
+
+ // Check that the first cell is empty or not.
+ if (empty($row['cells'][$first_cell_key]) || empty($row['cells'][$first_cell_key]['content'])) {
+ $row['cells'][$first_cell_key]['attributes']->addClass('tabledrag-cell--only-drag');
+ }
+ }
+ }
+ }
+}
+
+/**
+ * Implements template_preprocess_HOOK() for field_ui_table.
+ */
+function claro_preprocess_field_ui_table(&$variables) {
+ claro_preprocess_table($variables);
+}
+
+/**
+ * Implements template_preprocess_HOOK() for views_view_table.
+ *
+ * @todo Revisit after https://www.drupal.org/node/3025726 or
+ * https://www.drupal.org/node/1973418 is in.
+ */
+function claro_preprocess_views_view_table(&$variables) {
+ if (!empty($variables['header'])) {
+ foreach ($variables['header'] as &$header_cell) {
+ if (!empty($header_cell['url'])) {
+ $parsed_url = UrlHelper::parse($header_cell['url']);
+ $query = !empty($parsed_url['query']) ? $parsed_url['query'] : [];
+
+ if (isset($query['order']) && isset($query['sort'])) {
+ $header_cell['attributes']->addClass('sortable-heading');
+ }
+ }
+ }
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for links__dropbutton__operations.
+ *
+ * Operations always use the extra small dropbutton variant.
+ */
+function claro_preprocess_links__dropbutton__operations(&$variables) {
+ $item_classes = ['dropbutton__item', 'dropbutton__item--extrasmall'];
+ $variables['attributes']['class'][] = 'dropbutton--extrasmall';
+
+ foreach ($variables['links'] as &$link_data) {
+ $link_data['attributes']->addClass($item_classes);
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for links__dropbutton.
+ */
+function claro_preprocess_links__dropbutton(&$variables) {
+ // Add the right CSS class for the dropbutton list that helps reducing FOUC.
+ if (!empty($variables['links'])) {
+ $variables['attributes']['class'][] = count($variables['links']) > 1
+ ? 'dropbutton--multiple'
+ : 'dropbutton--single';
+ }
+
+ $item_classes = ['dropbutton__item'];
+
+ // Check that the dropbutton has a supported variant class.
+ // @todo Revisit after https://www.drupal.org/node/3057581 is added.
+ if (!empty($variables['attributes']['class'])) {
+ if (array_search('dropbutton--small', $variables['attributes']['class'])) {
+ $item_classes[] = 'dropbutton__item--small';
+ }
+ elseif (array_search('dropbutton--extrasmall', $variables['attributes']['class'])) {
+ $item_classes[] = 'dropbutton__item--extrasmall';
+ }
+ }
+
+ foreach ($variables['links'] as &$link_data) {
+ $link_data['attributes']->addClass($item_classes);
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for views_ui_display_tab_bucket.
+ */
+function claro_preprocess_views_ui_display_tab_bucket(&$variables) {
+ // Instead of re-styling Views UI dropbuttons with module-specific CSS styles,
+ // change dropbutton variants to the extra small version.
+ // @todo Revisit after https://www.drupal.org/node/3057581 is added.
+ if (!empty($variables['actions']) && $variables['actions']['#type'] === 'dropbutton') {
+ $variables['actions']['#dropbutton_type'] = 'extrasmall';
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for status_messages.
+ */
+function claro_preprocess_status_messages(&$variables) {
+ $variables['title_ids'] = [];
+ foreach ($variables['message_list'] as $message_type => $messages) {
+ $variables['title_ids'][$message_type] = Html::getUniqueId("message-$message_type-title");
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for system_themes_page.
+ */
+function claro_preprocess_system_themes_page(&$variables) {
+ if (!empty($variables['theme_groups'])) {
+ foreach ($variables['theme_groups'] as &$theme_group) {
+ if (!empty($theme_group['themes'])) {
+ foreach ($theme_group['themes'] as &$theme_card) {
+ $theme_card['title_id'] = Html::getUniqueId($theme_card['name'] . '-label');
+ $description_is_empty = empty((string) $theme_card['description']);
+
+ // Set description_id only if the description is not empty.
+ if (!$description_is_empty) {
+ $theme_card['description_id'] = Html::getUniqueId($theme_card['name'] . '-description');
+ }
+
+ if (!empty($theme_card['operations']) && !empty($theme_card['operations']['#theme']) && $theme_card['operations']['#theme'] === 'links') {
+ $theme_card['operations']['#theme'] = 'links__action_links';
+ }
+ }
+ }
+ }
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for links__action_links.
+ */
+function claro_preprocess_links__action_links(&$variables) {
+ $variables['attributes']['class'][] = 'action-links';
+ foreach ($variables['links'] as $delta => $link_item) {
+ $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) {
+ $has_upload = FALSE;
+
+ 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;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Add a CSS class to the table if an upload widget is present.
+ // This is required for removing the border of the last table row.
+ if (!empty($variables['element'])) {
+ $element_keys = Element::children($variables['element']);
+
+ foreach ($element_keys as $delta) {
+ if (!isset($variables['element'][$delta]['upload']['#access']) || $variables['element'][$delta]['upload']['#access'] !== FALSE) {
+ $has_upload = TRUE;
+ break 1;
+ }
+ }
+ }
+ $variables['table']['#attributes']['class'][] = $has_upload ? 'table-file-multiple-widget--has-upload' : 'table-file-multiple-widget--no-upload';
+ }
+
+ $table_is_not_empty = isset($variables['table']['#rows']) && !empty($variables['table']['#rows']);
+ $table_is_accessible = !isset($variables['table']['#access']) || (isset($variables['table']['#access']) && $variables['table']['#access'] !== FALSE);
+ $variables['has_table'] = $table_is_not_empty && $table_is_accessible;
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for image_widget.
+ */
+function claro_preprocess_image_widget(&$variables) {
+ $element = $variables['element'];
+
+ // Stable adds the file size as #suffix for image file_link renderable array.
+ // We have to remove that because we will render it in our file_link template
+ // for every kind of files, and not just for images.
+ if (!empty($variables['element']['fids']['#value'])) {
+ $file = reset($variables['element']['#files']);
+ unset($variables['data']['file_' . $file->id()]['filename']['#suffix']);
+ }
+
+ // 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']);
+ $alt_can_be_displayed = !empty($element['#alt_field']);
+ $alt_is_visible = $alt_can_be_displayed && (!isset($element['alt']['#access']) || $element['alt']['#access'] !== FALSE);
+ $title_can_be_displayed = !empty($element['#title_field']);
+ $title_is_visible = $title_can_be_displayed && (!isset($element['title']['#access']) || $element['title']['#access'] !== FALSE);
+
+ $variables['multiple'] = $is_multiple;
+ $variables['upload'] = $upload_is_accessible;
+ $variables['has_value'] = $has_value;
+ $variables['has_meta'] = $alt_is_visible || $title_is_visible;
+}
diff --git a/core/themes/claro/config/optional/block.block.claro_breadcrumbs.yml b/core/themes/claro/config/optional/block.block.claro_breadcrumbs.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5133f919e29b3038041c0a3f936d1c3902d1d777
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_breadcrumbs.yml
@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+ module:
+ - system
+ theme:
+ - claro
+id: claro_breadcrumbs
+theme: claro
+region: breadcrumb
+weight: 0
+provider: null
+plugin: system_breadcrumb_block
+settings:
+ id: system_breadcrumb_block
+ label: Breadcrumbs
+ provider: system
+ label_display: '0'
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_content.yml b/core/themes/claro/config/optional/block.block.claro_content.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ae811dba69b8b2d1fa18ecef2cc4b38d719a7f58
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_content.yml
@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+ module:
+ - system
+ theme:
+ - claro
+id: claro_content
+theme: claro
+region: content
+weight: 0
+provider: null
+plugin: system_main_block
+settings:
+ id: system_main_block
+ label: 'Main page content'
+ provider: system
+ label_display: '0'
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_help.yml b/core/themes/claro/config/optional/block.block.claro_help.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3a0ad990e550675b3abb8c2170193500e3499475
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_help.yml
@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+ module:
+ - help
+ theme:
+ - claro
+id: claro_help
+theme: claro
+region: help
+weight: 0
+provider: null
+plugin: help_block
+settings:
+ id: help_block
+ label: Help
+ provider: help
+ label_display: '0'
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_local_actions.yml b/core/themes/claro/config/optional/block.block.claro_local_actions.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e2a4e1d53429bc5772c1ef84bb89faeb1d7bc78
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_local_actions.yml
@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+ theme:
+ - claro
+id: claro_local_actions
+theme: claro
+region: content
+weight: -10
+provider: null
+plugin: local_actions_block
+settings:
+ id: local_actions_block
+ label: 'Primary admin actions'
+ provider: core
+ label_display: '0'
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_messages.yml b/core/themes/claro/config/optional/block.block.claro_messages.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d6874e560516704e7720b24f81dbc68f0c08f259
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_messages.yml
@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+ module:
+ - system
+ theme:
+ - claro
+id: claro_messages
+theme: claro
+region: highlighted
+weight: 0
+provider: null
+plugin: system_messages_block
+settings:
+ id: system_messages_block
+ label: 'Status messages'
+ provider: system
+ label_display: '0'
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_page_title.yml b/core/themes/claro/config/optional/block.block.claro_page_title.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bf7268d59572b17e79905cc3440d5b5728b5f3ee
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_page_title.yml
@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+ theme:
+ - claro
+id: claro_page_title
+theme: claro
+region: header
+weight: -30
+provider: null
+plugin: page_title_block
+settings:
+ id: page_title_block
+ label: 'Page title'
+ provider: core
+ label_display: '0'
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_primary_local_tasks.yml b/core/themes/claro/config/optional/block.block.claro_primary_local_tasks.yml
new file mode 100644
index 0000000000000000000000000000000000000000..51af4c8e5c1bd429f3070e37f2b6580710698912
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_primary_local_tasks.yml
@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+ theme:
+ - claro
+id: claro_primary_local_tasks
+theme: claro
+region: header
+weight: 0
+provider: null
+plugin: local_tasks_block
+settings:
+ id: local_tasks_block
+ label: 'Primary tabs'
+ provider: core
+ label_display: '0'
+ primary: true
+ secondary: false
+visibility: { }
diff --git a/core/themes/claro/config/optional/block.block.claro_secondary_local_tasks.yml b/core/themes/claro/config/optional/block.block.claro_secondary_local_tasks.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e26e326b9c8782c6eb013eb6804057e7d5094d26
--- /dev/null
+++ b/core/themes/claro/config/optional/block.block.claro_secondary_local_tasks.yml
@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+ theme:
+ - claro
+id: claro_secondary_local_tasks
+theme: claro
+region: pre_content
+weight: 0
+provider: null
+plugin: local_tasks_block
+settings:
+ id: local_tasks_block
+ label: 'Secondary tabs'
+ provider: core
+ label_display: '0'
+ primary: false
+ secondary: true
+visibility: { }
diff --git a/core/themes/claro/config/schema/claro.schema.yml b/core/themes/claro/config/schema/claro.schema.yml
new file mode 100644
index 0000000000000000000000000000000000000000..171129d5cbc080012071ef5d0c112f4dab6861d9
--- /dev/null
+++ b/core/themes/claro/config/schema/claro.schema.yml
@@ -0,0 +1,5 @@
+# Schema for the configuration files of the Claro theme.
+
+claro.settings:
+ type: theme_settings
+ label: 'Claro settings'
diff --git a/core/themes/claro/css/src/base/elements.css b/core/themes/claro/css/src/base/elements.css
new file mode 100644
index 0000000000000000000000000000000000000000..0b3aeb1fc593535469d12b96bd670cc02fd9ab52
--- /dev/null
+++ b/core/themes/claro/css/src/base/elements.css
@@ -0,0 +1,316 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Generic elements.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+html {
+ font-family: BlinkMacSystemFont
+,
+-apple-system
+,
+"Segoe UI"
+,
+Roboto
+,
+Oxygen-Sans
+,
+Ubuntu
+,
+Cantarell
+,
+"Helvetica Neue"
+,
+sans-serif;
+ font-size: 100%;
+ font-weight: normal;
+ font-style: normal;
+ line-height: 1.5;
+}
+
+body {
+ color: #222330;
+ background: #fff;
+}
+
+a,
+.link {
+ color: #003cc5;
+}
+
+a:hover,
+a:focus,
+.link:hover,
+.link:focus {
+ text-decoration: none;
+ outline: 0;
+}
+
+a:hover,
+.link:hover {
+ color: #0036b1;
+}
+
+a:active,
+.link:active {
+ color: #00339a;
+}
+
+hr {
+ height: 1px;
+ margin: 1rem 0;
+ padding: 0;
+ border: none;
+ background: rgba(142, 146, 156, 0.5);
+}
+
+summary {
+ font-weight: bold;
+}
+
+/**
+ * Reusable heading classes are included to help modules change the styling of
+ * headings on a page without affecting accessibility.
+ */
+
+h1,
+.heading-a {
+ margin: 1rem 0 0.75rem;
+ font-size: 2.027rem;
+ font-weight: bold;
+ line-height: 1.3;
+}
+
+h2,
+.heading-b {
+ margin: 1rem 0 0.75rem;
+ font-size: 1.802rem;
+ font-weight: bold;
+ line-height: 1.3;
+}
+
+h3,
+.heading-c {
+ margin: 1rem 0 0.75rem;
+ font-size: 1.602rem;
+ font-weight: bold;
+ line-height: 1.3;
+}
+
+h4,
+.heading-d {
+ margin: 1rem 0 0.75rem;
+ font-size: 1.424rem;
+ font-weight: bold;
+ line-height: 1.3;
+}
+
+h5,
+.heading-e {
+ margin: 1rem 0 0.75rem;
+ font-size: 1.266rem;
+ font-weight: bold;
+ line-height: 1.3;
+}
+
+h6,
+.heading-f {
+ margin: 1rem 0 0.75rem;
+ font-size: 1.125rem;
+ font-weight: bold;
+ line-height: 1.3;
+}
+
+p {
+ margin: 1em 0;
+}
+
+dl {
+ margin: 0 0 20px;
+}
+
+dl dd,
+dl dl {
+ margin-bottom: 10px;
+ margin-left: 20px; /* LTR */
+}
+
+[dir="rtl"] dl dd,
+[dir="rtl"] dl dl {
+ margin-right: 20px;
+}
+
+blockquote {
+ margin: 1em 40px;
+}
+
+address {
+ font-style: italic;
+}
+
+u,
+ins {
+ text-decoration: none;
+}
+
+s,
+strike,
+del {
+ text-decoration: line-through;
+}
+
+big {
+ font-size: larger;
+}
+
+small {
+ font-size: smaller;
+}
+
+sub {
+ vertical-align: sub;
+ font-size: smaller;
+ line-height: normal;
+}
+
+sup {
+ vertical-align: super;
+ font-size: smaller;
+ line-height: normal;
+}
+
+abbr,
+acronym {
+ border-bottom: dotted 1px;
+}
+
+ul {
+ margin: 0.25em 0 0.25em 1.5em; /* LTR */
+ padding-left: 0;
+ list-style-type: disc;
+ list-style-image: none;
+}
+
+[dir="rtl"] ul {
+ margin-right: 1.5em;
+ margin-left: 0;
+ padding-right: 0;
+}
+
+/* This is required to win over specificity of [dir="rtl"] ul */
+
+[dir="rtl"] .messages__list {
+ margin-right: 0;
+}
+
+ol {
+ margin: 0.25em 0 0.25em 2em; /* LTR */
+ padding: 0;
+ list-style-type: decimal;
+}
+
+[dir="rtl"] ol {
+ margin-right: 2em;
+ margin-left: 0;
+}
+
+/**
+ * Fix duplicate border caused by normalize.css adding border-bottom without
+ * removing the text-decoration.
+ */
+
+abbr[title] {
+ text-decoration: none;
+}
+
+code {
+ margin: 0.5em 0;
+}
+
+pre {
+ margin: 0.5em 0;
+ white-space: pre-wrap;
+}
+
+details {
+ line-height: 1.295em;
+}
+
+details summary {
+ padding: 0.95em 1.45em;
+}
+
+details summary:focus {
+ outline: none;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+/**
+ * Default focus styles for focused elements.
+ *
+ * This is applied globally to all interactive elements except Toolbar and
+ * Settings Tray since they have their own styles.
+ *
+ * @todo https://www.drupal.org/project/claro/issues/3048785 :focus selector is
+ * active for non-interactive elements in Internet Explorer 11.
+ */
+
+.page-wrapper *:focus,
+.ui-dialog *:focus {
+ outline: 2px dotted transparent;
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+}
diff --git a/core/themes/claro/css/src/base/elements.pcss.css b/core/themes/claro/css/src/base/elements.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..8df7ed0f37f302c95ad789f9c6e21751a5bad677
--- /dev/null
+++ b/core/themes/claro/css/src/base/elements.pcss.css
@@ -0,0 +1,213 @@
+/**
+ * Generic elements.
+ */
+
+@import "./variables.pcss.css";
+
+html {
+ font-family: var(--font-family);
+ font-size: 100%;
+ font-weight: normal;
+ font-style: normal;
+ line-height: var(--line-height);
+}
+body {
+ color: var(--color-fg);
+ background: var(--color-bg);
+}
+
+a,
+.link {
+ color: var(--color-link);
+}
+a:hover,
+a:focus,
+.link:hover,
+.link:focus {
+ text-decoration: none;
+ outline: 0;
+}
+a:hover,
+.link:hover {
+ color: var(--color-link-hover);
+}
+a:active,
+.link:active {
+ color: var(--color-link-active);
+}
+hr {
+ height: 1px;
+ margin: var(--space-m) 0;
+ padding: 0;
+ border: none;
+ background: var(--color-divider);
+}
+
+summary {
+ font-weight: bold;
+}
+
+/**
+ * Reusable heading classes are included to help modules change the styling of
+ * headings on a page without affecting accessibility.
+ */
+h1,
+.heading-a {
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h1);
+ font-weight: bold;
+ line-height: var(--line-height-heading);
+}
+h2,
+.heading-b {
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h2);
+ font-weight: bold;
+ line-height: var(--line-height-heading);
+}
+h3,
+.heading-c {
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h3);
+ font-weight: bold;
+ line-height: var(--line-height-heading);
+}
+h4,
+.heading-d {
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h4);
+ font-weight: bold;
+ line-height: var(--line-height-heading);
+}
+h5,
+.heading-e {
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h5);
+ font-weight: bold;
+ line-height: var(--line-height-heading);
+}
+h6,
+.heading-f {
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h6);
+ font-weight: bold;
+ line-height: var(--line-height-heading);
+}
+p {
+ margin: 1em 0;
+}
+dl {
+ margin: 0 0 20px;
+}
+dl dd,
+dl dl {
+ margin-bottom: 10px;
+ margin-left: 20px; /* LTR */
+}
+[dir="rtl"] dl dd,
+[dir="rtl"] dl dl {
+ margin-right: 20px;
+}
+blockquote {
+ margin: 1em 40px;
+}
+address {
+ font-style: italic;
+}
+u,
+ins {
+ text-decoration: none;
+}
+s,
+strike,
+del {
+ text-decoration: line-through;
+}
+big {
+ font-size: larger;
+}
+small {
+ font-size: smaller;
+}
+sub {
+ vertical-align: sub;
+ font-size: smaller;
+ line-height: normal;
+}
+sup {
+ vertical-align: super;
+ font-size: smaller;
+ line-height: normal;
+}
+abbr,
+acronym {
+ border-bottom: dotted 1px;
+}
+ul {
+ margin: 0.25em 0 0.25em 1.5em; /* LTR */
+ padding-left: 0;
+ list-style-type: disc;
+ list-style-image: none;
+}
+[dir="rtl"] ul {
+ margin-right: 1.5em;
+ margin-left: 0;
+ padding-right: 0;
+}
+/* This is required to win over specificity of [dir="rtl"] ul */
+[dir="rtl"] .messages__list {
+ margin-right: 0;
+}
+ol {
+ margin: 0.25em 0 0.25em 2em; /* LTR */
+ padding: 0;
+ list-style-type: decimal;
+}
+[dir="rtl"] ol {
+ margin-right: 2em;
+ margin-left: 0;
+}
+
+/**
+ * Fix duplicate border caused by normalize.css adding border-bottom without
+ * removing the text-decoration.
+ */
+abbr[title] {
+ text-decoration: none;
+}
+
+code {
+ margin: 0.5em 0;
+}
+pre {
+ margin: 0.5em 0;
+ white-space: pre-wrap;
+}
+details {
+ line-height: 1.295em;
+}
+details summary {
+ padding: 0.95em 1.45em;
+}
+details summary:focus {
+ outline: none;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+/**
+ * Default focus styles for focused elements.
+ *
+ * This is applied globally to all interactive elements except Toolbar and
+ * Settings Tray since they have their own styles.
+ *
+ * @todo https://www.drupal.org/project/claro/issues/3048785 :focus selector is
+ * active for non-interactive elements in Internet Explorer 11.
+ */
+.page-wrapper *:focus,
+.ui-dialog *:focus {
+ outline: 2px dotted transparent;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+}
diff --git a/core/themes/claro/css/src/base/print.css b/core/themes/claro/css/src/base/print.css
new file mode 100644
index 0000000000000000000000000000000000000000..730acd1f82ff32b2a11265e059363ef8836cc0d5
--- /dev/null
+++ b/core/themes/claro/css/src/base/print.css
@@ -0,0 +1,89 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+@media print {
+ * {
+ color: #000 !important; /* Black prints faster: h5bp.com/s */
+ background-color: transparent !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ body {
+ padding-top: 0;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ thead {
+ display: table-header-group; /* h5bp.com/t */
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ img {
+ max-width: 100% !important;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ a,
+ .link {
+ color: #000;
+ }
+ .button,
+ .button--primary {
+ background: none !important;
+ }
+ .messages {
+ border-width: 1px;
+ border-color: #999;
+ }
+ .is-collapse-enabled .tabs {
+ max-height: 999em;
+ }
+ .is-horizontal .tabs__tab {
+ margin: 0 4px !important;
+ border-radius: 4px 4px 0 0 !important;
+ }
+ .dropbutton-multiple .dropbutton .secondary-action {
+ display: block;
+ }
+ .js .dropbutton-widget,
+ .js td .dropbutton-widget /* Splitbuttons */ {
+ position: relative;
+ }
+ .js .dropbutton .dropbutton-toggle {
+ display: none;
+ }
+ .js .dropbutton-multiple .dropbutton-widget {
+ border-radius: 4px;
+ background: none;
+ }
+ input.form-autocomplete,
+ input.form-text,
+ input.form-tel,
+ input.form-email,
+ input.form-url,
+ input.form-search,
+ input.form-number,
+ input.form-color,
+ input.form-file,
+ textarea.form-textarea,
+ select.form-select {
+ border-width: 1px;
+ }
+}
diff --git a/core/themes/claro/css/src/base/print.pcss.css b/core/themes/claro/css/src/base/print.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..16987c4c8e503542bbd567554bf3452dfc81a5a8
--- /dev/null
+++ b/core/themes/claro/css/src/base/print.pcss.css
@@ -0,0 +1,82 @@
+@media print {
+ * {
+ color: #000 !important; /* Black prints faster: h5bp.com/s */
+ background-color: transparent !important;
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ body {
+ padding-top: 0;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ thead {
+ display: table-header-group; /* h5bp.com/t */
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ img {
+ max-width: 100% !important;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ a,
+ .link {
+ color: #000;
+ }
+ .button,
+ .button--primary {
+ background: none !important;
+ }
+ .messages {
+ border-width: 1px;
+ border-color: #999;
+ }
+ .is-collapse-enabled .tabs {
+ max-height: 999em;
+ }
+ .is-horizontal .tabs__tab {
+ margin: 0 4px !important;
+ border-radius: 4px 4px 0 0 !important;
+ }
+ .dropbutton-multiple .dropbutton .secondary-action {
+ display: block;
+ }
+ .js .dropbutton-widget,
+ .js td .dropbutton-widget /* Splitbuttons */ {
+ position: relative;
+ }
+ .js .dropbutton .dropbutton-toggle {
+ display: none;
+ }
+ .js .dropbutton-multiple .dropbutton-widget {
+ border-radius: 4px;
+ background: none;
+ }
+ input.form-autocomplete,
+ input.form-text,
+ input.form-tel,
+ input.form-email,
+ input.form-url,
+ input.form-search,
+ input.form-number,
+ input.form-color,
+ input.form-file,
+ textarea.form-textarea,
+ select.form-select {
+ border-width: 1px;
+ }
+}
diff --git a/core/themes/claro/css/src/base/typography.css b/core/themes/claro/css/src/base/typography.css
new file mode 100644
index 0000000000000000000000000000000000000000..fec33410742c844f778ad22c935615b0530bd956
--- /dev/null
+++ b/core/themes/claro/css/src/base/typography.css
@@ -0,0 +1,42 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+/**
+* Reusable utility classes that apply vertical spacing consistency and inline
+* with the base line height of Claro.
+*/
+.leader {
+ margin-top: 20px;
+ margin-top: 1.538rem;
+}
+.leader-double {
+ margin-top: 40px;
+ margin-top: 3.076rem;
+}
+.leader-triple {
+ margin-top: 60px;
+ margin-top: 4.614rem;
+}
+.leader-quadruple {
+ margin-top: 80px;
+ margin-top: 6.152rem;
+}
+.trailer {
+ margin-bottom: 20px;
+ margin-bottom: 1.538rem;
+}
+.trailer-double {
+ margin-bottom: 40px;
+ margin-bottom: 3.076rem;
+}
+.trailer-triple {
+ margin-bottom: 60px;
+ margin-bottom: 4.614rem;
+}
+.trailer-quadruple {
+ margin-bottom: 80px;
+ margin-bottom: 6.152rem;
+}
diff --git a/core/themes/claro/css/src/base/typography.pcss.css b/core/themes/claro/css/src/base/typography.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..6004d69c68838157b4838b9e3a0d2ddecdb2f592
--- /dev/null
+++ b/core/themes/claro/css/src/base/typography.pcss.css
@@ -0,0 +1,36 @@
+/**
+* Reusable utility classes that apply vertical spacing consistency and inline
+* with the base line height of Claro.
+*/
+.leader {
+ margin-top: 20px;
+ margin-top: 1.538rem;
+}
+.leader-double {
+ margin-top: 40px;
+ margin-top: 3.076rem;
+}
+.leader-triple {
+ margin-top: 60px;
+ margin-top: 4.614rem;
+}
+.leader-quadruple {
+ margin-top: 80px;
+ margin-top: 6.152rem;
+}
+.trailer {
+ margin-bottom: 20px;
+ margin-bottom: 1.538rem;
+}
+.trailer-double {
+ margin-bottom: 40px;
+ margin-bottom: 3.076rem;
+}
+.trailer-triple {
+ margin-bottom: 60px;
+ margin-bottom: 4.614rem;
+}
+.trailer-quadruple {
+ margin-bottom: 80px;
+ margin-bottom: 6.152rem;
+}
diff --git a/core/themes/claro/css/src/base/variables.css b/core/themes/claro/css/src/base/variables.css
new file mode 100644
index 0000000000000000000000000000000000000000..aa4737c0426b0e594117ff69211fea6726a4a4cc
--- /dev/null
+++ b/core/themes/claro/css/src/base/variables.css
@@ -0,0 +1,49 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
diff --git a/core/themes/claro/css/src/base/variables.pcss.css b/core/themes/claro/css/src/base/variables.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..dc855b4cc6916081b342fca707a219af1a10bac9
--- /dev/null
+++ b/core/themes/claro/css/src/base/variables.pcss.css
@@ -0,0 +1,180 @@
+:root {
+ /*
+ * Color Palette.
+ */
+ --color-absolutezero: #003cc5;
+ --color-white: #fff;
+ --color-text: #222330;
+ --color-text-light: var(--color-grayblue);
+ --color-whitesmoke: #f3f4f9;
+ --color-whitesmoke-light: #fafbfd;
+ --color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
+ /* Secondary. */
+ --color-lightgray: #d4d4d8;
+ --color-lightgray-o-80: rgba(212, 212, 218, 0.8);
+ --color-grayblue: #8e929c;
+ --color-oldsilver: #82828c;
+ --color-davysgrey: #545560;
+ --color-maximumred: #d72222;
+ --color-sunglow: #ffd23f;
+ --color-sunglow-shaded: #977405;
+ --color-lightninggreen: #26a769;
+ --color-focus: var(--color-lightninggreen);
+ /* Variations. */
+ --color-lightgray-hover: #c2c3ca; /* 5% darker than base. */
+ --color-lightgray-active: #adaeb3; /* 10% darker than base. */
+ --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
+ --color-absolutezero-active: #00339a; /* 20% darker than base. */
+ --color-maximumred-hover: #c11f1f; /* 5% darker than base. */
+ --color-maximumred-active: #ab1b1b; /* 10% darker than base. */
+ --color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
+ --color-bgblue-active: #e6ecf8; /* 10% darker than base. */
+ --color-bgred-hover: #fdf5f5; /* 5% darker than base. */
+ --color-bgred-active: #fceded; /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ --color-fg: var(--color-text);
+ --color-bg: var(--color-white);
+ --color-link: var(--color-absolutezero);
+ --color-link-hover: var(--color-absolutezero-hover);
+ --color-link-active: var(--color-absolutezero-active);
+ --color-divider: rgba(142, 146, 156, 0.5);
+ /*
+ * Typography.
+ */
+ --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ --line-height: 1.5;
+ --line-height-heading: 1.3;
+ --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+ --font-size-h1: 2.027rem; /* ~32px */
+ --font-size-h2: 1.802rem; /* ~29px */
+ --font-size-h3: 1.602rem; /* ~26px */
+ --font-size-h4: 1.424rem; /* ~23px */
+ --font-size-h5: 1.266rem; /* ~20px */
+ --font-size-h6: 1.125rem; /* 18px */
+ --font-size-s: 0.889rem; /* ~14px */
+ --font-size-xs: 0.79rem; /* ~13px */
+ --font-size-xxs: 0.702rem; /* ~11px */
+ --font-size-label: var(--font-size-s);
+ --font-size-description: var(--font-size-xs);
+ /**
+ * Spaces.
+ */
+ --space-xl: 3rem; /* 3 * 16px = 48px */
+ --space-l: 1.5rem; /* 1.5 * 16px = 24px */
+ --space-m: 1rem; /* 1 * 16px = 16px */
+ --space-s: 0.75rem; /* 0.75 * 16px = 12px */
+ --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ --speed-transition: 0.2s;
+ --transition: all var(--speed-transition) ease-out;
+ --base-border-radius: 2px;
+ --focus-border-size: 3px;
+ --outline-size: 2px;
+ /*
+ * Inputs.
+ */
+ --input-fg-color: var(--color-fg);
+ --input-bg-color: var(--color-bg);
+ --input-fg-color--description: var(--color-davysgrey);
+ --input-fg-color--placeholder: var(--color-grayblue);
+ --input-border-color: var(--color-grayblue);
+ --input--hover-border-color: var(--color-text);
+ --input--focus-border-color: var(--color-absolutezero);
+ --input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
+ --input--error-color: var(--color-maximumred);
+ --input--error-border-color: var(--color-maximumred);
+ --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's grey with 0.6 opacity. */
+ --input--disabled-fg-color: var(--color-oldsilver);
+ --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
+ --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: 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 */
+ /*
+ * Details.
+ */
+ --details-bg-color: rgba(243, 244, 249, 0.4);
+ --details-border-color: rgba(216, 217, 224, 0.8);
+ --details-summary-shadow-color: var(--color-focus);
+ --details-summary-focus-border-size: var(--focus-border-size);
+ --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
+ --details-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ --details-border-size: 1px;
+ --details-border-size-radius: 2px;
+ --details-accordion-border-size-radius: var(--base-border-radius);
+ --details-spread-box-shadow-radius: 2px;
+ --details-bg-color-transition-duration: 0.12s;
+ --details-box-shadow-transition-duration: 0.2s;
+ --details-transform-transition-duration: 0.12s;
+ /**
+ * Buttons.
+ */
+ --button--focus-border-color: #5a8bed;
+ --button-border-radius-size: var(--base-border-radius);
+ --button-fg-color: var(--color-text);
+ --button-bg-color: var(--color-lightgray);
+ --button--hover-bg-color: var(--color-lightgray-hover);
+ --button--active-bg-color: var(--color-lightgray-active);
+ --button--disabled-bg-color: #ebebed;
+ --button--disabled-fg-color: var(--color-grayblue);
+ --button-fg-color--primary: var(--color-white);
+ --button-bg-color--primary: var(--color-absolutezero);
+ --button--hover-bg-color--primary: var(--color-absolutezero-hover);
+ --button--active-bg-color--primary: var(--color-absolutezero-active);
+ --button--focus-bg-color--primary: var(--button-bg-color--primary);
+ --button--disabled-bg-color--primary: var(--color-lightgray);
+ --button--disabled-fg-color--primary: var(--color-oldsilver);
+ --button-fg-color--danger: var(--color-white);
+ --button-bg-color--danger: var(--color-maximumred);
+ --button--hover-bg-color--danger: var(--color-maximumred-hover);
+ --button--active-bg-color--danger: var(--color-maximumred-active);
+ /**
+ * jQuery.UI dropdown.
+ */
+ --jui-dropdown-fg-color: var(--color-davysgrey);
+ --jui-dropdown-bg-color: var(--color-white);
+ --jui-dropdown--active-fg-color: var(--color-white);
+ --jui-dropdown--active-bg-color: var(--color-absolutezero);
+ --jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
+ --jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ --progress-bar-border-size: 1px;
+ --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
+ --progress-bar-small-size-radius: var(--space-xs);
+ --progress-bar-spacing-size: var(--space-xs);
+ --progress-bar-transition: width 0.5s ease-out;
+ --progress-bar-label-color: var(--color-text);
+ --progress-bar-description-color: var(--color-davysgrey);
+ --progress-bar-description-font-size: var(--font-size-xs);
+ --progress-track-border-color: var(--color-grayblue);
+ --progress-track-bg-color: var(--color-lightgray);
+ /**
+ * Tabledrag icon size.
+ */
+ --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
+ /**
+ * Ajax progress.
+ */
+ --ajax-progress-margin-horizontal: var(--space-s);
+ /**
+ * Breadcrumb.
+ */
+ --breadcrumb-height: 1.25rem;
+}
diff --git a/core/themes/claro/css/src/components/accordion.css b/core/themes/claro/css/src/components/accordion.css
new file mode 100644
index 0000000000000000000000000000000000000000..223a170058961720e064978531d19ceee6af65bc
--- /dev/null
+++ b/core/themes/claro/css/src/components/accordion.css
@@ -0,0 +1,103 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Accordion styles.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.accordion {
+ color: #222330;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.accordion__item {
+ margin: 0 -1px;
+ border-radius: 0;
+}
+
+.accordion__item:first-child {
+ margin-top: -1px;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
+.accordion__item + .accordion__item {
+ margin-top: -1px;
+}
+
+.accordion__item:last-child {
+ margin-bottom: -1px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+/**
+ * Hide JS summary from the details polyfill to make it consistent with native
+ * details elements.
+ *
+ * @todo Consider removing this after https://www.drupal.org/node/2493957 has
+ * been solved.
+ */
+
+.accordion__item .claro-details__summary .summary {
+ display: none;
+}
diff --git a/core/themes/claro/css/src/components/accordion.pcss.css b/core/themes/claro/css/src/components/accordion.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..57961a20db896734d3d0637b5b618049fdd9caf1
--- /dev/null
+++ b/core/themes/claro/css/src/components/accordion.pcss.css
@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Accordion styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+.accordion {
+ color: var(--color-text);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-accordion-border-size-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
+}
+
+.accordion__item {
+ margin: 0 -1px;
+ border-radius: 0;
+}
+
+.accordion__item:first-child {
+ margin-top: -1px;
+ border-top-left-radius: var(--details-accordion-border-size-radius);
+ border-top-right-radius: var(--details-accordion-border-size-radius);
+}
+
+.accordion__item + .accordion__item {
+ margin-top: -1px;
+}
+
+.accordion__item:last-child {
+ margin-bottom: -1px;
+ border-bottom-right-radius: var(--details-accordion-border-size-radius);
+ border-bottom-left-radius: var(--details-accordion-border-size-radius);
+}
+
+/**
+ * Hide JS summary from the details polyfill to make it consistent with native
+ * details elements.
+ *
+ * @todo Consider removing this after https://www.drupal.org/node/2493957 has
+ * been solved.
+ */
+.accordion__item .claro-details__summary .summary {
+ display: none;
+}
diff --git a/core/themes/claro/css/src/components/action-link.css b/core/themes/claro/css/src/components/action-link.css
new file mode 100644
index 0000000000000000000000000000000000000000..c76e40f91446d5d4bc0c1071774d89f8302c9cc8
--- /dev/null
+++ b/core/themes/claro/css/src/components/action-link.css
@@ -0,0 +1,498 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for action links.
+ *
+ * Contains Action link component and the action-links layout styles.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Action links layout.
+ */
+
+.action-links,
+[dir="rtl"] .action-links {
+ margin: 1.5rem 0;
+ list-style: none;
+}
+
+.action-links__item {
+ display: inline-block;
+}
+
+.action-links__item + .action-links__item > .action-link {
+ margin-left: 0.75rem; /* LTR */
+}
+
+[dir="rtl"] .action-links__item + .action-links__item > .action-link {
+ margin-right: 0.75rem;
+ margin-left: 0;
+}
+
+.action-links__item + .action-links__item > .action-link--small {
+ margin-left: 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {
+ margin-right: 0.5rem;
+ margin-left: 0;
+}
+
+/**
+ * The action link component.
+ */
+
+.action-link {
+ display: inline-block;
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ text-decoration: none;
+ color: #545560;
+ border-radius: 2px;
+ background-color: #fff;
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.5rem; /* Bigger line-height needed to prevent the icon from increasing the height */
+ -webkit-font-smoothing: antialiased;
+}
+
+/* Small variant. */
+
+.no-touchevents .action-link--small {
+ padding: 0.375rem 0.75rem;
+ font-size: 0.889rem;
+}
+
+/* Extra small variant. */
+
+.no-touchevents .action-link--extrasmall {
+ padding: 0 0.5rem;
+ font-size: 0.889rem;
+}
+
+.action-link + .action-link {
+ margin-left: 0.75rem; /* LTR */
+}
+
+[dir="rtl"] .action-link + .action-link {
+ margin-right: 0.75rem;
+ margin-left: 0;
+}
+
+.no-touchevents .action-link--small + .action-link--small,
+.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
+ margin-left: 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,
+[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {
+ margin-right: 0.5rem;
+ margin-left: 0;
+}
+
+/**
+ * Action links inside form-actions.
+ *
+ * Add the same margin for action-link inside form-actions as button has.
+ */
+
+.form-actions .action-link {
+ margin-right: 0.75rem; /* LTR */
+ margin-left: 0; /* LTR */
+}
+
+[dir="rtl"] .form-actions .action-link {
+ margin-right: 0;
+ margin-left: 0.75rem;
+}
+
+/* Action link states */
+
+.action-link:hover {
+ text-decoration: none;
+ color: #0036b1;
+ background-color: #f0f5fd;
+}
+
+.action-link:focus {
+ position: relative;
+ z-index: 1;
+ text-decoration: none;
+}
+
+.action-link:active {
+ color: #00339a;
+ background-color: #e6ecf8;
+}
+
+/**
+ * Action link variants.
+ */
+
+/* Danger. */
+
+.action-link--danger {
+ color: #d72222;
+}
+
+.action-link--danger:hover {
+ color: #c11f1f;
+ background-color: #fdf5f5;
+}
+
+.action-link--danger:active {
+ color: #ab1b1b;
+ background-color: #fceded;
+}
+
+/**
+ * Action link icons with states.
+ *
+ * We use parent-relative units here to follow the .action-link's font size.
+ */
+
+/* Defaults for icons */
+
+.action-link::before {
+ position: relative;
+ top: 0.125rem; /* Set the proper vertical alignment */
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ margin-right: 0.5em; /* LTR */
+ margin-left: -0.25rem; /* LTR */
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+}
+
+[dir="rtl"] .action-link::before {
+ margin-right: -0.25rem;
+ margin-left: 0.5em;
+}
+
+.no-touchevents .action-link--small::before,
+.no-touchevents .action-link--extrasmall::before {
+ top: 0.0625rem; /* Set the proper vertical alignment */
+ width: 0.75rem;
+ height: 0.75rem;
+}
+
+.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.
+ *
+ * IE 11 does not display inline svg backgrounds
+ */
+
+@media screen and (-ms-high-contrast: active) {
+ /* stylelint-disable-next-line selector-type-no-unknown */
+ _:-ms-fullscreen,
+ .action-link::before {
+ display: none;
+ }
+}
+
+/* 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 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 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 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 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 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 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 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='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='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='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='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='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='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='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;
+ }
+}
+
+/* Ex */
+
+.action-link--icon-ex::before {
+ content: "";
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-ex:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-ex:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+/* Ex — danger */
+
+.action-link--icon-ex.action-link--danger::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-ex.action-link--danger:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-ex.action-link--danger:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-ex.action-link--icon-ex.action-link--icon-ex::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E") !important;
+ }
+}
+
+/* Checkmark */
+
+.action-link--icon-checkmark::before {
+ content: "";
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-checkmark:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-checkmark:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+/* Checkmark — danger */
+
+.action-link--icon-checkmark.action-link--danger::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-checkmark.action-link--danger:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+.action-link--icon-checkmark.action-link--danger:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-checkmark.action-link--icon-checkmark.action-link--icon-checkmark::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E") !important;
+ }
+}
+
+/* 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.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.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.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.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.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.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.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/core/themes/claro/css/src/components/action-link.pcss.css b/core/themes/claro/css/src/components/action-link.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..30af86a232ca6da9913f316dc465d9205155edc5
--- /dev/null
+++ b/core/themes/claro/css/src/components/action-link.pcss.css
@@ -0,0 +1,386 @@
+/**
+ * @file
+ * Styles for action links.
+ *
+ * Contains Action link component and the action-links layout styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Action links layout.
+ */
+.action-links,
+[dir="rtl"] .action-links {
+ margin: var(--space-l) 0;
+ list-style: none;
+}
+
+.action-links__item {
+ display: inline-block;
+}
+
+.action-links__item + .action-links__item > .action-link {
+ margin-left: var(--space-s); /* LTR */
+}
+[dir="rtl"] .action-links__item + .action-links__item > .action-link {
+ margin-right: var(--space-s);
+ margin-left: 0;
+}
+
+.action-links__item + .action-links__item > .action-link--small {
+ margin-left: var(--space-xs); /* LTR */
+}
+[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {
+ margin-right: var(--space-xs);
+ margin-left: 0;
+}
+
+/**
+ * The action link component.
+ */
+.action-link {
+ display: inline-block;
+ padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
+ cursor: pointer;
+ text-decoration: none;
+ color: var(--color-davysgrey);
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--color-bg);
+ font-size: var(--font-size-base);
+ font-weight: 700;
+ line-height: var(--space-l); /* Bigger line-height needed to prevent the icon from increasing the height */
+ -webkit-font-smoothing: antialiased;
+}
+
+/* Small variant. */
+.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 */
+}
+[dir="rtl"] .action-link + .action-link {
+ margin-right: var(--space-s);
+ margin-left: 0;
+}
+.no-touchevents .action-link--small + .action-link--small,
+.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
+ margin-left: var(--space-xs); /* LTR */
+}
+[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;
+}
+
+/**
+ * Action links inside form-actions.
+ *
+ * Add the same margin for action-link inside form-actions as button has.
+ */
+.form-actions .action-link {
+ margin-right: var(--space-s); /* LTR */
+ margin-left: 0; /* LTR */
+}
+[dir="rtl"] .form-actions .action-link {
+ margin-right: 0;
+ margin-left: var(--space-s);
+}
+
+/* Action link states */
+.action-link:hover {
+ text-decoration: none;
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
+}
+.action-link:focus {
+ position: relative;
+ z-index: 1;
+ text-decoration: none;
+}
+.action-link:active {
+ color: var(--color-absolutezero-active);
+ background-color: var(--color-bgblue-active);
+}
+
+/**
+ * Action link variants.
+ */
+/* Danger. */
+.action-link--danger {
+ color: var(--color-maximumred);
+}
+.action-link--danger:hover {
+ color: var(--color-maximumred-hover);
+ background-color: var(--color-bgred-hover);
+}
+.action-link--danger:active {
+ color: var(--color-maximumred-active);
+ background-color: var(--color-bgred-active);
+}
+
+/**
+ * Action link icons with states.
+ *
+ * We use parent-relative units here to follow the .action-link's font size.
+ */
+
+/* Defaults for icons */
+.action-link::before {
+ position: relative;
+ top: 0.125rem; /* Set the proper vertical alignment */
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ margin-right: 0.5em; /* LTR */
+ margin-left: calc(var(--space-s) - var(--space-m)); /* LTR */
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+}
+[dir="rtl"] .action-link::before {
+ margin-right: calc(var(--space-s) - var(--space-m));
+ margin-left: 0.5em;
+}
+
+.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.
+ *
+ * IE 11 does not display inline svg backgrounds
+ */
+@media screen and (-ms-high-contrast: active) {
+ /* stylelint-disable-next-line selector-type-no-unknown */
+ _:-ms-fullscreen,
+ .action-link::before {
+ display: none;
+ }
+}
+
+/* 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 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 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 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 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 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 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 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='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='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='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='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='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='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='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;
+ }
+}
+
+/* Ex */
+.action-link--icon-ex::before {
+ content: "";
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+.action-link--icon-ex:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+.action-link--icon-ex:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+/* Ex — danger */
+.action-link--icon-ex.action-link--danger::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+.action-link--icon-ex.action-link--danger:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+.action-link--icon-ex.action-link--danger:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-ex.action-link--icon-ex.action-link--icon-ex::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='1.5' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 3L3 13'/%3E%3Cpath d='M13 13L3 3'/%3E%3C/svg%3E") !important;
+ }
+}
+
+/* Checkmark */
+.action-link--icon-checkmark::before {
+ content: "";
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23545560' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+.action-link--icon-checkmark:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%230036b1' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+.action-link--icon-checkmark:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2300309e' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+/* Checkmark — danger */
+.action-link--icon-checkmark.action-link--danger::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23d72222' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+.action-link--icon-checkmark.action-link--danger:hover::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23c11f1f' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+.action-link--icon-checkmark.action-link--danger:active::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ab1b1b' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-checkmark.action-link--icon-checkmark.action-link--icon-checkmark::before {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='windowText' stroke-width='2' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.57143L5.6 12L14 4'/%3E%3C/svg%3E") !important;
+ }
+}
+
+/* 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.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.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.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.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.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.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.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/core/themes/claro/css/src/components/ajax-progress.module.css b/core/themes/claro/css/src/components/ajax-progress.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..f9f09fbadc9bcfd49c658fda92dac5b98cafaa9c
--- /dev/null
+++ b/core/themes/claro/css/src/components/ajax-progress.module.css
@@ -0,0 +1,238 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Throbber.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.ajax-progress {
+ display: inline-block;
+}
+
+/**
+ * Progress bar.
+ */
+
+.ajax-progress-bar {
+ width: 13em;
+ padding: 0 0.3125rem; /* 0 5px */
+}
+
+/**
+ * Throbber.
+ */
+
+.ajax-progress--throbber {
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-align-content: center;
+ -ms-flex-line-pack: center;
+ align-content: center;
+ height: 1.125rem;
+ margin: -3px 0.75rem 0;
+ vertical-align: middle;
+ white-space: nowrap;
+ line-height: 1.125rem;
+}
+
+/**
+ * Remove margin from ajax throbbers following buttons because buttons already
+ * have a large margin set.
+ */
+
+.js .button:not(.js-hide) + .ajax-progress--throbber {
+ margin-left: 0; /* LTR */
+}
+
+[dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
+ margin-right: 0;
+ margin-left: 0.75rem;
+}
+
+/**
+ * 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: 0.75rem; /* 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: 0.75rem;
+ margin-left: 0.75rem;
+}
+
+.ajax-progress__throbber {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 1.125rem;
+ height: 1.125rem;
+ -webkit-animation: claro-throbber 0.75s linear infinite;
+ -moz-animation: claro-throbber 0.75s linear infinite;
+ -o-animation: claro-throbber 0.75s linear infinite;
+ animation: claro-throbber 0.75s linear infinite;
+ border: 2px solid #003cc5;
+ border-right: 2px dotted transparent;
+ border-radius: 50%;
+}
+
+.ajax-progress__message {
+ display: inline-block;
+ padding-left: 0.75rem;
+ font-size: 0.889rem;
+}
+
+[dir="rtl"] .ajax-progress__message {
+ padding-right: 0.75rem;
+ padding-left: 0;
+}
+
+/**
+ * Full screen throbber.
+ */
+
+.ajax-progress--fullscreen {
+ position: fixed;
+ z-index: 1000;
+ top: 50%;
+ left: 50%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 3.5rem; /* 56px */
+ height: 3.5rem;
+ margin: -1.75rem;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 3.5rem;
+ background: #fff;
+ -webkit-box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+ box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+}
+
+.ajax-progress__throbber--fullscreen {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1.75rem; /* 28px */
+ height: 1.75rem; /* 28px */
+ margin: -0.875rem;
+ content: "";
+ border: 3px solid #003cc5;
+ border-right: 3px dotted transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ /**
+ * Throbber animation is shaky on Edge RTL on high contrast for border width
+ * less than 4px.
+ */
+ @supports (-ms-ime-align:auto) {
+ [dir="rtl"] .ajax-progress__throbber {
+ border-width: 4px;
+ }
+ }
+}
+
+@-webkit-keyframes claro-throbber {
+ 0% {
+ -webkit-transform: rotateZ(0);
+ transform: rotateZ(0);
+ }
+ 100% {
+ -webkit-transform: rotateZ(360deg);
+ transform: rotateZ(360deg);
+ }
+}
+
+@-moz-keyframes claro-throbber {
+ 0% {
+ -moz-transform: rotateZ(0);
+ transform: rotateZ(0);
+ }
+ 100% {
+ -moz-transform: rotateZ(360deg);
+ transform: rotateZ(360deg);
+ }
+}
+
+@-o-keyframes claro-throbber {
+ 0% {
+ -o-transform: rotateZ(0);
+ transform: rotateZ(0);
+ }
+ 100% {
+ -o-transform: rotateZ(360deg);
+ transform: rotateZ(360deg);
+ }
+}
+
+@keyframes claro-throbber {
+ 0% {
+ -webkit-transform: rotateZ(0);
+ -moz-transform: rotateZ(0);
+ -o-transform: rotateZ(0);
+ transform: rotateZ(0);
+ }
+ 100% {
+ -webkit-transform: rotateZ(360deg);
+ -moz-transform: rotateZ(360deg);
+ -o-transform: rotateZ(360deg);
+ transform: rotateZ(360deg);
+ }
+}
diff --git a/core/themes/claro/css/src/components/ajax-progress.module.pcss.css b/core/themes/claro/css/src/components/ajax-progress.module.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..91a595f39456d81915848c3e43d9c0d1d75e6ba7
--- /dev/null
+++ b/core/themes/claro/css/src/components/ajax-progress.module.pcss.css
@@ -0,0 +1,127 @@
+/**
+ * @file
+ * Throbber.
+ */
+
+@import "../base/variables.pcss.css";
+
+.ajax-progress {
+ display: inline-block;
+}
+
+/**
+ * Progress bar.
+ */
+
+.ajax-progress-bar {
+ width: 13em;
+ padding: 0 0.3125rem; /* 0 5px */
+}
+
+/**
+ * Throbber.
+ */
+.ajax-progress--throbber {
+ position: relative;
+ display: inline-flex;
+ align-content: center;
+ height: 1.125rem;
+ margin: -3px var(--ajax-progress-margin-horizontal) 0;
+ vertical-align: middle;
+ white-space: nowrap;
+ line-height: 1.125rem;
+}
+
+/**
+ * Remove margin from ajax throbbers following buttons because buttons already
+ * have a large margin set.
+ */
+.js .button:not(.js-hide) + .ajax-progress--throbber {
+ margin-left: 0; /* LTR */
+}
+[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 {
+ box-sizing: border-box;
+ width: 1.125rem;
+ height: 1.125rem;
+ animation: claro-throbber 0.75s linear infinite;
+ border: 2px solid var(--color-absolutezero);
+ border-right: 2px dotted transparent;
+ border-radius: 50%;
+}
+
+.ajax-progress__message {
+ display: inline-block;
+ padding-left: var(--ajax-progress-margin-horizontal);
+ font-size: var(--font-size-label);
+}
+[dir="rtl"] .ajax-progress__message {
+ padding-right: var(--ajax-progress-margin-horizontal);
+ padding-left: 0;
+}
+/**
+ * Full screen throbber.
+ */
+.ajax-progress--fullscreen {
+ position: fixed;
+ z-index: 1000;
+ top: 50%;
+ left: 50%;
+ box-sizing: border-box;
+ width: 3.5rem; /* 56px */
+ height: 3.5rem;
+ margin: -1.75rem;
+ border: var(--input-border-size) solid var(--jui-dropdown-border-color);
+ border-radius: 3.5rem;
+ background: var(--color-white);
+ box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
+}
+.ajax-progress__throbber--fullscreen {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1.75rem; /* 28px */
+ height: 1.75rem; /* 28px */
+ margin: -0.875rem;
+ content: "";
+ border: 3px solid var(--color-absolutezero);
+ border-right: 3px dotted transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ /**
+ * Throbber animation is shaky on Edge RTL on high contrast for border width
+ * less than 4px.
+ */
+ @supports (-ms-ime-align:auto) {
+ [dir="rtl"] .ajax-progress__throbber {
+ border-width: 4px;
+ }
+ }
+}
+
+@keyframes claro-throbber {
+ 0% {
+ transform: rotateZ(0);
+ }
+ 100% {
+ transform: rotateZ(360deg);
+ }
+}
diff --git a/core/themes/claro/css/src/components/autocomplete-loading.module.css b/core/themes/claro/css/src/components/autocomplete-loading.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..dde906a455d6dc739c39a74f41e803a3224cece8
--- /dev/null
+++ b/core/themes/claro/css/src/components/autocomplete-loading.module.css
@@ -0,0 +1,148 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for animated throbber.
+ *
+ * @see autocomplete.js
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Since the autocomplete library is attached conditionally and not globally,
+ * we can be 99% sure that the default icon will be used.
+ * With inline SVGs we can prevent a HTTP request and repaint addressing the
+ * autocomplete input's background — until are sure that it will be pushed by
+ * the server with HTTP/2.
+ *
+ * The autocompleting (active) state's background-image is inlined because
+ * non-used CSS selectors are usually ignored; popular browsers don't download
+ * their 'url' references.
+ * If these selectors become active, the browser needs some time for painting
+ * previously ignored remote asset: it should get it from server, parse it and
+ * repaint the background of autocomplete field. With the inlined background we
+ * can prevent an additional timeout caused by a new request/response pair.
+ * Besides this, the autocompleting event itself may easily finish before the
+ * missing asset gets downloaded/parsed/painted, and the missing instant visual
+ * feedback would be a usability/accessibility issue as well.
+ */
+
+.js .form-autocomplete {
+ background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+}
+
+.js .form-autocomplete::-ms-clear {
+ display: none;
+}
+
+.js[dir="rtl"] .form-autocomplete {
+ background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
+ background-position: 0 50%;
+}
+
+.js .form-autocomplete.is-autocompleting {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
+}
+
+.js[dir="rtl"] .form-autocomplete.is-autocompleting {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
+}
+
+/* IE11 does not animate inline SVG. */
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen,
+.js .form-autocomplete.is-autocompleting {
+ background-image: url("../../../images/spinner-ltr.gif");
+ background-size: 2.5rem 1.25rem;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen,
+.js[dir="rtl"] .form-autocomplete.is-autocompleting {
+ background-image: url("../../../images/spinner-rtl.gif");
+}
+
+/**
+ * Autocomplete wrapper for autocompleting message.
+ */
+
+.claro-autocomplete {
+ position: relative;
+ display: inline-block;
+ max-width: 100%;
+ margin: 0.25rem 0;
+}
+
+.claro-autocomplete__message {
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+ max-width: 100%;
+ margin-bottom: 0.15rem;
+ color: #003cc5;
+ font-size: 0.702rem; /* ~11px */
+ font-weight: bold;
+ line-height: 1.125rem; /* 18px */
+}
+
+[dir="rtl"] .claro-autocomplete__message {
+ right: auto;
+ left: 0;
+}
+
+.js .is-autocompleting + .claro-autocomplete__message {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/src/components/autocomplete-loading.module.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..828fe2b2a4ce72847fb5df9055624567bb9bd94e
--- /dev/null
+++ b/core/themes/claro/css/src/components/autocomplete-loading.module.pcss.css
@@ -0,0 +1,86 @@
+/**
+ * @file
+ * Visual styles for animated throbber.
+ *
+ * @see autocomplete.js
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Since the autocomplete library is attached conditionally and not globally,
+ * we can be 99% sure that the default icon will be used.
+ * With inline SVGs we can prevent a HTTP request and repaint addressing the
+ * autocomplete input's background — until are sure that it will be pushed by
+ * the server with HTTP/2.
+ *
+ * The autocompleting (active) state's background-image is inlined because
+ * non-used CSS selectors are usually ignored; popular browsers don't download
+ * their 'url' references.
+ * If these selectors become active, the browser needs some time for painting
+ * previously ignored remote asset: it should get it from server, parse it and
+ * repaint the background of autocomplete field. With the inlined background we
+ * can prevent an additional timeout caused by a new request/response pair.
+ * Besides this, the autocompleting event itself may easily finish before the
+ * missing asset gets downloaded/parsed/painted, and the missing instant visual
+ * feedback would be a usability/accessibility issue as well.
+ */
+
+.js .form-autocomplete {
+ background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+}
+.js .form-autocomplete::-ms-clear {
+ display: none;
+}
+.js[dir="rtl"] .form-autocomplete {
+ background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
+ background-position: 0 50%;
+}
+.js .form-autocomplete.is-autocompleting {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
+}
+.js[dir="rtl"] .form-autocomplete.is-autocompleting {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
+}
+/* IE11 does not animate inline SVG. */
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+.js .form-autocomplete.is-autocompleting {
+ background-image: url("../../../images/spinner-ltr.gif");
+ background-size: 2.5rem 1.25rem;
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+.js[dir="rtl"] .form-autocomplete.is-autocompleting {
+ background-image: url("../../../images/spinner-rtl.gif");
+}
+
+/**
+ * Autocomplete wrapper for autocompleting message.
+ */
+.claro-autocomplete {
+ position: relative;
+ display: inline-block;
+ max-width: 100%;
+ margin: 0.25rem 0;
+}
+.claro-autocomplete__message {
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+ max-width: 100%;
+ margin-bottom: 0.15rem;
+ color: var(--color-link);
+ font-size: var(--font-size-xxs); /* ~11px */
+ font-weight: bold;
+ line-height: calc(18rem / 16); /* 18px */
+}
+[dir="rtl"] .claro-autocomplete__message {
+ right: auto;
+ left: 0;
+}
+.js .is-autocompleting + .claro-autocomplete__message {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/breadcrumb.css b/core/themes/claro/css/src/components/breadcrumb.css
new file mode 100644
index 0000000000000000000000000000000000000000..b496acca6775eca92f9f79ff1e965994d241103a
--- /dev/null
+++ b/core/themes/claro/css/src/components/breadcrumb.css
@@ -0,0 +1,90 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Breadcrumbs.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.breadcrumb {
+ padding: 0;
+ color: #222330;
+ font-size: 0.79rem;
+}
+
+.breadcrumb__list,
+[dir="rtl"] .breadcrumb__list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.breadcrumb__item,
+.breadcrumb__link {
+ display: inline;
+ text-decoration: none;
+ color: #222330;
+ font-weight: bold;
+}
+
+.breadcrumb__item + .breadcrumb__item::before {
+ padding: 0 0.75rem;
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
+}
+
+[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
+}
+
+.breadcrumb__link:hover,
+.breadcrumb__link:focus {
+ text-decoration: none;
+}
diff --git a/core/themes/claro/css/src/components/breadcrumb.pcss.css b/core/themes/claro/css/src/components/breadcrumb.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..288d9c9f36f39176b59095a3d316f45de99c5e87
--- /dev/null
+++ b/core/themes/claro/css/src/components/breadcrumb.pcss.css
@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Breadcrumbs.
+ */
+
+@import "../base/variables.pcss.css";
+
+.breadcrumb {
+ padding: 0;
+ color: var(--color-text);
+ font-size: 0.79rem;
+}
+
+.breadcrumb__list,
+[dir="rtl"] .breadcrumb__list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.breadcrumb__item,
+.breadcrumb__link {
+ display: inline;
+ text-decoration: none;
+ color: var(--color-text);
+ font-weight: bold;
+}
+
+.breadcrumb__item + .breadcrumb__item::before {
+ padding: 0 0.75rem;
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
+}
+
+[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
+}
+
+.breadcrumb__link:hover,
+.breadcrumb__link:focus {
+ text-decoration: none;
+}
diff --git a/core/themes/claro/css/src/components/button.css b/core/themes/claro/css/src/components/button.css
new file mode 100644
index 0000000000000000000000000000000000000000..57418eb1d56a0e62872da529a622ee6d6b61e5a5
--- /dev/null
+++ b/core/themes/claro/css/src/components/button.css
@@ -0,0 +1,247 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Structural styles for Claro's UI buttons
+ *
+ * Apply these classes to button elements (<button>, <input type="button" />).
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Buttons.
+ *
+ * 1. Padding widths detracted by width of the transparent borders to make
+ * button size match with design system.
+ * 2. Transparent border is needed for high contrast mode. This has to be set to
+ * !important to render Firefox borders with consistent width in high
+ * contrast mode.
+ * 3. Prevent fat text in WebKit.
+ *
+ * @todo Consider moving box-sizing into base.css under a universal selector.
+ * See https://www.drupal.org/node/2124251
+ */
+
+/**
+ * Base button styles.
+ *
+ * These styles have been duplicated to dropbutton.css and action-links.css
+ * since those components inherits most of these design elements. Whenever
+ * making changes to this file, remember to check if that needs to be applied to
+ * dropbutton.css or action-links.css as well.
+ */
+
+.button {
+ display: inline-block;
+ margin: 1rem 0.75rem 1rem 0; /* LTR */
+ padding: -webkit-calc(1rem - 1px) -webkit-calc(1.5rem - 1px);
+ padding: -moz-calc(1rem - 1px) -moz-calc(1.5rem - 1px);
+ padding: calc(1rem - 1px) calc(1.5rem - 1px); /* 1 */
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ color: #222330;
+ border: 1px solid transparent !important; /* 2 */
+ border-radius: 2px;
+ background-color: #d4d4d8;
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1rem;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased; /* 3 */
+}
+
+[dir="rtl"] .button {
+ margin: 1rem 0 1rem 0.75rem;
+}
+
+.button:not(:focus) {
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.button:hover {
+ text-decoration: none;
+ background-color: #c2c3ca;
+}
+
+.button:focus {
+ text-decoration: none;
+}
+
+.button:active {
+ background-color: #adaeb3;
+}
+
+/* Common styles for small buttons */
+
+.no-touchevents .button--small {
+ margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
+ padding: -webkit-calc(0.5rem - 1px) -webkit-calc(1rem - 1px);
+ padding: -moz-calc(0.5rem - 1px) -moz-calc(1rem - 1px);
+ padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
+ font-size: 0.79rem;
+}
+
+/* Common styles for extra small buttons */
+
+.no-touchevents .button--extrasmall {
+ margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
+ padding: -webkit-calc(0.25rem - 1px) -webkit-calc(0.75rem - 1px);
+ padding: -moz-calc(0.25rem - 1px) -moz-calc(0.75rem - 1px);
+ padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
+ font-size: 0.79rem;
+}
+
+[dir="rtl"].no-touchevents .button--small,
+[dir="rtl"].no-touchevents .button--extrasmall {
+ margin-right: 0;
+ margin-left: 0.5rem;
+}
+
+/* Styles for action link buttons */
+
+.button--action {
+ margin: 0;
+}
+
+.button--action::before {
+ margin-left: -0.25em; /* LTR */
+ padding-right: 0.25em; /* LTR */
+ content: "+";
+ font-weight: 900;
+}
+
+[dir="rtl"] .button--action::before {
+ margin-right: -0.25em;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0.25em;
+}
+
+/* Primary button styles */
+
+.button--primary {
+ color: #fff;
+ background-color: #003cc5;
+}
+
+.button--primary:hover {
+ color: #fff;
+ background-color: #0036b1;
+}
+
+.button--primary:active {
+ background-color: #00339a;
+}
+
+/* Danger button styles */
+
+.button--danger {
+ color: #fff;
+ background-color: #d72222;
+}
+
+.button--danger:hover {
+ color: #fff;
+ background-color: #c11f1f;
+}
+
+.button--danger:active {
+ background-color: #ab1b1b;
+}
+
+/**
+ * Disabled state styles as last.
+ *
+ * Overrides every definitions before, including variants.
+ */
+
+.button:disabled,
+.button.is-disabled {
+ color: #8e929c;
+ background-color: #ebebed;
+}
+
+.button--primary:disabled,
+.button--primary.is-disabled {
+ color: #82828c;
+ background-color: #d4d4d8;
+}
+
+/* Make disabled <link> behave like a [disabled] <input> or <button> */
+
+.button.is-disabled {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ pointer-events: none;
+}
+
+/**
+ * Style a clickable/tappable element as a link. Duplicates the base style for
+ * the <a> tag, plus a reset for padding, borders and background.
+ */
+
+.link {
+ display: inline;
+ padding: 0;
+ cursor: pointer;
+ text-decoration: underline;
+ border: 0;
+ background: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
diff --git a/core/themes/claro/css/src/components/button.pcss.css b/core/themes/claro/css/src/components/button.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..307b5233d645b65bc40d94d8aa9b81fc57328a54
--- /dev/null
+++ b/core/themes/claro/css/src/components/button.pcss.css
@@ -0,0 +1,170 @@
+/**
+ * @file
+ * Structural styles for Claro's UI buttons
+ *
+ * Apply these classes to button elements (<button>, <input type="button" />).
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Buttons.
+ *
+ * 1. Padding widths detracted by width of the transparent borders to make
+ * button size match with design system.
+ * 2. Transparent border is needed for high contrast mode. This has to be set to
+ * !important to render Firefox borders with consistent width in high
+ * contrast mode.
+ * 3. Prevent fat text in WebKit.
+ *
+ * @todo Consider moving box-sizing into base.css under a universal selector.
+ * See https://www.drupal.org/node/2124251
+ */
+
+/**
+ * Base button styles.
+ *
+ * These styles have been duplicated to dropbutton.css and action-links.css
+ * since those components inherits most of these design elements. Whenever
+ * making changes to this file, remember to check if that needs to be applied to
+ * dropbutton.css or action-links.css as well.
+ */
+.button {
+ display: inline-block;
+ margin: var(--space-m) var(--space-s) var(--space-m) 0; /* LTR */
+ padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ color: var(--button-fg-color);
+ border: 1px solid transparent !important; /* 2 */
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--button-bg-color);
+ font-size: var(--font-size-base);
+ font-weight: 700;
+ line-height: 1rem;
+ appearance: none;
+ -webkit-font-smoothing: antialiased; /* 3 */
+}
+[dir="rtl"] .button {
+ margin: var(--space-m) 0 var(--space-m) var(--space-s);
+}
+
+.button:not(:focus) {
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.button:hover {
+ text-decoration: none;
+ background-color: var(--button--hover-bg-color);
+}
+
+.button:focus {
+ text-decoration: none;
+}
+
+.button:active {
+ background-color: var(--button--active-bg-color);
+}
+
+/* Common styles for small buttons */
+.no-touchevents .button--small {
+ margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */
+ padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
+ font-size: var(--font-size-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 */
+.button--action {
+ margin: 0;
+}
+
+.button--action::before {
+ margin-left: -0.25em; /* LTR */
+ padding-right: 0.25em; /* LTR */
+ content: "+";
+ font-weight: 900;
+}
+[dir="rtl"] .button--action::before {
+ margin-right: -0.25em;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0.25em;
+}
+
+/* Primary button styles */
+.button--primary {
+ color: var(--button-fg-color--primary);
+ background-color: var(--button-bg-color--primary);
+}
+
+.button--primary:hover {
+ color: var(--button-fg-color--primary);
+ background-color: var(--button--hover-bg-color--primary);
+}
+
+.button--primary:active {
+ background-color: var(--button--active-bg-color--primary);
+}
+
+/* Danger button styles */
+.button--danger {
+ color: var(--button-fg-color--danger);
+ background-color: var(--button-bg-color--danger);
+}
+.button--danger:hover {
+ color: var(--button-fg-color--danger);
+ background-color: var(--button--hover-bg-color--danger);
+}
+.button--danger:active {
+ background-color: var(--button--active-bg-color--danger);
+}
+
+/**
+ * Disabled state styles as last.
+ *
+ * Overrides every definitions before, including variants.
+ */
+.button:disabled,
+.button.is-disabled {
+ color: var(--button--disabled-fg-color);
+ background-color: var(--button--disabled-bg-color);
+}
+
+.button--primary:disabled,
+.button--primary.is-disabled {
+ color: var(--button--disabled-fg-color--primary);
+ background-color: var(--button--disabled-bg-color--primary);
+}
+
+/* Make disabled <link> behave like a [disabled] <input> or <button> */
+.button.is-disabled {
+ user-select: none;
+ pointer-events: none;
+}
+
+/**
+ * Style a clickable/tappable element as a link. Duplicates the base style for
+ * the <a> tag, plus a reset for padding, borders and background.
+ */
+.link {
+ display: inline;
+ padding: 0;
+ cursor: pointer;
+ text-decoration: underline;
+ border: 0;
+ background: none;
+ appearance: none;
+}
diff --git a/core/themes/claro/css/src/components/card.css b/core/themes/claro/css/src/components/card.css
new file mode 100644
index 0000000000000000000000000000000000000000..32fbcbf76ead769ad02aecac4d31e53449aa83c3
--- /dev/null
+++ b/core/themes/claro/css/src/components/card.css
@@ -0,0 +1,290 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Card.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.card {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -moz-box-orient: vertical;
+ -moz-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: stretch;
+ -webkit-align-items: stretch;
+ -moz-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ justify-items: flex-start;
+ padding: 0;
+ border: 1px solid rgba(212, 212, 218, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+4px
+10px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+4px
+10px
+rgba(0, 0, 0, 0.1);
+}
+
+/* 588px theme screenshot width */
+
+@media screen and (min-width: 36.75rem) {
+ .card--horizontal {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -moz-box-orient: horizontal;
+ -moz-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -moz-box-orient: vertical;
+ -moz-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+
+@media screen and (min-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -moz-box-orient: horizontal;
+ -moz-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+}
+
+/**
+ * Card image.
+ */
+
+.card__image {
+ overflow: hidden;
+ border-radius: 1px 1px 0 0;
+ line-height: 0;
+}
+
+@media screen and (min-width: 36.75rem) {
+ .card--horizontal .card__image {
+ -webkit-flex-basis: 35%;
+ -ms-flex-preferred-size: 35%;
+ flex-basis: 35%;
+ border-radius: 1px 0 0 1px; /* LTR */
+ }
+ [dir="rtl"] .card--horizontal .card__image {
+ border-radius: 0 1px 1px 0;
+ }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+
+@media screen and (max-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
+ -webkit-flex-basis: auto;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ }
+}
+
+@media screen and (min-width: 85.375rem) {
+ .card--horizontal .card__image {
+ -webkit-flex-basis: 45%;
+ -ms-flex-preferred-size: 45%;
+ flex-basis: 45%;
+ }
+
+ /* .card--vertical .card__image {
+ flex-basis: auto;
+ } */
+}
+
+/**
+ * Card content.
+ */
+
+.card__content-wrapper {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -moz-box-orient: vertical;
+ -moz-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -moz-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 1.5rem;
+}
+
+@media screen and (min-width: 36.75rem) {
+ .card--horizontal .card__content-wrapper {
+ -webkit-flex-basis: 65%;
+ -ms-flex-preferred-size: 65%;
+ flex-basis: 65%;
+ }
+
+ /* Card content with image. */
+ .card--horizontal .card__image ~ .card__content-wrapper {
+ padding-left: 1rem;
+ }
+ [dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper {
+ padding-right: 1rem;
+ padding-left: 1.5rem;
+ }
+}
+
+@media screen and (max-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
+ -webkit-flex-basis: auto;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ }
+}
+
+@media screen and (min-width: 85.375rem) {
+ .card--horizontal .card__content-wrapper {
+ -webkit-flex-basis: 55%;
+ -ms-flex-preferred-size: 55%;
+ flex-basis: 55%;
+ }
+}
+
+/**
+ * Card content.
+ */
+
+.card__content {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -moz-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+/**
+ * Card content items (title, description).
+ */
+
+.card__content-item {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+.card__content-item:last-child {
+ margin-bottom: 0;
+}
+
+/**
+ * Card footer.
+ */
+
+.card__footer {
+ /**
+ * Without specifying flex-shrink, IE11 will increase footer height if an
+ * interactive element inside is hovered or focused.
+ */
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-ordinal-group: 101;
+ -webkit-order: 100;
+ -moz-box-ordinal-group: 101;
+ -ms-flex-order: 100;
+ order: 100;
+ margin-top: 1.5rem;
+}
+
+.card__footer .action-links,
+[dir="rtl"] .card__footer .action-links {
+ margin-top: 0;
+ margin-bottom: 0;
+ text-align: right; /* LTR */
+}
+
+[dir="rtl"] .card__footer .action-links {
+ text-align: left;
+}
diff --git a/core/themes/claro/css/src/components/card.pcss.css b/core/themes/claro/css/src/components/card.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..6a3b286dacb3adbb8cd2b6e1e0d7ac9c06c8894f
--- /dev/null
+++ b/core/themes/claro/css/src/components/card.pcss.css
@@ -0,0 +1,161 @@
+/**
+ * @file
+ * Card.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --card-bg-color: var(--color-white);
+ --card-border-size: 1px;
+ --card-border-color: var(--color-lightgray-o-80);
+ --card-border-radius-size: var(--base-border-radius);
+ --card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
+ --card-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-items: flex-start;
+ padding: 0;
+ border: var(--card-border-size) solid var(--card-border-color);
+ border-radius: var(--card-border-radius-size);
+ background-color: var(--card-bg-color);
+ box-shadow: var(--card-box-shadow);
+}
+
+/* 588px theme screenshot width */
+@media screen and (min-width: 36.75rem) {
+ .card--horizontal {
+ flex-direction: row;
+ }
+
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
+ flex-direction: column;
+ }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+@media screen and (min-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
+ flex-direction: row;
+ }
+}
+
+/**
+ * Card image.
+ */
+.card__image {
+ overflow: hidden;
+ border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
+ line-height: 0;
+}
+
+@media screen and (min-width: 36.75rem) {
+ .card--horizontal .card__image {
+ flex-basis: 35%;
+ border-radius: var(--card-image-border-radius-size) 0 0 var(--card-image-border-radius-size); /* LTR */
+ }
+ [dir="rtl"] .card--horizontal .card__image {
+ border-radius: 0 var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0;
+ }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+@media screen and (max-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
+ flex-basis: auto;
+ }
+}
+
+@media screen and (min-width: 85.375rem) {
+ .card--horizontal .card__image {
+ flex-basis: 45%;
+ }
+
+ /* .card--vertical .card__image {
+ flex-basis: auto;
+ } */
+}
+
+/**
+ * Card content.
+ */
+.card__content-wrapper {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ padding: var(--space-l);
+}
+
+@media screen and (min-width: 36.75rem) {
+ .card--horizontal .card__content-wrapper {
+ flex-basis: 65%;
+ }
+
+ /* Card content with image. */
+ .card--horizontal .card__image ~ .card__content-wrapper {
+ padding-left: var(--space-m);
+ }
+ [dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper {
+ padding-right: var(--space-m);
+ padding-left: var(--space-l);
+ }
+}
+
+@media screen and (max-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
+ flex-basis: auto;
+ }
+}
+
+@media screen and (min-width: 85.375rem) {
+ .card--horizontal .card__content-wrapper {
+ flex-basis: 55%;
+ }
+}
+
+/**
+ * Card content.
+ */
+.card__content {
+ flex-grow: 1;
+}
+
+/**
+ * Card content items (title, description).
+ */
+.card__content-item {
+ margin-top: 0;
+ margin-bottom: var(--space-m);
+}
+.card__content-item:last-child {
+ margin-bottom: 0;
+}
+
+/**
+ * Card footer.
+ */
+.card__footer {
+ /**
+ * Without specifying flex-shrink, IE11 will increase footer height if an
+ * interactive element inside is hovered or focused.
+ */
+ flex-shrink: 0;
+ order: 100;
+ margin-top: var(--space-l);
+}
+
+.card__footer .action-links,
+[dir="rtl"] .card__footer .action-links {
+ margin-top: 0;
+ margin-bottom: 0;
+ text-align: right; /* LTR */
+}
+[dir="rtl"] .card__footer .action-links {
+ text-align: left;
+}
diff --git a/core/themes/claro/css/src/components/container-inline.css b/core/themes/claro/css/src/components/container-inline.css
new file mode 100644
index 0000000000000000000000000000000000000000..d2093cf8d34f40fc3840f243a4c0d17b436a0279
--- /dev/null
+++ b/core/themes/claro/css/src/components/container-inline.css
@@ -0,0 +1,24 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline .form-radios label:after {
+ content: "";
+}
+
+.container-inline .form-radios .form-type-radio {
+ margin-right: 1em;
+}
+
+[dir="rtl"] .container-inline .form-radios .form-type-radio {
+ margin-right: 0;
+ margin-left: 1em;
+}
diff --git a/core/themes/claro/css/src/components/container-inline.module.css b/core/themes/claro/css/src/components/container-inline.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..f9830a728770461d4ea37eb9470e061f0cf3a561
--- /dev/null
+++ b/core/themes/claro/css/src/components/container-inline.module.css
@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline div,
+.container-inline label {
+ display: inline-block;
+}
+
+.form-items-inline {
+ margin-top: -0.125em; /* 2px */
+ margin-bottom: -0.125em;
+}
+
+.form-items-inline > .form-item {
+ display: inline-block;
+ margin-top: 0.125em;
+ margin-bottom: 0.125em;
+}
diff --git a/core/themes/claro/css/src/components/container-inline.module.pcss.css b/core/themes/claro/css/src/components/container-inline.module.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..1de39bb552214413c880fb5324afa4e0a66c50c4
--- /dev/null
+++ b/core/themes/claro/css/src/components/container-inline.module.pcss.css
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline div,
+.container-inline label {
+ display: inline-block;
+}
+
+.form-items-inline {
+ margin-top: -0.125em; /* 2px */
+ margin-bottom: -0.125em;
+}
+
+.form-items-inline > .form-item {
+ display: inline-block;
+ margin-top: 0.125em;
+ margin-bottom: 0.125em;
+}
diff --git a/core/themes/claro/css/src/components/container-inline.pcss.css b/core/themes/claro/css/src/components/container-inline.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..3a4570046ff727940b155c32e30573696aa81f57
--- /dev/null
+++ b/core/themes/claro/css/src/components/container-inline.pcss.css
@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline .form-radios label:after {
+ content: "";
+}
+.container-inline .form-radios .form-type-radio {
+ margin-right: 1em;
+}
+[dir="rtl"] .container-inline .form-radios .form-type-radio {
+ margin-right: 0;
+ margin-left: 1em;
+}
diff --git a/core/themes/claro/css/src/components/content-header.css b/core/themes/claro/css/src/components/content-header.css
new file mode 100644
index 0000000000000000000000000000000000000000..3668c7ea15fbf1fed0bfdc5ebf95b4108eb1cccc
--- /dev/null
+++ b/core/themes/claro/css/src/components/content-header.css
@@ -0,0 +1,61 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Content header.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.content-header {
+ overflow: hidden;
+ margin-bottom: 2rem;
+ padding: 1.5rem 0 0;
+ background-color: #f3f4f9;
+}
diff --git a/core/themes/claro/css/src/components/content-header.pcss.css b/core/themes/claro/css/src/components/content-header.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..c82370be799e4ccbe19b3695d2dbe3c7961a7e76
--- /dev/null
+++ b/core/themes/claro/css/src/components/content-header.pcss.css
@@ -0,0 +1,12 @@
+/**
+ * Content header.
+ */
+
+@import "../base/variables.pcss.css";
+
+.content-header {
+ overflow: hidden;
+ margin-bottom: 2rem;
+ padding: 1.5rem 0 0;
+ background-color: var(--color-whitesmoke);
+}
diff --git a/core/themes/claro/css/src/components/details.css b/core/themes/claro/css/src/components/details.css
new file mode 100644
index 0000000000000000000000000000000000000000..14d5624ea471cd2c336e2691f3d4ae4677d89f15
--- /dev/null
+++ b/core/themes/claro/css/src/components/details.css
@@ -0,0 +1,705 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Available modifiers are:
+ * - .claro-details--accordion
+ * - .claro-details--accordion-item
+ *
+ * Despite the fact that 'accordion' isn't used anywhere right now, we
+ * implemented it (since the design defines that).
+ * This variant can be used by setting the '#accordion' to TRUE for a
+ * Details render element:
+ * @code
+ * $build['detail_accordion'] = [
+ * '#type' => 'details',
+ * '#accordion' => TRUE,
+ * ];
+ *
+ * 'Accordion item' is used for the details of the node edit sidebar. For
+ * creating accordion item list from a set of details, set the surrounding
+ * Container render element's '#accordion' key to TRUE.
+ *
+ * 'Vertical tabs item' is used for the children of the VerticalTabs render
+ * element.
+ */
+
+.claro-details {
+ display: block;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ color: #222330;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.claro-details--accordion-item,
+.claro-details--vertical-tabs-item {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.claro-details--accordion-item:first-of-type {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
+.claro-details--accordion-item:last-of-type {
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+/**
+ * Details summary styles.
+ */
+
+.claro-details__summary {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 1rem 1rem 1rem 2.25rem; /* LTR */
+ list-style: none;
+ cursor: pointer;
+ -webkit-transition: background-color 0.12s ease-in-out;
+ -o-transition: background-color 0.12s ease-in-out;
+ -moz-transition: background-color 0.12s ease-in-out;
+ transition: background-color 0.12s ease-in-out;
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ color: #545560;
+ border-radius: 1px;
+ background-color: transparent;
+ line-height: 1rem;
+}
+
+[dir="rtl"] .claro-details__summary {
+ padding-right: 2.25rem;
+ padding-left: 1rem;
+}
+
+/* Modifiers */
+
+.claro-details__summary--accordion,
+.claro-details__summary--accordion-item,
+.claro-details__summary--vertical-tabs-item {
+ padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
+ background: #fff;
+ line-height: 1.5rem;
+}
+
+[dir="rtl"] .claro-details__summary--accordion,
+[dir="rtl"] .claro-details__summary--accordion-item,
+[dir="rtl"] .claro-details__summary--vertical-tabs-item {
+ padding-right: 2.25rem;
+ padding-left: 1.5rem;
+}
+
+/**
+ * Accordion list items must not have border radius except they are the first
+ * or the last ones.
+ */
+
+.claro-details__summary--accordion-item {
+ border-radius: 0;
+}
+
+.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
+.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+/**
+ * Details marker styles.
+ */
+
+/* Remove the marker on Chrome */
+
+.claro-details__summary::-webkit-details-marker {
+ display: none;
+}
+
+.claro-details__summary::before {
+ position: absolute;
+ top: 50%;
+ left: 0.75rem; /* LTR */
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ margin-top: -0.5rem;
+ content: "";
+ -webkit-transition: -webkit-transform 0.12s ease-in 0s;
+ transition: -webkit-transform 0.12s ease-in 0s;
+ -o-transition: -o-transform 0.12s ease-in 0s;
+ -moz-transition: transform 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s;
+ transition: transform 0.12s ease-in 0s;
+ transition: transform 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s, -o-transform 0.12s ease-in 0s;
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -ms-transform: rotate(0);
+ -o-transform: rotate(0);
+ transform: rotate(0); /* LTR */
+ text-align: center;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
+ background-size: contain;
+}
+
+[dir="rtl"] .claro-details__summary::before {
+ right: 0.75rem;
+ left: auto;
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .claro-details__summary::before {
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .claro-details__summary::before {
+ width: 0.5625rem;
+ height: 0.5625rem;
+ margin-top: -0.28125rem;
+ -webkit-transition: margin 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s;
+ transition: margin 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s;
+ -o-transition: margin 0.12s ease-in 0s, -o-transform 0.12s ease-in 0s;
+ -moz-transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s;
+ transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;
+ transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s, -webkit-transform 0.12s ease-in 0s, -moz-transform 0.12s ease-in 0s, -o-transform 0.12s ease-in 0s;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg); /* LTR */
+ border: 0.125rem solid;
+ border-width: 0.125rem 0.125rem 0 0;
+ background: none;
+ }
+
+ [dir="rtl"] .claro-details__summary::before {
+ -webkit-transform: rotate(225deg);
+ -moz-transform: rotate(225deg);
+ -ms-transform: rotate(225deg);
+ -o-transform: rotate(225deg);
+ transform: rotate(225deg);
+ }
+}
+
+/**
+ * Safari (at least version 12.1) cannot handle our details marker
+ * transition properly.
+ *
+ * Every additional pointer triggered toggle event freezes the transition,
+ * and the transition is continued and finished after the pointer leaves
+ * the Detail elements' summary.
+ *
+ * Even that it is possible to provide a JavaScript workaround for it (by
+ * adding/removing a helper class with JavaScript if the Details is
+ * toggled), that hack will make RTL details worse than without the hack.
+ *
+ * This weird query was found in
+ * https://stackoverflow.com/questions/16348489#25975282 (based on the
+ * answer it works for Safari 10.1+)
+ */
+
+/* stylelint-disable-next-line unit-whitelist */
+
+@media not all and (min-resolution: 0.001dpcm) {
+ @media {
+ .claro-details__summary::before {
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+ }
+}
+
+/**
+ * Details summary focus.
+ */
+
+.claro-details__summary::after {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ content: "";
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -o-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+ pointer-events: none;
+ opacity: 0;
+ border-radius: 2px;
+ -webkit-box-shadow: inset 0 0 0 3px #26a769;
+ box-shadow: inset 0 0 0 3px #26a769;
+}
+
+.claro-details > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
+ border-radius: 0;
+}
+
+.claro-details:first-child > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
+.claro-details:last-child > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+/**
+ * Focus box of accordions and accordion items must not have bottom border
+ * radius if their accordion is expanded.
+ */
+
+.claro-details[open] > .claro-details__summary--accordion::after,
+.claro-details[open] > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/**
+ * Details summary states.
+ */
+
+.claro-details__summary:focus {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+[open] .claro-details__summary--accordion,
+[open] .claro-details__summary--accordion-item,
+[open] .claro-details__summary--vertical-tabs-item {
+ color: #003cc5;
+}
+
+.claro-details__summary:hover::before,
+.claro-details__summary:hover:focus::before,
+.claro-details[open] > .claro-details__summary:focus::before,
+.claro-details[open] > .claro-details__summary--accordion::before,
+.claro-details[open] > .claro-details__summary--accordion-item::before,
+.claro-details[open] > .claro-details__summary--vertical-tabs-item::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'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%230036B1'/%3E%3C/svg%3E");
+}
+
+.claro-details[open] > .claro-details__summary {
+ border-radius: 1px 1px 0 0;
+}
+
+.claro-details[open] > .claro-details__summary::before {
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg); /* for LTR and RTL */
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .claro-details__summary:hover::before,
+ .claro-details__summary:hover:focus::before {
+ background: none;
+ }
+
+ .claro-details[open] > .claro-details__summary::before,
+ [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
+ margin-top: -0.40625rem;
+ margin-right: 0.125rem;
+ -webkit-transform: rotate(135deg);
+ -moz-transform: rotate(135deg);
+ -ms-transform: rotate(135deg);
+ -o-transform: rotate(135deg);
+ transform: rotate(135deg); /* for LTR and RTL */
+ background: none;
+ }
+}
+
+.claro-details[open] > .claro-details__summary--accordion,
+.claro-details[open] > .claro-details__summary--accordion-item,
+.claro-details[open] > .claro-details__summary--vertical-tabs-item {
+ -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.claro-details__summary:hover {
+ color: #003cc5;
+ background-color: #f0f5fd;
+}
+
+/**
+ * Focus styles.
+ */
+
+/**
+ * Active has to be here for Firefox.
+ * Merges standard collapse-processed selectors.
+ */
+
+[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
+[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
+.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
+.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
+ opacity: 1;
+ border: 3px solid #003cc5;
+ border-width: 0 0 0 3px; /* LTR */
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
+[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
+[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
+[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
+ border-width: 0 3px 0 0;
+}
+
+.claro-details__summary:focus::after,
+.claro-details__summary:active::after,
+.collapse-processed > .claro-details__summary .details-title:focus::after {
+ opacity: 1;
+}
+
+/**
+ * Safari workaround.
+ */
+
+/* stylelint-disable-next-line unit-whitelist */
+
+@media not all and (min-resolution: 0.001dpcm) {
+ @media {
+ .claro-details__summary::after {
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+ }
+}
+
+.claro-details[open] > .claro-details__summary:focus {
+ color: #003cc5;
+}
+
+/**
+ * Details wrapper and content.
+ *
+ * Accordion and accordion-item variants should have an extra background.
+ * In that case, we render an additional wrapper 'claro-details__content' that
+ * creates the visual margins around the content, and use the original
+ * wrapper for setting the background color.
+ *
+ * If there is no border or padding defined, margins of parent-child elements
+ * collapse to the highest value. We want to take benefit of this behavior,
+ * because the elements inside the details content won't cause too big
+ * vertical spacing.
+ */
+
+.claro-details__wrapper,
+.claro-details__content {
+ margin: 1rem;
+}
+
+.claro-details__wrapper--accordion,
+.claro-details__wrapper--accordion-item,
+.claro-details__wrapper--vertical-tabs-item {
+ margin: 0;
+}
+
+.claro-details__wrapper--accordion::before,
+.claro-details__wrapper--accordion::after,
+.claro-details__wrapper--accordion-item::before,
+.claro-details__wrapper--accordion-item::after,
+.claro-details__wrapper--vertical-tabs-item::before,
+.claro-details__wrapper--vertical-tabs-item::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+.claro-details__wrapper--accordion,
+.claro-details__wrapper--accordion-item,
+.claro-details__wrapper--vertical-tabs-item {
+ border-top: 1px solid rgba(216, 217, 224, 0.8);
+ background-color: rgba(243, 244, 249, 0.4);
+}
+
+@media screen and (min-width: 48em) {
+ .claro-details__wrapper {
+ margin: 1.5rem 2.25rem;
+ }
+
+ .claro-details__wrapper--accordion,
+ .claro-details__wrapper--accordion-item,
+ .claro-details__wrapper--vertical-tabs-item {
+ margin: 0;
+ }
+}
+
+@media screen and (min-width: 85em) {
+ .js .claro-details__wrapper--vertical-tabs-item {
+ margin: 0;
+ border-top: 0;
+ background-color: transparent;
+ }
+}
+
+.claro-details__content--accordion,
+.claro-details__content--accordion-item,
+.claro-details__content--vertical-tabs-item {
+ margin: 1rem 1rem 1.5rem;
+}
+
+@media screen and (min-width: 85em) {
+ .vertical-tabs .claro-details__content--vertical-tabs-item {
+ margin: 1.5rem;
+ }
+}
+
+/* Description. */
+
+.claro-details__description {
+ margin-bottom: 1rem;
+ color: #545560;
+ font-size: 0.79rem; /* ~13px */
+ line-height: 1.0625rem; /* 17px */
+}
+
+.claro-details__description.is-disabled {
+ color: #82828c;
+}
+
+/**
+ * Collapse processed for non-supporting browsers like IE or Edge.
+ */
+
+.collapse-processed > .claro-details__summary {
+ padding: 0;
+}
+
+.collapse-processed > .claro-details__summary::after {
+ content: none;
+}
+
+.collapse-processed > .claro-details__summary .details-title {
+ position: relative;
+ display: block;
+ padding: 1rem 1rem 1rem 2.25rem; /* LTR */
+ text-decoration: none;
+ color: inherit;
+ border-radius: 1px;
+}
+
+[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
+ padding-right: 2.25rem;
+ padding-left: 1rem;
+}
+
+.collapse-processed > .claro-details__summary--accordion .details-title,
+.collapse-processed > .claro-details__summary--accordion-item .details-title,
+.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
+ padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
+}
+
+[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
+[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
+[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
+ padding-right: 2.25rem;
+ padding-left: 1.5rem;
+}
+
+/* Focus and hover states. */
+
+.collapse-processed > .claro-details__summary .details-title:focus,
+.collapse-processed > .claro-details__summary .details-title:hover {
+ z-index: 1;
+ text-decoration: none;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.collapse-processed > .claro-details__summary .details-title::after {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ content: "";
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -o-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+ pointer-events: none;
+ opacity: 0;
+ border: 3px solid #26a769;
+ border-radius: 2px;
+}
+
+.collapse-processed > .claro-details__summary .details-title:focus::after {
+ opacity: 1;
+}
+
+/* Accordion item modifiers for the focus box. */
+
+.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-radius: 0;
+}
+
+.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
+.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
+.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/**
+ * Hide JS summary from the details polyfill to make it consistent with native
+ * details elements.
+ *
+ * @todo Consider removing this after https://www.drupal.org/node/2493957 has
+ * been solved.
+ */
+
+.claro-details__summary--accordion .summary,
+.claro-details__summary--accordion-item .summary,
+.claro-details__summary--vertical-tabs-item .summary {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+ .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+ .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ }
+ .collapse-processed > .claro-details__summary .details-title::after {
+ top: -5px;
+ right: -5px;
+ bottom: -5px;
+ left: -5px;
+ border: 2px dotted;
+ }
+}
+
+.required-mark::after {
+ display: inline-block;
+ width: 0.4375rem;
+ height: 0.4375rem;
+ margin-right: 0.3em;
+ margin-left: 0.3em;
+ content: "";
+ vertical-align: super;
+ background-image: url(../../../images/core/ee0000/required.svg);
+ background-repeat: no-repeat;
+ background-size: 0.4375rem 0.4375rem;
+}
diff --git a/core/themes/claro/css/src/components/details.pcss.css b/core/themes/claro/css/src/components/details.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..a0d5be5074b133ffc6ede3c90223dd0d4368fe50
--- /dev/null
+++ b/core/themes/claro/css/src/components/details.pcss.css
@@ -0,0 +1,568 @@
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Available modifiers are:
+ * - .claro-details--accordion
+ * - .claro-details--accordion-item
+ *
+ * Despite the fact that 'accordion' isn't used anywhere right now, we
+ * implemented it (since the design defines that).
+ * This variant can be used by setting the '#accordion' to TRUE for a
+ * Details render element:
+ * @code
+ * $build['detail_accordion'] = [
+ * '#type' => 'details',
+ * '#accordion' => TRUE,
+ * ];
+ *
+ * 'Accordion item' is used for the details of the node edit sidebar. For
+ * creating accordion item list from a set of details, set the surrounding
+ * Container render element's '#accordion' key to TRUE.
+ *
+ * 'Vertical tabs item' is used for the children of the VerticalTabs render
+ * element.
+ */
+
+:root {
+ --size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
+ --summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
+ --summary-accordion-line-height: var(--space-l);
+}
+
+.claro-details {
+ display: block;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+ color: var(--color-text);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-border-size-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
+}
+
+.claro-details--accordion-item,
+.claro-details--vertical-tabs-item {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.claro-details--accordion-item:first-of-type {
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
+}
+
+.claro-details--accordion-item:last-of-type {
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
+}
+
+/**
+ * Details summary styles.
+ */
+
+.claro-details__summary {
+ position: relative;
+ box-sizing: border-box;
+ padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
+ list-style: none;
+ cursor: pointer;
+ transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
+ word-wrap: break-word;
+ hyphens: auto;
+ color: var(--color-davysgrey);
+ border-radius: var(--size-summary-border-radius);
+ background-color: transparent;
+ line-height: var(--space-m);
+}
+[dir="rtl"] .claro-details__summary {
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-m);
+}
+
+/* Modifiers */
+.claro-details__summary--accordion,
+.claro-details__summary--accordion-item,
+.claro-details__summary--vertical-tabs-item {
+ padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
+ background: var(--color-white);
+ line-height: var(--summary-accordion-line-height);
+}
+[dir="rtl"] .claro-details__summary--accordion,
+[dir="rtl"] .claro-details__summary--accordion-item,
+[dir="rtl"] .claro-details__summary--vertical-tabs-item {
+ 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.
+ */
+.claro-details__summary--accordion-item {
+ border-radius: 0;
+}
+
+.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
+}
+
+.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
+}
+
+/**
+ * Details marker styles.
+ */
+
+/* Remove the marker on Chrome */
+.claro-details__summary::-webkit-details-marker {
+ display: none;
+}
+
+.claro-details__summary::before {
+ position: absolute;
+ top: 50%;
+ left: var(--space-s); /* LTR */
+ display: inline-block;
+ width: var(--space-m);
+ height: var(--space-m);
+ margin-top: calc(var(--space-m) / -2);
+ content: "";
+ transition: transform var(--details-transform-transition-duration) ease-in 0s;
+ transform: rotate(0); /* LTR */
+ text-align: center;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
+ background-size: contain;
+}
+[dir="rtl"] .claro-details__summary::before {
+ right: var(--space-s);
+ left: auto;
+ transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .claro-details__summary::before {
+ transition: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .claro-details__summary::before {
+ width: 0.5625rem;
+ height: 0.5625rem;
+ margin-top: calc(0.5625rem / -2);
+ transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
+ transform: rotate(45deg); /* LTR */
+ border: 0.125rem solid;
+ border-width: 0.125rem 0.125rem 0 0;
+ background: none;
+ }
+
+ [dir="rtl"] .claro-details__summary::before {
+ transform: rotate(225deg);
+ }
+}
+
+/**
+ * Safari (at least version 12.1) cannot handle our details marker
+ * transition properly.
+ *
+ * Every additional pointer triggered toggle event freezes the transition,
+ * and the transition is continued and finished after the pointer leaves
+ * the Detail elements' summary.
+ *
+ * Even that it is possible to provide a JavaScript workaround for it (by
+ * adding/removing a helper class with JavaScript if the Details is
+ * toggled), that hack will make RTL details worse than without the hack.
+ *
+ * This weird query was found in
+ * https://stackoverflow.com/questions/16348489#25975282 (based on the
+ * answer it works for Safari 10.1+)
+ */
+/* stylelint-disable-next-line unit-whitelist */
+@media not all and (min-resolution: 0.001dpcm) {
+ @media {
+ .claro-details__summary::before {
+ transition: none;
+ }
+ }
+}
+
+/**
+ * Details summary focus.
+ */
+.claro-details__summary::after {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ content: "";
+ transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
+ pointer-events: none;
+ opacity: 0;
+ border-radius: var(--details-border-size-radius);
+ box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
+}
+
+.claro-details > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
+ border-radius: 0;
+}
+
+.claro-details:first-child > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
+}
+
+.claro-details:last-child > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
+}
+
+/**
+ * Focus box of accordions and accordion items must not have bottom border
+ * radius if their accordion is expanded.
+ */
+.claro-details[open] > .claro-details__summary--accordion::after,
+.claro-details[open] > .claro-details__summary--accordion-item::after,
+.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/**
+ * Details summary states.
+ */
+.claro-details__summary:focus {
+ box-shadow: none;
+}
+
+[open] .claro-details__summary--accordion,
+[open] .claro-details__summary--accordion-item,
+[open] .claro-details__summary--vertical-tabs-item {
+ color: var(--color-absolutezero);
+}
+
+.claro-details__summary:hover::before,
+.claro-details__summary:hover:focus::before,
+.claro-details[open] > .claro-details__summary:focus::before,
+.claro-details[open] > .claro-details__summary--accordion::before,
+.claro-details[open] > .claro-details__summary--accordion-item::before,
+.claro-details[open] > .claro-details__summary--vertical-tabs-item::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'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%230036B1'/%3E%3C/svg%3E");
+}
+
+.claro-details[open] > .claro-details__summary {
+ border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
+}
+
+.claro-details[open] > .claro-details__summary::before {
+ transform: rotate(90deg); /* for LTR and RTL */
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .claro-details__summary:hover::before,
+ .claro-details__summary:hover:focus::before {
+ background: none;
+ }
+
+ .claro-details[open] > .claro-details__summary::before,
+ [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
+ margin-top: calc((0.5625rem / -2) - 0.125rem);
+ margin-right: 0.125rem;
+ transform: rotate(135deg); /* for LTR and RTL */
+ background: none;
+ }
+}
+
+.claro-details[open] > .claro-details__summary--accordion,
+.claro-details[open] > .claro-details__summary--accordion-item,
+.claro-details[open] > .claro-details__summary--vertical-tabs-item {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.claro-details__summary:hover {
+ color: var(--color-absolutezero);
+ background-color: var(--color-bgblue-hover);
+}
+
+/**
+ * Focus styles.
+ */
+
+/**
+ * Active has to be here for Firefox.
+ * Merges standard collapse-processed selectors.
+ */
+[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
+[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
+.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
+.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
+ opacity: 1;
+ border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
+ border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
+ box-shadow: none;
+}
+[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
+[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
+[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
+[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
+ border-width: 0 var(--details-summary-focus-border-size) 0 0;
+}
+
+.claro-details__summary:focus::after,
+.claro-details__summary:active::after,
+.collapse-processed > .claro-details__summary .details-title:focus::after {
+ opacity: 1;
+}
+
+/**
+ * Safari workaround.
+ */
+/* stylelint-disable-next-line unit-whitelist */
+@media not all and (min-resolution: 0.001dpcm) {
+ @media {
+ .claro-details__summary::after {
+ transition: none;
+ }
+ }
+}
+
+.claro-details[open] > .claro-details__summary:focus {
+ color: var(--color-absolutezero);
+}
+
+/**
+ * Details wrapper and content.
+ *
+ * Accordion and accordion-item variants should have an extra background.
+ * In that case, we render an additional wrapper 'claro-details__content' that
+ * creates the visual margins around the content, and use the original
+ * wrapper for setting the background color.
+ *
+ * If there is no border or padding defined, margins of parent-child elements
+ * collapse to the highest value. We want to take benefit of this behavior,
+ * because the elements inside the details content won't cause too big
+ * vertical spacing.
+ */
+.claro-details__wrapper,
+.claro-details__content {
+ margin: var(--space-m);
+}
+
+.claro-details__wrapper--accordion,
+.claro-details__wrapper--accordion-item,
+.claro-details__wrapper--vertical-tabs-item {
+ margin: 0;
+}
+.claro-details__wrapper--accordion::before,
+.claro-details__wrapper--accordion::after,
+.claro-details__wrapper--accordion-item::before,
+.claro-details__wrapper--accordion-item::after,
+.claro-details__wrapper--vertical-tabs-item::before,
+.claro-details__wrapper--vertical-tabs-item::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+.claro-details__wrapper--accordion,
+.claro-details__wrapper--accordion-item,
+.claro-details__wrapper--vertical-tabs-item {
+ border-top: var(--details-border-size) solid var(--details-border-color);
+ background-color: var(--color-whitesmoke-o-40);
+}
+
+@media screen and (min-width: 48em) {
+ .claro-details__wrapper {
+ margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
+ }
+
+ .claro-details__wrapper--accordion,
+ .claro-details__wrapper--accordion-item,
+ .claro-details__wrapper--vertical-tabs-item {
+ margin: 0;
+ }
+}
+
+@media screen and (min-width: 85em) {
+ .js .claro-details__wrapper--vertical-tabs-item {
+ margin: 0;
+ border-top: 0;
+ background-color: transparent;
+ }
+}
+
+.claro-details__content--accordion,
+.claro-details__content--accordion-item,
+.claro-details__content--vertical-tabs-item {
+ margin: var(--space-m) var(--space-m) var(--space-l);
+}
+
+@media screen and (min-width: 85em) {
+ .vertical-tabs .claro-details__content--vertical-tabs-item {
+ margin: var(--space-l);
+ }
+}
+
+/* Description. */
+.claro-details__description {
+ margin-bottom: var(--space-m);
+ color: var(--input-fg-color--description);
+ font-size: var(--font-size-xs); /* ~13px */
+ line-height: calc(17rem / 16); /* 17px */
+}
+.claro-details__description.is-disabled {
+ color: var(--input--disabled-fg-color);
+}
+
+/**
+ * Collapse processed for non-supporting browsers like IE or Edge.
+ */
+.collapse-processed > .claro-details__summary {
+ padding: 0;
+}
+
+.collapse-processed > .claro-details__summary::after {
+ content: none;
+}
+
+.collapse-processed > .claro-details__summary .details-title {
+ position: relative;
+ display: block;
+ padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
+ text-decoration: none;
+ color: inherit;
+ border-radius: var(--size-summary-border-radius);
+}
+[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-m);
+}
+
+.collapse-processed > .claro-details__summary--accordion .details-title,
+.collapse-processed > .claro-details__summary--accordion-item .details-title,
+.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
+ padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
+}
+[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
+[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
+[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-l);
+}
+
+/* Focus and hover states. */
+.collapse-processed > .claro-details__summary .details-title:focus,
+.collapse-processed > .claro-details__summary .details-title:hover {
+ z-index: 1;
+ text-decoration: none;
+ outline: none;
+ box-shadow: none;
+}
+
+.collapse-processed > .claro-details__summary .details-title::after {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ content: "";
+ transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
+ pointer-events: none;
+ opacity: 0;
+ border: var(--details-summary-focus-border-size) solid var(--color-focus);
+ border-radius: var(--details-border-size-radius);
+}
+
+.collapse-processed > .claro-details__summary .details-title:focus::after {
+ opacity: 1;
+}
+
+/* Accordion item modifiers for the focus box. */
+
+.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-radius: 0;
+}
+
+.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
+}
+
+.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
+}
+
+.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
+.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
+.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/**
+ * Hide JS summary from the details polyfill to make it consistent with native
+ * details elements.
+ *
+ * @todo Consider removing this after https://www.drupal.org/node/2493957 has
+ * been solved.
+ */
+.claro-details__summary--accordion .summary,
+.claro-details__summary--accordion-item .summary,
+.claro-details__summary--vertical-tabs-item .summary {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+ .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+ .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ }
+ .collapse-processed > .claro-details__summary .details-title::after {
+ top: -5px;
+ right: -5px;
+ bottom: -5px;
+ left: -5px;
+ border: 2px dotted;
+ }
+}
+
+.required-mark::after {
+ display: inline-block;
+ width: 0.4375rem;
+ height: 0.4375rem;
+ margin-right: 0.3em;
+ margin-left: 0.3em;
+ content: "";
+ vertical-align: super;
+ background-image: url(../../../images/core/ee0000/required.svg);
+ background-repeat: no-repeat;
+ background-size: 0.4375rem 0.4375rem;
+}
diff --git a/core/themes/claro/css/src/components/dialog.css b/core/themes/claro/css/src/components/dialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..fb56fd9bbb0452ffe274c4a910f4eeb31b06d794
--- /dev/null
+++ b/core/themes/claro/css/src/components/dialog.css
@@ -0,0 +1,156 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+ position: absolute;
+ z-index: 1260;
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+
+@media all and (max-width: 48em) { /* 768px */
+ .ui-dialog {
+ min-width: 92%;
+ max-width: 92%;
+ }
+}
+
+.ui-dialog .ui-dialog-titlebar {
+ padding: 15px 49px 15px 15px; /* LTR */
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background: #6b6b6b;
+}
+
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
+ padding-right: 15px;
+ padding-left: 49px;
+}
+
+.ui-dialog .ui-dialog-title {
+ margin: 0;
+ color: #fff;
+ font-size: 1.231em;
+ font-weight: 600;
+ -webkit-font-smoothing: antialiased;
+}
+
+.ui-dialog .ui-dialog-titlebar-close {
+ position: absolute;
+ top: 10px;
+ right: 12px; /* LTR */
+ width: 30px;
+ height: 30px;
+ margin: 0;
+ padding: 0;
+ -webkit-transition: all 0.1s;
+ -o-transition: all 0.1s;
+ -moz-transition: all 0.1s;
+ transition: all 0.1s;
+ border: 3px solid #6b6b6b;
+ border-radius: 5px;
+ background: none;
+}
+
+.ui-dialog .ui-dialog-titlebar-close:hover,
+.ui-dialog .ui-dialog-titlebar-close:focus {
+ border-color: #fff;
+}
+
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
+ right: auto;
+ left: 20px;
+}
+
+.ui-dialog .ui-icon.ui-icon-closethick {
+ margin-top: -8px;
+ background: url(../../../images/core/ffffff/ex.svg) 0 0 no-repeat;
+}
+
+.ui-dialog .ui-widget-content.ui-dialog-content {
+ overflow: auto;
+ padding: 1em;
+ background: #fff;
+}
+
+.views-ui-dialog .ui-widget-content.ui-dialog-content {
+ padding: 0;
+}
+
+.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
+ /* border-top: 1px solid #bfbfbf; */
+ margin: 0;
+ padding: 15px 20px;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ background: #f5f5f2;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+ float: none;
+ margin: 0;
+ padding: 0;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
+ padding: 0;
+}
+
+.ui-dialog .ui-dialog-content {
+ position: static;
+}
+
+/* Form action buttons are moved in dialogs. Remove empty space. */
+
+.ui-dialog .ui-dialog-content .form-actions {
+ margin: 0;
+ padding: 0;
+}
+
+.ui-dialog .ajax-progress-throbber {
+ position: fixed;
+ z-index: 1000;
+ top: 48.5%;
+ /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+ left: 49%; /* LTR */
+ width: 24px;
+ height: 24px;
+ padding: 4px;
+ opacity: 0.9;
+ border-radius: 7px;
+ background-color: #232323;
+ background-image: url(../../../images/loading-small.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+[dir="rtl"] .ui-dialog .ajax-progress-throbber {
+ right: 49%;
+ left: auto;
+}
+
+.ui-dialog .ajax-progress-throbber .throbber,
+.ui-dialog .ajax-progress-throbber .message {
+ display: none;
+}
+
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+ position: relative;
+}
+
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+ top: 10px;
+}
+
+.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
+ background: none;
+}
diff --git a/core/themes/claro/css/src/components/dialog.pcss.css b/core/themes/claro/css/src/components/dialog.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..171ba798b04a80fa597fbabe753485941b978099
--- /dev/null
+++ b/core/themes/claro/css/src/components/dialog.pcss.css
@@ -0,0 +1,127 @@
+/**
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+ position: absolute;
+ z-index: 1260;
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+
+@media all and (max-width: 48em) { /* 768px */
+ .ui-dialog {
+ min-width: 92%;
+ max-width: 92%;
+ }
+}
+.ui-dialog .ui-dialog-titlebar {
+ padding: 15px 49px 15px 15px; /* LTR */
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background: #6b6b6b;
+}
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
+ padding-right: 15px;
+ padding-left: 49px;
+}
+.ui-dialog .ui-dialog-title {
+ margin: 0;
+ color: #fff;
+ font-size: 1.231em;
+ font-weight: 600;
+ -webkit-font-smoothing: antialiased;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+ position: absolute;
+ top: 10px;
+ right: 12px; /* LTR */
+ width: 30px;
+ height: 30px;
+ margin: 0;
+ padding: 0;
+ -webkit-transition: all 0.1s;
+ transition: all 0.1s;
+ border: 3px solid #6b6b6b;
+ border-radius: 5px;
+ background: none;
+}
+.ui-dialog .ui-dialog-titlebar-close:hover,
+.ui-dialog .ui-dialog-titlebar-close:focus {
+ border-color: #fff;
+}
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
+ right: auto;
+ left: 20px;
+}
+.ui-dialog .ui-icon.ui-icon-closethick {
+ margin-top: -8px;
+ background: url(../../../images/core/ffffff/ex.svg) 0 0 no-repeat;
+}
+.ui-dialog .ui-widget-content.ui-dialog-content {
+ overflow: auto;
+ padding: 1em;
+ background: #fff;
+}
+.views-ui-dialog .ui-widget-content.ui-dialog-content {
+ padding: 0;
+}
+.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
+ /* border-top: 1px solid #bfbfbf; */
+ margin: 0;
+ padding: 15px 20px;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ background: #f5f5f2;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+ float: none;
+ margin: 0;
+ padding: 0;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
+ padding: 0;
+}
+.ui-dialog .ui-dialog-content {
+ position: static;
+}
+
+/* Form action buttons are moved in dialogs. Remove empty space. */
+.ui-dialog .ui-dialog-content .form-actions {
+ margin: 0;
+ padding: 0;
+}
+.ui-dialog .ajax-progress-throbber {
+ position: fixed;
+ z-index: 1000;
+ top: 48.5%;
+ /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+ left: 49%; /* LTR */
+ width: 24px;
+ height: 24px;
+ padding: 4px;
+ opacity: 0.9;
+ border-radius: 7px;
+ background-color: #232323;
+ background-image: url(../../../images/loading-small.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+[dir="rtl"] .ui-dialog .ajax-progress-throbber {
+ right: 49%;
+ left: auto;
+}
+.ui-dialog .ajax-progress-throbber .throbber,
+.ui-dialog .ajax-progress-throbber .message {
+ display: none;
+}
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+ position: relative;
+}
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+ top: 10px;
+}
+.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
+ background: none;
+}
diff --git a/core/themes/claro/css/src/components/divider.css b/core/themes/claro/css/src/components/divider.css
new file mode 100644
index 0000000000000000000000000000000000000000..2bd585d19026e06b0f69a7fc1eca56fbc2df64c2
--- /dev/null
+++ b/core/themes/claro/css/src/components/divider.css
@@ -0,0 +1,59 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Divider.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.divider {
+ height: 1px;
+ background-color: rgba(142, 146, 156, 0.5);
+}
diff --git a/core/themes/claro/css/src/components/divider.pcss.css b/core/themes/claro/css/src/components/divider.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..0959b719371c3023f697f30567d4d3e371688a7a
--- /dev/null
+++ b/core/themes/claro/css/src/components/divider.pcss.css
@@ -0,0 +1,10 @@
+/**
+ * Divider.
+ */
+
+@import "../base/variables.pcss.css";
+
+.divider {
+ height: 1px;
+ background-color: var(--color-divider);
+}
diff --git a/core/themes/claro/css/src/components/dropbutton.css b/core/themes/claro/css/src/components/dropbutton.css
new file mode 100644
index 0000000000000000000000000000000000000000..1daebd3e74c4e611cc17821894317370a7a85363
--- /dev/null
+++ b/core/themes/claro/css/src/components/dropbutton.css
@@ -0,0 +1,539 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Dropbutton styles.
+ *
+ * 1. Transparent border is needed for high contrast mode. The border-width has
+ * to be set with !important to render borders with the defined width in high
+ * contrast mode Firefox.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+:root {
+ /**
+ * Dropbutton
+ */
+ /* Variant variables: small. */
+ /* Variant variables: extra small. */
+}
+
+.dropbutton-wrapper {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ border-radius: 2px;
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.form-actions .dropbutton-wrapper {
+ margin: 0.5rem 1rem 0.5rem 0;
+}
+
+[dir="rtl"] .form-actions .dropbutton-wrapper {
+ margin-right: 0;
+ margin-left: 1rem;
+}
+
+.dropbutton-widget {
+ position: relative;
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 1 auto;
+ -moz-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+.js .dropbutton-wrapper.open .dropbutton-widget {
+ z-index: 100;
+}
+
+/**
+ * Dropbutton list.
+ */
+
+.dropbutton {
+ display: block;
+ overflow: visible;
+ margin: 0;
+ list-style: none;
+}
+
+[dir="rtl"] .dropbutton {
+ margin: 0;
+}
+
+.js .dropbutton {
+ height: 3rem;
+}
+
+/* Variants. */
+
+.js.no-touchevents .dropbutton--small {
+ height: 2rem;
+}
+
+.js.no-touchevents .dropbutton--extrasmall {
+ height: 1.5rem;
+}
+
+/**
+ * First dropbutton list item.
+ */
+
+.js .dropbutton--multiple .dropbutton__item:first-of-type {
+ margin-right: -webkit-calc(3rem + 1px);
+ margin-right: -moz-calc(3rem + 1px);
+ margin-right: calc(3rem + 1px); /* LTR */
+}
+
+[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
+ margin-right: 0;
+ margin-left: -webkit-calc(3rem + 1px);
+ margin-left: -moz-calc(3rem + 1px);
+ margin-left: calc(3rem + 1px);
+}
+
+/* First dropbutton list item variants */
+
+.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+ margin-right: -webkit-calc(2rem + 1px);
+ margin-right: -moz-calc(2rem + 1px);
+ margin-right: calc(2rem + 1px); /* LTR */
+}
+
+[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+ margin-right: 0;
+ margin-left: -webkit-calc(2rem + 1px);
+ margin-left: -moz-calc(2rem + 1px);
+ margin-left: calc(2rem + 1px);
+}
+
+.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+ margin-right: -webkit-calc(1.5rem + 1px);
+ margin-right: -moz-calc(1.5rem + 1px);
+ margin-right: calc(1.5rem + 1px); /* LTR */
+}
+
+[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+ margin-right: 0;
+ margin-left: -webkit-calc(1.5rem + 1px);
+ margin-left: -moz-calc(1.5rem + 1px);
+ margin-left: calc(1.5rem + 1px);
+}
+
+/**
+ * Dropbutton toggler.
+ */
+
+.dropbutton__toggle {
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ right: 0; /* LTR */
+ bottom: 0;
+ width: 3rem;
+ height: 3rem;
+ border: 1px solid transparent !important; /* 1 */
+ border-radius: 0 2px 2px 0; /* LTR */
+ background: #d4d4d8;
+ font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+[dir="rtl"] .dropbutton__toggle {
+ right: auto;
+ left: 0;
+ border-radius: 2px 0 0 2px;
+}
+
+.dropbutton__toggle::before {
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ width: 0.875rem;
+ height: 0.5625rem;
+ content: "";
+ -webkit-transform: translate(50%, -50%) rotate(0);
+ -moz-transform: translate(50%, -50%) rotate(0);
+ -ms-transform: translate(50%, -50%) rotate(0);
+ -o-transform: translate(50%, -50%) rotate(0);
+ transform: translate(50%, -50%) rotate(0);
+ background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center;
+ background-size: contain;
+}
+
+/* Toggler states. */
+
+.dropbutton__toggle:hover {
+ color: #222330;
+ background-color: #c2c3ca;
+ -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.dropbutton__toggle:focus {
+ z-index: 2;
+}
+
+.dropbutton__toggle:active {
+ color: #222330;
+ background-color: #adaeb3;
+}
+
+.dropbutton-wrapper.open .dropbutton__toggle::before {
+ -webkit-transform: translate(50%, -50%) rotate(180deg);
+ -moz-transform: translate(50%, -50%) rotate(180deg);
+ -ms-transform: translate(50%, -50%) rotate(180deg);
+ -o-transform: translate(50%, -50%) rotate(180deg);
+ transform: translate(50%, -50%) rotate(180deg);
+}
+
+[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
+ -webkit-transform: translate(50%, -50%) rotate(-180deg);
+ -moz-transform: translate(50%, -50%) rotate(-180deg);
+ -ms-transform: translate(50%, -50%) rotate(-180deg);
+ -o-transform: translate(50%, -50%) rotate(-180deg);
+ transform: translate(50%, -50%) rotate(-180deg);
+}
+
+/* Toggler variants */
+
+.no-touchevents .dropbutton--small .dropbutton__toggle {
+ width: 2rem;
+ height: 2rem;
+}
+
+.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.no-touchevents .dropbutton--small .dropbutton__toggle::before,
+.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
+ width: 0.75rem; /* 12px */
+}
+
+/* High contrast. */
+
+@media screen and (-ms-high-contrast: active) {
+ /* Default. */
+ .dropbutton__toggle::before {
+ width: 0.5625rem;
+ height: 0.5625rem;
+ margin-top: -0.19886rem;
+ -webkit-transform: translate(50%, -50%) rotate(135deg);
+ -moz-transform: translate(50%, -50%) rotate(135deg);
+ -ms-transform: translate(50%, -50%) rotate(135deg);
+ -o-transform: translate(50%, -50%) rotate(135deg);
+ transform: translate(50%, -50%) rotate(135deg); /* LTR */
+ border: 0.125rem solid;
+ border-width: 0.125rem 0.125rem 0 0;
+ background: none;
+ }
+
+ .dropbutton-wrapper.open .dropbutton__toggle::before {
+ margin-top: 0.19886rem;
+ -webkit-transform: translate(50%, -50%) rotate(315deg);
+ -moz-transform: translate(50%, -50%) rotate(315deg);
+ -ms-transform: translate(50%, -50%) rotate(315deg);
+ -o-transform: translate(50%, -50%) rotate(315deg);
+ transform: translate(50%, -50%) rotate(315deg);
+ }
+ [dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
+ -webkit-transform: translate(50%, -50%) rotate(-45deg);
+ -moz-transform: translate(50%, -50%) rotate(-45deg);
+ -ms-transform: translate(50%, -50%) rotate(-45deg);
+ -o-transform: translate(50%, -50%) rotate(-45deg);
+ transform: translate(50%, -50%) rotate(-45deg);
+ }
+
+ /* Variants */
+
+ .no-touchevents .dropbutton--small .dropbutton__toggle::before,
+ .no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
+ width: 0.4375rem;
+ height: 0.4375rem;
+ margin-top: -0.15467rem;
+ }
+
+ .dropbutton-wrapper.open .dropbutton__toggle::before {
+ margin-top: 0.15467rem;
+ }
+}
+
+/**
+ * Item in the first dropbutton list item (that looks like a button).
+ *
+ * Duplicates base button styles.
+ */
+
+.dropbutton__item:first-of-type > * {
+ display: inline-block;
+ margin: 0;
+ padding: -webkit-calc(1rem - 1px) -webkit-calc(1.5rem - 1px);
+ padding: -moz-calc(1rem - 1px) -moz-calc(1.5rem - 1px);
+ padding: calc(1rem - 1px) calc(1.5rem - 1px);
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ color: #222330;
+ border: 1px solid transparent !important; /* 1 */
+ border-radius: 2px;
+ background-color: #d4d4d8;
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1rem;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+}
+
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
+ padding-right: -webkit-calc(1rem - 1px);
+ padding-right: -moz-calc(1rem - 1px);
+ padding-right: calc(1rem - 1px);
+ padding-left: -webkit-calc(1rem - 1px);
+ padding-left: -moz-calc(1rem - 1px);
+ padding-left: calc(1rem - 1px);
+}
+
+/* Variants */
+
+.no-touchevents .dropbutton__item--small:first-of-type > * {
+ padding-top: -webkit-calc(0.625rem - 1px);
+ padding-top: -moz-calc(0.625rem - 1px);
+ padding-top: calc(0.625rem - 1px);
+ padding-bottom: -webkit-calc(0.625rem - 1px);
+ padding-bottom: -moz-calc(0.625rem - 1px);
+ padding-bottom: calc(0.625rem - 1px);
+ font-size: 0.79rem;
+ line-height: 0.75rem;
+}
+
+.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
+ padding-top: -webkit-calc(0.375rem - 1px);
+ padding-top: -moz-calc(0.375rem - 1px);
+ padding-top: calc(0.375rem - 1px);
+ padding-bottom: -webkit-calc(0.375rem - 1px);
+ padding-bottom: -moz-calc(0.375rem - 1px);
+ padding-bottom: calc(0.375rem - 1px);
+ font-size: 0.79rem;
+ line-height: 0.75rem;
+}
+
+.dropbutton__item:first-of-type > *:hover,
+.dropbutton__item:first-of-type > .button:hover {
+ text-decoration: none;
+ color: #222330;
+ background-color: #c2c3ca;
+ -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.dropbutton__item:first-of-type > *:focus:hover,
+.dropbutton__item:first-of-type > .button:focus:hover {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+}
+
+.dropbutton__item:first-of-type > *:focus {
+ text-decoration: none;
+}
+
+.dropbutton__item:first-of-type > *:active {
+ color: #222330;
+ background-color: #adaeb3;
+}
+
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
+ position: relative;
+ z-index: 3;
+}
+
+.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {
+ z-index: 2;
+}
+
+.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+ border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+ border-radius: 0 2px 2px 0;
+}
+
+.dropbutton > .dropbutton__item > a,
+.dropbutton > .dropbutton__item > .button {
+ display: block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ text-align: left; /* LTR */
+}
+
+[dir="rtl"] .dropbutton > .dropbutton__item > a,
+[dir="rtl"] .dropbutton > .dropbutton__item > .button {
+ text-align: right;
+}
+
+.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+ display: none;
+}
+
+/**
+ * Non-first dropbutton list elements.
+ */
+
+.dropbutton__item:first-of-type ~ .dropbutton__item {
+ border: 1px solid #d4d4d8;
+ border-bottom: 0;
+ -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {
+ border-top: 0;
+}
+
+.dropbutton__item ~ .dropbutton__item:last-child {
+ border-bottom: 1px solid #d4d4d8;
+ border-radius: 0 0 2px 2px;
+}
+
+/**
+ * Dropbutton items of non-first dropbutton list elements.
+ */
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
+ position: relative;
+ padding: -webkit-calc(1rem - 1px);
+ padding: -moz-calc(1rem - 1px);
+ padding: calc(1rem - 1px);
+ text-decoration: none;
+ color: #545560;
+ border: 1px solid transparent !important; /* 1 */
+ border-radius: 2px;
+ background: #fff;
+ -webkit-box-shadow: 0;
+ box-shadow: 0;
+ font-size: 1rem;
+ font-weight: normal;
+ line-height: 1rem;
+ -webkit-font-smoothing: antialiased;
+}
+
+/**
+ * Set the the inherited button border color to transparent for high contrast
+ * mode.
+ */
+
+@media screen and (-ms-high-contrast: active) {
+ .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+ .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
+ border-color: transparent !important;
+ }
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),
+.dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {
+ z-index: 1;
+}
+
+/* Variants. */
+
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
+ padding-top: 0.625rem;
+ padding-bottom: 0.625rem;
+ font-size: 0.79rem;
+ line-height: 0.75rem;
+}
+
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
+.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
+ padding-top: 0.375rem;
+ padding-bottom: 0.375rem;
+ font-size: 0.79rem;
+ line-height: 0.75rem;
+}
+
+/* States. */
+
+.dropbutton__item > *:focus {
+ position: relative;
+ z-index: 3;
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
+ color: #222330;
+ background: #f3f4f9;
+}
+
+.dropbutton__item > .button:not(:focus) {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
+ border-color: #26a769 !important; /* 1 */
+ -webkit-box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
+ box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
+}
diff --git a/core/themes/claro/css/src/components/dropbutton.pcss.css b/core/themes/claro/css/src/components/dropbutton.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..8f3795f623f68c3e0981a0e918dc2f90939dd0c5
--- /dev/null
+++ b/core/themes/claro/css/src/components/dropbutton.pcss.css
@@ -0,0 +1,406 @@
+/**
+ * @file
+ * Dropbutton styles.
+ *
+ * 1. Transparent border is needed for high contrast mode. The border-width has
+ * to be set with !important to render borders with the defined width in high
+ * contrast mode Firefox.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ /**
+ * Dropbutton
+ */
+ --dropbutton-spacing-size: var(--space-m);
+ --dropbutton-font-size: var(--font-size-base);
+ --dropbutton-line-height: var(--space-m);
+ --dropbutton-toggle-size: 3rem;
+ --dropbutton-border-size: 1px;
+ --dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
+ --dropbutton-border-radius-size: 2px;
+ /* Variant variables: small. */
+ --dropbutton-small-spacing-size: 0.625rem;
+ --dropbutton-small-font-size: var(--font-size-xs);
+ --dropbutton-small-line-height: 0.75rem;
+ --dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
+ /* Variant variables: extra small. */
+ --dropbutton-extrasmall-spacing-size: 0.375rem;
+ --dropbutton-extrasmall-font-size: var(--font-size-xs);
+ --dropbutton-extrasmall-line-height: 0.75rem;
+ --dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
+}
+
+.dropbutton-wrapper {
+ display: inline-flex;
+ border-radius: var(--button-border-radius-size);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.form-actions .dropbutton-wrapper {
+ margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
+}
+[dir="rtl"] .form-actions .dropbutton-wrapper {
+ margin-right: 0;
+ margin-left: var(--space-m);
+}
+
+.dropbutton-widget {
+ position: relative;
+ flex: 1 1 auto;
+}
+
+.js .dropbutton-wrapper.open .dropbutton-widget {
+ z-index: 100;
+}
+
+/**
+ * Dropbutton list.
+ */
+.dropbutton {
+ display: block;
+ overflow: visible;
+ margin: 0;
+ list-style: none;
+}
+[dir="rtl"] .dropbutton {
+ margin: 0;
+}
+
+.js .dropbutton {
+ height: var(--dropbutton-toggle-size);
+}
+
+/* Variants. */
+.js.no-touchevents .dropbutton--small {
+ height: var(--dropbutton-small-toggle-size);
+}
+
+.js.no-touchevents .dropbutton--extrasmall {
+ height: var(--dropbutton-extrasmall-toggle-size);
+}
+
+/**
+ * First dropbutton list item.
+ */
+.js .dropbutton--multiple .dropbutton__item:first-of-type {
+ margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
+}
+[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
+ margin-right: 0;
+ margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
+}
+
+/* First dropbutton list item variants */
+.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.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.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.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));
+}
+
+/**
+ * Dropbutton toggler.
+ */
+.dropbutton__toggle {
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ right: 0; /* LTR */
+ bottom: 0;
+ width: var(--dropbutton-toggle-size);
+ height: var(--dropbutton-toggle-size);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
+ background: var(--button-bg-color);
+ font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
+ appearance: none;
+}
+[dir="rtl"] .dropbutton__toggle {
+ right: auto;
+ left: 0;
+ border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
+}
+
+.dropbutton__toggle::before {
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ width: 0.875rem;
+ height: 0.5625rem;
+ content: "";
+ transform: translate(50%, -50%) rotate(0);
+ background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center;
+ background-size: contain;
+}
+
+/* Toggler states. */
+.dropbutton__toggle:hover {
+ color: var(--button-fg-color);
+ background-color: var(--button--hover-bg-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.dropbutton__toggle:focus {
+ z-index: 2;
+}
+
+.dropbutton__toggle:active {
+ color: var(--button-fg-color);
+ background-color: var(--button--active-bg-color);
+}
+
+.dropbutton-wrapper.open .dropbutton__toggle::before {
+ transform: translate(50%, -50%) rotate(180deg);
+}
+[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
+ transform: translate(50%, -50%) rotate(-180deg);
+}
+
+/* Toggler variants */
+.no-touchevents .dropbutton--small .dropbutton__toggle {
+ width: var(--dropbutton-small-toggle-size);
+ height: var(--dropbutton-small-toggle-size);
+}
+
+.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
+ width: var(--dropbutton-extrasmall-toggle-size);
+ height: var(--dropbutton-extrasmall-toggle-size);
+}
+
+.no-touchevents .dropbutton--small .dropbutton__toggle::before,
+.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
+ width: 0.75rem; /* 12px */
+}
+
+/* High contrast. */
+@media screen and (-ms-high-contrast: active) {
+ /* Default. */
+ .dropbutton__toggle::before {
+ width: 0.5625rem;
+ height: 0.5625rem;
+ margin-top: calc(0.5625rem / (2 * -1.41429));
+ transform: translate(50%, -50%) rotate(135deg); /* LTR */
+ border: 0.125rem solid;
+ border-width: 0.125rem 0.125rem 0 0;
+ background: none;
+ }
+
+ .dropbutton-wrapper.open .dropbutton__toggle::before {
+ margin-top: calc(0.5625rem / (2 * 1.41429));
+ transform: translate(50%, -50%) rotate(315deg);
+ }
+ [dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
+ transform: translate(50%, -50%) rotate(-45deg);
+ }
+
+ /* Variants */
+
+ .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));
+ }
+
+ .dropbutton-wrapper.open .dropbutton__toggle::before {
+ margin-top: calc(0.4375rem / (2 * 1.41429));
+ }
+}
+
+/**
+ * Item in the first dropbutton list item (that looks like a button).
+ *
+ * Duplicates base button styles.
+ */
+.dropbutton__item:first-of-type > * {
+ display: inline-block;
+ margin: 0;
+ padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ color: var(--button-fg-color);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--button-bg-color);
+ font-size: var(--dropbutton-font-size);
+ font-weight: 700;
+ line-height: var(--dropbutton-line-height);
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+}
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
+ padding-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+ padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+}
+
+/* Variants */
+.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);
+}
+
+.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);
+ line-height: var(--dropbutton-extrasmall-line-height);
+}
+
+.dropbutton__item:first-of-type > *:hover,
+.dropbutton__item:first-of-type > .button:hover {
+ text-decoration: none;
+ color: var(--button-fg-color);
+ background-color: var(--button--hover-bg-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.dropbutton__item:first-of-type > *:focus:hover,
+.dropbutton__item:first-of-type > .button:focus:hover {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+}
+
+.dropbutton__item:first-of-type > *:focus {
+ text-decoration: none;
+}
+
+.dropbutton__item:first-of-type > *:active {
+ color: var(--button-fg-color);
+ background-color: var(--button--active-bg-color);
+}
+
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
+ position: relative;
+ z-index: 3;
+}
+
+.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {
+ z-index: 2;
+}
+
+.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+ border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
+}
+[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+ border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
+}
+
+.dropbutton > .dropbutton__item > a,
+.dropbutton > .dropbutton__item > .button {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ text-align: left; /* LTR */
+}
+[dir="rtl"] .dropbutton > .dropbutton__item > a,
+[dir="rtl"] .dropbutton > .dropbutton__item > .button {
+ text-align: right;
+}
+
+.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+ display: none;
+}
+
+/**
+ * Non-first dropbutton list elements.
+ */
+.dropbutton__item:first-of-type ~ .dropbutton__item {
+ border: var(--dropbutton-border-size) solid var(--color-lightgray);
+ border-bottom: 0;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {
+ border-top: 0;
+}
+
+.dropbutton__item ~ .dropbutton__item:last-child {
+ border-bottom: var(--dropbutton-border-size) solid var(--color-lightgray);
+ border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
+}
+
+/**
+ * Dropbutton items of non-first dropbutton list elements.
+ */
+.dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
+ position: relative;
+ padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+ text-decoration: none;
+ color: var(--color-davysgrey);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: var(--dropbutton-border-radius-size);
+ background: var(--color-white);
+ box-shadow: 0;
+ font-size: var(--dropbutton-font-size);
+ font-weight: normal;
+ line-height: var(--dropbutton-line-height);
+ -webkit-font-smoothing: antialiased;
+}
+
+/**
+ * Set the the inherited button border color to transparent for high contrast
+ * mode.
+ */
+@media screen and (-ms-high-contrast: active) {
+ .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+ .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
+ border-color: transparent !important;
+ }
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),
+.dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {
+ z-index: 1;
+}
+
+/* Variants. */
+.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);
+}
+
+.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);
+ line-height: var(--dropbutton-extrasmall-line-height);
+}
+
+/* States. */
+.dropbutton__item > *:focus {
+ position: relative;
+ z-index: 3;
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
+ color: var(--color-text);
+ background: var(--color-whitesmoke);
+}
+
+.dropbutton__item > .button:not(:focus) {
+ box-shadow: none;
+}
+
+.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
+ border-color: var(--color-focus) !important; /* 1 */
+ box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
+}
diff --git a/core/themes/claro/css/src/components/entity-meta.css b/core/themes/claro/css/src/components/entity-meta.css
new file mode 100644
index 0000000000000000000000000000000000000000..6245dea4db96f2ff77ad0c8205ab1c1738fe72a4
--- /dev/null
+++ b/core/themes/claro/css/src/components/entity-meta.css
@@ -0,0 +1,95 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Entity meta.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.entity-meta__header {
+ padding: 0.5rem 1rem 1rem;
+ color: #222330;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+}
+
+@media screen and (min-width: 48em) {
+ .entity-meta__header {
+ padding: 1rem 1.5rem 1.5rem;
+ }
+}
+
+.entity-meta__header .form-item {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.entity-meta__title {
+ margin: 0.25em 0;
+ text-shadow: 0 1px 0 #fff;
+ font-size: 1.231em;
+ font-weight: bold;
+}
+
+.entity-meta__revision {
+ margin-top: 1.5rem;
+}
+
+.entity-meta__header .form-type--item .form-item__label {
+ display: inline-block;
+ margin: 0;
+ font-size: 1rem;
+}
+
+.entity-meta__header .form-type--item .form-item__label::after {
+ content: ":";
+}
diff --git a/core/themes/claro/css/src/components/entity-meta.pcss.css b/core/themes/claro/css/src/components/entity-meta.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..9615fbc1bfa71fdd73b7dd1045a79fbfc4c72e9e
--- /dev/null
+++ b/core/themes/claro/css/src/components/entity-meta.pcss.css
@@ -0,0 +1,50 @@
+/**
+ * @file
+ * Entity meta.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --size-entity-meta-spacing: var(--space-xs);
+}
+
+.entity-meta__header {
+ padding: calc(var(--space-m) - var(--size-entity-meta-spacing)) var(--space-m) calc(var(--space-l) - var(--size-entity-meta-spacing));
+ color: var(--color-fg);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-accordion-border-size-radius);
+ background-color: var(--color-bg);
+}
+
+@media screen and (min-width: 48em) {
+ .entity-meta__header {
+ padding: calc(var(--space-l) - var(--size-entity-meta-spacing)) var(--space-l) var(--space-l);
+ }
+}
+
+.entity-meta__header .form-item {
+ margin-top: var(--size-entity-meta-spacing);
+ margin-bottom: var(--size-entity-meta-spacing);
+}
+
+.entity-meta__title {
+ margin: 0.25em 0;
+ text-shadow: 0 1px 0 #fff;
+ font-size: 1.231em;
+ font-weight: bold;
+}
+
+.entity-meta__revision {
+ margin-top: var(--space-l);
+}
+
+.entity-meta__header .form-type--item .form-item__label {
+ display: inline-block;
+ margin: 0;
+ font-size: var(--font-size-base);
+}
+
+.entity-meta__header .form-type--item .form-item__label::after {
+ content: ":";
+}
diff --git a/core/themes/claro/css/src/components/fieldset.css b/core/themes/claro/css/src/components/fieldset.css
new file mode 100644
index 0000000000000000000000000000000000000000..c69b3fb7831b311c90e5613e3a2ac879f630d762
--- /dev/null
+++ b/core/themes/claro/css/src/components/fieldset.css
@@ -0,0 +1,205 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Fieldset styles.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.fieldset {
+ min-width: 0;
+ margin: 1rem 0;
+ padding: 0;
+ color: #222330;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.fieldset--group {
+ color: inherit;
+ border: 0;
+ border-radius: 0;
+ background: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* IE workaround. */
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen,
+.fieldset {
+ display: table;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+/**
+ * Fieldset legend.
+ */
+
+.fieldset__legend {
+ display: contents; /* For Firefox. */
+ float: left; /* iOS Safari, Android Chrome, Edge. */
+ width: 100%; /* iOS Safari, Android Chrome, Edge. */
+ margin-bottom: 1rem;
+ color: #545560;
+ font-weight: bold;
+}
+
+@media screen and (min-width: 48em) {
+ .fieldset__legend {
+ margin-bottom: 1.5rem;
+ }
+}
+
+.fieldset__legend--composite {
+ float: none;
+ width: auto;
+ margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
+ margin-bottom: 0.25rem; /* 4px */
+ color: inherit;
+ font-size: 0.889rem; /* 14px */
+ line-height: 1.125rem; /* 18px */
+}
+
+/* This is used only on install configure form. */
+
+.fieldset__legend--group {
+ text-transform: uppercase;
+ color: inherit;
+}
+
+.fieldset__label {
+ display: block;
+ padding: 1rem;
+ line-height: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+ .fieldset__label {
+ padding-right: 1.5rem;
+ padding-left: 1.5rem;
+ }
+}
+
+.fieldset__label--group {
+ padding: 0;
+ line-height: inherit;
+}
+
+.fieldset__label.is-disabled {
+ color: #82828c;
+}
+
+.fieldset__label.has-error {
+ color: #d72222;
+}
+
+.fieldset__description {
+ margin-top: 0.375rem; /* 6px */
+ margin-bottom: 0.375rem; /* 6px */
+ color: #545560;
+ font-size: 0.79rem; /* ~13px */
+ line-height: 1.0625rem; /* 17px */
+}
+
+.fieldset__description.is-disabled {
+ color: #82828c;
+}
+
+/* Error message (Inline form errors). */
+
+.fieldset__error-message {
+ margin-top: 0.375rem; /* 6px */
+ margin-bottom: 0.375rem; /* 6px */
+ color: #d72222;
+ font-size: 0.79rem; /* ~13px */
+ font-weight: normal;
+ line-height: 1.0625rem; /* 17px */
+}
+
+.fieldset__wrapper {
+ margin: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+ .fieldset__wrapper {
+ margin: 1.5rem 1.5rem 1.75rem;
+ }
+}
+
+.fieldset__legend--visible ~ .fieldset__wrapper {
+ margin-top: 0;
+}
+
+.fieldset__wrapper--group {
+ margin: 0;
+}
+
+/**
+ * Remove the unnecessary extra padding of container-inline wrapper if it's used
+ * inside a fieldset.
+ */
+
+.fieldset__wrapper > .container-inline {
+ padding: 0;
+}
diff --git a/core/themes/claro/css/src/components/fieldset.pcss.css b/core/themes/claro/css/src/components/fieldset.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..560fdbae106977574c78b2d2443c18b769fca8f3
--- /dev/null
+++ b/core/themes/claro/css/src/components/fieldset.pcss.css
@@ -0,0 +1,142 @@
+/**
+ * @file
+ * Fieldset styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+.fieldset {
+ min-width: 0;
+ margin: var(--space-m) 0;
+ padding: 0;
+ color: var(--color-text);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--base-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
+}
+
+.fieldset--group {
+ color: inherit;
+ border: 0;
+ border-radius: 0;
+ background: none;
+ box-shadow: none;
+}
+
+/* IE workaround. */
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+.fieldset {
+ display: table;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+/**
+ * Fieldset legend.
+ */
+.fieldset__legend {
+ display: contents; /* For Firefox. */
+ float: left; /* iOS Safari, Android Chrome, Edge. */
+ width: 100%; /* iOS Safari, Android Chrome, Edge. */
+ margin-bottom: var(--space-m);
+ color: var(--color-davysgrey);
+ font-weight: bold;
+}
+
+@media screen and (min-width: 48em) {
+ .fieldset__legend {
+ margin-bottom: var(--space-l);
+ }
+}
+
+.fieldset__legend--composite {
+ float: none;
+ width: auto;
+ margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
+ margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+ color: inherit;
+ font-size: var(--font-size-s); /* 14px */
+ line-height: calc(18rem / 16); /* 18px */
+}
+
+/* This is used only on install configure form. */
+.fieldset__legend--group {
+ text-transform: uppercase;
+ color: inherit;
+}
+
+.fieldset__label {
+ display: block;
+ padding: var(--space-m);
+ line-height: var(--space-m);
+}
+
+@media screen and (min-width: 48em) {
+ .fieldset__label {
+ padding-right: var(--space-l);
+ padding-left: var(--space-l);
+ }
+}
+
+.fieldset__label--group {
+ padding: 0;
+ line-height: inherit;
+}
+
+.fieldset__label.is-disabled {
+ color: var(--input--disabled-fg-color);
+}
+
+.fieldset__label.has-error {
+ color: var(--input--error-color);
+}
+
+.fieldset__description {
+ margin-top: calc(6rem / 16); /* 6px */
+ margin-bottom: calc(6rem / 16); /* 6px */
+ color: var(--input-fg-color--description);
+ font-size: var(--font-size-xs); /* ~13px */
+ line-height: calc(17rem / 16); /* 17px */
+}
+
+.fieldset__description.is-disabled {
+ color: var(--input--disabled-fg-color);
+}
+
+/* Error message (Inline form errors). */
+.fieldset__error-message {
+ margin-top: calc(6rem / 16); /* 6px */
+ margin-bottom: calc(6rem / 16); /* 6px */
+ color: var(--input--error-color);
+ font-size: var(--font-size-xs); /* ~13px */
+ font-weight: normal;
+ line-height: calc(17rem / 16); /* 17px */
+}
+
+.fieldset__wrapper {
+ margin: var(--space-m);
+}
+
+@media screen and (min-width: 48em) {
+ .fieldset__wrapper {
+ margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
+ }
+}
+
+.fieldset__legend--visible ~ .fieldset__wrapper {
+ margin-top: 0;
+}
+
+.fieldset__wrapper--group {
+ margin: 0;
+}
+
+/**
+ * Remove the unnecessary extra padding of container-inline wrapper if it's used
+ * inside a fieldset.
+ */
+.fieldset__wrapper > .container-inline {
+ padding: 0;
+}
diff --git a/core/themes/claro/css/src/components/file.css b/core/themes/claro/css/src/components/file.css
new file mode 100644
index 0000000000000000000000000000000000000000..30d5f44cf173a318155e74d6391d82748d260d72
--- /dev/null
+++ b/core/themes/claro/css/src/components/file.css
@@ -0,0 +1,72 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Extends styles of the file link.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.file {
+ min-height: 1.0625rem;
+ padding-left: 1.5rem; /* LTR */
+ background-position: left 0.0625rem;
+ background-size: 1rem 1rem;
+ font-size: 0.889rem;
+ line-height: 1.125rem;
+}
+
+[dir="rtl"] .file {
+ padding-right: 1.5rem;
+}
+
+.file__size {
+ color: #545560;
+}
diff --git a/core/themes/claro/css/src/components/file.pcss.css b/core/themes/claro/css/src/components/file.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..7b4ee3281f3c8870325347e6d334f73ede3070a6
--- /dev/null
+++ b/core/themes/claro/css/src/components/file.pcss.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Extends styles of the file link.
+ */
+
+@import "../base/variables.pcss.css";
+
+.file {
+ min-height: calc(var(--space-m) + 0.0625rem);
+ padding-left: var(--space-l); /* LTR */
+ background-position: left 0.0625rem;
+ background-size: var(--space-m) var(--space-m);
+ font-size: var(--font-size-s);
+ line-height: calc(18rem / 16);
+}
+[dir="rtl"] .file {
+ padding-right: var(--space-l);
+}
+
+.file__size {
+ color: var(--color-davysgrey);
+}
diff --git a/core/themes/claro/css/src/components/form--checkbox-radio--ie.css b/core/themes/claro/css/src/components/form--checkbox-radio--ie.css
new file mode 100644
index 0000000000000000000000000000000000000000..77aa8b72411d3bee22657040cd5118cf66f08f5a
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--checkbox-radio--ie.css
@@ -0,0 +1,210 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Checkbox and radio input elements styles for IE11 and below.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.form-boolean::-ms-check {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 18px;
+ height: 18px;
+ vertical-align: text-bottom;
+ color: transparent; /* IE */
+ border: 1px solid #8e929c;
+ border-radius: 2px;
+ background: #fff no-repeat 50% 50%;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
+ background-size: 100% 100%;
+ box-shadow: 0 0 0 4px transparent;
+}
+
+.form-boolean--type-radio::-ms-check {
+ width: 19px;
+ height: 19px;
+ border-radius: 19px;
+}
+
+.form-boolean:focus::-ms-check {
+ color: transparent; /* IE */
+}
+
+.form-boolean:active::-ms-check,
+.form-boolean:hover::-ms-check {
+ border-color: #222330;
+ box-shadow: inset 0 0 0 1px #222330;
+}
+
+.form-boolean:focus:active::-ms-check,
+.form-boolean:focus:hover::-ms-check {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+}
+
+.form-boolean--type-checkbox:checked::-ms-check {
+ color: transparent; /* IE */
+ border-color: #003cc5;
+ background-color: #003cc5;
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.form-boolean--type-checkbox:checked:active::-ms-check,
+.form-boolean--type-checkbox:checked:hover::-ms-check {
+ border-color: #222330;
+ background-color: #222330;
+}
+
+.form-boolean--type-radio:checked::-ms-check {
+ color: transparent; /* IE */
+ border-color: #003cc5;
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px #003cc5;
+}
+
+.form-boolean--type-checkbox:checked:active::-ms-check,
+.form-boolean--type-checkbox:checked:hover::-ms-check {
+ border-color: #222330;
+ background-color: #222330;
+}
+
+.form-boolean--type-radio:checked::-ms-check {
+ border-color: #003cc5;
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px #003cc5;
+}
+
+.form-boolean--type-radio:checked:focus::-ms-check {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+}
+
+.form-boolean--type-radio:checked:active::-ms-check,
+.form-boolean--type-radio:checked:hover::-ms-check {
+ border-color: #222330;
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px #222330;
+}
+
+.form-boolean--type-radio:checked:focus:active::-ms-check,
+.form-boolean--type-radio:checked:focus:hover::-ms-check {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+}
+
+/**
+ * Error states.
+ */
+
+.form-boolean.error::-ms-check {
+ border-color: #d72222;
+ background-color: #fff;
+ box-shadow: inset 0 0 0 1px #d72222;
+}
+
+.form-boolean.error:active::-ms-check,
+.form-boolean.error:hover::-ms-check {
+ box-shadow: inset 0 0 0 1px #d72222;
+}
+
+.form-boolean.error:focus::-ms-check,
+.form-boolean.error:focus:active::-ms-check,
+.form-boolean.error:focus:hover::-ms-check {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+}
+
+.form-boolean.error:checked:active::-ms-check,
+.form-boolean.error:checked:hover::-ms-check {
+ border-color: #d72222;
+ background-color: #fff;
+}
+
+.form-boolean--type-checkbox.error:checked::-ms-check,
+.form-boolean--type-checkbox.error:checked:active::-ms-check,
+.form-boolean--type-checkbox.error:checked:hover::-ms-check {
+ background-color: #d72222;
+}
+
+.form-boolean--type-radio.error:checked::-ms-check,
+.form-boolean--type-radio.error:checked:active::-ms-check,
+.form-boolean--type-radio.error:checked:hover::-ms-check {
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
+}
+
+.form-boolean--type-radio.error:checked:focus::-ms-check {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+}
+
+/**
+ * Disabled states.
+ */
+
+.form-boolean[disabled]::-ms-check,
+.form-boolean[disabled]:hover::-ms-check,
+.form-boolean[disabled].error::-ms-check,
+.form-boolean[disabled].error:hover::-ms-check,
+.form-boolean--type-radio[disabled]:focus:active::-ms-check,
+.form-boolean--type-radio[disabled]:active:hover::-ms-check,
+.form-boolean--type-radio[disabled].error:active:hover::-ms-check {
+ border-color: #bababf;
+ background-color: #f2f2f3;
+ background-image: none;
+ box-shadow: none;
+}
+
+.form-boolean--type-checkbox[disabled]:checked::-ms-check {
+ color: transparent; /* IE */
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
+}
+
+.form-boolean--type-radio[disabled]:checked::-ms-check,
+.form-boolean--type-radio[disabled].error:checked::-ms-check {
+ color: transparent; /* IE */
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
+}
diff --git a/core/themes/claro/css/src/components/form--checkbox-radio--ie.pcss.css b/core/themes/claro/css/src/components/form--checkbox-radio--ie.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..f2f63d68c11593022c5b695f0662ff20ea546c7c
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--checkbox-radio--ie.pcss.css
@@ -0,0 +1,139 @@
+/**
+ * @file
+ * Checkbox and radio input elements styles for IE11 and below.
+ */
+
+@import "../base/variables.pcss.css";
+
+.form-boolean::-ms-check {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 18px;
+ height: 18px;
+ vertical-align: text-bottom;
+ color: transparent; /* IE */
+ border: 1px solid var(--input-border-color);
+ border-radius: 2px;
+ background: var(--input-bg-color) no-repeat 50% 50%;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
+ background-size: 100% 100%;
+ box-shadow: 0 0 0 4px transparent;
+}
+.form-boolean--type-radio::-ms-check {
+ width: 19px;
+ height: 19px;
+ border-radius: 19px;
+}
+.form-boolean:focus::-ms-check {
+ color: transparent; /* IE */
+}
+.form-boolean:active::-ms-check,
+.form-boolean:hover::-ms-check {
+ border-color: var(--input-fg-color);
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
+}
+.form-boolean:focus:active::-ms-check,
+.form-boolean:focus:hover::-ms-check {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+}
+.form-boolean--type-checkbox:checked::-ms-check {
+ color: transparent; /* IE */
+ border-color: var(--input--focus-border-color);
+ background-color: var(--input--focus-border-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
+}
+.form-boolean--type-checkbox:checked:active::-ms-check,
+.form-boolean--type-checkbox:checked:hover::-ms-check {
+ border-color: var(--input-fg-color);
+ background-color: var(--input-fg-color);
+}
+.form-boolean--type-radio:checked::-ms-check {
+ color: transparent; /* IE */
+ border-color: var(--input--focus-border-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
+}
+.form-boolean--type-checkbox:checked:active::-ms-check,
+.form-boolean--type-checkbox:checked:hover::-ms-check {
+ border-color: var(--input-fg-color);
+ background-color: var(--input-fg-color);
+}
+.form-boolean--type-radio:checked::-ms-check {
+ border-color: var(--input--focus-border-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
+}
+.form-boolean--type-radio:checked:focus::-ms-check {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
+}
+.form-boolean--type-radio:checked:active::-ms-check,
+.form-boolean--type-radio:checked:hover::-ms-check {
+ border-color: var(--input-fg-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
+}
+.form-boolean--type-radio:checked:focus:active::-ms-check,
+.form-boolean--type-radio:checked:focus:hover::-ms-check {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+}
+
+/**
+ * Error states.
+ */
+.form-boolean.error::-ms-check {
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
+}
+.form-boolean.error:active::-ms-check,
+.form-boolean.error:hover::-ms-check {
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
+}
+.form-boolean.error:focus::-ms-check,
+.form-boolean.error:focus:active::-ms-check,
+.form-boolean.error:focus:hover::-ms-check {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+}
+.form-boolean.error:checked:active::-ms-check,
+.form-boolean.error:checked:hover::-ms-check {
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
+}
+.form-boolean--type-checkbox.error:checked::-ms-check,
+.form-boolean--type-checkbox.error:checked:active::-ms-check,
+.form-boolean--type-checkbox.error:checked:hover::-ms-check {
+ background-color: var(--input--error-border-color);
+}
+.form-boolean--type-radio.error:checked::-ms-check,
+.form-boolean--type-radio.error:checked:active::-ms-check,
+.form-boolean--type-radio.error:checked:hover::-ms-check {
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
+}
+.form-boolean--type-radio.error:checked:focus::-ms-check {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+}
+
+/**
+ * Disabled states.
+ */
+.form-boolean[disabled]::-ms-check,
+.form-boolean[disabled]:hover::-ms-check,
+.form-boolean[disabled].error::-ms-check,
+.form-boolean[disabled].error:hover::-ms-check,
+.form-boolean--type-radio[disabled]:focus:active::-ms-check,
+.form-boolean--type-radio[disabled]:active:hover::-ms-check,
+.form-boolean--type-radio[disabled].error:active:hover::-ms-check {
+ border-color: var(--input--disabled-border-color);
+ background-color: var(--input--disabled-bg-color);
+ background-image: none;
+ box-shadow: none;
+}
+.form-boolean--type-checkbox[disabled]:checked::-ms-check {
+ color: transparent; /* IE */
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
+}
+.form-boolean--type-radio[disabled]:checked::-ms-check,
+.form-boolean--type-radio[disabled].error:checked::-ms-check {
+ color: transparent; /* IE */
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
+}
diff --git a/core/themes/claro/css/src/components/form--checkbox-radio.css b/core/themes/claro/css/src/components/form--checkbox-radio.css
new file mode 100644
index 0000000000000000000000000000000000000000..662f7279ea2a65ff47a0747a8785739cb95fc2f5
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--checkbox-radio.css
@@ -0,0 +1,277 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Form item modifiers.
+ */
+
+.form-type--boolean {
+ margin-left: 1.6875rem; /* LTR */
+ line-height: 1.5rem;
+}
+
+[dir="rtl"] .form-type--boolean {
+ margin-right: 1.6875rem;
+ margin-left: 0;
+}
+
+/**
+ * Radio and checkbox items that are the child of a form item.
+ */
+
+.form-type--boolean .form-boolean {
+ position: relative;
+ top: 0.75rem;
+ float: left; /* LTR */
+ margin-left: -1.6875rem; /* LTR */
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+[dir="rtl"] .form-type--boolean .form-boolean {
+ float: right;
+ margin-right: -1.6875rem;
+ margin-left: 0;
+}
+
+.form-type--boolean.form-item--no-label {
+ margin-left: 0;
+}
+
+[dir="rtl"] .form-type--boolean.form-item--no-label {
+ margin-right: 0;
+}
+
+.form-type--boolean.form-item--no-label .form-boolean,
+[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
+ position: static;
+ float: none;
+ margin-right: 0;
+ margin-left: 0;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ -o-transform: none;
+ transform: none;
+}
+
+/**
+ * When form items are nested in radios or checkboxes group, reduce the default
+ * space between them.
+ */
+
+.form-boolean-group .form-type--boolean {
+ margin-top: 0.4em;
+ margin-bottom: 0.4em;
+}
+
+/**
+ * Input appearance.
+ */
+
+.form-boolean {
+ display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 18px;
+ height: 18px;
+ vertical-align: text-bottom;
+ border: 1px solid #8e929c;
+ border-radius: 2px;
+ background: #fff no-repeat 50% 50%;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
+ background-size: 100% 100%;
+ -webkit-box-shadow: 0 0 0 4px transparent;
+ box-shadow: 0 0 0 4px transparent;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.form-boolean--type-radio {
+ width: 19px;
+ height: 19px;
+ border-radius: 19px;
+}
+
+.form-boolean:active,
+.form-boolean:hover {
+ border-color: #222330;
+ -webkit-box-shadow: inset 0 0 0 1px #222330;
+ box-shadow: inset 0 0 0 1px #222330;
+}
+
+.form-boolean:focus:active,
+.form-boolean:focus:hover {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+}
+
+.form-boolean--type-checkbox:checked {
+ border-color: #003cc5;
+ background-color: #003cc5;
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.form-boolean--type-checkbox:checked:active,
+.form-boolean--type-checkbox:checked:hover {
+ border-color: #222330;
+ background-color: #222330;
+}
+
+.form-boolean--type-radio:checked {
+ border-color: #003cc5;
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+ -webkit-box-shadow: inset 0 0 0 1px #003cc5;
+ box-shadow: inset 0 0 0 1px #003cc5;
+}
+
+.form-boolean--type-radio:checked:focus {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+}
+
+.form-boolean--type-radio:checked:active,
+.form-boolean--type-radio:checked:hover {
+ border-color: #222330;
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+ -webkit-box-shadow: inset 0 0 0 1px #222330;
+ box-shadow: inset 0 0 0 1px #222330;
+}
+
+.form-boolean--type-radio:checked:focus:active,
+.form-boolean--type-radio:checked:focus:hover {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+}
+
+/**
+ * Error states.
+ */
+
+.form-boolean.error {
+ border-color: #d72222;
+ background-color: #fff;
+ -webkit-box-shadow: inset 0 0 0 1px #d72222;
+ box-shadow: inset 0 0 0 1px #d72222;
+}
+
+.form-boolean.error:active,
+.form-boolean.error:hover {
+ -webkit-box-shadow: inset 0 0 0 1px #d72222;
+ box-shadow: inset 0 0 0 1px #d72222;
+}
+
+.form-boolean.error:focus,
+.form-boolean.error:focus:active,
+.form-boolean.error:focus:hover {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+}
+
+.form-boolean.error:checked:active,
+.form-boolean.error:checked:hover {
+ border-color: #d72222;
+ background-color: #fff;
+}
+
+.form-boolean--type-checkbox.error:checked,
+.form-boolean--type-checkbox.error:checked:active,
+.form-boolean--type-checkbox.error:checked:hover {
+ background-color: #d72222;
+}
+
+.form-boolean--type-radio.error:checked,
+.form-boolean--type-radio.error:checked:active,
+.form-boolean--type-radio.error:checked:hover {
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
+}
+
+.form-boolean--type-radio.error:checked:focus {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+}
+
+/**
+ * Disabled states.
+ */
+
+.form-boolean[disabled],
+.form-boolean[disabled]:hover,
+.form-boolean[disabled].error,
+.form-boolean[disabled].error:hover,
+.form-boolean--type-radio[disabled]:focus:active,
+.form-boolean--type-radio[disabled]:active:hover,
+.form-boolean--type-radio[disabled].error:active:hover {
+ border-color: #bababf;
+ background-color: #f2f2f3;
+ background-image: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.form-boolean--type-checkbox[disabled]:checked {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
+}
+
+.form-boolean--type-radio[disabled]:checked,
+.form-boolean--type-radio[disabled].error:checked {
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
+}
diff --git a/core/themes/claro/css/src/components/form--checkbox-radio.pcss.css b/core/themes/claro/css/src/components/form--checkbox-radio.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..e78f55ebbe01e3e2940a1062f6bf8d40433a3beb
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--checkbox-radio.pcss.css
@@ -0,0 +1,177 @@
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Form item modifiers.
+ */
+.form-type--boolean {
+ margin-left: var(--input--label-spacing); /* LTR */
+ line-height: var(--space-l);
+}
+[dir="rtl"] .form-type--boolean {
+ margin-right: var(--input--label-spacing);
+ margin-left: 0;
+}
+
+/**
+ * Radio and checkbox items that are the child of a form item.
+ */
+.form-type--boolean .form-boolean {
+ position: relative;
+ top: calc(var(--space-l) / 2);
+ float: left; /* LTR */
+ margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
+ transform: translateY(-50%);
+}
+[dir="rtl"] .form-type--boolean .form-boolean {
+ float: right;
+ margin-right: calc(var(--input--label-spacing) * -1);
+ margin-left: 0;
+}
+
+.form-type--boolean.form-item--no-label {
+ margin-left: 0;
+}
+[dir="rtl"] .form-type--boolean.form-item--no-label {
+ margin-right: 0;
+}
+.form-type--boolean.form-item--no-label .form-boolean,
+[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
+ position: static;
+ float: none;
+ margin-right: 0;
+ margin-left: 0;
+ transform: none;
+}
+
+/**
+ * When form items are nested in radios or checkboxes group, reduce the default
+ * space between them.
+ */
+.form-boolean-group .form-type--boolean {
+ margin-top: 0.4em;
+ margin-bottom: 0.4em;
+}
+
+/**
+ * Input appearance.
+ */
+.form-boolean {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 18px;
+ height: 18px;
+ vertical-align: text-bottom;
+ border: 1px solid var(--input-border-color);
+ border-radius: 2px;
+ background: var(--input-bg-color) no-repeat 50% 50%;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
+ background-size: 100% 100%;
+ box-shadow: 0 0 0 4px transparent;
+ appearance: none;
+}
+.form-boolean--type-radio {
+ width: 19px;
+ height: 19px;
+ border-radius: 19px;
+}
+.form-boolean:active,
+.form-boolean:hover {
+ border-color: var(--input-fg-color);
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
+}
+.form-boolean:focus:active,
+.form-boolean:focus:hover {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+}
+.form-boolean--type-checkbox:checked {
+ border-color: var(--input--focus-border-color);
+ background-color: var(--input--focus-border-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
+}
+.form-boolean--type-checkbox:checked:active,
+.form-boolean--type-checkbox:checked:hover {
+ border-color: var(--input-fg-color);
+ background-color: var(--input-fg-color);
+}
+.form-boolean--type-radio:checked {
+ border-color: var(--input--focus-border-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
+}
+.form-boolean--type-radio:checked:focus {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
+}
+.form-boolean--type-radio:checked:active,
+.form-boolean--type-radio:checked:hover {
+ border-color: var(--input-fg-color);
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
+}
+.form-boolean--type-radio:checked:focus:active,
+.form-boolean--type-radio:checked:focus:hover {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+}
+
+/**
+ * Error states.
+ */
+.form-boolean.error {
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
+}
+.form-boolean.error:active,
+.form-boolean.error:hover {
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
+}
+.form-boolean.error:focus,
+.form-boolean.error:focus:active,
+.form-boolean.error:focus:hover {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+}
+.form-boolean.error:checked:active,
+.form-boolean.error:checked:hover {
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
+}
+.form-boolean--type-checkbox.error:checked,
+.form-boolean--type-checkbox.error:checked:active,
+.form-boolean--type-checkbox.error:checked:hover {
+ background-color: var(--input--error-border-color);
+}
+.form-boolean--type-radio.error:checked,
+.form-boolean--type-radio.error:checked:active,
+.form-boolean--type-radio.error:checked:hover {
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
+}
+.form-boolean--type-radio.error:checked:focus {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+}
+
+/**
+ * Disabled states.
+ */
+.form-boolean[disabled],
+.form-boolean[disabled]:hover,
+.form-boolean[disabled].error,
+.form-boolean[disabled].error:hover,
+.form-boolean--type-radio[disabled]:focus:active,
+.form-boolean--type-radio[disabled]:active:hover,
+.form-boolean--type-radio[disabled].error:active:hover {
+ border-color: var(--input--disabled-border-color);
+ background-color: var(--input--disabled-bg-color);
+ background-image: none;
+ box-shadow: none;
+}
+.form-boolean--type-checkbox[disabled]:checked {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
+}
+.form-boolean--type-radio[disabled]:checked,
+.form-boolean--type-radio[disabled].error:checked {
+ background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
+}
diff --git a/core/themes/claro/css/src/components/form--field-multiple.css b/core/themes/claro/css/src/components/form--field-multiple.css
new file mode 100644
index 0000000000000000000000000000000000000000..67f9110a576d581b8bec0fe4dcbf1f841a2c6ece
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--field-multiple.css
@@ -0,0 +1,65 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for multiple field tables.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.field-multiple-table {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.form-item--multiple .field-add-more-submit {
+ margin-top: 0;
+ margin-bottom: 0;
+}
diff --git a/core/themes/claro/css/src/components/form--field-multiple.pcss.css b/core/themes/claro/css/src/components/form--field-multiple.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..d7ed84cf8f007cccc5be72652fcede6f41496431
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--field-multiple.pcss.css
@@ -0,0 +1,16 @@
+/**
+ * @file
+ * Styles for multiple field tables.
+ */
+
+@import "../base/variables.pcss.css";
+
+.field-multiple-table {
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+}
+
+.form-item--multiple .field-add-more-submit {
+ margin-top: 0;
+ margin-bottom: 0;
+}
diff --git a/core/themes/claro/css/src/components/form--managed-file.css b/core/themes/claro/css/src/components/form--managed-file.css
new file mode 100644
index 0000000000000000000000000000000000000000..47ad246adf2fed2f08448344310040ebeb172e6c
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--managed-file.css
@@ -0,0 +1,387 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the managed file widget.
+ *
+ * This includes the styles for the file widgets and the image widgets.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * The root element of the file/image widget.
+ */
+
+.form-managed-file.no-upload {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -moz-box-orient: vertical;
+ -moz-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 100%;
+}
+
+.form-managed-file.has-value.is-multiple {
+ display: block;
+}
+
+/**
+ * The main element of the file/image widget.
+ *
+ * This contains the upload input and the upload of the empty file/image
+ * widgets, or the file name (with icon and size) and the remove button of
+ * filled widgets.
+ *
+ * The inline-flex display shrinks the width to the minimal needed amount. This
+ * helps to keep the remove as close to the other elements as possible.
+ */
+
+.form-managed-file__main {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -moz-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: 100%;
+}
+
+/**
+ * Inside (draggable) tables, this should be flex-displayed. This keeps even
+ * long file names in the same visual line where the drag handle is.
+ */
+
+.draggable .form-managed-file.has-value .form-managed-file__main {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+/* Add some bottom margin for single widgets if no meta is present. */
+
+.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
+ margin-bottom: 1rem;
+}
+
+/**
+ * The 'meta' element of the file/image widget.
+ *
+ * This element is available only if the file widget has a value AND when there
+ * are other input options than the ones rendered in the 'main' element.
+ * These inputs are:
+ * - File description and/or the file display checkbox of file widgets
+ * - Image alt and/or title text as well as the preview image of the image
+ * widgets.
+ *
+ * The trick here is that we will display the alt/title inputs next to the image
+ * preview if there is enough space left. Enough space means the value of the
+ * '--file-widget-form-item-min-width' variable.
+ */
+
+.form-managed-file__meta {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -moz-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ margin-top: 1rem; /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
+}
+
+/**
+ * In tables, this should be inline-flex. This is needed to make this element be
+ * pushed to a new line, to the bottom of the drag handle.
+ */
+
+.draggable .form-managed-file.has-value .form-managed-file__meta {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+
+/**
+ * Internet Explorer 11 does not shrinks our meta elements if one of its parent
+ * element is a table. Without this fix, the file widgets table cell would have
+ * the same width that is needed for displaying the file name in a single line.
+ *
+ * @see https://github.com/philipwalton/flexbugs/issues/179
+ */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ td .form-managed-file__meta {
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ }
+}
+
+/**
+ * The 'image preview' element.
+ *
+ * This is used and display only by the image widget.
+ */
+
+.form-managed-file__image-preview {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -moz-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ max-width: 100%;
+ margin-bottom: 1rem;
+}
+
+/* Add some 'end' margin if there are other meta inputs. */
+
+.form-managed-file.has-meta .form-managed-file__image-preview {
+ margin-right: 1rem; /* LTR */
+}
+
+[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
+ margin-right: 0;
+ margin-left: 1rem;
+}
+
+/**
+ * If this is rendered inside a file multiple table and there are no alt or
+ * title, we have to reduce the amount of the bottom margin.
+ */
+
+td .form-managed-file.no-meta .form-managed-file__image-preview {
+ margin-bottom: 0.5rem;
+}
+
+/**
+ * The children of the 'meta items' element are the inputs that were described
+ * at the 'meta' element '.form-managed-file__meta', except of the image
+ * preview.
+ *
+ * The flex-basis is set to the minimal width where we can display these inputs
+ * next tho the preview image.
+ *
+ * We limit the max width directly on the '.form-item' elements.
+ */
+
+.form-managed-file__meta-items {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 1 16rem;
+ -moz-box-flex: 1;
+ -ms-flex: 1 1 16rem;
+ flex: 1 1 16rem;
+ max-width: 100%;
+}
+
+/**
+ * Internet Explorer 11 does not increase the width of those flex items that are
+ * allowed to be wrapped. We just simply change the basis to the max-width.
+ */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ .form-managed-file__meta-items {
+ -ms-flex-preferred-size: 32rem;
+ flex-basis: 32rem;
+ }
+}
+
+/**
+ * Meta items wrapper.
+ * This markup element is needed only for working around the same IE 11 bug that
+ * is described above, at the 'meta' element.
+ *
+ * @see https://github.com/philipwalton/flexbugs/issues/179
+ */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ td .form-managed-file__meta-wrapper {
+ display: -ms-flexbox;
+ display: flex;
+ }
+}
+
+/**
+ * Modify component defaults for file/image widgets.
+ */
+
+/**
+ * File component style overrides for managed file widgets.
+ */
+
+.form-managed-file .file {
+ word-break: break-all;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+}
+
+.form-managed-file .file__size {
+ word-break: normal;
+}
+
+.form-managed-file__main .file {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 1 auto;
+ -moz-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ margin: 0.5rem 1rem 0.5rem 0; /* LTR */
+}
+
+[dir="rtl"] .form-managed-file__main .file {
+ margin-right: 0;
+ margin-left: 1rem;
+}
+
+/**
+ * Fix and override the table-related bug of Internet Explorer 11 (described at
+ * the 'meta' element).
+ *
+ * @see https://github.com/philipwalton/flexbugs/issues/179
+ */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ td .form-managed-file__main .file {
+ -ms-flex: 0 1 100%;
+ flex: 0 1 100%;
+ }
+}
+
+/**
+ * Remove the default margins of buttons.
+ * The '.button' selector is doubled for RTL layouts.
+ */
+
+.form-managed-file .button.button {
+ margin: 0;
+}
+
+/**
+ * The file upload input.
+ */
+
+.form-managed-file__main .form-element--api-file {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 1 auto;
+ -moz-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 1px; /* This makes the element to be shrinked on IE11 */
+}
+
+/**
+ * This applies both on the 'no-js' upload button and the remove button.
+ * We don't want to let these to be shrinked.
+ */
+
+.form-managed-file__main .button {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -moz-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
+/**
+ * Limiting the width of form items inside the meta element.
+ */
+
+.form-managed-file__meta .form-item {
+ max-width: 32rem;
+ margin-top: 0; /* Top margin is added by the parent element */
+ margin-bottom: 1rem;
+}
+
+/**
+ * Reduce the bottom margin of the last 'meta' form-item for field multiple
+ * tables.
+ */
+
+.form-managed-file__meta .form-item:last-child {
+ margin-bottom: 0.5rem;
+}
+
+.form-managed-file__meta .form-element {
+ width: 100%;
+}
+
+/**
+ * Add side margins if a table precedes the managed file form element.
+ */
+
+.file-widget-multiple.has-table .form-type--managed-file {
+ margin-right: 1rem;
+ margin-left: 1rem;
+}
diff --git a/core/themes/claro/css/src/components/form--managed-file.pcss.css b/core/themes/claro/css/src/components/form--managed-file.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..dfd0f8c34e474f93b52a0b54203d4f0298837003
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--managed-file.pcss.css
@@ -0,0 +1,257 @@
+/**
+ * @file
+ * Styles for the managed file widget.
+ *
+ * This includes the styles for the file widgets and the image widgets.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --file-widget-form-item-min-width: 16rem;
+ --file-widget-form-item-max-width: 32rem;
+}
+
+/**
+ * The root element of the file/image widget.
+ */
+.form-managed-file.no-upload {
+ display: inline-flex;
+ flex-direction: column;
+ max-width: 100%;
+}
+
+.form-managed-file.has-value.is-multiple {
+ display: block;
+}
+
+/**
+ * The main element of the file/image widget.
+ *
+ * This contains the upload input and the upload of the empty file/image
+ * widgets, or the file name (with icon and size) and the remove button of
+ * filled widgets.
+ *
+ * The inline-flex display shrinks the width to the minimal needed amount. This
+ * helps to keep the remove as close to the other elements as possible.
+ */
+.form-managed-file__main {
+ display: inline-flex;
+ align-items: center;
+ max-width: 100%;
+}
+
+/**
+ * Inside (draggable) tables, this should be flex-displayed. This keeps even
+ * long file names in the same visual line where the drag handle is.
+ */
+.draggable .form-managed-file.has-value .form-managed-file__main {
+ display: flex;
+}
+
+/* Add some bottom margin for single widgets if no meta is present. */
+.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
+ margin-bottom: var(--space-m);
+}
+
+/**
+ * The 'meta' element of the file/image widget.
+ *
+ * This element is available only if the file widget has a value AND when there
+ * are other input options than the ones rendered in the 'main' element.
+ * These inputs are:
+ * - File description and/or the file display checkbox of file widgets
+ * - Image alt and/or title text as well as the preview image of the image
+ * widgets.
+ *
+ * The trick here is that we will display the alt/title inputs next to the image
+ * preview if there is enough space left. Enough space means the value of the
+ * '--file-widget-form-item-min-width' variable.
+ */
+.form-managed-file__meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ margin-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
+}
+
+/**
+ * In tables, this should be inline-flex. This is needed to make this element be
+ * pushed to a new line, to the bottom of the drag handle.
+ */
+.draggable .form-managed-file.has-value .form-managed-file__meta {
+ display: inline-flex;
+}
+
+/**
+ * Internet Explorer 11 does not shrinks our meta elements if one of its parent
+ * element is a table. Without this fix, the file widgets table cell would have
+ * the same width that is needed for displaying the file name in a single line.
+ *
+ * @see https://github.com/philipwalton/flexbugs/issues/179
+ */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ td .form-managed-file__meta {
+ flex-basis: 100%;
+ }
+}
+
+/**
+ * The 'image preview' element.
+ *
+ * This is used and display only by the image widget.
+ */
+.form-managed-file__image-preview {
+ flex: 0 0 auto;
+ max-width: 100%;
+ margin-bottom: var(--space-m);
+}
+
+/* Add some 'end' margin if there are other meta inputs. */
+.form-managed-file.has-meta .form-managed-file__image-preview {
+ margin-right: var(--space-m); /* LTR */
+}
+[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
+ margin-right: 0;
+ margin-left: var(--space-m);
+}
+
+/**
+ * If this is rendered inside a file multiple table and there are no alt or
+ * title, we have to reduce the amount of the bottom margin.
+ */
+td .form-managed-file.no-meta .form-managed-file__image-preview {
+ margin-bottom: var(--space-xs);
+}
+
+/**
+ * The children of the 'meta items' element are the inputs that were described
+ * at the 'meta' element '.form-managed-file__meta', except of the image
+ * preview.
+ *
+ * The flex-basis is set to the minimal width where we can display these inputs
+ * next tho the preview image.
+ *
+ * We limit the max width directly on the '.form-item' elements.
+ */
+.form-managed-file__meta-items {
+ flex: 1 1 var(--file-widget-form-item-min-width);
+ max-width: 100%;
+}
+
+/**
+ * Internet Explorer 11 does not increase the width of those flex items that are
+ * allowed to be wrapped. We just simply change the basis to the max-width.
+ */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ .form-managed-file__meta-items {
+ flex-basis: var(--file-widget-form-item-max-width);
+ }
+}
+
+/**
+ * Meta items wrapper.
+ * This markup element is needed only for working around the same IE 11 bug that
+ * is described above, at the 'meta' element.
+ *
+ * @see https://github.com/philipwalton/flexbugs/issues/179
+ */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ td .form-managed-file__meta-wrapper {
+ display: flex;
+ }
+}
+
+/**
+ * Modify component defaults for file/image widgets.
+ */
+
+/**
+ * File component style overrides for managed file widgets.
+ */
+.form-managed-file .file {
+ word-break: break-all;
+ hyphens: auto;
+}
+
+.form-managed-file .file__size {
+ word-break: normal;
+}
+
+.form-managed-file__main .file {
+ flex: 1 1 auto;
+ 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);
+}
+
+/**
+ * Fix and override the table-related bug of Internet Explorer 11 (described at
+ * the 'meta' element).
+ *
+ * @see https://github.com/philipwalton/flexbugs/issues/179
+ */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ *::-ms-backdrop,
+ td .form-managed-file__main .file {
+ flex: 0 1 100%;
+ }
+}
+
+/**
+ * Remove the default margins of buttons.
+ * The '.button' selector is doubled for RTL layouts.
+ */
+.form-managed-file .button.button {
+ margin: 0;
+}
+
+/**
+ * The file upload input.
+ */
+.form-managed-file__main .form-element--api-file {
+ flex: 1 1 auto;
+ min-width: 1px; /* This makes the element to be shrinked on IE11 */
+}
+
+/**
+ * This applies both on the 'no-js' upload button and the remove button.
+ * We don't want to let these to be shrinked.
+ */
+.form-managed-file__main .button {
+ flex: 0 0 auto;
+}
+
+/**
+ * Limiting the width of form items inside the meta element.
+ */
+.form-managed-file__meta .form-item {
+ max-width: var(--file-widget-form-item-max-width);
+ margin-top: 0; /* Top margin is added by the parent element */
+ margin-bottom: var(--space-m);
+}
+
+/**
+ * Reduce the bottom margin of the last 'meta' form-item for field multiple
+ * tables.
+ */
+.form-managed-file__meta .form-item:last-child {
+ margin-bottom: var(--space-xs);
+}
+
+.form-managed-file__meta .form-element {
+ width: 100%;
+}
+
+/**
+ * Add side margins if a table precedes the managed file form element.
+ */
+.file-widget-multiple.has-table .form-type--managed-file {
+ margin-right: var(--space-m);
+ margin-left: var(--space-m);
+}
diff --git a/core/themes/claro/css/src/components/form--password-confirm.css b/core/themes/claro/css/src/components/form--password-confirm.css
new file mode 100644
index 0000000000000000000000000000000000000000..308c813de0b61d65a46f5dd591cae21e53fefeef
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--password-confirm.css
@@ -0,0 +1,279 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for the Password widgets.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+:root {
+ /* Weak */
+ /* Fair */
+ /* Good */
+ /* Strong */
+}
+
+/**
+ * Password confirm widget styles.
+ */
+
+.password-confirm {
+ max-width: 25rem;
+}
+
+.password-confirm__password {
+ margin-bottom: 0;
+}
+
+.password-confirm__confirm {
+ margin-bottom: 0;
+}
+
+.js .password-confirm__confirm {
+ overflow: hidden;
+ max-height: 10rem;
+ -webkit-transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
+ -o-transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
+ -moz-transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
+ transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ .js .password-confirm__confirm {
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+}
+
+/* Password confirm widget states. */
+
+.js .is-initial:not(.form-item--error) .form-item__description {
+ margin-top: 0;
+}
+
+.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
+ display: none;
+ max-height: 0;
+ margin-top: 0;
+}
+
+/**
+ * Password strength
+ *
+ * Description and strength indicator for the main input.
+ */
+
+.password-strength {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.password-strength__track {
+ height: -webkit-calc(0.5rem - 2px);
+ height: -moz-calc(0.5rem - 2px);
+ height: calc(0.5rem - 2px);
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ border: 1px solid #8e929c;
+ border-radius: 0.5rem;
+ background-color: #d4d4d8;
+}
+
+.password-strength__track::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+.password-strength__bar {
+ min-width: -webkit-calc(0.5rem - 2px);
+ min-width: -moz-calc(0.5rem - 2px);
+ min-width: calc(0.5rem - 2px);
+ height: -webkit-calc(0.5rem - 2px);
+ height: -moz-calc(0.5rem - 2px);
+ height: calc(0.5rem - 2px);
+ margin: -1px;
+ -webkit-transition: width
+0.5s
+ease-out;
+ -o-transition: width
+0.5s
+ease-out;
+ -moz-transition: width
+0.5s
+ease-out;
+ transition: width
+0.5s
+ease-out;
+ border: 1px solid transparent;
+ border-radius: 0.5rem;
+ background-color: transparent;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ .password-strength__bar {
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .password-strength__bar {
+ background-color: windowText;
+ }
+
+ .is-initial .password-strength__bar {
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.password-strength__title {
+ overflow: hidden;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ color: #545560;
+ font-size: 0.79rem;
+ line-height: 1rem;
+}
+
+.password-strength__text {
+ color: #222330;
+ font-weight: bold;
+}
+
+/* Password strength states */
+
+.password-strength__bar.is-weak {
+ border-color: #d72222;
+ background-color: #d72222;
+}
+
+.password-strength__bar.is-fair {
+ border-color: #977405;
+ background-color: #ffd23f;
+}
+
+.password-strength__bar.is-good {
+ border-color: #26a769;
+ background-color: #26a769;
+}
+
+.password-strength__bar.is-strong {
+ border-color: #26a769;
+ background-color: #26a769;
+}
+
+.is-initial.is-password-empty .password-strength__title {
+ margin: 0;
+ line-height: 0;
+}
+
+/**
+ * Password match message.
+ *
+ * This is the description-like message on the bottom of the password confirm
+ * input.
+ */
+
+.password-match-message {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ color: #545560;
+ font-size: 0.79rem;
+}
+
+.password-match-message__text {
+ color: #222330;
+ font-weight: bold;
+}
+
+.is-confirm-empty .password-match-message {
+ visibility: hidden;
+}
+
+/**
+ * Password suggestions.
+ *
+ * Tips for improving the password.
+ */
+
+.password-suggestions {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ padding: 1rem;
+ color: #545560;
+ border: 1px solid #d4d4d8;
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ font-size: 0.79rem;
+}
+
+.password-suggestions__tips {
+ margin: 0.5rem 0 0 1.5rem; /* LTR */
+}
+
+[dir="rtl"] .password-suggestions__tips {
+ margin-right: 1.5rem;
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/src/components/form--password-confirm.pcss.css b/core/themes/claro/css/src/components/form--password-confirm.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..860d47467594d2acfce27c369f007a6c6ae31af2
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--password-confirm.pcss.css
@@ -0,0 +1,198 @@
+/**
+ * @file
+ * Visual styles for the Password widgets.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ /* Weak */
+ --password-strength-bar--weak-bg-color: var(--color-maximumred);
+ --password-strength-bar--weak-border-color: var(--color-maximumred);
+ /* Fair */
+ --password-strength-bar--fair-bg-color: var(--color-sunglow);
+ --password-strength-bar--fair-border-color: #977405;
+ /* Good */
+ --password-strength-bar--good-bg-color: var(--color-lightninggreen);
+ --password-strength-bar--good-border-color: var(--color-lightninggreen);
+ /* Strong */
+ --password-strength-bar--strong-bg-color: var(--color-lightninggreen);
+ --password-strength-bar--strong-border-color: var(--color-lightninggreen);
+}
+
+/**
+ * Password confirm widget styles.
+ */
+.password-confirm {
+ max-width: 25rem;
+}
+
+.password-confirm__password {
+ margin-bottom: 0;
+}
+
+.password-confirm__confirm {
+ margin-bottom: 0;
+}
+
+.js .password-confirm__confirm {
+ overflow: hidden;
+ max-height: 10rem;
+ transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ .js .password-confirm__confirm {
+ transition: none;
+ }
+}
+
+/* Password confirm widget states. */
+.js .is-initial:not(.form-item--error) .form-item__description {
+ margin-top: 0;
+}
+
+.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
+ display: none;
+ max-height: 0;
+ margin-top: 0;
+}
+
+/**
+ * Password strength
+ *
+ * Description and strength indicator for the main input.
+ */
+.password-strength {
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+}
+
+.password-strength__track {
+ height: var(--progress-bar-small-size);
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+ border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
+ border-radius: var(--progress-bar-small-size-radius);
+ background-color: var(--progress-track-bg-color);
+}
+
+.password-strength__track::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+.password-strength__bar {
+ min-width: var(--progress-bar-small-size);
+ height: var(--progress-bar-small-size);
+ margin: calc(var(--progress-bar-border-size) * -1);
+ transition: var(--progress-bar-transition);
+ border: var(--progress-bar-border-size) solid transparent;
+ border-radius: var(--progress-bar-small-size-radius);
+ background-color: transparent;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ .password-strength__bar {
+ transition: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .password-strength__bar {
+ background-color: windowText;
+ }
+
+ .is-initial .password-strength__bar {
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.password-strength__title {
+ overflow: hidden;
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+ color: var(--progress-bar-description-color);
+ font-size: var(--progress-bar-description-font-size);
+ line-height: var(--space-m);
+}
+
+.password-strength__text {
+ color: var(--progress-bar-label-color);
+ font-weight: bold;
+}
+
+/* Password strength states */
+.password-strength__bar.is-weak {
+ border-color: var(--password-strength-bar--weak-border-color);
+ background-color: var(--password-strength-bar--weak-bg-color);
+}
+
+.password-strength__bar.is-fair {
+ border-color: var(--password-strength-bar--fair-border-color);
+ background-color: var(--password-strength-bar--fair-bg-color);
+}
+
+.password-strength__bar.is-good {
+ border-color: var(--password-strength-bar--good-border-color);
+ background-color: var(--password-strength-bar--good-bg-color);
+}
+
+.password-strength__bar.is-strong {
+ border-color: var(--password-strength-bar--strong-border-color);
+ background-color: var(--password-strength-bar--strong-bg-color);
+}
+
+.is-initial.is-password-empty .password-strength__title {
+ margin: 0;
+ line-height: 0;
+}
+
+/**
+ * Password match message.
+ *
+ * This is the description-like message on the bottom of the password confirm
+ * input.
+ */
+.password-match-message {
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+ color: var(--progress-bar-description-color);
+ font-size: var(--progress-bar-description-font-size);
+}
+
+.password-match-message__text {
+ color: var(--progress-bar-label-color);
+ font-weight: bold;
+}
+
+.is-confirm-empty .password-match-message {
+ visibility: hidden;
+}
+
+/**
+ * Password suggestions.
+ *
+ * Tips for improving the password.
+ */
+.password-suggestions {
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--space-xs);
+ padding: var(--space-m);
+ color: var(--progress-bar-description-color);
+ border: 1px solid var(--color-lightgray);
+ border-radius: var(--base-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
+ font-size: var(--progress-bar-description-font-size);
+}
+
+.password-suggestions__tips {
+ margin: var(--space-xs) 0 0 var(--space-l); /* LTR */
+}
+[dir="rtl"] .password-suggestions__tips {
+ margin-right: var(--space-l);
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/src/components/form--select.css b/core/themes/claro/css/src/components/form--select.css
new file mode 100644
index 0000000000000000000000000000000000000000..2d290ce5ded6d2ae70c09cb63da0be87158c78ee
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--select.css
@@ -0,0 +1,109 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Select input elements.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.form-element--type-select {
+ padding-right: -webkit-calc(2rem - 1px);
+ padding-right: -moz-calc(2rem - 1px);
+ padding-right: calc(2rem - 1px);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+ background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+}
+
+[dir="rtl"] .form-element--type-select {
+ padding-right: -webkit-calc(1rem - 1px);
+ padding-right: -moz-calc(1rem - 1px);
+ padding-right: calc(1rem - 1px);
+ padding-left: -webkit-calc(2rem - 1px);
+ padding-left: -moz-calc(2rem - 1px);
+ padding-left: calc(2rem - 1px);
+ background-position: 0 50%;
+}
+
+.no-touchevents .form-element--type-select.form-element--extrasmall,
+.no-touchevents .form-element--type-select[name$="][_weight]"] {
+ padding-right: -webkit-calc(1.5rem - 1px);
+ padding-right: -moz-calc(1.5rem - 1px);
+ padding-right: calc(1.5rem - 1px);
+ background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+}
+
+[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
+[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
+ padding-right: -webkit-calc(0.5rem - 1px);
+ padding-right: -moz-calc(0.5rem - 1px);
+ padding-right: calc(0.5rem - 1px);
+ padding-left: -webkit-calc(1.5rem - 1px);
+ padding-left: -moz-calc(1.5rem - 1px);
+ padding-left: calc(1.5rem - 1px);
+}
+
+.form-element--type-select::-ms-expand {
+ display: none;
+}
+
+/**
+ * Select states.
+ */
+
+.form-element--type-select:focus {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23004adc'/%3E%3C/svg%3E%0A");
+}
+
+.form-element--type-select[disabled] {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%238e929c'/%3E%3C/svg%3E%0A");
+}
diff --git a/core/themes/claro/css/src/components/form--select.pcss.css b/core/themes/claro/css/src/components/form--select.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..094664eb564d64a2018fb301dc486db6135f62cd
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--select.pcss.css
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Select input elements.
+ */
+
+@import "../base/variables.pcss.css";
+
+.form-element--type-select {
+ padding-right: calc(2rem - var(--input-border-size));
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+ background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+}
+[dir="rtl"] .form-element--type-select {
+ padding-right: calc(1rem - var(--input-border-size));
+ padding-left: calc(2rem - var(--input-border-size));
+ background-position: 0 50%;
+}
+
+.no-touchevents .form-element--type-select.form-element--extrasmall,
+.no-touchevents .form-element--type-select[name$="][_weight]"] {
+ padding-right: calc(1.5rem - var(--input-border-size));
+ background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+}
+[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));
+}
+
+.form-element--type-select::-ms-expand {
+ display: none;
+}
+
+/**
+ * Select states.
+ */
+.form-element--type-select:focus {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23004adc'/%3E%3C/svg%3E%0A");
+}
+.form-element--type-select[disabled] {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%238e929c'/%3E%3C/svg%3E%0A");
+}
diff --git a/core/themes/claro/css/src/components/form--text.css b/core/themes/claro/css/src/components/form--text.css
new file mode 100644
index 0000000000000000000000000000000000000000..4b241e657d8701d1e3d3d7e6fcae10d7d9494bfe
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--text.css
@@ -0,0 +1,228 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Text and textarea input elements.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.form-element {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ max-width: 100%;
+ min-height: 3rem; /* iOS. */
+ padding: -webkit-calc(0.75rem - 1px) -webkit-calc(1rem - 1px);
+ padding: -moz-calc(0.75rem - 1px) -moz-calc(1rem - 1px);
+ padding: calc(0.75rem - 1px) calc(1rem - 1px);
+ color: #222330;
+ border: 1px solid #8e929c;
+ border-radius: 0.125rem;
+ background: #fff;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none; /* Being able to control inner box shadow on iOS. */
+}
+
+.no-touchevents .form-element--extrasmall,
+.no-touchevents .form-element[name$="][_weight]"] {
+ min-height: 1.5rem; /* iOS. */
+ padding: -webkit-calc(0.15rem - 1px) -webkit-calc(0.5rem - 1px);
+ padding: -moz-calc(0.15rem - 1px) -moz-calc(0.5rem - 1px);
+ padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
+ font-size: 0.889rem;
+ line-height: 1.2rem;
+}
+
+/**
+ * Override normalize.css's search appearance.
+ */
+
+.form-element--type-search[type="search"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+/**
+ * Fix minor things for specific types.
+ */
+
+.form-element--type-date,
+.form-element--type-time {
+ vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
+}
+
+.form-element--type-date {
+ min-width: 9.5rem; /* Prevent input width change while filling. */
+}
+
+.form-element--type-time {
+ min-width: 7.5rem; /* Prevent input width change while filling. */
+}
+
+.form-element--type-color {
+ min-width: 3rem; /* Bigger input for webkit */
+ padding: 0; /* Bigger pickable area */
+ text-indent: -webkit-calc(0.75rem - 1px);
+ text-indent: -moz-calc(0.75rem - 1px);
+ text-indent: calc(0.75rem - 1px); /* 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.
+ */
+
+.form-element:active {
+ border-color: #003cc5;
+}
+
+.form-element:hover {
+ border-color: #222330;
+ -webkit-box-shadow: inset 0 0 0 1px #222330;
+ box-shadow: inset 0 0 0 1px #222330;
+}
+
+.form-element:focus {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+}
+
+.form-element:hover:focus {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+}
+
+.form-element.error {
+ border-width: 2px;
+ border-color: #d72222;
+}
+
+.form-element.error:hover {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.form-element.error:hover:focus {
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+}
+
+.form-element--type-textarea.error + .cke {
+ border-color: #d72222;
+}
+
+.form-element[disabled] {
+ -webkit-opacity: 1;
+ color: #82828c;
+ border-color: #bababf;
+ background-color: #f2f2f3;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ /* https://stackoverflow.com/q/262158#answer-23511280 */
+ -webkit-text-fill-color: #82828c;
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ */
+
+@media screen and (max-width: 600px) {
+ /* Number, date and time are skipped here */
+ .form-element {
+ float: none;
+ width: 100%;
+ margin-top: 0.75rem;
+ margin-right: 0;
+ margin-left: 0;
+ }
+ .form-element:first-child,
+ .form-item__label + .form-element {
+ margin-top: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/components/form--text.pcss.css b/core/themes/claro/css/src/components/form--text.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..577326a1a29e2dce627706d24322bb03c073d070
--- /dev/null
+++ b/core/themes/claro/css/src/components/form--text.pcss.css
@@ -0,0 +1,142 @@
+/**
+ * @file
+ * Text and textarea input elements.
+ */
+
+@import "../base/variables.pcss.css";
+
+.form-element {
+ box-sizing: border-box;
+ max-width: 100%;
+ min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
+ padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+ color: var(--input-fg-color);
+ border: var(--input-border-size) solid var(--input-border-color);
+ border-radius: var(--input-border-radius-size);
+ background: var(--input-bg-color);
+ font-size: var(--input-font-size);
+ line-height: var(--input-line-height);
+ appearance: none; /* Being able to control inner box shadow on 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);
+}
+
+/**
+ * Override normalize.css's search appearance.
+ */
+.form-element--type-search[type="search"] {
+ appearance: none;
+ box-sizing: border-box;
+}
+
+/**
+ * Fix minor things for specific types.
+ */
+.form-element--type-date,
+.form-element--type-time {
+ vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
+}
+.form-element--type-date {
+ min-width: 9.5rem; /* Prevent input width change while filling. */
+}
+.form-element--type-time {
+ min-width: 7.5rem; /* Prevent input width change while filling. */
+}
+
+.form-element--type-color {
+ min-width: 3rem; /* Bigger input for webkit */
+ padding: 0; /* Bigger pickable area */
+ 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.
+ */
+.form-element:active {
+ border-color: var(--input--focus-border-color);
+}
+.form-element:hover {
+ border-color: var(--input--hover-border-color);
+ box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
+}
+.form-element:focus {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+}
+.form-element:hover:focus {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
+}
+
+.form-element.error {
+ border-width: var(--input--error-border-size);
+ border-color: var(--input--error-border-color);
+}
+.form-element.error:hover {
+ box-shadow: none;
+}
+.form-element.error:hover:focus {
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+}
+.form-element--type-textarea.error + .cke {
+ border-color: var(--input--error-border-color);
+}
+
+.form-element[disabled] {
+ -webkit-opacity: 1;
+ color: var(--input--disabled-fg-color);
+ border-color: var(--input--disabled-border-color);
+ background-color: var(--input--disabled-bg-color);
+ box-shadow: none;
+ /* https://stackoverflow.com/q/262158#answer-23511280 */
+ -webkit-text-fill-color: var(--input--disabled-fg-color);
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ */
+@media screen and (max-width: 600px) {
+ /* Number, date and time are skipped here */
+ .form-element {
+ float: none;
+ width: 100%;
+ margin-top: 0.75rem;
+ margin-right: 0;
+ margin-left: 0;
+ }
+ .form-element:first-child,
+ .form-item__label + .form-element {
+ margin-top: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/components/form.css b/core/themes/claro/css/src/components/form.css
new file mode 100644
index 0000000000000000000000000000000000000000..56cb04893df0e7e4a11e192c9965ec6cb4752bf0
--- /dev/null
+++ b/core/themes/claro/css/src/components/form.css
@@ -0,0 +1,269 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+::-webkit-input-placeholder {
+ color: #8e929c;
+}
+
+:-moz-placeholder {
+ color: #8e929c;
+}
+
+::-moz-placeholder {
+ color: #8e929c;
+}
+
+:-ms-input-placeholder {
+ color: #8e929c;
+}
+
+::-ms-input-placeholder {
+ color: #8e929c;
+}
+
+::placeholder {
+ color: #8e929c;
+}
+
+/* IE 10 and 11 needs this set as important. */
+
+:-ms-input-placeholder {
+ color: #8e929c !important;
+}
+
+/**
+ * General form item.
+ */
+
+.form-item {
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+/**
+ * When a table row or a container-inline has a single form item, prevent it
+ * from adding unnecessary extra spacing.
+ * If it has multiple form items, allow spacing between them, overriding Classy.
+ */
+
+tr .form-item,
+.container-inline .form-item {
+ margin-top: 0.75rem;
+ margin-bottom: 0.75rem;
+}
+
+/**
+ * Form element label.
+ */
+
+.form-item__label {
+ display: table;
+ margin-top: 0.25rem; /* 4px */
+ margin-bottom: 0.25rem; /* 4px */
+ font-size: 0.889rem; /* ~14px */
+ font-weight: bold;
+ line-height: 1.125rem; /* 18px */
+}
+
+.form-item__label--multiple-value-form {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+}
+
+.form-item__label[for] {
+ cursor: pointer;
+}
+
+.form-item__label.option {
+ display: inline;
+ font-weight: normal;
+}
+
+/* Label states. */
+
+.form-item__label.has-error {
+ color: #d72222;
+}
+
+.form-item__label.option.has-error {
+ color: inherit;
+}
+
+.form-item__label.is-disabled {
+ cursor: default; /* @todo ...or auto? */
+ color: #82828c;
+}
+
+.form-item__label.form-required::after,
+.fieldset__label.form-required::after {
+ display: inline-block;
+ width: 0.4375rem;
+ height: 0.4375rem;
+ margin-right: 0.3em;
+ margin-left: 0.3em;
+ content: "";
+ vertical-align: super;
+ /* Use a background image to prevent screen readers from announcing the text. */
+ background-image: url(../../../images/core/ee0000/required.svg);
+ background-repeat: no-repeat;
+ background-size: 0.4375rem 0.4375rem;
+}
+
+/**
+ * Form item description.
+ */
+
+.form-item__description {
+ margin-top: 0.375rem; /* 6px */
+ margin-bottom: 0.375rem; /* 6px */
+ color: #545560;
+ font-size: 0.79rem; /* ~13px */
+ line-height: 1.0625rem; /* 17px */
+}
+
+/* Description states. */
+
+.form-item__description.is-disabled {
+ color: #82828c;
+}
+
+/**
+ * Error message (Inline form errors).
+ */
+
+.form-item__error-message {
+ margin-top: 0.375rem; /* 6px */
+ margin-bottom: 0.375rem; /* 6px */
+ color: #d72222;
+ font-size: 0.79rem; /* ~13px */
+ font-weight: normal;
+ line-height: 1.0625rem; /* 17px */
+}
+
+.form-item__prefix.is-disabled,
+.form-item__suffix.is-disabled {
+ color: #82828c;
+}
+
+/**
+ * Form actions.
+ */
+
+.form-actions {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -moz-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.form-actions .button,
+.form-actions .action-link {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.form-actions .ajax-progress--throbber {
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+
+/**
+ * Password module.
+ *
+ * @legacy
+ * @todo These should be in a standalone component file.
+ */
+
+.confirm-parent,
+.password-parent {
+ overflow: visible;
+ width: auto;
+}
+
+.form-item-options-group-info-identifier,
+.form-item-pass .description {
+ clear: both;
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ *
+ * @legacy
+ */
+
+@media screen and (max-width: 600px) {
+ .password-strength {
+ width: 100%;
+ }
+ div.form-item div.password-suggestions {
+ float: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/form.pcss.css b/core/themes/claro/css/src/components/form.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..81e698abe58f72b36067fa345039a819a7fe02c3
--- /dev/null
+++ b/core/themes/claro/css/src/components/form.pcss.css
@@ -0,0 +1,165 @@
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+::placeholder {
+ color: var(--input-fg-color--placeholder);
+}
+/* IE 10 and 11 needs this set as important. */
+:-ms-input-placeholder {
+ color: var(--input-fg-color--placeholder) !important;
+}
+
+/**
+ * General form item.
+ */
+.form-item {
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
+}
+/**
+ * When a table row or a container-inline has a single form item, prevent it
+ * from adding unnecessary extra spacing.
+ * If it has multiple form items, allow spacing between them, overriding Classy.
+ */
+tr .form-item,
+.container-inline .form-item {
+ margin-top: var(--space-s);
+ margin-bottom: var(--space-s);
+}
+
+/**
+ * Form element label.
+ */
+.form-item__label {
+ display: table;
+ margin-top: calc(var(--space-xs) / 2); /* 4px */
+ margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+ font-size: var(--font-size-s); /* ~14px */
+ font-weight: bold;
+ line-height: calc(18rem / 16); /* 18px */
+}
+.form-item__label--multiple-value-form {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+}
+.form-item__label[for] {
+ cursor: pointer;
+}
+.form-item__label.option {
+ display: inline;
+ font-weight: normal;
+}
+/* Label states. */
+.form-item__label.has-error {
+ color: var(--input--error-color);
+}
+.form-item__label.option.has-error {
+ color: inherit;
+}
+.form-item__label.is-disabled {
+ cursor: default; /* @todo ...or auto? */
+ color: var(--input--disabled-fg-color);
+}
+.form-item__label.form-required::after,
+.fieldset__label.form-required::after {
+ display: inline-block;
+ width: var(--input--required-mark-size);
+ height: var(--input--required-mark-size);
+ margin-right: 0.3em;
+ margin-left: 0.3em;
+ content: "";
+ vertical-align: super;
+ /* Use a background image to prevent screen readers from announcing the text. */
+ background-image: url(../../../images/core/ee0000/required.svg);
+ background-repeat: no-repeat;
+ background-size: var(--input--required-mark-size) var(--input--required-mark-size);
+}
+
+/**
+ * Form item description.
+ */
+.form-item__description {
+ margin-top: calc(6rem / 16); /* 6px */
+ margin-bottom: calc(6rem / 16); /* 6px */
+ color: var(--input-fg-color--description);
+ font-size: var(--font-size-xs); /* ~13px */
+ line-height: calc(17rem / 16); /* 17px */
+}
+/* Description states. */
+.form-item__description.is-disabled {
+ color: var(--input--disabled-fg-color);
+}
+
+/**
+ * Error message (Inline form errors).
+ */
+.form-item__error-message {
+ margin-top: calc(6rem / 16); /* 6px */
+ margin-bottom: calc(6rem / 16); /* 6px */
+ color: var(--input--error-color);
+ font-size: var(--font-size-xs); /* ~13px */
+ font-weight: normal;
+ line-height: calc(17rem / 16); /* 17px */
+}
+
+.form-item__prefix.is-disabled,
+.form-item__suffix.is-disabled {
+ color: var(--input--disabled-fg-color);
+}
+
+/**
+ * Form actions.
+ */
+.form-actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+}
+.form-actions .button,
+.form-actions .action-link {
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+}
+.form-actions .ajax-progress--throbber {
+ align-self: center;
+}
+
+/**
+ * Password module.
+ *
+ * @legacy
+ * @todo These should be in a standalone component file.
+ */
+.confirm-parent,
+.password-parent {
+ overflow: visible;
+ width: auto;
+}
+
+.form-item-options-group-info-identifier,
+.form-item-pass .description {
+ clear: both;
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ *
+ * @legacy
+ */
+@media screen and (max-width: 600px) {
+ .password-strength {
+ width: 100%;
+ }
+ div.form-item div.password-suggestions {
+ float: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/help.css b/core/themes/claro/css/src/components/help.css
new file mode 100644
index 0000000000000000000000000000000000000000..bfaf8d57318b7668e676327cc5e1710ec2514e31
--- /dev/null
+++ b/core/themes/claro/css/src/components/help.css
@@ -0,0 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for the help component.
+ */
+
+.help p {
+ margin: 0 0 10px;
+}
diff --git a/core/themes/claro/css/src/components/help.pcss.css b/core/themes/claro/css/src/components/help.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..872a56e784fa8a054ff93a25a0a4fa23f3bca0f7
--- /dev/null
+++ b/core/themes/claro/css/src/components/help.pcss.css
@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Claro styles for the help component.
+ */
+
+.help p {
+ margin: 0 0 10px;
+}
diff --git a/core/themes/claro/css/src/components/image-preview.css b/core/themes/claro/css/src/components/image-preview.css
new file mode 100644
index 0000000000000000000000000000000000000000..24e18bca6ce0db29ae6dfa31d623e26883b0b78a
--- /dev/null
+++ b/core/themes/claro/css/src/components/image-preview.css
@@ -0,0 +1,110 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Image preview component.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Image preview.
+ */
+
+.image-preview {
+ line-height: 0;
+}
+
+.image-preview__img-wrapper {
+ display: inline-block;
+ max-width: 100%;
+ background-color: #fff;
+ -webkit-box-shadow: inset 0 0 0.4375rem #d4d4d8;
+ box-shadow: inset 0 0 0.4375rem #d4d4d8;
+}
+
+.image-preview img {
+ background-image:
+ -moz-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
+ -moz-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
+ -moz-linear-gradient(315deg, #d4d4d8 25%, transparent 26%),
+ -moz-linear-gradient(315deg, #d4d4d8 25%, transparent 26%);
+ background-image:
+ -o-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
+ -o-linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
+ -o-linear-gradient(315deg, #d4d4d8 25%, transparent 26%),
+ -o-linear-gradient(315deg, #d4d4d8 25%, transparent 26%);
+ background-image:
+ linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
+ linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
+ linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
+ linear-gradient(135deg, #d4d4d8 25%, transparent 26%);
+ background-position:
+ 0 0,
+ 0.4375rem 0.4375rem,
+ 0.4375rem 0.4375rem,
+ 0 0;
+ background-size: 0.875rem 0.875rem;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .image-preview img {
+ background: none;
+ }
+}
+
+/**
+ * Don't display file icon in image widgets.
+ */
+
+.image-widget .file.file {
+ padding: 0; /* LTR and RTL */
+ background: none;
+}
diff --git a/core/themes/claro/css/src/components/image-preview.pcss.css b/core/themes/claro/css/src/components/image-preview.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..7ddbe1e8a204366056c78392011fbd841ae4d95e
--- /dev/null
+++ b/core/themes/claro/css/src/components/image-preview.pcss.css
@@ -0,0 +1,53 @@
+/**
+ * @file
+ * Image preview component.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --color-pattern: var(--color-lightgray);
+ --size-pattern-square: calc(7rem / 16);
+}
+
+/**
+ * Image preview.
+ */
+.image-preview {
+ line-height: 0;
+}
+
+.image-preview__img-wrapper {
+ display: inline-block;
+ max-width: 100%;
+ background-color: var(--color-white);
+ box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
+}
+
+.image-preview img {
+ background-image:
+ linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
+ linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
+ linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%),
+ linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
+ background-position:
+ 0 0,
+ var(--size-pattern-square) var(--size-pattern-square),
+ var(--size-pattern-square) var(--size-pattern-square),
+ 0 0;
+ background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .image-preview img {
+ background: none;
+ }
+}
+
+/**
+ * Don't display file icon in image widgets.
+ */
+.image-widget .file.file {
+ padding: 0; /* LTR and RTL */
+ background: none;
+}
diff --git a/core/themes/claro/css/src/components/jquery.ui/theme.css b/core/themes/claro/css/src/components/jquery.ui/theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..1c40c3c1f4b983aed9b014792a0e9baee7b3bae9
--- /dev/null
+++ b/core/themes/claro/css/src/components/jquery.ui/theme.css
@@ -0,0 +1,746 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for jQuery UI.
+ * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Component containers
+ */
+
+.ui-widget {
+ background: none;
+}
+
+.ui-widget-content {
+ border: none;
+}
+
+/**
+ * Interaction states
+ */
+
+.ui-state-default,
+.ui-state-hover,
+.ui-state-focus,
+.ui-state-active {
+ outline: 0;
+}
+
+.ui-state-highlight {
+ font-weight: bold;
+}
+
+/**
+ * Interaction cues
+ */
+
+.ui-state-active,
+.ui-widget-content .ui-state-active {
+ color: #840;
+}
+
+.ui-state-error,
+.ui-widget-content .ui-state-error {
+ color: #fff;
+ border-color: #d52;
+ background: #e63;
+}
+
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled {
+ opacity: 0.35;
+ filter: alpha(Opacity=35);
+}
+
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary {
+ opacity: 0.7;
+ filter: alpha(Opacity=70);
+}
+
+/**
+ * Icons
+ */
+
+/* states and images */
+
+.ui-icon {
+ display: block;
+ overflow: hidden;
+ width: 16px;
+ height: 16px;
+ text-indent: -99999px;
+ background-image: url(../../../../images/ui-icons-222222-256x240.png);
+ background-repeat: no-repeat;
+}
+
+.ui-widget-content .ui-icon,
+.ui-widget-header .ui-icon {
+ background-image: url(../../../../images/ui-icons-222222-256x240.png);
+}
+
+.ui-state-default .ui-icon {
+ background-image: url(../../../../images/ui-icons-888888-256x240.png);
+}
+
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon,
+.ui-state-highlight .ui-icon {
+ background-image: url(../../../../images/ui-icons-454545-256x240.png);
+}
+
+.ui-state-active .ui-icon {
+ background-image: url(../../../../images/ui-icons-800000-256x240.png);
+}
+
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+ background-image: url(../../../../images/ui-icons-ffffff-256x240.png);
+}
+
+.ui-widget p .ui-icon {
+ margin: 2px 3px 0 0; /* LTR */
+}
+
+[dir="rtl"] .ui-widget p .ui-icon {
+ margin: 2px 0 0 3px;
+}
+
+/* positioning */
+
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+
+.ui-icon-carat-1-e { background-position: -32px 0; }
+
+.ui-icon-carat-1-se { background-position: -48px 0; }
+
+.ui-icon-carat-1-s { background-position: -64px 0; }
+
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+
+.ui-icon-carat-1-w { background-position: -96px 0; }
+
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+
+.ui-icon-extlink { background-position: -32px -80px; }
+
+.ui-icon-newwin { background-position: -48px -80px; }
+
+.ui-icon-refresh { background-position: -64px -80px; }
+
+.ui-icon-shuffle { background-position: -80px -80px; }
+
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+
+.ui-icon-folder-open { background-position: -16px -96px; }
+
+.ui-icon-document { background-position: -32px -96px; }
+
+.ui-icon-document-b { background-position: -48px -96px; }
+
+.ui-icon-note { background-position: -64px -96px; }
+
+.ui-icon-mail-closed { background-position: -80px -96px; }
+
+.ui-icon-mail-open { background-position: -96px -96px; }
+
+.ui-icon-suitcase { background-position: -112px -96px; }
+
+.ui-icon-comment { background-position: -128px -96px; }
+
+.ui-icon-person { background-position: -144px -96px; }
+
+.ui-icon-print { background-position: -160px -96px; }
+
+.ui-icon-trash { background-position: -176px -96px; }
+
+.ui-icon-locked { background-position: -192px -96px; }
+
+.ui-icon-unlocked { background-position: -208px -96px; }
+
+.ui-icon-bookmark { background-position: -224px -96px; }
+
+.ui-icon-tag { background-position: -240px -96px; }
+
+.ui-icon-home { background-position: 0 -112px; }
+
+.ui-icon-flag { background-position: -16px -112px; }
+
+.ui-icon-calendar { background-position: -32px -112px; }
+
+.ui-icon-cart { background-position: -48px -112px; }
+
+.ui-icon-pencil { background-position: -64px -112px; }
+
+.ui-icon-clock { background-position: -80px -112px; }
+
+.ui-icon-disk { background-position: -96px -112px; }
+
+.ui-icon-calculator { background-position: -112px -112px; }
+
+.ui-icon-zoomin { background-position: -128px -112px; }
+
+.ui-icon-zoomout { background-position: -144px -112px; }
+
+.ui-icon-search { background-position: -160px -112px; }
+
+.ui-icon-wrench { background-position: -176px -112px; }
+
+.ui-icon-gear { background-position: -192px -112px; }
+
+.ui-icon-heart { background-position: -208px -112px; }
+
+.ui-icon-star { background-position: -224px -112px; }
+
+.ui-icon-link { background-position: -240px -112px; }
+
+.ui-icon-cancel { background-position: 0 -128px; }
+
+.ui-icon-plus { background-position: -16px -128px; }
+
+.ui-icon-plusthick { background-position: -32px -128px; }
+
+.ui-icon-minus { background-position: -48px -128px; }
+
+.ui-icon-minusthick { background-position: -64px -128px; }
+
+.ui-icon-close { background-position: -80px -128px; }
+
+.ui-icon-closethick { background-position: -96px -128px; }
+
+.ui-icon-key { background-position: -112px -128px; }
+
+.ui-icon-lightbulb { background-position: -128px -128px; }
+
+.ui-icon-scissors { background-position: -144px -128px; }
+
+.ui-icon-clipboard { background-position: -160px -128px; }
+
+.ui-icon-copy { background-position: -176px -128px; }
+
+.ui-icon-contact { background-position: -192px -128px; }
+
+.ui-icon-image { background-position: -208px -128px; }
+
+.ui-icon-video { background-position: -224px -128px; }
+
+.ui-icon-script { background-position: -240px -128px; }
+
+.ui-icon-alert { background-position: 0 -144px; }
+
+.ui-icon-info { background-position: -16px -144px; }
+
+.ui-icon-notice { background-position: -32px -144px; }
+
+.ui-icon-help { background-position: -48px -144px; }
+
+.ui-icon-check { background-position: -64px -144px; }
+
+.ui-icon-bullet { background-position: -80px -144px; }
+
+.ui-icon-radio-off { background-position: -96px -144px; }
+
+.ui-icon-radio-on { background-position: -112px -144px; }
+
+.ui-icon-pin-w { background-position: -128px -144px; }
+
+.ui-icon-pin-s { background-position: -144px -144px; }
+
+.ui-icon-play { background-position: 0 -160px; }
+
+.ui-icon-pause { background-position: -16px -160px; }
+
+.ui-icon-seek-next { background-position: -32px -160px; }
+
+.ui-icon-seek-prev { background-position: -48px -160px; }
+
+.ui-icon-seek-end { background-position: -64px -160px; }
+
+.ui-icon-seek-first { background-position: -80px -160px; }
+
+.ui-icon-stop { background-position: -96px -160px; }
+
+.ui-icon-eject { background-position: -112px -160px; }
+
+.ui-icon-volume-off { background-position: -128px -160px; }
+
+.ui-icon-volume-on { background-position: -144px -160px; }
+
+.ui-icon-power { background-position: 0 -176px; }
+
+.ui-icon-signal-diag { background-position: -16px -176px; }
+
+.ui-icon-signal { background-position: -32px -176px; }
+
+.ui-icon-battery-0 { background-position: -48px -176px; }
+
+.ui-icon-battery-1 { background-position: -64px -176px; }
+
+.ui-icon-battery-2 { background-position: -80px -176px; }
+
+.ui-icon-battery-3 { background-position: -96px -176px; }
+
+.ui-icon-circle-plus { background-position: 0 -192px; }
+
+.ui-icon-circle-minus { background-position: -16px -192px; }
+
+.ui-icon-circle-close { background-position: -32px -192px; }
+
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+
+.ui-icon-circle-check { background-position: -208px -192px; }
+
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+.ui-icon-carat-1-n { background-position: 0 0; }
+
+/**
+ * Accordion
+ */
+
+.ui-accordion {
+ border: none;
+}
+
+.ui-accordion .ui-accordion-header {
+ text-transform: uppercase;
+ border: solid 1px #ccc;
+}
+
+.ui-accordion h3.ui-accordion-header,
+#block-system-main h3.ui-accordion-header {
+ margin: 10px 0;
+ font-size: 1.1em;
+}
+
+#block-system-main .ui-accordion h3.ui-state-active,
+.ui-accordion h3.ui-state-active {
+ margin-bottom: 0;
+}
+
+.ui-accordion .ui-accordion-header a {
+ display: block;
+}
+
+.ui-accordion .ui-accordion-content {
+ padding: 1em 2.2em;
+ border: solid 1px #ccc;
+ border-top: 0;
+}
+
+/**
+ * Tabs
+ */
+
+.ui-tabs {
+ padding: 0;
+}
+
+.ui-tabs .ui-tabs-nav {
+ margin: 0;
+ padding: 5px 10px 4px;
+ border-bottom: solid 1px #ccc;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ line-height: 20px;
+}
+
+.ui-tabs .ui-tabs-nav li {
+ margin: 0;
+ padding: 0 1em 0 10px; /* LTR */
+ list-style: none;
+}
+
+[dir="rtl"] .ui-tabs .ui-tabs-nav li {
+ padding: 0 10px 0 1em;
+}
+
+.ui-tabs .ui-tabs-nav li a {
+ float: none;
+ padding: 0 10px;
+ border-radius: 10px;
+}
+
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
+ color: #fff;
+ background: #666;
+ font-weight: normal;
+}
+
+/**
+ * Overlays
+ */
+
+.ui-widget-overlay {
+ opacity: 0.7;
+ filter: alpha(Opacity=70);
+ background: #000;
+}
+
+/**
+ * Slider
+ */
+
+.ui-slider {
+ border: solid 1px #ccc;
+}
+
+.ui-slider .ui-slider-range {
+ background: #e4e4e4;
+}
+
+.ui-slider .ui-slider-handle {
+ border: 1px solid #e4e4e4;
+ border-right-color: #d2d2d2;
+ border-bottom: 1px solid #b4b4b4;
+ border-left-color: #d2d2d2;
+ border-radius: 4px;
+ background-color: #e4e4e4;
+}
+
+.ui-slider a.ui-state-active,
+.ui-slider .ui-slider-handle:active {
+ color: #fff;
+ border: solid 1px #555;
+ background: #666;
+}
+
+/**
+ * Progress Bar
+ */
+
+.ui-progressbar {
+ height: 1.4em;
+ background: #e4e4e4;
+}
+
+.ui-progressbar .ui-progressbar-value {
+ height: 1.5em;
+ background: #0072b9 url(../../../../../misc/progress.gif);
+}
+
+/**
+ * Date Picker
+ */
+
+.ui-datepicker {
+ /* Override datepicker.css */
+ padding: 0;
+ border: 1px solid #a6a6a6;
+ background: #fff;
+}
+
+/* Override tables.css */
+
+.ui-datepicker-calendar thead tr {
+ border-top: 1px solid #a6a6a6;
+ border-bottom: 1px solid #a6a6a6;
+}
+
+.ui-datepicker-calendar tr:hover {
+ background: transparent;
+}
+
+/* Override datepicker.css */
+
+.ui-datepicker td {
+ padding: 0;
+}
+
+.ui-datepicker td span,
+.ui-datepicker td a {
+ /* Override datepicker.css */
+ text-align: center;
+ color: inherit;
+}
+
+.ui-datepicker .ui-datepicker-header .ui-datepicker-next-hover {
+ top: 2px;
+ /* Override datepicker.css - keep icons still on hover */
+ right: 2px;
+ cursor: pointer;
+}
+
+.ui-datepicker .ui-datepicker-header .ui-datepicker-prev-hover {
+ top: 2px;
+ /* Override datepicker.css - keep icons still on hover */
+ left: 2px;
+ cursor: pointer;
+}
+
+.ui-datepicker td a.ui-state-hover {
+ background-color: #f7fcff;
+}
+
+.ui-datepicker .ui-state-active {
+ border: none;
+ background: #ebeae4;
+}
+
+.ui-datepicker .ui-state-highlight {
+ /* Override datepicker.css */
+ color: inherit;
+ font-weight: bold;
+}
+
+/**
+ * Autocomplete
+ */
+
+.ui-autocomplete {
+ overflow: hidden;
+ color: #545560;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-top: 0;
+ border-radius: 0 0 0.125rem 0.125rem;
+ background: #fff;
+ -webkit-box-shadow: 0 0.125rem 0.25rem rgba(34, 35, 48, 0.1);
+ box-shadow: 0 0.125rem 0.25rem rgba(34, 35, 48, 0.1);
+}
+
+/* Suggestion list */
+
+.ui-autocomplete .ui-menu-item {
+ list-style: none;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper {
+ display: block;
+ padding: 0.75rem 0.9375rem;
+ color: inherit;
+ background: inherit;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper:focus,
+.ui-autocomplete .ui-menu-item-wrapper:hover {
+ text-decoration: none;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
+ margin: 0;
+ color: #fff;
+ background: #003cc5;
+}
+
+.ui-autocomplete .ui-menu-item.ui-state-focus,
+.autocomplete .ui-menu-item.ui-state-hover {
+ margin: 0;
+ background: #0072b9;
+}
+
+.ui-autocomplete .ui-state-focus a,
+.autocomplete .ui-state-hover a {
+ color: #fff;
+}
diff --git a/core/themes/claro/css/src/components/jquery.ui/theme.pcss.css b/core/themes/claro/css/src/components/jquery.ui/theme.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..19ab9653468ea40449bfe9014e2cb0409aed1d8e
--- /dev/null
+++ b/core/themes/claro/css/src/components/jquery.ui/theme.pcss.css
@@ -0,0 +1,470 @@
+/**
+ * @file
+ * Claro styles for jQuery UI.
+ * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
+ */
+
+@import "../../base/variables.pcss.css";
+
+/**
+ * Component containers
+ */
+.ui-widget {
+ background: none;
+}
+.ui-widget-content {
+ border: none;
+}
+
+/**
+ * Interaction states
+ */
+.ui-state-default,
+.ui-state-hover,
+.ui-state-focus,
+.ui-state-active {
+ outline: 0;
+}
+.ui-state-highlight {
+ font-weight: bold;
+}
+
+/**
+ * Interaction cues
+ */
+.ui-state-active,
+.ui-widget-content .ui-state-active {
+ color: #840;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error {
+ color: #fff;
+ border-color: #d52;
+ background: #e63;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled {
+ opacity: 0.35;
+ filter: alpha(Opacity=35);
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary {
+ opacity: 0.7;
+ filter: alpha(Opacity=70);
+}
+
+/**
+ * Icons
+ */
+/* states and images */
+.ui-icon {
+ display: block;
+ overflow: hidden;
+ width: 16px;
+ height: 16px;
+ text-indent: -99999px;
+ background-image: url(../../../../images/ui-icons-222222-256x240.png);
+ background-repeat: no-repeat;
+}
+.ui-widget-content .ui-icon,
+.ui-widget-header .ui-icon {
+ background-image: url(../../../../images/ui-icons-222222-256x240.png);
+}
+.ui-state-default .ui-icon {
+ background-image: url(../../../../images/ui-icons-888888-256x240.png);
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon,
+.ui-state-highlight .ui-icon {
+ background-image: url(../../../../images/ui-icons-454545-256x240.png);
+}
+.ui-state-active .ui-icon {
+ background-image: url(../../../../images/ui-icons-800000-256x240.png);
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+ background-image: url(../../../../images/ui-icons-ffffff-256x240.png);
+}
+.ui-widget p .ui-icon {
+ margin: 2px 3px 0 0; /* LTR */
+}
+
+[dir="rtl"] .ui-widget p .ui-icon {
+ margin: 2px 0 0 3px;
+}
+/* positioning */
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+.ui-icon-carat-1-n { background-position: 0 0; }
+
+/**
+ * Accordion
+ */
+.ui-accordion {
+ border: none;
+}
+.ui-accordion .ui-accordion-header {
+ text-transform: uppercase;
+ border: solid 1px #ccc;
+}
+.ui-accordion h3.ui-accordion-header,
+#block-system-main h3.ui-accordion-header {
+ margin: 10px 0;
+ font-size: 1.1em;
+}
+#block-system-main .ui-accordion h3.ui-state-active,
+.ui-accordion h3.ui-state-active {
+ margin-bottom: 0;
+}
+.ui-accordion .ui-accordion-header a {
+ display: block;
+}
+.ui-accordion .ui-accordion-content {
+ padding: 1em 2.2em;
+ border: solid 1px #ccc;
+ border-top: 0;
+}
+
+/**
+ * Tabs
+ */
+.ui-tabs {
+ padding: 0;
+}
+.ui-tabs .ui-tabs-nav {
+ margin: 0;
+ padding: 5px 10px 4px;
+ border-bottom: solid 1px #ccc;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ line-height: 20px;
+}
+.ui-tabs .ui-tabs-nav li {
+ margin: 0;
+ padding: 0 1em 0 10px; /* LTR */
+ list-style: none;
+}
+[dir="rtl"] .ui-tabs .ui-tabs-nav li {
+ padding: 0 10px 0 1em;
+}
+.ui-tabs .ui-tabs-nav li a {
+ float: none;
+ padding: 0 10px;
+ border-radius: 10px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
+ color: #fff;
+ background: #666;
+ font-weight: normal;
+}
+
+/**
+ * Overlays
+ */
+.ui-widget-overlay {
+ opacity: 0.7;
+ filter: alpha(Opacity=70);
+ background: #000;
+}
+
+/**
+ * Slider
+ */
+.ui-slider {
+ border: solid 1px #ccc;
+}
+.ui-slider .ui-slider-range {
+ background: #e4e4e4;
+}
+.ui-slider .ui-slider-handle {
+ border: 1px solid #e4e4e4;
+ border-right-color: #d2d2d2;
+ border-bottom: 1px solid #b4b4b4;
+ border-left-color: #d2d2d2;
+ border-radius: 4px;
+ background-color: #e4e4e4;
+}
+.ui-slider a.ui-state-active,
+.ui-slider .ui-slider-handle:active {
+ color: #fff;
+ border: solid 1px #555;
+ background: #666;
+}
+
+/**
+ * Progress Bar
+ */
+.ui-progressbar {
+ height: 1.4em;
+ background: #e4e4e4;
+}
+.ui-progressbar .ui-progressbar-value {
+ height: 1.5em;
+ background: #0072b9 url(../../../../../misc/progress.gif);
+}
+
+/**
+ * Date Picker
+ */
+.ui-datepicker {
+ /* Override datepicker.css */
+ padding: 0;
+ border: 1px solid #a6a6a6;
+ background: #fff;
+}
+
+/* Override tables.css */
+.ui-datepicker-calendar thead tr {
+ border-top: 1px solid #a6a6a6;
+ border-bottom: 1px solid #a6a6a6;
+}
+.ui-datepicker-calendar tr:hover {
+ background: transparent;
+}
+
+/* Override datepicker.css */
+.ui-datepicker td {
+ padding: 0;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+ /* Override datepicker.css */
+ text-align: center;
+ color: inherit;
+}
+.ui-datepicker .ui-datepicker-header .ui-datepicker-next-hover {
+ top: 2px;
+ /* Override datepicker.css - keep icons still on hover */
+ right: 2px;
+ cursor: pointer;
+}
+.ui-datepicker .ui-datepicker-header .ui-datepicker-prev-hover {
+ top: 2px;
+ /* Override datepicker.css - keep icons still on hover */
+ left: 2px;
+ cursor: pointer;
+}
+.ui-datepicker td a.ui-state-hover {
+ background-color: #f7fcff;
+}
+.ui-datepicker .ui-state-active {
+ border: none;
+ background: #ebeae4;
+}
+.ui-datepicker .ui-state-highlight {
+ /* Override datepicker.css */
+ color: inherit;
+ font-weight: bold;
+}
+
+/**
+ * Autocomplete
+ */
+.ui-autocomplete {
+ overflow: hidden;
+ color: var(--jui-dropdown-fg-color);
+ border: var(--input-border-size) solid var(--jui-dropdown-border-color);
+ border-top: 0;
+ border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
+ background: var(--jui-dropdown-bg-color);
+ box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
+}
+
+/* Suggestion list */
+.ui-autocomplete .ui-menu-item {
+ list-style: none;
+}
+.ui-autocomplete .ui-menu-item-wrapper {
+ display: block;
+ padding: 0.75rem 0.9375rem;
+ color: inherit;
+ background: inherit;
+}
+.ui-autocomplete .ui-menu-item-wrapper:focus,
+.ui-autocomplete .ui-menu-item-wrapper:hover {
+ text-decoration: none;
+}
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
+ margin: 0;
+ color: var(--jui-dropdown--active-fg-color);
+ background: var(--jui-dropdown--active-bg-color);
+}
+.ui-autocomplete .ui-menu-item.ui-state-focus,
+.autocomplete .ui-menu-item.ui-state-hover {
+ margin: 0;
+ background: #0072b9;
+}
+.ui-autocomplete .ui-state-focus a,
+.autocomplete .ui-state-hover a {
+ color: #fff;
+}
diff --git a/core/themes/claro/css/src/components/media.css b/core/themes/claro/css/src/components/media.css
new file mode 100644
index 0000000000000000000000000000000000000000..5d87db22de9905b0f1efe38159da3c366e625d98
--- /dev/null
+++ b/core/themes/claro/css/src/components/media.css
@@ -0,0 +1,9 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+.media-form .field--name-status {
+ margin-top: 1.5em;
+}
diff --git a/core/themes/claro/css/src/components/media.pcss.css b/core/themes/claro/css/src/components/media.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..34b1599497e49e23753520b1f5f59fd1dfef40e3
--- /dev/null
+++ b/core/themes/claro/css/src/components/media.pcss.css
@@ -0,0 +1,3 @@
+.media-form .field--name-status {
+ margin-top: 1.5em;
+}
diff --git a/core/themes/claro/css/src/components/menus-and-lists.css b/core/themes/claro/css/src/components/menus-and-lists.css
new file mode 100644
index 0000000000000000000000000000000000000000..cf0c42a8d6e90ccc53802bea376027e220c1084a
--- /dev/null
+++ b/core/themes/claro/css/src/components/menus-and-lists.css
@@ -0,0 +1,47 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+/**
+ * Menus and lists.
+ */
+.item-list ul {
+ margin: 0.25em 0 0.25em 1.5em; /* LTR */
+ list-style-type: disc;
+ list-style-image: none;
+}
+[dir="rtl"] .item-list ul {
+ margin: 0.25em 1.5em 0.25em 0;
+}
+.item-list ul li,
+.menu-item {
+ list-style-type: disc;
+ list-style-image: none;
+}
+.menu-item {
+ margin: 0;
+}
+.item-list ul li.collapsed,
+.menu-item--collapsed {
+ list-style-type: disc;
+ list-style-image: url(../../../images/menu-collapsed.png);
+}
+.item-list ul li.expanded,
+.menu-item--expanded {
+ list-style-type: circle;
+ list-style-image: url(../../../images/menu-expanded.png);
+}
+ul.links li,
+ul.inline li {
+ padding-right: 1em; /* LTR */
+}
+[dir="rtl"] ul.links li,
+[dir="rtl"] ul.inline li {
+ padding-right: 0;
+ padding-left: 1em;
+}
+ul.inline li {
+ display: inline;
+}
diff --git a/core/themes/claro/css/src/components/menus-and-lists.pcss.css b/core/themes/claro/css/src/components/menus-and-lists.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..9fd9b61168ea56a1b4b1442bb1093be7aa9cd0f5
--- /dev/null
+++ b/core/themes/claro/css/src/components/menus-and-lists.pcss.css
@@ -0,0 +1,41 @@
+/**
+ * Menus and lists.
+ */
+.item-list ul {
+ margin: 0.25em 0 0.25em 1.5em; /* LTR */
+ list-style-type: disc;
+ list-style-image: none;
+}
+[dir="rtl"] .item-list ul {
+ margin: 0.25em 1.5em 0.25em 0;
+}
+.item-list ul li,
+.menu-item {
+ list-style-type: disc;
+ list-style-image: none;
+}
+.menu-item {
+ margin: 0;
+}
+.item-list ul li.collapsed,
+.menu-item--collapsed {
+ list-style-type: disc;
+ list-style-image: url(../../../images/menu-collapsed.png);
+}
+.item-list ul li.expanded,
+.menu-item--expanded {
+ list-style-type: circle;
+ list-style-image: url(../../../images/menu-expanded.png);
+}
+ul.links li,
+ul.inline li {
+ padding-right: 1em; /* LTR */
+}
+[dir="rtl"] ul.links li,
+[dir="rtl"] ul.inline li {
+ padding-right: 0;
+ padding-left: 1em;
+}
+ul.inline li {
+ display: inline;
+}
diff --git a/core/themes/claro/css/src/components/messages.css b/core/themes/claro/css/src/components/messages.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e6c6a7486e08a69c3bd10a480945d17949db8bd
--- /dev/null
+++ b/core/themes/claro/css/src/components/messages.css
@@ -0,0 +1,203 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Messages.
+ *
+ * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
+ * has been resolved.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.messages-list {
+ margin-top: 2.5rem;
+ margin-bottom: 2.5rem;
+ padding: 0;
+ list-style: none;
+}
+
+.field .messages-list,
+.form-wrapper .messages-list {
+ margin-bottom: 0;
+}
+
+.messages {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ padding: 1.5rem 1.5rem 2rem -webkit-calc(1.5rem - 5px);
+ padding: 1.5rem 1.5rem 2rem -moz-calc(1.5rem - 5px);
+ padding: 1.5rem 1.5rem 2rem calc(1.5rem - 5px); /* LTR */
+ color: #fff;
+ border-width: 0 0 0 5px; /* LTR */
+ border-style: solid;
+ border-color: #353641;
+ border-radius: 2px;
+ background-color: #353641;
+}
+
+[dir="rtl"] .messages {
+ padding-right: -webkit-calc(1.5rem - 5px);
+ padding-right: -moz-calc(1.5rem - 5px);
+ padding-right: calc(1.5rem - 5px);
+ padding-left: 1.5rem;
+ border-right-width: 5px;
+ border-left-width: 0;
+}
+
+.messages--error {
+ border-color: #e34f4f;
+}
+
+.messages--status {
+ border-color: #42a877;
+}
+
+.messages--warning {
+ border-color: #e0ac00;
+}
+
+.messages__title {
+ margin: 0 0 0 2.5rem; /* LTR */
+ font-size: 1rem;
+}
+
+[dir="rtl"] .messages__title {
+ margin-right: 2.5rem;
+ margin-left: 0;
+}
+
+.messages--error .messages__header {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
+}
+
+[dir="rtl"] .messages--error .messages__header {
+ background-position: center right;
+}
+
+.messages--status .messages__header {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
+}
+
+[dir="rtl"] .messages--status .messages__header {
+ background-position: center right;
+}
+
+.messages--warning .messages__header {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
+}
+
+[dir="rtl"] .messages--warning .messages__header {
+ background-position: center right;
+}
+
+.messages__header {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -moz-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 48rem) {
+ .messages__content {
+ margin-left: 2.5rem; /* LTR */
+ }
+
+ [dir="rtl"] .messages__content {
+ margin-right: 2.5rem;
+ margin-left: 0;
+ }
+}
+
+.messages a {
+ text-decoration: underline;
+ color: #ffd23f;
+}
+
+.messages a:hover {
+ color: #fff;
+}
+
+.messages pre {
+ margin: 0;
+}
+
+.messages__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.messages__item + .messages__item {
+ margin-top: 0.75rem;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .messages {
+ border-width: 1px 1px 1px 5px; /* LTR */
+ }
+ [dir="rtl"] .messages {
+ border-right-width: 5px;
+ border-left-width: 1px;
+ }
+ .messages__header {
+ -webkit-filter: grayscale(1) brightness(1.5) contrast(10);
+ filter: grayscale(1) brightness(1.5) contrast(10);
+ }
+}
diff --git a/core/themes/claro/css/src/components/messages.pcss.css b/core/themes/claro/css/src/components/messages.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea318bb295655d4879aaaa1c723cfa054d77a240
--- /dev/null
+++ b/core/themes/claro/css/src/components/messages.pcss.css
@@ -0,0 +1,149 @@
+/**
+ * Messages.
+ *
+ * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
+ * has been resolved.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --messages-bg-color: #353641;
+ --messages-fg-color: var(--color-white);
+ --messages-border-radius: 2px;
+ --messages-border-width: 5px;
+ --messages--status-color: #42a877;
+ --messages--warning-color: #e0ac00;
+ --messages--error-color: #e34f4f;
+ --messages__link-color: var(--color-sunglow);
+ --messages__link--hover-color: var(--color-white);
+ --messages__icon-size: 1rem;
+ --messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));
+}
+
+.messages-list {
+ margin-top: calc(var(--space-m) + var(--space-l));
+ margin-bottom: calc(var(--space-m) + var(--space-l));
+ padding: 0;
+ list-style: none;
+}
+
+.field .messages-list,
+.form-wrapper .messages-list {
+ margin-bottom: 0;
+}
+
+.messages {
+ box-sizing: border-box;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+ padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 5px); /* LTR */
+ color: var(--messages-fg-color);
+ border-width: 0 0 0 var(--messages-border-width); /* LTR */
+ border-style: solid;
+ border-color: var(--messages-bg-color);
+ border-radius: var(--messages-border-radius);
+ background-color: var(--messages-bg-color);
+}
+
+[dir="rtl"] .messages {
+ padding-right: calc(var(--space-l) - 5px);
+ padding-left: var(--space-l);
+ border-right-width: var(--messages-border-width);
+ border-left-width: 0;
+}
+
+.messages--error {
+ border-color: var(--messages--error-color);
+}
+
+.messages--status {
+ border-color: var(--messages--status-color);
+}
+
+.messages--warning {
+ border-color: var(--messages--warning-color);
+}
+
+.messages__title {
+ margin: 0 0 0 var(--messages__text-margin); /* LTR */
+ font-size: var(--font-size-base);
+}
+[dir="rtl"] .messages__title {
+ margin-right: var(--messages__text-margin);
+ margin-left: 0;
+}
+
+.messages--error .messages__header {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
+}
+[dir="rtl"] .messages--error .messages__header {
+ background-position: center right;
+}
+
+.messages--status .messages__header {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
+}
+[dir="rtl"] .messages--status .messages__header {
+ background-position: center right;
+}
+
+.messages--warning .messages__header {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat center left; /* LTR */
+}
+[dir="rtl"] .messages--warning .messages__header {
+ background-position: center right;
+}
+
+.messages__header {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--space-m);
+}
+
+@media screen and (min-width: 48rem) {
+ .messages__content {
+ margin-left: var(--messages__text-margin); /* LTR */
+ }
+
+ [dir="rtl"] .messages__content {
+ margin-right: var(--messages__text-margin);
+ margin-left: 0;
+ }
+}
+
+.messages a {
+ text-decoration: underline;
+ color: var(--messages__link-color);
+}
+
+.messages a:hover {
+ color: var(--messages__link--hover-color);
+}
+
+.messages pre {
+ margin: 0;
+}
+
+.messages__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.messages__item + .messages__item {
+ margin-top: var(--space-s);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .messages {
+ border-width: 1px 1px 1px var(--messages-border-width); /* LTR */
+ }
+ [dir="rtl"] .messages {
+ border-right-width: var(--messages-border-width);
+ border-left-width: 1px;
+ }
+ .messages__header {
+ filter: grayscale(1) brightness(1.5) contrast(10);
+ }
+}
diff --git a/core/themes/claro/css/src/components/modules-page.css b/core/themes/claro/css/src/components/modules-page.css
new file mode 100644
index 0000000000000000000000000000000000000000..f72551e965d3fddb6c5c9bc2a71877e74f219765
--- /dev/null
+++ b/core/themes/claro/css/src/components/modules-page.css
@@ -0,0 +1,39 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+/* Modules page */
+.system-modules fieldset {
+ border: 0;
+ border-top: 1px solid #ccc;
+}
+.system-modules .fieldset-wrapper {
+ padding: 0;
+}
+.system-modules table,
+.locale-translation-status-form table {
+ border: 0;
+}
+.system-modules tr.even,
+.system-modules tr.odd,
+.locale-translation-status-form tr.even,
+.locale-translation-status-form tr.odd {
+ border: 0;
+ border-bottom: 10px solid #fff;
+ background: #f3f4ee;
+}
+.system-modules tr td:last-child,
+.locale-translation-status-form tr td:last-child {
+ border: 0;
+}
+.system-modules table th,
+.locale-translation-status-form table th {
+ border: 0;
+ border-bottom: 10px solid #fff;
+}
+.system-modules .sticky-header th,
+.locale-translation-status-form .sticky-header th {
+ border: 0;
+}
diff --git a/core/themes/claro/css/src/components/modules-page.pcss.css b/core/themes/claro/css/src/components/modules-page.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..447db4b8910da7fa755d07a9dca6cbcf6b66ab88
--- /dev/null
+++ b/core/themes/claro/css/src/components/modules-page.pcss.css
@@ -0,0 +1,33 @@
+/* Modules page */
+.system-modules fieldset {
+ border: 0;
+ border-top: 1px solid #ccc;
+}
+.system-modules .fieldset-wrapper {
+ padding: 0;
+}
+.system-modules table,
+.locale-translation-status-form table {
+ border: 0;
+}
+.system-modules tr.even,
+.system-modules tr.odd,
+.locale-translation-status-form tr.even,
+.locale-translation-status-form tr.odd {
+ border: 0;
+ border-bottom: 10px solid #fff;
+ background: #f3f4ee;
+}
+.system-modules tr td:last-child,
+.locale-translation-status-form tr td:last-child {
+ border: 0;
+}
+.system-modules table th,
+.locale-translation-status-form table th {
+ border: 0;
+ border-bottom: 10px solid #fff;
+}
+.system-modules .sticky-header th,
+.locale-translation-status-form .sticky-header th {
+ border: 0;
+}
diff --git a/core/themes/claro/css/src/components/node.css b/core/themes/claro/css/src/components/node.css
new file mode 100644
index 0000000000000000000000000000000000000000..e47376340f5f3747336864e82bf5c5d0d264e2ae
--- /dev/null
+++ b/core/themes/claro/css/src/components/node.css
@@ -0,0 +1,9 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+.node__submitted {
+ margin: 1em 0;
+}
diff --git a/core/themes/claro/css/src/components/node.pcss.css b/core/themes/claro/css/src/components/node.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..037d0e06263f65385c6a6964405eacaf66a375b9
--- /dev/null
+++ b/core/themes/claro/css/src/components/node.pcss.css
@@ -0,0 +1,3 @@
+.node__submitted {
+ margin: 1em 0;
+}
diff --git a/core/themes/claro/css/src/components/page-title.css b/core/themes/claro/css/src/components/page-title.css
new file mode 100644
index 0000000000000000000000000000000000000000..959a33edcaf3b1e0f1de2891fce665258f819b9b
--- /dev/null
+++ b/core/themes/claro/css/src/components/page-title.css
@@ -0,0 +1,81 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Page title.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.block-page-title-block {
+ margin-bottom: 0.75rem;
+}
+
+.block-page-title-block:last-child {
+ margin-bottom: 1.5rem;
+}
+
+/**
+ * There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
+ *
+ * @see Drupal\system\Controller\BatchController::batchPage()
+ */
+
+.region-header > .page-title {
+ margin-top: 1.25rem;
+ margin-bottom: 1.5rem;
+}
+
+.page-title {
+ display: inline-block;
+ margin: 0;
+ font-size: 2.027rem;
+ -webkit-font-smoothing: antialiased;
+}
diff --git a/core/themes/claro/css/src/components/page-title.pcss.css b/core/themes/claro/css/src/components/page-title.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..563450a8c284a688bc52f7471717467724ecd381
--- /dev/null
+++ b/core/themes/claro/css/src/components/page-title.pcss.css
@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Page title.
+ */
+
+@import "../base/variables.pcss.css";
+
+.block-page-title-block {
+ margin-bottom: var(--space-s);
+}
+
+.block-page-title-block:last-child {
+ margin-bottom: var(--space-l);
+}
+
+/**
+ * There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
+ *
+ * @see Drupal\system\Controller\BatchController::batchPage()
+ */
+.region-header > .page-title {
+ margin-top: var(--breadcrumb-height);
+ margin-bottom: var(--space-l);
+}
+
+.page-title {
+ display: inline-block;
+ margin: 0;
+ font-size: var(--font-size-h1);
+ -webkit-font-smoothing: antialiased;
+}
diff --git a/core/themes/claro/css/src/components/pager.css b/core/themes/claro/css/src/components/pager.css
new file mode 100644
index 0000000000000000000000000000000000000000..779d92e32db3537d4373996a68c54687197f9462
--- /dev/null
+++ b/core/themes/claro/css/src/components/pager.css
@@ -0,0 +1,243 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for Claro's Pagination.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+:root {
+ /**
+ * Pager.
+ */ /* --space-m × 2 */ /* 2px */
+}
+
+.pager {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.pager__items {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: end;
+ -webkit-align-items: flex-end;
+ -moz-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -moz-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin: 1rem 0; /* LTR */
+ list-style: none;
+ text-align: center;
+ font-weight: bold;
+}
+
+[dir="rtl"] .pager__items {
+ margin: 1rem 0;
+}
+
+.pager__item {
+ display: inline-block;
+ margin-right: 0.25rem;
+ margin-left: 0.25rem;
+ vertical-align: top;
+}
+
+.pager__link,
+.pager__item--current {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -moz-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -moz-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 2rem;
+ height: 2rem;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+ text-decoration: none;
+ color: #545560;
+ border-radius: 1rem; /* Pager size ÷ 2 */
+ background: #fff; /* Make sure that the text is visible on dark background. */
+ line-height: 1;
+}
+
+.pager__link:hover,
+.pager__link:focus,
+.pager__link:active {
+ text-decoration: none;
+}
+
+.pager__link:hover,
+.pager__link.is-active:hover {
+ color: #545560;
+ background: #e6ecf8;
+}
+
+.pager__link--action-link {
+ border-radius: 0.125rem;
+}
+
+/* Active number link. */
+
+.pager__link.is-active,
+.pager__item--current {
+ color: #fff;
+ background: #003cc5;
+}
+
+.pager__item--first .pager__link::before {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2V14' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M14 2L8 8L14 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+
+.pager__item--previous .pager__link::before {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2L5 8L11 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+
+.pager__item--next .pager__link::after {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+
+.pager__item--last .pager__link::after {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L14 2.00001' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M2 14L8 8.00001L2 2.00001' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+
+.pager__item--first .pager__link::before,
+.pager__item--previous .pager__link::before,
+.pager__item--next .pager__link::after,
+.pager__item--last .pager__link::after {
+ position: relative;
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+[dir="rtl"] .pager__item--first .pager__link::before,
+[dir="rtl"] .pager__item--previous .pager__link::before,
+[dir="rtl"] .pager__item--next .pager__link::after,
+[dir="rtl"] .pager__item--last .pager__link::after {
+ -webkit-transform: scaleX(-1);
+ -moz-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
+
+.pager__item--mini {
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+}
+
+.pager__link--mini {
+ border-radius: 50%;
+}
+
+/**
+ * On the mini pager, remove margins for the previous and next icons.
+ * Margins are not needed here as there is no accompanying text.
+ */
+
+.pager__link--mini::before {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.pager__item-title--backwards {
+ margin-left: 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .pager__item-title--backwards {
+ margin-right: 0.5rem;
+ margin-left: 0;
+}
+
+.pager__item-title--forward {
+ margin-right: 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .pager__item-title--forward {
+ margin-right: 0;
+ margin-left: 0.5rem;
+}
+
+@media (-ms-high-contrast: active) {
+ .pager__item a:hover {
+ text-decoration: underline;
+ }
+ .pager__link.is-active {
+ border: 0.125rem solid #fff;
+ }
+}
diff --git a/core/themes/claro/css/src/components/pager.pcss.css b/core/themes/claro/css/src/components/pager.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..607f965edd50f73bad48d420121e311e0bf3431d
--- /dev/null
+++ b/core/themes/claro/css/src/components/pager.pcss.css
@@ -0,0 +1,155 @@
+/**
+ * @file
+ * Styles for Claro's Pagination.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ /**
+ * Pager.
+ */
+ --pager-size: 2rem; /* --space-m × 2 */
+ --pager-border-width: 0.125rem; /* 2px */
+ --pager-fg-color: var(--color-davysgrey);
+ --pager-bg-color: var(--color-white);
+ --pager--hover-bg-color: var(--color-bgblue-active);
+ --pager--focus-bg-color: var(--color-focus);
+ --pager--active-fg-color: var(--color-white);
+ --pager--active-bg-color: var(--color-absolutezero);
+ --pager-border-radius--action: var(--pager-border-width);
+}
+
+.pager {
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+}
+
+.pager__items {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ justify-content: center;
+ margin: var(--space-m) 0; /* LTR */
+ list-style: none;
+ text-align: center;
+ font-weight: bold;
+}
+[dir="rtl"] .pager__items {
+ margin: var(--space-m) 0;
+}
+
+.pager__item {
+ display: inline-block;
+ margin-right: calc(var(--space-xs) / 2);
+ margin-left: calc(var(--space-xs) / 2);
+ vertical-align: top;
+}
+
+.pager__link,
+.pager__item--current {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ min-width: var(--pager-size);
+ height: var(--pager-size);
+ padding-right: var(--space-xs);
+ padding-left: var(--space-xs);
+ text-decoration: none;
+ color: var(--pager-fg-color);
+ border-radius: var(--space-m); /* Pager size ÷ 2 */
+ background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */
+ line-height: 1;
+}
+.pager__link:hover,
+.pager__link:focus,
+.pager__link:active {
+ text-decoration: none;
+}
+.pager__link:hover,
+.pager__link.is-active:hover {
+ color: var(--pager-fg-color);
+ background: var(--pager--hover-bg-color);
+}
+.pager__link--action-link {
+ border-radius: var(--pager-border-radius--action);
+}
+/* Active number link. */
+.pager__link.is-active,
+.pager__item--current {
+ color: var(--pager--active-fg-color);
+ background: var(--pager--active-bg-color);
+}
+.pager__item--first .pager__link::before {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2V14' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M14 2L8 8L14 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+.pager__item--previous .pager__link::before {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2L5 8L11 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+.pager__item--next .pager__link::after {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+.pager__item--last .pager__link::after {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L14 2.00001' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M2 14L8 8.00001L2 2.00001' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+.pager__item--first .pager__link::before,
+.pager__item--previous .pager__link::before,
+.pager__item--next .pager__link::after,
+.pager__item--last .pager__link::after {
+ position: relative;
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: center;
+}
+[dir="rtl"] .pager__item--first .pager__link::before,
+[dir="rtl"] .pager__item--previous .pager__link::before,
+[dir="rtl"] .pager__item--next .pager__link::after,
+[dir="rtl"] .pager__item--last .pager__link::after {
+ transform: scaleX(-1);
+}
+
+.pager__item--mini {
+ margin-right: calc(var(--space-m) / 2);
+ margin-left: calc(var(--space-m) / 2);
+}
+.pager__link--mini {
+ border-radius: 50%;
+}
+
+/**
+ * On the mini pager, remove margins for the previous and next icons.
+ * Margins are not needed here as there is no accompanying text.
+ */
+.pager__link--mini::before {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.pager__item-title--backwards {
+ margin-left: 0.5rem; /* LTR */
+}
+[dir="rtl"] .pager__item-title--backwards {
+ margin-right: 0.5rem;
+ margin-left: 0;
+}
+
+.pager__item-title--forward {
+ margin-right: 0.5rem; /* LTR */
+}
+[dir="rtl"] .pager__item-title--forward {
+ margin-right: 0;
+ margin-left: 0.5rem;
+}
+
+@media (-ms-high-contrast: active) {
+ .pager__item a:hover {
+ text-decoration: underline;
+ }
+ .pager__link.is-active {
+ border: var(--pager-border-width) solid var(--color-white);
+ }
+}
diff --git a/core/themes/claro/css/src/components/progress.css b/core/themes/claro/css/src/components/progress.css
new file mode 100644
index 0000000000000000000000000000000000000000..9babcde923880134f47bd70ad784b20b66abb570
--- /dev/null
+++ b/core/themes/claro/css/src/components/progress.css
@@ -0,0 +1,158 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for progress bar.
+ *
+ * @see progress.js
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.progress::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+.progress--small .progress__track {
+ height: -webkit-calc(0.5rem - 2px);
+ height: -moz-calc(0.5rem - 2px);
+ height: calc(0.5rem - 2px);
+}
+
+.progress--small .progress__bar {
+ width: -webkit-calc(0.5rem - 2px);
+ width: -moz-calc(0.5rem - 2px);
+ width: calc(0.5rem - 2px);
+ min-width: -webkit-calc(0.5rem - 2px);
+ min-width: -moz-calc(0.5rem - 2px);
+ min-width: calc(0.5rem - 2px);
+ height: -webkit-calc(0.5rem - 2px);
+ height: -moz-calc(0.5rem - 2px);
+ height: calc(0.5rem - 2px);
+}
+
+.progress--small .progress__label {
+ font-size: 0.889rem;
+}
+
+.progress__track {
+ height: -webkit-calc(1rem - 2px);
+ height: -moz-calc(1rem - 2px);
+ height: calc(1rem - 2px);
+ margin-top: 0;
+ border: 1px #8e929c solid;
+ border-radius: 1rem;
+ background-color: #d4d4d8;
+}
+
+.progress__bar {
+ width: -webkit-calc(1rem - 2px);
+ width: -moz-calc(1rem - 2px);
+ width: calc(1rem - 2px);
+ min-width: -webkit-calc(1rem - 2px);
+ min-width: -moz-calc(1rem - 2px);
+ min-width: calc(1rem - 2px);
+ height: -webkit-calc(1rem - 2px);
+ height: -moz-calc(1rem - 2px);
+ height: calc(1rem - 2px);
+ margin-top: -1px;
+ margin-left: -1px; /* LTR */
+ -webkit-transition: width
+0.5s
+ease-out;
+ -o-transition: width
+0.5s
+ease-out;
+ -moz-transition: width
+0.5s
+ease-out;
+ transition: width
+0.5s
+ease-out;
+ border: 1px #003cc5 solid;
+ border-radius: 1rem;
+ background-color: #003cc5;
+}
+
+[dir="rtl"] .progress__bar {
+ margin-right: -1px;
+ margin-left: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .progress__bar {
+ background-color: windowText;
+ }
+}
+
+.progress__label {
+ margin-bottom: 0.5rem;
+ font-size: 1rem;
+ font-weight: bold;
+}
+
+.progress__description,
+.progress__percentage {
+ overflow: hidden;
+ margin-top: 0.5rem;
+ color: #545560;
+ font-size: 0.79rem;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ .progress__bar {
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/progress.pcss.css b/core/themes/claro/css/src/components/progress.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..609e5c438982a1c8b811320657cdf774db614cd5
--- /dev/null
+++ b/core/themes/claro/css/src/components/progress.pcss.css
@@ -0,0 +1,86 @@
+/**
+ * @file
+ * Visual styles for progress bar.
+ *
+ * @see progress.js
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --progress-bar-bg-color: var(--color-absolutezero);
+ --progress-bar-border-color: var(--color-absolutezero);
+ --progress-bar-label-font-size: var(--font-size-base);
+ --progress-bar-small-label-font-size: var(--font-size-label);
+ --progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));
+ --progress-bar-default-size-radius: var(--space-m);
+}
+
+.progress::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+.progress--small .progress__track {
+ height: var(--progress-bar-small-size);
+}
+.progress--small .progress__bar {
+ width: var(--progress-bar-small-size);
+ min-width: var(--progress-bar-small-size);
+ height: var(--progress-bar-small-size);
+}
+
+.progress--small .progress__label {
+ font-size: var(--progress-bar-small-label-font-size);
+}
+
+.progress__track {
+ height: var(--progress-bar-default-size);
+ margin-top: 0;
+ border: var(--progress-bar-border-size) var(--progress-track-border-color) solid;
+ border-radius: var(--progress-bar-default-size-radius);
+ background-color: var(--progress-track-bg-color);
+}
+
+.progress__bar {
+ width: var(--progress-bar-default-size);
+ min-width: var(--progress-bar-default-size);
+ height: var(--progress-bar-default-size);
+ margin-top: calc(var(--progress-bar-border-size) * -1);
+ margin-left: calc(var(--progress-bar-border-size) * -1); /* LTR */
+ transition: var(--progress-bar-transition);
+ border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;
+ border-radius: var(--progress-bar-default-size-radius);
+ background-color: var(--progress-bar-bg-color);
+}
+[dir="rtl"] .progress__bar {
+ margin-right: calc(var(--progress-bar-border-size) * -1);
+ margin-left: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .progress__bar {
+ background-color: windowText;
+ }
+}
+
+.progress__label {
+ margin-bottom: var(--progress-bar-spacing-size);
+ font-size: var(--progress-bar-label-font-size);
+ font-weight: bold;
+}
+
+.progress__description,
+.progress__percentage {
+ overflow: hidden;
+ margin-top: var(--progress-bar-spacing-size);
+ color: var(--progress-bar-description-color);
+ font-size: var(--progress-bar-description-font-size);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ .progress__bar {
+ transition: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/quickedit.css b/core/themes/claro/css/src/components/quickedit.css
new file mode 100644
index 0000000000000000000000000000000000000000..6570708276e773bc92068abb3e71c89b39572d87
--- /dev/null
+++ b/core/themes/claro/css/src/components/quickedit.css
@@ -0,0 +1,85 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Override Quick Edit's entity toolbar style on the Drupal front-end.
+ *
+ * I.e. loaded by Quick Edit on the front-end, despite this being a back-end theme.
+ */
+
+/**
+ * The Claro style guide prescribes softer corners.
+ */
+
+.quickedit-toolbar-container > .quickedit-toolbar-content,
+.quickedit-toolbar-container > .quickedit-toolbar-lining {
+ border-radius: 4px;
+}
+
+.quickedit-button {
+ border-radius: 3px;
+}
+
+/**
+ * Entity toolbar's "save" button must be styled like a Claro primary button.
+ */
+
+.quickedit-button.action-save,
+.quickedit-button.action-saving {
+ margin-top: 2px;
+ color: #fff;
+ border-color: #1e5c90;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#007bc6), to(#0071b8));
+ background-image: -moz-linear-gradient(top, #007bc6, #0071b8);
+ background-image: -o-linear-gradient(top, #007bc6, #0071b8);
+ background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+ text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+ font-weight: 700;
+ -webkit-font-smoothing: antialiased;
+}
+
+.quickedit-button.action-save:hover,
+.quickedit-button.action-save:focus,
+.quickedit-button.action-saving:hover,
+.quickedit-button.action-saving:focus {
+ color: #fff;
+ border-color: #1e5c90;
+ background-color: #2369a6;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#0c97ed), to(#1f86c7));
+ background-image: -moz-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: -o-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+}
+
+.quickedit-button.action-save:hover,
+.quickedit-button.action-save:focus,
+.quickedit-button.action-saving:hover,
+.quickedit-button.action-saving:focus {
+ -webkit-box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+ box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+}
+
+.quickedit-button.action-save:active,
+.quickedit-button.action-saving:active {
+ border-color: #144b78;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#08639b), to(#0071b8));
+ background-image: -moz-linear-gradient(top, #08639b, #0071b8);
+ background-image: -o-linear-gradient(top, #08639b, #0071b8);
+ background-image: linear-gradient(to bottom, #08639b, #0071b8);
+ -webkit-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+/**
+ * The entity toolbar's "save" button's top margin shifts both buttons 2px down,
+ * so we must compensate for that to achieve vertically centered positioning.
+ */
+
+.quickedit .icon-close:before {
+ top: 8px;
+}
diff --git a/core/themes/claro/css/src/components/quickedit.pcss.css b/core/themes/claro/css/src/components/quickedit.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..328ec081d58857ac217a0027ccfeeb33df7d08ff
--- /dev/null
+++ b/core/themes/claro/css/src/components/quickedit.pcss.css
@@ -0,0 +1,63 @@
+/**
+ * @file
+ * Override Quick Edit's entity toolbar style on the Drupal front-end.
+ *
+ * I.e. loaded by Quick Edit on the front-end, despite this being a back-end theme.
+ */
+
+/**
+ * The Claro style guide prescribes softer corners.
+ */
+.quickedit-toolbar-container > .quickedit-toolbar-content,
+.quickedit-toolbar-container > .quickedit-toolbar-lining {
+ border-radius: 4px;
+}
+.quickedit-button {
+ border-radius: 3px;
+}
+
+/**
+ * Entity toolbar's "save" button must be styled like a Claro primary button.
+ */
+.quickedit-button.action-save,
+.quickedit-button.action-saving {
+ margin-top: 2px;
+ color: #fff;
+ border-color: #1e5c90;
+ background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+ background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+ text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+ font-weight: 700;
+ -webkit-font-smoothing: antialiased;
+}
+.quickedit-button.action-save:hover,
+.quickedit-button.action-save:focus,
+.quickedit-button.action-saving:hover,
+.quickedit-button.action-saving:focus {
+ color: #fff;
+ border-color: #1e5c90;
+ background-color: #2369a6;
+ background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+}
+.quickedit-button.action-save:hover,
+.quickedit-button.action-save:focus,
+.quickedit-button.action-saving:hover,
+.quickedit-button.action-saving:focus {
+ box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+}
+.quickedit-button.action-save:active,
+.quickedit-button.action-saving:active {
+ border-color: #144b78;
+ background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
+ background-image: linear-gradient(to bottom, #08639b, #0071b8);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+/**
+ * The entity toolbar's "save" button's top margin shifts both buttons 2px down,
+ * so we must compensate for that to achieve vertically centered positioning.
+ */
+.quickedit .icon-close:before {
+ top: 8px;
+}
diff --git a/core/themes/claro/css/src/components/search-admin-settings.css b/core/themes/claro/css/src/components/search-admin-settings.css
new file mode 100644
index 0000000000000000000000000000000000000000..e0c4d648132341533ca0d818960a510909ddc2b2
--- /dev/null
+++ b/core/themes/claro/css/src/components/search-admin-settings.css
@@ -0,0 +1,23 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for administration pages.
+ */
+
+/**
+ * Add search page select/submit.
+ */
+
+.search-admin-settings .container-inline {
+ margin-bottom: 1em;
+}
+
+.search-admin-settings label[for="edit-search-type"] {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/search-admin-settings.pcss.css b/core/themes/claro/css/src/components/search-admin-settings.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..cc117e38f4835886fc41001e550b291678f8935c
--- /dev/null
+++ b/core/themes/claro/css/src/components/search-admin-settings.pcss.css
@@ -0,0 +1,14 @@
+/**
+ * @file
+ * Styles for administration pages.
+ */
+
+/**
+ * Add search page select/submit.
+ */
+.search-admin-settings .container-inline {
+ margin-bottom: 1em;
+}
+.search-admin-settings label[for="edit-search-type"] {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/shortcut.css b/core/themes/claro/css/src/components/shortcut.css
new file mode 100644
index 0000000000000000000000000000000000000000..e4c152b0ccb186d073b34b36d8f7aa0615b4c06d
--- /dev/null
+++ b/core/themes/claro/css/src/components/shortcut.css
@@ -0,0 +1,148 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for the shortcut module.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+:root {
+ /**
+ * Shortcut action.
+ */
+}
+
+/**
+ * Add/remove links.
+ */
+
+.shortcut-action {
+ display: inline-block;
+ margin-left: 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .shortcut-action {
+ margin-right: 0.5rem;
+}
+
+.shortcut-action__message {
+ display: inline-block;
+ margin-left: 0.75rem; /* LTR */
+ padding: 0.25rem
+1rem;
+ -webkit-transition: all
+0.2s
+ease-out;
+ -o-transition: all
+0.2s
+ease-out;
+ -moz-transition: all
+0.2s
+ease-out;
+ transition: all
+0.2s
+ease-out;
+ -webkit-transform: translateY(-0.5rem);
+ -moz-transform: translateY(-0.5rem);
+ -ms-transform: translateY(-0.5rem);
+ -o-transform: translateY(-0.5rem);
+ transform: translateY(-0.5rem);
+ vertical-align: top;
+ opacity: 0;
+ color: #fff;
+ border-radius: 2px;
+ background: #545560;
+ font-size: 0.889rem;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+[dir="rtl"] .shortcut-action__message {
+ margin-right: 0.75rem;
+ margin-left: 0;
+}
+
+.shortcut-action:hover .shortcut-action__message,
+.shortcut-action:focus .shortcut-action__message {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+}
+
+.shortcut-action__icon {
+ display: inline-block;
+ width: 1.5rem;
+ height: 1.5rem;
+ vertical-align: -0.0625rem;
+ background: transparent url(../../../images/shortcut/favstar.svg) left top / 6rem 1.5rem no-repeat;
+}
+
+[dir="rtl"] .shortcut-action__icon {
+ background-image: url(../../../images/shortcut/favstar-rtl.svg);
+}
+
+.shortcut-action--add:hover .shortcut-action__icon,
+.shortcut-action--add:focus .shortcut-action__icon {
+ background-position: -1.5rem top;
+}
+
+.shortcut-action--remove .shortcut-action__icon {
+ background-position: -3rem top;
+}
+
+.shortcut-action--remove:focus .shortcut-action__icon,
+.shortcut-action--remove:hover .shortcut-action__icon {
+ background-position: -4.5rem top;
+}
diff --git a/core/themes/claro/css/src/components/shortcut.pcss.css b/core/themes/claro/css/src/components/shortcut.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..4b6833a7c3f051220f8c573c9dff6da6169455d2
--- /dev/null
+++ b/core/themes/claro/css/src/components/shortcut.pcss.css
@@ -0,0 +1,73 @@
+
+/**
+ * @file
+ * Styling for the shortcut module.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ /**
+ * Shortcut action.
+ */
+ --shortcut-bg-color: var(--color-davysgrey);
+ --shortcut-border-radius-size: var(--base-border-radius);
+ --shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
+ --shortcut-icon-size: var(--space-l);
+}
+
+/**
+ * Add/remove links.
+ */
+.shortcut-action {
+ display: inline-block;
+ margin-left: var(--space-xs); /* LTR */
+}
+[dir="rtl"] .shortcut-action {
+ margin-right: var(--space-xs);
+}
+.shortcut-action__message {
+ display: inline-block;
+ margin-left: var(--space-s); /* LTR */
+ padding: var(--shortcut-padding-size);
+ transition: var(--transition);
+ transform: translateY(calc(-1 * var(--space-xs)));
+ vertical-align: top;
+ opacity: 0;
+ color: var(--color-white);
+ border-radius: var(--shortcut-border-radius-size);
+ background: var(--shortcut-bg-color);
+ font-size: var(--font-size-label);
+ backface-visibility: hidden;
+}
+[dir="rtl"] .shortcut-action__message {
+ margin-right: var(--space-s);
+ margin-left: 0;
+}
+.shortcut-action:hover .shortcut-action__message,
+.shortcut-action:focus .shortcut-action__message {
+ transform: translateY(0);
+ opacity: 1;
+}
+
+.shortcut-action__icon {
+ display: inline-block;
+ width: var(--shortcut-icon-size);
+ height: var(--shortcut-icon-size);
+ vertical-align: -0.0625rem;
+ background: transparent url(../../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
+}
+[dir="rtl"] .shortcut-action__icon {
+ background-image: url(../../../images/shortcut/favstar-rtl.svg);
+}
+.shortcut-action--add:hover .shortcut-action__icon,
+.shortcut-action--add:focus .shortcut-action__icon {
+ background-position: calc(-1 * var(--shortcut-icon-size)) top;
+}
+.shortcut-action--remove .shortcut-action__icon {
+ background-position: calc(-2 * var(--shortcut-icon-size)) top;
+}
+.shortcut-action--remove:focus .shortcut-action__icon,
+.shortcut-action--remove:hover .shortcut-action__icon {
+ background-position: calc(-3 * var(--shortcut-icon-size)) top;
+}
diff --git a/core/themes/claro/css/src/components/skip-link.css b/core/themes/claro/css/src/components/skip-link.css
new file mode 100644
index 0000000000000000000000000000000000000000..23b68472ad76b45ad26c3021d52aca79b62481c4
--- /dev/null
+++ b/core/themes/claro/css/src/components/skip-link.css
@@ -0,0 +1,36 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Skip link
+ *
+ * Allows keyboard users to quickly skip to the main content of the page.
+ */
+
+.skip-link {
+ z-index: 50;
+ left: 50%;
+ padding: 1px 10px 2px;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ -moz-transform: translateX(-50%);
+ -o-transform: translateX(-50%);
+ transform: translateX(-50%);
+ color: #fff;
+ border-radius: 0 0 10px 10px;
+ background: #444;
+ font-size: 0.94em;
+}
+
+.skip-link:focus {
+ text-decoration: none;
+}
+
+.skip-link.visually-hidden.focusable:focus {
+ position: absolute !important;
+}
diff --git a/core/themes/claro/css/src/components/skip-link.pcss.css b/core/themes/claro/css/src/components/skip-link.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..1e6b8c73b0caf3659e4e25c60e5b27cffb1e17b1
--- /dev/null
+++ b/core/themes/claro/css/src/components/skip-link.pcss.css
@@ -0,0 +1,25 @@
+/**
+ * @file
+ * Skip link
+ *
+ * Allows keyboard users to quickly skip to the main content of the page.
+ */
+
+.skip-link {
+ z-index: 50;
+ left: 50%;
+ padding: 1px 10px 2px;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+ color: #fff;
+ border-radius: 0 0 10px 10px;
+ background: #444;
+ font-size: 0.94em;
+}
+.skip-link:focus {
+ text-decoration: none;
+}
+.skip-link.visually-hidden.focusable:focus {
+ position: absolute !important;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--admin-list.css b/core/themes/claro/css/src/components/system-admin--admin-list.css
new file mode 100644
index 0000000000000000000000000000000000000000..1a8b935fedda2cec3b6678f5af2275a15a2af63c
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--admin-list.css
@@ -0,0 +1,132 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Admin list and admin item modules.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Admin list (wrapper of admin items).
+ */
+
+.admin-list {
+ margin-top: 1em;
+ margin-bottom: 2em;
+ padding: 0;
+}
+
+.admin-list--panel {
+ margin: -1em -1.5em;
+}
+
+/**
+ * Admin item.
+ */
+
+.admin-item {
+ padding: 0.75em 1.5em 0.75em 3em;
+}
+
+[dir="rtl"] .admin-item {
+ padding-right: 3em;
+ padding-left: 1.5em;
+}
+
+.admin-item:not(:last-child) {
+ border-bottom: 0.0625em solid #d4d4d8;
+}
+
+.admin-item__title {
+ font-weight: bold;
+}
+
+.admin-item__link {
+ position: relative;
+ display: inline-block;
+ margin-left: -1.5em;
+ padding-left: 1.5em;
+ text-decoration: none;
+}
+
+[dir="rtl"] .admin-item__link {
+ margin-right: -1.5em;
+ margin-left: 0;
+ padding-right: 1.5em;
+ padding-left: 0;
+}
+
+.admin-item__link::before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 1em;
+ height: 1.5em;
+ content: "";
+ background: transparent no-repeat 50% 50%;
+ background-image: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23004adc'/%3E%3C/svg%3E");
+}
+
+[dir="rtl"] .admin-item__link::before {
+ right: 0;
+ left: auto;
+ background-image: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6.9863281,0.31445312 8.4082031,1.7226562 3.1054687,7.0761719 8.4082031,12.429688 6.9863281,13.837891 0.2890625,7.0761719 Z' fill='%23004adc'/%3E%3C/svg%3E");
+}
+
+.admin-item__description {
+ margin: 0.5em 0 0.25em;
+ color: #82828c;
+}
+
+[dir="rtl"] .admin-item__description {
+ margin-right: 0;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--admin-list.pcss.css b/core/themes/claro/css/src/components/system-admin--admin-list.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..6a341daf6e18ac13e585f95a9e5f84cfb4320fe9
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--admin-list.pcss.css
@@ -0,0 +1,71 @@
+/**
+ * @file
+ * Admin list and admin item modules.
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Admin list (wrapper of admin items).
+ */
+.admin-list {
+ margin-top: 1em;
+ margin-bottom: 2em;
+ padding: 0;
+}
+.admin-list--panel {
+ margin: -1em -1.5em;
+}
+
+/**
+ * Admin item.
+ */
+.admin-item {
+ padding: 0.75em 1.5em 0.75em 3em;
+}
+[dir="rtl"] .admin-item {
+ padding-right: 3em;
+ padding-left: 1.5em;
+}
+.admin-item:not(:last-child) {
+ border-bottom: calc(1em / 16) solid var(--color-lightgray);
+}
+.admin-item__title {
+ font-weight: bold;
+}
+.admin-item__link {
+ position: relative;
+ display: inline-block;
+ margin-left: -1.5em;
+ padding-left: 1.5em;
+ text-decoration: none;
+}
+[dir="rtl"] .admin-item__link {
+ margin-right: -1.5em;
+ margin-left: 0;
+ padding-right: 1.5em;
+ padding-left: 0;
+}
+.admin-item__link::before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 1em;
+ height: 1.5em;
+ content: "";
+ background: transparent no-repeat 50% 50%;
+ background-image: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23004adc'/%3E%3C/svg%3E");
+}
+[dir="rtl"] .admin-item__link::before {
+ right: 0;
+ left: auto;
+ background-image: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6.9863281,0.31445312 8.4082031,1.7226562 3.1054687,7.0761719 8.4082031,12.429688 6.9863281,13.837891 0.2890625,7.0761719 Z' fill='%23004adc'/%3E%3C/svg%3E");
+}
+.admin-item__description {
+ margin: 0.5em 0 0.25em;
+ color: var(--color-oldsilver);
+}
+[dir="rtl"] .admin-item__description {
+ margin-right: 0;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--links.css b/core/themes/claro/css/src/components/system-admin--links.css
new file mode 100644
index 0000000000000000000000000000000000000000..729aadbec2671249e765f708dbb25c5a585ab975
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--links.css
@@ -0,0 +1,40 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * System admin module: admin and compact links.
+ */
+
+/**
+ * System compact link: to toggle the display of description text.
+ */
+
+.compact-link {
+ margin: 0 0 0.5em 0;
+}
+
+/**
+ * Quick inline admin links.
+ */
+
+small .admin-link:before {
+ content: " [";
+}
+
+small .admin-link:after {
+ content: "]";
+}
+
+/**
+ * Cron external link on cron configuration form.
+ */
+
+.system-cron-settings__link {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--links.pcss.css b/core/themes/claro/css/src/components/system-admin--links.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..5665f691aed4b040e35ddbba8391ff0df2ebb96a
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--links.pcss.css
@@ -0,0 +1,29 @@
+/**
+ * @file
+ * System admin module: admin and compact links.
+ */
+
+/**
+ * System compact link: to toggle the display of description text.
+ */
+.compact-link {
+ margin: 0 0 0.5em 0;
+}
+
+/**
+ * Quick inline admin links.
+ */
+small .admin-link:before {
+ content: " [";
+}
+small .admin-link:after {
+ content: "]";
+}
+
+/**
+ * Cron external link on cron configuration form.
+ */
+.system-cron-settings__link {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--modules.css b/core/themes/claro/css/src/components/system-admin--modules.css
new file mode 100644
index 0000000000000000000000000000000000000000..f57c40418f7f793a6526521efb8fb6035dc25988
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--modules.css
@@ -0,0 +1,164 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * System admin module: modules page.
+ */
+
+.system-modules thead > tr {
+ border: 0;
+}
+
+.system-modules div.incompatible {
+ font-weight: bold;
+}
+
+.system-modules td.checkbox {
+ width: 4%;
+ min-width: 25px;
+ padding-left: 1rem; /* LTR */
+}
+
+[dir="rtl"] .system-modules td.checkbox {
+ padding-right: 1rem;
+}
+
+.system-modules td.module {
+ width: 25%;
+}
+
+.system-modules td {
+ vertical-align: top;
+}
+
+.system-modules label,
+.system-modules-uninstall label {
+ color: #1d1d1d;
+ font-size: 1.15em;
+}
+
+.system-modules details {
+ color: #5c5c5b;
+}
+
+.system-modules details[open] {
+ overflow: visible;
+ height: auto;
+ white-space: normal;
+}
+
+.system-modules details[open] summary .text {
+ text-transform: none;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+}
+
+.system-modules td details a {
+ color: #5c5c5b;
+ border: 0;
+}
+
+.system-modules td details {
+ margin: 0;
+ border: 0;
+}
+
+.system-modules td details summary {
+ padding: 0;
+ cursor: default;
+ text-transform: none;
+ font-weight: normal;
+}
+
+.system-modules td {
+ padding-left: 0; /* LTR */
+}
+
+[dir="rtl"] .system-modules td {
+ padding-right: 0;
+ padding-left: 12px;
+}
+
+@media screen and (max-width: 40em) {
+ .system-modules td.name {
+ width: 20%;
+ }
+ .system-modules td.description {
+ width: 40%;
+ }
+}
+
+.system-modules .requirements {
+ max-width: 490px;
+ padding: 5px 0;
+}
+
+.system-modules .links {
+ overflow: hidden; /* prevents collapse */
+}
+
+.system-modules .checkbox {
+ margin: 0 5px;
+}
+
+.system-modules .checkbox .form-item {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.admin-requirements,
+.admin-required {
+ color: #666;
+ font-size: 0.9em;
+}
+
+.admin-enabled {
+ color: #080;
+}
+
+.admin-missing {
+ color: #f00;
+}
+
+.module-link {
+ display: block;
+ float: left; /* LTR */
+ margin-top: 2px;
+ padding: 2px 20px;
+ white-space: nowrap;
+}
+
+[dir="rtl"] .module-link {
+ float: right;
+}
+
+.module-link-help {
+ background: url(../../../images/core/787878/questionmark-disc.svg) 0 50% no-repeat; /* LTR */
+}
+
+[dir="rtl"] .module-link-help {
+ background-position: top 50% right 0;
+}
+
+.module-link-permissions {
+ background: url(../../../images/core/787878/key.svg) 0 50% no-repeat; /* LTR */
+}
+
+[dir="rtl"] .module-link-permissions {
+ background-position: top 50% right 0;
+}
+
+.module-link-configure {
+ background: url(../../../images/core/787878/cog.svg) 0 50% no-repeat; /* LTR */
+}
+
+[dir="rtl"] .module-link-configure {
+ background-position: top 50% right 0;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--modules.pcss.css b/core/themes/claro/css/src/components/system-admin--modules.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..06d6b0d96f041edf723d1ea6378cea9547981dfa
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--modules.pcss.css
@@ -0,0 +1,125 @@
+/**
+ * @file
+ * System admin module: modules page.
+ */
+
+.system-modules thead > tr {
+ border: 0;
+}
+.system-modules div.incompatible {
+ font-weight: bold;
+}
+.system-modules td.checkbox {
+ width: 4%;
+ min-width: 25px;
+ padding-left: 1rem; /* LTR */
+}
+[dir="rtl"] .system-modules td.checkbox {
+ padding-right: 1rem;
+}
+.system-modules td.module {
+ width: 25%;
+}
+.system-modules td {
+ vertical-align: top;
+}
+.system-modules label,
+.system-modules-uninstall label {
+ color: #1d1d1d;
+ font-size: 1.15em;
+}
+.system-modules details {
+ color: #5c5c5b;
+}
+.system-modules details[open] {
+ overflow: visible;
+ height: auto;
+ white-space: normal;
+}
+.system-modules details[open] summary .text {
+ text-transform: none;
+ hyphens: auto;
+}
+.system-modules td details a {
+ color: #5c5c5b;
+ border: 0;
+}
+.system-modules td details {
+ margin: 0;
+ border: 0;
+}
+.system-modules td details summary {
+ padding: 0;
+ cursor: default;
+ text-transform: none;
+ font-weight: normal;
+}
+.system-modules td {
+ padding-left: 0; /* LTR */
+}
+[dir="rtl"] .system-modules td {
+ padding-right: 0;
+ padding-left: 12px;
+}
+
+@media screen and (max-width: 40em) {
+ .system-modules td.name {
+ width: 20%;
+ }
+ .system-modules td.description {
+ width: 40%;
+ }
+}
+.system-modules .requirements {
+ max-width: 490px;
+ padding: 5px 0;
+}
+.system-modules .links {
+ overflow: hidden; /* prevents collapse */
+}
+.system-modules .checkbox {
+ margin: 0 5px;
+}
+.system-modules .checkbox .form-item {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.admin-requirements,
+.admin-required {
+ color: #666;
+ font-size: 0.9em;
+}
+.admin-enabled {
+ color: #080;
+}
+.admin-missing {
+ color: #f00;
+}
+.module-link {
+ display: block;
+ float: left; /* LTR */
+ margin-top: 2px;
+ padding: 2px 20px;
+ white-space: nowrap;
+}
+[dir="rtl"] .module-link {
+ float: right;
+}
+.module-link-help {
+ background: url(../../../images/core/787878/questionmark-disc.svg) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .module-link-help {
+ background-position: top 50% right 0;
+}
+.module-link-permissions {
+ background: url(../../../images/core/787878/key.svg) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .module-link-permissions {
+ background-position: top 50% right 0;
+}
+.module-link-configure {
+ background: url(../../../images/core/787878/cog.svg) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .module-link-configure {
+ background-position: top 50% right 0;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--panel.css b/core/themes/claro/css/src/components/system-admin--panel.css
new file mode 100644
index 0000000000000000000000000000000000000000..5fee5d9361af8383913cfa45947822c87f3ab145
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--panel.css
@@ -0,0 +1,75 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * System admin module: Panel styling.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.panel {
+ margin-top: 1em;
+ margin-bottom: 3em;
+ padding: 0;
+ border-bottom: 0.0625em solid #d4d4d8;
+}
+
+.panel__title {
+ margin: 0;
+ padding: 0.66667em 1.33333em;
+ background: #f3f4f9;
+ font-size: 1.125em;
+ line-height: 1.33333em;
+}
+
+.panel__content,
+.panel__description {
+ padding: 1em 1.5em;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--panel.pcss.css b/core/themes/claro/css/src/components/system-admin--panel.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..79035daca264f27c6c0ce7646dc1cd5b2bdf02f8
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--panel.pcss.css
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * System admin module: Panel styling.
+ */
+
+@import "../base/variables.pcss.css";
+
+.panel {
+ margin-top: 1em;
+ margin-bottom: 3em;
+ padding: 0;
+ border-bottom: calc(1em / 16) solid var(--color-lightgray);
+}
+.panel__title {
+ margin: 0;
+ padding: calc(12em / 18) calc(24em / 18);
+ background: var(--color-whitesmoke);
+ font-size: calc(18em / 16);
+ line-height: calc(24em / 18);
+}
+.panel__content,
+.panel__description {
+ padding: 1em 1.5em;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--status-report.css b/core/themes/claro/css/src/components/system-admin--status-report.css
new file mode 100644
index 0000000000000000000000000000000000000000..127a3aec7c34ce8d644c0de57cea7d3cbc04a36c
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--status-report.css
@@ -0,0 +1,66 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * System admin module: Status report.
+ *
+ * Main status report theming, status report info styles, status report layout
+ * and counter styles are provided by the system/base library, see
+ * - system-status-report.css
+ * - system-status-report-general-info.css
+ * - system-status-counter.css
+ * - system-status-report-counters.css
+ */
+
+.system-status-report__status-title {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 10px 6px 10px 40px; /* LTR */
+ vertical-align: top;
+ background-color: transparent;
+ font-weight: normal;
+}
+
+[dir="rtl"] .system-status-report__status-title {
+ padding: 10px 40px 10px 6px;
+}
+
+.system-status-report__status-icon:before {
+ position: absolute;
+ top: 12px;
+ left: 12px; /* LTR */
+ display: block;
+ width: 16px;
+ height: 16px;
+ content: "";
+ background-repeat: no-repeat;
+}
+
+[dir="rtl"] .system-status-report__status-icon:before {
+ right: 12px;
+ left: auto;
+}
+
+.system-status-report__status-icon--error:before {
+ background-image: url(../../../images/core/e32700/error.svg);
+}
+
+.system-status-report__status-icon--warning:before {
+ background-image: url(../../../images/core/e29700/warning.svg);
+}
+
+.system-status-report__entry__value {
+ padding: 1em 0.5em;
+}
+
+.cron-description__run-cron {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/system-admin--status-report.pcss.css b/core/themes/claro/css/src/components/system-admin--status-report.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..0f09883cb3ffb5af5ee1f6463957409d7d71f7ef
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-admin--status-report.pcss.css
@@ -0,0 +1,51 @@
+/**
+ * @file
+ * System admin module: Status report.
+ *
+ * Main status report theming, status report info styles, status report layout
+ * and counter styles are provided by the system/base library, see
+ * - system-status-report.css
+ * - system-status-report-general-info.css
+ * - system-status-counter.css
+ * - system-status-report-counters.css
+ */
+
+.system-status-report__status-title {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 10px 6px 10px 40px; /* LTR */
+ vertical-align: top;
+ background-color: transparent;
+ font-weight: normal;
+}
+[dir="rtl"] .system-status-report__status-title {
+ padding: 10px 40px 10px 6px;
+}
+.system-status-report__status-icon:before {
+ position: absolute;
+ top: 12px;
+ left: 12px; /* LTR */
+ display: block;
+ width: 16px;
+ height: 16px;
+ content: "";
+ background-repeat: no-repeat;
+}
+[dir="rtl"] .system-status-report__status-icon:before {
+ right: 12px;
+ left: auto;
+}
+.system-status-report__status-icon--error:before {
+ background-image: url(../../../images/core/e32700/error.svg);
+}
+.system-status-report__status-icon--warning:before {
+ background-image: url(../../../images/core/e29700/warning.svg);
+}
+.system-status-report__entry__value {
+ padding: 1em 0.5em;
+}
+
+.cron-description__run-cron {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/system-status-counter.css b/core/themes/claro/css/src/components/system-status-counter.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e6c1bbd282414e4df51b419ad16e04d0b6d68a2
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-counter.css
@@ -0,0 +1,105 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter {
+ display: inline-block;
+ overflow-y: hidden;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ white-space: nowrap;
+ border: 1px solid #e6e4df;
+ border-radius: 3px;
+ background: #fcfcfa;
+}
+
+.system-status-counter__status-icon {
+ display: inline-block;
+ width: 60px;
+ height: 60px;
+ vertical-align: middle;
+ border-right: 1px solid #e6e4df; /* LTR */
+ border-left: 0; /* LTR */
+ background-color: #faf9f5;
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+[dir="rtl"] .system-status-counter__status-icon {
+ border-right: 0;
+ border-left: 1px solid #e6e4df;
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+.system-status-counter__status-icon:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: 50% center;
+ background-size: 25px;
+}
+
+.system-status-counter__status-icon--error:before {
+ background-image: url(../../../images/core/e32700/error.svg);
+}
+
+.system-status-counter__status-icon--warning:before {
+ background-image: url(../../../images/core/e29700/warning.svg);
+}
+
+.system-status-counter__status-icon--checked:before {
+ background-image: url(../../../images/core/73b355/check.svg);
+}
+
+.system-status-counter__status-title {
+ display: inline-block;
+ padding: 0 6px;
+ vertical-align: middle;
+ text-transform: uppercase;
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 1em;
+}
+
+.system-status-counter__title-count {
+ display: block;
+ margin-bottom: 2px;
+}
+
+.system-status-counter__details {
+ display: block;
+ text-transform: none;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 1.5;
+}
+
+@media screen and (min-width: 61em) {
+ .system-status-counter__status-icon,
+ .system-status-counter {
+ height: 65px;
+ }
+ .system-status-counter__status-icon {
+ width: 65px;
+ }
+ .system-status-counter__status-title {
+ padding: 10px 3%;
+ font-size: 16px;
+ }
+ .system-status-counter__status-icon:before {
+ background-size: 35px;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-counter.pcss.css b/core/themes/claro/css/src/components/system-status-counter.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..c96e797e885de0a9f1c0fa393d2479e8c563d16b
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-counter.pcss.css
@@ -0,0 +1,87 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter {
+ display: inline-block;
+ overflow-y: hidden;
+ box-sizing: border-box;
+ width: 100%;
+ white-space: nowrap;
+ border: 1px solid #e6e4df;
+ border-radius: 3px;
+ background: #fcfcfa;
+}
+.system-status-counter__status-icon {
+ display: inline-block;
+ width: 60px;
+ height: 60px;
+ vertical-align: middle;
+ border-right: 1px solid #e6e4df; /* LTR */
+ border-left: 0; /* LTR */
+ background-color: #faf9f5;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+}
+[dir="rtl"] .system-status-counter__status-icon {
+ border-right: 0;
+ border-left: 1px solid #e6e4df;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+}
+.system-status-counter__status-icon:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: 50% center;
+ background-size: 25px;
+}
+
+.system-status-counter__status-icon--error:before {
+ background-image: url(../../../images/core/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+ background-image: url(../../../images/core/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+ background-image: url(../../../images/core/73b355/check.svg);
+}
+
+.system-status-counter__status-title {
+ display: inline-block;
+ padding: 0 6px;
+ vertical-align: middle;
+ text-transform: uppercase;
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 1em;
+}
+.system-status-counter__title-count {
+ display: block;
+ margin-bottom: 2px;
+}
+.system-status-counter__details {
+ display: block;
+ text-transform: none;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 1.5;
+}
+
+@media screen and (min-width: 61em) {
+ .system-status-counter__status-icon,
+ .system-status-counter {
+ height: 65px;
+ }
+ .system-status-counter__status-icon {
+ width: 65px;
+ }
+ .system-status-counter__status-title {
+ padding: 10px 3%;
+ font-size: 16px;
+ }
+ .system-status-counter__status-icon:before {
+ background-size: 35px;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-report-counters.css b/core/themes/claro/css/src/components/system-status-report-counters.css
new file mode 100644
index 0000000000000000000000000000000000000000..799fc4fe3ed7e08dab2de2784ae2c744e4d2fbfa
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-report-counters.css
@@ -0,0 +1,43 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the system status report counters.
+ */
+
+.system-status-report-counters__item {
+ width: 100%;
+ margin: 10px 0;
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-report-counters__item {
+ margin-bottom: 20px;
+ }
+ .system-status-report-counters {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -moz-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ }
+ .system-status-report-counters__item--half-width {
+ width: 49%;
+ }
+ .system-status-report-counters__item--third-width {
+ width: 32%;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-report-counters.pcss.css b/core/themes/claro/css/src/components/system-status-report-counters.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..855eadf925a1e4eccb7759e2e407bc4b0af9156d
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-report-counters.pcss.css
@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Styles for the system status report counters.
+ */
+
+.system-status-report-counters__item {
+ width: 100%;
+ margin: 10px 0;
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-report-counters__item {
+ margin-bottom: 20px;
+ }
+ .system-status-report-counters {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
+ .system-status-report-counters__item--half-width {
+ width: 49%;
+ }
+ .system-status-report-counters__item--third-width {
+ width: 32%;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-report-general-info.css b/core/themes/claro/css/src/components/system-status-report-general-info.css
new file mode 100644
index 0000000000000000000000000000000000000000..4910fde784338167491d266097dd4cb6a11a0191
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-report-general-info.css
@@ -0,0 +1,203 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for the System Status general info.
+ */
+
+.system-status-general-info {
+ border: 1px solid #ccc;
+ border-radius: 3px;
+}
+
+.system-status-general-info__header {
+ overflow: hidden;
+ margin: 0;
+ padding: 10px;
+ text-transform: uppercase;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ background-color: #f5f5f2;
+ font-size: 14px;
+}
+
+.system-status-general-info__item {
+ overflow-x: auto;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 10px 10px 20px;
+ border-top: 1px solid #ccc;
+ background: #fcfcfa;
+}
+
+.system-status-general-info__item-icon {
+ display: inline-block;
+ width: 45px;
+ height: 45px;
+ vertical-align: top;
+}
+
+.system-status-general-info__item-icon:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: 50% center;
+ background-size: 35px;
+}
+
+.system-status-general-info__item-icon--d8:before {
+ background-image: url(../../../images/core/cccccc/d8-logo.svg);
+}
+
+.system-status-general-info__item-icon--clock:before {
+ background-image: url(../../../images/core/cccccc/clock.svg);
+}
+
+.system-status-general-info__item-icon--server:before {
+ background-image: url(../../../images/core/cccccc/server.svg);
+}
+
+.system-status-general-info__item-icon--php:before {
+ background-image: url(../../../images/core/cccccc/php-logo.svg);
+ background-size: 45px;
+}
+
+.system-status-general-info__item-icon--database:before {
+ background-image: url(../../../images/core/cccccc/database.svg);
+ background-size: 30px;
+}
+
+.system-status-general-info__item-details {
+ position: relative;
+ display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: -webkit-calc(100% - 60px);
+ width: -moz-calc(100% - 60px);
+ width: calc(100% - 60px);
+ padding-left: 10px; /* LTR */
+}
+
+[dir="rtl"] .system-status-general-info__item-details {
+ padding-right: 10px;
+ padding-left: 0;
+}
+
+.system-status-general-info__item-title {
+ margin-top: 10px;
+ margin-bottom: 0;
+ font-size: 1.231em;
+}
+
+.system-status-general-info__sub-item-title {
+ margin: 0;
+ font-size: 1.154em;
+}
+
+.system-status-general-info__sub-item__title {
+ font-weight: bold;
+}
+
+.system-status-general-info__sub-item__value {
+ display: block;
+}
+
+.system-status-general-info__run-cron {
+ margin: 1em 0 0;
+}
+
+@media screen and (min-width: 48em) {
+ .system-status-general-info__items {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ overflow-x: hidden;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ }
+
+ .system-status-general-info__item {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1;
+ -moz-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-flex-basis: 33%;
+ -ms-flex-preferred-size: 33%;
+ flex-basis: 33%;
+ width: 33%;
+ }
+ .system-status-general-info__item:nth-child(2) {
+ -webkit-box-flex: 2;
+ -webkit-flex: 2;
+ -moz-box-flex: 2;
+ -ms-flex: 2;
+ flex: 2;
+ -webkit-flex-basis: 66%;
+ -ms-flex-preferred-size: 66%;
+ flex-basis: 66%;
+ }
+ .system-status-general-info__item:nth-child(2),
+ .system-status-general-info__item:nth-child(4),
+ .system-status-general-info__item:nth-child(5) {
+ border-left: 1px solid #ccc; /* LTR */
+ }
+ [dir="rtl"] .system-status-general-info__item:nth-child(1),
+ [dir="rtl"] .system-status-general-info__item:nth-child(3) {
+ border-left: 1px solid #ccc;
+ }
+ [dir="rtl"] .system-status-general-info__item:nth-child(2),
+ [dir="rtl"] .system-status-general-info__item:nth-child(5) {
+ border-left: 0;
+ }
+
+ .system-status-general-info__run-cron {
+ margin: 15px 0 5px;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-general-info__item-icon {
+ width: 55px;
+ height: 55px;
+ }
+ .system-status-general-info__item-icon:before {
+ background-size: 35px;
+ }
+ .system-status-general-info__item-icon--php:before {
+ background-size: 55px;
+ }
+
+ .system-status-general-info__run-cron {
+ position: absolute;
+ top: 1em;
+ right: 1em; /* LTR */
+ margin-top: 0;
+ }
+ [dir="rtl"] .system-status-general-info__run-cron {
+ right: auto;
+ left: 1em;
+ }
+}
+
+@media screen and (max-width: 48em) {
+ .system-status-general-info__header {
+ display: none;
+ }
+ .system-status-general-info {
+ margin-top: 25px;
+ border-top: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-report-general-info.pcss.css b/core/themes/claro/css/src/components/system-status-report-general-info.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..6374ce96acaaf58d57ae95ffb44a529da9126701
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-report-general-info.pcss.css
@@ -0,0 +1,164 @@
+/**
+ * @file
+ * Claro styles for the System Status general info.
+ */
+
+.system-status-general-info {
+ border: 1px solid #ccc;
+ border-radius: 3px;
+}
+
+.system-status-general-info__header {
+ overflow: hidden;
+ margin: 0;
+ padding: 10px;
+ text-transform: uppercase;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ background-color: #f5f5f2;
+ font-size: 14px;
+}
+
+.system-status-general-info__item {
+ overflow-x: auto;
+ box-sizing: border-box;
+ padding: 10px 10px 20px;
+ border-top: 1px solid #ccc;
+ background: #fcfcfa;
+}
+
+.system-status-general-info__item-icon {
+ display: inline-block;
+ width: 45px;
+ height: 45px;
+ vertical-align: top;
+}
+.system-status-general-info__item-icon:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: 50% center;
+ background-size: 35px;
+}
+.system-status-general-info__item-icon--d8:before {
+ background-image: url(../../../images/core/cccccc/d8-logo.svg);
+}
+.system-status-general-info__item-icon--clock:before {
+ background-image: url(../../../images/core/cccccc/clock.svg);
+}
+.system-status-general-info__item-icon--server:before {
+ background-image: url(../../../images/core/cccccc/server.svg);
+}
+.system-status-general-info__item-icon--php:before {
+ background-image: url(../../../images/core/cccccc/php-logo.svg);
+ background-size: 45px;
+}
+.system-status-general-info__item-icon--database:before {
+ background-image: url(../../../images/core/cccccc/database.svg);
+ background-size: 30px;
+}
+
+.system-status-general-info__item-details {
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ width: calc(100% - 60px);
+ padding-left: 10px; /* LTR */
+}
+[dir="rtl"] .system-status-general-info__item-details {
+ padding-right: 10px;
+ padding-left: 0;
+}
+
+.system-status-general-info__item-title {
+ margin-top: 10px;
+ margin-bottom: 0;
+ font-size: 1.231em;
+}
+
+.system-status-general-info__sub-item-title {
+ margin: 0;
+ font-size: 1.154em;
+}
+
+.system-status-general-info__sub-item__title {
+ font-weight: bold;
+}
+.system-status-general-info__sub-item__value {
+ display: block;
+}
+
+.system-status-general-info__run-cron {
+ margin: 1em 0 0;
+}
+
+@media screen and (min-width: 48em) {
+ .system-status-general-info__items {
+ display: flex;
+ overflow-x: hidden;
+ flex-wrap: wrap;
+ }
+
+ .system-status-general-info__item {
+ flex: 1;
+ flex-basis: 33%;
+ width: 33%;
+ }
+ .system-status-general-info__item:nth-child(2) {
+ flex: 2;
+ flex-basis: 66%;
+ }
+ .system-status-general-info__item:nth-child(2),
+ .system-status-general-info__item:nth-child(4),
+ .system-status-general-info__item:nth-child(5) {
+ border-left: 1px solid #ccc; /* LTR */
+ }
+ [dir="rtl"] .system-status-general-info__item:nth-child(1),
+ [dir="rtl"] .system-status-general-info__item:nth-child(3) {
+ border-left: 1px solid #ccc;
+ }
+ [dir="rtl"] .system-status-general-info__item:nth-child(2),
+ [dir="rtl"] .system-status-general-info__item:nth-child(5) {
+ border-left: 0;
+ }
+
+ .system-status-general-info__run-cron {
+ margin: 15px 0 5px;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-general-info__item-icon {
+ width: 55px;
+ height: 55px;
+ }
+ .system-status-general-info__item-icon:before {
+ background-size: 35px;
+ }
+ .system-status-general-info__item-icon--php:before {
+ background-size: 55px;
+ }
+
+ .system-status-general-info__run-cron {
+ position: absolute;
+ top: 1em;
+ right: 1em; /* LTR */
+ margin-top: 0;
+ }
+ [dir="rtl"] .system-status-general-info__run-cron {
+ right: auto;
+ left: 1em;
+ }
+}
+
+@media screen and (max-width: 48em) {
+ .system-status-general-info__header {
+ display: none;
+ }
+ .system-status-general-info {
+ margin-top: 25px;
+ border-top: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-report.css b/core/themes/claro/css/src/components/system-status-report.css
new file mode 100644
index 0000000000000000000000000000000000000000..d91c7c9f2ea7eadcbc80b8fdf2e95a7978b31085
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-report.css
@@ -0,0 +1,187 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for the System Status Report.
+ */
+
+.system-status-report__requirements-group {
+ padding-top: 20px;
+}
+
+.system-status-report__entry {
+ overflow: auto;
+ width: 100%;
+ margin: 0;
+ border: 0;
+ border-radius: 0;
+ background-color: transparent;
+}
+
+.system-status-report__entry--error {
+ background-color: transparent;
+}
+
+.system-status-report__entry--warning {
+ background-color: transparent;
+}
+
+.system-status-report__entry h3 {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 1.231em;
+}
+
+/* Account for native and poly-filled details element */
+
+.system-status-report__status-title {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 1em 1em 1em 3em; /* LTR */
+ font-weight: bold;
+}
+
+.system-status-report__status-title .details-title {
+ text-transform: none;
+ color: inherit;
+}
+
+.system-status-report__status-title .details-title {
+ padding-left: 3em; /* LTR */
+}
+
+[dir="rtl"] .system-status-report__status-title .details-title {
+ padding-right: 3em;
+ padding-left: 0;
+}
+
+[dir="rtl"].details .system-status-report__status-title {
+ padding: 1em 3em 1em 1em;
+}
+
+.collapse-processed > .system-status-report__status-title:before {
+ float: right; /* LTR */
+}
+
+.system-status-report__status-title::-webkit-details-marker {
+ float: right; /* LTR */
+}
+
+[dir="rtl"] .collapse-processed > .system-status-report__status-title:before {
+ float: left;
+}
+
+[dir="rtl"] .system-status-report__status-title::-webkit-details-marker {
+ float: left;
+}
+
+/* Make poly-filled details and summary elements behave correctly. */
+
+.system-status-report summary:first-child ~ * {
+ display: none;
+}
+
+.system-status-report details[open] > *,
+.system-status-report details > summary:first-child {
+ display: block;
+ color: inherit;
+}
+
+.system-status-report__status-title .details-title:before,
+.details .system-status-report__status-icon:before {
+ position: absolute;
+ top: 1em;
+ left: 10px; /* LTR */
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ margin-right: 10px; /* LTR */
+ content: "";
+ vertical-align: top;
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: contain;
+}
+
+[dir="rtl"] .system-status-report__status-title .details-title:before,
+[dir="rtl"].details .system-status-report__status-title:before {
+ right: 10px;
+ left: auto;
+ margin-right: 0;
+}
+
+.system-status-report__status-icon--error .details-title:before,
+.details .system-status-report__status-icon--error:before {
+ background-image: url(../../../images/core/e32700/error.svg);
+}
+
+.system-status-report__status-icon--warning .details-title:before,
+.details .system-status-report__status-icon--warning:before {
+ background-image: url(../../../images/core/e29700/warning.svg);
+}
+
+.system-status-report__entry__value {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0 1em 1em 3em; /* LTR */
+}
+
+[dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 1em;
+}
+
+@media screen and (max-width: 48em) {
+ .system-status-report {
+ word-wrap: break-word;
+ }
+}
+
+@media screen and (min-width: 48em) {
+ .system-status-report__entry::after {
+ display: table;
+ clear: both;
+ content: "";
+ }
+ .system-status-report__status-title {
+ float: left; /* LTR */
+ width: 18rem;
+ cursor: default;
+ }
+ .system-status-report__status-title:hover,
+ .system-status-report__status-title:focus {
+ text-decoration: none;
+ }
+ [dir="rtl"] .system-status-report__status-title {
+ float: right;
+ }
+ html.js .system-status-report__status-title::-webkit-details-marker {
+ display: none;
+ }
+ .collapse-processed > .system-status-report__status-title:before {
+ position: relative;
+ top: 3px;
+ }
+ .system-status-report__entry__value {
+ display: block;
+ float: right;
+ width: -webkit-calc(100% - 23em);
+ width: -moz-calc(100% - 23em);
+ width: calc(100% - 23em);
+ padding-top: 1em;
+ padding-left: 0; /* LTR */
+ }
+ [dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/components/system-status-report.pcss.css b/core/themes/claro/css/src/components/system-status-report.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..1008455da589bc6b4cab8438925dcee81ecb7f11
--- /dev/null
+++ b/core/themes/claro/css/src/components/system-status-report.pcss.css
@@ -0,0 +1,154 @@
+/**
+ * @file
+ * Claro styles for the System Status Report.
+ */
+
+.system-status-report__requirements-group {
+ padding-top: 20px;
+}
+.system-status-report__entry {
+ overflow: auto;
+ width: 100%;
+ margin: 0;
+ border: 0;
+ border-radius: 0;
+ background-color: transparent;
+}
+.system-status-report__entry--error {
+ background-color: transparent;
+}
+.system-status-report__entry--warning {
+ background-color: transparent;
+}
+.system-status-report__entry h3 {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 1.231em;
+}
+/* Account for native and poly-filled details element */
+.system-status-report__status-title {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 1em 1em 1em 3em; /* LTR */
+ font-weight: bold;
+}
+.system-status-report__status-title .details-title {
+ text-transform: none;
+ color: inherit;
+}
+.system-status-report__status-title .details-title {
+ padding-left: 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__status-title .details-title {
+ padding-right: 3em;
+ padding-left: 0;
+}
+[dir="rtl"].details .system-status-report__status-title {
+ padding: 1em 3em 1em 1em;
+}
+.collapse-processed > .system-status-report__status-title:before {
+ float: right; /* LTR */
+}
+.system-status-report__status-title::-webkit-details-marker {
+ float: right; /* LTR */
+}
+[dir="rtl"] .collapse-processed > .system-status-report__status-title:before {
+ float: left;
+}
+[dir="rtl"] .system-status-report__status-title::-webkit-details-marker {
+ float: left;
+}
+
+/* Make poly-filled details and summary elements behave correctly. */
+.system-status-report summary:first-child ~ * {
+ display: none;
+}
+.system-status-report details[open] > *,
+.system-status-report details > summary:first-child {
+ display: block;
+ color: inherit;
+}
+
+.system-status-report__status-title .details-title:before,
+.details .system-status-report__status-icon:before {
+ position: absolute;
+ top: 1em;
+ left: 10px; /* LTR */
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ margin-right: 10px; /* LTR */
+ content: "";
+ vertical-align: top;
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: contain;
+}
+[dir="rtl"] .system-status-report__status-title .details-title:before,
+[dir="rtl"].details .system-status-report__status-title:before {
+ right: 10px;
+ left: auto;
+ margin-right: 0;
+}
+.system-status-report__status-icon--error .details-title:before,
+.details .system-status-report__status-icon--error:before {
+ background-image: url(../../../images/core/e32700/error.svg);
+}
+.system-status-report__status-icon--warning .details-title:before,
+.details .system-status-report__status-icon--warning:before {
+ background-image: url(../../../images/core/e29700/warning.svg);
+}
+
+.system-status-report__entry__value {
+ box-sizing: border-box;
+ padding: 0 1em 1em 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 1em;
+}
+
+@media screen and (max-width: 48em) {
+ .system-status-report {
+ word-wrap: break-word;
+ }
+}
+
+@media screen and (min-width: 48em) {
+ .system-status-report__entry::after {
+ display: table;
+ clear: both;
+ content: "";
+ }
+ .system-status-report__status-title {
+ float: left; /* LTR */
+ width: 18rem;
+ cursor: default;
+ }
+ .system-status-report__status-title:hover,
+ .system-status-report__status-title:focus {
+ text-decoration: none;
+ }
+ [dir="rtl"] .system-status-report__status-title {
+ float: right;
+ }
+ html.js .system-status-report__status-title::-webkit-details-marker {
+ display: none;
+ }
+ .collapse-processed > .system-status-report__status-title:before {
+ position: relative;
+ top: 3px;
+ }
+ .system-status-report__entry__value {
+ display: block;
+ float: right;
+ width: calc(100% - 23em);
+ padding-top: 1em;
+ padding-left: 0; /* LTR */
+ }
+ [dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/components/table--file-multiple-widget.css b/core/themes/claro/css/src/components/table--file-multiple-widget.css
new file mode 100644
index 0000000000000000000000000000000000000000..e24cb0185abf3c6d38d59d598d0b8d0453ae244a
--- /dev/null
+++ b/core/themes/claro/css/src/components/table--file-multiple-widget.css
@@ -0,0 +1,165 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for multiple file widget table.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.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: 2.0625rem;
+}
+
+[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
+ float: left;
+}
+
+.table-file-multiple-widget td {
+ height: 3rem;
+}
+
+.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 {
+ height: 2rem;
+ color: #545560;
+ background: #f3f4f9;
+ font-size: 0.889rem;
+}
+
+.table-file-multiple-widget td {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.table-file-multiple-widget .tabledrag-cell {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+.table-file-multiple-widget .checkbox .form-type--boolean {
+ line-height: 3rem;
+}
+
+.no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {
+ line-height: 1.5;
+}
+
+/**
+ * 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. */
+}
+
+/**
+ * Remove the border for the last table row if upload is not possible.
+ * (A full file widget with limited cardinality.)
+ */
+
+.table-file-multiple-widget--no-upload > tbody:last-child > tr:last-child {
+ border-bottom: 0;
+}
+
+/**
+ * Take as much space as possible.
+ */
+
+@media screen and (max-width: 37.5em) {
+ .claro-details__wrapper .file-widget-multiple__table-wrapper {
+ margin-right: -1rem;
+ margin-left: -1rem;
+ }
+
+ .claro-details__wrapper .file-widget-multiple__table-wrapper > :not(table) {
+ margin-right: 1rem;
+ margin-left: 1rem;
+ }
+}
diff --git a/core/themes/claro/css/src/components/table--file-multiple-widget.pcss.css b/core/themes/claro/css/src/components/table--file-multiple-widget.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..436719ec60755e8641529cd62400df49d19fb9b4
--- /dev/null
+++ b/core/themes/claro/css/src/components/table--file-multiple-widget.pcss.css
@@ -0,0 +1,110 @@
+/**
+ * @file
+ * Styles for multiple file widget table.
+ */
+
+@import "../base/variables.pcss.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 {
+ height: calc(var(--space-m) * 2);
+ color: var(--color-davysgrey);
+ background: var(--color-whitesmoke);
+ font-size: var(--font-size-s);
+}
+
+.table-file-multiple-widget td {
+ padding-top: var(--space-m);
+ padding-bottom: var(--space-m);
+}
+
+.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. */
+}
+
+/**
+ * Remove the border for the last table row if upload is not possible.
+ * (A full file widget with limited cardinality.)
+ */
+.table-file-multiple-widget--no-upload > tbody:last-child > tr:last-child {
+ border-bottom: 0;
+}
+
+/**
+ * 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/core/themes/claro/css/src/components/tabledrag.css b/core/themes/claro/css/src/components/tabledrag.css
new file mode 100644
index 0000000000000000000000000000000000000000..54073c499d5725bd704f53349a7f6044aee07342
--- /dev/null
+++ b/core/themes/claro/css/src/components/tabledrag.css
@@ -0,0 +1,428 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Replacement styles for table drag.
+ *
+ * Replaces both of tabledrag.module.css (from core/stable) and tabledrag.css
+ * (from Classy theme).
+ *
+ * @see tabledrag.js
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+body.drag {
+ cursor: move;
+}
+
+/* The block region's title row in table. */
+
+.region-title {
+ font-weight: bold;
+}
+
+/* Empty region message row in table. */
+
+.region-message {
+ color: #82828c;
+}
+
+/* If the region is populated, we shouldn't display the empty message. */
+
+.region-message.region-populated {
+ display: none;
+}
+
+/**
+ * Remove border-bottom from abbr element. Class is duplicated in the selector
+ * to increase weight to be able to win normalize.css selectors.
+ */
+
+.tabledrag-changed.tabledrag-changed {
+ border-bottom: none;
+}
+
+/* Dont display the abbreviation of 'add-new' table rows. */
+
+.add-new .tabledrag-changed {
+ display: none;
+}
+
+.draggable .tabledrag-changed {
+ position: relative;
+ left: -0.5rem; /* LTR */
+}
+
+[dir="rtl"] .draggable .tabledrag-changed {
+ right: -0.5rem; /* LTR */
+ left: auto;
+}
+
+.tabledrag-cell--only-drag .tabledrag-changed {
+ width: 1.5rem;
+ min-width: 1.5rem;
+}
+
+/**
+ * Draggable row state colors.
+ */
+
+.draggable.drag,
+.draggable.drag:focus {
+ background-color: #fe7;
+}
+
+.draggable.drag-previous {
+ background-color: #ffb;
+}
+
+/**
+ * Reduce the spacing of draggable table cells.
+ */
+
+.draggable-table td:first-child ~ td,
+.draggable-table th:first-child ~ th {
+ padding-left: 0 /* LTR */;
+}
+
+[dir="rtl"] .draggable-table td:first-child ~ td,
+[dir="rtl"] .draggable-table th:first-child ~ th {
+ padding-right: 0;
+ padding-left: 1rem;
+}
+
+/* Auto width for weight selects and number inputs. */
+
+.draggable td .form-element--type-select[name$="][_weight]"], /* Multiple field */
+.draggable td .term-weight, /* Taxonomy term list */
+.draggable td .field-weight /* Field UI table */ {
+ width: auto;
+}
+
+/**
+ * Handle styles.
+ */
+
+.tabledrag-handle {
+ position: relative;
+ z-index: 1;
+ overflow: visible;
+ cursor: move;
+ text-align: center;
+ vertical-align: text-top;
+}
+
+.tabledrag-handle::after {
+ display: inline-block;
+ width: 1.0625rem;
+ height: 1.0625rem;
+ margin-left: -1rem; /* LTR */
+ padding: 0.5rem 1rem;
+ content: "";
+ -webkit-transition: -webkit-transform 0.1s ease-in-out 0s;
+ transition: -webkit-transform 0.1s ease-in-out 0s;
+ -o-transition: -o-transform 0.1s ease-in-out 0s;
+ -moz-transition: transform 0.1s ease-in-out 0s, -moz-transform 0.1s ease-in-out 0s;
+ transition: transform 0.1s ease-in-out 0s;
+ transition: transform 0.1s ease-in-out 0s, -webkit-transform 0.1s ease-in-out 0s, -moz-transform 0.1s ease-in-out 0s, -o-transform 0.1s ease-in-out 0s;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m 14.102955,5.47562 c -0.1819,-0.20654 -0.4917,-0.23016 -0.7014,-0.05265 -0.2098,0.17684 -0.2462,0.4914 -0.0814,0.71278 l 1.0998,1.34591 H 8.5124153 V 1.62014 l 1.31954,1.11304 c 0.1033,0.0945 0.2395997,0.14242 0.3771997,0.13162 0.1383,-0.01013 0.2667,-0.07762 0.3548,-0.18629 0.088,-0.10935 0.129,-0.24974 0.1131,-0.39014 -0.0159,-0.14039 -0.0873,-0.26796 -0.1979,-0.35369 L 8.3278353,0.118965 c -0.1879501,-0.1586199 -0.4592601,-0.1586199 -0.6472101,0 l -2.15136,1.815715 c -0.11052,0.08572 -0.1819799,0.2133 -0.19787,0.35369 -0.0159,0.1404 0.02514,0.2808 0.1131601,0.39014 0.08801,0.10867 0.2163899,0.17616 0.35471,0.18629 0.1376499,0.0108 0.2739799,-0.03712 0.3772199,-0.13162 l 1.31956,-1.11304 v 5.86152 h -5.90757 L 2.6797353,6.13575 c 0.13963,-0.22004 0.09661,-0.51163 -0.10059,-0.6797 -0.19722,-0.16875 -0.4864,-0.15997 -0.67369,0.01957 L 0.11663625,7.66993 c -0.155515,0.1917 -0.155515,0.46843 0,0.66013 L 1.9054553,10.5244 c 0.18199,0.2065 0.49169,0.2301 0.70147,0.0526 0.20978,-0.1768 0.24617,-0.4914 0.0814,-0.71276 l -1.09986,-1.34591 h 5.9075699 v 5.86147 l -1.3195699,-1.113 c -0.2170501,-0.1681 -0.52545,-0.1316 -0.6988201,0.0824 -0.1740399,0.2146 -0.15089,0.5298 0.05162,0.7161 l 2.15136,1.8164 v -7e-4 c 0.18794,0.1587 0.4592601,0.1587 0.6472001,0 l 2.1513297,-1.8157 c 0.2025,-0.1863 0.2257,-0.5015 0.0517,-0.7161 -0.1734,-0.214 -0.4818,-0.2504 -0.6988997,-0.0824 l -1.31954,1.1131 V 8.51835 h 5.9075397 l -1.0912,1.3459 c -0.1059,0.10193 -0.1641,0.24505 -0.1602,0.39285 0.004,0.1485 0.0702,0.2875 0.182,0.3827 0.1119,0.0952 0.2581,0.137 0.4017,0.1154 0.1436,-0.0223 0.2713,-0.106 0.3507,-0.2308 l 1.7809,-2.19434 c 0.1549,-0.19169 0.1549,-0.46842 0,-0.66012 z'/%3E%3C/svg%3E") no-repeat center;
+}
+
+[dir="rtl"] .tabledrag-handle::after {
+ margin-right: -1rem;
+ margin-left: 0;
+}
+
+.tabledrag-handle::after,
+.tabledrag-disabled .tabledrag-handle.tabledrag-handle.tabledrag-handle::after {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ transform: scale(1);
+}
+
+.tabledrag-handle:hover::after,
+.tabledrag-handle:focus::after,
+.draggable.drag .tabledrag-handle::after {
+ -webkit-transform: scale(1.25);
+ -moz-transform: scale(1.25);
+ -ms-transform: scale(1.25);
+ -o-transform: scale(1.25);
+ transform: scale(1.25);
+}
+
+.tabledrag-handle:focus {
+ outline: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+
+.tabledrag-handle:focus::before {
+ display: block;
+ width: 2rem; /* Same as height. */
+ height: 2rem; /* Hande svg height + its vertical padding */
+ margin: 0 -0.5rem -2rem; /* Bottom: handle height as negative value. */
+ content: "";
+ border-radius: 2px;
+ outline: 2px dotted transparent;
+ -webkit-box-shadow: 0 0 0 3px #26a769;
+ box-shadow: 0 0 0 3px #26a769;
+}
+
+/* Disabled tabledrag handle. */
+
+.tabledrag-disabled .tabledrag-handle {
+ cursor: default;
+ opacity: 0.4;
+}
+
+.tabledrag-disabled .tabledrag-handle.tabledrag-handle::before {
+ content: normal;
+}
+
+/**
+ * Enhancements for touch-capable screens.
+ */
+
+/**
+ * Increase handle size.
+ */
+
+.touchevents .tabledrag-handle::after {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+}
+
+.touchevents .draggable .menu-item__link {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+/**
+ * Wrapper of the toggle weight button (styled as a link).
+ */
+
+.tabledrag-toggle-weight-wrapper {
+ text-align: right; /* LTR */
+}
+
+[dir="rtl"] .tabledrag-toggle-weight-wrapper {
+ text-align: left;
+}
+
+/**
+ * Keep crowded tabledrag cells vertically centered.
+ */
+
+.tabledrag-cell {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+/**
+ * If the first table cell is empty (like in a multiple field widget table),
+ * we can save some space for the following cells.
+ * If it isn't empty (Field UI table, taxonomy term overview page), this CSS
+ * class won't be added.
+ */
+
+.tabledrag-cell--only-drag {
+ width: 1px; /* This forces this cell to use the smallest possible width. */
+ padding-right: 0; /* LTR */
+}
+
+[dir="rtl"] .tabledrag-cell--only-drag {
+ padding-right: 1rem;
+ padding-left: 0;
+}
+
+.tabledrag-cell-content {
+ display: table;
+ height: 100%;
+}
+
+.tabledrag-cell-content > * {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.tabledrag-cell-content__item {
+ padding-right: 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .tabledrag-cell-content__item {
+ padding-right: 0;
+ padding-left: 0.5rem;
+}
+
+.tabledrag-cell-content__item:empty {
+ display: none;
+}
+
+.tabledrag-cell-content .indentation,
+[dir="rtl"] .tabledrag-cell-content .indentation {
+ float: none;
+ overflow: hidden;
+ height: 100%;
+}
+
+.tabledrag-cell-content .tree {
+ min-height: 100%; /* Using simply 'height: 100%' would make IE11 rendering ugly. */
+}
+
+/**
+ * Safari (at least version 13.0) thinks that if we define a width or height for
+ * and SVG, then we refer to the elements total size inside the SVG.
+ * We only want to inherit the height of the parent element.
+ */
+
+/* stylelint-disable-next-line unit-whitelist */
+
+@media not all and (min-resolution: 0.001dpcm) {
+ @media {
+ .tabledrag-cell-content .tree {
+ overflow: visible;
+ min-height: 0;
+ }
+ }
+}
+
+.tabledrag-cell-content .tabledrag-handle::after {
+ vertical-align: middle;
+}
+
+/**
+ * Indentation.
+ */
+
+.indentation {
+ position: relative;
+ left: -0.25rem; /* LTR */
+ float: left; /* LTR */
+ width: 1.5625rem; /* 25px */
+ height: 1.5625rem; /* 25px */
+ background: none !important;
+ line-height: 0;
+}
+
+[dir="rtl"] .indentation {
+ right: -0.25rem;
+ left: auto;
+ float: right;
+}
+
+/**
+ * Tree is the visual representation for the simultaneously moved draggable
+ * rows.
+ *
+ * These rules are styleing the inline SVG that is placed inside the .indetation
+ * element.
+ */
+
+.tree {
+ width: 1.5625rem; /* 25px */
+ height: 1.5625rem; /* 25px */
+}
+
+.tree__item {
+ display: none;
+}
+
+/* LTR tree child. */
+
+.tree-child path:not(.tree__item-child-ltr) {
+ display: none;
+}
+
+.tree-child path.tree__item-child-ltr {
+ display: block;
+}
+
+/* RTL tree child. */
+
+[dir="rtl"] .tree-child path:not(.tree__item-child-rtl) {
+ display: none;
+}
+
+[dir="rtl"] .tree-child path.tree__item-child-rtl {
+ display: block;
+}
+
+/* Last LTR tree child. */
+
+.tree-child-last path:not(.tree__item-child-last-ltr) {
+ display: none;
+}
+
+.tree-child-last path.tree__item-child-last-ltr {
+ display: block;
+}
+
+/* Last RTL tree child. */
+
+[dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {
+ display: none;
+}
+
+[dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {
+ display: block;
+}
+
+/* Horizontal line. */
+
+.tree-child-horizontal path:not(.tree__item-horizontal) {
+ display: none;
+}
+
+.tree-child-horizontal path.tree__item-horizontal {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/tabledrag.pcss.css b/core/themes/claro/css/src/components/tabledrag.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..8cc8075863068e54a5c13e970423b615fb589b17
--- /dev/null
+++ b/core/themes/claro/css/src/components/tabledrag.pcss.css
@@ -0,0 +1,326 @@
+/**
+ * @file
+ * Replacement styles for table drag.
+ *
+ * Replaces both of tabledrag.module.css (from core/stable) and tabledrag.css
+ * (from Classy theme).
+ *
+ * @see tabledrag.js
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --table-row--dragging-bg-color: #fe7;
+ --table-row--last-dragged-bg-color: #ffb;
+}
+
+body.drag {
+ cursor: move;
+}
+/* The block region's title row in table. */
+.region-title {
+ font-weight: bold;
+}
+/* Empty region message row in table. */
+.region-message {
+ color: var(--color-oldsilver);
+}
+/* If the region is populated, we shouldn't display the empty message. */
+.region-message.region-populated {
+ display: none;
+}
+/**
+ * Remove border-bottom from abbr element. Class is duplicated in the selector
+ * to increase weight to be able to win normalize.css selectors.
+ */
+.tabledrag-changed.tabledrag-changed {
+ border-bottom: none;
+}
+/* Dont display the abbreviation of 'add-new' table rows. */
+.add-new .tabledrag-changed {
+ display: none;
+}
+
+.draggable .tabledrag-changed {
+ position: relative;
+ left: calc(var(--space-xs) * -1); /* LTR */
+}
+[dir="rtl"] .draggable .tabledrag-changed {
+ right: calc(var(--space-xs) * -1); /* LTR */
+ left: auto;
+}
+.tabledrag-cell--only-drag .tabledrag-changed {
+ width: var(--space-l);
+ min-width: var(--space-l);
+}
+
+/**
+ * Draggable row state colors.
+ */
+.draggable.drag,
+.draggable.drag:focus {
+ background-color: var(--table-row--dragging-bg-color);
+}
+.draggable.drag-previous {
+ background-color: var(--table-row--last-dragged-bg-color);
+}
+
+/**
+ * Reduce the spacing of draggable table cells.
+ */
+.draggable-table td:first-child ~ td,
+.draggable-table th:first-child ~ th {
+ padding-left: 0 /* LTR */;
+}
+[dir="rtl"] .draggable-table td:first-child ~ td,
+[dir="rtl"] .draggable-table th:first-child ~ th {
+ padding-right: 0;
+ padding-left: var(--space-m);
+}
+
+/* Auto width for weight selects and number inputs. */
+.draggable td .form-element--type-select[name$="][_weight]"], /* Multiple field */
+.draggable td .term-weight, /* Taxonomy term list */
+.draggable td .field-weight /* Field UI table */ {
+ width: auto;
+}
+
+/**
+ * Handle styles.
+ */
+.tabledrag-handle {
+ position: relative;
+ z-index: 1;
+ overflow: visible;
+ cursor: move;
+ text-align: center;
+ vertical-align: text-top;
+}
+
+.tabledrag-handle::after {
+ display: inline-block;
+ width: var(--tabledrag-handle-icon-size);
+ height: var(--tabledrag-handle-icon-size);
+ margin-left: calc(var(--space-m) * -1); /* LTR */
+ padding: var(--space-xs) var(--space-m);
+ content: "";
+ transition: transform 0.1s ease-in-out 0s;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m 14.102955,5.47562 c -0.1819,-0.20654 -0.4917,-0.23016 -0.7014,-0.05265 -0.2098,0.17684 -0.2462,0.4914 -0.0814,0.71278 l 1.0998,1.34591 H 8.5124153 V 1.62014 l 1.31954,1.11304 c 0.1033,0.0945 0.2395997,0.14242 0.3771997,0.13162 0.1383,-0.01013 0.2667,-0.07762 0.3548,-0.18629 0.088,-0.10935 0.129,-0.24974 0.1131,-0.39014 -0.0159,-0.14039 -0.0873,-0.26796 -0.1979,-0.35369 L 8.3278353,0.118965 c -0.1879501,-0.1586199 -0.4592601,-0.1586199 -0.6472101,0 l -2.15136,1.815715 c -0.11052,0.08572 -0.1819799,0.2133 -0.19787,0.35369 -0.0159,0.1404 0.02514,0.2808 0.1131601,0.39014 0.08801,0.10867 0.2163899,0.17616 0.35471,0.18629 0.1376499,0.0108 0.2739799,-0.03712 0.3772199,-0.13162 l 1.31956,-1.11304 v 5.86152 h -5.90757 L 2.6797353,6.13575 c 0.13963,-0.22004 0.09661,-0.51163 -0.10059,-0.6797 -0.19722,-0.16875 -0.4864,-0.15997 -0.67369,0.01957 L 0.11663625,7.66993 c -0.155515,0.1917 -0.155515,0.46843 0,0.66013 L 1.9054553,10.5244 c 0.18199,0.2065 0.49169,0.2301 0.70147,0.0526 0.20978,-0.1768 0.24617,-0.4914 0.0814,-0.71276 l -1.09986,-1.34591 h 5.9075699 v 5.86147 l -1.3195699,-1.113 c -0.2170501,-0.1681 -0.52545,-0.1316 -0.6988201,0.0824 -0.1740399,0.2146 -0.15089,0.5298 0.05162,0.7161 l 2.15136,1.8164 v -7e-4 c 0.18794,0.1587 0.4592601,0.1587 0.6472001,0 l 2.1513297,-1.8157 c 0.2025,-0.1863 0.2257,-0.5015 0.0517,-0.7161 -0.1734,-0.214 -0.4818,-0.2504 -0.6988997,-0.0824 l -1.31954,1.1131 V 8.51835 h 5.9075397 l -1.0912,1.3459 c -0.1059,0.10193 -0.1641,0.24505 -0.1602,0.39285 0.004,0.1485 0.0702,0.2875 0.182,0.3827 0.1119,0.0952 0.2581,0.137 0.4017,0.1154 0.1436,-0.0223 0.2713,-0.106 0.3507,-0.2308 l 1.7809,-2.19434 c 0.1549,-0.19169 0.1549,-0.46842 0,-0.66012 z'/%3E%3C/svg%3E") no-repeat center;
+}
+[dir="rtl"] .tabledrag-handle::after {
+ margin-right: calc(var(--space-m) * -1);
+ margin-left: 0;
+}
+
+.tabledrag-handle::after,
+.tabledrag-disabled .tabledrag-handle.tabledrag-handle.tabledrag-handle::after {
+ transform: scale(1);
+}
+
+.tabledrag-handle:hover::after,
+.tabledrag-handle:focus::after,
+.draggable.drag .tabledrag-handle::after {
+ transform: scale(1.25);
+}
+
+.tabledrag-handle:focus {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.tabledrag-handle:focus::before {
+ display: block;
+ width: calc(var(--space-m) + (var(--space-xs) * 2)); /* Same as height. */
+ height: calc(var(--space-m) + (var(--space-xs) * 2)); /* Hande svg height + its vertical padding */
+ margin: 0 calc(var(--space-xs) * -1) calc((var(--space-m) + (var(--space-xs) * 2)) * -1); /* Bottom: handle height as negative value. */
+ content: "";
+ border-radius: var(--base-border-radius);
+ outline: var(--outline-size) dotted transparent;
+ box-shadow: 0 0 0 var(--focus-border-size) var(--color-focus);
+}
+
+/* Disabled tabledrag handle. */
+.tabledrag-disabled .tabledrag-handle {
+ cursor: default;
+ opacity: 0.4;
+}
+
+.tabledrag-disabled .tabledrag-handle.tabledrag-handle::before {
+ content: normal;
+}
+
+/**
+ * Enhancements for touch-capable screens.
+ */
+
+/**
+ * Increase handle size.
+ */
+.touchevents .tabledrag-handle::after {
+ padding-top: var(--space-s);
+ padding-bottom: var(--space-s);
+}
+
+.touchevents .draggable .menu-item__link {
+ padding-top: var(--space-xs);
+ padding-bottom: var(--space-xs);
+}
+
+/**
+ * Wrapper of the toggle weight button (styled as a link).
+ */
+.tabledrag-toggle-weight-wrapper {
+ text-align: right; /* LTR */
+}
+[dir="rtl"] .tabledrag-toggle-weight-wrapper {
+ text-align: left;
+}
+
+/**
+ * Keep crowded tabledrag cells vertically centered.
+ */
+.tabledrag-cell {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+/**
+ * If the first table cell is empty (like in a multiple field widget table),
+ * we can save some space for the following cells.
+ * If it isn't empty (Field UI table, taxonomy term overview page), this CSS
+ * class won't be added.
+ */
+.tabledrag-cell--only-drag {
+ width: 1px; /* This forces this cell to use the smallest possible width. */
+ padding-right: 0; /* LTR */
+}
+[dir="rtl"] .tabledrag-cell--only-drag {
+ padding-right: var(--space-m);
+ padding-left: 0;
+}
+
+.tabledrag-cell-content {
+ display: table;
+ height: 100%;
+}
+
+.tabledrag-cell-content > * {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.tabledrag-cell-content__item {
+ padding-right: var(--space-xs); /* LTR */
+}
+[dir="rtl"] .tabledrag-cell-content__item {
+ padding-right: 0;
+ padding-left: var(--space-xs);
+}
+.tabledrag-cell-content__item:empty {
+ display: none;
+}
+
+.tabledrag-cell-content .indentation,
+[dir="rtl"] .tabledrag-cell-content .indentation {
+ float: none;
+ overflow: hidden;
+ height: 100%;
+}
+
+.tabledrag-cell-content .tree {
+ min-height: 100%; /* Using simply 'height: 100%' would make IE11 rendering ugly. */
+}
+
+/**
+ * Safari (at least version 13.0) thinks that if we define a width or height for
+ * and SVG, then we refer to the elements total size inside the SVG.
+ * We only want to inherit the height of the parent element.
+ */
+/* stylelint-disable-next-line unit-whitelist */
+@media not all and (min-resolution: 0.001dpcm) {
+ @media {
+ .tabledrag-cell-content .tree {
+ overflow: visible;
+ min-height: 0;
+ }
+ }
+}
+
+.tabledrag-cell-content .tabledrag-handle::after {
+ vertical-align: middle;
+}
+
+/**
+ * Indentation.
+ */
+.indentation {
+ position: relative;
+ left: calc(var(--space-xs) * -0.5); /* LTR */
+ float: left; /* LTR */
+ width: calc(25rem / 16); /* 25px */
+ height: calc(25rem / 16); /* 25px */
+ background: none !important;
+ line-height: 0;
+}
+[dir="rtl"] .indentation {
+ right: calc(var(--space-xs) * -0.5);
+ left: auto;
+ float: right;
+}
+
+/**
+ * Tree is the visual representation for the simultaneously moved draggable
+ * rows.
+ *
+ * These rules are styleing the inline SVG that is placed inside the .indetation
+ * element.
+ */
+.tree {
+ width: calc(25rem / 16); /* 25px */
+ height: calc(25rem / 16); /* 25px */
+}
+
+.tree__item {
+ display: none;
+}
+
+/* LTR tree child. */
+.tree-child path:not(.tree__item-child-ltr) {
+ display: none;
+}
+.tree-child path.tree__item-child-ltr {
+ display: block;
+}
+
+/* RTL tree child. */
+[dir="rtl"] .tree-child path:not(.tree__item-child-rtl) {
+ display: none;
+}
+[dir="rtl"] .tree-child path.tree__item-child-rtl {
+ display: block;
+}
+
+/* Last LTR tree child. */
+.tree-child-last path:not(.tree__item-child-last-ltr) {
+ display: none;
+}
+.tree-child-last path.tree__item-child-last-ltr {
+ display: block;
+}
+
+/* Last RTL tree child. */
+[dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {
+ display: none;
+}
+[dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {
+ display: block;
+}
+
+/* Horizontal line. */
+.tree-child-horizontal path:not(.tree__item-horizontal) {
+ display: none;
+}
+.tree-child-horizontal path.tree__item-horizontal {
+ display: block;
+}
diff --git a/core/themes/claro/css/src/components/tables.css b/core/themes/claro/css/src/components/tables.css
new file mode 100644
index 0000000000000000000000000000000000000000..af05257c260ef9cad7abac4cde3a3a6adbfe582a
--- /dev/null
+++ b/core/themes/claro/css/src/components/tables.css
@@ -0,0 +1,339 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for Tables.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+table {
+ width: 100%;
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.sticky-header {
+ min-width: 0;
+}
+
+caption {
+ text-align: left; /* LTR */
+}
+
+[dir="rtl"] caption {
+ text-align: right;
+}
+
+th {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 3rem;
+ padding: 0.5rem 1rem;
+ text-align: left; /* LTR */
+ color: #222330;
+ background: #f3f4f9;
+ line-height: 1.25rem; /* 20px */
+}
+
+[dir="rtl"] th {
+ text-align: right;
+}
+
+/**
+ * Table sort.
+ */
+
+/* Table head cell containing sort link. */
+
+.sortable-heading {
+ padding: 0 1rem;
+}
+
+/* The actual sort link. */
+
+.sortable-heading > a {
+ display: block;
+ padding: 0.5rem 1.5rem 0.5rem 0; /* LTR */
+ text-decoration: none;
+ color: inherit;
+}
+
+[dir="rtl"] .sortable-heading > a {
+ padding-right: 0;
+ padding-left: 1.5rem;
+}
+
+.sortable-heading > a::before {
+ position: absolute;
+ z-index: 0;
+ top: 0;
+ right: 1rem;
+ bottom: 0;
+ left: 1rem;
+ display: block;
+ content: "";
+ border-bottom: 0.125rem solid transparent;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen, /* Only IE 11 */
+.sortable-heading > a::before {
+ top: auto;
+ height: 100%;
+}
+
+.sortable-heading > a::after {
+ position: absolute;
+ top: 50%;
+ right: 1rem;
+ width: 0.875rem;
+ height: 1rem;
+ margin-top: -0.5rem;
+ content: "";
+ opacity: 0.5;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1.75,0.25v1.5h10.5v-1.5z m0,3v1.5h7.5v-1.5z m0,3v1.5h4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E") no-repeat 50% 50%;
+ background-size: contain;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen, /* Only IE 11 */
+.sortable-heading > a::after {
+ position: static;
+ float: right;
+ margin-top: 0.125rem; /* 2px */
+ margin-right: -1.5rem; /* -24px */
+}
+
+[dir="rtl"] .sortable-heading > a::after {
+ right: auto;
+ left: 1rem;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m12.25,0.25v1.5H1.75v-1.5z m0,3v1.5h-7.5v-1.5z m0,3v1.5h-4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E");
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen, /* Only IE 11 */
+[dir="rtl"] .sortable-heading > a::after {
+ float: left;
+ margin-right: 0;
+ margin-left: -1.5rem; /* -24px */
+}
+
+/* Sortable cell's link focus/hover state. */
+
+.sortable-heading > a:focus,
+.sortable-heading > a:hover {
+ text-decoration: none;
+}
+
+.sortable-heading > a:focus::before,
+.sortable-heading > a:hover::before {
+ border-color: inherit;
+}
+
+.sortable-heading > a:focus::after,
+.sortable-heading > a:hover::after {
+ opacity: 1;
+}
+
+/* Sortable cell's active state. */
+
+.sortable-heading.is-active > a {
+ color: #003cc5;
+}
+
+.sortable-heading.is-active > a::before {
+ border-bottom: 0.1875rem solid #003cc5;
+}
+
+.sortable-heading.is-active > a::after {
+ content: none;
+}
+
+tr {
+ border-bottom: 0.0625rem solid #d4d4d8;
+}
+
+tr,
+.draggable-table.tabledrag-disabled tr {
+ color: #222330;
+ background: #fff;
+}
+
+thead tr {
+ border: 0;
+}
+
+tr:hover,
+tr:focus {
+ color: #222330;
+ background: #f0f5fd;
+}
+
+tr.color-warning:hover,
+tr.color-warning:focus {
+ color: #222330;
+ background: #fdf8ed;
+}
+
+tr.color-error:hover,
+tr.color-error:focus {
+ color: #222330;
+ background: #fcf4f2;
+}
+
+td {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 4rem;
+ padding: 0.5rem 1rem;
+ text-align: left; /* LTR */
+}
+
+[dir="rtl"] td {
+ text-align: right;
+}
+
+td .item-list ul {
+ margin: 0;
+}
+
+/* This is required to win over specificity of [dir="rtl"] .item-list ul */
+
+[dir="rtl"] td .item-list ul {
+ margin: 0;
+}
+
+td.is-active {
+ background: none;
+}
+
+/**
+ * Target every .form-element input that parent is a form-item of a table cell.
+ * This ignores the filter format select of the textarea editor.
+ */
+
+td > .form-item > .form-element,
+td > .ajax-new-content > .form-item > .form-element {
+ width: 100%;
+}
+
+/* Win over table-file-multiple-widget. */
+
+th.is-disabled.is-disabled {
+ color: #82828c;
+}
+
+/* Force browsers to calculate the width of a 'select all' <th> element. */
+
+th.select-all {
+ width: 1px;
+}
+
+/**
+ * Captions.
+ */
+
+.caption {
+ margin-bottom: 1.25rem; /* 20px */
+}
+
+tfoot {
+ font-weight: bold;
+}
+
+tfoot tr:last-child {
+ border-bottom: 0;
+}
+
+tfoot tr:first-child td {
+ border-top: 0.0625rem solid #8e929c;
+}
+
+/**
+ * Responsive table cells.
+ */
+
+th.priority-low,
+th.priority-medium,
+td.priority-low,
+td.priority-medium {
+ display: none;
+}
+
+@media screen and (min-width: 38em) {
+ th.priority-medium,
+ td.priority-medium {
+ display: table-cell;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ th.priority-low,
+ td.priority-low {
+ display: table-cell;
+ }
+}
+
+.tabledrag-toggle-weight-wrapper {
+ margin-top: 1.5rem;
+ line-height: 1.75rem;
+}
+
+.tabledrag-toggle-weight-wrapper + table,
+.tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {
+ margin-top: 0;
+}
diff --git a/core/themes/claro/css/src/components/tables.pcss.css b/core/themes/claro/css/src/components/tables.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..b0933e68904656b38a0a6f0b85d7a544da8c7add
--- /dev/null
+++ b/core/themes/claro/css/src/components/tables.pcss.css
@@ -0,0 +1,244 @@
+/**
+ * @file
+ * Claro styles for Tables.
+ */
+
+@import "../base/variables.pcss.css";
+
+table {
+ width: 100%;
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
+}
+
+.sticky-header {
+ min-width: 0;
+}
+
+caption {
+ text-align: left; /* LTR */
+}
+[dir="rtl"] caption {
+ text-align: right;
+}
+th {
+ position: relative;
+ box-sizing: border-box;
+ height: var(--space-xl);
+ padding: var(--space-xs) var(--space-m);
+ text-align: left; /* LTR */
+ color: var(--color-text);
+ background: var(--color-whitesmoke);
+ line-height: 1.25rem; /* 20px */
+}
+[dir="rtl"] th {
+ text-align: right;
+}
+
+/**
+ * Table sort.
+ */
+/* Table head cell containing sort link. */
+.sortable-heading {
+ padding: 0 var(--space-m);
+}
+/* The actual sort link. */
+.sortable-heading > a {
+ display: block;
+ padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
+ text-decoration: none;
+ color: inherit;
+}
+[dir="rtl"] .sortable-heading > a {
+ padding-right: 0;
+ padding-left: 1.5rem;
+}
+.sortable-heading > a::before {
+ position: absolute;
+ z-index: 0;
+ top: 0;
+ right: 1rem;
+ bottom: 0;
+ left: 1rem;
+ display: block;
+ content: "";
+ border-bottom: 0.125rem solid transparent;
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen, /* Only IE 11 */
+.sortable-heading > a::before {
+ top: auto;
+ height: 100%;
+}
+.sortable-heading > a::after {
+ position: absolute;
+ top: 50%;
+ right: 1rem;
+ width: 0.875rem;
+ height: 1rem;
+ margin-top: -0.5rem;
+ content: "";
+ opacity: 0.5;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1.75,0.25v1.5h10.5v-1.5z m0,3v1.5h7.5v-1.5z m0,3v1.5h4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E") no-repeat 50% 50%;
+ background-size: contain;
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen, /* Only IE 11 */
+.sortable-heading > a::after {
+ position: static;
+ float: right;
+ margin-top: 0.125rem; /* 2px */
+ margin-right: -1.5rem; /* -24px */
+}
+[dir="rtl"] .sortable-heading > a::after {
+ right: auto;
+ left: 1rem;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m12.25,0.25v1.5H1.75v-1.5z m0,3v1.5h-7.5v-1.5z m0,3v1.5h-4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E");
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen, /* Only IE 11 */
+[dir="rtl"] .sortable-heading > a::after {
+ float: left;
+ margin-right: 0;
+ margin-left: -1.5rem; /* -24px */
+}
+/* Sortable cell's link focus/hover state. */
+.sortable-heading > a:focus,
+.sortable-heading > a:hover {
+ text-decoration: none;
+}
+.sortable-heading > a:focus::before,
+.sortable-heading > a:hover::before {
+ border-color: inherit;
+}
+.sortable-heading > a:focus::after,
+.sortable-heading > a:hover::after {
+ opacity: 1;
+}
+/* Sortable cell's active state. */
+.sortable-heading.is-active > a {
+ color: var(--color-absolutezero);
+}
+.sortable-heading.is-active > a::before {
+ border-bottom: 0.1875rem solid var(--color-absolutezero);
+}
+.sortable-heading.is-active > a::after {
+ content: none;
+}
+
+tr {
+ border-bottom: 0.0625rem solid var(--color-lightgray);
+}
+tr,
+.draggable-table.tabledrag-disabled tr {
+ color: var(--color-text);
+ background: var(--color-white);
+}
+thead tr {
+ border: 0;
+}
+tr:hover,
+tr:focus {
+ color: var(--color-text);
+ background: var(--color-bgblue-hover);
+}
+tr.color-warning:hover,
+tr.color-warning:focus {
+ color: var(--color-text);
+ background: #fdf8ed;
+}
+tr.color-error:hover,
+tr.color-error:focus {
+ color: var(--color-text);
+ background: #fcf4f2;
+}
+
+td {
+ box-sizing: border-box;
+ height: 4rem;
+ padding: var(--space-xs) var(--space-m);
+ text-align: left; /* LTR */
+}
+[dir="rtl"] td {
+ text-align: right;
+}
+
+td .item-list ul {
+ margin: 0;
+}
+/* This is required to win over specificity of [dir="rtl"] .item-list ul */
+[dir="rtl"] td .item-list ul {
+ margin: 0;
+}
+td.is-active {
+ background: none;
+}
+
+/**
+ * Target every .form-element input that parent is a form-item of a table cell.
+ * This ignores the filter format select of the textarea editor.
+ */
+td > .form-item > .form-element,
+td > .ajax-new-content > .form-item > .form-element {
+ width: 100%;
+}
+
+/* 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. */
+th.select-all {
+ width: 1px;
+}
+
+/**
+ * Captions.
+ */
+.caption {
+ margin-bottom: 1.25rem; /* 20px */
+}
+
+tfoot {
+ font-weight: bold;
+}
+tfoot tr:last-child {
+ border-bottom: 0;
+}
+tfoot tr:first-child td {
+ border-top: 0.0625rem solid var(--color-grayblue);
+}
+
+/**
+ * Responsive table cells.
+ */
+th.priority-low,
+th.priority-medium,
+td.priority-low,
+td.priority-medium {
+ display: none;
+}
+
+@media screen and (min-width: 38em) {
+ th.priority-medium,
+ td.priority-medium {
+ display: table-cell;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ th.priority-low,
+ td.priority-low {
+ 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/core/themes/claro/css/src/components/tableselect.css b/core/themes/claro/css/src/components/tableselect.css
new file mode 100644
index 0000000000000000000000000000000000000000..0f6bf1e402544a59848922abccf62fa62acafb06
--- /dev/null
+++ b/core/themes/claro/css/src/components/tableselect.css
@@ -0,0 +1,72 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Table select — replaces implementation of Classy theme.
+ *
+ * @see tableselect.js
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+td.checkbox,
+th.checkbox {
+ text-align: center;
+}
+
+[dir="rtl"] td.checkbox,
+[dir="rtl"] th.checkbox {
+ /* This is required to win over specificity of [dir="rtl"] td */
+ text-align: center;
+}
+
+tr.selected td {
+ background-color: #e6ecf8;
+}
diff --git a/core/themes/claro/css/src/components/tableselect.pcss.css b/core/themes/claro/css/src/components/tableselect.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..efb4ea1392d5b60e62ec1d7267295e00958109b8
--- /dev/null
+++ b/core/themes/claro/css/src/components/tableselect.pcss.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Table select — replaces implementation of Classy theme.
+ *
+ * @see tableselect.js
+ */
+
+@import "../base/variables.pcss.css";
+
+td.checkbox,
+th.checkbox {
+ text-align: center;
+}
+[dir="rtl"] td.checkbox,
+[dir="rtl"] th.checkbox {
+ /* This is required to win over specificity of [dir="rtl"] td */
+ text-align: center;
+}
+
+tr.selected td {
+ background-color: var(--color-bgblue-active);
+}
diff --git a/core/themes/claro/css/src/components/tablesort-indicator.css b/core/themes/claro/css/src/components/tablesort-indicator.css
new file mode 100644
index 0000000000000000000000000000000000000000..5a365560f4c7a0f9f63ecbbd9786d412225cffd7
--- /dev/null
+++ b/core/themes/claro/css/src/components/tablesort-indicator.css
@@ -0,0 +1,60 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Tablesort indicator styles.
+ */
+
+.tablesort {
+ position: absolute;
+ top: 50%;
+ right: 1rem;
+ width: 0.875rem; /* 14px */
+ height: 1rem; /* 16px */
+ margin-top: -0.5rem; /* -8px */
+ opacity: 0.5;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1.75,0.25v1.5h10.5v-1.5z m0,3v1.5h7.5v-1.5z m0,3v1.5h4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E") no-repeat 0 50%;
+ background-size: auto;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen, /* Only IE 11 */
+.tablesort {
+ position: static;
+ float: right;
+ margin-top: 0.125rem; /* 2px */
+ margin-right: -1.5rem; /* -24px */
+}
+
+[dir="rtl"] .tablesort {
+ right: auto;
+ left: 1rem; /* 16px */
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m12.25,0.25v1.5H1.75v-1.5z m0,3v1.5h-7.5v-1.5z m0,3v1.5h-4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E");
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen, /* Only IE 11 */
+[dir="rtl"] .tablesort {
+ float: left;
+ margin-right: 0;
+ margin-left: -1.5rem; /* -24px */
+}
+
+.tablesort--asc,
+[dir="rtl"] .tablesort--asc {
+ opacity: 1;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3E%3Cpath d='M 5 0.43945312 L 0.71875 4.71875 L 1.78125 5.78125 L 4.25 3.3125 L 4.25 11.25 L 5.75 11.25 L 5.75 3.3125 L 8.21875 5.78125 L 9.28125 4.71875 L 5 0.43945312 z' fill='%23004adc'/%3E%3C/svg%3E");
+}
+
+.tablesort--desc,
+[dir="rtl"] .tablesort--desc {
+ opacity: 1;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3E%3Cpath d='M 4.25 0.75 L 4.25 8.6875 L 1.78125 6.21875 L 0.71875 7.28125 L 5 11.560547 L 9.28125 7.28125 L 8.21875 6.21875 L 5.75 8.6875 L 5.75 0.75 L 4.25 0.75 z' fill='%23004adc'/%3E%3C/svg%3E");
+}
diff --git a/core/themes/claro/css/src/components/tablesort-indicator.pcss.css b/core/themes/claro/css/src/components/tablesort-indicator.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..57e660c792a7d5de17e6b2b6cd81cf20cd1bd99f
--- /dev/null
+++ b/core/themes/claro/css/src/components/tablesort-indicator.pcss.css
@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Tablesort indicator styles.
+ */
+
+.tablesort {
+ position: absolute;
+ top: 50%;
+ right: 1rem;
+ width: 0.875rem; /* 14px */
+ height: 1rem; /* 16px */
+ margin-top: -0.5rem; /* -8px */
+ opacity: 0.5;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1.75,0.25v1.5h10.5v-1.5z m0,3v1.5h7.5v-1.5z m0,3v1.5h4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E") no-repeat 0 50%;
+ background-size: auto;
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen, /* Only IE 11 */
+.tablesort {
+ position: static;
+ float: right;
+ margin-top: 0.125rem; /* 2px */
+ margin-right: -1.5rem; /* -24px */
+}
+[dir="rtl"] .tablesort {
+ right: auto;
+ left: 1rem; /* 16px */
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m12.25,0.25v1.5H1.75v-1.5z m0,3v1.5h-7.5v-1.5z m0,3v1.5h-4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E");
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen, /* Only IE 11 */
+[dir="rtl"] .tablesort {
+ float: left;
+ margin-right: 0;
+ margin-left: -1.5rem; /* -24px */
+}
+.tablesort--asc,
+[dir="rtl"] .tablesort--asc {
+ opacity: 1;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3E%3Cpath d='M 5 0.43945312 L 0.71875 4.71875 L 1.78125 5.78125 L 4.25 3.3125 L 4.25 11.25 L 5.75 11.25 L 5.75 3.3125 L 8.21875 5.78125 L 9.28125 4.71875 L 5 0.43945312 z' fill='%23004adc'/%3E%3C/svg%3E");
+}
+.tablesort--desc,
+[dir="rtl"] .tablesort--desc {
+ opacity: 1;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3E%3Cpath d='M 4.25 0.75 L 4.25 8.6875 L 1.78125 6.21875 L 0.71875 7.28125 L 5 11.560547 L 9.28125 7.28125 L 8.21875 6.21875 L 5.75 8.6875 L 5.75 0.75 L 4.25 0.75 z' fill='%23004adc'/%3E%3C/svg%3E");
+}
diff --git a/core/themes/claro/css/src/components/tabs.css b/core/themes/claro/css/src/components/tabs.css
new file mode 100644
index 0000000000000000000000000000000000000000..ee79f3871984e47732e8d82c928b258ae8464974
--- /dev/null
+++ b/core/themes/claro/css/src/components/tabs.css
@@ -0,0 +1,439 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Tabs.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+:root {
+ /**
+ * Tabs.
+ */ /* 48px */
+}
+
+.tabs-wrapper {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.tabs-wrapper > nav {
+ width: 100%;
+}
+
+.tabs {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -moz-box-orient: vertical;
+ -moz-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 100%;
+ margin: 0 0 1.5rem 0;
+ border: 1px
+solid
+#d4d4d8;
+ border-radius: 2px;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+[dir="rtl"] .tabs {
+ margin: 0 0 1.5rem 0;
+}
+
+.tabs__tab {
+ position: relative;
+ border-bottom: 1px
+solid
+#d4d4d8;
+ background-color: #fafbfd;
+ font-size: 0.889rem;
+ font-weight: bold;
+}
+
+.tabs__tab:last-child {
+ border-bottom: 0;
+}
+
+.tabs__tab.is-active {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -moz-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.tabs__link {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ overflow: hidden;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -moz-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -moz-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ min-height: 3rem;
+ padding: 0.75rem 1.5rem;
+ text-decoration: none;
+ color: #545560;
+ line-height: 1.2rem;
+}
+
+.tabs__link:focus {
+ min-height: -webkit-calc(3rem + 2px);
+ min-height: -moz-calc(3rem + 2px);
+ min-height: calc(3rem + 2px);
+ margin: -1px;
+ padding-left: -webkit-calc(1.5rem - 2px);
+ padding-left: -moz-calc(1.5rem - 2px);
+ padding-left: calc(1.5rem - 2px); /* LTR */
+ text-decoration: none;
+ color: #545560;
+ border: 3px solid #26a769;
+ border-radius: 2px;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+[dir="rtl"] .tabs__link:focus {
+ padding-right: -webkit-calc(1.5rem - 2px);
+ padding-right: -moz-calc(1.5rem - 2px);
+ padding-right: calc(1.5rem - 2px);
+ padding-left: 1.5rem;
+}
+
+.tabs__link:hover {
+ text-decoration: none;
+ color: #222330;
+}
+
+.tabs__link.is-active {
+ z-index: 1;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -moz-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ color: #003cc5;
+}
+
+.tabs__link.is-active:focus {
+ margin: -1px 0;
+ padding-right: 1.5rem;
+ padding-left: 1.5rem;
+ border-left: none; /* LTR */
+ border-radius: 0;
+}
+
+.tabs__link:not(.is-active):focus {
+ z-index: 3;
+}
+
+[dir="rtl"] .tabs__link.is-active:focus {
+ border-right: none;
+ border-left: 3px solid #26a769;
+}
+
+.tabs__link.is-active:hover {
+ color: #222330;
+}
+
+/* Active and hover indicator. */
+
+.tabs__tab::before,
+.tabs__link::before {
+ position: absolute;
+ display: block;
+ content: "";
+}
+
+.tabs__tab.is-active::before {
+ z-index: 2;
+ top: -1px;
+ left: -1px; /* LTR */
+ width: 3px;
+ height: -webkit-calc(100% + 2px);
+ height: -moz-calc(100% + 2px);
+ height: calc(100% + 2px);
+ border-left: 3px solid #003cc5; /* LTR */
+ border-top-left-radius: 2px; /* LTR */
+}
+
+[dir="rtl"] .tabs__tab.is-active::before {
+ right: -1px;
+ left: auto;
+ border-right: 3px solid #003cc5;
+ border-left: none;
+ border-radius: 0 2px 0 2px;
+}
+
+.tabs.is-open .tabs__tab.is-active::before {
+ border-bottom-left-radius: 0; /* LTR */
+}
+
+[dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {
+ border-bottom-right-radius: 2px;
+}
+
+.tabs__tab.is-active:focus::before {
+ top: -3px;
+ height: -webkit-calc(3rem + 2px);
+ height: -moz-calc(3rem + 2px);
+ height: calc(3rem + 2px);
+}
+
+.tabs__tab:not(.is-active) {
+ display: none;
+}
+
+.tabs--secondary .tabs__tab:not(.is-active) {
+ display: block;
+}
+
+.tabs.is-open > .tabs__tab {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.tabs__trigger {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -moz-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -moz-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 3rem;
+ padding-right: 1px;
+ text-align: center;
+ border-left: 1px
+solid
+rgba(216, 217, 224, 0.8); /* LTR */
+}
+
+[dir="rtl"] .tabs__trigger {
+ border-right: 1px
+solid
+rgba(216, 217, 224, 0.8);
+ border-left: none;
+}
+
+.tabs__trigger:focus {
+ padding-right: 0;
+ border: 3px solid #26a769;
+ border-radius: 2px;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+@media screen and (min-width: 48em) {
+ .is-horizontal .tabs {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -moz-box-orient: horizontal;
+ -moz-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ width: auto;
+ margin: 0;
+ border: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ .is-horizontal .tabs--secondary {
+ overflow: hidden;
+ margin-right: -6px;
+ margin-bottom: 1rem;
+ margin-left: -6px;
+ padding: 6px 6px 0;
+ border-radius: 0;
+ }
+
+ .is-horizontal .tabs--secondary::after {
+ position: absolute;
+ bottom: 1rem;
+ left: 0;
+ display: block;
+ width: 100%;
+ content: "";
+ border-bottom: 1px solid #d4d4d8;
+ }
+
+ .is-horizontal .tabs__tab {
+ border-top: none;
+ border-bottom: none;
+ background: none;
+ font-size: 1rem;
+ }
+ .is-horizontal .tabs__tab.is-active {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 0;
+ -moz-box-ordinal-group: 1;
+ -ms-flex-order: 0;
+ order: 0;
+ background: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ .is-horizontal .tabs__tab.is-active::before {
+ content: none;
+ }
+ .is-horizontal .tabs__tab .tabs__link.is-active::before {
+ border-radius: 0;
+ }
+ .is-horizontal .tabs__trigger {
+ display: none;
+ }
+ .is-horizontal .tabs__tab {
+ display: block;
+ }
+
+ .is-horizontal .tabs__link {
+ padding-right: 2rem;
+ padding-left: 2rem;
+ border-radius: 2px 2px 0 0;
+ }
+
+ .is-horizontal .tabs__link:focus {
+ min-height: 3rem;
+ margin: 0;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ color: #222330;
+ border: none;
+ border-radius: 2px 2px 0 0;
+ outline: 2px dotted transparent;
+ -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ }
+ [dir="rtl"] .is-horizontal .tabs__link:focus {
+ border: none;
+ }
+ .is-horizontal .tabs--primary .tabs__link:focus {
+ -webkit-box-shadow: 0 0 0 2px #f3f4f9, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px #f3f4f9, 0 0 0 5px #26a769;
+ }
+
+ .is-horizontal .tabs__link:hover {
+ color: #0036b1;
+ background: #e6ecf8;
+ }
+
+ .is-horizontal .tabs__link.is-active::before {
+ top: auto;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ border-right: none;
+ border-bottom: 3px solid #003cc5;
+ border-left: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/tabs.pcss.css b/core/themes/claro/css/src/components/tabs.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e7cefb66b9fef990e41c8b0f802548a1e005a6f
--- /dev/null
+++ b/core/themes/claro/css/src/components/tabs.pcss.css
@@ -0,0 +1,269 @@
+/**
+ * Tabs.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ /**
+ * Tabs.
+ */
+ --tabs-border-radius-size: var(--base-border-radius);
+ --tabs--hover-height: 3px;
+ --tabs--focus-height: 3px;
+ --tabs--active-height: 3px;
+ --tabs-link-height: 3rem; /* 48px */
+ --tabs-base-border: 1px solid var(--color-lightgray);
+ --tabs-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ --tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);
+ --tabs--hover-bg-color: #e6ecf8;
+}
+
+.tabs-wrapper {
+ display: flex;
+}
+.tabs-wrapper > nav {
+ width: 100%;
+}
+.tabs {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin: 0 0 var(--space-l) 0;
+ border: var(--tabs-base-border);
+ border-radius: var(--tabs-border-radius-size);
+ box-shadow: var(--tabs-base-shadow);
+}
+[dir="rtl"] .tabs {
+ margin: 0 0 var(--space-l) 0;
+}
+
+.tabs__tab {
+ position: relative;
+ border-bottom: var(--tabs-base-border);
+ background-color: var(--color-whitesmoke-light);
+ font-size: var(--font-size-s);
+ font-weight: bold;
+}
+.tabs__tab:last-child {
+ border-bottom: 0;
+}
+.tabs__tab.is-active {
+ display: flex;
+ justify-content: space-between;
+ background-color: var(--color-white);
+ box-shadow: var(--tabs-base-shadow);
+}
+
+.tabs__link {
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ flex-grow: 1;
+ align-items: center;
+ box-sizing: border-box;
+ min-height: var(--tabs-link-height);
+ padding: var(--space-s) var(--space-l);
+ text-decoration: none;
+ color: var(--color-davysgrey);
+ line-height: 1.2rem;
+}
+.tabs__link:focus {
+ min-height: calc(var(--tabs-link-height) + var(--tabs--focus-height) - 1px);
+ margin: -1px;
+ padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */
+ text-decoration: none;
+ color: var(--color-davysgrey);
+ border: var(--tabs--focus-height) solid var(--color-focus);
+ border-radius: var(--tabs-border-radius-size);
+ outline: none;
+ box-shadow: none;
+}
+[dir="rtl"] .tabs__link:focus {
+ padding-right: calc(var(--space-l) - var(--tabs--focus-height) + 1px);
+ padding-left: var(--space-l);
+}
+.tabs__link:hover {
+ text-decoration: none;
+ color: var(--color-text);
+}
+.tabs__link.is-active {
+ z-index: 1;
+ flex-grow: 1;
+ color: var(--color-absolutezero);
+}
+.tabs__link.is-active:focus {
+ margin: -1px 0;
+ padding-right: var(--space-l);
+ padding-left: var(--space-l);
+ border-left: none; /* LTR */
+ border-radius: 0;
+}
+.tabs__link:not(.is-active):focus {
+ z-index: 3;
+}
+[dir="rtl"] .tabs__link.is-active:focus {
+ border-right: none;
+ border-left: var(--tabs--focus-height) solid var(--color-focus);
+}
+.tabs__link.is-active:hover {
+ color: var(--color-text);
+}
+/* Active and hover indicator. */
+.tabs__tab::before,
+.tabs__link::before {
+ position: absolute;
+ display: block;
+ content: "";
+}
+.tabs__tab.is-active::before {
+ z-index: 2;
+ top: -1px;
+ left: -1px; /* LTR */
+ width: var(--tabs--active-height);
+ height: calc(100% + 2px);
+ border-left: var(--tabs--active-height) solid var(--color-absolutezero); /* LTR */
+ border-top-left-radius: var(--tabs-border-radius-size); /* LTR */
+}
+[dir="rtl"] .tabs__tab.is-active::before {
+ right: -1px;
+ left: auto;
+ border-right: var(--tabs--focus-height) solid var(--color-absolutezero);
+ border-left: none;
+ border-radius: 0 var(--tabs-border-radius-size) 0 var(--tabs-border-radius-size);
+}
+.tabs.is-open .tabs__tab.is-active::before {
+ border-bottom-left-radius: 0; /* LTR */
+}
+[dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {
+ border-bottom-right-radius: var(--tabs-border-radius-size);
+}
+.tabs__tab.is-active:focus::before {
+ top: calc(var(--tabs--focus-height) * -1);
+ height: calc(var(--tabs-link-height) + 2px);
+}
+
+.tabs__tab:not(.is-active) {
+ display: none;
+}
+.tabs--secondary .tabs__tab:not(.is-active) {
+ display: block;
+}
+.tabs.is-open > .tabs__tab {
+ display: flex;
+}
+
+.tabs__trigger {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ width: var(--tabs-link-height);
+ padding-right: 1px;
+ text-align: center;
+ border-left: var(--tabs-trigger-border); /* LTR */
+}
+[dir="rtl"] .tabs__trigger {
+ border-right: var(--tabs-trigger-border);
+ border-left: none;
+}
+.tabs__trigger:focus {
+ padding-right: 0;
+ border: var(--tabs--focus-height) solid var(--color-focus);
+ border-radius: var(--tabs-border-radius-size);
+ box-shadow: none;
+}
+
+@media screen and (min-width: 48em) {
+ .is-horizontal .tabs {
+ flex-direction: row;
+ width: auto;
+ margin: 0;
+ border: 0;
+ box-shadow: none;
+ }
+
+ .is-horizontal .tabs--secondary {
+ overflow: hidden;
+ margin-right: calc(calc(var(--tabs--focus-height) + 3px) * -1);
+ margin-bottom: var(--space-m);
+ margin-left: calc(calc(var(--tabs--focus-height) + 3px) * -1);
+ padding: calc(var(--tabs--focus-height) + 3px) calc(var(--tabs--focus-height) + 3px) 0;
+ border-radius: 0;
+ }
+
+ .is-horizontal .tabs--secondary::after {
+ position: absolute;
+ bottom: var(--space-m);
+ left: 0;
+ display: block;
+ width: 100%;
+ content: "";
+ border-bottom: 1px solid var(--color-lightgray);
+ }
+
+ .is-horizontal .tabs__tab {
+ border-top: none;
+ border-bottom: none;
+ background: none;
+ font-size: var(--font-size-base);
+ }
+ .is-horizontal .tabs__tab.is-active {
+ order: 0;
+ background: none;
+ box-shadow: none;
+ }
+ .is-horizontal .tabs__tab.is-active::before {
+ content: none;
+ }
+ .is-horizontal .tabs__tab .tabs__link.is-active::before {
+ border-radius: 0;
+ }
+ .is-horizontal .tabs__trigger {
+ display: none;
+ }
+ .is-horizontal .tabs__tab {
+ display: block;
+ }
+
+ .is-horizontal .tabs__link {
+ padding-right: 2rem;
+ padding-left: 2rem;
+ border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
+ }
+
+ .is-horizontal .tabs__link:focus {
+ min-height: var(--tabs-link-height);
+ margin: 0;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ color: var(--color-text);
+ border: none;
+ border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
+ outline: 2px dotted transparent;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+ }
+ [dir="rtl"] .is-horizontal .tabs__link:focus {
+ border: none;
+ }
+ .is-horizontal .tabs--primary .tabs__link:focus {
+ box-shadow: 0 0 0 2px var(--color-whitesmoke), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+ }
+
+ .is-horizontal .tabs__link:hover {
+ color: var(--color-absolutezero-hover);
+ background: var(--tabs--hover-bg-color);
+ }
+
+ .is-horizontal .tabs__link.is-active::before {
+ top: auto;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: var(--tabs--active-height);
+ border-right: none;
+ border-bottom: var(--tabs--active-height) solid var(--color-absolutezero);
+ border-left: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/tour.theme.css b/core/themes/claro/css/src/components/tour.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..bb77646d9311917a9794e0adefa66dfe3a78647f
--- /dev/null
+++ b/core/themes/claro/css/src/components/tour.theme.css
@@ -0,0 +1,127 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for Tour theme.
+ */
+
+/* Default styles for the container */
+
+.joyride-tip-guide {
+ color: #fff;
+ border-radius: 5px;
+ background: #000;
+ background: rgba(0, 0, 0, 0.8);
+}
+
+/* Mobile */
+
+@media only screen and (max-width: 767px) {
+ .joyride-tip-guide {
+ border-radius: 0;
+ }
+}
+
+/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
+
+.joyride-tip-guide .joyride-nub {
+ border: solid 14px rgba(0, 0, 0, 0.8);
+}
+
+.joyride-tip-guide .joyride-nub.top {
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-left-color: transparent;
+}
+
+.joyride-tip-guide .joyride-nub.bottom {
+ border-right-color: transparent;
+ border-bottom-color: transparent;
+ border-left-color: transparent;
+}
+
+.joyride-tip-guide .joyride-nub.right {
+ border-top-color: transparent;
+ border-right-color: transparent; /* LTR */
+ border-bottom-color: transparent;
+}
+
+[dir="rtl"] .joyride-tip-guide .joyride-nub.right {
+ border-right-color: rgba(0, 0, 0, 0.8);
+ border-left-color: transparent;
+}
+
+.joyride-tip-guide .joyride-nub.left {
+ border-top-color: transparent;
+ border-bottom-color: transparent;
+ border-left-color: transparent; /* LTR */
+}
+
+[dir="rtl"] .joyride-tip-guide .joyride-nub.left {
+ border-right-color: transparent;
+ border-left-color: rgba(0, 0, 0, 0.8);
+}
+
+.joyride-tip-guide .joyride-nub.top-right {
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-left-color: transparent;
+}
+
+/* Typography */
+
+.joyride-tip-guide h2 {
+ color: #fff;
+}
+
+.joyride-tip-guide p {
+ line-height: 1.385em;
+}
+
+.joyride-tip-guide a {
+ color: #fff;
+}
+
+/* Button Style */
+
+.joyride-tip-guide .joyride-next-tip {
+ margin: 0;
+}
+
+.joyride-timer-indicator-wrap {
+ border: solid 1px rgba(255, 255, 255, 0.1);
+}
+
+.joyride-timer-indicator {
+ background: rgba(255, 255, 255, 0.25);
+}
+
+.joyride-close-tip {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.4);
+ font-size: 1.4em;
+ font-weight: bold;
+}
+
+.joyride-close-tip:hover,
+.joyride-close-tip:focus {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.joyride-modal-bg {
+ background: rgba(0, 0, 0, 0.5);
+}
+
+.joyride-expose-wrapper {
+ background-color: #fff;
+}
+
+.joyride-expose-cover {
+ background: transparent;
+}
diff --git a/core/themes/claro/css/src/components/tour.theme.pcss.css b/core/themes/claro/css/src/components/tour.theme.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..b3ac8a2cb4c1fbffbe8be62b860d57eaff82f52d
--- /dev/null
+++ b/core/themes/claro/css/src/components/tour.theme.pcss.css
@@ -0,0 +1,103 @@
+/**
+ * @file
+ * Styles for Tour theme.
+ */
+
+/* Default styles for the container */
+.joyride-tip-guide {
+ color: #fff;
+ border-radius: 5px;
+ background: #000;
+ background: rgba(0, 0, 0, 0.8);
+}
+
+/* Mobile */
+@media only screen and (max-width: 767px) {
+ .joyride-tip-guide {
+ border-radius: 0;
+ }
+}
+
+/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
+.joyride-tip-guide .joyride-nub {
+ border: solid 14px rgba(0, 0, 0, 0.8);
+}
+.joyride-tip-guide .joyride-nub.top {
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-left-color: transparent;
+}
+.joyride-tip-guide .joyride-nub.bottom {
+ border-right-color: transparent;
+ border-bottom-color: transparent;
+ border-left-color: transparent;
+}
+.joyride-tip-guide .joyride-nub.right {
+ border-top-color: transparent;
+ border-right-color: transparent; /* LTR */
+ border-bottom-color: transparent;
+}
+[dir="rtl"] .joyride-tip-guide .joyride-nub.right {
+ border-right-color: rgba(0, 0, 0, 0.8);
+ border-left-color: transparent;
+}
+.joyride-tip-guide .joyride-nub.left {
+ border-top-color: transparent;
+ border-bottom-color: transparent;
+ border-left-color: transparent; /* LTR */
+}
+[dir="rtl"] .joyride-tip-guide .joyride-nub.left {
+ border-right-color: transparent;
+ border-left-color: rgba(0, 0, 0, 0.8);
+}
+.joyride-tip-guide .joyride-nub.top-right {
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-left-color: transparent;
+}
+
+/* Typography */
+.joyride-tip-guide h2 {
+ color: #fff;
+}
+.joyride-tip-guide p {
+ line-height: 1.385em;
+}
+.joyride-tip-guide a {
+ color: #fff;
+}
+
+/* Button Style */
+.joyride-tip-guide .joyride-next-tip {
+ margin: 0;
+}
+.joyride-timer-indicator-wrap {
+ border: solid 1px rgba(255, 255, 255, 0.1);
+}
+.joyride-timer-indicator {
+ background: rgba(255, 255, 255, 0.25);
+}
+
+.joyride-close-tip {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.4);
+ font-size: 1.4em;
+ font-weight: bold;
+}
+.joyride-close-tip:hover,
+.joyride-close-tip:focus {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.joyride-modal-bg {
+ background: rgba(0, 0, 0, 0.5);
+}
+
+.joyride-expose-wrapper {
+ background-color: #fff;
+}
+
+.joyride-expose-cover {
+ background: transparent;
+}
diff --git a/core/themes/claro/css/src/components/vertical-tabs.css b/core/themes/claro/css/src/components/vertical-tabs.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5cf286745671107e5d91ba73d192f375e29db0c
--- /dev/null
+++ b/core/themes/claro/css/src/components/vertical-tabs.css
@@ -0,0 +1,429 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Vertical tabs module.
+ *
+ * Replaces /core/misc/vertical-tabs.css.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Main wrapper of vertical tabs.
+ * This wrapper div is added by JavaScript.
+ */
+
+.vertical-tabs {
+ margin-top: 0.75rem;
+ margin-bottom: 0.75rem;
+ border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .vertical-tabs {
+ border-color: transparent;
+ }
+}
+
+/**
+ * Vertical tabs menu.
+ */
+
+.vertical-tabs__menu {
+ position: relative;
+ display: none;
+ float: left; /* LTR */
+ width: 20em;
+ margin: 0;
+ padding-top: 0.5rem;
+ list-style: none;
+ color: #222330;
+}
+
+[dir="rtl"] .vertical-tabs__menu {
+ float: right;
+ margin: 0;
+}
+
+@media screen and (min-width: 85em) {
+ .vertical-tabs__menu {
+ display: block;
+ width: 20em;
+ }
+}
+
+/**
+ * Vertical tabs menu item.
+ */
+
+.vertical-tabs__menu-item {
+ overflow: hidden;
+ margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
+ padding: 0.5rem 0 0.5rem 0.5rem; /* LTR */
+}
+
+[dir="rtl"] .vertical-tabs__menu-item {
+ margin-right: -0.5rem;
+ margin-left: -1px;
+ padding-right: 0.5rem;
+ padding-left: 0;
+}
+
+/**
+ * These are the (grey) lines that are visually separating the vertical tab menu
+ * items.
+ */
+
+.vertical-tabs__menu-item::before,
+.vertical-tabs__menu-item::after {
+ position: absolute;
+ z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
+ display: block;
+ width: 100%;
+ margin-top: -1px;
+ border-top: 1px solid #d4d4d8;
+}
+
+/**
+ * This pseudo element covers the gray separator line of the vertical tab menu
+ * item that follows the active one.
+ *
+ * Without this, we would have a lightgray line at the bottom-left (LTR) corner
+ * of the active vertical tab menu item.
+ *
+ * Let's call this 'masking' line.
+ */
+
+.vertical-tabs__menu-item::after {
+ z-index: 2;
+ border-color: #fff;
+}
+
+/**
+ * Making the separator line visible only if it follows an unhidden menu item.
+ */
+
+.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item::before {
+ content: "";
+}
+
+/* Menu item states. */
+
+.vertical-tabs__menu-item:focus {
+ outline: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.vertical-tabs__menu-item.is-selected::before,
+.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
+ content: normal;
+}
+
+/* Make the white masking line displayed for the selected menu item. */
+
+.vertical-tabs__menu-item.is-selected::after {
+ content: "";
+}
+
+/**
+ * Anchor link inside the vertical tabs menu item.
+ */
+
+.vertical-tabs__menu-link {
+ position: relative;
+ display: block;
+ margin-top: -1px;
+ padding: 0.75rem 0.75rem 0.75rem -webkit-calc(1.5rem - 4px);
+ padding: 0.75rem 0.75rem 0.75rem -moz-calc(1.5rem - 4px);
+ padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 4px); /* LTR */
+ text-decoration: none;
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ color: #222330;
+ border: 1px solid transparent;
+ border-width: 1px 0 1px 4px; /* LTR */
+ border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir="rtl"] .vertical-tabs__menu-link {
+ padding-right: -webkit-calc(1.5rem - 4px);
+ padding-right: -moz-calc(1.5rem - 4px);
+ padding-right: calc(1.5rem - 4px);
+ padding-left: 0.75rem;
+ border-width: 1px 4px 1px 0;
+ border-radius: 0 2px 2px 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .vertical-tabs__menu-link {
+ border-color: transparent;
+ }
+}
+
+/* Menu link states. */
+
+.vertical-tabs__menu-link:focus {
+ z-index: 4; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
+ text-decoration: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.vertical-tabs__menu-link:hover {
+ text-decoration: none;
+ color: #003cc5;
+}
+
+/* This pseudo element provides the background for the hover state. */
+
+.vertical-tabs__menu-link::before {
+ position: absolute;
+ z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
+ top: -1px;
+ right: 0; /* LTR */
+ bottom: -1px;
+ left: -4px; /* LTR */
+ content: "";
+ pointer-events: none;
+ background-clip: padding-box;
+}
+
+[dir="rtl"] .vertical-tabs__menu-link::before {
+ right: -4px;
+ left: 0;
+}
+
+.vertical-tabs__menu-link:hover::before {
+ background: #f0f5fd;
+}
+
+.vertical-tabs__menu-link:focus::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: -1px -4px;
+ content: "";
+ pointer-events: none;
+ border: 3px solid #26a769;
+ border-radius: 2px;
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
+ z-index: 3; /* The selected menu link should be on a higher level than the white masking line that hides the grey separator. */
+ color: #003cc5;
+ border-color: rgba(216, 217, 224, 0.8) transparent;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
+ color: #0036b1;
+ background-color: #f0f5fd;
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+ z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
+ border-left: 4px solid #003cc5; /* LTR */
+ border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir=rtl] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+ border-right: 4px solid #003cc5;
+ border-left: 0;
+ border-radius: 0 2px 2px 0;
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
+ background: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
+ border-color: windowText transparent;
+ }
+
+ .vertical-tabs__menu-link:focus::after {
+ border-color: transparent;
+ }
+
+ .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+ border-color: windowText;
+ }
+}
+
+.vertical-tabs__menu-link-content {
+ position: relative;
+ z-index: 1; /* We are using a pseudo element for displaying the hover state's background, and we have to keep the link content above that pseudo element. Without this, the text would be covered by the background. */
+}
+
+/**
+ * Details summary in vertical tabs menu link and in the summary of the details.
+ */
+
+.vertical-tabs__menu-link-summary,
+.vertical-tabs__details-summary-summary {
+ display: block;
+ color: #545560;
+ font-size: 0.889rem;
+ font-weight: normal;
+}
+
+/**
+ * Wrapper of vertical tabs panes.
+ */
+
+.vertical-tabs__items {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-top: 0.75rem;
+ margin-bottom: 0.75rem;
+ color: #222330;
+ border: 1px
+solid
+rgba(216, 217, 224, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+/* This modifier is added by JavaScript (this is inherited from Drupal core). */
+
+.vertical-tabs__items--processed {
+ position: relative;
+ z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
+ top: -1px;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* This clearfix makes the pane wrapper at least as tall as the menu. */
+
+.vertical-tabs__items--processed::after {
+ display: block;
+ clear: both;
+ content: "";
+}
+
+@media screen and (min-width: 85em) {
+ .vertical-tabs__items--processed {
+ margin-left: 20em; /* LTR */
+ border-top-left-radius: 0; /* LTR */
+ }
+
+ .js[dir="rtl"] .vertical-tabs__items--processed {
+ margin-right: 20em;
+ margin-left: 0;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ }
+}
+
+/**
+ * The actual vertical tabs pane.
+ *
+ * This is a claro-details element which in this case is also
+ * vertical-tabs__item.
+ */
+
+.vertical-tabs__item {
+ /* Render on top of the border of vertical-tabs__items. */
+ margin: -1px -1px 0;
+ border-radius: 0;
+}
+
+.vertical-tabs__item--first {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
+.vertical-tabs__item--last {
+ margin-bottom: -1px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+@media screen and (min-width: 85em) {
+ .js .vertical-tabs__item {
+ overflow: hidden;
+ margin: 0;
+ border: 0;
+ }
+
+ .js .vertical-tabs__item--first,
+ .js .vertical-tabs__item--last {
+ border-radius: 0;
+ }
+
+ .js .vertical-tabs__item > summary {
+ display: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/vertical-tabs.pcss.css b/core/themes/claro/css/src/components/vertical-tabs.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..46b8137012f97591fcccb76afbdc3539b145bdd6
--- /dev/null
+++ b/core/themes/claro/css/src/components/vertical-tabs.pcss.css
@@ -0,0 +1,348 @@
+/**
+ * @file
+ * Vertical tabs module.
+ *
+ * Replaces /core/misc/vertical-tabs.css.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --vertical-tabs-margin-vertical: var(--space-s);
+ --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
+ --vertical-tabs-shadow: var(--details-box-shadow);
+ --vertical-tabs-border-color: var(--details-border-color);
+ --vertical-tabs-border-size: 1px;
+ --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
+ --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
+ --vertical-tabs-menu-separator-color: var(--color-lightgray);
+ --vertical-tabs-menu-separator-size: 1px;
+ --vertical-tabs-menu-width: 20em;
+ --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
+ --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
+ --vertical-tabs-menu-link--active-border-size: 4px;
+ --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
+}
+
+/**
+ * Main wrapper of vertical tabs.
+ * This wrapper div is added by JavaScript.
+ */
+.vertical-tabs {
+ margin-top: var(--vertical-tabs-margin-vertical);
+ margin-bottom: var(--vertical-tabs-margin-vertical);
+ border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .vertical-tabs {
+ border-color: transparent;
+ }
+}
+
+/**
+ * Vertical tabs menu.
+ */
+.vertical-tabs__menu {
+ position: relative;
+ display: none;
+ float: left; /* LTR */
+ width: var(--vertical-tabs-menu-width);
+ margin: 0;
+ padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
+ list-style: none;
+ color: var(--color-text);
+}
+[dir="rtl"] .vertical-tabs__menu {
+ float: right;
+ margin: 0;
+}
+
+@media screen and (min-width: 85em) {
+ .vertical-tabs__menu {
+ display: block;
+ width: var(--vertical-tabs-menu-width);
+ }
+}
+
+/**
+ * Vertical tabs menu item.
+ */
+.vertical-tabs__menu-item {
+ overflow: hidden;
+ margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2) calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1) calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); /* LTR */
+ padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
+}
+[dir="rtl"] .vertical-tabs__menu-item {
+ margin-right: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+ margin-left: calc(var(--vertical-tabs-border-size) * -1);
+ padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
+ padding-left: 0;
+}
+
+/**
+ * These are the (grey) lines that are visually separating the vertical tab menu
+ * items.
+ */
+.vertical-tabs__menu-item::before,
+.vertical-tabs__menu-item::after {
+ position: absolute;
+ z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
+ display: block;
+ width: 100%;
+ margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
+ border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+}
+
+/**
+ * This pseudo element covers the gray separator line of the vertical tab menu
+ * item that follows the active one.
+ *
+ * Without this, we would have a lightgray line at the bottom-left (LTR) corner
+ * of the active vertical tab menu item.
+ *
+ * Let's call this 'masking' line.
+ */
+.vertical-tabs__menu-item::after {
+ z-index: 2;
+ border-color: var(--color-white);
+}
+
+/**
+ * Making the separator line visible only if it follows an unhidden menu item.
+ */
+.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item::before {
+ content: "";
+}
+
+/* Menu item states. */
+.vertical-tabs__menu-item:focus {
+ outline: 0;
+ box-shadow: none;
+}
+
+.vertical-tabs__menu-item.is-selected::before,
+.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
+ content: normal;
+}
+
+/* Make the white masking line displayed for the selected menu item. */
+.vertical-tabs__menu-item.is-selected::after {
+ content: "";
+}
+
+/**
+ * Anchor link inside the vertical tabs menu item.
+ */
+.vertical-tabs__menu-link {
+ position: relative;
+ display: block;
+ margin-top: calc(var(--vertical-tabs-border-size) * -1);
+ padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
+ text-decoration: none;
+ word-wrap: break-word;
+ hyphens: auto;
+ color: var(--color-text);
+ border: var(--vertical-tabs-border-size) solid transparent;
+ border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
+ border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
+}
+[dir="rtl"] .vertical-tabs__menu-link {
+ padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
+ padding-left: var(--space-s);
+ border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
+ border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .vertical-tabs__menu-link {
+ border-color: transparent;
+ }
+}
+
+/* Menu link states. */
+.vertical-tabs__menu-link:focus {
+ z-index: 4; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
+ text-decoration: none;
+ box-shadow: none;
+}
+
+.vertical-tabs__menu-link:hover {
+ text-decoration: none;
+ color: var(--color-absolutezero);
+}
+
+/* This pseudo element provides the background for the hover state. */
+.vertical-tabs__menu-link::before {
+ position: absolute;
+ z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
+ top: calc(var(--vertical-tabs-border-size) * -1);
+ right: 0; /* LTR */
+ bottom: calc(var(--vertical-tabs-border-size) * -1);
+ left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
+ content: "";
+ pointer-events: none;
+ background-clip: padding-box;
+}
+[dir="rtl"] .vertical-tabs__menu-link::before {
+ right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+ left: 0;
+}
+
+.vertical-tabs__menu-link:hover::before {
+ background: var(--color-bgblue-hover);
+}
+
+.vertical-tabs__menu-link:focus::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+ content: "";
+ pointer-events: none;
+ border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+ border-radius: var(--vertical-tabs-border-radius);
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
+ z-index: 3; /* The selected menu link should be on a higher level than the white masking line that hides the grey separator. */
+ color: var(--color-absolutezero);
+ border-color: var(--vertical-tabs-border-color) transparent;
+ background-color: var(--color-white);
+ box-shadow: var(--vertical-tabs-shadow);
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+ z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
+ border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
+ border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
+}
+[dir=rtl] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+ border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
+ border-left: 0;
+ border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+}
+
+.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
+ background: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
+ border-color: windowText transparent;
+ }
+
+ .vertical-tabs__menu-link:focus::after {
+ border-color: transparent;
+ }
+
+ .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+ border-color: windowText;
+ }
+}
+
+.vertical-tabs__menu-link-content {
+ position: relative;
+ z-index: 1; /* We are using a pseudo element for displaying the hover state's background, and we have to keep the link content above that pseudo element. Without this, the text would be covered by the background. */
+}
+
+/**
+ * Details summary in vertical tabs menu link and in the summary of the details.
+ */
+.vertical-tabs__menu-link-summary,
+.vertical-tabs__details-summary-summary {
+ display: block;
+ color: var(--color-davysgrey);
+ font-size: var(--font-size-s);
+ font-weight: normal;
+}
+
+/**
+ * Wrapper of vertical tabs panes.
+ */
+.vertical-tabs__items {
+ box-sizing: border-box;
+ margin-top: var(--vertical-tabs-margin-vertical);
+ margin-bottom: var(--vertical-tabs-margin-vertical);
+ color: var(--color-text);
+ border: var(--vertical-tabs-border);
+ border-radius: var(--vertical-tabs-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--vertical-tabs-shadow);
+}
+
+/* This modifier is added by JavaScript (this is inherited from Drupal core). */
+.vertical-tabs__items--processed {
+ position: relative;
+ z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
+ top: -1px;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+/* This clearfix makes the pane wrapper at least as tall as the menu. */
+.vertical-tabs__items--processed::after {
+ display: block;
+ clear: both;
+ content: "";
+}
+
+@media screen and (min-width: 85em) {
+ .vertical-tabs__items--processed {
+ margin-left: var(--vertical-tabs-menu-width); /* LTR */
+ border-top-left-radius: 0; /* LTR */
+ }
+
+ .js[dir="rtl"] .vertical-tabs__items--processed {
+ margin-right: var(--vertical-tabs-menu-width);
+ margin-left: 0;
+ border-top-left-radius: var(--vertical-tabs-border-radius);
+ border-top-right-radius: 0;
+ }
+}
+
+/**
+ * The actual vertical tabs pane.
+ *
+ * This is a claro-details element which in this case is also
+ * vertical-tabs__item.
+ */
+.vertical-tabs__item {
+ /* Render on top of the border of vertical-tabs__items. */
+ margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-border-size) * -1) 0;
+ border-radius: 0;
+}
+
+.vertical-tabs__item--first {
+ border-top-left-radius: var(--details-accordion-border-size-radius);
+ border-top-right-radius: var(--details-accordion-border-size-radius);
+}
+
+.vertical-tabs__item--last {
+ margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
+ border-bottom-right-radius: var(--details-accordion-border-size-radius);
+ border-bottom-left-radius: var(--details-accordion-border-size-radius);
+}
+
+@media screen and (min-width: 85em) {
+ .js .vertical-tabs__item {
+ overflow: hidden;
+ margin: 0;
+ border: 0;
+ }
+
+ .js .vertical-tabs__item--first,
+ .js .vertical-tabs__item--last {
+ border-radius: 0;
+ }
+
+ .js .vertical-tabs__item > summary {
+ display: none;
+ }
+}
diff --git a/core/themes/claro/css/src/components/views-exposed-form.css b/core/themes/claro/css/src/components/views-exposed-form.css
new file mode 100644
index 0000000000000000000000000000000000000000..c4bd0aeb98dec52a9fe1431530d7cd3cf2ad3f9c
--- /dev/null
+++ b/core/themes/claro/css/src/components/views-exposed-form.css
@@ -0,0 +1,118 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Visual styles for views exposed form.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Use flexbox and some margin resets to make the fields + actions go inline
+ */
+
+.views-exposed-form {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: end;
+ -webkit-align-items: flex-end;
+ -moz-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+ padding: 0.5rem 1.5rem 1.5rem 1.5rem;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+ box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.views-exposed-form__item {
+ margin: 0.75rem 0.5rem 0 0; /* LTR */
+}
+
+[dir="rtl"] .views-exposed-form__item {
+ margin-right: 0;
+ margin-left: 0.5rem;
+}
+
+.views-exposed-form__item--preceding-actions {
+ margin-right: 1rem; /* LTR */
+}
+
+[dir="rtl"] .views-exposed-form__item--preceding-actions {
+ margin-right: 0;
+ margin-left: 1rem;
+}
+
+.views-exposed-form__item--actions .button {
+ margin-bottom: 0;
+}
+
+.views-exposed-form__item--actions .button:last-child {
+ margin-right: 0;
+}
+
+[dir="rtl"] .views-exposed-form__item--actions:last-child {
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/src/components/views-exposed-form.pcss.css b/core/themes/claro/css/src/components/views-exposed-form.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..9baeb63b56c563a159af5f7681edf90ab7bc3102
--- /dev/null
+++ b/core/themes/claro/css/src/components/views-exposed-form.pcss.css
@@ -0,0 +1,49 @@
+/**
+ * Visual styles for views exposed form.
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Use flexbox and some margin resets to make the fields + actions go inline
+ */
+
+.views-exposed-form {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
+ padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-border-size-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
+}
+
+.views-exposed-form__item {
+ margin: var(--space-s) var(--space-xs) 0 0; /* LTR */
+}
+[dir="rtl"] .views-exposed-form__item {
+ margin-right: 0;
+ margin-left: var(--space-xs);
+}
+
+.views-exposed-form__item--preceding-actions {
+ margin-right: var(--space-m); /* LTR */
+}
+[dir="rtl"] .views-exposed-form__item--preceding-actions {
+ margin-right: 0;
+ margin-left: var(--space-m);
+}
+
+.views-exposed-form__item--actions .button {
+ margin-bottom: 0;
+}
+
+.views-exposed-form__item--actions .button:last-child {
+ margin-right: 0;
+}
+[dir="rtl"] .views-exposed-form__item--actions:last-child {
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/src/components/views-ui.css b/core/themes/claro/css/src/components/views-ui.css
new file mode 100644
index 0000000000000000000000000000000000000000..e94ae4e2672c26616a8184df6380a80109ab9a51
--- /dev/null
+++ b/core/themes/claro/css/src/components/views-ui.css
@@ -0,0 +1,509 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Views styling
+ */
+
+/* @group Forms */
+
+/**
+ * Claro positions the summary absolutely, but does not have a way to ignore
+ * details without a summary so we make one up.
+ *
+ * @todo Neither a fieldset without legend nor a details without summary is
+ * valid HTML markup in any way. Refactor Views UI to not produce such invalid
+ * markup.
+ */
+
+details.fieldset-no-legend {
+ padding-top: 0;
+}
+
+/**
+ * Being extra safe here and scoping this to the add view wizard form (where
+ * a layout problem occurs for the Display format details if we don't fix its
+ * padding), but it's probably safe to just let it apply everywhere.
+ */
+
+.views-ui-dialog input.form-submit,
+.views-admin a.button,
+.views-ui-dialog a.button {
+ margin-top: 0;
+ margin-right: 0;
+ margin-bottom: 0;
+}
+
+[dir="rtl"] .views-ui-dialog input.form-submit,
+[dir="rtl"] .views-admin a.button,
+[dir="rtl"] .views-ui-dialog a.button {
+ margin-right: 1em;
+ margin-left: 0;
+}
+
+[dir="rtl"] .views-ui-dialog input.form-submit:first-child,
+[dir="rtl"] .views-admin a.button:first-child,
+[dir="rtl"] .views-ui-dialog a.button:first-child {
+ margin-right: 0;
+}
+
+/* @group Dependent options
+ */
+
+/* This is necessary to supercede the Claro .form-item
+ * reset declaration that sets the margin to zero.
+ */
+
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+ margin-left: 1.5em; /* LTR */
+}
+
+[dir="rtl"] .form-item-options-expose-required,
+[dir="rtl"] .form-item-options-expose-label,
+[dir="rtl"] .form-item-options-expose-description {
+ margin-right: 1.5em;
+ margin-left: 0;
+}
+
+.views-admin-dependent .form-item .form-item,
+.views-admin-dependent .form-type-checkboxes,
+.views-admin-dependent .form-type-radios,
+.views-admin-dependent .form-item .form-item,
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+.views-admin-dependent .form-type-radio,
+.views-admin-dependent .form-radios .form-item {
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+/* @end */
+
+/* @group Lists */
+
+.views-admin ul.secondary,
+.views-admin .item-list ul {
+ margin: 0;
+ padding: 0;
+}
+
+.views-displays ul.secondary li a,
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
+ padding: 2px 7px 3px;
+}
+
+.views-displays ul.secondary li a {
+ color: #0074bd;
+}
+
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
+ border: 1px solid transparent;
+}
+
+.views-admin .links li {
+ padding-right: 0; /* LTR */
+}
+
+[dir="rtl"] .views-admin .links li {
+ padding-left: 0;
+}
+
+.views-admin .button .links li {
+ padding-right: 12px; /* LTR */
+}
+
+[dir="rtl"] .views-admin .button .links li {
+ padding-left: 12px;
+}
+
+.views-display-top ul.secondary {
+ float: left; /* LTR */
+ background-color: transparent;
+}
+
+[dir="rtl"] .views-display-top ul.secondary {
+ float: right;
+}
+
+.views-display-top .secondary .action-list li {
+ float: none;
+ margin: 0;
+}
+
+/* @end */
+
+/* @group Tables */
+
+.views-ui-rearrange-filter-form table td,
+.views-ui-rearrange-filter-form table th {
+ vertical-align: top;
+}
+
+/* @end */
+
+/* @group Attachment details */
+
+#edit-display-settings-title {
+ color: #008bcb;
+}
+
+/* @end */
+
+/* @group Attachment details tabs
+ *
+ * The tabs that switch between sections
+ *
+ * @todo this group contains lots of duplicates from core styles because Claro
+ * has its custom markup for views tabs. Some of these could be removed after
+ * https://www.drupal.org/node/3051605 has been solved.
+ */
+
+.views-tabs {
+ overflow: visible;
+ margin: 0 200px 0 0; /* LTR */
+ padding: 0;
+ list-style: none;
+ text-align: left; /* LTR */
+ border-bottom: 0 none;
+}
+
+[dir="rtl"] .views-tabs {
+ margin-right: 0;
+ margin-left: 200px;
+ text-align: right;
+}
+
+.views-tabs > li {
+ float: left; /* LTR */
+ padding: 0;
+ border-right: 0 none; /* LTR */
+}
+
+[dir="rtl"] .views-tabs > li {
+ float: right;
+ border-right: 1px solid #bfbfbf;
+ border-left: 0 none;
+}
+
+.views-tabs .open > a {
+ position: relative;
+ z-index: 51;
+}
+
+.views-tabs .views-display-deleted-link {
+ text-decoration: line-through;
+}
+
+.views-tabs .add {
+ position: relative;
+}
+
+.views-tabs .action-list {
+ position: absolute;
+ z-index: 50;
+ top: 23px;
+ left: 0; /* LTR */
+ margin: 0;
+}
+
+[dir="rtl"] .views-tabs .action-list {
+ right: 0;
+ left: auto;
+}
+
+.views-tabs .action-list li {
+ display: block;
+}
+
+.views-tab a:hover > .icon.add {
+ background-position: center -25px;
+}
+
+.views-tab .open > a {
+ border-radius: 7px 7px 0 0;
+}
+
+.views-tab .open > a:hover,
+.views-tab .open > a:focus {
+ color: #008bcb;
+ background-color: #f1f1f1;
+}
+
+.views-tab .action-list li:first-child {
+ border-radius: 0 7px 0 0; /* LTR */
+}
+
+[dir="rtl"] .views-tab .action-list li:first-child {
+ border-radius: 7px 0 0 0;
+}
+
+.views-tab .action-list li:last-child {
+ border-radius: 0 0 7px 7px;
+}
+
+.views-tab .action-list input.form-submit {
+ color: #008bcb;
+}
+
+.views-tabs li,
+.views-tabs li.is-active {
+ width: auto;
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+
+.views-tabs li.add ul.action-list li {
+ margin: 0;
+}
+
+.views-tabs li {
+ margin: 0 5px 5px 6px; /* LTR */
+}
+
+[dir="rtl"] .views-tabs li {
+ margin-right: 6px;
+ margin-left: 5px;
+}
+
+.views-tabs li + li {
+ border-top: 0;
+}
+
+.views-tabs li:hover {
+ padding-left: 0; /* LTR */
+ border: 0;
+}
+
+[dir="rtl"] .views-tabs li:hover {
+ padding-right: 0;
+}
+
+.views-tabs a {
+ display: inline-block;
+ padding: 3px 7px;
+ border: 1px solid #cbcbcb;
+ border-radius: 7px;
+ font-size: small;
+ line-height: 1.3333;
+}
+
+/* Display a red border if the display doesn't validate. */
+
+.views-tabs li.is-active a.is-active.error,
+.views-tabs .error {
+ padding: 1px 6px;
+ border: 2px solid #ed541d;
+}
+
+.views-tabs a:focus {
+ outline: none;
+}
+
+.views-tabs li a {
+ text-decoration: none;
+ background-color: #fff;
+}
+
+.views-tabs li a:hover,
+.views-tabs li.is-active a,
+.views-tabs li.is-active a.is-active {
+ color: #fff;
+ background-color: #555;
+}
+
+.views-tabs .open > a {
+ position: relative;
+ border-bottom: 1px solid transparent;
+ background-color: #f1f1f1;
+}
+
+.views-tabs .open > a:hover {
+ color: #0074bd;
+ background-color: #f1f1f1;
+}
+
+.views-tabs .action-list li {
+ padding: 2px 9px;
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: #cbcbcb;
+ background-color: #f1f1f1;
+}
+
+.views-tabs .action-list li:first-child {
+ border-width: 1px 1px 0;
+}
+
+.views-displays .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+
+.views-tabs .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+
+.views-tabs .action-list input.form-submit {
+ margin: 0;
+ padding: 0;
+ border: medium none;
+ background: none repeat scroll 0 0 transparent;
+}
+
+.views-tabs .action-list input.form-submit:hover {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.views-tabs .action-list li:hover {
+ background-color: #ddd;
+}
+
+.views-tabs a:hover > .icon.add {
+ background-position: center -25px;
+}
+
+.views-tabs .open a:hover > .icon.add {
+ background-position: center 3px;
+}
+
+/* @end */
+
+/* @group Attachment buckets
+ *
+ * These are the individual "buckets," or boxes, inside the display settings area
+ */
+
+.views-ui-display-tab-bucket h3 {
+ text-transform: uppercase;
+}
+
+.views-ui-display-tab-bucket .links {
+ padding: 2px 6px 4px;
+}
+
+.views-ui-display-tab-bucket .links li + li {
+ margin-left: 3px; /* LTR */
+}
+
+[dir="rtl"] .views-ui-display-tab-bucket .links li + li {
+ margin-right: 3px;
+ margin-left: 0;
+}
+
+/* @end */
+
+/* @group Rearrange filter criteria */
+
+.views-ui-rearrange-filter-form .action-links {
+ float: left;
+ margin: 0 0 1em;
+ padding: 0;
+}
+
+.views-ui-rearrange-filter-form .tabledrag-toggle-weight-wrapper {
+ float: right;
+ margin-bottom: 1em;
+}
+
+.views-ui-rearrange-filter-form table {
+ border: medium none;
+}
+
+.views-ui-rearrange-filter-form [id^="views-row"] {
+ border: medium none;
+}
+
+.views-ui-rearrange-filter-form tr td:last-child {
+ border-right: medium none; /* LTR */
+}
+
+[dir="rtl"] .views-ui-rearrange-filter-form tr td:last-child {
+ border-right: initial;
+ border-left: medium none;
+}
+
+.views-ui-rearrange-filter-form .filter-group-operator-row {
+ border-right: 1px solid transparent !important;
+ border-left: 1px solid transparent !important;
+}
+
+.views-ui-rearrange-filter-form tr.drag td {
+ background-color: #fe7 !important;
+}
+
+.views-ui-rearrange-filter-form tr.drag-previous td {
+ background-color: #ffb !important;
+}
+
+/* @end */
+
+/* @group Live preview elements */
+
+.views-query-info pre {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* @group Query info table */
+
+.views-query-info table {
+ border-radius: 7px;
+ -webkit-border-horizontal-spacing: 1px;
+ -webkit-border-vertical-spacing: 1px;
+}
+
+.views-query-info table tr td:last-child {
+ /* Fixes a Claro style that bleeds down into this table unnecessarily */
+ border-right: 0 none; /* LTR */
+}
+
+[dir="rtl"] .views-query-info table tr td:last-child {
+ border-right: initial;
+ border-left: 0 none;
+}
+
+/* @end */
+
+/* @end */
+
+/* @group Add view */
+
+.form-item-page-create,
+.form-item-block-create {
+ margin-top: 13px;
+}
+
+/* @end */
+
+/* @group Modal dialog box
+ *
+ * The contents of the popup dialog on the views edit form.
+ */
+
+.filterable-option .form-item.form-type-checkbox {
+ padding-top: 4px;
+ /* This selector is aggressive because Claro's reset for .form-items is aggressive. */
+ padding-bottom: 4px;
+ padding-left: 4px; /* LTR */
+}
+
+[dir="rtl"] .filterable-option .form-item.form-type-checkbox {
+ padding-right: 4px;
+ padding-left: 8px;
+}
+
+/* @end */
diff --git a/core/themes/claro/css/src/components/views-ui.pcss.css b/core/themes/claro/css/src/components/views-ui.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..4d7c12a3525abd441f297c8815eeb4a562ecac30
--- /dev/null
+++ b/core/themes/claro/css/src/components/views-ui.pcss.css
@@ -0,0 +1,456 @@
+/**
+ * Views styling
+ */
+
+/* @group Forms */
+
+/**
+ * Claro positions the summary absolutely, but does not have a way to ignore
+ * details without a summary so we make one up.
+ *
+ * @todo Neither a fieldset without legend nor a details without summary is
+ * valid HTML markup in any way. Refactor Views UI to not produce such invalid
+ * markup.
+ */
+details.fieldset-no-legend {
+ padding-top: 0;
+}
+
+/**
+ * Being extra safe here and scoping this to the add view wizard form (where
+ * a layout problem occurs for the Display format details if we don't fix its
+ * padding), but it's probably safe to just let it apply everywhere.
+ */
+.views-ui-dialog input.form-submit,
+.views-admin a.button,
+.views-ui-dialog a.button {
+ margin-top: 0;
+ margin-right: 0;
+ margin-bottom: 0;
+}
+[dir="rtl"] .views-ui-dialog input.form-submit,
+[dir="rtl"] .views-admin a.button,
+[dir="rtl"] .views-ui-dialog a.button {
+ margin-right: 1em;
+ margin-left: 0;
+}
+[dir="rtl"] .views-ui-dialog input.form-submit:first-child,
+[dir="rtl"] .views-admin a.button:first-child,
+[dir="rtl"] .views-ui-dialog a.button:first-child {
+ margin-right: 0;
+}
+
+/* @group Dependent options
+ */
+
+/* This is necessary to supercede the Claro .form-item
+ * reset declaration that sets the margin to zero.
+ */
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+ margin-left: 1.5em; /* LTR */
+}
+[dir="rtl"] .form-item-options-expose-required,
+[dir="rtl"] .form-item-options-expose-label,
+[dir="rtl"] .form-item-options-expose-description {
+ margin-right: 1.5em;
+ margin-left: 0;
+}
+
+.views-admin-dependent .form-item .form-item,
+.views-admin-dependent .form-type-checkboxes,
+.views-admin-dependent .form-type-radios,
+.views-admin-dependent .form-item .form-item,
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+.views-admin-dependent .form-type-radio,
+.views-admin-dependent .form-radios .form-item {
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+/* @end */
+
+/* @group Lists */
+
+.views-admin ul.secondary,
+.views-admin .item-list ul {
+ margin: 0;
+ padding: 0;
+}
+
+.views-displays ul.secondary li a,
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
+ padding: 2px 7px 3px;
+}
+
+.views-displays ul.secondary li a {
+ color: #0074bd;
+}
+
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
+ border: 1px solid transparent;
+}
+
+.views-admin .links li {
+ padding-right: 0; /* LTR */
+}
+[dir="rtl"] .views-admin .links li {
+ padding-left: 0;
+}
+
+.views-admin .button .links li {
+ padding-right: 12px; /* LTR */
+}
+[dir="rtl"] .views-admin .button .links li {
+ padding-left: 12px;
+}
+
+.views-display-top ul.secondary {
+ float: left; /* LTR */
+ background-color: transparent;
+}
+[dir="rtl"] .views-display-top ul.secondary {
+ float: right;
+}
+
+.views-display-top .secondary .action-list li {
+ float: none;
+ margin: 0;
+}
+
+/* @end */
+
+/* @group Tables */
+
+.views-ui-rearrange-filter-form table td,
+.views-ui-rearrange-filter-form table th {
+ vertical-align: top;
+}
+
+/* @end */
+
+/* @group Attachment details */
+
+#edit-display-settings-title {
+ color: #008bcb;
+}
+
+/* @end */
+
+/* @group Attachment details tabs
+ *
+ * The tabs that switch between sections
+ *
+ * @todo this group contains lots of duplicates from core styles because Claro
+ * has its custom markup for views tabs. Some of these could be removed after
+ * https://www.drupal.org/node/3051605 has been solved.
+ */
+
+.views-tabs {
+ overflow: visible;
+ margin: 0 200px 0 0; /* LTR */
+ padding: 0;
+ list-style: none;
+ text-align: left; /* LTR */
+ border-bottom: 0 none;
+}
+[dir="rtl"] .views-tabs {
+ margin-right: 0;
+ margin-left: 200px;
+ text-align: right;
+}
+.views-tabs > li {
+ float: left; /* LTR */
+ padding: 0;
+ border-right: 0 none; /* LTR */
+}
+[dir="rtl"] .views-tabs > li {
+ float: right;
+ border-right: 1px solid #bfbfbf;
+ border-left: 0 none;
+}
+.views-tabs .open > a {
+ position: relative;
+ z-index: 51;
+}
+.views-tabs .views-display-deleted-link {
+ text-decoration: line-through;
+}
+.views-tabs .add {
+ position: relative;
+}
+.views-tabs .action-list {
+ position: absolute;
+ z-index: 50;
+ top: 23px;
+ left: 0; /* LTR */
+ margin: 0;
+}
+[dir="rtl"] .views-tabs .action-list {
+ right: 0;
+ left: auto;
+}
+.views-tabs .action-list li {
+ display: block;
+}
+
+.views-tab a:hover > .icon.add {
+ background-position: center -25px;
+}
+
+.views-tab .open > a {
+ border-radius: 7px 7px 0 0;
+}
+
+.views-tab .open > a:hover,
+.views-tab .open > a:focus {
+ color: #008bcb;
+ background-color: #f1f1f1;
+}
+
+.views-tab .action-list li:first-child {
+ border-radius: 0 7px 0 0; /* LTR */
+}
+[dir="rtl"] .views-tab .action-list li:first-child {
+ border-radius: 7px 0 0 0;
+}
+
+.views-tab .action-list li:last-child {
+ border-radius: 0 0 7px 7px;
+}
+
+.views-tab .action-list input.form-submit {
+ color: #008bcb;
+}
+
+.views-tabs li,
+.views-tabs li.is-active {
+ width: auto;
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+.views-tabs li.add ul.action-list li {
+ margin: 0;
+}
+.views-tabs li {
+ margin: 0 5px 5px 6px; /* LTR */
+}
+[dir="rtl"] .views-tabs li {
+ margin-right: 6px;
+ margin-left: 5px;
+}
+.views-tabs li + li {
+ border-top: 0;
+}
+.views-tabs li:hover {
+ padding-left: 0; /* LTR */
+ border: 0;
+}
+[dir="rtl"] .views-tabs li:hover {
+ padding-right: 0;
+}
+.views-tabs a {
+ display: inline-block;
+ padding: 3px 7px;
+ border: 1px solid #cbcbcb;
+ border-radius: 7px;
+ font-size: small;
+ line-height: 1.3333;
+}
+
+/* Display a red border if the display doesn't validate. */
+.views-tabs li.is-active a.is-active.error,
+.views-tabs .error {
+ padding: 1px 6px;
+ border: 2px solid #ed541d;
+}
+.views-tabs a:focus {
+ outline: none;
+}
+.views-tabs li a {
+ text-decoration: none;
+ background-color: #fff;
+}
+.views-tabs li a:hover,
+.views-tabs li.is-active a,
+.views-tabs li.is-active a.is-active {
+ color: #fff;
+ background-color: #555;
+}
+.views-tabs .open > a {
+ position: relative;
+ border-bottom: 1px solid transparent;
+ background-color: #f1f1f1;
+}
+.views-tabs .open > a:hover {
+ color: #0074bd;
+ background-color: #f1f1f1;
+}
+.views-tabs .action-list li {
+ padding: 2px 9px;
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: #cbcbcb;
+ background-color: #f1f1f1;
+}
+.views-tabs .action-list li:first-child {
+ border-width: 1px 1px 0;
+}
+.views-displays .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+.views-tabs .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+.views-tabs .action-list input.form-submit {
+ margin: 0;
+ padding: 0;
+ border: medium none;
+ background: none repeat scroll 0 0 transparent;
+}
+.views-tabs .action-list input.form-submit:hover {
+ box-shadow: none;
+}
+.views-tabs .action-list li:hover {
+ background-color: #ddd;
+}
+
+.views-tabs a:hover > .icon.add {
+ background-position: center -25px;
+}
+.views-tabs .open a:hover > .icon.add {
+ background-position: center 3px;
+}
+
+/* @end */
+
+/* @group Attachment buckets
+ *
+ * These are the individual "buckets," or boxes, inside the display settings area
+ */
+
+.views-ui-display-tab-bucket h3 {
+ text-transform: uppercase;
+}
+
+.views-ui-display-tab-bucket .links {
+ padding: 2px 6px 4px;
+}
+
+.views-ui-display-tab-bucket .links li + li {
+ margin-left: 3px; /* LTR */
+}
+[dir="rtl"] .views-ui-display-tab-bucket .links li + li {
+ margin-right: 3px;
+ margin-left: 0;
+}
+
+/* @end */
+
+/* @group Rearrange filter criteria */
+
+.views-ui-rearrange-filter-form .action-links {
+ float: left;
+ margin: 0 0 1em;
+ padding: 0;
+}
+.views-ui-rearrange-filter-form .tabledrag-toggle-weight-wrapper {
+ float: right;
+ margin-bottom: 1em;
+}
+
+.views-ui-rearrange-filter-form table {
+ border: medium none;
+}
+
+.views-ui-rearrange-filter-form [id^="views-row"] {
+ border: medium none;
+}
+
+.views-ui-rearrange-filter-form tr td:last-child {
+ border-right: medium none; /* LTR */
+}
+[dir="rtl"] .views-ui-rearrange-filter-form tr td:last-child {
+ border-right: initial;
+ border-left: medium none;
+}
+
+.views-ui-rearrange-filter-form .filter-group-operator-row {
+ border-right: 1px solid transparent !important;
+ border-left: 1px solid transparent !important;
+}
+
+.views-ui-rearrange-filter-form tr.drag td {
+ background-color: #fe7 !important;
+}
+
+.views-ui-rearrange-filter-form tr.drag-previous td {
+ background-color: #ffb !important;
+}
+
+/* @end */
+
+/* @group Live preview elements */
+
+.views-query-info pre {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* @group Query info table */
+
+.views-query-info table {
+ border-radius: 7px;
+ -webkit-border-horizontal-spacing: 1px;
+ -webkit-border-vertical-spacing: 1px;
+}
+
+.views-query-info table tr td:last-child {
+ /* Fixes a Claro style that bleeds down into this table unnecessarily */
+ border-right: 0 none; /* LTR */
+}
+[dir="rtl"] .views-query-info table tr td:last-child {
+ border-right: initial;
+ border-left: 0 none;
+}
+
+/* @end */
+
+/* @end */
+
+/* @group Add view */
+
+.form-item-page-create,
+.form-item-block-create {
+ margin-top: 13px;
+}
+
+/* @end */
+
+/* @group Modal dialog box
+ *
+ * The contents of the popup dialog on the views edit form.
+ */
+
+.filterable-option .form-item.form-type-checkbox {
+ padding-top: 4px;
+ /* This selector is aggressive because Claro's reset for .form-items is aggressive. */
+ padding-bottom: 4px;
+ padding-left: 4px; /* LTR */
+}
+[dir="rtl"] .filterable-option .form-item.form-type-checkbox {
+ padding-right: 4px;
+ padding-left: 8px;
+}
+
+/* @end */
diff --git a/core/themes/claro/css/src/layout/breadcrumb.css b/core/themes/claro/css/src/layout/breadcrumb.css
new file mode 100644
index 0000000000000000000000000000000000000000..d87cb095b781f0cc4eb605e6e561f992b78e1d66
--- /dev/null
+++ b/core/themes/claro/css/src/layout/breadcrumb.css
@@ -0,0 +1,59 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.region-breadcrumb {
+ min-height: 1.25rem;
+}
diff --git a/core/themes/claro/css/src/layout/breadcrumb.pcss.css b/core/themes/claro/css/src/layout/breadcrumb.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..f587326346a598d0a51994c729cf11025d51816c
--- /dev/null
+++ b/core/themes/claro/css/src/layout/breadcrumb.pcss.css
@@ -0,0 +1,10 @@
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+@import "../base/variables.pcss.css";
+
+.region-breadcrumb {
+ min-height: var(--breadcrumb-height);
+}
diff --git a/core/themes/claro/css/src/layout/card-list.css b/core/themes/claro/css/src/layout/card-list.css
new file mode 100644
index 0000000000000000000000000000000000000000..99abc6a559a82d50a10501e8f4a194b9ee989074
--- /dev/null
+++ b/core/themes/claro/css/src/layout/card-list.css
@@ -0,0 +1,242 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Cards list.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+:root {
+ /* Using 100% as base causes issues in IE11. */
+}
+
+.card-list {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -moz-box-orient: vertical;
+ -moz-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.card-list--two-cols,
+.card-list--four-cols {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -moz-box-orient: horizontal;
+ -moz-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: stretch;
+ -webkit-align-items: stretch;
+ -moz-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -moz-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+
+.card-list__item {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-bottom: 1rem;
+}
+
+.card-list--two-cols .card-list__item,
+.card-list--four-cols .card-list__item {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+
+/* 36.75rem theme screenshot width */
+
+@media screen and (min-width: 36.75rem) {
+ .card-list--four-cols .card-list__item {
+ -webkit-flex-basis: -webkit-calc((99.9% + 1rem)/2 - 1rem);
+ -ms-flex-preferred-size: calc((99.9% + 1rem)/2 - 1rem);
+ flex-basis: -moz-calc((99.9% + 1rem)/2 - 1rem);
+ flex-basis: calc((99.9% + 1rem)/2 - 1rem);
+ max-width: -webkit-calc((99.9% + 1rem)/2 - 1rem);
+ max-width: -moz-calc((99.9% + 1rem)/2 - 1rem);
+ max-width: calc((99.9% + 1rem)/2 - 1rem);
+ }
+
+ .card-list--four-cols .card-list__item {
+ margin-right: 1rem;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item {
+ margin-right: 0;
+ margin-left: 1rem;
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+
+@media screen and (max-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+@media screen and (min-width: 70rem) {
+ .card-list--four-cols .card-list__item {
+ -webkit-flex-basis: -webkit-calc((99.9% + 1rem)/3 - 1rem);
+ -ms-flex-preferred-size: calc((99.9% + 1rem)/3 - 1rem);
+ flex-basis: -moz-calc((99.9% + 1rem)/3 - 1rem);
+ flex-basis: calc((99.9% + 1rem)/3 - 1rem);
+ max-width: -webkit-calc((99.9% + 1rem)/3 - 1rem);
+ max-width: -moz-calc((99.9% + 1rem)/3 - 1rem);
+ max-width: calc((99.9% + 1rem)/3 - 1rem);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 1rem;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: 1rem;
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+@media screen and (min-width: 85.375rem) {
+ .card-list--two-cols .card-list__item {
+ -webkit-flex-basis: -webkit-calc((99.9% + 1rem)/2 - 1rem);
+ -ms-flex-preferred-size: calc((99.9% + 1rem)/2 - 1rem);
+ flex-basis: -moz-calc((99.9% + 1rem)/2 - 1rem);
+ flex-basis: calc((99.9% + 1rem)/2 - 1rem);
+ max-width: -webkit-calc((99.9% + 1rem)/2 - 1rem);
+ max-width: -moz-calc((99.9% + 1rem)/2 - 1rem);
+ max-width: calc((99.9% + 1rem)/2 - 1rem);
+ margin-right: 1rem;
+ }
+ [dir="rtl"] .card-list--two-cols .card-list__item {
+ margin-right: 0;
+ margin-left: 1rem;
+ }
+
+ .card-list--two-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ .card-list--four-cols .card-list__item {
+ -webkit-flex-basis: -webkit-calc((99.9% + 1rem)/4 - 1rem);
+ -ms-flex-preferred-size: calc((99.9% + 1rem)/4 - 1rem);
+ flex-basis: -moz-calc((99.9% + 1rem)/4 - 1rem);
+ flex-basis: calc((99.9% + 1rem)/4 - 1rem);
+ max-width: -webkit-calc((99.9% + 1rem)/4 - 1rem);
+ max-width: -moz-calc((99.9% + 1rem)/4 - 1rem);
+ max-width: calc((99.9% + 1rem)/4 - 1rem);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 1rem;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: 1rem;
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 1rem;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 0;
+ margin-left: 1rem;
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(4n) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/layout/card-list.pcss.css b/core/themes/claro/css/src/layout/card-list.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..040e09cd054cdeda533e606839e6110b5126c21c
--- /dev/null
+++ b/core/themes/claro/css/src/layout/card-list.pcss.css
@@ -0,0 +1,143 @@
+/**
+ * @file
+ * Cards list.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ --card-list-spacing: var(--space-m);
+ /* Using 100% as base causes issues in IE11. */
+ --cards-two-cols-width: calc(((99.9% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
+ --cards-three-cols-width: calc(((99.9% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
+ --cards-four-cols-width: calc(((99.9% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
+}
+
+.card-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.card-list--two-cols,
+.card-list--four-cols {
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: stretch;
+ justify-content: flex-start;
+}
+
+.card-list__item {
+ box-sizing: border-box;
+ margin-bottom: var(--card-list-spacing);
+}
+
+.card-list--two-cols .card-list__item,
+.card-list--four-cols .card-list__item {
+ flex-basis: 100%;
+}
+
+/* 36.75rem theme screenshot width */
+@media screen and (min-width: 36.75rem) {
+ .card-list--four-cols .card-list__item {
+ flex-basis: var(--cards-two-cols-width);
+ max-width: var(--cards-two-cols-width);
+ }
+
+ .card-list--four-cols .card-list__item {
+ margin-right: var(--card-list-spacing);
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item {
+ margin-right: 0;
+ margin-left: var(--card-list-spacing);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+@media screen and (max-width: 53.75rem) {
+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
+ flex-basis: 100%;
+ max-width: 100%;
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+@media screen and (min-width: 70rem) {
+ .card-list--four-cols .card-list__item {
+ flex-basis: var(--cards-three-cols-width);
+ max-width: var(--cards-three-cols-width);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: var(--card-list-spacing);
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: var(--card-list-spacing);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+@media screen and (min-width: 85.375rem) {
+ .card-list--two-cols .card-list__item {
+ flex-basis: var(--cards-two-cols-width);
+ max-width: var(--cards-two-cols-width);
+ margin-right: var(--card-list-spacing);
+ }
+ [dir="rtl"] .card-list--two-cols .card-list__item {
+ margin-right: 0;
+ margin-left: var(--card-list-spacing);
+ }
+
+ .card-list--two-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ .card-list--four-cols .card-list__item {
+ flex-basis: var(--cards-four-cols-width);
+ max-width: var(--cards-four-cols-width);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: var(--card-list-spacing);
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+ margin-right: 0;
+ margin-left: var(--card-list-spacing);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: var(--card-list-spacing);
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+ margin-right: 0;
+ margin-left: var(--card-list-spacing);
+ }
+
+ .card-list--four-cols .card-list__item:nth-child(4n) {
+ margin-right: 0;
+ }
+ [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
diff --git a/core/themes/claro/css/src/layout/image-widget.css b/core/themes/claro/css/src/layout/image-widget.css
new file mode 100644
index 0000000000000000000000000000000000000000..8964c2cf40ce5f8a6a6deacc03a1d6615389ef02
--- /dev/null
+++ b/core/themes/claro/css/src/layout/image-widget.css
@@ -0,0 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Extends classy/image-widget.
+ */
+
+.image-widget-data {
+ max-width: 100%;
+}
diff --git a/core/themes/claro/css/src/layout/image-widget.pcss.css b/core/themes/claro/css/src/layout/image-widget.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..ce659ce082e1a5b624a82ac5208539fad41615f0
--- /dev/null
+++ b/core/themes/claro/css/src/layout/image-widget.pcss.css
@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Extends classy/image-widget.
+ */
+
+.image-widget-data {
+ max-width: 100%;
+}
diff --git a/core/themes/claro/css/src/layout/layout.css b/core/themes/claro/css/src/layout/layout.css
new file mode 100644
index 0000000000000000000000000000000000000000..601de6b6f9e23c1e62fc6653df09fe19cbae35ef
--- /dev/null
+++ b/core/themes/claro/css/src/layout/layout.css
@@ -0,0 +1,19 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+/**
+ * Add spacing to bottom of pages
+ */
+.page-content {
+ margin-bottom: 80px;
+}
+/**
+ * Add color to layout icons.
+ */
+.layout-icon__region {
+ fill: #f5f5f2;
+ stroke: #666;
+}
diff --git a/core/themes/claro/css/src/layout/layout.pcss.css b/core/themes/claro/css/src/layout/layout.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..39649e43c1785fe127ceede9d431a4bbfb1178f1
--- /dev/null
+++ b/core/themes/claro/css/src/layout/layout.pcss.css
@@ -0,0 +1,14 @@
+/**
+ * Add spacing to bottom of pages
+ */
+.page-content {
+ margin-bottom: 80px;
+}
+
+/**
+ * Add color to layout icons.
+ */
+.layout-icon__region {
+ fill: #f5f5f2;
+ stroke: #666;
+}
diff --git a/core/themes/claro/css/src/layout/local-actions.css b/core/themes/claro/css/src/layout/local-actions.css
new file mode 100644
index 0000000000000000000000000000000000000000..38786c74a4d2955c0ab6b89affb83957a04292bd
--- /dev/null
+++ b/core/themes/claro/css/src/layout/local-actions.css
@@ -0,0 +1,99 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Layout styles for local actions.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Action link layout styles.
+ */
+
+.local-actions {
+ margin: 1rem 0;
+ padding: 0;
+ list-style: none;
+}
+
+/* This is required to win over specificity of [dir="rtl"] ul */
+
+[dir="rtl"] .local-actions {
+ margin-right: 0;
+}
+
+.local-actions__item {
+ display: inline-block;
+ margin: 0 0.25rem;
+}
+
+.local-actions__item:first-child {
+ margin-left: 0; /* LTR */
+}
+
+[dir="rtl"] .local-actions__item:first-child {
+ margin-right: 0;
+ margin-left: 0.25rem;
+}
+
+.local-actions__item:last-child {
+ margin-right: 0; /* LTR */
+}
+
+[dir="rtl"] .local-actions__item:last-child {
+ margin-right: 0.25rem;
+ margin-left: 0;
+}
+
+[dir="rtl"] .local-actions__item:only-child {
+ margin-right: 0;
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/src/layout/local-actions.pcss.css b/core/themes/claro/css/src/layout/local-actions.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..fed50edc802208ad0a50f655de14fa363291dd9d
--- /dev/null
+++ b/core/themes/claro/css/src/layout/local-actions.pcss.css
@@ -0,0 +1,45 @@
+/**
+ * @file
+ * Layout styles for local actions.
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Action link layout styles.
+ */
+.local-actions {
+ margin: var(--space-m) 0;
+ padding: 0;
+ list-style: none;
+}
+/* This is required to win over specificity of [dir="rtl"] ul */
+[dir="rtl"] .local-actions {
+ margin-right: 0;
+}
+
+.local-actions__item {
+ display: inline-block;
+ margin: 0 calc(var(--space-xs) / 2);
+}
+
+.local-actions__item:first-child {
+ margin-left: 0; /* LTR */
+}
+[dir="rtl"] .local-actions__item:first-child {
+ margin-right: 0;
+ margin-left: calc(var(--space-xs) / 2);
+}
+
+.local-actions__item:last-child {
+ margin-right: 0; /* LTR */
+}
+[dir="rtl"] .local-actions__item:last-child {
+ margin-right: calc(var(--space-xs) / 2);
+ margin-left: 0;
+}
+
+[dir="rtl"] .local-actions__item:only-child {
+ margin-right: 0;
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/src/layout/node-add.css b/core/themes/claro/css/src/layout/node-add.css
new file mode 100644
index 0000000000000000000000000000000000000000..b92d66f7fbbdcaa759e0717e68e647004e6a648c
--- /dev/null
+++ b/core/themes/claro/css/src/layout/node-add.css
@@ -0,0 +1,81 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * Layout overrides for node add/edit form.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.layout-region-node-footer__content {
+ margin-top: 1.5em;
+}
+
+/**
+ * Widescreen
+ *
+ * Both of the following media queries must *exactly* match what is in
+ * node.module.css. This is rather crazy.
+ *
+ * @todo Figure out how to reduce media query duplication across files
+ * and modules. Layout styles only allowed in themes?
+ */
+
+@media
+ screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
+ .layout-region-node-footer__content {
+ margin-top: 0.5em;
+ }
+}
+
+/* Push sidebar down to horizontal align with form section */
+
+.layout-region-node-secondary {
+ margin-top: 1.5rem;
+}
diff --git a/core/themes/claro/css/src/layout/node-add.pcss.css b/core/themes/claro/css/src/layout/node-add.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..d0411167653d70c656d307c130e6848ed454fed2
--- /dev/null
+++ b/core/themes/claro/css/src/layout/node-add.pcss.css
@@ -0,0 +1,31 @@
+/**
+ * Layout overrides for node add/edit form.
+ */
+
+@import "../base/variables.pcss.css";
+
+.layout-region-node-footer__content {
+ margin-top: 1.5em;
+}
+
+/**
+ * Widescreen
+ *
+ * Both of the following media queries must *exactly* match what is in
+ * node.module.css. This is rather crazy.
+ *
+ * @todo Figure out how to reduce media query duplication across files
+ * and modules. Layout styles only allowed in themes?
+ */
+@media
+ screen and (min-width: 780px),
+ (orientation: landscape) and (min-device-height: 780px) {
+ .layout-region-node-footer__content {
+ margin-top: 0.5em;
+ }
+}
+
+/* Push sidebar down to horizontal align with form section */
+.layout-region-node-secondary {
+ margin-top: var(--space-l);
+}
diff --git a/core/themes/claro/css/src/layout/system-admin--layout.css b/core/themes/claro/css/src/layout/system-admin--layout.css
new file mode 100644
index 0000000000000000000000000000000000000000..7db12b6c7a041edf776532604412a9acedc2daa3
--- /dev/null
+++ b/core/themes/claro/css/src/layout/system-admin--layout.css
@@ -0,0 +1,91 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Replacement 'Reusable layout' component styles of system/admin library.
+ */
+
+.layout-container {
+ margin-right: 1em;
+ margin-left: 1em;
+}
+
+.layout-container::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+@media screen and (min-width: 38em) {
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-container,
+ body:not(.toolbar-tray-open) .layout-container {
+ margin-right: 3em;
+ margin-left: 3em;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-row,
+ body:not(.toolbar-tray-open) .layout-row {
+ margin-right: -1.5em;
+ margin-left: -1.5em;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+ body:not(.toolbar-tray-open) .layout-column {
+ float: left; /* LTR */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-right: 1.5em;
+ padding-left: 1.5em;
+ }
+ [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+ [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {
+ float: right;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,
+ body:not(.toolbar-tray-open) .layout-column--half {
+ width: 50%;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,
+ body:not(.toolbar-tray-open) .layout-column--quarter {
+ width: 25%;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,
+ body:not(.toolbar-tray-open) .layout-column--three-quarter {
+ width: 75%;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .layout-container {
+ margin-right: 3em;
+ margin-left: 3em;
+ }
+ .layout-row {
+ margin-right: -1.5em;
+ margin-left: -1.5em;
+ }
+ .layout-column {
+ float: left; /* LTR */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-right: 1.5em;
+ padding-left: 1.5em;
+ }
+ [dir="rtl"] .layout-column {
+ float: right;
+ }
+ .layout-column--half {
+ width: 50%;
+ }
+ .layout-column--quarter {
+ width: 25%;
+ }
+ .layout-column--three-quarter {
+ width: 75%;
+ }
+}
diff --git a/core/themes/claro/css/src/layout/system-admin--layout.pcss.css b/core/themes/claro/css/src/layout/system-admin--layout.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..a041c3df2d9a56f0baf441f0e68f0bd03de08c0d
--- /dev/null
+++ b/core/themes/claro/css/src/layout/system-admin--layout.pcss.css
@@ -0,0 +1,79 @@
+/**
+ * @file
+ * Replacement 'Reusable layout' component styles of system/admin library.
+ */
+
+.layout-container {
+ margin-right: 1em;
+ margin-left: 1em;
+}
+.layout-container::after {
+ display: table;
+ clear: both;
+ content: "";
+}
+
+@media screen and (min-width: 38em) {
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-container,
+ body:not(.toolbar-tray-open) .layout-container {
+ margin-right: 3em;
+ margin-left: 3em;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-row,
+ body:not(.toolbar-tray-open) .layout-row {
+ margin-right: -1.5em;
+ margin-left: -1.5em;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+ body:not(.toolbar-tray-open) .layout-column {
+ float: left; /* LTR */
+ box-sizing: border-box;
+ padding-right: 1.5em;
+ padding-left: 1.5em;
+ }
+ [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+ [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {
+ float: right;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,
+ body:not(.toolbar-tray-open) .layout-column--half {
+ width: 50%;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,
+ body:not(.toolbar-tray-open) .layout-column--quarter {
+ width: 25%;
+ }
+ .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,
+ body:not(.toolbar-tray-open) .layout-column--three-quarter {
+ width: 75%;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .layout-container {
+ margin-right: 3em;
+ margin-left: 3em;
+ }
+ .layout-row {
+ margin-right: -1.5em;
+ margin-left: -1.5em;
+ }
+ .layout-column {
+ float: left; /* LTR */
+ box-sizing: border-box;
+ padding-right: 1.5em;
+ padding-left: 1.5em;
+ }
+ [dir="rtl"] .layout-column {
+ float: right;
+ }
+ .layout-column--half {
+ width: 50%;
+ }
+ .layout-column--quarter {
+ width: 25%;
+ }
+ .layout-column--three-quarter {
+ width: 75%;
+ }
+}
diff --git a/core/themes/claro/css/src/theme/ckeditor-dialog.css b/core/themes/claro/css/src/theme/ckeditor-dialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..971968a631e12c014fdc9332962eac53448a2e48
--- /dev/null
+++ b/core/themes/claro/css/src/theme/ckeditor-dialog.css
@@ -0,0 +1,375 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * CKEditor-native dialogs theming.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.cke_dialog_background_cover {
+ display: none;
+}
+
+.cke_dialog:before {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0.7;
+ background: #000;
+}
+
+[dir="rtl"] .cke_reset_all * {
+ text-align: right;
+ direction: rtl;
+}
+
+.cke_reset_all .cke_dialog_body {
+ position: relative;
+ border: 0;
+ border-radius: 0;
+ background: none;
+}
+
+.cke_reset_all .cke_dialog_body * {
+ font: 13px/1.538em BlinkMacSystemFont , -apple-system , "Segoe UI" , Roboto , Oxygen-Sans , Ubuntu , Cantarell , "Helvetica Neue" , sans-serif;
+}
+
+/* Dialog's header. */
+
+.cke_reset_all .cke_dialog_title {
+ padding: 15px 49px 15px 15px;
+ color: #fff;
+ border: 0;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background: #6b6b6b;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ text-shadow: none;
+ font-size: 1.3344em;
+ font-weight: 600;
+ line-height: 1.315em;
+ -webkit-font-smoothing: antialiased;
+}
+
+[dir="rtl"] .cke_reset_all .cke_dialog_title {
+ padding: 15px 15px 15px 49px;
+}
+
+/* More specificity to prevent overriding in high density screens. */
+
+.cke_reset_all .cke_dialog .cke_dialog_close_button {
+ top: 16px;
+ right: 20px;
+ width: 16px;
+ height: 16px;
+ opacity: 1;
+ background: url(../../../images/core/ffffff/ex.svg) 0 0 no-repeat;
+}
+
+[dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_close_button {
+ right: auto;
+ left: 20px;
+}
+
+.cke_reset_all .cke_dialog .cke_label {
+ display: none;
+}
+
+/* Dialog's body. */
+
+.cke_reset_all .cke_dialog_contents {
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+
+.cke_reset_all .cke_dialog_contents_body {
+ padding: 1em;
+}
+
+.cke_reset_all tr:hover,
+.cke_reset_all tr:focus {
+ background: none;
+}
+
+[dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_first,
+[dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_child {
+ padding-right: 0;
+ padding-left: 10px;
+}
+
+.cke_reset_all .cke_dialog_body label {
+ display: table;
+ margin: 0 0 0.1em;
+ padding: 0;
+ font-weight: bold;
+}
+
+.cke_reset_all .cke_dialog_body .cke_dialog_ui_input_text,
+.cke_reset_all .cke_dialog_body .cke_dialog_ui_input_textarea,
+.cke_reset_all .cke_dialog_body div.cke_dialog_ui_input_select {
+ border: 0;
+}
+
+.cke_reset_all .cke_dialog_body textarea,
+.cke_reset_all .cke_dialog_body input[type="text"],
+.cke_reset_all select.cke_dialog_ui_input_select {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ max-width: 100%;
+ margin: 0 0 3px;
+ padding: 0.3em 0.4em 0.3em 0.5em;
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+ -webkit-transition: border linear 0.2s, -webkit-box-shadow linear 0.2s;
+ transition: border linear 0.2s, -webkit-box-shadow linear 0.2s;
+ -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+ transition: border linear 0.2s, box-shadow linear 0.2s;
+ transition: border linear 0.2s, box-shadow linear 0.2s, -webkit-box-shadow linear 0.2s;
+ color: #595959;
+ border: 1px solid #b8b8b8;
+ border-top-color: #999;
+ border-radius: 2px;
+ background: #fcfcfa;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
+ font-size: 1em;
+ line-height: normal;
+}
+
+.cke_reset_all select.cke_dialog_ui_input_select {
+ padding-right: 1.5em;
+ background: #fcfcfa url(../../../images/core/333333/caret-down.svg) no-repeat 99% 63%;
+}
+
+.cke_reset_all .cke_dialog_body textarea:focus,
+.cke_reset_all .cke_dialog_body input[type="text"]:focus,
+.cke_reset_all select.cke_dialog_ui_input_select:focus {
+ border-color: #40b6ff;
+ outline: 0;
+ background-color: #fff;
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
+}
+
+/* Dialog's footer. */
+
+.cke_reset_all .cke_dialog .cke_dialog_footer {
+ margin: 0;
+ padding: 15px 20px;
+ text-align: left;
+ border: 0;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ outline: none;
+ background: #f5f5f2;
+}
+
+[dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_footer {
+ text-align: right;
+}
+
+.cke_reset_all .cke_dialog .cke_resizer {
+ display: none;
+}
+
+.cke_reset_all .cke_dialog_footer_buttons {
+ margin: 0;
+}
+
+.cke_dialog_footer_buttons td {
+ float: right;
+}
+
+[dir="rtl"] .cke_dialog_footer_buttons td {
+ float: left;
+}
+
+.cke_reset_all a.cke_dialog_ui_button {
+ position: relative;
+ display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-right: 1em;
+ padding: 4px 1.5em;
+ cursor: pointer;
+ -webkit-transition: all 0.1s;
+ -o-transition: all 0.1s;
+ -moz-transition: all 0.1s;
+ transition: all 0.1s;
+ text-align: center;
+ text-decoration: none;
+ color: #333;
+ border: 1px solid #a6a6a6;
+ border-radius: 20em;
+ background-color: #f2f1eb;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f3), to(#e7e7df));
+ background-image: -moz-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: -o-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+ text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+ font-size: 14px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ line-height: normal;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -webkit-font-smoothing: antialiased;
+}
+
+[dir="rtl"] .cke_reset_all a.cke_dialog_ui_button {
+ margin-right: 0;
+ margin-left: 1em;
+}
+
+/* More specificity to prevent overriding in high contrast mode. */
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
+ padding: 4px 1.5em;
+ text-decoration: none;
+ color: #1a1a1a;
+ border: 1px solid #a6a6a6;
+ background-color: #f9f8f6;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfa), to(#e9e9dd));
+ background-image: -moz-linear-gradient(top, #fcfcfa, #e9e9dd);
+ background-image: -o-linear-gradient(top, #fcfcfa, #e9e9dd);
+ background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
+ -webkit-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+ box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
+ z-index: 10;
+ border: 1px solid #3ab2ff;
+ -webkit-box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+ box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active {
+ padding: 4px 1.5em;
+ -webkit-transition: none;
+ -o-transition: none;
+ -moz-transition: none;
+ transition: none;
+ border: 1px solid #a6a6a6;
+ background-color: #dfdfd9;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f3), to(#e7e7df));
+ background-image: -moz-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: -o-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+ -webkit-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
+ padding: 0;
+ text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+ font-size: 0.875rem;
+ line-height: normal;
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover span,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus span,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active span {
+ padding: 0;
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok {
+ color: #fff;
+ border-color: #1e5c90;
+ background-color: #0071b8;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#007bc6), to(#0071b8));
+ background-image: -moz-linear-gradient(top, #007bc6, #0071b8);
+ background-image: -o-linear-gradient(top, #007bc6, #0071b8);
+ background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+ text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+ font-weight: 700;
+ -webkit-font-smoothing: antialiased;
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
+ color: #fff;
+ border-color: #1e5c90;
+ background-color: #2369a6;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#0c97ed), to(#1f86c7));
+ background-image: -moz-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: -o-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+ -webkit-box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+ box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
+ border: 1px solid #1280df;
+ -webkit-box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+ box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:active {
+ border-color: #144b78;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#08639b), to(#0071b8));
+ background-image: -moz-linear-gradient(top, #08639b, #0071b8);
+ background-image: -o-linear-gradient(top, #08639b, #0071b8);
+ background-image: linear-gradient(to bottom, #08639b, #0071b8);
+ -webkit-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok span {
+ text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+}
diff --git a/core/themes/claro/css/src/theme/ckeditor-dialog.pcss.css b/core/themes/claro/css/src/theme/ckeditor-dialog.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..6bf0f54dbbdfda0e8d26d8e12ad8c37dc4de45a4
--- /dev/null
+++ b/core/themes/claro/css/src/theme/ckeditor-dialog.pcss.css
@@ -0,0 +1,256 @@
+/**
+ * @file
+ * CKEditor-native dialogs theming.
+ */
+
+@import "../base/variables.pcss.css";
+
+.cke_dialog_background_cover {
+ display: none;
+}
+.cke_dialog:before {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0.7;
+ background: #000;
+}
+[dir="rtl"] .cke_reset_all * {
+ text-align: right;
+ direction: rtl;
+}
+.cke_reset_all .cke_dialog_body {
+ position: relative;
+ border: 0;
+ border-radius: 0;
+ background: none;
+}
+.cke_reset_all .cke_dialog_body * {
+ font: 13px/1.538em var(--font-family);
+}
+
+/* Dialog's header. */
+.cke_reset_all .cke_dialog_title {
+ padding: 15px 49px 15px 15px;
+ color: #fff;
+ border: 0;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background: #6b6b6b;
+ box-shadow: none;
+ text-shadow: none;
+ font-size: 1.3344em;
+ font-weight: 600;
+ line-height: 1.315em;
+ -webkit-font-smoothing: antialiased;
+}
+[dir="rtl"] .cke_reset_all .cke_dialog_title {
+ padding: 15px 15px 15px 49px;
+}
+
+/* More specificity to prevent overriding in high density screens. */
+.cke_reset_all .cke_dialog .cke_dialog_close_button {
+ top: 16px;
+ right: 20px;
+ width: 16px;
+ height: 16px;
+ opacity: 1;
+ background: url(../../../images/core/ffffff/ex.svg) 0 0 no-repeat;
+}
+[dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_close_button {
+ right: auto;
+ left: 20px;
+}
+.cke_reset_all .cke_dialog .cke_label {
+ display: none;
+}
+
+/* Dialog's body. */
+.cke_reset_all .cke_dialog_contents {
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+.cke_reset_all .cke_dialog_contents_body {
+ padding: 1em;
+}
+.cke_reset_all tr:hover,
+.cke_reset_all tr:focus {
+ background: none;
+}
+[dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_first,
+[dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_child {
+ padding-right: 0;
+ padding-left: 10px;
+}
+.cke_reset_all .cke_dialog_body label {
+ display: table;
+ margin: 0 0 0.1em;
+ padding: 0;
+ font-weight: bold;
+}
+.cke_reset_all .cke_dialog_body .cke_dialog_ui_input_text,
+.cke_reset_all .cke_dialog_body .cke_dialog_ui_input_textarea,
+.cke_reset_all .cke_dialog_body div.cke_dialog_ui_input_select {
+ border: 0;
+}
+.cke_reset_all .cke_dialog_body textarea,
+.cke_reset_all .cke_dialog_body input[type="text"],
+.cke_reset_all select.cke_dialog_ui_input_select {
+ box-sizing: border-box;
+ max-width: 100%;
+ margin: 0 0 3px;
+ padding: 0.3em 0.4em 0.3em 0.5em;
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+ transition: border linear 0.2s, box-shadow linear 0.2s;
+ color: #595959;
+ border: 1px solid #b8b8b8;
+ border-top-color: #999;
+ border-radius: 2px;
+ background: #fcfcfa;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
+ font-size: 1em;
+ line-height: normal;
+}
+.cke_reset_all select.cke_dialog_ui_input_select {
+ padding-right: 1.5em;
+ background: #fcfcfa url(../../../images/core/333333/caret-down.svg) no-repeat 99% 63%;
+}
+.cke_reset_all .cke_dialog_body textarea:focus,
+.cke_reset_all .cke_dialog_body input[type="text"]:focus,
+.cke_reset_all select.cke_dialog_ui_input_select:focus {
+ border-color: #40b6ff;
+ outline: 0;
+ background-color: #fff;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
+}
+
+/* Dialog's footer. */
+.cke_reset_all .cke_dialog .cke_dialog_footer {
+ margin: 0;
+ padding: 15px 20px;
+ text-align: left;
+ border: 0;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ outline: none;
+ background: #f5f5f2;
+}
+[dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_footer {
+ text-align: right;
+}
+.cke_reset_all .cke_dialog .cke_resizer {
+ display: none;
+}
+.cke_reset_all .cke_dialog_footer_buttons {
+ margin: 0;
+}
+.cke_dialog_footer_buttons td {
+ float: right;
+}
+[dir="rtl"] .cke_dialog_footer_buttons td {
+ float: left;
+}
+.cke_reset_all a.cke_dialog_ui_button {
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ margin-right: 1em;
+ padding: 4px 1.5em;
+ cursor: pointer;
+ -webkit-transition: all 0.1s;
+ transition: all 0.1s;
+ text-align: center;
+ text-decoration: none;
+ color: #333;
+ border: 1px solid #a6a6a6;
+ border-radius: 20em;
+ background-color: #f2f1eb;
+ background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+ text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+ font-size: 14px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ line-height: normal;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -webkit-font-smoothing: antialiased;
+}
+[dir="rtl"] .cke_reset_all a.cke_dialog_ui_button {
+ margin-right: 0;
+ margin-left: 1em;
+}
+
+/* More specificity to prevent overriding in high contrast mode. */
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
+ padding: 4px 1.5em;
+ text-decoration: none;
+ color: #1a1a1a;
+ border: 1px solid #a6a6a6;
+ background-color: #f9f8f6;
+ background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+ background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
+ box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
+ z-index: 10;
+ border: 1px solid #3ab2ff;
+ box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active {
+ padding: 4px 1.5em;
+ -webkit-transition: none;
+ transition: none;
+ border: 1px solid #a6a6a6;
+ background-color: #dfdfd9;
+ background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
+ padding: 0;
+ text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+ font-size: 0.875rem;
+ line-height: normal;
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover span,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus span,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active span {
+ padding: 0;
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok {
+ color: #fff;
+ border-color: #1e5c90;
+ background-color: #0071b8;
+ background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+ background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+ text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+ font-weight: 700;
+ -webkit-font-smoothing: antialiased;
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover,
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
+ color: #fff;
+ border-color: #1e5c90;
+ background-color: #2369a6;
+ background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+ box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
+ border: 1px solid #1280df;
+ box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:active {
+ border-color: #144b78;
+ background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
+ background-image: linear-gradient(to bottom, #08639b, #0071b8);
+ box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+.cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok span {
+ text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+}
diff --git a/core/themes/claro/css/src/theme/ckeditor-editor.css b/core/themes/claro/css/src/theme/ckeditor-editor.css
new file mode 100644
index 0000000000000000000000000000000000000000..7097a9fcc05ffc7a1583f84a9b61fb4eefe580ff
--- /dev/null
+++ b/core/themes/claro/css/src/theme/ckeditor-editor.css
@@ -0,0 +1,177 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * CKEditor appearance overrides.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.cke .cke_top,
+.cke .cke_bottom,
+.cke .cke_contents,
+.cke.cke_chrome {
+ -webkit-transition: border-color 0.2s ease-in-out 0s;
+ -o-transition: border-color 0.2s ease-in-out 0s;
+ -moz-transition: border-color 0.2s ease-in-out 0s;
+ transition: border-color 0.2s ease-in-out 0s;
+}
+
+.cke.cke_chrome {
+ border-radius: 0.125em; /* (2 / 16) */
+}
+
+.cke .cke_inner {
+ border-radius: 0.0625em; /* (1 / 16) */
+}
+
+.cke_path_empty:only-child::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ content: "";
+ background: #fff;
+}
+
+.cke .cke_top {
+ border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+ border-bottom: 0;
+ border-radius: 0.0833em 0.0833em 0 0;
+}
+
+.cke .cke_contents {
+ border: 0.0625em solid transparent;
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.cke .cke_bottom {
+ border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+ border-top: 0;
+ border-radius: 0 0 0.0833em 0.0833em;
+}
+
+/* Default */
+
+.cke.cke_chrome {
+ border-color: #8e929c;
+}
+
+/* Error. */
+
+.error + .cke.cke_chrome,
+.error + .cke .cke_contents,
+.error + .cke .cke_top,
+.error + .cke .cke_bottom {
+ border-color: #d72222;
+}
+
+/* Hover. */
+
+.cke.cke_chrome:hover,
+.cke:hover .cke_contents,
+.cke:hover .cke_top,
+.cke:hover .cke_bottom,
+.error + .cke.cke_chrome:hover,
+.error + .cke:hover .cke_contents,
+.error + .cke:hover .cke_top,
+.error + .cke:hover .cke_bottom {
+ border-color: #222330;
+}
+
+/* Focus. */
+
+.cke.cke_chrome.cke_focus,
+.cke.cke_focus .cke_contents,
+.cke.cke_focus .cke_top,
+.cke.cke_focus .cke_bottom,
+.error + .cke.cke_chrome.cke_focus,
+.error + .cke.cke_focus .cke_contents,
+.error + .cke.cke_focus .cke_top,
+.error + .cke.cke_focus .cke_bottom {
+ border-color: #003cc5;
+}
+
+/* Disabled. */
+
+[disabled] + .cke.cke_chrome {
+ border-color: #bababf;
+}
+
+[disabled] + .cke .cke_contents,
+[disabled] + .cke .cke_top,
+[disabled] + .cke .cke_bottom {
+ border-color: transparent;
+}
+
+[disabled] + .cke .cke_contents {
+ border-color: #f2f2f3;
+ background: hsl(240, 4%, 90%); /* Calculated from disabled input bg and iframe opacity. */
+}
+
+[disabled] + .cke iframe,
+[disabled] + .cke .cke_source {
+ opacity: 0.505;
+}
+
+[disabled] + .cke .cke_bottom {
+ background: #f2f2f3;
+}
+
+[disabled] + .cke .cke_bottom > * {
+ /* Don't show element path dor disabled editor. */
+ opacity: 0;
+}
+
+[disabled] + .cke .cke_path_empty::after {
+ content: none;
+}
diff --git a/core/themes/claro/css/src/theme/ckeditor-editor.pcss.css b/core/themes/claro/css/src/theme/ckeditor-editor.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..e23b80ee5ef0629e4598be927ac920b76e4adc0a
--- /dev/null
+++ b/core/themes/claro/css/src/theme/ckeditor-editor.pcss.css
@@ -0,0 +1,114 @@
+/**
+ * @file
+ * CKEditor appearance overrides.
+ */
+
+@import "../base/variables.pcss.css";
+
+.cke .cke_top,
+.cke .cke_bottom,
+.cke .cke_contents,
+.cke.cke_chrome {
+ transition: border-color var(--speed-transition) ease-in-out 0s;
+}
+
+.cke.cke_chrome {
+ border-radius: 0.125em; /* (2 / 16) */
+}
+
+.cke .cke_inner {
+ border-radius: 0.0625em; /* (1 / 16) */
+}
+
+.cke_path_empty:only-child::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ content: "";
+ background: var(--input-bg-color);
+}
+
+.cke .cke_top {
+ border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+ border-bottom: 0;
+ border-radius: 0.0833em 0.0833em 0 0;
+}
+
+.cke .cke_contents {
+ border: 0.0625em solid transparent;
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.cke .cke_bottom {
+ border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+ border-top: 0;
+ border-radius: 0 0 0.0833em 0.0833em;
+}
+
+/* Default */
+.cke.cke_chrome {
+ border-color: var(--input-border-color);
+}
+
+/* Error. */
+.error + .cke.cke_chrome,
+.error + .cke .cke_contents,
+.error + .cke .cke_top,
+.error + .cke .cke_bottom {
+ border-color: var(--input--error-border-color);
+}
+
+/* Hover. */
+.cke.cke_chrome:hover,
+.cke:hover .cke_contents,
+.cke:hover .cke_top,
+.cke:hover .cke_bottom,
+.error + .cke.cke_chrome:hover,
+.error + .cke:hover .cke_contents,
+.error + .cke:hover .cke_top,
+.error + .cke:hover .cke_bottom {
+ border-color: var(--input--hover-border-color);
+}
+
+/* Focus. */
+.cke.cke_chrome.cke_focus,
+.cke.cke_focus .cke_contents,
+.cke.cke_focus .cke_top,
+.cke.cke_focus .cke_bottom,
+.error + .cke.cke_chrome.cke_focus,
+.error + .cke.cke_focus .cke_contents,
+.error + .cke.cke_focus .cke_top,
+.error + .cke.cke_focus .cke_bottom {
+ border-color: var(--input--focus-border-color);
+}
+
+/* Disabled. */
+[disabled] + .cke.cke_chrome {
+ border-color: var(--input--disabled-border-color);
+}
+[disabled] + .cke .cke_contents,
+[disabled] + .cke .cke_top,
+[disabled] + .cke .cke_bottom {
+ border-color: transparent;
+}
+[disabled] + .cke .cke_contents {
+ border-color: var(--input--disabled-bg-color);
+ background: hsl(240, 4%, 90%); /* Calculated from disabled input bg and iframe opacity. */
+}
+[disabled] + .cke iframe,
+[disabled] + .cke .cke_source {
+ opacity: 0.505;
+}
+[disabled] + .cke .cke_bottom {
+ background: var(--input--disabled-bg-color);
+}
+[disabled] + .cke .cke_bottom > * {
+ /* Don't show element path dor disabled editor. */
+ opacity: 0;
+}
+[disabled] + .cke .cke_path_empty::after {
+ content: none;
+}
diff --git a/core/themes/claro/css/src/theme/ckeditor-frame.css b/core/themes/claro/css/src/theme/ckeditor-frame.css
new file mode 100644
index 0000000000000000000000000000000000000000..e07e8dee9a6d6f33fd9353cd2eebab8cf1c5619d
--- /dev/null
+++ b/core/themes/claro/css/src/theme/ckeditor-frame.css
@@ -0,0 +1,61 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * CKEditor frame styles.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.cke_editable:not(.cke_editable_inline) {
+ margin: 1em -webkit-calc(1em - 2px);
+ margin: 1em -moz-calc(1em - 2px);
+ margin: 1em calc(1em - 2px);
+}
diff --git a/core/themes/claro/css/src/theme/ckeditor-frame.pcss.css b/core/themes/claro/css/src/theme/ckeditor-frame.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..9d97cdc8fa4672f91194e96c9000bdb7ef8c12bd
--- /dev/null
+++ b/core/themes/claro/css/src/theme/ckeditor-frame.pcss.css
@@ -0,0 +1,10 @@
+/**
+ * @file
+ * CKEditor frame styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+.cke_editable:not(.cke_editable_inline) {
+ margin: 1em calc(1em - var(--input-border-size) - var(--input-border-size));
+}
diff --git a/core/themes/claro/css/src/theme/colors.css b/core/themes/claro/css/src/theme/colors.css
new file mode 100644
index 0000000000000000000000000000000000000000..327cd21f6f5525796eed6927f5fbe6f5afdc957b
--- /dev/null
+++ b/core/themes/claro/css/src/theme/colors.css
@@ -0,0 +1,21 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+/**
+ * Reusable colors.
+ */
+.color-success {
+ color: #325e1c;
+ background-color: #f3faef;
+}
+.color-warning {
+ color: #734c00;
+ background-color: #fdf8ed;
+}
+.color-error {
+ color: #a51b00;
+ background-color: #fcf4f2;
+}
diff --git a/core/themes/claro/css/src/theme/colors.pcss.css b/core/themes/claro/css/src/theme/colors.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac8823996fa6bcde322188d46ebcc30f638b8500
--- /dev/null
+++ b/core/themes/claro/css/src/theme/colors.pcss.css
@@ -0,0 +1,15 @@
+/**
+ * Reusable colors.
+ */
+.color-success {
+ color: #325e1c;
+ background-color: #f3faef;
+}
+.color-warning {
+ color: #734c00;
+ background-color: #fdf8ed;
+}
+.color-error {
+ color: #a51b00;
+ background-color: #fcf4f2;
+}
diff --git a/core/themes/claro/css/src/theme/field-ui.admin.css b/core/themes/claro/css/src/theme/field-ui.admin.css
new file mode 100644
index 0000000000000000000000000000000000000000..f9d035f68e9bdfb46dc3f34989a41635eecb62d3
--- /dev/null
+++ b/core/themes/claro/css/src/theme/field-ui.admin.css
@@ -0,0 +1,138 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Replacement styles for Field UI admin.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/* 'Manage fields' and 'Manage display' overviews */
+
+.field-ui-overview .region-title td {
+ font-weight: bold;
+}
+
+.field-ui-overview .region-message td {
+ font-style: italic;
+}
+
+/* 'Manage form display' and 'Manage display' overview */
+
+.field-plugin-summary {
+ float: left; /* LTR */
+ font-size: 0.889rem;
+}
+
+[dir="rtl"] .field-plugin-summary {
+ float: right;
+}
+
+.field-plugin-summary-cell .warning {
+ display: block;
+ float: left; /* LTR */
+ margin-right: 0.5em; /* LTR */
+}
+
+[dir="rtl"] .field-plugin-summary-cell .warning {
+ float: right;
+ margin-right: 0;
+ margin-left: 0.5em;
+}
+
+/* Settings edit. */
+
+.field-plugin-settings-edit-wrapper {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -moz-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -moz-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.field-plugin-settings-edit {
+ width: 1rem;
+ margin: 0;
+ padding: 1px 8px;
+}
+
+.field-plugin-settings-edit-wrapper .ajax-progress--throbber {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+/* Settings editing subform. */
+
+.draggable.field-plugin-settings-editing,
+.draggable.drag-previous.field-plugin-settings-editing {
+ background: #d5e9f2;
+}
+
+.field-plugin-settings-editing td {
+ vertical-align: top;
+}
+
+.field-plugin-settings-editing .field-plugin-type {
+ display: none;
+}
+
+.field-plugin-settings-edit-form .plugin-name {
+ font-weight: bold;
+}
diff --git a/core/themes/claro/css/src/theme/field-ui.admin.pcss.css b/core/themes/claro/css/src/theme/field-ui.admin.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..b989d27cc10cb82df524cc0377be99fd0fa2fd33
--- /dev/null
+++ b/core/themes/claro/css/src/theme/field-ui.admin.pcss.css
@@ -0,0 +1,67 @@
+/**
+ * @file
+ * Replacement styles for Field UI admin.
+ */
+
+@import "../base/variables.pcss.css";
+
+/* 'Manage fields' and 'Manage display' overviews */
+.field-ui-overview .region-title td {
+ font-weight: bold;
+}
+.field-ui-overview .region-message td {
+ font-style: italic;
+}
+
+/* 'Manage form display' and 'Manage display' overview */
+.field-plugin-summary {
+ float: left; /* LTR */
+ font-size: var(--font-size-s);
+}
+[dir="rtl"] .field-plugin-summary {
+ float: right;
+}
+.field-plugin-summary-cell .warning {
+ display: block;
+ float: left; /* LTR */
+ margin-right: 0.5em; /* LTR */
+}
+[dir="rtl"] .field-plugin-summary-cell .warning {
+ float: right;
+ margin-right: 0;
+ margin-left: 0.5em;
+}
+
+/* Settings edit. */
+.field-plugin-settings-edit-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.field-plugin-settings-edit {
+ width: var(--space-m);
+ margin: 0;
+ padding: 1px 8px;
+}
+
+.field-plugin-settings-edit-wrapper .ajax-progress--throbber {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+/* Settings editing subform. */
+.draggable.field-plugin-settings-editing,
+.draggable.drag-previous.field-plugin-settings-editing {
+ background: #d5e9f2;
+}
+
+.field-plugin-settings-editing td {
+ vertical-align: top;
+}
+.field-plugin-settings-editing .field-plugin-type {
+ display: none;
+}
+.field-plugin-settings-edit-form .plugin-name {
+ font-weight: bold;
+}
diff --git a/core/themes/claro/css/src/theme/filter.theme.css b/core/themes/claro/css/src/theme/filter.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..1b1f503c869b5779517b01ecd43734dbb4f6ab46
--- /dev/null
+++ b/core/themes/claro/css/src/theme/filter.theme.css
@@ -0,0 +1,142 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for the Filter module.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/**
+ * Filter information under field.
+ */
+
+.text-full > .form-item {
+ margin-bottom: 0;
+}
+
+.form-element--editor-format {
+ vertical-align: top;
+}
+
+@media screen and (max-width: 600px) {
+ /* Leave editor's select auto-scaled. */
+ .form-element.form-element--editor-format {
+ width: auto;
+ }
+}
+
+.filter-wrapper {
+ margin-top: 0.5em; /* (8 / 16) */
+ margin-bottom: 0.5em; /* (8 / 16) */
+}
+
+.filter-wrapper .form-item {
+ margin: 0;
+}
+
+.filter-help {
+ float: right; /* LTR */
+ padding-top: 0.25em; /* (3 / 12), because font size is 12px */
+ padding-bottom: 0.25em; /* (3 / 12) */
+ font-size: 0.75em; /* (12 / 16), inherited font size is 16px */
+}
+
+[dir="rtl"] .filter-help {
+ float: left;
+}
+
+/**
+ * Compose tips.
+ *
+ * Wraps filter tips on page '/filter/tips[/name]'.
+ */
+
+.compose-tips__item {
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+}
+
+/**
+ * Filter guidelines.
+ */
+
+.filter-guidelines__item {
+ margin-top: 0.5em; /* (6 / 12) */
+ color: #545560;
+ font-size: 0.75em; /* (12 / 16) */
+}
+
+.filter-guidelines p {
+ margin-top: 0.3333em; /* (4 / 12) */
+ margin-bottom: 0;
+}
+
+/**
+ * Filter tips.
+ *
+ * Long is used on '/filter/tips[/name]', short is used for the filter tips
+ * below a text format input.
+ */
+
+.filter-tips--long {
+ margin-bottom: 1.5em;
+}
+
+.filter-tips__item,
+.filter-tips--long p {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+}
+
+.filter-tips__item--short {
+ margin-top: 0.3333em; /* (4 / 12) */
+ margin-bottom: 0;
+}
diff --git a/core/themes/claro/css/src/theme/filter.theme.pcss.css b/core/themes/claro/css/src/theme/filter.theme.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..460cb7b2e8c728e27db6d058866716a816e57380
--- /dev/null
+++ b/core/themes/claro/css/src/theme/filter.theme.pcss.css
@@ -0,0 +1,83 @@
+/**
+ * @file
+ * Styling for the Filter module.
+ */
+
+@import "../base/variables.pcss.css";
+
+/**
+ * Filter information under field.
+ */
+.text-full > .form-item {
+ margin-bottom: 0;
+}
+.form-element--editor-format {
+ vertical-align: top;
+}
+
+@media screen and (max-width: 600px) {
+ /* Leave editor's select auto-scaled. */
+ .form-element.form-element--editor-format {
+ width: auto;
+ }
+}
+
+.filter-wrapper {
+ margin-top: 0.5em; /* (8 / 16) */
+ margin-bottom: 0.5em; /* (8 / 16) */
+}
+.filter-wrapper .form-item {
+ margin: 0;
+}
+
+.filter-help {
+ float: right; /* LTR */
+ padding-top: 0.25em; /* (3 / 12), because font size is 12px */
+ padding-bottom: 0.25em; /* (3 / 12) */
+ font-size: 0.75em; /* (12 / 16), inherited font size is 16px */
+}
+[dir="rtl"] .filter-help {
+ float: left;
+}
+
+/**
+ * Compose tips.
+ *
+ * Wraps filter tips on page '/filter/tips[/name]'.
+ */
+.compose-tips__item {
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+}
+
+/**
+ * Filter guidelines.
+ */
+.filter-guidelines__item {
+ margin-top: 0.5em; /* (6 / 12) */
+ color: var(--input-fg-color--description);
+ font-size: 0.75em; /* (12 / 16) */
+}
+.filter-guidelines p {
+ margin-top: 0.3333em; /* (4 / 12) */
+ margin-bottom: 0;
+}
+
+/**
+ * Filter tips.
+ *
+ * Long is used on '/filter/tips[/name]', short is used for the filter tips
+ * below a text format input.
+ */
+.filter-tips--long {
+ margin-bottom: 1.5em;
+}
+.filter-tips__item,
+.filter-tips--long p {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+}
+.filter-tips__item--short {
+ margin-top: 0.3333em; /* (4 / 12) */
+ margin-bottom: 0;
+}
diff --git a/core/themes/claro/css/src/theme/install-page.css b/core/themes/claro/css/src/theme/install-page.css
new file mode 100644
index 0000000000000000000000000000000000000000..096e7a821e35f8dbbe8a98c9e8085a07a708d586
--- /dev/null
+++ b/core/themes/claro/css/src/theme/install-page.css
@@ -0,0 +1,68 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+/**
+ * @file
+ * Installation styling.
+ *
+ * Unfortunately we have to make our styling quite strong, to override the
+ * .maintenance-page styling.
+ */
+.install-page {
+ min-height: 100%;
+ background-color: #1275b2;
+ background-image:
+ url(../../../images/noise-low.png),
+ -moz-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
+ background-image:
+ url(../../../images/noise-low.png),
+ -o-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
+ background-image:
+ url(../../../images/noise-low.png),
+ radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
+ background-repeat: repeat;
+ background-position: left top, 50% 50%; /* LTR */
+}
+[dir="rtl"] .install-page {
+ background-position: right top, 50% 50%;
+}
+/**
+ * Password widget
+ */
+.install-page .password-parent,
+.install-page .confirm-parent {
+ width: auto;
+}
+.install-page .form-item .password-suggestions {
+ float: none;
+ width: auto;
+}
+.install-page table td {
+ word-break: break-all;
+}
+.install-page .site-version {
+ vertical-align: super;
+ color: #595959;
+ font-size: 0.5em;
+}
+@media all and (max-width: 1010px) and (min-width: 48em) {
+ .install-page .password-strength,
+ .install-page .confirm-parent {
+ width: 100%;
+ }
+ .install-configure-form .form-type-password {
+ width: 100%;
+ }
+ .password-confirm,
+ .password-field {
+ float: none;
+ }
+ .password-confirm-match {
+ float: none;
+ width: auto;
+ max-width: 100%;
+ }
+}
diff --git a/core/themes/claro/css/src/theme/install-page.pcss.css b/core/themes/claro/css/src/theme/install-page.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..4139a90663c3dccd33d22f04bbd792dac47e3eeb
--- /dev/null
+++ b/core/themes/claro/css/src/theme/install-page.pcss.css
@@ -0,0 +1,62 @@
+/**
+ * @file
+ * Installation styling.
+ *
+ * Unfortunately we have to make our styling quite strong, to override the
+ * .maintenance-page styling.
+ */
+.install-page {
+ min-height: 100%;
+ background-color: #1275b2;
+ background-image:
+ url(../../../images/noise-low.png),
+ -webkit-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
+ background-image:
+ url(../../../images/noise-low.png),
+ radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
+ background-repeat: repeat;
+ background-position: left top, 50% 50%; /* LTR */
+}
+[dir="rtl"] .install-page {
+ background-position: right top, 50% 50%;
+}
+
+/**
+ * Password widget
+ */
+.install-page .password-parent,
+.install-page .confirm-parent {
+ width: auto;
+}
+.install-page .form-item .password-suggestions {
+ float: none;
+ width: auto;
+}
+.install-page table td {
+ word-break: break-all;
+}
+
+.install-page .site-version {
+ vertical-align: super;
+ color: #595959;
+ font-size: 0.5em;
+}
+
+@media all and (max-width: 1010px) and (min-width: 48em) {
+ .install-page .password-strength,
+ .install-page .confirm-parent {
+ width: 100%;
+ }
+ .install-configure-form .form-type-password {
+ width: 100%;
+ }
+ .password-confirm,
+ .password-field {
+ float: none;
+ }
+ .password-confirm-match {
+ float: none;
+ width: auto;
+ max-width: 100%;
+ }
+}
diff --git a/core/themes/claro/css/src/theme/maintenance-page.css b/core/themes/claro/css/src/theme/maintenance-page.css
new file mode 100644
index 0000000000000000000000000000000000000000..99d188fb8f24220beb8fd3756d0f895b0ba3c301
--- /dev/null
+++ b/core/themes/claro/css/src/theme/maintenance-page.css
@@ -0,0 +1,222 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Maintenance theming.
+ */
+
+.maintenance-page {
+ min-height: 100%;
+ background-color: #e0e0d8;
+ background-image: -moz-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+ background-image: -o-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+ background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+ background-repeat: repeat;
+ background-position: left top, 50% 50%; /* LTR */
+}
+
+[dir="rtl"] .maintenance-page {
+ background-position: right top, 50% 50%;
+}
+
+.page-title {
+ word-wrap: break-word;
+ color: #0074bd;
+ font-size: 2em;
+ line-height: 1.2em;
+}
+
+/**
+ * Task list & step indicator
+ */
+
+@media all and (max-width: 48em) { /* 768px */
+ header[role="banner"] {
+ position: relative;
+ }
+ .step-indicator {
+ position: absolute;
+ top: 0.2em;
+ right: 0.5em; /* LTR */
+ display: block;
+ font-size: 1.385em;
+ }
+ [dir="rtl"] .step-indicator {
+ right: auto;
+ left: 0.5em;
+ }
+ .task-list {
+ display: none;
+ }
+}
+
+@media all and (min-width: 48em) { /* 768px */
+ .step-indicator {
+ display: none;
+ }
+ .task-list {
+ margin-left: 0; /* LTR */
+ padding-bottom: 1em;
+ padding-left: 0; /* LTR */
+ list-style-type: none;
+ }
+ [dir="rtl"] .task-list {
+ margin-right: 0;
+ padding-right: 0;
+ }
+ .task-list li {
+ padding: 0.5em 1em 0.5em 3.85em; /* LTR */
+ color: #1a1a1a;
+ }
+ [dir="rtl"] .task-list li {
+ padding: 0.5em 3.85em 0.5em 1em;
+ }
+ .task-list .is-active {
+ position: relative;
+ background: #ebeae4;
+ font-weight: normal;
+ }
+ .task-list .is-active:after {
+ position: absolute;
+ top: 50%;
+ left: 100%; /* LTR */
+ width: 0;
+ height: 0;
+ margin-top: -1.269em;
+ content: " ";
+ pointer-events: none;
+ border: solid transparent;
+ border-width: 1.269em;
+ border-color: rgba(235, 234, 228, 0);
+ border-left-color: #ebeae4; /* LTR */
+ }
+ [dir="rtl"] .task-list .is-active:after {
+ right: 100%;
+ left: auto;
+ border-right-color: #ebeae4;
+ border-left-color: transparent;
+ }
+ .task-list .done {
+ color: #adadad;
+ }
+}
+
+/**
+ * Layout
+ */
+
+.layout-container {
+ width: auto;
+ margin-right: 1.25em;
+ margin-left: 1.25em;
+ background: #fff;
+}
+
+.layout-container:after { /* no reason for a clearfix in the markup */
+ display: table;
+ clear: both;
+ content: "";
+}
+
+@media all and (max-width: 48em) { /* 768px */
+ .layout-container {
+ margin: 1.25em;
+ padding: 10px 20px;
+ }
+ .page-title {
+ margin-right: 2em; /* LTR */
+ margin-bottom: 0.725em;
+ }
+ [dir="rtl"] .page-title {
+ margin-right: 0;
+ margin-left: 2em;
+ }
+}
+
+@media all and (min-width: 48em) { /* 768px */
+ html {
+ display: table;
+ }
+ .install-page,
+ .maintenance-page {
+ display: table-cell;
+ padding: 1em 0;
+ vertical-align: middle;
+ }
+ html,
+ .install-page,
+ .maintenance-page {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ .layout-container {
+ width: 75%;
+ max-width: 770px;
+ margin: 0 auto;
+ padding: 20px 0 40px 0;
+ border-radius: 5px;
+ -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+ }
+
+ /* Positioning sidebar & content */
+ main {
+ float: left; /* LTR */
+ clear: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 65%;
+ padding-right: 3.85em;
+ padding-left: 3.85em;
+ }
+ [dir="rtl"] main {
+ float: right;
+ }
+ ul {
+ margin: 0.25em 0;
+ padding: 15px;
+ }
+ [dir="rtl"] ul {
+ margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
+ }
+ .layout-sidebar-first {
+ float: left; /* LTR */
+ width: 35%;
+ }
+ [dir="rtl"] .layout-sidebar-first {
+ float: right;
+ }
+
+ /* Margins for sitename */
+ .page-title {
+ margin: 0.75em 1.9em;
+ }
+}
+
+/**
+ * Status report customization for install and update page.
+ */
+
+.system-status-report__status-title {
+ float: none;
+ width: 100%;
+}
+
+.system-status-report__entry__value {
+ float: none;
+ width: 100%;
+ padding-top: 0;
+ padding-left: 3em; /* LTR */
+}
+
+[dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 1em;
+}
diff --git a/core/themes/claro/css/src/theme/maintenance-page.pcss.css b/core/themes/claro/css/src/theme/maintenance-page.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..047b88ff1c18056ac57c01d025759a159c03f8e7
--- /dev/null
+++ b/core/themes/claro/css/src/theme/maintenance-page.pcss.css
@@ -0,0 +1,204 @@
+/**
+ * @file
+ * Maintenance theming.
+ */
+
+.maintenance-page {
+ min-height: 100%;
+ background-color: #e0e0d8;
+ background-image: -webkit-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+ background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+ background-repeat: repeat;
+ background-position: left top, 50% 50%; /* LTR */
+}
+[dir="rtl"] .maintenance-page {
+ background-position: right top, 50% 50%;
+}
+
+.page-title {
+ word-wrap: break-word;
+ color: #0074bd;
+ font-size: 2em;
+ line-height: 1.2em;
+}
+
+/**
+ * Task list & step indicator
+ */
+@media all and (max-width: 48em) { /* 768px */
+ header[role="banner"] {
+ position: relative;
+ }
+ .step-indicator {
+ position: absolute;
+ top: 0.2em;
+ right: 0.5em; /* LTR */
+ display: block;
+ font-size: 1.385em;
+ }
+ [dir="rtl"] .step-indicator {
+ right: auto;
+ left: 0.5em;
+ }
+ .task-list {
+ display: none;
+ }
+}
+
+@media all and (min-width: 48em) { /* 768px */
+ .step-indicator {
+ display: none;
+ }
+ .task-list {
+ margin-left: 0; /* LTR */
+ padding-bottom: 1em;
+ padding-left: 0; /* LTR */
+ list-style-type: none;
+ }
+ [dir="rtl"] .task-list {
+ margin-right: 0;
+ padding-right: 0;
+ }
+ .task-list li {
+ padding: 0.5em 1em 0.5em 3.85em; /* LTR */
+ color: #1a1a1a;
+ }
+ [dir="rtl"] .task-list li {
+ padding: 0.5em 3.85em 0.5em 1em;
+ }
+ .task-list .is-active {
+ position: relative;
+ background: #ebeae4;
+ font-weight: normal;
+ }
+ .task-list .is-active:after {
+ position: absolute;
+ top: 50%;
+ left: 100%; /* LTR */
+ width: 0;
+ height: 0;
+ margin-top: -1.269em;
+ content: " ";
+ pointer-events: none;
+ border: solid transparent;
+ border-width: 1.269em;
+ border-color: rgba(235, 234, 228, 0);
+ border-left-color: #ebeae4; /* LTR */
+ }
+ [dir="rtl"] .task-list .is-active:after {
+ right: 100%;
+ left: auto;
+ border-right-color: #ebeae4;
+ border-left-color: transparent;
+ }
+ .task-list .done {
+ color: #adadad;
+ }
+}
+
+/**
+ * Layout
+ */
+.layout-container {
+ width: auto;
+ margin-right: 1.25em;
+ margin-left: 1.25em;
+ background: #fff;
+}
+.layout-container:after { /* no reason for a clearfix in the markup */
+ display: table;
+ clear: both;
+ content: "";
+}
+
+@media all and (max-width: 48em) { /* 768px */
+ .layout-container {
+ margin: 1.25em;
+ padding: 10px 20px;
+ }
+ .page-title {
+ margin-right: 2em; /* LTR */
+ margin-bottom: 0.725em;
+ }
+ [dir="rtl"] .page-title {
+ margin-right: 0;
+ margin-left: 2em;
+ }
+}
+
+@media all and (min-width: 48em) { /* 768px */
+ html {
+ display: table;
+ }
+ .install-page,
+ .maintenance-page {
+ display: table-cell;
+ padding: 1em 0;
+ vertical-align: middle;
+ }
+ html,
+ .install-page,
+ .maintenance-page {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ .layout-container {
+ width: 75%;
+ max-width: 770px;
+ margin: 0 auto;
+ padding: 20px 0 40px 0;
+ border-radius: 5px;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+ }
+
+ /* Positioning sidebar & content */
+ main {
+ float: left; /* LTR */
+ clear: none;
+ box-sizing: border-box;
+ width: 65%;
+ padding-right: 3.85em;
+ padding-left: 3.85em;
+ }
+ [dir="rtl"] main {
+ float: right;
+ }
+ ul {
+ margin: 0.25em 0;
+ padding: 15px;
+ }
+ [dir="rtl"] ul {
+ margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
+ }
+ .layout-sidebar-first {
+ float: left; /* LTR */
+ width: 35%;
+ }
+ [dir="rtl"] .layout-sidebar-first {
+ float: right;
+ }
+
+ /* Margins for sitename */
+ .page-title {
+ margin: 0.75em 1.9em;
+ }
+}
+
+/**
+ * Status report customization for install and update page.
+ */
+.system-status-report__status-title {
+ float: none;
+ width: 100%;
+}
+.system-status-report__entry__value {
+ float: none;
+ width: 100%;
+ padding-top: 0;
+ padding-left: 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 1em;
+}
diff --git a/core/themes/claro/css/src/theme/views_ui.admin.theme.css b/core/themes/claro/css/src/theme/views_ui.admin.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..ba3f8dfe6cc927549721e96bfaaffc488ed3d36d
--- /dev/null
+++ b/core/themes/claro/css/src/theme/views_ui.admin.theme.css
@@ -0,0 +1,1004 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * View UI admin theme.
+ *
+ * Replaces the inherited styles provided by Stable.
+ */
+
+.views-admin .links {
+ margin: 0;
+ list-style: none outside none;
+}
+
+.views-admin a:hover {
+ text-decoration: none;
+}
+
+.box-padding {
+ padding-right: 12px;
+ padding-left: 12px;
+}
+
+.box-margin {
+ margin: 12px 12px 0 12px;
+}
+
+.views-admin .icon {
+ width: 16px;
+ height: 16px;
+}
+
+.views-admin .icon,
+.views-admin .icon-text {
+ background-image: url(../../../images/core/stable/views_ui/sprites.png);
+ background-repeat: no-repeat;
+ background-attachment: scroll;
+ background-position: left top; /* LTR */
+}
+
+[dir="rtl"] .views-admin .icon,
+[dir="rtl"] .views-admin .icon-text {
+ background-position: right top;
+}
+
+.views-admin a.icon {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), to(#e8e8e8)) no-repeat, repeat-y;
+ background: -moz-linear-gradient(right, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+ background: -o-linear-gradient(right, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+ background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
+}
+
+.views-admin a.icon:hover {
+ border-color: #d0d0d0;
+ -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3333) inset;
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3333) inset;
+}
+
+.views-admin a.icon:active {
+ border-color: #c0c0c0;
+}
+
+.views-admin span.icon {
+ position: relative;
+ float: left; /* LTR */
+}
+
+[dir="rtl"] .views-admin span.icon {
+ float: right;
+}
+
+.views-admin .icon.compact {
+ display: block;
+ overflow: hidden;
+ text-indent: -9999px;
+ direction: ltr;
+}
+
+/* Targets any element with an icon -> text combo */
+
+.views-admin .icon-text {
+ padding-left: 19px; /* LTR */
+}
+
+[dir="rtl"] .views-admin .icon-text {
+ padding-right: 19px;
+ padding-left: 0;
+}
+
+.views-admin .icon.linked {
+ background-position: center -153px;
+}
+
+.views-admin .icon.unlinked {
+ background-position: center -195px;
+}
+
+.views-admin .icon.add {
+ background-position: center 3px;
+}
+
+.views-admin a.icon.add {
+ background-position: center 3px, left top; /* LTR */
+}
+
+[dir="rtl"] .views-admin a.icon.add {
+ background-position: center 3px, right top;
+}
+
+.views-admin .icon.delete {
+ background-position: center -52px;
+}
+
+.views-admin a.icon.delete {
+ background-position: center -52px, left top; /* LTR */
+}
+
+[dir="rtl"] .views-admin a.icon.delete {
+ background-position: center -52px, right top;
+}
+
+.views-admin .icon.rearrange {
+ background-position: center -111px;
+}
+
+.views-admin a.icon.rearrange {
+ background-position: center -111px, left top; /* LTR */
+}
+
+[dir="rtl"] .views-admin a.icon.rearrange {
+ background-position: center -111px, right top;
+}
+
+.views-displays .tabs a:hover > .icon.add {
+ background-position: center -25px;
+}
+
+.views-displays .tabs .open a:hover > .icon.add {
+ background-position: center 3px;
+}
+
+details.box-padding {
+ border: none;
+}
+
+.views-admin details details {
+ margin-bottom: 0;
+}
+
+.form-item {
+ margin-top: 9px;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+.form-type-checkbox {
+ margin-top: 6px;
+}
+
+.form-checkbox,
+.form-radio {
+ vertical-align: baseline;
+}
+
+.container-inline {
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+
+.container-inline > * + *,
+.container-inline .details-wrapper > * + * {
+ padding-left: 4px; /* LTR */
+}
+
+[dir="rtl"] .container-inline > * + *,
+[dir="rtl"] .container-inline .details-wrapper > * + * {
+ padding-right: 4px;
+ padding-left: 0;
+}
+
+.views-admin details details.container-inline {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-top: 0;
+}
+
+.views-admin details details.container-inline > .details-wrapper {
+ padding-bottom: 0;
+}
+
+/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
+
+.views-admin .form-type-checkbox + .form-wrapper {
+ margin-left: 16px; /* LTR */
+}
+
+[dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
+ margin-right: 16px;
+ margin-left: 0;
+}
+
+/* Hide 'remove' checkboxes. */
+
+.views-remove-checkbox {
+ display: none;
+}
+
+/* sizes the labels of checkboxes and radio button to the height of the text */
+
+.views-admin .form-type-checkbox label,
+.views-admin .form-type-radio label {
+ line-height: 2;
+}
+
+.views-admin-dependent .form-item {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+.views-ui-view-name h3 {
+ margin: 0.25em 0;
+ font-weight: bold;
+}
+
+.view-changed {
+ margin-bottom: 21px;
+}
+
+.views-admin .unit-title {
+ margin-top: 18px;
+ margin-bottom: 0;
+ font-size: 15px;
+ line-height: 1.6154;
+}
+
+.views-ui-view-displays ul {
+ margin-left: 0; /* LTR */
+ padding-left: 0; /* LTR */
+ list-style: none;
+}
+
+[dir="rtl"] .views-ui-view-displays ul {
+ margin-right: 0;
+ margin-left: inherit;
+ padding-right: 0;
+ padding-left: inherit;
+}
+
+/* These header classes are ambiguous and should be scoped to th elements */
+
+.views-ui-name {
+ width: 20%;
+}
+
+.views-ui-description {
+ width: 30%;
+}
+
+.views-ui-machine-name {
+ width: 15%;
+}
+
+.views-ui-displays {
+ width: 25%;
+}
+
+.views-ui-operations {
+ width: 10%;
+}
+
+/**
+ * I wish this didn't have to be so specific
+ */
+
+.form-item-description-enable + .form-item-description {
+ margin-top: 0;
+}
+
+.form-item-description-enable label {
+ font-weight: bold;
+}
+
+.form-item-page-create,
+.form-item-block-create {
+ margin-top: 13px;
+}
+
+.form-item-page-create label,
+.form-item-block-create label,
+.form-item-rest-export-create label {
+ font-weight: bold;
+}
+
+/* This makes the form elements after the "Display Format" label flow underneath the label */
+
+.form-item-page-style-style-plugin > label,
+.form-item-block-style-style-plugin > label {
+ display: block;
+}
+
+.views-attachment .options-set label {
+ font-weight: normal;
+}
+
+/* Styling for the form that allows views filters to be rearranged. */
+
+.group-populated {
+ display: none;
+}
+
+td.group-title {
+ font-weight: bold;
+}
+
+.views-ui-dialog td.group-title {
+ margin: 0;
+ padding: 0;
+}
+
+.views-ui-dialog td.group-title span {
+ display: block;
+ overflow: hidden;
+ height: 1px;
+}
+
+.group-message .form-submit,
+.views-remove-group-link,
+.views-add-group {
+ float: right; /* LTR */
+ clear: both;
+}
+
+[dir="rtl"] .group-message .form-submit,
+[dir="rtl"] .views-remove-group-link,
+[dir="rtl"] .views-add-group {
+ float: left;
+}
+
+.views-operator-label {
+ padding-left: 0.5em; /* LTR */
+ text-transform: uppercase;
+ font-weight: bold;
+ font-style: italic;
+}
+
+[dir="rtl"] .views-operator-label {
+ padding-right: 0.5em;
+ padding-left: 0;
+}
+
+.grouped-description,
+.exposed-description {
+ float: left; /* LTR */
+ padding-top: 3px;
+ padding-right: 10px; /* LTR */
+}
+
+[dir="rtl"] .grouped-description,
+[dir="rtl"] .exposed-description {
+ float: right;
+ padding-right: 0;
+ padding-left: 10px;
+}
+
+.views-displays {
+ padding-bottom: 36px;
+ border: 1px solid #ccc;
+}
+
+.views-display-top {
+ position: relative;
+ padding: 8px 8px 3px;
+ border-bottom: 1px solid #ccc;
+ background-color: #e1e2dc;
+}
+
+.views-display-top .tabs {
+ margin-right: 18em; /* LTR */
+}
+
+[dir="rtl"] .views-display-top .tabs {
+ margin-right: 0;
+ margin-left: 18em;
+}
+
+.views-display-top .tabs > li {
+ margin-right: 6px; /* LTR */
+ padding-left: 0; /* LTR */
+}
+
+[dir="rtl"] .views-display-top .tabs > li {
+ margin-right: 0.3em;
+ margin-left: 6px;
+ padding-right: 0;
+}
+
+.views-display-top .tabs > li:last-child {
+ margin-right: 0; /* LTR */
+}
+
+[dir="rtl"] .views-display-top .tabs > li:last-child {
+ margin-right: 0.3em;
+ margin-left: 0;
+}
+
+.form-edit .form-actions {
+ margin-top: 0;
+ padding: 8px 12px;
+ border-right: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ background-color: #e1e2dc;
+}
+
+.views-displays .tabs.secondary {
+ margin-right: 200px; /* LTR */
+ border: 0;
+}
+
+[dir="rtl"] .views-displays .tabs.secondary {
+ margin-right: 0;
+ margin-left: 200px;
+}
+
+.views-displays .tabs.secondary li,
+.views-displays .tabs.secondary li.is-active {
+ width: auto;
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+
+.views-displays .tabs li.add ul.action-list li {
+ margin: 0;
+}
+
+.views-displays .tabs.secondary li {
+ margin: 0 5px 5px 6px; /* LTR */
+}
+
+[dir="rtl"] .views-displays .tabs.secondary li {
+ margin-right: 6px;
+ margin-left: 5px;
+}
+
+.views-displays .tabs.secondary .tabs__tab + .tabs__tab {
+ border-top: 0;
+}
+
+.views-displays .tabs li.tabs__tab:hover {
+ padding-left: 0; /* LTR */
+ border: 0;
+}
+
+[dir="rtl"] .views-displays .tabs li.tabs__tab:hover {
+ padding-right: 0;
+}
+
+.views-displays .tabs.secondary a {
+ display: inline-block;
+ padding: 3px 7px;
+ border: 1px solid #cbcbcb;
+ border-radius: 7px;
+ font-size: small;
+ line-height: 1.3333;
+}
+
+/* Display a red border if the display doesn't validate. */
+
+.views-displays .tabs li.is-active a.is-active.error,
+.views-displays .tabs .error {
+ padding: 1px 6px;
+ border: 2px solid #ed541d;
+}
+
+.views-displays .tabs a:focus {
+ outline: none;
+}
+
+.views-displays .tabs.secondary li a {
+ background-color: #fff;
+}
+
+.views-displays .tabs li a:hover,
+.views-displays .tabs li.is-active a,
+.views-displays .tabs li.is-active a.is-active {
+ color: #fff;
+ background-color: #555;
+}
+
+.views-displays .tabs .open > a {
+ position: relative;
+ border-bottom: 1px solid transparent;
+ background-color: #f1f1f1;
+}
+
+.views-displays .tabs .open > a:hover {
+ color: #0074bd;
+ background-color: #f1f1f1;
+}
+
+.views-displays .tabs .action-list li {
+ padding: 2px 9px;
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: #cbcbcb;
+ background-color: #f1f1f1;
+}
+
+.views-displays .tabs .action-list li:first-child {
+ border-width: 1px 1px 0;
+}
+
+.views-displays .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+
+.views-displays .tabs .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+
+.views-displays .tabs .action-list input.form-submit {
+ margin: 0;
+ padding: 0;
+ border: medium none;
+ background: none repeat scroll 0 0 transparent;
+}
+
+.views-displays .tabs .action-list input.form-submit:hover {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.views-displays .tabs .action-list li:hover {
+ background-color: #ddd;
+}
+
+.edit-display-settings {
+ margin: 12px 12px 0 12px;
+}
+
+.edit-display-settings-top.views-ui-display-tab-bucket {
+ position: relative;
+ margin: 0 0 15px 0;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ border: 1px solid #f3f3f3;
+ line-height: 20px;
+}
+
+.views-display-column {
+ border: 1px solid #f3f3f3;
+}
+
+.views-display-column + .views-display-column {
+ margin-top: 0;
+}
+
+.view-preview-form .form-item-view-args,
+.view-preview-form .form-actions {
+ margin-top: 5px;
+}
+
+.view-preview-form .arguments-preview {
+ font-size: 1em;
+}
+
+.view-preview-form .arguments-preview,
+.view-preview-form .form-item-view-args {
+ margin-left: 10px; /* LTR */
+}
+
+[dir="rtl"] .view-preview-form .arguments-preview,
+[dir="rtl"] .view-preview-form .form-item-view-args {
+ margin-right: 10px;
+ margin-left: 0;
+}
+
+.view-preview-form .form-item-view-args label {
+ float: left; /* LTR */
+ height: 6ex;
+ margin-right: 0.75em; /* LTR */
+ font-weight: normal;
+}
+
+[dir="rtl"] .view-preview-form .form-item-view-args label {
+ float: right;
+ margin-right: 0.2em;
+ margin-left: 0.75em;
+}
+
+.form-item-live-preview,
+.form-item-view-args,
+.preview-submit-wrapper {
+ display: inline-block;
+}
+
+.form-item-live-preview,
+.view-preview-form .form-actions {
+ vertical-align: top;
+}
+
+@media screen and (min-width: 45em) { /* 720px */
+ .view-preview-form .form-type-textfield .description {
+ white-space: nowrap;
+ }
+}
+
+/* These are the individual "buckets," or boxes, inside the display settings area */
+
+.views-ui-display-tab-bucket {
+ position: relative;
+ margin: 0;
+ padding-top: 4px;
+ border-bottom: 1px solid #f3f3f3;
+ line-height: 20px;
+}
+
+.views-ui-display-tab-bucket:last-of-type {
+ border-bottom: none;
+}
+
+.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
+ border-top: medium none;
+}
+
+.views-ui-display-tab-bucket__title,
+.views-ui-display-tab-bucket > .views-display-setting {
+ padding: 3px 6px 4px;
+}
+
+.views-ui-display-tab-bucket__title {
+ margin: 0;
+ font-size: small;
+}
+
+.views-ui-display-tab-bucket.access {
+ padding-top: 0;
+}
+
+.views-ui-display-tab-bucket.page-settings {
+ border-bottom: medium none;
+}
+
+.views-display-setting .views-ajax-link {
+ margin-right: 0.2083em;
+ margin-left: 0.2083em;
+ text-decoration: none;
+}
+
+.views-ui-display-tab-setting > span {
+ margin-left: 0.5em; /* LTR */
+}
+
+[dir="rtl"] .views-ui-display-tab-setting > span {
+ margin-right: 0.5em;
+ margin-left: 0;
+}
+
+/** Applies an overridden(italics) font style to overridden buckets.
+ * The better way to implement this would be to add the overridden class
+ * to the bucket header when the bucket is overridden and style it as a
+ * generic icon classed element. For the moment, we'll style the bucket
+ * header specifically with the overridden font style.
+ */
+
+.views-ui-display-tab-setting.overridden,
+.views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {
+ font-style: italic;
+}
+
+/* This is each row within one of the "boxes." */
+
+.views-ui-display-tab-bucket .views-display-setting {
+ padding-bottom: 2px;
+ color: #666;
+ font-size: 12px;
+}
+
+.views-ui-display-tab-bucket .views-display-setting:nth-of-type(even) {
+ background-color: #f3f5ee;
+}
+
+.views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
+ background-color: transparent;
+}
+
+.views-ui-display-tab-bucket .views-group-text {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+.views-display-setting .label {
+ margin-right: 3px; /* LTR */
+}
+
+[dir="rtl"] .views-display-setting .label {
+ margin-right: 0;
+ margin-left: 3px;
+}
+
+.views-edit-view {
+ margin-bottom: 15px;
+}
+
+/* The contents of the popup dialog on the views edit form. */
+
+.views-filterable-options .form-type-checkbox {
+ padding: 5px 8px;
+ border-top: none;
+}
+
+.views-filterable-options {
+ border-top: 1px solid #ccc;
+}
+
+.filterable-option .form-item {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.views-filterable-options .filterable-option .title {
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.views-filterable-options .form-type-checkbox .description {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.views-filterable-options-controls .form-item {
+ width: 30%;
+ margin: 0 0 0 2%; /* LTR */
+}
+
+[dir="rtl"] .views-filterable-options-controls .form-item {
+ margin: 0 2% 0 0;
+}
+
+.views-filterable-options-controls input,
+.views-filterable-options-controls select {
+ width: 100%;
+}
+
+.views-ui-dialog .ui-dialog-content {
+ padding: 0;
+}
+
+.views-ui-dialog .views-filterable-options {
+ margin-bottom: 10px;
+}
+
+.views-ui-dialog .views-add-form-selected.container-inline {
+ padding: 0;
+}
+
+.views-ui-dialog .views-add-form-selected.container-inline > div {
+ display: block;
+}
+
+.views-ui-dialog .form-item-selected {
+ margin: 0;
+ padding: 6px 16px;
+}
+
+.views-ui-dialog .views-override:not(:empty) {
+ padding: 8px 13px;
+ background-color: #f3f4ee;
+}
+
+.views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
+ border: none;
+}
+
+.views-ui-dialog .views-offset-top {
+ border-bottom: 1px solid #ccc;
+}
+
+.views-ui-dialog .views-offset-bottom {
+ border-top: 1px solid #ccc;
+}
+
+.views-ui-dialog .views-override > * {
+ margin: 0;
+}
+
+.views-ui-dialog .views-progress-indicator {
+ position: absolute;
+ top: 32px;
+ right: 10px; /* LTR */
+ color: #fff;
+ font-size: 11px;
+}
+
+[dir="rtl"] .views-ui-dialog .views-progress-indicator {
+ right: auto;
+ left: 10px;
+}
+
+.views-ui-dialog .views-progress-indicator:before {
+ content: "\003C\00A0";
+}
+
+.views-ui-dialog .views-progress-indicator:after {
+ content: "\00A0\003E";
+}
+
+.views-ui-dialog details .item-list {
+ padding-left: 2em; /* LTR */
+}
+
+[dir="rtl"] .views-ui-dialog details .item-list {
+ padding-right: 2em;
+ padding-left: 0;
+}
+
+.views-ui-rearrange-filter-form table {
+ border-collapse: collapse;
+}
+
+.views-ui-rearrange-filter-form tr td[rowspan] {
+ border-width: 0 1px 1px 1px;
+ border-style: solid;
+ border-color: #cdcdcd;
+}
+
+.views-ui-rearrange-filter-form tr[id^="views-row"] {
+ border-right: 1px solid #cdcdcd; /* LTR */
+}
+
+[dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {
+ border-right: 0;
+ border-left: 1px solid #cdcdcd;
+}
+
+.views-ui-rearrange-filter-form .even td {
+ background-color: #f3f4ed;
+}
+
+.views-ui-rearrange-filter-form .views-group-title {
+ border-top: 1px solid #cdcdcd;
+}
+
+.views-ui-rearrange-filter-form .group-empty {
+ border-bottom: 1px solid #cdcdcd;
+}
+
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+ margin-top: 6px;
+ margin-bottom: 6px;
+ margin-left: 18px; /* LTR */
+}
+
+[dir="rtl"] .form-item-options-expose-required,
+[dir="rtl"] .form-item-options-expose-label,
+[dir="rtl"] .form-item-options-expose-description {
+ margin-right: 18px;
+ margin-left: 0;
+}
+
+.views-preview-wrapper {
+ border: 1px solid #ccc;
+}
+
+.view-preview-form {
+ position: relative;
+}
+
+.view-preview-form__title {
+ margin-top: 0;
+ padding: 8px 12px;
+ border-bottom: 1px solid #ccc;
+ background-color: #e1e2dc;
+}
+
+.view-preview-form .form-item-live-preview {
+ position: absolute;
+ top: 3px;
+ right: 12px;
+ margin-top: 2px;
+ margin-left: 2px; /* LTR */
+}
+
+[dir="rtl"] .view-preview-form .form-item-live-preview {
+ right: auto;
+ left: 12px;
+ margin-right: 2px;
+ margin-left: 0;
+}
+
+.views-live-preview {
+ padding: 12px;
+}
+
+.views-live-preview .views-query-info {
+ overflow: auto;
+}
+
+.views-live-preview .section-title {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #818181;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 1.6154;
+}
+
+.views-live-preview .view > * {
+ margin-top: 18px;
+}
+
+.views-live-preview .preview-section {
+ margin: 0 -5px;
+ padding: 3px 5px;
+ border: 1px dashed #dedede;
+}
+
+.views-live-preview li.views-row + li.views-row {
+ margin-top: 18px;
+}
+
+/* The div.views-row is intentional and excludes li.views-row, for example */
+
+.views-live-preview div.views-row + div.views-row {
+ margin-top: 36px;
+}
+
+.views-query-info table {
+ margin: 10px 0;
+ border-spacing: 0;
+ border-collapse: separate;
+ border-color: #ddd;
+}
+
+.views-query-info table tr {
+ background-color: #f9f9f9;
+}
+
+.views-query-info table th,
+.views-query-info table td {
+ padding: 4px 10px;
+ color: #666;
+}
+
+.messages {
+ margin-bottom: 18px;
+ line-height: 1.4555;
+}
+
+.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
+ position: absolute;
+ z-index: 2;
+ top: -1px;
+ right: -5px; /* LTR */
+}
+
+[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
+ right: auto;
+ left: -5px;
+}
+
+.views-display-top .dropbutton-wrapper {
+ position: absolute;
+ top: 5px;
+ right: 4px; /* LTR */
+}
+
+[dir="rtl"] .views-display-top .dropbutton-wrapper {
+ right: auto;
+ left: 4px;
+}
+
+.views-ui-display-tab-bucket .dropbutton-wrapper {
+ position: absolute;
+ top: 3px;
+ right: 3px; /* LTR */
+}
+
+[dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper {
+ right: auto;
+ left: 3px;
+}
+
+.views-list-section {
+ margin-bottom: 2em;
+}
+
+.form-textarea-wrapper,
+.form-item-options-content {
+ width: 100%;
+}
diff --git a/core/themes/claro/css/src/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/src/theme/views_ui.admin.theme.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..88d44d7dd62014b9d3ff17b0475619d52b02a616
--- /dev/null
+++ b/core/themes/claro/css/src/theme/views_ui.admin.theme.pcss.css
@@ -0,0 +1,809 @@
+/**
+ * @file
+ * View UI admin theme.
+ *
+ * Replaces the inherited styles provided by Stable.
+ */
+
+.views-admin .links {
+ margin: 0;
+ list-style: none outside none;
+}
+.views-admin a:hover {
+ text-decoration: none;
+}
+.box-padding {
+ padding-right: 12px;
+ padding-left: 12px;
+}
+.box-margin {
+ margin: 12px 12px 0 12px;
+}
+.views-admin .icon {
+ width: 16px;
+ height: 16px;
+}
+.views-admin .icon,
+.views-admin .icon-text {
+ background-image: url(../../../images/core/stable/views_ui/sprites.png);
+ background-repeat: no-repeat;
+ background-attachment: scroll;
+ background-position: left top; /* LTR */
+}
+[dir="rtl"] .views-admin .icon,
+[dir="rtl"] .views-admin .icon-text {
+ background-position: right top;
+}
+.views-admin a.icon {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
+}
+.views-admin a.icon:hover {
+ border-color: #d0d0d0;
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3333) inset;
+}
+.views-admin a.icon:active {
+ border-color: #c0c0c0;
+}
+.views-admin span.icon {
+ position: relative;
+ float: left; /* LTR */
+}
+[dir="rtl"] .views-admin span.icon {
+ float: right;
+}
+.views-admin .icon.compact {
+ display: block;
+ overflow: hidden;
+ text-indent: -9999px;
+ direction: ltr;
+}
+
+/* Targets any element with an icon -> text combo */
+.views-admin .icon-text {
+ padding-left: 19px; /* LTR */
+}
+[dir="rtl"] .views-admin .icon-text {
+ padding-right: 19px;
+ padding-left: 0;
+}
+.views-admin .icon.linked {
+ background-position: center -153px;
+}
+.views-admin .icon.unlinked {
+ background-position: center -195px;
+}
+.views-admin .icon.add {
+ background-position: center 3px;
+}
+.views-admin a.icon.add {
+ background-position: center 3px, left top; /* LTR */
+}
+[dir="rtl"] .views-admin a.icon.add {
+ background-position: center 3px, right top;
+}
+.views-admin .icon.delete {
+ background-position: center -52px;
+}
+.views-admin a.icon.delete {
+ background-position: center -52px, left top; /* LTR */
+}
+[dir="rtl"] .views-admin a.icon.delete {
+ background-position: center -52px, right top;
+}
+.views-admin .icon.rearrange {
+ background-position: center -111px;
+}
+.views-admin a.icon.rearrange {
+ background-position: center -111px, left top; /* LTR */
+}
+[dir="rtl"] .views-admin a.icon.rearrange {
+ background-position: center -111px, right top;
+}
+.views-displays .tabs a:hover > .icon.add {
+ background-position: center -25px;
+}
+.views-displays .tabs .open a:hover > .icon.add {
+ background-position: center 3px;
+}
+details.box-padding {
+ border: none;
+}
+.views-admin details details {
+ margin-bottom: 0;
+}
+.form-item {
+ margin-top: 9px;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.form-type-checkbox {
+ margin-top: 6px;
+}
+.form-checkbox,
+.form-radio {
+ vertical-align: baseline;
+}
+
+.container-inline {
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+.container-inline > * + *,
+.container-inline .details-wrapper > * + * {
+ padding-left: 4px; /* LTR */
+}
+[dir="rtl"] .container-inline > * + *,
+[dir="rtl"] .container-inline .details-wrapper > * + * {
+ padding-right: 4px;
+ padding-left: 0;
+}
+.views-admin details details.container-inline {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-top: 0;
+}
+.views-admin details details.container-inline > .details-wrapper {
+ padding-bottom: 0;
+}
+/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
+.views-admin .form-type-checkbox + .form-wrapper {
+ margin-left: 16px; /* LTR */
+}
+[dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
+ margin-right: 16px;
+ margin-left: 0;
+}
+
+/* Hide 'remove' checkboxes. */
+.views-remove-checkbox {
+ display: none;
+}
+
+/* sizes the labels of checkboxes and radio button to the height of the text */
+.views-admin .form-type-checkbox label,
+.views-admin .form-type-radio label {
+ line-height: 2;
+}
+.views-admin-dependent .form-item {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+.views-ui-view-name h3 {
+ margin: 0.25em 0;
+ font-weight: bold;
+}
+.view-changed {
+ margin-bottom: 21px;
+}
+.views-admin .unit-title {
+ margin-top: 18px;
+ margin-bottom: 0;
+ font-size: 15px;
+ line-height: 1.6154;
+}
+.views-ui-view-displays ul {
+ margin-left: 0; /* LTR */
+ padding-left: 0; /* LTR */
+ list-style: none;
+}
+[dir="rtl"] .views-ui-view-displays ul {
+ margin-right: 0;
+ margin-left: inherit;
+ padding-right: 0;
+ padding-left: inherit;
+}
+
+/* These header classes are ambiguous and should be scoped to th elements */
+.views-ui-name {
+ width: 20%;
+}
+.views-ui-description {
+ width: 30%;
+}
+.views-ui-machine-name {
+ width: 15%;
+}
+.views-ui-displays {
+ width: 25%;
+}
+.views-ui-operations {
+ width: 10%;
+}
+
+/**
+ * I wish this didn't have to be so specific
+ */
+.form-item-description-enable + .form-item-description {
+ margin-top: 0;
+}
+.form-item-description-enable label {
+ font-weight: bold;
+}
+.form-item-page-create,
+.form-item-block-create {
+ margin-top: 13px;
+}
+.form-item-page-create label,
+.form-item-block-create label,
+.form-item-rest-export-create label {
+ font-weight: bold;
+}
+
+/* This makes the form elements after the "Display Format" label flow underneath the label */
+.form-item-page-style-style-plugin > label,
+.form-item-block-style-style-plugin > label {
+ display: block;
+}
+.views-attachment .options-set label {
+ font-weight: normal;
+}
+
+/* Styling for the form that allows views filters to be rearranged. */
+.group-populated {
+ display: none;
+}
+td.group-title {
+ font-weight: bold;
+}
+.views-ui-dialog td.group-title {
+ margin: 0;
+ padding: 0;
+}
+.views-ui-dialog td.group-title span {
+ display: block;
+ overflow: hidden;
+ height: 1px;
+}
+.group-message .form-submit,
+.views-remove-group-link,
+.views-add-group {
+ float: right; /* LTR */
+ clear: both;
+}
+[dir="rtl"] .group-message .form-submit,
+[dir="rtl"] .views-remove-group-link,
+[dir="rtl"] .views-add-group {
+ float: left;
+}
+.views-operator-label {
+ padding-left: 0.5em; /* LTR */
+ text-transform: uppercase;
+ font-weight: bold;
+ font-style: italic;
+}
+[dir="rtl"] .views-operator-label {
+ padding-right: 0.5em;
+ padding-left: 0;
+}
+.grouped-description,
+.exposed-description {
+ float: left; /* LTR */
+ padding-top: 3px;
+ padding-right: 10px; /* LTR */
+}
+[dir="rtl"] .grouped-description,
+[dir="rtl"] .exposed-description {
+ float: right;
+ padding-right: 0;
+ padding-left: 10px;
+}
+.views-displays {
+ padding-bottom: 36px;
+ border: 1px solid #ccc;
+}
+.views-display-top {
+ position: relative;
+ padding: 8px 8px 3px;
+ border-bottom: 1px solid #ccc;
+ background-color: #e1e2dc;
+}
+.views-display-top .tabs {
+ margin-right: 18em; /* LTR */
+}
+[dir="rtl"] .views-display-top .tabs {
+ margin-right: 0;
+ margin-left: 18em;
+}
+.views-display-top .tabs > li {
+ margin-right: 6px; /* LTR */
+ padding-left: 0; /* LTR */
+}
+[dir="rtl"] .views-display-top .tabs > li {
+ margin-right: 0.3em;
+ margin-left: 6px;
+ padding-right: 0;
+}
+.views-display-top .tabs > li:last-child {
+ margin-right: 0; /* LTR */
+}
+[dir="rtl"] .views-display-top .tabs > li:last-child {
+ margin-right: 0.3em;
+ margin-left: 0;
+}
+.form-edit .form-actions {
+ margin-top: 0;
+ padding: 8px 12px;
+ border-right: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ background-color: #e1e2dc;
+}
+.views-displays .tabs.secondary {
+ margin-right: 200px; /* LTR */
+ border: 0;
+}
+[dir="rtl"] .views-displays .tabs.secondary {
+ margin-right: 0;
+ margin-left: 200px;
+}
+.views-displays .tabs.secondary li,
+.views-displays .tabs.secondary li.is-active {
+ width: auto;
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+.views-displays .tabs li.add ul.action-list li {
+ margin: 0;
+}
+.views-displays .tabs.secondary li {
+ margin: 0 5px 5px 6px; /* LTR */
+}
+[dir="rtl"] .views-displays .tabs.secondary li {
+ margin-right: 6px;
+ margin-left: 5px;
+}
+.views-displays .tabs.secondary .tabs__tab + .tabs__tab {
+ border-top: 0;
+}
+.views-displays .tabs li.tabs__tab:hover {
+ padding-left: 0; /* LTR */
+ border: 0;
+}
+[dir="rtl"] .views-displays .tabs li.tabs__tab:hover {
+ padding-right: 0;
+}
+.views-displays .tabs.secondary a {
+ display: inline-block;
+ padding: 3px 7px;
+ border: 1px solid #cbcbcb;
+ border-radius: 7px;
+ font-size: small;
+ line-height: 1.3333;
+}
+
+/* Display a red border if the display doesn't validate. */
+.views-displays .tabs li.is-active a.is-active.error,
+.views-displays .tabs .error {
+ padding: 1px 6px;
+ border: 2px solid #ed541d;
+}
+.views-displays .tabs a:focus {
+ outline: none;
+}
+.views-displays .tabs.secondary li a {
+ background-color: #fff;
+}
+.views-displays .tabs li a:hover,
+.views-displays .tabs li.is-active a,
+.views-displays .tabs li.is-active a.is-active {
+ color: #fff;
+ background-color: #555;
+}
+.views-displays .tabs .open > a {
+ position: relative;
+ border-bottom: 1px solid transparent;
+ background-color: #f1f1f1;
+}
+.views-displays .tabs .open > a:hover {
+ color: #0074bd;
+ background-color: #f1f1f1;
+}
+.views-displays .tabs .action-list li {
+ padding: 2px 9px;
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: #cbcbcb;
+ background-color: #f1f1f1;
+}
+.views-displays .tabs .action-list li:first-child {
+ border-width: 1px 1px 0;
+}
+.views-displays .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+.views-displays .tabs .action-list li:last-child {
+ border-width: 0 1px 1px;
+}
+.views-displays .tabs .action-list input.form-submit {
+ margin: 0;
+ padding: 0;
+ border: medium none;
+ background: none repeat scroll 0 0 transparent;
+}
+.views-displays .tabs .action-list input.form-submit:hover {
+ box-shadow: none;
+}
+.views-displays .tabs .action-list li:hover {
+ background-color: #ddd;
+}
+.edit-display-settings {
+ margin: 12px 12px 0 12px;
+}
+.edit-display-settings-top.views-ui-display-tab-bucket {
+ position: relative;
+ margin: 0 0 15px 0;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ border: 1px solid #f3f3f3;
+ line-height: 20px;
+}
+.views-display-column {
+ border: 1px solid #f3f3f3;
+}
+.views-display-column + .views-display-column {
+ margin-top: 0;
+}
+.view-preview-form .form-item-view-args,
+.view-preview-form .form-actions {
+ margin-top: 5px;
+}
+.view-preview-form .arguments-preview {
+ font-size: 1em;
+}
+.view-preview-form .arguments-preview,
+.view-preview-form .form-item-view-args {
+ margin-left: 10px; /* LTR */
+}
+[dir="rtl"] .view-preview-form .arguments-preview,
+[dir="rtl"] .view-preview-form .form-item-view-args {
+ margin-right: 10px;
+ margin-left: 0;
+}
+.view-preview-form .form-item-view-args label {
+ float: left; /* LTR */
+ height: 6ex;
+ margin-right: 0.75em; /* LTR */
+ font-weight: normal;
+}
+[dir="rtl"] .view-preview-form .form-item-view-args label {
+ float: right;
+ margin-right: 0.2em;
+ margin-left: 0.75em;
+}
+.form-item-live-preview,
+.form-item-view-args,
+.preview-submit-wrapper {
+ display: inline-block;
+}
+.form-item-live-preview,
+.view-preview-form .form-actions {
+ vertical-align: top;
+}
+
+@media screen and (min-width: 45em) { /* 720px */
+ .view-preview-form .form-type-textfield .description {
+ white-space: nowrap;
+ }
+}
+
+/* These are the individual "buckets," or boxes, inside the display settings area */
+.views-ui-display-tab-bucket {
+ position: relative;
+ margin: 0;
+ padding-top: 4px;
+ border-bottom: 1px solid #f3f3f3;
+ line-height: 20px;
+}
+.views-ui-display-tab-bucket:last-of-type {
+ border-bottom: none;
+}
+.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
+ border-top: medium none;
+}
+.views-ui-display-tab-bucket__title,
+.views-ui-display-tab-bucket > .views-display-setting {
+ padding: 3px 6px 4px;
+}
+.views-ui-display-tab-bucket__title {
+ margin: 0;
+ font-size: small;
+}
+.views-ui-display-tab-bucket.access {
+ padding-top: 0;
+}
+.views-ui-display-tab-bucket.page-settings {
+ border-bottom: medium none;
+}
+.views-display-setting .views-ajax-link {
+ margin-right: 0.2083em;
+ margin-left: 0.2083em;
+ text-decoration: none;
+}
+
+.views-ui-display-tab-setting > span {
+ margin-left: 0.5em; /* LTR */
+}
+[dir="rtl"] .views-ui-display-tab-setting > span {
+ margin-right: 0.5em;
+ margin-left: 0;
+}
+
+/** Applies an overridden(italics) font style to overridden buckets.
+ * The better way to implement this would be to add the overridden class
+ * to the bucket header when the bucket is overridden and style it as a
+ * generic icon classed element. For the moment, we'll style the bucket
+ * header specifically with the overridden font style.
+ */
+.views-ui-display-tab-setting.overridden,
+.views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {
+ font-style: italic;
+}
+
+/* This is each row within one of the "boxes." */
+.views-ui-display-tab-bucket .views-display-setting {
+ padding-bottom: 2px;
+ color: #666;
+ font-size: 12px;
+}
+.views-ui-display-tab-bucket .views-display-setting:nth-of-type(even) {
+ background-color: #f3f5ee;
+}
+.views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
+ background-color: transparent;
+}
+.views-ui-display-tab-bucket .views-group-text {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+.views-display-setting .label {
+ margin-right: 3px; /* LTR */
+}
+[dir="rtl"] .views-display-setting .label {
+ margin-right: 0;
+ margin-left: 3px;
+}
+.views-edit-view {
+ margin-bottom: 15px;
+}
+
+/* The contents of the popup dialog on the views edit form. */
+.views-filterable-options .form-type-checkbox {
+ padding: 5px 8px;
+ border-top: none;
+}
+.views-filterable-options {
+ border-top: 1px solid #ccc;
+}
+.filterable-option .form-item {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.views-filterable-options .filterable-option .title {
+ cursor: pointer;
+ font-weight: bold;
+}
+.views-filterable-options .form-type-checkbox .description {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.views-filterable-options-controls .form-item {
+ width: 30%;
+ margin: 0 0 0 2%; /* LTR */
+}
+[dir="rtl"] .views-filterable-options-controls .form-item {
+ margin: 0 2% 0 0;
+}
+.views-filterable-options-controls input,
+.views-filterable-options-controls select {
+ width: 100%;
+}
+.views-ui-dialog .ui-dialog-content {
+ padding: 0;
+}
+.views-ui-dialog .views-filterable-options {
+ margin-bottom: 10px;
+}
+.views-ui-dialog .views-add-form-selected.container-inline {
+ padding: 0;
+}
+.views-ui-dialog .views-add-form-selected.container-inline > div {
+ display: block;
+}
+.views-ui-dialog .form-item-selected {
+ margin: 0;
+ padding: 6px 16px;
+}
+.views-ui-dialog .views-override:not(:empty) {
+ padding: 8px 13px;
+ background-color: #f3f4ee;
+}
+.views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
+ border: none;
+}
+.views-ui-dialog .views-offset-top {
+ border-bottom: 1px solid #ccc;
+}
+.views-ui-dialog .views-offset-bottom {
+ border-top: 1px solid #ccc;
+}
+.views-ui-dialog .views-override > * {
+ margin: 0;
+}
+.views-ui-dialog .views-progress-indicator {
+ position: absolute;
+ top: 32px;
+ right: 10px; /* LTR */
+ color: #fff;
+ font-size: 11px;
+}
+[dir="rtl"] .views-ui-dialog .views-progress-indicator {
+ right: auto;
+ left: 10px;
+}
+.views-ui-dialog .views-progress-indicator:before {
+ content: "\003C\00A0";
+}
+.views-ui-dialog .views-progress-indicator:after {
+ content: "\00A0\003E";
+}
+.views-ui-dialog details .item-list {
+ padding-left: 2em; /* LTR */
+}
+[dir="rtl"] .views-ui-dialog details .item-list {
+ padding-right: 2em;
+ padding-left: 0;
+}
+.views-ui-rearrange-filter-form table {
+ border-collapse: collapse;
+}
+.views-ui-rearrange-filter-form tr td[rowspan] {
+ border-width: 0 1px 1px 1px;
+ border-style: solid;
+ border-color: #cdcdcd;
+}
+.views-ui-rearrange-filter-form tr[id^="views-row"] {
+ border-right: 1px solid #cdcdcd; /* LTR */
+}
+[dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {
+ border-right: 0;
+ border-left: 1px solid #cdcdcd;
+}
+.views-ui-rearrange-filter-form .even td {
+ background-color: #f3f4ed;
+}
+.views-ui-rearrange-filter-form .views-group-title {
+ border-top: 1px solid #cdcdcd;
+}
+.views-ui-rearrange-filter-form .group-empty {
+ border-bottom: 1px solid #cdcdcd;
+}
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+ margin-top: 6px;
+ margin-bottom: 6px;
+ margin-left: 18px; /* LTR */
+}
+[dir="rtl"] .form-item-options-expose-required,
+[dir="rtl"] .form-item-options-expose-label,
+[dir="rtl"] .form-item-options-expose-description {
+ margin-right: 18px;
+ margin-left: 0;
+}
+.views-preview-wrapper {
+ border: 1px solid #ccc;
+}
+.view-preview-form {
+ position: relative;
+}
+.view-preview-form__title {
+ margin-top: 0;
+ padding: 8px 12px;
+ border-bottom: 1px solid #ccc;
+ background-color: #e1e2dc;
+}
+.view-preview-form .form-item-live-preview {
+ position: absolute;
+ top: 3px;
+ right: 12px;
+ margin-top: 2px;
+ margin-left: 2px; /* LTR */
+}
+[dir="rtl"] .view-preview-form .form-item-live-preview {
+ right: auto;
+ left: 12px;
+ margin-right: 2px;
+ margin-left: 0;
+}
+.views-live-preview {
+ padding: 12px;
+}
+.views-live-preview .views-query-info {
+ overflow: auto;
+}
+.views-live-preview .section-title {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #818181;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 1.6154;
+}
+.views-live-preview .view > * {
+ margin-top: 18px;
+}
+.views-live-preview .preview-section {
+ margin: 0 -5px;
+ padding: 3px 5px;
+ border: 1px dashed #dedede;
+}
+.views-live-preview li.views-row + li.views-row {
+ margin-top: 18px;
+}
+
+/* The div.views-row is intentional and excludes li.views-row, for example */
+.views-live-preview div.views-row + div.views-row {
+ margin-top: 36px;
+}
+.views-query-info table {
+ margin: 10px 0;
+ border-spacing: 0;
+ border-collapse: separate;
+ border-color: #ddd;
+}
+.views-query-info table tr {
+ background-color: #f9f9f9;
+}
+.views-query-info table th,
+.views-query-info table td {
+ padding: 4px 10px;
+ color: #666;
+}
+.messages {
+ margin-bottom: 18px;
+ line-height: 1.4555;
+}
+
+.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
+ position: absolute;
+ z-index: 2;
+ top: -1px;
+ right: -5px; /* LTR */
+}
+[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
+ right: auto;
+ left: -5px;
+}
+
+.views-display-top .dropbutton-wrapper {
+ position: absolute;
+ top: 5px;
+ right: 4px; /* LTR */
+}
+[dir="rtl"] .views-display-top .dropbutton-wrapper {
+ right: auto;
+ left: 4px;
+}
+
+.views-ui-display-tab-bucket .dropbutton-wrapper {
+ position: absolute;
+ top: 3px;
+ right: 3px; /* LTR */
+}
+[dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper {
+ right: auto;
+ left: 3px;
+}
+
+.views-list-section {
+ margin-bottom: 2em;
+}
+.form-textarea-wrapper,
+.form-item-options-content {
+ width: 100%;
+}
diff --git a/core/themes/claro/images/core/0074bd/chevron-left.svg b/core/themes/claro/images/core/0074bd/chevron-left.svg
new file mode 100644
index 0000000000000000000000000000000000000000..84119f424cdb166a8aefc835cd060b0951087482
--- /dev/null
+++ b/core/themes/claro/images/core/0074bd/chevron-left.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m7.951 7.645c-.193.196-.193.516 0 .71l3.258 3.29c.193.193.191.519-.002.709l-1.371 1.371c-.193.192-.512.191-.707 0l-5.335-5.371c-.194-.194-.194-.514 0-.708l5.335-5.369c.195-.195.514-.195.707-.001l1.371 1.371c.193.194.195.513.002.709z" fill="#0074bd"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/0074bd/chevron-right.svg b/core/themes/claro/images/core/0074bd/chevron-right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..75bd0e733c42a1ce2bcc789e5284d3057dce527a
--- /dev/null
+++ b/core/themes/claro/images/core/0074bd/chevron-right.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8.053 8.355c.193-.195.193-.517 0-.711l-3.26-3.289c-.193-.195-.192-.514.002-.709l1.371-1.371c.194-.194.512-.193.706.001l5.335 5.369c.195.195.195.515 0 .708l-5.335 5.37c-.194.192-.512.193-.706.002l-1.371-1.371c-.194-.195-.195-.514-.002-.709z" fill="#0074bd"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/333333/caret-down.svg b/core/themes/claro/images/core/333333/caret-down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3a16fba3d916c411c6d129f4c2b324727691cfca
--- /dev/null
+++ b/core/themes/claro/images/core/333333/caret-down.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m3.8 5.4c-.165-.22-.075-.4.2-.4h8.002c.275 0 .365.18.199.4l-3.898 5.2c-.166.221-.436.221-.6 0z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/73b355/check.svg b/core/themes/claro/images/core/73b355/check.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9653fc4a43dd12d8882a151b16884171a33f4ca9
--- /dev/null
+++ b/core/themes/claro/images/core/73b355/check.svg
@@ -0,0 +1 @@
+<svg fill="#73b355" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707z"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/787878/cog.svg b/core/themes/claro/images/core/787878/cog.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4a383118a35dc245ce04b022749b16cb6b495d7b
--- /dev/null
+++ b/core/themes/claro/images/core/787878/cog.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m15.176 9.041c.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" fill="#787878"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/787878/key.svg b/core/themes/claro/images/core/787878/key.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d5e646d1b7341dad0be25fb0b32ab4aa832b70a4
--- /dev/null
+++ b/core/themes/claro/images/core/787878/key.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m13.727 7.714c-1.309-1.308-3.248-1.569-4.827-.818l-5.899-5.896h-3.001v2h1v1.618l.378.382h1.622v1h1v1.622h1.622l.864.862-.986 1.016.992.99c-.062 1.162.335 2.346 1.223 3.234 1.66 1.653 4.352 1.653 6.012 0 1.658-1.66 1.658-4.351 0-6.01zm-.829 5.182c-.646.646-1.693.646-2.338 0-.646-.646-.646-1.692 0-2.338.645-.646 1.688-.646 2.338 0 .645.646.645 1.694 0 2.338z" fill="#787878"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/787878/questionmark-disc.svg b/core/themes/claro/images/core/787878/questionmark-disc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..48830e960b10148dccc60c8744a6f3c1b4e0c7f0
--- /dev/null
+++ b/core/themes/claro/images/core/787878/questionmark-disc.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z" fill="#787878"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/README.md b/core/themes/claro/images/core/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..c456c6c0a6c94cbdbec81ce2dadf9ab8dce79eb6
--- /dev/null
+++ b/core/themes/claro/images/core/README.md
@@ -0,0 +1,4 @@
+## Purpose of this folder
+Icons in this folder are copied from Drupal core. This folder with its content
+should be removed before moving Claro to Drupal core. See
+https://www.drupal.org/project/claro/issues/3045216 for details.
diff --git a/core/themes/claro/images/core/cccccc/clock.svg b/core/themes/claro/images/core/cccccc/clock.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e51d3e01fea5a40990a4381605812e0bc11fa944
--- /dev/null
+++ b/core/themes/claro/images/core/cccccc/clock.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.659" height="46.603" viewBox="0 0 42.659 46.603">
+ <path fill="#CCC" d="M24.15 3.73V0h-8v3.915C6.15 6.13 0 14.717 0 24.978 0 36.92 9.975 46.603 21.918 46.603s20.74-9.682 20.74-21.625c0-10.576-8.507-19.372-18.507-21.25zm7 24.072H17.83V11h5v12.802h8.32v4z"/>
+</svg>
diff --git a/core/themes/claro/images/core/cccccc/d8-logo.svg b/core/themes/claro/images/core/cccccc/d8-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e7402fd405949e6f4aab2e9e4fa3c18fdb541930
--- /dev/null
+++ b/core/themes/claro/images/core/cccccc/d8-logo.svg
@@ -0,0 +1 @@
+<svg height="53.531" viewBox="0 0 47.411 53.531" width="47.411" xmlns="http://www.w3.org/2000/svg"><g fill="#ccc"><circle cx="22.308" cy="41.593" r="8.449"/><path d="m32.813 31.532c2.503 2.614 4.044 6.156 4.044 10.06 0 4.945-2.47 9.31-6.24 11.94 6.97-2.15 12.733-7.388 15.314-13.73 3.57-8.776.247-15.38-5.33-21.37.17.776.264 1.58.264 2.406 0 5.078-3.405 9.36-8.05 10.694z"/><circle cx="29.735" cy="20.838" r="6.463"/><path d="m11.178 50.96c-2.134-2.53-3.42-5.798-3.42-9.368 0-7.448 5.598-13.584 12.814-14.442-1.238-1.794-1.965-3.968-1.965-6.312 0-6.145 4.982-11.128 11.13-11.128.507 0 1.006.037 1.495.103-3.642-3.143-7.275-6.33-10.142-9.813 1.463 15.257-13.898 9.713-19.576 23.773-3.81 9.433-.376 21.095 9.663 27.188z"/></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/cccccc/database.svg b/core/themes/claro/images/core/cccccc/database.svg
new file mode 100644
index 0000000000000000000000000000000000000000..61c4814f23de301fb7c3b9ef839c9563e1beb602
--- /dev/null
+++ b/core/themes/claro/images/core/cccccc/database.svg
@@ -0,0 +1 @@
+<svg height="44.262" viewBox="0 0 38.847 44.262" width="38.847" xmlns="http://www.w3.org/2000/svg"><g fill="#ccc"><path d="m19.745 0c5.74.123 12.272.953 16.9 4.668 1.865 1.498 2.786 3.91 1.597 6.126-1.255 2.34-4.13 3.733-6.518 4.6-5.63 2.04-12.113 2.38-18.014 1.573-2.92-.4-5.91-1.103-8.58-2.374-2.19-1.04-4.74-2.805-5.093-5.403-.532-3.925 4.23-6.23 7.264-7.3 3.986-1.408 8.239-1.853 12.444-1.89 4.302.092-3.334.03 0 0z"/><path d="m6.76 17.5c3.702 1.427 7.65 1.972 11.6 2.09 4.058.12 8.107-.424 12.023-1.523 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z"/><path d="m6.76 26.436c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.964c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z"/><path d="m6.76 35.374c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.134-.626-2.21-.626-3.485v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z"/></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/cccccc/php-logo.svg b/core/themes/claro/images/core/cccccc/php-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b1a776d858ab8a98c976a5d85ebd08fe14aa4d10
--- /dev/null
+++ b/core/themes/claro/images/core/cccccc/php-logo.svg
@@ -0,0 +1 @@
+<svg height="33.447" viewBox="0 0 66 33.447" width="66" xmlns="http://www.w3.org/2000/svg"><g fill="#ccc"><path d="m49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z"/><path d="m33 0c-18.225 0-33 7.488-33 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724-14.775-16.724-33-16.724zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583h-3.377l-.935 5h-3.945l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537s1.36 2.74.944 4.885c-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273 1.558-8.124c.177-.91.112-1.29-.196-1.62s-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z"/><path d="m18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z"/></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/cccccc/server.svg b/core/themes/claro/images/core/cccccc/server.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1576b390d873e22ec9e5933145f4198babf1f94a
--- /dev/null
+++ b/core/themes/claro/images/core/cccccc/server.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="34" viewBox="0 0 44 34">
+ <path fill="#CCC" d="M29.98 7.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 7c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 0v10h44V0H0zM29.98 31.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 31c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 24v10h44V24H0zM29.98 19.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 19c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 12v10h44V12H0z"/>
+</svg>
diff --git a/core/themes/claro/images/core/e29700/warning.svg b/core/themes/claro/images/core/e29700/warning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5afdac887f23257ee19f9decb858abf24f97d57f
--- /dev/null
+++ b/core/themes/claro/images/core/e29700/warning.svg
@@ -0,0 +1 @@
+<svg fill="#e29700" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/e32700/error.svg b/core/themes/claro/images/core/e32700/error.svg
new file mode 100644
index 0000000000000000000000000000000000000000..55e304f1f4fba0b91c95dd2fb285882bc6f2aee6
--- /dev/null
+++ b/core/themes/claro/images/core/e32700/error.svg
@@ -0,0 +1 @@
+<svg fill="#e32700" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/ee0000/required.svg b/core/themes/claro/images/core/ee0000/required.svg
new file mode 100644
index 0000000000000000000000000000000000000000..354cf3ac07c8c91e774280a88ca318bb093394bb
--- /dev/null
+++ b/core/themes/claro/images/core/ee0000/required.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356" fill="#e00"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/ffffff/ex.svg b/core/themes/claro/images/core/ffffff/ex.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e2bb45ba555c616e20530ce32d5096c9fa35e537
--- /dev/null
+++ b/core/themes/claro/images/core/ffffff/ex.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/core/stable/views_ui/sprites.png b/core/themes/claro/images/core/stable/views_ui/sprites.png
new file mode 100644
index 0000000000000000000000000000000000000000..751e1256909e18489e1387407412eeb8617f65b2
--- /dev/null
+++ b/core/themes/claro/images/core/stable/views_ui/sprites.png
@@ -0,0 +1,8 @@
+‰PNG
+
+���
IHDR�����,���ÎÉã>��úIDATxì—Anƒ0Eí^‚p®Ä†5±!»ŠeNÂP
¦WàDSíR/RÊ@(K_6Væiæ“(ú�6%õÂËÂÖçþ!D* ¢1çAB„ÑAo·)Œ£¦ÐÍ Ï&Ü5ÆŸw¤/Àâï@°š=(j'È{ öÐv»6ëN÷¨5€£ž7ûæºip´yk8ª¥èbƒÄ ÓbкÞ_´g] Äo,1ˆ.1ˆA¢ 19IÎ ðŽòTLÚ·;Má.Âö†ã:¦lA8Ǩ®§š6šþ,%B´]»“Ú–tØA3äÐÑXÑ<RS'”E³1aǬÿ=šéÈfKmÜnzWÜ#Œl¶ó%÷Ej\’׿D¯râ÷h.Dc³ ¸Éœ
+þ]Ä 1ˆA¸†äÏp&e?¼ÒE�Õðûª©£•O åª' Š
+ê6F뎚ݣŽšÇ‚%¹[â]Nõ¨pÊ’g<_ø¿ŸA bƒôÅn`: a¸Mz’�í-Ò¤´©–ˆ à‰ ã½$Ýö>ï]#�6*�eß cÉnV¡X|’™|ÆdR]üüÕÀ€*X´øþ]
+Ñ"%b‰W„¢´à¶@S¤y>ƒ¤Ne`Oë¼gW”ó ”`ÍkÏxîq°7 Á V~Çø� à2%2‚dV>£¬su¤À0ÑQ!:R Ñ gÏHˆÊ·ß÷¨óìQ Vs:JĽ¢HÙ› úUUñ÷(Š¢(Š¢è³E×kSª`QÓ|-…èN‘±Ä+BQ
+Zp[ )Ò<ŸAR§ˆ²0‚§uÞ³Ö+Êù@J°æµg<wŠ8ØÐà
++¿c|�p™Á2+ŸQÖ¹:R`˜è¨ )P‡ÎhŽ³g$DåÛo{Ôyö¨«9 %â^Q¤ìÍýÖ*Šâÿ£EQEQý³SÍ`rD86ÚôgÛ¶mÛ¶m/¾Û*lÖ[Æ<ÛÆLlÛy™?UŒ>ãŸãçÖBoöã^=âÒD)97Pû‹%·Ÿ€w¨Z5,ß~ïÖ@ þë+ri ó„·n8Õ®ëº6¬³ìÊWUŠE·ÞzµP²¾5‡êÕдc7i»²•Þ-´ÔŸu¥ç¯nÍÂÂbwJJJA}}ý£C‡‘²²²«1‰™óÐÒÒÒ0˜ >ø(ÒÑÑÙæææÖÊb±È;wEQäÒ¥K¤ººš†^ZZÚ»²²ò|__ ~ä¾)ÒÖÖöÌÍÍ}²°°ð(((è„««ë‡øøxÂf³3¡gff`ðÐÁUø‘ûþŠZkjj^s8œ$&ðÌÒÒrǹsçvLNNî€ÞÓÓ³C*•î`xEF¿ üÈ}S¤®®ž’˜˜ø¸»»;ßÇÇç´µµõ;âííM 3{-`ðÐრ¹oŠ”••UÜÝÝ—ÚÛÛ ‹D¢‡2™Œðx<’M }Áà¡Ã?rß)((lf.[ÛÅÅår\\Ü‹ÔÔÔ×Ìú6000zTlúƒŸ‡ üÈýñ;r.]î±Ê˜—jŽïôª]¥UýÆBÿù_³ÉZE³é·êã*:ÁS,e¿1]¯ª•ŠÞÉ]d’8s8’E¿Wó 7öoX}ÂìWôVÒ ž8"ï1´ùÿÀö¹Ý:����äo=Œ= t6äG~äG~@ @ @ P8¥*A Ú®����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/images/noise-low.png b/core/themes/claro/images/noise-low.png
new file mode 100644
index 0000000000000000000000000000000000000000..89107ad24f571548864dcfa5f682b9327129d205
--- /dev/null
+++ b/core/themes/claro/images/noise-low.png
@@ -0,0 +1,29 @@
+‰PNG
+
+���
IHDR���€���€���1|ø���PLTE���������������������������”Qâ ��� tRNS
+LwÂ��«IDATxÁ·Bc½€Ño+žR6¦”É¥ˆC)c”þRdJ‘†)wâcßµX¡Í÷ÈeŽ´ù)p‡]D Êû …SÏźlKF¤¨Äüz¯Å'7SLˆõ žw&¯ë\Õ6Gæ<ªNÁÀÙÌ@Ôu ì}gÍ‘…¯;#�hì]€íoK¯ ¿£ê¹,·-ЄВ¥ëàR™”Œ‡o§œ°OeÀÿÁ@®){8* ó›[˜i¬^XëšGseçhÍ_pȉ©
+¡¿û€9ý=ZlôŒ3¿“Oü¡Xáî&yý¢l¤ŒÛÝ„jˆÄrÂy}ìÜ»kè.ñBè÷BŒæÙ¥×íõ u»¦¥J ¬è®`À†…üŽ6
Á¹Ö";¶+à ,äá+ùx ½æaÈ–8´æüG"e‰°TAž”œ`¦.ÿ7‡'m o žJPNð5ª¦)æÞ¶Ÿ†
+.ƒ²PézEP
·ÇSLJûÁ ñ<ý`{Túæ!þ Æ!Q²šþ—4êÃJ+&]õZ}ŠÄe d1´•œ_›!س/1î(ß>"è× F§#:`b[`ȧ]û›nöA•ØY¥æzMð.ûpœpœÆù¿•·¨ÿý®·†eÍDí<С ×_pßf;1ÜvÍ Ú=… CËÞ>Þgw*å a«qJn.Qk†“õ{` ˆë11¥
Å)P,>ù|ªgN³©ô£á II¼sCSÑ’�Õ8âË‹4æWÒ4;!Y×Eµè€\†|µ¸`RÊ_>°)¼’gn>ØS8MÊm¾b{.Ì+cqhL`¹y©”ÒC„IÆbJ P×*1¡ÖÊIŠïU÷lWhÀêvcæß.«%œHãø~íÐǬ³alHÒY³E¼U5 ¤6zÞjȳÔó|¯³2؇8F÷¾T3°Å
+›ËcóŽÍêkÍ©–-Á>n ”ð[ß1»œ>ñ«)âa‡NGš‡YM˨`Ðq]x'dØ1Íø`jþú—%ݧy¶.-Xñ„ø$³°ó¶X K&a§æ@µL…î 倕P•:èm…òd_s
+®¤äJÊ-¿1êmÓ RAA[Mi¡FÅÔ.%¾Û- &c°¬ZóïNšòÎ^[8ÖºA�8ì³YÁ² n¥ 8-õ“.Y9ZYù:¯pÐÑ2ç1%¸¼Äî(Ÿ»¤
+K§;‰ gg°ÐõWÿ£Ñ>ù²b7-Ã?Ö©eŸMP袬Ê_+¨²mtM©éi‘›K^¯Ó V)ž¬*³ˆ‘§e{ÃPÅx‹%¤;²m³×‰F�L¯„‰¥‹ªÔ²ßÃæ9†D™ºCzv#ÙŠ)»�ÍQÌi<Í(“[Ù¹î^ZÅp‹qƒ¹ K£Ø¤Å54!\\Ó³áŸÚg ±øÌÝ !~ÔHõ€®‡=:¾^uIclW3@%²JôæÒæHøå·žJ OŒRæxCÁ¬P"P ;:Í™XkÒŽ)Ü~„o›D
+Ü’×t>º÷””P QS‹Æ™YùX†ã“
+óÛT
õ j€]¢é(k³…û›‚%±É¢Õͬnõ;å¸Ë¹û‹_J²u^¯²|6#Tÿ¢æ–‹hý÷K{«‘x8H¢Öo¼j–¬R›!Dµ¬\ñ·0°Æ7xÊY%´<Zƒ÷ Ô[ÇxµYÒF8÷,ežO©ªÆ¿¿÷(*†²¶ÔÀæ�ÐC¹JéÅÿ±þbé×½#ßȦø²4äÓ‰†<©šû >Ç©Ðgè…æ-@æ:|ýƒíY0q ;>ƒÁ#dÈ·Øo;:BÒÆ0øP€B›Î@©Ë0]JH5n…P›¹S·ê*Uyw‡Éoé¡gÝAŠŒ[ÔÀ°Uûø«?Ížç»À£c4Ï;ý±Ñ(†Mº4½i»ê~ž3S@7m€þÉDHË’ñ[-ñÝ›Ë ˜++*™¹r6¼œ|ýJ ÕŠï鈾õCq Øi[s �°æ‘Ú¦:ðßm×jDšÎ±u.ð{V9ÿ8äyˆ…>ýíLJ&Õ6|Áèû[ʪ|lÑ™-&'w{‹êhZäõy/ 1yK0%Xš=ÍY ò”#.}Š·ø\° 8µ|ØÓr#tåKè¬X€µ–¼Öÿ ÈqvÐT¿´æ2Ä=°+t�1
+!v £r¬,†´ƒí¯*M‘LT€|ž«zç—¿¹2!×£j®L
+� €ƒqÙQŒŸ9Dî™ ËäµøMl Ð5í2I§Ë§wL BÅEðëPúÉÎlu?æ¬fŽ8è7!'®„>M$Zhýy$
rÇ‚¢ óu+äR »é¶Eè«ÊrÉ‘¯ÁgãÅY1†
Y’Ž{ñO±¿e@„ ý<©P‚*ƒ²çŠ)ˆ6…Ô²4Ím²-ªrvñ &@Û ¦áq¹ ¤�ã³
+ª¦&hü‰/B ÷¼£L‚e^ÚbM×^í°ªús
+ZWMM8·ÇÙs•Â-ò`¦Ìºú¿ÔZ‰Ï”2Z* q‡ARÕÚBOæD³²=„²ÙfW8“»:ñ ®Ð ‘ãˆîxùÆ׺p2éÞƒËX¾à;UœšJ³(Þìvît¼«§^qw#ŸÓ!D
+çb£Šx±¨é`d!ð ,<•sçLË9BXÎ Òÿ2r�A“ [P”ê ÞNß±ô
+Wº’!ŽV)'ü´@Æ`ƒ¾c½ELz §p’#Iu5ZK_ ºj¼9ïñáAy}·˜_‰:8
ÐУ`Ä«ë#Û¤¢ð¥e3¢ÁutYd:»9TÛéÆ»ˆ©(o:|ê¥p›Ö+,–‚Î`Tîù}îíA"†¨lž?ŒV
+;¬DÞ¿V n˜çý,ï‘áÆ¡^Îî«'꧇
+ˆaήΠ×#|P3T[‹·U2qóÜÝAMaÛcChýoGN–˜n_i€¨–êÑ#9 ONOHV’zRv$ÌF™ÄG„.N“^‘!¼Û )܆~ÍŽ}ƒÅ̼†‚k«Å h8>NtÅÛ ÃÞÁCCÙ t r
+^ÕaE‚Ó5X4¬Bƒ“(P‰¡?º ½^[ä;äM³¿‚ŽÀhFìÜ
4ŽTsÀ›Ôqí9ç™ö¶›a”Ì‚æ9GDtb�ª;”Ä—î'5Œˆ
mb>¸c/¦M ¥³`SÝ„¨Ì¨šB·Â5Ñ€ý½LYqæ±äi²6ÈŸ——•ÃÒÅàçù^–˜ª¾ätNPµX+J�–$ôéh¾uˆ\Ú-¯íÂ22 í-Ó£QÝó¡†ÔøºŠäÚî½¹yåËYƒ¶GîÑž1,¬›€sç/’œ£
É¿‰×ôF°iS‹“G gð󢢆•ì ¶ÞÒó¨ßI¡_¥*oß?CGÔ…þWicV¬äÈGù2`5W_cï–�Bbç=qÄLb쇖d›T�õ@¯ç9çÜNMy´mZˆY×”FÙõõ/L ÉŽGãÜY8…ûo™ŠmjK¦–ofI™ÏÇöµæ”ØéSh(ZFÍöSÐøwä[
ät܃ÿÖx"¦¥…&wàüÿ,†‘]Å@×[ÊFôq¾ÍdT6àbê˜æjÙàä±òu}$SââŒøæëÃ΋i€sÅ!ˆ”ØØzÃêÇsxêr… )=‘?ÊɲP ›CÞ¾¼§é]O°EP:ƒóQè P=þÁ €¶v¦tÑɹКú , z®(šþÑRÅ‹¸ýµä‹#©“觙Ê5w6Ïš¼Z¿«fÏèñ”3{~…úʕϺ'gK÷Ó¸Ú'£
îš„Íè5&žùfKS|nBY¼Úæ-æ ²K
>NÇı¢½ê¬ ªôújâ÷[GìØ0rÔ9’ù¦ñ3\E=+1‚´yžÜ?z)´Ñõ
žI¸#4\( ‘ñ]$â(¸~^1À€æ ©Å3 HÃÕ!|²ÅÙ•Q >;@ß“¾EH±|ü!Ø)ió¦ÿ4nZ«®²DlèÕ+g…)ê¾ß ¶0A :N‚åŽk`UålÌOpÞ�è¥!Pfº ¬]γݥC–üÕ 7âCl T” pzc•O\Á£)ÇÔ¿v»½&ëð›f Šèl —–p©þôÓüSœ(oÀɱë5èuÁË~–Ÿ~oŒëÙ^üÛƒº©ÜOÄA£*Lùº´ômïY¿?¡„uŠK£ª–ôÝ‚SWš³\²V"‚ÃðŸõ— rŸø¸É€AgÎcŸOÅr%yQ])8¿
+ t&s2™±mîíÑzÍe9øƒDY-Ü…`Qó‹
+L©‘‹Œé µ¬ÄBÆÞVµó¦¡Ûå 6žiæ¼wóf®¡±µÐfx èX ·«UKÑÑ&Ðts?Ñõ�ϸՋÂ.¥ñº»^Ö°ËX4` @]7Y¶“ñ6t€¢2k‘΄1‚I’Aª1 TÐβ
MÉ ±piú
Zêv „_á„êÒƒ2{²½5I'Ñç Ì*Ö~ûßm°Úkðãî—£]óTùU¨,±'²ÆOecÁ,fô VœÎiÛA®ª¨“F×è� É0@ÕæS
+‡È. Ð<sa Aã¯/ÄÑ'Ž<Ê)õÑEþc”gêÌS®©lfô)´àe
+Ûìj xæÏ`vôúêŽQ$òÙ³ÊÆjWhmœÑ¨dáµ×ùf:~¬°¼†Aß_ÓŠ8À°í~¼BÆ)RH™
+ “„.ÄóžØÚQ9ËËO5,æÁÆÄ·*Ïz•£›ÃE× Ž9_ÀîM (Ð0ÌlÕ‹@Gé¯Î:«kðµPÒ®¯.®„ k“44Á¨3þùæì}�)
ò)(+4Ú;w¤ôÝH %¤fØoóöskÖ<CLAób–h„üO’K|Ç‘¡Ä‰fÚÜS6«4€Æ٘όg—‚qN]>ŸIÓ*‰% Xm†&öY!õ¦kŠ, ö>ØÈìò¬’WqoXttÅA ä ÎÓçV®âéŠúJñzéÏ÷Ó6–\³D–S¹æFbøDâb*nmwä½Öã õã6Ñ«¸@b¡†qý]I¨€€'ç7A"†°[bþä[Ð?t�% w.š8“�Q/§ÔçRüûuÛ“Pè„™³FðÄ*÷8í®ª´Ö¥èå;ÐWpÔfÃT•¬<¨'lóv#;úå òß2 EÿûgÍ�6‘JBÇ h®WÙ#ð›t Q,öšèò½drÔá̹öÖÃ^[/8>ƒx{³ ~¡Šõ€çÒá’„KÆZúùÞz2|Êý"GEó·¨´¤öÒáI1t¤úVHו @'9‚Ô+v1ç €®J#ìþ^á„d¾Ê{`3¾êmô=ƒN°ÈËÖx4£†¥ Û¡ÄÈŸmU¶ú_µ4å¸gò…Ø%½¢ƒT½lâ°ÊîÙs)æ°7YÅzÐq`úüËqÌ5+.ø‹Ž‚n'Ž½nÁ9Ù:à"³¹1 ï×!®c•õ…ÚJ0™Si…<†ý«n6r¨iqÑLYMpÑö°µfá{Í’É›\<Âð…ÒŽ©¤øÞ}ÁG£¿w.wÜe,ìoŸPI@¿.z`X•8¿yû+rê$§ Àï• ¡¢`j,,ïÞÕ”�F[j Ê'„…»–+¤¼<šå’9ÐÖæÒ"U B~°—l£xîK â)§ÌW”¥Úç±"6ÐÆêõå厽àÐT~ÍŒf‹õ£y2óªÁh¥š·ej^wàß1‡«Ôâ.ûJFX° ŸŒóÄy@ŒaÖ[AÌð:þ¬Sgw'ì¡Ô¸!³hé\Šé}bP³æÙ$%e¨L·rA{u^ ÏC©Z¶' ô¦Û—†v£zûEŸ£ü=Þ²ƒšSÇd³‹#?}߬
+ÃÀ¯¯oÓ€êC5wsái˜ß+„$š´÷53Zýv_PJ®XÉ`¿wj雡êÕ-e'ýN…ÆAÆèÌ™¦€ôm7¡§XQPJæÁy0ž-õØšâ+@}-7 ðËdíîæ˜X°�³™Þè¬ETµo·y)r,z1ÖskÍ––7ÒtèRhüS¦3P~#g ÀW¿½ï9X»]ÌàKò½Éç! ÷¹‚Ž3ÜME:p%¨Ö÷ÖªRtc@.üç½dÊ
+¦Ç±Ic>vBÞËå«åƒ¬ vS éfõQTåˆýO¹Û,JÏ^+럕âQ•ýfµZ {r²ŸR†gWûÔ3Ī? =jKƒë†l̲¤žî®�<ž|T“ˆ—T Û @pž7-Ç0ðdçj ….fœætãô73ãÎFã]\ÆT<÷&BX;\�(§ÙZâûIYØ�¿"äx|ñË$†W
+~m§ï G¤ÁÕÛÐí Þm~=Ïê,T·DµÙ[V‹œÏÒŠ¹ ùËûFÖf\F�ÌøÀ)l6à2-T3ùy“ÄpBU«$®Éõo´ÆdÀxÇþñ_°¯$ÀÓ+m|—:°×>ÚÀ ÕŒŽ©êù š§…êࢊ/ß—6 ¾˜›�½Û-Åò'ESaâäWk.’|]àF|W
ñß-0
+Ëe2����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/images/shortcut/favstar-rtl.svg b/core/themes/claro/images/shortcut/favstar-rtl.svg
new file mode 100644
index 0000000000000000000000000000000000000000..943c7d03cc0820f33fdd40e573b7837f80006367
--- /dev/null
+++ b/core/themes/claro/images/shortcut/favstar-rtl.svg
@@ -0,0 +1 @@
+<svg height="24" width="96" xmlns="http://www.w3.org/2000/svg"><g stroke="#8e929c"><path d="m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z" fill="#ffd23f"/><g fill="none"><path d="m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z"/><path d="m29.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6" stroke-linecap="square" stroke-miterlimit="3"/></g></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/shortcut/favstar.svg b/core/themes/claro/images/shortcut/favstar.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f0ac61f62741a484cb67e6e3ad3d776e4dc6704c
--- /dev/null
+++ b/core/themes/claro/images/shortcut/favstar.svg
@@ -0,0 +1 @@
+<svg height="24" width="96" xmlns="http://www.w3.org/2000/svg"><g stroke="#8e929c"><path d="m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z" fill="#ffd23f"/><g fill="none"><path d="m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z"/><path d="m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6" stroke-linecap="square" stroke-miterlimit="3"/></g></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/spinner-ltr.gif b/core/themes/claro/images/spinner-ltr.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c325da5fe30de90c56e9716b6839bfb30d8a0ccd
--- /dev/null
+++ b/core/themes/claro/images/spinner-ltr.gif
@@ -0,0 +1,10 @@
+GIF89a(��ô�¦Ãõþÿüâîü»Îõ�@Ü�JÜTŽì�Fß h刬ïçëüQ€æ3kâVà\ŠêùÿÿC}è�Pà�6Ù`éFÛÓÞúJ„é}¤ïÀÓùéñúÞåûn™í6u塺ò–µó \á!ÿ NETSCAPE2.0���!ù�ÿ�,����(��@€` Ždižhj6„¢Š
+ѼôSE‘¸í›1
+¡´~©‰ÉD=ˆC@Å Š^Ó48Dh…Ã`K¢ú´Zr�QªÕƒIC’~¿–l2¶—l8;0 9ujlnD~J 4…vf>v,.~>]ž?B¢5PRš§&!�!ù��, �����J "Š˜3"æ©
+êÉ´gÑF0{À¢Õ¾:îÿ' Â�T¥,`²¨"˜£€3�E(
´ÂÑ «à–B´‹"*UÉ ¤×LÀ#@¯Ûé!�!ù� �, �����J #ŠÃ(¦(©‰´ÌÁDm1f±À tÈ¢„'Úåˆ#Z ÙB1ŸÐhJ u>C‰Æ, –Ï å%¢�È ‹³ÞÑ7\*¯Û!�!ù���, �����; Ž$à”ã# äÊŠ.ú¼èB1ï<}ŠžpHÜýˆÑè …Q³ùZ1*k@8Tf"'m£x4C�!ù���, �����B ŠØhž&ƒŽÙêFhv� n^«"œ›Ç/§HÀ¤óHžHÇ3`ô¨É#„rhý‰îÈ) xÆ„3}†��!ù��, �����J !ŠÃ8b¦™!éÈ©ˆ°xÈ›D&2» l•Š± c†dÈÔ3jzB‘5ªvGÔ©‹‚!»ÓŒE€„€6 |Á »aXŸ!�!ù��, �����@à#ŽÆ(¦©¤&Â>ÄS¼tý,¢ :^û@�e“‰„¢ ©l:ŸÐh”¨Ä¹¤)FbõXÍh�B3é^GÃ�!ù���, �����< Ž¤AŽÁ©*)¥ÎopÍj‹Ùî@ )H,Š£r68n ä�H*‡BøS ¨3ë 3•G!�!ù��, �����M !Š3ŠØy,£ŠÂ£²A%œ…A¼FÀŠAñãY ®â+¢l:aϨTŠHf3—bŽEÈIA ˆÂÍ ÛåTZöHVLþL#ü)�!ù���,
+�����G ŽAùHÀ4Œl[訴nð�3ï¢Àë�â§+y“#+w4•�I
+hrÐI!‘ FbÄ+©Ç3M òÉ‘�!ù��,
+�����_ Žc`dª
+&F0Ùš¢Á r>Æzï«“æ'p/ (¢à)}Ê^¬PõP‚á¯Aˆ¾‰à:ÂW\–5jxxNC„‰ö(
~)�\�'&!�!ù� �, �����` #Ž¤”h¬gŠ²Ó*—+¥ˆUÛ¤Á¡�ED†B¢824»¢€Ñ 0KÖëè9•R
ÚDÁ0` ‹…CÁX�! öè�O-ˆ]’2ªH LiQ(N"
,+!�!ù���, �����;`<Ê&žhúT1¤°(ŧ@^@7êåÀ 0Ç BrÉl:ŸCEN Z‘‚e}`™°÷H]†��!ù���, �����B Š˜“Œh*2GÁ©0PD‰ÙAAwߣˆ(:†¢" xt&̨T¥™Š ¦pàI ^ïQm‘åCŠQC�!ù��, �����I !ŠƒÑÄ5®c†ˆ¨°,1j4+Å’çŒß#,s;c`y\1›¢§â¨`¨ £–øj
[‘b˜Ž£¤ù'øÒ™!m°¬‡��!ù��, �����@à#Ždã $)¤Q@J"* #ïüˆ<‹^
+%,ȤÒh&›8pŠ‚½ÅÁ!Z—<a÷ãÙvÄ‘A�!ù���, �����< ŽÆ˜9*êx J G%+ÇÍÀÀ‚°©Æ¤rÉZ:ŸPh)¥~Á¬uy™=)“`3¹5M!�!ù��, �����N !ŽÎh”fʤé3ºbÄaÀAY¬Q… ÒY
++ŒV E€&k ”Z¯X© Ëeɸ+^VH!ö=S$¨Þ-‹ñF÷ª¤Gý �;
\ No newline at end of file
diff --git a/core/themes/claro/images/spinner-rtl.gif b/core/themes/claro/images/spinner-rtl.gif
new file mode 100644
index 0000000000000000000000000000000000000000..bfdc917d361f75cc082c6aba530db4551d95f8bb
--- /dev/null
+++ b/core/themes/claro/images/spinner-rtl.gif
@@ -0,0 +1,12 @@
+GIF89a(��ô �Vá\Šê±ÉõR€æàìû�AÜþÿüçëü�JÜFÛ½Ð÷ hå�Pà‡¬î�EÞA|èPÜ6iáK…ê[áz¡îÑÝø*näùþÿ¦Ãôêñúßæüœ¸ôÇÖøk—ë^‘ì�4Ø!ÿ NETSCAPE2.0���!ù�ÿ�,����(��@ƒ !Ždižhj…¦Š‡E½´Q%Ô¸ÆUÿ£L"1@
† *€h(Ÿ'BÄ(X Ç"=) á莬ænQLwVbæ~ÁŽ P®—n
"
~ l*uLN/
nhŒ4,I*_a¡*Cm¥( TWªª!�!ù��, �����B $ŽPAžâ±$hz"ã!sÊ-Jççà"O$0†$ã7T"ŸÐ¨tÄ’.¦Ìi
‚;4 ¬¨€(ž@@¡4†��!ù���, �����< ŽÀDž§ƒ®@@�A"‰gŒ+6F¯Ÿ½Û$ ȤÈ$S& 0çO :¤ ‚$cÐ8GGä0t˜N!�!ù��, �����J` Š\�$Á$]c®t,"nE®c¼V$ ùý ƤrÉlúš"�t(F8%¤ hJÁWü% °‘éÊVbaÛ"LHc!�!ù��, �����U ŠŠø]F:®Âu‰™,[̈ҵx?½àB� ö9£rY#0ŸÆË
úù@E„@à6’ÉH”FÅ p(:üÔ‚ÂKt‰ãj¹éª¾ˆ±bsKz5!�!ù��, �����g !Ž—aŽ(jdVÁiL$".‹™³ÿ@ "˜’Eœ‡�!dˆšÂâˆ*$p¾£•ÀpB Â#±¡.1`"ÂÁ…—¿!2Òˆà±ÀL¥6ON�H)a4YDC\&”!�!ù��, �����fà#Š†1ž(Yši+-z$…‹!FÏp?ÄBä`üD‡"p 5ÉCwÔ ÍSá±ÍrC“@4¼…Ñ„<¡ï8 ‹æ)ü¨’x@T
F( k"]X7KR�i+%!�!ù��, �����?` ŽäH ¥a”£R$Õ¨ª¬8$ ltm#£‚ÅGb# RTX:—„%
+ðd‘ŒD•¥EI@£rÔ%¡Ê[*1�!ù���, �����E Žd(dª>ˆc©0p4 ßc&¸(†`�Ù ‡¢Îæ2Ôˆ È(
+pJ¯£â*ˆtÃDJ,"ˆœZ!ÂMoíT�!ù��, �����G` Ž•�©ªXáŠK¶’—¨Ð¬¯Ä¾ˆoÅî HãA”4ŽšÎŲ Þœº"6` <Œ QÕ(Så®=í*žEz¾‚C�!ù��, �����? $ŠJ�cª
+‚ª‡*>M ÅŒ¬ëö./>]"H,;ƒ²SŽJA!
+8G±'Êio#jŠ›J,Ȳ—*�!ù���, �����< Ž“3žç™h p Â�ĉ�ÅÙƒë ¾ �a
®ÚÉl:‡†¦aʜœÈà‰j@‚i .[!�!ù��, �����I` ŽèH,©h¥•ˆ¤Pà„s¶d.„‡jDÙH!H:€'ê&Z¯IdÕA’Ô‘a #ÍZcC7l]$“@"ÊIC�!ù��,
+�����S ŽcAžä!$h²j2(mÆâa>¨È*Ñ‹×ó‘ ZqÄ` ˆÆòä�
+„)êóÑ’
+8¯¸— ›{Í3ï5þ-
†°m
+7tW‚CøT¿Üup!�!ù�
+�,
+�����Y "ŽdBž¤å «b°
+¤ "¡ ŠùÖ¦„ŠE‹ü‰|‘‘g A†Í_`D‹ÎF‰‚õd(h·¢ P+$Šy-B@·Åµ/ak¾ ÙÛhÀ,.V}ƒ}!�!ù���, �����B Žc1‘¨¸¤#‘�“Bé!l™çø*Ò;"<¹ˆ:¤’xDNˆÆ p ‰2UBJŒˆ” �f#Î’åù¬^¯C�!ù��, �����B` Ž$@ž(™ºž- 'ªw®ÊzÀ÷)S«G�…#K™úå,Ib 36¢C"AMY£J¢ ¸IÊwÍ6„��!ù���, �����D Ž£Cžb†ŠND¬�hâ+&'“*í0P$‡4€ðÈ< “À˦Ó4X‰F«a$ɦš'£q`Z ˆGShhßÚ�;
\ No newline at end of file
diff --git a/core/themes/claro/images/src/arrow-down.svg b/core/themes/claro/images/src/arrow-down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f5238c196b270ef0e2d745631f0cfea78dc8d7f6
--- /dev/null
+++ b/core/themes/claro/images/src/arrow-down.svg
@@ -0,0 +1 @@
+<svg height="9" viewBox="0 0 14 9" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m.2384999 1.9384769 1.4082031-1.421875 5.3535159 5.302734 5.3535161-5.302734 1.408203 1.421875-6.7617191 6.6972651z" fill="#d72222"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/arrow-left.svg b/core/themes/claro/images/src/arrow-left.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8f69240515c5a8e66e8324ac929ecca229a1a56c
--- /dev/null
+++ b/core/themes/claro/images/src/arrow-left.svg
@@ -0,0 +1 @@
+<svg height="14" viewBox="0 0 9 14" width="9" xmlns="http://www.w3.org/2000/svg"><path d="m6.9863281.31445312 1.421875 1.40820308-5.3027344 5.3535157 5.3027344 5.3535161-1.421875 1.408203-6.6972656-6.7617191z" fill="#d72222"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/arrow-right.svg b/core/themes/claro/images/src/arrow-right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c9e46db4cee1a4585676410153d173e5cac243e5
--- /dev/null
+++ b/core/themes/claro/images/src/arrow-right.svg
@@ -0,0 +1 @@
+<svg height="14" viewBox="0 0 9 14" width="9" xmlns="http://www.w3.org/2000/svg"><path d="m1.7109375.31445312-1.421875 1.40820308 5.3027344 5.3535157-5.3027344 5.3535161 1.421875 1.408203 6.6972656-6.7617191z" fill="#d72222"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/arrow-up.svg b/core/themes/claro/images/src/arrow-up.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9484044de6d28b90c88ede7477a7cdaf54c19f4e
--- /dev/null
+++ b/core/themes/claro/images/src/arrow-up.svg
@@ -0,0 +1 @@
+<svg height="9" viewBox="0 0 14 9" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m13.761938 7.213867-1.408203 1.421875-5.3535159-5.302734-5.3535161 5.302734-1.408203-1.421875 6.7617191-6.6972652z" fill="#d72222"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/checkmark.svg b/core/themes/claro/images/src/checkmark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dcc35495aa2ff6b2267711da7e82bd78f11a67ca
--- /dev/null
+++ b/core/themes/claro/images/src/checkmark.svg
@@ -0,0 +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.57143L5.6 12L14 4"/></svg>
diff --git a/core/themes/claro/images/src/cog.svg b/core/themes/claro/images/src/cog.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d6075a57a6c20f0a3616f50c055fda60458d6b04
--- /dev/null
+++ b/core/themes/claro/images/src/cog.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path 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"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/ex.svg b/core/themes/claro/images/src/ex.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c73530ad8384e08269c12bb0ac07b7b392bc4fe9
--- /dev/null
+++ b/core/themes/claro/images/src/ex.svg
@@ -0,0 +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 3L3 13"/><path d="M13 13L3 3"/></svg>
diff --git a/core/themes/claro/images/src/hamburger-menu.svg b/core/themes/claro/images/src/hamburger-menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1cbe32382955737cae74234342417bad30dbe2c8
--- /dev/null
+++ b/core/themes/claro/images/src/hamburger-menu.svg
@@ -0,0 +1 @@
+<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m15 9h-14c-.56016 0-1-.43984-1-1s.43984-1 1-1h14c.5602 0 1 .43984 1 1s-.4398 1-1 1zm0-5h-14c-.56016 0-1-.43984-1-1s.43984-1 1-1h14c.5602 0 1 .43984 1 1s-.4398 1-1 1zm-14 8h14c.5602 0 1 .4398 1 1s-.4398 1-1 1h-14c-.56016 0-1-.4398-1-1s.43984-1 1-1z" fill="#0048dc" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/hide.svg b/core/themes/claro/images/src/hide.svg
new file mode 100644
index 0000000000000000000000000000000000000000..83e8fc58aab1911929f483659d2ed017ba33a593
--- /dev/null
+++ b/core/themes/claro/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/core/themes/claro/images/src/magnifier-rtl.svg b/core/themes/claro/images/src/magnifier-rtl.svg
new file mode 100644
index 0000000000000000000000000000000000000000..081344f9ed80ea1e46148e45ac5e59661b9d4feb
--- /dev/null
+++ b/core/themes/claro/images/src/magnifier-rtl.svg
@@ -0,0 +1 @@
+<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m12 .999781c4.539454-.1723607 8.188006 4.7870352 6.687355 9.068641-1.176799 4.383903-6.993833 6.416563-10.637224 3.700244-.325764-.391006-.56541.275384-.84585.440896-1.246479 1.246479-2.492958 2.492959-3.739437 3.739438-.471354-.471354-.942709-.942709-1.414063-1.414063 1.44987-1.44987 2.89974-2.899739 4.34961-4.349609-2.810736-3.4678665-1.148506-9.2474209 3.063105-10.7098206.806281-.3139462 1.671445-.47608867 2.536504-.4757264zm0 2c-3.242467-.1231148-5.848576 3.4193109-4.776682 6.477601.841211 3.131959 4.993992 4.58038 7.599894 2.649077 2.744564-1.729245 2.900205-6.1242565.284838-8.0433125-.874799-.6978665-1.989152-1.0861495-3.10805-1.0833655z" fill="#868686"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/magnifier.svg b/core/themes/claro/images/src/magnifier.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7d15c3ef788dc60746376b196f4928cda76a182e
--- /dev/null
+++ b/core/themes/claro/images/src/magnifier.svg
@@ -0,0 +1 @@
+<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m8 .999781c-4.5394538-.1723607-8.18800628 4.7870352-6.6873554 9.068641 1.1767997 4.383903 6.9938335 6.416563 10.6372244 3.700244.325764-.391006.56541.275384.84585.440896 1.246479 1.246479 2.492958 2.492959 3.739437 3.739438l1.414063-1.414063c-1.44987-1.44987-2.89974-2.899739-4.34961-4.349609 2.810736-3.4678665 1.148506-9.2474209-3.063105-10.7098206-.8062809-.3139462-1.6714453-.47608867-2.536504-.4757264zm0 2c3.242467-.1231148 5.848576 3.4193109 4.776682 6.477601-.841211 3.131959-4.9939918 4.58038-7.5998944 2.649077-2.744564-1.729245-2.9002043-6.1242565-.2848374-8.0433125.8747985-.6978665 1.9891514-1.0861495 3.1080498-1.0833655z" fill="#868686"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/message--error.svg b/core/themes/claro/images/src/message--error.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2d43ef8346bde5f644338c70f088e09ac5f48fae
--- /dev/null
+++ b/core/themes/claro/images/src/message--error.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 14 14" width="16" xmlns="http://www.w3.org/2000/svg"><g stroke="#e34f4f" stroke-width="2"><path d="m3 11.1931 8.4501-8.19315"/><circle cx="7" cy="7" fill="none" r="6"/></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/message--status.svg b/core/themes/claro/images/src/message--status.svg
new file mode 100644
index 0000000000000000000000000000000000000000..378941705a3caf3f3420fdfef638e15e05c2ab3b
--- /dev/null
+++ b/core/themes/claro/images/src/message--status.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 13">
+ <path d="M2 6.57143L5.6 10L14 2" fill="none" stroke="#42a877" stroke-width="3"/>
+</svg>
diff --git a/core/themes/claro/images/src/message--warning.svg b/core/themes/claro/images/src/message--warning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5b523c948ce5aba59c2af702b44f5e6a279adeb8
--- /dev/null
+++ b/core/themes/claro/images/src/message--warning.svg
@@ -0,0 +1 @@
+<svg fill="#e0ac00" height="16" viewBox="0 0 4 14" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m.5 0h3v9h-3z"/><circle cx="2" cy="12.5" r="1.5"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/plus.svg b/core/themes/claro/images/src/plus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e8810ec74e8b13c8842cbe4d74dcefa6f638473d
--- /dev/null
+++ b/core/themes/claro/images/src/plus.svg
@@ -0,0 +1 @@
+<svg height="16" stroke="#000" stroke-width="2" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m3 8h10"/><path d="m8 3v10"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/select.svg b/core/themes/claro/images/src/select.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8fecd39147e87b4681ef130f4147c191d98c6ff
--- /dev/null
+++ b/core/themes/claro/images/src/select.svg
@@ -0,0 +1 @@
+<svg height="9" viewBox="0 0 14 9" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m1 .999999 6 6.000001 6-6" fill="none" stroke="#545560" stroke-width="1.5"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/show.svg b/core/themes/claro/images/src/show.svg
new file mode 100644
index 0000000000000000000000000000000000000000..56ae78f30931c802bbd293ced56738c0f5bfa230
--- /dev/null
+++ b/core/themes/claro/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/core/themes/claro/images/src/sort--asc.svg b/core/themes/claro/images/src/sort--asc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..366b6aa403fe9cc31817ffa771bb60eeb9506250
--- /dev/null
+++ b/core/themes/claro/images/src/sort--asc.svg
@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 10 12" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m5 .43945312-4.28125 4.27929688 1.0625 1.0625 2.46875-2.46875v7.9375h1.5v-7.9375l2.46875 2.46875 1.0625-1.0625z" fill="#004adc"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/sort--desc.svg b/core/themes/claro/images/src/sort--desc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1d35a03739c0441b7e26072c15ca4a318f086255
--- /dev/null
+++ b/core/themes/claro/images/src/sort--desc.svg
@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 10 12" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m4.25.75v7.9375l-2.46875-2.46875-1.0625 1.0625 4.28125 4.279297 4.28125-4.279297-1.0625-1.0625-2.46875 2.46875v-7.9375z" fill="#004adc"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/sort--inactive--ltr.svg b/core/themes/claro/images/src/sort--inactive--ltr.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bf4cb87c7c1687debeb077733067961cd20b9d2b
--- /dev/null
+++ b/core/themes/claro/images/src/sort--inactive--ltr.svg
@@ -0,0 +1 @@
+<svg height="8" viewBox="0 0 14 8" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m1.75.25v1.5h10.5v-1.5zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z" fill="#8e929c"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/sort--inactive--rtl.svg b/core/themes/claro/images/src/sort--inactive--rtl.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e0be1a3dbfee1b6fb05f429860fd1b545919c4c0
--- /dev/null
+++ b/core/themes/claro/images/src/sort--inactive--rtl.svg
@@ -0,0 +1 @@
+<svg height="8" viewBox="0 0 14 8" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m12.25.25v1.5h-10.5v-1.5zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z" fill="#8e929c"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/tabledrag-handle.svg b/core/themes/claro/images/src/tabledrag-handle.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d0f4fc417d4b3b902143f29d579cf85d0e681b57
--- /dev/null
+++ b/core/themes/claro/images/src/tabledrag-handle.svg
@@ -0,0 +1 @@
+<svg height="17" viewBox="0 0 16 16" width="17" xmlns="http://www.w3.org/2000/svg"><path d="m14.102955 5.47562c-.1819-.20654-.4917-.23016-.7014-.05265-.2098.17684-.2462.4914-.0814.71278l1.0998 1.34591h-5.9075397v-5.86152l1.31954 1.11304c.1033.0945.2395997.14242.3771997.13162.1383-.01013.2667-.07762.3548-.18629.088-.10935.129-.24974.1131-.39014-.0159-.14039-.0873-.26796-.1979-.35369l-2.1513197-1.815715c-.1879501-.1586199-.4592601-.1586199-.6472101 0l-2.15136 1.815715c-.11052.08572-.1819799.2133-.19787.35369-.0159.1404.02514.2808.1131601.39014.08801.10867.2163899.17616.35471.18629.1376499.0108.2739799-.03712.3772199-.13162l1.31956-1.11304v5.86152h-5.90757l1.0912601-1.34591c.13963-.22004.09661-.51163-.10059-.6797-.19722-.16875-.4864-.15997-.67369.01957l-1.78881905 2.19431c-.155515.1917-.155515.46843 0 .66013l1.78881905 2.19434c.18199.2065.49169.2301.70147.0526.20978-.1768.24617-.4914.0814-.71276l-1.09986-1.34591h5.9075699v5.86147l-1.3195699-1.113c-.2170501-.1681-.52545-.1316-.6988201.0824-.1740399.2146-.15089.5298.05162.7161l2.15136 1.8164v-.0007c.18794.1587.4592601.1587.6472001 0l2.1513297-1.8157c.2025-.1863.2257-.5015.0517-.7161-.1734-.214-.4818-.2504-.6988997-.0824l-1.31954 1.1131v-5.86155h5.9075397l-1.0912 1.3459c-.1059.10193-.1641.24505-.1602.39285.004.1485.0702.2875.182.3827.1119.0952.2581.137.4017.1154.1436-.0223.2713-.106.3507-.2308l1.7809-2.19434c.1549-.19169.1549-.46842 0-.66012z"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/tabledrag-tree.svg b/core/themes/claro/images/src/tabledrag-tree.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f871470a0ed28e700073bf11555444bde69342c6
--- /dev/null
+++ b/core/themes/claro/images/src/tabledrag-tree.svg
@@ -0,0 +1 @@
+<svg height="240" viewBox="0 0 25 25" width="240" xmlns="http://www.w3.org/2000/svg"><g stroke="#888"><path d="m12 12.5h13"/><path d="m0 12.5h13"/><path d="m12.5 12v-99"/><path d="m12.5 12v99"/></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/src/trash.svg b/core/themes/claro/images/src/trash.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c0ec27d72b2b14c2b98d05e222799e4684274faa
--- /dev/null
+++ b/core/themes/claro/images/src/trash.svg
@@ -0,0 +1 @@
+<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/core/themes/claro/images/ui-icons-222222-256x240.png b/core/themes/claro/images/ui-icons-222222-256x240.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a9606f7614c8bd5d0b9b147e47f719c90598070
--- /dev/null
+++ b/core/themes/claro/images/ui-icons-222222-256x240.png
@@ -0,0 +1,28 @@
+‰PNG
+
+���
IHDR������ð���ØIJù���íPLTE"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""]šó���NtRNS�2P¿ƒ™."Tp@f`Í <BHJ Z&0R,…4‡ÃjÉÏÇ8D ½¹|«µ¥©³(ýŸ$ï
+£b•¡¯lßF>n~‘hhÒHý�� êIDATx^웊ã0 E ðÝÿ8 avƒç±ß„44¥z°,Í—lKVœ¸îŒ'Ð4MQ_ ?Ï�u9Ä(RP“1õÆ
+`2ÐÁ/µ@êA:ÿd õ¾
+@säxÚÝ ØX.·àñÇ‚^@ïкR÷å�]¹B<ñÂ�ToÁCT|",Ò ¥5à;ž¾…vcª_„š¦iš¦i¾âM° õ"æÝTˆ ”¯ü}@øB¨P·â(6˜Í'å«Ü 7jâ<þ<â P!_1ŸØÿÝ+ø ÒˆËæ¸R>e *àMw~ à;Äk@?¾‚¦iš¦i®y\jŸ÷0€xÁâI8׿Š>X ±}6™Ý±–:Ð�¤®ûÏñ YºÔ»ã—ˆÄXArÀbî?n—q‚ÌNŽ ¹Ç8@vffsvÔÿ‰å†U~ 1ÙÝ8×Éð¬Ú�t!ëC`ÿ\СC˾”UÆEx¨~L6MÓ4MÓ\ÿY*\ @Ü/fÈjÁ¹„d#Ș•¨IÊPi÷!n0—ýË]HË�˜¡&-VTL@©»u™Å @Œ ‰ºbw‘)EŒPAÞ;Áø
+c=�¤ªPþÒåo50B€J€´N€ {¬eˆûçawß¡‹‘n‚:s ¸ÆÝ?aÃO™$-‚iŽÂ"(в$ÿ!¨<GY †xD®�÷¾ˆ4MÓ4Mø“"?˜±0^Ⱥ9dþ:
+|*Æ?eÓSF:¯Æƒô×ÁNéÊˬ³
+HLNÌF „$óë0eÀ!îÒ¤ƒü}>N˜1†á—/r¿+ŠIß‘¯£Î°5Š0ó”#ðv<ãëóf{hôöw¬·=
+¨áÝ”–Èü „`�ÊÏ*!X1ä¿h¡Îì^qüú$1f¨ßs KÓ4MÓlŒÆ›Oïçü®ÅO‡à`½ Ûò4mœ|Û«§VÀ¿ýÖ‘žc’ù‘8¦ûåŸ °Ãs¢Ç9˜ôm0Û üÜÌîüï8ºxVøKHÐQÞJ€þwEÍrn§W€íw¦¹ô{…¹ü©ñ)k€¦×ÎlƒMk€ìuÿ?û)–üù„¤ÎZÁǽ¬a»p ñÑäø›¦išæO;g£Ü¶qEáÃÝ�ŒA E±¶¥˜µS)um7Mš´ ãÖ®§qêæ{ÿÇ©¸Ø -$%,£ |”†s°ˆsæòba/é¼.ÍGÙ) iKäÀ8W $܃>‹> öµJûW…, ~LéH÷×Ș`–Ø)Ëœš6‚@Ä”äd¶òÔT_ð±ŸYÈ
+²Œ"Kþ_aCxB‘0`zÞ+6(ËÒ}
+d ` ˆì ¬‚�@³SÔ&ÜT�‰�Ȳà€ÙÀ|>J‚X¤˜âN¡¦ dÔb~ÃÀ÷ÎHU�9ö$‰¦4žñ �{Àîbò» € Ó5Imâ�ÌÿÃn�@ÀÈETƒxpF²f9ù¬
@ ¼,�8gÌ
+ =ê¾æʲLóVãëÇ•0ÿ÷÷ ¦EÄh4šF¨Åb‘îÌf9ä³n�R7�x €€ƒÖzWÚì@O�ŠPÀ'2É´º”©�B-1©A
<~ü²døYžÏ¼ðA§xüT3*XÅ’bàeü¾~týfq�Y�ALÍ:� üIMTrY–ª�?«ñ$49¼'‹¢½
+¬)`\¾@øzæßÀ‡¯Íø8=¸ôeÐÎg
+2ðLûå²M¯²ü£
q�–@©Íá}Uãõ‹Éf¿8©Ÿ ¥î OŸªNi@õãñø€O™Ý{ì)5L£Û³É…Úø¨KYª‡=ØSHUU& Þ[ã 8,rl¢3…é=zWmzÀü#,˜ž=÷óEQ\AK µJ 8ÊÖSM1G:‚£È?P-Ì?XīɵøŒÏØA†WŽ7ƒ’†Ñ õL’¢*Pïe{¦¥
+ª*u‚�SÓSˆ+N9•£
àIàjLëùÁ‹—û¹Z<¹¼.ÀŸùœÏw
E¤Ÿtu¦¬ˆç¾vÔ¸óÚHë³SQ9ÕÜóÔø{©�$0Íá)]ÿx]:�}¡/õ׬ÑzÜV€i:¬€Š`®_Pž øWÔ|¥†Å"ºw�ïAê ¨€O&§óý âûq‡sÎô|Í×üÑ#Ú `Ú›¶qó_2Ià+BçÝ;õty²\ LàYù^/
+À4_>?øû7k=cÍäBmþeØ[Àt,ŽLWTŽq_�Š@rNB ÀüÛU>í ¥zðDÆÅZæ?qïºþõâÛ©4ýöEÀN…ëù{1%n¢»™ÿp øgïXÃHÆź2ÿñe°Åu –÷%é~© ‚ÒºyôO„s ߊ ¬o—�ÕèÿIP¨@¿ÇJÒ
+§–C° ’çß}Ç7v:ìÈÐrŸçÏÙ_&Ö[ä¬É# oÈSkU Æyþ*H�~M�…
+*K•Vñl|ÑjþqÆ?)V9…ª6!λ;E
¶Ý†ƒûW„÷žvG
+n¶K+^±±�€
+ó»êß°�,€×¯¥×¯ÍH.Ê
+*¥–Œ X�Ú¡û1ÀO§`ðrvJ÷W¬òd�4¤ìÆãá{jwÞÜ{ÒH½Ææ_d5´:ü{2ÀvÎA®… :�™áb¹,ŠÂt¾b¥œØQ*€„)1Ý^Eþ=Ý ð5“SxÓ™×Ï^�»À.ì6Ú 9 ÇùçïyùrörÉ¡ÖðŠ•4Þ\�qü €£Ð¿,V5‹VGƒs{{{A�Á{~qÊÁéa>«dX.g³YÐ_åù˜bó=Àü¯,<”N†–�±ÚáK�I»Ööä xòdý@²ä~¹\²$yÜüUàHG@+K…¬¦Ó¯LQŠÒYØ“mÑDœdÑèäg°Di`£ó€#IG8Õ€W@Ð1^99hGŸD@wÉJæñ Ÿéªó€ëÃîÉÉ®ŒjÇIrrqωWNn†<—±ÿ=À÷ûº;¼…·ø5?è®ðàÑZìH�Vsæ2ôo TD©M1`¾Íp®- -€ û¿û*¤¤LÜ Ù†”fî%™c�¶Z�R[¤g‚bÿPö/Ü4Í»ìéÄRÐv�çàm~À”iìlÞÍjénå*0ýNÒ;Ó‚ùo@Éš2@[ß<s1óŸÀ%C&)ÃÜFxæó9^[ §ˆó˜ÿ
TÀ¶›` à ‡ à$®€ôl|=Àä6ˆ›Þ “/’MÎë»
+HhkÌ©±¢;nä±zz€ŒÞª/üé
À›Ÿô‚î %±Ü&ŒËÞOHlž{÷bÿÄr›€E`ñ¸îåØIå˜0¿i«§ vJßÞ–P*ÔÄR”Ú`DX<í9—PÛ w°ñ8�Ó¡2m’í�Ód�0–€µ”Æ@´C@0.‘tœ–ˆ[[˜î“ÜÚ `ô÷€[{ æz\†yÀÀÀÀÀÀ�•î0î?âýS pèîÆâ}‰Y.Ê7P(‚øû®¬¯)+þ+Þ‹Uʘ8âge}-q<“Þ—zf%�«…Æ8ÂŒd{ÙéO»|›½f=»iB‘Qëëˆç°‡x)*X8vÌÎÍF¬õˆÑèlÍ83Nuwœõøµ�©©�ë +Bûä›à¯¬¯'c*Ic5€ryÀím‚<;|Ömû Q–„öÑm¥x ¼-t°ÏôëÄ"ª+j;ÞVtšäçúu¼ŒîêÚŽ·
}1û´ì_¤ã…”WÕññ¶ û‰? ÐjèêcŽ×ú@�œ´šX+1Þ ?z=ÅšÞñ¹¤®&Ö€j} âÅÑ4˜–Ž%à’ûƒÔ¯‘úÆ%" ?#uõÏ?ÿlºFZÂeh“HhŽ¥ãÈèÙ_±¡ÞýÍñeÏG@Ÿ^Öþ7@%U‰�RÏiCW× q…
+Xªö›{ TUï õkÃôETHf©%—
+ÀššÒMÍšàI²Ik%ÆMR±&=Þ¨´†¥é^¶}‹·Ý˶'2ññ¶£ûÙþTÖŽ·ÝÏÀÀÀÀÀÀ�5l\ßÈÎà}» ?�2ºÔ €ÐÍ
+�Ȉu: $ѧÑPC`¸
+ÜYF覀P/xüÕýtSiô«‘ðû+ÀüÆúfV�£æ‘€†Ð/
+õíí¾!ô?Šý3º `þIø¿ýöW® ÿwn `þodØŒì÷š30ð?Éæs s ‹����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/images/ui-icons-454545-256x240.png b/core/themes/claro/images/ui-icons-454545-256x240.png
new file mode 100644
index 0000000000000000000000000000000000000000..80cb644a58f9bb4d638d0d44b060caa8895ea48a
--- /dev/null
+++ b/core/themes/claro/images/ui-icons-454545-256x240.png
@@ -0,0 +1,28 @@
+‰PNG
+
+���
IHDR������ð���ØIJù���íPLTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE†Ú²Â���NtRNS�2P¿ƒ™."Tp@f`Í <BHJ Z&0R,…4‡ÃjÉÏÇ8D ½¹|«µ¥©³(ýŸ$ï
+£b•¡¯lßF>n~‘hhÒHý�� êIDATx^웊ã0 E ðÝÿ8 avƒç±ß„44¥z°,Í—lKVœ¸îŒ'Ð4MQ_ ?Ï�u9Ä(RP“1õÆ
+`2ÐÁ/µ@êA:ÿd õ¾
+@säxÚÝ ØX.·àñÇ‚^@ïкR÷å�]¹B<ñÂ�ToÁCT|",Ò ¥5à;ž¾…vcª_„š¦iš¦i¾âM° õ"æÝTˆ ”¯ü}@øB¨P·â(6˜Í'å«Ü 7jâ<þ<â P!_1ŸØÿÝ+ø ÒˆËæ¸R>e *àMw~ à;Äk@?¾‚¦iš¦i®y\jŸ÷0€xÁâI8׿Š>X ±}6™Ý±–:Ð�¤®ûÏñ YºÔ»ã—ˆÄXArÀbî?n—q‚ÌNŽ ¹Ç8@vffsvÔÿ‰å†U~ 1ÙÝ8×Éð¬Ú�t!ëC`ÿ\СC˾”UÆEx¨~L6MÓ4MÓ\ÿY*\ @Ü/fÈjÁ¹„d#Ș•¨IÊPi÷!n0—ýË]HË�˜¡&-VTL@©»u™Å @Œ ‰ºbw‘)EŒPAÞ;Áø
+c=�¤ªPþÒåo50B€J€´N€ {¬eˆûçawß¡‹‘n‚:s ¸ÆÝ?aÃO™$-‚iŽÂ"(в$ÿ!¨<GY †xD®�÷¾ˆ4MÓ4Mø“"?˜±0^Ⱥ9dþ:
+|*Æ?eÓSF:¯Æƒô×ÁNéÊˬ³
+HLNÌF „$óë0eÀ!îÒ¤ƒü}>N˜1†á—/r¿+ŠIß‘¯£Î°5Š0ó”#ðv<ãëóf{hôöw¬·=
+¨áÝ”–Èü „`�ÊÏ*!X1ä¿h¡Îì^qüú$1f¨ßs KÓ4MÓlŒÆ›Oïçü®ÅO‡à`½ Ûò4mœ|Û«§VÀ¿ýÖ‘žc’ù‘8¦ûåŸ °Ãs¢Ç9˜ôm0Û üÜÌîüï8ºxVøKHÐQÞJ€þwEÍrn§W€íw¦¹ô{…¹ü©ñ)k€¦×ÎlƒMk€ìuÿ?û)–üù„¤ÎZÁǽ¬a»p ñÑäø›¦išæO;g£Ü¶qEáÃÝ�ŒA E±¶¥˜µS)um7Mš´ ãÖ®§qêæ{ÿÇ©¸Ø -$%,£ |”†s°ˆsæòba/é¼.ÍGÙ) iKäÀ8W $܃>‹> öµJûW…, ~LéH÷×Ș`–Ø)Ëœš6‚@Ä”äd¶òÔT_ð±ŸYÈ
+²Œ"Kþ_aCxB‘0`zÞ+6(ËÒ}
+d ` ˆì ¬‚�@³SÔ&ÜT�‰�Ȳà€ÙÀ|>J‚X¤˜âN¡¦ dÔb~ÃÀ÷ÎHU�9ö$‰¦4žñ �{Àîbò» € Ó5Imâ�ÌÿÃn�@ÀÈETƒxpF²f9ù¬
@ ¼,�8gÌ
+ =ê¾æʲLóVãëÇ•0ÿ÷÷ ¦EÄh4šF¨Åb‘îÌf9ä³n�R7�x €€ƒÖzWÚì@O�ŠPÀ'2É´º”©�B-1©A
<~ü²døYžÏ¼ðA§xüT3*XÅ’bàeü¾~týfq�Y�ALÍ:� üIMTrY–ª�?«ñ$49¼'‹¢½
+¬)`\¾@øzæßÀ‡¯Íø8=¸ôeÐÎg
+2ðLûå²M¯²ü£
q�–@©Íá}Uãõ‹Éf¿8©Ÿ ¥î OŸªNi@õãñø€O™Ý{ì)5L£Û³É…Úø¨KYª‡=ØSHUU& Þ[ã 8,rl¢3…é=zWmzÀü#,˜ž=÷óEQ\AK µJ 8ÊÖSM1G:‚£È?P-Ì?XīɵøŒÏØA†WŽ7ƒ’†Ñ õL’¢*Pïe{¦¥
+ª*u‚�SÓSˆ+N9•£
àIàjLëùÁ‹—û¹Z<¹¼.ÀŸùœÏw
E¤Ÿtu¦¬ˆç¾vÔ¸óÚHë³SQ9ÕÜóÔø{©�$0Íá)]ÿx]:�}¡/õ׬ÑzÜV€i:¬€Š`®_Pž øWÔ|¥†Å"ºw�ïAê ¨€O&§óý âûq‡sÎô|Í×üÑ#Ú `Ú›¶qó_2Ià+BçÝ;õty²\ LàYù^/
+À4_>?øû7k=cÍäBmþeØ[Àt,ŽLWTŽq_�Š@rNB ÀüÛU>í ¥zðDÆÅZæ?qïºþõâÛ©4ýöEÀN…ëù{1%n¢»™ÿp øgïXÃHÆź2ÿñe°Åu –÷%é~© ‚ÒºyôO„s ߊ ¬o—�ÕèÿIP¨@¿ÇJÒ
+§–C° ’çß}Ç7v:ìÈÐrŸçÏÙ_&Ö[ä¬É# oÈSkU Æyþ*H�~M�…
+*K•Vñl|ÑjþqÆ?)V9…ª6!λ;E
¶Ý†ƒûW„÷žvG
+n¶K+^±±�€
+ó»êß°�,€×¯¥×¯ÍH.Ê
+*¥–Œ X�Ú¡û1ÀO§`ðrvJ÷W¬òd�4¤ìÆãá{jwÞÜ{ÒH½Ææ_d5´:ü{2ÀvÎA®… :�™áb¹,ŠÂt¾b¥œØQ*€„)1Ý^Eþ=Ý ð5“SxÓ™×Ï^�»À.ì6Ú 9 ÇùçïyùrörÉ¡ÖðŠ•4Þ\�qü €£Ð¿,V5‹VGƒs{{{A�Á{~qÊÁéa>«dX.g³YÐ_åù˜bó=Àü¯,<”N†–�±ÚáK�I»Ööä xòdý@²ä~¹\²$yÜüUàHG@+K…¬¦Ó¯LQŠÒYØ“mÑDœdÑèäg°Di`£ó€#IG8Õ€W@Ð1^99hGŸD@wÉJæñ Ÿéªó€ëÃîÉÉ®ŒjÇIrrqωWNn†<—±ÿ=À÷ûº;¼…·ø5?è®ðàÑZìH�Vsæ2ôo TD©M1`¾Íp®- -€ û¿û*¤¤LÜ Ù†”fî%™c�¶Z�R[¤g‚bÿPö/Ü4Í»ìéÄRÐv�çàm~À”iìlÞÍjénå*0ýNÒ;Ó‚ùo@Éš2@[ß<s1óŸÀ%C&)ÃÜFxæó9^[ §ˆó˜ÿ
TÀ¶›` à ‡ à$®€ôl|=Àä6ˆ›Þ “/’MÎë»
+HhkÌ©±¢;nä±zz€ŒÞª/üé
À›Ÿô‚î %±Ü&ŒËÞOHlž{÷bÿÄr›€E`ñ¸îåØIå˜0¿i«§ vJßÞ–P*ÔÄR”Ú`DX<í9—PÛ w°ñ8�Ó¡2m’í�Ód�0–€µ”Æ@´C@0.‘tœ–ˆ[[˜î“ÜÚ `ô÷€[{ æz\†yÀÀÀÀÀÀ�•î0î?âýS pèîÆâ}‰Y.Ê7P(‚øû®¬¯)+þ+Þ‹Uʘ8âge}-q<“Þ—zf%�«…Æ8ÂŒd{ÙéO»|›½f=»iB‘Qëëˆç°‡x)*X8vÌÎÍF¬õˆÑèlÍ83Nuwœõøµ�©©�ë +Bûä›à¯¬¯'c*Ic5€ryÀím‚<;|Ömû Q–„öÑm¥x ¼-t°ÏôëÄ"ª+j;ÞVtšäçúu¼ŒîêÚŽ·
}1û´ì_¤ã…”WÕññ¶ û‰? ÐjèêcŽ×ú@�œ´šX+1Þ ?z=ÅšÞñ¹¤®&Ö€j} âÅÑ4˜–Ž%à’ûƒÔ¯‘úÆ%" ?#uõÏ?ÿlºFZÂeh“HhŽ¥ãÈèÙ_±¡ÞýÍñeÏG@Ÿ^Öþ7@%U‰�RÏiCW× q…
+Xªö›{ TUï õkÃôETHf©%—
+ÀššÒMÍšàI²Ik%ÆMR±&=Þ¨´†¥é^¶}‹·Ý˶'2ññ¶£ûÙþTÖŽ·ÝÏÀÀÀÀÀÀ�5l\ßÈÎà}» ?�2ºÔ €ÐÍ
+�Ȉu: $ѧÑPC`¸
+ÜYF覀P/xüÕýtSiô«‘ðû+ÀüÆúfV�£æ‘€†Ð/
+õíí¾!ô?Šý3º `þIø¿ýöW® ÿwn `þodØŒì÷š30ð?Éæs s ‹����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/images/ui-icons-800000-256x240.png b/core/themes/claro/images/ui-icons-800000-256x240.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bf106b2b4d07cc47d45f96fa3fb473c85e8ee17
--- /dev/null
+++ b/core/themes/claro/images/ui-icons-800000-256x240.png
@@ -0,0 +1,28 @@
+‰PNG
+
+���
IHDR������ð���ØIJù���íPLTE€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€��€�� j>§���NtRNS�2P¿ƒ™."Tp@f`Í <BHJ Z&0R,…4‡ÃjÉÏÇ8D ½¹|«µ¥©³(ýŸ$ï
+£b•¡¯lßF>n~‘hhÒHý�� êIDATx^웊ã0 E ðÝÿ8 avƒç±ß„44¥z°,Í—lKVœ¸îŒ'Ð4MQ_ ?Ï�u9Ä(RP“1õÆ
+`2ÐÁ/µ@êA:ÿd õ¾
+@säxÚÝ ØX.·àñÇ‚^@ïкR÷å�]¹B<ñÂ�ToÁCT|",Ò ¥5à;ž¾…vcª_„š¦iš¦i¾âM° õ"æÝTˆ ”¯ü}@øB¨P·â(6˜Í'å«Ü 7jâ<þ<â P!_1ŸØÿÝ+ø ÒˆËæ¸R>e *àMw~ à;Äk@?¾‚¦iš¦i®y\jŸ÷0€xÁâI8׿Š>X ±}6™Ý±–:Ð�¤®ûÏñ YºÔ»ã—ˆÄXArÀbî?n—q‚ÌNŽ ¹Ç8@vffsvÔÿ‰å†U~ 1ÙÝ8×Éð¬Ú�t!ëC`ÿ\СC˾”UÆEx¨~L6MÓ4MÓ\ÿY*\ @Ü/fÈjÁ¹„d#Ș•¨IÊPi÷!n0—ýË]HË�˜¡&-VTL@©»u™Å @Œ ‰ºbw‘)EŒPAÞ;Áø
+c=�¤ªPþÒåo50B€J€´N€ {¬eˆûçawß¡‹‘n‚:s ¸ÆÝ?aÃO™$-‚iŽÂ"(в$ÿ!¨<GY †xD®�÷¾ˆ4MÓ4Mø“"?˜±0^Ⱥ9dþ:
+|*Æ?eÓSF:¯Æƒô×ÁNéÊˬ³
+HLNÌF „$óë0eÀ!îÒ¤ƒü}>N˜1†á—/r¿+ŠIß‘¯£Î°5Š0ó”#ðv<ãëóf{hôöw¬·=
+¨áÝ”–Èü „`�ÊÏ*!X1ä¿h¡Îì^qüú$1f¨ßs KÓ4MÓlŒÆ›Oïçü®ÅO‡à`½ Ûò4mœ|Û«§VÀ¿ýÖ‘žc’ù‘8¦ûåŸ °Ãs¢Ç9˜ôm0Û üÜÌîüï8ºxVøKHÐQÞJ€þwEÍrn§W€íw¦¹ô{…¹ü©ñ)k€¦×ÎlƒMk€ìuÿ?û)–üù„¤ÎZÁǽ¬a»p ñÑäø›¦išæO;g£Ü¶qEáÃÝ�ŒA E±¶¥˜µS)um7Mš´ ãÖ®§qêæ{ÿÇ©¸Ø -$%,£ |”†s°ˆsæòba/é¼.ÍGÙ) iKäÀ8W $܃>‹> öµJûW…, ~LéH÷×Ș`–Ø)Ëœš6‚@Ä”äd¶òÔT_ð±ŸYÈ
+²Œ"Kþ_aCxB‘0`zÞ+6(ËÒ}
+d ` ˆì ¬‚�@³SÔ&ÜT�‰�Ȳà€ÙÀ|>J‚X¤˜âN¡¦ dÔb~ÃÀ÷ÎHU�9ö$‰¦4žñ �{Àîbò» € Ó5Imâ�ÌÿÃn�@ÀÈETƒxpF²f9ù¬
@ ¼,�8gÌ
+ =ê¾æʲLóVãëÇ•0ÿ÷÷ ¦EÄh4šF¨Åb‘îÌf9ä³n�R7�x €€ƒÖzWÚì@O�ŠPÀ'2É´º”©�B-1©A
<~ü²døYžÏ¼ðA§xüT3*XÅ’bàeü¾~týfq�Y�ALÍ:� üIMTrY–ª�?«ñ$49¼'‹¢½
+¬)`\¾@øzæßÀ‡¯Íø8=¸ôeÐÎg
+2ðLûå²M¯²ü£
q�–@©Íá}Uãõ‹Éf¿8©Ÿ ¥î OŸªNi@õãñø€O™Ý{ì)5L£Û³É…Úø¨KYª‡=ØSHUU& Þ[ã 8,rl¢3…é=zWmzÀü#,˜ž=÷óEQ\AK µJ 8ÊÖSM1G:‚£È?P-Ì?XīɵøŒÏØA†WŽ7ƒ’†Ñ õL’¢*Pïe{¦¥
+ª*u‚�SÓSˆ+N9•£
àIàjLëùÁ‹—û¹Z<¹¼.ÀŸùœÏw
E¤Ÿtu¦¬ˆç¾vÔ¸óÚHë³SQ9ÕÜóÔø{©�$0Íá)]ÿx]:�}¡/õ׬ÑzÜV€i:¬€Š`®_Pž øWÔ|¥†Å"ºw�ïAê ¨€O&§óý âûq‡sÎô|Í×üÑ#Ú `Ú›¶qó_2Ià+BçÝ;õty²\ LàYù^/
+À4_>?øû7k=cÍäBmþeØ[Àt,ŽLWTŽq_�Š@rNB ÀüÛU>í ¥zðDÆÅZæ?qïºþõâÛ©4ýöEÀN…ëù{1%n¢»™ÿp øgïXÃHÆź2ÿñe°Åu –÷%é~© ‚ÒºyôO„s ߊ ¬o—�ÕèÿIP¨@¿ÇJÒ
+§–C° ’çß}Ç7v:ìÈÐrŸçÏÙ_&Ö[ä¬É# oÈSkU Æyþ*H�~M�…
+*K•Vñl|ÑjþqÆ?)V9…ª6!λ;E
¶Ý†ƒûW„÷žvG
+n¶K+^±±�€
+ó»êß°�,€×¯¥×¯ÍH.Ê
+*¥–Œ X�Ú¡û1ÀO§`ðrvJ÷W¬òd�4¤ìÆãá{jwÞÜ{ÒH½Ææ_d5´:ü{2ÀvÎA®… :�™áb¹,ŠÂt¾b¥œØQ*€„)1Ý^Eþ=Ý ð5“SxÓ™×Ï^�»À.ì6Ú 9 ÇùçïyùrörÉ¡ÖðŠ•4Þ\�qü €£Ð¿,V5‹VGƒs{{{A�Á{~qÊÁéa>«dX.g³YÐ_åù˜bó=Àü¯,<”N†–�±ÚáK�I»Ööä xòdý@²ä~¹\²$yÜüUàHG@+K…¬¦Ó¯LQŠÒYØ“mÑDœdÑèäg°Di`£ó€#IG8Õ€W@Ð1^99hGŸD@wÉJæñ Ÿéªó€ëÃîÉÉ®ŒjÇIrrqωWNn†<—±ÿ=À÷ûº;¼…·ø5?è®ðàÑZìH�Vsæ2ôo TD©M1`¾Íp®- -€ û¿û*¤¤LÜ Ù†”fî%™c�¶Z�R[¤g‚bÿPö/Ü4Í»ìéÄRÐv�çàm~À”iìlÞÍjénå*0ýNÒ;Ó‚ùo@Éš2@[ß<s1óŸÀ%C&)ÃÜFxæó9^[ §ˆó˜ÿ
TÀ¶›` à ‡ à$®€ôl|=Àä6ˆ›Þ “/’MÎë»
+HhkÌ©±¢;nä±zz€ŒÞª/üé
À›Ÿô‚î %±Ü&ŒËÞOHlž{÷bÿÄr›€E`ñ¸îåØIå˜0¿i«§ vJßÞ–P*ÔÄR”Ú`DX<í9—PÛ w°ñ8�Ó¡2m’í�Ód�0–€µ”Æ@´C@0.‘tœ–ˆ[[˜î“ÜÚ `ô÷€[{ æz\†yÀÀÀÀÀÀ�•î0î?âýS pèîÆâ}‰Y.Ê7P(‚øû®¬¯)+þ+Þ‹Uʘ8âge}-q<“Þ—zf%�«…Æ8ÂŒd{ÙéO»|›½f=»iB‘Qëëˆç°‡x)*X8vÌÎÍF¬õˆÑèlÍ83Nuwœõøµ�©©�ë +Bûä›à¯¬¯'c*Ic5€ryÀím‚<;|Ömû Q–„öÑm¥x ¼-t°ÏôëÄ"ª+j;ÞVtšäçúu¼ŒîêÚŽ·
}1û´ì_¤ã…”WÕññ¶ û‰? ÐjèêcŽ×ú@�œ´šX+1Þ ?z=ÅšÞñ¹¤®&Ö€j} âÅÑ4˜–Ž%à’ûƒÔ¯‘úÆ%" ?#uõÏ?ÿlºFZÂeh“HhŽ¥ãÈèÙ_±¡ÞýÍñeÏG@Ÿ^Öþ7@%U‰�RÏiCW× q…
+Xªö›{ TUï õkÃôETHf©%—
+ÀššÒMÍšàI²Ik%ÆMR±&=Þ¨´†¥é^¶}‹·Ý˶'2ññ¶£ûÙþTÖŽ·ÝÏÀÀÀÀÀÀ�5l\ßÈÎà}» ?�2ºÔ €ÐÍ
+�Ȉu: $ѧÑPC`¸
+ÜYF覀P/xüÕýtSiô«‘ðû+ÀüÆúfV�£æ‘€†Ð/
+õíí¾!ô?Šý3º `þIø¿ýöW® ÿwn `þodØŒì÷š30ð?Éæs s ‹����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/images/ui-icons-888888-256x240.png b/core/themes/claro/images/ui-icons-888888-256x240.png
new file mode 100644
index 0000000000000000000000000000000000000000..8373712d13cf55efd105966a905ccd64cb4c5f59
--- /dev/null
+++ b/core/themes/claro/images/ui-icons-888888-256x240.png
@@ -0,0 +1,28 @@
+‰PNG
+
+���
IHDR������ð���ØIJù���íPLTEˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ …Ê{���NtRNS�2P¿ƒ™."Tp@f`Í <BHJ Z&0R,…4‡ÃjÉÏÇ8D ½¹|«µ¥©³(ýŸ$ï
+£b•¡¯lßF>n~‘hhÒHý�� êIDATx^웊ã0 E ðÝÿ8 avƒç±ß„44¥z°,Í—lKVœ¸îŒ'Ð4MQ_ ?Ï�u9Ä(RP“1õÆ
+`2ÐÁ/µ@êA:ÿd õ¾
+@säxÚÝ ØX.·àñÇ‚^@ïкR÷å�]¹B<ñÂ�ToÁCT|",Ò ¥5à;ž¾…vcª_„š¦iš¦i¾âM° õ"æÝTˆ ”¯ü}@øB¨P·â(6˜Í'å«Ü 7jâ<þ<â P!_1ŸØÿÝ+ø ÒˆËæ¸R>e *àMw~ à;Äk@?¾‚¦iš¦i®y\jŸ÷0€xÁâI8׿Š>X ±}6™Ý±–:Ð�¤®ûÏñ YºÔ»ã—ˆÄXArÀbî?n—q‚ÌNŽ ¹Ç8@vffsvÔÿ‰å†U~ 1ÙÝ8×Éð¬Ú�t!ëC`ÿ\СC˾”UÆEx¨~L6MÓ4MÓ\ÿY*\ @Ü/fÈjÁ¹„d#Ș•¨IÊPi÷!n0—ýË]HË�˜¡&-VTL@©»u™Å @Œ ‰ºbw‘)EŒPAÞ;Áø
+c=�¤ªPþÒåo50B€J€´N€ {¬eˆûçawß¡‹‘n‚:s ¸ÆÝ?aÃO™$-‚iŽÂ"(в$ÿ!¨<GY †xD®�÷¾ˆ4MÓ4Mø“"?˜±0^Ⱥ9dþ:
+|*Æ?eÓSF:¯Æƒô×ÁNéÊˬ³
+HLNÌF „$óë0eÀ!îÒ¤ƒü}>N˜1†á—/r¿+ŠIß‘¯£Î°5Š0ó”#ðv<ãëóf{hôöw¬·=
+¨áÝ”–Èü „`�ÊÏ*!X1ä¿h¡Îì^qüú$1f¨ßs KÓ4MÓlŒÆ›Oïçü®ÅO‡à`½ Ûò4mœ|Û«§VÀ¿ýÖ‘žc’ù‘8¦ûåŸ °Ãs¢Ç9˜ôm0Û üÜÌîüï8ºxVøKHÐQÞJ€þwEÍrn§W€íw¦¹ô{…¹ü©ñ)k€¦×ÎlƒMk€ìuÿ?û)–üù„¤ÎZÁǽ¬a»p ñÑäø›¦išæO;g£Ü¶qEáÃÝ�ŒA E±¶¥˜µS)um7Mš´ ãÖ®§qêæ{ÿÇ©¸Ø -$%,£ |”†s°ˆsæòba/é¼.ÍGÙ) iKäÀ8W $܃>‹> öµJûW…, ~LéH÷×Ș`–Ø)Ëœš6‚@Ä”äd¶òÔT_ð±ŸYÈ
+²Œ"Kþ_aCxB‘0`zÞ+6(ËÒ}
+d ` ˆì ¬‚�@³SÔ&ÜT�‰�Ȳà€ÙÀ|>J‚X¤˜âN¡¦ dÔb~ÃÀ÷ÎHU�9ö$‰¦4žñ �{Àîbò» € Ó5Imâ�ÌÿÃn�@ÀÈETƒxpF²f9ù¬
@ ¼,�8gÌ
+ =ê¾æʲLóVãëÇ•0ÿ÷÷ ¦EÄh4šF¨Åb‘îÌf9ä³n�R7�x €€ƒÖzWÚì@O�ŠPÀ'2É´º”©�B-1©A
<~ü²døYžÏ¼ðA§xüT3*XÅ’bàeü¾~týfq�Y�ALÍ:� üIMTrY–ª�?«ñ$49¼'‹¢½
+¬)`\¾@øzæßÀ‡¯Íø8=¸ôeÐÎg
+2ðLûå²M¯²ü£
q�–@©Íá}Uãõ‹Éf¿8©Ÿ ¥î OŸªNi@õãñø€O™Ý{ì)5L£Û³É…Úø¨KYª‡=ØSHUU& Þ[ã 8,rl¢3…é=zWmzÀü#,˜ž=÷óEQ\AK µJ 8ÊÖSM1G:‚£È?P-Ì?XīɵøŒÏØA†WŽ7ƒ’†Ñ õL’¢*Pïe{¦¥
+ª*u‚�SÓSˆ+N9•£
àIàjLëùÁ‹—û¹Z<¹¼.ÀŸùœÏw
E¤Ÿtu¦¬ˆç¾vÔ¸óÚHë³SQ9ÕÜóÔø{©�$0Íá)]ÿx]:�}¡/õ׬ÑzÜV€i:¬€Š`®_Pž øWÔ|¥†Å"ºw�ïAê ¨€O&§óý âûq‡sÎô|Í×üÑ#Ú `Ú›¶qó_2Ià+BçÝ;õty²\ LàYù^/
+À4_>?øû7k=cÍäBmþeØ[Àt,ŽLWTŽq_�Š@rNB ÀüÛU>í ¥zðDÆÅZæ?qïºþõâÛ©4ýöEÀN…ëù{1%n¢»™ÿp øgïXÃHÆź2ÿñe°Åu –÷%é~© ‚ÒºyôO„s ߊ ¬o—�ÕèÿIP¨@¿ÇJÒ
+§–C° ’çß}Ç7v:ìÈÐrŸçÏÙ_&Ö[ä¬É# oÈSkU Æyþ*H�~M�…
+*K•Vñl|ÑjþqÆ?)V9…ª6!λ;E
¶Ý†ƒûW„÷žvG
+n¶K+^±±�€
+ó»êß°�,€×¯¥×¯ÍH.Ê
+*¥–Œ X�Ú¡û1ÀO§`ðrvJ÷W¬òd�4¤ìÆãá{jwÞÜ{ÒH½Ææ_d5´:ü{2ÀvÎA®… :�™áb¹,ŠÂt¾b¥œØQ*€„)1Ý^Eþ=Ý ð5“SxÓ™×Ï^�»À.ì6Ú 9 ÇùçïyùrörÉ¡ÖðŠ•4Þ\�qü €£Ð¿,V5‹VGƒs{{{A�Á{~qÊÁéa>«dX.g³YÐ_åù˜bó=Àü¯,<”N†–�±ÚáK�I»Ööä xòdý@²ä~¹\²$yÜüUàHG@+K…¬¦Ó¯LQŠÒYØ“mÑDœdÑèäg°Di`£ó€#IG8Õ€W@Ð1^99hGŸD@wÉJæñ Ÿéªó€ëÃîÉÉ®ŒjÇIrrqωWNn†<—±ÿ=À÷ûº;¼…·ø5?è®ðàÑZìH�Vsæ2ôo TD©M1`¾Íp®- -€ û¿û*¤¤LÜ Ù†”fî%™c�¶Z�R[¤g‚bÿPö/Ü4Í»ìéÄRÐv�çàm~À”iìlÞÍjénå*0ýNÒ;Ó‚ùo@Éš2@[ß<s1óŸÀ%C&)ÃÜFxæó9^[ §ˆó˜ÿ
TÀ¶›` à ‡ à$®€ôl|=Àä6ˆ›Þ “/’MÎë»
+HhkÌ©±¢;nä±zz€ŒÞª/üé
À›Ÿô‚î %±Ü&ŒËÞOHlž{÷bÿÄr›€E`ñ¸îåØIå˜0¿i«§ vJßÞ–P*ÔÄR”Ú`DX<í9—PÛ w°ñ8�Ó¡2m’í�Ód�0–€µ”Æ@´C@0.‘tœ–ˆ[[˜î“ÜÚ `ô÷€[{ æz\†yÀÀÀÀÀÀ�•î0î?âýS pèîÆâ}‰Y.Ê7P(‚øû®¬¯)+þ+Þ‹Uʘ8âge}-q<“Þ—zf%�«…Æ8ÂŒd{ÙéO»|›½f=»iB‘Qëëˆç°‡x)*X8vÌÎÍF¬õˆÑèlÍ83Nuwœõøµ�©©�ë +Bûä›à¯¬¯'c*Ic5€ryÀím‚<;|Ömû Q–„öÑm¥x ¼-t°ÏôëÄ"ª+j;ÞVtšäçúu¼ŒîêÚŽ·
}1û´ì_¤ã…”WÕññ¶ û‰? ÐjèêcŽ×ú@�œ´šX+1Þ ?z=ÅšÞñ¹¤®&Ö€j} âÅÑ4˜–Ž%à’ûƒÔ¯‘úÆ%" ?#uõÏ?ÿlºFZÂeh“HhŽ¥ãÈèÙ_±¡ÞýÍñeÏG@Ÿ^Öþ7@%U‰�RÏiCW× q…
+Xªö›{ TUï õkÃôETHf©%—
+ÀššÒMÍšàI²Ik%ÆMR±&=Þ¨´†¥é^¶}‹·Ý˶'2ññ¶£ûÙþTÖŽ·ÝÏÀÀÀÀÀÀ�5l\ßÈÎà}» ?�2ºÔ €ÐÍ
+�Ȉu: $ѧÑPC`¸
+ÜYF覀P/xüÕýtSiô«‘ðû+ÀüÆúfV�£æ‘€†Ð/
+õíí¾!ô?Šý3º `þIø¿ýöW® ÿwn `þodØŒì÷š30ð?Éæs s ‹����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/images/ui-icons-ffffff-256x240.png b/core/themes/claro/images/ui-icons-ffffff-256x240.png
new file mode 100644
index 0000000000000000000000000000000000000000..3086869dad620762d287816748955140410fe815
--- /dev/null
+++ b/core/themes/claro/images/ui-icons-ffffff-256x240.png
@@ -0,0 +1,28 @@
+‰PNG
+
+���
IHDR������ð���ØIJù���íPLTEÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿí¦à—���NtRNS�2P¿ƒ™."Tp@f`Í <BHJ Z&0R,…4‡ÃjÉÏÇ8D ½¹|«µ¥©³(ýŸ$ï
+£b•¡¯lßF>n~‘hhÒHý�� êIDATx^웊ã0 E ðÝÿ8 avƒç±ß„44¥z°,Í—lKVœ¸îŒ'Ð4MQ_ ?Ï�u9Ä(RP“1õÆ
+`2ÐÁ/µ@êA:ÿd õ¾
+@säxÚÝ ØX.·àñÇ‚^@ïкR÷å�]¹B<ñÂ�ToÁCT|",Ò ¥5à;ž¾…vcª_„š¦iš¦i¾âM° õ"æÝTˆ ”¯ü}@øB¨P·â(6˜Í'å«Ü 7jâ<þ<â P!_1ŸØÿÝ+ø ÒˆËæ¸R>e *àMw~ à;Äk@?¾‚¦iš¦i®y\jŸ÷0€xÁâI8׿Š>X ±}6™Ý±–:Ð�¤®ûÏñ YºÔ»ã—ˆÄXArÀbî?n—q‚ÌNŽ ¹Ç8@vffsvÔÿ‰å†U~ 1ÙÝ8×Éð¬Ú�t!ëC`ÿ\СC˾”UÆEx¨~L6MÓ4MÓ\ÿY*\ @Ü/fÈjÁ¹„d#Ș•¨IÊPi÷!n0—ýË]HË�˜¡&-VTL@©»u™Å @Œ ‰ºbw‘)EŒPAÞ;Áø
+c=�¤ªPþÒåo50B€J€´N€ {¬eˆûçawß¡‹‘n‚:s ¸ÆÝ?aÃO™$-‚iŽÂ"(в$ÿ!¨<GY †xD®�÷¾ˆ4MÓ4Mø“"?˜±0^Ⱥ9dþ:
+|*Æ?eÓSF:¯Æƒô×ÁNéÊˬ³
+HLNÌF „$óë0eÀ!îÒ¤ƒü}>N˜1†á—/r¿+ŠIß‘¯£Î°5Š0ó”#ðv<ãëóf{hôöw¬·=
+¨áÝ”–Èü „`�ÊÏ*!X1ä¿h¡Îì^qüú$1f¨ßs KÓ4MÓlŒÆ›Oïçü®ÅO‡à`½ Ûò4mœ|Û«§VÀ¿ýÖ‘žc’ù‘8¦ûåŸ °Ãs¢Ç9˜ôm0Û üÜÌîüï8ºxVøKHÐQÞJ€þwEÍrn§W€íw¦¹ô{…¹ü©ñ)k€¦×ÎlƒMk€ìuÿ?û)–üù„¤ÎZÁǽ¬a»p ñÑäø›¦išæO;g£Ü¶qEáÃÝ�ŒA E±¶¥˜µS)um7Mš´ ãÖ®§qêæ{ÿÇ©¸Ø -$%,£ |”†s°ˆsæòba/é¼.ÍGÙ) iKäÀ8W $܃>‹> öµJûW…, ~LéH÷×Ș`–Ø)Ëœš6‚@Ä”äd¶òÔT_ð±ŸYÈ
+²Œ"Kþ_aCxB‘0`zÞ+6(ËÒ}
+d ` ˆì ¬‚�@³SÔ&ÜT�‰�Ȳà€ÙÀ|>J‚X¤˜âN¡¦ dÔb~ÃÀ÷ÎHU�9ö$‰¦4žñ �{Àîbò» € Ó5Imâ�ÌÿÃn�@ÀÈETƒxpF²f9ù¬
@ ¼,�8gÌ
+ =ê¾æʲLóVãëÇ•0ÿ÷÷ ¦EÄh4šF¨Åb‘îÌf9ä³n�R7�x €€ƒÖzWÚì@O�ŠPÀ'2É´º”©�B-1©A
<~ü²døYžÏ¼ðA§xüT3*XÅ’bàeü¾~týfq�Y�ALÍ:� üIMTrY–ª�?«ñ$49¼'‹¢½
+¬)`\¾@øzæßÀ‡¯Íø8=¸ôeÐÎg
+2ðLûå²M¯²ü£
q�–@©Íá}Uãõ‹Éf¿8©Ÿ ¥î OŸªNi@õãñø€O™Ý{ì)5L£Û³É…Úø¨KYª‡=ØSHUU& Þ[ã 8,rl¢3…é=zWmzÀü#,˜ž=÷óEQ\AK µJ 8ÊÖSM1G:‚£È?P-Ì?XīɵøŒÏØA†WŽ7ƒ’†Ñ õL’¢*Pïe{¦¥
+ª*u‚�SÓSˆ+N9•£
àIàjLëùÁ‹—û¹Z<¹¼.ÀŸùœÏw
E¤Ÿtu¦¬ˆç¾vÔ¸óÚHë³SQ9ÕÜóÔø{©�$0Íá)]ÿx]:�}¡/õ׬ÑzÜV€i:¬€Š`®_Pž øWÔ|¥†Å"ºw�ïAê ¨€O&§óý âûq‡sÎô|Í×üÑ#Ú `Ú›¶qó_2Ià+BçÝ;õty²\ LàYù^/
+À4_>?øû7k=cÍäBmþeØ[Àt,ŽLWTŽq_�Š@rNB ÀüÛU>í ¥zðDÆÅZæ?qïºþõâÛ©4ýöEÀN…ëù{1%n¢»™ÿp øgïXÃHÆź2ÿñe°Åu –÷%é~© ‚ÒºyôO„s ߊ ¬o—�ÕèÿIP¨@¿ÇJÒ
+§–C° ’çß}Ç7v:ìÈÐrŸçÏÙ_&Ö[ä¬É# oÈSkU Æyþ*H�~M�…
+*K•Vñl|ÑjþqÆ?)V9…ª6!λ;E
¶Ý†ƒûW„÷žvG
+n¶K+^±±�€
+ó»êß°�,€×¯¥×¯ÍH.Ê
+*¥–Œ X�Ú¡û1ÀO§`ðrvJ÷W¬òd�4¤ìÆãá{jwÞÜ{ÒH½Ææ_d5´:ü{2ÀvÎA®… :�™áb¹,ŠÂt¾b¥œØQ*€„)1Ý^Eþ=Ý ð5“SxÓ™×Ï^�»À.ì6Ú 9 ÇùçïyùrörÉ¡ÖðŠ•4Þ\�qü €£Ð¿,V5‹VGƒs{{{A�Á{~qÊÁéa>«dX.g³YÐ_åù˜bó=Àü¯,<”N†–�±ÚáK�I»Ööä xòdý@²ä~¹\²$yÜüUàHG@+K…¬¦Ó¯LQŠÒYØ“mÑDœdÑèäg°Di`£ó€#IG8Õ€W@Ð1^99hGŸD@wÉJæñ Ÿéªó€ëÃîÉÉ®ŒjÇIrrqωWNn†<—±ÿ=À÷ûº;¼…·ø5?è®ðàÑZìH�Vsæ2ôo TD©M1`¾Íp®- -€ û¿û*¤¤LÜ Ù†”fî%™c�¶Z�R[¤g‚bÿPö/Ü4Í»ìéÄRÐv�çàm~À”iìlÞÍjénå*0ýNÒ;Ó‚ùo@Éš2@[ß<s1óŸÀ%C&)ÃÜFxæó9^[ §ˆó˜ÿ
TÀ¶›` à ‡ à$®€ôl|=Àä6ˆ›Þ “/’MÎë»
+HhkÌ©±¢;nä±zz€ŒÞª/üé
À›Ÿô‚î %±Ü&ŒËÞOHlž{÷bÿÄr›€E`ñ¸îåØIå˜0¿i«§ vJßÞ–P*ÔÄR”Ú`DX<í9—PÛ w°ñ8�Ó¡2m’í�Ód�0–€µ”Æ@´C@0.‘tœ–ˆ[[˜î“ÜÚ `ô÷€[{ æz\†yÀÀÀÀÀÀ�•î0î?âýS pèîÆâ}‰Y.Ê7P(‚øû®¬¯)+þ+Þ‹Uʘ8âge}-q<“Þ—zf%�«…Æ8ÂŒd{ÙéO»|›½f=»iB‘Qëëˆç°‡x)*X8vÌÎÍF¬õˆÑèlÍ83Nuwœõøµ�©©�ë +Bûä›à¯¬¯'c*Ic5€ryÀím‚<;|Ömû Q–„öÑm¥x ¼-t°ÏôëÄ"ª+j;ÞVtšäçúu¼ŒîêÚŽ·
}1û´ì_¤ã…”WÕññ¶ û‰? ÐjèêcŽ×ú@�œ´šX+1Þ ?z=ÅšÞñ¹¤®&Ö€j} âÅÑ4˜–Ž%à’ûƒÔ¯‘úÆ%" ?#uõÏ?ÿlºFZÂeh“HhŽ¥ãÈèÙ_±¡ÞýÍñeÏG@Ÿ^Öþ7@%U‰�RÏiCW× q…
+Xªö›{ TUï õkÃôETHf©%—
+ÀššÒMÍšàI²Ik%ÆMR±&=Þ¨´†¥é^¶}‹·Ý˶'2ññ¶£ûÙþTÖŽ·ÝÏÀÀÀÀÀÀ�5l\ßÈÎà}» ?�2ºÔ €ÐÍ
+�Ȉu: $ѧÑPC`¸
+ÜYF覀P/xüÕýtSiô«‘ðû+ÀüÆúfV�£æ‘€†Ð/
+õíí¾!ô?Šý3º `þIø¿ýöW® ÿwn `þodØŒì÷š30ð?Éæs s ‹����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/js/ajax.es6.js b/core/themes/claro/js/ajax.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3ba0b927409846379b542e7c7b34629703387c9
--- /dev/null
+++ b/core/themes/claro/js/ajax.es6.js
@@ -0,0 +1,45 @@
+/**
+ * @file
+ * Ajax theme overrides for Claro.
+ */
+
+(Drupal => {
+ /**
+ * Theme override of the ajax progress indicator for full screen.
+ *
+ * @return {string}
+ * The HTML markup for the throbber.
+ */
+ Drupal.theme.ajaxProgressIndicatorFullscreen = () =>
+ '<div class="ajax-progress ajax-progress--fullscreen"><div class="ajax-progress__throbber ajax-progress__throbber--fullscreen"> </div></div>';
+
+ /**
+ * Theme override of the ajax progress indicator.
+ *
+ * @param {string} message
+ * The message shown on the UI.
+ * @return {string}
+ * The HTML markup for the throbber.
+ */
+ Drupal.theme.ajaxProgressThrobber = message => {
+ // Build markup without adding extra white space since it affects rendering.
+ const messageMarkup =
+ typeof message === 'string'
+ ? Drupal.theme('ajaxProgressMessage', message)
+ : '';
+ const throbber = '<div class="ajax-progress__throbber"> </div>';
+
+ return `<div class="ajax-progress ajax-progress--throbber">${throbber}${messageMarkup}</div>`;
+ };
+
+ /**
+ * Theme override of the ajax progress message.
+ *
+ * @param {string} message
+ * The message shown on the UI.
+ * @return {string}
+ * The HTML markup for the throbber.
+ */
+ Drupal.theme.ajaxProgressMessage = message =>
+ `<div class="ajax-progress__message">${message}</div>`;
+})(Drupal);
diff --git a/core/themes/claro/js/ajax.js b/core/themes/claro/js/ajax.js
new file mode 100644
index 0000000000000000000000000000000000000000..485d592da1712da42371d6dee4225cea4d0548d1
--- /dev/null
+++ b/core/themes/claro/js/ajax.js
@@ -0,0 +1,23 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+ Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
+ return '<div class="ajax-progress ajax-progress--fullscreen"><div class="ajax-progress__throbber ajax-progress__throbber--fullscreen"> </div></div>';
+ };
+
+ Drupal.theme.ajaxProgressThrobber = function (message) {
+ var messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
+ var throbber = '<div class="ajax-progress__throbber"> </div>';
+
+ return '<div class="ajax-progress ajax-progress--throbber">' + throbber + messageMarkup + '</div>';
+ };
+
+ Drupal.theme.ajaxProgressMessage = function (message) {
+ return '<div class="ajax-progress__message">' + message + '</div>';
+ };
+})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/autocomplete.es6.js b/core/themes/claro/js/autocomplete.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c239a7e14f88ad58413eb7c0c34eca1453303e6
--- /dev/null
+++ b/core/themes/claro/js/autocomplete.es6.js
@@ -0,0 +1,34 @@
+/**
+ * @file
+ * Claro's enhancement for autocomplete form element.
+ */
+
+(($, Drupal) => {
+ Drupal.behaviors.claroAutoCompete = {
+ attach(context) {
+ $(context)
+ .find('input.form-autocomplete')
+ .once('claroAutoComplete')
+ .each((index, value) => {
+ const $input = $(value);
+ const timeout = 400;
+ let classRemoveTimeout;
+ const classRemove = $autoCompleteElem => {
+ $autoCompleteElem.removeClass('is-autocompleting');
+ };
+
+ $input.on('input autocompletesearch autocompleteresponses', event => {
+ if (event && event.type && event.type === 'autocompletesearch') {
+ $(event.target).addClass('is-autocompleting');
+ }
+ clearTimeout(classRemoveTimeout);
+ classRemoveTimeout = setTimeout(
+ classRemove,
+ timeout,
+ $(event.target),
+ );
+ });
+ });
+ },
+ };
+})(jQuery, Drupal);
diff --git a/core/themes/claro/js/autocomplete.js b/core/themes/claro/js/autocomplete.js
new file mode 100644
index 0000000000000000000000000000000000000000..781b5486e2950ab542711283678363f439e1b156
--- /dev/null
+++ b/core/themes/claro/js/autocomplete.js
@@ -0,0 +1,29 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+ Drupal.behaviors.claroAutoCompete = {
+ attach: function attach(context) {
+ $(context).find('input.form-autocomplete').once('claroAutoComplete').each(function (index, value) {
+ var $input = $(value);
+ var timeout = 400;
+ var classRemoveTimeout = void 0;
+ var classRemove = function classRemove($autoCompleteElem) {
+ $autoCompleteElem.removeClass('is-autocompleting');
+ };
+
+ $input.on('input autocompletesearch autocompleteresponses', function (event) {
+ if (event && event.type && event.type === 'autocompletesearch') {
+ $(event.target).addClass('is-autocompleting');
+ }
+ clearTimeout(classRemoveTimeout);
+ classRemoveTimeout = setTimeout(classRemove, timeout, $(event.target));
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/checkbox.es6.js b/core/themes/claro/js/checkbox.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb83b7fbe1e61f420accbb7c6ea699725d1abee8
--- /dev/null
+++ b/core/themes/claro/js/checkbox.es6.js
@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Theme override for checkbox.
+ */
+
+(Drupal => {
+ /**
+ * Constucts a checkbox input element.
+ *
+ * @return {string}
+ * A string representing a DOM fragment.
+ */
+ Drupal.theme.checkbox = () =>
+ '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
+})(Drupal);
diff --git a/core/themes/claro/js/checkbox.js b/core/themes/claro/js/checkbox.js
new file mode 100644
index 0000000000000000000000000000000000000000..90d825cbee41ad588186ded39ff3f81dc114feeb
--- /dev/null
+++ b/core/themes/claro/js/checkbox.js
@@ -0,0 +1,12 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+ Drupal.theme.checkbox = function () {
+ return '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
+ };
+})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/details.es6.js b/core/themes/claro/js/details.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7ad00e25e2a92737981e32d34e695e8b11a96be
--- /dev/null
+++ b/core/themes/claro/js/details.es6.js
@@ -0,0 +1,58 @@
+/**
+ * @file
+ * Claro's polyfill enhancements for HTML5 details.
+ */
+
+(($, Modernizr, Drupal) => {
+ /**
+ * Workaround for Firefox.
+ *
+ * Firefox applies the focus state only for keyboard navigation.
+ * We have to manually trigger focus to make the behavior consistent across
+ * browsers.
+ *
+ * @type {Drupal~behavior}
+ */
+ Drupal.behaviors.claroDetails = {
+ attach(context) {
+ $(context)
+ .once('claroDetails')
+ .on('click', event => {
+ if (event.target.nodeName === 'SUMMARY') {
+ $(event.target).trigger('focus');
+ }
+ });
+ },
+ };
+
+ /**
+ * Workaround for non-supporting browsers.
+ *
+ * This shim extends HTML5 Shiv used by core.
+ *
+ * HTML5 Shiv toggles focused details for hitting enter. We copy that for
+ * space key as well to make the behavior consistent across browsers.
+ *
+ * @type {Drupal~behavior}
+ */
+ Drupal.behaviors.claroDetailsToggleShim = {
+ attach(context) {
+ if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
+ return;
+ }
+
+ $(context)
+ .find('details .details-title')
+ .once('claroDetailsToggleShim')
+ .on('keypress', event => {
+ const keyCode = event.keyCode || event.charCode;
+ if (keyCode === 32) {
+ $(event.target)
+ .closest('summary')
+ .trigger('click');
+ event.preventDefault();
+ }
+ });
+ },
+ };
+})(jQuery, Modernizr, Drupal);
diff --git a/core/themes/claro/js/details.js b/core/themes/claro/js/details.js
new file mode 100644
index 0000000000000000000000000000000000000000..a682430fe4208b5089941cb6f8ee6d8762cc7e52
--- /dev/null
+++ b/core/themes/claro/js/details.js
@@ -0,0 +1,34 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Modernizr, Drupal) {
+ Drupal.behaviors.claroDetails = {
+ attach: function attach(context) {
+ $(context).once('claroDetails').on('click', function (event) {
+ if (event.target.nodeName === 'SUMMARY') {
+ $(event.target).trigger('focus');
+ }
+ });
+ }
+ };
+
+ Drupal.behaviors.claroDetailsToggleShim = {
+ attach: function attach(context) {
+ if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
+ return;
+ }
+
+ $(context).find('details .details-title').once('claroDetailsToggleShim').on('keypress', function (event) {
+ var keyCode = event.keyCode || event.charCode;
+ if (keyCode === 32) {
+ $(event.target).closest('summary').trigger('click');
+ event.preventDefault();
+ }
+ });
+ }
+ };
+})(jQuery, Modernizr, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/dropbutton.es6.js b/core/themes/claro/js/dropbutton.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e8b4dd5b3330de42754fabe7559a3e335a66f5c
--- /dev/null
+++ b/core/themes/claro/js/dropbutton.es6.js
@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Theme overrides for Claro.
+ */
+
+(Drupal => {
+ /**
+ * Overrides the dropbutton toggle markup.
+ *
+ * We have to keep the 'dropbutton-toggle' CSS class because the dropbutton JS
+ * operates with that one.
+ *
+ * @param {object} options
+ * Options object.
+ * @param {string} [options.title]
+ * The button text.
+ *
+ * @return {string}
+ * A string representing a DOM fragment.
+ */
+ Drupal.theme.dropbuttonToggle = options =>
+ `<li class="dropbutton-toggle"><button type="button" class="dropbutton__toggle"><span class="visually-hidden">${options.title}</span></button></li>`;
+})(Drupal);
diff --git a/core/themes/claro/js/dropbutton.js b/core/themes/claro/js/dropbutton.js
new file mode 100644
index 0000000000000000000000000000000000000000..e572550bcfa1983ac153877020f55dcf0ca45543
--- /dev/null
+++ b/core/themes/claro/js/dropbutton.js
@@ -0,0 +1,12 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+ Drupal.theme.dropbuttonToggle = function (options) {
+ return "<li class=\"dropbutton-toggle\"><button type=\"button\" class=\"dropbutton__toggle\"><span class=\"visually-hidden\">" + options.title + "</span></button></li>";
+ };
+})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/messages.es6.js b/core/themes/claro/js/messages.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..50ffa866efd644f73789a8135409a78148d5ae67
--- /dev/null
+++ b/core/themes/claro/js/messages.es6.js
@@ -0,0 +1,74 @@
+/**
+ * @file
+ * Message template overrides.
+ */
+
+(Drupal => {
+ /**
+ * Override Drupal.Message.defaultWrapper() because it prevents adding classes
+ * to the wrapper.
+ *
+ * @return {HTMLElement}
+ * The default destination for JavaScript messages.
+ *
+ * @todo Revisit this after https://www.drupal.org/node/3086723 has been
+ * resolved.
+ */
+ Drupal.Message.defaultWrapper = () => {
+ let wrapper = document.querySelector('[data-drupal-messages]');
+ if (!wrapper) {
+ wrapper = document.querySelector('[data-drupal-messages-fallback]');
+ wrapper.removeAttribute('data-drupal-messages-fallback');
+ wrapper.setAttribute('data-drupal-messages', '');
+ wrapper.classList.remove('hidden');
+ wrapper.classList.add('messages-list');
+ }
+ return wrapper.innerHTML === ''
+ ? Drupal.Message.messageInternalWrapper(wrapper)
+ : wrapper.firstElementChild;
+ };
+
+ /**
+ * Overrides message theme function.
+ *
+ * @param {object} message
+ * The message object.
+ * @param {string} message.text
+ * The message text.
+ * @param {object} options
+ * The message context.
+ * @param {string} options.type
+ * The message type.
+ * @param {string} options.id
+ * ID of the message, for reference.
+ *
+ * @return {HTMLElement}
+ * A DOM Node.
+ */
+ Drupal.theme.message = ({ text }, { type, id }) => {
+ const messagesTypes = Drupal.Message.getMessageTypeLabels();
+ const messageWrapper = document.createElement('div');
+
+ messageWrapper.setAttribute('class', `messages messages--${type}`);
+ messageWrapper.setAttribute(
+ 'role',
+ type === 'error' || type === 'warning' ? 'alert' : 'status',
+ );
+ messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
+ messageWrapper.setAttribute('data-drupal-message-id', id);
+ messageWrapper.setAttribute('data-drupal-message-type', type);
+
+ messageWrapper.innerHTML = `
+ <div class="messages__header">
+ <h2 id="${id}-title" class="messages__title">
+ ${messagesTypes[type]}
+ </h2>
+ </div>
+ <div class="messages__content">
+ ${text}
+ </div>
+ `;
+
+ return messageWrapper;
+ };
+})(Drupal);
diff --git a/core/themes/claro/js/messages.js b/core/themes/claro/js/messages.js
new file mode 100644
index 0000000000000000000000000000000000000000..a90c3e62da6d21f28d5628fa5bd171072bdd231d
--- /dev/null
+++ b/core/themes/claro/js/messages.js
@@ -0,0 +1,39 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+ Drupal.Message.defaultWrapper = function () {
+ var wrapper = document.querySelector('[data-drupal-messages]');
+ if (!wrapper) {
+ wrapper = document.querySelector('[data-drupal-messages-fallback]');
+ wrapper.removeAttribute('data-drupal-messages-fallback');
+ wrapper.setAttribute('data-drupal-messages', '');
+ wrapper.classList.remove('hidden');
+ wrapper.classList.add('messages-list');
+ }
+ return wrapper.innerHTML === '' ? Drupal.Message.messageInternalWrapper(wrapper) : wrapper.firstElementChild;
+ };
+
+ Drupal.theme.message = function (_ref, _ref2) {
+ var text = _ref.text;
+ var type = _ref2.type,
+ id = _ref2.id;
+
+ var messagesTypes = Drupal.Message.getMessageTypeLabels();
+ var messageWrapper = document.createElement('div');
+
+ messageWrapper.setAttribute('class', 'messages messages--' + type);
+ messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
+ messageWrapper.setAttribute('aria-labelledby', id + '-title');
+ messageWrapper.setAttribute('data-drupal-message-id', id);
+ messageWrapper.setAttribute('data-drupal-message-type', type);
+
+ messageWrapper.innerHTML = '\n <div class="messages__header">\n <h2 id="' + id + '-title" class="messages__title">\n ' + messagesTypes[type] + '\n </h2>\n </div>\n <div class="messages__content">\n ' + text + '\n </div>\n ';
+
+ return messageWrapper;
+ };
+})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/mobile.install.es6.js b/core/themes/claro/js/mobile.install.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..a55e120b45239302a0033638653f94a3b7ea0b67
--- /dev/null
+++ b/core/themes/claro/js/mobile.install.es6.js
@@ -0,0 +1,29 @@
+(() => {
+ function findActiveStep(steps) {
+ for (let i = 0; i < steps.length; i++) {
+ if (steps[i].className === 'is-active') {
+ return i + 1;
+ }
+ }
+ // The final "Finished" step is never "active".
+ if (steps[steps.length - 1].className === 'done') {
+ return steps.length;
+ }
+ return 0;
+ }
+
+ function installStepsSetup() {
+ const steps = document.querySelectorAll('.task-list li');
+ if (steps.length) {
+ const header = document.querySelector('header[role="banner"]');
+ const stepIndicator = document.createElement('div');
+ stepIndicator.className = 'step-indicator';
+ stepIndicator.innerHTML = `${findActiveStep(steps)}/${steps.length}`;
+ header.appendChild(stepIndicator);
+ }
+ }
+
+ if (document.addEventListener) {
+ document.addEventListener('DOMContentLoaded', installStepsSetup);
+ }
+})();
diff --git a/core/themes/claro/js/mobile.install.js b/core/themes/claro/js/mobile.install.js
new file mode 100644
index 0000000000000000000000000000000000000000..57c2823fca6d4bae4b6d60c77cca9ba23fef6b9b
--- /dev/null
+++ b/core/themes/claro/js/mobile.install.js
@@ -0,0 +1,36 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function () {
+ function findActiveStep(steps) {
+ for (var i = 0; i < steps.length; i++) {
+ if (steps[i].className === 'is-active') {
+ return i + 1;
+ }
+ }
+
+ if (steps[steps.length - 1].className === 'done') {
+ return steps.length;
+ }
+ return 0;
+ }
+
+ function installStepsSetup() {
+ var steps = document.querySelectorAll('.task-list li');
+ if (steps.length) {
+ var header = document.querySelector('header[role="banner"]');
+ var stepIndicator = document.createElement('div');
+ stepIndicator.className = 'step-indicator';
+ stepIndicator.innerHTML = findActiveStep(steps) + '/' + steps.length;
+ header.appendChild(stepIndicator);
+ }
+ }
+
+ if (document.addEventListener) {
+ document.addEventListener('DOMContentLoaded', installStepsSetup);
+ }
+})();
\ No newline at end of file
diff --git a/core/themes/claro/js/nav-tabs.es6.js b/core/themes/claro/js/nav-tabs.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..9971585319a71fa1803c5aff414071e87f5027fe
--- /dev/null
+++ b/core/themes/claro/js/nav-tabs.es6.js
@@ -0,0 +1,88 @@
+/**
+ * @file
+ * Responsive navigation tabs.
+ *
+ * This also supports collapsible navigable is the 'is-collapsible' class is
+ * added to the main element, and a target element is included.
+ */
+(($, Drupal) => {
+ function init(i, tab) {
+ const $tab = $(tab);
+ const $target = $tab.find('[data-drupal-nav-tabs-target]');
+ const $active = $target.find('.js-active-tab');
+
+ const openMenu = () => {
+ $target.toggleClass('is-open');
+ };
+
+ const toggleOrder = reset => {
+ const current = $active.index();
+ const original = $active.data('original-order');
+
+ // Do not change order if already first or if already reset.
+ if (original === 0 || reset === (current === original)) {
+ return;
+ }
+
+ const siblings = {
+ first: '[data-original-order="0"]',
+ previous: `[data-original-order="${original - 1}"]`,
+ };
+
+ const $first = $target.find(siblings.first);
+ const $previous = $target.find(siblings.previous);
+
+ if (reset && current !== original) {
+ $active.insertAfter($previous);
+ } else if (!reset && current === original) {
+ $active.insertBefore($first);
+ }
+ };
+
+ const toggleCollapsed = () => {
+ if (window.matchMedia('(min-width: 48em)').matches) {
+ if ($tab.hasClass('is-horizontal') && !$tab.attr('data-width')) {
+ let width = 0;
+
+ $target.find('.js-tabs-link').each((index, value) => {
+ width += $(value).outerWidth();
+ });
+ $tab.attr('data-width', width);
+ }
+
+ // Collapse the tabs if the combined width of the tabs is greater than
+ // the width of the parent container.
+ const isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();
+ $tab.toggleClass('is-horizontal', isHorizontal);
+ toggleOrder(isHorizontal);
+ } else {
+ toggleOrder(false);
+ }
+ };
+
+ $tab.addClass('position-container is-horizontal-enabled');
+
+ $target.find('.js-tab').each((index, element) => {
+ const $item = $(element);
+ $item.attr('data-original-order', $item.index());
+ });
+
+ $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
+ $(window)
+ .on('resize.tabs', Drupal.debounce(toggleCollapsed, 150))
+ .trigger('resize.tabs');
+ }
+ /**
+ * Initialise the tabs JS.
+ */
+ Drupal.behaviors.navTabs = {
+ attach(context) {
+ $(context)
+ .find('[data-drupal-nav-tabs].is-collapsible')
+ .once('nav-tabs')
+ .each((i, value) => {
+ $(value).each(init);
+ });
+ },
+ };
+})(jQuery, Drupal);
diff --git a/core/themes/claro/js/nav-tabs.js b/core/themes/claro/js/nav-tabs.js
new file mode 100644
index 0000000000000000000000000000000000000000..75445a53c724e1de1db56adedbab9b50733f2bee
--- /dev/null
+++ b/core/themes/claro/js/nav-tabs.js
@@ -0,0 +1,78 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+ function init(i, tab) {
+ var $tab = $(tab);
+ var $target = $tab.find('[data-drupal-nav-tabs-target]');
+ var $active = $target.find('.js-active-tab');
+
+ var openMenu = function openMenu() {
+ $target.toggleClass('is-open');
+ };
+
+ var toggleOrder = function toggleOrder(reset) {
+ var current = $active.index();
+ var original = $active.data('original-order');
+
+ if (original === 0 || reset === (current === original)) {
+ return;
+ }
+
+ var siblings = {
+ first: '[data-original-order="0"]',
+ previous: '[data-original-order="' + (original - 1) + '"]'
+ };
+
+ var $first = $target.find(siblings.first);
+ var $previous = $target.find(siblings.previous);
+
+ if (reset && current !== original) {
+ $active.insertAfter($previous);
+ } else if (!reset && current === original) {
+ $active.insertBefore($first);
+ }
+ };
+
+ var toggleCollapsed = function toggleCollapsed() {
+ if (window.matchMedia('(min-width: 48em)').matches) {
+ if ($tab.hasClass('is-horizontal') && !$tab.attr('data-width')) {
+ var width = 0;
+
+ $target.find('.js-tabs-link').each(function (index, value) {
+ width += $(value).outerWidth();
+ });
+ $tab.attr('data-width', width);
+ }
+
+ var isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();
+ $tab.toggleClass('is-horizontal', isHorizontal);
+ toggleOrder(isHorizontal);
+ } else {
+ toggleOrder(false);
+ }
+ };
+
+ $tab.addClass('position-container is-horizontal-enabled');
+
+ $target.find('.js-tab').each(function (index, element) {
+ var $item = $(element);
+ $item.attr('data-original-order', $item.index());
+ });
+
+ $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
+ $(window).on('resize.tabs', Drupal.debounce(toggleCollapsed, 150)).trigger('resize.tabs');
+ }
+
+ Drupal.behaviors.navTabs = {
+ attach: function attach(context) {
+ $(context).find('[data-drupal-nav-tabs].is-collapsible').once('nav-tabs').each(function (i, value) {
+ $(value).each(init);
+ });
+ }
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/responsive-details.es6.js b/core/themes/claro/js/responsive-details.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..bc31c1c01a641fb62663af61868a5523b1258f65
--- /dev/null
+++ b/core/themes/claro/js/responsive-details.es6.js
@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Provides responsive behaviors to HTML details elements.
+ */
+
+(($, Drupal) => {
+ /**
+ * Initializes the responsive behaviors for details elements.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches the responsive behavior to status report specific details elements.
+ */
+ Drupal.behaviors.responsiveDetails = {
+ attach(context) {
+ const $details = $(context)
+ .find('details')
+ .once('responsive-details');
+
+ if (!$details.length) {
+ return;
+ }
+
+ const $summaries = $details.find('> summary');
+
+ function detailsToggle(matches) {
+ if (matches) {
+ $details.attr('open', true);
+ $summaries.attr('aria-expanded', true);
+ $summaries.on('click.details-open', false);
+ } else {
+ // If user explicitly opened one, leave it alone.
+ const $notPressed = $details
+ .find('> summary[aria-pressed!=true]')
+ .attr('aria-expanded', false);
+ $notPressed.parent('details').attr('open', false);
+ // After resize, allow user to close previously opened details.
+ $summaries.off('.details-open');
+ }
+ }
+
+ function handleDetailsMQ(event) {
+ detailsToggle(event.matches);
+ }
+
+ const mql = window.matchMedia('(min-width:48em)');
+ mql.addListener(handleDetailsMQ);
+ detailsToggle(mql.matches);
+ },
+ };
+})(jQuery, Drupal);
diff --git a/core/themes/claro/js/responsive-details.js b/core/themes/claro/js/responsive-details.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c62e3cef6af47dfb1d0190b9aa1af256d99fe86
--- /dev/null
+++ b/core/themes/claro/js/responsive-details.js
@@ -0,0 +1,41 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+ Drupal.behaviors.responsiveDetails = {
+ attach: function attach(context) {
+ var $details = $(context).find('details').once('responsive-details');
+
+ if (!$details.length) {
+ return;
+ }
+
+ var $summaries = $details.find('> summary');
+
+ function detailsToggle(matches) {
+ if (matches) {
+ $details.attr('open', true);
+ $summaries.attr('aria-expanded', true);
+ $summaries.on('click.details-open', false);
+ } else {
+ var $notPressed = $details.find('> summary[aria-pressed!=true]').attr('aria-expanded', false);
+ $notPressed.parent('details').attr('open', false);
+
+ $summaries.off('.details-open');
+ }
+ }
+
+ function handleDetailsMQ(event) {
+ detailsToggle(event.matches);
+ }
+
+ var mql = window.matchMedia('(min-width:48em)');
+ mql.addListener(handleDetailsMQ);
+ detailsToggle(mql.matches);
+ }
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/tabledrag.es6.js b/core/themes/claro/js/tabledrag.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e1b591e2bffcdd4ba060c13ce616cf21cb1f315
--- /dev/null
+++ b/core/themes/claro/js/tabledrag.es6.js
@@ -0,0 +1,1883 @@
+/**
+ * @file
+ * Overrides tabledrag.js that provides dragging capabilities.
+ *
+ * - 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
+ * ".tabledrag-cell-content__item". This new element is moved into an another
+ * ".tabledrag-cell-content" division that contains the drag handle, the
+ * identation elements and the tabledrag changed mark as well.
+ * This is needed to keep all of these element in a single line
+ * (https://www.drupal.org/node/3083044).
+ * Claro introduced two theme functions for these:
+ * - Drupal.theme.tableDragCellContentWrapper() provides the output of the
+ * original content of the first table cell.
+ * - Drupal.theme.tableDragCellItemsWrapper() provides the markup of the
+ * common wrapper for every tabledrag cell elements including the
+ * indentation(s), the drag-handle, the original content and the tabledrag
+ * 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.
+ * @see https://github.com/babel/babel/issues/7597.
+ *
+ * @todo Refactor after https://www.drupal.org/node/3077938,
+ * https://www.drupal.org/node/3083039, https://www.drupal.org/node/3083044
+ * and https://www.drupal.org/node/197641 are in.
+ */
+
+/**
+ * Triggers when weights columns are toggled.
+ *
+ * @event columnschange
+ */
+
+/* eslint-disable default-case, new-cap, prefer-destructuring */
+(($, Drupal, drupalSettings) => {
+ /**
+ * Store the state of weight columns display for all tables.
+ *
+ * Default value is to hide weight columns.
+ */
+ let showWeight = JSON.parse(
+ localStorage.getItem('Drupal.tableDrag.showWeight'),
+ );
+
+ /**
+ * Drag and drop table rows with field manipulation.
+ *
+ * Using the drupal_attach_tabledrag() function, any table with weights or
+ * parent relationships may be made into draggable tables. Columns containing
+ * a field may optionally be hidden, providing a better user experience.
+ *
+ * Created tableDrag instances may be modified with custom behaviors by
+ * overriding the .onDrag, .onDrop, .row.onSwap, and .row.onIndent methods.
+ * See blocks.js for an example of adding additional functionality to
+ * tableDrag.
+ *
+ * @type {Drupal~behavior}
+ */
+ Drupal.behaviors.tableDrag = {
+ attach(context, settings) {
+ function initTableDrag(table, base) {
+ if (table.length) {
+ // Create the new tableDrag instance. Save in the Drupal variable
+ // to allow other scripts access to the object.
+ Drupal.tableDrag[base] = new Drupal.tableDrag(
+ table[0],
+ settings.tableDrag[base],
+ );
+ }
+ }
+
+ Object.keys(settings.tableDrag || {}).forEach(base => {
+ initTableDrag(
+ $(context)
+ .find(`#${base}`)
+ .once('tabledrag'),
+ base,
+ );
+ });
+ },
+ };
+
+ /**
+ * Provides table and field manipulation.
+ *
+ * @constructor
+ *
+ * @param {HTMLElement} table
+ * DOM object for the table to be made draggable.
+ * @param {object} tableSettings
+ * Settings for the table added via drupal_add_dragtable().
+ */
+ Drupal.tableDrag = function init(table, tableSettings) {
+ const self = this;
+ const $table = $(table);
+
+ /**
+ * @type {jQuery}
+ */
+ this.$table = $(table);
+
+ /**
+ *
+ * @type {HTMLElement}
+ */
+ this.table = table;
+
+ /**
+ * @type {object}
+ */
+ this.tableSettings = tableSettings;
+
+ /**
+ * Used to hold information about a current drag operation.
+ *
+ * @type {?HTMLElement}
+ */
+ this.dragObject = null;
+
+ /**
+ * Provides operations for row manipulation.
+ *
+ * @type {?HTMLElement}
+ */
+ this.rowObject = null;
+
+ /**
+ * Remember the previous element.
+ *
+ * @type {?HTMLElement}
+ */
+ this.oldRowElement = null;
+
+ /**
+ * Used to determine up or down direction from last mouse move.
+ *
+ * @type {number}
+ */
+ this.oldY = 0;
+
+ /**
+ * Whether anything in the entire table has changed.
+ *
+ * @type {bool}
+ */
+ this.changed = false;
+
+ /**
+ * Maximum amount of allowed parenting.
+ *
+ * @type {number}
+ */
+ this.maxDepth = 0;
+
+ /**
+ * Direction of the table.
+ *
+ * @type {number}
+ */
+ this.rtl = $(this.table).css('direction') === 'rtl' ? -1 : 1;
+
+ /**
+ *
+ * @type {bool}
+ */
+ this.striping = $(this.table).data('striping') === 1;
+
+ /**
+ * Configure the scroll settings.
+ *
+ * @type {object}
+ *
+ * @prop {number} amount
+ * @prop {number} interval
+ * @prop {number} trigger
+ */
+ this.scrollSettings = { amount: 4, interval: 50, trigger: 70 };
+
+ /**
+ *
+ * @type {?number}
+ */
+ this.scrollInterval = null;
+
+ /**
+ *
+ * @type {number}
+ */
+ this.scrollY = 0;
+
+ /**
+ *
+ * @type {number}
+ */
+ this.windowHeight = 0;
+
+ /**
+ * Check this table's settings for parent relationships.
+ *
+ * For efficiency, large sections of code can be skipped if we don't need to
+ * track horizontal movement and indentations.
+ *
+ * @type {bool}
+ */
+ this.indentEnabled = false;
+ Object.keys(tableSettings || {}).forEach(group => {
+ Object.keys(tableSettings[group] || {}).forEach(n => {
+ if (tableSettings[group][n].relationship === 'parent') {
+ this.indentEnabled = true;
+ }
+ if (tableSettings[group][n].limit > 0) {
+ this.maxDepth = tableSettings[group][n].limit;
+ }
+ });
+ });
+ if (this.indentEnabled) {
+ /**
+ * Total width of indents, set in makeDraggable.
+ *
+ * @type {number}
+ */
+ this.indentCount = 1;
+ // Find the width of indentations to measure mouse movements against.
+ // Because the table doesn't need to start with any indentations, we
+ // manually append 2 indentations in the first draggable row, measure
+ // the offset, then remove.
+ const indent = Drupal.theme('tableDragIndentation');
+ const testRow = $('<tr/>')
+ .addClass('draggable')
+ .appendTo(table);
+ const testCell = $('<td/>')
+ .appendTo(testRow)
+ .prepend(indent)
+ .prepend(indent);
+ const $indentation = testCell.find('.js-indentation');
+
+ /**
+ * @type {number}
+ */
+ this.indentAmount =
+ $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;
+ testRow.remove();
+ }
+
+ // Make each applicable row draggable.
+ // Match immediate children of the parent element to allow nesting.
+ $table
+ .find('> tr.draggable, > tbody > tr.draggable')
+ .each(function initDraggable() {
+ self.makeDraggable(this);
+ });
+
+ // 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),
+ ),
+ );
+
+ // Initialize the specified columns (for example, weight or parent columns)
+ // to show or hide according to user preference. This aids accessibility
+ // so that, e.g., screen reader users can choose to enter weight values and
+ // manipulate form elements directly, rather than using drag-and-drop..
+ self.initColumns();
+
+ // Add event bindings to the document. The self variable is passed along
+ // as event handlers do not have direct access to the tableDrag object.
+ $(document).on('touchmove', event =>
+ self.dragRow(event.originalEvent.touches[0], self),
+ );
+ $(document).on('touchend', event =>
+ self.dropRow(event.originalEvent.touches[0], self),
+ );
+ $(document).on('mousemove pointermove', event => self.dragRow(event, self));
+ $(document).on('mouseup pointerup', event => self.dropRow(event, self));
+
+ // React to localStorage event showing or hiding weight columns.
+ $(window).on(
+ 'storage',
+ $.proxy(function weightColumnDisplayChange(event) {
+ // Only react to 'Drupal.tableDrag.showWeight' value change.
+ if (event.originalEvent.key === 'Drupal.tableDrag.showWeight') {
+ // This was changed in another window, get the new value for this
+ // window.
+ showWeight = JSON.parse(event.originalEvent.newValue);
+ this.displayColumns(showWeight);
+ }
+ }, this),
+ );
+ };
+
+ $.extend(Drupal.tableDrag.prototype, {
+ /**
+ * Initialize columns containing form elements to be hidden by default.
+ *
+ * Identify and mark each cell with a CSS class so we can easily toggle
+ * show/hide it. Finally, hide columns if user does not have a
+ * 'Drupal.tableDrag.showWeight' localStorage value.
+ */
+ initColumns() {
+ const { $table } = this;
+ let hidden;
+ let cell;
+ let columnIndex;
+ Object.keys(this.tableSettings || {}).forEach(group => {
+ // Find the first field in this group.
+ Object.keys(this.tableSettings[group]).some(tableSetting => {
+ const field = $table
+ .find(`.${this.tableSettings[group][tableSetting].target}`)
+ .eq(0);
+ if (field.length && this.tableSettings[group][tableSetting].hidden) {
+ hidden = this.tableSettings[group][tableSetting].hidden;
+ cell = field.closest('td');
+ return true;
+ }
+ return false;
+ });
+
+ // Mark the column containing this field so it can be hidden.
+ if (hidden && cell[0]) {
+ // Add 1 to our indexes. The nth-child selector is 1 based, not 0
+ // based. Match immediate children of the parent element to allow
+ // nesting.
+ columnIndex =
+ cell
+ .parent()
+ .find('> td')
+ .index(cell.get(0)) + 1;
+ $table
+ .find('> thead > tr, > tbody > tr, > tr')
+ .each(this.addColspanClass(columnIndex));
+ }
+ });
+ this.displayColumns(showWeight);
+ },
+
+ /**
+ * Mark cells that have colspan.
+ *
+ * In order to adjust the colspan instead of hiding them altogether.
+ *
+ * @param {number} columnIndex
+ * The column index to add colspan class to.
+ *
+ * @return {function}
+ * Function to add colspan class.
+ */
+ addColspanClass(columnIndex) {
+ return function addColspanClass() {
+ // Get the columnIndex and adjust for any colspans in this row.
+ const $row = $(this);
+ let index = columnIndex;
+ const cells = $row.children();
+ let cell;
+ cells.each(function checkColspan(n) {
+ if (n < index && this.colSpan && this.colSpan > 1) {
+ index -= this.colSpan - 1;
+ }
+ });
+ if (index > 0) {
+ cell = cells.filter(`:nth-child(${index})`);
+ if (cell[0].colSpan && cell[0].colSpan > 1) {
+ // If this cell has a colspan, mark it so we can reduce the colspan.
+ cell.addClass('tabledrag-has-colspan');
+ } else {
+ // Mark this cell so we can hide it.
+ cell.addClass('tabledrag-hide');
+ }
+ }
+ };
+ },
+
+ /**
+ * Hide or display weight columns. Triggers an event on change.
+ *
+ * @fires event:columnschange
+ *
+ * @param {bool} displayWeight
+ * 'true' will show weight columns.
+ */
+ displayColumns(displayWeight) {
+ if (displayWeight) {
+ this.showColumns();
+ }
+ // Default action is to hide columns.
+ else {
+ this.hideColumns();
+ }
+ // Trigger an event to allow other scripts to react to this display change.
+ // Force the extra parameter as a bool.
+ $('table')
+ .findOnce('tabledrag')
+ .trigger('columnschange', !!displayWeight);
+ },
+
+ /**
+ * Toggle the weight column depending on 'showWeight' value.
+ *
+ * Store only default override.
+ */
+ toggleColumns() {
+ showWeight = !showWeight;
+ this.displayColumns(showWeight);
+ if (showWeight) {
+ // Save default override.
+ localStorage.setItem('Drupal.tableDrag.showWeight', showWeight);
+ } else {
+ // Reset the value to its default.
+ localStorage.removeItem('Drupal.tableDrag.showWeight');
+ }
+ },
+
+ /**
+ * Hide the columns containing weight/parent form elements.
+ *
+ * Undo showColumns().
+ */
+ hideColumns() {
+ const $tables = $('table').findOnce('tabledrag');
+ // Hide weight/parent cells and headers.
+ $tables.find('.tabledrag-hide').css('display', 'none');
+ // Show TableDrag handles.
+ $tables.find('.js-tabledrag-handle').css('display', '');
+ // Reduce the colspan of any effected multi-span columns.
+ $tables.find('.tabledrag-has-colspan').each(function decreaseColspan() {
+ this.colSpan = this.colSpan - 1;
+ });
+ // Change link text.
+ $('.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');
+ }
+ },
+ );
+ },
+
+ /**
+ * Show the columns containing weight/parent form elements.
+ *
+ * Undo hideColumns().
+ */
+ showColumns() {
+ const $tables = $('table').findOnce('tabledrag');
+ // Show weight/parent cells and headers.
+ $tables.find('.tabledrag-hide').css('display', '');
+ // Hide TableDrag handles.
+ $tables.find('.js-tabledrag-handle').css('display', 'none');
+ // Increase the colspan for any columns where it was previously reduced.
+ $tables.find('.tabledrag-has-colspan').each(function increaseColspan() {
+ this.colSpan = this.colSpan + 1;
+ });
+ // Change link text.
+ $('.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');
+ }
+ },
+ );
+ },
+
+ /**
+ * Find the target used within a particular row and group.
+ *
+ * @param {string} group
+ * Group selector.
+ * @param {HTMLElement} row
+ * The row HTML element.
+ *
+ * @return {object}
+ * The table row settings.
+ */
+ rowSettings(group, row) {
+ const field = $(row).find(`.${group}`);
+ const tableSettingsGroup = this.tableSettings[group];
+ return Object.keys(tableSettingsGroup)
+ .map(delta => {
+ const targetClass = tableSettingsGroup[delta].target;
+ let rowSettings;
+ if (field.is(`.${targetClass}`)) {
+ // Return a copy of the row settings.
+ rowSettings = {};
+ Object.keys(tableSettingsGroup[delta]).forEach(n => {
+ rowSettings[n] = tableSettingsGroup[delta][n];
+ });
+ }
+ return rowSettings;
+ })
+ .filter(rowSetting => rowSetting)[0];
+ },
+
+ /**
+ * Take an item and add event handlers to make it become draggable.
+ *
+ * @param {HTMLElement} item
+ * The item to add event handlers to.
+ */
+ makeDraggable(item) {
+ const self = this;
+ const $item = $(item);
+ const $firstCell = $item
+ .find('td:first-of-type')
+ .wrapInner(Drupal.theme.tableDragCellContentWrapper())
+ .wrapInner(
+ $(Drupal.theme('tableDragCellItemsWrapper')).addClass(
+ 'js-tabledrag-cell-content',
+ ),
+ );
+ const $targetElem = $firstCell.find('.js-tabledrag-cell-content').length
+ ? $firstCell.find('.js-tabledrag-cell-content')
+ : $firstCell.addClass('js-tabledrag-cell-content');
+
+ // Move indentations into the '.js-tabledrag-cell-content' target.
+ $targetElem
+ .find('.js-indentation')
+ .detach()
+ .prependTo($targetElem);
+
+ // Add a class to the title link.
+ $targetElem.find('a').addClass('menu-item__link');
+ // Create the handle.
+ const handle = $(Drupal.theme.tableDragHandle())
+ .addClass('js-tabledrag-handle')
+ .attr('title', Drupal.t('Drag to re-order'));
+ // Insert the handle after indentations (if any).
+ const $indentationLast = $targetElem.find('.js-indentation').eq(-1);
+ if ($indentationLast.length) {
+ $indentationLast.after(handle);
+ // Update the total width of indentation in this entire table.
+ self.indentCount = Math.max(
+ $item.find('.js-indentation').length,
+ self.indentCount,
+ );
+ } else {
+ $targetElem.prepend(handle);
+ }
+
+ // Prevent the anchor tag from jumping us to the top of the page.
+ handle.on('click', event => {
+ event.preventDefault();
+ });
+
+ // Don't do anything if tabledrag is disabled.
+ if (handle.closest('.js-tabledrag-disabled').length) {
+ return;
+ }
+
+ handle.on('mousedown touchstart pointerdown', event => {
+ event.preventDefault();
+ if (event.originalEvent.type === 'touchstart') {
+ event = event.originalEvent.touches[0];
+ }
+ self.dragStart(event, self, item);
+ });
+
+ // Set blur cleanup when a handle is focused.
+ handle.on('focus', () => {
+ self.safeBlur = true;
+ });
+
+ // On blur, fire the same function as a touchend/mouseup. This is used to
+ // update values after a row has been moved through the keyboard support.
+ handle.on('blur', event => {
+ if (self.rowObject && self.safeBlur) {
+ self.dropRow(event, self);
+ }
+ });
+
+ // Add arrow-key support to the handle.
+ handle.on('keydown', event => {
+ // If a rowObject doesn't yet exist and this isn't the tab key.
+ if (event.keyCode !== 9 && !self.rowObject) {
+ self.rowObject = new self.row(
+ item,
+ 'keyboard',
+ self.indentEnabled,
+ self.maxDepth,
+ true,
+ );
+ }
+
+ let keyChange = false;
+ let groupHeight;
+
+ /* eslint-disable no-fallthrough */
+
+ switch (event.keyCode) {
+ // Left arrow.
+ case 37:
+ // Safari left arrow.
+ case 63234:
+ keyChange = true;
+ self.rowObject.indent(-1 * self.rtl);
+ break;
+
+ // Up arrow.
+ case 38:
+ // Safari up arrow.
+ case 63232: {
+ let $previousRow = $(self.rowObject.element)
+ .prev('tr')
+ .eq(0);
+ let previousRow = $previousRow.get(0);
+ while (previousRow && $previousRow.is(':hidden')) {
+ $previousRow = $(previousRow)
+ .prev('tr')
+ .eq(0);
+ previousRow = $previousRow.get(0);
+ }
+ if (previousRow) {
+ // Do not allow the onBlur cleanup.
+ self.safeBlur = false;
+ self.rowObject.direction = 'up';
+ keyChange = true;
+
+ if ($(item).is('.tabledrag-root')) {
+ // Swap with the previous top-level row.
+ groupHeight = 0;
+ while (
+ previousRow &&
+ $previousRow.find('.js-indentation').length
+ ) {
+ $previousRow = $(previousRow)
+ .prev('tr')
+ .eq(0);
+ previousRow = $previousRow.get(0);
+ groupHeight += $previousRow.is(':hidden')
+ ? 0
+ : previousRow.offsetHeight;
+ }
+ if (previousRow) {
+ self.rowObject.swap('before', previousRow);
+ // No need to check for indentation, 0 is the only valid one.
+ window.scrollBy(0, -groupHeight);
+ }
+ } else if (
+ self.table.tBodies[0].rows[0] !== previousRow ||
+ $previousRow.is('.draggable')
+ ) {
+ // Swap with the previous row (unless previous row is the first
+ // one and undraggable).
+ self.rowObject.swap('before', previousRow);
+ self.rowObject.interval = null;
+ self.rowObject.indent(0);
+ window.scrollBy(0, -parseInt(item.offsetHeight, 10));
+ }
+ // Regain focus after the DOM manipulation.
+ handle.trigger('focus');
+ }
+ break;
+ }
+ // Right arrow.
+ case 39:
+ // Safari right arrow.
+ case 63235:
+ keyChange = true;
+ self.rowObject.indent(self.rtl);
+ break;
+
+ // Down arrow.
+ case 40:
+ // Safari down arrow.
+ case 63233: {
+ let $nextRow = $(self.rowObject.group)
+ .eq(-1)
+ .next('tr')
+ .eq(0);
+ let nextRow = $nextRow.get(0);
+ while (nextRow && $nextRow.is(':hidden')) {
+ $nextRow = $(nextRow)
+ .next('tr')
+ .eq(0);
+ nextRow = $nextRow.get(0);
+ }
+ if (nextRow) {
+ // Do not allow the onBlur cleanup.
+ self.safeBlur = false;
+ self.rowObject.direction = 'down';
+ keyChange = true;
+
+ if ($(item).is('.tabledrag-root')) {
+ // Swap with the next group (necessarily a top-level one).
+ groupHeight = 0;
+ const nextGroup = new self.row(
+ nextRow,
+ 'keyboard',
+ self.indentEnabled,
+ self.maxDepth,
+ false,
+ );
+ if (nextGroup) {
+ $(nextGroup.group).each(function groupIterator() {
+ groupHeight += $(this).is(':hidden')
+ ? 0
+ : this.offsetHeight;
+ });
+ const nextGroupRow = $(nextGroup.group)
+ .eq(-1)
+ .get(0);
+ self.rowObject.swap('after', nextGroupRow);
+ // No need to check for indentation, 0 is the only valid one.
+ window.scrollBy(0, parseInt(groupHeight, 10));
+ }
+ } else {
+ // Swap with the next row.
+ self.rowObject.swap('after', nextRow);
+ self.rowObject.interval = null;
+ self.rowObject.indent(0);
+ window.scrollBy(0, parseInt(item.offsetHeight, 10));
+ }
+ // Regain focus after the DOM manipulation.
+ handle.trigger('focus');
+ }
+ break;
+ }
+ }
+
+ /* eslint-enable no-fallthrough */
+
+ if (self.rowObject && self.rowObject.changed === true) {
+ $(item).addClass('drag');
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ self.oldRowElement = item;
+ if (self.striping === true) {
+ self.restripeTable();
+ }
+ self.onDrag();
+ }
+
+ // Returning false if we have an arrow key to prevent scrolling.
+ if (keyChange) {
+ return false;
+ }
+ });
+
+ // Compatibility addition, return false on keypress to prevent unwanted
+ // scrolling. IE and Safari will suppress scrolling on keydown, but all
+ // other browsers need to return false on keypress.
+ // http://www.quirksmode.org/js/keys.html
+ handle.on('keypress', event => {
+ /* eslint-disable no-fallthrough */
+
+ switch (event.keyCode) {
+ // Left arrow.
+ case 37:
+ // Up arrow.
+ case 38:
+ // Right arrow.
+ case 39:
+ // Down arrow.
+ case 40:
+ return false;
+ }
+
+ /* eslint-enable no-fallthrough */
+ });
+ },
+
+ /**
+ * Pointer event initiator, creates drag object and information.
+ *
+ * @param {jQuery.Event} event
+ * The event object that trigger the drag.
+ * @param {Drupal.tableDrag} self
+ * The drag handle.
+ * @param {HTMLElement} item
+ * The item that that is being dragged.
+ */
+ dragStart(event, self, item) {
+ // Create a new dragObject recording the pointer information.
+ self.dragObject = {};
+ self.dragObject.initOffset = self.getPointerOffset(item, event);
+ self.dragObject.initPointerCoords = self.pointerCoords(event);
+ if (self.indentEnabled) {
+ self.dragObject.indentPointerPos = self.dragObject.initPointerCoords;
+ }
+
+ // If there's a lingering row object from the keyboard, remove its focus.
+ if (self.rowObject) {
+ $(self.rowObject.element)
+ .find('.js-tabledrag-handle')
+ .trigger('blur');
+ }
+
+ // Create a new rowObject for manipulation of this row.
+ self.rowObject = new self.row(
+ item,
+ 'pointer',
+ self.indentEnabled,
+ self.maxDepth,
+ true,
+ );
+
+ // Save the position of the table.
+ self.table.topY = $(self.table).offset().top;
+ self.table.bottomY = self.table.topY + self.table.offsetHeight;
+
+ // Add classes to the handle and row.
+ $(item).addClass('drag');
+
+ // Set the document to use the move cursor during drag.
+ $('body').addClass('drag');
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ },
+
+ /**
+ * Pointer movement handler, bound to document.
+ *
+ * @param {jQuery.Event} event
+ * The pointer event.
+ * @param {Drupal.tableDrag} self
+ * The tableDrag instance.
+ *
+ * @return {bool|undefined}
+ * Undefined if no dragObject is defined, false otherwise.
+ */
+ dragRow(event, self) {
+ if (self.dragObject) {
+ self.currentPointerCoords = self.pointerCoords(event);
+ const y = self.currentPointerCoords.y - self.dragObject.initOffset.y;
+ const x = self.currentPointerCoords.x - self.dragObject.initOffset.x;
+
+ // Check for row swapping and vertical scrolling.
+ if (y !== self.oldY) {
+ self.rowObject.direction = y > self.oldY ? 'down' : 'up';
+ // Update the old value.
+ self.oldY = y;
+ // Check if the window should be scrolled (and how fast).
+ const scrollAmount = self.checkScroll(self.currentPointerCoords.y);
+ // Stop any current scrolling.
+ clearInterval(self.scrollInterval);
+ // Continue scrolling if the mouse has moved in the scroll direction.
+ if (
+ (scrollAmount > 0 && self.rowObject.direction === 'down') ||
+ (scrollAmount < 0 && self.rowObject.direction === 'up')
+ ) {
+ self.setScroll(scrollAmount);
+ }
+
+ // If we have a valid target, perform the swap and restripe the table.
+ const currentRow = self.findDropTargetRow(x, y);
+ if (currentRow) {
+ if (self.rowObject.direction === 'down') {
+ self.rowObject.swap('after', currentRow, self);
+ } else {
+ self.rowObject.swap('before', currentRow, self);
+ }
+ if (self.striping === true) {
+ self.restripeTable();
+ }
+ }
+ }
+
+ // Similar to row swapping, handle indentations.
+ if (self.indentEnabled) {
+ const xDiff =
+ self.currentPointerCoords.x - self.dragObject.indentPointerPos.x;
+ // Set the number of indentations the pointer has been moved left or
+ // right.
+ const indentDiff = Math.round(xDiff / self.indentAmount);
+ // Indent the row with our estimated diff, which may be further
+ // restricted according to the rows around this row.
+ const indentChange = self.rowObject.indent(indentDiff);
+ // Update table and pointer indentations.
+ self.dragObject.indentPointerPos.x +=
+ self.indentAmount * indentChange;
+ self.indentCount = Math.max(self.indentCount, self.rowObject.indents);
+ }
+
+ return false;
+ }
+ },
+
+ /**
+ * Pointerup behavior.
+ *
+ * @param {jQuery.Event} event
+ * The pointer event.
+ * @param {Drupal.tableDrag} self
+ * The tableDrag instance.
+ */
+ dropRow(event, self) {
+ let droppedRow;
+ let $droppedRow;
+
+ // Drop row functionality.
+ if (self.rowObject !== null) {
+ droppedRow = self.rowObject.element;
+ $droppedRow = $(droppedRow);
+ // The row is already in the right place so we just release it.
+ if (self.rowObject.changed === true) {
+ // Update the fields in the dropped row.
+ self.updateFields(droppedRow);
+
+ // If a setting exists for affecting the entire group, update all the
+ // fields in the entire dragged group.
+ Object.keys(self.tableSettings || {}).forEach(group => {
+ const rowSettings = self.rowSettings(group, droppedRow);
+ if (rowSettings.relationship === 'group') {
+ Object.keys(self.rowObject.children || {}).forEach(n => {
+ self.updateField(self.rowObject.children[n], group);
+ });
+ }
+ });
+
+ 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($messageTarget)
+ .hide()
+ .fadeIn('slow');
+ self.changed = true;
+ }
+ }
+
+ if (self.indentEnabled) {
+ self.rowObject.removeIndentClasses();
+ }
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ $droppedRow.removeClass('drag').addClass('drag-previous');
+ self.oldRowElement = droppedRow;
+ self.onDrop();
+ self.rowObject = null;
+ }
+
+ // Functionality specific only to pointerup events.
+ if (self.dragObject !== null) {
+ self.dragObject = null;
+ $('body').removeClass('drag');
+ clearInterval(self.scrollInterval);
+ }
+ },
+
+ /**
+ * Get the coordinates from the event (allowing for browser differences).
+ *
+ * @param {jQuery.Event} event
+ * The pointer event.
+ *
+ * @return {object}
+ * An object with `x` and `y` keys indicating the position.
+ */
+ pointerCoords(event) {
+ if (event.pageX || event.pageY) {
+ return { x: event.pageX, y: event.pageY };
+ }
+ return {
+ x:
+ event.clientX + (document.body.scrollLeft - document.body.clientLeft),
+ y: event.clientY + (document.body.scrollTop - document.body.clientTop),
+ };
+ },
+
+ /**
+ * Get the event offset from the target element.
+ *
+ * Given a target element and a pointer event, get the event offset from that
+ * element. To do this we need the element's position and the target position.
+ *
+ * @param {HTMLElement} target
+ * The target HTML element.
+ * @param {jQuery.Event} event
+ * The pointer event.
+ *
+ * @return {object}
+ * An object with `x` and `y` keys indicating the position.
+ */
+ getPointerOffset(target, event) {
+ const docPos = $(target).offset();
+ const pointerPos = this.pointerCoords(event);
+ return { x: pointerPos.x - docPos.left, y: pointerPos.y - docPos.top };
+ },
+
+ /**
+ * Find the row the mouse is currently over.
+ *
+ * This row is then taken and swapped with the one being dragged.
+ *
+ * @param {number} x
+ * The x coordinate of the mouse on the page (not the screen).
+ * @param {number} y
+ * The y coordinate of the mouse on the page (not the screen).
+ *
+ * @return {*}
+ * The drop target row, if found.
+ */
+ findDropTargetRow(x, y) {
+ const rows = $(this.table.tBodies[0].rows).not(':hidden');
+ for (let n = 0; n < rows.length; n++) {
+ let row = rows[n];
+ let $row = $(row);
+ const rowY = $row.offset().top;
+ let rowHeight;
+ // Because Safari does not report offsetHeight on table rows, but does on
+ // table cells, grab the firstChild of the row and use that instead.
+ // http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari.
+ if (row.offsetHeight === 0) {
+ rowHeight = parseInt(row.firstChild.offsetHeight, 10) / 2;
+ }
+ // Other browsers.
+ else {
+ rowHeight = parseInt(row.offsetHeight, 10) / 2;
+ }
+
+ // Because we always insert before, we need to offset the height a bit.
+ if (y > rowY - rowHeight && y < rowY + rowHeight) {
+ if (this.indentEnabled) {
+ // Check that this row is not a child of the row being dragged.
+ if (
+ Object.keys(this.rowObject.group).some(
+ o => this.rowObject.group[o] === row,
+ )
+ ) {
+ return null;
+ }
+ }
+ // Do not allow a row to be swapped with itself.
+ else if (row === this.rowObject.element) {
+ return null;
+ }
+
+ // Check that swapping with this row is allowed.
+ if (!this.rowObject.isValidSwap(row)) {
+ return null;
+ }
+
+ // We may have found the row the mouse just passed over, but it doesn't
+ // take into account hidden rows. Skip backwards until we find a
+ // draggable row.
+ while ($row.is(':hidden') && $row.prev('tr').is(':hidden')) {
+ $row = $row.prev('tr:first-of-type');
+ row = $row.get(0);
+ }
+ return row;
+ }
+ }
+ return null;
+ },
+
+ /**
+ * After the row is dropped, update the table fields.
+ *
+ * @param {HTMLElement} changedRow
+ * DOM object for the row that was just dropped.
+ */
+ updateFields(changedRow) {
+ Object.keys(this.tableSettings || {}).forEach(group => {
+ // Each group may have a different setting for relationship, so we find
+ // the source rows for each separately.
+ this.updateField(changedRow, group);
+ });
+ },
+
+ /**
+ * After the row is dropped, update a single table field.
+ *
+ * @param {HTMLElement} changedRow
+ * DOM object for the row that was just dropped.
+ * @param {string} group
+ * The settings group on which field updates will occur.
+ */
+ updateField(changedRow, group) {
+ let rowSettings = this.rowSettings(group, changedRow);
+ const $changedRow = $(changedRow);
+ let sourceRow;
+ let $previousRow;
+ let previousRow;
+ let useSibling;
+ // Set the row as its own target.
+ if (
+ rowSettings.relationship === 'self' ||
+ rowSettings.relationship === 'group'
+ ) {
+ sourceRow = changedRow;
+ }
+ // Siblings are easy, check previous and next rows.
+ else if (rowSettings.relationship === 'sibling') {
+ $previousRow = $changedRow.prev('tr:first-of-type');
+ previousRow = $previousRow.get(0);
+ const $nextRow = $changedRow.next('tr:first-of-type');
+ const nextRow = $nextRow.get(0);
+ sourceRow = changedRow;
+ if (
+ $previousRow.is('.draggable') &&
+ $previousRow.find(`.${group}`).length
+ ) {
+ if (this.indentEnabled) {
+ if (
+ $previousRow.find('.js-indentations').length ===
+ $changedRow.find('.js-indentations').length
+ ) {
+ sourceRow = previousRow;
+ }
+ } else {
+ sourceRow = previousRow;
+ }
+ } else if (
+ $nextRow.is('.draggable') &&
+ $nextRow.find(`.${group}`).length
+ ) {
+ if (this.indentEnabled) {
+ if (
+ $nextRow.find('.js-indentations').length ===
+ $changedRow.find('.js-indentations').length
+ ) {
+ sourceRow = nextRow;
+ }
+ } else {
+ sourceRow = nextRow;
+ }
+ }
+ }
+ // Parents, look up the tree until we find a field not in this group.
+ // Go up as many parents as indentations in the changed row.
+ else if (rowSettings.relationship === 'parent') {
+ $previousRow = $changedRow.prev('tr');
+ previousRow = $previousRow;
+ while (
+ $previousRow.length &&
+ $previousRow.find('.js-indentation').length >= this.rowObject.indents
+ ) {
+ $previousRow = $previousRow.prev('tr');
+ previousRow = $previousRow;
+ }
+ // If we found a row.
+ if ($previousRow.length) {
+ sourceRow = $previousRow.get(0);
+ }
+ // Otherwise we went all the way to the left of the table without finding
+ // a parent, meaning this item has been placed at the root level.
+ else {
+ // Use the first row in the table as source, because it's guaranteed to
+ // be at the root level. Find the first item, then compare this row
+ // against it as a sibling.
+ sourceRow = $(this.table)
+ .find('tr.draggable:first-of-type')
+ .get(0);
+ if (sourceRow === this.rowObject.element) {
+ sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1])
+ .next('tr.draggable')
+ .get(0);
+ }
+ useSibling = true;
+ }
+ }
+
+ // Because we may have moved the row from one category to another,
+ // take a look at our sibling and borrow its sources and targets.
+ this.copyDragClasses(sourceRow, changedRow, group);
+ rowSettings = this.rowSettings(group, changedRow);
+
+ // In the case that we're looking for a parent, but the row is at the top
+ // of the tree, copy our sibling's values.
+ if (useSibling) {
+ rowSettings.relationship = 'sibling';
+ rowSettings.source = rowSettings.target;
+ }
+
+ const targetClass = `.${rowSettings.target}`;
+ const targetElement = $changedRow.find(targetClass).get(0);
+
+ // Check if a target element exists in this row.
+ if (targetElement) {
+ const sourceClass = `.${rowSettings.source}`;
+ const sourceElement = $(sourceClass, sourceRow).get(0);
+ switch (rowSettings.action) {
+ case 'depth':
+ // Get the depth of the target row.
+ targetElement.value = $(sourceElement)
+ .closest('tr')
+ .find('.js-indentation').length;
+ break;
+
+ case 'match':
+ // Update the value.
+ targetElement.value = sourceElement.value;
+ break;
+
+ case 'order': {
+ const siblings = this.rowObject.findSiblings(rowSettings);
+ if ($(targetElement).is('select')) {
+ // Get a list of acceptable values.
+ const values = [];
+ $(targetElement)
+ .find('option')
+ .each(function collectValues() {
+ values.push(this.value);
+ });
+ const maxVal = values[values.length - 1];
+ // Populate the values in the siblings.
+ $(siblings)
+ .find(targetClass)
+ .each(function assignValues() {
+ // If there are more items than possible values, assign the
+ // maximum value to the row.
+ if (values.length > 0) {
+ this.value = values.shift();
+ } else {
+ this.value = maxVal;
+ }
+ });
+ } else {
+ // Assume a numeric input field.
+ let weight =
+ parseInt(
+ $(siblings[0])
+ .find(targetClass)
+ .val(),
+ 10,
+ ) || 0;
+ $(siblings)
+ .find(targetClass)
+ .each(function assignWeight() {
+ this.value = weight;
+ weight += 1;
+ });
+ }
+ break;
+ }
+ }
+ }
+ },
+
+ /**
+ * Copy all tableDrag related classes from one row to another.
+ *
+ * Copy all special tableDrag classes from one row's form elements to a
+ * different one, removing any special classes that the destination row
+ * may have had.
+ *
+ * @param {HTMLElement} sourceRow
+ * The element for the source row.
+ * @param {HTMLElement} targetRow
+ * The element for the target row.
+ * @param {string} group
+ * The group selector.
+ */
+ copyDragClasses(sourceRow, targetRow, group) {
+ const sourceElement = $(sourceRow).find(`.${group}`);
+ const targetElement = $(targetRow).find(`.${group}`);
+ if (sourceElement.length && targetElement.length) {
+ targetElement[0].className = sourceElement[0].className;
+ }
+ },
+
+ /**
+ * Check the suggested scroll of the table.
+ *
+ * @param {number} cursorY
+ * The Y position of the cursor.
+ *
+ * @return {number}
+ * The suggested scroll.
+ */
+ checkScroll(cursorY) {
+ const de = document.documentElement;
+ const b = document.body;
+ const windowHeight =
+ window.innerHeight ||
+ (de.clientHeight && de.clientWidth !== 0
+ ? de.clientHeight
+ : b.offsetHeight);
+ this.windowHeight = windowHeight;
+ let scrollY;
+ if (document.all) {
+ scrollY = !de.scrollTop ? b.scrollTop : de.scrollTop;
+ } else {
+ scrollY = window.pageYOffset ? window.pageYOffset : window.scrollY;
+ }
+ this.scrollY = scrollY;
+ const { trigger } = this.scrollSettings;
+ let delta = 0;
+
+ // Return a scroll speed relative to the edge of the screen.
+ if (cursorY - scrollY > windowHeight - trigger) {
+ delta = trigger / (windowHeight + (scrollY - cursorY));
+ delta = delta > 0 && delta < trigger ? delta : trigger;
+ return delta * this.scrollSettings.amount;
+ }
+ if (cursorY - scrollY < trigger) {
+ delta = trigger / (cursorY - scrollY);
+ delta = delta > 0 && delta < trigger ? delta : trigger;
+ return -delta * this.scrollSettings.amount;
+ }
+ },
+
+ /**
+ * Set the scroll for the table.
+ *
+ * @param {number} scrollAmount
+ * The amount of scroll to apply to the window.
+ */
+ setScroll(scrollAmount) {
+ const self = this;
+
+ this.scrollInterval = setInterval(() => {
+ // Update the scroll values stored in the object.
+ self.checkScroll(self.currentPointerCoords.y);
+ const aboveTable = self.scrollY > self.table.topY;
+ const belowTable =
+ self.scrollY + self.windowHeight < self.table.bottomY;
+ if (
+ (scrollAmount > 0 && belowTable) ||
+ (scrollAmount < 0 && aboveTable)
+ ) {
+ window.scrollBy(0, scrollAmount);
+ }
+ }, this.scrollSettings.interval);
+ },
+
+ /**
+ * Command to restripe table properly.
+ */
+ restripeTable() {
+ // :even and :odd are reversed because jQuery counts from 0 and
+ // we count from 1, so we're out of sync.
+ // Match immediate children of the parent element to allow nesting.
+ $(this.table)
+ .find('> tbody > tr.draggable, > tr.draggable')
+ .filter(':visible')
+ .filter(':odd')
+ .removeClass('odd')
+ .addClass('even')
+ .end()
+ .filter(':even')
+ .removeClass('even')
+ .addClass('odd');
+ },
+
+ /**
+ * Stub function. Allows a custom handler when a row begins dragging.
+ *
+ * @return {null}
+ * Returns null when the stub function is used.
+ */
+ onDrag() {
+ return null;
+ },
+
+ /**
+ * Stub function. Allows a custom handler when a row is dropped.
+ *
+ * @return {null}
+ * Returns null when the stub function is used.
+ */
+ onDrop() {
+ return null;
+ },
+
+ /**
+ * Constructor to make a new object to manipulate a table row.
+ *
+ * @param {HTMLElement} tableRow
+ * The DOM element for the table row we will be manipulating.
+ * @param {string} method
+ * The method in which this row is being moved. Either 'keyboard' or
+ * 'mouse'.
+ * @param {bool} indentEnabled
+ * Whether the containing table uses indentations. Used for optimizations.
+ * @param {number} maxDepth
+ * The maximum amount of indentations this row may contain.
+ * @param {bool} addClasses
+ * Whether we want to add classes to this row to indicate child
+ * relationships.
+ */
+ row(tableRow, method, indentEnabled, maxDepth, addClasses) {
+ const $tableRow = $(tableRow);
+
+ this.element = tableRow;
+ this.method = method;
+ this.group = [tableRow];
+ this.groupDepth = $tableRow.find('.js-indentation').length;
+ this.changed = false;
+ this.table = $tableRow.closest('table')[0];
+ this.indentEnabled = indentEnabled;
+ this.maxDepth = maxDepth;
+ // Direction the row is being moved.
+ this.direction = '';
+ if (this.indentEnabled) {
+ this.indents = $tableRow.find('.js-indentation').length;
+ this.children = this.findChildren(addClasses);
+ this.group = $.merge(this.group, this.children);
+ // Find the depth of this entire group.
+ for (let n = 0; n < this.group.length; n++) {
+ this.groupDepth = Math.max(
+ $(this.group[n]).find('.js-indentation').length,
+ this.groupDepth,
+ );
+ }
+ }
+ },
+ });
+
+ $.extend(Drupal.tableDrag.prototype.row.prototype, {
+ /**
+ * Find all children of rowObject by indentation.
+ *
+ * @param {bool} addClasses
+ * Whether we want to add classes to this row to indicate child
+ * relationships.
+ *
+ * @return {Array}
+ * An array of children of the row.
+ */
+ findChildren(addClasses) {
+ const parentIndentation = this.indents;
+ let currentRow = $(this.element, this.table).next('tr.draggable');
+ const rows = [];
+ let child = 0;
+
+ function rowIndentation(indentNum, el) {
+ const self = $(el);
+ if (child === 1 && indentNum === parentIndentation) {
+ self.addClass('tree-child-first');
+ }
+ if (indentNum === parentIndentation) {
+ self.addClass('tree-child');
+ } else if (indentNum > parentIndentation) {
+ self.addClass('tree-child-horizontal');
+ }
+ }
+
+ while (currentRow.length) {
+ // A greater indentation indicates this is a child.
+ if (currentRow.find('.js-indentation').length > parentIndentation) {
+ child += 1;
+ rows.push(currentRow[0]);
+ if (addClasses) {
+ currentRow.find('.js-indentation').each(rowIndentation);
+ }
+ } else {
+ break;
+ }
+ currentRow = currentRow.next('tr.draggable');
+ }
+ if (addClasses && rows.length) {
+ $(rows[rows.length - 1])
+ .find(`.js-indentation:nth-child(${parentIndentation + 1})`)
+ .addClass('tree-child-last');
+ }
+ return rows;
+ },
+
+ /**
+ * Ensure that two rows are allowed to be swapped.
+ *
+ * @param {HTMLElement} row
+ * DOM object for the row being considered for swapping.
+ *
+ * @return {bool}
+ * Whether the swap is a valid swap or not.
+ */
+ isValidSwap(row) {
+ const $row = $(row);
+ if (this.indentEnabled) {
+ let prevRow;
+ let nextRow;
+ if (this.direction === 'down') {
+ prevRow = row;
+ nextRow = $row.next('tr').get(0);
+ } else {
+ prevRow = $row.prev('tr').get(0);
+ nextRow = row;
+ }
+ this.interval = this.validIndentInterval(prevRow, nextRow);
+
+ // We have an invalid swap if the valid indentations interval is empty.
+ if (this.interval.min > this.interval.max) {
+ return false;
+ }
+ }
+
+ // Do not let an un-draggable first row have anything put before it.
+ if (
+ this.table.tBodies[0].rows[0] === row &&
+ $row.is(':not(.draggable)')
+ ) {
+ return false;
+ }
+
+ return true;
+ },
+
+ /**
+ * Perform the swap between two rows.
+ *
+ * @param {string} position
+ * Whether the swap will occur 'before' or 'after' the given row.
+ * @param {HTMLElement} row
+ * DOM element what will be swapped with the row group.
+ */
+ swap(position, row) {
+ // Makes sure only DOM object are passed to Drupal.detachBehaviors().
+ this.group.forEach(detachedRow => {
+ Drupal.detachBehaviors(detachedRow, drupalSettings, 'move');
+ });
+ $(row)[position](this.group);
+ // Makes sure only DOM object are passed to Drupal.attachBehaviors()s.
+ this.group.forEach(attachedRow => {
+ Drupal.attachBehaviors(attachedRow, drupalSettings);
+ });
+ this.changed = true;
+ this.onSwap(row);
+ },
+
+ /**
+ * Determine the valid indentations interval for the row at a given position.
+ *
+ * @param {?HTMLElement} prevRow
+ * DOM object for the row before the tested position
+ * (or null for first position in the table).
+ * @param {?HTMLElement} nextRow
+ * DOM object for the row after the tested position
+ * (or null for last position in the table).
+ *
+ * @return {object}
+ * An object with the keys `min` and `max` to indicate the valid indent
+ * interval.
+ */
+ validIndentInterval(prevRow, nextRow) {
+ const $prevRow = $(prevRow);
+ let maxIndent;
+
+ // Minimum indentation:
+ // Do not orphan the next row.
+ const minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0;
+
+ // Maximum indentation:
+ if (
+ !prevRow ||
+ $prevRow.is(':not(.draggable)') ||
+ $(this.element).is('.tabledrag-root')
+ ) {
+ // Do not indent:
+ // - the first row in the table,
+ // - rows dragged below a non-draggable row,
+ // - 'root' rows.
+ maxIndent = 0;
+ } else {
+ // Do not go deeper than as a child of the previous row.
+ maxIndent =
+ $prevRow.find('.js-indentation').length +
+ ($prevRow.is('.tabledrag-leaf') ? 0 : 1);
+ // Limit by the maximum allowed depth for the table.
+ if (this.maxDepth) {
+ maxIndent = Math.min(
+ maxIndent,
+ this.maxDepth - (this.groupDepth - this.indents),
+ );
+ }
+ }
+
+ return { min: minIndent, max: maxIndent };
+ },
+
+ /**
+ * Indent a row within the legal bounds of the table.
+ *
+ * @param {number} indentDiff
+ * The number of additional indentations proposed for the row (can be
+ * positive or negative). This number will be adjusted to nearest valid
+ * indentation level for the row.
+ *
+ * @return {number}
+ * The number of indentations applied.
+ */
+ indent(indentDiff) {
+ const $group = $(this.group);
+ // Determine the valid indentations interval if not available yet.
+ if (!this.interval) {
+ const prevRow = $(this.element)
+ .prev('tr')
+ .get(0);
+ const nextRow = $group
+ .eq(-1)
+ .next('tr')
+ .get(0);
+ this.interval = this.validIndentInterval(prevRow, nextRow);
+ }
+
+ // Adjust to the nearest valid indentation.
+ let indent = this.indents + indentDiff;
+ indent = Math.max(indent, this.interval.min);
+ indent = Math.min(indent, this.interval.max);
+ indentDiff = indent - this.indents;
+
+ for (let n = 1; n <= Math.abs(indentDiff); n++) {
+ // Add or remove indentations.
+ if (indentDiff < 0) {
+ $group.find('.js-indentation:first-of-type').remove();
+ this.indents -= 1;
+ } else {
+ $group
+ .find('.js-tabledrag-cell-content')
+ .prepend(Drupal.theme('tableDragIndentation'));
+ this.indents += 1;
+ }
+ }
+ if (indentDiff) {
+ // Update indentation for this row.
+ this.changed = true;
+ this.groupDepth += indentDiff;
+ this.onIndent();
+ }
+
+ return indentDiff;
+ },
+
+ /**
+ * Find all siblings for a row.
+ *
+ * According to its subgroup or indentation. Note that the passed-in row is
+ * included in the list of siblings.
+ *
+ * @param {object} rowSettings
+ * The field settings we're using to identify what constitutes a sibling.
+ *
+ * @return {Array}
+ * An array of siblings.
+ */
+ findSiblings(rowSettings) {
+ const siblings = [];
+ const directions = ['prev', 'next'];
+ const rowIndentation = this.indents;
+ let checkRowIndentation;
+ for (let d = 0; d < directions.length; d++) {
+ let checkRow = $(this.element)[directions[d]]();
+ while (checkRow.length) {
+ // Check that the sibling contains a similar target field.
+ if (checkRow.find(`.${rowSettings.target}`)) {
+ // Either add immediately if this is a flat table, or check to
+ // ensure that this row has the same level of indentation.
+ if (this.indentEnabled) {
+ checkRowIndentation = checkRow.find('.js-indentation').length;
+ }
+
+ if (!this.indentEnabled || checkRowIndentation === rowIndentation) {
+ siblings.push(checkRow[0]);
+ } else if (checkRowIndentation < rowIndentation) {
+ // No need to keep looking for siblings when we get to a parent.
+ break;
+ }
+ } else {
+ break;
+ }
+ checkRow = checkRow[directions[d]]();
+ }
+ // Since siblings are added in reverse order for previous, reverse the
+ // completed list of previous siblings. Add the current row and
+ // continue.
+ if (directions[d] === 'prev') {
+ siblings.reverse();
+ siblings.push(this.element);
+ }
+ }
+ return siblings;
+ },
+
+ /**
+ * Remove indentation helper classes from the current row group.
+ */
+ removeIndentClasses() {
+ Object.keys(this.children || {}).forEach(n => {
+ $(this.children[n])
+ .find('.js-indentation')
+ .removeClass('tree-child')
+ .removeClass('tree-child-first')
+ .removeClass('tree-child-last')
+ .removeClass('tree-child-horizontal');
+ });
+ },
+
+ /**
+ * Add an asterisk or other marker to the changed row.
+ */
+ markChanged() {
+ 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.find('.js-tabledrag-handle').after(marker);
+ }
+ },
+
+ /**
+ * Stub function. Allows a custom handler when a row is indented.
+ *
+ * @return {null}
+ * Returns null when the stub function is used.
+ */
+ onIndent() {
+ return null;
+ },
+
+ /**
+ * Stub function. Allows a custom handler when a row is swapped.
+ *
+ * @param {HTMLElement} swappedRow
+ * The element for the swapped row.
+ *
+ * @return {null}
+ * Returns null when the stub function is used.
+ */
+ // eslint-disable-next-line no-unused-vars
+ onSwap(swappedRow) {
+ return null;
+ },
+ });
+
+ $.extend(
+ Drupal.theme,
+ /** @lends Drupal.theme */ {
+ /**
+ * @return {string}
+ * Markup for the marker.
+ */
+ tableDragChangedMarker() {
+ return `<abbr class="warning tabledrag-changed" title="${Drupal.t(
+ 'Changed',
+ )}">*</abbr>`;
+ },
+
+ /**
+ * @return {string}
+ * Markup for the indentation.
+ */
+ tableDragIndentation() {
+ return '<div class="js-indentation indentation"><svg xmlns="http://www.w3.org/2000/svg" class="tree" width="25" height="25" viewBox="0 0 25 25"><path class="tree__item tree__item-child-ltr tree__item-child-last-ltr tree__item-horizontal tree__item-horizontal-right" d="M12,12.5 H25" stroke="#888"/><path class="tree__item tree__item-child-rtl tree__item-child-last-rtl tree__item-horizontal tree__horizontal-left" d="M0,12.5 H13" stroke="#888"/><path class="tree__item tree__item-child-ltr tree__item-child-rtl tree__item-child-last-ltr tree__item-child-last-rtl tree__vertical tree__vertical-top" d="M12.5,12 v-99" stroke="#888"/><path class="tree__item tree__item-child-ltr tree__item-child-rtl tree__vertical tree__vertical-bottom" d="M12.5,12 v99" stroke="#888"/></svg></div>';
+ },
+
+ /**
+ * @return {string}
+ * Markup for the warning.
+ */
+ tableDragChangedWarning() {
+ return `<div class="tabledrag-changed-warning messages messages--warning" role="alert">${Drupal.theme(
+ 'tableDragChangedMarker',
+ )} ${Drupal.t('You have unsaved changes.')}</div>`;
+ },
+
+ /**
+ * Constucts the table drag handle.
+ *
+ * @return {string}
+ * A string representing a DOM fragment.
+ */
+ tableDragHandle() {
+ return '<a href="#" class="tabledrag-handle"></a>';
+ },
+
+ /**
+ * Constructs the wrapper for the whole table drag cell.
+ *
+ * @return {string}
+ * A string representing a DOM fragment.
+ */
+ tableDragCellItemsWrapper() {
+ return '<div class="tabledrag-cell-content"/>';
+ },
+
+ /**
+ * Constructs the wrapper for the initial content of the drag cell.
+ *
+ * @return {string}
+ * A string representing a DOM fragment.
+ */
+ 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/core/themes/claro/js/tabledrag.js b/core/themes/claro/js/tabledrag.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef37e236c0d0e17f069b37964cacd9b96403dfb4
--- /dev/null
+++ b/core/themes/claro/js/tabledrag.js
@@ -0,0 +1,1001 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+(function ($, Drupal, drupalSettings) {
+ var showWeight = JSON.parse(localStorage.getItem('Drupal.tableDrag.showWeight'));
+
+ Drupal.behaviors.tableDrag = {
+ attach: function attach(context, settings) {
+ function initTableDrag(table, base) {
+ if (table.length) {
+ Drupal.tableDrag[base] = new Drupal.tableDrag(table[0], settings.tableDrag[base]);
+ }
+ }
+
+ Object.keys(settings.tableDrag || {}).forEach(function (base) {
+ initTableDrag($(context).find('#' + base).once('tabledrag'), base);
+ });
+ }
+ };
+
+ Drupal.tableDrag = function init(table, tableSettings) {
+ var _this = this;
+
+ var self = this;
+ var $table = $(table);
+
+ this.$table = $(table);
+
+ this.table = table;
+
+ this.tableSettings = tableSettings;
+
+ this.dragObject = null;
+
+ this.rowObject = null;
+
+ this.oldRowElement = null;
+
+ this.oldY = 0;
+
+ this.changed = false;
+
+ this.maxDepth = 0;
+
+ this.rtl = $(this.table).css('direction') === 'rtl' ? -1 : 1;
+
+ this.striping = $(this.table).data('striping') === 1;
+
+ this.scrollSettings = { amount: 4, interval: 50, trigger: 70 };
+
+ this.scrollInterval = null;
+
+ this.scrollY = 0;
+
+ this.windowHeight = 0;
+
+ this.indentEnabled = false;
+ Object.keys(tableSettings || {}).forEach(function (group) {
+ Object.keys(tableSettings[group] || {}).forEach(function (n) {
+ if (tableSettings[group][n].relationship === 'parent') {
+ _this.indentEnabled = true;
+ }
+ if (tableSettings[group][n].limit > 0) {
+ _this.maxDepth = tableSettings[group][n].limit;
+ }
+ });
+ });
+ if (this.indentEnabled) {
+ this.indentCount = 1;
+
+ var indent = Drupal.theme('tableDragIndentation');
+ var testRow = $('<tr/>').addClass('draggable').appendTo(table);
+ var testCell = $('<td/>').appendTo(testRow).prepend(indent).prepend(indent);
+ var $indentation = testCell.find('.js-indentation');
+
+ this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;
+ testRow.remove();
+ }
+
+ $table.find('> tr.draggable, > tbody > tr.draggable').each(function initDraggable() {
+ self.makeDraggable(this);
+ });
+
+ $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)));
+
+ self.initColumns();
+
+ $(document).on('touchmove', function (event) {
+ return self.dragRow(event.originalEvent.touches[0], self);
+ });
+ $(document).on('touchend', function (event) {
+ return self.dropRow(event.originalEvent.touches[0], self);
+ });
+ $(document).on('mousemove pointermove', function (event) {
+ return self.dragRow(event, self);
+ });
+ $(document).on('mouseup pointerup', function (event) {
+ return self.dropRow(event, self);
+ });
+
+ $(window).on('storage', $.proxy(function weightColumnDisplayChange(event) {
+ if (event.originalEvent.key === 'Drupal.tableDrag.showWeight') {
+ showWeight = JSON.parse(event.originalEvent.newValue);
+ this.displayColumns(showWeight);
+ }
+ }, this));
+ };
+
+ $.extend(Drupal.tableDrag.prototype, {
+ initColumns: function initColumns() {
+ var _this2 = this;
+
+ var $table = this.$table;
+
+ var hidden = void 0;
+ var cell = void 0;
+ var columnIndex = void 0;
+ Object.keys(this.tableSettings || {}).forEach(function (group) {
+ Object.keys(_this2.tableSettings[group]).some(function (tableSetting) {
+ var field = $table.find('.' + _this2.tableSettings[group][tableSetting].target).eq(0);
+ if (field.length && _this2.tableSettings[group][tableSetting].hidden) {
+ hidden = _this2.tableSettings[group][tableSetting].hidden;
+ cell = field.closest('td');
+ return true;
+ }
+ return false;
+ });
+
+ if (hidden && cell[0]) {
+ columnIndex = cell.parent().find('> td').index(cell.get(0)) + 1;
+ $table.find('> thead > tr, > tbody > tr, > tr').each(_this2.addColspanClass(columnIndex));
+ }
+ });
+ this.displayColumns(showWeight);
+ },
+ addColspanClass: function addColspanClass(columnIndex) {
+ return function addColspanClass() {
+ var $row = $(this);
+ var index = columnIndex;
+ var cells = $row.children();
+ var cell = void 0;
+ cells.each(function checkColspan(n) {
+ if (n < index && this.colSpan && this.colSpan > 1) {
+ index -= this.colSpan - 1;
+ }
+ });
+ if (index > 0) {
+ cell = cells.filter(':nth-child(' + index + ')');
+ if (cell[0].colSpan && cell[0].colSpan > 1) {
+ cell.addClass('tabledrag-has-colspan');
+ } else {
+ cell.addClass('tabledrag-hide');
+ }
+ }
+ };
+ },
+ displayColumns: function displayColumns(displayWeight) {
+ if (displayWeight) {
+ this.showColumns();
+ } else {
+ this.hideColumns();
+ }
+
+ $('table').findOnce('tabledrag').trigger('columnschange', !!displayWeight);
+ },
+ toggleColumns: function toggleColumns() {
+ showWeight = !showWeight;
+ this.displayColumns(showWeight);
+ if (showWeight) {
+ localStorage.setItem('Drupal.tableDrag.showWeight', showWeight);
+ } else {
+ localStorage.removeItem('Drupal.tableDrag.showWeight');
+ }
+ },
+ hideColumns: function hideColumns() {
+ var $tables = $('table').findOnce('tabledrag');
+
+ $tables.find('.tabledrag-hide').css('display', 'none');
+
+ $tables.find('.js-tabledrag-handle').css('display', '');
+
+ $tables.find('.tabledrag-has-colspan').each(function decreaseColspan() {
+ this.colSpan = this.colSpan - 1;
+ });
+
+ $('.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');
+
+ $tables.find('.tabledrag-hide').css('display', '');
+
+ $tables.find('.js-tabledrag-handle').css('display', 'none');
+
+ $tables.find('.tabledrag-has-colspan').each(function increaseColspan() {
+ this.colSpan = this.colSpan + 1;
+ });
+
+ $('.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);
+ var tableSettingsGroup = this.tableSettings[group];
+ return Object.keys(tableSettingsGroup).map(function (delta) {
+ var targetClass = tableSettingsGroup[delta].target;
+ var rowSettings = void 0;
+ if (field.is('.' + targetClass)) {
+ rowSettings = {};
+ Object.keys(tableSettingsGroup[delta]).forEach(function (n) {
+ rowSettings[n] = tableSettingsGroup[delta][n];
+ });
+ }
+ return rowSettings;
+ }).filter(function (rowSetting) {
+ return rowSetting;
+ })[0];
+ },
+ makeDraggable: function makeDraggable(item) {
+ var self = this;
+ var $item = $(item);
+ var $firstCell = $item.find('td:first-of-type').wrapInner(Drupal.theme.tableDragCellContentWrapper()).wrapInner($(Drupal.theme('tableDragCellItemsWrapper')).addClass('js-tabledrag-cell-content'));
+ var $targetElem = $firstCell.find('.js-tabledrag-cell-content').length ? $firstCell.find('.js-tabledrag-cell-content') : $firstCell.addClass('js-tabledrag-cell-content');
+
+ $targetElem.find('.js-indentation').detach().prependTo($targetElem);
+
+ $targetElem.find('a').addClass('menu-item__link');
+
+ var handle = $(Drupal.theme.tableDragHandle()).addClass('js-tabledrag-handle').attr('title', Drupal.t('Drag to re-order'));
+
+ var $indentationLast = $targetElem.find('.js-indentation').eq(-1);
+ if ($indentationLast.length) {
+ $indentationLast.after(handle);
+
+ self.indentCount = Math.max($item.find('.js-indentation').length, self.indentCount);
+ } else {
+ $targetElem.prepend(handle);
+ }
+
+ handle.on('click', function (event) {
+ event.preventDefault();
+ });
+
+ if (handle.closest('.js-tabledrag-disabled').length) {
+ return;
+ }
+
+ handle.on('mousedown touchstart pointerdown', function (event) {
+ event.preventDefault();
+ if (event.originalEvent.type === 'touchstart') {
+ event = event.originalEvent.touches[0];
+ }
+ self.dragStart(event, self, item);
+ });
+
+ handle.on('focus', function () {
+ self.safeBlur = true;
+ });
+
+ handle.on('blur', function (event) {
+ if (self.rowObject && self.safeBlur) {
+ self.dropRow(event, self);
+ }
+ });
+
+ handle.on('keydown', function (event) {
+ if (event.keyCode !== 9 && !self.rowObject) {
+ self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true);
+ }
+
+ var keyChange = false;
+ var groupHeight = void 0;
+
+ switch (event.keyCode) {
+ case 37:
+ case 63234:
+ keyChange = true;
+ self.rowObject.indent(-1 * self.rtl);
+ break;
+
+ case 38:
+ case 63232:
+ {
+ var $previousRow = $(self.rowObject.element).prev('tr').eq(0);
+ var previousRow = $previousRow.get(0);
+ while (previousRow && $previousRow.is(':hidden')) {
+ $previousRow = $(previousRow).prev('tr').eq(0);
+ previousRow = $previousRow.get(0);
+ }
+ if (previousRow) {
+ self.safeBlur = false;
+ self.rowObject.direction = 'up';
+ keyChange = true;
+
+ if ($(item).is('.tabledrag-root')) {
+ groupHeight = 0;
+ while (previousRow && $previousRow.find('.js-indentation').length) {
+ $previousRow = $(previousRow).prev('tr').eq(0);
+ previousRow = $previousRow.get(0);
+ groupHeight += $previousRow.is(':hidden') ? 0 : previousRow.offsetHeight;
+ }
+ if (previousRow) {
+ self.rowObject.swap('before', previousRow);
+
+ window.scrollBy(0, -groupHeight);
+ }
+ } else if (self.table.tBodies[0].rows[0] !== previousRow || $previousRow.is('.draggable')) {
+ self.rowObject.swap('before', previousRow);
+ self.rowObject.interval = null;
+ self.rowObject.indent(0);
+ window.scrollBy(0, -parseInt(item.offsetHeight, 10));
+ }
+
+ handle.trigger('focus');
+ }
+ break;
+ }
+
+ case 39:
+ case 63235:
+ keyChange = true;
+ self.rowObject.indent(self.rtl);
+ break;
+
+ case 40:
+ case 63233:
+ {
+ var $nextRow = $(self.rowObject.group).eq(-1).next('tr').eq(0);
+ var nextRow = $nextRow.get(0);
+ while (nextRow && $nextRow.is(':hidden')) {
+ $nextRow = $(nextRow).next('tr').eq(0);
+ nextRow = $nextRow.get(0);
+ }
+ if (nextRow) {
+ self.safeBlur = false;
+ self.rowObject.direction = 'down';
+ keyChange = true;
+
+ if ($(item).is('.tabledrag-root')) {
+ groupHeight = 0;
+ var nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false);
+ if (nextGroup) {
+ $(nextGroup.group).each(function groupIterator() {
+ groupHeight += $(this).is(':hidden') ? 0 : this.offsetHeight;
+ });
+ var nextGroupRow = $(nextGroup.group).eq(-1).get(0);
+ self.rowObject.swap('after', nextGroupRow);
+
+ window.scrollBy(0, parseInt(groupHeight, 10));
+ }
+ } else {
+ self.rowObject.swap('after', nextRow);
+ self.rowObject.interval = null;
+ self.rowObject.indent(0);
+ window.scrollBy(0, parseInt(item.offsetHeight, 10));
+ }
+
+ handle.trigger('focus');
+ }
+ break;
+ }
+ }
+
+ if (self.rowObject && self.rowObject.changed === true) {
+ $(item).addClass('drag');
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ self.oldRowElement = item;
+ if (self.striping === true) {
+ self.restripeTable();
+ }
+ self.onDrag();
+ }
+
+ if (keyChange) {
+ return false;
+ }
+ });
+
+ handle.on('keypress', function (event) {
+
+ switch (event.keyCode) {
+ case 37:
+ case 38:
+ case 39:
+ case 40:
+ return false;
+ }
+ });
+ },
+ dragStart: function dragStart(event, self, item) {
+ self.dragObject = {};
+ self.dragObject.initOffset = self.getPointerOffset(item, event);
+ self.dragObject.initPointerCoords = self.pointerCoords(event);
+ if (self.indentEnabled) {
+ self.dragObject.indentPointerPos = self.dragObject.initPointerCoords;
+ }
+
+ if (self.rowObject) {
+ $(self.rowObject.element).find('.js-tabledrag-handle').trigger('blur');
+ }
+
+ self.rowObject = new self.row(item, 'pointer', self.indentEnabled, self.maxDepth, true);
+
+ self.table.topY = $(self.table).offset().top;
+ self.table.bottomY = self.table.topY + self.table.offsetHeight;
+
+ $(item).addClass('drag');
+
+ $('body').addClass('drag');
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ },
+ dragRow: function dragRow(event, self) {
+ if (self.dragObject) {
+ self.currentPointerCoords = self.pointerCoords(event);
+ var y = self.currentPointerCoords.y - self.dragObject.initOffset.y;
+ var x = self.currentPointerCoords.x - self.dragObject.initOffset.x;
+
+ if (y !== self.oldY) {
+ self.rowObject.direction = y > self.oldY ? 'down' : 'up';
+
+ self.oldY = y;
+
+ var scrollAmount = self.checkScroll(self.currentPointerCoords.y);
+
+ clearInterval(self.scrollInterval);
+
+ if (scrollAmount > 0 && self.rowObject.direction === 'down' || scrollAmount < 0 && self.rowObject.direction === 'up') {
+ self.setScroll(scrollAmount);
+ }
+
+ var currentRow = self.findDropTargetRow(x, y);
+ if (currentRow) {
+ if (self.rowObject.direction === 'down') {
+ self.rowObject.swap('after', currentRow, self);
+ } else {
+ self.rowObject.swap('before', currentRow, self);
+ }
+ if (self.striping === true) {
+ self.restripeTable();
+ }
+ }
+ }
+
+ if (self.indentEnabled) {
+ var xDiff = self.currentPointerCoords.x - self.dragObject.indentPointerPos.x;
+
+ var indentDiff = Math.round(xDiff / self.indentAmount);
+
+ var indentChange = self.rowObject.indent(indentDiff);
+
+ self.dragObject.indentPointerPos.x += self.indentAmount * indentChange;
+ self.indentCount = Math.max(self.indentCount, self.rowObject.indents);
+ }
+
+ return false;
+ }
+ },
+ dropRow: function dropRow(event, self) {
+ var droppedRow = void 0;
+ var $droppedRow = void 0;
+
+ if (self.rowObject !== null) {
+ droppedRow = self.rowObject.element;
+ $droppedRow = $(droppedRow);
+
+ if (self.rowObject.changed === true) {
+ self.updateFields(droppedRow);
+
+ Object.keys(self.tableSettings || {}).forEach(function (group) {
+ var rowSettings = self.rowSettings(group, droppedRow);
+ if (rowSettings.relationship === 'group') {
+ Object.keys(self.rowObject.children || {}).forEach(function (n) {
+ self.updateField(self.rowObject.children[n], group);
+ });
+ }
+ });
+
+ self.rowObject.markChanged();
+ if (self.changed === false) {
+ 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;
+ }
+ }
+
+ if (self.indentEnabled) {
+ self.rowObject.removeIndentClasses();
+ }
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ $droppedRow.removeClass('drag').addClass('drag-previous');
+ self.oldRowElement = droppedRow;
+ self.onDrop();
+ self.rowObject = null;
+ }
+
+ if (self.dragObject !== null) {
+ self.dragObject = null;
+ $('body').removeClass('drag');
+ clearInterval(self.scrollInterval);
+ }
+ },
+ pointerCoords: function pointerCoords(event) {
+ if (event.pageX || event.pageY) {
+ return { x: event.pageX, y: event.pageY };
+ }
+ return {
+ x: event.clientX + (document.body.scrollLeft - document.body.clientLeft),
+ y: event.clientY + (document.body.scrollTop - document.body.clientTop)
+ };
+ },
+ getPointerOffset: function getPointerOffset(target, event) {
+ var docPos = $(target).offset();
+ var pointerPos = this.pointerCoords(event);
+ return { x: pointerPos.x - docPos.left, y: pointerPos.y - docPos.top };
+ },
+ findDropTargetRow: function findDropTargetRow(x, y) {
+ var _this3 = this;
+
+ var rows = $(this.table.tBodies[0].rows).not(':hidden');
+
+ var _loop = function _loop(n) {
+ var row = rows[n];
+ var $row = $(row);
+ var rowY = $row.offset().top;
+ var rowHeight = void 0;
+
+ if (row.offsetHeight === 0) {
+ rowHeight = parseInt(row.firstChild.offsetHeight, 10) / 2;
+ } else {
+ rowHeight = parseInt(row.offsetHeight, 10) / 2;
+ }
+
+ if (y > rowY - rowHeight && y < rowY + rowHeight) {
+ if (_this3.indentEnabled) {
+ if (Object.keys(_this3.rowObject.group).some(function (o) {
+ return _this3.rowObject.group[o] === row;
+ })) {
+ return {
+ v: null
+ };
+ }
+ } else if (row === _this3.rowObject.element) {
+ return {
+ v: null
+ };
+ }
+
+ if (!_this3.rowObject.isValidSwap(row)) {
+ return {
+ v: null
+ };
+ }
+
+ while ($row.is(':hidden') && $row.prev('tr').is(':hidden')) {
+ $row = $row.prev('tr:first-of-type');
+ row = $row.get(0);
+ }
+ return {
+ v: row
+ };
+ }
+ };
+
+ for (var n = 0; n < rows.length; n++) {
+ var _ret = _loop(n);
+
+ if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+ }
+ return null;
+ },
+ updateFields: function updateFields(changedRow) {
+ var _this4 = this;
+
+ Object.keys(this.tableSettings || {}).forEach(function (group) {
+ _this4.updateField(changedRow, group);
+ });
+ },
+ updateField: function updateField(changedRow, group) {
+ var rowSettings = this.rowSettings(group, changedRow);
+ var $changedRow = $(changedRow);
+ var sourceRow = void 0;
+ var $previousRow = void 0;
+ var previousRow = void 0;
+ var useSibling = void 0;
+
+ if (rowSettings.relationship === 'self' || rowSettings.relationship === 'group') {
+ sourceRow = changedRow;
+ } else if (rowSettings.relationship === 'sibling') {
+ $previousRow = $changedRow.prev('tr:first-of-type');
+ previousRow = $previousRow.get(0);
+ var $nextRow = $changedRow.next('tr:first-of-type');
+ var nextRow = $nextRow.get(0);
+ sourceRow = changedRow;
+ if ($previousRow.is('.draggable') && $previousRow.find('.' + group).length) {
+ if (this.indentEnabled) {
+ if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
+ sourceRow = previousRow;
+ }
+ } else {
+ sourceRow = previousRow;
+ }
+ } else if ($nextRow.is('.draggable') && $nextRow.find('.' + group).length) {
+ if (this.indentEnabled) {
+ if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
+ sourceRow = nextRow;
+ }
+ } else {
+ sourceRow = nextRow;
+ }
+ }
+ } else if (rowSettings.relationship === 'parent') {
+ $previousRow = $changedRow.prev('tr');
+ previousRow = $previousRow;
+ while ($previousRow.length && $previousRow.find('.js-indentation').length >= this.rowObject.indents) {
+ $previousRow = $previousRow.prev('tr');
+ previousRow = $previousRow;
+ }
+
+ if ($previousRow.length) {
+ sourceRow = $previousRow.get(0);
+ } else {
+ sourceRow = $(this.table).find('tr.draggable:first-of-type').get(0);
+ if (sourceRow === this.rowObject.element) {
+ sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]).next('tr.draggable').get(0);
+ }
+ useSibling = true;
+ }
+ }
+
+ this.copyDragClasses(sourceRow, changedRow, group);
+ rowSettings = this.rowSettings(group, changedRow);
+
+ if (useSibling) {
+ rowSettings.relationship = 'sibling';
+ rowSettings.source = rowSettings.target;
+ }
+
+ var targetClass = '.' + rowSettings.target;
+ var targetElement = $changedRow.find(targetClass).get(0);
+
+ if (targetElement) {
+ var sourceClass = '.' + rowSettings.source;
+ var sourceElement = $(sourceClass, sourceRow).get(0);
+ switch (rowSettings.action) {
+ case 'depth':
+ targetElement.value = $(sourceElement).closest('tr').find('.js-indentation').length;
+ break;
+
+ case 'match':
+ targetElement.value = sourceElement.value;
+ break;
+
+ case 'order':
+ {
+ var siblings = this.rowObject.findSiblings(rowSettings);
+ if ($(targetElement).is('select')) {
+ var values = [];
+ $(targetElement).find('option').each(function collectValues() {
+ values.push(this.value);
+ });
+ var maxVal = values[values.length - 1];
+
+ $(siblings).find(targetClass).each(function assignValues() {
+ if (values.length > 0) {
+ this.value = values.shift();
+ } else {
+ this.value = maxVal;
+ }
+ });
+ } else {
+ var weight = parseInt($(siblings[0]).find(targetClass).val(), 10) || 0;
+ $(siblings).find(targetClass).each(function assignWeight() {
+ this.value = weight;
+ weight += 1;
+ });
+ }
+ break;
+ }
+ }
+ }
+ },
+ copyDragClasses: function copyDragClasses(sourceRow, targetRow, group) {
+ var sourceElement = $(sourceRow).find('.' + group);
+ var targetElement = $(targetRow).find('.' + group);
+ if (sourceElement.length && targetElement.length) {
+ targetElement[0].className = sourceElement[0].className;
+ }
+ },
+ checkScroll: function checkScroll(cursorY) {
+ var de = document.documentElement;
+ var b = document.body;
+ var windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth !== 0 ? de.clientHeight : b.offsetHeight);
+ this.windowHeight = windowHeight;
+ var scrollY = void 0;
+ if (document.all) {
+ scrollY = !de.scrollTop ? b.scrollTop : de.scrollTop;
+ } else {
+ scrollY = window.pageYOffset ? window.pageYOffset : window.scrollY;
+ }
+ this.scrollY = scrollY;
+ var trigger = this.scrollSettings.trigger;
+
+ var delta = 0;
+
+ if (cursorY - scrollY > windowHeight - trigger) {
+ delta = trigger / (windowHeight + (scrollY - cursorY));
+ delta = delta > 0 && delta < trigger ? delta : trigger;
+ return delta * this.scrollSettings.amount;
+ }
+ if (cursorY - scrollY < trigger) {
+ delta = trigger / (cursorY - scrollY);
+ delta = delta > 0 && delta < trigger ? delta : trigger;
+ return -delta * this.scrollSettings.amount;
+ }
+ },
+ setScroll: function setScroll(scrollAmount) {
+ var self = this;
+
+ this.scrollInterval = setInterval(function () {
+ self.checkScroll(self.currentPointerCoords.y);
+ var aboveTable = self.scrollY > self.table.topY;
+ var belowTable = self.scrollY + self.windowHeight < self.table.bottomY;
+ if (scrollAmount > 0 && belowTable || scrollAmount < 0 && aboveTable) {
+ window.scrollBy(0, scrollAmount);
+ }
+ }, this.scrollSettings.interval);
+ },
+ restripeTable: function restripeTable() {
+ $(this.table).find('> tbody > tr.draggable, > tr.draggable').filter(':visible').filter(':odd').removeClass('odd').addClass('even').end().filter(':even').removeClass('even').addClass('odd');
+ },
+ onDrag: function onDrag() {
+ return null;
+ },
+ onDrop: function onDrop() {
+ return null;
+ },
+ row: function row(tableRow, method, indentEnabled, maxDepth, addClasses) {
+ var $tableRow = $(tableRow);
+
+ this.element = tableRow;
+ this.method = method;
+ this.group = [tableRow];
+ this.groupDepth = $tableRow.find('.js-indentation').length;
+ this.changed = false;
+ this.table = $tableRow.closest('table')[0];
+ this.indentEnabled = indentEnabled;
+ this.maxDepth = maxDepth;
+
+ this.direction = '';
+ if (this.indentEnabled) {
+ this.indents = $tableRow.find('.js-indentation').length;
+ this.children = this.findChildren(addClasses);
+ this.group = $.merge(this.group, this.children);
+
+ for (var n = 0; n < this.group.length; n++) {
+ this.groupDepth = Math.max($(this.group[n]).find('.js-indentation').length, this.groupDepth);
+ }
+ }
+ }
+ });
+
+ $.extend(Drupal.tableDrag.prototype.row.prototype, {
+ findChildren: function findChildren(addClasses) {
+ var parentIndentation = this.indents;
+ var currentRow = $(this.element, this.table).next('tr.draggable');
+ var rows = [];
+ var child = 0;
+
+ function rowIndentation(indentNum, el) {
+ var self = $(el);
+ if (child === 1 && indentNum === parentIndentation) {
+ self.addClass('tree-child-first');
+ }
+ if (indentNum === parentIndentation) {
+ self.addClass('tree-child');
+ } else if (indentNum > parentIndentation) {
+ self.addClass('tree-child-horizontal');
+ }
+ }
+
+ while (currentRow.length) {
+ if (currentRow.find('.js-indentation').length > parentIndentation) {
+ child += 1;
+ rows.push(currentRow[0]);
+ if (addClasses) {
+ currentRow.find('.js-indentation').each(rowIndentation);
+ }
+ } else {
+ break;
+ }
+ currentRow = currentRow.next('tr.draggable');
+ }
+ if (addClasses && rows.length) {
+ $(rows[rows.length - 1]).find('.js-indentation:nth-child(' + (parentIndentation + 1) + ')').addClass('tree-child-last');
+ }
+ return rows;
+ },
+ isValidSwap: function isValidSwap(row) {
+ var $row = $(row);
+ if (this.indentEnabled) {
+ var prevRow = void 0;
+ var nextRow = void 0;
+ if (this.direction === 'down') {
+ prevRow = row;
+ nextRow = $row.next('tr').get(0);
+ } else {
+ prevRow = $row.prev('tr').get(0);
+ nextRow = row;
+ }
+ this.interval = this.validIndentInterval(prevRow, nextRow);
+
+ if (this.interval.min > this.interval.max) {
+ return false;
+ }
+ }
+
+ if (this.table.tBodies[0].rows[0] === row && $row.is(':not(.draggable)')) {
+ return false;
+ }
+
+ return true;
+ },
+ swap: function swap(position, row) {
+ this.group.forEach(function (detachedRow) {
+ Drupal.detachBehaviors(detachedRow, drupalSettings, 'move');
+ });
+ $(row)[position](this.group);
+
+ this.group.forEach(function (attachedRow) {
+ Drupal.attachBehaviors(attachedRow, drupalSettings);
+ });
+ this.changed = true;
+ this.onSwap(row);
+ },
+ validIndentInterval: function validIndentInterval(prevRow, nextRow) {
+ var $prevRow = $(prevRow);
+ var maxIndent = void 0;
+
+ var minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0;
+
+ if (!prevRow || $prevRow.is(':not(.draggable)') || $(this.element).is('.tabledrag-root')) {
+ maxIndent = 0;
+ } else {
+ maxIndent = $prevRow.find('.js-indentation').length + ($prevRow.is('.tabledrag-leaf') ? 0 : 1);
+
+ if (this.maxDepth) {
+ maxIndent = Math.min(maxIndent, this.maxDepth - (this.groupDepth - this.indents));
+ }
+ }
+
+ return { min: minIndent, max: maxIndent };
+ },
+ indent: function indent(indentDiff) {
+ var $group = $(this.group);
+
+ if (!this.interval) {
+ var prevRow = $(this.element).prev('tr').get(0);
+ var nextRow = $group.eq(-1).next('tr').get(0);
+ this.interval = this.validIndentInterval(prevRow, nextRow);
+ }
+
+ var indent = this.indents + indentDiff;
+ indent = Math.max(indent, this.interval.min);
+ indent = Math.min(indent, this.interval.max);
+ indentDiff = indent - this.indents;
+
+ for (var n = 1; n <= Math.abs(indentDiff); n++) {
+ if (indentDiff < 0) {
+ $group.find('.js-indentation:first-of-type').remove();
+ this.indents -= 1;
+ } else {
+ $group.find('.js-tabledrag-cell-content').prepend(Drupal.theme('tableDragIndentation'));
+ this.indents += 1;
+ }
+ }
+ if (indentDiff) {
+ this.changed = true;
+ this.groupDepth += indentDiff;
+ this.onIndent();
+ }
+
+ return indentDiff;
+ },
+ findSiblings: function findSiblings(rowSettings) {
+ var siblings = [];
+ var directions = ['prev', 'next'];
+ var rowIndentation = this.indents;
+ var checkRowIndentation = void 0;
+ for (var d = 0; d < directions.length; d++) {
+ var checkRow = $(this.element)[directions[d]]();
+ while (checkRow.length) {
+ if (checkRow.find('.' + rowSettings.target)) {
+ if (this.indentEnabled) {
+ checkRowIndentation = checkRow.find('.js-indentation').length;
+ }
+
+ if (!this.indentEnabled || checkRowIndentation === rowIndentation) {
+ siblings.push(checkRow[0]);
+ } else if (checkRowIndentation < rowIndentation) {
+ break;
+ }
+ } else {
+ break;
+ }
+ checkRow = checkRow[directions[d]]();
+ }
+
+ if (directions[d] === 'prev') {
+ siblings.reverse();
+ siblings.push(this.element);
+ }
+ }
+ return siblings;
+ },
+ removeIndentClasses: function removeIndentClasses() {
+ var _this5 = this;
+
+ Object.keys(this.children || {}).forEach(function (n) {
+ $(_this5.children[n]).find('.js-indentation').removeClass('tree-child').removeClass('tree-child-first').removeClass('tree-child-last').removeClass('tree-child-horizontal');
+ });
+ },
+ markChanged: function markChanged() {
+ 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.find('.js-tabledrag-handle').after(marker);
+ }
+ },
+ onIndent: function onIndent() {
+ return null;
+ },
+ onSwap: function onSwap(swappedRow) {
+ return null;
+ }
+ });
+
+ $.extend(Drupal.theme, {
+ tableDragChangedMarker: function tableDragChangedMarker() {
+ return '<abbr class="warning tabledrag-changed" title="' + Drupal.t('Changed') + '">*</abbr>';
+ },
+ tableDragIndentation: function tableDragIndentation() {
+ return '<div class="js-indentation indentation"><svg xmlns="http://www.w3.org/2000/svg" class="tree" width="25" height="25" viewBox="0 0 25 25"><path class="tree__item tree__item-child-ltr tree__item-child-last-ltr tree__item-horizontal tree__item-horizontal-right" d="M12,12.5 H25" stroke="#888"/><path class="tree__item tree__item-child-rtl tree__item-child-last-rtl tree__item-horizontal tree__horizontal-left" d="M0,12.5 H13" stroke="#888"/><path class="tree__item tree__item-child-ltr tree__item-child-rtl tree__item-child-last-ltr tree__item-child-last-rtl tree__vertical tree__vertical-top" d="M12.5,12 v-99" stroke="#888"/><path class="tree__item tree__item-child-ltr tree__item-child-rtl tree__vertical tree__vertical-bottom" d="M12.5,12 v99" stroke="#888"/></svg></div>';
+ },
+ tableDragChangedWarning: function tableDragChangedWarning() {
+ return '<div class="tabledrag-changed-warning messages messages--warning" role="alert">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t('You have unsaved changes.') + '</div>';
+ },
+ tableDragHandle: function tableDragHandle() {
+ return '<a href="#" class="tabledrag-handle"></a>';
+ },
+ tableDragCellItemsWrapper: function tableDragCellItemsWrapper() {
+ return '<div class="tabledrag-cell-content"/>';
+ },
+ 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/core/themes/claro/js/user.es6.js b/core/themes/claro/js/user.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..80229ac52bf701c5c322423e6e7852dc0fcfce23
--- /dev/null
+++ b/core/themes/claro/js/user.es6.js
@@ -0,0 +1,344 @@
+/**
+ * @file
+ * Overrides Drupal core user.js that provides password strength indicator.
+ *
+ * @todo remove these overrides after
+ * https://www.drupal.org/project/drupal/issues/3067523 has been resolved.
+ */
+
+(($, Drupal) => {
+ /**
+ * This overrides the default Drupal.behaviors.password functionality.
+ *
+ * - Markup has been moved to theme functions so that to enable customizations
+ * needed for matching Claro's design requirements
+ * (https://www.drupal.org/project/drupal/issues/3067523).
+ * - Modified classes so that same class names are not being used for different
+ * elements (https://www.drupal.org/project/drupal/issues/3061265).
+ */
+ Drupal.behaviors.password = {
+ attach(context, settings) {
+ const $passwordInput = $(context)
+ .find('input.js-password-field')
+ .once('password');
+
+ if ($passwordInput.length) {
+ // Settings and translated messages added by
+ // user_form_process_password_confirm().
+ const translate = settings.password;
+
+ // The form element object of the password input.
+ const $passwordInputParent = $passwordInput.parent();
+
+ // The password_confirm form element object.
+ const $passwordWidget = $passwordInput.closest(
+ '.js-form-type-password-confirm',
+ );
+
+ // The password confirm input.
+ const $passwordConfirmInput = $passwordWidget.find(
+ 'input.js-password-confirm',
+ );
+
+ // The strength feedback element for the password input.
+ const $passwordInputHelp = $(
+ Drupal.theme.passwordInputHelp(translate.strengthTitle),
+ );
+
+ // The password match feedback for the password confirm input.
+ const $passwordConfirmHelp = $(
+ Drupal.theme.passwordConfirmHelp(translate.confirmTitle),
+ );
+
+ const $passwordInputStrengthBar = $passwordInputHelp.find(
+ '.js-password-strength-bar',
+ );
+ const $passwordInputStrengthMessageWrapper = $passwordInputHelp.find(
+ '.js-password-strength-text',
+ );
+ const $passwordConfirmMatch = $passwordConfirmHelp.find(
+ '.js-password-match-text',
+ );
+ let $passwordSuggestionsTips = $(
+ Drupal.theme.passwordSuggestionsTips('', ''),
+ ).hide();
+
+ // If the password strength indicator is enabled, add its markup.
+ if (settings.password.showStrengthIndicator) {
+ $passwordConfirmInput
+ .after($passwordConfirmHelp)
+ .parent()
+ .after($passwordSuggestionsTips);
+
+ $passwordInputParent.append($passwordInputHelp);
+ }
+
+ // Check that password and confirmation inputs match.
+ const passwordCheckMatch = confirmInputVal => {
+ if (confirmInputVal) {
+ const success = $passwordInput.val() === confirmInputVal;
+ const confirmClass = success ? 'ok' : 'error';
+ const confirmMatchMessage = success
+ ? translate.confirmSuccess
+ : translate.confirmFailure;
+
+ // Update the success message and set the class accordingly if
+ // needed.
+ if (
+ !$passwordConfirmMatch.hasClass(confirmClass) ||
+ !$passwordConfirmMatch.html() === confirmMatchMessage
+ ) {
+ $passwordConfirmMatch
+ .html(confirmMatchMessage)
+ .removeClass('ok error')
+ .addClass(confirmClass);
+ }
+ }
+ };
+
+ // Check the password strength.
+ const passwordCheck = () => {
+ if (settings.password.showStrengthIndicator) {
+ // Evaluate the password strength.
+ const result = Drupal.evaluatePasswordStrength(
+ $passwordInput.val(),
+ settings.password,
+ );
+ const $newSuggestions = $(
+ Drupal.theme.passwordSuggestionsTips(
+ translate.hasWeaknesses,
+ result.tips,
+ ),
+ );
+
+ // Update the suggestions for how to improve the password.
+ if ($newSuggestions.html() !== $passwordSuggestionsTips.html()) {
+ $passwordSuggestionsTips.replaceWith($newSuggestions);
+ $passwordSuggestionsTips = $newSuggestions;
+
+ // Only show the description box if a weakness exists in the
+ // password.
+ $passwordSuggestionsTips.toggle(result.strength !== 100);
+ }
+
+ // Adjust the length of the strength indicator.
+ $passwordInputStrengthBar
+ .css('width', `${result.strength}%`)
+ .removeClass('is-weak is-fair is-good is-strong')
+ .addClass(result.indicatorClass);
+
+ // Update the strength indication text if needed.
+ if (
+ !$passwordInputStrengthMessageWrapper.hasClass(
+ result.indicatorClass,
+ ) ||
+ !$passwordInputStrengthMessageWrapper.html() ===
+ result.indicatorText
+ ) {
+ $passwordInputStrengthMessageWrapper
+ .html(result.indicatorText)
+ .removeClass('is-weak is-fair is-good is-strong')
+ .addClass(result.indicatorClass);
+ }
+ }
+
+ $passwordWidget
+ .removeClass('is-initial')
+ .removeClass('is-password-empty is-password-filled')
+ .removeClass('is-confirm-empty is-confirm-filled');
+
+ // Check the value of the password input and add the proper classes.
+ $passwordWidget.addClass(
+ $passwordInput.val() ? 'is-password-filled' : 'is-password-empty',
+ );
+
+ // Check the value in the confirm input and show results.
+ passwordCheckMatch($passwordConfirmInput.val());
+ $passwordWidget.addClass(
+ $passwordConfirmInput.val()
+ ? 'is-confirm-filled'
+ : 'is-confirm-empty',
+ );
+ };
+
+ // Add initial classes.
+ $passwordWidget
+ .addClass(
+ $passwordInput.val() ? 'is-password-filled' : 'is-password-empty',
+ )
+ .addClass(
+ $passwordConfirmInput.val()
+ ? 'is-confirm-filled'
+ : 'is-confirm-empty',
+ );
+
+ // Monitor input events.
+ $passwordInput.on('input', passwordCheck);
+ $passwordConfirmInput.on('input', passwordCheck);
+ }
+ },
+ };
+
+ /**
+ * Override the default Drupal.evaluatePasswordStrength.
+ *
+ * The default implementation of this function hard codes some markup inside
+ * this function. Rendering markup is now handled by
+ * Drupal.behaviors.password.
+ *
+ * @param {string} password
+ * Password to evaluate the strength.
+ *
+ * @param {Array.<string>} translate
+ * Settings and translated messages added by user_form_process_password_confirm().
+ *
+ * @return {Array.<string>}
+ * Array containing the strength, tips, indicators text and class.
+ */
+ Drupal.evaluatePasswordStrength = (password, translate) => {
+ password = password.trim();
+ let indicatorText;
+ let indicatorClass;
+ let weaknesses = 0;
+ let strength = 100;
+ const tips = [];
+ const hasLowercase = /[a-z]/.test(password);
+ const hasUppercase = /[A-Z]/.test(password);
+ const hasNumbers = /[0-9]/.test(password);
+ const hasPunctuation = /[^a-zA-Z0-9]/.test(password);
+
+ // If there is a username edit box on the page, compare password to that,
+ // otherwise use value from the database.
+ const $usernameBox = $('input.username');
+ const username =
+ $usernameBox.length > 0 ? $usernameBox.val() : translate.username;
+
+ // Lose 5 points for every character less than 12, plus a 30 point penalty.
+ if (password.length < 12) {
+ tips.push(translate.tooShort);
+ strength -= (12 - password.length) * 5 + 30;
+ }
+
+ // Count weaknesses.
+ if (!hasLowercase) {
+ tips.push(translate.addLowerCase);
+ weaknesses += 1;
+ }
+ if (!hasUppercase) {
+ tips.push(translate.addUpperCase);
+ weaknesses += 1;
+ }
+ if (!hasNumbers) {
+ tips.push(translate.addNumbers);
+ weaknesses += 1;
+ }
+ if (!hasPunctuation) {
+ tips.push(translate.addPunctuation);
+ weaknesses += 1;
+ }
+
+ // Apply penalty for each weakness (balanced against length penalty).
+ switch (weaknesses) {
+ case 1:
+ strength -= 12.5;
+ break;
+
+ case 2:
+ strength -= 25;
+ break;
+
+ case 3:
+ strength -= 40;
+ break;
+
+ case 4:
+ strength -= 40;
+ break;
+
+ default:
+ // Default: 0. Nothing to do.
+ break;
+ }
+
+ // Check if password is the same as the username.
+ if (password !== '' && password.toLowerCase() === username.toLowerCase()) {
+ tips.push(translate.sameAsUsername);
+ // Passwords the same as username are always very weak.
+ strength = 5;
+ }
+
+ // Based on the strength, work out what text should be shown by the
+ // password strength meter.
+ if (strength < 60) {
+ indicatorText = translate.weak;
+ indicatorClass = 'is-weak';
+ } else if (strength < 70) {
+ indicatorText = translate.fair;
+ indicatorClass = 'is-fair';
+ } else if (strength < 80) {
+ indicatorText = translate.good;
+ indicatorClass = 'is-good';
+ } else if (strength <= 100) {
+ indicatorText = translate.strong;
+ indicatorClass = 'is-strong';
+ }
+
+ return {
+ strength,
+ tips,
+ indicatorText,
+ indicatorClass,
+ };
+ };
+
+ /**
+ * Password strenght feedback for password confirm's main input.
+ *
+ * @param {string} message
+ * The prefix text for the strength feedback word.
+ *
+ * @return {string}
+ * The string representing the DOM fragment.
+ */
+ Drupal.theme.passwordInputHelp = message =>
+ `<div class="password-strength">
+ <div class="password-strength__track">
+ <div class="password-strength__bar js-password-strength-bar"></div>
+ </div>
+ <div aria-live="polite" aria-atomic="true" class="password-strength__title">
+ ${message} <span class="password-strength__text js-password-strength-text"></span>
+ </div>
+ </div>`;
+
+ /**
+ * Password match feedback for password confirm input.
+ *
+ * @param {string} message
+ * The message that precedes the yes|no text.
+ *
+ * @return {string}
+ * A string representing the DOM fragment.
+ */
+ Drupal.theme.passwordConfirmHelp = message =>
+ `<div aria-live="polite" aria-atomic="true" class="password-match-message">${message} <span class="password-match-message__text js-password-match-text"></span></div>`;
+
+ /**
+ * Password suggestions tips.
+ *
+ * @param {string} title
+ * The title that precedes tips.
+ * @param {Array.<string>} tips
+ * Array containing the tips.
+ *
+ * @return {string}
+ * A string representing the DOM fragment.
+ */
+ Drupal.theme.passwordSuggestionsTips = (title, tips) =>
+ `<div class="password-suggestions">${
+ tips.length
+ ? `${title}<ul class="password-suggestions__tips"><li class="password-suggestions__tip">${tips.join(
+ '</li><li class="password-suggestions__tip">',
+ )}</li></ul>`
+ : ''
+ }</div>`;
+})(jQuery, Drupal);
diff --git a/core/themes/claro/js/user.js b/core/themes/claro/js/user.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6b4e1f290f369c4c91c99a38d1b1ab2980e94e7
--- /dev/null
+++ b/core/themes/claro/js/user.js
@@ -0,0 +1,181 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+ Drupal.behaviors.password = {
+ attach: function attach(context, settings) {
+ var $passwordInput = $(context).find('input.js-password-field').once('password');
+
+ if ($passwordInput.length) {
+ var translate = settings.password;
+
+ var $passwordInputParent = $passwordInput.parent();
+
+ var $passwordWidget = $passwordInput.closest('.js-form-type-password-confirm');
+
+ var $passwordConfirmInput = $passwordWidget.find('input.js-password-confirm');
+
+ var $passwordInputHelp = $(Drupal.theme.passwordInputHelp(translate.strengthTitle));
+
+ var $passwordConfirmHelp = $(Drupal.theme.passwordConfirmHelp(translate.confirmTitle));
+
+ var $passwordInputStrengthBar = $passwordInputHelp.find('.js-password-strength-bar');
+ var $passwordInputStrengthMessageWrapper = $passwordInputHelp.find('.js-password-strength-text');
+ var $passwordConfirmMatch = $passwordConfirmHelp.find('.js-password-match-text');
+ var $passwordSuggestionsTips = $(Drupal.theme.passwordSuggestionsTips('', '')).hide();
+
+ if (settings.password.showStrengthIndicator) {
+ $passwordConfirmInput.after($passwordConfirmHelp).parent().after($passwordSuggestionsTips);
+
+ $passwordInputParent.append($passwordInputHelp);
+ }
+
+ var passwordCheckMatch = function passwordCheckMatch(confirmInputVal) {
+ if (confirmInputVal) {
+ var success = $passwordInput.val() === confirmInputVal;
+ var confirmClass = success ? 'ok' : 'error';
+ var confirmMatchMessage = success ? translate.confirmSuccess : translate.confirmFailure;
+
+ if (!$passwordConfirmMatch.hasClass(confirmClass) || !$passwordConfirmMatch.html() === confirmMatchMessage) {
+ $passwordConfirmMatch.html(confirmMatchMessage).removeClass('ok error').addClass(confirmClass);
+ }
+ }
+ };
+
+ var passwordCheck = function passwordCheck() {
+ if (settings.password.showStrengthIndicator) {
+ var result = Drupal.evaluatePasswordStrength($passwordInput.val(), settings.password);
+ var $newSuggestions = $(Drupal.theme.passwordSuggestionsTips(translate.hasWeaknesses, result.tips));
+
+ if ($newSuggestions.html() !== $passwordSuggestionsTips.html()) {
+ $passwordSuggestionsTips.replaceWith($newSuggestions);
+ $passwordSuggestionsTips = $newSuggestions;
+
+ $passwordSuggestionsTips.toggle(result.strength !== 100);
+ }
+
+ $passwordInputStrengthBar.css('width', result.strength + '%').removeClass('is-weak is-fair is-good is-strong').addClass(result.indicatorClass);
+
+ if (!$passwordInputStrengthMessageWrapper.hasClass(result.indicatorClass) || !$passwordInputStrengthMessageWrapper.html() === result.indicatorText) {
+ $passwordInputStrengthMessageWrapper.html(result.indicatorText).removeClass('is-weak is-fair is-good is-strong').addClass(result.indicatorClass);
+ }
+ }
+
+ $passwordWidget.removeClass('is-initial').removeClass('is-password-empty is-password-filled').removeClass('is-confirm-empty is-confirm-filled');
+
+ $passwordWidget.addClass($passwordInput.val() ? 'is-password-filled' : 'is-password-empty');
+
+ passwordCheckMatch($passwordConfirmInput.val());
+ $passwordWidget.addClass($passwordConfirmInput.val() ? 'is-confirm-filled' : 'is-confirm-empty');
+ };
+
+ $passwordWidget.addClass($passwordInput.val() ? 'is-password-filled' : 'is-password-empty').addClass($passwordConfirmInput.val() ? 'is-confirm-filled' : 'is-confirm-empty');
+
+ $passwordInput.on('input', passwordCheck);
+ $passwordConfirmInput.on('input', passwordCheck);
+ }
+ }
+ };
+
+ Drupal.evaluatePasswordStrength = function (password, translate) {
+ password = password.trim();
+ var indicatorText = void 0;
+ var indicatorClass = void 0;
+ var weaknesses = 0;
+ var strength = 100;
+ var tips = [];
+ var hasLowercase = /[a-z]/.test(password);
+ var hasUppercase = /[A-Z]/.test(password);
+ var hasNumbers = /[0-9]/.test(password);
+ var hasPunctuation = /[^a-zA-Z0-9]/.test(password);
+
+ var $usernameBox = $('input.username');
+ var username = $usernameBox.length > 0 ? $usernameBox.val() : translate.username;
+
+ if (password.length < 12) {
+ tips.push(translate.tooShort);
+ strength -= (12 - password.length) * 5 + 30;
+ }
+
+ if (!hasLowercase) {
+ tips.push(translate.addLowerCase);
+ weaknesses += 1;
+ }
+ if (!hasUppercase) {
+ tips.push(translate.addUpperCase);
+ weaknesses += 1;
+ }
+ if (!hasNumbers) {
+ tips.push(translate.addNumbers);
+ weaknesses += 1;
+ }
+ if (!hasPunctuation) {
+ tips.push(translate.addPunctuation);
+ weaknesses += 1;
+ }
+
+ switch (weaknesses) {
+ case 1:
+ strength -= 12.5;
+ break;
+
+ case 2:
+ strength -= 25;
+ break;
+
+ case 3:
+ strength -= 40;
+ break;
+
+ case 4:
+ strength -= 40;
+ break;
+
+ default:
+ break;
+ }
+
+ if (password !== '' && password.toLowerCase() === username.toLowerCase()) {
+ tips.push(translate.sameAsUsername);
+
+ strength = 5;
+ }
+
+ if (strength < 60) {
+ indicatorText = translate.weak;
+ indicatorClass = 'is-weak';
+ } else if (strength < 70) {
+ indicatorText = translate.fair;
+ indicatorClass = 'is-fair';
+ } else if (strength < 80) {
+ indicatorText = translate.good;
+ indicatorClass = 'is-good';
+ } else if (strength <= 100) {
+ indicatorText = translate.strong;
+ indicatorClass = 'is-strong';
+ }
+
+ return {
+ strength: strength,
+ tips: tips,
+ indicatorText: indicatorText,
+ indicatorClass: indicatorClass
+ };
+ };
+
+ Drupal.theme.passwordInputHelp = function (message) {
+ return '<div class="password-strength">\n <div class="password-strength__track">\n <div class="password-strength__bar js-password-strength-bar"></div>\n </div>\n <div aria-live="polite" aria-atomic="true" class="password-strength__title">\n ' + message + ' <span class="password-strength__text js-password-strength-text"></span>\n </div>\n </div>';
+ };
+
+ Drupal.theme.passwordConfirmHelp = function (message) {
+ return '<div aria-live="polite" aria-atomic="true" class="password-match-message">' + message + ' <span class="password-match-message__text js-password-match-text"></span></div>';
+ };
+
+ Drupal.theme.passwordSuggestionsTips = function (title, tips) {
+ return '<div class="password-suggestions">' + (tips.length ? title + '<ul class="password-suggestions__tips"><li class="password-suggestions__tip">' + tips.join('</li><li class="password-suggestions__tip">') + '</li></ul>' : '') + '</div>';
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/vertical-tabs.es6.js b/core/themes/claro/js/vertical-tabs.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..7547917152c403fa91bd5d663ba588e14bbf460a
--- /dev/null
+++ b/core/themes/claro/js/vertical-tabs.es6.js
@@ -0,0 +1,470 @@
+/**
+ * @file
+ * Defines vertical tabs functionality.
+ *
+ * This file replaces core/misc/vertical-tabs.js to fix some bugs in the
+ * original implementation, as well as makes minor changes to enable Claro
+ * designs:
+ * 1. Replaces hard-coded markup and adds 'js-' prefixed CSS classes for the
+ * JavaScript functionality (https://www.drupal.org/node/3081489).
+ * - The original Drupal.behavior and Drupal.verticalTab object hard-code
+ * markup of the tab list and (the outermost) wrapper of the vertical tabs
+ * component.
+ * - The original Drupal.verticalTab object is built on the same (unprefixed)
+ * CSS classes that should be used only for theming the component:
+ * - .vertical-tabs__pane - replaced by .js-vertical-tabs-pane;
+ * - .vertical-tabs__menu-item - replaced by .js-vertical-tabs-menu-item;
+ * - .vertical-tab--hidden - replaced by .js-vertical-tab-hidden.
+ * 2. Fixes accessibility bugs (https://www.drupal.org/node/3081500):
+ * - The original Drupal.verticalTab object doesn't take care of the right
+ * aria attributes. Every details summary element is described with
+ * aria-expanded="false" and aria-pressed="false".
+ * - The original Drupal.verticalTab object uses a non-unique CSS id
+ * '#active-vertical-tab' for the marker of the active menu tab. This leads
+ * to broken behavior on filter format and editor configuration form where
+ * multiple vertical tabs may appear
+ * (/admin/config/content/formats/manage/basic_html).
+ * - Auto-focus bug: if the vertical tab is activated by pressing enter on
+ * the vertical tab menu link, the original Drupal.verticalTab object tries
+ * to focus the first visible :input element in a vertical tab content. The
+ * implementation doesn't work in all scenarios. For example, on the
+ * 'Filter format and editor' form
+ * (/admin/config/content/formats/manage/basic_html), if the user presses
+ * the enter key on the last vertical tabs element's menu link ('Filter
+ * settings'), the focused element will be the first vertical tabs
+ * ('CKEditor plugin settings') active input, and not the expected one.
+ * 3. Consistency between browsers (https://www.drupal.org/node/3081508):
+ * We have to display the setting summary on the 'accordion look' as well.
+ * Using the original file, these are displayed only on browsers without
+ * HTML5 details support, where core's built-in core/misc/collapse.js HTML5
+ * details polyfill is in action.
+ * 4. Help fulfill our custom needs (https://www.drupal.org/node/3081519):
+ * The original behavior applies its features only when the actual screen
+ * width is bigger than 640 pixels (or the value of the
+ * drupalSettings.widthBreakpoint). But we want to switch between the
+ * 'accordion look' and 'tab look' dynamically, right after the browser
+ * viewport was resized, and not only on page load.
+ * This would be possible even by defining drupalSettings.widthBreakpoint
+ * with '0' value. But since the name of this configuration does not suggest
+ * that it is (and will be) used only by vertical tabs, it is much cleaner
+ * to remove the unneeded condition from the functionality.
+ */
+
+/**
+ * Triggers when form values inside a vertical tab changes.
+ *
+ * This is used to update the summary in vertical tabs in order to know what
+ * are the important fields' values.
+ *
+ * @event summaryUpdated
+ */
+
+(($, Drupal) => {
+ /**
+ * Show the parent vertical tab pane of a targeted page fragment.
+ *
+ * In order to make sure a targeted element inside a vertical tab pane is
+ * visible on a hash change or fragment link click, show all parent panes.
+ *
+ * @param {jQuery.Event} e
+ * The event triggered.
+ * @param {jQuery} $target
+ * The targeted node as a jQuery object.
+ */
+ const handleFragmentLinkClickOrHashChange = (e, $target) => {
+ $target.parents('.js-vertical-tabs-pane').each((index, pane) => {
+ $(pane)
+ .data('verticalTab')
+ .focus();
+ });
+ };
+
+ /**
+ * This script transforms a set of details into a stack of vertical tabs.
+ *
+ * Each tab may have a summary which can be updated by another
+ * script. For that to work, each details element has an associated
+ * 'verticalTabCallback' (with jQuery.data() attached to the details),
+ * which is called every time the user performs an update to a form
+ * element inside the tab pane.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches behaviors for vertical tabs.
+ */
+ Drupal.behaviors.claroVerticalTabs = {
+ attach(context) {
+ /**
+ * Binds a listener to handle fragment link clicks and URL hash changes.
+ */
+ $('body')
+ .once('vertical-tabs-fragments')
+ .on(
+ 'formFragmentLinkClickOrHashChange.verticalTabs',
+ handleFragmentLinkClickOrHashChange,
+ );
+
+ $(context)
+ .find('[data-vertical-tabs-panes]')
+ .once('vertical-tabs')
+ .each(function initializeVerticalTabs() {
+ const $this = $(this).addClass('vertical-tabs__items--processed');
+ const focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
+ let tabFocus;
+
+ // Check if there are some details that can be converted to
+ // vertical-tabs.
+ const $details = $this.find('> details');
+ if ($details.length === 0) {
+ return;
+ }
+
+ // Create the tab column.
+ const tabList = $(Drupal.theme.verticalTabListWrapper());
+ $this
+ .wrap(
+ $(Drupal.theme.verticalTabsWrapper()).addClass(
+ 'js-vertical-tabs',
+ ),
+ )
+ .before(tabList);
+
+ // Transform each details into a tab.
+ $details.each(function initializeVerticalTabItems() {
+ const $that = $(this);
+ /* eslint-disable new-cap */
+ const verticalTab = new Drupal.verticalTab({
+ title: $that.find('> summary').text(),
+ details: $that,
+ });
+ /* eslint-enable new-cap */
+ tabList.append(verticalTab.item);
+ $that
+ // prop() can't be used on browsers not supporting details
+ // element, the style won't apply to them if prop() is used.
+ .removeAttr('open')
+ .addClass('js-vertical-tabs-pane')
+ .data('verticalTab', verticalTab);
+ if (this.id === focusID) {
+ tabFocus = $that;
+ }
+ });
+
+ if (!tabFocus) {
+ // If the current URL has a fragment and one of the tabs contains an
+ // element that matches the URL fragment, activate that tab.
+ const $locationHash = $this.find(window.location.hash);
+ if (window.location.hash && $locationHash.length) {
+ tabFocus = $locationHash.is('.js-vertical-tabs-pane')
+ ? $locationHash
+ : $locationHash.closest('.js-vertical-tabs-pane');
+ } else {
+ tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
+ }
+ }
+ if (tabFocus.length) {
+ tabFocus.data('verticalTab').focus(false);
+ }
+ });
+ },
+ };
+
+ /**
+ * The vertical tab object represents a single tab within a tab group.
+ *
+ * @constructor
+ *
+ * @param {object} settings
+ * Settings object.
+ * @param {string} settings.title
+ * The name of the tab.
+ * @param {jQuery} settings.details
+ * The jQuery object of the details element that is the tab pane.
+ *
+ * @fires event:summaryUpdated
+ *
+ * @listens event:summaryUpdated
+ */
+ Drupal.verticalTab = function verticalTab(settings) {
+ const self = this;
+ $.extend(this, settings, Drupal.theme('verticalTab', settings));
+
+ this.item.addClass('js-vertical-tabs-menu-item');
+
+ this.link.attr('href', `#${settings.details.attr('id')}`);
+
+ this.detailsSummaryDescription = $(
+ Drupal.theme.verticalTabDetailsDescription(),
+ ).appendTo(this.details.find('> summary'));
+
+ this.link.on('click', event => {
+ event.preventDefault();
+ self.focus();
+ });
+
+ this.details.on('toggle', event => {
+ // We will control this by summary clicks.
+ event.preventDefault();
+ });
+
+ // Open the tab for every browser, with or without details support.
+ this.details
+ .find('> summary')
+ .on('click', event => {
+ event.preventDefault();
+ self.details.attr('open', true);
+ if (self.details.hasClass('collapse-processed')) {
+ setTimeout(() => {
+ self.focus();
+ }, 10);
+ } else {
+ self.focus();
+ }
+ })
+ .on('keydown', event => {
+ if (event.keyCode === 13) {
+ // Set focus on the first input field of the current visible details/tab
+ // pane.
+ setTimeout(() => {
+ self.details
+ .find(':input:visible:enabled')
+ .eq(0)
+ .trigger('focus');
+ }, 10);
+ }
+ });
+
+ // Keyboard events added:
+ // Pressing the Enter key will open the tab pane.
+ this.link.on('keydown', event => {
+ if (event.keyCode === 13) {
+ event.preventDefault();
+ self.focus();
+ // Set focus on the first input field of the current visible details/tab
+ // pane.
+ self.details
+ .find(':input:visible:enabled')
+ .eq(0)
+ .trigger('focus');
+ }
+ });
+
+ this.details
+ .on('summaryUpdated', () => {
+ self.updateSummary();
+ })
+ .trigger('summaryUpdated');
+ };
+
+ Drupal.verticalTab.prototype = {
+ /**
+ * Displays the tab's content pane.
+ *
+ * @param {bool} triggerFocus
+ * Whether focus should be triggered for the summary element.
+ */
+ focus(triggerFocus = true) {
+ this.details
+ .siblings('.js-vertical-tabs-pane')
+ .each(function closeOtherTabs() {
+ const tab = $(this).data('verticalTab');
+ if (tab.details.attr('open')) {
+ tab.details
+ .removeAttr('open')
+ .find('> summary')
+ .attr({
+ 'aria-expanded': 'false',
+ 'aria-pressed': 'false',
+ });
+ tab.item.removeClass('is-selected');
+ }
+ })
+ .end()
+ .siblings(':hidden.vertical-tabs__active-tab')
+ .val(this.details.attr('id'));
+
+ this.details
+ .attr('open', true)
+ .find('> summary')
+ .attr({
+ 'aria-expanded': 'true',
+ 'aria-pressed': 'true',
+ })
+ .closest('.js-vertical-tabs')
+ .find('.js-vertical-tab-active')
+ .remove();
+
+ if (triggerFocus) {
+ const $summary = this.details.find('> summary');
+ if ($summary.is(':visible')) {
+ $summary.trigger('focus');
+ }
+ }
+ this.item.addClass('is-selected');
+ // Mark the active tab for screen readers.
+ this.title.after(
+ $(Drupal.theme.verticalTabActiveTabIndicator()).addClass(
+ 'js-vertical-tab-active',
+ ),
+ );
+ },
+
+ /**
+ * Updates the tab's summary.
+ */
+ updateSummary() {
+ const summary = this.details.drupalGetSummary();
+ this.detailsSummaryDescription.html(summary);
+ this.summary.html(summary);
+ },
+
+ /**
+ * Shows a vertical tab pane.
+ *
+ * @return {Drupal.verticalTab}
+ * The verticalTab instance.
+ */
+ tabShow() {
+ // Display the tab.
+ this.item.removeClass('vertical-tabs__menu-item--hidden').show();
+ // Show the vertical tabs.
+ this.item.closest('.js-form-type-vertical-tabs').show();
+ // Display the details element.
+ this.details
+ .removeClass('vertical-tab--hidden js-vertical-tab-hidden')
+ .show();
+ // Update first and last CSS classes for details.
+ this.details
+ .parent()
+ .children('.js-vertical-tabs-pane')
+ .removeClass('vertical-tabs__item--first vertical-tabs__item--last')
+ .filter(':visible')
+ .eq(0)
+ .addClass('vertical-tabs__item--first');
+ this.details
+ .parent()
+ .children('.js-vertical-tabs-pane')
+ .filter(':visible')
+ .eq(-1)
+ .addClass('vertical-tabs__item--last');
+ // Make tab active, but without triggering focus.
+ this.focus(false);
+ return this;
+ },
+
+ /**
+ * Hides a vertical tab pane.
+ *
+ * @return {Drupal.verticalTab}
+ * The verticalTab instance.
+ */
+ tabHide() {
+ // Hide this tab.
+ this.item.addClass('vertical-tabs__menu-item--hidden').hide();
+ // Hide the details element.
+ this.details
+ .addClass('vertical-tab--hidden js-vertical-tab-hidden')
+ .hide();
+ // Update first and last CSS classes for details.
+ this.details
+ .parent()
+ .children('.js-vertical-tabs-pane')
+ .removeClass('vertical-tabs__item--first vertical-tabs__item--last')
+ .filter(':visible')
+ .eq(0)
+ .addClass('vertical-tabs__item--first');
+ this.details
+ .parent()
+ .children('.js-vertical-tabs-pane')
+ .filter(':visible')
+ .eq(-1)
+ .addClass('vertical-tabs__item--last');
+ // Focus the first visible tab (if there is one).
+ const $firstTab = this.details
+ .siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)')
+ .eq(0);
+ if ($firstTab.length) {
+ $firstTab.data('verticalTab').focus(false);
+ }
+ // Hide the vertical tabs (if no tabs remain).
+ else {
+ this.item.closest('.js-form-type-vertical-tabs').hide();
+ }
+ return this;
+ },
+ };
+
+ /**
+ * Theme function for a vertical tab.
+ *
+ * @param {object} settings
+ * An object with the following keys:
+ * @param {string} settings.title
+ * The name of the tab.
+ *
+ * @return {object}
+ * This function has to return an object with at least these keys:
+ * - item: The root tab jQuery element
+ * - link: The anchor tag that acts as the clickable area of the tab
+ * (jQuery version)
+ * - summary: The jQuery element that contains the tab summary
+ */
+ Drupal.theme.verticalTab = settings => {
+ const tab = {};
+ tab.item = $(
+ '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
+ ).append(
+ (tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(
+ $('<span class="vertical-tabs__menu-link-content"></span>')
+ .append(
+ (tab.title = $(
+ '<strong class="vertical-tabs__menu-link-title"></strong>',
+ ).text(settings.title)),
+ )
+ .append(
+ (tab.summary = $(
+ '<span class="vertical-tabs__menu-link-summary"></span>',
+ )),
+ ),
+ )),
+ );
+ return tab;
+ };
+
+ /**
+ * Wrapper of the menu and the panes.
+ *
+ * @return {string}
+ * A string representing the DOM fragment.
+ */
+ Drupal.theme.verticalTabsWrapper = () =>
+ '<div class="vertical-tabs clearfix"></div>';
+
+ /**
+ * The wrapper of the vertical tab menu items.
+ *
+ * @return {string}
+ * A string representing the DOM fragment.
+ */
+ Drupal.theme.verticalTabListWrapper = () =>
+ '<ul class="vertical-tabs__menu"></ul>';
+
+ /**
+ * The wrapper of the details summary message added to the summary element.
+ *
+ * @return {string}
+ * A string representing the DOM fragment.
+ */
+ Drupal.theme.verticalTabDetailsDescription = () =>
+ '<span class="vertical-tabs__details-summary-summary"></span>';
+
+ /**
+ * Themes the active vertical tab menu item message.
+ *
+ * @return {string}
+ * A string representing the DOM fragment.
+ */
+ Drupal.theme.verticalTabActiveTabIndicator = () =>
+ `<span class="visually-hidden">${Drupal.t('(active tab)')}</span>`;
+})(jQuery, Drupal);
diff --git a/core/themes/claro/js/vertical-tabs.js b/core/themes/claro/js/vertical-tabs.js
new file mode 100644
index 0000000000000000000000000000000000000000..32f6d827215a154e76d9fcd7f2e311d627deb7c9
--- /dev/null
+++ b/core/themes/claro/js/vertical-tabs.js
@@ -0,0 +1,200 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+ var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
+ $target.parents('.js-vertical-tabs-pane').each(function (index, pane) {
+ $(pane).data('verticalTab').focus();
+ });
+ };
+
+ Drupal.behaviors.claroVerticalTabs = {
+ attach: function attach(context) {
+ $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
+
+ $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function initializeVerticalTabs() {
+ var $this = $(this).addClass('vertical-tabs__items--processed');
+ var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
+ var tabFocus = void 0;
+
+ var $details = $this.find('> details');
+ if ($details.length === 0) {
+ return;
+ }
+
+ var tabList = $(Drupal.theme.verticalTabListWrapper());
+ $this.wrap($(Drupal.theme.verticalTabsWrapper()).addClass('js-vertical-tabs')).before(tabList);
+
+ $details.each(function initializeVerticalTabItems() {
+ var $that = $(this);
+
+ var verticalTab = new Drupal.verticalTab({
+ title: $that.find('> summary').text(),
+ details: $that
+ });
+
+ tabList.append(verticalTab.item);
+ $that.removeAttr('open').addClass('js-vertical-tabs-pane').data('verticalTab', verticalTab);
+ if (this.id === focusID) {
+ tabFocus = $that;
+ }
+ });
+
+ if (!tabFocus) {
+ var $locationHash = $this.find(window.location.hash);
+ if (window.location.hash && $locationHash.length) {
+ tabFocus = $locationHash.is('.js-vertical-tabs-pane') ? $locationHash : $locationHash.closest('.js-vertical-tabs-pane');
+ } else {
+ tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
+ }
+ }
+ if (tabFocus.length) {
+ tabFocus.data('verticalTab').focus(false);
+ }
+ });
+ }
+ };
+
+ Drupal.verticalTab = function verticalTab(settings) {
+ var self = this;
+ $.extend(this, settings, Drupal.theme('verticalTab', settings));
+
+ this.item.addClass('js-vertical-tabs-menu-item');
+
+ this.link.attr('href', '#' + settings.details.attr('id'));
+
+ this.detailsSummaryDescription = $(Drupal.theme.verticalTabDetailsDescription()).appendTo(this.details.find('> summary'));
+
+ this.link.on('click', function (event) {
+ event.preventDefault();
+ self.focus();
+ });
+
+ this.details.on('toggle', function (event) {
+ event.preventDefault();
+ });
+
+ this.details.find('> summary').on('click', function (event) {
+ event.preventDefault();
+ self.details.attr('open', true);
+ if (self.details.hasClass('collapse-processed')) {
+ setTimeout(function () {
+ self.focus();
+ }, 10);
+ } else {
+ self.focus();
+ }
+ }).on('keydown', function (event) {
+ if (event.keyCode === 13) {
+ setTimeout(function () {
+ self.details.find(':input:visible:enabled').eq(0).trigger('focus');
+ }, 10);
+ }
+ });
+
+ this.link.on('keydown', function (event) {
+ if (event.keyCode === 13) {
+ event.preventDefault();
+ self.focus();
+
+ self.details.find(':input:visible:enabled').eq(0).trigger('focus');
+ }
+ });
+
+ this.details.on('summaryUpdated', function () {
+ self.updateSummary();
+ }).trigger('summaryUpdated');
+ };
+
+ Drupal.verticalTab.prototype = {
+ focus: function focus() {
+ var triggerFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+ this.details.siblings('.js-vertical-tabs-pane').each(function closeOtherTabs() {
+ var tab = $(this).data('verticalTab');
+ if (tab.details.attr('open')) {
+ tab.details.removeAttr('open').find('> summary').attr({
+ 'aria-expanded': 'false',
+ 'aria-pressed': 'false'
+ });
+ tab.item.removeClass('is-selected');
+ }
+ }).end().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
+
+ this.details.attr('open', true).find('> summary').attr({
+ 'aria-expanded': 'true',
+ 'aria-pressed': 'true'
+ }).closest('.js-vertical-tabs').find('.js-vertical-tab-active').remove();
+
+ if (triggerFocus) {
+ var $summary = this.details.find('> summary');
+ if ($summary.is(':visible')) {
+ $summary.trigger('focus');
+ }
+ }
+ this.item.addClass('is-selected');
+
+ this.title.after($(Drupal.theme.verticalTabActiveTabIndicator()).addClass('js-vertical-tab-active'));
+ },
+ updateSummary: function updateSummary() {
+ var summary = this.details.drupalGetSummary();
+ this.detailsSummaryDescription.html(summary);
+ this.summary.html(summary);
+ },
+ tabShow: function tabShow() {
+ this.item.removeClass('vertical-tabs__menu-item--hidden').show();
+
+ this.item.closest('.js-form-type-vertical-tabs').show();
+
+ this.details.removeClass('vertical-tab--hidden js-vertical-tab-hidden').show();
+
+ this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
+ this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
+
+ this.focus(false);
+ return this;
+ },
+ tabHide: function tabHide() {
+ this.item.addClass('vertical-tabs__menu-item--hidden').hide();
+
+ this.details.addClass('vertical-tab--hidden js-vertical-tab-hidden').hide();
+
+ this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
+ this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
+
+ var $firstTab = this.details.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)').eq(0);
+ if ($firstTab.length) {
+ $firstTab.data('verticalTab').focus(false);
+ } else {
+ this.item.closest('.js-form-type-vertical-tabs').hide();
+ }
+ return this;
+ }
+ };
+
+ Drupal.theme.verticalTab = function (settings) {
+ var tab = {};
+ tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
+ return tab;
+ };
+
+ Drupal.theme.verticalTabsWrapper = function () {
+ return '<div class="vertical-tabs clearfix"></div>';
+ };
+
+ Drupal.theme.verticalTabListWrapper = function () {
+ return '<ul class="vertical-tabs__menu"></ul>';
+ };
+
+ Drupal.theme.verticalTabDetailsDescription = function () {
+ return '<span class="vertical-tabs__details-summary-summary"></span>';
+ };
+
+ Drupal.theme.verticalTabActiveTabIndicator = function () {
+ return '<span class="visually-hidden">' + Drupal.t('(active tab)') + '</span>';
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/logo.svg b/core/themes/claro/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7d7cf7c6b1f1653979084fbcb2c57f4d71fa4596
--- /dev/null
+++ b/core/themes/claro/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57" height="66" viewBox="471.5 467 57 66" enable-background="new 471.5 467 57 66"><path opacity=".2" fill="#303030" d="M528.5 504.965c0 16.634-13.123 27.615-28.24 27.615-10.29 0-19.894-5.523-24.978-14.167l.605-.027c1.313 1.192 3.39 2.58 7.404 2.515 4.77-.064 5.645-.875 9.855-2.756 22.716-10.17 26.925-19.457 27.736-21.59s2.013-5.587.756-9.415c-.242-.737-.42-1.333-.54-1.808-3.018-3.372-6.017-5.225-6.92-5.784-.14-.093-.29-.177-.43-.26l.44.26c2.01 1.247 14.314 8.782 14.314 25.417z"/><path fill="#fff" d="M509.09 518.507c1.006 0 2.077.065 2.83.568.756.503 1.193 1.63 1.445 2.263.25.634 0 1.006-.503 1.258-.438.25-.503.12-.94-.69-.44-.81-.82-1.63-3.01-1.63s-2.887.755-3.948 1.63c-1.062.876-1.443 1.193-1.825.69s-.253-1.006.437-1.63 1.825-1.63 2.888-2.077c1.06-.45 1.62-.383 2.625-.383zm-10.413 7.152c1.257 1.005 3.14 1.825 7.153 1.825 4.015 0 6.836-1.137 8.094-2.077.568-.438.82-.065.875.187.056.25.186.624-.252 1.07-.316.317-3.194 2.33-6.594 2.636-3.4.31-7.964.504-10.73-2.01-.438-.44-.316-1.07 0-1.323.317-.25.568-.438.94-.438.374.008.317.008.513.13z"/><path opacity=".2" fill="#aaa" d="M520.89 496.545c-.81 2.133-5.02 11.42-27.735 21.59-4.21 1.88-5.085 2.69-9.854 2.756-4.013.066-6.09-1.32-7.403-2.514l-.605.028h-.01c-2.393-4.042-3.78-8.783-3.78-13.952 0-7.852 2.97-13.654 6.287-17.687.11-.13.213-.26.325-.382 2.683-3.148 5.55-5.17 7.218-6.203.038-.028.075-.047.112-.065.42-.25.754-.447.987-.568 2.757-1.51 4.77-2.263 7.963-4.77.12-.092.242-.186.354-.288l.008-.01c.875-.754 1.64-1.76 2.18-3.4v-.008c.325-.97.567-2.16.716-3.65l.02.018c2.253 2.69 4.954 5.886 6.89 7.144.69.447 1.38.848 2.068 1.202l.3.15c2.243 1.126 4.507 1.945 6.807 3.333l.428.26c.903.56 3.902 2.412 6.92 5.784.12.475.298 1.07.54 1.807 1.274 3.837.073 7.292-.737 9.425z"/><path opacity=".5" fill="#333" d="M514.176 479.538c-3.26-2.077-6.464-2.887-9.603-4.955-1.938-1.267-4.64-4.47-6.893-7.162-.438 4.332-1.686 6.148-3.26 7.35-3.195 2.515-5.207 3.26-7.963 4.77-2.338 1.256-14.958 8.726-14.958 24.913 0 5.17 1.387 9.91 3.77 13.96 5.077 8.635 14.68 14.158 24.97 14.158 15.126 0 28.24-10.98 28.24-27.614 0-9.127-3.707-15.526-7.386-19.633-3.016-3.382-6.015-5.217-6.918-5.785zm7.627 7.34c4.117 5.15 6.213 11.23 6.213 18.077 0 3.968-.755 7.712-2.245 11.148-1.414 3.25-3.444 6.13-6.053 8.56-5.15 4.806-12.062 7.45-19.475 7.45-3.67 0-7.265-.698-10.692-2.086-3.372-1.36-6.398-3.297-9.016-5.774-5.532-5.225-8.57-12.257-8.57-19.8 0-6.716 2.18-12.695 6.483-17.753 3.288-3.865 6.836-6.007 8.196-6.743.67-.363 1.285-.69 1.89-.997 1.892-.97 3.68-1.89 6.14-3.818 1.312-.997 2.71-2.58 3.305-6.585 2.077 2.468 4.48 5.234 6.314 6.426 1.63 1.08 3.307 1.835 4.918 2.562 1.527.69 3.11 1.406 4.676 2.403l.056.037c4.62 2.84 7.06 5.896 7.86 6.892z"/><path opacity=".5" fill="#fff" d="M497.98 468.678c.874 2.58.753 3.893.753 4.452 0 .56-.307 2.077-1.313 2.832-.438.317-.568.568-.568.624 0 .25.568.438.568 1.006 0 .69-.317 2.077-3.642 5.393-3.325 3.316-8.103 6.278-11.8 8.103-3.698 1.826-5.468 1.686-5.97.81s.185-2.83 2.514-5.392l9.667-6.278 9.164-6.398.503-2.44"/><path fill="#fff" d="M497.98 468.613c-.57 4.145-1.826 5.393-3.512 6.715-2.83 2.133-5.588 3.446-6.212 3.763-1.63.82-7.535 4.08-10.608 8.784-.94 1.444 0 2.012.186 2.133.187.12 2.33.372 6.9-2.385 4.574-2.757 6.595-4.387 9.175-7.078 1.377-1.444 1.573-2.263 1.573-2.636 0-.438-.316-.624-.82-.754-.25-.065-.316-.187 0-.373.317-.186 1.622-.82 1.938-1.07.318-.25 1.827-1.257 1.882-2.887.065-1.63-.056-2.766-.503-4.21zm-14.112 45.628c.065-4.898 4.648-9.472 10.422-9.536 7.348-.065 12.424 7.283 16.13 7.208 3.14-.064 9.166-6.212 12.118-6.212 3.14 0 4.014 3.26 4.014 5.206 0 1.938-.623 5.458-2.133 7.656-1.51 2.198-2.44 3.008-4.2 2.888-2.264-.187-6.78-7.21-9.67-7.35-3.64-.12-11.547 7.6-17.75 7.6-3.763 0-4.9-.567-6.147-1.378-1.92-1.312-2.85-3.315-2.785-6.08z"/></svg>
diff --git a/core/themes/claro/screenshot.png b/core/themes/claro/screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0ca85323c7155d0c59fe907c8cc89bc7b5e3fc8
--- /dev/null
+++ b/core/themes/claro/screenshot.png
@@ -0,0 +1,234 @@
+‰PNG
+
+���
IHDR��X��Â���¼ 3��ÄIDATxì×±
1Aú/ òí³0r¢¢7Òô°ÚK o�HS}s ÇC3°ÆÜ-7„�8¹[»G†�ú:…€X5 !�™ !�Ô/„W! ”Ê€#àËÞ„0�Bø�8B�p„�àÀ>ëU}}Ø;àJž-ŒÏSñÙüÛ\Û¶mÛÞmÛ¶mÛÉmkg÷¾ï¦«fï{IuÿuR¿šêî9Ó}&˜/ßÌÜîñåwrx‰Lî?¶O8xf@¼g‚ â'臆…ûF0 ®õ(cT”_$Ñ×~æƒÈG”Uÿè ´s|oh Ü×?ŠQî=µ[#¦ˆfÂZ$‚ r„¸¾ÇÄ&ÕÕ·âŠßÞqå†Æv Œ]ØB™@òðí(°],øéÚ)ÞÛóè?ò‰ŠN¨ªndª ×ÖµÈʪ
+Ëû ¹´a> l ö^¾rÛÔÌvô‘ñl×à0#3ÿóϧãÔX< F75wŽUùSOòd1øn<
+ÕÕõ¤e”¡ÍÐTñAõ)‘rHAŽñžÞ>ŽãÓ…B!äåääLhIW÷ƒÖ¶ $DLOowÏÃŽÎ{È©³ë~wO Že»ZZ»Y®Ø>e æ–nôÀžîê†G…––ÈDZZ ñc"Y*,ªà¸“2 ô dˆÑ‘cº•˜”‘—_‚BOO C;$³¾¡-4,U(e[{/€ÏÃ(œ´±uFÿè{±E','ˆSCËÁƒ§¬mœ Á™Y©i9L€€¡™‡fGµwÜ㥗 ‚xm¼5!üË_>
+ŽÄõ='·ò““S'´zõ–ŸýâÃ;66uº{ø¯X¹iÛ¶ýË—¯×Ð0˜:uÁ‘#§¡%‚²íÛ,_¾áòå[pWL&”tHHDd‚™¹=³e0OOÿÖöÞ ®C„fÏ^ÚØÔÝRS×ã¸?a¬)“çåå•XZÙ/X°jåŠMGŽž–“Wç¸ÿ((jàp))EO¯€€€ðeËÖíÙs„ãþ‘‘‘$WÚ„l}|ƒ÷î=:þJ[;W/¯@Nôõ7d9œ6m᪕›]\|TÕt.\½fÍÖ´ôÜÀ ˆ±˜EF%ÚØ8kià1Ä_þúÅÇ ýÑ-)^²dÝÉ“9îφH^ò|!A9B˜›éÓçÍ·|ó–=ëÖmç8÷åäÕ¶ïØ]œ;w©™¹í˜l|›¼aÃŽÓg.‡†ÅrÜÏ’S²ÕæÎ]îââ‹£œœ<᜞âö gÞ>!æO Èn?Â~Mž<7+K°xñZ¨Q]}ú÷óôôG¡°°B[ÇR—‘YÀq¿Ò70õóE{uuÓÑ#gÌ-ì¼}‚Q‰MAª·o+$§d¡
+™ß±óÀ‚«}ýB“’3«kš×®ÝŠÓì¹Û¯¡¡÷ñÇߧ¤f—•ÕE†…ÇmÞ¼çÆ
é¦æ®•+7! ß‘RPPP‹ŽIFWqñi:ºFK–®ÉÉ)BÕÞÞÍÉÙó÷¿ý¼´¬zÏžGA’ä?øàkWoø›è˜$˜›ÔÔœ={ŽZ…ÂÛw䔕5á÷ï;†Gh.ÞÄu
+±tÉZ?ÿ°«WïìعÏÃÓ_Oß$,<–Ý|!Ä.„ÙÚ¹@`¶m;€ŽŽQ|B:²êìzÐÜÒ…–¢â*
M=yU¤÷ùçS3³òá_÷»ÏŠKª.^¼Žca
+wï:Œ›œ°zgÎ\Á-ÍŸqÿAÏ°’*ªÚ𸚠=ЉŒŒ’´Œ"»3|ùÊ c«½{_¹z§³më>G'QŒ”´"Äñp¢Ã#¬lÁo~óAzFþ·ßÌ*¯¨Ç·îƒ~,”ã_‰B‚ zF˜””Ë= §¡Œ»‚x0Æq04²DÕ×/ÄÎÎuÞÜíí÷vì<¤o`áA{Tt¢±±ÕÌ™KÂ#âUUuØ;,¯xk'ŒÇè £Àù˜£ K7yòœ‹—n^¿!ƒjAA™´´â¹s—á ÇüYŠ °…¢¢Ê={›X;:yÎœ±¸»û¡®žÉ®]Gðø{ñ ’fnaîÜuÜ…z]¹rçË/§UU7AìŸ8‡Óg‘vönK—®;xðÒ>uêÒ·ßͪªj¼}[îúu©¼üR¨ªênÚ¼ûôéKìNr~AYvN!
+Ø‹ws$L ‚ È⢢)”á"ÞÔÔ©¨¤^^Q5ÒÓ7½pñ:î4B´ y–Vx1Zg¦«k’›WŒ·i´µ.]¾‰w5Ù˜—~Y†½˜•UTÒÀÊ„„²rÊxG&&&ùÊ•[&¦6ð©•U
¸Mêáéû¥¡¡½x›TUU[¤ „;Ÿææ¶8¯ˆÈxG÷¢âJ-ô t󦬊Šv\|*{ÿåÚµ;ð‹x>êêæŸ×ÒÖcg窱¢¥£kìææƒT³³WÇb‚C¢ÜÜ} ½xЈLdåT*«EãªéÔÔ4#%u
=ä ;ËÎŽ B’ ÏŽŒ>ù !+£�aè x<4"D�dƒ (³½¸è#?Ö‚*ʯåãCت"~ô‘( 6» Ù�]±lÙ!|2pŸÃ|Úâ�ìE• …Æ¡Çì ,:G0Z‡Ù'.D=�Ä#‡ˆÇ°ÙØŠË$\ ‚ hf|ö¼·e¾[”ù¶€ß ø°71§ ¶, ÖÈ@y|,L<+ñ® ©|•?–µ‹÷Pxz ëPlÜ'#¾÷*HAŽ ‚ ÈA9B‚ ‚ GHAä ‚ ‚ !AA#$‚ r„ügæÄ omP~8~DV•Ä&‚@ÈB‡0aÊàfWM§Â
+HâΟÉ4ÅÆE#›YflÜTßØduݽ}ÈüÿÞÐRP/AäÙ*ð
˜K‹ía
‡ø„4,³ÐÚÖ }zC—WtË–ÀżթiÙÉ)™¥¥5ÐBT7mÚuôØ9Là‰�„½WšÇï˜QSÛ|ôØY,dˆ9¸‘ÿ;L£³Ä^ ‚ r„¸šcZjÈÖ<âľ :‰Yª‘ÊRAÌÖ}GJ‘ îüùë˜ÞSMM—U±ˆ.dø½ZÒV«8˜†Å2‡,a̾=æbÞÕ/Mjz>ÖÉz±ÿ ‚ ÈÂCYp¢¯þá÷ ð²ô{Qù¯(89{õ÷ÿÑù¿¹=ÁDý&ž›TüN¬—W�úÿñÇ™ òÖQÂ@0¦0£?ü0gíºmA¹ø’âÏ/ÇøêøTùFñªØYŒ;¯‰FnXæðÇ fÿýLK+GT¡ˆ0aX
«ø~õÕt,UÁ~ÁïÒÀ„ߥ‚-ª¥¬n((ª xNWJAŽð¿ìp Ƕ†7œÔs8®˜™efsb—¯®™™Y¶ÐÌÌÌÌPf1“™™/˜ô>Í‘&[Z™ Coššééé9=võ¯ÿ@ )
+OÅ"ÐÈÇ'Ä`°ÂÄG1z ¤ÔçkÓ¶ Åè==ƒ(Oˆ½ô¡`¡öË®”b·"Â-DWÔ¬v Bëù„G'û s7Â`°æí� ¤Èû£'…/Þ¸zíƒèc–”¿(¤'\òj: Î¥¨$‚¦&_éƃBCõK©e!'ÒYŸÄN^D‹®Å¡(MeÐ~“§Ìâ’ÑäR»
+*Æ°¥|®ò"NdXÓ¯TJŽôäûˆþtx]z}äØÙ™s–%$g)ë¨%J#|Õ“²¿ýññÇÃgX&¯\½ÃB,Ñ+7o=¤† (È-ªÔ
+mh¹zínzF ÅüfÏ^Diû¼üC¨«¡B‘ÞÂMIÍÆ퇷Kj ®_¿•’¹@,…àÅuùòMøS‹ ,-]À•+Öå ¦Ú;H@ÁŒÌ|äÈÑÓ‚4bëž)…¿zÍFª 2¹óW“’3xe¹„œ¥gäòRDKxº†÷1%5 5x5óå). :yýÆ=T¢ô<ÅéÉ«)…Ïãë7l›>}>E‰)S|íú= á¹rõ6ÓŒ g0|h0¼EÙz
+¢*w ?ËSYÙÔGÔ¿-ߟ+#¬Z½iÞ¼eÐÜýŽËÜKÌ¢I6ƒÐÈ,V®Ú@qDþæ ÖãK«rW¸ #oß™|ðÐÉÍ[÷€Ê¦ ;T¢D‰b„/¢ƒ))YàŸ_˜wÁ¾£,ß±I wµ²ìülƒ‚*_ºtƒõšœÖ;Ójú>bÜù ×% “Æ_àÜß¿¢Þ^½Ÿh),ä½Ù\ÚÛ{:9ù¸ºúËÝAQCŸ>+Œ‰*—TœŽÅÊ®;å·hÑJêåêžE´Ìô»ž�™•£KF›8i&ïݽ'Y.)R ;œ©ƒÿ¬°2÷í;t/5/ úð‘S¨!¥ðù¡‹‹_¹röœ ǘÔô—[=zDÊ·…Ý&$füòKCÓ¡>ûÔ¿�l)m˜&íýûÇQÁß´g³æí¨÷û,ä©Ô¨ÉSñ¤®^·ÿ4;w§ >zæÉ“B ¤Üå(@^†(Q¢D‰b„,‘«Vo4!ó…s“¦mi)åv‚!¥¦åîÚ¡ç±°Â~‚CªòL®Zµ¯Z´hïébkëNK·ný�QêÜfç 0Œ¾¾¡?üX?8¸¨³›{>Çа*œ7jÜ’u våäTÉÁÁÛhëQ©rm ïp`™1c'‰ÃrÎÜÅÀ*+þ¸qS¹
+ª€ñÖÉ9ÐÞÞ—Ë–-;zxÂeE
Á’ ׬T©–³‹oÕª_Iô)@€ÉhoìæÌY hA¸ ©ôýèÀ6CaÆœ3—ºõ~l×¾[`@%W?Z4hÌ ;~î«z?ã ´·÷2=Ë—¯agô÷
+‚.^²šnÖ6nqq#…1Ci¡íí·Œ?üP¿qãV_º9:z ‹=.(þÑ¿6jùÎ[ŽœÛØx¿õ–1<¼ç11ÄÔ>ﯤ³ç¯ <|ÉßwôБӻö¦íNÈ`Ö‡œ^³~û¡#§hßð8'GŸ+c %J”(QŒP nÈÑÚ’ý~Tôвr$þ) >„ÎHl‹]Û´érèð)L©{Ò1W
30*6˜.…erlÛ¶ &MlžãÆO Y÷i¤…éÁÛÚ·ïþ駴,Z¼êĉó§Ï\†Ã5AðiÆÌùŒ†ÍÐÙ9ÀË+Ø`x;*jæGpnì¸)š_3”ã€È8B`õ£ìê ÒÐd´Y³2†G
S+rìܹ7¦K,´ôäDCAÆÛ``¼qóó
+
«Æ¼Þ~Ç.=#Ÿ¯é”ÏÅ/~ð(²&¾Ì’¥k„òEG“ •fÍÚi¾Ïrqñ#O¾Dʺu[¬<4‡«
o|VÉ™< \‰#´•i2µ~ý¢
†7yi¥ÊuŽ =Sf2-´gdí#4fóÖ½™Ùû“³“³.^º)yŸ´ìMÌLÏ,HJÉ3~æòU›xJ‰%J#,o±‚k¬ÅcÇN¹wÿ‘y–u¨`‰ÇD \ÙÙÙ—þ fL:pœ68„$*j°„¬ænn@ Ø3»téfxxu77n¥¥çÐÈ {÷ ôöÛ¶´ìØ‘(£ÑsÔè‰2ÚôE@¸}Gçnn5k~{ùò-:@§pFFD´€–„¡Õyé‹ÐÝ=°B…šgÎ^A
FÉ?/7ïE¨!Ý°mÞ{ð¨o¿(ᦫ×lðž™ËHæÉÒeÅ@5”¢‚‚#_~éj4zTÌPX,ÆÑÑCäÙñ¦kš¤‹¡µz¯%_6œ›wÐÚÚ &ú¦ÁÒÌS�ÛóþPBÿ
›ví;pŒgõ B=Œˆà›wåå ‘ö2E‰%J#|4f,ÔŠßç}ûFóÖRŽ(=“$À‰¨‘0k²$Û °a Þ±#éãœK)Åjn “µ[:?ܾóPÏ
+hÚ´µ·iaÌ›7 ôèùþûFZ¶lÝÅ8øÏ€. gÎZ:Κ½H»ú¢_¿˜â ‰Û <x<cÆѼ†š�!x0Ò E·fÍÛëŠI^<_ #ðôéóFŒG,L×®½«Wÿ
+ŽH€P˜ñ¤É3u0ÃÌ+@> ‡"†èwí¹ff„Îâp%*§˜MÆ@“$M++Wl¼¢BÿZµ¾µ±á+½—“sày@ˆˆÎD-ß´¿ Iιðh.Y¾8Rå T¢D‰b„/ÙM†U[ cÔo ó3EAŽÄLBï0å!ÜMLÊ´°p“þø£À#!,µIÉY¶FO˜åwßýNÄ#ñŸ6_}õ+»0’[·ÿÖªugÖ}B Š{öŒ|ï=#-„ƒJx‹)#$åñ.'ÉåСcï–D®ÂØ–/_§5i
+„ÿRÎ.<¼&¡„Úãe�¡…… q°¨¤Çpž<uœ–žúÏÒÊÝÝ=@B`iòäYr ï L42ÂÁ�žf)}K£ª12¾äÝ/[¶–\Ú{÷‰äY"ttMí$öµnÝ ¬ùJ åä¾õ|¾Ûö])dMHò‰ÌeÉŠ
Úß(/ =U¢D‰5Z áéç ¼íÝ›&‹»D>y*FNù•áp’ùû‡ü‘}…
+µ X¸Y¬7mÞ)©÷]ºö†!±‚ #*6Uy Ôç…@XHgSFHÒ:ÖH’
+8ÿè# Š‚+<È[FŒ„ûØ+~ñ…“·w8>B]·!CF™!‘>ø85Œù§ PTô0Ú¡b:õ„«1…£ÇÎö #X«!Ñ’Ôÿ4c„ƒ
–vîJæÏ-œ§IoÌ—\I=ÂV7êšè@X§Î÷–{)êiþ{2A q òÒuwèÖ(Q¢D‰b„/â7nÜïر'Ä¿üúë_Ä¥ÇúËñÔ©‹·Æ#ø}úF‰!”HQ’º°[‚7tŽ‰ VBÚF³Ä ¸Ú˜a«N¯ÅÅG(A%�0 $&Ï0 ZÍÑÑG|„Øxñ_5J2-@J·ã'Î×û£Ñ½4#4ƒ º ùãtãqÚ›7oÐBãÌpô˜Itã ©”ªJ`ƒƒ6šuffj05ØgëÖ�>øçkò N a„ ¾Ø4ªÿ¹Ä (k7l—Ვ›2³öóoG°L^ÁÅ•(Q¢áKDLv,ýBàÞ}×X³æ7ãÇOÅ›5eêìï¿ÿÝð†-©~$ÀÑçÁß ƒ…âèòö®R¥ÞÚµ[rr’�D¹¸ø²Ê #»uc4Ý¿úª4ÚÚ¸k@˜S „½~ü±ýó€ !k:Á͹]jÖúvêÔ9³ç,þúë_45B8FFÆKý‡†
›zCnX‚YuÉ’Õä-HŒ¨„‹L}„¦I4©_¿1äŒ)0Q3xCÙL@ÒLM£`—ÀíW_ýÈ9ó…‡ñ"!ŽDJõŒØ¸á\“hÑ°aS6qÍÊÚÇ-þ6ཱུ’#:’æo® _�Ó¨–Žò高Fùhh›œš›‘µÅêÍ'N^À_¸qËnÒ*¶mOP›Ž*Q¢D1ÂWÝ_†ät¿â´÷Ï
þ>ÐŽV۶푙ž˜Ý4ÉÏB‹õp—§„ri›–„û%Ø’¸S $>E6T#…N€P‹Y}_‚eÄ4
+ò9¾HH'™ ƒ£ÖöŽÜúù—†cÇM›mäÀx"t´˜Dñº½ó–tûñÇ]»ö•ÿäa‰éâþkÕª“ì'Q'+Vn_©Nî’ûß Õ~ì#ûÉ¥¥çÉ7±°(¢¶qñÓMs¤¦Ñ¢Ñþþ2ýõ7¿J#öé'NB5Èß#4Z€P×Dg„5j|
+ÂM_ „"ÐÁ…KÖ&$eñ¬(‰™tÕÚsæ¯ Va¡%J#|¹È~`ìg†ý³vïCC«ØØxxBÎxlì6�Ó·8á(XH$'yë°%KK7ú³ƒÌöí úP¹¹Éü ¯úûï5ÂN{…i9õì…‘±jV�WØZEg„&Lcß'g¿ùó—ÑM6ù$O|Ø°±ßÿ6L’.°ynÙ²K’ÖápôHÛ°q;Y^^! AXqIÎ[¸h}œýæÍ_Æ8¢‚Î]»öÕPŽK—Zµž¯oXHH•ˆˆ–$5Θ1%‰~Ýúm‚I|
+ ¢¤Þƒñ =ªbDåÁ/¿t!ž–p ý+=wD¯X±Ê@RI“''#³@Rý˜WZZŽ©&:#Ä@ÍWrw&øö…Q£EÔ“Ý|Ø_”ÄGIô¼…žrοèH®¡²Ž*Q¢D1ÂW þ”@\\ì#sPÛŠS‚YIK1H„ž`gJjÎÙsWK ÿ§ô”4�ýA\éoÞb^êH+uû˜ m°@‰Š
æ'è…iq<úÚO6ì<“À›-^CÑS/œ$TÜ¢\Ò®¿Q–)“J‘¢‘Ksõ¤¡®Ý¸Gò 'ÌZWX SÏÇà]d2ñÒ
å#‹˜k"B‹“}•²PW¯ß-µ2qQR%*Q¢D1Â×x¥ÙÄ’µUòëÍ =é)¥8—F󶜛5>*«åÏžÒÂQƒœtüƒ²ýÍüË/]¾E;;}V’ÍkØÏL˜$I‡4}{kÍDNŠ¥ÌI €Ñbþ¬ˆ´“nO7i程ù÷eŠÆ,)dñj_錞¥†Õß®¢D‰%Š¾&"Š¼zÏÿTeÈO
+‚W5[bU"z4姲ugI±xsÅþíÓµž¯õ=ÿ A‰%J#Té$æ/Íqà±7&>¾¡8 7oÞ)Ïÿãn0%J”(QŒP ÖE0¹““³qL’ÚÏ%
+ÿ•½;°��†(ºÿº W(J(÷x;ÄwPAr¯’ï0Y@âë:€"�E�Š�!�(B�P„� @À¿!�(B�P„� @€"�E�Š�E¸š!�œ"œI �˜$›½z0`�� ØýmÛVœ»º1¿T*V�;Bø
+�B�B�B�B�B�B�B�B�B�B�B�B�B�B�B�B�B�B�B�B¸Ü®Áý:}»ÿï…í3Äe „‹Å~Y7?ã·<yÙH�„ð7Q™LµÖôf„z{6›/?Œk½=],þ-U§?ëf¯×v<]T¯W�!üÔ|¾fßÀÛºèùÌ߶mÛö?¶íiçalÛ¶mW±íä&mlß$×éÛéyÖgÎY3m÷Ygeï{«õí³o¥½§©D†ÁË:#ºJçYø¯ùÖrMR[òÂØÅöhŠxUS”šoí a‰2•ç¦t”+ 6Å7‰_e^½Õ×3x‰ãu‡;O‡ €Ý7å‰$}‰VWá{£tX/¾ªy¥þ$¦àýkµˆò¼ˆ~¬tø+¸f¡"übŒÎâ.q|Ó×K¿ê]x÷›ÿW£õwjÎ^¯Í•…ßÓKì[Åo½ÏwYÆÒL<ͼż[š=çzá?å* ãK}÷Zoaˆ
+¼øº¾x /Y¡ÜsUɹ{]ÉÃIqßÙàê.…!û§‰úP¬¥|¢L/ÞäØqÌŸ+r¯Žë°øÀÙàÆ}žó“cÚÌ…" äSuvñûöcL¡%npÒÕlj;ÜW ƬL0VßxÀ»b«CnÈÁÒK•¯=Nì9E]}W[
+î@9™e.>H<Vf–ouž¿RT˜þáõŸÆi È3ñtãÚ“d+3+¸^±ÅqêFb`:”©{²Ì–þu{<ÐAS¨ð'®…Wît?QfpSHÌ‘€€€à說ÒÜîHøB—¯Æó‡ñ:˜6¹JÿeŸj[ï6×xåqrÄB3úµ"™çt– ú‹êüÝXÛZû¼åV–ír—nuýq²áê“äÄ,è§Ý¼ u¨3ßþ¯êêÃxûzÇÐÐ ¿4ÏÜ©Ëÿ{žE¦Ï«Â—þ£ÚtÈäJ}NæVµ¦,B÷×ìöh åÕ{}o‡½¡*B Ïou_z”üÚ¿•g®÷¥‹Â¿f™ 3X3Ú è_:(/ùóTãÎÔÐÙ†•»<P«m¥ý\vþn|l›iæ'0+w¸ç®w=Td~1Ådó–!g¤Ï:ˆþhê Ãt?›fùéó÷&˜Ð/epþiõ–®±Ç³,ú…<©ÎKÁÿz“̬Uö
|‰ gt–ê´ƒ �šEôgn.þ2úzÃIϯ³=¿Å]¬Ýú<ˆá¨óàêWô‰,S‰4Óì”'¾;L‹3@óW(±J]úß3˜Ùq<pëqÌßG£ovWh ƒ5~¢€`ÿùÞ§B˜ …ÁíV*Zß?_® �ýweœÐ\¶Ù~ìr 0½±Ú{ÿ¡¥þEëì3W;‹ ¸L ýähôóƒµnªŠKªÂà9F˜‚BÃgõUÿ>Õ�v»¥2÷³QZ¤>ºÝ<w±qà צ=Î
»]Ñx
§rQ•ü[Íq"Ä¡xÄé<»h
ú3ßåÜyØCEj ×<p–úëDÝï&bæÚýÈÂMîÎLÂy:dñöÍn o;¸ù(æ
V?ü-þŒø{«Ð˜B°ãTpó1
+“£0¨ÝcÎ/üOƒ«‡SÌOFj3výn×Î0T´ñË1Z¨‘-òöy~9Z;i±µPâÈß #”¾;R-^Vêâè63¡ÝWY°Æž+ñèû=Vw ¶ž(Òè/Êh†[´Ñyø|ëuÎrµ.â8–aA`vµÄãÍvRÿâé 0ë]å:#¹¨*Œáæ6ï÷´or©M98½„^
�'¨Þ^ZO/ÜèÂ9wž nãŽuDãIYS¶ £6 òC`qþ·ÐM³Ÿø§Êä,bkDßì”kw:ow¥ºÕÆ¿¦ª4çT¡6ÍõÿwºáHë.ˆ§F¿«p*xY¬Šß ®¯2¹Kÿœ¦ç¤þCBèÊe{|ƒçšÐeà7á¾Ò3m¹ý?ó 6º¾‰'mxþ‡~¡X¹×÷«)&ô½®ZCp*ÀÌXiÿÿ˔М¹AÿÔì?üù$ãýîdƒkŽÑö÷™¦ùÝè/štëQ&†-²âëY¹Û{þf8nU Ôf]ºÓ‹¾/{$OÃV§6‹>Ós³3Õ²½?k¹p+Œ~¯Z³ßNyîv˜™KÌ— & €FýV!ÒæÃþŸL0î>I}}´†‹Ïº#lJM‡§H׼䅦'P‚% ä|TèÕLö|—<‘È4ÜT¥6 ÇëÝŠ„Þ’Ãíà«V"ˆ-1lÁ¼ê«²¬ˆÅò¸Þ’1,9¡éð–:eqÈ&½ò¬©JŸ–kRø±Ò\ž ôUq¾(]*soñ×3-p(ÚzU Œ«ñbÓâÈÛÜÅr•‡‘$0Ýî)>íŽ9½%¬y‰»Àq#€¡�z’Þ¬'.333S½XsÞÓWpPËòBž½üýékþ¥õ݇?âHã®Þ:8o“€Ó|³Ìxgÿóo®…›‹ÿ°çúÝï—._Zlš3šzæÀwFâAï«XÒ¶½%^9µboá^ºîô§–iûß,sÐ{Ú[7nÿþ«ž¼ú{j³íÉ–û‡ÚÞò©žÚ{€F¸ùZ
@#Ô û �!�h„� €F�!�h„� €F�!�h„� €F�!�h„� €FXu’–éa’¾uë6’$e]7jÊÛÔÔÖ4Â8™Ÿ¿²_¿ó_¿³]H W{YÖjJd5µ50MË8“ßö""QºUÕ¨)‘¨©ÕM„qû󙉢-_´jJÔÔVO„ŠVí
+jJDM™EL„Û¡ˆ¢US"&BE«¦DL„"ŠVM‰˜þJ³¸š/þü-\U²ŸáQ)Ef¨©X~¥WÄDX”]Quq{”è^ )£¶êª’ýœó¢K³æ_Rǃ¿ÿ¦ÛBÔ`¬âÃ]QÄDøŸ½s�’«{Úø|ß߶Ul'¯âdÞض6©Ø¶j&¶×¶wÖ¶m›±õÛ9U·¦ö-¥©³Õu«§oß³˜yÒýt÷9Á9!!-*:1&6)669!!½¡ñÑ“§¯Å
+M4ôWŒ8(®Ê-`ÜÔüôÌ™‹&&[KËjž>{Ó†nH‘ŒðakCINÉrpô03·
+Ž¬©mS†PÀ¥ È õ
ªª›ššŸ`i:C>ˆ|
+ĤH‘ŒÄ¶ =†ª ¾vî<X[×BaSdµ¯^¿çªüxDGŒÂÂyIKþ‹3a ¼|ùÚÿÿq»¼ü2aÁ‡»øH J1bF(áêækˆ©›v Œ@ŠÀ/t�4¸…ÒÜòôí»÷ŽNžŽÈÉ-FÇ¢Àçù‹w"CÅ“gùFbM ®èH‘"¡§MŸß³ç /ï@;{×Ù³[s {Î\åVRrVtLRJJ¶€î“g¯‰p ‰1±É©i9¬� ËÊky Îó Êp&òíp31ÙܽÇà¼üÒ×oÞ—WÔÇÆ¥´Þ-h‹ò£&ÅX!0¡¦òõ×cÿò—Žþþaéù[·îSvön¥eµ‘‘ ‚ 66=NLÊHIÍ&.WEF%�"ná°{Ï! qpt¯¨¬×£éa|BðÉÈÌüô5U$&fTT6À;y ߈Åŧ64>þ¸J,"EŠd„ÔÓ{õLâÉãaá± P«½üŽ =£¤´.\gY`¹qÓ.Ũ={…„ÔÁÑ}ËÖ=ݺ
FéСhgµÕ«7ü÷¿½ŠK«‹Š+¿ÿ~¦xäßÿéá Ú%P¥ #„«„ªkš;wéÛ«×â ®º¦‰øTYÕpõê ÞH
#"Ð÷ì9’š–;|øS žºk×ï¡ 6‚ëÙsW›ž¬[¿Eq°µu›—¯ÜF_¾b½0 ?¡Ý¸q§Ð5ÚËrHMÊG‹d„jõŒ®]ûCÚª«›nÞ4K·n›„£\º|³¤´FDDòM˜"ÊÞ}Guº°¹s— ‡‡Çyz tîÜÏÊÊñÚõ»è3g-ª{`²nsç.ò Ê÷í;Š‘NIZzÞ7_ 2d¥×ÇOŒð c)’Šp¸mû~–&OžsåÊí̬J,”RTªŸ®Y³‰"ç»Zígoè F{ñî]ËܼÒÍ›wa¼zíNIiõí;æè¶v.8¬5Ù„NÉÔÂÒeõê :µzúî=‡ÝÜýºw Ø®]šZ‰/) )’Nš4û—¿øÏüË ¢þñ.Ô3/]º¾yË® ¯Í™³ <¯ZµQ¥ú+EQ¾‘Ÿ_FSSÊùó×Ès›[ž¡îÕkPAAù†Û{ö J1Gžúïw=zìÌéÓçþûŸž8ÇŧÉf¡cíŠVŸ“³ç²e& :ô‘Bö‰“fõî=„¤sûŽ½?Rµ£XêÏ#G™DôÓ…2íÂwùhjj6ãÜëõtpç®/]1/$4ÚÚÆE§ ÅùàÁ“èÄZþ眹ó–uîܧ¼¼î±,ºH‘Œð#ᬿýÓž= ?sñÒ
ê9ü¤§Ïœ]ûö =wîêÍ[¦°½Ð°Ø Wþõ/ ß(((‡û¦Ö"^¿~F=ßzìØ)B²ÚÖ@ØkhzFÞõÔ zi4—4ÚK ÑYÛ8heuTŠ±ö©…’ÿÑ;çCNñãÆÍû�ä䩳,Eâ¨ËýÎ :t‚Â)ahXÌÁƒÇÉE± ‰"*Hd÷Åš5Ð >¥={ùî=+33[á½{Vƒ"õ-
zVv!ß}éR“víºWTÔÉ6¡”ɧN;dÈw<¥£h„€¢¨½Ü¿oýüÅ{Š¢ÍEBÚÅ‹7õ}‹«©©9ë×oE×ù‡2eƒÒ·ïpÿ€p[;Wtµz:Å™·ø-1oݺ-© ñï‚££û÷ø—Bn“’b|ŒPÐÁ윢V’7zŸy>ê‚ÞÑe`)¦ÏTªÿ :‹§—?ˆÝºeZ^Q—‘‘ß©S/J&Ķ7îã@ÌcMâ º—w�¨„V‚Äâ’jѤ Ò¤?~\ûÓ ÿ;+«LÑ5$
¨¨—PÊljd„ Ú÷T % Yuâküøé`•Ž…2ö¢/× $¶99{¡Ï›·T±ûø1Æ6}ú<t&eÒÒs÷ÛŽÊ]沄¨#îŸË—o© ¾fÎ\È45`_;w Àòõ7cŸyúü¹…ðéÖ¿˜…!à1 ªRýOŒ»qã¦*K-^²†-†WZ)#@ &n×÷#á ¿q㦡 2*Q&E2Âø™Ìf7=m³
+VÇ)cl0BtR]Œ Ž‡Da«õõ!‘ôùÁž«›“â:]õ ±“©u°;&©®þ!.;+üt!¾~Áééy¬/ÓU)FÜ# ïظT&\è „™Ä±\i€—'Ï>zò
+¤ ÙÙE~º`g/vDˆÇY'--744:3+ŸPÇ©A0H0Åî�Eu4""Žeq&²û¢®þ{“’3&Ù •"áG ±†€¢ â;Õe°Š‘— ÔÖÎ
`ÛÙ¹¾}‡ y§ 1¥lﺼÂ-9Ï&ň!ÎmŽX5�$rò”9z^÷{¢wÅI1@ ®†èx®?Ë£Ÿt/ �Å]Aû°‹Ž†!èÐ¥H‘Œð
+Ê:ؕ뢙¦f¶tŸáRBÕŠnh‘"ňÏåCÞæä3µÐO0}ÆÞAâˆpž?°w°r5a>±mÿ±“¿ŠÑ¨
j[A³
ʸ¶mÛ¶m_û®qØÎî$ÓiÏ^ß,Ÿ'ïÁxï~³–îÐ23:Q?å¹ßËñŒ0[ŠFíxÂåÃ/ˆg„íQ$í–ƒ( âaV¯5þ5ñŒ°�þb !ž"„iñB<#DÓâ)„xFˆ¦ÅSñŒ¡b5-žBˆ@Èm‰JÈ´v÷šO!<U/‚‰`(ua*v%Žݲ <…PAx*KÐ4 áÛxZ±"Þ³g/Ob–ã¸xŠ=û‚ð”‹���!�����€@��@ �� ����„���B��(�„ž'§Ø^¼4{c¨=@î=å):äÁNNëWöȾŀ@XÄwo×õ„ºÔPç1�®Û®pèyÝðä¸j¨nèJMÌq
+j‘ Bå¨Go¢çnÓévy¬¶É¬n4UMi`)•éÏñ<•ãÉ¡e©*RþÔÔ<¯Â˜¯·Ì9zCÝš°5gÉÛ;OÅyÚ´™g.§çjSUI€îò”(ªnjH©)d«ÌV<%£N<é.X÷éè…
+™¯äëÿ¯¢S×kæ-ÿH:ºsýcéÓû§gqÐsôrbŠÓ×kæ.{Ÿ´\åA½ Õ³ ½÷[² ðìí€a¼9~µYæµR¹ª>ÙoÚ£ £ ¼øò¿L*«µ™£;¶õ{½(Ûs¢ìô•J•´Þ¿Ê\µýóí§2¹ãØÏ#«ÄI}³Ùcàí“—*Ûùr–,€îò”e¹ƒf<î1òþCï÷}Áò·eU±öÜëgÔœ'k¶}lÅAþì-¿÷ sO˜ïKYtáÚ
MI¹ ÌØÊkµCåâǯ›—où”0]q^V]²öCU}ªÛû¿÷Ÿx?wZŸF#æǯ4ÆÛ£—›3–ê+¾g* ã²a\\½ã³rQYuüå›Æ× q3•Ì˜Ó°^¾mzù®Y®|æ‹÷ßì]T#[Ò®ÿ_w}þÆÝÝ}`|žŒ»»»»=ƒYvÜÝ}‡Ž"Iˆ qA’�Q’d«é7¬ Y—Üc·«ï[SßùJ.‡@ˆœÛKÃ*ƒ ƒG£-h´‡H¹Çê ã+¥1Ãò&.ê¡æTGEUTY)×Tjê)ýn”(¼( 6Id @βýrGyÄäAvç™"ƒ5ŽÔ*ª<UÑP8.×úPÚàC«PNé)±Q-ÊKlA‹#„’p´Aeð¡òRO4ÑÄø;b
+‰ðƒÌ¤åù4ûÒ}#@æÖÏ5Ô+{Y]NgRÿ}Úì É=Ê ‹µ>³œÇë5F¿Lá1Xƒ¤ß]MÂaHÂâ #èjã
_Ý0áYϲìP …VD .‹Åš™›Ò¬3$Å kY )3Ô%~” •â#byûçj€l–È] Œß{aȸñÂŽüg/)R’ߎԎ†aÊ+Szõæ�… ¨N¦ª´8ÂX^Rè|¡šx3¨:ÒÚÐDø¯éû=§U¨_} Ãþù YoÙöÂuû¥ÛŽÊ†ÎTâ(d‹ÜÐ/©€¶|4^×@¸¡Ï×’{¥<½%8t¾ˆ’$/—y£¹|7•DAflÇN+¡×Z¾U
+CˆŽ3pe6ŒâY\5Nª¡ °?üXP[û5ç©JüCŠ>† -˜ýç‰}Á82\ÿ9"xŸÀØ°_ª·×L\W}˜ð Æ–Sʧ”ð
z1'®“~�ú³ §BS…LZ[o±�²Nß6¡æ N)�>Ò“VB[ö±T%
+× ‘ÃX†s¡K %‰vcbüí˜ÂQ¯o5Œµá¤Šªµ@Wæ…{¤ Þ{m‡÷8Ð… Ý9GÏjQò$Ó£‰6ã �VÊõ’Šê8 â KQà«S—ô�Œ&p1 ¾¶6û§Öèï;WÔv"Ø å 9¯g W,óÂ÷Ydz˜Ïh¥H0 Z0àÌý)ê7 "*iüêz Œ"Þ Í…ÿc?L·£†wY$$?`âŠÌrTÒ#‰íØG/»}Ìo7‚„ÏkVÙ©«Fœà–ÏΨàg¬a‹ nðSV²:«_¼ˆ| FŒZŽr–Á´¹BfIk;“Ö–QAç?“ #qk´¾ÉûÏ=¨�PåA
+KZ1ÙC�LŽØ-’!Âs”BÖ5Ÿ'l“ÌÕXÂL×ûyYÂʹ ÞEJ2Y.žW¨ |qV…ë¹…^ºÀ¬s鶞S€²eJ’SÏ)ah áªý2ø=¯Àó8Û…Ëh\—Ý ë;¿tk,‚¿#…ÒÔk|KzTÆàÅû¦RoíñT%�C¤ô§³™™7žÛ0„ô _¨1StUDÚMáMX]ˆ)ÉQûšîÒªÒw”«Œ¡¤%âAŸò\Þؘ…¢6I\±Ò‡E$€Œë·µz®ÿÍ¥;£+ró…M ñ&ð™LQa߉\舑I I„É!4×ùŠáryãO(ášÁ»@˜<‡gtFÒ¹å/iNôÕÿO&.]UélaÄ•à ;”¢œºAÒÜk<w׈>,”Ui— Yh¿ºføe?ö¯>³!
+D™Û_7y™¸ÓdBm‹\BæsL±—Ú^é«Å5ëÊL¥ÑGYN®¸Bn¢‘HÌÆÒØ´Ub•‡†¥ ? ‹Š«°pò*ÇŽ žä–Fb
Xz…®$^º®AH¾Èq²ó½¨ðƃ’l^Bï‰Ö?u‘�‘k°…o¿°¢´VÛdmEÍ?h‰‘ B
+ŸFGô½†u'ìXµ ü§ßð"Çìµ?M{è¬'—î›låQhÁ>sYoQMmC#ú4†‡g®Ü‰7VøâS–‹çm*¨o*3öŸ-Ü}Lú„^Ž¨«*qÙ¯.¨0&µ–Gí”b§%ÈXðSúõ'f,XNX"ÚyDJA™ª6ÆÌà)ÓÖ`çöÕÍZ_Ðz4gî6Éôõ…П}ãž —AKúé›FÊŒs„óvÊšª@’.¾
+ñ™+p£ðàYý ñl™.� ÙÈÊT•ZsÒΓómÇ‹á-fÏ‚‹·
eÞX¢h“LQDØ~${ÚúÂ"™;æøÁXC7”cEôË š…Û%èüП…^—ÉtAG ÉÛsJŽÅI¯?Ž-ƒ«75 ±‰P©!q„“`”¼Ò…ƒ*ò™É‡6l„ ©³ž¸¨‡Ž ²òÁ#ë1›Ÿôó¡y£gKvK§Éÿé0öƒtG³ý¿¾a€vLÏ?ž¦BH¦s³ô9ëóço—N^$h=‰g-<ΰÃwhMíÆ| ©¶@é#1uFȳÎ^RANU Ž5Àpââ5ͧfÄ Õw¸ùÈHÍ‘ùzÂCkço*LGkã
%ˆðŸÝÛ79£0R—¼ÚèõÿyÄRt2g«ä#¸s6ÍÞTôÝÑÜ–‰ Žš_$öá‚*_ŒÃ/åûÚNâßKJªý1lj…Êõ{Š~–LøÂõå¼v쓧å™<˜+*'™æäñ<$Âe»¥IË ð ,Œ@[Æ–@¤!y‘pã~Éïÿ”žª˜D`T ùJŽJž0*¶ –´˜@(M!¬¦>a”ëü5Ñ:hK?uÙ@ zLÌÚJ²©³"@KgRD˜M’DˆËOä`
+û³qÄüõâ@´A(%SÞ3—TÖc ,’W_'sÄìÃ)JÒŒDi41þ ˜ŠÇë;Œ`í:¥ gl–@†Öîð1ÒR‘Ê Þx\ùËÁ,lœ;*¢"…/‹[Öqñó Ä]«)|$BÜIÝ&Óª™üò`
u\ÖB1»"Š*wžD˜¤ $ž3wMÐ$§WÌ2tf“Õ Ž5Â@îŠí…öŠ˜ÖÂðTg QÆ`×¼Ä Ê}O³ ð}Í É†wÝxjqûâ|Yõ V<Y;y‹îò"ODªE;q~cå¾L21½¬BÎÆKjþpý{“ø˜ ÞKw Í ^9¦®»0ʺƄë
+Ôþ7Öf
+ÿ¹=ˆÄHÜÕ˜#0B7y S+Êùþì( tÐ3·Ñxc¬Ž¼ðš&ô\¼[‚l´ùlÜ<>NtÖ0^×D< d|“Éé5݉’óg#Á0øå&g
�íñܕ{¤ˆèÏ-qF’—çCÿ
]e¦Ý,i$¡"#è´ºù!ÎÞ3C Ε‡¦C©*2Ô^æ:p²ÿsÅñ45 "xÒ*\Ös†¸÷ÜŒÁåêÃ
+´äÌ
}‘–üŠÇ™ ¢^b¡ WîNÕâÛP¤þÊ}#š×þA¿9"Txù†Fm C î/•î›�øi‰ŠMbü혢F¬¶ 9z±}^¼x ÙEÛ÷•
+ûƒæ
+‡M#.Ü6 .àÿh…ÚÀ¬ ÅCç
+ñuçi‚©+ÄGZ²)C$¾;Y‡¿Ràö‰+òÃQê,¬ÊZ¡=çÚ#Ó¶SJ„˜Dí;z^~ŽWadZ?º÷Ðé<aquZs¿¼ Ýœ4^€¤Km'ƒÑ1¼¥»$dѲ gÇ 9F±]?æ·™@\ºS2hŽpÕžÄâ—!T‡Í¹½ƒ9€ª:OÌ“ª«÷¦éPNöS‹8MDˆÅC§d.om»1ØVdaƒÿ»£ó [kÞy퀷Ùo¬eH”UÿT"LŒ¦=p^còüeÄÖ7û-;g™Þ:…áÌfCk¸/33333333óuØéÔ%Çe
+\O˜”9ŽR'OŸ²‹ßûK•TINÎç#Êùìð/ßì®ó̺†¹¨÷_›HŠ'®TÍYn[²ÉõÃÊ_ KŸ¾®ò Iñëgw_Ô/\c_¸Æñäm#e³—IG/V\¾«í?¥4S—nûŽ]¬ä¿öÛ±_~ûµ™Ò4[ÜzÀ»ã 7.Œ-¨§ÎÜP§/³¯Ø.¿ý᧜T&wóIí¬¥ù=yßÄŸë›;´f›ëüu£Ár-²i|à´Bg~»È6OÆ¿r‹ËS¦Séã·
{Ét†_×’ØwY»zO{ù-@6›w¹¨ôÑÛÆ%›ÝsV9h׈æر½×”X 9Uºs¿gí6×Æ .Z]µS”o/ Øê^¿·äÎÓÚåŸá´¢†· *¶Ô¶ëD™V ‹&²{Ž+O_TSeò"[”L[,í>¡ð{Þ# òÑêmæ
+C&ï%¿aÉoö ö¦3FñÕ‡5‹×9è ´süråôÅÒªíòWg0gâ«+°v§<u‰íøU•_™V|á
{¼SI´kJwMóRMŸ¾¦.Xm×jÂÔìõǵK×Ú¾9Ï?6ï<à¡
+¯ÞÖ’—Õ#™X2»ï”òøY5#Å}jÝuªâ“Í¿ï\¥qFè '—WU-M:ßI\?àI g¹Ã븦xžk²> „au ¢.6 Rþ÷íö³zzÑüš $BG‹4Õ›´·c••¶×ëA$*Ûßú¯£¾n=RJ‚~ùý-] hý™Ê
8�g„<Ñ1üÒ&ñ¿pJm‘)ŒâÿâMçð:œ¢ sT žàòÉdDk,Ó–/ºÿ[ܾ9‡1S#…y"Oðÿ¥šYJ¨µÑ]Ç•1ó¤‰ m7 ×dÛJEw9�úLSÂö öIdMº |®®)QGˆ¢Í2 E ÈD´VHçK…~E5A!GÄcã}çðfùŸ"ÍG^Ü©Q”ï÷ÞˆE\£füX³Ë«øÂE*(¡Ýîû¤l¨æ5ÅÔ�ÀMY ‚!²SÄ‘# |�ÆDÈD Ô`exñ,3… yÀLç�C@e�Ž���€#���à���8B����Ž���€#d=ü Xë†Öq)ÑËv`ÊÀjMYª‘N¤1ôayºg®¬Ê<š‚#ìè;ãůŸº QfÚóY „¦‘ €1ð4¦w�Ž°csÑu½¥ÅßÝß›Çã ‡Ãí÷*+Õ¦¦fkìUUùÂáH»ÚN$’ä‚ tÍkF"QUÕ²Ù¬¹¯éX,îv{S©TX¬)zY444ñ
+ý3ꮼ¼27,P”ò––VÒ;½
¸Š;}|]ÿGõiæ ²óŠ
+5N[ú±Ó«¦²ÒGi8¡ô ô*<}ú_öîÂIŽäøø?jfû˜ïÄÌÌÌÌÌÇÌÌÌ|¢CS¼Oì×ÎkOköÍ~’%k:66zº««²’3«»rÄ 3'Mš=fÌ´÷ßÿ0ÅùzñæÍ[¶bÅzXرcï£>áÊOµ4mO¹} ` mu^w1ôªU,XÁÿÁ·ß~WK·è¦'žxºwSá¼}eÈO
çö(¦ð駟ÕÏA{Ή=!ÿþàƒ|óÍ·Îßyç½gžyÞ ÷eþüåTF·›`ÿèM¦Þ}÷}wï>°k×ÞñéZW*ô 5þ?øà£Û·ïuòøãá– ê96 <WÎ_@zÿ¹iÓ KÕ,X°üûïèE ^~éÕ¹s—6¯|õÕÉiÓæŸ9s¶±í9¶n¡‚ª™0aV”U÷ž{ç¾!¼(Ç–-»fÍZĖІ{ö ºé¦Q?üðƒëq þö·¿ç¼èêZN8>cÆNã¦å¼ü¬ ~ø«Æõý[=8 .×u^ö,mÚG"•éÓÄv4†}ŠF°XýúÇ…vÜ.�¨þÅ‹WP�4gÎûqgô¬Î95z®É]©ó4ƒƒ;®¤ŸjéJÎýȤš=·1–±4+ÄΞ½ø™g^h OÑ®æ^t¨±c§}øáGÎ ¿{íÚ-i€vNªg$ÿ@i'd‚ý£W™ºîºá.îßÄŸ“èqGŸ%2u¥&'i0ˆÔh ÃU9'³g/ÂöNºKœA»]|ëH·CÝj HuÒ!3¼]WôÜ
3åÀ-]º¦ a[ðsä'¥ÁÉ«qáîÔ©Ód¿ ¡ØyMÍÑÆê Ñ+C8yò #"þÕm<pá¾!äºÞzë˜÷ßÿÀy2 ã7a‚mÛv ;}âÄÙ=ödB+Ö^½éÆGîÛw/®_¿Õ³S§Îûðà >ñôÓÏi¶gÏÁ#&i¶fÍæûï˜ò´EÕ>ðÀÃGŽÜ‰ó‘‹š9s¾¼óÎ{o»mœG yäñ¦°<yJ¸9~üŒ[1íí؆
›0|ø$Àh¶xñê;î?eÊ\�¼ôÒ+ =zêš5›pgpÇŽ} ÉS<òRWÊbÆŒ·Þ:–ªŠŽˆ¿|èÐñœ{<c™‘–úŒ1{l¸%KVŸ9óõ7ß|c^,ëÌY‹Nž<g ØúõÛÈÀèÑSž{îÅ$g–-[;nÜtÁ”Nú!ŠcÆLõÿÓO?w塇 ƒd¨Þ¹s?È¿øâ+0t`låÊõìÖðágÎ\ˆd ¹ùæQ#Â+É‘ ^µjã´ió–,YC§ç‘#'ß~û8f”nܸ íÀüðÃOœ8 Îá ÔøÞ{ „ îöÍ·Œ¾ï¾‡âÜ4Í€ôä“ϸxèб åùç_êÇ…=ÊûG£òX±á¦›F >|< ³aÃv´5†a 8çЋÓ^xáeW8šóæ/ÃØb»uë¶Hï»èq
ÚRóÞ{ .\¸rÊ”9ëÖouåÑGŸ$_wÃ
#0áàì|6p’—Mw°ßäqcHp)ÎdNÈ#~À`8áöÛÇs½jÆŒ…‰5?øà#ÁÖ wLÀ`í…Œ 4‰q‰0áò“Ì._¾Nž—âI�èyËÖ]¢ =lØ°íߘy!ŠEû?úDÿMCHíLŸ>_3:çÛo¿u…Ú¹cØö’Œû?€–HåÔ©s×ÛŠdáþû rkÔ¨)?üÁ™2ynA ÁÁäœl]åñ`±(¶øüó/Bµ… W|ýõ×’jäÝuúÍÉ)Ì$GšóÔd×uHitã_|%£ô
á…�J”‹}ZÆ{!$ÚÜ|óh¼"ó)X”©ýõ7Y¦O>ùŒ¶8qæ+¯¼®=¢âHT¼l[¢1¥©gœ—̾}û ãþùÏ· 9r‚-Áp·~^}õ
Âf†(nRÊ¿ùÍõV;^}õõQ£¦â$0“U ƒb2·]Cnñ1I¶jøò˯1T垟8q/qŦ|1™7o©©•ú ÒÛ¶íIcü'‘¥çë¯ NøY¯cÇîæ@ƒ»ï¾ ×R$–qºêªÛŽ ½+NCž…ó¢òHµYkíÚÍë×o1Ö=÷<ÀÞx
+ÇÓbà4"Ù¦>n»mìK/½j,²jã"t`켉u‘¥LÓ( ÉÂئM;7oÞ!þ¹— “œƒ ¥�ÿüó/º^{íMíiCJÍã4 jFÑ°ß ü)'cØð‰HêÀ O=õÜ þp“Å`ÂL\1uŒCú ®?I¦ˆÃ¨Q“Ý¥ÝFŽœÄ®X¯:vì.L5`!&Æ#w§O¾ë®û°¢+È´zÕFï¹÷ßüæ:Ü.C8yòì©ÉÂx8‡Ë…±·lÙ *ÜòàCj@4¦N™sÎg¹•Ü òuôè¼=S¹ë®ûŸ}öy½FìñÜ›9L }ô1h™
ŒMHwïvë ¦Ìè‚“¸ù«nk…gÀe$H"ÃB$ú·¿½ž¬1Õ¿øÅU¬ö# ¼UwÌðÿ<Î.>ñÄ3t ºBj°±© —âmˆÅíþóØÞÔ\áŽkLéñÿª«n-n'éä—ÃM?€|Óæ ®âÆ›FÁ
sàÀQ†@…±KÏE袯´íêÕI7äЇæ(5:�óVÁƒžMU ú®ú‘š×ðÁÇ:<zôÜ<€”ÔãÅ°‚}Cøæ›ïàƒJŽÒ¹K¬TÎ…#t.û!Ì&QNÐ 'žøâËVApRÚ#öî=DãKÓGSå0\-JÙA§ x¦HÎ `£Êc0u$$çœ5ê#!Ùfõ«k
Çäå…ÉäsϾðÀýÓ,v\³vszã|éŸø%OB›ìŽ¥”;÷委#!6ñ3fõåI0ˆƒ!=!á ´üñ$—ˆ–é@ÕÃOdŠ\)œ{Šcc¥ Lª°
+Hç_~yœMŒ1à Ì<E?²vN¨*º¬I5ÚdØ°‰:ù` ùI¶á*ø¼Üp‹¸1óÌX¦lvN¨ ÍœìÚµ ½œ|÷íw� ¶¤g›`Ñ#ÐþÍ›wR=å•÷ƒÂ e
+WT–båª
qÿ±QB f)ê žÃ*x Qâ˜ßŽã@öå“}ûÉ‚tHâ¿2$n%Js •Ã-\C'ìb[â! +1èÙ³g%?ð§Šã‹03à#¹x>ýN
H³A^xzÞ¸qÛM7¬ÕúOvär˜y‘ «É9 'YšÀ˜¼‰+î,W »vD„$&M„·Ç‡“Ýa)] ì eŸøšÄ0äð8Aö ±
+·ƒœ‰â7€œôIŸ˜ ‡�à @1|«^/hšö:qK˜ ¥ÆJj©8´{ëw]ùö›oÉêÿÛoÿ‹š“?qž› Ç–óV3Pß^À]âù;Hˆ?êrâ*| ˜+¼*„ñ³ =ªð±Çž‚²šüžœ)"-õ:€61„â›ðÓÑ#w²7ì
+þHînËæ¢4ñÐÓO?û /Ez ÿÛßq$Ç*Nãýû._¾Ó‹;¥+ €N¨žš>9¤ò ij” !ðx‰–ÎÝòÓpf×a+"ä‹qT³®î:ɧ¼¸ÀxT·ÆõÇR~þù—ÂJmÒI™"y$OÑ *ðH`Ìyîj™´ \NîdÎõO*sicÌõ¨61¢saÑ;bcñyTjK ê)D¡>Àl
+VûÌ.˜w7SŽ 5-dIF”D
É5E 0 ¥ ©-ùœºo —)”â$¡5$]d
+‹Š·ð5Šôâò’¬h–¹s—0„¥LÑE ("Ô }Ú!5ú 3HKlݺK²3àC2n!‰]ÚW/¾…óB–ïË/¾ŒÆ<Nœ`PbFwKÝNöÌ óZÀŠiÈ& 5V“7 É7’&w
í?>Ä™>Éä¤X ÜÎí~þ¹åƒIˆsÂà*L
+N˜0”›ëœ FˆaRš”eÂ9¡šcÀܾ‡XùË/¿šõH²¬CiÛXP1¬"V¼Ï¶%0ŠxÀ<_™G‹vÎã\›à ?)³ÜRÙÆíÆbSË éG„ãÌñéøAÈÏ©±œ€‰ysç-ecØÅ[nƒ¸r‰E ò!X„_r)éDƆ‹‡«èPî§ÔhÞHEL; |Ô:ëõoµþ‘ã Ñû’ s03˜UcÜÿË_^CcSþ‘–à<qâ ‰í'Mœ…½�ÂpÒ§N?a&³ÇLâ~®´[X ð¸*¯‘ö±ã¦7ßÁýxã2·¿úÕ5àg±t‚ÆÔŠ,–éÓA˜5’/UèñxÍ®4Ãè}ûŽ8áíõô鳂iŽ 4>ùÄ3ì4æÞÞ}÷‚<ù’cD§[PÁ
Ž1âŒ;!ár¤
Äœ?F\C N% ¤Jà„»-Œ¦ª4¦ #êT†�`´Ï¸q3î?p$ZÀ-Þ¨x”¤‹ùò²Ù$–´×`ìÚk‡ùäW'1@ßö Sÿä£@rpÅx B¬,kIÅ'€í(Af2t(V?qân jœ‰éÙ¶Ôh|üø=B çóç-Ÿ Ò?nôÄÙ¢Ï)qÜ/b[†P?IÚ'íÉýÂH ßð¡n%œ0“Œ%3Ce3u‰«C@Jʸ4 ?óÃœ°vLìÀWXßáðÏ\jó…mÛvAE0sÝuÃbŸ|’!üÄpeõyõÕ·Ÿüêy§X/™ ÉOöòÌ™8#“¤ÂÏ þp£wãöýáöo4 业܌d1?€¿öÚ;(@â§ÜС ÑŒJ9 ådïÞƒàwWj4TÞ¸q `–Ù{“*jþþ÷7B‘ìÚ <@íЈå¼o/ì 0
+¡•lº1 Yócf(ñ¬³:‰EÂR´Ö´gÏ^BQ&É™d)ôhÉ*È?¸B ézþ¦þ%ÙÅ%Î#hÌÑ3()b0*R)»Y³KÐeÝ.,ÂiÒ8)¦O UU¶Îf F¢X`h/œ¥ñ…5†05ݺ'1X´h¥`NRE'fé{V“û&°‹°ˆà¤ C¬žæ0ž:ù ©Q23eÊ<¾-=Hf DÁc8ÂÆ×Æ’€yé–¿ŸIÑP$¥�W`©±è¹ß$9‘É»ˆYÌ÷~l®À¼$˜Y¤gŽHÞ¯±,ñÍ€áç[°mt 1Fq¸…“Jl])á,bŽá¤, \þéP¨f#ã/Có^eŒKÙõsÊT´äÁƒG!9Í6lÜŽ^8
oÃÿ‚+±c)ÏgÊ[˜»ž=ûÆxƳØÛS±
+m©©¨‹ªaQ¡¹(n¡ÐÏùl¹q"×D´¨LBù‚z Z±CýâCp–Ù•ë\ÆHÞèñÒ–\e“7Ù{m€Ç Ê[$ BõüoM²‡´b`ØÓÒ[*€q ´\mìºbåú
+’œxÅlò¤ÙB7ÒêÁd2MÐÂnÞg€äbåŠ
SÂI3ª¥ý@ŽDN(?i€ÃÁΑX•È%ÔbY ?55Þ€DÏ#fÁùæ%Ç@D:
+ÅÁIä2{¡&#:4b7 à^'œf*åbHYÿƒzt5™ŽOMQ³Vþf‰?›ïOçAl*¨?sæ C‚oXÐÊ`¸’›OÕ]BÛ†Í øFËú¼! M]ÀëŠ=®Ïò1CÁ þŒ¥+ÿ @eÌËyzÉ=ˆW‡å{Æl›Z-{øÙƒ�À¡ÎL«ezþq^~r˜Qžr Ž±&ÀVà„0Vð''£«Ž=4Kch;^×ÎêL8nsÎ×tÀV‘
ÓÞ{‘)èmKëÂðÓÖuWþö׿åÕJ‰×iL ´Dlp©a¨¾ msK·g±e
æ²è¦Í‡§ÿ%V8ªXÝÜ+Ãß<Èù¶UJ³gG7ÌDŠ;ðl:f]@ìLHÚZjÕ¶FiBžUŸ:éÀj<ñøÓìw=[`kÀ%í@ µ="YßKx§MMw»ñ€[ 3$¢/öJa‹µ!:œì ψ ÄÁ¤.ó|C~«
çEÃI!C~ª—+ç³óNÌÿtìɉn%—ägD~í¯{Ïœ>ëUÕè þ1^í…
+‚9„€@[Ó»ÔÔùyHÍз-´–am¾5\ð† ç 7„±œWŸí+õ’¹h¸ÌR] üœmû©Ô¬Ã‹Ÿ{O'û†ðâìi;t±ilß`…©žÍ½!ÊÛO£ûyÂiäQåH‰ ç„-¡vßìõ(SC u¥, ,ÚO]:ÜÕæ
`_bRðÏó «bÊÞ{Ðø|¨Y‘â¸FØß¿»}ôþ¶Å}*ô)Ò§æåoûŽpÿèS³ QÝô©Ð§æE;úk„竇P6¬ÕA ½§p/q Ÿ~H׆Ì`iyÉ8+}îí ýˆðŸ‘w‡Þá¥�Ã?/Vík«Ë\â. ¶ûäë }CX;û†ô{oH÷ ^ù=uêÔà¯fùrN3ïPøðÜ‚pݶë >íí ÷t|©í, ™fÏÚ¡Þðö
Ó…i ØæÛ¦¡uþßùfƒæ•qçÿ-ç½_É·by«Þµæí¼ˆ”T³´jv»‹Ê¾â®ÿgðÖ«o/Ò| šz~½¼êâ»ænµÓ¡ùìÉ7°Œ“²}ˆÖK· õ}ñj';2Ðãíw”½sì;ñú™] ¼‹\/V
¹ÖZû_¸ÛΦ
ƒ=Aü
Òaj±¬]ó¯‡JåC„¶ýY˜Ï{í/“Æÿçæ‚{‘ ìÝ•Ÿ£ôÓ¡v$Azj½µSsv¹œà[iw'J6À³=E¶
«=ÕÊõô
»ç»2XwŠØô˃I¥£ÞsÅ¿!#Ì¥AðÖãtJÕi¬Xý÷6ÍÁe¤o/ßÍóÁuœV"ú·V9º²16k`çœTOADG
0;8$Ps«Ç*wZvÔ$ͲgƒVl€R×SÿÅSô~zóY[7¾,`ôWEÈÚµÜr’ÁЮMH+íß8ͪòu5 $û TÍ?»¯]å±~Š"z«6žk—v+0šŸð»’ïôÔÅ& -õÓñ¡wÚ
'ô^v€ôµo“¬iÓ?‚ÒìIÚÈT]È'çÍöŽvÌ|VoK NìlPu(ã‹ÈØ6ů5ë\vðjhGRì‚ýEÝ*è¨ØQe³÷X"qðꆞ2‘Að––íz‡5Ù:¯».¶« –øÔÅö4õ0„J—ý§´}CˆÕlÂöÜwßÃ7lç…)Y—] dl¨¹ñãgÚ 2‘Í’%«Ø9A¡ýªzŸE²‡!÷ÖGô¾¼Ö¡gm‡fG Ÿ2ŸÝ«Üm¶ Sñ™=™ìoÃ!¶Í&mo¼ñf³¡=kb
Ôr³?À]»?Û/*˜ÝÅìÌdhój{Çv}ô)«mEÜêÏm{f“\0§ Œ®g}<nÏ00ž—m¾U›Ð¾J¢ ŸÄœìÜ;ï¼/„µ”ÙðÐ~69³½åÂm×LÙÔü[±| ùa'¶oÛ“*jÅ¥šDU´iYJUÙeT';(š—m—
Z½ý0I.Ûü TvAsQrÌž^Ù¶ ƒÏeËÖØ8QÞX(ø}ûØ¿†~¼¹'ÃŒþÀl,enì…â™õW_ò ÆÓ§Í7…T4Ü6�¿ö’Æ"~%ºLSŒN_nRªP}e;ÈŒÜK¨ÉH³téZ›³`{[j…½åüå9yoˆ‹{…t
+KÀj
+/øIp",êT`fWäBäQm[Zu( ¶(²;—},q>edchüŒ"†Ð) #
+ ÙÁæaH†i™ET³¹%Æh––Lu0’HèÖòT³Ê¦„€±ºÙáY‡9=îr-I›ÞÚE9ÚÕ
SeÓõ¦ú/¼-[¶.R\tê B#|Z=1SmìÝ“ ™Íü6r“"‚%;‹&G¥%ÑV.ª€O3%wp ½Tµ!iú†zéV ÒöuIn§v ±¢1.?¶ïBª6’†E왉iT>bhØI“faA2i]š”œ`AŒ‚qiU[ßVŠl¼iO<›2W
0*U,‚¹¿øüK Çt«rç)üT¼®sÚÇ K¤õtøúkoàÔªA{™Õ~Ö¬‚>1 »‹wõ %K¶Ù`ÿ‰}ÛfïM ßï¹ç_õ³ #õa›i›ãøIYHS.WmB5SR9Ìö†ÙJÛ;3`æk?I˜ºbºâŠ\;jþÙv&SåѦäúdÆ
+?N,‘6ÑE˜ êÃæ®À¶C)s®OþŠÍ—Eû¿8º>ø06RR—ÓJ†SÇQ »W_yÝÔÀÃÃ@\¨ øÈ”—PÆã
+º›µ Ãí-™]Y>a1“o\»µžÕÿÎ{³ËÝ¡™“W^~-3J}5£_Ÿ½ÕŠÝ¥1¶ë¸=•)wíÚÌSåØù09 ÃXåcarñîRx$[SÚmR?žâŸé¿U‡ReÚçmÖE4\ÄÞtB!LDÙÔ¹äÛÝ{ï8A¡>»qòi¦OŸ‡£À§½Ô«àç<)2Š!Ññ/¹•D+dôF•Í ìÙkçw6˜ÇüóŸ_e<ö/9}÷=vÂXm“@Ÿà̪nH@þøÇ›«Ê& ÿ
7Œ Þ¬Àiªx¦Þ!W[–£ÞrëÛ·ÂhU:t®+ÓC(%8×_?Â,Rõÿ7SÇ|‚ f°èÌ$ap³. GÓfU÷Jl¡ÙH^9H¸Û7„—ëÌ)œ+è©”#G’á!ÃH[ JMÌ!VÀjšªÞ§¥+Œ+Ù –;‰Ÿ°2$½˜¾[•;6,îXD‘—'¶Ë›ÇmŒ5«á¯} ®½ï¾ÙBÖ#¦“È|‚EN+Qg9j «‘Ê—_:LÞ2G¤7íòÎ À�ÆâìAî*a¡k¾U›Î¢ƒG€³BÆ\UÂÄì¸Ã¢1&-Øªæ —"¥ù«°‘sA!3k?0F Xi–Å1ßÔ» eÌŽˆòX “ŸA;ĉ†Xºê„# X(ÕXŒ¨„KŸÃ‡O d©`ƒRÖô…§hºä{“|ß(ÕÔX;³ðˆmø!„g�ó‰žS ‡ÏS"`@Kæä_™JºG»P‡é áLV0ÏyB/>VÑ…’Å9’ LaD äŽ!d,c4 u( ©½…^¿åg<Pu.Õ6ÒdyrÙ*]šö•÷#õØ,çÚ£~Èݬ²i.õÑè¨ÊêÐêŽä›Ô¬nHÊÈZªµìÙs€¬Ùž¾ð†Ãkõ”U#°üÈT
d¨ll-HC€É±z¦ÆGLžâóQ j\TÙµzÃŽR°3×ø(¢í”dB…lßϱà_R ’ù$¿hÍîúén-a\Ælß7„$ÛèJŠþà�lŸåÆlcßfö*"¤ßµ¬”Hã$²Jæ ñ Om*w1„y=ŒG)æÒEBªAÏUƒF`<B‰P»UŠ…QÌÎÜÀ£‹É Ñm¯äSÙ)LaM«#“ú‚“4b™ä°é#ÏN³"U›xðF“)!äqó³öÀ�{ªYAM¤˜p ”r¥«ÊcDÑŽ…$Š¢&à'6)»˜÷P„ÎŒ4ÄBìºÂ&e\ÛøB5ÌÐ)8®
$C©ä•™j¥ÊĬ¸mUÂÓ¹§¤=ßyçÝh¸,o½ùÎÌ ¡‚"àYÊÒ!&SªÎ�D¥†lÄ|
+j£bøæÁö •®Ø¼¨œ¤˜¶Ã!ÔùšoD)Ã<~S¬�¯–…ÏåQL’ÿˆH%3 ½+Û¾«cà?ñ„êŽ:”\ð?œ;·¨ŒO¢»Ù¹ªs‰çó»¸Â“,'Rˆ †SþªGëøa£GOkVÙ4‚\E³;j…úÿ9jåŸ0!¦mV7¬*›÷Ü}?.ÂcF„^ئÊrΪj b?a(›D¦âh–Q”Ã( §ÏÃGN``ùçŽ×[$6øÓiƲB>ÓËÀ“_èÒ³iâÿn• ŸzúYh!\qD¸ƒÖn$u.ãgú©Q¶‡ì 8p 7d#v!}ÇM›3g±$MœÒ\±b ¯¤1<©Þ÷Ë_^G?úðcIΪÆ6à`|Œ™$vìVåî/¹WU†Ð],—#l\–¸Qƒð^
+T¢:–É¢U"q§¨Éô lêÀ@œÇìüÛ|§œOÍwË ¥
ãí¾ðâËÖÆœð¦ªg²$½#mBP RI©Mhî·ß1 T¾Žá€¨Ñë ©ãOÝÄþ)y“:½P5ÿb‰çýXåq´ùÂÀ4øY¸heôK£>Ü«1Ì#FL4Vü I “’¥qh•+ÖS(<ùLCs#–.]M+Qm 3g™êAÏ&ΆÈ@Df˜î`,£:wîØ—ØY᜚M 5´õŒètäŽ!Ä$É6³îyŠf –è,h„(¿
!å~ÓM£ékŒ9ñíØ<QZ0QãÁ°—N˜=tI(©Ê#¼ar6Ãb0]uÕm¤‰ªMÉkV¤êPV¿‰ÕïüD¸°c™XÍÐ؃й “ˆ0R‰ú© XŠ?‹Ø2ÙQêO
+æíÙs(qÛ¸ñ3€·nÝf``K"ù»ßÝ@ 26M9•Nà ±Õœ¿¤ nV7lVÙ”l'˧‰·JÂ@U
d‡p>Ö’Â-Ch"9çLX˜À~
+ Ë—2®,h;hÄ
Âêßj&¾TX?uùÇbST²{%HŠè>j“mN-RL]èœ)š¼Ìla?"Œ}ÂÜÜU /+„3œˆ�Hã”d&Í(-ƒ•¹¥©Þ瘊á9ö�ÓŸ\ðDóv«rÇœ¨R[†h±1„n1BNÖÿG
B2s_²FÖˆ:
J¡äJʆyøqs›Ë¼à¬ÿg=2õ ˜ó„‰Þkà€Kóò“$PëTÉÜ9KR› L*†&ðîjìf_y@¦‚šÆ䜘õÔüãR¸’¯JRåÑJgL£ 0øaJ™™v}8wÁdÀ²2Ì1·ìœŸˆ¢%¤%Kƒ^ô \Ê@“LߢÔÚ|g+»þs®]цK ˆyç’íL¡Dî°ÎábeScöd±œ¤v¿€€ê4kþ2 Ã-–ãv\™"ñS¨C,5A ½, ó§Ÿxü©(tÂR_×`täjxG2až¢Ç°Jíâù$3iöÔ¡¬Ü#[…1„¨Ÿô¸CLòáÌ@šðj"u˜o,ò éš/7åÌIÚȲ‡TÙÄÛtÆEX€l²ÄM9µl– Î_“ô4Œ~ÚÕ
Ã̼¼sWx´Š²÷U5P'Ä„nÉ‚eÕu &ía•ž5KŸf'‘ÓA @²Çô a#ˆ• )ù…[h ¤¤wmò&N*‚™,$†úYèÂËi"U±¯ù~p{Ï·5+–µ«÷µj€ý-uÛC•»—›Y‹ö{ü 5› æe¼\l–
Òïz:i÷Ù®/È5NYN‹
+¸™þvmÂțѫç;*¨¥ÛFÍ¿\iTylM§Út`»9µúÛ $¾5
+C!¿ŽêqͪoUPÐnuà:ª©iÜüŽ¥M)³6ÇÂR•*¤ïàóŠÙ‹ÄÅœ°ÑÆ|GO‚æJŽ`Uã/âÙ¥»-j¶ê\¶†sœõ-“ƒMert‚”笲.WÁ÷â9‰hË©ô@Ç÷¾ƒT7 lÝðÖ®Ø1ë:¯öÄP'í‰WF]ÂÆšf‡üö^ Rƒ‚*?ûk„ÿ{3¬ =×�B•» `Â÷àä™+×KÏ1œ² <h2|Ä$¦º †^@±®üß~P½>Ãü ŸónÜy½”µDÓå¿×ÉŨgyöÎ :³‰ãß|óÁ·‡¶›„8É;&’YOi÷OôÞôÎO Œ†^jñ'âÖ*‰EÁº–ëC¨Ùª¾!ìï8Ú{•»
+Ù^ßuI¥òj/^.ÀèͲèЩra =¯rt}‰úï)Öæ ÿ½»Ð™¥ˆ‚8þœ7ŠÃÝ bX ×»»{w— )èôJ·Ýª|²2Û3ܺçLwýS¡ú]L á?Ëé\d
+þvàŽX`°¡ò
«ªþŸRd°”»±×¢ªª‚*ÿv`°ÿõg´VcUUU5Â6Xªªªªá~ÂÉX±Ï,Oÿüh¶RŒý¿ª´_UUU#üVf9&ù™öÒ.c϶ßoû>?W0(v¸'«,Y3 ’·¸`ZßÏí,}ª•ë^©ªªV„önÏܲ±‹v“ =‘ "óßãÍë’½2óý&w-ÁKA¦IjF8cÕæðyw“¨—¼²@3m=`Þ »yLoaªªÊÁ¤"QIÔd2“”†ª“ÀûD ’ˆ�&h^Le ºèQñ’0‰ ½&¨é”SÎ3²\%¼$OÅ1p©µ6îšrMÂyH1Âä
+ŠCV*f«¸ñ½«d–<þõxgâ¾D(É72l0‚þlõ5#—¡‘ËçœÔ.2ÁT8B§äbËp2ÍÄjËÂÎ,]/C^¶ô59Lr%vÖ «ªªj„²?ø„iø(¯Kj- ä:’Yć
+B“^Ùóܳ/ðá¶i& xHdè?ùCa>)=øࣅ0¹ÿwøáÇËñ“Z+AôŽ;îõ€WÍÜ5ì•ý `œžyEp¥PS[wU$çz…¨wíÍŠ6ŽûØcO|òñ§l›ÝÊ�Lʾy—áš¼“º ñ¬‘ûJ)”ý(øÀ#Mõ”3‹� ýCà¬Î"Ó•×wYUUµ"d>ú¸Mž‹ºïÞcuIäSo‰
” íiP|êtsË»¨´¤÷Âm˧¬zËÁ d- ô Wlæ®!y<áȿΑ!Ùª)ç–{ë#3×{ñH1¸2Û8Vh‚ÞbÉŠQ ïØc3Ž\Ä·Þ|›+t%eåsÏ¿(QZ‰)sÜ,<0G¦Èû]Û¯¿¥_ºK˜±êû=SUÕ—&àƒÒ‡©¿–¼Î´%½¸Ïà‘P,3}Ë·
#FaŸÌRMæ'tÑ+/¿&ê:ÁµF~õ•×ÂX`**Ká„wm6Â+g#�¯² å'«iÞ|ëm¼_á¶3×MWS š¹x•¢Ó)é!Œ¥¹$yPH1ÎÎáôQ}vðÕ…ð~*ÝÌÂ|ypBàøºŽq`»¦ªªªaª%Ä f ©’Óc§{Ï=÷¤§[t>ò„ªNµçççŸ}Á±R ²ŸìP9©)µ"a ç’‹/÷–
+
+².F¥Æ½|1¡_¸k§éÊôÏÅ_†>³Y²ÉÄÝêÁ"ÔÀ-Ì\76¬jX
OS`„,Viˆôæ#pÒŠW°$œ)mX/ {ìœRË4 [—§ˆ2£v„÷Ë,¼ o†6N›jXÕèuqûºÄí‘î€PóÞ}ïÃ÷ßÿh ¾úÕ¯wßý0l»íjE^ »ªNEeaˆfºic’&$k‰©hfZ~¢,SÞåã£Yzúé©&£ÑEäOƉÑñ¼þÚñ3µP[2Ü5æä©Îg|üEm:ŒÐjpUc�˜ (Ý#ô¯“…ëÆö¬ëI¹iL6‰e¡Nu_ð &„ Ìu¼ëÑ;õq–Ÿa³fǽF׃Õî—‘Y8µµ¬:®¶*çŠË¯Îjš“N>¨}'1c5Â~õ«FØ}„?ò B Xã–y:S¸òâ6ôÚ§yìøÖÝÌ] eÍ×|ä™o 𽃿ÙÎu›f[ a¡'¦[›Æ)õ+hpêíåߘå, ç,ËiúUUUmîyÎّ럦¬y‰–“Q•‰îbZYª¬Tòr¸_XPÕÅ2UÕÅ2{CüþŸ9×ßz–$omNîùUUUU5Â=S >ªªªªöß_-°ªªªFXUUUU5ªªªªªVUUUÕ콜 ǵíÝù½›äÝ/ðn˜ìâØŽAfŽ™™"Y2
+,ÉbæÍh4‚3ÃHffffff¾¿ÎvÚÇG£ÉD–cËÚ+•óÛ]]Ø#×굫ºJ‰p4(Š«tZY¡P"T(gÿA.$›Fœß
òT(”
+[/ ž 2:¨”T(*ŠïšGô¨ËäÕ•ý2 ægTTÕ÷ ¨Ùy¼,&E#
ˆ€HÆ!¹´$0äІR§B‰P·ƒR\øÖaniñ§ÜVT ޺ظŸÑjÜnAÆïà ÃgéºìÞþ³c‘ª#J„
+Å·ú |qUŸqGÞÄ%ýpáEˆª§oøî×cŒ›‚“2[ªúœ·æ†‡wx}U}ïÚ …‘ÉÍN[óÒ³›[;‡¶ .Y픾ëDY{ç ý"ëw -JnZã’¹÷DYWÏr¡B‰PŒÑ GÆ|‹ °¨²ï¿<W€´½Ë–¨dPÈ(ì0þƒÿg9ÙÖ9¸Ã½2§¸3$¾É0|ëCŒû#NÖ¼3+Å0 Ÿoþ -Héî?7ÏÊôºåµØ_? ežÁQµf¥ß4
+%B
”e!¨En8To1é6D%vHB³aø ö¨À 6ïÆ6Âyö[òzÏAŠ†ÏΣ%įݖ‘߶a_1 2 ;j›ú?ÎvÌQT(*ŠoÝLáÉÀÃÈ:àÕdÆØ*‚ãûCcÙÛ7“X_×ЙBFïô¬&"úVc§f4Z
+¬ÅNËjvÞ]l\(¹~ýpøK2„d
+],£Pèb™o ܃ ³L×ýu½‘ˆðó9Â;^1~”–×ÞÕ;츣À0ÜOøW'e·¡üÒ3I•Ú‚mï–ßÕn¡}.ÓÜ’N—=EßÿsÐàÐ0GPßðDÄÔUYÔ¢P(~[ P¨<{el<XwÖŒ¼È¸˜ÞlÜ
+½?
€ð¦¯Ì$Ò?¦FLNmÀ ž·6Ç Á¿ø“Àeg>ó0 Òo'ø¦‚éæ§**”
+Å·ˆ½"Ú\Õ›,8úÐPU×QsÄ£<!µ©»o˜˜Æ–þÄ”†öŽ~IÆÉMáÕ©Y-}ƒ–e8åèEr2²š
+J:ˆýÖA¡P"T(—´³ŒƒMÐOJ„
+…âJä?á°1ÀÜA†_ɯiqi»³ –µP(*
+…B¡D¨P(
+…¡B¡P(J„
+…B¡P(*
+…B¡D¨P(
+…¡B¡P(J„
+…B¡P|‹ˆP¡P(†å#y+ðá<ø
^g/_Qÿ´B®€Š”
+…B‡]…¡B¡Ð¡¡°°¸³³Ëš ++«ëê$uhJF~f Ë cÌÄ#¦Ö‰©Å†Í¼Ø”3b{FoFoo ¿Ø>>™™99zÃ$}jj†¿ç0÷÷÷Þ).;e>À ‹ííé=yÒ³ªªÆÔåfÊ¡¡¡¾¾Ï[ lº6Jg/á/”
+ÅÕ ÜI“fœ>ímÏôé ;=É8"üÝ4¶ö¨ÅFEÅEGÇaØŒ×&wŽ ïééÁˆM,))»&æ]!>>ƒßÄÄiÌóŽ’¬¯¯?""¦¡¡ñ”DòGý‰þ„Gû»˜1ª
+…bpphùrÇ… W C€´´Ì ¦ùúÉp_^^™×ÔÔÌeww7J±¾¾1''¯±±‰KdO~~Q~~!úFbš›[²³sëêêÉÕÞÞ!ä
+—äåØf¤nhhÊÉÉ/+«°°òpUU5‰¥®šêZÊtsÛ½}û>*%rp`°¨¨$77ŸbÍöÔÖÖƒ~¢pV_–T:X\\Já \ÒHº™ŸŒªkjjÜÓÓKË ò‹ÈnÓ0d1Ŷ´´bw´w`tuuïÚupÏžCÔhÉÛCè×àà u^:NbÚYYUÍeEE%iБÖý-/¯ —´ŸwÒ766“27·€.óØâìí×Ó�) ÕÈ_vú¬©©mmiã.†ÔKùÒYy2mmíH.Ò´µ¶#
¦³<”±ÄŒ,¥eå¢D¨P(®RÀ
+..[æÏ_ Ÿ$#ÅÑ£îK–Ø{yùs‰(Y¹ÒiÆíóæ`Ь¨¨š:u>—+V8-X°Š1:Y»vãÆ;V¬X»oßÆF™yóV®_¿uË–ÝŸ}¶$33›röï?ºl™ÃªUç‹"‹©¨22²—.uغuÏœ9Ë’’R;;»íìÖ éÂ1ÎÎnè¶E‹Ö,[æ :t‚ö¸ºn[¾|-å@ÒS¦Ì£ÌÅ‹í6oÞ KYãBã!�:²uë^'§ÍÐ lii;sÆgö쥛7ïjnn=pà¢ruÝjoïJw0xæX ¿nÛöíû©ŽŠ ¥£GOA´„s ƒR歹Î4Þ™D"õ’‹Jia@Àdÿr—£,©ÑÑqôæç4kÖÒM›vΘ±èÈ‘“0÷¶m{-ZM sRΞ½líÚMsç.§k°¸å o!ïäÉs««kqvîÜy€?iœœ6õ÷õóØ?ýtªæoAE°8ÏÍÑq#)â)–Wþ((600T¯D¨P(®: $6mÚáíÝ{˜ËêêgçÍaáQîî^ÃCðêáƒÁ”y2Æ\ˆ§µµ”0Ú>@Äp‰¦™?Réðá“'NxÃÈûÑG³ŠŠJKKËgÎ\ÜÛÛ‹¸aŽ‹K4‰[55uqqIO{[ì"DXXXĨááá+NB$<!zYU#¡ˆ¡"J¦aP©ø?==ýh3ê. áòr ÎC'aÀOÌÂgTÊå@ÿ€O� cž9Cp©J×àÅ#GÜerÑß?XŒ·‹ü…ÛÐUæ8ëæ¶ËÇ7U
#I yÕ ‘0·ô—×ZÅÓƒ¿)cð]²ÄŽxÞ9x“ /¤ûfeår7((ŒJ!ÎÅ‹× íäMÅÛ;€Wi�M^)›hÐY³–P#%@Õ••U )«W¯“3³Nœ8CEÇŸ9~ü´ÈM^YDæ’^‰P¡P\]€WÐ »è |z¡¡‘ ß0ÜÑ#î6*3zŒÎ©)éŒãH.ÉÈø n™Ã‹…–(4"LÆh�«ÁF))é(
+!¬Y³ŽÑÜ ’Zš[j{÷ Aß0î£ÛP-ÍŸa±½ýk"¤m4deåà2ÅýH³%ÆÎÎUü«äÉ“ ðâž½‡¨ö…ö �Wñ.îÛwj9}Ú V¶™9ƒÝɵióΘ˜.ÃãM"ô³8¡ž
+uï¾#Œ°»ä¥ ò""b¡ !K^/ dTõßú»æƒÂy ø==}i¶x/‰ÇáÉ“tsƒa©j¸
ÑIG¸Ezx ™ ys凴hÍ,Òð6Û8uwï>D< ¾_Þl vë¹Uä#· 8ºßxº¬¬\ …áU…B‰„·ˆS^A+¤§g>íƒ Žñ
+Agà©KNN¾”±"Œ‰‰_ ]È&Tc4óy%…ãs+((¢„Ê¡Ã lg rë‡ãŽÂáBÔB>ª"<uêsºBE™´ÇˆÇ)#Ã7>U.…8}}iÉâ%öÅÅe86!Ú ØÙ¹ˆœÝ¿ÿÑÃÃçÐáR B
–2‡KHK¦é õ&&¦â±´°¬Ÿx¾4€z!3º/Óªƒ‡„> ;…Õ¹¸¸uuwCÀ|Þ_Ä(ùØÜÔÂÃD’Ê„+/<Þ9ܶì&†)O¼Ðp¹h<ŠéÆ»‹L:f¤g±¬‰7�|§t ÙÍ_?Ržº¤=ÈC@@(m6§?;;;qâpF5Ò´>y¥óJ„W
+%Bæÿ^¡·ÞúdÛ¶="ò^ßgÌ\ŒžCî¼ûîžLæœDR°î?$8‚é«+òr ñ³±Ä†¼° G( à ýøãÙ!S‰hšÀÀ0Dƒ/£¶¹pŸ1¥…[2†,Åi ‘$%¥q‰úÎÃ7QA¢4Š`1c!‹>¤=B„ˆND$6-‡;úq R£Ÿ_ðûïÏ$ ·ˆS‘†0ë?ñCÕ1ÑñTÁ-sùmƒ®È›Ò0ˆ4"¼’iŠ
LÕ¼
+àr¤ÂîÐlX ƒ.#”1h9ú’'¼sç~؈þBÛÈSJ£^$¬ûIOYþÙãÉäm‹ŒŒe… ÝP™äE¡BtVV÷$'§îÙs˜Î²Ðj ‰xî¹ñxŒi�³¡Ò *âÉ@ŸÌïÆÆ&DEÆ.\¸†W žÉܹ+ðxCبIXY]£W)
+ý|ýÔfÑIaa‘0‡¸%Y])‹;…!¨Á²aY‡Œ& è –q"5ðÈ1˜rK¦÷(„,üâ½LMM'†‘ý„øƒ6$»üBoh&¨‹ŸAœ¤ ƒò±ãÄĈ+Jpw÷ ó <xŒ,uµD¥RNK.±an™,¤LØ+<<ŠPRRN Ú”6@K$€¡ÏÇddÓ0V²È%å�iÎOê¢ã²rGœŸ(?ÓYY^‹û"g‰¬ ³òH¡j(ƒçcæbfíÅ»Ùé/ÅRdF¯g<L‚¬Å,‘4¸^‰AÔòè5º¢4䣬&E8òÖÂ{�‰ òYi?ŸH{¨BÚC÷)„ÃâÒYH‘¿hJ],£P(º³ŒÌ]ú64Œþ¨:8 Žam$âiì…3zcÿ®cìÕRàØ¿€ {K.Kù£§¹´o
õó‰«
+…î5jüŽ²u‹9¦XçâÈ—yþ~ÁèÈ ;ö3×h&Ø|/1fv3MŒTa¦7Ë1Û3bã%Æ&;¶¤0cÌ2mföˬWn3z^›Öš‘#ö׌6ÙIIº LÃŒü[±#ü¥Fi°Y¬~GøõA¡P(t S…¡B¡¸Ê`«r
+%B…B¡P(”
+… À¤¸
+ DØß?Äw¨=–пúû þ£{€Ï¼Î™P(J„ m½mí}mí½4|×C ÿÚ†®ô¡/ÕØEe,GÖ556󑸬„4Ó|)½B¡DÈ;2£C{ÇU4h€‡¯ôqÝ/ÙsK>® ÝeÊ7õœ¨ðwD°B¡Š¡áê5(@„Wò À&Ô«V9³#‰ ¼Çn–ì7ÍF0&)²Íg/»°7˜¨CҰʼn°#»±7˜zN¡PE¨D¨A‰ðŠ€x8Ù<“=-ÙŽ’
ÃØn›-1Ù£’7‘‰²é(gði<{O³U&¤kφgvkÖC„^^ 1ÁAzœº'›U*ª•5(^aضu*P%`ïJŒ¼¼Â¹s–
q¢{xŠDr¬›D³&''ˆœ2e. *6¡)u
ªB‰ð
+T„4(nÛ#Ǻ²¹3F³ 3g ,_î(›Ms¬§+DGÇY˜²Š\ßyçÙ;
OJŽ^b{nýˆ^¡D¨ŠPƒá |¡ i„ÁH@ŽÄCÞá e5)ÉBNfàÈ!” ;hãå¸vΤý×ÛK¢~n-Yb/‡0(—U„:žô¹)~c«Fqurj §âA„¬‚Aááóä›
+Îäè ü¥ ÂÎñF¸F9 ,œ²Äª^ß²eÇýplÇò[PPÌéEœq¨>R…*Âx4imëáWŒKÿÌŒÖƯ\vtö_Z9]ý]݃Ê+ßHP"„Ï8WóðЂ§O{ 8p”ƒËñ‘r—Õ1œ¸Ë~r, çäÁ‹²Ðùe•rZ,ÇæÉ€Ì5zyùsH¡¡â €*BÒwv
ô@¢C½}g —ÀL0…\
\ZFëzMþkiíù‡ß~¾
µu…RŽ%ÂòÐðM¥P¨"$qOïp]}kddüÇOòNÏÈ7™ ¥…@”@Ê µ£) ;ªkx¯í²NfÀÌh]U×Öµ˜1f°®×*ÆÚîÁhjé¢ÞƦô\~AÙë¯Oؾc›UÂèíiiå-|héÒÕ†aÐwÞ¤6µ[ǘåhP"¼,°>nÐúX;¹…5ÊùÀ4ÌôcX¡PEHJ8 ´¬füø + ;~¦«{HÆú¾þsˆÅ¾s¨%kí}â}6HÆ¡ÇOxÞzëý¹y%ØP ‰I& ÄuIŠ‚®ø% ƒ4üΘ9ò”ϸ‹mÍ:d$™ÔÅ%‰i•J
+Á :}ï½…‡ÇÑ÷”Ôl?oþ²îžÏÛf#y ¦ÞÅ ‰'ñIw¯ÙsWTÖŸOóE;©}PX¿£«_J %ܒ¯ø D¨P(TÂ+V: S§Î
+ Ûµûà þp3—©©9Ð�”–’š—’”œ…N‚{Poñ ipg~AyttbfV…9gîbaÐʪ’54¶'$¦ÇÄ&“ ³{ZŠŠ+“2«ªÓÒsÉXZVKdFfþ/~~Ã/yCBbF}C1ÒxÈN‰MŠM..©¢@4_bRFNn±Œ}©i9©i¹Ôâ¸võººnÃ({å*§’ÒÚÌ%‰¥4Tc||Z\\JvNQWÏ‘Ù9Å))Ù5µÍqñ©%%Õ…Eô«©¹«¤´šŠ>ogÌçí„i ’“³šš;©]:~%B…B¡ŠPt#þ5×ÜüÇ?Þ ° ? ¤ÿï'ׇ„Fㇴ³[gÊĹs—4·tÇÆ¥b¿ñÆ{¿¿æÏ •à¶e7ÆwÞÏïZ§
ÐÉG jf<|Ø &sÝ°
û½÷>‘È·Þz/#£àµ×Æcßzë]üšè-qT >ânf¿ïþÇñXÒ<ì>œNËIsíµ·?òȳ§NûZê}€ßÙ³ÃÙ?øÁ/_}õÝqã ‘¼î§¼QoÖ›oN°Ò» }4{„ùݺmŸ³óFŒ¬ì¢]»Z·óÅß„bñßN›6Gbf̘gÿòÚëÂW𜢡B¡PE(³ƒ¨ Ãøï ~ø)kFÌÉ?D®QoŸ %| 3oÞì#GO¥¥çÆO~þ‹ë =í伉H"/¿lÚ´ÙØ7mG,nÛ¾2+.©þàéØÈ»}ûa¼õöD/ïÀ‰“&c :ìŽüÍonºå–»<½‘’²ì}éâ²yýz7TÚé3~RleU£a|oÊÔY´ múÀO<øЈťKíH°b…â¡ö‹_\gÿ¶gï‘Ûöÿô3¯°|fá¢Øë×oñó{àÁ¿È\à²åö/½ôÖ‘£§srK ]„÷ ø¢“ÞŸ‚íãrÒÝユzxøÿuü‡Ø“&M¥ä+›•
+…*Bˆ0.>Í0þý'ŸÌ4׿ÀF2·b.SÃË;ˆb“’2±íìqoŠ:dû{8ïÇ?þík¯ÇòKKËé <÷±EΚ½ÐeýæÇ ;4,æà¡“ ¥yxúc 8x
zÏ=ÝyçƒH4*•6` SÑmPY8l31S§Í&DøÐCOÝtÓ8ÔÞ S²Ý"ÅB„†ñ ut- !ÁÓϼœ—_úØcÏÞ9î!X™47í ½¿èÒev\þ,(Ñå˹´!„ýE;ý°™>ܲeFTt"‘x‰±'¼÷ɯ•
+…*B(¿ßÏ~víÝw?Âl™, ˆ›¿`3gk,~QT”¹eͧø„t n‰[õ׿¾þµ×þÊÊ‘M‚Š’ï¿?{ñ’ÕŽk]wì<°gÏaáΈ Œ€5ƒ‚#±ñÁÒ€qã 7î!ñÓB-²xçɧ^ÂýÈJÎ —“r½«z’›4iJOïY÷à-·ÜMöcÇÎÀÃÃb© {þ‚åB–ãîz詧^ÊÍ-yè¡' zø)œ«tÄ
J3yÁ‹¯B
+C“2‰¸b…½á¾}GmÚéîîí¶e'FtLÒD8A‰P‰P¡P|'¾#d(g™%#û’¥kp{z{ÝsÏÃ\&§dùX\£3g· ×cïÙ{83«Ð"
],ºáÆo{ûíI0([#çQ&ü‡k¥îààÂꕽ# CPpö¡C'YÞùÀOþþw7ÅĦÈ×d®ùÙ|ÖšÊdá†[™w4Œ 3—ÉŠ Ô0~½Ñ†S§|H°r¥# âðüïÿíg ¬ SáÃ?õÈ#Oó]ÇôésHƒÔcñÅß°ô.{ù
+‡ÿø þ
š„€iƪÕk‰ÏÎÁ5zܦ§Ïø2×hq‡N>ó7×èĉS®lר¡B¡PEh~>QT\õæ›ïVؽç0ñ>\‘fä;ï¼Ïì Œ…=þrTTÕcÃd]ƒ(HÃø—ŽŽëQ™>ú¬™ñíwÞgÑæ†ÛMG+‚̲DeªKTô–|œPQÙ`®U¹ñÆqü.^¼‚”sç.•È?Z"ˆp'òñŽ; äbúô¹â¶Å5*Dqr‰ÍúÕ›o¾[@½d|÷¯ Šìì @eΞ½ËŒÌ‚mÛ÷Ù´“a\^°Á¬Y‹®½öæwßý@‰P‰P¡P|!‰å£ˆˆˆ¸}ûž8éɇ2¾Cuu
mQQ 8 ñ—V×4‘vŒŠNÈÊ.²a©grr¦Ô˜žž“•]€@,+¯Å¯èé€Oµ±©“ŒxGùf¿¬¼ŽbË+êÂÂc
+
+Ëå[~H4,<–’áñŽbC¥|#Ï7 ”IÊÚúVÊôö$cRr&¹H ó!DxxlzF.½ qzFžô+>>5>á|òòñF``8í,å«Ä´´\¨—"doš¬¬‚ˆÈxÃ
+ˆÈ8³Ìn²$EË’_ß–!X¿ÿý_¼ÿþTô«¡¡B¡ø.ì5úåÏäÏBc6ñLò+‹Yø5¿U—¯æÍô|‡.·„Ì$£ù%¾|€o]1fæ-sòRJ6?Û—”ÄH$¿$°þôž_˜m#àó4m½’…[üÊŽ9$&‹\rK.mÚI ç?ÛA ²ðÇÁa=K{°ƒƒ£¤ýW6‘(*
+U„£oºmÆ˯Č¸Õ™i“`ÄŒ£Ûæ%áK‘m#¤$ŒX/áÂx›ŽŒx×ºÛ —ó5ý†
ÛÞzkâÜyKQ« ƒ*}ç‰ð¬Bq•AÏ# 9h°ì7dy¶ýÈGuŠª"T(W×y„LiˆqhA%B󌤶òŠÚªªúÊïzÐ çååµ==}_ f¢ŠPƒU„ Ïä³
WOà8U„4(*
+#Ô A‰P¡P¨"¼ƒ%B…B¡D¨ããU”mˆP¡P¨k”üàBˆïzÐ ¡íCçL(
+%Âþþ!¸°Çº¿Ã¿ú«¿bt
©"T(”
+…B¡P"T(
+…B‰P¡P(
+%B…B¡P(”
+…B¡P"T(
+…B‰P¡P(
+%B…B¡P(”
+…B¡P"¼hû¤‰cHvùÎõçÔ+8w%€VþC%%éI®P(
+U„Ÿsž
§~}€€†¾Q±ê³ßl«
+…B‰p”!;>³Ë;¢Ír=Eu÷Õ6õjûÅhé$½ð ÁF Ùh>lëÇQYÓí\—Úlæ23J™fQb`J$1&–`Öb]‘yצkfF`¶Á¦%üˆÝÕ3 [WRÙef·m¶ÉvCç/ò‹Û#âúÎz‡ÕÍsÊéí2s}ÞÎѺ̕u§
+…âk†¡WD«adºµH Á2 Ÿ ¬5öù˜{ÞŠ½ù•XãÞˆ K³Hl“ìBì>Yv¿Ú:MG÷ðŸ^‹3 ÿ-Çʉ°ëRµ—äKkvÜQÔÙ=d>zg/–‘ëQ ¯¨í5 Ïû‹Í2ù Ž¼Â)Ó0*úž.»ó¥(ÚUXÞµlc^cs w…,M¨NT(J„ß<Ü[ #ëD@Ë( È*ìØ}²Ü~[¡ñ=¿ñsRv,ˆnè 8›‘ÛšœÞU¦¬²+%»µ`˜ 9E EeE]Æ B®})6¿´kp𬰑Gp
<±js~cë�1
iYÍéÙÍÍíƒ\¶u däµÕ5÷§ç¶64÷UÕõ”vV7ô¥d4Õ4ôqÞ@zNknQÇ€…N¨©¸²;9£©¨¢›kDØä%iP¬wx}_?7ÏßMJo,(ë¶fúæŽÁôœªhéⲶ±7»°½®y +¯%+¿•r¤p"s
+Û
+*zŒ?í>Q&EÈ©o I©YÍð:—“˜ÖÔÚ1¸qW¾q[xuc?Å&gµ žuØYl^ǽ+:ºIYQ×›–ÙÄ£ëê=Ÿ·¥} =·¡•Ú[›ÏGåw$§5–ÕðT
+…B‰ðk†¥þ͆‘}ês]xQyT^×gü‡€ý§ËårÖêLã_ƒŒ 0îŽHÏkó‹j`¸?é_•UØn¾N{K9gCKÆÁ·¿›Í¥¸²Çþã;ƒ
#pížü7¾c~$C&¶´÷gæ4“÷‘‰ ü"C7íÌ3Œ ;ÞŽçò¾7c8ç =æ[Eiö[ó
#ظ‘zÄ»
+W$EÝøpˆñ˨ÔVÏ j㮈_>aüKð²M_zQ‡ñx´ñ«`ãšàÇ'&4·
Àñ”s×» ”L §kH¶é` —T÷êôdãg;—šº3§¸óö×cŸß |gz´¬¦ç¾·‘¹>7¾ûÀ«Q?|,²¢¾ù悽?,.µÉøïÁ·=BGŽûפå¶A“ÔBáïÏKé 8ÛH-'ò¨WŦƒ¥<"2ÿ9äG…Y©B¡P|]ÐU£Ãuµá`½adĤwŽ8òJLnIŒµåP‰EGÖB{ûO•g–ôw†½5%¹°éKÓŒ[CŸú áÁ×£»û†ëšú~þDä“ &–×ö²ZDH7(šŠÖí.êì þpiä›Ú×Hiλ‹³r[0Þú41.£µ§ÿ¬Ûv¨ÔÛ+´Ö3¸†øÉ‹Ó²‹»®{"â±÷âQÎTPZUãÀ}ïÄý·ûÃ{úήpÍ1¾ •ÒÜÜ9|ËóQ¼UTÕë^ȳÒôI&f´l9\©û„ÒïðºSÕ¾eaBV»q{èœå©5ÍƯ z;6)»}SmØs²Œ¼LWò;M:Ô›Ùîõzž
+¬Þ²„¢ž)Ihúw‡þæɨòú~Ç ÿrs s„ÛŽ—Crµ
íCOOŒ3î M/ì<ìA¤Ç ¿ªøŒVžêKŸ$Æf´ò¢@ʦ×ô õ©ö ¯=§P(J„_+„áŠ*û~übÁG+*Ú»†F…ùeç‰pëáì
» à3†ïצ'?ørä3 $´v
ã ýcê-*¹‰4x2o-æÍÙiØ�.ä· ¤ƒŒÇýª±¯y&ê± qr÷OGŽŸ›š’ÞëxGÔK¤ó†LãaPfUmÜãn™n|snúµOFŸÃñ¸lmæëÓ“o~>ê·…qkÇáb„TIU76®Hãº`ãÎpx+5§Íüc4µ
ì?YúÉ‚”W¦$R&ú"„~J*:¹;ñ³¤7¦$øÆ6?
+@)“[z¾×âÍ C/~”ðËûCéøó '7ï:T´q[¶qmh}s? V;g P+ ÂBã—ÄøF6ðLJËÛÛÿì°>“Èʺ^dèöÝ9‰9íÐp|J£”ï²³ÀøuñhÔ*×l\¾æ,¦B¡P(~]ëeŠ«úŒ{ó ~¿¨©ÝdÁ‹a·ñÓÀíGJ°¡CÈÃ;¬¶¡e 0®É;²Hß°Z¨Åøqàú]\ ßø|ô«3R°h²œÂvÒ õ®Â ÷NüÏ g®±kÈø]à´UY©™MpF@ìßXaS&LÆ
+Õ(Ö>nñˆ¾=7íù‰q¹%8?Y’žUÜõè{ ¿$Œ[›÷YU߇]XÑ —ÙF o|:Flg~λM901m†ÿ¨ ¹yÃÊ+îàîäyÉoOKŒËî0~á?omŽÐ=Ýç^.O¢wàÜ»ÓþðtdfqWiuÏaÿºœÒ®õ[³!ËìâNêxgZ €w7‘çTŧ¸´½gàœq[ؤ™‰DŠyÇÁÂä\ Ÿ¬ì&";»ivLzÛ1ïJ$é & ‹¿ÆoN
+…BWæ”ô÷ä=ñQqCÛÄ‹wƒÄ°‘§ëÞ" )vÿøʱ›÷D®ßWbqëù.Z—‹ï§_plÉ&,HGáÙoÎmë ’¢2óÚ@;Ž—a3Üs÷í© /¼ ‡“Ü”Ë ¡»GX½$^nŸ
+i±¶¥¨¼¶Øwº‚È{'&ýô‘ð<„Úõ¡/¿nk.iŒÿÈÓÊ™0->"µíå™iw¾ƒóö¦—cîx-F–’§mù¤wpË ?Exæ˜oõÏ
+šÄÒî¾üAÜ5OG6´
¢éÎ_g&ýñù(’m>ýîF>pº jœ¿&cùºl㦈¤œöð„Fê½ý¹È·¦'q EXZÛ·Ä5NáNÍm'òÎ"cÒZÜö’òÃ9É÷½ wBçaItùTrj%WÕ÷ò0ÿ:+O¬ñçÐ)KÒhµ¡B¡øú D¸î`Ãý 7ŽÊ‚fbÖm®Y—™Ð ‘‰™sW¥</yë¡’îÞá°˜ºY+ÒøH £{hź¬#§JÄ›ºz]¦ÓÖ\TäÂɹÈ13&¥ {pè,²læâäYKS˜$¦²ªsÁê´ŒüvI Ri·)—Õ•
M½‹Öfŧ5¹ÿTÙÆyPRXBãœe)vny0“ë¶ ž5Uã ¿2•õ,…å«6ä~8'Éi{AQEÙA>‚tÝ]0oEên÷
+ûM9I™-É™- 2kêϧ9zªdÛþBü®å5=v³)
+F_ï– ß`þ9!§ã>•“ç$ÎZ™îVG ±ÌÎZ’¼÷xÉ1¯
+ç¹MíƒþµN3- áÞô1"¡‘fï:V2}AÒ¼Uiâ@Î.êX´&¼¢Ä¦5/qÌü`vš›¦* *Š¯J„}ýg[:‡/a"Šä—ˆˆQ>¡³ŽÁ’«QÒ\Bƒù =Í7ñïô¿&)
+…Ί1ÖôÌóA™6[†¢yÌU¸)ÉD~™¶ä1c€YˆÀ:½™šH.mrIb˜¡O±Iøy™–_¾1sI™fËÍ2m“I¤ ³Ùfü!»Ùx³Í༘6Dš-…(
+Å×ý|‚ P(
+…nºP(
+…¡B¡°ò—\=Aƒ%B…Bñ%ôô´µ÷utöµwhÐð ü;ç_û ËåM(*Šî ˆ°W‡È«$hà_û€¡B¡°F¡†ïfP"T(J„4(*
+ujÐ Dxéý£ßýg6ær•câŠûCðûM7ãŠ?s_¡
J„—Æ:g/wß \z IùÒ
+!)TjÐ Døµ¢¯¯¿¶¶¾««ëbÛµÕÕÕ“Àrùµ³KwwOaa‰Ø_yyÅÅ¥Mùù…ß CŸ ;qšÿ¤xÔuƒƒƒééY½½}ßÇ××7ÖÔÔ™—]]Ý%%eÃÃꯘ AƒáØû7wîòuëÜæÌY .ñÀ:¿°O y’»ÀÖƒ÷·ý6RZ[Û¬oaŒª¥¾TNyyåòåk‡††°/–}ô%&22vñâ5ʼn‰)Gžº"¼X½==½QQq°ÂˆiÌ ™ÝÒFJ9rãÏœñ=sƧ§§ÇÅeK[[{ggué1^¼Ì1d· §fdiiù¦M;ya2û7zªÇ>H.{™m=Jö”ÇŠÅ‹íbbâ 99ùS§Î¯¨¨’[ˆ“Büü‚ņ�È…a‚df 7œz¡#Wÿ€iË-rY¬ÔÈoUUÍêÕë̪/V)‰Í“¹‰$¥¤ß¼ygjj6õB]fSI# ,—Ã&Ãqë‹øÁ!1,õÚüÕ««k—-sèìì¶~ŒfL$¯0ÊÞ½GÌK`ÓB3¾¾Aîîžíí üò$.\Ó×ׇ-
¦;fc¤LZhÖnóÜÀÅþR&‘Û4£¿¿_^#<<|‰pÇŽ}TM üõFü³r‹Äfì#¯tE¯¬/[Z»¿:Óttö÷öíé ¾ŒLIâήþ)Q²r€%Â1yí`ˆY³–æçI\yE%N0 Ÿ ùóW.X°y'D(Šq˜7oå¡C'dDo-_<éÉêáé7oÞŠ¥Ë HiŽ¶’£ã†¥K vî<ÀÈXUU½yó®=»¡A÷ì9$,•™™³hÑW×mû÷ srÚDQæSÎË+´·w]²Än×®ƒ8N‰‰MXµjݲeŽp#sGGçîÝá› V‘··Åûéô…K—ÚÇÇ'gdd˘ž’’N‡
§Oû 9âÞÛÓ»gÏa<~Üjiiݽû,Î-š„DFÉ•””SÂܹ+”Ö,¾cÇþùóWP c(jÓ¦ t™666SJfêîîÞºuoll"¤Ž0Ý¿ÿ( 7{D<%—¼^I yàtÁÅe+šZví:À;…ÏšµdË–=ð" ã5k\V¬XKS;:ºH³oß‘íÛ÷.Yb_YY áààJ3x’J4.Ãã׬YO½"õrròèÈ–-»?ûl1µ Ë¢G,X¹mÛ> ÿÌrÊË+6lØFóx2¼aÐ;K ùööëiVžÍ¦
+⣣ãi!h:.ÌJ9W®"ä]ˆÐÞÑ/Ã
+ 34|®«{û«P}>¾Á‘‘ ]cJhrì‘ŒÄÕ5ÍIÉYÙ9Å*
+5(Žp^ÀìÙËRá<éUZZÜÖÐÐXVVW1¾‡…E†Â°QVVžOd_||R}}Ã'ŸÌ)** 7fgç2^ÃPŽ0™2Ti¸Å ÉèYSSû׿NIOÏdjáÂÕ……Å°ïœ9Ë’’R››[`;¸vxhØ”˜ ¾Œíí[·î¡%L_AÞ”C3ìì\\P‡ ~F ©‚ñ:0 ”gçÍ䢄ÈcÇN
ôLŸ¾^„57nÜ1žÁšBØMMÍÎÎn¸"wîÜÃ@Ì,šÉÉi´ÍÕukPPɤUôzCR „CÏЀ›Û. à¶m{é/dsäÈIy¼Ð- L ÌSå€É˺º†U«œ
+ŠÒÒ2!KžFqq]"\¹Ò™ödeåÂsÍÍØ°/o�´‡Š rŠâÉÐ5žCRRÚªUN<=˜ØÛ;ÀZ}J¥mm ° 5Ò¯3UW×Pï»ïN))-£=üàÏÍ#1c1 b¦Njf'ý§Ÿ.ˆˆˆ¡.þ¾xkQ–4UÚ[SxLL¡CÇIÌ[U`„†FòÂ$ õ+TBE-tp»“Ó†¦æNb`A_¿Ï>›Ÿ“[Œ:4ƒY,†)1fù…a¬òŠ:Ã0n¾ù>ª0o™)©º¦¶9*:)/¿[
+·©Ëº"
+!YIiõ¤÷§Pì[oOjhl'
ñ’€J/Ö<³d3òê
+J„J„�*:~ü4êAN1ˆÃ v |ãÇOC:DDD‡†F1>N™2*•
+[ '0+ÖOü©0AeE•ùŒÄˇ,³(’up$ÞW8FnÁ"qq‰e¥å0¢Ä {°Í¡œŒë×oÿ¤D¢¢ m j±Ñ”0ªŽ„ÑáÃ'0Ð:ùy…âœôôôeÜ_¿~+åÈ´(í'%›DH \K.蜙‹NHHF‡!¼D3‰|„õé.@Æ8q†.œ:åõé§ ››áWxÎÉi3‰yD<[i<À€Simdd ,‚(ôõ
ôôô;yÒCzÃQ%ÃñÐ'ì#ZÚ“ciÿ€HdØF§œÊÊ*b ·•+ > Iãb ñûh’—ÐЈÏ>[Ÿ€•DªÜ¢4ž——¿—W€ÄÀ¯ØÖŠpýú-Ò#xš!9/CŸ·'·`ãÆ ¸OQ±¼ Ð…íÛ÷1; ;âb5‰ðJT„PKsK×o{3ÔRßЗ [»v—Ñ1‰ükÂ98tŽØ¦tCÆI$
+‰0H ñЧـ à¨„Ä 2ö
œOÌ-Põ’=3«€Š6mÞA³á3Òã˜`L#
E‰þ£XrOà1ûø†eÙrû¢J¯ÒîÒTá`‰$iR¬yÕùT••!áÀ4È2d§§? „K“… ¸ˆ-h ºš>}ò%55»8¾ð@’Òº@x.aœ5y Å°aÃv”Ôâêº UQQ‰ “» ¾ðAii¬#% ipß™DHX¦aí)EñˆÎ�P5DH Ê ôÄÐN! <xÔh!ÂFdÈÞ ¸33³!úßÃ Ä ‡Ö;O-4>7'ßâGÍ€¶qüÊCà%ÀzE¥´ @„('
+$
üÊ3„ká'ô(ÆßÚsÆšYyDKhïÎó‡uÄ] Hü7"\O¿*Ê+a8âyìôHžm¦ýŒÊk×nÄ…+)Œwßò…Š°±¡ B¥h õÉ (77_&/½†¹+*¸»{ñ§1³—••ó~ÓnáNçÏj¶*åu éÇè2ýÚ·ïèÁƒÇah)äÊU„áSO½üçÛîÅMºÙmdŸñ¤¤d;9m\´xÅf·pÌßÄÄ&ÛÛ»¬Zåè~ÊEÌ©S¾[·íOH·wp
+Š²ilêà)yz44v 8xüè±Óaá±k\×mÊ/`š¢~éÒ5Úî÷ q§Ípáñã «V;:8®‹O£‚Âr^P`ÓcÇθnØš’šc‘ƒßŸ1s^@`ˆ³³_·r¥UW7Ñ<BxD¼“óFÊ9zì mþöó ]³Æ‰ IÆ«‚$”•¥øÁ˜‚JOËdŒã]~æÌÅ ‘Œéø0ñI¢HXGÊt¢
+ ƒ[Œq )€ÂÇ705…k´ªª–AFdpBMšD±Mž<·µ¥4¸òý»áQ Pr“A ™’›[�"k¬akkûìÙKXñm ;vš’!`Ê¡v¤|ƒ zcnLˆxÔâ6Äÿ 3‰"„™¢Ã5Š³ˆ¿P D>í
{ñˤ#]†tQÀ¢.\E“°ñÙR”Ù#žQ&IOx–´GÔež:å
Àg2‡ŠçJ3Ÿ9”ƒç©‹@ä
M8ñ‘Bl¸.ñzyùñ„‰¡=üPmíTŠ3=-‹Žàkeî¢(Gˆš—g½±â‰™Kòò%†Ùf¨O&e¼Ù'NçÇ^hn<%%¥¼ÜP©†úF|›~~!Ö‹e&¢ã©?*ÿThÏÞ½‡qË\ò‡ ΢
¤ä¥
+ ©5%_¹Šð±Çž½þú?›D¸qÓvø)5-»´¬æ¿ÿ÷_Ýxã Ó¦Í"æ?ø=\å †}ýu·=ôÐS.ëÝ(dâÄ)Ø?þñµünß¾ )FQUÕM\>ûÜëåõO=ý2öµ×ÞnÿcúŒ¹Á!Ñ7ß|ÏøëŸüäšçžÇ¬Ý:n=òÈ3¿³(Tè61)ÓRïoù}ðÁ§Nº{Æÿ¹ñÆÛ¸\³Æùð‘S7ý鮿<þ<´Š‡ÞË;ÛRןù]´x%â’9]ìqw=|Çí` 9zÚ”WEP"T×hHH8ôÆÛ=«BD0@ <x‚‰:V¸œ8áaa—Æ8¡ùÖE‚ŠW$Ã11d‘•,ŒÈÌ'á3W!²ŽfÍêuxÏ` H—Q!DȨ
+uÉú–º¸¹í†Ps%`rr:¬@ˆøÀ"ªB "šÇÀÐ!ƒ>…‹´…dÕ%« …Æ q<Ò$d =ESR“—pª¬sAV2‰"DÓˆ³@ö4‰zñšBWVþFT©?ÌÍ€½Plè0T «TX_CÃhíÄýË\#ÝG>R¸Õçô:HÖõÈò ¸bãå×"O&8(œÄ‚Áª"<±´·ê’öÀÓ”ƒ"äaŠóº%ž |Œ“N™DHv\Ù<1˜›¦Òqº‰b“žòÌ‹ŠŠ1à³Õ«Y,ÃÅ
`6º¥©âåÅBžp\\EÑ x•LLaQ ÿ<„/ùBJ³„+YB„ÏÝpÃy"$# &D˜™•Ÿ’š1Á²êš¦„ÄôظddÜÄI“a£¸¸Ôʪ†ñã?ø?ÿûW¬[YºÌŽ”öëQð Å"YÕrÍ57Oš4¥¢²\$ðóÍÎ)zîùW
ã¿‘+:&‰ÈåËíÛ;û“’3±§Lý¬®¾
g¿Â..>ý‡?üíí·ß ŸZT\ÕÚÖ»ËBiü±šš»22ó}}ƒ‹Kª
++žxâùî¢ üõ7Æ“�QÈ å¬Ù‹_{í¯©i¹ãÆ=DdhzFþ·Þóâ‹oж®î±?(
J„W>Ð+Œ§Œ•Ö‘¬ äk6±‡ÎcØ$¶ÎÎNÿ*%˜F¼¬¨4ëAd´šJ ¼°dr‘L"Š7+í²Ž¡mf3dn’_)Ÿì_úbh€é:T/õ†ÁL’^xÔ\èÏ/‰ë屌ø ½¦L±IC$½Ùxîµb؆z š€B$½”@fd”çI<¿f³ºcNòḖù9ù£ðãpb(_³©æ³<
ùKÙ|Êi^ò„ĶiÙ$3™Ä'ás×_k]}+ù›3i—ÀLMM“'†
Þ*lÄZ•{îyìW¿ºþæ›ï¾öš[úÓ븟&D˜™UÈ?v™–"üÙÏþ0aÂÇáoN¸ãŽ+*êùs-^¼’ÄEÅ•¹y%M¹Ùâcžýöû ×\s«Ôèç é.Z´Š?»ÌºŸòáÖ©Ó>”ƒã”W „)âïç?»öñÇ_ >ø—»ï~Ä\J2–˜’å–[îºùOwýîwhÍÿû›ßÜš“ÃR á«tጡn±&Q¶ Æöm;W#Vp‰Í¸ÔêGY ‹„âC ³•šjiŒõŽ%Í3keÛ¦{{F¹Å$ ó‚c>—eÃQpE¯}í5TÔÀW Ó ?>æˆMæ ˆ‹wÈo~s‘¯¾òÎõ7܉¶ƒ££“*«gÏYl?ÊÍ+…ÿ„]„ñ‹ë&¼g!Â7Æ?ðàÅ%U¬šYºtEUddäc¬uÚ@³£¢±gÍZ˜•]„ŒJDðED&igïÂÚ ;îAÌIw/Êÿè£éØøcH|Ͻ=üÈÓ¨ÌÇ {æ†n£Ù=}gQœAA4’¶½ùæ„øø4allJl\
+¬O W‘"T"TEøïLMÊ+èH&ç^Òë+rÿÒ³£ß³p_»¿Ã{Ê—yC8Ìa„Ô¦Í;§L™…
iÕÖµÀvØ[¶î†™Þzk"6êŠu(n[v!?ø`
+R©DœDæä–à§Ì¿)¦ù—_¼ûîá+¯¼s縇pcB®,½!q~A N`<ôÐLì¡5ÿ|뽿ÿýÍá\þñãöì=ÌŠSðå „
¿šDÈ" ªx÷¯ïc³g÷žC–6?‰û”…6سf/:pðÊžž4q2öùÕ:a1O?ýòâ%«ÐÁ”ù#B%B%BÅ?¨`z ¡0 Uœ7ýæ77Àøÿ^}õ]·)fYò“ _Cì5×Üb™ñ ,+¯…fˆO<ñ¢¿_âÏ»”YƼü2Y¢‰€£X>¼ãŽû?™<³ªºqÒû“Ÿyæ(“bW¯v4Œÿ”•]HâµNÐêo¾ù.Ã4ä#>#%O:U—œ’ý¿þ×Ïœ7™Dxê´/wùÅ…
«q9á½O&¼÷«lhRoÆÌùÿþßýñÿå9¾S„z©Kˆ ¼ýö¤Ô´ §Ê‚J„J„zp„BOŸø‚ ;»QNB
'$ÂN¾‹ 46vWA0ðéù…–àHˆJ.ùE`Á¦6õB‡Dr Ã:ØR¾|e!i(ŠªKJk¨‹*¸$”`–I éù•ªY2ƒrÅ–”Òi ꌢP…ž¡Iò@Û\* þ3‚¡²cóü3éðòVjöâ2Wýõ¢'Ô›ÔÕ3dú å—xù|ðË‘ƒDš)1”lÆ›†9`]>1r)ü'9bÉØ6é¹4“]¤yi[òå”UW½¢]©Ê%z a ¹$Œxëë?Vª®ö,ýˆ‘_{›5(*Fg¾ãuóÓº . $&¦²:ŸïôYÓÏ %<îËBÔËè|>J1Ò¶à‹=óò«ÔÈWŒ|RÂy„Ñ ´=ò’ª–òù¶r”êTjÐ D¨Dxé§ýñe={”È?zb¡=sGoùŽž¯¹YYÀ·t6©6‰n·wpåsþ–æV>çA‡‡G±''·Ø]…MÚ$%?fEcï›Ôðe:Û¸üÝï"Øæ†ïñG-Ö6߈‰Y§Ê÷òp9ô˜›YÞr9rT3K¸¨ÁÆè|ª?J!ª5hP"T"¼ÄÓþØODΛ°]™Éˆb Y 1ìðÂŽˆòý¸ÕGâÝ#Ö. Plœº ¶¤d£!>d;ë¦Zë-šŸº›%saÞ";yšDH¤Mã¥X~ÙÔP1Ìrl ´í¯-¬kta'.Ù7Àäc³:˜‡Ztá9‚Öµð!<Í°Éh.›ò°}Œ¡*B
J„#@‰ð’Oûc“öÆä;vVc¯d [`³=—²¥[e’˜29‰}5ÉÎ{ìâÆæ^æî0lâÌ4€ mˆ‡$ 8n2DGG›ˆ²Å(›U¢;ÙÊ’_!"‰ó†ØÄ‹]¹9ð”>¾_:7‘—ØWŒc482B¶Æ¦al"Æ¥²Oçç±[œR£¡ìÍöcÔB›šZ°©” ^öc·0#U nÙ¢šÙØöŒOûK$þ^y°¦gÕ¬‘íU››ZØN {Ëñu?¹Øá“” yÈ~§ åAwHcM„ ÷Á9‚ Ï˾nl ÃÖkl&¢™G‡ëuΟÆ<Ý bÙÄ %ÍfiìâD¨ŠPƒáÈÐM·/í´¿€/Ÿö'TÑÓÝ÷0øÊÌlìÔÞÖÎ&¢lÂ)''°& ¿(×(Õ!b`’á9dÜg;o«³|3aVæç¸%s ƒ;{„r‹
9Å Xnɹ‰ô‚–sÐÛa£>i|XX$äÊþ™r Å¢EvP)]fû1HZ6^0"~K ›‹¾øâ{dgjMNà #{‡²7ÜB%†#÷ÐXlΓÉD¡Z÷×J)že ³F¶Ìæ‘ÒrxŽ=¬ÙœKºÌ¾©<4ŽyÂ[ˤ 1ìcŽÁ<j^M8BÎdwS¸ Nåä&Ê'[{³)/1ä"
;ò.Â>ÝŸÍZ $I™êUE¨a´ D¨DøNûÛ%çÚÃgì‘Í\C<§L0R#n¢¢ã¸ÅFÕìÜìc g¸7kA)²Ñ36c:Ç!ïHlíiDKá½”v¢¨Ð^¡ÌR¾¸+9œ›8aÂ4ÖÔ°‰(¼"‹DV CHÃh!:)GÔ üºl¹#úOÊ2ÃKv´ ôÃA†ìÊ-s„žìjÍŽáp$>^0Å2ùÁ3áix‘wé/„jú0¹„§!Q©‘GÁùºð"EÌ!jé‡/Êî lΛ@ÉqX‡rˆ+˜¼æ9‚œ>Èv©ÔB<^x\Êé†tÕȦÛtGŠ¢/¼—ÈSU.TE¨A‰ÐJ„_å´?n9_?!" ¢(κ#1'³ãE”u¢JŠË =j±"ÂbbdŸkèèQwü™0«9[å ÅH L"äp !'Žª°îì}%ç&ò Wq’"¢VD ’z`"“€ƒŒ)Pè )¶b…“¡Ð3ô‰g˜®Aäã T'ÇäÂ+’BÍÏ/Æ3‰Ç2## âÀ&ZËã2û‹4”É9@ù´Ü¬qùŠµ!Ì„¶–è“&Qmò“ŒT””˜JG8Kš*ç"IñâòÄH@bþ(̲úu.§Ò$þLp-JQŠâÅj?§°U„:>j¸zˆ°oP‰pô\ÂiðœH(´£lî¼mÛ ôE1 ð1
+1p¦îP‹±®¦ºV †üÂy!g0ÖãÜ$‡%1¸ ®Zé,+Y,§÷ÕF„G{xø‰sRæ½à*Ê7ÏMÄ» ‹3ôËІ$ÁÌ"ƼyË¡FZȬ î_l3L9uê<9]ˆöO›¶@æá 9ê• 9(qÆ›$Cbrj?¾G³¿LšD½q¸ <JhYô ¬‰ò2Awx’òÀôž‹£•Z ü?žCíøu) 2Ó±rŽà ~Æ¥è<þj<yÑÖèN9ݺð©òè˜/„Ñ{º{QÕrR Ò÷2†¢»›m¯ù`îj4ôµ´õ )ŽŒK;í/*2‡¤,±á�XÖ}@“Ü¥Æ\Ñ:È;7œïêââ&~W
+g 7 âðh€¶#/ÎU´ µ›Ì;;» ®]»‰ñºdñÚˆÕ1d´î‰¥–s…Dñ%ÒB ú…p9Kf°‰aâN…ÏaôWÎS„§…8ñUʺ8•Mf±)6&:^>j¤‘suòpìÖ¸ðèD5Zõw‹õùSÌØ™5Òž!ŽVNG‚¹©bÃÆí4·°œ(fˆG””%H¤œ#ÈëÄÉ-Úðñdz¡@l›Ó
å ûÔËR#VßxxøCvŠÕÉBq9 ^ Aƒ†aä‡áè¸ÄÓþ� É7é6‡ØÌæt:þæ¡zr åg}查|0ÂÉv\ZW
ÙPûˆç&šU½±�UJ6¿ç£.Ii osþ °)P,¬É/…@ð£ôwÄmzÁC3 4 É‘€H³X`}Ž Ù0¼ NN›áH©tÄÓ
¹”Rˆ™÷«B¡P(ôƒúѳõÚ/-¯\Žµ_—ŽK8£ÇóõHqqÉ .HÉ9ø¨FÔ$³MƒP(ßêóÐV¿âžcdkÔ0ºs )•
+…¡B™X¡P(”
+…B¡P"T(
+…B‰P¡P(
+%B…B¡P(”
+….ŽV(”
+Řqö äÂáó›'¬¾W.‘*J„
+…‚ÝàÏ^Š.d°PM©P"T(®x¨Gô¨ËäÕ•ý2 }ïFnF§4o;RzØ«²²®—˜º¦¾Ùv™µØ €P4Ç‘¡áó(©Ã: ²oß—î²UŸäçÿdf9Ãö’¤‘xRJáW0+”Ï*W¾µD˜[Úcü)÷£CŸsÌÅ’n>Pl¾ÿñ‰hã§!Ư‚óŠ;*j{
ÃßuwuBÂè`sØ÷¤¯pÍ‘ cQœ¥5½Æ½q©MfüeƒB¡ŠP¡Ðÿà‹«úŒ;ò&.©è 6_Ö4ô×½3;µ¹k¸¬ºç–—c¶ /‡ŸŒ›Âì¶æ{׬pÎŒIm–,™ Ž[rí\2ý¢¸li X¿»0,±iëB êC>5Æí!·=±õH)wë[ú· *^ᘶûDYïÀÙÆ–>ûí…ÉÙÜJÍiÝ°·(«¨s‘kžñ?ü^š•ÔHs΄Ô-vÈظ¯¨¤ª[ ³Š+•9k¯©¹¥¥ýj445µõs ã·"‹*ûþËsøHÛ»†FÜð¼£kи;̸?Ü3°ª¸¼£¹ó|²‚².ãã®°»ßŽ7Œ@Œ¾þáŒüvãGÿéþðq¯Å†ß ßÊr‹p4~ lܱùHÙ2·Bã–àŸÜ6seF}sÿ %p÷åɉÈ͹ö™d7 Ÿ ÇË(ÿàérìÓa
oÌL1n
+ú߆Ÿò«<t¦Üø— U®Ù3 îê1¬P(jÐ DxIÒa‹Üp¨Þ02bÒ;Mv´áB&ïy=f‚±žù ¡¦¾§¢®ÏøQðôEÉ}ÃçŽ{Up+%¯cóî<¤å¶µt ÷RÔË Ä%åuþîÞàwg§Ô6PN[÷ðCïÄ~8' ;9½É0¼¶ -Ãö©u;X’žÛfAÎTíA¥ÅU=YÅ]”éXMä¼ÕéDž®MÌé –þ=‡K¡®Q…Bñ•g
+O¶FÖ¯¦‹©+Ö¶tõíé?›QعýP1œ·Ø%Š2¾²yo 2²¡´¤—Æ-á
D.Xöë'£B’[œ®¢Ú»‡ y7úÄŽŠ¥¨°Äf³¢Ü"a€áIßóDXTÙSÒ‰^C$“K²ŒÂŒkƒVnÈí P1¨ÐÅ2
+….–ùjp‚3]÷×
›ÔxÁ ÀDÝm¯Æìu/ÆäŒë‚>Y’^XÙc\ ¶qO‘©éPZBVÛî#E†á Ü„GÔ¸#tüŒÄÌ’nã‡<>'ÂŽžágÞ‹}aR Z.'¿útØšß7xnë¡â•Î™©¹máJ—¬Ö®¡÷¤Áv…ݹ¡á»÷D)Y‚cüc‹ªû Ýr
Ã3)»íÒWÐ(ª
+Õ‚'aÁŒëΚ‘#%ëî zwV
+ gü1Øø̔ȪQßÕsI˜ŒgÕ ŠbÚïÆ¢‰GÃáä„«êû ãÌŽ£¥$ûÜ
»»�ûý“‘LI.^—ƒ¿ ¤p‡míÝC/OKæ®q]ðo äVFAÇàÐÙ»^¡õ»
+öž,¥ð¿Lˆ3î‹xsfJ{× Î*”
+Å¥¡WD›ë¡z“GIÙÕ; “ÔÈÀªÂ²NaǤô¦òªóv[{bJCCs¿|_WYSTnIÖ3”’ÞXS×cÕÚ9˜šÙ”šÑ„ÝÝ7L!~!UiY-ƒÃç${PD
‘Õu=)i
ª«¬í‰Oª¯¨ì„I³ Ú|ƒ«ÓšÚ:u¥ŒB‰P¡P\V^ û]koäððˆ¶M23f´bÉ>ö¶) *”
+Åå࿳üŽ)%,%ºâÿ#we $Xg´.Êö.—#e—Hs›S)Åê–Ò B‰P¡P(
+%B…B¡P(”
+…B¡P"T(
+…B‰P¡P(
+%B…B¡P(”
+…B¡P"T(
+…âò¡B¡P Ë'îWø0þ µ|éu«ñ:*
+…Á
+%B…B¡(..íìì2 ~‡‡†1rs ÒÒ²$fÈÓÔÔŠ‚´ÙJ”3¯ÀŒ±.°´´<..ÑštÍÄæÆÈåàÀ`@@HWWwLLBttñ--gÎø„‡G©pÒ^PšY`ddlee5ÆÐÐ1#¦áH9 ¯¯ohpˆhë”f]f<Ààèf±Gï‘UuTÑO{(É6±B‰ðk‚B¡CC{{Ç»ïNöðð5yÉLêîî…a¢¢¢ráÂՌԣ8Jd\\Òî݇ÆêÉ<{Ñ’iÀ¢EkêssóÓÓ³ˆ9yÒcëÖ=Ðù…é±GlÛÆ;²²rGiÿ…YNònjjöú»O !!911E"ÇX>Ø¿ÿXcc“Y…B‰P¡P|¡6**nÁ‚U®®[‘;dgçÕÖÖG„G{xø ñ•”—Wäç98làÒš`ÊÊ*rrò¾%oCC#6%`HýýýyyUU5±±‰GŽ¸›y‰¯©©knnÉÉÉïèè ÌÏ/¬®®1›rjjj™8/¯°µµÍÑqå#
+±ÛÚÚ7mÚ‰"¤vÓÓÓû·ÄU$0«ClÑ .wìØ—™™C(°W²X^ h ™ÆÈ%µ”—WRTII™KHH¸Ð-}¤×Ü’ò—R,wëëÈåïÙs¨®®ÞšØi-¹è—¹S9*™[[Û¥Ásæ, ‹äipYW×@÷åÁ*.7*
+ÅÙÏâíÛ÷Á…ûö MIÉ ÆÂ1׬qÙ²eÏŠNþþ!DzzúÍž½Œ”° w…$î'=I ._îˆã´¸¸lÞ¼6lçréR{t*!ã²eŽ[·îå÷رÓ&3ÐÏŸo[±bíºu›÷ì9Lásç®HKËänll²ÏÍm÷üù+S‰‰ˆˆ™;wùæM;7oÞµl™îP Ÿ�Z˜‘ž½p᪕+HF]$#qOOÏÂEk l�Í <x‚6¬]»éС4€_ˆ
]8uê¼Ó§½IiÑlbø=zÔäæ´iói µ-Zmoï
+ùhÝœ9sqHH)i*L‘ššIG ×U«œ—.u ‰4ûK'§MÜ]²Ä §®<XÞB \y†^XXÔ§Ÿ.X·Î
v¤žÆž½‡)òÖIÜËL„
+…BÁœ–H.Fyᘎa0¬ÃvƒƒCŒûaaÑh¦iÓˆK™9\£¦×Ž‰C$‹(0<“¡¡‘$ž7o¥h88 _(–¨¨mÛö ’Lb@9-^l‡†Ã†Æ¼½0|}ƒ <Ž1uê|¤Frr<ÑÜÜ
+#§ˆEæÌYgã¼%ƒÐ„Î1h´?))u×®f]••US¦Ìƒz±q¨ÒfúKE–f4®^½®ãèÑSbz{ûHL$¼.R ?úXa‘€<´¨¨Xá6ÜÕÙåè°At^FF¶¸!N —µ ˜)L:ÂCC/¢/é>l*T½sçþc–ªyùà…ìÜy�£¡¡ ^4_^—“
+…Ž ÑÑñ( †ì ;öCE¸Ã‡O†…GK&4ø ÷e†´(P‹YTìßtñâ5p ¶mÛ+’‘y»ààðÐH´—ˆâÙ·ÿ¨•"¬‡†‡°áÈ}øE1âã“ ?ƒ<B'¡ùDÛÙÙMÚ´i~T‹û±“ÖbÃ4B64[ˆŽAHÑj‡˜ÍºXtc!õöî=L#…•™#ʇñm:;»áÂ%Fx=## ZÝ»÷ˆÄ@‡DŠ/v„ö¬ç,)Abp·îÞ}ÐB„Á6DH«¿ˆB(
+•”<4Ú%£MÝÝ=I³zµKIq)ÁèHmV'
~-_¹(*
+…³óæÇO ª²,X
«ùúŠ÷ H1Ȥ˜Ä ÑL"--m Æ!‰ÊAêÁsååUˆ!BÚƒzƒ?$½——?ã¾5âidu¥O®Eÿ!" ?ÝÝÝÃlt(ŠmÕªuLOBcØ Vך4!J.&& 0Y7Óx˜# \‚ÎCFGÇá_E‘Fˆ©JHëæ¶ –B¨ bFÎâ4–²“ ººû³Ï–ð~ ƒR,^_Ô01̃òVáãÈ{€Ù�ÐÓÝë766“€Ú) ú¤GhM" ¤\¾|TÁ€¡Qœ7n‡ÔÏ).;*
+ ˜yZ¸p
®DÂy°Qaa ŽPØ›8qº¯o0£<z•mØ;¸"†ÌU£x™â’Ä |ð
+¬¤¸lýú°Ž¨48©»»Ú€hÓÓ²fÌX$îJQp¾A!B'§Í™™ÙòUƒ¸a £ ¿hýú- 'J`…K^n!íüä“98KaV‚8!]ókd.ÔhÝYøf½ë6DJ!B!“‘B„.}¡³f-Å·‰Dfò’'“šš±eËn³]»âïåøùóLЋФÐÞŽ x ÀÅ‹ÖlØ°M|³T„ú4³''§#—ñ…ò0é£<Ø#GN¸”œ’’N$ É-žDˆ¾ä1¢&©K¸Vuáå!B…B¡ƒ£¼¨(pÈ/¼sÜbDfðeÆŽÕÿ¤‘™0–õ#ÔH a!`èGäáu
+
+c@gB BE
+Èàž—[€ƒ‘ÂñÄi*BV{"@¥4H”Z0`biC?°oß//¿®ÎnYÈsâÄÜ°W1ï« }òy"’C0kÖ’ìì\s*T@c è¹ Xü´ˆ9é>ùˆ•òI&.P¦ëh³ùĸܱs¿pD%mo-2ŽŒÈkJ@ÂUÈØúÓF˜•f <xÌÓÓWæ\YšK{pÒ}y{ ðÝ{Ó}<¨´ÄÏ/ª¦³(uø[‰ðr¡B¡ÐqÁ4ø %套?Ê'wüoôVYaì-DKyzú»¸¸Á:æÑ+ãw„_Ç#º”r”/*
+ÅY0l»ñŠ@î3¥$�6…\¸;Œõ ÓXg6›·ÌV™éùåÂ:Ʀ©¢ü$…PC\ŽÈd$#�ëMÛ4ÌK±K%¥Ù0ªª·éïÅÊ—_›*LÃö)”
+…b,K9C¡D¨P(®Bèþœ
+%B…B¡P(”
+…B¡øˆ°¿¨»g Ǻ¿Ã¿ú«¿btœÿHÀ„B¡P"d€hmëmkïkkïý®
úø×>00t΄B¡P"ä ™Ñ¡½ãª4@‡ƒƒª¿ …B!CƒŽ® " °!B…B¡ŠP‰PƒáW†B¡PE¨Aƒ¡B¡PE¨AƒáY…â*ƒ*B
”
+…*B
”ÿö mss[yEmUU}åw=hÐÀ¿óòòÚžž>ù÷)ÂÖ¶ ëp¹x´£³¿½ƒðM‘_½/TrP gÔ]=Aƒ¶‰½êaÿÀ¹þÁsüJèìº<š²¥õ<b|SŽFK£A‰P¡PèªQ'&¦GÇ$ÅÆ¥Äŧ$%gÖÖµôô/wM¥(éMۼ˯¬ìí;››WúÔS¯îÜu ¯ÿœ¤±‘›¶ñ#E²9Àˆ%ŒRF]}+}1c4(*
+# Á{ÙÜÒuÝuwVxûIÉ)Yp¡0
L60xŽ_Id„ç0¨¥»gˆ[]݃¤$=6w¹E‚Ô´ ŠZµÚ‘È–ÖnRŠÜÄæ‘ž2QlüŠ ¥Š’4”@FÑsĘ6y)_bH#LIz
+!¯4ƒ4üΘ9ò”ϸ‹\¨D¨P(T^”Ÿþõë®»õøqÏã'<¦N½òÊ;•Up –’’ “”’šMâ¦æÎÄÄŒŒÌ|rA0EÅ•11ÉUÕpR^^)ÉâãS¹Ä½,Dèà°Ò‚‡JËjââS…E•d¤¨œÜb趶®5=#[Õ5M½ýç**ëãâÓÊÊk³sŠ¢£-z®—cb“kj›…Þ;Ó‰ÉÌ*èì „ iFbR&õ¦¥ç’«´¬–Hù‹ŸßðË_Þ˜QßÐvQ¯%B…B¡Šð/?ý
fJƒf>ùd «qwå*GlËz·ŠÊ†ÇŸxÑ0þÏçàйÅKV GÆ÷%Ù /¼YYÕ�“a¯±s¢Lü®wßõˆÜ½ñ†;Ù’œ={!—ïMœ,ño½= OfHh4öë¯O0Œÿ‹1mÚœeË $ÁÔi³é% U v‡]7l3(ê½O>/ê÷22
+^{m<ö·ÞÅ/¬ <a©A‰P¡P¨"|üñçQ„5µ-P®Å½ûŽ@ §OûEb8:º–”V¯Y㌠—Ê]¡–êšæ?ý鮉“>ÎÌ*úÕ¯ÿH!YÙEÞ>AÜÝ°a‚Ì’×¥»gø¡‡žÆ>|ÄýÄI/Œë¯¿½¾¡ Ž´áÇgÎø}üñtK‚S‘q¯¼úöÿI“&cÿuü‡^ÞAO<ñ6ìˤ£U\RýÁ‡S-‘%ûö ³PéD/ïÀ‰–\‡»#ó››n¹å.O¯@èS½£J„
+…Báß!BYW‚rÚ¯X¸ÄÞÁ¾qrÞ0~üØnn»Dê¹mÙͲŒýûFD&`<óÌËvvÎó,Ã~úéW‰ë\6A¢‘7 *êé=;eÊ,.ãÒ7XŒ4Ú ‹½pÑÊ Œ={yààqlÿ0ì¥Kí°ÃÂâæ/XŠ1köB—õ› ü9ìа˜ƒ‡Nb@x¤ôðôÇ>pð‚õž{ »óÎ;:”•
+…*¿ç½þÏsisç.KÂ#â݈֮1cÆüµk7¸mÙ…ÄÉI‚G }ö™g_ݼy'w™êƒ«0^}õ]ǵœ×mÚ»÷ˆ¯oHrJ6‘..›
+ +0Þ~{™ d‹EP¦@®LÒæȨDìùó—†cìÝw”“V‘}ØþáL@®^í„ -ÕÅKV;®uݱóÀž=‡Q„;w 2 0‚\AÁ‘Ø ‡üÆ{xܸ‡xú…¡B¡
ªŸ{îõo¼-((28$zÙr´—ñÄã/°ŒÅý”·¨@¨ˆõ)ŽŽëpHÆÝ{Ï=¾ôò[²ì…Ë7Þ˜€s•5/®¶úú…¤¥çé¼n#‚ *6ŽÖ°ˆ¸ ÿèw?üáïH&®ÑÙs³:F¨w×®ƒ‘ñ¸:ØŽ =%ôÆZP;»uØ©i¹6nÃÀJ3˜ktpp))8%%8(8ûС“¸d xàÉßÿî&HWg•
+ÅhPEø‡?Üf|(m<„ÇdayE݇ ~jÆß}÷£YÙ…¨Æ”Ô ‰Ùà|Ãö1Û·ï·*�΋`-(Æ‚…Ë¢ˆ†ñÌ»GÛ/Y‰ýÈ£ÏJä·ÞÇ’ÑаhìÛöÒ‘Ý{c3AçÍŸ¿LtdqIÕãO¼`õ¥ÇûLUnظ]R’ËÇ7ØR ԡhV€¥;J‡J„
+…BáÈãH‚|P ›Ìç
Ìüñ¡ÚÀ“ÉÄ! XÎxøñ…‘²46u,""Ž”x aS"qr2?DzÏââ*²“çjvv!.JÒääûù…øøA¤g²pùr;Y}Cíh;Ž\ìè [PX.ßfPuYy Ù!ਨּœOS^‡ÿÓÓ+€/:›:Y5Šw422ž”䂼ÃÂc(x–¡Òl
+äË
+&T"T(ªGßb`»Å¿ØòýùøîÏãa2ùtÝLI ¦·ï\ßÀ9H2šß¼0Î' X(–4sæ.‚ù6 ‡Éõäâ®õ×ú’]l¡giuÉwý¤7Sš%˜çRYP‰P¡P¨"¼ÄM·±%Æ&þ”_$këµÎxaBW5Övâ…ÌølŸH3×í1¦üÿÛ»a0ŽâÝÿ¢9�\À4×b1å÷{<]ÀÇ_’ ?)„�, rÿšâù~J!�÷º#‰B8�„0Y„ ¦°I!`’BaŸ&‹0´B@ÓBè9H!|!`~¼óšoãAžÝûœ×Z[?� „ÛÖÊR—Ýâtžù –R[³ÿ aJéÒÄð¯Ñë ´ZÄQ$å¿����IEND®B`‚
\ No newline at end of file
diff --git a/core/themes/claro/src/ClaroPreRender.php b/core/themes/claro/src/ClaroPreRender.php
new file mode 100644
index 0000000000000000000000000000000000000000..72ad628807035cfdb93996b4bda03985cd7ecaa1
--- /dev/null
+++ b/core/themes/claro/src/ClaroPreRender.php
@@ -0,0 +1,193 @@
+<?php
+
+namespace Drupal\claro;
+
+use Drupal\Core\Render\Element;
+use Drupal\Core\Security\TrustedCallbackInterface;
+
+/**
+ * Implements trusted prerender callbacks for the Claro theme.
+ *
+ * @internal
+ */
+class ClaroPreRender implements TrustedCallbackInterface {
+
+ /**
+ * Prerender callback for managed_file.
+ */
+ public static function managedFile($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;
+ }
+
+ /**
+ * Prerender callback for Vertical Tabs element.
+ */
+ public static function verticalTabs($element) {
+ $group_type_is_details = isset($element['group']['#type']) && $element['group']['#type'] === 'details';
+ $groups_are_present = isset($element['group']['#groups']) && is_array($element['group']['#groups']);
+
+ // If the vertical tabs have a details group, add attributes to those
+ // details elements so they are styled as accordion items and have BEM
+ // classes.
+ if ($group_type_is_details && $groups_are_present) {
+ $group_keys = Element::children($element['group']['#groups'], TRUE);
+ $first_key = TRUE;
+ $last_group_with_child_key = NULL;
+ $last_group_with_child_key_last_child_key = NULL;
+
+ foreach ($group_keys as $group_key) {
+ $children_keys = Element::children($element['group']['#groups'][$group_key], TRUE);
+
+ foreach ($children_keys as $child_key) {
+ $last_group_with_child_key = $group_key;
+ $type = isset($element['group']['#groups'][$group_key][$child_key]['#type']) ? $element['group']['#groups'][$group_key][$child_key]['#type'] : NULL;
+ if ($type === 'details') {
+ // Add BEM class to specify the details element is in a vertical
+ // tabs group.
+ $element['group']['#groups'][$group_key][$child_key]['#attributes']['class'][] = 'vertical-tabs__item';
+ $element['group']['#groups'][$group_key][$child_key]['#vertical_tab_item'] = TRUE;
+
+ if ($first_key) {
+ $element['group']['#groups'][$group_key][$child_key]['#attributes']['class'][] = 'vertical-tabs__item--first';
+ $first_key = FALSE;
+ }
+
+ $last_group_with_child_key_last_child_key = $child_key;
+ }
+ }
+ }
+
+ if ($last_group_with_child_key && $last_group_with_child_key_last_child_key) {
+ $element['group']['#groups'][$last_group_with_child_key][$last_group_with_child_key_last_child_key]['#attributes']['class'][] = 'vertical-tabs__item--last';
+ }
+
+ $element['#attributes']['class'][] = 'vertical-tabs__items';
+ }
+
+ return $element;
+ }
+
+ /**
+ * Prerender callback for Dropbutton element.
+ *
+ * @todo Revisit after https://www.drupal.org/node/3057581 is added.
+ */
+ public static function dropButton($element) {
+ if (!empty($element['#dropbutton_type']) && is_string($element['#dropbutton_type'])) {
+ $supported_types = ['small', 'extrasmall'];
+
+ if (in_array($element['#dropbutton_type'], $supported_types)) {
+ $element['#attributes']['class'][] = 'dropbutton--' . $element['#dropbutton_type'];
+ }
+ }
+ return $element;
+ }
+
+ /**
+ * Prerender callback for container elements.
+ *
+ * @param array $element
+ * The container element.
+ *
+ * @return array
+ * The processed container element.
+ */
+ public static function container(array $element) {
+ if (!empty($element['#accordion'])) {
+ // The container must work as an accordion list wrapper.
+ $element['#attributes']['class'][] = 'accordion';
+ $children_keys = Element::children($element['#groups']['advanced'], TRUE);
+
+ foreach ($children_keys as $key) {
+ $element['#groups']['advanced'][$key]['#attributes']['class'][] = 'accordion__item';
+
+ // Mark children with type Details as accordion item.
+ if (!empty($element['#groups']['advanced'][$key]['#type']) && $element['#groups']['advanced'][$key]['#type'] === 'details') {
+ $element['#groups']['advanced'][$key]['#accordion_item'] = TRUE;
+ }
+ }
+ }
+
+ return $element;
+ }
+
+ /**
+ * Prerender callback for text_format elements.
+ */
+ public static function textFormat($element) {
+ // Add clearfix for filter wrapper.
+ $element['format']['#attributes']['class'][] = 'clearfix';
+ // 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--extrasmall';
+ $element['format']['format']['#attributes']['class'][] = 'form-element--editor-format';
+
+ // Fix JS inconsistencies of the 'text_textarea_with_summary' widgets.
+ // @todo Remove when https://www.drupal.org/node/3016343 is fixed.
+ if (
+ !empty($element['summary']) &&
+ $element['summary']['#type'] === 'textarea'
+ ) {
+ $element['#attributes']['class'][] = 'js-text-format-wrapper';
+ $element['value']['#wrapper_attributes']['class'][] = 'js-form-type-textarea';
+ }
+ return $element;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public static function trustedCallbacks() {
+ return [
+ 'managedFile',
+ 'verticalTabs',
+ 'dropButton',
+ 'container',
+ 'textFormat',
+ ];
+ }
+
+}
diff --git a/core/themes/claro/templates/admin/admin-block-content.html.twig b/core/themes/claro/templates/admin/admin-block-content.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cc2f419c4f78e55e80cb64384dc487220b075c12
--- /dev/null
+++ b/core/themes/claro/templates/admin/admin-block-content.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation for the content of an administrative block.
+ *
+ * Available variables:
+ * - content: List of administrative menu items. Each menu item contains:
+ * - link: Link to the admin section.
+ * - title: Short name of the section.
+ * - description: Description of the administrative menu item.
+ * - attributes: HTML attributes to be added to the element.
+ * - compact: Boolean indicating whether compact mode is turned on or not.
+ *
+ * @see template_preprocess_admin_block_content()
+ * @see claro_preprocess_admin_block_content()
+ */
+#}
+{%
+ set item_classes = [
+ 'admin-item',
+ ]
+%}
+{% if content %}
+ <dl{{ attributes.addClass('admin-list') }}>
+ {% for item in content %}
+ <div{{ create_attribute({class: item_classes}) }}>
+ <dt class="admin-item__title">{{ item.link }}</dt>
+ {% if item.description %}
+ <dd class="admin-item__description">{{ item.description }}</dd>
+ {% endif %}
+ </div>
+ {% endfor %}
+ </dl>
+{% endif %}
diff --git a/core/themes/claro/templates/admin/admin-page.html.twig b/core/themes/claro/templates/admin/admin-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e15de5c0eeb34579e7e9d09373ba0504115ce6e5
--- /dev/null
+++ b/core/themes/claro/templates/admin/admin-page.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override for an administrative page.
+ *
+ * Available variables:
+ * - system_compact_link: Themed link to toggle compact view.
+ * - containers: An list of administrative blocks keyed by position: left or
+ * right. Contains:
+ * - blocks: A list of blocks within a container.
+ *
+ * @see template_preprocess_admin_page()
+ */
+#}
+
+{{ system_compact_link }}
+ <div class="layout-row clearfix">
+ {% for container in containers %}
+ <div class="layout-column layout-column--half">
+ {% for block in container.blocks %}
+ {{ block }}
+ {% endfor %}
+ </div>
+ {% endfor %}
+</div>
diff --git a/core/themes/claro/templates/admin/config_translation_manage_form_element.html.twig b/core/themes/claro/templates/admin/config_translation_manage_form_element.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8e9c1abde5fd3e91838f9f857a504b4b610601c2
--- /dev/null
+++ b/core/themes/claro/templates/admin/config_translation_manage_form_element.html.twig
@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override for a form element in config_translation.
+ *
+ * Available variables:
+ * - element: Array that represents the element shown in the form.
+ * - source: The source of the translation.
+ * - translation: The translation for the target language.
+ *
+ * @see template_preprocess()
+ */
+#}
+<div class="translation-set layout-row clearfix">
+ <div class="layout-column layout-column--half translation-set__source">
+ {{ element.source }}
+ </div>
+ <div class="layout-column layout-column--half translation-set__translated">
+ {{ element.translation }}
+ </div>
+</div>
diff --git a/core/themes/claro/templates/admin/indentation.html.twig b/core/themes/claro/templates/admin/indentation.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7618abab8a3e574b2b59356aa3719e8a4450e7c5
--- /dev/null
+++ b/core/themes/claro/templates/admin/indentation.html.twig
@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Theme override for a set of indentation divs.
+ *
+ * These <div> tags are used for drag and drop tables.
+ *
+ * Available variables:
+ * - size: Optional. The number of indentations to create.
+ */
+#}
+{% for i in 1..size if size > 0 %}<div class="js-indentation indentation">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="tree"
+ width="25"
+ height="25"
+ viewBox="0 0 25 25">
+ <path
+ class="tree__item tree__item-child-ltr tree__item-child-last-ltr tree__item-horizontal tree__item-horizontal-right"
+ d="M12,12.5 H25"
+ stroke="#888"/>
+ <path
+ class="tree__item tree__item-child-rtl tree__item-child-last-rtl tree__item-horizontal tree__horizontal-left"
+ d="M0,12.5 H13"
+ stroke="#888"/>
+ <path
+ class="tree__item tree__item-child-ltr tree__item-child-rtl tree__item-child-last-ltr tree__item-child-last-rtl tree__vertical tree__vertical-top"
+ d="M12.5,12 v-99"
+ stroke="#888"/>
+ <path
+ class="tree__item tree__item-child-ltr tree__item-child-rtl tree__vertical tree__vertical-bottom"
+ d="M12.5,12 v99"
+ stroke="#888"/>
+ </svg>
+</div>{% endfor %}
diff --git a/core/themes/claro/templates/admin/tablesort-indicator.html.twig b/core/themes/claro/templates/admin/tablesort-indicator.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b681af30b152764115dec63527b0331462e9a4fb
--- /dev/null
+++ b/core/themes/claro/templates/admin/tablesort-indicator.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Theme override for displaying a tablesort indicator.
+ *
+ * Available variables:
+ * - style: Either 'asc' or 'desc', indicating the sorting direction.
+ *
+ * @todo Remove after https://www.drupal.org/node/1973418 is in.
+ */
+#}
+{%
+ set classes = [
+ 'tablesort',
+ 'tablesort--' ~ style,
+ ]
+%}
+<span{{ attributes.addClass(classes) }}>
+ {% if style in ['asc', 'desc'] %}
+ <span class="visually-hidden">
+ {% if style == 'asc' -%}
+ {{ 'Sort ascending'|t }}
+ {% else -%}
+ {{ 'Sort descending'|t }}
+ {% endif %}
+ </span>
+ {% endif %}
+</span>
diff --git a/core/themes/claro/templates/admin/update-version.html.twig b/core/themes/claro/templates/admin/update-version.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a26a8e078cb9b9a3c7dc1e7485aea62176ccb23f
--- /dev/null
+++ b/core/themes/claro/templates/admin/update-version.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override for the version display of a project.
+ *
+ * Available variables:
+ * - attributes: HTML attributes suitable for a container element.
+ * - title: The title of the project.
+ * - version: A list of data about the latest released version, containing:
+ * - version: The version number.
+ * - date: The date of the release.
+ * - download_link: The URL for the downloadable file.
+ * - release_link: The URL for the release notes.
+ */
+#}
+<div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
+ <div class="layout-row clearfix">
+ <div class="project-update__version-title layout-column layout-column--quarter">{{ title }}</div>
+ <div class="project-update__version-details layout-column layout-column--quarter">
+ <a href="{{ version.release_link }}">{{ version.version }}</a>
+ <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
+ </div>
+ <div class="layout-column layout-column--half">
+ <ul class="project-update__version-links">
+ <li class="project-update__download-link">
+ <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
+ </li>
+ <li class="project-update__release-notes-link">
+ <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
diff --git a/core/themes/claro/templates/admin/views-ui-views-listing-table.html.twig b/core/themes/claro/templates/admin/views-ui-views-listing-table.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9eb02168383d98b1a53847d85e7460873990c94c
--- /dev/null
+++ b/core/themes/claro/templates/admin/views-ui-views-listing-table.html.twig
@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Theme override for views listing table.
+ *
+ * Available variables:
+ * - headers: Contains table headers.
+ * - rows: Contains multiple rows. Each row contains:
+ * - view_name: The human-readable name of the view.
+ * - machine_name: Machine name of the view.
+ * - description: The description of the view.
+ * - displays: List of displays attached to the view.
+ * - operations: List of available operations.
+ *
+ * @see template_preprocess_views_ui_views_listing_table()
+ *
+ * @todo Remove this template after
+ * https://www.drupal.org/project/drupal/issues/3059872 is fixed.
+ */
+#}
+<table{{ attributes.addClass('responsive-enabled') }}>
+ <thead>
+ <tr>
+ {% for header in headers %}
+ <th{{ header.attributes }}>{{ header.data }}</th>
+ {% endfor %}
+ </tr>
+ </thead>
+ <tbody>
+ {% for row in rows %}
+ <tr{{ row.attributes }}>
+ <td class="views-ui-view-name">
+ <strong data-drupal-selector="views-table-filter-text-source">{{ row.data.view_name.data }}</strong>
+ </td>
+ <td class="views-ui-view-machine-name" data-drupal-selector="views-table-filter-text-source">
+ {{ row.data.machine_name.data }}
+ </td>
+ <td class="views-ui-view-description" data-drupal-selector="views-table-filter-text-source">
+ {{ row.data.description.data }}
+ </td>
+ <td class="views-ui-view-displays">
+ {{ row.data.displays.data }}
+ </td>
+ <td class="views-ui-view-operations">
+ {{ row.data.operations.data }}
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
diff --git a/core/themes/claro/templates/block--local-actions-block.html.twig b/core/themes/claro/templates/block--local-actions-block.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..5efe361fd6d2b60b7fe5efab0b2f5ee182c2ac61
--- /dev/null
+++ b/core/themes/claro/templates/block--local-actions-block.html.twig
@@ -0,0 +1,14 @@
+{% extends "@block/block.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for local actions (primary admin actions.)
+ */
+#}
+{% block content %}
+ {% if content %}
+ <ul class="local-actions">
+ {{ content }}
+ </ul>
+ {% endif %}
+{% endblock %}
diff --git a/core/themes/claro/templates/block-content-add-list.html.twig b/core/themes/claro/templates/block-content-add-list.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e5cb0894a3e92387fe1b57221cf38dc55e4aae38
--- /dev/null
+++ b/core/themes/claro/templates/block-content-add-list.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a list of custom block types.
+ *
+ * Available variables:
+ * - bundles: List of blockcontent types, each with the following properties:
+ * - label: Block content type label
+ * - add_link: \Drupal\Core\Link link instance to create an entity of this
+ * block content type. This is a GeneratedLink originally and is switched by
+ * claro_preprocess_block_content_add_list().
+ * - description: A description of this custom block type.
+ *
+ * @todo Revisit after https://www.drupal.org/node/3026221 has been solved.
+ *
+ * @see template_preprocess_block_content_add_list()
+ * @see claro_preprocess_block_content_add_list()
+ */
+ #}
+{% extends '@claro/entity-add-list.html.twig' %}
diff --git a/core/themes/claro/templates/block/block--local-tasks-block.html.twig b/core/themes/claro/templates/block/block--local-tasks-block.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..54967c2e87dca300c3220e4434b1e796edb8495e
--- /dev/null
+++ b/core/themes/claro/templates/block/block--local-tasks-block.html.twig
@@ -0,0 +1,12 @@
+{% extends "block.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for tabs.
+ */
+#}
+{% block content %}
+ {% if content %}
+ {{ content }}
+ {% endif %}
+{% endblock %}
diff --git a/core/themes/claro/templates/breadcrumb.html.twig b/core/themes/claro/templates/breadcrumb.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8b26583af1e0f0c8c21f6bb64bfe459a90c58ba8
--- /dev/null
+++ b/core/themes/claro/templates/breadcrumb.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override for a breadcrumb trail.
+ *
+ * Available variables:
+ * - breadcrumb: Breadcrumb trail items.
+ */
+#}
+{% if breadcrumb %}
+ <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
+ <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
+ <ol class="breadcrumb__list">
+ {% for item in breadcrumb %}
+ <li class="breadcrumb__item">
+ {% if item.url %}
+ <a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
+ {% else %}
+ {{ item.text }}
+ {% endif %}
+ </li>
+ {% endfor %}
+ </ol>
+ </nav>
+{% endif %}
diff --git a/core/themes/claro/templates/content-edit/file-managed-file.html.twig b/core/themes/claro/templates/content-edit/file-managed-file.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c8341156ee0458324af3d7ec2b813fddbd2a89aa
--- /dev/null
+++ b/core/themes/claro/templates/content-edit/file-managed-file.html.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * @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.
+ * - 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.
+ *
+ * @see template_preprocess_file_managed_file()
+ * @see claro_preprocess_file_managed_file()
+ */
+#}
+{%
+ set classes = [
+ 'js-form-managed-file',
+ 'form-managed-file',
+ multiple ? 'is-multiple' : 'is-single',
+ 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-wrapper">
+ <div class="form-managed-file__meta">
+ <div class="form-managed-file__meta-items">
+ {{ element.description }}
+ {% if display %}
+ {{ element.display }}
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ {% endif %}
+</div>
diff --git a/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig b/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9dece3f5959a2e111b83e40827d242b7ecf2426c
--- /dev/null
+++ b/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @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.
+ * - has_table: True when the table is not empty AND can be accessed.
+ *
+ * @see template_preprocess_file_widget_multiple()
+ * @see claro_preprocess_file_widget_multiple()
+ */
+#}
+<div class="file-widget-multiple{{ has_table ? ' has-table' }}">
+ <div class="file-widget-multiple__table-wrapper">
+ {{ table }}
+ {{ element }}
+ </div>
+</div>
diff --git a/core/themes/claro/templates/content-edit/image-widget.html.twig b/core/themes/claro/templates/content-edit/image-widget.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..87fa3b4a218df77bb4e472d293eb8a0039f4bde7
--- /dev/null
+++ b/core/themes/claro/templates/content-edit/image-widget.html.twig
@@ -0,0 +1,59 @@
+{#
+/**
+ * @file
+ * Theme override for an image field widget.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - data: Render elements of the image widget.
+ * - 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 an image.
+ * - has_meta: true when one of the title or alt inputs are enabled and visible.
+ *
+ * @see template_preprocess_image_widget()
+ * @see stable_preprocess_image_widget()
+ * @see claro_preprocess_image_widget()
+ */
+#}
+{%
+ set classes = [
+ 'form-managed-file--image',
+ multiple ? 'is-multiple' : 'is-single',
+ upload ? 'has-upload' : 'no-upload',
+ has_value ? 'has-value' : 'no-value',
+ has_meta ? 'has-meta' : 'no-meta',
+ data.preview ? 'has-preview' : 'no-preview',
+ ]
+%}
+<div{{ attributes.addClass(classes).removeClass('clearfix') }}>
+ <div class="form-managed-file__main">
+ {{ data|without('preview', 'alt', 'title')}}
+ </div>
+
+ {% if has_meta or data.preview %}
+ <div class="form-managed-file__meta-wrapper">
+ <div class="form-managed-file__meta">
+ {% if data.preview %}
+ <div class="form-managed-file__image-preview image-preview">
+ <div class="image-preview__img-wrapper">
+ {{ data.preview }}
+ </div>
+ </div>
+ {% endif %}
+
+ {% if data.alt or data.title %}
+ <div class="form-managed-file__meta-items">
+ {% endif %}
+
+ {{ data.alt }}
+ {{ data.title }}
+
+ {% if data.alt or data.title %}
+ </div>
+ {% endif %}
+ </div>
+ </div>
+ {% endif %}
+</div>
diff --git a/core/themes/claro/templates/datetime-form.html.twig b/core/themes/claro/templates/datetime-form.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9b56a9160e76c482096e08143b3822dc3e5a5065
--- /dev/null
+++ b/core/themes/claro/templates/datetime-form.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override of a datetime form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the datetime form element.
+ * - content: The datelist form element to be output.
+ *
+ * @see template_preprocess_datetime_form()
+ */
+#}
+<div{{ attributes.addClass('form-items-inline') }}>
+ {{ content }}
+</div>
diff --git a/core/themes/claro/templates/datetime-wrapper.html.twig b/core/themes/claro/templates/datetime-wrapper.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4215b28ff2310498b0eced55bbe1031a9f49ec5d
--- /dev/null
+++ b/core/themes/claro/templates/datetime-wrapper.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override of a datetime form wrapper.
+ *
+ * @todo Refactor when https://www.drupal.org/node/3010558 is fixed.
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{%
+ set title_classes = [
+ 'form-item__label',
+ required ? 'js-form-required',
+ required ? 'form-required',
+ errors ? 'has-error',
+ ]
+%}
+<div class="form-item form-datetime-wrapper">
+{% if title %}
+ <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+{% endif %}
+{{ content }}
+{% if errors %}
+ <div class="form-item__error-message">
+ {{ errors }}
+ </div>
+{% endif %}
+{% if description %}
+ <div{{ description_attributes.addClass('form-item__description') }}>
+ {{ description }}
+ </div>
+{% endif %}
+</div>
diff --git a/core/themes/claro/templates/details.html.twig b/core/themes/claro/templates/details.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..88f72ee1369d87e9e19330a5548c4f7b16de374a
--- /dev/null
+++ b/core/themes/claro/templates/details.html.twig
@@ -0,0 +1,91 @@
+{#
+/**
+ * @file
+ * Theme override for a details element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ * - 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()
+ */
+#}
+{#
+ Prefix 'details' class to avoid collision with Modernizr.
+
+ @todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
+#}
+{%
+ set classes = [
+ 'claro-details',
+ accordion ? 'claro-details--accordion',
+ accordion_item ? 'claro-details--accordion-item',
+ ]
+%}
+{%
+ set content_wrapper_classes = [
+ 'claro-details__wrapper',
+ 'details-wrapper',
+ accordion ? 'claro-details__wrapper--accordion',
+ accordion_item ? 'claro-details__wrapper--accordion-item',
+ ]
+%}
+{%
+ set inner_wrapper_classes = [
+ 'claro-details__content',
+ accordion ? 'claro-details__content--accordion',
+ accordion_item ? 'claro-details__content--accordion-item',
+ ]
+%}
+<details{{ attributes.addClass(classes) }}>
+ {%- if title -%}
+ {%
+ set summary_classes = [
+ 'claro-details__summary',
+ required ? 'js-form-required',
+ required ? 'form-required',
+ accordion ? 'claro-details__summary--accordion',
+ accordion_item ? 'claro-details__summary--accordion-item',
+ ]
+ %}
+ <summary{{ summary_attributes.addClass(summary_classes) }}>
+ {{- title -}}
+ {%- if required -%}
+ <span class="required-mark"></span>
+ {%- endif -%}
+ </summary>
+ {%- endif -%}
+ <div{{ content_attributes.addClass(content_wrapper_classes) }}>
+ {% if accordion or accordion_item %}
+ <div{{ create_attribute({class: inner_wrapper_classes}) }}>
+ {% endif %}
+
+ {% if errors %}
+ <div class="form-item form-item--error-message">
+ {{ errors }}
+ </div>
+ {% endif %}
+ {%- if description -%}
+ <div class="claro-details__description{{ disabled ? ' is-disabled' }}">{{ description }}</div>
+ {%- endif -%}
+ {%- if children -%}
+ {{ children }}
+ {%- endif -%}
+ {%- if value -%}
+ {{ value }}
+ {%- endif -%}
+
+ {% if accordion or accordion_item %}
+ </div>
+ {% endif %}
+ </div>
+</details>
diff --git a/core/themes/claro/templates/entity-add-list.html.twig b/core/themes/claro/templates/entity-add-list.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..98683b0bb4b2cbb45b6a2c7d8fd6835f54456420
--- /dev/null
+++ b/core/themes/claro/templates/entity-add-list.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override to to present a list of available bundles.
+ *
+ * Available variables:
+ * - bundles: A list of bundles, each with the following properties:
+ * - label: Bundle label.
+ * - description: Bundle description.
+ * - add_link: \Drupal\Core\Link link instance to create an entity of this
+ * bundle.
+ * - add_bundle_message: The message shown when there are no bundles. Only
+ * available if the entity type uses bundle entities.
+ *
+ * @see template_preprocess_entity_add_list()
+ */
+#}
+{%
+ set item_classes = [
+ 'admin-item',
+ ]
+%}
+{% if bundles is not empty %}
+ <dl{{ attributes.addClass('admin-list') }}>
+ {% for bundle in bundles %}
+ {#
+ Add 'admin-item__link' class to the link attributes.
+ This is needed for keeping the original attributes of the link's url.
+ #}
+ {% set bundle_attributes = bundle.add_link.url.getOption('attributes') ?: {} %}
+ {% set link_attributes = create_attribute(bundle_attributes).addClass('admin-item__link') %}
+ <div{{ create_attribute({ class: item_classes }) }}>
+ <dt class="admin-item__title">
+ <a href="{{ bundle.add_link.url }}"{{ link_attributes|without('href') }}>
+ {{ bundle.add_link.text }}
+ </a>
+ </dt>
+ {# Don't print empty description wrapper if there is no description #}
+ {% if bundle.description %}
+ <dd class="admin-item__description">{{ bundle.description }}</dd>
+ {% endif %}
+ </div>
+ {% endfor %}
+ </dl>
+{% elseif add_bundle_message is not empty %}
+ <p>
+ {{ add_bundle_message }}
+ </p>
+{% endif %}
diff --git a/core/themes/claro/templates/field/file-link.html.twig b/core/themes/claro/templates/field/file-link.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..891c7a124d3a4d739e080d30be49958c3e182259
--- /dev/null
+++ b/core/themes/claro/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>
diff --git a/core/themes/claro/templates/fieldset.html.twig b/core/themes/claro/templates/fieldset.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3609aba98fa6ace6b5cd59bca34c85f4e9f3cd45
--- /dev/null
+++ b/core/themes/claro/templates/fieldset.html.twig
@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for a fieldset element and its children.
+ *
+ * @see template_preprocess_fieldset()
+ * @see claro_preprocess_fieldset()
+ */
+#}
+{%
+ set classes = [
+ 'fieldset',
+ attributes.hasClass('fieldgroup') ? 'fieldset--group',
+ 'js-form-item',
+ 'form-item',
+ 'js-form-wrapper',
+ 'form-wrapper',
+ ]
+%}
+{%
+ set wrapper_classes = [
+ 'fieldset__wrapper',
+ attributes.hasClass('fieldgroup') ? 'fieldset__wrapper--group',
+ ]
+%}
+{%
+ set legend_span_classes = [
+ 'fieldset__label',
+ attributes.hasClass('fieldgroup') ? 'fieldset__label--group',
+ required ? 'js-form-required',
+ required ? 'form-required',
+ ]
+%}
+{%
+ set legend_classes = [
+ 'fieldset__legend',
+ attributes.hasClass('fieldgroup') and not attributes.hasClass('form-composite') ? 'fieldset__legend--group',
+ attributes.hasClass('form-composite') ? 'fieldset__legend--composite',
+ title_display == 'invisible' ? 'fieldset__legend--invisible' : 'fieldset__legend--visible',
+ ]
+%}
+{%
+ set description_classes = [
+ 'fieldset__description',
+ ]
+%}
+
+<fieldset{{ attributes.addClass(classes) }}>
+ {# Always wrap fieldset legends in a <span> for CSS positioning. #}
+ {% if legend.title %}
+ <legend{{ legend.attributes.addClass(legend_classes) }}>
+ <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
+ </legend>
+ {% endif %}
+
+ <div{{ content_attributes.addClass(wrapper_classes) }}>
+ {% if inline_items %}
+ <div class="container-inline">
+ {% endif %}
+
+ {% if prefix %}
+ <span class="fieldset__prefix">{{ prefix }}</span>
+ {% endif %}
+ {{ children }}
+ {% if suffix %}
+ <span class="fieldset__suffix">{{ suffix }}</span>
+ {% endif %}
+ {% if errors %}
+ <div class="fieldset__error-message">
+ {{ errors }}
+ </div>
+ {% endif %}
+ {% if description.content %}
+ <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
+ {% endif %}
+
+ {% if inline_items %}
+ </div>
+ {% endif %}
+ </div>
+</fieldset>
diff --git a/core/themes/claro/templates/filter/filter-guidelines.html.twig b/core/themes/claro/templates/filter/filter-guidelines.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e7d7ab461559425f31330c6b2951ad8d8adec30c
--- /dev/null
+++ b/core/themes/claro/templates/filter/filter-guidelines.html.twig
@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Theme override for guidelines for a text format.
+ *
+ * Available variables:
+ * - format: Contains information about the current text format, including the
+ * following:
+ * - name: The name of the text format, potentially unsafe and needs to be
+ * escaped.
+ * - format: The machine name of the text format, e.g. 'basic_html'.
+ * - attributes: HTML attributes for the containing element.
+ * - tips: Descriptions and a CSS ID in the form of 'module-name/filter-id'
+ * (only used when 'long' is TRUE) for each filter in one or more text
+ * formats.
+ *
+ * @see template_preprocess_filter_tips()
+ */
+#}
+{%
+ set classes = [
+ 'filter-guidelines__item',
+ 'filter-guidelines__item--' ~ format.id|clean_class,
+ ]
+%}
+<div{{ attributes.addClass(classes) }}>
+ <h4 class="label">{{ format.label }}</h4>
+ {{ tips }}
+</div>
diff --git a/core/themes/claro/templates/filter/filter-tips.html.twig b/core/themes/claro/templates/filter/filter-tips.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..665b56798eedfce5cdfb53c0b9abe30ba8d0ec81
--- /dev/null
+++ b/core/themes/claro/templates/filter/filter-tips.html.twig
@@ -0,0 +1,66 @@
+{#
+/**
+ * @file
+ * Theme override for a set of filter tips.
+ *
+ * Available variables:
+ * - tips: Descriptions and a CSS ID in the form of 'module-name/filter-id'
+ * (only used when 'long' is TRUE) for each filter in one or more text
+ * formats.
+ * - long: A flag indicating whether the passed-in filter tips contain extended
+ * explanations, i.e. intended to be output on the path 'filter/tips'
+ * (TRUE), or are in a short format, i.e. suitable to be displayed below a
+ * form element. Defaults to FALSE.
+ * - multiple: A flag indicating there is more than one filter tip.
+ *
+ * @see template_preprocess_filter_tips()
+ * @see claro_preprocess_filter_tips()
+ */
+#}
+{% if multiple %}
+ <h2>{{ 'Text Formats'|t }}</h2>
+{% endif %}
+
+{% if tips|length %}
+ {% if multiple %}
+ <div class="compose-tips">
+ {% endif %}
+
+ {% for name, tip in tips %}
+ {% if multiple %}
+ {%
+ set tip_classes = [
+ 'compose-tips__item',
+ 'compose-tips__item--name-' ~ name|clean_class,
+ ]
+ %}
+ <div{{ tip.attributes.addClass(tip_classes) }}>
+ {% endif %}
+ {% if multiple or long %}
+ <h3>{{ tip.name }}</h3>
+ {% endif %}
+
+ {% if tip.list|length %}
+ <ul class="filter-tips {{ long ? 'filter-tips--long' : 'filter-tips--short'}}">
+ {% for item in tip.list %}
+ {%
+ set item_classes = [
+ 'filter-tips__item',
+ long ? 'filter-tips__item--long' : 'filter-tips__item--short',
+ long ? 'filter-tips__item--id-' ~ item.id|clean_class,
+ ]
+ %}
+ <li{{ item.attributes.addClass(item_classes) }}>{{ item.tip }}</li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+
+ {% if multiple %}
+ </div>
+ {% endif %}
+ {% endfor %}
+
+ {% if multiple %}
+ </div>
+ {% endif %}
+{% endif %}
diff --git a/core/themes/claro/templates/form-element-label.html.twig b/core/themes/claro/templates/form-element-label.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f05010d686d6f67cdfc028adcc6af2df4fe735b7
--- /dev/null
+++ b/core/themes/claro/templates/form-element-label.html.twig
@@ -0,0 +1,12 @@
+{#
+/**
+ * @file
+ * Template override for a form element label.
+ */
+#}
+
+{% extends '@classy/form/form-element-label.html.twig' %}
+
+{%
+ set attributes = attributes.addClass('form-item__label')
+%}
diff --git a/core/themes/claro/templates/form-element.html.twig b/core/themes/claro/templates/form-element.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b474619df599a8625b153015d636df0004532744
--- /dev/null
+++ b/core/themes/claro/templates/form-element.html.twig
@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Theme override for a form element.
+ *
+ * @todo Remove when https://www.drupal.org/node/3010558 is fixed.
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{#
+ Most of core-provided js assumes that the CSS class pattern js-form-item-[something] or
+ js-form-type-[something] exists on form items. We have to keep them.
+#}
+{%
+ set classes = [
+ 'js-form-item',
+ 'form-item',
+ 'js-form-type-' ~ type|clean_class,
+ 'form-type--' ~ type|clean_class,
+ type in ['checkbox', 'radio'] ? 'form-type--boolean',
+ 'js-form-item-' ~ name|clean_class,
+ 'form-item--' ~ name|clean_class,
+ title_display not in ['after', 'before'] ? 'form-item--no-label',
+ disabled == 'disabled' ? 'form-item--disabled',
+ errors ? 'form-item--error',
+ ]
+%}
+{%
+ set description_classes = [
+ 'form-item__description',
+ description_display == 'invisible' ? 'visually-hidden',
+ ]
+%}
+<div{{ attributes.addClass(classes) }}>
+ {% if label_display in ['before', 'invisible'] %}
+ {{ label }}
+ {% endif %}
+ {% if prefix is not empty %}
+ <span class="form-item__prefix{{disabled == 'disabled' ? ' is-disabled'}}">{{ prefix }}</span>
+ {% endif %}
+ {% if description_display == 'before' and description.content %}
+ <div{{ description.attributes.addClass(description_classes) }}>
+ {{ description.content }}
+ </div>
+ {% endif %}
+ {{ children }}
+ {% if suffix is not empty %}
+ <span class="form-item__suffix{{disabled == 'disabled' ? ' is-disabled'}}">{{ suffix }}</span>
+ {% endif %}
+ {% if label_display == 'after' %}
+ {{ label }}
+ {% endif %}
+ {% if errors %}
+ <div class="form-item__error-message">
+ {{ errors }}
+ </div>
+ {% endif %}
+ {% if description_display in ['after', 'invisible'] and description.content %}
+ <div{{ description.attributes.addClass(description_classes) }}>
+ {{ description.content }}
+ </div>
+ {% endif %}
+</div>
diff --git a/core/themes/claro/templates/form/field-multiple-value-form.html.twig b/core/themes/claro/templates/form/field-multiple-value-form.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c8d8a9b8145ea3dc62de7728cb016fc88ff6a0b5
--- /dev/null
+++ b/core/themes/claro/templates/form/field-multiple-value-form.html.twig
@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Theme override for multiple value form element.
+ *
+ * Available variables for all fields:
+ * - multiple: Whether there are multiple instances of the field.
+ * - disabled: Whether the inpur is disabled.
+ *
+ * Available variables for single cardinality fields:
+ * - elements: Form elements to be rendered.
+ *
+ * Available variables when there are multiple fields.
+ * - table: Table of field items.
+ * - description: The description element containing the following properties:
+ * - content: The description content of the form element.
+ * - attributes: HTML attributes to apply to the description container.
+ * - button: "Add another item" button.
+ *
+ * @see template_preprocess_field_multiple_value_form()
+ * @see claro_preprocess_field_multiple_value_form()
+ */
+#}
+{% if multiple %}
+ {%
+ set classes = [
+ 'js-form-item',
+ 'form-item',
+ 'form-item--multiple',
+ disabled ? 'form-item--disabled',
+ ]
+ %}
+ {%
+ set description_classes = [
+ 'form-item__description',
+ disabled ? 'is-disabled',
+ ]
+ %}
+ <div{{ attributes.addClass(classes) }}>
+ {{ table }}
+ {% if description.content %}
+ <div{{ description.attributes.addClass(description_classes) }} >{{ description.content }}</div>
+ {% endif %}
+ {% if button %}
+ <div class="form-actions">{{ button }}</div>
+ {% endif %}
+ </div>
+{% else %}
+ {% for element in elements %}
+ {{ element }}
+ {% endfor %}
+{% endif %}
diff --git a/core/themes/claro/templates/form/input.html.twig b/core/themes/claro/templates/form/input.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f8a6cab610f9e4f066105e93a8cc08dd526322ea
--- /dev/null
+++ b/core/themes/claro/templates/form/input.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme override for an 'input' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ *
+ * @see template_preprocess_input()
+ * @see claro_preprocess_input()
+ */
+#}
+{% spaceless %}
+{% if autocomplete_message %}
+ <div class="claro-autocomplete">
+ <input{{ attributes }}/>
+ <div hidden class="claro-autocomplete__message">{{autocomplete_message}}</div>
+ </div>
+ {{ children }}
+{% else %}
+ <input{{ attributes }}/>{{ children }}
+{% endif %}
+{% endspaceless %}
diff --git a/core/themes/claro/templates/install-page.html.twig b/core/themes/claro/templates/install-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c51fe63699675e15ac7044fa3e039aff152abfdf
--- /dev/null
+++ b/core/themes/claro/templates/install-page.html.twig
@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Claro theme implementation to display a Drupal installation page.
+ *
+ * All available variables are mirrored in page.html.twig.
+ * Some may be blank but they are provided for consistency.
+ *
+ * @see template_preprocess_install_page()
+ */
+#}
+<div class="layout-container">
+
+ <header role="banner">
+ {% if site_name %}
+ <h1 class="page-title">
+ {{ site_name }}
+ {% if site_version %}
+ <span class="site-version">{{ site_version }}</span>
+ {% endif %}
+ </h1>
+ {% endif %}
+ </header>
+
+ {% if page.sidebar_first %}
+ <aside class="layout-sidebar-first" role="complementary">
+ {{ page.sidebar_first }}
+ </aside>{# /.layout-sidebar-first #}
+ {% endif %}
+
+ <main role="main">
+ {% if title %}
+ <h2 class="heading-a">{{ title }}</h2>
+ {% endif %}
+ {{ page.highlighted }}
+ {{ page.content }}
+ </main>
+
+ {% if page.sidebar_second %}
+ <aside class="layout-sidebar-second" role="complementary">
+ {{ page.sidebar_second }}
+ </aside>{# /.layout-sidebar-second #}
+ {% endif %}
+
+ {% if page.page_bottom %}
+ <footer role="contentinfo">
+ {{ page.page_bottom }}
+ </footer>
+ {% endif %}
+
+</div>{# /.layout-container #}
diff --git a/core/themes/claro/templates/maintenance-page.html.twig b/core/themes/claro/templates/maintenance-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4e569e1e687ffbd1498c4ffe16d689be80709d90
--- /dev/null
+++ b/core/themes/claro/templates/maintenance-page.html.twig
@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page while offline.
+ *
+ * All available variables are mirrored in page.html.twig.
+ * Some may be blank but they are provided for consistency.
+ *
+ * @see template_preprocess_maintenance_page()
+ */
+#}
+<div class="layout-container">
+
+ <header role="banner">
+ {% if site_name %}
+ <h1 class="page-title">{{ site_name }}</h1>
+ {% endif %}
+ </header>
+
+ {% if page.sidebar_first %}
+ <aside class="layout-sidebar-first" role="complementary">
+ {{ page.sidebar_first }}
+ </aside>{# /.layout-sidebar-first #}
+ {% endif %}
+
+ <main role="main">
+ {% if title %}
+ <h1>{{ title }}</h1>
+ {% endif %}
+ {{ page.highlighted }}
+ {{ page.content }}
+ </main>
+
+ {% if page.page_bottom %}
+ <footer role="contentinfo">
+ {{ page.page_bottom }}
+ </footer>
+ {% endif %}
+
+</div>{# /.layout-container #}
diff --git a/core/themes/claro/templates/menu-local-tasks.html.twig b/core/themes/claro/templates/menu-local-tasks.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f0701506042d59e4775957d49d158d2e84d08b32
--- /dev/null
+++ b/core/themes/claro/templates/menu-local-tasks.html.twig
@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Claro theme implementation to display primary and secondary local tasks.
+ *
+ * Available variables:
+ * - primary: HTML list items representing primary tasks.
+ * - secondary: HTML list items representing primary tasks.
+ *
+ * Each item in these variables (primary and secondary) can be individually
+ * themed in menu-local-task.html.twig.
+ *
+ * @ingroup themeable
+ */
+#}
+{% if primary %}
+ <h2 id="primary-tabs-title" class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
+ <nav role="navigation" class="tabs-wrapper is-horizontal is-collapsible" aria-labelledby="primary-tabs-title" data-drupal-nav-tabs>
+ <ul class="tabs tabs--primary clearfix" data-drupal-nav-tabs-target>{{ primary }}</ul>
+ </nav>
+{% endif %}
+{% if secondary %}
+ <h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
+ <nav role="navigation" class="tabs-wrapper is-horizontal is-collapsible" aria-labelledby="secondary-tabs-title" data-drupal-nav-tabs>
+ <ul class="tabs tabs--secondary clearfix" data-drupal-nav-tabs-target>{{ secondary }}</ul>
+ </nav>
+{% endif %}
diff --git a/core/themes/claro/templates/misc/status-messages.html.twig b/core/themes/claro/templates/misc/status-messages.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..91207a54ccd327b48132f9de100b51d2ddfd88ff
--- /dev/null
+++ b/core/themes/claro/templates/misc/status-messages.html.twig
@@ -0,0 +1,72 @@
+{#
+/**
+ * @file
+ * Theme override for status messages.
+ *
+ * Displays status, error, and warning messages, grouped by type.
+ *
+ * An invisible heading identifies the messages for assistive technology.
+ * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
+ * for info.
+ *
+ * Add an ARIA label to the contentinfo area so that assistive technology
+ * user agents will better describe this landmark.
+ *
+ * Available variables:
+ * - message_list: List of messages to be displayed, grouped by type.
+ * - status_headings: List of all status types.
+ * - attributes: HTML attributes for the element, including:
+ * - class: HTML classes.
+ * - title_ids: A list of unique ids keyed by message type.
+ *
+ * @see claro_preprocess_status_messages().
+ */
+#}
+<div data-drupal-messages class="messages-list">
+{% for type, messages in message_list %}
+ {%
+ set classes = [
+ 'messages-list__item',
+ 'messages',
+ 'messages--' ~ type,
+ ]
+ %}
+ {%
+ set is_message_with_title = status_headings[type]
+ %}
+ {%
+ set is_message_with_icon = type in ['error', 'status', 'warning']
+ %}
+
+ <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
+ {% if type == 'error' %}
+ <div role="alert">
+ {% endif %}
+ {% if is_message_with_title or is_message_with_icon %}
+ <div class="messages__header">
+ {% if is_message_with_title %}
+ <h2 id="{{ title_ids[type] }}" class="messages__title">
+ {{ status_headings[type] }}
+ </h2>
+ {% endif %}
+ </div>
+ {% endif %}
+ <div class="messages__content">
+ {% if messages|length > 1 %}
+ <ul class="messages__list">
+ {% for message in messages %}
+ <li class="messages__item">{{ message }}</li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ {{ messages|first }}
+ {% endif %}
+ </div>
+ {% if type == 'error' %}
+ </div>
+ {% endif %}
+ </div>
+ {# Remove type specific classes. #}
+ {% set attributes = attributes.removeClass(classes) %}
+{% endfor %}
+</div>
diff --git a/core/themes/claro/templates/navigation/details--vertical-tabs.html.twig b/core/themes/claro/templates/navigation/details--vertical-tabs.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ba0d82325689927a8dd204bfb7e54c444f126125
--- /dev/null
+++ b/core/themes/claro/templates/navigation/details--vertical-tabs.html.twig
@@ -0,0 +1,79 @@
+{#
+/**
+ * @file
+ * Theme override for a details element.
+ *
+ * This variation is used for theming the details of a Vertical Tabs element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ * - accordion: whether the details element should look as an accordion.
+ * - accordion_item: whether the details element is an item of an accordion
+ * list.
+ *
+ * @see template_preprocess_details()
+ * @see claro_preprocess_details()
+ */
+#}
+{#
+ Prefix 'details' class to avoid collision with Modernizr.
+
+ @todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
+#}
+{%
+ set classes = [
+ 'claro-details',
+ 'claro-details--vertical-tabs-item',
+ ]
+%}
+{%
+ set content_wrapper_classes = [
+ 'claro-details__wrapper',
+ 'details-wrapper',
+ 'claro-details__wrapper--vertical-tabs-item',
+ ]
+%}
+{%
+ set inner_wrapper_classes = [
+ 'claro-details__content',
+ 'claro-details__content--vertical-tabs-item',
+ ]
+%}
+<details{{ attributes.addClass(classes) }}>
+ {%- if title -%}
+ {%
+ set summary_classes = [
+ 'claro-details__summary',
+ 'claro-details__summary--vertical-tabs-item',
+ required ? 'js-form-required',
+ required ? 'form-required',
+ ]
+ %}
+ <summary{{ summary_attributes.addClass(summary_classes) }}>
+ {{- title -}}
+ </summary>
+ {%- endif -%}
+ <div{{ content_attributes.addClass(content_wrapper_classes) }}>
+ <div{{ create_attribute({class: inner_wrapper_classes}) }}>
+ {% if errors %}
+ <div class="form-item form-item--error-message">
+ {{ errors }}
+ </div>
+ {% endif %}
+ {%- if description -%}
+ <div class="claro-details__description">{{ description }}</div>
+ {%- endif -%}
+ {%- if children -%}
+ {{ children }}
+ {%- endif -%}
+ {%- if value -%}
+ {{ value }}
+ {%- endif -%}
+ </div>
+ </div>
+</details>
diff --git a/core/themes/claro/templates/navigation/menu-local-task--views-ui.html.twig b/core/themes/claro/templates/navigation/menu-local-task--views-ui.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..be73cf7bb89c8cc40bf68072d96e4527c5056a4b
--- /dev/null
+++ b/core/themes/claro/templates/navigation/menu-local-task--views-ui.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ *
+ * @todo remove this after https://www.drupal.org/node/3051605 has been solved.
+ */
+#}
+<li{{ attributes.addClass(is_active ? 'is-active') }}>{{ link }}</li>
diff --git a/core/themes/claro/templates/navigation/menu-local-task.html.twig b/core/themes/claro/templates/navigation/menu-local-task.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c2b19cd1ff3866697314a08ddf769a5786c507f8
--- /dev/null
+++ b/core/themes/claro/templates/navigation/menu-local-task.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ * - level: The menu level where the tab is rendered.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+<li{{ attributes.addClass('tabs__tab', 'js-tab', is_active ? 'is-active', is_active ? 'js-active-tab') }}>
+ {{ link }}
+ {% if is_active and level == 'primary' %}
+ <button class="reset-appearance tabs__trigger" aria-label="{{ 'Tabs display toggle'|t }}" data-drupal-nav-tabs-trigger>
+ {% include "@claro/../images/src/hamburger-menu.svg" %}
+ </button>
+ {% endif %}
+</li>
diff --git a/core/themes/claro/templates/node-add-list.html.twig b/core/themes/claro/templates/node-add-list.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6024608b4fdd3f297518a2566558d64bd96ef35f
--- /dev/null
+++ b/core/themes/claro/templates/node-add-list.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to list node types available for adding content.
+ *
+ * Available variables:
+ * - bundles: A list of content types, each with the following properties:
+ * - label: Content type label.
+ * - add_link: \Drupal\Core\Link link instance to create an entity of this
+ * content type. This is a GeneratedLink originally and is switched by
+ * claro_preprocess_node_add_list().
+ * - description: Description of this type of content.
+ *
+ * @todo Revisit after https://www.drupal.org/node/3026221 has been solved.
+ *
+ * @see template_preprocess_node_add_list()
+ * @see claro_preprocess_node_add_list()
+ */
+#}
+{% extends '@claro/entity-add-list.html.twig' %}
+
+{% set create_content = path('node.type_add') %}
+{%
+ set add_bundle_message = 'You have not created any content types yet. Go to the <a href="@create-content">content type creation page</a> to add a new content type.'|t({ '@create-content': create_content })
+%}
diff --git a/core/themes/claro/templates/node-edit-form.html.twig b/core/themes/claro/templates/node-edit-form.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d0e7d86d2f60d775be268a3279761598c54367ae
--- /dev/null
+++ b/core/themes/claro/templates/node-edit-form.html.twig
@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Theme override for a node edit form.
+ *
+ * Two column template for the node add/edit form.
+ *
+ * This template will be used when a node edit form specifies 'node_edit_form'
+ * as its #theme callback. Otherwise, by default, node add/edit forms will be
+ * themed by form.html.twig.
+ *
+ * Available variables:
+ * - form: The node add/edit form.
+ *
+ * @see claro_form_node_form_alter()
+ */
+#}
+<div class="layout-node-form clearfix">
+ <div class="layout-region layout-region-node-main">
+ {{ form|without('advanced', 'footer', 'actions') }}
+ </div>
+ <div class="layout-region layout-region-node-secondary">
+ {{ form.advanced }}
+ </div>
+ <div class="layout-region layout-region-node-footer">
+ <div class="layout-region-node-footer__content">
+ <div class="divider"></div>
+ {{ form.footer }}
+ {{ form.actions }}
+ </div>
+ </div>
+</div>
diff --git a/core/themes/claro/templates/off-canvas-page-wrapper.html.twig b/core/themes/claro/templates/off-canvas-page-wrapper.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..906f01ed738ef14fd0fe0ab588780f52811fc222
--- /dev/null
+++ b/core/themes/claro/templates/off-canvas-page-wrapper.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a page wrapper.
+ *
+ * For consistent wrapping to {{ page }} render in all themes. The
+ * "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog.
+ * This is used by the core/drupal.dialog.off_canvas library to select the
+ * "main canvas" page element as opposed to the "off canvas" which is the dialog
+ * itself. The "main canvas" element must be resized according to the width of
+ * the "off canvas" dialog so that no portion of the "main canvas" is obstructed
+ * by the off-canvas dialog. The off-canvas dialog can vary in width when opened
+ * and can be resized by the user. The "data-off-canvas-main-canvas" attribute
+ * cannot be removed without breaking the off-canvas dialog functionality.
+ *
+ * Available variables:
+ * - children: Contains the child elements of the page.
+ *
+ * @ingroup themeable
+ */
+#}
+{% if children %}
+ <div class="page-wrapper dialog-off-canvas-main-canvas" data-off-canvas-main-canvas>
+ {{ children }}
+ </div>
+{% endif %}
diff --git a/core/themes/claro/templates/page.html.twig b/core/themes/claro/templates/page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2842da21999a71ba8d5f5b6715fa43c8b86d04d0
--- /dev/null
+++ b/core/themes/claro/templates/page.html.twig
@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page.
+ *
+ * The doctype, html, head, and body tags are not in this template. Instead
+ * they can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ * "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ * administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ * linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ * associated with the page and the node ID is the second argument in the
+ * page's path (e.g. node/12345 and node/12345/revisions, but not
+ * comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.pre_content: Items for the pre-content region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+ <header class="content-header clearfix">
+ <div class="layout-container">
+ {{ page.breadcrumb }}
+ {{ page.header }}
+ </div>
+ </header>
+
+ <div class="layout-container">
+ {{ page.pre_content }}
+ <main class="page-content clearfix" role="main">
+ <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div>
+ {{ page.highlighted }}
+ {% if page.help %}
+ <div class="help">
+ {{ page.help }}
+ </div>
+ {% endif %}
+ {{ page.content }}
+ </main>
+
+ </div>
diff --git a/core/themes/claro/templates/pager.html.twig b/core/themes/claro/templates/pager.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e59cdb36007302ad39d7695738882ca59688ede6
--- /dev/null
+++ b/core/themes/claro/templates/pager.html.twig
@@ -0,0 +1,127 @@
+{#
+/**
+ * @file
+ * Theme override to display a pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - items: List of pager items.
+ * The list is keyed by the following elements:
+ * - first: Item for the first page; not present on the first page of results.
+ * - previous: Item for the previous page; not present on the first page
+ * of results.
+ * - next: Item for the next page; not present on the last page of results.
+ * - last: Item for the last page; not present on the last page of results.
+ * - pages: List of pages, keyed by page number.
+ * Sub-sub elements:
+ * items.first, items.previous, items.next, items.last, and each item inside
+ * items.pages contain the following elements:
+ * - href: URL with appropriate query parameters for the item.
+ * - attributes: A keyed list of HTML attributes for the item.
+ * - text: The visible text used for the item link, such as "‹ Previous"
+ * or "Next ›".
+ * - current: The page number of the current page.
+ * - ellipses: If there are more pages than the quantity allows, then an
+ * ellipsis before or after the listed pages may be present.
+ * - previous: Present if the currently visible list of pages does not start
+ * at the first page.
+ * - next: Present if the visible list of pages ends before the last page.
+ *
+ * @see template_preprocess_pager()
+ *
+ * @todo review all uses of the replace() filter below in
+ * https://www.drupal.org/node/3053707 as the behavior it addresses will
+ * likely change when that issue is completed.
+ */
+#}
+{% if items %}
+ <nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+ <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
+ <ul class="pager__items js-pager__items">
+ {# Print first item if we are not on the first page. #}
+ {% if items.first %}
+ {% spaceless %}
+ <li class="pager__item pager__item--action pager__item--first">
+ <a href="{{ items.first.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title') }}>
+ <span class="visually-hidden">{{ 'First page'|t }}</span>
+ <span class="pager__item-title pager__item-title--backwards" aria-hidden="true">
+ {{ items.first.text|default('First'|t)|replace({'«': ''}) }}
+ </span>
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endif %}
+
+ {# Print previous item if we are not on the first page. #}
+ {% if items.previous %}
+ {% spaceless %}
+ <li class="pager__item pager__item--action pager__item--previous">
+ <a href="{{ items.previous.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
+ <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+ <span class="pager__item-title pager__item-title--backwards" aria-hidden="true">
+ {{ items.previous.text|default('Previous'|t)|replace({'‹': ''}) }}
+ </span>
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endif %}
+
+ {# Add an ellipsis if there are further previous pages. #}
+ {% if ellipses.previous %}
+ <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
+ {% endif %}
+
+ {# Now generate the actual pager piece. #}
+ {% for key, item in items.pages %}
+ {% spaceless %}
+ <li class="pager__item{{ current == key ? ' pager__item--active' : '' }} pager__item--number">
+ {% if current == key %}
+ {% set title = 'Current page'|t %}
+ {% else %}
+ {% set title = 'Go to page @key'|t({'@key': key}) %}
+ {% endif %}
+ <a href="{{ item.href }}" class="pager__link{{ current == key ? ' is-active' }}" title="{{ title }}"{{ item.attributes|without('href', 'title', 'class') }}>
+ <span class="visually-hidden">
+ {{ current == key ? 'Current page'|t : 'Page'|t }}
+ </span>
+ {{ key }}
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endfor %}
+
+ {# Add an ellipsis if there are further next pages. #}
+ {% if ellipses.next %}
+ <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
+ {% endif %}
+
+ {# Print next item if we are not on the last page. #}
+ {% if items.next %}
+ {% spaceless %}
+ <li class="pager__item pager__item--action pager__item--next">
+ <a href="{{ items.next.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
+ <span class="visually-hidden">{{ 'Next page'|t }}</span>
+ <span class="pager__item-title pager__item-title--forward" aria-hidden="true">
+ {{ items.next.text|default('Next'|t)|replace({'›': ''}) }}
+ </span>
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endif %}
+
+ {# Print last item if we are not on the last page. #}
+ {% if items.last %}
+ {% spaceless %}
+ <li class="pager__item pager__item--action pager__item--last">
+ <a href="{{ items.last.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
+ <span class="visually-hidden">{{ 'Last page'|t }}</span>
+ <span class="pager__item-title pager__item-title--forward" aria-hidden="true">
+ {{ items.last.text|default('Last'|t)|replace({'»': ''}) }}
+ </span>
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endif %}
+ </ul>
+ </nav>
+{% endif %}
diff --git a/core/themes/claro/templates/region--breadcrumb.html.twig b/core/themes/claro/templates/region--breadcrumb.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a66f43131d6057e34b2b9381ef2598767d64c825
--- /dev/null
+++ b/core/themes/claro/templates/region--breadcrumb.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Theme override to display a breadcrumb region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ * .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+ set classes = [
+ 'region',
+ 'region-' ~ region|clean_class,
+ ]
+%}
+<div{{ attributes.addClass(classes) }}>
+ {{ content }}
+</div>
diff --git a/core/themes/claro/templates/status-report-counter.html.twig b/core/themes/claro/templates/status-report-counter.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..13ab8a84d46b0ab889f60c5d9d5d3fbbca9ea9d6
--- /dev/null
+++ b/core/themes/claro/templates/status-report-counter.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Theme override for status report counter.
+ *
+ * Available variables:
+ * - amount: The number shown on counter.
+ * - text: The text shown on counter.
+ * - severity: The severity of the counter.
+ *
+ * @ingroup themable
+ */
+#}
+{%
+ set classes = [
+ 'system-status-counter',
+ 'system-status-counter--' ~ severity,
+ ]
+%}
+<span{{ attributes.addClass(classes) }}>
+ <span class="system-status-counter__status-icon system-status-counter__status-icon--{{ severity }}"></span>
+ <span class="system-status-counter__status-title">
+ <span class="system-status-counter__title-count">{{ amount }} {{ text }}</span>
+ <span class="system-status-counter__details"><a href="#{{ severity }}" ><span class="visually-hidden">{{ text }} </span>Details</a></span>
+ </span>
+</span>
diff --git a/core/themes/claro/templates/status-report-general-info.html.twig b/core/themes/claro/templates/status-report-general-info.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a5d6ce7bae0d01f31db0676b569797229ea2905b
--- /dev/null
+++ b/core/themes/claro/templates/status-report-general-info.html.twig
@@ -0,0 +1,99 @@
+{#
+/**
+ * @file
+ * Theme override for status report general info.
+ *
+ * Available variables:
+ * - drupal: The status of Drupal installation:
+ * - value: The current status of Drupal installation.
+ * - description: The description for current status of Drupal installation.
+ * - cron: The status of cron:
+ * - value: The current status of cron.
+ * - description: The description for current status of cron.
+ * - cron.run_cron: An array to render a button for running cron.
+ * - database_system: The status of database system:
+ * - value: The current status of database sytem.
+ * - description: The description for current status of cron.
+ * - database_system_version: The info about current database version:
+ * - value: The current version of database.
+ * - description: The description for current version of database.
+ * - php: The current version of PHP:
+ * - value: The status of currently installed PHP version.
+ * - description: The description for current installed PHP version.
+ * - php_memory_limit: The info about current PHP memory limit:
+ * - value: The status of currently set PHP memory limit.
+ * - description: The description for currently set PHP memory limit.
+ * - webserver: The info about currently installed web server:
+ * - value: The status of currently installed web server.
+ * - description: The description for the status of currently installed web
+ * server.
+ */
+#}
+<div class="system-status-general-info">
+ <h2 class="system-status-general-info__header">{{ 'General System Information'|t }}</h2>
+ <div class="system-status-general-info__items">
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--d8"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Drupal Version'|t }}</h3>
+ {{ drupal.value }}
+ {% if drupal.description %}
+ <div class="description">{{ drupal.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--clock"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Last Cron Run'|t }}</h3>
+ {{ cron.value }}
+ {% if cron.run_cron %}
+ <div class="system-status-general-info__run-cron">{{ cron.run_cron }}</div>
+ {% endif %}
+ {% if cron.description %}
+ <div class="system-status-general-info__description">{{ cron.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--server"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Web Server'|t }}</h3>
+ {{ webserver.value }}
+ {% if webserver.description %}
+ <div class="description">{{ webserver.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--php"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
+ <h4 class="system-status-general-info__sub-item-title">{{ 'Version'|t }}</h4>{{ php.value }}
+ {% if php.description %}
+ <div class="description">{{ php.description }}</div>
+ {% endif %}
+
+ <h4 class="system-status-general-info__sub-item-title">{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
+ {% if php_memory_limit.description %}
+ <div class="description">{{ php_memory_limit.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--database"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
+ <h4 class="system-status-general-info__sub-item-title">{{ 'Version'|t }}</h4>{{ database_system_version.value }}
+ {% if database_system_version.description %}
+ <div class="description">{{ database_system_version.description }}</div>
+ {% endif %}
+
+ <h4 class="system-status-general-info__sub-item-title">{{ 'System'|t }}</h4>{{ database_system.value }}
+ {% if database_system.description %}
+ <div class="description">{{ database_system.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/core/themes/claro/templates/status-report-grouped.html.twig b/core/themes/claro/templates/status-report-grouped.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..64572fefd945b018458a108f8cbba3e73d14a828
--- /dev/null
+++ b/core/themes/claro/templates/status-report-grouped.html.twig
@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Theme override to display status report.
+ *
+ * - grouped_requirements: Contains grouped requirements.
+ * Each group contains:
+ * - title: The title of the group.
+ * - type: The severity of the group.
+ * - items: The requirement instances.
+ * Each requirement item contains:
+ * - title: The title of the requirement.
+ * - value: (optional) The requirement's status.
+ * - description: (optional) The requirement's description.
+ * - severity_title: The title of the severity.
+ * - severity_status: Indicates the severity status.
+ */
+#}
+{{ attach_library('core/drupal.collapse') }}
+{{ attach_library('claro/drupal.responsive-detail') }}
+
+<div class="system-status-report">
+ {% for group in grouped_requirements %}
+ <div class="system-status-report__requirements-group">
+ <h3 id="{{ group.type }}">{{ group.title }}</h3>
+ {% for requirement in group.items %}
+ <div class="divider"></div>
+ <details class="system-status-report__entry system-status-report__entry--{{ group.type }} color-{{ group.type }}" open>
+ {%
+ set summary_classes = [
+ 'system-status-report__status-title',
+ group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
+ ]
+ %}
+ <summary{{ create_attribute({'class': summary_classes}) }} role="button">
+ {% if requirement.severity_title %}
+ <span class="visually-hidden">{{ requirement.severity_title }}</span>
+ {% endif %}
+ {{ requirement.title }}
+ </summary>
+ <div class="system-status-report__entry__value">
+ {{ requirement.value }}
+ {% if requirement.description %}
+ <div class="description">{{ requirement.description }}</div>
+ {% endif %}
+ </div>
+ </details>
+
+ {% if loop.last %}
+ <div class="divider"></div>
+ {% endif %}
+ {% endfor %}
+ </div>
+ {% endfor %}
+</div>
diff --git a/core/themes/claro/templates/status-report-page.html.twig b/core/themes/claro/templates/status-report-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..27e0d1576e24f37191e88926a806dd449bf30750
--- /dev/null
+++ b/core/themes/claro/templates/status-report-page.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Theme override for the status report page.
+ *
+ * Available variables:
+ * - counters: The list of counter elements.
+ * - general_info: A render array to create general info element.
+ * - requirements: A render array to create requirements table.
+ *
+ * @see template_preprocess_status_report()
+ */
+#}
+{% if counters|length == 3 %}
+ {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif counters|length == 2 %}
+ {% set element_width_class = ' system-status-report-counters__item--half-width' %}
+{% endif %}
+<div class="system-status-report-counters">
+ {% for counter in counters %}
+ <div class="system-status-report-counters__item{{ element_width_class }}">
+ {{ counter }}
+ </div>
+ {% endfor %}
+</div>
+
+{{ general_info }}
+{{ requirements }}
diff --git a/core/themes/claro/templates/system-themes-page.html.twig b/core/themes/claro/templates/system-themes-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1108c7f2f6f379f62f860dc70260962a50bc4609
--- /dev/null
+++ b/core/themes/claro/templates/system-themes-page.html.twig
@@ -0,0 +1,113 @@
+{#
+/**
+ * @file
+ * Theme override for the Appearance page.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the main container.
+ * - theme_groups: A list of theme groups. Each theme group contains:
+ * - attributes: HTML attributes specific to this theme group.
+ * - title: Title for the theme group.
+ * - state: State of the theme group, e.g. installed or uninstalled.
+ * - themes: A list of themes within the theme group. Each theme contains:
+ * - attributes: HTML attributes specific to this theme.
+ * - screenshot: A screenshot representing the theme.
+ * - description: Description of the theme.
+ * - name: Theme name.
+ * - version: The theme's version number.
+ * - is_default: Boolean indicating whether the theme is the default theme
+ * or not.
+ * - is_admin: Boolean indicating whether the theme is the admin theme or
+ * not.
+ * - notes: Identifies what context this theme is being used in, e.g.,
+ * default theme, admin theme.
+ * - incompatible: Text describing any compatibility issues.
+ * - operations: A list of operation links, e.g., Settings, Enable, Disable,
+ * etc. these links should only be displayed if the theme is compatible.
+ * - title_id: The unique id of the theme label.
+ * - description_id: The unique id of the theme description. This is
+ * undefined if the description is casted to an empty string.
+ *
+ * @see template_preprocess_system_themes_page()
+ * @see claro_preprocess_system_themes_page()
+ */
+#}
+<div{{ attributes }}>
+ {% for theme_group in theme_groups %}
+ {%
+ set theme_group_classes = [
+ 'system-themes-list',
+ 'system-themes-list--' ~ theme_group.state,
+ 'clearfix',
+ ]
+ %}
+
+ {%
+ set card_alignment = theme_group.state == 'installed' ? 'horizontal' : 'vertical'
+ %}
+
+ {% if not loop.first %}
+ <hr>
+ {% endif %}
+
+ <div{{ theme_group.attributes.addClass(theme_group_classes) }}>
+ <h2 class="system-themes-list__header">{{ theme_group.title }}</h2>
+ <div class="card-list {{ card_alignment == 'horizontal' ? 'card-list--two-cols' : 'card-list--four-cols' }}">
+ {% for theme in theme_group.themes %}
+ {%
+ set theme_classes = [
+ theme.is_default ? 'theme-default',
+ theme.is_admin ? 'theme-admin',
+ 'card',
+ 'card--' ~ card_alignment,
+ 'card-list__item',
+ ]
+ %}
+ {%
+ set theme_title_classes = [
+ 'card__content-item',
+ 'heading-f',
+ ]
+ %}
+ {%
+ set theme_description_classes = [
+ 'card__content-item',
+ ]
+ %}
+ <div{{ theme.attributes.addClass(theme_classes).setAttribute('aria-labelledby', theme.title_id).setAttribute('aria-describedby', theme.description_id ?: null) }}>
+ {% if theme.screenshot %}
+ <div class="card__image">
+ {{ theme.screenshot }}
+ </div>
+ {% endif %}
+ <div class="card__content-wrapper">
+ <div class="card__content">
+ <h3{{ create_attribute({'id': theme.title_id}).addClass(theme_title_classes) }} id={{ theme.title_id }}>
+ {{- theme.name }} {{ theme.version -}}
+ {% if theme.notes %}
+ ({{ theme.notes|safe_join(', ') }})
+ {%- endif -%}
+ </h3>
+
+ {% if theme.description and theme.description_id %}
+ <div{{ create_attribute({'id': theme.description_id ?: null}).addClass(theme_description_classes) }}>
+ {{ theme.description }}
+ </div>
+ {%- endif -%}
+ </div>
+
+ <div class="card__footer">
+ {# Display operation links only if the theme is compatible. #}
+ {% if theme.incompatible %}
+ <small class="incompatible">{{ theme.incompatible }}</small>
+ {% else %}
+ {{ theme.operations }}
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+ {% endfor %}
+</div>
diff --git a/core/themes/claro/templates/text-format-wrapper.html.twig b/core/themes/claro/templates/text-format-wrapper.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6a660f13cc09bb420f663a9d16b1398ceaccb7d2
--- /dev/null
+++ b/core/themes/claro/templates/text-format-wrapper.html.twig
@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Theme override for a text format-enabled form element.
+ *
+ * @todo Remove when https://www.drupal.org/node/3016346 and
+ * https://www.drupal.org/node/3016343 are fixed.
+ *
+ * Available variables:
+ * - children: Text format element children.
+ * - description: Text format element description.
+ * - attributes: HTML attributes for the containing element.
+ * - aria_description: Flag for whether or not an ARIA description has been
+ * added to the description container.
+ * - description_attributes: attributes for the description.
+ * @see https://www.drupal.org/node/3016343
+ * - disabled: An indicator for whether the associated form element is disabled,
+ * added by this theme.
+ * @see https://www.drupal.org/node/3016346
+ *
+ * @see template_preprocess_text_format_wrapper()
+ */
+#}
+{%
+ set classes = [
+ 'js-form-item',
+ 'form-item',
+ ]
+%}
+<div{{ attributes.addClass(classes) }}>
+ {{ children }}
+ {% if description %}
+ {%
+ set description_classes = [
+ aria_description ? 'form-item__description',
+ disabled ? 'is-disabled',
+ ]
+ %}
+ <div{{ description_attributes.addClass(description_classes) }}>{{ description }}</div>
+ {% endif %}
+</div>
diff --git a/core/themes/claro/templates/views-exposed-form.html.twig b/core/themes/claro/templates/views-exposed-form.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..edccd0d5b03300a6c32f8d45207587f07e54e0b0
--- /dev/null
+++ b/core/themes/claro/templates/views-exposed-form.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Theme override for a views exposed form.
+ *
+ * Available variables:
+ * - form: A render element representing the form.
+ *
+ * @see template_preprocess_views_exposed_form()
+ */
+#}
+{% if q is not empty %}
+ {#
+ This ensures that, if clean URLs are off, the 'q' is added first,
+ as a hidden form element, so that it shows up first in the POST URL.
+ #}
+{{ q }}
+{% endif %}
+{{ form }}
diff --git a/core/themes/claro/templates/views/views-mini-pager.html.twig b/core/themes/claro/templates/views/views-mini-pager.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7f429be4c52eb8bf3d977b144ff2f1ab5de71cb4
--- /dev/null
+++ b/core/themes/claro/templates/views/views-mini-pager.html.twig
@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Theme override for a views mini-pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - items: List of pager items.
+ *
+ * @see template_preprocess_views_mini_pager()
+ */
+#}
+{%
+ set pager_action_classes = [
+ 'pager__link',
+ 'pager__link--mini',
+ 'pager__link--action-link'
+ ]
+%}
+{% if items.previous or items.next %}
+ <nav{{ attributes.addClass('pager').setAttribute('role', 'navigation').setAttribute('aria-labelledby', heading_id) }}>
+ <h4{{ title_attributes.addClass('visually-hidden').setAttribute('id', heading_id) }}>{{ 'Pagination'|t }}</h4>
+ <ul{{ content_attributes.addClass('pager__items', 'js-pager__items') }}>
+ {% if items.previous %}
+ {% spaceless %}
+ <li class="pager__item pager__item--mini pager__item--action pager__item--previous">
+ <a{{ items.previous.attributes.addClass(pager_action_classes).setAttribute('title', 'Go to previous page'|t).setAttribute('href', items.previous.href) }}>
+ <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endif %}
+
+ {% if items.current %}
+ <li class="pager__item pager__item--mini pager__item--current">
+ <span class="visually-hidden">
+ {{ 'Current page'|t }}
+ </span>
+ {{ items.current }}
+ </li>
+ {% endif %}
+
+ {% if items.next %}
+ {% spaceless %}
+ <li class="pager__item pager__item--mini pager__item--action pager__item--next">
+ <a{{ items.next.attributes.addClass(pager_action_classes).setAttribute('title', 'Go to next page'|t).setAttribute('href', items.next.href) }}>
+ <span class="visually-hidden">{{ 'Next page'|t }}</span>
+ </a>
+ </li>
+ {% endspaceless %}
+ {% endif %}
+ </ul>
+ </nav>
+{% endif %}