first commit

core/themes/claro/css/base/elements.css

@@ -0,0 +1,255 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * Generic elements.
+ */
+
+html {
+  font-family: var(--font-family);
+  font-size: 100%;
+  font-weight: normal;
+  font-style: normal;
+  line-height: var(--line-height);
+}
+
+body {
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  color: var(--color-fg);
+  background: var(--color-bg);
+}
+
+a,
+.link {
+  color: var(--color-link);
+}
+
+a:hover,
+a:focus,
+.link:hover,
+.link:focus {
+  -webkit-text-decoration: none;
+  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 1.25rem;
+}
+
+dl dd,
+dl dl {
+  margin-block-end: 0.625rem;
+  margin-inline-start: 1.25rem;
+}
+
+blockquote {
+  position: relative;
+  margin-block: var(--space-l);
+  margin-inline: 2.5rem var(--space-l);
+  font-size: var(--font-size-h6);
+}
+
+blockquote::before {
+  position: absolute;
+  inset-inline-start: -2.5rem;
+  content: open-quote;
+  color: var(--color-absolutezero);
+  font-family: var(--font-family-serif);
+  font-size: var(--space-xl);
+  line-height: 1em;
+}
+
+blockquote::after {
+  content: no-close-quote;
+}
+
+address {
+  font-style: italic;
+}
+
+u,
+ins {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+s,
+strike,
+del {
+  -webkit-text-decoration: line-through;
+  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-block: 0.25em;
+  margin-inline: 1.5em 0;
+  padding-inline-start: 0;
+  list-style-type: disc;
+  list-style-image: none;
+}
+
+ol {
+  margin-block: 0.25em;
+  margin-inline: 2em 0;
+  padding: 0;
+}
+
+/**
+ * Fix duplicate border caused by normalize.css adding border-bottom without
+ * removing the text-decoration.
+ */
+
+abbr[title] {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+code {
+  margin: 0.5em 0;
+}
+
+pre {
+  margin: 0.5em 0;
+  white-space: pre-wrap;
+}
+
+details {
+  line-height: var(--details-line-height);
+}
+
+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.
+ */
+
+.page-wrapper *:focus,
+.ui-dialog *:focus {
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-box-shadow);
+}

core/themes/claro/css/base/elements.pcss.css

@@ -0,0 +1,211 @@
+/**
+ * Generic elements.
+ */
+
+html {
+  font-family: var(--font-family);
+  font-size: 100%;
+  font-weight: normal;
+  font-style: normal;
+  line-height: var(--line-height);
+}
+body {
+  word-wrap: break-word;
+  hyphens: auto;
+  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-block-end: 10px;
+  margin-inline-start: 20px;
+}
+blockquote {
+  position: relative;
+  margin-block: var(--space-l);
+  margin-inline: 2.5rem var(--space-l);
+  font-size: var(--font-size-h6);
+}
+blockquote::before {
+  position: absolute;
+  inset-inline-start: -2.5rem;
+  content: open-quote;
+  color: var(--color-absolutezero);
+  font-family: var(--font-family-serif);
+  font-size: var(--space-xl);
+  line-height: 1em;
+}
+blockquote::after {
+  content: no-close-quote;
+}
+address {
+  font-style: italic;
+}
+u,
+ins {
+  text-decoration: underline;
+}
+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-block: 0.25em;
+  margin-inline: 1.5em 0;
+  padding-inline-start: 0;
+  list-style-type: disc;
+  list-style-image: none;
+}
+ol {
+  margin-block: 0.25em;
+  margin-inline: 2em 0;
+  padding: 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: var(--details-line-height);
+
+  & summary {
+    padding: 0.95em 1.45em;
+
+    &: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.
+ */
+.page-wrapper *:focus,
+.ui-dialog *:focus {
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-box-shadow);
+}

core/themes/claro/css/base/print.css

@@ -0,0 +1,90 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+@media print {
+  * {
+    /* Black prints faster */
+    /* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
+    color: #000 !important;
+    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;
+  }
+  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 0.25rem !important;
+    border-radius: 0.25rem 0.25rem 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: 0.25rem;
+    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;
+  }
+}

core/themes/claro/css/base/print.pcss.css

@@ -0,0 +1,84 @@
+@media print {
+  * {
+    /* Black prints faster */
+    /* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
+    color: #000 !important;
+    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;
+  }
+  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;
+  }
+}

core/themes/claro/css/base/typography.css

@@ -0,0 +1,34 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+* Reusable utility classes that apply vertical spacing consistency and inline
+* with the base line height of Claro.
+*/
+.leader {
+  margin-top: 1.538rem;
+}
+.leader-double {
+  margin-top: 3.076rem;
+}
+.leader-triple {
+  margin-top: 4.614rem;
+}
+.leader-quadruple {
+  margin-top: 6.152rem;
+}
+.trailer {
+  margin-bottom: 1.538rem;
+}
+.trailer-double {
+  margin-bottom: 3.076rem;
+}
+.trailer-triple {
+  margin-bottom: 4.614rem;
+}
+.trailer-quadruple {
+  margin-bottom: 6.152rem;
+}

core/themes/claro/css/base/typography.pcss.css

@@ -0,0 +1,28 @@
+/**
+* Reusable utility classes that apply vertical spacing consistency and inline
+* with the base line height of Claro.
+*/
+.leader {
+  margin-top: 1.538rem;
+}
+.leader-double {
+  margin-top: 3.076rem;
+}
+.leader-triple {
+  margin-top: 4.614rem;
+}
+.leader-quadruple {
+  margin-top: 6.152rem;
+}
+.trailer {
+  margin-bottom: 1.538rem;
+}
+.trailer-double {
+  margin-bottom: 3.076rem;
+}
+.trailer-triple {
+  margin-bottom: 4.614rem;
+}
+.trailer-quadruple {
+  margin-bottom: 6.152rem;
+}

core/themes/claro/css/base/variables.css

@@ -0,0 +1,282 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+:root {
+  /*
+   * Color Palette.
+   */
+  --color-absolutezero: var(--color-blue-600);
+  --color-white: #fff;
+  --color-text: var(--color-gray);
+  --color-text-light: var(--color-gray-500);
+  --color-gray-050-o-40: rgba(243, 244, 249, 0.4);
+  /* Secondary. */
+  --color-gray-200-o-80: rgba(212, 212, 218, 0.8);
+  --color-maximumred: var(--color-red-500);
+  --color-sunglow: #ffd23f;
+  --color-sunglow-shaded: #977405;
+  --color-lightninggreen: #26a769;
+  --color-focus: var(--color-lightninggreen);
+  /* Variations. */
+  --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
+  --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
+  --color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
+  --color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
+  --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
+  --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
+  --color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
+  --color-bgred-active: var(--color-red-050); /* 10% darker than base. */
+  /* Gray variations. */
+  --color-gray: #232429;
+  --color-gray-900: #393a3f;
+  --color-gray-800: #55565b;
+  --color-gray-700: #75767b;
+  --color-gray-600: #828388;
+  --color-gray-500: #919297;
+  --color-gray-400: #adaeb3;
+  --color-gray-300: #c1c2c7;
+  --color-gray-200: #d3d4d9;
+  --color-gray-100: #dedfe4;
+  --color-gray-050: #f3f4f9;
+  --color-gray-025: #f9faff;
+  /* Blue variations. */
+  --color-blue: var(--color-blue-600);
+  --color-blue-900: #000f33;
+  --color-blue-800: #001f66;
+  --color-blue-700: #002e9a;
+  --color-blue-650: #0036b1;
+  --color-blue-600: #003ecc;
+  --color-blue-500: #004eff;
+  --color-blue-400: #3371ff;
+  --color-blue-300: #6694ff;
+  --color-blue-200: #99b8ff;
+  --color-blue-100: #ccdbff;
+  --color-blue-070: #dbe6ff;
+  --color-blue-050: #e5edff;
+  --color-blue-020: #f5f8ff;
+  /* Red variations. */
+  --color-red: var(--color-red-500);
+  --color-red-900: #2c0707;
+  --color-red-800: #580e0e;
+  --color-red-700: #841515;
+  --color-red-600: #b01c1c;
+  --color-red-550: #c61f1f;
+  --color-red-500: #dc2323;
+  --color-red-400: #e34f4f;
+  --color-red-300: #ea7b7b;
+  --color-red-200: #f1a7a7;
+  --color-red-100: #f8d3d3;
+  --color-red-070: #fae0e0;
+  --color-red-050: #fce9e9;
+  --color-red-020: #fdf5f5;
+  /*
+   * 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;
+  --font-family-serif: "Times New Roman", times, serif;
+  --line-height: 1.5;
+  --line-height-heading: 1.3;
+  --line-height-form-label: calc(18rem / 16); /* 18px */
+  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+  --font-size-xl: 2.25rem; /* ~36px */
+  --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: 0.1875rem;
+  --focus-border-offset-size: 2px;
+  --outline-size: 2px;
+  --focus-outline: var(--outline-size) dotted transparent;
+  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
+  /**
+   * Shadows.
+   */
+  --shadow-z3: 0 0.875rem 1.875rem rgba(0, 0, 0, 0.1);
+  /*
+   * Inputs.
+   */
+  --input-fg-color: var(--color-fg);
+  --input-bg-color: var(--color-bg);
+  --input-fg-color--description: var(--color-gray-800);
+  --input-fg-color--placeholder: var(--color-gray-700);
+  --input-border-color: var(--color-gray-500);
+  --input--hover-border-color: var(--color-text);
+  --input--focus-border-color: var(--color-absolutezero);
+  --input--error-color: var(--color-maximumred);
+  --input--error-border-color: var(--color-maximumred);
+  --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
+  --input--disabled-fg-color: var(--color-gray-800);
+  --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-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
+  --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
+  --input-font-size--small: var(--font-size-xs);
+  --input-line-height--small: 1.3125rem;
+  --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-border-color: var(--color-gray-100);
+  --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 0.25rem 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;
+  --details-line-height: 1.295rem;
+  /**
+   * Buttons.
+   */
+  --button--focus-border-color: var(--color-blue-300);
+  --button-border-radius-size: var(--base-border-radius);
+  --button-fg-color: var(--color-text);
+  --button-bg-color: var(--color-gray-200);
+  --button--hover-bg-color: var(--color-gray-300);
+  --button--active-bg-color: var(--color-gray-400);
+  --button--disabled-bg-color: #ebebed;
+  --button--disabled-fg-color: var(--color-gray-500);
+  --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-gray-200);
+  --button--disabled-fg-color--primary: var(--color-gray-600);
+  --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);
+  --dropbutton-widget-z-index: 100;
+  /**
+   * jQuery.UI dropdown.
+   */
+  --jui-dropdown-fg-color: var(--color-gray-800);
+  --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. */
+  /**
+   * jQuery.UI dialog.
+   */
+  --jui-dialog-title-color: var(--color-white);
+  --jui-dialog-title-bg-color: var(--color-text);
+  --jui-dialog-title-font-size: var(--font-size-h4);
+  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
+  --jui-dialog-close-button-border-radius: 50%;
+  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
+  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
+  --jui-dialog-border-radius: 0.25rem;
+  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
+  --jui-dialog--focus-outline: 2px dotted transparent;
+  --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
+  --jui-dialog-z-index: 1260;
+  --jui-dialog-off-canvas-z-index: 501;
+  /**
+   * 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-gray-800);
+  --progress-bar-description-font-size: var(--font-size-xs);
+  --progress-track-border-color: var(--color-gray-500);
+  --progress-track-bg-color: var(--color-gray-200);
+  /**
+   * 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;
+  /**
+   * Layout.
+   */
+  --layout-region-edit-width: min(60rem, 100%);
+  --layout-region-edit-extended-width: min(68rem, 100%);
+  /**
+   * Vertical Tabs.
+   *
+   * These are shared between the vertical tabs and media library.
+   * @see ../components/vertical-tabs.pcss.css
+   * @see ../theme/media-library.pcss.css
+   */
+  --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-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
+  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
+  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  --vertical-tabs-menu-separator-color: var(--color-gray-200);
+  --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: 0.25rem;
+  --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
+  --vertical-tabs-menu--z-index: 0;
+}

core/themes/claro/css/base/variables.pcss.css

@@ -0,0 +1,276 @@
+:root {
+  /*
+   * Color Palette.
+   */
+  --color-absolutezero: var(--color-blue-600);
+  --color-white: #fff;
+  --color-text: var(--color-gray);
+  --color-text-light: var(--color-gray-500);
+  --color-gray-050-o-40: rgba(243, 244, 249, 0.4);
+  /* Secondary. */
+  --color-gray-200-o-80: rgba(212, 212, 218, 0.8);
+  --color-maximumred: var(--color-red-500);
+  --color-sunglow: #ffd23f;
+  --color-sunglow-shaded: #977405;
+  --color-lightninggreen: #26a769;
+  --color-focus: var(--color-lightninggreen);
+  /* Variations. */
+  --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
+  --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
+  --color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
+  --color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
+  --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
+  --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
+  --color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
+  --color-bgred-active: var(--color-red-050); /* 10% darker than base. */
+  /* Gray variations. */
+  --color-gray: #232429;
+  --color-gray-900: #393a3f;
+  --color-gray-800: #55565b;
+  --color-gray-700: #75767b;
+  --color-gray-600: #828388;
+  --color-gray-500: #919297;
+  --color-gray-400: #adaeb3;
+  --color-gray-300: #c1c2c7;
+  --color-gray-200: #d3d4d9;
+  --color-gray-100: #dedfe4;
+  --color-gray-050: #f3f4f9;
+  --color-gray-025: #f9faff;
+  /* Blue variations. */
+  --color-blue: var(--color-blue-600);
+  --color-blue-900: #000f33;
+  --color-blue-800: #001f66;
+  --color-blue-700: #002e9a;
+  --color-blue-650: #0036b1;
+  --color-blue-600: #003ecc;
+  --color-blue-500: #004eff;
+  --color-blue-400: #3371ff;
+  --color-blue-300: #6694ff;
+  --color-blue-200: #99b8ff;
+  --color-blue-100: #ccdbff;
+  --color-blue-070: #dbe6ff;
+  --color-blue-050: #e5edff;
+  --color-blue-020: #f5f8ff;
+  /* Red variations. */
+  --color-red: var(--color-red-500);
+  --color-red-900: #2c0707;
+  --color-red-800: #580e0e;
+  --color-red-700: #841515;
+  --color-red-600: #b01c1c;
+  --color-red-550: #c61f1f;
+  --color-red-500: #dc2323;
+  --color-red-400: #e34f4f;
+  --color-red-300: #ea7b7b;
+  --color-red-200: #f1a7a7;
+  --color-red-100: #f8d3d3;
+  --color-red-070: #fae0e0;
+  --color-red-050: #fce9e9;
+  --color-red-020: #fdf5f5;
+  /*
+   * 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;
+  --font-family-serif: "Times New Roman", times, serif;
+  --line-height: 1.5;
+  --line-height-heading: 1.3;
+  --line-height-form-label: calc(18rem / 16); /* 18px */
+  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+  --font-size-xl: 2.25rem; /* ~36px */
+  --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;
+  --focus-border-offset-size: 2px;
+  --outline-size: 2px;
+  --focus-outline: var(--outline-size) dotted transparent;
+  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
+  /**
+   * Shadows.
+   */
+  --shadow-z3: 0 14px 30px rgba(0, 0, 0, 0.1);
+  /*
+   * Inputs.
+   */
+  --input-fg-color: var(--color-fg);
+  --input-bg-color: var(--color-bg);
+  --input-fg-color--description: var(--color-gray-800);
+  --input-fg-color--placeholder: var(--color-gray-700);
+  --input-border-color: var(--color-gray-500);
+  --input--hover-border-color: var(--color-text);
+  --input--focus-border-color: var(--color-absolutezero);
+  --input--error-color: var(--color-maximumred);
+  --input--error-border-color: var(--color-maximumred);
+  --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
+  --input--disabled-fg-color: var(--color-gray-800);
+  --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-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
+  --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
+  --input-font-size--small: var(--font-size-xs);
+  --input-line-height--small: 1.3125rem;
+  --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-border-color: var(--color-gray-100);
+  --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;
+  --details-line-height: 1.295rem;
+  /**
+   * Buttons.
+   */
+  --button--focus-border-color: var(--color-blue-300);
+  --button-border-radius-size: var(--base-border-radius);
+  --button-fg-color: var(--color-text);
+  --button-bg-color: var(--color-gray-200);
+  --button--hover-bg-color: var(--color-gray-300);
+  --button--active-bg-color: var(--color-gray-400);
+  --button--disabled-bg-color: #ebebed;
+  --button--disabled-fg-color: var(--color-gray-500);
+  --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-gray-200);
+  --button--disabled-fg-color--primary: var(--color-gray-600);
+  --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);
+  --dropbutton-widget-z-index: 100;
+  /**
+   * jQuery.UI dropdown.
+   */
+  --jui-dropdown-fg-color: var(--color-gray-800);
+  --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. */
+  /**
+   * jQuery.UI dialog.
+   */
+  --jui-dialog-title-color: var(--color-white);
+  --jui-dialog-title-bg-color: var(--color-text);
+  --jui-dialog-title-font-size: var(--font-size-h4);
+  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
+  --jui-dialog-close-button-border-radius: 50%;
+  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
+  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
+  --jui-dialog-border-radius: 4px;
+  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
+  --jui-dialog--focus-outline: 2px dotted transparent;
+  --jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
+  --jui-dialog-z-index: 1260;
+  --jui-dialog-off-canvas-z-index: 501;
+  /**
+   * 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-gray-800);
+  --progress-bar-description-font-size: var(--font-size-xs);
+  --progress-track-border-color: var(--color-gray-500);
+  --progress-track-bg-color: var(--color-gray-200);
+  /**
+   * 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;
+  /**
+   * Layout.
+   */
+  --layout-region-edit-width: min(960px, 100%);
+  --layout-region-edit-extended-width: min(1088px, 100%);
+  /**
+   * Vertical Tabs.
+   *
+   * These are shared between the vertical tabs and media library.
+   * @see ../components/vertical-tabs.pcss.css
+   * @see ../theme/media-library.pcss.css
+   */
+  --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-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
+  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
+  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  --vertical-tabs-menu-separator-color: var(--color-gray-200);
+  --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);
+  --vertical-tabs-menu--z-index: 0;
+}

