@itcenteratunihelsinki/huds-lib 0.9.8 → 0.10.0

package/dist/collection/components/hy-image/image.js

@@ -1,13 +1,14 @@
 import { h } from "@stencil/core";
 export class Image {
     constructor() {
-        this.imageUrl = '';
-        this.imageAlt = '';
+        this.imageUrl = "";
+        this.imageAlt = "";
         this.disableLazy = false;
-        this.fetchPriority = 'auto';
+        this.fetchPriority = "auto";
         this.caption = null;
         this.aspectRatioWidth = 16;
         this.aspectRatioHeight = 9;
+        this.imageDecorative = false;
         this.sourceSet = undefined;
     }
     srcSetWatcher(data) {
@@ -29,15 +30,19 @@ export class Image {
                 "--aspectRatio": `${aspect}%`,
             };
         }
-        const classAttributes = ["hy-image", this.caption && this.caption.length > 0 ? "hy-image--with-caption" : null].filter(Boolean).join(" ");
+        const classAttributes = ["hy-image", this.caption && this.caption.length > 0 ? "hy-image--with-caption" : null]
+            .filter(Boolean)
+            .join(" ");
         const containerClasses = [
             "hy-image__image-container",
             aspectRatio !== null ? "hy-image--with-aspect" : "hy-image--no-aspect",
-        ].filter(Boolean).join(" ");
+        ]
+            .filter(Boolean)
+            .join(" ");
         return [
-            h("div", { key: 'af5bc435ab6f5098dad8763d27af8753f30fd552', class: classAttributes }, h("div", { key: '9173da2bd53f22ca5d2c4599dd1f5f4945ea1ff1', class: containerClasses, style: aspectRatio !== null ? aspectRatio : "" }, this.imageUrl &&
-                (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || "" }))), h("img", { "fetch-priority": this.fetchPriority, loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { "fetch-priority": this.fetchPriority, loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl })))), this.caption && h("div", { key: 'f1eae1f631d546a6d116701fef9be811e0f0756b', class: "hy-image__caption" }, this.caption)),
-            h("hy-box", { key: '71b566d0da2f18e02af07df4c72adf12a9dc8650', mb: "1.75, 1.75, 2, 2.5" }),
+            h("div", { key: '9fe465c00b4e582aa35fcf8aad3ae245d6a4ed7d', class: classAttributes }, h("div", { key: 'b24af3425e07d97aa8761bf0ac8101951d928c33', class: containerClasses, style: aspectRatio !== null ? aspectRatio : "" }, this.imageUrl &&
+                (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || "" }))), h("img", { "fetch-priority": this.fetchPriority, loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl, role: this.imageDecorative ? "presentation" : null }))) : (h("img", { "fetch-priority": this.fetchPriority, loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl, role: this.imageDecorative ? "presentation" : null })))), this.caption && h("div", { key: '9355a7f0cb3bb6b0cb2865bc7d42d19fe5f8997e', class: "hy-image__caption" }, this.caption)),
+            h("hy-box", { key: 'cce99422395ff80d745676421fcbd7f83dede08a', mb: "1.75, 1.75, 2, 2.5" }),
         ];
     }
     static get is() { return "hy-image"; }
@@ -69,7 +74,7 @@ export class Image {
                 },
                 "attribute": "image-url",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "\"\""
             },
             "imageAlt": {
                 "type": "string",
@@ -87,7 +92,7 @@ export class Image {
                 },
                 "attribute": "image-alt",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "\"\""
             },
             "disableLazy": {
                 "type": "boolean",
@@ -129,7 +134,7 @@ export class Image {
                 },
                 "attribute": "fetch-priority",
                 "reflect": false,
-                "defaultValue": "'auto'"
+                "defaultValue": "\"auto\""
             },
             "caption": {
                 "type": "string",
@@ -185,6 +190,24 @@ export class Image {
                 "reflect": false,
                 "defaultValue": "9"
             },
+            "imageDecorative": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-decorative",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "sourceSet": {
                 "type": "string",
                 "mutable": false,

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

@@ -12,7 +12,7 @@
 p.hy-ingress {
   color: var(--ds-palette-black-95);
   font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-14);
+  font-size: var(--ds-fontSize-18);
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
@@ -23,25 +23,7 @@ p.hy-ingress {
 }
 @media (min-width: 60rem) {
   p.hy-ingress {
-    font-size: var(--ds-fontSize-16);
-  }
-}
-@media (min-width: 30rem) {
-  p.hy-ingress {
-    color: var(--ds-palette-black-95);
-    font-family: var(--ds-fontFamily-body);
-    font-size: var(--ds-fontSize-16);
-    font-weight: var(--ds-fontWeight-regular);
-    letter-spacing: var(--ds-letterSpacing-wide);
-    line-height: var(--ds-lineHeight-large);
-    -ms-hyphens: auto;
-    hyphens: auto;
-    text-wrap: pretty;
-  }
-}
-@media (min-width: 30rem) and (min-width: 60rem) {
-  p.hy-ingress {
-    font-size: var(--ds-fontSize-18);
+    font-size: var(--ds-fontSize-20);
   }
 }
 @media (min-width: 60rem) {
@@ -51,28 +33,14 @@ p.hy-ingress {
 }
 @media (min-width: 1601px) {
   p.hy-ingress {
-    color: var(--ds-palette-black-95);
-    font-family: var(--ds-fontFamily-body);
-    font-size: var(--ds-fontSize-16);
-    font-weight: var(--ds-fontWeight-regular);
-    letter-spacing: var(--ds-letterSpacing-wide);
-    line-height: var(--ds-lineHeight-large);
-    -ms-hyphens: auto;
-    hyphens: auto;
-    text-wrap: pretty;
     margin: 0 0 3rem;
   }
 }
-@media (min-width: 1601px) and (min-width: 60rem) {
-  p.hy-ingress {
-    font-size: var(--ds-fontSize-18);
-  }
-}
 @media (min-width: 75.0625rem) {
   p.hy-ingress__large {
     color: var(--ds-palette-black-95);
     font-family: var(--ds-fontFamily-body);
-    font-size: var(--ds-fontSize-16);
+    font-size: var(--ds-fontSize-18);
     font-weight: var(--ds-fontWeight-regular);
     letter-spacing: var(--ds-letterSpacing-wide);
     line-height: var(--ds-lineHeight-large);
@@ -84,6 +52,6 @@ p.hy-ingress {
 }
 @media (min-width: 75.0625rem) and (min-width: 60rem) {
   p.hy-ingress__large {
-    font-size: var(--ds-fontSize-18);
+    font-size: var(--ds-fontSize-20);
   }
 }

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

@@ -359,4 +359,324 @@
   height: 40px;
   padding: 7px;
   width: 40px;
+}
+/*
+  Cludo autocomplete
+*/
+#search_autocomplete .cludo-sayt__no-result-text p a:focus,
+#search_autocomplete .cludo-sayt__no-result-text p a:hover,
+#search_autocomplete .cludo-sayt__results-tophit a:focus h3,
+#search_autocomplete .cludo-sayt__results-tophit a:hover h3,
+#search_autocomplete .cludo-sayt__results-tophit-title-link:focus,
+#search_autocomplete .cludo-sayt__results-tophit-title-link:hover,
+#search_autocomplete .cludo-sayt__results-tophit.active h3,
+#search_autocomplete .cludo-sayt__results-tophit.people-result a:focus h3,
+#search_autocomplete .cludo-sayt__results-tophit.people-result a:hover h3 {
+  text-decoration: underline;
+}
+#search_autocomplete {
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  padding: 0;
+  z-index: 5;
+}
+#search_autocomplete * {
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+}
+#search_autocomplete h3 {
+  font-size: 0.875rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+#search_autocomplete .cludo-sayt {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  margin: 0;
+  padding: 12px 15px;
+  border: 1px solid #d2d2d2;
+}
+#search_autocomplete .cludo-sayt h3 {
+  line-height: 1.25rem;
+}
+#search_autocomplete .cludo-sayt__suggestions {
+  border-bottom: 1px solid #d2d2d2;
+}
+#search_autocomplete .cludo-sayt__suggestions > h3 {
+  margin: 0;
+  white-space: nowrap;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar {
+  height: 8px;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar:empty {
+  display: none;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar-thumb {
+  background: #c7c7c7;
+  border-radius: 20px;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar-thumb:hover {
+  background: #878787;
+}
+#search_autocomplete .cludo-sayt__suggestions-list {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 8px 0 12px;
+  margin: 0;
+  list-style-type: none;
+}
+#search_autocomplete .cludo-sayt__suggestion {
+  white-space: nowrap;
+  background-color: #f5f5f5;
+  padding: 10.05px 18.76px;
+  border-radius: 16.75px;
+  font-size: 0.813rem;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__suggestion.active,
+#search_autocomplete .cludo-sayt__suggestion:focus,
+#search_autocomplete .cludo-sayt__suggestion:hover {
+  color: #107eab;
+  text-decoration: underline;
+}
+#search_autocomplete .cludo-sayt__results {
+  padding: 1rem 0;
+}
+#search_autocomplete .cludo-sayt__people-search-categories > div {
+  margin-top: 24px;
+}
+#search_autocomplete .cludo-sayt__results-tophit-container:not(:last-child) {
+  margin-bottom: 24px;
+}
+#search_autocomplete .cludo-sayt__results-tophit-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0 0 16px;
+  color: #000;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__results-tophit-title-link {
+  color: #107eab;
+  font-weight: 600;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__results-tophit-title-no-link {
+  color: #107eab;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__no-result-text p {
+  margin: 0;
+  padding: 0;
+  color: #222;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__no-result-text p a {
+  color: #107eab;
+  text-decoration: none;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__results-tophits {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#search_autocomplete .cludo-sayt__results-tophit:not(:last-of-type) {
+  margin-bottom: 16px;
+}
+#search_autocomplete .cludo-sayt__results-tophit.tool a {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  gap: 8px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+#search_autocomplete .cludo-sayt__results-tophit.tool a .cludo-sayt__tool {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 5px;
+  background-color: #107eab;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__results-tophit a {
+  display: block;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-decoration: none;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__results-tophit a h3 {
+  font-weight: 500;
+  color: #222;
+  margin: 0;
+}
+#search_autocomplete .cludo-sayt__results-tophit a span {
+  color: #979797;
+  font-size: 0.688rem;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  color: #222;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__image {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 60px;
+  min-width: 60px;
+  height: 60px;
+  min-height: 60px;
+  border-radius: 0;
+  background-color: var(--brand-main-light);
+  background-size: cover;
+  color: var(--grayscale-white);
+  font-size: 1rem;
+  line-height: 32px;
+  font-weight: 700;
+  letter-spacing: 0.48px;
+  overflow: hidden;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__image img {
+  width: 100%;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__content h3 {
+  font-size: 1rem;
+  font-weight: 700;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__content p {
+  margin: 0;
+  font-weight: 400;
+}
+#search_autocomplete .cludo-sayt__all-results {
+  border-top: 1px solid #d2d2d2;
+  padding-top: 16px;
+}
+@media (min-width: 931px) {
+  #search_autocomplete .cludo-sayt {
+    width: 100%;
+    background-color: #fff;
+    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    margin: 0;
+    padding: 0 16px;
+    border: 1px solid #d2d2d2;
+  }
+  #search_autocomplete .cludo-sayt__suggestions {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    gap: 12px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+  #search_autocomplete .cludo-sayt__suggestions-list {
+    overflow: visible;
+    padding: 12px 0;
+  }
+  #search_autocomplete .cludo-sayt__results {
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  #search_autocomplete .cludo-sayt__main-search-categories {
+    padding: 1rem;
+  }
+  #search_autocomplete .cludo-sayt__people-search-categories {
+    border-left: 1px solid #d2d2d2;
+    padding: 1rem;
+  }
+  #search_autocomplete .cludo-sayt__people-search-categories > div {
+    margin-top: 0;
+  }
+  #search_autocomplete .cludo-sayt__all-results {
+    padding: 16px 0;
+  }
+}
+#search_autocomplete .cludo-sayt__all-results a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: 0 auto;
+  border: none;
+  background-color: #107eab;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 13px 16px;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__all-results a:focus,
+#search_autocomplete .cludo-sayt__all-results a:hover {
+  background: #005379;
+}
+#search_autocomplete .cludo-sayt__other {
+  padding: 22px 0;
+}
+#search_autocomplete .cludo-sayt__other h3 {
+  font-size: 18px;
+  letter-spacing: -0.56px;
+  margin-bottom: 7.5px;
+}
+.cludo-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

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

