@itcenteratunihelsinki/huds-lib 0.11.1 → 0.12.0

package/dist/collection/components/hy-cta-link/cta-link.css

@@ -25,10 +25,16 @@
   overflow: hidden;
   text-decoration: none;
 }
-.hy-cta-link:hover, .hy-cta-link:focus {
+.hy-cta-link:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.hy-cta-link:hover, .hy-cta-link:focus-visible {
   text-decoration: underline;
 }
-.hy-cta-link:hover .hy-cta-link__icon, .hy-cta-link:focus .hy-cta-link__icon {
+.hy-cta-link:hover .hy-cta-link__icon, .hy-cta-link:focus-visible .hy-cta-link__icon {
   background-color: var(--brand-main-active);
 }
 .hy-cta-link__icon {

package/dist/collection/components/hy-dropdown/hy-dropdown.css

@@ -84,7 +84,7 @@
   border-color: var(--brand-main-light);
   cursor: pointer;
 }
-.hy-dropdown__toggle:focus {
+.hy-dropdown__toggle:focus-visible {
   border-color: var(--brand-main-light);
   border-style: solid inset solid solid;
   border-width: 2px;

package/dist/collection/components/hy-event-item/hy-event-item.css

@@ -275,17 +275,17 @@
   }
 }
 @media (min-width: 48rem) {
-  .hy-events__item--grid.is-long:hover, .hy-events__item--grid.is-long:focus {
+  .hy-events__item--grid.is-long:hover, .hy-events__item--grid.is-long:focus-visible {
     border: 0;
   }
 }
 .hy-events__item--grid.is-long:hover::after,
-.hy-events__item--grid.is-long:hover .hy-events__item--toggle, .hy-events__item--grid.is-long:focus::after,
-.hy-events__item--grid.is-long:focus .hy-events__item--toggle {
+.hy-events__item--grid.is-long:hover .hy-events__item--toggle, .hy-events__item--grid.is-long:focus-visible::after,
+.hy-events__item--grid.is-long:focus-visible .hy-events__item--toggle {
   display: none;
 }
 @media (min-width: 48rem) {
-  .hy-events__item--grid.is-long:hover .hy-events__item--container, .hy-events__item--grid.is-long:focus .hy-events__item--container {
+  .hy-events__item--grid.is-long:hover .hy-events__item--container, .hy-events__item--grid.is-long:focus-visible .hy-events__item--container {
     background-color: var(--grayscale-white);
     border: 1px solid var(--grayscale-light);
     padding: 16px 16px;

package/dist/collection/components/hy-events/hy-events.css

@@ -104,6 +104,12 @@ hy-events.no-events .hy-events__footer {
   background: none;
   padding: 0.5rem;
 }
+.hy-events--wrapper .hy-events__scroll-buttons button:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .hy-events--wrapper .hy-events__scroll-buttons button:hover {
   cursor: pointer;
 }

package/dist/collection/components/hy-filter-group/hy-filter-group.css

@@ -76,6 +76,12 @@
     padding: 6px 8px;
   }
 }
+.hy-filter-group__button:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .hy-filter-group__button:hover {
   cursor: pointer;
 }

package/dist/collection/components/hy-filter-list-type/hy-filter-list-type.css

@@ -45,6 +45,12 @@
   margin: 0 8px;
   padding: 10px;
 }
+.hy-filter__list-type__list:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .hy-filter__list-type__list svg {
   background-color: var(--grayscale-background-box);
   fill: var(--brand-main-light);
@@ -65,6 +71,12 @@
   border: none;
   padding: 10px;
 }
+.hy-filter__list-type__grid:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .hy-filter__list-type__grid svg {
   background-color: var(--grayscale-background-box);
   fill: var(--brand-main-light);

package/dist/collection/components/hy-filter-visibility-tool/hy-filter-visibility-tool.css

@@ -38,12 +38,16 @@
 .hy-filter-visibility-tool:hover svg {
   fill: var(--brand-main);
 }
-.hy-filter-visibility-tool:focus {
+.hy-filter-visibility-tool:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.hy-filter-visibility-tool:focus-visible {
   color: var(--brand-main);
-  outline-offset: 1px;
-  outline: 2px solid var(--brand-main);
 }
-.hy-filter-visibility-tool:focus svg {
+.hy-filter-visibility-tool:focus-visible svg {
   fill: var(--brand-main);
 }
 .hy-filter-visibility-tool__icon {

package/dist/collection/components/hy-general-list-item/hy-general-list-item.css

@@ -72,6 +72,12 @@
   position: relative;
   text-decoration: none;
 }
+.hy-general-list-item__link:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 @media (min-width: 30rem) {
   .hy-general-list-item__link {
     -webkit-box-orient: horizontal;
@@ -83,10 +89,10 @@
 .hy-general-list-item__link:hover {
   cursor: pointer;
 }
-.hy-general-list-item__link:hover .hy-general-list-item__type span, .hy-general-list-item__link:focus .hy-general-list-item__type span {
+.hy-general-list-item__link:hover .hy-general-list-item__type span, .hy-general-list-item__link:focus-visible .hy-general-list-item__type span {
   background-color: var(--brand-main);
 }
-.hy-general-list-item__link:hover .hy-general-list-item__title, .hy-general-list-item__link:focus .hy-general-list-item__title {
+.hy-general-list-item__link:hover .hy-general-list-item__title, .hy-general-list-item__link:focus-visible .hy-general-list-item__title {
   color: var(--brand-main);
   text-decoration: underline;
 }

package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css

@@ -1,22 +1,13 @@
 /**
- * Swiper 9.2.4
+ * Swiper 12.1.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2025 Vladimir Kharlampidi
  *
  * Released under the MIT License
- *
- * Released on: April 21, 2023
  */
 
-@font-face {
-  font-family: swiper-icons;
-  src: url("data:application/font-woff;charset=utf-8;base64, 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");
-  font-weight: 400;
-  font-style: normal;
-}
-
 :root {
   --swiper-theme-color: var(--brand-main);
 }
@@ -361,16 +352,6 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   display: none !important;
 }
 
-.swiper-button-next:after,
-.swiper-button-prev:after {
-  font-family: swiper-icons;
-  font-size: var(--swiper-navigation-size);
-  text-transform: none !important;
-  letter-spacing: 0;
-  font-variant: initial;
-  line-height: 1;
-}
-
 .swiper-button-prev,
 .swiper-rtl .swiper-button-next {
   left: var(--swiper-navigation-sides-offset, 10px);
@@ -1132,7 +1113,7 @@ swiper-container .swiper-notification {
   text-align: left;
 }
 
-.hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button:is(:hover, :focus) {
+.hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button:is(:hover, :focus-visible) {
   cursor: pointer;
   opacity: 1;
 }

package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js

@@ -30,6 +30,7 @@ export class HyHeroCarousel {
             navigation: {
                 nextEl: ".swiper-button-next",
                 prevEl: ".swiper-button-prev",
+                addIcons: false,
             },
             pagination: {
                 el: ".swiper-pagination",
@@ -56,7 +57,7 @@ export class HyHeroCarousel {
     }
     render() {
         const carouselContentClasses = ["hero-carousel--item__content", this.itemCount > 1 ? "has-pagination" : ""].join(" ");
-        return (h("div", { key: '9d96a22771922ed3b7df014f05beaa96ff027288', class: "hero-carousel-container" }, h("div", { key: '4143fde98f6b15317ae8c7b4450b517cfe1c45d2', class: "swiper" }, h("div", { key: '2043f7e03ce07bea346d8bcbf89f65929f51f858', class: "swiper-wrapper" }, this._data["items"] &&
+        return (h("div", { key: '6edb4f0431901d93792c815d98c3d1b0530b028d', class: "hero-carousel-container" }, h("div", { key: '56818055b029489cd68ec5bd242c7fa0f6cbda65', class: "swiper" }, h("div", { key: '10e2871e58c3eac5fe6a5793d435a0ebe126bb25', class: "swiper-wrapper" }, this._data["items"] &&
             this._data["items"].map((i, index) => {
                 const currentIndex = index;
                 const srcSet = JSON.parse(i.image_sources);

package/dist/collection/components/hy-link-box/link-box.css

@@ -26,7 +26,10 @@
   position: relative;
 }
 .hy-link-box-container:focus-within {
-  outline: auto;
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .hy-link-box-container:hover {
   cursor: pointer;

package/dist/collection/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.css

@@ -50,8 +50,11 @@
   padding: 0;
   position: relative;
 }
-.menu--main-group__toggle:focus {
-  outline: none;
+.menu--main-group__toggle:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .menu--main-group__toggle:hover {
   cursor: pointer;
@@ -201,6 +204,12 @@
 .menu--main-group__dropdown.is-open .menu-main-link:hover svg {
   fill: var(--grayscale-medium);
 }
+.menu--main-group__dropdown.is-open .menu-main-link:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .menu--main-group__dropdown.is-open .menu--main-group__label {
   color: var(--grayscale-white);
   margin-left: 12px;
@@ -226,6 +235,12 @@
 .menu--main-group__mobile-toggle:hover {
   cursor: pointer;
 }
+.menu--main-group__mobile-toggle:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .menu--main-group__dropdown__top {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -248,6 +263,12 @@
 .menu--main-group__dropdown__close:hover {
   cursor: pointer;
 }
+.menu--main-group__dropdown__close:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .menu--main-group__logo-container .hy-site-logo__label.group {
   max-width: 250px;
 }
@@ -272,6 +293,12 @@
   text-decoration: none;
   width: 100%;
 }
+.menu--main-group__dropdown__items .menu-main-link:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .menu--main-group__dropdown__items .menu-main-link:hover {
   text-decoration: underline;
 }

package/dist/collection/components/hy-navigation/menu-language/menu-language.css

@@ -60,9 +60,11 @@
 .menu-language__toggle:hover svg {
   fill: var(--brand-main);
 }
-.menu-language__toggle:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
+.menu-language__toggle:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
 .menu-language__toggle hy-icon:first-of-type {
   display: none !important;
@@ -93,6 +95,12 @@
 .is-group .menu-language__toggle {
   color: var(--grayscale-white);
 }
+.is-group .menu-language__toggle:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 .is-group .menu-language__toggle:hover {
   color: var(--grayscale-medium);
   cursor: pointer;

package/dist/collection/components/hy-navigation/menu-language-item/menu-language-item.css

@@ -18,6 +18,12 @@
   padding: 12px 12px;
   display: block;
 }
+.menu-language__link:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 .menu-language__link:hover {
   background-color: var(--grayscale-background-box);
   color: var(--brand-main);

package/dist/collection/components/hy-opening-hours/hy-opening-hours.css

@@ -67,8 +67,15 @@
   color: var(--brand-main-active);
   cursor: pointer;
 }
-.open-hours__date-change .open-hours__prev-date:focus,
-.open-hours__date-change .open-hours__next-date:focus {
+.open-hours__date-change .open-hours__prev-date:focus-visible,
+.open-hours__date-change .open-hours__next-date:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
+.open-hours__date-change .open-hours__prev-date:focus-visible,
+.open-hours__date-change .open-hours__next-date:focus-visible {
   background-color: var(--hover-gray);
   color: var(--brand-main-active);
 }

package/dist/collection/components/hy-pagination/hy-pager-item/hy-pager-item.css

@@ -66,6 +66,12 @@
   min-width: 36px;
   text-decoration: none;
 }
+.hy-pager__item a:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 @media (min-width: 60rem) {
   .hy-pager__item a {
     font-size: 1rem;

package/dist/collection/components/hy-person-card/hy-person-card.css

@@ -168,7 +168,7 @@
     margin-bottom: 5px;
   }
 }
-.hy-person-card__info-container__full-name:hover, .hy-person-card__info-container__full-name:focus {
+.hy-person-card__info-container__full-name:hover, .hy-person-card__info-container__full-name:focus-visible {
   color: var(--brand-main);
 }
 .hy-person-card__info-container__position-title {

package/dist/collection/components/hy-search-field/hy-search-field.css

@@ -151,7 +151,7 @@
 .search-field__input:hover {
   border-color: var(--brand-main-light);
 }
-.search-field__input:focus {
+.search-field__input:focus-visible {
   border-color: var(--brand-main-light);
   border-style: solid inset solid solid;
   border-width: 2px;
@@ -201,8 +201,11 @@
 .search-field__reset:hover {
   cursor: pointer;
 }
-.search-field__reset:focus {
-  outline-color: var(--brand-main-light);
+.search-field__reset:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .search-field__submit {
   -webkit-box-align: center;
@@ -245,9 +248,12 @@
     width: 22px;
   }
 }
+.search-field__submit:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .search-field__submit:hover {
   cursor: pointer;
-}
-s .search-field__submit:focus {
-  outline-color: var(--brand-main-light);
 }

package/dist/collection/components/hy-shortcuts/hy-shortcuts.css

@@ -99,6 +99,12 @@
   text-decoration: none;
   word-break: break-word;
 }
+.hy-shortcuts .shortcut-link-container a.shortcut-link:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 @media (min-width: 30rem) {
   .hy-shortcuts .shortcut-link-container a.shortcut-link {
     border-bottom: 3px solid var(--brand-main-nearly-black);

package/dist/collection/components/hy-site-header/site-header.css

@@ -144,6 +144,12 @@
   -ms-flex-align: center;
   align-items: center;
 }
+.hy-site-header__branding > a:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 @media (min-width: 75.0625rem) {
   .hy-site-header__branding > a {
     font-size: 1.625rem;
@@ -230,6 +236,12 @@
   z-index: 101;
   width: auto;
 }
+.hy-site-header__menu-open-button[aria-expanded=true]:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 .hy-site-header__menu-open-button[aria-expanded=true]:hover {
   cursor: pointer;
 }
@@ -255,6 +267,12 @@
   padding: 0;
   text-decoration: none;
 }
+.hy-site-header__donate-link:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 @media (min-width: 1601px) {
   .hy-site-header__donate-link {
     font-size: 0.875rem;
@@ -268,16 +286,18 @@
 .hy-site-header__donate-link:hover svg {
   fill: var(--brand-main);
 }
-.hy-site-header__donate-link:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
-}
 .hy-site-header__content-top .hy-site-header__donate-link {
   color: var(--grayscale-white);
 }
 .hy-site-header__content-top .hy-site-header__donate-link svg {
   fill: var(--grayscale-white);
 }
+.hy-site-header__content-top .hy-site-header__donate-link:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
 .hy-site-header__content-top .hy-site-header__donate-link:hover {
   color: var(--grayscale-medium);
   cursor: pointer;

package/dist/collection/components/hy-site-header/site-header.js

@@ -238,7 +238,7 @@ export class SiteHeader {
                             "hy-backdrop": true,
                             "is-active": (this.isMenuOpen && !this.isDesktopMenuDropdown) ||
                                 (this.isTopMenuOpen && !this.isDesktopMenuDropdown),
-                        } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages["university_main_menu"]) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks, "menu-label-close": this.menuLabelClose })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
+                        } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "is-mobile": false, "menu-label": (_a = this.groupPages["university_main_menu"]) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks, "menu-label-close": this.menuLabelClose })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
                         return (h("a", { class: "hy-site-header__donate-link", href: url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: ColorVariant.black }), h("span", null, label)));
                     }))))), h("section", { class: `hy-site-header__container ${this.isGroup ? "is-group" : ""} ${this.groupType === "research_group_menu" ? "is-research-group" : ""}` }, h("div", { class: "hy-site-header__branding" }, this.isGroup && this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.groupType != "research_group_menu" && h("slot", { name: "menu" }), !this.isGroup && (h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }), !this.noSearch && (h("hy-site-search", { size: 14, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
                         return (h("a", { class: "hy-site-header__donate-link", href: url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: ColorVariant.black }), h("span", null, label)));

package/dist/collection/components/hy-site-header/site-logo/site-logo.css

@@ -22,10 +22,12 @@
   display: flex;
   text-decoration: none;
 }
-.hy-site-logo a:focus,
-.hy-site-logo div.luomus-group:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
+.hy-site-logo a:focus-visible,
+.hy-site-logo div.luomus-group:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .hy-site-logo__label {
   font-size: 0.875rem;

package/dist/collection/components/hy-site-header/site-search/site-search.css

@@ -52,9 +52,11 @@
 .button--search:hover:not([disabled]) svg {
   fill: var(--brand-main);
 }
-.button--search:focus:not([disabled]) {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
+.button--search:not([disabled]):focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
 .button--search.is-active, .button--search[aria-expanded=true] {
   position: relative;
@@ -71,6 +73,12 @@
 .is-group .button--search {
   color: var(--grayscale-white);
 }
+.is-group .button--search:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 .is-group .button--search:hover:not([disabled]) {
   color: var(--grayscale-medium);
   cursor: pointer;
@@ -270,15 +278,21 @@
     letter-spacing: -0.56px;
   }
 }
-.site-search__panel__panel-toggle:focus:not([disabled]), .site-search__panel__panel-toggle:hover:not([disabled]) {
+.site-search__panel__panel-toggle:focus-visible:not([disabled]), .site-search__panel__panel-toggle:hover:not([disabled]) {
   cursor: pointer;
 }
-.site-search__panel__panel-toggle:focus:not([disabled]) span, .site-search__panel__panel-toggle:hover:not([disabled]) span {
+.site-search__panel__panel-toggle:focus-visible:not([disabled]) span, .site-search__panel__panel-toggle:hover:not([disabled]) span {
   color: var(--brand-main);
 }
-.site-search__panel__panel-toggle:focus:not([disabled]) svg, .site-search__panel__panel-toggle:hover:not([disabled]) svg {
+.site-search__panel__panel-toggle:focus-visible:not([disabled]) svg, .site-search__panel__panel-toggle:hover:not([disabled]) svg {
   fill: var(--brand-main);
 }
+.site-search__panel__panel-toggle:not([disabled]):focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 .site-search__panel__tools .title {
   font-size: 1rem;
   line-height: 20px;

package/dist/collection/components/hy-tabs/hy-tabs.css

@@ -35,8 +35,13 @@
 .hy-tabs__container .hy-tab-scroll.is-disabled:hover {
   cursor: none;
 }
-.hy-tabs__container .hy-tab-scroll:focus, .hy-tabs__container .hy-tab-scroll:hover {
-  outline: none;
+.hy-tabs__container .hy-tab-scroll:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.hy-tabs__container .hy-tab-scroll:hover {
   cursor: pointer;
 }
 .hy-tabs__container .hy-tab-scroll span {
@@ -261,6 +266,9 @@
     padding: 40px 20px;
   }
 }
-.hy-tabs__container [role=tabpanel]:focus {
-  outline: 1px solid var(--brand-main-active);
+.hy-tabs__container [role=tabpanel]:focus-visible {
+  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }