@itcenteratunihelsinki/huds-lib 0.8.76 → 0.8.78-alpha.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: '9f437c37797c7e5bd5854734877af5f5ebf27379', class: {
+        return (h("div", { key: 'd86aee9d148617837eef2d3095b3d5e7e3411467', class: {
                 "site-search": true,
                 "site-search__is-open": this.isSearchPanelOpen,
                 "is-group": this.isGroup,
-            } }, h("button", { key: '0711bef406e2961d25b5db2b13168da7ff17e69e', "aria-label": this.showLabel ? this._labels["open"] : "", "aria-expanded": `${this.isSearchPanelOpen}`, class: {
+            } }, h("button", { key: '6ffbfb2bf03ff22d10878b39be98231e1e8a4365', "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: '92daa35b3d0e58eaffc80affcddfbfa257b1cc36', icon: "hy-icon-search", size: this.size, fill: this.color })), (!this.isLuomusGroup && this.isSearchPanelOpen) && (h("div", { key: 'af7013ad82abe5f83a1efabb14c2f441de81c419', 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: 'b86b7f7f0096c15c33c9a40037dd6d53161ad8c4', icon: "hy-icon-search", size: this.size, fill: this.color })), (!this.isLuomusGroup && this.isSearchPanelOpen) && (h("div", { key: 'c8e72fcd91268857fa91c0f595f6b7b42988c341', class: {
                 "site-search__panel": true,
                 "site-search__panel__is-open": this.isSearchPanelOpen,
-            }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: '6ed52de939989022bf7b75989d26f5513fe2e2b2', class: "site-search__panel__content" }, h("div", { key: '73d114aacb85183187ab53abea184f911cf35345', class: "site-search__panel__wrapper" }, h("div", { key: 'e3404b8aa3910b5e4f79878f5dd042da1ef66dfa', class: "site-search__panel__title" }, h("div", { key: 'aaf3c4cb2c1bb44f7b7c44db208d7c242bbf8db0', class: "site-search__panel__title__group" }, h("span", { key: 'c2301ba1440dd4291591f28d9fa6653b2116a6cc', class: "panel-title" }, this.searchTitleLabel), h("div", { key: 'e289c8398b713fdda0c77278dc300530a9abc16a', class: "description" }, this.searchDescriptionLabel))), h("div", { key: '34bcd7ac864fd13988d31ef2dcde7fe240482757', id: "cludo-search-results", class: "container_12" }, h("div", { key: 'd3a23a35379be079b4842e8be0389521a994a2bc', class: "search-banner" }), h("div", { key: 'c901c907fe8d99e74feef6a0aafa5187361b4832', class: "search-filters search-filters-mobile" }), h("div", { key: '3ffd97dd72c268285875afdda497db6ac88c7677', class: "col-md-12" }, h("div", { key: 'da1ce482ea6f6a3bfa6c86e735a8b1c7a70dd146', style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { key: 'd342ede5f9c546d04ca4734a24cad6a07e7a391b', "input-id": "search", label: "" }))), h("div", { key: 'd685c958c2929351730465e708339faddb4b1864', class: "col-md-3" }, h("div", { key: 'c48085307368025d5769c4fafb1cf2c06ed728e3', class: "search-filters", "aria-controls": "search-results" })), h("div", { key: 'f9d93ef835ea12c5cad682447ee4c8bc75c475c0', class: "col-md-9" }, h("div", { key: 'fd04d8274e9a0b2f7e23cdf37d696bc889fd74bc', class: "search-results-container" }, h("hy-paragraph-text", { key: '38e86a92828084826ae50f77428f064634bd342f' }, h("div", { key: 'f68102417dee83ad19c3539ae5b76cfeb8da26a2', class: "search-result-count" })), h("div", { key: '4c13e758cef6c77ae4aae2f8d6059461cadbd640', class: "search-did-you-mean", role: "Complementary" }), h("div", { key: 'aca5ed57e5051c1b6d7c894c72ea63e7905b7f5b', class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { key: 'e38b26dadcac5fa6e6a630bf031b9ed0510980a4', class: "site-search__panel__tools" }, h("div", { key: '3f285cc5ba6439f80d27707a44f37c697560b09d', class: "title" }, this.searchToolsLabel), h("div", { key: 'a73845acae85f2ced5d0bf2d2a098603d134b3ee', class: "list" }, this._searchTools.map((i) => {
+            }, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: 'd774bdc3fb9314ab212ec898e81d69e24db3f9b2', class: "site-search__panel__content" }, h("div", { key: 'b762d1928f4b8dde6c5163947991773ac7c9861b', class: "site-search__panel__wrapper" }, h("div", { key: '55a0f46708436e252bbe993bcb6990b20c7bec31', class: "site-search__panel__title" }, h("div", { key: '27c81cae9b5b87a69f1d114d79b18bfc3b7865a1', class: "site-search__panel__title__group" }, h("span", { key: '3743bc2aa5cb70ad94753ed7c60099d2b4ce301a', class: "panel-title" }, this.searchTitleLabel), h("div", { key: '65f4e557d9a355c9e2549dacdedf33d6bb48a025', class: "description" }, this.searchDescriptionLabel))), h("div", { key: '0c4a894cce08b2862a1783a7eb33c4b2d96b079f', id: "cludo-search-results", class: "container_12" }, h("div", { key: '443392399c7bd0cd105cd0418755c06d884df247', class: "search-banner" }), h("div", { key: 'a57a69f60f36e9cd74709908d13d5f58eb522ad0', class: "search-filters search-filters-mobile" }), h("div", { key: 'eedad9495289af558ada1d88ccc6958350138ba4', class: "col-md-12" }, h("div", { key: '0d943682048e08baf0c451a10ce9bef3d9119afc', style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { key: '878ea20723a2d1b1f5f4f50505c61787802e5157', "input-id": "search", label: "" }))), h("div", { key: '08682651c358a1cf1077521f180a271f4d0de481', class: "col-md-3" }, h("div", { key: '69ded57ad6ad65fe396c25616f9434738b16f92e', class: "search-filters", "aria-controls": "search-results" })), h("div", { key: 'e3f437c73067c687ed17eead32159bc41d23ec31', class: "col-md-9" }, h("div", { key: 'f9cdcb0a353b9d067bf67c1cef7da94aeffb6a04', class: "search-results-container" }, h("hy-paragraph-text", { key: '44642fa115f8e952f34588c0efc225f5c1c00893' }, h("div", { key: '5da31dad0869b6e2cf2dfbadaf1f366ac877986d', class: "search-result-count" })), h("div", { key: 'a709ccff1ec8e57e7a2276f810c30ea1609d93b6', class: "search-did-you-mean", role: "Complementary" }), h("div", { key: '24b6b479a27daa1c9c922497f688f61867eab290', class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { key: 'eb16335abe46bd026b8f789824354e4cb8edb51b', class: "site-search__panel__tools" }, h("div", { key: '652f83d87d301f6030ee77b930027998b1596bdd', class: "title" }, this.searchToolsLabel), h("div", { key: '4850b43f54e2ed132e0d15474ed61d65c394e4a3', 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: 14, fill: ColorVariant.black }), h("span", { class: "label" }, i.label), h("span", { class: "description" }, i.description)));
-        })))), h("button", { key: '53010753be2d1bf888806172866cfab1651954fe', onClick: () => this.closeSearchPanel(), class: {
+            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: '98e64566ef275316f87accf675df19cf54846022', onClick: () => this.closeSearchPanel(), class: {
                 "site-search__panel__panel-toggle": true,
-            }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: '4f0aa66d5136788dca11bddf47c569651db43f46', class: "site-search__panel__panel-toggle__label" }, h("span", { key: 'b9e7af6ad56dd5bccca194ab906b7337b5aad0b0', class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { key: 'd8baf375ca28cf9126c5a69b1c0b9a47b07e4522', icon: "hy-icon-remove", size: 16, fill: ColorVariant.black })))), h("div", { key: 'f580d8f64b162aa847c4de699257a11b21debf53', class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
+            }, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: '6720d1cfa3cc45bd0d893056341165b944eb7502', class: "site-search__panel__panel-toggle__label" }, h("span", { key: '5c724c756a6fd70acdb69f1893f56f7dd09ef471', class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { key: '77337de2b3df2b8973c0f7542190ddfbdf9f6693', icon: "hy-icon-remove", size: 16, fill: ColorVariant.black })))), h("div", { key: '2ea850ffe316fe33fdfbaa3209125d152192ebe2', class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
     }
     static get is() { return "hy-site-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hy-table-container/hy-table-container.css

@@ -1,62 +1,11 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-soft: #b1e7ff;
-  --brand-main-bright: #48c5f8;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --link-blue: #0479a4;
-  --link-disabled: #767676;
-  --grayscale-white: #fff;
-  --grayscale-slightly-gray: #fefefe;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-background-box: #f5f5f5;
-  --grayscale-tabs-border: #e6e6e6;
-  --grayscale-background-arrow: #dfdfdf;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-dark-text: #222222;
-  --grayscale-black: #000000;
-  --additional-red-light: #e5053a;
-  --additional-red-dark: #a31621;
-  --additional-purple-light: #420039;
-  --additional-yellow-light: #f9a21a;
-  --additional-yellow: #c47f1b;
-  --additional-skyblue: #48c5f8;
-  --additional-orange: #d14600;
-  --additional-green-light: #96ba3c;
-  --additional-green-dark: #006400;
-  --hover-gray: #eaeaea;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --gutter-mobile: 16px;
-  --gutter-narrow: 24px;
-  --gutter-medium: 24px;
-  --gutter-wide: 24px;
-  --gutter-extrawide: 32px;
-}
-
 /**
  * Mixin for fluid type.
  * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
  */
-
-:root {
-  --breakpoint-extrawide: 75.0625rem;
-  --breakpoint-max-width: 75.0625rem;
-  --breakpoint-medium: 48rem;
-  --breakpoint-narrow: 30rem;
-  --breakpoint-wide: 60rem;
-}
-
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
 .hy-table-container {
   font-size: 0.875rem;
   line-height: 18px;
@@ -65,27 +14,23 @@
   overflow: scroll;
   white-space: nowrap;
 }
-
 @media (min-width: 30rem) {
   .hy-table-container {
     font-size: 1rem;
     line-height: 20px;
   }
 }
-
 .hy-table-container table {
   border-collapse: collapse;
   border: 1px solid var(--grayscale-dark);
   text-indent: initial;
   width: 100%;
 }
-
 .hy-table-container thead {
   border-bottom: 1px solid var(--grayscale-dark);
   border-left: 1px solid var(--grayscale-dark);
   border-right: 1px solid var(--grayscale-dark);
 }
-
 .hy-table-container thead th {
   font-size: 0.875rem;
   line-height: 20px;
@@ -93,14 +38,12 @@
   background-color: var(--grayscale-light);
   text-transform: uppercase;
 }
-
 @media (min-width: 30rem) {
   .hy-table-container thead th {
     font-size: 1rem;
     line-height: 20px;
   }
 }
-
 .hy-table-container td,
 .hy-table-container th {
   border: 1px solid var(--grayscale-dark);
@@ -113,23 +56,19 @@
   vertical-align: top;
   word-wrap: break-word;
 }
-
 .hy-table-container td a,
 .hy-table-container th a {
   text-decoration: none;
 }
-
 .hy-table-container td a:hover,
 .hy-table-container th a:hover {
   cursor: pointer;
   text-decoration: underline;
 }
-
 .hy-table-container td p,
 .hy-table-container th p {
   font-size: inherit;
 }
-
 .hy-table-container td:first-child,
 .hy-table-container th:first-child {
   font-weight: 700;
@@ -143,14 +82,12 @@
   width: 180px;
   z-index: 2;
 }
-
 @media (min-width: 60rem) {
   .hy-table-container td:first-child,
   .hy-table-container th:first-child {
     border-right: 1px solid var(--grayscale-dark);
   }
 }
-
 .hy-table-container td:first-child::after,
 .hy-table-container th:first-child::after {
   content: "";
@@ -164,14 +101,12 @@
   background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
 }
-
 @media (min-width: 60rem) {
   .hy-table-container td:first-child::after,
   .hy-table-container th:first-child::after {
     display: none;
   }
 }
-
 .hy-table-container td:first-child::before,
 .hy-table-container th:first-child::before {
   border-left: 1px solid black;
@@ -184,14 +119,12 @@
   top: 0;
   height: 100%;
 }
-
 @media (min-width: 60rem) {
   .hy-table-container td:first-child::before,
   .hy-table-container th:first-child::before {
     display: none;
   }
 }
-
 @media (min-width: 30rem) {
   .hy-table-container td:first-child,
   .hy-table-container th:first-child {
@@ -200,7 +133,6 @@
     width: 220px;
   }
 }
-
 @media (min-width: 48rem) {
   .hy-table-container td:first-child,
   .hy-table-container th:first-child {
@@ -209,7 +141,6 @@
     width: 300px;
   }
 }
-
 @media (min-width: 60rem) {
   .hy-table-container td:first-child,
   .hy-table-container th:first-child {
@@ -218,24 +149,20 @@
     width: 40%;
   }
 }
-
 .hy-table-container td:first-child:only-child,
 .hy-table-container th:first-child:only-child {
   border: 1px solid var(--grayscale-dark);
 }
-
 .hy-table-container td:first-child:only-child::after, .hy-table-container td:first-child:only-child::before,
 .hy-table-container th:first-child:only-child::after,
 .hy-table-container th:first-child:only-child::before {
   display: none;
 }
-
 .hy-table-container td {
   background-color: var(--grayscale-white);
   word-wrap: break-word;
   white-space: normal;
 }
-
 .hy-table-container caption {
   margin-bottom: 1rem;
 }

package/dist/collection/components/hy-table-container/hy-table-container.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HyTableContainer {
     render() {
         const classAttributes = ["hy-table-container"].join(" ");
-        return (h(Host, { key: 'e01efb3d654b5e45da81afd492dcabc58c46cc27', class: classAttributes }, h("slot", { key: 'ced0d7fcf0ef64113dda035d38d05c0bf18c96d8' }), h("hy-box", { key: 'd7303ace3ac465a32ac087658259b194cb523e55', mb: "1.75, 1.75, 2, 2.5" })));
+        return (h(Host, { key: '3c9d46dc194b7007cf2ac1ad2c1c238270f74b64', class: classAttributes }, h("slot", { key: '92c347e9a46d55fcb55b14fc54f2ba03314a6e38' }), h("hy-box", { key: '8ce706d44c03799e0d19de94a297557e8ef5937c', mb: "1.75, 1.75, 2, 2.5" })));
     }
     static get is() { return "hy-table-container"; }
     static get originalStyleUrls() {

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

@@ -1,71 +1,18 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-soft: #b1e7ff;
-  --brand-main-bright: #48c5f8;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --link-blue: #0479a4;
-  --link-disabled: #767676;
-  --grayscale-white: #fff;
-  --grayscale-slightly-gray: #fefefe;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-background-box: #f5f5f5;
-  --grayscale-tabs-border: #e6e6e6;
-  --grayscale-background-arrow: #dfdfdf;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-dark-text: #222222;
-  --grayscale-black: #000000;
-  --additional-red-light: #e5053a;
-  --additional-red-dark: #a31621;
-  --additional-purple-light: #420039;
-  --additional-yellow-light: #f9a21a;
-  --additional-yellow: #c47f1b;
-  --additional-skyblue: #48c5f8;
-  --additional-orange: #d14600;
-  --additional-green-light: #96ba3c;
-  --additional-green-dark: #006400;
-  --hover-gray: #eaeaea;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --gutter-mobile: 16px;
-  --gutter-narrow: 24px;
-  --gutter-medium: 24px;
-  --gutter-wide: 24px;
-  --gutter-extrawide: 32px;
-}
-
 /**
  * Mixin for fluid type.
  * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
  */
-
-:root {
-  --breakpoint-extrawide: 75.0625rem;
-  --breakpoint-max-width: 75.0625rem;
-  --breakpoint-medium: 48rem;
-  --breakpoint-narrow: 30rem;
-  --breakpoint-wide: 60rem;
-}
-
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
 :host {
   display: block;
 }
-
 .hy-tabs__container .hy-tablist-container {
   border-bottom: 1px solid var(--grayscale-tabs-border);
   position: relative;
 }
-
 .hy-tabs__container .hy-tab-scroll {
   background-color: rgba(255, 255, 255, 0.8);
   border: 0;
@@ -78,25 +25,20 @@
   transform: translateY(-50%);
   z-index: 4;
 }
-
 .hy-tabs__container .hy-tab-scroll.is-hidden {
   display: none;
   visibility: hidden;
 }
-
 .hy-tabs__container .hy-tab-scroll.is-disabled {
   background-color: var(--grayscale-medium);
 }
-
 .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;
   cursor: pointer;
 }
-
 .hy-tabs__container .hy-tab-scroll span {
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -112,33 +54,27 @@
   justify-content: center;
   width: 32px;
 }
-
 .hy-tabs__container .hy-tab-scroll span svg {
   fill: var(--grayscale-white);
   height: 16px;
   width: 16px;
 }
-
 .hy-tabs__container .hy-tab-scroll__left {
   left: 0;
   padding-right: 8px;
 }
-
 .hy-tabs__container .hy-tab-scroll__left svg {
   -webkit-transform: translateX(-1px);
   transform: translateX(-1px);
 }
-
 .hy-tabs__container .hy-tab-scroll__right {
   padding-left: 8px;
   right: 0;
 }
-
 .hy-tabs__container .hy-tab-scroll__right svg {
   -webkit-transform: translateX(1px);
   transform: translateX(1px);
 }
-
 .hy-tabs__container [role=tablist] {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -153,11 +89,9 @@
   scrollbar-width: none;
   white-space: nowrap;
 }
-
 .hy-tabs__container [role=tablist]::-webkit-scrollbar {
   display: none;
 }
-
 .hy-tabs__container [role=tablist] a {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -167,29 +101,24 @@
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
-
 .hy-tabs__container [role=tablist] a:not(:first-of-type) {
   margin-left: 6px;
 }
-
 @media (min-width: 30rem) {
   .hy-tabs__container [role=tablist] a {
     max-width: 35.37%;
   }
 }
-
 @media (min-width: 60rem) {
   .hy-tabs__container [role=tablist] a {
     max-width: 23.13%;
   }
 }
-
 @media (min-width: 75.0625rem) {
   .hy-tabs__container [role=tablist] a {
     max-width: 23.03%;
   }
 }
-
 .hy-tabs__container [role=tab] {
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -209,7 +138,6 @@
   margin-bottom: 6px;
   padding: 0;
 }
-
 .hy-tabs__container [role=tab] > span {
   font-size: 0.875rem;
   line-height: 14px;
@@ -236,7 +164,6 @@
   overflow-wrap: break-word;
   overflow-wrap: break-word;
 }
-
 @media (min-width: 30rem) {
   .hy-tabs__container [role=tab] > span {
     font-size: 1rem;
@@ -244,7 +171,6 @@
     padding: 16px 12px 10px;
   }
 }
-
 @media (min-width: 75.0625rem) {
   .hy-tabs__container [role=tab] > span {
     font-size: 1.125rem;
@@ -253,50 +179,42 @@
     padding: 16px 16px 14px;
   }
 }
-
 @supports (overflow-wrap: anywhere) {
   .hy-tabs__container [role=tab] > span {
     overflow-wrap: anywhere;
   }
 }
-
 @supports (overflow-wrap: anywhere) {
   .hy-tabs__container [role=tab] > span {
     overflow-wrap: anywhere;
   }
 }
-
 @media (min-width: 75.0625rem) {
   .hy-tabs__container [role=tab].large {
     margin: 0 12px 0 0;
   }
 }
-
 .hy-tabs__container [role=tab][aria-selected=true] {
   border-bottom-width: 0;
   border: 1px solid var(--grayscale-dark);
   margin-bottom: 0;
   z-index: 3;
 }
-
 .hy-tabs__container [role=tab][aria-selected=true] > span {
   background-color: var(--grayscale-white);
   color: var(--grayscale-black);
   padding-bottom: 13px;
 }
-
 @media (min-width: 30rem) {
   .hy-tabs__container [role=tab][aria-selected=true] > span {
     padding-bottom: 16px;
   }
 }
-
 @media (min-width: 75.0625rem) {
   .hy-tabs__container [role=tab][aria-selected=true] > span {
     padding-bottom: 20px;
   }
 }
-
 .hy-tabs__container [role=tab][aria-selected=true] > span:before {
   background-color: var(--grayscale-white);
   bottom: 0;
@@ -308,7 +226,6 @@
   -webkit-transform: translateY(50%);
   transform: translateY(50%);
 }
-
 .hy-tabs__container [role=tab][aria-selected=true] > span:after {
   background-color: var(--grayscale-black);
   bottom: 0;
@@ -318,38 +235,32 @@
   position: absolute;
   right: 8px;
 }
-
 .hy-tabs__container [role=tab]:hover {
   border-radius: 0;
   color: inherit;
   cursor: pointer;
   text-decoration: none;
 }
-
 .hy-tabs__container [role=tab]:hover span {
   background-color: var(--hover-gray);
   color: var(--brand-main-active);
 }
-
 .hy-tabs__container [role=tabpanel] {
   border: 1px solid var(--grayscale-dark);
   padding: 28px 12px;
   position: relative;
   z-index: 2;
 }
-
 @media (min-width: 30rem) {
   .hy-tabs__container [role=tabpanel] {
     padding: 38px 15px;
   }
 }
-
 @media (min-width: 60rem) {
   .hy-tabs__container [role=tabpanel] {
     padding: 40px 20px;
   }
 }
-
 .hy-tabs__container [role=tabpanel]:focus {
   outline: 1px solid var(--brand-main-active);
 }

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

@@ -288,16 +288,16 @@ export class HyTabs {
             }
         }
         return [
-            h("hy-box", { key: '683a5479d2a708bb3d0cdaf68a54aa9bd801bb8a', pt: "1.25, 1.25, 1.5, 2.5" }),
-            h("div", { key: '41d787351d1ed5c07911584ed1a6f8dfd371ee64', id: id, class: classComponentAttributes }, h("div", { key: '451e17551576064418127d5bf9f837a5a8754c52', class: "hy-tablist-container" }, h("button", { key: 'c7e7f80d87ac1d9a67745d52788444adc89daa4e', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", { key: 'aad02a75f2158552f9144f166779f78faf650242' }, h("hy-icon", { key: '47edc4178e962779da31830f6112e9e33e41b121', icon: "hy-icon-caret-left", size: 16 }))), h("div", { key: '13eef5d285c5676ee8f30306d6e86c369971c051', role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
+            h("hy-box", { key: 'db85d54f57653e27d7719674337b12363e69b457', pt: "1.25, 1.25, 1.5, 2.5" }),
+            h("div", { key: 'e47886373517ebc134d0b8285f4df4135e1c0874', id: id, class: classComponentAttributes }, h("div", { key: 'cde0cc1f6b6b9a24d2e0e113415368bbf8a5bb12', class: "hy-tablist-container" }, h("button", { key: 'f4fa955d15acadef8b041c35064cb3aee88079bf', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", { key: '153c335dc43792eba156420c9d91fb00c5ee0a49' }, h("hy-icon", { key: 'e0e97bdbb0782289d688e68418949b46f8f396ca', icon: "hy-icon-caret-left", size: 16 }))), h("div", { key: '5067393e3fd4caaee3647f82c4102ff8770d9079', role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
                 this.tabButtonTitles.map((item) => {
                     const title = Object.values(item)[0];
                     const id = title.toLowerCase().replace(/\W/g, "-");
                     const titleAsId = title.toLowerCase().replace(/\W/g, "-");
                     const tabItemHref = "#" + titleAsId;
                     return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
-                })), h("button", { key: '44a95a82583d97ffa5b39630b2a49cb50aa1cea0', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", { key: 'd1f51ef899ea7471e3bfd4d5ae7358375012bc56' }, h("hy-icon", { key: '4942edbc2baba197b2dc5b0752052ebd4ede474d', icon: "hy-icon-caret-right", size: 16 })))), h("slot", { key: '90eb5de9ef6acda255b97db747f92b2d08f7702c' })),
-            h("hy-box", { key: '6e6aeac055c32cd5ef1e582f849ee1426424463d', mb: "1.75, 1.75, 2, 2.5" }),
+                })), h("button", { key: '3fa18b11a58c588e64931f1951d99d5c8ce1b091', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", { key: 'ddf49bf4740e4553bf7610fa1d32e4659fa8de67' }, h("hy-icon", { key: '3f157bd96731cbf98033d7f5a3f7f87fb6e65146', icon: "hy-icon-caret-right", size: 16 })))), h("slot", { key: '89a40649d35cc8ea5b8109a332b27c9154cee312' })),
+            h("hy-box", { key: '5542bf9f46be177f48b35e16d4c97d509d2eafad', mb: "1.75, 1.75, 2, 2.5" }),
         ];
     }
     static get is() { return "hy-tabs"; }

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

@@ -1,62 +1,11 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-soft: #b1e7ff;
-  --brand-main-bright: #48c5f8;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --link-blue: #0479a4;
-  --link-disabled: #767676;
-  --grayscale-white: #fff;
-  --grayscale-slightly-gray: #fefefe;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-background-box: #f5f5f5;
-  --grayscale-tabs-border: #e6e6e6;
-  --grayscale-background-arrow: #dfdfdf;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-dark-text: #222222;
-  --grayscale-black: #000000;
-  --additional-red-light: #e5053a;
-  --additional-red-dark: #a31621;
-  --additional-purple-light: #420039;
-  --additional-yellow-light: #f9a21a;
-  --additional-yellow: #c47f1b;
-  --additional-skyblue: #48c5f8;
-  --additional-orange: #d14600;
-  --additional-green-light: #96ba3c;
-  --additional-green-dark: #006400;
-  --hover-gray: #eaeaea;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --gutter-mobile: 16px;
-  --gutter-narrow: 24px;
-  --gutter-medium: 24px;
-  --gutter-wide: 24px;
-  --gutter-extrawide: 32px;
-}
-
 /**
  * Mixin for fluid type.
  * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
  */
-
-:root {
-  --breakpoint-extrawide: 75.0625rem;
-  --breakpoint-max-width: 75.0625rem;
-  --breakpoint-medium: 48rem;
-  --breakpoint-narrow: 30rem;
-  --breakpoint-wide: 60rem;
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
-
 :host {
   display: block;
 }

package/dist/collection/components/hy-tabs-item/hy-tabs-item.js

@@ -5,7 +5,7 @@ export class HyTabsItem {
     }
     render() {
         const id = this.tabTitle.toLowerCase().replace(/\W/g, "-");
-        return (h("div", { key: 'e774e5ec79390259ad5f327f227c1850abe802ed', tabindex: "0", role: "tabpanel", id: `${id}-tab`, "aria-labelledby": id, hidden: true }, h("slot", { key: '44361b2a263e8ec76706c529a131a23570505fcd' })));
+        return (h("div", { key: '3e52d79139baa862b4786685150b20521c0d588f', tabindex: "0", role: "tabpanel", id: `${id}-tab`, "aria-labelledby": id, hidden: true }, h("slot", { key: '70a6d6654e888f177cf694f2658793ee4928e5d3' })));
     }
     static get is() { return "hy-tabs-item"; }
     static get originalStyleUrls() {