core/themes/claro/css/classy/README.txt

@@ -0,0 +1,9 @@
+WHAT IS THIS DIRECTORY FOR?
+--------------------------------
+This directory is for CSS files previously inherited from the Classy theme.
+
+WHY WERE CLASSY CSS FILES COPIED HERE?
+-------------------------------------------
+Classy was removed in Drupal 10. To prepare for Classy's removal, CSS files that
+ would otherwise be inherited from Classy were copied here.
+

core/themes/claro/css/classy/components/book-navigation.css

@@ -0,0 +1,40 @@
+/**
+ * @file
+ * Styling for the Book module.
+ */
+
+.book-navigation .menu {
+  padding-top: 1em;
+  padding-bottom: 0;
+}
+.book-navigation .book-pager {
+  overflow: auto;
+  margin: 0;
+  padding: 0.5em 0;
+}
+.book-pager__item {
+  display: inline-block;
+  list-style-type: none;
+  vertical-align: top;
+}
+.book-pager__item--previous {
+  width: 45%;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] .book-pager__item--previous {
+  float: right;
+  text-align: right;
+}
+.book-pager__item--center {
+  width: 8%;
+  text-align: center;
+}
+.book-pager__item--next {
+  float: right; /* LTR */
+  width: 45%;
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .book-pager__item--next {
+  float: left;
+  text-align: left;
+}

core/themes/claro/css/classy/components/container-inline.css

@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline label::after,
+.container-inline .label::after {
+  content: ":";
+}
+.form-type-radios .container-inline label::after,
+.form-type-checkboxes .container-inline label::after {
+  content: "";
+}
+.form-type-radios .container-inline .form-type-radio,
+.form-type-checkboxes .container-inline .form-type-checkbox {
+  margin: 0 1em;
+}
+.container-inline .form-actions,
+.container-inline.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}

core/themes/claro/css/classy/components/exposed-filters.css

@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Visual styles for exposed filters.
+ */
+
+.exposed-filters .filters {
+  float: left; /* LTR */
+  margin-right: 1em; /* LTR */
+}
+[dir="rtl"] .exposed-filters .filters {
+  float: right;
+  margin-right: 0;
+  margin-left: 1em;
+}
+.exposed-filters .form-item {
+  margin: 0 0 0.1em 0;
+  padding: 0;
+}
+.exposed-filters .form-item label {
+  float: left; /* LTR */
+  width: 10em;
+  font-weight: normal;
+}
+[dir="rtl"] .exposed-filters .form-item label {
+  float: right;
+}
+.exposed-filters .form-select {
+  width: 14em;
+}
+/* Current filters */
+.exposed-filters .current-filters {
+  margin-bottom: 1em;
+}
+.exposed-filters .current-filters .placeholder {
+  font-weight: bold;
+  font-style: normal;
+}
+.exposed-filters .additional-filters {
+  float: left; /* LTR */
+  margin-right: 1em; /* LTR */
+}
+[dir="rtl"] .exposed-filters .additional-filters {
+  float: right;
+  margin-right: 0;
+  margin-left: 1em;
+}

core/themes/claro/css/classy/components/field.css

@@ -0,0 +1,25 @@
+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+.field__label {
+  font-weight: bold;
+}
+.field--label-inline .field__label,
+.field--label-inline .field__items {
+  float: left; /* LTR */
+}
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+  padding-right: 0.5em;
+}
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+  padding-right: 0;
+  padding-left: 0.5em;
+}
+.field--label-inline .field__label::after {
+  content: ":";
+}

core/themes/claro/css/classy/components/file.css

@@ -0,0 +1,62 @@
+/**
+ * @file
+ * Default style for file module.
+ */
+
+/* File icons. */
+
+.file {
+  display: inline-block;
+  min-height: 16px;
+  padding-left: 20px; /* LTR */
+  background-repeat: no-repeat;
+  background-position: left center; /* LTR */
+}
+[dir="rtl"] .file {
+  padding-right: 20px;
+  padding-left: inherit;
+  background-position: right center;
+}
+.file--general,
+.file--application-octet-stream {
+  background-image: url(../../../images/classy/icons/application-octet-stream.png);
+}
+.file--package-x-generic {
+  background-image: url(../../../images/classy/icons/package-x-generic.png);
+}
+.file--x-office-spreadsheet {
+  background-image: url(../../../images/classy/icons/x-office-spreadsheet.png);
+}
+.file--x-office-document {
+  background-image: url(../../../images/classy/icons/x-office-document.png);
+}
+.file--x-office-presentation {
+  background-image: url(../../../images/classy/icons/x-office-presentation.png);
+}
+.file--text-x-script {
+  background-image: url(../../../images/classy/icons/text-x-script.png);
+}
+.file--text-html {
+  background-image: url(../../../images/classy/icons/text-html.png);
+}
+.file--text-plain {
+  background-image: url(../../../images/classy/icons/text-plain.png);
+}
+.file--application-pdf {
+  background-image: url(../../../images/classy/icons/application-pdf.png);
+}
+.file--application-x-executable {
+  background-image: url(../../../images/classy/icons/application-x-executable.png);
+}
+.file--audio {
+  background-image: url(../../../images/classy/icons/audio-x-generic.png);
+}
+.file--video {
+  background-image: url(../../../images/classy/icons/video-x-generic.png);
+}
+.file--text {
+  background-image: url(../../../images/classy/icons/text-x-generic.png);
+}
+.file--image {
+  background-image: url(../../../images/classy/icons/image-x-generic.png);
+}

core/themes/claro/css/classy/components/forum.css

@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Styling for the Forum module.
+ */
+
+.forum__description {
+  margin: 0.5em;
+  font-size: 0.9em;
+}
+.forum__icon {
+  float: left; /* LTR */
+  width: 24px;
+  height: 24px;
+  margin: 0 9px 0 0; /* LTR */
+  background-image: url(../../../images/classy/icons/forum-icons.png);
+  background-repeat: no-repeat;
+}
+[dir="rtl"] .forum__icon {
+  float: right;
+  margin: 0 0 0 9px;
+}
+.forum__title {
+  overflow: hidden;
+}
+.forum .indented {
+  margin-left: 20px; /* LTR */
+}
+[dir="rtl"] .forum .indented {
+  margin-right: 20px;
+  margin-left: 0;
+}
+.forum__topic-status--new {
+  background-position: -24px 0;
+}
+.forum__topic-status--hot {
+  background-position: -48px 0;
+}
+.forum__topic-status--hot-new {
+  background-position: -72px 0;
+}
+.forum__topic-status--sticky {
+  background-position: -96px 0;
+}
+.forum__topic-status--closed {
+  background-position: -120px 0;
+}

core/themes/claro/css/classy/components/icons.css

@@ -0,0 +1,21 @@
+/**
+ * @file
+ * Visual styles for icons.
+ */
+
+.icon-help {
+  padding: 1px 0 1px 20px; /* LTR */
+  background: url(../../../../../misc/help.png) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .icon-help {
+  padding: 1px 20px 1px 0;
+  background-position: 100% 50%;
+}
+.feed-icon {
+  display: block;
+  overflow: hidden;
+  width: 16px;
+  height: 16px;
+  text-indent: -9999px;
+  background: url(../../../../../misc/feed.svg) no-repeat;
+}

core/themes/claro/css/classy/components/indented.css

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Basic styling for comment module.
+ */
+
+/**
+ * Indent threaded comments.
+ */
+.indented {
+  margin-left: 25px; /* LTR */
+}
+[dir="rtl"] .indented {
+  margin-right: 25px;
+  margin-left: 0;
+}

core/themes/claro/css/classy/components/inline-form.css

@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Visual styles for inline forms.
+ */
+
+.form--inline .form-item {
+  float: left; /* LTR */
+  margin-right: 0.5em; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item {
+  float: right;
+  margin-right: 0;
+  margin-left: 0.5em;
+}
+/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */
+[dir="rtl"] .views-filterable-options-controls .form-item {
+  margin-right: 2%;
+}
+.form--inline .form-item-separator {
+  margin-top: 2.3em;
+  margin-right: 1em; /* LTR */
+  margin-left: 0.5em; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item-separator {
+  margin-right: 0.5em;
+  margin-left: 1em;
+}
+.form--inline .form-actions {
+  clear: left; /* LTR */
+}
+[dir="rtl"] .form--inline .form-actions {
+  clear: right;
+}

core/themes/claro/css/classy/components/item-list.css

@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Visual styles for item list.
+ */
+
+.item-list .title {
+  font-weight: bold;
+}
+.item-list ul {
+  margin: 0 0 0.75em 0;
+  padding: 0;
+}
+.item-list li {
+  margin: 0 0 0.25em 1.5em; /* LTR */
+  padding: 0;
+}
+[dir="rtl"] .item-list li {
+  margin: 0 1.5em 0.25em 0;
+}
+
+/**
+ * Comma separated lists.
+ */
+.item-list--comma-list {
+  display: inline;
+}
+.item-list--comma-list .item-list__comma-list,
+.item-list__comma-list li,
+[dir="rtl"] .item-list--comma-list .item-list__comma-list,
+[dir="rtl"] .item-list__comma-list li {
+  margin: 0;
+}

core/themes/claro/css/classy/components/link.css

@@ -0,0 +1,16 @@
+/**
+ * @file
+ * Style another element as a link.
+ */
+
+button.link {
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  font-size: 1em;
+}
+label button.link {
+  font-weight: bold;
+}

core/themes/claro/css/classy/components/links.css

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Visual styles for links.
+ */
+
+ul.inline,
+ul.links.inline {
+  display: inline;
+  padding-left: 0; /* LTR */
+}
+[dir="rtl"] ul.inline,
+[dir="rtl"] ul.links.inline {
+  padding-right: 0;
+  padding-left: 15px;
+}
+ul.inline li {
+  display: inline;
+  padding: 0 0.5em;
+  list-style-type: none;
+}
+ul.links a.is-active {
+  color: #000;
+}

core/themes/claro/css/classy/components/media-embed-error.css

@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Media Embed filter: default styling for media embed errors.
+ */
+
+/**
+ * The caption filter's styling overrides ours, so add a more specific selector
+ * to account for that.
+ */
+.media-embed-error,
+.caption > .media-embed-error {
+  max-width: 200px;
+  padding: 100px 20px 20px;
+  text-align: center;
+  background-color: #ebebeb;
+  background-image: url(../../../../../modules/media/images/icons/no-thumbnail.png);
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100px 100px;
+}

core/themes/claro/css/classy/components/menu.css

@@ -0,0 +1,34 @@
+/**
+ * @file
+ * Visual styles for menu.
+ */
+
+ul.menu {
+  margin-left: 1em; /* LTR */
+  padding: 0;
+  list-style: none outside;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] ul.menu {
+  margin-right: 1em;
+  margin-left: 0;
+  text-align: right;
+}
+.menu-item--expanded {
+  list-style-type: circle;
+  list-style-image: url(../../../../../misc/menu-expanded.png);
+}
+.menu-item--collapsed {
+  list-style-type: disc;
+  list-style-image: url(../../../../../misc/menu-collapsed.png); /* LTR */
+}
+[dir="rtl"] .menu-item--collapsed {
+  list-style-image: url(../../../../../misc/menu-collapsed-rtl.png);
+}
+.menu-item {
+  margin: 0;
+  padding-top: 0.2em;
+}
+ul.menu a.is-active {
+  color: #000;
+}

core/themes/claro/css/classy/components/more-link.css

@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Markup generated by #type 'more_link'.
+ */
+
+.more-link {
+  display: block;
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .more-link {
+  text-align: left;
+}

core/themes/claro/css/classy/components/node.css

@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Visual styles for nodes.
+ */
+
+.node--unpublished {
+  background-color: #fff4f4;
+}

core/themes/claro/css/classy/components/search-results.css

@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Stylesheet for results generated by the Search module.
+ */
+
+.search-results {
+  list-style: none;
+}

core/themes/claro/css/classy/components/tablesort.css

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Table sort indicator.
+ */
+
+th.is-active img {
+  display: inline;
+}
+td.is-active {
+  background-color: #ddd;
+}

core/themes/claro/css/classy/components/textarea.css

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Visual styles for a resizable textarea.
+ */
+
+.form-textarea-wrapper textarea {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+}

core/themes/claro/css/classy/components/ui-dialog.css

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Styles for modal windows.
+ */
+
+.ui-dialog--narrow {
+  max-width: 500px;
+}
+
+@media screen and (max-width: 600px) {
+  .ui-dialog--narrow {
+    min-width: 95%;
+    max-width: 95%;
+  }
+}

core/themes/claro/css/components/accordion.css

@@ -0,0 +1,57 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Accordion styles.
+ */
+
+.accordion {
+  --accordion-color: var(--color-text);
+  --accordion-border-size: var(--details-border-size);
+  --accordion-border-color: var(--details-border-color);
+  --accordion-border-radius: var(--details-accordion-border-size-radius);
+  --accordion-bg-color: var(--color-white);
+  --accordion-box-shadow: var(--details-box-shadow);
+
+  color: var(--accordion-color);
+  border: var(--accordion-border-size) solid var(--accordion-border-color);
+  border-radius: var(--accordion-border-radius);
+  background-color: var(--accordion-bg-color);
+  box-shadow: var(--accordion-box-shadow);
+}
+
+.accordion__item {
+  --accordion-item-border-radius: var(--details-accordion-border-size-radius);
+
+  margin: 0 -1px;
+  border-radius: 0;
+}
+
+.accordion__item:first-child {
+  margin-top: -1px;
+  border-top-left-radius: var(--accordion-item-border-radius);
+  border-top-right-radius: var(--accordion-item-border-radius);
+}
+
+.accordion__item + .accordion__item {
+  margin-top: -1px;
+}
+
+.accordion__item:last-child {
+  margin-bottom: -1px;
+  border-bottom-right-radius: var(--accordion-item-border-radius);
+  border-bottom-left-radius: var(--accordion-item-border-radius);
+}
+
+.accordion__item .claro-details__summary .summary {
+  --accordion-summary-color: var(--color-gray-800);
+
+  display: block;
+  color: var(--accordion-summary-color);
+  font-weight: normal;
+}

core/themes/claro/css/components/accordion.pcss.css

@@ -0,0 +1,50 @@
+/**
+ * @file
+ * Accordion styles.
+ */
+
+.accordion {
+  --accordion-color: var(--color-text);
+  --accordion-border-size: var(--details-border-size);
+  --accordion-border-color: var(--details-border-color);
+  --accordion-border-radius: var(--details-accordion-border-size-radius);
+  --accordion-bg-color: var(--color-white);
+  --accordion-box-shadow: var(--details-box-shadow);
+
+  color: var(--accordion-color);
+  border: var(--accordion-border-size) solid var(--accordion-border-color);
+  border-radius: var(--accordion-border-radius);
+  background-color: var(--accordion-bg-color);
+  box-shadow: var(--accordion-box-shadow);
+}
+
+.accordion__item {
+  --accordion-item-border-radius: var(--details-accordion-border-size-radius);
+
+  margin: 0 -1px;
+  border-radius: 0;
+
+  &:first-child {
+    margin-top: -1px;
+    border-top-left-radius: var(--accordion-item-border-radius);
+    border-top-right-radius: var(--accordion-item-border-radius);
+  }
+
+  & + .accordion__item {
+    margin-top: -1px;
+  }
+
+  &:last-child {
+    margin-bottom: -1px;
+    border-bottom-right-radius: var(--accordion-item-border-radius);
+    border-bottom-left-radius: var(--accordion-item-border-radius);
+  }
+
+  & .claro-details__summary .summary {
+    --accordion-summary-color: var(--color-gray-800);
+
+    display: block;
+    color: var(--accordion-summary-color);
+    font-weight: normal;
+  }
+}

core/themes/claro/css/components/action-link.css

@@ -0,0 +1,522 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for action links.
+ *
+ * Contains Action link component and the action-links layout styles.
+ */
+
+/**
+ * Action links layout.
+ */
+
+.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-inline-start: var(--space-s);
+}
+
+.action-links__item + .action-links__item > .action-link--small {
+  margin-inline-start: var(--space-xs);
+}
+
+/**
+ * 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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-gray-800);
+  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;
+
+  /* Action link states */
+}
+
+.action-link:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-absolutezero-hover);
+  background-color: var(--color-bgblue-hover);
+}
+
+.action-link:focus {
+  position: relative;
+  z-index: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.action-link:active {
+  color: var(--color-absolutezero-active);
+  background-color: var(--color-bgblue-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;
+  inset-block-start: 0.125rem;
+  /* Set the proper vertical alignment */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.action-link + .action-link {
+  margin-inline-start: var(--space-s);
+}
+
+/**
+  * Action links inside form-actions.
+  *
+  * Add the same margin for action-link inside form-actions as button has.
+  */
+
+.form-actions .action-link,
+.field-actions .action-link {
+  margin-inline: 0 var(--space-s);
+}
+
+/* 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);
+}
+
+.no-touchevents .action-link--small + .action-link--small,
+.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
+  margin-inline-start: var(--space-xs);
+}
+
+/**
+ * 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);
+}
+
+.no-touchevents .action-link--small::before,
+.no-touchevents .action-link--extrasmall::before {
+  inset-block-start: 0.0625rem;
+  /* Set the proper vertical alignment */
+  width: var(--space-s);
+  height: var(--space-s);
+  margin-inline: -0.125rem 0.4em;
+}
+
+/* Plus */
+
+.action-link--icon-plus::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-plus::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-plus:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-plus:active::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+/* Plus — danger */
+
+.action-link--icon-plus.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-plus.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23c11f1f' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-plus.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23ab1b1b' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+/* Trash */
+
+.action-link--icon-trash::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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 (forced-colors: active) {
+  .action-link--icon-trash::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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");
+    mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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 height='16' width='16' fill='%230036B1' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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 height='16' width='16' fill='%23002E9A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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 height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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 height='16' width='16' fill='%23C11F1F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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 height='16' width='16' fill='%23Ab1B1B' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.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.8H2.6c-.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");
+}
+
+/* Ex */
+
+.action-link--icon-ex::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-ex::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-ex:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230035b1' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-ex:active::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+}
+
+/* Ex — danger */
+
+.action-link--icon-ex.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-ex.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23c11f1f' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-ex.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23ab1b1b' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+}
+
+/* Checkmark */
+
+.action-link--icon-checkmark::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-checkmark::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-checkmark:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%230036B1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-checkmark:active::before {
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+}
+
+/* Checkmark — danger */
+
+.action-link--icon-checkmark.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-checkmark.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23c11f1f' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-checkmark.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23ab1b1b' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+}
+
+/* Cog */
+
+.action-link--icon-cog::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-cog::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-cog:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%230036b1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-cog:active::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+}
+
+/* Cog — danger */
+
+.action-link--icon-cog.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-cog.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23C11F1F' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-cog.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.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.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+}
+
+/* Show */
+
+.action-link--icon-show::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-show::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-show:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%230036B1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-show:active::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+}
+
+/* Show - danger */
+
+.action-link--icon-show.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-show.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23d72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-show.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+}
+
+/* Hide */
+
+.action-link--icon-hide::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-hide::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-hide:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%230036B1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-hide:active::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+}
+
+/* Hide - danger */
+
+.action-link--icon-hide.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-hide.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23C11F1F' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-hide.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+}
+
+/* Key */
+
+.action-link--icon-key::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23545560'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-key::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-key:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%230036B1'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key:active::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23002E9A'/%3e%3c/svg%3e");
+}
+
+/* Key — danger */
+
+.action-link--icon-key.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23c11f1f'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23ab1b1b'/%3e%3c/svg%3e");
+}
+
+/* Question Mark */
+
+.action-link--icon-questionmark::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23545560'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+  .action-link--icon-questionmark::before {
+    background: linktext !important;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
+  }
+}
+
+.action-link--icon-questionmark:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%230036B1'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark:active::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23002E9A'/%3e%3c/svg%3e");
+}
+
+/* Question Mark - danger */
+
+.action-link--icon-questionmark.action-link--danger::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark.action-link--danger:hover::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23c11f1f'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark.action-link--danger:active::before {
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-chevron-left::before {
+  display: block;
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
+}
+
+@media (min-width: 30em) {
+  .action-link--icon-chevron-left::before {
+    display: inline-block;
+  }
+}