@@ -95,6 +95,9 @@ export class SiteSearch {
                 // Without setTimeout it will not focus the input because it hasn't rendered yet.
                 setTimeout(() => {
                     const searchInput = this.el.shadowRoot.querySelector("input#search");
+                    if (window.registerNavSearchInput && searchInput) {
+                        window.registerNavSearchInput('#cludo-search-form input#search');
+                    }
                     searchInput === null || searchInput === void 0 ? void 0 : searchInput.focus();
                 });
             }
@@ -107,24 +110,24 @@ export class SiteSearch {
     render() {
         const currentPageUrlPathName = window.location.pathname;
         const searchPagePathNames = ["/fi/haku", "/en/search", "/sv/sök"];
-        return (h("div", { key: 'd785a9f016465d843c5706d2f1c3a6417b898b5e', class: {
+        return (h("div", { key: '14308fcbac8e2b4c7e7b4a3393b8ddbc48ada624', class: {
                 "site-search": true,
                 "site-search__is-open": this.isSearchPanelOpen,
                 "is-group": this.isGroup,
-            } }, h("button", { key: '2be97cdfe336f2feacac76df5e0b0d730040ca72', "aria-label": this.showLabel ? this._labels["open"] : "", "aria-expanded": `${this.isSearchPanelOpen}`, class: {
+            } }, h("button", { key: '99285de74d03d93fae04aa14781f3465d4afa2dd', "aria-label": this.showLabel ? this._labels["open"] : "", "aria-expanded": `${this.isSearchPanelOpen}`, class: {
                 "button--search": true,
                 "is-open--menu": this.isAlternative,
                 "is-open": this.isSearchPanelOpen,
                 "is-active": searchPagePathNames.some((item) => item === currentPageUrlPathName),
-            }, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false }, this.showLabel ? (h("span", { class: { "button--search__label": true, "button--search__label__group": this.isGroup } }, this._labels["label"])) : (""), h("hy-icon", { key: '01340d95f04f61a6ad98b26ce15ff48f79b48810', icon: "hy-icon-search", size: this.size, fill: this.color })), (!this.isLuomusGroup && this.isSearchPanelOpen) && (h("div", { key: '72132ba5ce0557082e9f384865a9b4b684c3d0b4', class: {
+            }, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false }, this.showLabel ? (h("span", { class: { "button--search__label": true, "button--search__label__group": this.isGroup } }, this._labels["label"])) : (""), h("hy-icon", { key: 'f609b6379b4d3be08c203f7b00d6b231e7135e7d', icon: "hy-icon-search", size: this.size, fill: this.color })), (!this.isLuomusGroup && this.isSearchPanelOpen) && (h("div", { key: '77a1cb514c734d144a6e17e0f892edbe09508d9d', class: {
                 "site-search__panel": true,
                 "site-search__panel__is-open": this.isSearchPanelOpen,
-            }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: '82a0f951108b4f61762fded0ef1127ad1478bd20', class: "site-search__panel__content" }, h("div", { key: 'd8bdda8563130c6f2dfcbe851c9d7eb728d7f5dc', class: "site-search__panel__wrapper" }, h("div", { key: 'cc014c4cd3f407709e2b9ee6c9d1d19d92d075be', class: "site-search__panel__title" }, h("div", { key: 'cd228764cb580c22d20f7de3eaa0802ff9701c5d', class: "site-search__panel__title__group" }, h("span", { key: 'a702696c8e4e5e19b4238ff760bd2a3893b6f407', class: "panel-title" }, this.searchTitleLabel), h("div", { key: '6e212c11e28eed6b4af4ea11ff369c938e5cdeaa', class: "description" }, this.searchDescriptionLabel))), h("div", { key: '35bc901f1cc23fa041ad83673978be4c12af30da', id: "cludo-search-results", class: "container_12" }, h("div", { key: 'f6b8bb02c4f865a8a8a218fe0f471df2e577c353', class: "search-banner" }), h("div", { key: '5880dcd1c0c2b3ba4b72a5cf3f1f6c922ffa449b', class: "search-filters search-filters-mobile" }), h("div", { key: '45b9f5d02568333c010d79541c1427bd8f912224', class: "col-md-12" }, h("div", { key: '17274a07d19a257cceab98772ad332b75288edc7', style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { key: '8e0de67e888d34af4978253d8496f2e4a4865a89', "input-id": "search", label: "" }))), h("div", { key: 'a4b6af4005682889b0573bfc68595e71c17835d6', class: "col-md-3" }, h("div", { key: 'e72d0fb966942bd0c2de8fffe84bd8966d48fe05', class: "search-filters", "aria-controls": "search-results" })), h("div", { key: 'ba8d7c97f26b844172c8c066fd4dd2a54ffd2204', class: "col-md-9" }, h("div", { key: '01da0c776ff9b2101ac885e4ec93a2ea83a52446', class: "search-results-container" }, h("hy-paragraph-text", { key: '2c3b6ee33bf9a45fb8522be611045054ce7a4b66' }, h("div", { key: '6dff2b186fdecc19095853c29eff7eebc2b6b2f7', class: "search-result-count" })), h("div", { key: 'be38c8cbb85e1d4bef70633bce6a65423b524a6c', class: "search-did-you-mean", role: "Complementary" }), h("div", { key: '99b1c4b342bc57a204c380d41810ab8bd3fa2e5b', class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { key: '0f786fea3a0026471633211ac87a0c9273c2c630', class: "site-search__panel__tools" }, h("div", { key: 'c90b125e7bc1458c49f0576778dc7ab90b9a9088', class: "title" }, this.searchToolsLabel), h("div", { key: '12511223532b0e1a723dc79a4ce12b89c1ddc300', class: "list" }, this._searchTools.map((i) => {
+            }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: 'f1d57468a0d5188b138854b44a68ad6b45c6aff5', class: "site-search__panel__content" }, h("div", { key: '5ac01fafec4b9b0bc210eb9ec6065275f819b077', class: "site-search__panel__wrapper" }, h("div", { key: 'f0d2267d4045c0398d251461f43e7361ff906e7d', class: "site-search__panel__title" }, h("div", { key: '858202623ac82e4cbc75d7d66e668c5996f7d1a9', class: "site-search__panel__title__group" }, h("span", { key: '1d6b1d760629248039847b6a64b3e33c5e7c4249', class: "panel-title" }, this.searchTitleLabel), h("div", { key: '430867474c934f0d562673c60064f0b648fa43a2', class: "description" }, this.searchDescriptionLabel))), h("div", { key: 'b081666de8a7e01d68f3ed067a01ee7c76efe340', id: "cludo-search-results", class: "container_12" }, h("div", { key: 'f00c982e682076d504b45a96e194bfd8fd031d5d', class: "search-banner" }), h("div", { key: 'b1e748ca993e15b8f9247d1e47ecc05f98b1be9d', class: "search-filters search-filters-mobile" }), h("div", { key: '361b42614a73eca060df72392c295e1442f3544b', class: "col-md-12" }, h("div", { key: '7f53b4d4a31fed81263c9681cb394d80111894a6', style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { key: 'afd8412f607636cd8022feb96ad9a53021d6ba82', "input-id": "search", label: "" }))), h("div", { key: '209b848f4c5c16e51e4d78da3a394c3714861aa8', class: "col-md-3" }, h("div", { key: '5bf7e7a5d5218a11174758356c3fe8b9ef7b6e1e', class: "search-filters", "aria-controls": "search-results" })), h("div", { key: 'a801c5fdbb998e6c2dfa6457c25ff7ed18d6e561', class: "col-md-9" }, h("div", { key: '36e3d2b77d365ff50d2542f288d134769d9a77cd', class: "search-results-container" }, h("hy-paragraph-text", { key: '223f7604ab9a457ae375bb6bd81b7643450c384c' }, h("div", { key: '3315875631f74684d7416544462fc6804f213187', class: "search-result-count" })), h("div", { key: '645c792076ad5a67fa27907630518d47b2ff1796', class: "search-did-you-mean", role: "Complementary" }), h("div", { key: 'ce78be3a28bb44aa4a29cf7905c653ea6cfc14ea', class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { key: '4a6f518bf6d40be1e82ff1bcbe9aee1d3575ebcd', class: "site-search__panel__tools" }, h("div", { key: 'a3cd2c0329258d5d7d0795aa0f2705badc679903', class: "title" }, this.searchToolsLabel), h("div", { key: 'd069bbf2cb1d48683b66c15359e5e97a2ea6eece', class: "list" }, this._searchTools.map((i) => {
             let searchToolTarget = i.isExternal ? "_blank" : "_self";
             return (h("a", { class: "search-special-tool", href: i.url, target: searchToolTarget }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24, fill: ColorVariant.black }), h("span", { class: "label" }, i.label), h("span", { class: "description" }, i.description)));
-        })))), h("button", { key: 'de58fe2bc41e26ddc95a5cfbd8e7a466034064bd', onClick: () => this.closeSearchPanel(), class: {
+        })))), h("button", { key: '06a6bdcec4873807cb9b08ff615842fc7409f0f7', onClick: () => this.closeSearchPanel(), class: {
                 "site-search__panel__panel-toggle": true,
-            }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: 'f6295f0978baa6f6d7b677f9cf54776824894740', class: "site-search__panel__panel-toggle__label" }, h("span", { key: '585995b3dc6a30fc5bac2f9182277a7aba6b3583', class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { key: '40f1ca59bbcbc9655874286bb907697a7f8e86c7', icon: "hy-icon-remove", size: 16, fill: ColorVariant.black })))), h("div", { key: '232c04ebeb4dd470132fab90fe4286e31817870e', class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
+            }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: 'ba2030a8c26279c9531018e9d7223ba1c389703e', class: "site-search__panel__panel-toggle__label" }, h("span", { key: 'ff78542648700dc2091aae9fb91021732571b7c1', class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { key: '77e09522c187f3a5a2c56c7e5570703c696547dc', icon: "hy-icon-remove", size: 16, fill: ColorVariant.black })))), h("div", { key: 'fba05c54c93798a58549aa126cffb676376821c7', class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
     }
     static get is() { return "hy-site-search"; }
     static get encapsulation() { return "shadow"; }