style(image-banner): add hover styles to focus and fix focus indicator

Author: FrankaBeekman

components/ImageBanner/src/index.scss

@@ -26,11 +26,6 @@
   position: var(--denhaag-image-banner-card-position, relative);
 }
 
-.denhaag-image-banner__card--focus,
-.denhaag-image-banner__card:focus-visible {
-  outline: var(--denhaag-focus-border);
-}
-
 .denhaag-image-banner__image {
   height: 100%;
   left: 0;
@@ -59,57 +54,87 @@
   display: var(--denhaag-image-banner-paragraph-display, none);
 }
 
+.denhaag-image-banner__card--hover .denhaag-image-banner__image {
+  transform: var(--denhaag-image-banner-card-hover-image-transform, scale(1.08));
+}
+
 .denhaag-image-banner__card--active .denhaag-image-banner__image {
   box-shadow: var(--denhaag-image-banner-card-active-image-box-shadow, 0 4px 50px rgb(0 0 0 / 2%));
 }
 
-.denhaag-image-banner__card--hover .denhaag-image-banner__image {
+.denhaag-image-banner__card--focus .denhaag-image-banner__image {
+  transform: var(--denhaag-image-banner-card-hover-image-transform, scale(1.08));
+}
+
+.denhaag-image-banner__card:hover .denhaag-image-banner__image {
   transform: var(--denhaag-image-banner-card-hover-image-transform, scale(1.08));
 }
 
 .denhaag-image-banner__card:active .denhaag-image-banner__image {
   box-shadow: var(--denhaag-image-banner-card-active-image-box-shadow, 0 4px 50px rgb(0 0 0 / 2%));
 }
 
-.denhaag-image-banner__card--active,
-.denhaag-image-banner__card:active {
-  transform: var(--denhaag-image-banner-card-active-transform, translateY(1px));
+.denhaag-image-banner__card:focus-visible .denhaag-image-banner__image {
+  transform: var(--denhaag-image-banner-card-hover-image-transform, scale(1.08));
 }
 
-.denhaag-image-banner__card:hover .denhaag-image-banner__image {
+.denhaag-image-banner__card:has(.denhaag-image-banner__link:focus-visible) .denhaag-image-banner__image {
   transform: var(--denhaag-image-banner-card-hover-image-transform, scale(1.08));
 }
 
-.denhaag-image-banner__card--hover,
-.denhaag-image-banner__card:hover {
-  .denhaag-icon {
-    transform: var(--denhaag-image-banner-card-hover-denhaag-icon-transform, translateX(4px));
-  }
+.denhaag-image-banner__card--hover .denhaag-icon {
+  transform: var(--denhaag-image-banner-card-hover-denhaag-icon-transform, translateX(4px));
+}
 
-  .denhaag-image-banner__paragraph {
-    display: var(--denhaag-image-banner-card-hover-paragraph-display, initial);
-  }
+.denhaag-image-banner__card--focus .denhaag-icon {
+  transform: var(--denhaag-image-banner-card-hover-denhaag-icon-transform, translateX(4px));
 }
 
-.denhaag-image-banner__content {
-  background-color: var(--denhaag-image-banner-content-background-color, var(--denhaag-color-white));
-  display: grid;
-  grid-gap: var(--denhaag-image-banner-content-grid-gap, var(--denhaag-space-2xs));
-  width: var(--denhaag-image-banner-content-width, 100%);
-  max-height: var(--denhaag-image-banner-content-max-height, 155px);
-  margin-block-end: var(--denhaag-image-banner-content-margin-block-end, var(--denhaag-space-xl));
-  margin-inline: var(--denhaag-image-banner-content-margin-inline, var(--denhaag-space-xl));
-  padding-inline: var(--denhaag-image-banner-content-padding-inline, var(--denhaag-space-md));
-  padding-block-end: var(--denhaag-image-banner-content-padding-block-end, var(--denhaag-space-xs));
-  padding-block-start: var(--denhaag-image-banner-content-padding-block-start, var(--denhaag-space-md));
-  z-index: var(--denhaag-image-banner-content-z-index, 1);
+.denhaag-image-banner__card:hover .denhaag-icon,
+.denhaag-image-banner__card:focus-visible .denhaag-icon,
+.denhaag-image-banner__card:has(.denhaag-image-banner__link:focus-visible) .denhaag-icon {
+  transform: var(--denhaag-image-banner-card-hover-denhaag-icon-transform, translateX(4px));
+}
+
+.denhaag-image-banner__card--hover .denhaag-image-banner__paragraph {
+  display: var(--denhaag-image-banner-card-hover-paragraph-display, initial);
+}
+
+.denhaag-image-banner__card--focus .denhaag-image-banner__paragraph {
+  display: var(--denhaag-image-banner-card-hover-paragraph-display, initial);
+}
+
+.denhaag-image-banner__card:hover .denhaag-image-banner__paragraph,
+.denhaag-image-banner__card:focus-visible .denhaag-image-banner__paragraph,
+.denhaag-image-banner__card:has(.denhaag-image-banner__link:focus-visible) .denhaag-image-banner__paragraph {
+  display: var(--denhaag-image-banner-card-hover-paragraph-display, initial);
+}
+
+.denhaag-image-banner__card--active {
+  transform: var(--denhaag-image-banner-card-active-transform, translateY(1px));
+}
+
+.denhaag-image-banner__card:active {
+  transform: var(--denhaag-image-banner-card-active-transform, translateY(1px));
+}
+
+.denhaag-image-banner__card--focus {
+  outline: var(--denhaag-focus-border);
+}
+
+.denhaag-image-banner__card:focus-visible {
+  outline: var(--denhaag-focus-border);
 }
 
 .denhaag-image-banner__link {
   color: var(--denhaag-image-banner-link-color, inherit);
   text-decoration: var(--denhaag-image-banner-link-text-decoration, inherit);
 }
 
+.denhaag-image-banner__link:focus-visible {
+  outline: none;
+}
+
 .denhaag-image-banner__link::after {
   bottom: var(--denhaag-image-banner-link-after-bottom, 0);
   content: "";
@@ -119,6 +144,20 @@
   top: var(--denhaag-image-banner-link-after-top, 0);
 }
 
+.denhaag-image-banner__content {
+  background-color: var(--denhaag-image-banner-content-background-color, var(--denhaag-color-white));
+  display: grid;
+  grid-gap: var(--denhaag-image-banner-content-grid-gap, var(--denhaag-space-2xs));
+  width: var(--denhaag-image-banner-content-width, 100%);
+  max-height: var(--denhaag-image-banner-content-max-height, 155px);
+  margin-block-end: var(--denhaag-image-banner-content-margin-block-end, var(--denhaag-space-xl));
+  margin-inline: var(--denhaag-image-banner-content-margin-inline, var(--denhaag-space-xl));
+  padding-inline: var(--denhaag-image-banner-content-padding-inline, var(--denhaag-space-md));
+  padding-block-end: var(--denhaag-image-banner-content-padding-block-end, var(--denhaag-space-xs));
+  padding-block-start: var(--denhaag-image-banner-content-padding-block-start, var(--denhaag-space-md));
+  z-index: var(--denhaag-image-banner-content-z-index, 1);
+}
+
 .denhaag-image-banner__icon {
   display: flex;
   justify-content: var(--denhaag-image-banner-icon-justify-content, end);
@@ -142,3 +181,7 @@
     width: var(--denhaag-image-banner-big-content-width, 315px);
   }
 }
+
+.denhaag-image-banner__card:has(.denhaag-image-banner__link:focus-visible) {
+  outline: var(--denhaag-focus-border);
+}