core/themes/claro/css/components/action-link.pcss.css

@@ -0,0 +1,493 @@
+/**
+ * @file
+ * Styles for action links.
+ *
+ * Contains Action link component and the action-links layout styles.
+ */
+
+/**
+ * Action links layout.
+ */
+.action-links {
+  margin: var(--space-l) 0;
+  list-style: none;
+}
+
+.action-links__item {
+  display: inline-block;
+
+  & + .action-links__item {
+    & > .action-link {
+      margin-inline-start: var(--space-s);
+    }
+
+    & > .action-link--small {
+      margin-inline-start: var(--space-xs);
+    }
+  }
+}
+
+/**
+ * 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-gray-800);
+  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;
+
+  /* Action link states */
+  &:hover {
+    text-decoration: none;
+    color: var(--color-absolutezero-hover);
+    background-color: var(--color-bgblue-hover);
+  }
+
+  &:focus {
+    position: relative;
+    z-index: 1;
+    text-decoration: none;
+  }
+
+  &:active {
+    color: var(--color-absolutezero-active);
+    background-color: var(--color-bgblue-active);
+  }
+
+  /**
+  * Action link icons with states.
+  *
+  * We use parent-relative units here to follow the .action-link's font size.
+  */
+
+  /* Defaults for icons */
+  &::before {
+    position: relative;
+    inset-block-start: 0.125rem;
+    /* Set the proper vertical alignment */
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+
+  & + .action-link {
+    margin-inline-start: var(--space-s);
+  }
+
+  /**
+  * Action links inside form-actions.
+  *
+  * Add the same margin for action-link inside form-actions as button has.
+  */
+  .form-actions &,
+  .field-actions & {
+    margin-inline: 0 var(--space-s);
+  }
+}
+
+.no-touchevents {
+  /* Small variant. */
+  & .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. */
+  & .action-link--extrasmall {
+    padding: 0 var(--space-xs);
+    font-size: var(--font-size-s);
+  }
+
+  & .action-link--small + .action-link--small,
+  & .action-link--extrasmall + .action-link--extrasmall {
+    margin-inline-start: var(--space-xs);
+  }
+}
+
+/**
+ * Action link variants.
+ */
+/* Danger. */
+.action-link--danger {
+  color: var(--color-maximumred);
+
+  &:hover {
+    color: var(--color-maximumred-hover);
+    background-color: var(--color-bgred-hover);
+  }
+
+  &:active {
+    color: var(--color-maximumred-active);
+    background-color: var(--color-bgred-active);
+  }
+}
+
+.no-touchevents .action-link--small::before,
+.no-touchevents .action-link--extrasmall::before {
+  inset-block-start: 0.0625rem;
+  /* Set the proper vertical alignment */
+  width: var(--space-s);
+  height: var(--space-s);
+  margin-inline: -0.125rem 0.4em;
+}
+
+.action-link--icon-plus {
+  /* Plus */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/plus.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/plus.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/plus.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/plus.svg);
+  }
+
+  &.action-link--danger {
+    /* Plus — danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/plus.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/plus.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/plus.svg);
+    }
+  }
+}
+
+.action-link--icon-trash {
+  /* Trash */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/trash.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/trash.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/trash.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/trash.svg);
+  }
+
+  &.action-link--danger {
+    /* Trash — danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/trash.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/trash.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/trash.svg);
+    }
+  }
+}
+
+.action-link--icon-ex {
+  /* Ex */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/ex.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/ex.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/ex.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/ex.svg);
+  }
+
+  &.action-link--danger {
+    /* Ex — danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/ex.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/ex.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/ex.svg);
+    }
+  }
+}
+
+.action-link--icon-checkmark {
+  /* Checkmark */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/checkmark.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/checkmark.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/checkmark.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/checkmark.svg);
+  }
+
+  &.action-link--danger {
+    /* Checkmark — danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/checkmark.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/checkmark.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/checkmark.svg);
+    }
+  }
+}
+
+.action-link--icon-cog {
+  /* Cog */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/cog.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/cog.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/cog.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/cog.svg);
+  }
+
+  &.action-link--danger {
+    /* Cog — danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/cog.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/cog.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/cog.svg);
+    }
+  }
+}
+
+.action-link--icon-show {
+  /* Show */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/show.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/show.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/show.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/show.svg);
+  }
+
+  &.action-link--danger {
+    /* Show - danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/show.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/show.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/show.svg);
+    }
+  }
+}
+
+.action-link--icon-hide {
+  /* Hide */
+  &::before {
+    content: "";
+    background-image: url(../../images/icons/545560/hide.svg);
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/hide.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url(../../images/icons/0036b1/hide.svg);
+  }
+
+  &:active::before {
+    background-image: url(../../images/icons/002e9a/hide.svg);
+  }
+
+  &.action-link--danger {
+    /* Hide - danger */
+    &::before {
+      background-image: url(../../images/icons/d72222/hide.svg);
+    }
+
+    &:hover::before {
+      background-image: url(../../images/icons/c11f1f/hide.svg);
+    }
+
+    &:active::before {
+      background-image: url(../../images/icons/ab1b1b/hide.svg);
+    }
+  }
+}
+
+.action-link--icon-key {
+  /* Key */
+  &::before {
+    content: "";
+    background-image: url("../../images/icons/545560/key.svg");
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/key.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url("../../images/icons/0036b1/key.svg");
+  }
+
+  &:active::before {
+    background-image: url("../../images/icons/002e9a/key.svg");
+  }
+
+  &.action-link--danger {
+    /* Key — danger */
+    &::before {
+      background-image: url("../../images/icons/d72222/key.svg");
+    }
+
+    &:hover::before {
+      background-image: url("../../images/icons/c11f1f/key.svg");
+    }
+
+    &:active::before {
+      background-image: url("../../images/icons/ab1b1b/key.svg");
+    }
+  }
+}
+
+.action-link--icon-questionmark {
+  /* Question Mark */
+  &::before {
+    content: "";
+    background-image: url("../../images/icons/545560/questionmark.svg");
+
+    @media (forced-colors: active) {
+      background: linktext !important;
+      mask-repeat: no-repeat;
+      mask-image: url(../../images/icons/d72222/questionmark.svg);
+    }
+  }
+
+  &:hover::before {
+    background-image: url("../../images/icons/0036b1/questionmark.svg");
+  }
+
+  &:active::before {
+    background-image: url("../../images/icons/002e9a/questionmark.svg");
+  }
+
+  &.action-link--danger {
+    /* Question Mark - danger */
+    &::before {
+      background-image: url("../../images/icons/d72222/questionmark.svg");
+    }
+
+    &:hover::before {
+      background-image: url("../../images/icons/c11f1f/questionmark.svg");
+    }
+
+    &:active::before {
+      background-image: url("../../images/icons/ab1b1b/questionmark.svg");
+    }
+  }
+}
+
+.action-link--icon-chevron-left {
+  &::before {
+    display: block;
+    content: "";
+    background-image: url("../../images/icons/545560/pager-prev.svg");
+  }
+}
+
+@media (min-width: 30em) {
+  .action-link--icon-chevron-left {
+    &::before {
+      display: inline-block;
+    }
+  }
+}

core/themes/claro/css/components/ajax-progress.module.css

