@dso-toolkit/core 87.0.0 → 88.1.0

package/dist/components/ozon-content.js

@@ -1141,6 +1141,7 @@ label.dso-primary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -1342,6 +1343,7 @@ label.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -1599,6 +1601,7 @@ label.dso-tertiary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
 button.dso-tertiary:focus,
@@ -1623,18 +1626,163 @@ label.dso-tertiary.download::after {
 }
 a.dso-tertiary,
 button.dso-tertiary,
+label.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+  background-clip: padding-box;
+}
+a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
+button.dso-tertiary:focus,
+button.dso-tertiary:focus-visible,
+label.dso-tertiary:focus,
+label.dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+label.dso-tertiary:active {
+  outline: 0;
+}
+a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
+button.dso-tertiary.extern::after,
+button.dso-tertiary.download::after,
+label.dso-tertiary.extern::after,
+label.dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+a.dso-tertiary,
+button.dso-tertiary,
+label.dso-tertiary {
+  background-color: var(--_dso-button-tertiary-background-color, );
+  border-color: var(--_dso-button-tertiary-border-color, );
+  color: var(--_dso-button-tertiary-color, #39870c);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+a.dso-tertiary:hover,
+button.dso-tertiary:hover,
+label.dso-tertiary:hover {
+  background-color: var(--_dso-button-tertiary-hover-background-color, );
+  border-color: var(--_dso-button-tertiary-hover-border-color, );
+  color: var(--_dso-button-tertiary-hover-color, #275937);
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+label.dso-tertiary:active {
+  background-color: var(--_dso-button-tertiary-active-background-color, );
+  border-color: var(--_dso-button-tertiary-active-border-color, );
+  color: var(--_dso-button-tertiary-active-color, #173521);
+}
+a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
+button.dso-tertiary[disabled],
+button.dso-tertiary[disabled]:hover,
+label.dso-tertiary[disabled],
+label.dso-tertiary[disabled]:hover {
+  background-color: var(--_dso-button-tertiary-disabled-background-color, );
+  border-color: var(--_dso-button-tertiary-disabled-border-color, );
+  color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+}
+a.dso-tertiary.dso-small,
+button.dso-tertiary.dso-small,
+label.dso-tertiary.dso-small {
+  line-height: 1rem;
+}
+a.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before,
+button.dso-tertiary.dso-small dso-icon,
+button.dso-tertiary.dso-small.extern::after,
+button.dso-tertiary.dso-small.download::after,
+button.dso-tertiary.dso-small.dso-spinner::before,
+label.dso-tertiary.dso-small dso-icon,
+label.dso-tertiary.dso-small.extern::after,
+label.dso-tertiary.dso-small.download::after,
+label.dso-tertiary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-tertiary.dso-small.dso-spinner-left::before,
+button.dso-tertiary.dso-small.dso-spinner-left::before,
+label.dso-tertiary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-small.dso-spinner-right::after,
+button.dso-tertiary.dso-small.dso-spinner-right::after,
+label.dso-tertiary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small,
+button.dso-tertiary.dso-extra-small,
+label.dso-tertiary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before,
+button.dso-tertiary.dso-extra-small dso-icon,
+button.dso-tertiary.dso-extra-small.extern::after,
+button.dso-tertiary.dso-extra-small.download::after,
+button.dso-tertiary.dso-extra-small.dso-spinner::before,
+label.dso-tertiary.dso-extra-small dso-icon,
+label.dso-tertiary.dso-extra-small.extern::after,
+label.dso-tertiary.dso-extra-small.download::after,
+label.dso-tertiary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-tertiary.dso-extra-small.dso-spinner-left::before,
+button.dso-tertiary.dso-extra-small.dso-spinner-left::before,
+label.dso-tertiary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small.dso-spinner-right::after,
+button.dso-tertiary.dso-extra-small.dso-spinner-right::after,
+label.dso-tertiary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small,
+button.dso-tertiary.dso-extra-small,
+label.dso-tertiary.dso-extra-small {
+  padding-block: 9px;
+}
+a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
+button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
+label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+a.dso-tertiary span:not(.sr-only) + dso-icon,
+button.dso-tertiary span:not(.sr-only) + dso-icon,
+label.dso-tertiary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+a.dso-tertiary dso-icon + span:not(.sr-only),
+button.dso-tertiary dso-icon + span:not(.sr-only),
+label.dso-tertiary dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+a.dso-tertiary,
+button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
-  color: #39870c;
   line-height: 1;
   padding: 0;
   background-color: transparent;
 }
-a.dso-tertiary[disabled],
-button.dso-tertiary[disabled],
-label.dso-tertiary[disabled] {
-  color: #afcf9d;
-}
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
 button.dso-tertiary[disabled].dso-spinner-left,
 button.dso-tertiary[disabled].dso-spinner-right,
@@ -1645,15 +1793,9 @@ label.dso-tertiary[disabled].dso-spinner-right {
 a.dso-tertiary:not([disabled]):hover,
 button.dso-tertiary:not([disabled]):hover,
 label.dso-tertiary:not([disabled]):hover {
-  color: #275937;
   text-decoration: underline;
   text-underline-position: under;
 }
-a.dso-tertiary:not([disabled]):active,
-button.dso-tertiary:not([disabled]):active,
-label.dso-tertiary:not([disabled]):active {
-  color: #173521;
-}
 a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
@@ -1786,6 +1928,7 @@ label.dso-map {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-map:focus, a.dso-map:focus-visible,
 button.dso-map:focus,
@@ -2551,6 +2694,25 @@ button.toggle-note {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
+}
+button.toggle-note:focus, button.toggle-note:focus-visible {
+  outline-offset: 2px;
+}
+button.toggle-note:active {
+  outline: 0;
+}
+button.toggle-note {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+  background-clip: padding-box;
 }
 button.toggle-note:focus, button.toggle-note:focus-visible {
   outline-offset: 2px;
@@ -2558,27 +2720,89 @@ button.toggle-note:focus, button.toggle-note:focus-visible {
 button.toggle-note:active {
   outline: 0;
 }
+button.toggle-note {
+  background-color: var(--_dso-button-tertiary-background-color, );
+  border-color: var(--_dso-button-tertiary-border-color, );
+  color: var(--_dso-button-tertiary-color, #39870c);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+button.toggle-note:hover {
+  background-color: var(--_dso-button-tertiary-hover-background-color, );
+  border-color: var(--_dso-button-tertiary-hover-border-color, );
+  color: var(--_dso-button-tertiary-hover-color, #275937);
+}
+button.toggle-note:active {
+  background-color: var(--_dso-button-tertiary-active-background-color, );
+  border-color: var(--_dso-button-tertiary-active-border-color, );
+  color: var(--_dso-button-tertiary-active-color, #173521);
+}
+button.toggle-note[disabled], button.toggle-note[disabled]:hover {
+  background-color: var(--_dso-button-tertiary-disabled-background-color, );
+  border-color: var(--_dso-button-tertiary-disabled-border-color, );
+  color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+}
+button.toggle-note.dso-small {
+  line-height: 1rem;
+}
+button.toggle-note.dso-small dso-icon, button.toggle-note.dso-small.extern::after, button.toggle-note.dso-small.download::after, button.toggle-note.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+button.toggle-note.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.toggle-note.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.toggle-note.dso-extra-small {
+  line-height: 1rem;
+}
+button.toggle-note.dso-extra-small dso-icon, button.toggle-note.dso-extra-small.extern::after, button.toggle-note.dso-extra-small.download::after, button.toggle-note.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+button.toggle-note.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.toggle-note.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.toggle-note.dso-extra-small {
+  padding-block: 9px;
+}
+button.toggle-note dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+button.toggle-note span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+button.toggle-note dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
 button.toggle-note {
   border: 0;
-  color: #39870c;
   line-height: 1;
   padding: 0;
   background-color: transparent;
 }
-button.toggle-note[disabled] {
-  color: #afcf9d;
-}
 button.toggle-note[disabled].dso-spinner-left, button.toggle-note[disabled].dso-spinner-right {
   color: #39870c;
 }
 button.toggle-note:not([disabled]):hover {
-  color: #275937;
   text-decoration: underline;
   text-underline-position: under;
 }
-button.toggle-note:not([disabled]):active {
-  color: #173521;
-}
 button.toggle-note.dso-align {
   line-height: calc(1.5em - 1px);
   padding-block: 11px;
@@ -2815,6 +3039,10 @@ table.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -2870,6 +3098,10 @@ table.editaction-remove {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -2915,6 +3147,10 @@ ins.new-text {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -2949,6 +3185,10 @@ ins.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -2984,6 +3224,10 @@ del.removed-text {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -3024,6 +3268,10 @@ del.editaction-remove {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -3124,6 +3372,10 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -3162,6 +3414,10 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -3198,6 +3454,10 @@ td.editaction-remove {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -3235,6 +3495,10 @@ td.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -3267,6 +3531,10 @@ td.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -3298,6 +3566,10 @@ td.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -3351,6 +3623,10 @@ td.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -3382,6 +3658,10 @@ td.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -3434,7 +3714,7 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'aa3def72854fedc1b70c0a0e48c595391e5a34f1' }, transformed);
+        return h(Fragment, { key: '95c51d55aeb019f998f95ccde4e294ce2e5e1bc4' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]