@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/collection-manifest.json

@@ -1,7 +1,9 @@
 {
   "entries": [
+    "components/eds-cards/eds-card-app/eds-card-app.js",
+    "components/eds-cards/eds-card-cta/eds-card-cta.js",
     "components/eds-cards/eds-card-generic/eds-card-generic.js",
-    "components/eds-cards/eds-card-section/eds-card-section.js",
+    "components/eds-cards/eds-card-hero/eds-card-hero.js",
     "components/eds-sidebar/eds-sidebar.js",
     "components/eds-steps/eds-steps.js",
     "components/eds-steps-v2/eds-steps-v2.js",
@@ -13,10 +15,9 @@
     "components/eds-breadcrump/eds-breadcrump.js",
     "components/eds-button/eds-button.js",
     "components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js",
-    "components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js",
     "components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js",
-    "components/eds-cards/eds-card-project/eds-card-project.js",
-    "components/eds-cards/eds-card-tool/eds-card-tool.js",
+    "components/eds-cards/eds-card-feature/eds-card-feature.js",
+    "components/eds-cards/eds-card-stat/eds-card-stat.js",
     "components/eds-charts/eds-gauge/eds-gauge.js",
     "components/eds-charts/eds-pie/eds-pie.js",
     "components/eds-code-block/eds-code-block.js",
@@ -28,43 +29,8 @@
     "components/eds-fullscreen-menu/eds-fullscreen-menu.js",
     "components/eds-header/eds-header.js",
     "components/eds-icon-wrapper/eds-icon-wrapper.js",
-    "components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js",
-    "components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js",
-    "components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.js",
-    "components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js",
-    "components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js",
-    "components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js",
-    "components/eds-icons/eds-icon-bin/eds-icon-bin.js",
-    "components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js",
-    "components/eds-icons/eds-icon-clone/eds-icon-clone.js",
-    "components/eds-icons/eds-icon-close/eds-icon-close.js",
-    "components/eds-icons/eds-icon-copy/eds-icon-copy.js",
-    "components/eds-icons/eds-icon-download/eds-icon-download.js",
-    "components/eds-icons/eds-icon-draft/eds-icon-draft.js",
-    "components/eds-icons/eds-icon-edit/eds-icon-edit.js",
     "components/eds-icons/eds-icon-eu/eds-icon-eu.js",
-    "components/eds-icons/eds-icon-external/eds-icon-external.js",
     "components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js",
-    "components/eds-icons/eds-icon-loader/eds-icon-loader.js",
-    "components/eds-icons/eds-icon-menu/eds-icon-menu.js",
-    "components/eds-icons/eds-icon-minus/eds-icon-minus.js",
-    "components/eds-icons/eds-icon-more/eds-icon-more.js",
-    "components/eds-icons/eds-icon-paper/eds-icon-paper.js",
-    "components/eds-icons/eds-icon-plus/eds-icon-plus.js",
-    "components/eds-icons/eds-icon-portal/eds-icon-portal.js",
-    "components/eds-icons/eds-icon-private/eds-icon-private.js",
-    "components/eds-icons/eds-icon-public/eds-icon-public.js",
-    "components/eds-icons/eds-icon-search/eds-icon-search.js",
-    "components/eds-icons/eds-icon-star/eds-icon-star.js",
-    "components/eds-icons/eds-icon-start/eds-icon-start.js",
-    "components/eds-icons/eds-icon-success/eds-icon-success.js",
-    "components/eds-icons/eds-icon-thumbs-down/eds-icon-thumbs-down.js",
-    "components/eds-icons/eds-icon-thumbs-up/eds-icon-thumbs-up.js",
-    "components/eds-icons/eds-icon-tutorial/eds-icon-tutorial.js",
-    "components/eds-icons/eds-icon-unknown/eds-icon-unknown.js",
-    "components/eds-icons/eds-icon-updown/eds-icon-updown.js",
-    "components/eds-icons/eds-icon-user/eds-icon-user.js",
-    "components/eds-icons/eds-icon-view/eds-icon-view.js",
     "components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js",
     "components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js",
     "components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js",
@@ -72,6 +38,7 @@
     "components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js",
     "components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js",
     "components/eds-img/eds-img.js",
+    "components/eds-input-dropzone/eds-input-dropzone.js",
     "components/eds-input-elements/eds-input/eds-input.js",
     "components/eds-input-elements/eds-input-footer/eds-input-footer.js",
     "components/eds-input-elements/eds-input-label/eds-input-label.js",
@@ -79,6 +46,7 @@
     "components/eds-input-elements/eds-input-search/eds-input-search.js",
     "components/eds-input-elements/eds-input-select/eds-input-select.js",
     "components/eds-input-field/eds-input-field.js",
+    "components/eds-input-file/eds-input-file.js",
     "components/eds-link/eds-link.js",
     "components/eds-logo/eds-logo.js",
     "components/eds-modal/eds-modal.js",
@@ -98,7 +66,6 @@
     "components/eds-toast/eds-toast.js",
     "components/eds-toast-manager/eds-toast-manager.js",
     "components/eds-tooltip/eds-tooltip.js",
-    "components/eds-trl/eds-trl.js",
     "components/eds-user/eds-user.js",
     "eds-docs-ui/colors/color-palette/primary.js",
     "eds-docs-ui/colors/color-palette/secondary.js",
@@ -124,7 +91,9 @@
     "eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js",
     "eds-docs-ui/svg-repository/svg-repository.js",
     "shared-ui/eds-cookies-preference/eds-cookies-preference.js",
+    "shared-ui/eds-gitlab-contributors/eds-gitlab-contributors.js",
     "shared-ui/eds-global-search/eds-global-search.js",
+    "shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.js",
     "shared-ui/eds-matomo-notice/eds-matomo-notice.js",
     "shared-ui/examples/eds-app-root/eds-app-root.js"
   ],

package/dist/collection/components/eds-accordion/eds-accordion.css

@@ -1,256 +1,200 @@
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-    margin: 0;
+/* Ensure accordion fills container width */
+:host {
+  display: block;
+  width: 100%;
 }
 
-fieldset {
-    margin: 0;
-    padding: 0;
+/* ─── Base card ─── */
+.accordion-card {
+  border-radius: 16px;
+  padding: 1.5rem;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-legend {
-    padding: 0;
+/* ─── Default variant: dark bg, light text ─── */
+.accordion-card-default {
+  background: var(--brand-black);
+  color: var(--white);
 }
 
-ol,
-ul,
-menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+.accordion-card-default:hover {
+  border-color: rgba(0, 255, 157, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-.min-h-56 {
-    min-height: 3.5rem;
+.accordion-card-default .accordion-title {
+  color: var(--white);
 }
 
-.container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
+.accordion-card-default .accordion-description {
+  color: var(--grey-light);
 }
 
-.container>* {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
+.accordion-card-default .accordion-chevron {
+  color: var(--white);
 }
 
-.break-words {
-    overflow-wrap: break-word;
+.accordion-card-default .accordion-content {
+  color: var(--grey-light);
 }
 
-.block {
-    display: block;
+/* ─── Inverse variant: light bg, dark text ─── */
+.accordion-card-inverse {
+  background: var(--white);
+  color: var(--brand-black);
 }
 
-.inline-block {
-    display: inline-block;
+.accordion-card-inverse:hover {
+  border-color: rgba(0, 255, 157, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-.inline {
-    display: inline;
+.accordion-card-inverse .accordion-title {
+  color: var(--brand-black);
 }
 
-.flex {
-    display: flex;
+.accordion-card-inverse .accordion-description {
+  color: var(--grey-dark);
 }
 
-.inline-flex {
-    display: inline-flex;
+.accordion-card-inverse .accordion-chevron {
+  color: var(--brand-black);
 }
 
-.effect-color {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+.accordion-card-inverse .accordion-content {
+  color: var(--grey-dark);
 }
 
-.border-softer {
-    border: 2px solid rgba(0, 0, 0, .1);
+/* ─── Header row ─── */
+.accordion-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  text-align: left;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.bg-default {
-    background-color: var(--grey-200);
+.accordion-header:focus-visible {
+  outline: 2px solid var(--brand-green);
+  outline-offset: 2px;
+  border-radius: 8px;
 }
 
-.bg-inverse {
-    background-color: var(--white);
+/* ─── Icon box (mirrors card-feature) ─── */
+.accordion-icon {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 255, 157, 0.1);
+  border-radius: 12px;
+  color: var(--brand-green);
+  flex-shrink: 0;
 }
 
-.relative {
-    position: relative;
+.accordion-card-inverse .accordion-icon {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--brand-black);
 }
 
-.absolute {
-    position: absolute;
+/* ─── Header text block ─── */
+.accordion-header-text {
+  flex-grow: 1;
+  min-width: 0;
 }
 
-.inset-x-16 {
-    left: 1rem;
-    right: 1rem;
+.accordion-title {
+  font-family: 'Inter', var(--f-heading-fontFamily);
+  font-weight: 300;
+  font-size: 1.25rem;
+  line-height: 1.4;
+  margin: 0;
 }
 
-.top-16 {
-    top: 1rem;
+.accordion-description {
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-top: 0.25rem;
+  margin-bottom: 0;
 }
 
-.pr-32 {
-    padding-right: 2rem;
+/* ─── Chevron icon ─── */
+.accordion-chevron {
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
 }
 
-.pr-36 {
-    padding-right: 2.25rem;
+/* ─── Expand/collapse panel (CSS grid animation) ─── */
+.accordion-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.4s ease;
 }
 
-.pr-40 {
-    padding-right: 2.5rem;
+.accordion-panel.expanded {
+  grid-template-rows: 1fr;
 }
 
-.line-clamp-1 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-}
-
-.line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-.line-clamp-4 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 4;
-}
-
-.w-full {
-    width: 100%;
-}
-
-.items-center {
-    align-items: center;
-}
-
-.justify-center {
-    justify-content: center;
-}
-
-.justify-between {
-    justify-content: space-between;
-}
-
-.rounded-md {
-    border-radius: 12px;
-}
-
-.outline-none {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-}
-
-.focus\:outline-none:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+.accordion-panel-inner {
+  overflow: hidden;
 }
 
-.text-light {
-    color: var(--grey-700);
+.accordion-content {
+  padding-top: 1rem;
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.6;
 }
 
-.z-1 {
-    z-index: 1;
-}
-
-.z-10 {
-    z-index: 10;
-}
-
-.effect-height {
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    transition-property: height;
-}
-
-.h-0 {
-    height: 0rem;
-}
-
-.h-auto {
-    height: auto;
-}
-.pt-4 {
-    padding-top: 0.25rem;
-}
-.overflow-hidden {
-    overflow: hidden;
-}
-
-.grid {
-    display: grid;
-}
-
-.overflow-hidden {
-    overflow: hidden;
-}
-
-.rounded-lg {
-    border-radius: 16px;
+/* ─── Text clamping utilities ─── */
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.border-2 {
-    border-width: 2px;
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
-.p-16 {
-    padding: 1rem;
-}
+/* ─── Responsive ─── */
+@media (max-width: 768px) {
+  .accordion-card {
+    padding: 1.25rem;
+  }
 
-.ml-auto {
-    margin-left: auto;
-}
+  .accordion-icon {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+  }
 
-.mr-auto {
-    margin-right: auto;
-}
+  .accordion-title {
+    font-size: 1.125rem;
+  }
 
-.f-heading-06 {
-    font-family: var(--f-heading-06-fontFamily);
-    font-weight: var(--f-heading-06-fontWeight);
-    font-size: var(--f-heading-06-fontSize);
-    line-height: var(--f-heading-06-lineHeight);
-    letter-spacing: var(--f-heading-06-letterSpacing);
+  .accordion-header {
+    gap: 0.75rem;
+  }
 }
 
-.text-left {
-    text-align: left;
+/* ─── Reset ─── */
+h3, p {
+  margin: 0;
 }
-
-.text-center {
-    text-align: center;
-}