@@ -0,0 +1,120 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Throbber.
+ */
+
+.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: -0.1875rem 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 .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
+.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
+  margin-inline-start: 0;
+}
+
+/**
+ * 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-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
+}
+
+.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-inline-start: var(--ajax-progress-margin-horizontal);
+  font-size: var(--font-size-label);
+}
+
+/**
+ * Full screen throbber.
+ */
+
+.ajax-progress--fullscreen,
+.ui-dialog .ajax-progress--throbber {
+  position: fixed;
+  z-index: 1261;
+  inset-block-start: 50%;
+  inset-inline-start: 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,
+.ui-dialog .ajax-progress__throbber {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  width: 1.75rem; /* 28px */
+  height: 1.75rem; /* 28px */
+  margin: -0.875rem;
+  content: "";
+  border: 3px solid var(--color-absolutezero);
+  border-right: 3px dotted transparent;
+}
+
+.ui-dialog .ajax-progress__message {
+  display: none;
+}
+
+@keyframes claro-throbber {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

core/themes/claro/css/components/ajax-progress.module.pcss.css

@@ -0,0 +1,107 @@
+/**
+ * @file
+ * Throbber.
+ */
+
+.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 .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
+.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
+  margin-inline-start: 0;
+}
+/**
+ * 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-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
+}
+
+.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-inline-start: var(--ajax-progress-margin-horizontal);
+  font-size: var(--font-size-label);
+}
+
+/**
+ * Full screen throbber.
+ */
+.ajax-progress--fullscreen,
+.ui-dialog .ajax-progress--throbber {
+  position: fixed;
+  z-index: 1261;
+  inset-block-start: 50%;
+  inset-inline-start: 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,
+.ui-dialog .ajax-progress__throbber {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  width: 1.75rem; /* 28px */
+  height: 1.75rem; /* 28px */
+  margin: -0.875rem;
+  content: "";
+  border: 3px solid var(--color-absolutezero);
+  border-right: 3px dotted transparent;
+}
+
+.ui-dialog .ajax-progress__message {
+  display: none;
+}
+
+@keyframes claro-throbber {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

core/themes/claro/css/components/autocomplete-loading.module.css

@@ -0,0 +1,77 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for animated throbber.
+ *
+ * @see autocomplete.js
+ */
+
+/* cspell:ignore is-autocompleting */
+
+/**
+ * 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 active autocomplete 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 autocomplete 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 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: 100% 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%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
+  background-position: center right -10px;
+}
+
+.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 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
+  background-position: 0 50%;
+}
+
+.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%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
+  background-position: center left 10px;
+}
+
+/**
+ * Autocomplete wrapper for autocomplete message.
+ */
+
+.claro-autocomplete {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.claro-autocomplete__message {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 100%;
+  max-width: 100%;
+  margin-block-end: 0.15rem;
+  color: var(--color-link);
+  font-size: var(--font-size-xxs); /* ~11px */
+  font-weight: bold;
+  line-height: calc(18rem / 16); /* 18px */
+}

core/themes/claro/css/components/autocomplete-loading.module.pcss.css

@@ -0,0 +1,73 @@
+/**
+ * @file
+ * Visual styles for animated throbber.
+ *
+ * @see autocomplete.js
+ */
+
+/* cspell:ignore is-autocompleting */
+
+/**
+ * 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 active autocomplete 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 autocomplete 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(../../images/icons/868686/magnifier.svg);
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+
+    &.is-autocompleting {
+      background-image: url(../../images/icons/003ecc/spinner.svg);
+      background-position: center right -10px;
+    }
+  }
+
+  &[dir="rtl"] {
+    & .form-autocomplete {
+      background-image: url(../../images/icons/868686/magnifier-rtl.svg);
+      background-position: 0 50%;
+
+      &.is-autocompleting {
+        background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
+        background-position: center left 10px;
+      }
+    }
+  }
+}
+
+/**
+ * Autocomplete wrapper for autocomplete message.
+ */
+.claro-autocomplete {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.claro-autocomplete__message {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 100%;
+  max-width: 100%;
+  margin-block-end: 0.15rem;
+  color: var(--color-link);
+  font-size: var(--font-size-xxs); /* ~11px */
+  font-weight: bold;
+  line-height: calc(18rem / 16); /* 18px */
+}

core/themes/claro/css/components/breadcrumb.css

@@ -0,0 +1,66 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Breadcrumbs.
+ */
+
+.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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text);
+  font-weight: bold;
+}
+
+.breadcrumb__item + .breadcrumb__item::before {
+  display: inline-block;
+  padding: 0 0.75rem;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
+}
+
+[dir="rtl"] :is(.breadcrumb__item + .breadcrumb__item::before) {
+  transform: scaleX(-1);
+}
+
+@media (forced-colors: active) {
+  .breadcrumb__item + .breadcrumb__item::before {
+    width: 0.3125rem; /* Width and height of the SVG. */
+    height: 0.5rem;
+    content: "";
+    background-color: canvastext;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+  }
+}
+
+.breadcrumb__link:hover,
+.breadcrumb__link:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}

core/themes/claro/css/components/breadcrumb.pcss.css

@@ -0,0 +1,51 @@
+/**
+ * @file
+ * Breadcrumbs.
+ */
+
+.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 {
+  display: inline-block;
+  padding: 0 0.75rem;
+  content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
+
+  @nest [dir="rtl"] & {
+    transform: scaleX(-1);
+  }
+
+  @media (forced-colors: active) {
+    width: 5px; /* Width and height of the SVG. */
+    height: 8px;
+    content: "";
+    background-color: canvastext;
+    mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+}
+
+.breadcrumb__link:hover,
+.breadcrumb__link:focus {
+  text-decoration: none;
+}

core/themes/claro/css/components/button.css

@@ -0,0 +1,163 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Structural styles for Claro's UI buttons
+ *
+ * Apply these classes to button elements (<button>, <input type="button" />).
+ */
+
+/**
+ * Buttons.
+ *
+ * 1. Padding widths detracted by width of the transparent borders to make
+ *    button size match with design system.
+ * 2. 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-block: var(--space-m);
+  margin-inline: 0 var(--space-s);
+  padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
+  cursor: pointer;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--button-fg-color);
+  border: 1px solid transparent;
+  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; /* 2 */
+}
+
+.button:not(:focus) {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.button:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--button-fg-color);
+  background-color: var(--button--hover-bg-color);
+}
+
+.button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.button:active {
+  background-color: var(--button--active-bg-color);
+}
+
+/* Common styles for small buttons. */
+
+.no-touchevents .button--small {
+  margin-block: var(--space-s);
+  margin-inline: 0 var(--space-xs);
+  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-block: var(--space-xs);
+  margin-inline: 0 var(--space-xs);
+  padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
+  font-size: var(--font-size-xs);
+}
+
+/* Styles for action link buttons. */
+
+.button--action {
+  margin: 0;
+}
+
+.button--action::before {
+  margin-inline: -0.25em 0;
+  padding-inline: 0 0.25em;
+  content: "+";
+  font-weight: 900;
+}
+
+/* Primary button style.s */
+
+.button--primary {
+  color: var(--button-fg-color--primary);
+  background-color: var(--button-bg-color--primary);
+}
+
+.button--primary:is(:hover, :active) {
+  color: var(--button-fg-color--primary);
+  background-color: var(--button--hover-bg-color--primary);
+}
+
+/* Danger button styles */
+
+.button--danger {
+  color: var(--button-fg-color--danger);
+  background-color: var(--button-bg-color--danger);
+}
+
+.button--danger:is(:hover, :active) {
+  color: var(--button-fg-color--danger);
+  background-color: var(--button--hover-bg-color--danger);
+}
+
+/**
+ * Disabled state styles as last.
+ *
+ * Overrides every definitions before, including variants.
+ */
+
+.button:is(:disabled, .is-disabled) {
+  color: var(--button--disabled-fg-color);
+  background-color: var(--button--disabled-bg-color);
+}
+
+/* Make disabled <link> behave like a [disabled] <input> or <button>. */
+
+.button.is-disabled {
+  -webkit-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;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  border: 0;
+  background: none;
+  appearance: none;
+}

core/themes/claro/css/components/button.pcss.css

@@ -0,0 +1,146 @@
+/**
+ * @file
+ * Structural styles for Claro's UI buttons
+ *
+ * Apply these classes to button elements (<button>, <input type="button" />).
+ */
+
+/**
+ * Buttons.
+ *
+ * 1. Padding widths detracted by width of the transparent borders to make
+ *    button size match with design system.
+ * 2. 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-block: var(--space-m);
+  margin-inline: 0 var(--space-s);
+  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;
+  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; /* 2 */
+
+  &:not(:focus) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: var(--button-fg-color);
+    background-color: var(--button--hover-bg-color);
+  }
+
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: var(--button--active-bg-color);
+  }
+}
+
+/* Common styles for small buttons. */
+.no-touchevents {
+  & .button--small {
+    margin-block: var(--space-s);
+    margin-inline: 0 var(--space-xs);
+    padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
+    font-size: var(--font-size-xs);
+  }
+
+  /* Common styles for extra small buttons. */
+  & .button--extrasmall {
+    margin-block: var(--space-xs);
+    margin-inline: 0 var(--space-xs);
+    padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
+    font-size: var(--font-size-xs);
+  }
+}
+
+/* Styles for action link buttons. */
+.button--action {
+  margin: 0;
+
+  &::before {
+    margin-inline: -0.25em 0;
+    padding-inline: 0 0.25em;
+    content: "+";
+    font-weight: 900;
+  }
+}
+
+/* Primary button style.s */
+.button--primary {
+  color: var(--button-fg-color--primary);
+  background-color: var(--button-bg-color--primary);
+
+  &:is(:hover, :active) {
+    color: var(--button-fg-color--primary);
+    background-color: var(--button--hover-bg-color--primary);
+  }
+}
+
+/* Danger button styles */
+.button--danger {
+  color: var(--button-fg-color--danger);
+  background-color: var(--button-bg-color--danger);
+
+  &:is(:hover, :active) {
+    color: var(--button-fg-color--danger);
+    background-color: var(--button--hover-bg-color--danger);
+  }
+}
+
+/**
+ * Disabled state styles as last.
+ *
+ * Overrides every definitions before, including variants.
+ */
+.button {
+  &:is(:disabled, .is-disabled) {
+    color: var(--button--disabled-fg-color);
+    background-color: var(--button--disabled-bg-color);
+  }
+
+  /* Make disabled <link> behave like a [disabled] <input> or <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;
+}

core/themes/claro/css/components/card.css

@@ -0,0 +1,164 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Card.
+ */
+
+:root {
+  --card-bg-color: var(--color-white);
+  --card-border-size: 1px;
+  --card-border-color: var(--color-gray-200-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 0.25rem 0.625rem 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-start-start-radius: var(--card-image-border-radius-size);
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--card-image-border-radius-size);
+    border-end-end-radius: 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-inline-start: var(--space-m);
+  }
+}
+
+@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-block: 0 var(--space-m);
+}
+
+.card__content-item:last-child {
+  margin-block-end: 0;
+}
+
+/**
+ * Card footer.
+ */
+
+.card__footer {
+  order: 100;
+  margin-block-start: var(--space-l);
+}
+
+.card__footer .action-links {
+  margin-block: 0;
+  text-align: right; /* LTR */
+}
+
+[dir="rtl"] :is(.card__footer .action-links) {
+  text-align: left;
+}

core/themes/claro/css/components/card.pcss.css

@@ -0,0 +1,149 @@
+/**
+ * @file
+ * Card.
+ */
+
+:root {
+  --card-bg-color: var(--color-white);
+  --card-border-size: 1px;
+  --card-border-color: var(--color-gray-200-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-start-start-radius: var(--card-image-border-radius-size);
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--card-image-border-radius-size);
+    border-end-end-radius: 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-inline-start: var(--space-m);
+  }
+}
+
+@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-block: 0 var(--space-m);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+/**
+ * Card footer.
+ */
+.card__footer {
+  order: 100;
+  margin-block-start: var(--space-l);
+}
+
+.card__footer .action-links {
+  margin-block: 0;
+  text-align: right; /* LTR */
+
+  @nest [dir="rtl"] & {
+    text-align: left;
+  }
+}

core/themes/claro/css/components/container-inline.css

@@ -0,0 +1,19 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline .form-radios label::after {
+  content: "";
+}
+
+.container-inline .form-radios .form-type-radio {
+  margin-inline-end: 1em;
+}

core/themes/claro/css/components/container-inline.module.css

@@ -0,0 +1,25 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline div,
+.container-inline label {
+  display: inline-block;
+}
+
+.form-items-inline {
+  margin-block: -2px;
+}
+
+.form-items-inline > .form-item {
+  display: inline-block;
+  margin-block: 2px;
+}

core/themes/claro/css/components/container-inline.module.pcss.css

@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline div,
+.container-inline label {
+  display: inline-block;
+}
+
+.form-items-inline {
+  margin-block: -2px;
+
+  & > .form-item {
+    display: inline-block;
+    margin-block: 2px;
+  }
+}

core/themes/claro/css/components/container-inline.pcss.css

@@ -0,0 +1,14 @@
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline .form-radios {
+  & label::after {
+    content: "";
+  }
+
+  & .form-type-radio {
+    margin-inline-end: 1em;
+  }
+}

core/themes/claro/css/components/content-header.css

@@ -0,0 +1,17 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * Content header.
+ */
+
+.content-header {
+  overflow: hidden;
+  margin-bottom: var(--space-s);
+  padding: var(--space-l) 0 0;
+  background-color: var(--color-gray-050);
+}

core/themes/claro/css/components/content-header.pcss.css

@@ -0,0 +1,10 @@
+/**
+ * Content header.
+ */
+
+.content-header {
+  overflow: hidden;
+  margin-bottom: var(--space-s);
+  padding: var(--space-l) 0 0;
+  background-color: var(--color-gray-050);
+}

core/themes/claro/css/components/details.css

@@ -0,0 +1,464 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+
+/**
+ * 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-block: 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);
+
+  /*
+   * The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent table
+   * element constrains the width. This can happen when toggling the
+   * "lazy-load" option within an image field.
+   */
+}
+
+td .claro-details {
+  width: min-content;
+  min-width: 100%;
+}
+
+.claro-details--accordion-item,
+.claro-details--vertical-tabs-item {
+  margin-block: 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-block: var(--space-m);
+  padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
+  list-style: none;
+  cursor: pointer;
+  transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
+  color: var(--color-gray-800);
+  border-radius: var(--size-summary-border-radius);
+  background-color: transparent;
+  line-height: var(--space-m);
+}
+
+/* Modifiers */
+
+.claro-details__summary--accordion,
+.claro-details__summary--accordion-item,
+.claro-details__summary--vertical-tabs-item {
+  padding-block: var(--summary-accordion-padding-vertical);
+  padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
+  background: var(--color-white);
+  line-height: var(--summary-accordion-line-height);
+}
+
+/**
+ * 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;
+  inset-block-start: 50%;
+  inset-inline-start: var(--space-s);
+  display: inline-block;
+  width: var(--space-m);
+  height: var(--space-m);
+  margin-block-start: calc(var(--space-m) / -2);
+  content: "";
+  transition: transform var(--details-transform-transition-duration) ease-in 0s;
+  transform: rotate(90deg);
+  text-align: center;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
+  background-size: contain;
+}
+
+[dir="rtl"] .claro-details__summary::before {
+  transform: rotate(-270deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .claro-details__summary::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .claro-details__summary::before {
+    width: 0.5625rem;
+    height: 0.5625rem;
+    transition:
+      transform var(--details-transform-transition-duration) ease-in 0s,
+      margin var(--details-transform-transition-duration) ease-in 0s;
+    transform: rotate(135deg); /* LTR */
+    border-block-start: 0.125rem solid;
+    border-inline-end: 0.125rem solid;
+    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-allowed-list */
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
+    .claro-details__summary::before {
+      transition: none;
+    }
+  }
+}
+
+/**
+ * Details summary focus.
+ */
+
+.claro-details__summary::after {
+  position: absolute;
+  inset: -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'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' 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 (forced-colors: active) {
+  .claro-details__summary:hover::before,
+  .claro-details__summary:hover:focus::before,
+  .claro-details[open] > .claro-details__summary:focus::before {
+    background: none;
+  }
+
+  .claro-details[open] > .claro-details__summary::before,
+  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
+    margin-block-start: -0.125rem;
+    margin-inline-end: 0.125rem;
+    transform: rotate(-45deg); /* 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: var(--details-box-shadow);
+}
+
+.claro-details__summary:hover {
+  color: var(--color-absolutezero);
+  background-color: var(--color-bgblue-hover);
+}
+
+/**
+ * Focus styles.
+ */
+
+/**
+ * Active has to be here for Firefox.
+ */
+
+[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
+[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
+[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::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"] :is([open] > .claro-details__summary--accordion:not(:focus, :active)::after),
+[dir="rtl"] :is([open] > .claro-details__summary--accordion-item:not(:focus, :active)::after),
+[dir="rtl"] :is([open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after) {
+  border-width: 0 var(--details-summary-focus-border-size) 0 0;
+}
+
+.claro-details__summary:focus::after,
+.claro-details__summary:active::after {
+  opacity: 1;
+}
+
+/**
+ * Safari workaround.
+ */
+
+/* stylelint-disable-next-line unit-allowed-list */
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
+    .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-gray-050-o-40);
+}
+
+/* @see Drupal.behaviors.verticalTabs */
+
+@media screen and (min-width: 40.0625rem) {
+  .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;
+  }
+
+  .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-block-end: 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);
+}
+
+.claro-details__summary-summary {
+  display: block;
+  color: var(--color-gray-800);
+  font-size: var(--font-size-s);
+  font-weight: normal;
+}
+
+.required-mark::after {
+  display: inline-block;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  margin-inline: 0.3em;
+  content: "";
+  vertical-align: super;
+  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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='%23e00'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 0.4375rem 0.4375rem;
+}

core/themes/claro/css/components/details.pcss.css

@@ -0,0 +1,439 @@
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+
+/**
+ * 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-block: 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);
+
+  /*
+   * The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent table
+   * element constrains the width. This can happen when toggling the
+   * "lazy-load" option within an image field.
+   */
+  @nest td & {
+    width: min-content;
+    min-width: 100%;
+  }
+}
+
+.claro-details--accordion-item,
+.claro-details--vertical-tabs-item {
+  margin-block: 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-block: var(--space-m);
+  padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
+  list-style: none;
+  cursor: pointer;
+  transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
+  color: var(--color-gray-800);
+  border-radius: var(--size-summary-border-radius);
+  background-color: transparent;
+  line-height: var(--space-m);
+}
+
+/* Modifiers */
+.claro-details__summary--accordion,
+.claro-details__summary--accordion-item,
+.claro-details__summary--vertical-tabs-item {
+  padding-block: var(--summary-accordion-padding-vertical);
+  padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
+  background: var(--color-white);
+  line-height: var(--summary-accordion-line-height);
+}
+
+/**
+ * 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;
+  inset-block-start: 50%;
+  inset-inline-start: var(--space-s);
+  display: inline-block;
+  width: var(--space-m);
+  height: var(--space-m);
+  margin-block-start: calc(var(--space-m) / -2);
+  content: "";
+  transition: transform var(--details-transform-transition-duration) ease-in 0s;
+  transform: rotate(90deg);
+  text-align: center;
+  background-image: url(../../images/icons/545560/chevron-right.svg);
+  background-size: contain;
+
+  @nest [dir="rtl"] & {
+    transform: rotate(-270deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .claro-details__summary::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .claro-details__summary::before {
+    width: 0.5625rem;
+    height: 0.5625rem;
+    transition:
+      transform var(--details-transform-transition-duration) ease-in 0s,
+      margin var(--details-transform-transition-duration) ease-in 0s;
+    transform: rotate(135deg); /* LTR */
+    border-block-start: 0.125rem solid;
+    border-inline-end: 0.125rem solid;
+    background: none;
+
+    @nest [dir="rtl"] & {
+      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-allowed-list */
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
+    .claro-details__summary::before {
+      transition: none;
+    }
+  }
+}
+
+/**
+ * Details summary focus.
+ */
+.claro-details__summary::after {
+  position: absolute;
+  inset: -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(../../images/icons/0036b1/chevron-right.svg);
+}
+
+.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 (forced-colors: active) {
+  .claro-details__summary:hover::before,
+  .claro-details__summary:hover:focus::before,
+  .claro-details[open] > .claro-details__summary:focus::before {
+    background: none;
+  }
+
+  .claro-details[open] > .claro-details__summary::before,
+  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
+    margin-block-start: -0.125rem;
+    margin-inline-end: 0.125rem;
+    transform: rotate(-45deg); /* 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: var(--details-box-shadow);
+}
+
+.claro-details__summary:hover {
+  color: var(--color-absolutezero);
+  background-color: var(--color-bgblue-hover);
+}
+
+/**
+ * Focus styles.
+ */
+
+/**
+ * Active has to be here for Firefox.
+ */
+[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
+[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
+[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::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;
+
+  @nest [dir="rtl"] & {
+    border-width: 0 var(--details-summary-focus-border-size) 0 0;
+  }
+}
+
+.claro-details__summary:focus::after,
+.claro-details__summary:active::after {
+  opacity: 1;
+}
+
+/**
+ * Safari workaround.
+ */
+/* stylelint-disable-next-line unit-allowed-list */
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
+    .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-gray-050-o-40);
+}
+
+/* @see Drupal.behaviors.verticalTabs */
+@media screen and (min-width: 641px) {
+  .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;
+  }
+
+  .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-block-end: 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);
+}
+
+.claro-details__summary-summary {
+  display: block;
+  color: var(--color-gray-800);
+  font-size: var(--font-size-s);
+  font-weight: normal;
+}
+
+.required-mark::after {
+  display: inline-block;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  margin-inline: 0.3em;
+  content: "";
+  vertical-align: super;
+  background-image: url(../../images/core/ee0000/required.svg);
+  background-repeat: no-repeat;
+  background-size: 0.4375rem 0.4375rem;
+}

core/themes/claro/css/components/dialog.css

