@dso-toolkit/core 45.0.1 → 45.2.0

package/dist/collection/components/date-picker/date-picker.css

@@ -25,7 +25,7 @@
 .dso-date__input {
   display: block;
   width: 100%;
-  height: calc(16px + 1.5rem);
+  height: 40px;
   padding: 6px 14px;
   font-size: 1rem;
   line-height: 1.5;
@@ -70,7 +70,7 @@
   border-width: 1px;
 }
 .dso-date__input[type=text] {
-  line-height: calc(16px + 1.5rem);
+  line-height: 40px;
 }
 .dso-date__input[size] {
   width: auto;

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

@@ -3,13 +3,6 @@
 }
 
 :host {
-  --di-check-wit: url("data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e");
-  --di-chevron-down: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
-  --di-chevron-down-scampi: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
-  --di-chevron-down-wit: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
-  --di-chevron-up: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
-  --di-chevron-up-scampi: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
-  --di-chevron-up-wit: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
   display: inline-block;
   position: relative;
 }

package/dist/collection/components/header/header.css

@@ -1,6 +1,4 @@
 :host {
-  --di-chevron-down-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
-  --di-chevron-up-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
   display: block;
 }
 
@@ -8,7 +6,6 @@
   border-bottom: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
-  padding: 0 16px;
   position: relative;
 }
 @media screen and (min-width: 768px) {
@@ -21,6 +18,9 @@
     flex-wrap: nowrap;
   }
 }
+.dso-header .dso-nav {
+  border: 0;
+}
 
 .logo-container {
   display: flex;
@@ -30,12 +30,9 @@
 }
 @media screen and (max-width: 767px) {
   .logo-container {
-    max-width: 200px;
+    max-height: 40px;
   }
 }
-.logo-container + .dropdown dso-dropdown-menu {
-  position: static;
-}
 
 @media screen and (min-width: 768px) {
   .sub-logo {
@@ -48,175 +45,13 @@
   }
 }
 
-.login,
-.logout {
-  margin-right: 16px;
-}
 .login .dso-tertiary,
 .logout .dso-tertiary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-bottom: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: left;
-  user-select: none;
-  vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
   cursor: pointer;
   font-family: Asap, sans-serif;
   font-weight: 600;
   vertical-align: text-bottom;
 }
