@dso-toolkit/core 56.1.0 → 57.0.0

package/dist/collection/components/accordion/components/accordion-section.css

@@ -43,7 +43,7 @@
 }
 :host .dso-section-handle > button,
 :host .dso-section-handle > a {
-  align-items: flex-start;
+  align-items: center;
   background-color: transparent;
   border: 0;
   cursor: pointer;
@@ -207,6 +207,67 @@
   border-bottom: 0;
 }
 
+:host(.dso-accordion-compact-black) .dso-section-handle {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid #ccc;
+}
+:host(.dso-accordion-compact-black) .dso-section-handle a,
+:host(.dso-accordion-compact-black) .dso-section-handle button {
+  color: #000;
+  padding-bottom: 11px;
+  padding-left: 0;
+  padding-top: 11px;
+}
+:host(.dso-accordion-compact-black) .dso-section-handle a:hover, :host(.dso-accordion-compact-black) .dso-section-handle a:active, :host(.dso-accordion-compact-black) .dso-section-handle a.active,
+:host(.dso-accordion-compact-black) .dso-section-handle button:hover,
+:host(.dso-accordion-compact-black) .dso-section-handle button:active,
+:host(.dso-accordion-compact-black) .dso-section-handle button.active {
+  color: #000;
+}
+:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content {
+  padding-left: 32px;
+  padding-top: 0;
+  padding-right: 0;
+}
+
+:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,
+:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button {
+  padding-left: 16px;
+}
+:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content {
+  padding-left: 16px;
+  padding-right: 0;
+}
+
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle {
+  background-color: transparent;
+}
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle a,
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle button {
+  color: #000;
+}
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle a:hover, :host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle a:active, :host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle a.active,
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle button:hover,
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle button:active,
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle button.active {
+  color: #000;
+}
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #666;
+  --dso-icon: var(--di-paperclip-grijs);
+}
+:host(.dso-accordion-compact-black[open]:not([open=false])) > .dso-section-body {
+  border-top: 0;
+}
+
+:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false])) > .dso-section-body {
+  padding-bottom: 0;
+}
+:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false])) > .dso-section-body dso-accordion-section:last-child {
+  border-bottom: 0;
+}
+
 :host(.dso-accordion-conclusion) .dso-section-handle {
   background-color: #f2f2f2;
   border: 1px solid #f2f2f2;
@@ -260,6 +321,10 @@
   color: #39870c;
   margin-inline-start: 8px;
 }