@@ -0,0 +1,167 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--jui-dialog-border-radius);
+  background: transparent;
+  box-shadow: var(--jui-dialog-box-shadow);
+}
+
+@media (forced-colors: active) {
+  .ui-dialog {
+    border: 1px solid transparent;
+  }
+}
+
+.ui-dialog:focus {
+  outline: var(--jui-dialog--focus-outline);
+  box-shadow: var(--jui-dialog--focus-box-shadow);
+}
+
+@media all and (max-width: 48em) {
+  /* 768px */
+  .ui-dialog:not(.ui-dialog-off-canvas) {
+    min-width: 92%;
+    max-width: 92%;
+  }
+}
+
+.ui-dialog .ui-dialog-titlebar {
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
+  color: var(--jui-dialog-title-color);
+  border-top-left-radius: var(--jui-dialog-border-radius);
+  border-top-right-radius: var(--jui-dialog-border-radius);
+  background: var(--jui-dialog-title-bg-color);
+  line-height: calc(var(--space-m) * 2);
+}
+
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
+  padding-right: var(--space-l);
+  padding-left: var(--jui-dialog-close-button-reserved-space);
+}
+
+.ui-dialog .ui-dialog-title {
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--jui-dialog-title-font-size);
+  font-weight: bold;
+}
+
+.ui-dialog .ui-dialog-titlebar-close {
+  position: absolute;
+  top: 50%;
+  right: 0; /* LTR */
+  box-sizing: border-box;
+  width: var(--jui-dialog-close-button-size);
+  height: var(--jui-dialog-close-button-size);
+  margin: 0 var(--space-l);
+  padding: 0;
+  transition: all 0.1s;
+  transform: translateY(-50%);
+  border: 2px solid transparent;
+  border-radius: var(--jui-dialog-close-button-border-radius);
+  background: none;
+}
+
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
+  right: auto;
+  left: 0;
+}
+
+.ui-dialog .ui-dialog-titlebar-close:hover {
+  border-color: var(--color-white);
+}
+
+.ui-dialog .ui-dialog-titlebar-close:focus {
+  border-color: var(--color-focus);
+  outline: var(--jui-dialog--focus-outline);
+  box-shadow: none;
+}
+
+.ui-dialog .ui-icon.ui-icon-closethick {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  transform: translate(-50%, -50%);
+  background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
+}
+
+@media (forced-colors: active) {
+  .ui-dialog .ui-icon.ui-icon-closethick {
+    background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='buttonText' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
+  }
+}
+
+.ui-dialog > .ui-dialog-content {
+  overflow: auto;
+  padding: var(--space-m) var(--space-l);
+  color: var(--color-text);
+  background: var(--color-white);
+}
+
+.ui-dialog > .ui-dialog-buttonpane {
+  color: var(--color-text);
+  border-bottom-right-radius: var(--jui-dialog-border-radius);
+  border-bottom-left-radius: var(--jui-dialog-border-radius);
+  background: var(--color-gray-050);
+}
+
+.ui-dialog-buttonpane .ui-dialog-buttonset {
+  display: flex;
+  gap: var(--space-s);
+  justify-content: flex-end;
+  margin-block: var(--space-m);
+  margin-inline-end: var(--space-l);
+}
+
+.ui-dialog-buttonpane .ui-dialog-buttonset > * {
+  margin: 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,
+.ui-dialog .ui-dialog-content .field-actions {
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Off-canvas styles.
+ */
+
+.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
+  background: none;
+}
+
+#drupal-off-canvas .form-type--boolean {
+  margin-left: 0;
+}
+
+#drupal-off-canvas .form-item .form-item__description {
+  color: var(--color-gray-050);
+  font-size: 0.75rem;
+}

core/themes/claro/css/components/dialog.pcss.css

@@ -0,0 +1,154 @@
+/**
+ * @file
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--jui-dialog-border-radius);
+  background: transparent;
+  box-shadow: var(--jui-dialog-box-shadow);
+
+  @media (forced-colors: active) {
+    border: 1px solid transparent;
+  }
+}
+
+.ui-dialog:focus {
+  outline: var(--jui-dialog--focus-outline);
+  box-shadow: var(--jui-dialog--focus-box-shadow);
+}
+
+@media all and (max-width: 48em) {
+  /* 768px */
+  .ui-dialog:not(.ui-dialog-off-canvas) {
+    min-width: 92%;
+    max-width: 92%;
+  }
+}
+
+.ui-dialog .ui-dialog-titlebar {
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
+  color: var(--jui-dialog-title-color);
+  border-top-left-radius: var(--jui-dialog-border-radius);
+  border-top-right-radius: var(--jui-dialog-border-radius);
+  background: var(--jui-dialog-title-bg-color);
+  line-height: calc(var(--space-m) * 2);
+}
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
+  padding-right: var(--space-l);
+  padding-left: var(--jui-dialog-close-button-reserved-space);
+}
+
+.ui-dialog .ui-dialog-title {
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--jui-dialog-title-font-size);
+  font-weight: bold;
+}
+
+.ui-dialog .ui-dialog-titlebar-close {
+  position: absolute;
+  top: 50%;
+  right: 0; /* LTR */
+  box-sizing: border-box;
+  width: var(--jui-dialog-close-button-size);
+  height: var(--jui-dialog-close-button-size);
+  margin: 0 var(--space-l);
+  padding: 0;
+  transition: all 0.1s;
+  transform: translateY(-50%);
+  border: 2px solid transparent;
+  border-radius: var(--jui-dialog-close-button-border-radius);
+  background: none;
+}
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
+  right: auto;
+  left: 0;
+}
+
+.ui-dialog .ui-dialog-titlebar-close:hover {
+  border-color: var(--color-white);
+}
+
+.ui-dialog .ui-dialog-titlebar-close:focus {
+  border-color: var(--color-focus);
+  outline: var(--jui-dialog--focus-outline);
+  box-shadow: none;
+}
+
+.ui-dialog .ui-icon.ui-icon-closethick {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  transform: translate(-50%, -50%);
+  background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
+}
+
+@media (forced-colors: active) {
+  .ui-dialog .ui-icon.ui-icon-closethick {
+    background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
+  }
+}
+
+.ui-dialog > .ui-dialog-content {
+  overflow: auto;
+  padding: var(--space-m) var(--space-l);
+  color: var(--color-text);
+  background: var(--color-white);
+}
+
+.ui-dialog > .ui-dialog-buttonpane {
+  color: var(--color-text);
+  border-bottom-right-radius: var(--jui-dialog-border-radius);
+  border-bottom-left-radius: var(--jui-dialog-border-radius);
+  background: var(--color-gray-050);
+}
+
+.ui-dialog-buttonpane .ui-dialog-buttonset {
+  display: flex;
+  gap: var(--space-s);
+  justify-content: flex-end;
+  margin-block: var(--space-m);
+  margin-inline-end: var(--space-l);
+  & > * {
+    margin: 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,
+.ui-dialog .ui-dialog-content .field-actions {
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Off-canvas styles.
+ */
+.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
+  background: none;
+}
+
+#drupal-off-canvas {
+  & .form-type--boolean {
+    margin-left: 0;
+  }
+  & .form-item .form-item__description {
+    color: var(--color-gray-050);
+    font-size: 0.75rem;
+  }
+}

core/themes/claro/css/components/divider.css

@@ -0,0 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * Divider.
+ */
+
+.divider {
+  height: 1px;
+  background-color: var(--color-divider);
+}

core/themes/claro/css/components/divider.pcss.css

@@ -0,0 +1,8 @@
+/**
+ * Divider.
+ */
+
+.divider {
+  height: 1px;
+  background-color: var(--color-divider);
+}

core/themes/claro/css/components/dropbutton-noscript.css

@@ -0,0 +1,18 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Dropbutton styles for when JavaScript is not loaded.
+ */
+html .dropbutton--small,
+html .dropbutton--extrasmall,
+html .dropbutton {
+  height: auto;
+}
+html .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+  visibility: visible;
+}

core/themes/claro/css/components/dropbutton-noscript.pcss.css

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Dropbutton styles for when JavaScript is not loaded.
+ */
+html {
+  .dropbutton--small,
+  .dropbutton--extrasmall,
+  .dropbutton {
+    height: auto;
+  }
+
+  .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+    visibility: visible;
+  }
+}

core/themes/claro/css/components/dropbutton.css

@@ -0,0 +1,440 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @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 {
+  /**
+  * 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;
+  --dropbutton-item-max-width: 12.5rem;
+  /* 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,
+.field-actions .dropbutton-wrapper {
+  margin-block: var(--space-xs);
+  margin-inline: 0 var(--space-m);
+}
+
+.dropbutton-widget {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.js .dropbutton-wrapper.open .dropbutton-widget {
+  z-index: var(--dropbutton-widget-z-index);
+}
+
+/**
+ * Dropbutton list.
+ */
+
+.dropbutton {
+  display: block;
+  overflow: visible;
+  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
+  height: var(--dropbutton-toggle-size);
+  margin: 0;
+  list-style: none;
+}
+
+.dropbutton-widget {
+  border-radius: var(--button-border-radius-size);
+  background-color: var(--button-bg-color);
+}
+
+/* Variants. */
+
+.dropbutton--small {
+  height: var(--dropbutton-small-toggle-size);
+}
+
+.dropbutton--extrasmall {
+  height: var(--dropbutton-extrasmall-toggle-size);
+}
+
+/**
+ * First dropbutton list item.
+ */
+
+.dropbutton--multiple .dropbutton__item:first-of-type {
+  margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
+  white-space: nowrap;
+}
+
+[dir="rtl"] :is(.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 */
+
+.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 */
+  white-space: nowrap;
+}
+
+[dir="rtl"] :is(.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));
+}
+
+.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 */
+  white-space: nowrap;
+}
+
+[dir="rtl"] :is(.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-inline-start: var(--dropbutton-border-size) solid white !important;
+  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' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23000f33'/%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"] :is(.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 (forced-colors: 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-width: 0.125rem 0.125rem 0 0;
+    border-style: solid;
+    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;
+  -webkit-text-decoration: none;
+  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-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+}
+
+/* Variants */
+
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
+  padding-block: 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--extrasmall .dropbutton__item: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 {
+  -webkit-text-decoration: none;
+  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 {
+  -webkit-text-decoration: none;
+  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;
+}
+
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
+  border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
+}
+
+[dir="rtl"] .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;
+}
+
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+  visibility: hidden;
+  /**
+  * By setting a height of 1px, the dropbutton items are hidden
+  * from view while still occupying minimal space, ensuring the layout remains intact.
+  */
+  height: 1px;
+}
+
+/**
+ * Non-first dropbutton list elements.
+ */
+
+.dropbutton__item:first-of-type ~ .dropbutton__item {
+  border: var(--dropbutton-border-size) solid var(--color-gray-200);
+  border-bottom: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+}
+
+:is(.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-gray-200);
+  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 {
+  max-width: var(--dropbutton-item-max-width);
+}
+
+.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));
+  white-space: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-gray-800);
+  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;
+}
+
+.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--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .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--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .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-gray-050);
+}
+
+.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);
+}

core/themes/claro/css/components/dropbutton.pcss.css

@@ -0,0 +1,407 @@
+/**
+ * @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 {
+  /**
+  * 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;
+  --dropbutton-item-max-width: 12.5rem;
+  /* 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,
+.field-actions .dropbutton-wrapper {
+  margin-block: var(--space-xs);
+  margin-inline: 0 var(--space-m);
+}
+
+.dropbutton-widget {
+  position: relative;
+  flex: 1 1 auto;
+  .js .dropbutton-wrapper.open & {
+    z-index: var(--dropbutton-widget-z-index);
+  }
+}
+
+/**
+ * Dropbutton list.
+ */
+.dropbutton {
+  display: block;
+  overflow: visible;
+  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
+  height: var(--dropbutton-toggle-size);
+  margin: 0;
+  list-style: none;
+}
+
+.dropbutton-widget {
+  border-radius: var(--button-border-radius-size);
+  background-color: var(--button-bg-color);
+}
+
+/* Variants. */
+.dropbutton--small {
+  height: var(--dropbutton-small-toggle-size);
+}
+
+.dropbutton--extrasmall {
+  height: var(--dropbutton-extrasmall-toggle-size);
+}
+
+/**
+ * First dropbutton list item.
+ */
+.dropbutton--multiple .dropbutton__item:first-of-type {
+  margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
+  white-space: nowrap;
+  [dir="rtl"] & {
+    margin-right: 0;
+    margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
+  }
+}
+
+/* First dropbutton list item variants */
+.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 */
+  white-space: nowrap;
+  [dir="rtl"] & {
+    margin-right: 0;
+    margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
+  }
+}
+
+.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 */
+  white-space: nowrap;
+  [dir="rtl"] & {
+    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-inline-start: var(--dropbutton-border-size) solid white !important;
+  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"] & {
+    right: auto;
+    left: 0;
+    border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
+  }
+  &::before {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    width: 0.875rem;
+    height: 0.5625rem;
+    content: "";
+    transform: translate(50%, -50%) rotate(0);
+    background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
+    background-size: contain;
+  }
+
+  /* Toggler states. */
+  &:hover {
+    color: var(--button-fg-color);
+    background-color: var(--button--hover-bg-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  }
+  &:focus {
+    z-index: 2;
+  }
+  &: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"] & {
+    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 (forced-colors: 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-width: 0.125rem 0.125rem 0 0;
+    border-style: solid;
+    background: none;
+    .dropbutton-wrapper.open & {
+      margin-top: calc(0.5625rem / (2 * 1.41429));
+      transform: translate(50%, -50%) rotate(315deg);
+    }
+    [dir="rtl"] .dropbutton-wrapper.open & {
+      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 & > * {
+    padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+  }
+
+  /* Variants */
+  .no-touchevents .dropbutton--small & > * {
+    padding-block: 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--extrasmall & > * {
+    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);
+  }
+
+  & > *:hover,
+  & > .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);
+  }
+
+  & > *:focus:hover,
+  & > .button:focus:hover {
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 5px var(--color-focus);
+  }
+
+  & > *:focus {
+    text-decoration: none;
+  }
+
+  & > *:active {
+    color: var(--button-fg-color);
+    background-color: var(--button--active-bg-color);
+  }
+
+  .dropbutton--multiple & > * {
+    position: relative;
+    z-index: 3;
+  }
+
+  .dropbutton--multiple & > *:focus {
+    z-index: 2;
+  }
+
+  .dropbutton--multiple & > * {
+    border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
+  }
+  [dir="rtl"] .dropbutton--multiple & > * {
+    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;
+}
+
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+  visibility: hidden;
+  /**
+  * By setting a height of 1px, the dropbutton items are hidden
+  * from view while still occupying minimal space, ensuring the layout remains intact.
+  */
+  height: 1px;
+}
+
+/**
+ * Non-first dropbutton list elements.
+ */
+.dropbutton__item:first-of-type ~ .dropbutton__item {
+  border: var(--dropbutton-border-size) solid var(--color-gray-200);
+  border-bottom: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+  & ~ .dropbutton__item {
+    border-top: 0;
+  }
+}
+
+.dropbutton__item ~ .dropbutton__item:last-child {
+  border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
+  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 {
+  max-width: var(--dropbutton-item-max-width);
+}
+
+.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));
+  white-space: normal;
+  text-decoration: none;
+  color: var(--color-gray-800);
+  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;
+}
+
+.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--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .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--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
+.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .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;
+  }
+
+  &:first-of-type ~ & > *:hover {
+    color: var(--color-text);
+    background: var(--color-gray-050);
+  }
+
+  & > .button:not(:focus) {
+    box-shadow: none;
+  }
+
+  &:first-of-type ~ & > *: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);
+  }
+}

core/themes/claro/css/components/entity-meta.css

@@ -0,0 +1,65 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Entity meta.
+ * This file contains the styles for the top right hand sidebar of the node/add form.
+ *
+ */
+
+.entity-meta {
+  --entity-meta-spacing-xs: var(--space-xs);
+  --entity-meta-spacing-l: var(--space-l);
+  --entity-meta-spacing-m: var(--space-m);
+  --entity-meta-color-fg: var(--color-fg);
+  --entity-meta-color-bg: var(--color-bg);
+  --entity-meta-color-white: var(--color-white);
+  --entity-meta-border-size: var(--details-border-size);
+  --entity-meta-border-color: var(--details-border-color);
+  --entity-meta-border-size-radius: var(--details-accordion-border-size-radius);
+  --entity-meta-font-size-base: var(--font-size-base);
+}
+
+.entity-meta__header {
+  padding: calc(var(--entity-meta-spacing-m) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-m) calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs));
+  color: var(--entity-meta-color-fg);
+  border: var(--entity-meta-border-size) solid var(--entity-meta-border-color);
+  border-radius: var(--entity-meta-border-size-radius);
+  background-color: var(--entity-meta-color-bg);
+}
+
+.entity-meta__header .form-item {
+  margin-block: var(--entity-meta-spacing-xs);
+}
+
+.entity-meta__header .form-type--item .form-item__label {
+  display: inline-block;
+  margin: 0;
+  font-size: var(--entity-meta-font-size-base);
+}
+
+.entity-meta__header .form-type--item .form-item__label::after {
+  content: ":";
+}
+
+@media screen and (min-width: 48em) {
+  .entity-meta__header {
+    padding: calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-l) var(--entity-meta-spacing-l);
+  }
+}
+
+.entity-meta__title {
+  margin: 0.25em 0;
+  text-shadow: 0 1px 0 var(--entity-meta-color-white);
+  font-size: 1.231em;
+  font-weight: bold;
+}
+
+.entity-meta__revision {
+  margin-block-start: var(--entity-meta-spacing-l);
+}