-.login .dso-tertiary:focus, .login .dso-tertiary:focus-visible,
-.logout .dso-tertiary:focus,
-.logout .dso-tertiary:focus-visible {
-  outline-offset: 2px;
-}
-.login .dso-tertiary:active,
-.logout .dso-tertiary:active {
-  outline: 0;
-}
-.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,
-.logout .dso-tertiary.extern::after,
-.logout .dso-tertiary.download::after {
-  content: "";
-  display: inline-block;
-  height: 1.5em;
-  margin-left: 8px;
-  vertical-align: top;
-  width: 1.5em;
-}
-.login .dso-tertiary[disabled],
-.logout .dso-tertiary[disabled] {
-  color: #afcf9d;
-}
-.login .dso-tertiary[disabled].dso-spinner-left, .login .dso-tertiary[disabled].dso-spinner-right,
-.logout .dso-tertiary[disabled].dso-spinner-left,
-.logout .dso-tertiary[disabled].dso-spinner-right {
-  color: #39870c;
-}
-.login .dso-tertiary:not([disabled]):hover,
-.logout .dso-tertiary:not([disabled]):hover {
-  color: #676cb0;
-  text-decoration: underline;
-  text-underline-position: under;
-}
-.login .dso-tertiary:not([disabled]):active,
-.logout .dso-tertiary:not([disabled]):active {
-  color: #676cb0;
-}
-.login .dso-tertiary.btn-align,
-.logout .dso-tertiary.btn-align {
-  line-height: calc(1.5em - 1px);
-  padding: 11px 0;
-  position: relative;
-}
-.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,
-.logout .dso-tertiary.extern::after,
-.logout .dso-tertiary.download::after {
-  position: relative;
-  top: -2px;
-}
-.login .dso-tertiary.download::after,
-.logout .dso-tertiary.download::after {
-  background: var(--dso-icon, var(--di-download)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-.login .dso-tertiary.download[disabled]::after,
-.logout .dso-tertiary.download[disabled]::after {
-  --dso-icon: var(--di-download-grasgroen-40);
-}
-.login .dso-tertiary.download:not([disabled]):hover::after, .login .dso-tertiary.download:not([disabled]):active::after,
-.logout .dso-tertiary.download:not([disabled]):hover::after,
-.logout .dso-tertiary.download:not([disabled]):active::after {
-  --dso-icon: var(--di-download-scampi);
-}
-.login .dso-tertiary.extern::after,
-.logout .dso-tertiary.extern::after {
-  background: var(--dso-icon, var(--di-external-link)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-.login .dso-tertiary.extern[disabled]::after,
-.logout .dso-tertiary.extern[disabled]::after {
-  --dso-icon: var(--di-external-link-grasgroen-40);
-}
-.login .dso-tertiary.extern:not([disabled]):hover::after, .login .dso-tertiary.extern:not([disabled]):active::after,
-.logout .dso-tertiary.extern:not([disabled]):hover::after,
-.logout .dso-tertiary.extern:not([disabled]):active::after {
-  --dso-icon: var(--di-external-link-scampi);
-}
-.login .dso-tertiary.dso-spinner-left::before,
-.logout .dso-tertiary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  height: 24px;
-  vertical-align: middle;
-  width: 24px;
-  margin-right: 8px;
-}
-.login .dso-tertiary.dso-spinner-right::after,
-.logout .dso-tertiary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  height: 24px;
-  vertical-align: middle;
-  width: 24px;
-  margin-left: 8px;
-}
-.login .dso-tertiary dso-icon + span:not(.sr-only),
-.login .dso-tertiary svg.di + span:not(.sr-only),
-.login .dso-tertiary span:not(.sr-only) + dso-icon,
-.login .dso-tertiary span:not(.sr-only) + svg.di,
-.logout .dso-tertiary dso-icon + span:not(.sr-only),
-.logout .dso-tertiary svg.di + span:not(.sr-only),
-.logout .dso-tertiary span:not(.sr-only) + dso-icon,
-.logout .dso-tertiary span:not(.sr-only) + svg.di {
-  margin-left: 8px;
-}
-.login .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-.login .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-.login .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-.login .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-.login .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-.login .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
-.login .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-.login .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-.logout .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-.logout .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-.logout .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-.logout .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-.logout .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-.logout .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
-.logout .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-.logout .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
-}
-.login .dso-tertiary dso-icon,
-.login .dso-tertiary svg.di,
-.login .dso-tertiary span,
-.logout .dso-tertiary dso-icon,
-.logout .dso-tertiary svg.di,
-.logout .dso-tertiary span {
-  vertical-align: middle;
-}
 
 .profile a,
 .logout a,
@@ -254,186 +89,10 @@
 .dso-navbar {
   flex-basis: 100%;
 }
-
-dso-dropdown-menu > .dso-primary::after,
-dso-dropdown-menu > .dso-secondary::after,
-dso-dropdown-menu > .dso-tertiary::after,
-dso-dropdown-menu > .btn::after {
-  content: "";
-  display: inline-block;
-}
-dso-dropdown-menu > .dso-primary::after,
-dso-dropdown-menu > .dso-secondary::after,
-dso-dropdown-menu > .btn::after {
-  margin-left: 8px;
-}
-dso-dropdown-menu > .dso-primary::after,
-dso-dropdown-menu > .btn-primary::after {
-  background: var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-dso-dropdown-menu > .dso-secondary::after,
-dso-dropdown-menu > .btn-default::after {
-  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-dso-dropdown-menu > .dso-secondary:hover::after,
-dso-dropdown-menu > .btn-default:hover::after {
-  --dso-icon: var(--di-chevron-down-wit);
-}
-dso-dropdown-menu > .dso-tertiary::after,
-dso-dropdown-menu > .btn-link::after {
-  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-  margin-left: 4px;
-  position: relative;
-  top: -2px;
-}
-dso-dropdown-menu > .dso-tertiary:hover::after,
-dso-dropdown-menu > .btn-link:hover::after {
-  --dso-icon: var(--di-chevron-down-scampi);
-}
-dso-dropdown-menu .dso-group-label {
-  color: #999;
-  font-size: 0.875em;
-  font-weight: 400;
-  margin: 0;
-  padding: 4px 20px 2px;
-  text-transform: uppercase;
-}
-dso-dropdown-menu ul {
-  margin: 0;
-  padding: 0;
-}
-dso-dropdown-menu ul:not(:last-child) {
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 11px;
-  padding-bottom: 11px;
-}
-dso-dropdown-menu .dso-dropdown-options {
-  background-clip: padding-box;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
-  font-size: 1rem;
-  margin: 2px 0 0;
-  min-width: 160px;
-  padding: 5px 0;
-  position: absolute;
-  text-align: left;
-  top: 100%;
-  z-index: 220;
-}
-dso-dropdown-menu .dso-dropdown-options li {
-  list-style: none;
-}
-dso-dropdown-menu .dso-dropdown-options li a:visited {
-  color: #191919;
-}
-dso-dropdown-menu .dso-dropdown-options li a,
-dso-dropdown-menu .dso-dropdown-options li button {
-  text-decoration: none;
-  clear: both;
-  color: #191919;
-  display: block;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 3px 20px;
-  text-decoration: none;
-  white-space: nowrap;
-}
-dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus, dso-dropdown-menu .dso-dropdown-options li a:active,
-dso-dropdown-menu .dso-dropdown-options li button:hover,
-dso-dropdown-menu .dso-dropdown-options li button:focus,
-dso-dropdown-menu .dso-dropdown-options li button:active {
-  text-decoration: underline;
-}
-dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus,
-dso-dropdown-menu .dso-dropdown-options li button:hover,
-dso-dropdown-menu .dso-dropdown-options li button:focus {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  text-decoration: none;
-}
-dso-dropdown-menu .dso-dropdown-options li button {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  text-align: inherit;
-  width: 100%;
-}
-dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
-  right: 0;
-}
-dso-dropdown-menu[open] > .dso-primary::after,
-dso-dropdown-menu[open] > .btn-primary::after {
-  --dso-icon: var(--di-chevron-up-wit);
-}
-dso-dropdown-menu[open] > .dso-secondary::after,
-dso-dropdown-menu[open] > .btn-default::after {
-  --dso-icon: var(--di-chevron-up);
-}
-dso-dropdown-menu[open] > .dso-secondary:hover::after,
-dso-dropdown-menu[open] > .btn-default:hover::after {
-  --dso-icon: var(--di-chevron-up-wit);
-}
-dso-dropdown-menu[open] > .dso-tertiary::after,
-dso-dropdown-menu[open] > .btn-link::after {
-  --dso-icon: var(--di-chevron-up);
-}
-dso-dropdown-menu[open] > .dso-tertiary:hover::after,
-dso-dropdown-menu[open] > .btn-link:hover::after {
-  --dso-icon: var(--di-chevron-up-scampi);
-}
-dso-dropdown-menu[open] button::after {
-  background: var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 1.2em;
-  vertical-align: top;
-  width: 1.2em;
-}
-dso-dropdown-menu[checkable] .dso-group-label {
-  padding-left: 40px;
-}
-dso-dropdown-menu[checkable] li a,
-dso-dropdown-menu[checkable] li button {
-  padding-left: 40px;
-}
-dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),
-dso-dropdown-menu[checkable] li.dso-checked button:not(:focus) {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-}
-dso-dropdown-menu[checkable] li.dso-checked a::before,
-dso-dropdown-menu[checkable] li.dso-checked button::before {
-  background: var(--dso-icon, var(--di-check-wit)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-  content: "";
-  display: block;
-  float: left;
-  margin-left: -32px;
-  margin-right: 8px;
+.dso-navbar .dso-dropdown-options {
+  border-top: 1px solid #ccc;
 }
+
 dso-dropdown-menu button {
   align-items: flex-end;
   background-color: transparent;
@@ -442,21 +101,6 @@ dso-dropdown-menu button {
   font-family: Asap, sans-serif;
   padding-right: 32px;
 }
-dso-dropdown-menu button::after {
-  background: var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 1.2em;
-  vertical-align: top;
-  width: 1.2em;
-  content: "";
-  display: inline-block;
-  margin-left: 8px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
 @media screen and (max-width: 767px) {
   dso-dropdown-menu {
     top: 12px;
@@ -466,70 +110,70 @@ dso-dropdown-menu .dso-dropdown-options {
   border: 0;
   border-radius: 0;
 }
-dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
-  width: 320px;
+@media screen and (min-width: 768px) {
+  dso-dropdown-menu .dso-dropdown-options {
+    width: 375px;
+  }
 }
-@media screen and (max-width: 991px) {
-  dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
+@media screen and (max-width: 767px) {
+  dso-dropdown-menu .dso-dropdown-options {
     width: 100%;
   }
 }
-dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
+dso-dropdown-menu .dso-dropdown-options ul li a {
   color: #275937;
   font-size: 1.25rem;
   padding: 16px;
+  white-space: pre-wrap;
+}
+dso-dropdown-menu .dso-dropdown-options ul li a:focus {
+  color: #fff;
 }
-dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover {
+dso-dropdown-menu .dso-dropdown-options ul li a:hover {
   background-color: #fff;
   color: #275937;
   text-decoration: underline;
 }
-dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {
+dso-dropdown-menu .dso-dropdown-options ul li.dso-active a {
   font-weight: 600;
 }
-dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
+dso-dropdown-menu .dso-dropdown-options ul li + li {
   border-top: 1px solid #ccc;
 }
 
 .dropdown {
   margin-left: auto;
 }
+.dropdown dso-dropdown-menu {
+  position: static;
+}
 @media screen and (max-width: 767px) {
   .dropdown dso-dropdown-menu {
     margin-top: 28px;
   }
 }
 .dropdown dso-dropdown-menu .dso-dropdown-options {
-  left: 0;
   right: 0;
   top: 100%;
 }
-.dropdown dso-dropdown-menu[open] button::after {
-  background: var(--dso-icon, var(--di-chevron-up)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 1.5em;
-  vertical-align: top;
-  width: 1.5em;
-}
 .dropdown dso-dropdown-menu button {
   color: #39870c;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 600;
+  line-height: normal;
   position: relative;
 }
+.dropdown dso-dropdown-menu button::after {
+  margin-left: 8px;
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {
   cursor: pointer;
   text-decoration: underline;
 }
-.dropdown dso-dropdown-menu button::after {
-  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 1.5em;
-  vertical-align: top;
-  width: 1.5em;
-}
 
 .dso-nav {
   align-items: end;
@@ -568,6 +212,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
+  left: -1rem;
   top: calc(100% + 3px);
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button {
@@ -584,6 +229,9 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button::after {
+  margin-left: 8px;
+  position: absolute;
+  right: 0px;
   top: auto;
   transform: none;
 }
@@ -592,7 +240,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 .dso-nav.dso-nav-sub > li > a {
   text-decoration: none;
-  font-size: 1rem;
+  font-size: 16px;
   margin-top: 4px;
   padding: 4px 8px 3px;
 }

package/dist/collection/components/header/header.js

@@ -100,26 +100,25 @@ export class Header {
             h("slot", { name: "sub-logo" }))),
         this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" },
           h("dso-dropdown-menu", { "dropdown-align": "right" },
-            h("button", { type: "button", class: "tertiary", slot: "toggle" },
+            h("button", { type: "button", slot: "toggle" },
               h("span", null, "Menu")),
             h("div", { class: "dso-dropdown-options" },
-              h("dso-dropdown-options", null,
-                h("ul", null,
-                  this.mainMenu.map(this.MenuItem),
-                  this.userHomeUrl && (h("li", null,
-                    h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))),
-                  this.userProfileUrl &&
-                    this.userProfileName &&
-                    this.authStatus === 'loggedIn' && (h("li", null,
-                    h("a", { href: this.userProfileUrl, onClick: e => this.clickHandler(e, 'profile', { url: this.userProfileUrl }) },
-                      this.userProfileName,
-                      h("span", { class: "profile-label" }, " - Mijn profiel")))),
-                  this.authStatus === 'loggedOut' && (h("li", null, this.loginUrl
-                    ? h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
-                    : h("button", { type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))),
-                  this.authStatus === 'loggedIn' && (h("li", null, this.logoutUrl
-                    ? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
-                    : h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen"))))))))),
+              h("ul", null,
+                this.mainMenu.map(this.MenuItem),
+                this.userHomeUrl && (h("li", null,
+                  h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))),
+                this.userProfileUrl &&
+                  this.userProfileName &&
+                  this.authStatus === 'loggedIn' && (h("li", null,
+                  h("a", { href: this.userProfileUrl, onClick: e => this.clickHandler(e, 'profile', { url: this.userProfileUrl }) },
+                    this.userProfileName,
+                    h("span", { class: "profile-label" }, " - Mijn profiel")))),
+                this.authStatus === 'loggedOut' && (h("li", null, this.loginUrl
+                  ? h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
+                  : h("button", { type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))),
+                this.authStatus === 'loggedIn' && (h("li", null, this.logoutUrl
+                  ? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
+                  : h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen")))))))),
         !this.showDropDown && (h(Fragment, null,
           h("div", { class: "dso-header-session" },
             this.userProfileUrl &&
@@ -140,20 +139,19 @@ export class Header {
                 .map(this.MenuItem),
               this.overflowMenuItems > 0 && (h("li", null,
                 h("dso-dropdown-menu", { "dropdown-align": "left" },
-                  h("button", { type: "button", class: "tertiary", slot: "toggle" },
+                  h("button", { type: "button", slot: "toggle" },
                     h("span", null, "Meer")),
                   h("div", { class: "dso-dropdown-options" },
-                    h("dso-dropdown-options", null,
-                      h("ul", null, this.mainMenu && this.mainMenu
-                        .filter((_, index) => index >= this.mainMenu.length - this.overflowMenuItems)
-                        .map(this.MenuItem))))))),
+                    h("ul", null, this.mainMenu && this.mainMenu
+                      .filter((_, index) => index >= this.mainMenu.length - this.overflowMenuItems)
+                      .map(this.MenuItem)))))),
               this.userHomeUrl && (h("li", { class: "menu-user-home" },
                 h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) },
                   h("dso-icon", { icon: "user-line" }),
                   "Mijn Omgevingsloket")))))))))));
   }
   static get is() { return "dso-header"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["header.scss"]
   }; }

package/dist/collection/components/header/header.template.js

@@ -12,7 +12,7 @@ export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, authS
     user-home-url=${ifDefined(userHomeUrl)}
     @dsoHeaderClick=${dsoHeaderClick}
   >
-    <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
+    <div slot="logo"><img alt="Omgevingsloket" src="${logo}" /></div>
     ${subLogo ? html `<div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div>` : undefined}
   </dso-header>`;
 }