+:host(.dso-accordion-neutral) .dso-section-handle dso-icon,
+:host(.dso-accordion-neutral) .dso-section-handle svg.di {
+  vertical-align: top;
+}
 :host(.dso-accordion-neutral) .dso-section-body {
   background-color: transparent;
   border: 1px solid #275937;

package/dist/collection/components/annotation-button/annotation-button.css

@@ -18,331 +18,6 @@ button::-moz-focus-inner {
   padding: 0;
 }
 
-.btn {
-  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;
-}
-.btn:focus, .btn:focus-visible {
-  outline-offset: 2px;
-}
-.btn:active {
-  outline: 0;
-}
-.btn.extern::after, .btn.download::after {
-  content: "";
-  display: inline-block;
-  margin-left: 8px;
-}
-
-.btn-primary {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
-  background-color: #b62f41;
-}
-.btn-primary:hover {
-  background-color: #275937;
-  border-color: #275937;
-  color: #fff;
-}
-.btn-primary:active {
-  background-color: #173521;
-  border-color: #173521;
-  color: #fff;
-}
-.btn-primary[disabled], .btn-primary[disabled]:hover {
-  background-color: #afcf9d;
-  border-color: #afcf9d;
-  color: #fff;
-}
-.btn-primary.btn-sm {
-  line-height: 1rem;
-}
-.btn-primary.btn-sm dso-icon,
-.btn-primary.btn-sm svg.di, .btn-primary.btn-sm.extern::after, .btn-primary.btn-sm.download::after, .btn-primary.btn-sm.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
-}
-.btn-primary.btn-sm.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
-}
-.btn-primary.btn-sm.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
-}
-.btn-primary dso-icon,
-.btn-primary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
-}
-.btn-primary span + dso-icon,
-.btn-primary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
-}
-.btn-primary.dso-spinner-left[disabled], .btn-primary.dso-spinner-right[disabled] {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-}
-.btn-primary.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: %23fff; 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: top;
-  width: 24px;
-  margin-right: 8px;
-}
-.btn-primary.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: %23fff; 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: top;
-  width: 24px;
-  margin-left: 8px;
-}
-
-a.btn-primary {
-  text-decoration: none;
-  background-color: #b62f41;
-}
-a.btn-primary, a.btn-primary:visited {
-  color: #fff;
-}
-
-.btn-default {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
-  background-color: #b62f41;
-}
-.btn-default:hover {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-}
-.btn-default:active {
-  background-color: #275937;
-  border-color: #275937;
-  color: #fff;
-}
-.btn-default[disabled], .btn-default[disabled]:hover {
-  background-color: #fff;
-  border-color: #afcf9d;
-  color: #afcf9d;
-}
-.btn-default.btn-sm {
-  line-height: 1rem;
-}
-.btn-default.btn-sm dso-icon,
-.btn-default.btn-sm svg.di, .btn-default.btn-sm.extern::after, .btn-default.btn-sm.download::after, .btn-default.btn-sm.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
-}
-.btn-default.btn-sm.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
-}
-.btn-default.btn-sm.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
-}
-.btn-default dso-icon,
-.btn-default svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
-}
-.btn-default span + dso-icon,
-.btn-default span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
-}
-.btn-default.dso-spinner-left[disabled], .btn-default.dso-spinner-right[disabled] {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-}
-.btn-default.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: top;
-  width: 24px;
-  margin-right: 8px;
-}
-.btn-default.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top;
-  width: 24px;
-  margin-right: 8px;
-}
-.btn-default.dso-spinner-left:not([disabled]).btn-sm:hover::before {
-  height: 16px;
-  width: 16px;
-}
-.btn-default.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: top;
-  width: 24px;
-  margin-left: 8px;
-}
-.btn-default.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top;
-  width: 24px;
-  margin-left: 8px;
-}
-.btn-default.dso-spinner-right:not([disabled]).btn-sm:hover::after {
-  height: 16px;
-  width: 16px;
-}
-
-a.btn-default {
-  text-decoration: none;
-  background-color: #b62f41;
-}
-a.btn-default, a.btn-default:visited {
-  color: #39870c;
-}
-a.btn-default:hover, a.btn-default:visited:hover {
-  color: #fff;
-}
-
-.btn-link {
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
-  background-color: #b62f41;
-}
-.btn-link[disabled] {
-  color: #afcf9d;
-}
-.btn-link[disabled].dso-spinner-left, .btn-link[disabled].dso-spinner-right {
-  color: #39870c;
-}
-.btn-link:not([disabled]):hover {
-  color: #275937;
-  text-decoration: underline;
-  text-underline-position: under;
-}
-.btn-link:not([disabled]):active {
-  color: #173521;
-}
-.btn-link.btn-align {
-  line-height: calc(1.5em - 1px);
-  padding: 11px 0;
-  position: relative;
-}
-.btn-link.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;
-}
-.btn-link.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;
-}
-.btn-link dso-icon + span:not(.sr-only),
-.btn-link svg.di + span:not(.sr-only),
-.btn-link span:not(.sr-only) + dso-icon,
-.btn-link span:not(.sr-only) + svg.di {
-  margin-left: 8px;
-}
-.btn-link svg.di.di-chevron-down + span:not(.sr-only),
-.btn-link svg.di.di-chevron-up + span:not(.sr-only),
-.btn-link span:not(.sr-only) + svg.di.di-chevron-down,
-.btn-link span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
-}
-.btn-link dso-icon[icon=chevron-left] + span:not(.sr-only),
-.btn-link dso-icon[icon=chevron-right] + span:not(.sr-only),
-.btn-link svg.di.di-angle-down + span:not(.sr-only),
-.btn-link svg.di.di-angle-up + span:not(.sr-only),
-.btn-link span:not(.sr-only) + svg.di.di-angle-down,
-.btn-link span:not(.sr-only) + svg.di.di-angle-up,
-.btn-link span:not(.sr-only) + dso-icon[icon=chevron-left],
-.btn-link span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
-}
-.btn-link dso-icon,
-.btn-link svg.di,
-.btn-link span {
-  vertical-align: middle;
-}
-
-a.btn-link {
-  text-decoration: none;
-  background-color: #b62f41;
-}
-a.btn-link, a.btn-link:visited {
-  color: #39870c;
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-}
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-input[type=submit].btn-block,
-input[type=reset].btn-block,
-input[type=button].btn-block {
-  width: 100%;
-}
-
 a.dso-primary,
 button.dso-primary,
 label.dso-primary {
@@ -409,35 +84,35 @@ label.dso-primary[disabled]:hover {
   border-color: #afcf9d;
   color: #fff;
 }
-a.dso-primary.btn-sm,
-button.dso-primary.btn-sm,
-label.dso-primary.btn-sm {
+a.dso-primary.dso-small,
+button.dso-primary.dso-small,
+label.dso-primary.dso-small {
   line-height: 1rem;
 }
-a.dso-primary.btn-sm dso-icon,
-a.dso-primary.btn-sm svg.di, a.dso-primary.btn-sm.extern::after, a.dso-primary.btn-sm.download::after, a.dso-primary.btn-sm.dso-spinner::before,
-button.dso-primary.btn-sm dso-icon,
-button.dso-primary.btn-sm svg.di,
-button.dso-primary.btn-sm.extern::after,
-button.dso-primary.btn-sm.download::after,
-button.dso-primary.btn-sm.dso-spinner::before,
-label.dso-primary.btn-sm dso-icon,
-label.dso-primary.btn-sm svg.di,
-label.dso-primary.btn-sm.extern::after,
-label.dso-primary.btn-sm.download::after,
-label.dso-primary.btn-sm.dso-spinner::before {
+a.dso-primary.dso-small dso-icon,
+a.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,
+button.dso-primary.dso-small dso-icon,
+button.dso-primary.dso-small svg.di,
+button.dso-primary.dso-small.extern::after,
+button.dso-primary.dso-small.download::after,
+button.dso-primary.dso-small.dso-spinner::before,
+label.dso-primary.dso-small dso-icon,
+label.dso-primary.dso-small svg.di,
+label.dso-primary.dso-small.extern::after,
+label.dso-primary.dso-small.download::after,
+label.dso-primary.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-a.dso-primary.btn-sm.dso-spinner-left::before,
-button.dso-primary.btn-sm.dso-spinner-left::before,
-label.dso-primary.btn-sm.dso-spinner-left::before {
+a.dso-primary.dso-small.dso-spinner-left::before,
+button.dso-primary.dso-small.dso-spinner-left::before,
+label.dso-primary.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-a.dso-primary.btn-sm.dso-spinner-right::after,
-button.dso-primary.btn-sm.dso-spinner-right::after,
-label.dso-primary.btn-sm.dso-spinner-right::after {
+a.dso-primary.dso-small.dso-spinner-right::after,
+button.dso-primary.dso-small.dso-spinner-right::after,
+label.dso-primary.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -578,35 +253,35 @@ label.dso-secondary[disabled]:hover {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-a.dso-secondary.btn-sm,
-button.dso-secondary.btn-sm,
-label.dso-secondary.btn-sm {
+a.dso-secondary.dso-small,
+button.dso-secondary.dso-small,
+label.dso-secondary.dso-small {
   line-height: 1rem;
 }
-a.dso-secondary.btn-sm dso-icon,
-a.dso-secondary.btn-sm svg.di, a.dso-secondary.btn-sm.extern::after, a.dso-secondary.btn-sm.download::after, a.dso-secondary.btn-sm.dso-spinner::before,
-button.dso-secondary.btn-sm dso-icon,
-button.dso-secondary.btn-sm svg.di,
-button.dso-secondary.btn-sm.extern::after,
-button.dso-secondary.btn-sm.download::after,
-button.dso-secondary.btn-sm.dso-spinner::before,
-label.dso-secondary.btn-sm dso-icon,
-label.dso-secondary.btn-sm svg.di,
-label.dso-secondary.btn-sm.extern::after,
-label.dso-secondary.btn-sm.download::after,
-label.dso-secondary.btn-sm.dso-spinner::before {
+a.dso-secondary.dso-small dso-icon,
+a.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,
+button.dso-secondary.dso-small dso-icon,
+button.dso-secondary.dso-small svg.di,
+button.dso-secondary.dso-small.extern::after,
+button.dso-secondary.dso-small.download::after,
+button.dso-secondary.dso-small.dso-spinner::before,
+label.dso-secondary.dso-small dso-icon,
+label.dso-secondary.dso-small svg.di,
+label.dso-secondary.dso-small.extern::after,
+label.dso-secondary.dso-small.download::after,
+label.dso-secondary.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-a.dso-secondary.btn-sm.dso-spinner-left::before,
-button.dso-secondary.btn-sm.dso-spinner-left::before,
-label.dso-secondary.btn-sm.dso-spinner-left::before {
+a.dso-secondary.dso-small.dso-spinner-left::before,
+button.dso-secondary.dso-small.dso-spinner-left::before,
+label.dso-secondary.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-a.dso-secondary.btn-sm.dso-spinner-right::after,
-button.dso-secondary.btn-sm.dso-spinner-right::after,
-label.dso-secondary.btn-sm.dso-spinner-right::after {
+a.dso-secondary.dso-small.dso-spinner-right::after,
+button.dso-secondary.dso-small.dso-spinner-right::after,
+label.dso-secondary.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -661,9 +336,9 @@ label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   width: 24px;
   margin-right: 8px;
 }
-a.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before,
-button.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -691,9 +366,9 @@ label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   width: 24px;
   margin-left: 8px;
 }
-a.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after,
-button.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -800,13 +475,21 @@ button.dso-tertiary:not([disabled]):active,
 label.dso-tertiary:not([disabled]):active {
   color: #173521;
 }
-a.dso-tertiary.btn-align,
-button.dso-tertiary.btn-align,
-label.dso-tertiary.btn-align {
+a.dso-tertiary.dso-align,
+button.dso-tertiary.dso-align,
+label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+a.dso-tertiary.dso-truncate,
+button.dso-tertiary.dso-truncate,
+label.dso-tertiary.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 a.dso-tertiary.dso-spinner-left::before,
 button.dso-tertiary.dso-spinner-left::before,
 label.dso-tertiary.dso-spinner-left::before {
@@ -971,19 +654,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
   color: #39870c;
 }
 
-.btn:not(.dso-list-button) + .btn:not(.dso-list-button),
-.btn:not(.dso-list-button) + .dso-primary,
-.btn:not(.dso-list-button) + .dso-secondary,
-.btn:not(.dso-list-button) + .dso-tertiary,
-.dso-primary + .btn:not(.dso-list-button),
 .dso-primary + .dso-primary,
 .dso-primary + .dso-secondary,
 .dso-primary + .dso-tertiary,
-.dso-secondary + .btn:not(.dso-list-button),
 .dso-secondary + .dso-primary,
 .dso-secondary + .dso-secondary,
 .dso-secondary + .dso-tertiary,
-.dso-tertiary + .btn:not(.dso-list-button),
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {

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

@@ -144,21 +144,21 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   right: 0;
   top: 100%;
 }
-.dropdown dso-dropdown-menu button {
+.dropdown dso-dropdown-menu > button {
   color: #39870c;
   font-size: 16px;
   font-weight: 600;
   line-height: normal;
   position: relative;
 }
-.dropdown dso-dropdown-menu button::after {
+.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 {
+.dropdown dso-dropdown-menu > button:hover, .dropdown dso-dropdown-menu > button:active {
   cursor: pointer;
   text-decoration: underline;
 }