core/themes/claro/css/components/entity-meta.pcss.css

@@ -0,0 +1,56 @@
+/**
+ * @file
+ * Entity meta.
+ * This file contains the styles for the top right hand sidebar of the node/add form.
+ *
+ */
+
+.entity-meta {
+  --entity-meta-spacing-xs: var(--space-xs);
+  --entity-meta-spacing-l: var(--space-l);
+  --entity-meta-spacing-m: var(--space-m);
+  --entity-meta-color-fg: var(--color-fg);
+  --entity-meta-color-bg: var(--color-bg);
+  --entity-meta-color-white: var(--color-white);
+  --entity-meta-border-size: var(--details-border-size);
+  --entity-meta-border-color: var(--details-border-color);
+  --entity-meta-border-size-radius: var(--details-accordion-border-size-radius);
+  --entity-meta-font-size-base: var(--font-size-base);
+}
+
+.entity-meta__header {
+  padding: calc(var(--entity-meta-spacing-m) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-m) calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs));
+  color: var(--entity-meta-color-fg);
+  border: var(--entity-meta-border-size) solid var(--entity-meta-border-color);
+  border-radius: var(--entity-meta-border-size-radius);
+  background-color: var(--entity-meta-color-bg);
+
+  & .form-item {
+    margin-block: var(--entity-meta-spacing-xs);
+  }
+
+  & .form-type--item .form-item__label {
+    display: inline-block;
+    margin: 0;
+    font-size: var(--entity-meta-font-size-base);
+
+    &::after {
+      content: ":";
+    }
+  }
+
+  @media screen and (min-width: 48em) {
+    padding: calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-l) var(--entity-meta-spacing-l);
+  }
+}
+
+.entity-meta__title {
+  margin: 0.25em 0;
+  text-shadow: 0 1px 0 var(--entity-meta-color-white);
+  font-size: 1.231em;
+  font-weight: bold;
+}
+
+.entity-meta__revision {
+  margin-block-start: var(--entity-meta-spacing-l);
+}

core/themes/claro/css/components/fieldset.css

@@ -0,0 +1,144 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Fieldset styles.
+ */
+
+.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;
+}
+
+/**
+ * Fieldset legend.
+ */
+
+.fieldset__legend {
+  display: contents; /* For Firefox. */
+  float: left; /* iOS Safari, Android Chrome, Edge. */
+  width: 100%; /* iOS Safari, Android Chrome, Edge. */
+  margin-block-end: var(--space-m);
+  color: var(--color-gray-800);
+  font-weight: bold;
+}
+
+.fieldset__legend--composite {
+  float: none;
+  width: auto;
+  margin-block-start: calc(var(--space-xs) / 2); /* 4px */
+  margin-block-end: calc(var(--space-xs) / 2); /* 4px */
+  color: inherit;
+  font-size: var(--font-size-s); /* 14px */
+  line-height: calc(18rem / 16); /* 18px */
+}
+
+@media screen and (min-width: 48em) {
+  .fieldset__legend {
+    margin-bottom: var(--space-l);
+  }
+}
+
+/* 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);
+}
+
+.fieldset__label.is-disabled {
+  color: var(--input--disabled-fg-color);
+}
+
+.fieldset__label.has-error {
+  color: var(--input--error-color);
+}
+
+.fieldset__label--group {
+  padding: 0;
+  line-height: inherit;
+}
+
+@media screen and (min-width: 48em) {
+  .fieldset__label {
+    padding-right: var(--space-l);
+    padding-left: var(--space-l);
+  }
+
+  .fieldset__label--group {
+    padding: 0;
+  }
+}
+
+.fieldset__description {
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: 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-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: 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);
+  /**
+   * Remove the extra padding of container-inline wrapper if it's used inside a fieldset
+   */
+}
+
+.fieldset__wrapper > .container-inline {
+  padding: 0;
+}
+
+@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-block-start: 0;
+}
+
+.fieldset__wrapper--group {
+  margin: 0;
+}

core/themes/claro/css/components/fieldset.pcss.css

@@ -0,0 +1,131 @@
+/**
+ * @file
+ * Fieldset styles.
+ */
+
+.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;
+}
+
+/**
+ * Fieldset legend.
+ */
+.fieldset__legend {
+  display: contents; /* For Firefox. */
+  float: left; /* iOS Safari, Android Chrome, Edge. */
+  width: 100%; /* iOS Safari, Android Chrome, Edge. */
+  margin-block-end: var(--space-m);
+  color: var(--color-gray-800);
+  font-weight: bold;
+}
+
+.fieldset__legend--composite {
+  float: none;
+  width: auto;
+  margin-block-start: calc(var(--space-xs) / 2); /* 4px */
+  margin-block-end: calc(var(--space-xs) / 2); /* 4px */
+  color: inherit;
+  font-size: var(--font-size-s); /* 14px */
+  line-height: calc(18rem / 16); /* 18px */
+}
+
+@media screen and (min-width: 48em) {
+  .fieldset__legend {
+    margin-bottom: var(--space-l);
+  }
+}
+
+/* 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);
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
+
+  &.has-error {
+    color: var(--input--error-color);
+  }
+}
+
+.fieldset__label--group {
+  padding: 0;
+  line-height: inherit;
+}
+
+@media screen and (min-width: 48em) {
+  .fieldset__label {
+    padding-right: var(--space-l);
+    padding-left: var(--space-l);
+  }
+
+  .fieldset__label--group {
+    padding: 0;
+  }
+}
+
+.fieldset__description {
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: calc(6rem / 16); /* 6px */
+  color: var(--input-fg-color--description);
+  font-size: var(--font-size-xs); /* ~13px */
+  line-height: calc(17rem / 16); /* 17px */
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
+}
+
+/* Error message (Inline form errors). */
+.fieldset__error-message {
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: 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);
+  /**
+   * Remove the extra padding of container-inline wrapper if it's used inside a fieldset
+   */
+  & > .container-inline {
+    padding: 0;
+  }
+}
+
+@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-block-start: 0;
+}
+
+.fieldset__wrapper--group {
+  margin: 0;
+}

core/themes/claro/css/components/file.css

@@ -0,0 +1,28 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Extends styles of the file link.
+ */
+
+.file {
+  --file-offset: 0.0625rem;
+  --file-font-size: var(--font-size-s);
+  --file-size-color: var(--color-gray-800);
+
+  min-block-size: calc(var(--space-m) + var(--file-offset));
+  padding-inline-start: var(--space-l);
+  background-position: left var(--file-offset);
+  background-size: var(--space-m) var(--space-m);
+  font-size: var(--file-font-size);
+  line-height: calc(18rem / 16);
+}
+
+.file__size {
+  color: var(--file-size-color);
+}

core/themes/claro/css/components/file.pcss.css

@@ -0,0 +1,21 @@
+/**
+ * @file
+ * Extends styles of the file link.
+ */
+
+.file {
+  --file-offset: 0.0625rem;
+  --file-font-size: var(--font-size-s);
+  --file-size-color: var(--color-gray-800);
+
+  min-block-size: calc(var(--space-m) + var(--file-offset));
+  padding-inline-start: var(--space-l);
+  background-position: left var(--file-offset);
+  background-size: var(--space-m) var(--space-m);
+  font-size: var(--file-font-size);
+  line-height: calc(18rem / 16);
+}
+
+.file__size {
+  color: var(--file-size-color);
+}

core/themes/claro/css/components/form--checkbox-radio.css

@@ -0,0 +1,215 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+/**
+ * Form item modifiers.
+ */
+
+.form-type--boolean {
+  margin-inline-start: var(--input--label-spacing);
+  line-height: var(--space-l);
+}
+
+/**
+ * Radio and checkbox items that are the child of a form item.
+ */
+
+.form-type--boolean .form-boolean {
+  position: relative;
+  inset-block-start: calc(var(--space-l) / 2);
+  float: left; /* LTR */
+  margin-inline-start: calc(var(--input--label-spacing) * -1);
+  transform: translateY(-50%);
+}
+
+[dir="rtl"] :is(.form-type--boolean .form-boolean) {
+  float: right;
+}
+
+.form-type--boolean.form-item--no-label {
+  margin-inline-start: 0;
+}
+
+.form-type--boolean.form-item--no-label .form-boolean {
+  position: static;
+  float: none;
+  margin-inline: 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-block: 0.4em;
+}
+
+/**
+ * Input appearance.
+ */
+
+.form-boolean {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 1.125rem;
+  height: 1.125rem;
+  vertical-align: text-bottom;
+  border: 1px solid var(--input-border-color);
+  border-radius: 2px;
+  background: var(--input-bg-color) no-repeat 50% 50%;
+  background-size: 100% 100%;
+  box-shadow: 0 0 0 4px transparent;
+  appearance: none;
+}
+
+.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);
+}
+
+@media (forced-colors: active) {
+  .form-boolean {
+    appearance: auto;
+  }
+}
+
+.form-boolean--type-radio {
+  width: 1.1875rem;
+  height: 1.1875rem;
+  border-radius: 1.1875rem;
+}
+
+.form-boolean--type-radio:checked {
+  border-color: var(--input--focus-border-color);
+  background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%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: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);
+}
+
+.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' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
+  box-shadow: 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' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%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);
+}
+
+/**
+ * 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' 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' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' 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' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3e%3c/svg%3e");
+}

core/themes/claro/css/components/form--checkbox-radio.pcss.css

@@ -0,0 +1,192 @@
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+/**
+ * Form item modifiers.
+ */
+.form-type--boolean {
+  margin-inline-start: var(--input--label-spacing);
+  line-height: var(--space-l);
+}
+
+/**
+ * Radio and checkbox items that are the child of a form item.
+ */
+.form-type--boolean .form-boolean {
+  position: relative;
+  inset-block-start: calc(var(--space-l) / 2);
+  float: left; /* LTR */
+  margin-inline-start: calc(var(--input--label-spacing) * -1);
+  transform: translateY(-50%);
+
+  @nest [dir="rtl"] & {
+    float: right;
+  }
+}
+
+.form-type--boolean.form-item--no-label {
+  margin-inline-start: 0;
+}
+
+.form-type--boolean.form-item--no-label .form-boolean {
+  position: static;
+  float: none;
+  margin-inline: 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-block: 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-size: 100% 100%;
+  box-shadow: 0 0 0 4px transparent;
+  appearance: none;
+
+  &:active,
+  &:hover {
+    border-color: var(--input-fg-color);
+    box-shadow: inset 0 0 0 1px var(--input-fg-color);
+  }
+
+  &:focus:active,
+  &: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);
+  }
+}
+
+@media (forced-colors: active) {
+  .form-boolean {
+    appearance: auto;
+  }
+}
+
+.form-boolean--type-radio {
+  width: 19px;
+  height: 19px;
+  border-radius: 19px;
+
+  &:checked {
+    border-color: var(--input--focus-border-color);
+    background-image: url(../../images/icons/003ecc/circle.svg);
+    box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
+
+    &: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);
+
+      &:active,
+      &: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);
+      }
+    }
+    &:active,
+    &:hover {
+      border-color: var(--input-fg-color);
+      background-image: url(../../images/icons/000f33/circle.svg);
+      box-shadow: 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(../../images/icons/ffffff/checkmark-sm.svg);
+
+  &:active,
+  &:hover {
+    border-color: var(--input-fg-color);
+    background-color: 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);
+  &:active,
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--input--error-border-color);
+  }
+  &:focus,
+  &:focus:active,
+  &: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);
+  }
+  &:checked:active,
+  &: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(../../images/icons/d72222/circle.svg);
+}
+.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(../../images/icons/82828c/checkmark.svg);
+}
+.form-boolean--type-radio[disabled]:checked,
+.form-boolean--type-radio[disabled].error:checked {
+  background-image: url(../../images/icons/82828c/circle.svg);
+}

core/themes/claro/css/components/form--field-multiple.css

@@ -0,0 +1,19 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for multiple field tables.
+ */
+
+.field-multiple-table {
+  margin-block: var(--space-m);
+}
+
+.form-item--multiple .field-add-more-submit {
+  margin-block: 0;
+}

core/themes/claro/css/components/form--field-multiple.pcss.css

@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Styles for multiple field tables.
+ */
+
+.field-multiple-table {
+  margin-block: var(--space-m);
+}
+
+.form-item--multiple .field-add-more-submit {
+  margin-block: 0;
+}

core/themes/claro/css/components/form--managed-file.css

@@ -0,0 +1,204 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the managed file widget.
+ *
+ * This includes the styles for the file widgets and the image widgets.
+ */
+
+: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;
+}
+
+/**
+   * Modify component defaults for file/image widgets.
+   */
+
+/**
+   * File component style overrides for managed file widgets.
+   */
+
+.form-managed-file .file {
+  word-break: break-all;
+}
+
+.form-managed-file .file__size {
+  word-break: normal;
+}
+
+/**
+ * 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-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
+}
+
+.form-managed-file__meta .form-element {
+  width: 100%;
+}
+
+/**
+   * 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-block: 0 var(--space-m); /* Top margin is added by the parent element */
+
+  /**
+    * Reduce the bottom margin of the last 'meta' form-item for field multiple
+    * tables.
+    */
+}
+
+.form-managed-file__meta .form-item:last-child {
+  margin-block-end: var(--space-xs);
+}
+
+.draggable .form-managed-file.has-value .form-managed-file__meta {
+  /**
+     * 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.
+     */
+  display: inline-flex;
+}
+
+/**
+ * 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-block-end: var(--space-m);
+}
+
+.form-managed-file.has-meta .form-managed-file__image-preview {
+  /* Add some 'end' margin if there are other meta inputs. */
+  margin-inline-end: 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-block-end: 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%;
+}
+
+/**
+ * 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%;
+}
+
+.form-managed-file__main .file {
+  flex: 1 1 auto;
+  margin-block: var(--space-xs);
+  margin-inline: 0 var(--space-m);
+}
+
+/* The file upload input. */
+
+.form-managed-file__main .form-element--api-file {
+  flex: 1 1 auto;
+}
+
+/**
+   * Remove the default button margins and prevent shrinking or growing buttons.
+   * This applies both on the 'no-js' upload button and the remove button. The
+   * weight of this ruleset has been increase for this to take effect on RTL.
+   */
+
+.form-managed-file__main .button.button {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
+/* 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-block-end: var(--space-m);
+}
+
+.draggable .form-managed-file.has-value .form-managed-file__main {
+  /**
+     * Inside (draggable) tables, this should be flex-displayed. This keeps even
+     * long file names in the same visual line where the drag handle is.
+     */
+  display: flex;
+}
+
+/**
+ * Add side margins if a table precedes the managed file form element.
+ */
+
+.file-widget-multiple.has-table .form-type--managed-file {
+  margin-inline: var(--space-m);
+}

core/themes/claro/css/components/form--managed-file.pcss.css

@@ -0,0 +1,185 @@
+/**
+ * @file
+ * Styles for the managed file widget.
+ *
+ * This includes the styles for the file widgets and the image widgets.
+ */
+
+: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%;
+  }
+
+  &.has-value.is-multiple {
+    display: block;
+  }
+
+  /**
+   * Modify component defaults for file/image widgets.
+   */
+
+  /**
+   * File component style overrides for managed file widgets.
+   */
+  & .file {
+    word-break: break-all;
+  }
+  & .file__size {
+    word-break: normal;
+  }
+}
+
+/**
+ * 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-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
+
+  & .form-element {
+    width: 100%;
+  }
+
+  /**
+   * Limiting the width of form items inside the meta element.
+   */
+  & .form-item {
+    max-width: var(--file-widget-form-item-max-width);
+    margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
+
+    /**
+    * Reduce the bottom margin of the last 'meta' form-item for field multiple
+    * tables.
+    */
+    &:last-child {
+      margin-block-end: var(--space-xs);
+    }
+  }
+
+  @nest .draggable .form-managed-file.has-value & {
+    /**
+     * 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.
+     */
+    display: inline-flex;
+  }
+}
+
+/**
+ * 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-block-end: var(--space-m);
+
+  @nest .form-managed-file.has-meta & {
+    /* Add some 'end' margin if there are other meta inputs. */
+    margin-inline-end: 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.
+   */
+  @nest td .form-managed-file.no-meta & {
+    margin-block-end: 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%;
+}
+
+/**
+ * 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%;
+
+  & .file {
+    flex: 1 1 auto;
+    margin-block: var(--space-xs);
+    margin-inline: 0 var(--space-m);
+  }
+
+  /* The file upload input. */
+  & .form-element--api-file {
+    flex: 1 1 auto;
+  }
+
+  /**
+   * Remove the default button margins and prevent shrinking or growing buttons.
+   * This applies both on the 'no-js' upload button and the remove button. The
+   * weight of this ruleset has been increase for this to take effect on RTL.
+   */
+  & .button.button {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
+  /* Add some bottom margin for single widgets if no meta is present. */
+  @nest .form-managed-file.is-single.has-value &:last-child {
+    margin-block-end: var(--space-m);
+  }
+
+  @nest .draggable .form-managed-file.has-value & {
+    /**
+     * Inside (draggable) tables, this should be flex-displayed. This keeps even
+     * long file names in the same visual line where the drag handle is.
+     */
+    display: flex;
+  }
+}
+
+/**
+ * Add side margins if a table precedes the managed file form element.
+ */
+.file-widget-multiple.has-table .form-type--managed-file {
+  margin-inline: var(--space-m);
+}

core/themes/claro/css/components/form--password-confirm.css

@@ -0,0 +1,207 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for the Password widgets.
+ */
+
+/**
+ * Password confirm widget styles.
+ */
+
+.password-confirm {
+  max-inline-size: 25rem;
+}
+
+.password-confirm input {
+  width: 100%;
+}
+
+.password-confirm__password {
+  margin-block-end: 0;
+}
+
+.password-confirm__confirm {
+  margin-block-end: 0;
+}
+
+.js .password-confirm__confirm {
+  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-block-start: 0;
+}
+
+.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
+  display: none;
+  max-block-size: 0;
+  margin-block-start: 0;
+}
+
+/**
+ * Password strength
+ *
+ * Description and strength indicator for the main input.
+ */
+
+.password-strength {
+  /* 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);
+
+  margin-block: var(--progress-bar-spacing-size);
+}
+
+.password-strength__track {
+  height: var(--progress-bar-small-size);
+  margin-block: 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 states */
+
+.password-strength__bar {
+  min-inline-size: 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;
+}
+
+.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);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .password-strength__bar {
+    transition: none;
+  }
+}
+
+.password-strength__title {
+  overflow: hidden;
+  margin-block: var(--progress-bar-spacing-size);
+  color: var(--progress-bar-description-color);
+  font-size: var(--progress-bar-description-font-size);
+  line-height: var(--space-m);
+}
+
+.is-initial.is-password-empty .password-strength__title {
+  margin: 0;
+  line-height: 0;
+}
+
+.password-strength__text {
+  color: var(--progress-bar-label-color);
+  font-weight: bold;
+}
+
+@media (forced-colors: active) {
+  .password-strength__bar.is-weak,
+  .password-strength__bar.is-fair,
+  .password-strength__bar.is-good,
+  .password-strength__bar.is-strong {
+    background-color: canvastext;
+  }
+
+  .is-initial .password-strength__bar {
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+
+/**
+ * Password match message.
+ *
+ * This is the description-like message on the bottom of the password confirm
+ * input.
+ */
+
+.password-match-message {
+  margin-block: var(--progress-bar-spacing-size);
+  color: var(--progress-bar-description-color);
+  font-size: var(--progress-bar-description-font-size);
+}
+
+.is-confirm-empty .password-match-message {
+  visibility: hidden;
+}
+
+.password-match-message__text {
+  color: var(--progress-bar-label-color);
+  font-weight: bold;
+}
+
+/**
+ * Password suggestions.
+ *
+ * Tips for improving the password.
+ */
+
+.password-suggestions {
+  margin-block: var(--progress-bar-spacing-size) var(--space-xs);
+  padding: var(--space-m);
+  color: var(--progress-bar-description-color);
+  border: 1px solid var(--color-gray-200);
+  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-block-start: var(--space-xs);
+  margin-inline-start: var(--space-l);
+}

core/themes/claro/css/components/form--password-confirm.pcss.css

@@ -0,0 +1,195 @@
+/**
+ * @file
+ * Visual styles for the Password widgets.
+ */
+
+/**
+ * Password confirm widget styles.
+ */
+.password-confirm {
+  max-inline-size: 25rem;
+
+  & input {
+    width: 100%;
+  }
+}
+
+.password-confirm__password {
+  margin-block-end: 0;
+}
+
+.password-confirm__confirm {
+  margin-block-end: 0;
+
+  @nest .js & {
+    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-block-start: 0;
+}
+.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
+  display: none;
+  max-block-size: 0;
+  margin-block-start: 0;
+}
+
+/**
+ * Password strength
+ *
+ * Description and strength indicator for the main input.
+ */
+.password-strength {
+  /* 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);
+
+  margin-block: var(--progress-bar-spacing-size);
+}
+
+.password-strength__track {
+  height: var(--progress-bar-small-size);
+  margin-block: 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 states */
+.password-strength__bar {
+  min-inline-size: 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;
+
+  &.is-weak {
+    border-color: var(--password-strength-bar-weak-border-color);
+    background-color: var(--password-strength-bar-weak-bg-color);
+  }
+
+  &.is-fair {
+    border-color: var(--password-strength-bar-fair-border-color);
+    background-color: var(--password-strength-bar-fair-bg-color);
+  }
+
+  &.is-good {
+    border-color: var(--password-strength-bar-good-border-color);
+    background-color: var(--password-strength-bar-good-bg-color);
+  }
+
+  &.is-strong {
+    border-color: var(--password-strength-bar-strong-border-color);
+    background-color: var(--password-strength-bar-strong-bg-color);
+  }
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .password-strength__bar {
+    transition: none;
+  }
+}
+
+.password-strength__title {
+  overflow: hidden;
+  margin-block: var(--progress-bar-spacing-size);
+  color: var(--progress-bar-description-color);
+  font-size: var(--progress-bar-description-font-size);
+  line-height: var(--space-m);
+
+  @nest .is-initial.is-password-empty & {
+    margin: 0;
+    line-height: 0;
+  }
+}
+
+.password-strength__text {
+  color: var(--progress-bar-label-color);
+  font-weight: bold;
+}
+
+@media (forced-colors: active) {
+  .password-strength__bar {
+    &.is-weak,
+    &.is-fair,
+    &.is-good,
+    &.is-strong {
+      background-color: canvastext;
+    }
+  }
+
+  .is-initial .password-strength__bar {
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+
+/**
+ * Password match message.
+ *
+ * This is the description-like message on the bottom of the password confirm
+ * input.
+ */
+.password-match-message {
+  margin-block: var(--progress-bar-spacing-size);
+  color: var(--progress-bar-description-color);
+  font-size: var(--progress-bar-description-font-size);
+
+  @nest .is-confirm-empty & {
+    visibility: hidden;
+  }
+}
+
+.password-match-message__text {
+  color: var(--progress-bar-label-color);
+  font-weight: bold;
+}
+
+/**
+ * Password suggestions.
+ *
+ * Tips for improving the password.
+ */
+.password-suggestions {
+  margin-block: var(--progress-bar-spacing-size) var(--space-xs);
+  padding: var(--space-m);
+  color: var(--progress-bar-description-color);
+  border: 1px solid var(--color-gray-200);
+  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-block-start: var(--space-xs);
+  margin-inline-start: var(--space-l);
+}

core/themes/claro/css/components/form--select.css

@@ -0,0 +1,51 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Select input elements.
+ */
+
+.form-element--type-select {
+  padding-inline-end: 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 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+
+  /**
+   * 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 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
+}
+
+.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 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");
+}
+
+[dir="rtl"] .form-element--type-select {
+  background-position: 0 50%;
+}
+
+.no-touchevents .form-element--type-select.form-element--extrasmall,
+.no-touchevents .form-element--type-select[name$="][_weight]"] {
+  padding-inline-end: calc(1.5rem - var(--input-border-size));
+  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+}
+
+@media (forced-colors: active) {
+  .form-element--type-select,
+  .form-element--type-select:focus,
+  .form-element--type-select[disabled] {
+    padding-inline-end: var(--input-padding-horizontal);
+    background-image: none;
+    appearance: revert; /* Revert <select> appearance value for modern browsers. */
+  }
+}

core/themes/claro/css/components/form--select.pcss.css

@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Select input elements.
+ */
+
+.form-element--type-select {
+  padding-inline-end: calc(2rem - var(--input-border-size));
+  background-image: url(../../images/icons/545560/chevron-down.svg);
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+
+  /**
+   * Select states.
+   */
+  &:focus {
+    background-image: url(../../images/icons/003ecc/chevron-down.svg);
+  }
+  &[disabled] {
+    background-image: url(../../images/icons/8e929c/chevron-down.svg);
+  }
+
+  @nest [dir="rtl"] & {
+    background-position: 0 50%;
+  }
+
+  @nest .no-touchevents & {
+    &.form-element--extrasmall, &[name$="][_weight]"] {
+      padding-inline-end: calc(1.5rem - var(--input-border-size));
+      background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .form-element--type-select,
+  .form-element--type-select:focus,
+  .form-element--type-select[disabled] {
+    padding-inline-end: var(--input-padding-horizontal);
+    background-image: none;
+    appearance: revert; /* Revert <select> appearance value for modern browsers. */
+  }
+}

core/themes/claro/css/components/form--text.css

@@ -0,0 +1,149 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Text and textarea input elements.
+ */
+
+.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 */
+}
+
+/**
+ * Better upload button alignment for Chrome.
+ */
+
+.form-element--type-file::-webkit-file-upload-button {
+  vertical-align: top;
+}
+
+/**
+ * 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] {
+  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: 37.5rem) {
+  /* Number, date and time are skipped here */
+  .form-element {
+    float: none;
+    width: 100%;
+    margin-block-start: 0.75rem;
+    margin-inline: 0;
+  }
+  .form-element:first-child,
+  .form-item__label + .form-element {
+    margin-block-start: 0;
+  }
+}
+
+.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
+  border: var(--input--error-border-size) solid var(--input--error-border-color);
+}

core/themes/claro/css/components/form--text.pcss.css

@@ -0,0 +1,129 @@
+/**
+ * @file
+ * Text and textarea input elements.
+ */
+
+.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 */
+}
+
+/**
+ * Better upload button alignment for Chrome.
+ */
+.form-element--type-file::-webkit-file-upload-button {
+  vertical-align: top;
+}
+
+/**
+ * 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] {
+  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-block-start: 0.75rem;
+    margin-inline: 0;
+  }
+  .form-element:first-child,
+  .form-item__label + .form-element {
+    margin-block-start: 0;
+  }
+}
+
+.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
+  border: var(--input--error-border-size) solid var(--input--error-border-color);
+}

core/themes/claro/css/components/form.css

@@ -0,0 +1,255 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+::placeholder {
+  opacity: 1;
+  color: var(--input-fg-color--placeholder);
+}
+
+/**
+ * General form item.
+ */
+
+.form-item {
+  margin-block: 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 core.
+ */
+
+tr .form-item,
+.container-inline .form-item {
+  margin-block: var(--space-s);
+}
+
+/**
+ * Form element label.
+ */
+
+.form-item__label {
+  display: table;
+  margin-block: calc(var(--space-xs) / 2); /* 4px */
+  font-size: var(--font-size-s); /* ~14px */
+  font-weight: bold;
+  line-height: var(--line-height-form-label);
+}
+
+.form-item__label[for] {
+  cursor: pointer;
+}
+
+.form-item__label.option {
+  display: inline;
+  font-weight: normal;
+}
+
+.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);
+}
+
+/* Multiple selectors used to ensure styling even if modules override markup. */
+
+.form-item__label--multiple-value-form,
+.field-multiple-table .field-label h4.label {
+  display: inline-block;
+  margin-block: 0;
+  align-self: center;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.form-item__label.form-required::after,
+.fieldset__label.form-required::after {
+  display: inline-block;
+  margin-inline: 0.15em;
+  content: "*";
+  color: var(--color-maximumred);
+  font-size: 0.875rem;
+}
+
+/**
+ * Form item description.
+ */
+
+.form-item__description {
+  margin-block: calc(6rem / 16); /* 6px */
+  color: var(--input-fg-color--description);
+  font-size: var(--font-size-xs); /* ~13px */
+  line-height: calc(17rem / 16); /* 17px */
+}
+
+.form-item__description.is-disabled {
+  color: var(--input--disabled-fg-color);
+}
+
+/**
+ * Error message (Inline form errors).
+ */
+
+.form-item__error-message {
+  margin-block: 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);
+}
+
+/* Add some spacing so that the focus ring and suffix don't overlap. */
+
+@media screen and (min-width: 37.5625rem) {
+  .form-item__suffix {
+    margin-inline-start: var(--space-xs);
+    white-space: nowrap;
+  }
+}
+
+/**
+ * Form actions.
+ */
+
+.form-actions,
+.field-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-block: var(--space-xs);
+}
+
+.form-actions .form-wrapper,
+.field-actions .form-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs) 0;
+}
+
+.form-actions .button,
+.field-actions .button,
+.form-actions .action-link,
+.field-actions .action-link {
+  margin-block: var(--space-xs);
+}
+
+.form-actions .ajax-progress--throbber,
+.field-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;
+}
+
+/**
+ * Custom label placement for editor filter format select.
+ */
+
+.form-item--editor-format {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: 100%;
+}
+
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
+.form-item--editor-format .form-item__suffix,
+.form-item--editor-format .form-element--editor-format {
+  min-width: 1px;
+}
+
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
+.form-item--editor-format .form-item__suffix,
+.form-item--editor-format .form-element--editor-format {
+  min-width: 1px;
+}
+
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
+.form-item--editor-format .form-item__suffix {
+  margin-inline-end: var(--space-xs);
+}
+
+.form-item--editor-format .form-item__description,
+.form-item--editor-format .form-item__error-message {
+  flex: 0 1 100%;
+  min-width: 1px;
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ *
+ * @legacy
+ */
+
+@media screen and (max-width: 37.5rem) {
+  .password-strength {
+    width: 100%;
+  }
+  div.form-item div.password-suggestions {
+    float: none;
+  }
+}
+
+/**
+ * Prevent regression due to explicit line-heights applied to these elements in
+ * normalize.css 7.0.0.
+ */
+
+button {
+  line-height: 1.125rem;
+}
+
+input,
+optgroup {
+  line-height: 1.5rem;
+}
+
+/**
+ * Prevent regression due to -webkit-appearance being set to button in
+ * normalize.css 4.1.0.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: push-button;
+}

core/themes/claro/css/components/form.pcss.css

@@ -0,0 +1,228 @@
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+::placeholder {
+  opacity: 1;
+  color: var(--input-fg-color--placeholder);
+}
+
+/**
+ * General form item.
+ */
+.form-item {
+  margin-block: 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 core.
+ */
+tr .form-item,
+.container-inline .form-item {
+  margin-block: var(--space-s);
+}
+
+/**
+ * Form element label.
+ */
+.form-item__label {
+  display: table;
+  margin-block: calc(var(--space-xs) / 2); /* 4px */
+  font-size: var(--font-size-s); /* ~14px */
+  font-weight: bold;
+  line-height: var(--line-height-form-label);
+
+  &[for] {
+    cursor: pointer;
+  }
+
+  &.option {
+    display: inline;
+    font-weight: normal;
+  }
+
+  &.has-error {
+    color: var(--input--error-color);
+  }
+
+  &.option.has-error {
+    color: inherit;
+  }
+
+  &.is-disabled {
+    cursor: default; /* @todo ...or auto? */
+    color: var(--input--disabled-fg-color);
+  }
+}
+/* Multiple selectors used to ensure styling even if modules override markup. */
+.form-item__label--multiple-value-form,
+.field-multiple-table .field-label h4.label {
+  display: inline-block;
+  margin-block: 0;
+  align-self: center;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.form-item__label.form-required::after,
+.fieldset__label.form-required::after {
+  display: inline-block;
+  margin-inline: 0.15em;
+  content: "*";
+  color: var(--color-maximumred);
+  font-size: 0.875rem;
+}
+
+/**
+ * Form item description.
+ */
+.form-item__description {
+  margin-block: calc(6rem / 16); /* 6px */
+  color: var(--input-fg-color--description);
+  font-size: var(--font-size-xs); /* ~13px */
+  line-height: calc(17rem / 16); /* 17px */
+
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
+}
+
+/**
+ * Error message (Inline form errors).
+ */
+.form-item__error-message {
+  margin-block: 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);
+}
+
+/* Add some spacing so that the focus ring and suffix don't overlap. */
+@media screen and (min-width: 601px) {
+  .form-item__suffix {
+    margin-inline-start: var(--space-xs);
+    white-space: nowrap;
+  }
+}
+
+/**
+ * Form actions.
+ */
+.form-actions,
+.field-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-block: var(--space-xs);
+
+  & .form-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs) 0;
+  }
+
+  & .button,
+  & .action-link {
+    margin-block: var(--space-xs);
+  }
+
+  & .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;
+}
+
+/**
+ * Custom label placement for editor filter format select.
+ */
+.form-item--editor-format {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: 100%;
+
+  & .form-item__label,
+  & .form-item__prefix,
+  & .form-item__suffix,
+  & .form-element--editor-format {
+    min-width: 1px;
+  }
+
+  & .form-item__label,
+  & .form-item__prefix,
+  & .form-item__suffix,
+  & .form-element--editor-format {
+    min-width: 1px;
+  }
+
+  & .form-item__label,
+  & .form-item__prefix,
+  & .form-item__suffix {
+    margin-inline-end: var(--space-xs);
+  }
+
+  & .form-item__description,
+  & .form-item__error-message {
+    flex: 0 1 100%;
+    min-width: 1px;
+  }
+}
+
+/**
+ * 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;
+  }
+}
+
+/**
+ * Prevent regression due to explicit line-heights applied to these elements in
+ * normalize.css 7.0.0.
+ */
+button {
+  line-height: 1.125rem;
+}
+input,
+optgroup {
+  line-height: 1.5rem;
+}
+
+/**
+ * Prevent regression due to -webkit-appearance being set to button in
+ * normalize.css 4.1.0.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: push-button;
+}

core/themes/claro/css/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/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for the help component.
+ */
+
+.help p {
+  margin: 0 0 0.625rem;
+}

core/themes/claro/css/components/help.pcss.css

@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Claro styles for the help component.
+ */
+
+.help p {
+  margin: 0 0 10px;
+}

core/themes/claro/css/components/icon-link.css

@@ -0,0 +1,54 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Icon link component.
+ */
+
+:root {
+  /* default */
+  --icon-link-bg-color: var(--color-white);
+  --icon-link-border-color: var(--color-gray-200);
+  /* active */
+  --icon-link--active-bg-color: var(--color-absolutezero);
+  --icon-link--active-border-color: var(--color-absolutezero);
+  /* hover */
+  --icon-link--hover-bg-color: var(--color-bgblue-hover);
+  --icon-link--hover-border-color: var(--color-gray-200-o-80);
+}
+
+.icon-link {
+  display: flex;
+  padding: 0;
+  border: 1px solid var(--icon-link-border-color);
+  border-radius: 50%;
+  background-color: var(--icon-link-bg-color);
+}
+
+.icon-link:hover {
+  border-color: var(--icon-link--hover-border-color);
+  background-color: var(--icon-link--hover-bg-color);
+}
+
+.icon-link:focus {
+  box-shadow:
+    0 0 0 1.5px var(--color-white),
+    0 0 0 3.5px var(--color-focus);
+}
+
+.icon-link:active,
+.open > .icon-link {
+  border-color: var(--icon-link--active-border-color);
+  background-color: var(--icon-link--active-bg-color);
+}
+
+.icon-link--small:focus {
+  box-shadow:
+    0 0 0 1px var(--color-white),
+    0 0 0 3px var(--color-focus);
+}

core/themes/claro/css/components/icon-link.pcss.css

@@ -0,0 +1,49 @@
+/**
+ * @file
+ * Icon link component.
+ */
+
+:root {
+  /* default */
+  --icon-link-bg-color: var(--color-white);
+  --icon-link-border-color: var(--color-gray-200);
+  /* active */
+  --icon-link--active-bg-color: var(--color-absolutezero);
+  --icon-link--active-border-color: var(--color-absolutezero);
+  /* hover */
+  --icon-link--hover-bg-color: var(--color-bgblue-hover);
+  --icon-link--hover-border-color: var(--color-gray-200-o-80);
+}
+
+.icon-link {
+  display: flex;
+  padding: 0;
+  border: 1px solid var(--icon-link-border-color);
+  border-radius: 50%;
+  background-color: var(--icon-link-bg-color);
+
+  &:hover {
+    border-color: var(--icon-link--hover-border-color);
+    background-color: var(--icon-link--hover-bg-color);
+  }
+
+  &:focus {
+    box-shadow:
+      0 0 0 1.5px var(--color-white),
+      0 0 0 3.5px var(--color-focus);
+  }
+
+  &:active,
+  .open > & {
+    border-color: var(--icon-link--active-border-color);
+    background-color: var(--icon-link--active-bg-color);
+  }
+}
+
+.icon-link--small {
+  &:focus {
+    box-shadow:
+      0 0 0 1px var(--color-white),
+      0 0 0 3px var(--color-focus);
+  }
+}

core/themes/claro/css/components/image-preview.css

@@ -0,0 +1,50 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Image preview component.
+ */
+
+:root {
+  --color-pattern: var(--color-gray-200);
+  --size-pattern-square: calc(7rem / 16);
+}
+
+/**
+ * Image preview.
+ */
+
+.image-preview {
+  line-height: 0;
+}
+
+.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);
+}
+
+.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);
+}
+
+/**
+ * Don't display file icon in image widgets.
+ */
+
+.image-widget .file.file {
+  padding: 0;
+  background: none;
+}

core/themes/claro/css/components/image-preview.pcss.css

@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Image preview component.
+ */
+
+:root {
+  --color-pattern: var(--color-gray-200);
+  --size-pattern-square: calc(7rem / 16);
+}
+
+/**
+ * Image preview.
+ */
+.image-preview {
+  line-height: 0;
+
+  & 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);
+  }
+}
+
+.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);
+}
+
+/**
+ * Don't display file icon in image widgets.
+ */
+.image-widget .file.file {
+  padding: 0;
+  background: none;
+}

core/themes/claro/css/components/image.admin.css

@@ -0,0 +1,19 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for image style admin UI.
+ */
+
+.image-anchor td:not(:hover) {
+  background-color: var(--color-white);
+}
+
+.image-anchor td:hover > div {
+  background-color: transparent;
+}

core/themes/claro/css/components/image.admin.pcss.css

@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Styles for image style admin UI.
+ */
+
+.image-anchor td:not(:hover) {
+  background-color: var(--color-white);
+}
+
+.image-anchor td:hover > div {
+  background-color: transparent;
+}

core/themes/claro/css/components/jquery.ui/theme.css

@@ -0,0 +1,985 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Claro styles for jQuery UI.
+ * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
+ */
+
+/**
+ * Component containers
+ */
+
+.ui-widget {
+  background: none;
+}
+
+.ui-widget-content {
+  border: none;
+}
+
+.ui-dialog {
+  z-index: var(--jui-dialog-z-index);
+}
+
+/**
+ * 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;
+}
+
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary {
+  opacity: 0.7;
+}
+
+/**
+ * Icons
+ */
+
+/* states and images */
+
+.ui-icon {
+  display: block;
+  overflow: hidden;
+  width: 1rem;
+  height: 1rem;
+  text-indent: -6249.9375rem;
+  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 0.1875rem 0 0; /* LTR */
+}
+
+[dir="rtl"] .ui-widget p .ui-icon {
+  margin: 2px 0 0 0.1875rem;
+}
+
+/* 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: 0.625rem 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: 0.3125rem 0.625rem 0.25rem;
+  border-bottom: solid 1px #ccc;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  line-height: 1.25rem;
+}
+
+.ui-tabs .ui-tabs-nav li {
+  margin: 0;
+  padding: 0 1em 0 0.625rem; /* LTR */
+  list-style: none;
+}
+
+[dir="rtl"] .ui-tabs .ui-tabs-nav li {
+  padding: 0 0.625rem 0 1em;
+}
+
+.ui-tabs .ui-tabs-nav li a {
+  float: none;
+  padding: 0 0.625rem;
+  border-radius: 0.625rem;
+}
+
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
+  color: #fff;
+  background: #666;
+  font-weight: normal;
+}
+
+/**
+ * Overlays
+ */
+
+.ui-widget-overlay {
+  z-index: calc(var(--jui-dialog-z-index) - 1);
+  opacity: 0.7;
+  background: var(--color-text);
+}
+
+/**
+ * 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: 0.25rem;
+  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: var(--color-blue-600) url(../../../../misc/progress.gif);
+}
+
+/**
+ * Autocomplete
+ */
+
+.ui-autocomplete {
+  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 {
+  -webkit-text-decoration: none;
+  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: var(--color-blue-600);
+}
+
+.ui-autocomplete .ui-state-focus a,
+.autocomplete .ui-state-hover a {
+  color: #fff;
+}

core/themes/claro/css/components/jquery.ui/theme.pcss.css

@@ -0,0 +1,761 @@
+/**
+ * @file
+ * Claro styles for jQuery UI.
+ * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
+ */
+
+/**
+ * Component containers
+ */
+.ui-widget {
+  background: none;
+}
+.ui-widget-content {
+  border: none;
+}
+
+.ui-dialog {
+  z-index: var(--jui-dialog-z-index);
+}
+
+/**
+ * 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;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary {
+  opacity: 0.7;
+}
+
+/**
+ * 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 {
+  z-index: calc(var(--jui-dialog-z-index) - 1);
+  opacity: 0.7;
+  background: var(--color-text);
+}
+
+/**
+ * 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: var(--color-blue-600) url(../../../../misc/progress.gif);
+}
+
+/**
+ * Autocomplete
+ */
+.ui-autocomplete {
+  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: var(--color-blue-600);
+}
+.ui-autocomplete .ui-state-focus a,
+.autocomplete .ui-state-hover a {
+  color: #fff;
+}

core/themes/claro/css/components/media-library.ui.css

@@ -0,0 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the Media Library UI.
+ */
+
+.media-library-selected-count {
+  margin: 0 var(--space-l);
+}

core/themes/claro/css/components/media-library.ui.pcss.css

@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Styles for the Media Library UI.
+ */
+
+.media-library-selected-count {
+  margin: 0 var(--space-l);
+}

core/themes/claro/css/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/3084859
+ * @preserve
+ */
+.media-form .field--name-status {
+  margin-top: 1.5em;
+}

core/themes/claro/css/components/media.pcss.css

@@ -0,0 +1,3 @@
+.media-form .field--name-status {
+  margin-top: 1.5em;
+}

core/themes/claro/css/components/menus-and-lists.css

@@ -0,0 +1,52 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * Menus and lists.
+ *
+ * These classes are used in claro-toolbar-menu and any list items.
+ */
+
+.item-list,
+.menu-item {
+  --item-list-spacing-l: var(--space-l);
+  --item-list-spacing-m: var(--space-m);
+}
+
+.item-list ul {
+  margin-block: 0.25rem;
+  margin-inline: var(--item-list-spacing-l) 0;
+  list-style: disc;
+}
+
+.item-list ul li,
+.menu-item {
+  list-style: disc;
+}
+
+.menu-item {
+  margin: 0;
+}
+
+.item-list ul li.collapsed,
+.menu-item--collapsed {
+  list-style: disc;
+}
+
+.item-list ul li.expanded,
+.menu-item--expanded {
+  list-style: circle;
+}
+
+ul.links li,
+ul.inline li {
+  padding-inline-end: var(--item-list-spacing-m);
+}
+
+ul.inline li {
+  display: inline;
+}

core/themes/claro/css/components/menus-and-lists.pcss.css

@@ -0,0 +1,47 @@
+/**
+ * Menus and lists.
+ *
+ * These classes are used in claro-toolbar-menu and any list items.
+ */
+
+.item-list,
+.menu-item {
+  --item-list-spacing-l: var(--space-l);
+  --item-list-spacing-m: var(--space-m);
+}
+
+.item-list ul {
+  margin-block: 4px;
+  margin-inline: var(--item-list-spacing-l) 0;
+  list-style: disc;
+}
+
+.item-list ul li,
+.menu-item {
+  list-style: disc;
+}
+
+.menu-item {
+  margin: 0;
+}
+
+.item-list ul li.collapsed,
+.menu-item--collapsed {
+  list-style: disc;
+}
+
+.item-list ul li.expanded,
+.menu-item--expanded {
+  list-style: circle;
+}
+
+ul {
+  &.links li,
+  &.inline li {
+    padding-inline-end: var(--item-list-spacing-m);
+  }
+
+  &.inline li {
+    display: inline;
+  }
+}

core/themes/claro/css/components/messages.css

@@ -0,0 +1,127 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * Messages.
+ *
+ * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
+ *   has been resolved.
+ */
+
+:root {
+  --messages-bg-color: #353641;
+  --messages-fg-color: var(--color-white);
+  --messages-border-radius: 2px;
+  --messages-border-width: 0.3125rem;
+  --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-block: calc(var(--space-m) + var(--space-l));
+  padding: 0;
+  list-style: none;
+}
+
+.field .messages-list,
+.form-wrapper .messages-list {
+  margin-block-end: 0;
+}
+
+.messages {
+  overflow: auto; /* Required to prevent text clipping. */
+  box-sizing: border-box;
+  margin-block: var(--space-m);
+  padding-block: var(--space-l) 2rem;
+  padding-inline: calc(var(--space-l) - 0.3125rem) var(--space-l);
+  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);
+}
+
+.messages a {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: var(--messages__link-color);
+}
+
+.messages a:hover {
+  color: var(--messages__link--hover-color);
+}
+
+.messages pre {
+  margin: 0;
+}
+
+[dir="rtl"] .messages {
+  border-right-width: var(--messages-border-width);
+  border-left-width: 0;
+}
+
+.messages--error {
+  border-color: var(--messages--error-color);
+}
+
+.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.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left;
+}
+
+.messages--status {
+  border-color: var(--messages--status-color);
+}
+
+.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.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left;
+}
+
+.messages--warning {
+  border-color: var(--messages--warning-color);
+}
+
+.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%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left;
+}
+
+.messages__title {
+  margin-block: 0;
+  margin-inline: var(--messages__text-margin) 0;
+  font-size: var(--font-size-base);
+}
+
+.messages__header {
+  display: flex;
+  align-items: center;
+  margin-block-end: var(--space-m);
+}
+
+[dir="rtl"] .messages__header {
+  background-position: center right;
+}
+
+@media screen and (min-width: 48rem) {
+  .messages__content {
+    margin-inline-start: var(--messages__text-margin);
+  }
+}
+
+.messages__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.messages__item + .messages__item {
+  margin-block-start: var(--space-s);
+}

core/themes/claro/css/components/messages.pcss.css

@@ -0,0 +1,119 @@
+/**
+ * Messages.
+ *
+ * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
+ *   has been resolved.
+ */
+
+: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-block: calc(var(--space-m) + var(--space-l));
+  padding: 0;
+  list-style: none;
+}
+
+.field .messages-list,
+.form-wrapper .messages-list {
+  margin-block-end: 0;
+}
+
+.messages {
+  overflow: auto; /* Required to prevent text clipping. */
+  box-sizing: border-box;
+  margin-block: var(--space-m);
+  padding-block: var(--space-l) 2rem;
+  padding-inline: calc(var(--space-l) - 5px) var(--space-l);
+  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);
+
+  & a {
+    text-decoration: underline;
+    color: var(--messages__link-color);
+
+    &:hover {
+      color: var(--messages__link--hover-color);
+    }
+  }
+
+  & pre {
+    margin: 0;
+  }
+
+  @nest [dir="rtl"] & {
+    border-right-width: var(--messages-border-width);
+    border-left-width: 0;
+  }
+}
+
+.messages--error {
+  border-color: var(--messages--error-color);
+
+  & .messages__header {
+    background: url(../../images/icons/e34f4f/crossout.svg) no-repeat center left;
+  }
+}
+
+.messages--status {
+  border-color: var(--messages--status-color);
+
+  & .messages__header {
+    background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left;
+  }
+}
+
+.messages--warning {
+  border-color: var(--messages--warning-color);
+
+  & .messages__header {
+    background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left;
+  }
+}
+
+.messages__title {
+  margin-block: 0;
+  margin-inline: var(--messages__text-margin) 0;
+  font-size: var(--font-size-base);
+}
+
+.messages__header {
+  display: flex;
+  align-items: center;
+  margin-block-end: var(--space-m);
+
+  @nest [dir="rtl"] & {
+    background-position: center right;
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .messages__content {
+    margin-inline-start: var(--messages__text-margin);
+  }
+}
+
+.messages__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.messages__item + .messages__item {
+  margin-block-start: var(--space-s);
+}

core/themes/claro/css/components/modules-page.css

@@ -0,0 +1,56 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the Modules page.
+ */
+
+:root {
+  --modules-page-system-modules-fieldset-color: #ccc;
+  --modules-page-system-modules-tr-border-color: #fff;
+  --modules-page-system-modules-tr-bg-color: #f3f4ee;
+}
+
+.system-modules fieldset {
+  border: 0;
+  border-top: 1px solid var(--modules-page-system-modules-fieldset-color);
+}
+
+.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 var(--modules-page-system-modules-tr-border-color);
+  background: var(--modules-page-system-modules-tr-bg-color);
+}
+
+.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 var(--modules-page-system-modules-tr-border-color);
+}
+
+.system-modules .sticky-header th,
+.locale-translation-status-form .sticky-header th {
+  border: 0;
+}

core/themes/claro/css/components/modules-page.pcss.css

@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Styles for the Modules page.
+ */
+
+:root {
+  --modules-page-system-modules-fieldset-color: #ccc;
+  --modules-page-system-modules-tr-border-color: #fff;
+  --modules-page-system-modules-tr-bg-color: #f3f4ee;
+}
+.system-modules {
+  & fieldset {
+    border: 0;
+    border-top: 1px solid var(--modules-page-system-modules-fieldset-color);
+  }
+
+  & .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 var(--modules-page-system-modules-tr-border-color);
+  background: var(--modules-page-system-modules-tr-bg-color);
+}
+.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 var(--modules-page-system-modules-tr-border-color);
+}
+.system-modules .sticky-header th,
+.locale-translation-status-form .sticky-header th {
+  border: 0;
+}

core/themes/claro/css/components/node-preview.css

@@ -0,0 +1,23 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+.node-preview-container {
+  position: sticky;
+  z-index: 499;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.node-preview-form-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}